前言
最近半年的时间内，大模型圈内不断涌现像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就像是种下一棵种子，然后耐心地浇水、施肥，直到它长成一棵可以遮风挡雨的大树。我们从零开始，一点点学习，一步步实践，终于让我们的“小树”——聊天机器人，能够听懂我们的话，还能给出像模像样的回答。 这趟旅程，我们遇到了不少难题，有时候数据太乱，有时候算法不给力，但就像解决生活中的问题一样，我们一次次尝试，一次次改进，最终看到了成果。这个小小的聊天机器人，虽然比不上真正的森林那么壮观，但它证明了只要我们用心去做，没有什么是不可能的。
