前言
最近半年的時間內，大模型圈內不斷涌現像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就像是種下一棵種子，然後耐心地澆水、施肥，直到它長成一棵可以遮風擋雨的大樹。我們從零開始，一點點學習，一步步實踐，終於讓我們的“小樹”——聊天機器人，能夠聽懂我們的話，還能給出像模像樣的回答。 這趟旅程，我們遇到了不少難題，有時候資料太亂，有時候演算法不給力，但就像解決生活中的問題一樣，我們一次次嘗試，一次次改進，最終看到了成果。這個小小的聊天機器人，雖然比不上真正的森林那麼壯觀，但它證明了只要我們用心去做，沒有什麼是不可能的。
