feat: add support for customized AI model (word-hunter#116)

word-hunter#105

Author: shiquda

src/background/index.ts

@@ -244,7 +244,8 @@ onMessage(Messages.fetch_html, async ({ data }) => {
 
 onMessage(Messages.ai_explain, async ({ data }) => {
   const { word, text } = data
-  const explain = await explainWord(word, text, settings().openai.model)
+  const model = settings().openai.model === "custom" ? settings().openai.customModel : settings().openai.model
+  const explain = await explainWord(word, text, model)
   return explain
 })
 

src/lib/settings.ts

@@ -45,7 +45,8 @@ export const DEFAULT_SETTINGS = {
     apiKey: '',
     apiProxy: 'https://api.openai.com/v1/chat/completions',
     model: 'gpt-3.5-turbo',
-    prompt: 'explain the word ${word} in the sentence "${context}" with grade 2 English words'
+    prompt: 'explain the word ${word} in the sentence "${context}" with grade 2 English words',
+    customModel: ''
   },
   githubToken: '',
   githubGistId: ''

src/options/openai.tsx

@@ -26,6 +26,12 @@ export const OpenAISetting = () => {
     setSetting('openai', { ...openai, model: target.value })
   }
 
+  const onCustomModelChange = (e: Event) => {
+    const target = e.target as HTMLInputElement
+    const openai = settings().openai
+    setSetting('openai', { ...openai, customModel: target.value })
+  }
+
   return (
     <Show when={settings().dictTabs.openai}>
       <section class="section">
@@ -43,8 +49,18 @@ export const OpenAISetting = () => {
               <option value="gpt-4">gpt-4</option>
               <option value="gpt-4o">gpt-4o</option>
               <option value="gpt-4o-mini">gpt-4o-mini</option>
+              <option value="custom">custom model</option>
             </select>
           </div>
+          {settings().openai.model === 'custom' && (
+            <input
+              type="text"
+              placeholder="input custom model"
+              class="input input-bordered input-sm w-full max-w-xs text-xs"
+              value={settings().openai.customModel}
+              oninput={onCustomModelChange}
+            />
+          )}
           <textarea
             placeholder="input your openai apikey"
             class="textarea textarea-bordered textarea-lg w-full h-24 max-w-xs text-xs leading-5"