ChatGPT免代理静态网页聊天体验

😂 这篇文章最后更新于412天前,您需要注意相关的内容是否还可用。

使用 ChatGPT API 的静态问答聊天页面,由于 API 限制,无法连续对话。模型 davinci-003 较为准确速度也最慢,词数可以理解为响应内容字数限制,随机性值越大答案可能越偏离正确答案。

<html>
    <head>
        <meta charset="UTF-8">
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
            integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
        <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"
            integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous">
        </script>
        <script src="https://cdn.jsdelivr.net/npm/popper.js@1.12.9/dist/umd/popper.min.js"
            integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous">
        </script>
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"
            integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous">
        </script>
        <title>ChatGPT体验-极四维博客</title>
    </head>
    <body>
        <div class="container mt-5">
            <!-- <h2>GPT-3 Chat</h2> -->
            <form id="chat-form">
                <div class="form-group form-inline">
                    <label for="model_select">模型:</label>
                    <select class="form-control mx-3" id="model_select">
                        <option value="text-davinci-003">Davinci-3</option>
                        <option value="text-davinci-002">Davinci-2</option>
                        <option value="code-davinci-002">code-davinci</option>
                        <option value="text-curie-001">Curie</option>
                        <option value="text-babbage-001">Babbage</option>
                    </select>
                    <label for="token_number">词数:</label>
                    <input type="number" class="form-control mx-3" id="token_number" value="300"
                        placeholder="请输入Token数" />
                    <label for="temperature">随机:</label>
                    <input type="number" class="form-control mx-3" id="temperature" step="0.1" min="0" max="2"
                        value="0.5" />
                </div>

                <div class="form-group">
                    <label for="input_text">输入:</label>
                    <textarea class="form-control" id="input_text" rows="3"></textarea>
                </div>
                <div class="form-group">
                    <label for="output_text">输出:</label>
                    <textarea class="form-control" id="output_text" rows="3" readonly></textarea>
                </div>
                <button type="submit" class="btn btn-primary">提问</button>
                <a href='https://cway.top/post/1058.html' target="_blank"><button type="button" class="btn btn-success">帮助</button></a>
            </form>
        </div>

    </body>
    <script>
        document.getElementById('chat-form').addEventListener('submit', submitForm);

        function submitForm(event) {
            event.preventDefault();
            document.getElementById('output_text').value = "请稍后...";
            // 获取GPT API KEY见:https://platform.openai.com/account/api-keys
            const apiKey = "sk-xxxxxxxxxxxxxxxxxxxxx"; //填写你的chatgpt api key
            // 调用 GPT-3 API
            var input = document.getElementById("input_text").value;
            var model = document.getElementById("model_select").value;
            var tokenNum = document.getElementById("token_number").value;
            var temperature = document.getElementById("temperature").value;

            var xhr = new XMLHttpRequest();
            xhr.open("POST", "https://api.openai.com/v1/completions", true);
            xhr.setRequestHeader("Content-Type", "application/json");
            xhr.setRequestHeader("Authorization", `Bearer ${apiKey}`);

            xhr.onreadystatechange = function() {
                if (this.readyState === XMLHttpRequest.DONE && this.status === 200) {
                    var response = JSON.parse(this.responseText);
                    document.getElementById("output_text").value = response.choices[0].text.trim();
                }
            };

            var data = JSON.stringify({
                prompt: input,
                max_tokens: parseInt(tokenNum),
                temperature: parseFloat(temperature),
                n: 1,
                stop: "",
                model: model
            });

            xhr.send(data);
        }
    </script>
</html>