Merge pull request #7 from WongSaang/client-only

Front-end and Back-end Separation

.github/workflows/docker-image.yml

@@ -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 }}

Dockerfile

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

README.md

@@ -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
+## 📢Updates
-```bash
+
-docker run -p 80:80 wongsaang/chatgpt-ui:latest
+---
+
+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:

app.vue

@@ -1,100 +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
-}
-const feedback = () => {
-  window.open('https://github.com/WongSaang/chatgpt-ui/issues', '_blank')
-}
-</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
-                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>
-
-          <v-list-item
-              rounded="xl"
-              prepend-icon="help_outline"
-              title="Feedback"
-              @click="feedback"
-          ></v-list-item>
-        </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-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>Feedback</v-list-item-title>
-          </v-list-item>
-        </v-list>
-      </v-menu>
-    </v-app-bar>
-
-    <v-main>
-      <NuxtPage/>
-    </v-main>
-  </v-app>
-</template>

components/ApiKeyDialog.vue

@@ -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

components/ModelDialog.vue

@@ -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)

components/MsgEditor.vue

@@ -1,8 +1,8 @@
 <template>
   <v-textarea
       v-model="message"
-      label="Write a message..."
+      :label="$t('writeAMessage')"
-      placeholder="Write a message..."
+      :placeholder="$t('writeAMessage') + '...'"
       rows="1"
       :auto-grow="autoGrow"
       :disabled="disabled"
@@ -33,7 +33,7 @@ export default {
   },
   computed: {
     hint() {
-      return isMobile() ? "" : "Press Enter to send your message or Shift+Enter to add a new line.";
+      return isMobile() ? "" : "Press Enter to send your message or Shift+Enter to add a new line";
     },
   },
   watch: {

components/Welcome.vue

@@ -3,11 +3,11 @@
     <v-row>
       <v-col cols="12">
         <div class="text-center">
-          <h2 class="text-h2">Welcome to <span class="text-primary">{{ runtimeConfig.public.appName }}</span></h2>
+          <h2 class="text-h2">{{ $t('welcomeTo') }} <span class="text-primary">{{ runtimeConfig.public.appName }}</span></h2>
           <p class="text-caption mt-5">
-            {{ runtimeConfig.public.appName }} is an unofficial client for ChatGPT, but uses the official OpenAI API.
+            {{ runtimeConfig.public.appName }} {{ $t('welcomeScreen.introduction1') }}
             <br>
-            You will need an OpenAI API Key before you can use this client.
+            {{ $t('welcomeScreen.introduction2') }}
           </p>
         </div>
       </v-col>
@@ -23,7 +23,7 @@
               <v-col>
                 <div class="d-flex flex-column align-center">
                   <v-icon icon="sunny"></v-icon>
-                  <h3 class="text-h6">Examples</h3>
+                  <h3 class="text-h6">{{ $t('welcomeScreen.examples.title') }}</h3>
                 </div>
               </v-col>
             </v-row>
@@ -37,7 +37,7 @@
               <v-col>
                 <div class="d-flex flex-column align-center">
                   <v-icon icon="bolt"></v-icon>
-                  <h3 class="text-h6">Capabilities</h3>
+                  <h3 class="text-h6">{{ $t('welcomeScreen.capabilities.title') }}</h3>
                 </div>
               </v-col>
             </v-row>
@@ -51,7 +51,7 @@
               <v-col>
                 <div class="d-flex flex-column align-center">
                   <v-icon icon="warning_amber"></v-icon>
-                  <h3 class="text-h6">Limitations</h3>
+                  <h3 class="text-h6">{{ $t('welcomeScreen.limitations.title') }}</h3>
                 </div>
               </v-col>
             </v-row>
@@ -65,19 +65,20 @@
 
 <script setup>
 const runtimeConfig = useRuntimeConfig()
+const { $i18n } = useNuxtApp()
 const examples = ref([
-    '"Explain quantum computing in simple terms"',
+  $i18n.t('welcomeScreen.examples.item1'),
-    '"Got any creative ideas for a 10 year old’s birthday?"',
+  $i18n.t('welcomeScreen.examples.item2'),
-    '"How do I make an HTTP request in Javascript?"'
+  $i18n.t('welcomeScreen.examples.item3')
 ])
 const capabilities = ref([
-    'Remembers what user said earlier in the conversation',
+  $i18n.t('welcomeScreen.capabilities.item1'),
-    'Allows user to provide follow-up corrections',
+  $i18n.t('welcomeScreen.capabilities.item2'),
-    'Trained to decline inappropriate requests'
+  $i18n.t('welcomeScreen.capabilities.item3')
 ])
 const limitations = ref([
-    'May occasionally generate incorrect information',
+  $i18n.t('welcomeScreen.limitations.item1'),
-    'May occasionally produce harmful instructions or biased content',
+  $i18n.t('welcomeScreen.limitations.item2'),
-    'Limited knowledge of world and events after 2021'
+  $i18n.t('welcomeScreen.limitations.item3')
 ])
 </script>

components/settings/Languages.vue

@@ -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>

composables/states.js

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

composables/useAuthFetch.js

@@ -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
+}

docker-compose.pro.yml

@@ -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:

docker-compose.yml

@@ -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:

lang/en-US.json

@@ -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 old’s 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"
+    }
+  }
+}

lang/zh-CN.json

@@ -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年以后的世界和事件了解有限"
+    }
+  }
+}

layouts/default.vue

@@ -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>

layouts/vuetifyApp.vue

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

nginx.conf

@@ -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;
+    }
+}

nuxt.config.ts

@@ -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
+            }
+
+        }
+    },
 })

package.json

@@ -9,12 +9,12 @@
   },
   "devDependencies": {
     "@nuxtjs/color-mode": "^3.2.0",
+    "@nuxtjs/i18n": "^8.0.0-beta.9",
     "material-design-icons-iconfont": "^6.7.0",
     "nuxt": "^3.2.0"
   },
   "dependencies": {
     "@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",

pages/index.vue

@@ -1,6 +1,10 @@
 <script setup>
+definePageMeta({
+  middleware: ["auth"]
+})
 import {EventStreamContentType, fetchEventSource} from '@microsoft/fetch-event-source'
 
+const { $i18n, $auth } = useNuxtApp()
 const runtimeConfig = useRuntimeConfig()
 const currentModel = useCurrentModel()
 const openaiApiKey = useApiKey()
@@ -14,13 +18,16 @@ const abortFetch = () => {
   fetchingResponse.value = false
 }
 const fetchReply = async (message, parentMessageId) => {
+  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,
@@ -45,6 +52,7 @@ const fetchReply = async (message, parentMessageId) => {
         throw err;
       },
       onmessage(message) {
+        // console.log(message)
         const event = message.event
         const data = JSON.parse(message.data)
 
@@ -55,16 +63,17 @@ const fetchReply = async (message, parentMessageId) => {
         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
           abortFetch()
           return;
         }
 
-        if (currentConversation.value.messages[currentConversation.value.messages.length - 1].from === 'ai') {
+        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.content})
+          currentConversation.value.messages.push({id: null, is_bot: true, message: data.content})
         }
 
         scrollChatWindow()
@@ -77,11 +86,7 @@ const fetchReply = async (message, parentMessageId) => {
   }
 }
 
-const defaultConversation = ref({
+const currentConversation = useConversion()
-  id: null,
-  messages: []
-})
-const currentConversation = ref({})
 
 const grab = ref(null)
 const scrollChatWindow = () => {
@@ -91,20 +96,17 @@ const scrollChatWindow = () => {
   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()
 }
@@ -119,7 +121,6 @@ const showSnackbar = (text) => {
   snackbar.value = true
 }
 
-createNewConversation()
 </script>
 
 <template>
@@ -132,10 +133,10 @@ createNewConversation()
         elevation="0"
         v-for="(conversation, index) in currentConversation.messages"
         :key="index"
-        :variant="conversation.from === 'ai' ? 'tonal' : 'text'"
+        :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>
@@ -158,7 +159,7 @@ 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

pages/login.vue

@@ -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>

plugins/auth.js

@@ -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
+        }
+    }
+})

server/api/conversation.post.js

@@ -1,87 +0,0 @@
-import ChatGPTClient from '@waylaidwanderer/chatgpt-api'
-import { PassThrough } from 'node:stream'
-import { nanoid } from 'nanoid'
-
-const serializeSSEEvent = (event, data) => {
-    const id = nanoid();
-    const eventStr = event ? `event: ${event}\n` : '';
-    const dataStr = data ? `data: ${JSON.stringify(data)}\n` : '';
-
-    return `id: ${id}\n${eventStr}${dataStr}\n`;
-}
-
-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 = (event, data) => {
-        tunnel.write(serializeSSEEvent(event, data))
-    }
-    const endTunnel = () => {
-        tunnel.end()
-    }
-
-    setResponseHeaders(event, {
-        'Content-Type': 'text/event-stream',
-        'Cache-Control': 'no-cache',
-        'Connection': 'keep-alive'
-    })
-
-    if (!body.openaiApiKey) {
-        writeToTunnel('error', {
-            code: 503,
-            error: 'You haven\'t set the api key of openai',
-        })
-        endTunnel()
-        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' }),
-    };
-
-    const chatGptClient = new ChatGPTClient(body.openaiApiKey, clientOptions, cacheOptions);
-
-    try {
-        const response = await chatGptClient.sendMessage(body.message, {
-            conversationId,
-            parentMessageId,
-            onProgress: (token) => {
-                // console.log(token)
-                writeToTunnel('message',{content: token})
-            }
-        });
-        writeToTunnel('done',response)
-        console.info(response)
-    } catch (e) {
-        const code = e?.json?.data?.code || 503;
-        const message = e?.json?.error?.message || 'There was an error communicating with ChatGPT.';
-        writeToTunnel('error', {
-            code,
-            error: message
-        })
-    }
-    tunnel.end()
-    return sendStream(event, tunnel)
-})

utils/api.js

@@ -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
-  }
-}

utils/helper.js

@@ -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
+}