前言
最近半年的时间内,大模型圈内不断涌现像GPT-4-1106-preview,GPT-4-Turbo,GPT-4o...等超强大的LLM,并不断迭代,现在的大模型已经不仅仅能够与用户进行文本互动,还能够文生成图,通过描述生成视频,生成图表等多种强大的功能。并且多模态支持:ChatGPT-4o 能够处理和理解音频、图像和文本数据。这种多模态能力使其在更广泛的应用场景中具有更强的适应性,例如复杂的图像分析、语音识别与处理等。 增强的实时推理能力:模型在实时处理和推理能力上有所提升,能够更快速和准确地响应用户的复杂查询和需求。
大模型实用性的大大增强,让chatgpt成为了大众化的选择,在生活中、工作中、以及在旅游购物中都能够给人们带来极大的帮助,所以ai大模型时代,我们应该拥抱AI,享受ai带来的福音,并合理利用它提升我们自己的能力。
所以今天,我们来分享一个简易的chatgpt页面如何完成。让我们自己写出属于自己的aigc页面
页面效果
(未登陆时,要进行apikey的输入)
(登陆后,可进行与chatgpt的聊天)
功能需求介绍
assistant-->为chatgpt助理角色,主要功能是为用户提供一些常用服务和信息,能够将回复内容显示在页面中。
user-->为用户角色,用户在输入框中输入的内容,将其需求传达给assistant,并显示在页面。
设置-->点击设置按钮,注销账号,重置apiKey,让用户重新登录。
apiKey登录-->当用户第一次进入页面时,输入框为apiKey登录输入框。
输入框-->当用户输入需求,点击回车/保存时,输入框停止相应。直到assistant响应回复显示到页面时
代码实现
我们这里使用vue完成界面渲染交互
页面渲染
<template>
<div class="flex flex-col h-screen">
<div class="flex flex-nowrap fixed w-full items-baseline
top-0 px-6 py-4 bg-gray-100">
<div class="text-2xl font-bold">
ChatGPT
</div>
<div class="ml-4 text-sm text-gray-500">
基于OpenAI的ChatGPT自然语言模型人工智能对话
</div>
<div class="ml-auto px-3 py-2 text-sm
cursor-pointer hover:bg-white rounded-md"
@click="clickConfig()"
>
设置
</div>
</div>
<div class="flex-1 mx-2 mt-20 mb-20">
<div v-for="item of messageList.filter((v)=>v.role!='system')"
class="group flex flex-col px-4 py-3 rounded-lg">
<div class="flex justify-between item-center mb-2">
{{item.role}}:
<div>
{{item.content}}
</div>
</div>
</div>
</div>
<div class="sticky bottom-0 w-full p-6 pb-8 bg-gray-100">
<div class="mb-2 text-sm text-gray-500" v-if="isConfig">
请输入API KEY:
</div>
<div class="flex">
<input
v-model="messageContent"
class="input flex-1"
:type="isConfig?'password':'text'"
:placeholder="isConfig?'sk-xxxxxx':'Please Input Your Question To Chatgpt'"
@keydown.enter="sendOrSave()"
/>
<button class="btn ml-4" :disabled="isTalking" @click="sendOrSave()">保存</button>
</div>
</div>
</div>
</template>
<script setup>
import { ref, onMounted } from 'vue'
import { chat } from '../libs/gpt'
onMounted(() => {
if (getApiKey()) {
isConfig.value = false
}
})
const saveAPIKey = (apiKey) => {
localStorage.setItem('apiKey', apiKey);
return true;
}
const getApiKey = () => {
return localStorage.getItem('apiKey');
}
const isConfig = ref(true) // true api-key 设置 false 聊天
const messageContent = ref('')
const isTalking = ref(false) // llm 正在返回
const clickConfig = () => {
isConfig.value = true
messageContent.value = ''
}
const sendOrSave = () => {
if (!messageContent.value.length) return ;
if (isConfig.value) {
// save api-key
if (saveAPIKey(messageContent.value.trim())) {
isConfig.value = false
}
messageContent.value = ''
} else {
// send message
sendMessage()
}
}
const messageList = ref([
{
role:'system',
content: "你是人工智能客服,请尽可能简洁回答问题"
},
{
role: 'assistant',
content: `你好,我是AI语言模型,我可以提供一些常用服务和信息,例如:
1. 翻译:我可以把中文翻译成英文,英文翻译成中文,还有其他一些语言翻译,比如法语、日语、西班牙语等。
2. 咨询服务:如果你有任何问题需要咨询,例如健康、法律、投资等方面,我可以尽可能为你提供帮助。
3. 闲聊:如果你感到寂寞或无聊,我们可以聊一些有趣的话题,以减轻你的压力。
请告诉我你需要哪方面的帮助,我会根据你的需求给你提供相应的信息和建议。
`
}
])
const sendMessage = async () => {
const message = messageContent.value.trim();
try {
isTalking.value = true
messageList.value.push({
role: 'user',
content: message
})
console.log(messageList.value);
const data = await chat(messageList.value, getApiKey())
messageList.value.push({
role: 'assistant',
content: data
})
messageContent.value = ""
} catch(err) {
} finally {
isTalking.value = false;
}
}
</script>
<style>
</style>
核心变量:
isConfig true api-key设置 false 聊天
messageContent 输入框内容
isTalking 判断是否正在生成回复
核心函数:
①onMounted():当组件初步渲染完成后,也就是页面展示出来时判断用户是否有保存apiKey
②sendOrSave():由于用户登录和输入问题是同一个input标签,所以该函数进行业务的分支判断。
③sendMessage():发送请求,将输入框的内容push给messageList,然后用封装好的chat(messages,apiKey)请求数据。
import { chat } from '../libs/gpt'
chat -- 封装访问chatpgt域名进行交互的功能
import OpenAI from "openai"
export const chat = async(messages,apiKey)=>{
//接受问题messages,apikey,返回content
try {
const result = await fetch("https://api.302.ai/v1/chat/completions",{
method: "POST",
headers: {
"Content-Type": "application/json",
// 授权信息 确认发起请求的客户端是否具备资源访问权限
"Authorization": `Bearer ${apiKey}`
},
body: JSON.stringify({
model:"gpt-3.5-turbo",
messages
})
})
const data = await result.json()
console.log(data);
return data.choices[0].message.content //返回回答的文本
} catch (e) {
print(e.message)
}
}
核心
①用post的http请求
②请求头中携带数据格式Content-Type,以及授权信息Authorization--确认发出请求的客户端是否具备权限
小结
构建简易版的ChatGPT就像是种下一棵种子,然后耐心地浇水、施肥,直到它长成一棵可以遮风挡雨的大树。我们从零开始,一点点学习,一步步实践,终于让我们的“小树”——聊天机器人,能够听懂我们的话,还能给出像模像样的回答。 这趟旅程,我们遇到了不少难题,有时候数据太乱,有时候算法不给力,但就像解决生活中的问题一样,我们一次次尝试,一次次改进,最终看到了成果。这个小小的聊天机器人,虽然比不上真正的森林那么壮观,但它证明了只要我们用心去做,没有什么是不可能的。