ARTICLE DETAIL

建站实战干货

来自一线的建站与推广经验沉淀,每一条都经过真实交付验证。

ChatGPT实战100例 - (13) 写一个属于自己的 ChatGPT 新版 WebUI

2026/9/26 11:09:21 拓冰建站 浏览量
ChatGPT实战100例 - (13) 写一个属于自己的 ChatGPT 新版 WebUI

文章目录

  • ChatGPT实战100例 - (13) 写一个属于自己的 ChatGPT 新版 WebUI
    • 一、ChatGPT(OpenAI)的新版API调用
      • 1.1 环境变量配置与调用
      • 1.2 新版api调用
      • 1.3 命令行流式输出
    • 二、Gradio制作自己的聊天WebUI
      • 2.1 流式WebUI
      • 2.2 样式调整
    • 三、总结
    • 参考

ChatGPT实战100例 - (13) 写一个属于自己的 ChatGPT 新版 WebUI

今时不同往日,openai的api已经到了1.xx版本,web ui王者gradio也早就推出了chat集成,写一个基于ai的chat变得如此简单。
不过,gradio的官方demo的openai版本过于老旧Creating A Chatbot Fast,没有跟进openai的api变动,让人无言以对。
因此,我们今天来写一个自己的chat webui。

一、ChatGPT(OpenAI)的新版API调用

1.1 环境变量配置与调用

1.xx版的openai的api调用,需要在环境变量中配置api的key。
主要是OPENAI_API_KEY和OPENAI_BASE_URL这两个

.env

OPENAI_API_KEY = sk-xxxxx
OPENAI_BASE_URL = https://api.xxx/v1 

两行代码搞定导入环境变量:

from dotenv import load_dotenv
load_dotenv()

1.2 新版api调用

from dotenv import load_dotenv
load_dotenv()from openai import OpenAI
client = OpenAI()def predict(message):history_openai_format = []history_openai_format.append({"role": "user", "content": message})completion = client.