feat: 添加后端接口
This commit is contained in:
parent
50c9288802
commit
d796e10ec6
|
@ -4,6 +4,7 @@
|
|||
"private": true,
|
||||
"scripts": {
|
||||
"dev": "vite",
|
||||
"service": "esno ./service/index.ts",
|
||||
"build": "run-p type-check build-only",
|
||||
"preview": "vite preview",
|
||||
"build-only": "vite build",
|
||||
|
@ -22,12 +23,17 @@
|
|||
"@iconify/json": "^2.2.19",
|
||||
"@iconify/vue": "^4.1.0",
|
||||
"@types/babel__core": "^7.20.0",
|
||||
"@types/express": "^4.17.17",
|
||||
"@types/node": "^18.11.12",
|
||||
"@vitejs/plugin-vue": "^4.0.0",
|
||||
"@vitejs/plugin-vue-jsx": "^3.0.0",
|
||||
"autoprefixer": "^10.4.13",
|
||||
"axios": "^1.3.2",
|
||||
"chatgpt": "^4.2.0",
|
||||
"dotenv": "^16.0.3",
|
||||
"eslint": "^8.22.0",
|
||||
"esno": "^0.16.3",
|
||||
"express": "^4.18.2",
|
||||
"less": "^4.1.3",
|
||||
"npm-run-all": "^4.1.5",
|
||||
"postcss": "^8.4.21",
|
||||
|
|
692
pnpm-lock.yaml
692
pnpm-lock.yaml
File diff suppressed because it is too large
Load Diff
|
@ -0,0 +1,41 @@
|
|||
import dotenv from 'dotenv'
|
||||
import { ChatGPTAPI } from 'chatgpt'
|
||||
import express from 'express'
|
||||
|
||||
dotenv.config()
|
||||
|
||||
const app = express()
|
||||
|
||||
app.use(express.json())
|
||||
|
||||
async function chatAPI(message: string) {
|
||||
if (!message)
|
||||
throw new Error('Message is not defined')
|
||||
|
||||
if (!process.env.OPENAI_API_KEY)
|
||||
throw new Error('OPENAI_API_KEY is not defined in .env file')
|
||||
|
||||
try {
|
||||
const api = new ChatGPTAPI({ apiKey: process.env.OPENAI_API_KEY })
|
||||
const res = await api.sendMessage(message)
|
||||
return res
|
||||
}
|
||||
catch (error) {
|
||||
return error
|
||||
}
|
||||
}
|
||||
|
||||
app.all('*', (req, res, next) => {
|
||||
res.header('Access-Control-Allow-Origin', '*')
|
||||
res.header('Access-Control-Allow-Headers', 'Content-Type')
|
||||
res.header('Access-Control-Allow-Methods', '*')
|
||||
next()
|
||||
})
|
||||
|
||||
app.listen(3002, () => globalThis.console.log('Server is running on port 3002'))
|
||||
|
||||
app.post('/chat', async (req, res) => {
|
||||
const { message } = req.body
|
||||
const response = await chatAPI(message)
|
||||
res.send(response)
|
||||
})
|
|
@ -7,10 +7,8 @@ import Chat from '@/views/Chat/index.vue'
|
|||
<template>
|
||||
<NConfigProvider :locale="zhCN" :date-locale="dateZhCN" class="h-full" preflight-style-disabled>
|
||||
<NaiveProvider>
|
||||
<div class="flex h-full">
|
||||
<div class="w-[700px] h-[600px] m-auto">
|
||||
<Chat />
|
||||
</div>
|
||||
<div class="h-full p-4">
|
||||
<Chat />
|
||||
</div>
|
||||
</NaiveProvider>
|
||||
</NConfigProvider>
|
||||
|
|
|
@ -0,0 +1,4 @@
|
|||
interface ImportMetaEnv {
|
||||
/** api url */
|
||||
readonly VITE_GLOB_API_URL: string;
|
||||
}
|
|
@ -5,6 +5,7 @@ interface Props {
|
|||
user?: boolean
|
||||
date?: string
|
||||
message?: string
|
||||
error?: boolean
|
||||
}
|
||||
|
||||
defineProps<Props>()
|
||||
|
@ -19,12 +20,12 @@ defineProps<Props>()
|
|||
<img v-if="user" src="@/assets/avatar.jpg" class="object-cover w-full h-full " alt="avatar">
|
||||
<SvgIcon v-else local-icon="logo" class="text-[26px]" />
|
||||
</div>
|
||||
<div class="flex flex-col text-sm" :class="[{ 'items-end': user }]">
|
||||
<div class="flex flex-col flex-1 text-sm" :class="[{ 'items-end': user }]">
|
||||
<span class="text-xs text-[#b4bbc4]">
|
||||
{{ date }}
|
||||
</span>
|
||||
<div class="p-2 mt-2 rounded-md" :class="[user ? 'bg-[#d2f9d1]' : 'bg-[#f4f6f8]']">
|
||||
{{ message }}
|
||||
<span class="leading-relaxed" :class="error ?? 'text-red-500'" v-html="message" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
|
@ -1,36 +1,36 @@
|
|||
<script setup lang='ts'>
|
||||
import { onMounted, ref } from 'vue'
|
||||
import { NButton, NInput, NScrollbar, useMessage } from 'naive-ui'
|
||||
import Message from './components/Message.vue'
|
||||
import { NButton, NInput, useMessage } from 'naive-ui'
|
||||
import Message from './Message.vue'
|
||||
import { fetchChatAPI } from './request'
|
||||
import { SvgIcon } from '@/components'
|
||||
|
||||
interface ListProps {
|
||||
date: string
|
||||
message: string
|
||||
user?: boolean
|
||||
error?: boolean
|
||||
}
|
||||
|
||||
const scrollRef = ref<HTMLDivElement>()
|
||||
|
||||
const ms = useMessage()
|
||||
|
||||
const value = ref('')
|
||||
|
||||
const loading = ref(false)
|
||||
|
||||
const list = ref<{
|
||||
date: string
|
||||
message: string
|
||||
user?: boolean
|
||||
}[]>([])
|
||||
const list = ref<ListProps[]>([])
|
||||
|
||||
onMounted(initChat)
|
||||
|
||||
function initChat() {
|
||||
list.value = [
|
||||
{
|
||||
date: '1 minute ago',
|
||||
message: 'Hi, I am ChatGPT, a chatbot based on GPT-3.',
|
||||
user: false,
|
||||
},
|
||||
]
|
||||
addMessage('Hi, I am ChatGPT, a chatbot based on GPT-3.', false)
|
||||
}
|
||||
|
||||
function handleClear() {
|
||||
list.value = []
|
||||
setTimeout(initChat, 500)
|
||||
setTimeout(initChat, 200)
|
||||
}
|
||||
|
||||
function handleEnter(event: KeyboardEvent) {
|
||||
|
@ -43,58 +43,64 @@ async function handleSubmit() {
|
|||
ms.warning('Please enter a message')
|
||||
return
|
||||
}
|
||||
loading.value = true
|
||||
list.value.push({ date: '1 minute ago', message: value.value, user: true })
|
||||
const message = await mock()
|
||||
value.value = ''
|
||||
list.value.push({ date: '1 minute ago', message, user: false })
|
||||
loading.value = false
|
||||
|
||||
addMessage(value.value, true)
|
||||
|
||||
try {
|
||||
loading.value = true
|
||||
const { text } = await fetchChatAPI(value.value)
|
||||
value.value = ''
|
||||
addMessage(text, false)
|
||||
}
|
||||
catch (error: any) {
|
||||
addMessage(error.message ?? 'Request failed, please try again later.', false, true)
|
||||
}
|
||||
finally {
|
||||
loading.value = false
|
||||
scrollRef.value && (scrollRef.value.scrollTop = scrollRef.value.scrollHeight)
|
||||
}
|
||||
}
|
||||
|
||||
function mock(): Promise<string> {
|
||||
return new Promise((resolve) => {
|
||||
setTimeout(() => {
|
||||
const message = 'ChatGPT 是一个基于深度学习的对话系统,可以用于自动生成聊天机器人的回答。它可以用于一些客服的工作,可以帮助客服团队处理大量的常见问题,从而提高工作效率。'
|
||||
resolve(message)
|
||||
}, 2000)
|
||||
function addMessage(message: string, user = false, error = false) {
|
||||
list.value.push({
|
||||
date: new Date().toLocaleString(),
|
||||
message,
|
||||
user,
|
||||
error,
|
||||
})
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="h-full p-4">
|
||||
<div class="flex flex-col h-full overflow-hidden border rounded-md shadow-md">
|
||||
<header class="flex items-center justify-between p-4">
|
||||
<div>会话</div>
|
||||
<div class="flex flex-col h-full overflow-hidden border rounded-md shadow-md">
|
||||
<header class="flex items-center justify-between p-4">
|
||||
<div>会话</div>
|
||||
<div>
|
||||
<button
|
||||
class="w-[40px] h-[40px] rounded-full hover:bg-neutral-100 transition flex justify-center items-center"
|
||||
@click="handleClear"
|
||||
>
|
||||
<SvgIcon icon="ri:delete-bin-6-line" />
|
||||
</button>
|
||||
</div>
|
||||
</header>
|
||||
<main class="flex-1 overflow-hidden border-y">
|
||||
<div ref="scrollRef" class="h-full p-4 overflow-hidden overflow-y-auto">
|
||||
<div>
|
||||
<button
|
||||
class="w-[40px] h-[40px] rounded-full hover:bg-neutral-100 transition flex justify-center items-center"
|
||||
@click="handleClear"
|
||||
>
|
||||
<SvgIcon icon="ri:delete-bin-6-line" />
|
||||
</button>
|
||||
<Message
|
||||
v-for="(item, index) of list" :key="index" :date="item.date" :message="item.message"
|
||||
:user="item.user"
|
||||
/>
|
||||
</div>
|
||||
</header>
|
||||
<main class="flex-1 overflow-hidden border-y">
|
||||
<div class="h-full">
|
||||
<NScrollbar class="h-full p-4">
|
||||
<div>
|
||||
<Message
|
||||
v-for="(item, index) of list" :key="index" :date="item.date" :message="item.message"
|
||||
:user="item.user"
|
||||
/>
|
||||
</div>
|
||||
</NScrollbar>
|
||||
</div>
|
||||
</main>
|
||||
<footer class="p-4">
|
||||
<div class="flex items-center justify-between space-x-2">
|
||||
<NInput v-model:value="value" placeholder="Type a message" :disabled="loading" @keyup="handleEnter" />
|
||||
<NButton type="primary" :loading="loading" @click="handleSubmit">
|
||||
<SvgIcon icon="ri:send-plane-fill" />
|
||||
</NButton>
|
||||
</div>
|
||||
</footer>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
<footer class="p-4">
|
||||
<div class="flex items-center justify-between space-x-2">
|
||||
<NInput v-model:value="value" placeholder="Type a message" :disabled="loading" @keyup="handleEnter" />
|
||||
<NButton type="primary" :loading="loading" @click="handleSubmit">
|
||||
<SvgIcon icon="ri:send-plane-fill" />
|
||||
</NButton>
|
||||
</div>
|
||||
</footer>
|
||||
</div>
|
||||
</template>
|
||||
|
|
|
@ -0,0 +1,27 @@
|
|||
import axios from 'axios'
|
||||
|
||||
async function fetchChatAPI(message: string) {
|
||||
if (!message || message.trim() === '')
|
||||
return Promise.reject(new Error('Message is empty'))
|
||||
|
||||
try {
|
||||
const { status, data } = await axios.post(
|
||||
'http://192.168.110.170:3002/chat',
|
||||
{ message },
|
||||
)
|
||||
|
||||
if (status === 200) {
|
||||
if (data.text)
|
||||
return Promise.resolve(data)
|
||||
else if (data.statusText)
|
||||
return Promise.reject(new Error(data.statusText))
|
||||
}
|
||||
|
||||
return Promise.reject(new Error('Request failed'))
|
||||
}
|
||||
catch (error) {
|
||||
return Promise.reject(error)
|
||||
}
|
||||
}
|
||||
|
||||
export { fetchChatAPI }
|
Loading…
Reference in New Issue