切換語言為:簡體
透過 Vue 實現一個簡易 ChatGPT

透過 Vue 實現一個簡易 ChatGPT

  • 爱糖宝
  • 2024-07-10
  • 2093
  • 0
  • 0

前言

最近半年的時間內,大模型圈內不斷涌現像GPT-4-1106-preview,GPT-4-Turbo,GPT-4o...等超強大的LLM,並不斷迭代,現在的大模型已經不僅僅能夠與使用者進行文字互動,還能夠文生成圖,透過描述生成影片,生成圖表等多種強大的功能。並且多模態支援:ChatGPT-4o 能夠處理和理解音訊、影象和文字資料。這種多模態能力使其在更廣泛的應用場景中具有更強的適應性,例如複雜的影象分析、語音識別與處理等。 增強的實時推理能力:模型在實時處理和推理能力上有所提升,能夠更快速和準確地響應使用者的複雜查詢和需求。

透過 Vue 實現一個簡易 ChatGPT

大模型實用性的大大增強,讓chatgpt成爲了大眾化的選擇,在生活中、工作中、以及在旅遊購物中都能夠給人們帶來極大的幫助,所以ai大模型時代,我們應該擁抱AI,享受ai帶來的福音,併合理利用它提升我們自己的能力。

所以今天,我們來分享一個簡易的chatgpt頁面如何完成。讓我們自己寫出屬於自己的aigc頁面

頁面效果

透過 Vue 實現一個簡易 ChatGPT

(未登陸時,要進行apikey的輸入)

透過 Vue 實現一個簡易 ChatGPT

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

0則評論

您的電子郵件等資訊不會被公開,以下所有項目均必填

OK! You can skip this field.