feat: Custom system prompt

components/Pass.vue

@@ -18,7 +18,7 @@ function handlePass() {
         {{ $t('input_password') }}
       </div>
       <div class="flex space-x-2">
-        <UInput v-model.trim.lazy="access_pass" type="password" @keydown.enter="handlePass" class="flex-1"/>
+        <UInput v-model.trim="access_pass" type="password" @keydown.enter="handlePass" class="flex-1"/>
         <UButton @click="handlePass">{{ $t('confirm') }}</UButton>
       </div>
     </div>

components/Setting.vue

@@ -7,24 +7,28 @@ const settings = useLocalStorage('settings', initialSettings)
 
 <template>
   <UModal v-model="openSettings">
-    <div class="p-4 flex flex-col space-y-3">
-      <h2 class="font-bold text-lg">
-        {{ $t('setting') }}
-      </h2>
-      <div class="flex items-end">
+    <h2 class="font-bold text-lg px-4 pt-4">
+      {{ $t('setting') }}
+    </h2>
+    <ul class="flex flex-col space-y-2 p-4">
+      <li class="flex items-end">
         <div class="flex flex-col">
           OPENAI_API_KEY
           <span class="text-xs text-gray-500">{{ $t('use_own_key') }}</span>
         </div>
-        <UInput v-model.trim.lazy="settings.openaiKey" class="ml-auto"/>
-      </div>
-      <div>
+        <UInput placeholder="sk-xxx" v-model.trim.lazy="settings.openaiKey" class="ml-auto"/>
+      </li>
+      <li>
         <div class="flex">
           {{ $t('img_gen_steps') }}
           <span class="ml-auto">{{ settings.image_steps }}</span>
         </div>
-        <URange :min="1" :max="20" v-model.lazy="settings.image_steps" class="w-full"/>
-      </div>
-    </div>
+        <URange :min="1" :max="20" v-model.lazy="settings.image_steps" class="w-full mt-1"/>
+      </li>
+      <li>
+        {{ $t('system_prompt') }}
+        <UTextarea autoresize placeholder="You are ChatGPT..." v-model.trim.lazy="settings.system_prompt" class="mt-1"/>
+      </li>
+    </ul>
   </UModal>
 </template>

i18n.config.ts

@@ -19,6 +19,7 @@ export default defineI18nConfig(() => ({
             img_gen_steps: '图片生成步数',
             text_generation: '文本生成',
             image_generation: '图像生成',
+            system_prompt: '系统提示',
         },
         en: {
             setting: 'Setting',
@@ -38,6 +39,7 @@ export default defineI18nConfig(() => ({
             img_gen_steps: 'Image generation steps',
             text_generation: 'Text generation',
             image_generation: 'Image generation',
+            system_prompt: 'System prompt',
         }
     }
 }))

package.json

@@ -1,6 +1,6 @@
 {
   "name": "cloudflare-ai-web",
-  "version": "2.0.1",
+  "version": "2.1",
   "private": true,
   "type": "module",
   "scripts": {

utils/db.ts

@@ -48,7 +48,8 @@ export const DB = new Database();
 
 export const initialSettings = {
     openaiKey: '',
-    image_steps: 20
+    image_steps: 20,
+    system_prompt: 'You are ChatGPT, a large language model trained by OpenAI. Follow the user\'s instructions carefully. Respond using markdown.',
 }
 
 export type Settings = typeof initialSettings
@@ -94,6 +95,11 @@ export const textGenModels: Model[] = [{
     name: 'starling-lm-7b-beta',
     provider: 'workers-ai',
     type: 'chat'
+}, {
+    id: '@cf/meta/llama-3-8b-instruct',
+    name: 'llama-3-8b-instruct',
+    provider: 'workers-ai',
+    type: 'chat'
 }]
 
 export const imageGenModels: Model[] = [{

utils/tools.ts

@@ -35,9 +35,10 @@ export function scrollToTop(el: HTMLElement | null) {
 }
 
 export function getSystemPrompt() {
+    const content = JSON.parse(localStorage.getItem('settings') || '{}').system_prompt || 'You are ChatGPT, a large language model trained by OpenAI. Follow the user\'s instructions carefully. Respond using markdown.'
     const p: OpenAIMessage = {
         role: 'system',
-        content: 'You are ChatGPT, a large language model trained by OpenAI. Follow the user\'s instructions carefully. Respond using markdown.'
+        content
     }
     return p
 }