实战:30 行代码做一个网页端的 AI 聊天助手
2024/11/20 21:02:51
本文主要是介绍实战:30 行代码做一个网页端的 AI 聊天助手,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!
大家好啊,我是董董灿。
今天用不到 30 行代码,带你调用 OpenAI 的模型,同时在网页端部署一个可以用来聊天的聊天助手。
下面是我做成之后的助手截图:
我们话不多说,直接开始。
1、搞定 OpenAI 模型的接口调用
OpenAI 的模型接口的调用可以通过 from openai import OpenAI
这种导入 python 库的方式完成,但是在使用之前,你需要配置可用的 OPENAI_API_KEY。
关于如何配置 OPENAI_API_KEY,在我之前写的这篇文章中有详细的说明,你可以参考下。
当然,想做一个聊天助手不一定要使用 OpenAI 的模型。
你可以使用任何你熟悉的模型来完成对话功能,甚至可以使用本地下载好的模型,只要可以完成对话功能就行。
2、定义模型问答接口
本任务最重要且核心的内容,是你需要定义一个函数(接口),这个函数的作用是调用大模型来完成对话功能。
如下面代码中的第 13 行定义的 generate_response 函数,调用的是 OpenAI 的 gpt-4o-mini 模型。
import gradio as gr import os from openai import OpenAI def check_key(): open_api_key = os.getenv("OPENAI_API_KEY") if open_api_key is None: print("Error: Environment variable 'OPENAI_API_KEY' is not set. Exiting the program.") return False return True def generate_response(usr_input: str): if check_key() == False: return "You should set OPENAI_API_KEY first." client = OpenAI() completion = client.chat.completions.create( model="gpt-4o-mini", messages=[ {"role": "system", "content": "You are a helpful assistant."}, {"role": "user", "content": usr_input}, ], ) response = completion.choices[0].message.content return response
generate_response 函数的功能,便是输入你的问题(user_input),然后调用大模型完成对话,返回大模型的回答(response)。
注意,对于这个函数而言,输入和输出的类型都是字符串类型。
很多大模型原始的输出可能是一些自定义的类,类中包含了回答的字符串,这个时候你需要将回答字符串提取出来,作为 generate_response 的返回值。
比如,上面代码中的 24 行便是提取回答字符串的逻辑。
3、将问答接口部署到网页前端
接口部署逻辑我们采用 gradio 这个库。
gradio 是一个非常好用的、轻量级的机器学习 App 构建库。
关于这个库的介绍,你可以来官网(https://www.gradio.app/)学习使用。
对于本文中的聊天助手而言,我们只需要以下几行代码就可以完成,如下:
# 创建 Gradio 界面 UI = gr.Interface( fn=generate_response, inputs=gr.Textbox(lines=5, placeholder="请输入您的问题"), outputs="text", title="聊天助手 Via OpenAI (@董董灿)", description="在对话框输入信息和模型进行对话", examples=[ ["简单介绍下什么是大模型?"], ["法国的首都是什么?"], ["解释一下相对论."], ], ) # 启动界面 UI.launch()
上面代码中,最重要的就是将我们在第二步定义好的问答接口 generate_response 作为参数传递给 fn,其他参数不是很重要,你可以照抄,也可以自己来定义修改。
有了上面两段代码后,就可以直接运行代码了。
当代码运行后,gradio 库会提示网页部署的本地链接信息,如下:
这个时候,你只需要把给出的链接(比如上图中的 http://127.0.0.1:7860)复制到浏览器中访问,就可以跳出前端页面。
在跳出的前端页面左侧空白对话框中,输入你的问题(如上图中的“介绍下李白”)。
然后点击黄色按钮 Submit,就会调用 generate_response 接口进行对话,并将对话结果返回到右侧的回答区域。
至此,一个简单高效的聊天助手就制作完成了。
本文只是给出了一个示例,你可以在本文给出示例的基础上,开发更多有用好玩的大模型 App 出来。
我是一名 AI 攻城狮,如果你也想学习 AI ,欢迎你关注我的公众号,会有非常多好玩的AI技术分享~欢迎查看我的专栏 >>1. 专栏:计算机视觉入门与调优 , 2. 专栏:Transformer 通关秘籍
这篇关于实战:30 行代码做一个网页端的 AI 聊天助手的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!
- 2024-11-185分钟搞懂大模型的重复惩罚后处理
- 2024-11-18基于Ollama和pgai的个人知识助手项目:用Postgres和向量扩展打造智能数据库
- 2024-11-15我用同一个提示测试了4款AI工具,看看谁设计的界面更棒
- 2024-11-15深度学习面试的时候,如何回答1x1卷积的作用
- 2024-11-15检索增强生成即服务:开发者的得力新帮手
- 2024-11-15技术与传统:人工智能时代的最后一袭纱丽
- 2024-11-15未结构化数据不仅仅是给嵌入用的:利用隐藏结构提升检索性能
- 2024-11-15Emotion项目实战:新手入门教程
- 2024-11-157 个开源库助你构建增强检索生成(RAG)、代理和 AI 搜索
- 2024-11-15Vertex AI上下文缓存与Gemini模型详解