切换语言为:繁体
通过 Vue 实现一个简易 ChatGPT

通过 Vue 实现一个简易 ChatGPT

  • 爱糖宝
  • 2024-07-10
  • 2092
  • 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.