Compare commits

..

24 Commits

Author SHA1 Message Date
Wong Saang
d9b1ece762 Merge pull request #7 from WongSaang/client-only
Front-end and Back-end Separation
2023-02-24 16:36:26 +08:00
Rafi
000e9f170f Update readme 2023-02-24 16:32:15 +08:00
Rafi
d96b5ad26a Improve the construction method 2023-02-24 14:48:39 +08:00
Rafi
03d7dc2589 hold conversations 2023-02-23 22:59:58 +08:00
Rafi
8685c8e87f feat: auth plugin 2023-02-23 18:36:04 +08:00
Rafi
49d634987d change api 2023-02-22 22:23:10 +08:00
Rafi
3e46512c15 feat: auth plugin 2023-02-22 16:50:53 +08:00
Rafi
eb7f062144 feat: auth plugin 2023-02-21 21:27:00 +08:00
Rafi
3c7d45154e remove server side 2023-02-21 14:13:22 +08:00
Rafi
13798e668a update demo 2023-02-16 18:19:28 +08:00
Wong Saang
d431048dc4 Merge pull request #5 from WongSaang/dev
feat: i18n
2023-02-16 17:55:03 +08:00
Rafi
9215965d45 feat: i18n
Add simplified Chinese translation
2023-02-16 17:34:40 +08:00
Rafi
66767d9352 feat: i18n config 2023-02-15 18:20:49 +08:00
Rafi
5abd5edba5 i18n config 2023-02-14 21:24:33 +08:00
Rafi
233eb9c27a feat: i18n 2023-02-14 18:32:49 +08:00
Rafi
5201349363 fix error when clicking the stop button and optimize SSE logic 2023-02-14 15:49:44 +08:00
Rafi
cdd8a86de0 Add feedback buttons 2023-02-13 21:21:47 +08:00
Rafi
96902c9e14 Modify the background color of the theme menu to white to solve the problem of not being able to see the menu 2023-02-13 21:12:46 +08:00
Rafi
b10fafd6a8 feat: Change the location of the snackbar to the top 2023-02-13 21:01:39 +08:00
Rafi
58e92bfe84 feat: Add a welcome screen 2023-02-13 20:55:50 +08:00
Rafi
efd1c96852 Add license to package.json 2023-02-13 14:30:10 +08:00
Rafi
1ee3469978 Abandoning sqlite cache 2023-02-13 14:29:01 +08:00
Wong Saang
65629ca5a6 Merge pull request #2 from Afeigege/main
fix: Send button doesn't work, input box doesn't wrap on mobile
2023-02-13 12:57:11 +08:00
Afeigege
f64a45c0ee fix: Send button doesn't work, input box doesn't wrap on mobile 2023-02-13 12:47:30 +08:00
31 changed files with 1419 additions and 1277 deletions

View File

@@ -32,4 +32,4 @@ jobs:
with:
context: .
push: true
tags: wongsaang/chatgpt-ui:latest,wongsaang/chatgpt-ui:${{ github.ref_name }}
tags: wongsaang/chatgpt-ui-client:latest,wongsaang/chatgpt-ui-client:${{ github.ref_name }}

View File

@@ -8,18 +8,15 @@ RUN yarn install
COPY . .
RUN yarn build
RUN yarn generate
FROM node:18-alpine3.16
ENV NITRO_HOST=0.0.0.0
ENV NITRO_PORT=80
FROM nginx:alpine
WORKDIR /app
COPY --from=builder /app/.output .
COPY --from=builder /app/.output/public .
EXPOSE 80
COPY nginx.conf /etc/nginx/templates/default.conf.template
ENTRYPOINT ["node", "server/index.mjs"]
EXPOSE 80

View File

@@ -4,17 +4,81 @@
# ChatGPT UI
A web client for ChatGPT, using OpenAI's API. The implementation of the interface part uses [waylaidwanderer/node-chatgpt-api](https://github.com/waylaidwanderer/node-chatgpt-api)
---
This project is based on [nuxt3](https://nuxt.com/docs/getting-started/introduction)
A web client for ChatGPT, using OpenAI's API.
## Quick start with docker
```bash
docker run -p 80:80 wongsaang/chatgpt-ui:latest
## 📢Updates
---
Version 2 is a major update that separates the backend functionality as an independent project, hosted at [chatgpt-ui-server](https://github.com/WongSaang/chatgpt-ui-server).
If you still wish to use the old version, please visit the [v1 branch](https://github.com/WongSaang/chatgpt-ui/tree/v1).
Version 2 introduces the following new features:
- 😉 Separation of the frontend and backend, with the backend now using the Python-based Django framework.
- 😘 User authentication, supporting multiple users.
- 😀 Ability to store data in an external database (defaulting to Sqlite).
- 😎 Session persistence, allowing the API to answer questions based on your context.
## Quick start with Docker Compose
---
### Run services
Below is a docker-compose.yml template:
```yaml
version: '3'
services:
client:
image: wongsaang/chatgpt-ui-client:latest
environment:
- SERVER_DOMAIN=http://backend:8000
depends_on:
- backend
volumes:
- backend_static:/app/static
ports:
- '80:80'
networks:
- chatgpt_ui_network
backend:
image: wongsaang/chatgpt-ui-server:latest
environment:
# - DB_URL=postgres://postgres:postgrespw@localhost:49153/chatgpt # If this parameter is not set, the built-in Sqlite will be used by default. It should be noted that if you do not connect to an external database, the data will be lost after the container is destroyed.
- DJANGO_SUPERUSER_USERNAME=admin # default superuser name
- DJANGO_SUPERUSER_PASSWORD=password # default superuser password
- DJANGO_SUPERUSER_EMAIL=admin@example.com # default superuser email
volumes:
- backend_static:/app/static
ports:
- '8000:8000'
networks:
- chatgpt_ui_network
networks:
chatgpt_ui_network:
driver: bridge
volumes:
backend_static:
```
### After running
After running the services, you can access the web client at http://localhost, and an admin panel at http://localhost/admin.
Before you can start chatting, you need to log in to the admin panel to add an OpenAI API key. In the Settings model, add a record with the name "openai_api_key" and the value as your API key.
## Development
---
### Setup
Make sure to install the dependencies:

67
app.vue
View File

@@ -1,67 +0,0 @@
<script setup>
const runtimeConfig = useRuntimeConfig()
const colorMode = useColorMode()
const drawer = ref(null)
const themes = ref([
{ title: 'Light', value: 'light' },
{ title: 'Dark', value: 'dark' },
{ title: 'System', value: 'system'}
])
const setTheme = (theme) => {
colorMode.preference = theme
}
</script>
<template>
<v-app
:theme="$colorMode.value"
>
<v-navigation-drawer
v-model="drawer"
>
<v-list>
<ModelDialog/>
</v-list>
<template v-slot:append>
<v-divider></v-divider>
<v-list>
<ApiKeyDialog/>
<v-menu
>
<template v-slot:activator="{ props }">
<v-list-item
v-bind="props"
rounded="xl"
:prepend-icon="$colorMode.value === 'light' ? 'light_mode' : 'dark_mode'"
title="Theme mode"
></v-list-item>
</template>
<v-list>
<v-list-item
v-for="(theme, idx) in themes"
:key="idx"
@click="setTheme(theme.value)"
>
<v-list-item-title>{{ theme.title }}</v-list-item-title>
</v-list-item>
</v-list>
</v-menu>
</v-list>
</template>
</v-navigation-drawer>
<v-app-bar
class="d-lg-none"
>
<v-app-bar-nav-icon @click="drawer = !drawer"></v-app-bar-nav-icon>
<v-toolbar-title>{{ runtimeConfig.public.appName }}</v-toolbar-title>
</v-app-bar>
<v-main>
<NuxtPage/>
</v-main>
</v-app>
</template>

View File

@@ -10,17 +10,17 @@
prepend-icon="vpn_key"
color="primary"
>
Set OpenAI Api Key
{{ $t('setApiKey') }}
</v-list-item>
</template>
<v-card>
<v-card-title>
<span class="text-h5">OpenAI Api Key</span>
<span class="text-h5">{{ $t('openAIApiKey') }}</span>
</v-card-title>
<v-divider></v-divider>
<v-card-text>
<div>
Get a key:
{{ $t('getAKey') }}:
<a target="_blank" href="https://platform.openai.com/account/api-keys">https://platform.openai.com/account/api-keys</a>
</div>
<div

View File

@@ -17,12 +17,12 @@
</template>
<v-card>
<v-card-title>
<span class="text-h5">OpenAI Models</span>
<span class="text-h5">{{ $t('openAIModels') }}</span>
</v-card-title>
<v-divider></v-divider>
<v-card-text>
<div>
About the models:
{{ $t('aboutTheModels') }}:
<a target="_blank" href="https://platform.openai.com/docs/models/overview">https://platform.openai.com/docs/models/overview</a>
</div>
<div
@@ -77,7 +77,7 @@
color="primary"
@click="save"
>
Save & Close
{{ $t('saveAndClose') }}
</v-btn>
</v-card-actions>
</v-card>
@@ -85,6 +85,7 @@
</template>
<script setup>
const { $i18n } = useNuxtApp()
const dialog = ref(false)
const models = useModels()
const currentModel = useCurrentModel()
@@ -110,7 +111,7 @@ const removeModel = (index) => {
}
const save = async () => {
if (!currentModel.value) {
showWarning('Please select at least one model.')
showWarning($i18n.t('pleaseSelectAtLeastOneModelDot'))
return
}
setModels(models.value)

View File

@@ -1,21 +1,22 @@
<template>
<v-textarea
v-model="message"
clearable
label="Message"
placeholder="Type your message here"
:label="$t('writeAMessage')"
:placeholder="$t('writeAMessage') + '...'"
rows="1"
:auto-grow="autoGrow"
:disabled="disabled"
:loading="loading"
hide-details
:hint="hint"
:hide-details="loading"
append-inner-icon="send"
@keyup.enter="send"
@click:append="send"
@keyup.enter.exact="enterOnly"
@click:appendInner="clickSendBtn"
></v-textarea>
</template>
<script>
import { isMobile } from 'is-mobile'
export default {
name: "MsgEditor",
props: {
@@ -30,6 +31,11 @@ export default {
autoGrow: true,
};
},
computed: {
hint() {
return isMobile() ? "" : "Press Enter to send your message or Shift+Enter to add a new line";
},
},
watch: {
message(val) {
const lines = val.split(/\r\n|\r|\n/).length;
@@ -44,10 +50,24 @@ export default {
},
methods: {
send() {
const msg = this.message
let msg = this.message
// remove the last "\n"
if (msg[msg.length - 1] === "\n") {
msg = msg.slice(0, -1)
}
if (msg.length > 0) {
this.sendMessage(msg)
}
this.message = ""
this.sendMessage(msg);
},
clickSendBtn () {
this.send()
},
enterOnly () {
if (!isMobile()) {
this.send()
}
}
},
}
</script>

84
components/Welcome.vue Normal file
View File

@@ -0,0 +1,84 @@
<template>
<v-container>
<v-row>
<v-col cols="12">
<div class="text-center">
<h2 class="text-h2">{{ $t('welcomeTo') }} <span class="text-primary">{{ runtimeConfig.public.appName }}</span></h2>
<p class="text-caption mt-5">
{{ runtimeConfig.public.appName }} {{ $t('welcomeScreen.introduction1') }}
<br>
{{ $t('welcomeScreen.introduction2') }}
</p>
</div>
</v-col>
</v-row>
<v-row>
<v-col cols="12" md="10" offset-md="1">
<v-row>
<v-col
cols="12"
md="4"
>
<v-row>
<v-col>
<div class="d-flex flex-column align-center">
<v-icon icon="sunny"></v-icon>
<h3 class="text-h6">{{ $t('welcomeScreen.examples.title') }}</h3>
</div>
</v-col>
</v-row>
<WelcomeCard v-for="example in examples" :content="example" />
</v-col>
<v-col
cols="12"
md="4"
>
<v-row>
<v-col>
<div class="d-flex flex-column align-center">
<v-icon icon="bolt"></v-icon>
<h3 class="text-h6">{{ $t('welcomeScreen.capabilities.title') }}</h3>
</div>
</v-col>
</v-row>
<WelcomeCard v-for="capabilitie in capabilities" :content="capabilitie" />
</v-col>
<v-col
cols="12"
md="4"
>
<v-row>
<v-col>
<div class="d-flex flex-column align-center">
<v-icon icon="warning_amber"></v-icon>
<h3 class="text-h6">{{ $t('welcomeScreen.limitations.title') }}</h3>
</div>
</v-col>
</v-row>
<WelcomeCard v-for="limitation in limitations" :content="limitation" />
</v-col>
</v-row>
</v-col>
</v-row>
</v-container>
</template>
<script setup>
const runtimeConfig = useRuntimeConfig()
const { $i18n } = useNuxtApp()
const examples = ref([
$i18n.t('welcomeScreen.examples.item1'),
$i18n.t('welcomeScreen.examples.item2'),
$i18n.t('welcomeScreen.examples.item3')
])
const capabilities = ref([
$i18n.t('welcomeScreen.capabilities.item1'),
$i18n.t('welcomeScreen.capabilities.item2'),
$i18n.t('welcomeScreen.capabilities.item3')
])
const limitations = ref([
$i18n.t('welcomeScreen.limitations.item1'),
$i18n.t('welcomeScreen.limitations.item2'),
$i18n.t('welcomeScreen.limitations.item3')
])
</script>

View File

@@ -0,0 +1,24 @@
<template>
<v-row>
<v-col>
<v-hover
v-slot="{ isHovering, props }"
open-delay="100"
>
<v-card
:elevation="isHovering ? 3 : 0"
v-bind="props"
variant="tonal"
>
<v-card-text class="text-center">
{{ content }}
</v-card-text>
</v-card>
</v-hover>
</v-col>
</v-row>
</template>
<script setup>
const props = defineProps(['content'])
</script>

View File

@@ -0,0 +1,86 @@
<template>
<v-dialog
v-model="dialog"
fullscreen
:scrim="false"
transition="dialog-bottom-transition"
>
<template v-slot:activator="{ props }">
<v-list-item
v-bind="props"
rounded="xl"
prepend-icon="language"
:title="$t('language')"
></v-list-item>
</template>
<v-card>
<v-toolbar
dark
color="primary"
>
<v-btn
icon
dark
@click="dialog = false"
>
<v-icon>close</v-icon>
</v-btn>
<v-toolbar-title>{{ $t('language') }}</v-toolbar-title>
<v-spacer></v-spacer>
<!-- <v-toolbar-items>-->
<!-- <v-btn-->
<!-- variant="text"-->
<!-- @click="dialog = false"-->
<!-- >-->
<!-- Save-->
<!-- </v-btn>-->
<!-- </v-toolbar-items>-->
</v-toolbar>
<v-list
>
<!-- <v-list-item-->
<!-- title="Use device language"-->
<!-- :append-icon="usingDeviceLanguage() ? 'radio_button_checked' : 'radio_button_unchecked'"-->
<!-- @click="useDeviceLanguage"-->
<!-- >-->
<!-- </v-list-item>-->
<v-list-item
v-for="l in locales"
:key="l.code"
:title="l.name"
:append-icon="radioIcon(l.code)"
@click="updateLocale(l.code)"
>
</v-list-item>
</v-list>
</v-card>
</v-dialog>
</template>
<script setup>
const dialog = ref(false)
const { locale, locales, setLocale } = useI18n()
const { $i18n } = useNuxtApp()
// const usingDeviceLanguage = () => {
// return ($i18n.getLocaleCookie() === undefined || $i18n.getLocaleCookie() === 'undefined')
// }
const updateLocale = (lang) => {
setLocale(lang)
}
const radioIcon = (code) => {
return code === locale.value ? 'radio_button_checked' : 'radio_button_unchecked'
}
// const useDeviceLanguage = () => {
// setLocale($i18n.getBrowserLocale())
// $i18n.setLocaleCookie(undefined)
// }
</script>
<style scoped>
</style>

View File

@@ -1,5 +1,10 @@
export const useModels = () => useState('models', () => getStoredModels())
export const useCurrentModel = () => useState('currentModel', () => getCurrentModel())
export const useApiKey = () => useState('apiKey', () => getStoredApiKey())
export const useApiKey = () => useState('apiKey', () => getStoredApiKey())
export const useConversion = () => useState('conversion', () => getDefaultConversionData())
export const useConversions = () => useState('conversions', () => [])

View File

@@ -0,0 +1,21 @@
export const useAuthFetch = async (url, options = {}) => {
const { $auth } = useNuxtApp()
const token = await $auth.retrieveToken()
if (!token) {
return await $auth.redirectToLogin()
}
options = Object.assign(options, {
headers: {
'Authorization': 'Bearer ' + token
}
})
const res = await useFetch(url, options)
if (res.error.value && res.error.value.status === 401) {
await $auth.logout()
}
return res
}

Binary file not shown.

Before

Width:  |  Height:  |  Size: 917 KiB

After

Width:  |  Height:  |  Size: 143 KiB

34
docker-compose.pro.yml Normal file
View File

@@ -0,0 +1,34 @@
version: '3'
services:
client:
image: wongsaang/chatgpt-ui-client:latest
environment:
- SERVER_DOMAIN=http://backend:8000
depends_on:
- backend
volumes:
- backend_static:/app/static
ports:
- '80:80'
networks:
- chatgpt_ui_network
backend:
image: wongsaang/chatgpt-ui-server:latest
environment:
# - DB_URL=postgres://postgres:postgrespw@localhost:49153/chatgpt # If this parameter is not set, the built-in Sqlite will be used by default. It should be noted that if you do not connect to an external database, the data will be lost after the container is destroyed.
- DJANGO_SUPERUSER_USERNAME=admin # default superuser name
- DJANGO_SUPERUSER_PASSWORD=password # default superuser password
- DJANGO_SUPERUSER_EMAIL=admin@example.com # default superuser email
volumes:
- backend_static:/app/static
ports:
- '8000:8000'
networks:
- chatgpt_ui_network
networks:
chatgpt_ui_network:
driver: bridge
volumes:
backend_static:

View File

@@ -1,8 +1,31 @@
version: '3'
services:
app:
client:
build:
context: .
dockerfile: ./Dockerfile
environment:
- SERVER_DOMAIN=http://backend:8000
depends_on:
- backend
volumes:
- backend_static:/app/static
ports:
- '${APP_PORT:-80}:80'
- '80:80'
networks:
- chatgpt_ui_network
backend:
image: 'wongsaang/chatgpt-ui-server:latest'
volumes:
- backend_static:/app/static
ports:
- '8000:8000'
networks:
- chatgpt_ui_network
networks:
chatgpt_ui_network:
driver: bridge
volumes:
backend_static:

45
lang/en-US.json Normal file
View File

@@ -0,0 +1,45 @@
{
"welcomeTo": "Welcome to",
"language": "Language",
"setApiKey": "Set API Key",
"setOpenAIApiKey": "Set OpenAI API Key",
"openAIApiKey": "OpenAI API Key",
"getAKey": "Get a key",
"openAIModels": "OpenAI Models",
"aboutTheModels": "About the models",
"saveAndClose": "Save & Close",
"pleaseSelectAtLeastOneModelDot": "Please select at least one model.",
"writeAMessage": "Write a message",
"pressEnterToSendYourMessageOrShiftEnterToAddANewLine": "Press Enter to send your message or Shift+Enter to add a new line",
"lightMode": "Light Mode",
"darkMode": "Dark Mode",
"followSystem": "Follow system",
"themeMode": "Theme Mode",
"feedback": "Feedback",
"roles": {
"me": "Me",
"ai": "AI"
},
"welcomeScreen": {
"introduction1": "is an unofficial client for ChatGPT, but uses the official OpenAI API.",
"introduction2": "You will need an OpenAI API Key before you can use this client.",
"examples": {
"title": "Examples",
"item1": "\"Explain quantum computing in simple terms\"",
"item2": "\"Got any creative ideas for a 10 year olds birthday?\"",
"item3": "\"How do I make an HTTP request in Javascript?\""
},
"capabilities": {
"title": "Capabilities",
"item1": "Remembers what user said earlier in the conversation",
"item2": "Allows user to provide follow-up corrections",
"item3": "Trained to decline inappropriate requests"
},
"limitations": {
"title": "Limitations",
"item1": "May occasionally generate incorrect information",
"item2": "May occasionally produce harmful instructions or biased content",
"item3": "Limited knowledge of world and events after 2021"
}
}
}

45
lang/zh-CN.json Normal file
View File

@@ -0,0 +1,45 @@
{
"welcomeTo": "欢迎来到",
"language": "语言",
"setApiKey": "设置API密钥",
"setOpenAIApiKey": "设置OpenAI的API密钥",
"openAIApiKey": "OpenAI的API密钥",
"getAKey": "获取钥匙",
"openAIModels": "OpenAI模型",
"aboutTheModels": "关于模型",
"saveAndClose": "保存并关闭",
"pleaseSelectAtLeastOneModelDot": "请至少选择一个模型",
"writeAMessage": "输入信息",
"pressEnterToSendYourMessageOrShiftEnterToAddANewLine": "按回车键发送您的信息或按Shift+Enter键添加新行",
"lightMode": "明亮模式",
"darkMode": "暗色模式",
"followSystem": "跟随系统",
"themeMode": "主题模式",
"feedback": "反馈",
"roles": {
"me": "我",
"ai": "AI"
},
"welcomeScreen": {
"introduction1": "是一个非官方的ChatGPT客户端但使用OpenAI的官方API",
"introduction2": "在使用本客户端之前您需要一个OpenAI API密钥。",
"examples": {
"title": "例子",
"item1": "\"用简单的语言解释量子计算\"",
"item2": "\"为10岁的孩子过生日有什么创造性的想法吗\"",
"item3": "\"我如何在Javascript中进行HTTP请求\""
},
"capabilities": {
"title": "能力",
"item1": "记得用户在谈话中早先说过的话",
"item2": "允许用户提供后续更正",
"item3": "经过培训,可以拒绝不适当的请求"
},
"limitations": {
"title": "局限",
"item1": "偶尔可能会产生不正确的信息",
"item2": "可能偶尔会产生有害的指示或有偏见的内容",
"item3": "对2021年以后的世界和事件了解有限"
}
}
}

149
layouts/default.vue Normal file
View File

@@ -0,0 +1,149 @@
<script setup>
import {useConversions} from "../composables/states";
import {getConversions} from "../utils/helper";
const { $i18n } = useNuxtApp()
const runtimeConfig = useRuntimeConfig()
const colorMode = useColorMode()
const drawer = ref(null)
const themes = ref([
{ title: $i18n.t('lightMode'), value: 'light' },
{ title: $i18n.t('darkMode'), value: 'dark' },
{ title: $i18n.t('followSystem'), value: 'system'}
])
const setTheme = (theme) => {
colorMode.preference = theme
}
const feedback = () => {
window.open('https://github.com/WongSaang/chatgpt-ui/issues', '_blank')
}
const { locale, locales, setLocale } = useI18n()
const setLang = (lang) => {
setLocale(lang)
}
const conversations = useConversions()
onNuxtReady(async () => {
conversations.value = await getConversions()
})
</script>
<template>
<v-app
:theme="$colorMode.value"
>
<v-navigation-drawer
v-model="drawer"
>
<div class="px-2 py-2">
<v-btn
block
variant="outlined"
prepend-icon="add"
size="large"
@click="createNewConversion()"
>
New conversation
</v-btn>
<v-list>
<v-list-item
v-for="conversation in conversations"
:key="conversation.id"
:title="conversation.topic"
active-color="primary"
@click="openConversationMessages(conversation)"
></v-list-item>
</v-list>
</div>
<template v-slot:append>
<div class="px-1">
<v-divider></v-divider>
<v-list>
<v-menu
>
<template v-slot:activator="{ props }">
<v-list-item
v-bind="props"
rounded="xl"
:prepend-icon="$colorMode.value === 'light' ? 'light_mode' : 'dark_mode'"
:title="$t('themeMode')"
></v-list-item>
</template>
<v-list
bg-color="white"
>
<v-list-item
v-for="(theme, idx) in themes"
:key="idx"
@click="setTheme(theme.value)"
>
<v-list-item-title>{{ theme.title }}</v-list-item-title>
</v-list-item>
</v-list>
</v-menu>
<SettingsLanguages/>
<v-list-item
rounded="xl"
prepend-icon="help_outline"
:title="$t('feedback')"
@click="feedback"
></v-list-item>
</v-list>
</div>
</template>
</v-navigation-drawer>
<v-app-bar
class="d-lg-none"
>
<v-app-bar-nav-icon @click="drawer = !drawer"></v-app-bar-nav-icon>
<v-toolbar-title>{{ runtimeConfig.public.appName }}</v-toolbar-title>
<v-spacer></v-spacer>
<v-menu
>
<template v-slot:activator="{ props }">
<v-btn
v-bind="props"
icon="help_outline"
title="Feedback"
></v-btn>
</template>
<v-list
>
<v-list-item
@click="feedback"
>
<v-list-item-title>{{ $t('feedback') }}</v-list-item-title>
</v-list-item>
</v-list>
</v-menu>
</v-app-bar>
<v-main>
<NuxtPage/>
</v-main>
</v-app>
</template>
<style>
.v-navigation-drawer__content::-webkit-scrollbar {
width: 0;
}
.v-navigation-drawer__content:hover::-webkit-scrollbar {
width: 6px;
}
.v-navigation-drawer__content:hover::-webkit-scrollbar-thumb {
background-color: #999;
border-radius: 3px;
}
</style>

7
layouts/vuetifyApp.vue Normal file
View File

@@ -0,0 +1,7 @@
<template>
<v-app
:theme="$colorMode.value"
>
<slot />
</v-app>
</template>

23
nginx.conf Normal file
View File

@@ -0,0 +1,23 @@
server {
listen 80;
listen [::]:80;
server_name localhost;
location / {
root /app;
index index.html;
}
location /api/
{
proxy_pass ${SERVER_DOMAIN};
proxy_set_header Host $host;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
}
location /admin/ {
proxy_pass ${SERVER_DOMAIN};
proxy_set_header Host $host;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
}
}

View File

@@ -22,5 +22,40 @@ export default defineNuxtConfig({
'material-design-icons-iconfont/dist/material-design-icons.css',
'highlight.js/styles/panda-syntax-dark.css',
],
modules: ['@nuxtjs/color-mode']
modules: [
'@nuxtjs/color-mode',
'@nuxtjs/i18n'
],
i18n: {
strategy: 'no_prefix',
locales: [
{
code: 'en',
iso: 'en-US',
name: 'English',
file: 'en-US.json',
},
{
code: 'zh-CN',
iso: 'zh-CN',
name: '简体中文',
file: 'zh-CN.json',
}
],
lazy: true,
langDir: 'lang',
defaultLocale: 'en',
vueI18n: {
fallbackLocale: 'en',
},
},
nitro: {
devProxy: {
"/api": {
target: "http://localhost:8000/api",
prependPath: true
}
}
},
})

View File

@@ -9,15 +9,17 @@
},
"devDependencies": {
"@nuxtjs/color-mode": "^3.2.0",
"@nuxtjs/i18n": "^8.0.0-beta.9",
"material-design-icons-iconfont": "^6.7.0",
"nuxt": "^3.1.2"
"nuxt": "^3.2.0"
},
"dependencies": {
"@keyv/sqlite": "^3.6.4",
"@microsoft/fetch-event-source": "^2.0.1",
"@waylaidwanderer/chatgpt-api": "^1.12.2",
"highlight.js": "^11.7.0",
"is-mobile": "^3.1.1",
"marked": "^4.2.12",
"nanoid": "^4.0.1",
"vuetify": "^3.0.6"
}
},
"license": "MIT"
}

View File

@@ -1,18 +1,33 @@
<script setup>
import { fetchEventSource } from '@microsoft/fetch-event-source'
definePageMeta({
middleware: ["auth"]
})
import {EventStreamContentType, fetchEventSource} from '@microsoft/fetch-event-source'
const { $i18n, $auth } = useNuxtApp()
const runtimeConfig = useRuntimeConfig()
const currentModel = useCurrentModel()
const openaiApiKey = useApiKey()
const fetchingResponse = ref(false)
let ctrl
const abortFetch = () => {
if (ctrl) {
ctrl.abort()
}
fetchingResponse.value = false
}
const fetchReply = async (message, parentMessageId) => {
const ctrl = new AbortController()
const token = await $auth.retrieveToken()
ctrl = new AbortController()
try {
await fetchEventSource('/api/conversation', {
signal: ctrl.signal,
method: 'POST',
headers: {
'Content-Type': 'application/json'
'accept': 'application/json',
'Content-Type': 'application/json',
'Authorization': `Bearer ${token}`
},
body: JSON.stringify({
model: currentModel.value,
@@ -22,77 +37,81 @@ const fetchReply = async (message, parentMessageId) => {
conversationId: currentConversation.value.id
}),
onopen(response) {
if (response.status === 200) {
if (response.ok && response.headers.get('content-type') === EventStreamContentType) {
return;
}
throw new Error(`Failed to send message. HTTP ${response.status} - ${response.statusText}`);
},
onclose() {
if (ctrl.signal.aborted === true) {
return;
}
throw new Error(`Failed to send message. Server closed the connection unexpectedly.`);
},
onerror(err) {
throw err;
},
onmessage(message) {
if (message.event === 'error') {
throw new Error(JSON.parse(message.data).error);
// console.log(message)
const event = message.event
const data = JSON.parse(message.data)
if (event === 'error') {
throw new Error(data.error);
}
const { type, data } = JSON.parse(message.data);
if (type === 'done') {
if (event === 'done') {
if (currentConversation.value.id === null) {
currentConversation.value.id = data.conversationId
genTitle(currentConversation.value.id)
}
currentConversation.value.messages[currentConversation.value.messages.length - 1].id = data.messageId
ctrl.abort();
fetchingResponse.value = false
abortFetch()
return;
}
if (currentConversation.value.messages[currentConversation.value.messages.length - 1].from === 'ai') {
currentConversation.value.messages[currentConversation.value.messages.length - 1].message += data
if (currentConversation.value.messages[currentConversation.value.messages.length - 1].is_bot) {
currentConversation.value.messages[currentConversation.value.messages.length - 1].message += data.content
} else {
currentConversation.value.messages.push({id: null, from: 'ai', message: data})
currentConversation.value.messages.push({id: null, is_bot: true, message: data.content})
}
scrollChatWindow()
},
})
} catch (err) {
ctrl.abort()
console.log(err)
abortFetch()
showSnackbar(err.message)
fetchingResponse.value = false
}
}
const defaultConversation = ref({
id: null,
messages: []
})
const currentConversation = ref({})
const currentConversation = useConversion()
const grab = ref(null)
const scrollChatWindow = () => {
if (grab.value === null) {
return;
}
grab.value.scrollIntoView({behavior: 'smooth'})
}
const createNewConversation = () => {
currentConversation.value = Object.assign(defaultConversation.value, {
})
}
const send = (message) => {
fetchingResponse.value = true
let parentMessageId = null
if (currentConversation.value.messages.length > 0) {
const lastMessage = currentConversation.value.messages[currentConversation.value.messages.length - 1]
if (lastMessage.from === 'ai' && lastMessage.id !== null) {
if (lastMessage.is_bot && lastMessage.id !== null) {
parentMessageId = lastMessage.id
}
}
currentConversation.value.messages.push({from: 'me', parentMessageId: parentMessageId, message: message})
currentConversation.value.messages.push({parentMessageId: parentMessageId, message: message})
fetchReply(message, parentMessageId)
scrollChatWindow()
}
const stop = () => {
ctrl.abort();
fetchingResponse.value = false
abortFetch()
}
const snackbar = ref(false)
@@ -102,28 +121,31 @@ const showSnackbar = (text) => {
snackbar.value = true
}
createNewConversation()
</script>
<template>
<div ref="chatWindow">
<div
v-if="currentConversation.messages.length > 0"
ref="chatWindow"
>
<v-card
rounded="0"
elevation="0"
v-for="(conversation, index) in currentConversation.messages"
:key="index"
:variant="conversation.from === 'ai' ? 'tonal' : ''"
:variant="conversation.is_bot ? 'tonal' : 'text'"
>
<v-container>
<v-card-text class="text-caption text-disabled">{{ conversation.from }}</v-card-text>
<v-card-text class="text-caption text-disabled">{{ $t(`roles.${conversation.is_bot?'ai':'me'}`) }}</v-card-text>
<v-card-text>
<MsgContent :content="conversation.message" />
</v-card-text>
</v-container>
<v-divider></v-divider>
</v-card>
<div ref="grab" class="w-100" style="height: 150px;"></div>
<div ref="grab" class="w-100" style="height: 200px;"></div>
</div>
<Welcome v-else />
<v-footer app class="d-flex flex-column">
<div class="px-md-16 w-100 d-flex align-center">
<v-btn
@@ -137,12 +159,13 @@ createNewConversation()
</div>
<div class="px-4 py-2 text-disabled text-caption font-weight-light text-center w-100">
{{ new Date().getFullYear() }} {{ runtimeConfig.public.appName }}
© {{ new Date().getFullYear() }} {{ runtimeConfig.public.appName }}
</div>
</v-footer>
<v-snackbar
v-model="snackbar"
multi-line
location="top"
>
{{ snackbarText }}

87
pages/login.vue Normal file
View File

@@ -0,0 +1,87 @@
<template>
<v-card
color="red-lighten-5"
style="height: 100vh"
>
<v-container>
<v-row>
<v-col
sm="9"
offset-sm="1"
md="8"
offset-md="2"
>
<v-card
class="mt-15"
>
<v-card-title>Sign in</v-card-title>
<v-card-text>
<v-form ref="signInForm">
<v-text-field
v-model="formData.username"
:rules="formRules.username"
label="User name"
variant="underlined"
></v-text-field>
<v-text-field
v-model="formData.password"
:rules="formRules.password"
label="Password"
variant="underlined"
></v-text-field>
<div v-if="errorMsg" class="text-red">{{ errorMsg }}</div>
<v-card-actions>
<v-spacer></v-spacer>
<v-btn
variant="elevated"
color="primary"
:loading="submitting"
@click="submit"
>Submit</v-btn>
</v-card-actions>
</v-form>
</v-card-text>
</v-card>
</v-col>
</v-row>
</v-container>
</v-card>
</template>
<script setup>
definePageMeta({
layout: 'vuetify-app'
})
const formData = ref({
username: '',
password: ''
})
const formRules = ref({
username: [
v => !!v || 'Username is required'
],
password: [
v => !!v || 'Password is required'
]
})
const { $auth } = useNuxtApp()
const errorMsg = ref(null)
const signInForm = ref(null)
const valid = ref(true)
const submitting = ref(false)
const submit = async () => {
errorMsg.value = null
const { valid } = await signInForm.value.validate()
if (valid) {
submitting.value = true
const error = await $auth.login(formData.value.username, formData.value.password)
submitting.value = false
if (!error) {
return await $auth.callback()
}
errorMsg.value = error
}
}
</script>

136
plugins/auth.js Normal file
View File

@@ -0,0 +1,136 @@
const AUTH_ROUTE = {
home: '/',
login: '/login'
}
const COOKIE_OPTIONS = {
prefix: '_Secure-auth',
path: '/',
tokenName: 'access-token',
refreshTokenName: 'refresh-token',
}
const ENDPOINTS = {
login: {
url: '/api/auth/signin'
},
refresh: {
url: '/api/auth/token/refresh'
},
user: {
url: '/api/auth/session'
}
}
export default defineNuxtPlugin(() => {
const tokenKey = COOKIE_OPTIONS.prefix + '.' + COOKIE_OPTIONS.tokenName
const refreshTokenKey = COOKIE_OPTIONS.prefix + '.' + COOKIE_OPTIONS.refreshTokenName
const tokenOptions = {
maxAge: 60 * 5,
}
const refreshTokenOptions = {
maxAge: 60 * 60 * 24,
}
const token = useCookie(tokenKey, tokenOptions)
const refreshToken = useCookie(refreshTokenKey, refreshTokenOptions)
class Auth {
constructor() {
this.loginIn = useState('loginIn', () => false)
this.user = useState('user')
}
async login (username, password) {
const { data, error } = await useFetch(ENDPOINTS.login.url, {
method: 'POST',
body: {
username,
password
}
})
if (!error.value) {
token.value = data.value.access
refreshToken.value = data.value.refresh
return null
}
if (error.value.status === 401) {
return error.value.data.detail
}
return 'Request failed, please try again.'
}
async logout () {
this.loginIn.value = false
this.user.value = null
await this.redirectToLogin()
}
async fetchUser () {
const { data, error } = await useAuthFetch(ENDPOINTS.user.url)
if (!error.value) {
this.user = data.value
this.loginIn.value = true
return null
}
return error
}
async refresh () {
const { data, error } = await useFetch(ENDPOINTS.refresh.url, {
method: 'POST',
body: {
'refresh': refreshToken.value
}
})
if (!error.value) {
token.value = data.value.access
return data.value.access
}
return null
}
async callback () {
return await navigateTo(AUTH_ROUTE.home)
}
async redirectToLogin () {
return await navigateTo(AUTH_ROUTE.login)
}
async retrieveToken () {
const token = useCookie(tokenKey, tokenOptions)
const refreshToken = useCookie(refreshTokenKey, refreshTokenOptions)
if (!refreshToken.value) {
return null
}
if (!token.value) {
return await this.refresh()
}
return token.value
}
}
const auth = new Auth()
addRouteMiddleware('auth', async (to, from) => {
if (!auth.loginIn.value) {
const token = await auth.retrieveToken()
if (!token) {
return await auth.redirectToLogin()
}
const error = await auth.fetchUser()
if (error) {
return await auth.redirectToLogin()
}
}
})
return {
provide: {
auth
}
}
})

View File

@@ -1,108 +0,0 @@
import ChatGPTClient from '@waylaidwanderer/chatgpt-api'
import { PassThrough } from 'node:stream'
const serializeSSEEvent = (chunk) => {
let payload = "";
if (chunk.id) {
payload += `id: ${chunk.id}\n`;
}
if (chunk.event) {
payload += `event: ${chunk.event}\n`;
}
if (chunk.data) {
payload += `data: ${chunk.data}\n`;
}
if (chunk.retry) {
payload += `retry: ${chunk.retry}\n`;
}
if (!payload) {
return "";
}
payload += "\n";
return payload;
}
export default defineEventHandler(async (event) => {
const body = await readBody(event)
const conversationId = body.conversationId ? body.conversationId.toString() : undefined
const parentMessageId = body.parentMessageId ? body.parentMessageId.toString() : undefined
const tunnel = new PassThrough()
const writeToTunnel = (data) => {
tunnel.write(serializeSSEEvent(data))
}
setResponseHeaders(event, {
'Content-Type': 'text/event-stream',
'Cache-Control': 'no-cache',
'Connection': 'keep-alive'
})
if (!body.openaiApiKey) {
writeToTunnel({
event: 'error',
data: JSON.stringify({
code: 503,
error: 'You haven\'t set the api key of openai',
}),
})
return sendStream(event, tunnel)
}
const clientOptions = {
// (Optional) Parameters as described in https://platform.openai.com/docs/api-reference/completions
modelOptions: {
// The model is set to text-chat-davinci-002-20221122 by default, but you can override
// it and any other parameters here
model: body.model,
},
// (Optional) Set custom instructions instead of "You are ChatGPT...".
// promptPrefix: 'You are Bob, a cowboy in Western times...',
// (Optional) Set a custom name for the user
// userLabel: 'User',
// (Optional) Set a custom name for ChatGPT
// chatGptLabel: 'ChatGPT',
// (Optional) Set to true to enable `console.debug()` logging
debug: false,
};
const cacheOptions = {
// Options for the Keyv cache, see https://www.npmjs.com/package/keyv
// This is used for storing conversations, and supports additional drivers (conversations are stored in memory by default)
// For example, to use a JSON file (`npm i keyv-file`) as a database:
// store: new KeyvFile({ filename: 'cache.json' }),
uri: 'sqlite://database.sqlite'
};
const chatGptClient = new ChatGPTClient(body.openaiApiKey, clientOptions, cacheOptions);
try {
const response = await chatGptClient.sendMessage(body.message, {
conversationId,
parentMessageId,
onProgress: (token) => {
// console.log(token)
writeToTunnel({ data: JSON.stringify({
type: 'token',
data: token
})
})
}
});
writeToTunnel({ data: JSON.stringify({
type: 'done',
data: response
}) })
console.log(response)
} catch (e) {
const code = e?.json?.data?.code || 503;
const message = e?.json?.error?.message || 'There was an error communicating with ChatGPT.';
writeToTunnel({
event: 'error',
data: JSON.stringify({
code,
error: message,
}),
})
}
return sendStream(event, tunnel)
})

View File

@@ -1,19 +0,0 @@
import {getSetting, setSetting} from "~/utils/keyv";
import {apiError, apiSuccess} from "~/utils/api";
export default defineEventHandler(async (event) => {
const runtimeConfig = useRuntimeConfig()
const method = getMethod(event)
if (method === 'GET') {
const query = getQuery(event)
let value = await getSetting(query.key)
if (!value && query.key === 'modelName') {
value = runtimeConfig.openaiModelName
}
return apiSuccess(value)
} else if (method === 'POST') {
const body = await readBody(event)
await setSetting(body.key, body.value)
return apiSuccess()
}
})

View File

@@ -1,16 +0,0 @@
export const apiSuccess = (data) => {
return {
code: 200,
status: 'success',
data: data
}
}
export const apiError = (message) => {
return {
code: 400,
status: 'error',
error: message
}
}

53
utils/helper.js Normal file
View File

@@ -0,0 +1,53 @@
export const getDefaultConversionData = () => {
return {
id: null,
topic: null,
messages: [],
loadingMessages: false,
}
}
export const getConversions = async () => {
const { data, error } = await useAuthFetch('/api/chat/conversations')
if (!error.value) {
return data.value
}
return []
}
export const createNewConversion = () => {
const conversation = useConversion()
conversation.value = getDefaultConversionData()
}
export const openConversationMessages = async (currentConversation) => {
const conversation = useConversion()
conversation.value = Object.assign(conversation.value, currentConversation)
conversation.value.loadingMessages = true
const { data, error } = await useAuthFetch('/api/chat/messages/?conversationId=' + currentConversation.id)
if (!error.value) {
conversation.value.messages = data.value
}
conversation.value.loadingMessages = true
}
export const genTitle = async (conversationId) => {
const { data, error } = await useAuthFetch('/api/gen_title', {
method: 'POST',
body: {
conversationId: conversationId
}
})
if (!error.value) {
const conversation = {
id: conversationId,
topic: data.value.title,
}
const conversations = useConversions()
// prepend to conversations
conversations.value = [conversation, ...conversations.value]
return data.value.title
}
return null
}

View File

@@ -1,18 +0,0 @@
import Keyv from 'keyv'
import KeyvSqlite from "@keyv/sqlite";
const sqlite = new KeyvSqlite()
const cacheOptions = {
namespace: 'settings',
uri: 'sqlite://database.sqlite',
}
const cache = new Keyv(cacheOptions);
export const getSetting = async (key) => {
return await cache.get(key)
}
export const setSetting = async (key, value) => {
return await cache.set(key, value)
}

1362
yarn.lock

File diff suppressed because it is too large Load Diff