likes
comments
collection
share

还在使用套壳GPT网站？来动手搭建一个属于自己的GPT网站！

作者站长头像
站长
· 阅读数 25

引言

在本文中，我们将通过Vue 3构建一个GPT聊天应用。我们会逐步介绍如何配置Vue 3项目、使用vue-router实现单页应用的路由、使用TailwindCSS进行样式设计，以及与OpenAI的API进行集成，最终实现一个可以与GPT聊天的应用。

目录

  1. 项目需求分析
  2. 项目初始化
  3. 选择路由
  4. 引入TailwindCSS
  5. 实现API-KEY设置和聊天框功能
  6. 实现聊天功能
  7. 总结

项目需求分析

在做一个项目前，我们首先要对项目先进行分析，理解项目的需求

我们需要确保在URL改变时，不会刷新当前页面，这是单页应用的基本要求。我们将构建一个单页应用（SPA），其中使用vue-router实现路由功能。单页应用的特点是通过JavaScript动态更新页面，而不是完全重新加载页面。通过使用哈希路由（hash mode），我们可以实现这一点。哈希路由通过URL中的#符号来标识不同的页面状态，这样即使URL改变，也不会导致页面刷新。

  • #hash：URL中的哈希部分用于表示页面状态的变化。
  • hashChange事件：监听哈希变化，动态加载相应的组件。
  • router-view：根据当前路由显示相应的组件。

项目初始化

1.初始化Vue 3项目

首先，我们需要创建一个新的Vue 3项目：

npm init vite

按照提示完成项目初始化后，再安装全局依赖

npm i

2.安装vue-router

为了实现单页应用的路由功能，我们需要安装vue-router：

npm install vue-router

2.配置vue-router

在src目录下创建一个router目录，并在其中创建一个index.js文件：

// src/router/index.js
import { createRouter, createWebHashHistory } from 'vue-router'

const routes = [
    {
        path: '/',
        name: 'home',
        component: () => import('../views/Home.vue')
    },
    {
        path: '/about',
        name: 'about',
        component: () => import('../views/About.vue')
    }
]

const router = createRouter({
    history: createWebHashHistory(),
    routes
})

export default router

在main.js中引入并使用这个路由：

// src/main.js
import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import './assets/tailwind.css'

const app = createApp(App)
app.use(router)
app.mount('#app')

选择路由

在项目需求中，我们选择了createWebHashHistory作为路由模式。这样可以确保URL中的哈希变化不会刷新当前页面，这是单页应用的基本要求。使用哈希路由的好处在于兼容性更好，可以避免某些浏览器的刷新问题，并且哈希路由还具备原生的锚链接功���。

简述锚链接

锚链接（Anchor Links）是HTML中用于在同一页面内创建链接跳转的功能。通过锚链接，我们可以快速导航到页面内的特定位置。我们结合以下的代码来详述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>测试锚点</title>
</head>
<body>  
    <a name="yil"></a>
    <div style="height: 80vh; background-color: green;"></div>
    <div style="height: 80vh; background-color: red;"></div>
    <a href="" name="sanl"></a>
    <div style="height: 80vh; background-color: yellow;"></div>
    <div style="height: 80vh; background-color: brown;"></div>
    <div style="height: 80vh; background-color: pink;"></div>
    <a href="#sanl">上电梯</a>
    <a href="#yil">上一楼</a>
</body>
</html>

div标签内的内容只是为了填充页面，使得页面足够长以便展示锚链接的效果。每个div标签设置了不同的背景颜色和高度。

<a name="yil"></a>和<a name="sanl"></a>：定义了两个锚点，分别名为yil和sanl。这些锚点是页面内的目标位置，我们可以通过链接跳转到这些位置，且不会刷新网页。

还在使用套壳GPT网站？来动手搭建一个属于自己的GPT网站！

<a href="#sanl">上电梯</a>：这个链接会跳转到页面内名为sanl的锚点位置，即黄色背景色的div之前的空白位置。

<a href="#yil">上一楼</a>：这个链接会跳转到页面内名为yil的锚点位置，即绿色背景色的div之前的空白位置。

配置路由

在路由配置中，我们设置了两个路径：/和/about，分别对应Home和About页面。通过设置createWebHashHistory，URL将包含#符号，例如：localhost:5173/#/Home。

引入TailwindCSS

TailwindCSS的概念

TailwindCSS 是一个功能类优先的 CSS 框架，它提供了大量的实用工具类，可以直接在 HTML 中使用。只要在标签里的类名写上对应的样式，即可自动实现类名对应的CSS样式，原子css，外包的好帮手 95%的css不用写了！且真正的体现了CSS的语义化。

2. 安装TailwindCSS

使用以下命令安装TailwindCSS及其依赖：

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

3. 配置TailwindCSS

在tailwind.config.js文件中，指定需要使用TailwindCSS的文件路径：

// tailwind.config.js
export default {
  content: [
    "./index.html",
    "./src/**/*.{js,vue,jsx,tsx}"
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

在src/assets目录下创建一个tailwind.css文件，并引入TailwindCSS的基础样式、组件和工具类：

/* src/assets/tailwind.css */
@tailwind base;
@tailwind components;
@tailwind utilities;

4. 使用TailwindCSS类名

在Home.vue中，我们使用了大量的TailwindCSS类名来快速实现页面布局和样式：

<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-2">
            <div v-for="(item, index) in messageList.filter(v => v.role !== 'system')" :key="index" class="group flex flex-col px-4 py-3 rounded-lg">
                <div class="flex justify-between item-center mb-2">{{ item.role }}</div>
                <div>{{ item.content }}</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' : '请输入'" @keydown.enter="sendOrSave" />
                <button class="btn ml-4" :disabled="isTalking" @click="sendOrSave">保存</button>
            </div>
        </div>
    </div>
</template>

这些类名的规律就是一些样式属性的缩写，例如：

  • flex: 创建一个弹性布局容器。

  • flex-col: 使子元素在垂直方向排列。

  • h-screen: 使元素高度占满整个视口。

  • fixed: 将元素定位为固定位置。

  • w-full: 使元素宽度占满父容器。

  • items-baseline: 使子元素在基线对齐。

  • top-0: 将元素定位到父容器的顶部。

  • px-6, py-4: 设置内边距。

  • bg-gray-100: 设置背景颜色。 想更深入了解TailwindCSS,可查阅TailwindCSS中文文档

实现API Key设置和聊天框功能

在Home.vue中，我们设置了一个输入框，用户可以在其中输入API Key。当API Key保存后，输入框将切换为聊天模式，用户可以输入消息与GPT聊天。这就需要有多个状态了。

<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-2">
            <div v-for="(item, index) in messageList.filter(v => v.role !== 'system')" :key="index" class="group flex flex-col px-4 py-3 rounded-lg">
                <div class="flex justify-between item-center mb-2">{{ item.role }}</div>
                <div>{{ item.content }}</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' : '请输入'" @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'

const isConfig = ref(true)
const messageContent = ref('')
const isTalking = ref(false)

const saveAPIKey = (apiKey) => {
    localStorage.setItem('apiKey', apiKey)
    return true
}

const getApiKey = () => {
    return localStorage.getItem('apiKey')
}

onMounted(() => {
    if (getApiKey()) {
        isConfig.value = false
    }
})

const clickConfig = () => {
    isConfig.value = true
    messageContent.value = ''
}

const sendOrSave = () => {
    if (!messageContent.value.length) return
    if (isConfig.value) {
        if (saveAPIKey(messageContent.value.trim())) {
            isConfig.value = false
        }
        messageContent.value = ''
    } else {
        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
        })
        const data = await chat(messageList.value, getApiKey())
        messageList.value.push({
            role: 'assistant',
            content: data
        })
        messageContent.value = ""
    } catch (err) {
        console.error(err)
    } finally {
        isTalking.value = false
    }
}
</script>

<style>
</style>

  • isConfig: 用于控制当前是否处于API Key设置模式。初始值为true，表示进入页面时首先要求设置API Key。

  • messageContent: 绑定到输入框的值，用户输入的信息会实时更新到这个变量。

  • isTalking: 控制发送按钮是否禁用。在GPT生成内容过程中设置为true，请求完成后设置为false。

  • clickConfig: 点击“设置”按钮时调用，将isConfig设置为true，并清空messageContent。

  • sendOrSave: 根据isConfig的值决定是保存API Key还是发送消息。如果isConfig为true，则保存API Key，否则发送消息。

  • sendMessage: 调用chat函数与API通信，将用户消息和返回的回复添加到messageList中。

实现聊天功能

1. 编写chat.js

在src/libs目录下创建一个gpt.js文件，并编写与OpenAI API进行通信的函数：

// src/libs/gpt.js
export const chat = async (messages, apiKey) => {
    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: messages
            })
        })

        const data = await result.json()
        return data.choices[0].message.content
    } catch (err) {
        throw (err)
    }
}

2. 关联chat.js与Home.vue

在Home.vue中，我们已经导入并使用了chat.js中的chat函数。当用户输入消息并发送时，chat函数将被调用，发送请求到OpenAI的API，并将返回的消息添加到messageList中。

3. 测试应用

至此，我们已经完成了一个简单的Vue 3和TailwindCSS构建的GPT聊天应用。启动开发服务器并进行测试：

npm run dev

在浏览器中打开http://localhost:5173，输入API Key并开始与GPT聊天!

还在使用套壳GPT网站？来动手搭建一个属于自己的GPT网站！

还在使用套壳GPT网站？来动手搭建一个属于自己的GPT网站！

总结

通过本教程，我们学习了如何配置Vue 3项目、使用vue-router实现单页应用的路由、使用TailwindCSS进行样式设计，以及与OpenAI的API进行集成，最终实现一个可以与GPT聊天的应用。以后再也不需要进一些不安全的套壳网站，直接使用自己搭建的GPT网站！

转载自:https://juejin.cn/post/7389581452297928714
评论
请登录