2024最新使用Python搭建个人Chat流式输出网站（包含源码、免费使用网址、以及免费测试apikey）快来体验吧！！！

本期文章为纯免费资源分享，欢迎交流分享你的学习经验！2023年12月30日最新python实现流式输出gpt网站搭建的源码：

目录

1.python源码

2.网站效果演示

3.html源码

---

1.python后端源码

如下为python后端源码：

from flask import Flask, render_template, request,  Response, jsonify
import openai  #openai使用0.28.0版本，urllib3使用1.26.2版本
import random

# 设置代理网址
openai.api_base = "https://api.openai-proxy.com/v1"

# 替换为您自己的OpenAI API密钥列表，如下key供各位测试，2.25已更新，开学快乐！用完提醒我，哈哈~~~
api_keys = [
    "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",

]
# 创建Flask应用程序
app = Flask(__name__)
# 定义可供选择的模型，已经更新gpt所有14个模型
available_models = {
    "gpt-3.5-turbo-0125": "GPT-3.5-Turbo-0125(4096tokens)",
    "gpt-3.5-turbo-1106": "GPT-3.5-Turbo-1106(4096tokens)",
    "gpt-3.5-turbo": "GPT-3.5-Turbo(4096tokens)",
    "gpt-3.5-turbo-16k": "GPT-3.5-Turbo-16k(16385tokens)",
    "gpt-3.5-turbo-0613": "GPT-3.5-Turbo-0613(4096tokens)",
    "gpt-3.5-turbo-16k-0613": "GPT-3.5-Turbo-16k-0613(16385tokens)",
    "gpt-3.5-turbo-0301": "GPT-3.5-Turbo-0301(4096tokens)",
    "gpt-4-turbo-preview": "GPT-4-Turbo-preview(128000tokens)",
    "gpt-4-0125-preview": "GPT-4-0125-preview(128000tokens)",
    "gpt-4-1106-preview": "GPT-4-1106-preview(128000tokens)",
    "gpt-4-vision-preview": "GPT-4-vision-preview(128000tokens)",
    "gpt-4": "GPT-4(8192tokens)",
    "gpt-4-0613": "GPT-4-0613(8192tokens)",
    "gpt-4-32k": "GPT-4-32k(32768tokens)",
    "gpt-4-32k-0613": "GPT-4-32k-0613(32768tokens)",
    "gpt-4-0314": "GPT-4-0314(8192tokens)",
    "gpt-4-32k-0314": "GPT-4-32k-0314(32768tokens)",
}

messages = []

@app.route('/')
def index():
    return render_template('8.html', models=available_models)

@app.route('/clear_history', methods=['POST'])
def clear_history():
    messages.clear()  # 清除所有对话历史
    return jsonify({"message": "对话历史已清除"})

@app.route('/get_response', methods=['POST'])
def get_response():
    user_input = request.json.get('user_input')
    selected_model = request.json.get('selected_model')
    system_message = request.json.get('system_message')
    temperature = float(request.json.get('temperature'))
    max_tokens = int(request.json.get('max_tokens'))
    continuous_chat = request.json.get('continuous_chat')
    print("用户输入内容：", user_input)

    if continuous_chat == "false":
        messages.clear()  # 只有在禁用连续对话时清空消息列表
        messages.append({"role": "system", "content": system_message})
        messages.append({"role": "user", "content": user_input})
    else:
        messages.append({"role": "system", "content": system_message})
        messages.append({"role": "user", "content": user_input})
    selected_api_key = random.choice(api_keys)
    openai.api_key = selected_api_key.strip()
    print(openai.api_key)

    if len(messages) > 2:
        messages.pop(0)

    response = openai.ChatCompletion.create(
        model=selected_model,
        messages=messages,
        temperature=temperature,
        max_tokens=max_tokens,
        stream=True
    )

    def get_stream(tar_get_response):
        for chunk in tar_get_response:
            chunk_message = chunk['choices'][0]['delta']
            print(chunk_message)
            if chunk_message != "":
                try:
                    content = chunk_message["content"]
                    for line in content.split("\n"):
                        messages.append({"role": "assistant", "content": line})
                        yield line
                        print("GPT回复内容：", line)
                except:
                    yield "\n"
    response = Response(get_stream(response),content_type='text/html')
    return response

if __name__ == '__main__':
    app.run('0.0.0.0', 80)

2.网站效果演示

源码如上（3.2已更新测试apikey），包括连续对话等功能，功能展示如下图，如下网站分别为3.5和4.0（余额有限，速来体验！），均为本人自己搭建网站，可免费使用。

GPT-3.5-Turbo：

GPT-4-Turbo：

ps：免费福利放送中，欢迎体验：

免费3.5https://6.ccfgpt.cn

下面也是本人搭建的几个gpt网站，分别是GPT3.5（余额总共400$,12.26更新：nextweb添加gemini模型，12.30更新另一种风格的gpt3.5网页）和GPT4、Gemini Pro，比较实用，目前完全免费，可以使用所有gpt模型，无须翻墙和填写密钥，目前GPT4的余额有限(12.26充值!!！余额10$，解锁dalle3以及各种插件体验)，先到先体验哦！！设置好gpt模型（推荐1106模型，速度快）等参数直接就可以使用gpt进行对话，欢迎各位朋友们前来体验，可以加q群学习交流（226848325）：

Chat-3.5https://ccf666.cn

Chat-bothttps://supergpt.shop

 

无限制使用gemini模型：

Gemini Prohttp://ccfgpt.cn

3.html前端源码

最后html前端的基本模板如下，可以添加自己需要的样式和风格：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>GPT-3.5</title>
    <style>
    </style>
</head>
<body>
<div class="container">
<h1>GPT-3.5</h1>
<div>
<label class="conversation-label">系统角色：</label><br>
<input type="text" id="system-message" class="input-box" placeholder="输入gpt的预设角色">
</div>
<div>
<label class="conversation-label">用户输入框：</label><br>
<textarea id="user-input" class="input-box" placeholder="2023.11.08已更流式快速响应，快来体验吧！！！   "></textarea>
</div>
<div>
<label class="conversation-label">选择GPT模型（5种）：</label><br>
<select id="model-select" class="input-box">
{% for key, value in models.items() %}
<option value="{{ key }}">{{ value }}</option>
{% endfor %}
</select>
</div>
<div>
<label class="conversation-label">温度（Temperature）：</label><br>
<input type="float" id="temperature" class="input-box" placeholder="范围>=0，接近0倾向连贯性，越大倾向多样性，建议0-1">
</div>
<div>
<label class="conversation-label">最大令牌数（Max-Tokens）：</label><br>
<input type="int" id="max-tokens" class="input-box" placeholder="最大范围4000/16000，默认模型最大不超过4000，代表对话总字数">
</div>
<div>
  <div class="checkbox-container">
    <label for="continuous-chat" class="conversation-label">开启连续对话：</label>
    <input type="checkbox" id="continuous-chat">
  </div>
</div>
<div>
<label class="response-label">对话消息记录框：</label><br>
<!-- 修改逐个字显示的文本框 -->
<div id="response-text" class="response-box"></div>
</div>
<br>
<div class="button-container">
<button id="send-button" class="button">发送</button>
<button id="clear-button" class="button clear-button">清空</button>
</div>
<!-- 嵌入base64编码的音频数据 -->
<audio id="notification-audio" preload="auto">
<source src="data:audio/mp3;base64,base64编码" type="audio/mp3" />
</audio>
</div>
<div class="author-info">BY-中北锋哥-2023.12.08</div>
<script>
  document.addEventListener("DOMContentLoaded", function(event) {
    // 设置默认值
    document.getElementById("system-message").value = "You are a helpful assistant.";
    document.getElementById("temperature").value = "0.5";
    document.getElementById("max-tokens").value = "3600";
  });

  document.getElementById("send-button").addEventListener("click", function () {
    // 获取用户输入和选定的模型
    var user_input = document.getElementById("user-input").value;
    var selected_model = document.getElementById("model-select").value;
    var system_message = document.getElementById("system-message").value;
    var temperature = parseFloat(document.getElementById("temperature").value);
    var max_tokens = parseInt(document.getElementById("max-tokens").value);
    var continuous_chat = document.getElementById("continuous-chat").checked; // 获取连续对话复选框状态

    // 检查用户输入是否为空
    if (user_input === "") {
      alert("请输入有效的消息内容。");
      return; // 不发送请求
    }

    // 发送请求到服务器
    fetch("/get_response", {
      method: "POST",
      body: JSON.stringify({
        user_input: user_input,
        selected_model: selected_model,
        system_message: system_message,
        temperature: temperature,
        max_tokens: max_tokens,
        continuous_chat: continuous_chat
      }),
      headers: {
        "Content-Type": "application/json" // 更新 Content-Type
      }
    })
    .then(response => response.body.getReader()) // 获取可读流
    .then(reader => {
      // 获取要逐个字显示的文本框
      var responseTextElement = document.getElementById("response-text");

      // 创建一个包含用户消息的新对话条目
      var userMessage = document.createElement("div");
      userMessage.className = "user-message";
      userMessage.textContent = "用户：" + user_input;
      responseTextElement.appendChild(userMessage);

      // 创建一个包含GPT回复的新对话条目
      var gptResponse = document.createElement("div");
      gptResponse.className = "gpt-response";
      gptResponse.textContent = "GPT3.5: ";
      responseTextElement.appendChild(gptResponse);

      // 逐个字逐个字地将GPT回复添加到对话框中
      const decoder = new TextDecoder();
      reader.read().then(function processText({ done, value }) {
        if (done) {
          return;
        }
        gptResponse.textContent += decoder.decode(value);
        responseTextElement.scrollTop = responseTextElement.scrollHeight; // 滚动到底部
        reader.read().then(processText);
      });

      // 清空用户输入框
      document.getElementById("user-input").value = "";
    })
    .catch(error => {
      console.error(error);
      // 如果发生错误，弹出错误提示框
      alert("发生错误：" + error.message);
    });
  });
//清除tokens
 document.addEventListener("DOMContentLoaded", function () {
  const clearButton = document.getElementById("clear-button");

  clearButton.addEventListener("click", function () {
    // 向服务器发送清除请求
    fetch("/clear_history", {
      method: "POST",
    })
      .then((response) => response.json())
      .then((data) => {
// 清空用户输入和逐个字显示的文本框
            document.getElementById("user-input").value = "";
            document.getElementById("response-text").innerHTML = "";
      })
      .catch((error) => {
        console.error("清除请求失败: ", error);
      });
  });
});

 
</script>
</body>
</html>

感谢各位朋友阅读，下期再见！！！