增加模型选择

manifest.json

@@ -1,7 +1,7 @@
 {
   "name": "哔哩哔哩字幕列表",
   "description": "显示B站视频的字幕列表,可点击跳转与下载字幕,并支持翻译和总结字幕!",
-  "version": "1.7.1",
+  "version": "1.7.2",
   "manifest_version": 3,
   "permissions": [
     "storage"

package.json

@@ -1,7 +1,7 @@
 {
   "private": true,
   "name": "bilibili-subtitle",
-  "version": "1.7.1",
+  "version": "1.7.2",
   "type": "module",
   "description": "哔哩哔哩字幕列表",
   "main": "index.js",

src/biz/Settings.tsx

@@ -5,6 +5,8 @@ import {
   HEADER_HEIGHT,
   LANGUAGE_DEFAULT,
   LANGUAGES,
+  MODEL_DEFAULT,
+  MODELS,
   PAGE_MAIN,
   PROMPT_DEFAULTS,
   PROMPT_TYPES,
@@ -63,12 +65,13 @@ const Settings = () => {
   const [apiKeyValue, { onChange: onChangeApiKeyValue }] = useEventTarget({initialValue: envData.apiKey??''})
   const [serverUrlValue, setServerUrlValue] = useState(envData.serverUrl)
   const [languageValue, { onChange: onChangeLanguageValue }] = useEventTarget({initialValue: envData.language??LANGUAGE_DEFAULT})
+  const [modelValue, { onChange: onChangeModelValue }] = useEventTarget({initialValue: envData.model??MODEL_DEFAULT})
   const [summarizeLanguageValue, { onChange: onChangeSummarizeLanguageValue }] = useEventTarget({initialValue: envData.summarizeLanguage??SUMMARIZE_LANGUAGE_DEFAULT})
   const [hideOnDisableAutoTranslateValue, setHideOnDisableAutoTranslateValue] = useState(envData.hideOnDisableAutoTranslate)
   const [themeValue, setThemeValue] = useState(envData.theme)
   const [fontSizeValue, setFontSizeValue] = useState(envData.fontSize)
   const [transDisplayValue, setTransDisplayValue] = useState(envData.transDisplay)
-  const [wordsValue, setWordsValue] = useState(envData.words??WORDS_DEFAULT)
+  const [wordsValue, setWordsValue] = useState<number | undefined>(envData.words??WORDS_DEFAULT)
   const [fetchAmountValue, setFetchAmountValue] = useState(envData.fetchAmount??TRANSLATE_FETCH_DEFAULT)
   const [moreFold, {toggle: toggleMoreFold}] = useBoolean(true)
   const [promptsFold, {toggle: togglePromptsFold}] = useBoolean(true)
@@ -99,6 +102,7 @@ const Settings = () => {
       autoExpand: autoExpandValue,
       apiKey: apiKeyValue,
       serverUrl: serverUrlValue,
+      model: modelValue,
       translateEnable: translateEnableValue,
       language: languageValue,
       hideOnDisableAutoTranslate: hideOnDisableAutoTranslateValue,
@@ -114,7 +118,7 @@ const Settings = () => {
     }))
     dispatch(setPage(PAGE_MAIN))
     toast.success('保存成功')
-  }, [promptsValue, fontSizeValue, apiKeyValue, autoExpandValue, dispatch, fetchAmountValue, hideOnDisableAutoTranslateValue, languageValue, serverUrlValue, summarizeEnableValue, summarizeFloatValue, summarizeLanguageValue, themeValue, transDisplayValue, translateEnableValue, wordsValue])
+  }, [modelValue, promptsValue, fontSizeValue, apiKeyValue, autoExpandValue, dispatch, fetchAmountValue, hideOnDisableAutoTranslateValue, languageValue, serverUrlValue, summarizeEnableValue, summarizeFloatValue, summarizeLanguageValue, themeValue, transDisplayValue, translateEnableValue, wordsValue])
 
   const onCancel = useCallback(() => {
     dispatch(setPage(PAGE_MAIN))
@@ -207,6 +211,11 @@ const Settings = () => {
             <li>支持其他第三方代理，有问题可加群交流</li>
           </ul>
         </div>}
+        <FormItem title='模型选择' htmlFor='modelSel' tip='注意，不同模型有不同价格'>
+          <select id='modelSel' className="select select-sm select-bordered" value={modelValue} onChange={onChangeModelValue}>
+            {MODELS.map(model => <option key={model.code} value={model.code}>{model.name}</option>)}
+          </select>
+        </FormItem>
         <div className='flex justify-center'>
           <a className='link text-xs' onClick={togglePromptsFold}>{promptsFold?'点击查看提示词':'点击折叠提示词'}</a>
         </div>
@@ -284,12 +293,13 @@ const Settings = () => {
             {LANGUAGES.map(language => <option key={language.code} value={language.code}>{language.name}</option>)}
           </select>
         </FormItem>
-        <FormItem title='分段字数'>
+        <FormItem htmlFor='words' title='分段字数' tip='注意，不同模型有不同字数限制'>
           <div className='flex-1 flex flex-col'>
-            <input type="range" min={WORDS_MIN} max={WORDS_MAX} step={WORDS_STEP} value={wordsValue} className="range range-primary" onChange={onWordsChange} />
+            <input id='words' type='number' className='input input-sm input-bordered w-full' placeholder='默认2000' value={wordsValue} onChange={e => setWordsValue(e.target.value?parseInt(e.target.value):undefined)}/>
-            <div className="w-full flex justify-between text-xs px-2">
+            {/* <input type="range" min={WORDS_MIN} max={WORDS_MAX} step={WORDS_STEP} value={wordsValue} className="range range-primary" onChange={onWordsChange} /> */}
-              {wordsList.map(words => <span key={words}>{words}</span>)}
+            {/* <div className="w-full flex justify-between text-xs px-2"> */}
-            </div>
+            {/*  {wordsList.map(words => <span key={words}>{words}</span>)} */}
+            {/* </div> */}
           </div>
         </FormItem>
       </Section>

src/const.tsx

@@ -153,6 +153,15 @@ export const SUMMARIZE_ALL_THRESHOLD = 5
 export const SERVER_URL_OPENAI = 'https://api.openai.com'
 export const SERVER_URL_THIRD = 'https://op.kongkongye.com'
 
+export const MODELS = [{
+  code: 'gpt-3.5-turbo',
+  name: 'gpt-3.5-turbo',
+}, {
+  code: 'gpt-3.5-turbo-16k',
+  name: 'gpt-3.5-turbo-16k',
+}]
+export const MODEL_DEFAULT = MODELS[0].code
+
 export const LANGUAGES = [{
   code: 'en',
   name: 'English',

src/hooks/useTranslate.ts

@@ -13,6 +13,7 @@ import {
 import {
   LANGUAGE_DEFAULT,
   LANGUAGES_MAP,
+  MODEL_DEFAULT,
   PROMPT_DEFAULTS,
   PROMPT_TYPE_TRANSLATE,
   SUMMARIZE_LANGUAGE_DEFAULT,
@@ -84,7 +85,7 @@ const useTranslate = () => {
           type: 'chatComplete',
           serverUrl: envData.serverUrl,
           data: {
-            model: 'gpt-3.5-turbo',
+            model: envData.model??MODEL_DEFAULT,
             messages: [
               {
                 role: 'user',
@@ -137,7 +138,7 @@ const useTranslate = () => {
         type: 'chatComplete',
         serverUrl: envData.serverUrl,
         data: {
-          model: 'gpt-3.5-turbo',
+          model: envData.model??MODEL_DEFAULT,
           messages: [
             {
               role: 'user',

src/typings.d.ts

@@ -3,6 +3,7 @@ interface EnvData {
   flagDot?: boolean
   apiKey?: string
   serverUrl?: string
+  model?: string
   translateEnable?: boolean
   language?: string
   hideOnDisableAutoTranslate?: boolean