feat: 设置增加 ChatGPT 模型选择

codexu · codexu · commit 2b53e094f818 · 2024-12-19T17:06:11.000+08:00
diff --git a/src/app/core/setting/config.tsx b/src/app/core/setting/config.tsx
@@ -25,26 +25,26 @@ export const config = [
           toast({ title: '当前版本' })
         }
       },
-      {
-        title: '自动更新',
-        key: 'autoUpdate',
-        value: true,
-        desc: <>关闭后，NoteGen 将不会自动更新。</>,
-        schema: z.boolean(),
-        disabled: true,
-        layout: 'horizontal',
-        type: 'switch',
-      },
-      {
-        title: '语言',
-        key: 'language',
-        value: '简体中文',
-        desc: <>更改界面语言</>,
-        type: 'select',
-        schema: z.string(),
-        disabled: true,
-        layout: 'horizontal',
-      }
+      // {
+      //   title: '自动更新',
+      //   key: 'autoUpdate',
+      //   value: true,
+      //   desc: <>关闭后，NoteGen 将不会自动更新。</>,
+      //   schema: z.boolean(),
+      //   disabled: true,
+      //   layout: 'horizontal',
+      //   type: 'switch',
+      // },
+      // {
+      //   title: '语言',
+      //   key: 'language',
+      //   value: '简体中文',
+      //   desc: <>更改界面语言</>,
+      //   type: 'select',
+      //   schema: z.string(),
+      //   disabled: true,
+      //   layout: 'horizontal',
+      // }
     ]
   },
   {
@@ -66,6 +66,19 @@ export const config = [
         layout: 'vertical',
         type: 'input',
       },
+      {
+        title: '模型选择',
+        key: 'model',
+        value: 'gpt-4o-mini',
+        desc: <>
+          <span>选择 ChatGPT 模型，不同的模型对应不同的资费标准，请按实力选择。</span><br />
+          <OpenBroswer title="费用标准参考" url="https://chatanywhere.apifox.cn/doc-2694962" />
+        </>,
+        schema: z.string(),
+        disabled: false,
+        layout: 'horizontal',
+        type: 'select',
+      },
       {
         title: '记录生成描述',
         key: 'markDescGen',
diff --git a/src/app/core/setting/model-select.tsx b/src/app/core/setting/model-select.tsx
@@ -0,0 +1,62 @@
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
+import { ControllerRenderProps } from "react-hook-form";
+import { fetchAiModels } from "@/lib/ai";
+import { useEffect, useState } from "react";
+import { AiModel } from "@/lib/ai.types";
+import { Store } from "@tauri-apps/plugin-store";
+import useSettingStore from "@/stores/setting";
+
+export function ModelSelect({ field }: { field: ControllerRenderProps }) {
+  const [models, setModels] = useState<AiModel[]>([])
+  const [defaultModel, setDefaultModel] = useState<string>('')
+  const { apiKey } = useSettingStore()
+
+  async function init() {
+    const store = await Store.load('store.json');
+    const value = await store.get('model')
+    if (value) {
+      setDefaultModel(value as string)
+    }
+    
+    const res = (await fetchAiModels()) as {
+      data: AiModel[]
+    }
+    res.data = res.data.filter((model, index, self) => {
+      return index === self.findIndex((m) => {
+        return m.id === model.id
+      })
+    })
+    res.data.sort((a, b) => {
+      // 按名称排序
+      return a.id.localeCompare(b.id)
+    })
+    setModels(res.data)
+  }
+
+  function changeHandler(value: string) {
+    if (value) {
+      field.onChange(value)
+    }
+  }
+
+  useEffect(() => {
+    if (apiKey) {
+      init()
+    }
+  }, [apiKey])
+
+  return (
+    <Select onValueChange={changeHandler} value={field.value} defaultValue={defaultModel} disabled={field.disabled}>
+      <SelectTrigger className="w-[180px]">
+        <SelectValue placeholder="选择模型" />
+      </SelectTrigger>
+      <SelectContent>
+        {
+          models.map((model) => (
+            <SelectItem key={model.id + model.created} value={model.id}>{model.id}</SelectItem>
+          ))
+        }
+      </SelectContent>
+    </Select>
+  )
+}
diff --git a/src/app/core/setting/page.tsx b/src/app/core/setting/page.tsx
@@ -101,7 +101,7 @@ export default function Page() {
                             <FormItem className={`${setting.layout === 'horizontal' ? 'flex-row items-center' : 'flex-col'} flex justify-between mt-4`}>
                               <div>
                                 <FormLabel>{setting.title}</FormLabel>
-                                <FormDescription>{setting.desc}</FormDescription>
+                                <FormDescription className="my-1">{setting.desc}</FormDescription>
                               </div>
                               <FormControl>
                                 <SettingRender setting={setting} field={field} />
diff --git a/src/app/core/setting/setting-render.tsx b/src/app/core/setting/setting-render.tsx
@@ -9,6 +9,7 @@ import { LanguageSelect } from "./lanage-select";
 import { PreviewThemeSelect } from "./preview-theme-select";
 import { CodeThemeSelect } from "./code-theme-select";
 import { Badge } from "@/components/ui/badge";
+import { ModelSelect } from "./model-select";
 
 export function SettingRender(
   { setting, field }:
@@ -32,6 +33,8 @@ export function SettingRender(
           return <PreviewThemeSelect field={field} />
         case 'codeTheme':
           return <CodeThemeSelect field={field} />
+        case 'model':
+          return <ModelSelect field={field} />
       }
     case 'shortcut':
       return <Badge>{setting.value}</Badge>
diff --git a/src/components/local-image.tsx b/src/components/local-image.tsx
@@ -11,7 +11,6 @@ export function LocalImage({ onLoad, src, ...props }: React.ComponentProps<typeo
       setLocalSrc(src.toString())
     } else {
       const covertFileSrcPath = await convertImage(src as string)
-      console.log(covertFileSrcPath);
       setLocalSrc(covertFileSrcPath)
     }
   }
diff --git a/src/lib/ai.ts b/src/lib/ai.ts
@@ -7,13 +7,14 @@ const url = 'https://api.chatanywhere.tech/v1/chat/completions'
 async function createAi(text: string, isStream = true) {
   const store = await Store.load('store.json')
   const apiKey = await store.get('apiKey')
+  const model = await store.get('model')
 
   const headers = new Headers();
   headers.append("Authorization", `Bearer ${apiKey}`);
   headers.append("Content-Type", "application/json");
 
   const body = JSON.stringify({
-    model: 'gpt-4o-mini',
+    model,
     stream: isStream,
     messages: [
         {
@@ -32,6 +33,19 @@ async function createAi(text: string, isStream = true) {
   return requestOptions;
 }
 
+// 获取模型
+export async function fetchAiModels() {
+  const store = await Store.load('store.json')
+  const apiKey = await store.get('apiKey')
+  const headers = new Headers();
+  headers.append("Authorization", `Bearer ${apiKey}`);
+  const requestOptions = {
+    method: 'GET',
+    headers,
+  };
+  return (await fetch('https://api.chatanywhere.tech/v1/models', requestOptions)).json()
+}
+
 export async function fetchAiStream(text: string, callback: (text: string) => void) {
   const requestOptions = await createAi(text, true)
 
diff --git a/src/lib/ai.types.ts b/src/lib/ai.types.ts
@@ -24,4 +24,11 @@ interface Choice {
 interface Message {
   role: string;
   content: string;
+}
+
+export interface AiModel {
+  id: string;
+  object: string;
+  created: number;
+  owned_by: string;
 }
diff --git a/src/stores/setting.ts b/src/stores/setting.ts
@@ -17,6 +17,9 @@ interface SettingState {
   apiKey: string
   setApiKey: (apiKey: string) => void
 
+  model: string
+  setModel: (language: string) => void
+
   markDescGen: boolean
   setMarkDescGen: (markDescGen: boolean) => void
 
@@ -29,14 +32,14 @@ interface SettingState {
   codeTheme: string
   setCodeTheme: (codeTheme: string) => void
 
-  tesseractList: string[]
-  setTesseractList: (tesseractList: string[]) => void
+  tesseractList: string
+  setTesseractList: (tesseractList: string) => void
 
   screenshotShortcut: string
   setScreenshotShortcut: (screenshotShortcut: string) => void
 
   githubUsername: string
-  setGithubUsername: (githubUsername: string) => void
+  setGithubUsername: (githubUsername: string) => Promise<void>
 
   accessToken: string
   setAccessToken: (accessToken: string) => void
@@ -73,6 +76,9 @@ const useSettingStore = create<SettingState>((set, get) => ({
   apiKey: '',
   setApiKey: (apiKey: string) => set({ apiKey }),
 
+  model: 'gpt-4o-mini',
+  setModel: (model: string) => set({ model }),
+
   markDescGen: true,
   setMarkDescGen: (markDescGen: boolean) => set({ markDescGen }),
 
@@ -85,14 +91,18 @@ const useSettingStore = create<SettingState>((set, get) => ({
   codeTheme: 'atom',
   setCodeTheme: (codeTheme: string) => set({ codeTheme }),
 
-  tesseractList: [],
-  setTesseractList: (tesseractList: string[]) => set({ tesseractList }),
+  tesseractList: 'eng,chi_sim',
+  setTesseractList: (tesseractList: string) => set({ tesseractList }),
 
   screenshotShortcut: 'Command+Shift+R',
   setScreenshotShortcut: (screenshotShortcut: string) => set({ screenshotShortcut }),
 
   githubUsername: '',
-  setGithubUsername: (githubUsername: string) => set({ githubUsername }),
+  setGithubUsername: async(githubUsername: string) => {
+    set({ githubUsername })
+    const store = await Store.load('store.json');
+    store.set('githubUsername', githubUsername)
+  },
 
   accessToken: '',
   setAccessToken: (accessToken: string) => set({ accessToken }),

Original file line number	Diff line number	Diff line change
`@@ -11,7 +11,6 @@ export function LocalImage({ onLoad, src, ...props }: React.ComponentProps<typeo`
`11`	`11`	`setLocalSrc(src.toString())`
`12`	`12`	`} else {`
`13`	`13`	`const covertFileSrcPath = await convertImage(src as string)`
`14`		`- console.log(covertFileSrcPath);`
`15`	`14`	`setLocalSrc(covertFileSrcPath)`
`16`	`15`	`}`
`17`	`16`	`}`