chore: release 1.10.4

This reverts commit e6db6747

.cursorrules

@@ -0,0 +1 @@
+This chrome extension project use typescript, react, tailwindcss, daisyui.

.env.development

@@ -1 +1,3 @@
 VITE_ENV=web-dev
+VITE_EXTENSION_ID=bciglihaegkdhoogebcdblfhppoilclp
+VITE_REVIEW_URL=https://chrome.google.com/webstore/detail/bciglihaegkdhoogebcdblfhppoilclp/reviews

.env.production_chrome

@@ -1,3 +1,5 @@
 NODE_ENV=production
 
 VITE_ENV=chrome
+VITE_EXTENSION_ID=bciglihaegkdhoogebcdblfhppoilclp
+VITE_REVIEW_URL=https://chrome.google.com/webstore/detail/bciglihaegkdhoogebcdblfhppoilclp/reviews

.env.production_edge

@@ -0,0 +1,5 @@
+NODE_ENV=production
+
+VITE_ENV=edge
+VITE_EXTENSION_ID=lignnlhlpiefmcjkdkmfjdckhlaiajan
+VITE_REVIEW_URL=https://microsoftedge.microsoft.com/addons/detail/lignnlhlpiefmcjkdkmfjdckhlaiajan

README.md

@@ -27,6 +27,13 @@
 
 安装扩展后，在哔哩哔哩网站观看视频时，视频右侧会显示字幕列表面板。
 
+### 使用本地Ollama模型
+如果你使用本地Ollama模型，需要配置环境变量：`OLLAMA_ORIGINS=chrome-extension://bciglihaegkdhoogebcdblfhppoilclp`，否则访问会出现403错误。
+
+然后在插件配置里，apiKey随便填一个，服务器地址填`http://localhost:11434`，模型选自定义，然后填入自定义模型名如`llama2`。
+
+但是测试发现llama2 7b模型比较弱，无法返回需要的json格式，因此总结很可能会无法解析响应而报错(但提问功能不需要解析响应格式，因此没问题)。
+
 ## 交流联系
 
 QQ群：194536885

manifest.json

@@ -1,11 +1,15 @@
 {
   "name": "哔哩哔哩字幕列表",
   "description": "显示B站视频的字幕列表,可点击跳转与下载字幕,并支持翻译和总结字幕!",
-  "version": "1.9.0",
+  "version": "1.10.4",
   "manifest_version": 3,
   "permissions": [
     "storage"
   ],
+  "host_permissions": [
+    "http://localhost/*",
+    "http://127.0.0.1/*"
+  ],
   "background": {
     "service_worker": "src/chrome/background.ts"
   },

package.json

@@ -1,15 +1,15 @@
 {
   "private": true,
   "name": "bilibili-subtitle",
-  "version": "1.9.0",
+  "version": "1.10.4",
   "type": "module",
   "description": "哔哩哔哩字幕列表",
   "main": "index.js",
   "scripts": {
     "dev": "vite",
-    "build": "tsc && vite build -m production_chrome",
-    "build_chrome": "pnpm run build && node fixChrome.cjs",
-    "build_firefox": "pnpm run build && node fixFirefox.cjs",
+    "build_chrome": "tsc && vite build -m production_chrome && node fixChrome.cjs",
+    "build_edge": "tsc && vite build -m production_edge && node fixChrome.cjs",
+    "build_firefox": "tsc && vite build -m production_chrome && node fixFirefox.cjs",
     "fix": "eslint --fix --quiet ."
   },
   "author": "IndieKKY",

src/biz/Ask.tsx

@@ -0,0 +1,72 @@
+import {AiOutlineCloseCircle, BsDashSquare, BsPlusSquare, FaQuestion} from 'react-icons/all'
+import classNames from 'classnames'
+import Markdown from '../components/Markdown'
+import React, {useCallback} from 'react'
+import {delAskInfo, mergeAskInfo, setPage} from '../redux/envReducer'
+import {useAppDispatch, useAppSelector} from '../hooks/redux'
+import {PAGE_SETTINGS} from '../const'
+import toast from 'react-hot-toast'
+import useTranslate from '../hooks/useTranslate'
+
+const Ask = (props: {
+  ask: AskInfo
+}) => {
+  const {ask} = props
+  const dispatch = useAppDispatch()
+  const envData = useAppSelector(state => state.env.envData)
+  const fontSize = useAppSelector(state => state.env.envData.fontSize)
+  const segments = useAppSelector(state => state.env.segments)
+  const {addAskTask} = useTranslate()
+
+  const onRegenerate = useCallback(() => {
+    const apiKey = envData.aiType === 'gemini'?envData.geminiApiKey:envData.apiKey
+    if (apiKey) {
+      if (segments != null && segments.length > 0) {
+        addAskTask(ask.id, segments[0], ask.question).catch(console.error)
+      }
+    } else {
+      dispatch(setPage(PAGE_SETTINGS))
+      toast.error('需要先设置ApiKey!')
+    }
+  }, [addAskTask, ask.id, ask.question, dispatch, envData.aiType, envData.apiKey, envData.geminiApiKey, segments])
+
+  const onAskFold = useCallback(() => {
+    dispatch(mergeAskInfo({
+      id: ask.id,
+      fold: !ask.fold
+    }))
+  }, [ask, dispatch])
+
+  const onClose = useCallback(() => {
+    dispatch(delAskInfo(ask.id))
+  }, [ask, dispatch])
+
+  return <div className='shadow bg-base-200 my-0.5 mx-1.5 p-1.5 rounded flex flex-col justify-center items-center'>
+    <div className='w-full relative flex justify-center min-h-[20px]'>
+      <div className='absolute left-0 top-0 bottom-0 text-xs select-none flex-center desc'>
+        {ask.fold
+          ? <BsPlusSquare className='cursor-pointer' onClick={onAskFold}/> :
+          <BsDashSquare className='cursor-pointer' onClick={onAskFold}/>}
+      </div>
+      <button className='absolute right-0 top-0 bottom-0 btn btn-ghost btn-xs btn-circle text-base-content/75' onClick={onClose}>
+        <AiOutlineCloseCircle/>
+      </button>
+      <div className="tabs">
+        <a className="tab tab-lifted tab-xs tab-disabled cursor-default"></a>
+        <a className='tab tab-lifted tab-xs tab-active'><FaQuestion/>提问</a>
+        <a className="tab tab-lifted tab-xs tab-disabled cursor-default"></a>
+      </div>
+    </div>
+    {!ask.fold && ask.question && <div className='text-sm font-medium max-w-[90%]'>{ask.question}</div>}
+    {!ask.fold && ask.content &&
+      <div className={classNames('font-medium max-w-[90%] mt-1', fontSize === 'large' ? 'text-sm' : 'text-xs')}>
+        <Markdown content={ask.content}/>
+      </div>}
+    {!ask.fold && <button disabled={ask.status !== 'done'}
+                         className={classNames('btn btn-link btn-xs', ask.status === 'pending' && 'loading')}
+                         onClick={onRegenerate}>{ask.status === 'pending' ? '生成中' : '重新生成'}</button>}
+    {!ask.fold && ask.error && <div className='text-xs text-error'>{ask.error}</div>}
+  </div>
+}
+
+export default Ask

src/biz/Body.tsx

@@ -1,7 +1,7 @@
 import React, {useCallback, useEffect, useMemo, useRef} from 'react'
 import {
-  setAskFold,
-  setAskQuestion,
+  addAskInfo,
+  mergeAskInfo,
   setAutoScroll,
   setAutoTranslate,
   setCheckAutoScroll,
@@ -16,10 +16,6 @@ import {useAppDispatch, useAppSelector} from '../hooks/redux'
 import {
   AiOutlineAim,
   AiOutlineCloseCircle,
-  BsDashSquare,
-  BsPlusSquare,
-  FaGripfire,
-  FaQuestion,
   FaRegArrowAltCircleDown,
   IoWarning,
   MdExpand,
@@ -32,20 +28,21 @@ import {
   ASK_ENABLED_DEFAULT,
   HEADER_HEIGHT,
   PAGE_SETTINGS,
-  RECOMMEND_HEIGHT,
   SEARCH_BAR_HEIGHT,
   SUMMARIZE_ALL_THRESHOLD,
   TITLE_HEIGHT
 } from '../const'
 import {FaClipboardList} from 'react-icons/fa'
 import useTranslate from '../hooks/useTranslate'
-import {getSummarize} from '../util/biz_util'
 import {openUrl} from '@kky002/kky-util'
-import Markdown from '../components/Markdown'
-import {random} from 'lodash-es'
+import useKeyService from '../hooks/useKeyService'
+import Ask from './Ask'
+import {v4} from 'uuid'
+import RateExtension from '../components/RateExtension'
 
 const Body = () => {
   const dispatch = useAppDispatch()
+  const inputting = useAppSelector(state => state.env.inputting)
   const noVideo = useAppSelector(state => state.env.noVideo)
   const autoTranslate = useAppSelector(state => state.env.autoTranslate)
   const autoScroll = useAppSelector(state => state.env.autoScroll)
@@ -57,22 +54,18 @@ const Body = () => {
   const translateEnable = useAppSelector(state => state.env.envData.translateEnable)
   const summarizeEnable = useAppSelector(state => state.env.envData.summarizeEnable)
   const {addSummarizeTask, addAskTask} = useTranslate()
-  const infos = useAppSelector(state => state.env.infos)
-  const askFold = useAppSelector(state => state.env.askFold)
-  const askQuestion = useAppSelector(state => state.env.askQuestion)
-  const askContent = useAppSelector(state => state.env.askContent)
-  const askStatus = useAppSelector(state => state.env.askStatus)
-  const askError = useAppSelector(state => state.env.askError)
+  // const infos = useAppSelector(state => state.env.infos)
   const bodyRef = useRef<any>()
   const curOffsetTop = useAppSelector(state => state.env.curOffsetTop)
   const checkAutoScroll = useAppSelector(state => state.env.checkAutoScroll)
   const needScroll = useAppSelector(state => state.env.needScroll)
   const totalHeight = useAppSelector(state => state.env.totalHeight)
   const curSummaryType = useAppSelector(state => state.env.tempData.curSummaryType)
-  const title = useAppSelector(state => state.env.title)
-  const fontSize = useAppSelector(state => state.env.envData.fontSize)
+  // const title = useAppSelector(state => state.env.title)
+  // const fontSize = useAppSelector(state => state.env.envData.fontSize)
   const searchText = useAppSelector(state => state.env.searchText)
-  const recommendIdx = useMemo(() => random(0, 3), [])
+  const asks = useAppSelector(state => state.env.asks)
+  // const recommendIdx = useMemo(() => random(0, 3), [])
   const showSearchInput = useMemo(() => {
     return (segments != null && segments.length > 0) && (envData.searchEnabled ? envData.searchEnabled : (envData.askEnabled ?? ASK_ENABLED_DEFAULT))
   }, [envData.askEnabled, envData.searchEnabled, segments])
@@ -80,7 +73,7 @@ const Body = () => {
     let placeholder = ''
     if (envData.searchEnabled) {
       if (envData.askEnabled??ASK_ENABLED_DEFAULT) {
-        placeholder = '搜索或提问字幕内容'
+        placeholder = '搜索或提问字幕内容(按Enter提问)'
       } else {
         placeholder = '搜索字幕内容'
       }
@@ -136,14 +129,19 @@ const Body = () => {
 
   const onFoldAll = useCallback(() => {
     dispatch(setFoldAll(!foldAll))
-    dispatch(setAskFold(!foldAll))
+    for (const ask of asks) {
+      dispatch(mergeAskInfo({
+        id: ask.id,
+        fold: !foldAll
+      }))
+    }
     for (const segment of segments ?? []) {
       dispatch(setSegmentFold({
         segmentStartIdx: segment.startIdx,
         fold: !foldAll
       }))
     }
-  }, [dispatch, foldAll, segments])
+  }, [asks, dispatch, foldAll, segments])
 
   const toggleAutoTranslateCallback = useCallback(() => {
     const apiKey = envData.aiType === 'gemini'?envData.geminiApiKey:envData.apiKey
@@ -166,14 +164,14 @@ const Body = () => {
     }
   }, [autoScroll, dispatch])
 
-  const onCopy = useCallback(() => {
-    const [success, content] = getSummarize(title, segments, curSummaryType)
-    if (success) {
-      navigator.clipboard.writeText(content).then(() => {
-        toast.success('复制成功')
-      }).catch(console.error)
-    }
-  }, [curSummaryType, segments, title])
+  // const onCopy = useCallback(() => {
+  //   const [success, content] = getSummarize(title, segments, curSummaryType)
+  //   if (success) {
+  //     navigator.clipboard.writeText(content).then(() => {
+  //       toast.success('复制成功')
+  //     }).catch(console.error)
+  //   }
+  // }, [curSummaryType, segments, title])
 
   const onSearchTextChange = useCallback((e: any) => {
     const searchText = e.target.value
@@ -189,8 +187,14 @@ const Body = () => {
       const apiKey = envData.aiType === 'gemini'?envData.geminiApiKey:envData.apiKey
       if (apiKey) {
         if (segments != null && segments.length > 0) {
-          dispatch(setAskQuestion(searchText))
-          addAskTask(segments[0], searchText).catch(console.error)
+          const id = v4()
+          addAskTask(id, segments[0], searchText).catch(console.error)
+          // 添加ask
+          dispatch(addAskInfo({
+            id,
+            question: searchText,
+            status: 'pending',
+          }))
         }
       } else {
         dispatch(setPage(PAGE_SETTINGS))
@@ -199,13 +203,8 @@ const Body = () => {
     }
   }, [addAskTask, dispatch, envData.aiType, envData.apiKey, envData.askEnabled, envData.geminiApiKey, searchText, segments])
 
-  const onSetAsk = useCallback(() => {
-    dispatch(setSearchText(askQuestion??''))
-  }, [askQuestion, dispatch])
-
-  const onAskFold = useCallback(() => {
-    dispatch(setAskFold(!askFold))
-  }, [askFold, dispatch])
+  // service
+  useKeyService()
 
   // 自动滚动
   useEffect(() => {
@@ -252,7 +251,17 @@ const Body = () => {
 
     {/* search */}
     {showSearchInput && <div className='px-2 py-1 flex flex-col relative'>
-      <input type='text' className='input input-xs bg-base-200' placeholder={searchPlaceholder} value={searchText} onChange={onSearchTextChange}/>
+      <input type='text' className='input input-xs bg-base-200' placeholder={searchPlaceholder} value={searchText} onChange={onSearchTextChange} onKeyDown={e => {
+        // enter
+        if (e.key === 'Enter') {
+          if (!inputting) {
+            e.preventDefault()
+            e.stopPropagation()
+            onAsk()
+            dispatch(setSearchText(''))
+          }
+        }
+      }}/>
       {searchText && <button className='absolute top-1 right-2 btn btn-ghost btn-xs btn-circle text-base-content/75' onClick={onClearSearchText}><AiOutlineCloseCircle/></button>}
     </div>}
 
@@ -268,42 +277,24 @@ const Body = () => {
     <div ref={bodyRef} onWheel={onWheel}
          className={classNames('flex flex-col gap-1.5 overflow-y-auto select-text scroll-smooth', floatKeyPointsSegIdx != null && 'pb-[100px]')}
          style={{
-           height: `${totalHeight - HEADER_HEIGHT - TITLE_HEIGHT - RECOMMEND_HEIGHT - (showSearchInput ? SEARCH_BAR_HEIGHT : 0)}px`
+           height: `${totalHeight - HEADER_HEIGHT - TITLE_HEIGHT - (showSearchInput ? SEARCH_BAR_HEIGHT : 0)}px`
          }}
     >
-      {/* ask */}
-      {(envData.askEnabled ?? ASK_ENABLED_DEFAULT) && (searchText || askQuestion) &&
-        <div className='shadow bg-base-200 my-0.5 mx-1.5 p-1.5 rounded flex flex-col justify-center items-center'>
-          <div className='w-full relative flex justify-center min-h-[20px]'>
-            <div className='absolute left-0 top-0 bottom-0 text-xs select-none flex-center desc'>
-              {askFold
-                ? <BsPlusSquare className='cursor-pointer' onClick={onAskFold}/> :
-                <BsDashSquare className='cursor-pointer' onClick={onAskFold}/>}
-            </div>
-            <div className="tabs">
-              <a className="tab tab-lifted tab-xs tab-disabled cursor-default"></a>
-              <a className='tab tab-lifted tab-xs tab-active'><FaQuestion/>提问</a>
-              <a className="tab tab-lifted tab-xs tab-disabled cursor-default"></a>
-            </div>
-          </div>
-          {!askFold && askQuestion &&
-            <div className='link link-hover text-sm font-medium max-w-[90%]' onClick={onSetAsk}>{askQuestion}</div>}
-          {!askFold && askContent &&
-            <div className={classNames('font-medium max-w-[90%] mt-1', fontSize === 'large' ? 'text-sm' : 'text-xs')}>
-              <Markdown content={askContent}/>
-            </div>}
-          {!askFold && <button disabled={askStatus === 'pending'}
-                               className={classNames('btn btn-link btn-xs', askStatus === 'pending' && 'loading')}
-                               onClick={onAsk}>{askStatus === 'init' ? '点击提问' : (askStatus === 'pending' ? '生成中' : '重新生成')}</button>}
-          {!askFold && askStatus === 'init' && <div className='desc-lighter text-xs'>提问举例：这个视频说了什么</div>}
-          {!askFold && askError && <div className='text-xs text-error'>{askError}</div>}
-        </div>}
+      {/* asks */}
+      {asks.map(ask => <Ask key={ask.id} ask={ask}/>)}
 
       {/* segments */}
       {segments?.map((segment, segmentIdx) => <SegmentCard key={segment.startIdx} segment={segment}
                                                            segmentIdx={segmentIdx} bodyRef={bodyRef}/>)}
 
       {/* tip */}
+      <div className='text-sm font-semibold text-center'>快捷键提示</div>
+      <ul className='list-disc text-sm desc pl-5'>
+        <li>单击字幕跳转，双击字幕跳转+切换暂停。</li>
+        <li>alt+单击字幕复制单条字幕。</li>
+        <li>上下方向键来移动当前字幕(可先点击字幕使焦点在字幕列表内)。</li>
+      </ul>
+
       {/* <div className='flex flex-col items-center text-center pt-1 pb-2'> */}
       {/*  <div className='font-semibold text-accent'>💡<span className='underline underline-offset-4'>提示</span>💡</div> */}
       {/*  <div className='text-sm desc px-2'>可以尝试将<span className='text-amber-600 font-semibold'>概览</span>生成的内容粘贴到<span */}
@@ -313,23 +304,23 @@ const Body = () => {
       {/*                                          onClick={onCopy}>点击复制生成的{SUMMARIZE_TYPES[curSummaryType].name}<RiFileCopy2Line/> */}
       {/*  </button>} */}
       {/* </div> */}
-      {((infos == null) || infos.length === 0) && <div className='flex flex-col'>
-        <div className='flex flex-col items-center text-center py-2 mx-4'>
-          <div className='font-semibold text-accent flex items-center gap-1'><img src='/bibigpt.png'
-                                                                                  alt='BibiGPT logo'
-                                                                                  className='w-8 h-8'/>BibiGPT
-          </div>
-          <div className='text-sm px-2 desc'>这是<span className='text-amber-600 font-semibold text-base'>网页</span>版的字幕列表，支持<span
-            className='font-semibold'>任意</span>视频提取字幕总结（包括没有字幕的视频）
-          </div>
-          <div className='flex gap-2'>
-            <a title='BibiGPT' href='https://bibigpt.co/r/bilibili'
-               onClick={(e) => {
-                 e.preventDefault()
-                 openUrl('https://bibigpt.co/r/bilibili')
-               }} className='link text-sm text-accent'>✨ BibiGPT ✨</a>
-          </div>
-        </div>
+      <div className='flex flex-col'>
+        {/* <div className='flex flex-col items-center text-center py-2 mx-4 border-t border-t-base-300'> */}
+        {/*  <div className='font-semibold text-accent flex items-center gap-1'><img src='/bibigpt.png' */}
+        {/*                                                                          alt='BibiGPT logo' */}
+        {/*                                                                          className='w-8 h-8'/>BibiGPT */}
+        {/*  </div> */}
+        {/*  <div className='text-sm px-2 desc'>这是<span className='text-amber-600 font-semibold text-base'>网页</span>版的字幕列表，支持<span */}
+        {/*    className='font-semibold'>任意</span>视频提取字幕总结（包括没有字幕的视频） */}
+        {/*  </div> */}
+        {/*  <div className='flex gap-2'> */}
+        {/*    <a title='BibiGPT' href='https://bibigpt.co/r/bilibili' */}
+        {/*       onClick={(e) => { */}
+        {/*         e.preventDefault() */}
+        {/*         openUrl('https://bibigpt.co/r/bilibili') */}
+        {/*       }} className='link text-sm text-accent'>✨ BibiGPT ✨</a> */}
+        {/*  </div> */}
+        {/* </div> */}
         <div className='flex flex-col items-center text-center py-2 mx-4 border-t border-t-base-300'>
           <div className='font-semibold text-accent flex items-center gap-1'><img src='/youtube-caption.png'
                                                                                   alt='youtube caption logo'
@@ -349,77 +340,79 @@ const Body = () => {
                  e.preventDefault()
                  openUrl('https://microsoftedge.microsoft.com/addons/detail/galeejdehabppfgooagmkclpppnbccpc')
                }} className='link text-sm text-accent'>Edge商店</a>
-            <a title='Crx搜搜(国内可访问)' href='https://www.crxsoso.com/webstore/detail/fiaeclpicddpifeflpmlgmbjgaedladf'
+            <a title='Crx搜搜(国内可访问)'
+               href='https://www.crxsoso.com/webstore/detail/fiaeclpicddpifeflpmlgmbjgaedladf'
                onClick={(e) => {
                  e.preventDefault()
                  openUrl('https://www.crxsoso.com/webstore/detail/fiaeclpicddpifeflpmlgmbjgaedladf')
                }} className='link text-sm text-accent'>Crx搜搜(国内可访问)</a>
           </div>
         </div>
-        <div className='flex flex-col items-center text-center py-2 mx-4 border-t border-t-base-300'>
-          <div className='font-semibold text-accent flex items-center gap-1'><img src='/immersive-summary.png'
-                                                                                  alt='Immersive Summary logo'
-                                                                                  className='w-8 h-8'/>Immersive Summary
+        {/* <div className='flex flex-col items-center text-center py-2 mx-4 border-t border-t-base-300'> */}
+        {/*  <div className='font-semibold text-accent flex items-center gap-1'><img src='/my-article-summarizer.png' */}
+        {/*                                                                          alt='My Article Summarizer logo' */}
+        {/*                                                                          className='w-8 h-8'/>My Article Summarizer */}
+        {/*  </div> */}
+        {/*  <div className='text-sm px-2 desc'>网页文章总结（有每日免费额度，无需apikey）。</div> */}
+        {/*  <div className='flex gap-2'> */}
+        {/*    <a title='Chrome商店' href='https://chromewebstore.google.com/detail/my-article-summarizer/nanlpakfialleijdidafldapoifndngn' */}
+        {/*       onClick={(e) => { */}
+        {/*         e.preventDefault() */}
+        {/*         openUrl('https://chromewebstore.google.com/detail/my-article-summarizer/nanlpakfialleijdidafldapoifndngn') */}
+        {/*       }} className='link text-sm text-accent'>Chrome商店</a> */}
+        {/*    <a title='Crx搜搜(国内可访问)' */}
+        {/*       href='https://www.crxsoso.com/webstore/detail/nanlpakfialleijdidafldapoifndngn' */}
+        {/*       onClick={(e) => { */}
+        {/*         e.preventDefault() */}
+        {/*         openUrl('https://www.crxsoso.com/webstore/detail/nanlpakfialleijdidafldapoifndngn') */}
+        {/*       }} className='link text-sm text-accent'>Crx搜搜(国内可访问)</a> */}
+        {/*  </div> */}
+        {/* </div> */}
       </div>
-          <div className='text-sm px-2 desc'>沉浸式总结，多种方式总结网页文章。</div>
-          <div className='flex gap-2'>
-            <a title='Chrome商店' href='https://chromewebstore.google.com/detail/mcijpllinkhflgpkggimnafkbmpiijah'
-               onClick={(e) => {
-                 e.preventDefault()
-                 openUrl('https://chromewebstore.google.com/detail/mcijpllinkhflgpkggimnafkbmpiijah')
-               }} className='link text-sm text-accent'>Chrome商店</a>
-            <a title='Crx搜搜(国内可访问)'
-               href='https://www.crxsoso.com/webstore/detail/mcijpllinkhflgpkggimnafkbmpiijah'
-               onClick={(e) => {
-                 e.preventDefault()
-                 openUrl('https://www.crxsoso.com/webstore/detail/mcijpllinkhflgpkggimnafkbmpiijah')
-               }} className='link text-sm text-accent'>Crx搜搜(国内可访问)</a>
+      <div className='p-2'><RateExtension/></div>
     </div>
-        </div>
-      </div>}
-    </div>
-
     {/* recommend */}
-    <div className='p-0.5' style={{
-      height: `${RECOMMEND_HEIGHT}px`
-    }}>
-      {recommendIdx === 0 && <div className='flex items-center gap-1.5 rounded shadow-sm bg-base-200/10'>
-        <a className='link link-accent link-hover font-semibold text-sm flex items-center' onClick={(e) => {
-          e.preventDefault()
-          openUrl('https://bibigpt.co/r/bilibili')
-        }}><img src='/bibigpt.png'
-                alt='BibiGPT logo'
-                className='w-8 h-8'/>✨ BibiGPT ✨</a>
-        <span className='text-sm desc'>支持任意视频的网页版总结。</span>
-      </div>}
-      {recommendIdx === 1 && <div className='flex items-center gap-1 rounded shadow-sm bg-base-200/10'>
-        <a className='link link-accent link-hover font-semibold text-sm flex items-center' onClick={(e) => {
-          e.preventDefault()
-          openUrl('https://chromewebstore.google.com/detail/fiaeclpicddpifeflpmlgmbjgaedladf')
-        }}><img src='/youtube-caption.png'
-                alt='youtube caption logo'
-                className='w-8 h-8'/>YouTube Caption</a>
-        <span className='text-sm desc'>YouTube版的字幕列表。</span>
-      </div>}
-      {recommendIdx === 2 && <div className='flex items-center gap-1 rounded shadow-sm bg-base-200/10'>
-        <a className='link link-accent link-hover font-semibold text-sm flex items-center' onClick={(e) => {
-          e.preventDefault()
-          openUrl('https://chromewebstore.google.com/detail/mcijpllinkhflgpkggimnafkbmpiijah')
-        }}><img src='/immersive-summary.png'
-                alt='Immersive Summary logo'
-                className='w-8 h-8'/>Immersive Summary</a>
-        <span className='text-sm desc'>沉浸式总结网页文章。</span>
-      </div>}
-      {recommendIdx === 3 && <div className='flex items-center gap-1 rounded shadow-sm bg-base-200/10'>
-        <a className='link link-accent link-hover font-semibold text-sm flex items-center' onClick={(e) => {
-          e.preventDefault()
-          openUrl('https://api.openai-up.com/register?aff=varM')
-        }}><img src='/openai-up.ico'
-                alt='Openai Up logo'
-                className='w-8 h-8'/>Openai代理</a>
-        <span className='text-sm desc flex items-center'>目前价格不到官方的6折<FaGripfire className='text-amber-600'/></span>
-      </div>}
-    </div>
+    {/* <div className='p-0.5' style={{ */}
+    {/*  height: `${RECOMMEND_HEIGHT}px` */}
+    {/* }}> */}
+    {/*  {recommendIdx === 0 && <div className='flex items-center gap-1.5 rounded shadow-sm bg-base-200/10'> */}
+    {/*    <a className='link link-accent link-hover font-semibold text-sm flex items-center' onClick={(e) => { */}
+    {/*      e.preventDefault() */}
+    {/*      openUrl('https://bibigpt.co/r/bilibili') */}
+    {/*    }}><img src='/bibigpt.png' */}
+    {/*            alt='BibiGPT logo' */}
+    {/*            className='w-8 h-8'/>✨ BibiGPT ✨</a> */}
+    {/*    <span className='text-sm desc'>支持任意视频的网页版总结。</span> */}
+    {/*  </div>} */}
+    {/*  {recommendIdx === 1 && <div className='flex items-center gap-1 rounded shadow-sm bg-base-200/10'> */}
+    {/*    <a className='link link-accent link-hover font-semibold text-sm flex items-center' onClick={(e) => { */}
+    {/*      e.preventDefault() */}
+    {/*      openUrl('https://chromewebstore.google.com/detail/fiaeclpicddpifeflpmlgmbjgaedladf') */}
+    {/*    }}><img src='/youtube-caption.png' */}
+    {/*            alt='youtube caption logo' */}
+    {/*            className='w-8 h-8'/>YouTube Caption</a> */}
+    {/*    <span className='text-sm desc'>YouTube版的字幕列表。</span> */}
+    {/*  </div>} */}
+    {/*  {recommendIdx === 2 && <div className='flex items-center gap-1 rounded shadow-sm bg-base-200/10'> */}
+    {/*    <a className='link link-accent link-hover font-semibold text-sm flex items-center' onClick={(e) => { */}
+    {/*      e.preventDefault() */}
+    {/*      openUrl('https://chromewebstore.google.com/detail/nanlpakfialleijdidafldapoifndngn') */}
+    {/*    }}><img src='/my-article-summarizer.png' */}
+    {/*            alt='My Article Summarizer logo' */}
+    {/*            className='w-8 h-8'/>My Article Summarizer</a> */}
+    {/*    <span className='text-sm desc'>网页文章总结。</span> */}
+    {/*  </div>} */}
+    {/*  {recommendIdx === 3 && <div className='flex items-center gap-1 rounded shadow-sm bg-base-200/10'> */}
+    {/*    <a className='link link-accent link-hover font-semibold text-sm flex items-center' onClick={(e) => { */}
+    {/*      e.preventDefault() */}
+    {/*      openUrl('https://api.openai-up.com/register?aff=varM') */}
+    {/*    }}><img src='/openai-up.ico' */}
+    {/*            alt='Openai Up logo' */}
+    {/*            className='w-8 h-8'/>Openai代理</a> */}
+    {/*    <span className='text-sm desc flex items-center'>目前价格不到官方的6折<FaGripfire */}
+    {/*      className='text-amber-600'/></span> */}
+    {/*  </div>} */}
+    {/* </div> */}
   </div>
 }
 

src/biz/CompactSegmentItem.tsx

@@ -9,8 +9,9 @@ const CompactSegmentItem = (props: {
   isIn: boolean
   last: boolean
   moveCallback: (event: any) => void
+  move2Callback: (event: any) => void
 }) => {
-  const {item, idx, last, isIn, moveCallback} = props
+  const {item, idx, last, isIn, moveCallback, move2Callback} = props
   const transResult = useAppSelector(state => state.env.transResults[idx])
   const envData = useAppSelector(state => state.env.envData)
   const fontSize = useAppSelector(state => state.env.envData.fontSize)
@@ -19,7 +20,7 @@ const CompactSegmentItem = (props: {
   const display = useMemo(() => getDisplay(envData.transDisplay, item.content, transText), [envData.transDisplay, item.content, transText])
 
   return <div className={classNames('inline', fontSize === 'large'?'text-sm':'text-xs')}>
-    <span className={'pl-1 pr-0.5 py-0.5 cursor-pointer rounded-sm hover:bg-base-200'} onClick={moveCallback}>
+    <span className={'pl-1 pr-0.5 py-0.5 cursor-pointer rounded-sm hover:bg-base-200'} onClick={moveCallback} onDoubleClick={move2Callback}>
       <text className={classNames('font-medium', isIn ? 'text-primary underline' : '')}>{display.main}</text>
       {display.sub && <text className='desc'>({display.sub})</text>}</span>
     <span className='text-base-content/75'>{!last && ','}</span>

src/biz/MoreBtn.tsx

@@ -75,26 +75,27 @@ const MoreBtn = (props: Props) => {
       return
     }
 
-    let s, fileName
+    let fileName = title
+    let s, suffix
     if (!downloadType || downloadType === 'text') {
       s = `${title??'无标题'}\n${url??'无链接'}\n\n`
       for (const item of data.body) {
         s += item.content + '\n'
       }
-      fileName = 'download.txt'
+      suffix = 'txt'
     } else if (downloadType === 'textWithTime') {
       s = `${title??'无标题'}\n${url??'无链接'}\n\n`
       for (const item of data.body) {
         s += formatTime(item.from) + ' ' + item.content + '\n'
       }
-      fileName = 'download.txt'
+      suffix = 'txt'
     } else if (downloadType === 'article') {
       s = `${title??'无标题'}\n${url??'无链接'}\n\n`
       for (const item of data.body) {
         s += item.content + ', '
       }
       s = s.substring(0, s.length - 1) // remove last ','
-      fileName = 'download.txt'
+      suffix = 'txt'
     } else if (downloadType === 'srt') {
       /**
        * 1
@@ -113,7 +114,7 @@ const MoreBtn = (props: Props) => {
         s += ss
       }
       s = s.substring(0, s.length - 1)// remove last '\n'
-      fileName = 'download.srt'
+      suffix = 'srt'
     } else if (downloadType === 'vtt') {
       /**
        * WEBVTT title
@@ -134,21 +135,22 @@ const MoreBtn = (props: Props) => {
         s += ss
       }
       s = s.substring(0, s.length - 1)// remove last '\n'
-      fileName = 'download.vtt'
+      suffix = 'vtt'
     } else if (downloadType === 'json') {
       s = JSON.stringify(data)
-      fileName = 'download.json'
+      suffix = 'json'
     } else if (downloadType === 'summarize') {
       s = `${title??'无标题'}\n${url??'无链接'}\n\n`
       const [success, content] = getSummarize(title, segments, curSummaryType)
       if (!success) return
       s += content
-      fileName = '总结.txt'
+      fileName += ' - 总结'
+      suffix = 'txt'
     } else {
       return
     }
     if (download) {
-      downloadText(s, fileName)
+      downloadText(s, fileName+'.'+suffix)
     } else {
       navigator.clipboard.writeText(s).then(() => {
         toast.success('复制成功')

src/biz/NormalSegmentItem.tsx

@@ -9,8 +9,9 @@ const NormalSegmentItem = (props: {
   idx: number
   isIn: boolean
   moveCallback: (event: any) => void
+  move2Callback: (event: any) => void
 }) => {
-  const {item, idx, isIn, moveCallback} = props
+  const {item, idx, isIn, moveCallback, move2Callback} = props
   const transResult = useAppSelector(state => state.env.transResults[idx])
   const envData = useAppSelector(state => state.env.envData)
   const fontSize = useAppSelector(state => state.env.envData.fontSize)
@@ -19,7 +20,7 @@ const NormalSegmentItem = (props: {
   const display = useMemo(() => getDisplay(envData.transDisplay, item.content, transText), [envData.transDisplay, item.content, transText])
 
   return <div className={classNames('flex py-0.5 cursor-pointer rounded-sm hover:bg-base-200', fontSize === 'large'?'text-sm':'text-xs')}
-              onClick={moveCallback}>
+              onClick={moveCallback} onDoubleClick={move2Callback}>
     <div className='desc w-[66px] flex justify-center'>{formatTime(item.from)}</div>
     <div className={'flex-1'}>
       <div className={classNames('font-medium', isIn ? 'text-primary underline' : '')}>{display.main}</div>

src/biz/SegmentCard.tsx

@@ -5,7 +5,7 @@ import classNames from 'classnames'
 import {FaClipboardList} from 'react-icons/fa'
 import {PAGE_MAIN, PAGE_SETTINGS, SUMMARIZE_THRESHOLD, SUMMARIZE_TYPES} from '../const'
 import useTranslate from '../hooks/useTranslate'
-import {BsDashSquare, BsPlusSquare, CgFileDocument, GrOverview, RiFileCopy2Line} from 'react-icons/all'
+import {BsDashSquare, BsPlusSquare, CgFileDocument, FaQuestion, GrOverview, RiFileCopy2Line} from 'react-icons/all'
 import toast from 'react-hot-toast'
 import {getLastTime, getSummaryStr, isSummaryEmpty, parseStrTimeToSeconds} from '../util/biz_util'
 import {useInViewport} from 'ahooks'
@@ -46,7 +46,7 @@ const SummarizeItemOverview = (props: {
     if (event.altKey) { // 复制
       navigator.clipboard.writeText(overviewItem.key).catch(console.error)
     } else {
-      move(time)
+      move(time, false)
     }
   }, [overviewItem.key, move, time])
 
@@ -107,6 +107,13 @@ const Summarize = (props: {
         <div className={classNames('font-medium max-w-[90%]', fontSize === 'large' ? 'text-sm' : 'text-xs')}>
           {summary.content.summary}
         </div>}
+      {summary?.type === 'question' && (summary.content != null) &&
+        <div className={classNames('max-w-[90%] flex flex-col gap-1', fontSize === 'large' ? 'text-sm' : 'text-xs')}>
+          {summary.content.map((question: any, idx: number) => <div key={idx}>
+            <h2 className={classNames('font-semibold underline', fontSize === 'large' ? 'text-sm' : 'text-xs')}>{question.q}</h2>
+            <div className={classNames('font-normal', fontSize === 'large' ? 'text-sm' : 'text-xs')}>{question.a}</div>
+          </div>)}
+        </div>}
     </div>
     <div className='flex flex-col justify-center items-center'>
       {segment.text.length < SUMMARIZE_THRESHOLD && <div className='desc-lighter text-xs'>文字过短，无法总结.</div>}
@@ -189,6 +196,12 @@ const SegmentCard = (props: {
     }))
   }, [dispatch])
 
+  const onSelQuestion = useCallback(() => {
+    dispatch(setTempData({
+      curSummaryType: 'question'
+    }))
+  }, [dispatch])
+
   return <div
     className={classNames('border border-base-300 bg-base-200/25 rounded flex flex-col m-1.5 p-1.5 gap-1 shadow', showCurrent && 'shadow-primary')}>
     <div className='relative flex justify-center min-h-[20px]'>
@@ -203,6 +216,7 @@ const SegmentCard = (props: {
         <a className={classNames('tab tab-lifted tab-xs', curSummaryType === 'brief' && 'tab-active')} onClick={onSelBrief}><CgFileDocument/>总结</a>
         <a className={classNames('tab tab-lifted tab-xs', curSummaryType === 'overview' && 'tab-active')} onClick={onSelOverview}><GrOverview/>概览</a>
         <a className={classNames('tab tab-lifted tab-xs', curSummaryType === 'keypoint' && 'tab-active')} onClick={onSelKeypoint}><FaClipboardList/>要点</a>
+        <a className={classNames('tab tab-lifted tab-xs', curSummaryType === 'question' && 'tab-active')} onClick={onSelQuestion}><FaQuestion/>问题</a>
         <a className="tab tab-lifted tab-xs tab-disabled cursor-default"></a>
       </div>}
       <div

src/biz/SegmentItem.tsx

@@ -33,7 +33,15 @@ const SegmentItem = (props: {
     if (event.altKey) { // 复制
       navigator.clipboard.writeText(item.content).catch(console.error)
     } else {
-      move(item.from)
+      move(item.from, false)
+    }
+  }, [item.content, item.from, move])
+
+  const move2Callback = useCallback((event: any) => {
+    if (event.altKey) { // 复制
+      navigator.clipboard.writeText(item.content).catch(console.error)
+    } else {
+      move(item.from, true)
     }
   }, [item.content, item.from, move])
 
@@ -63,6 +71,7 @@ const SegmentItem = (props: {
         isIn={isIn}
         last={last}
         moveCallback={moveCallback}
+        move2Callback={move2Callback}
       />
       :
       <NormalSegmentItem
@@ -70,6 +79,7 @@ const SegmentItem = (props: {
         idx={idx}
         isIn={isIn}
         moveCallback={moveCallback}
+        move2Callback={move2Callback}
       />
     }
   </span>

src/biz/Settings.tsx

@@ -1,14 +1,17 @@
 import React, {PropsWithChildren, useCallback, useMemo, useState} from 'react'
-import {setEnvData, setPage} from '../redux/envReducer'
+import {setEnvData, setPage, setTempData} from '../redux/envReducer'
 import {useAppDispatch, useAppSelector} from '../hooks/redux'
 import {
   ASK_ENABLED_DEFAULT,
+  CUSTOM_MODEL_TOKENS,
+  DEFAULT_SERVER_URL_OPENAI,
   GEMINI_TOKENS,
   HEADER_HEIGHT,
   LANGUAGE_DEFAULT,
   LANGUAGES,
   MODEL_DEFAULT,
   MODEL_MAP,
+  MODEL_TIP,
   MODELS,
   PAGE_MAIN,
   PROMPT_DEFAULTS,
@@ -20,7 +23,7 @@ import {
   TRANSLATE_FETCH_STEP,
   WORDS_RATE,
 } from '../const'
-import {FaGripfire, IoWarning} from 'react-icons/all'
+import {IoWarning} from 'react-icons/all'
 import classNames from 'classnames'
 import toast from 'react-hot-toast'
 import {useBoolean, useEventTarget} from 'ahooks'
@@ -56,7 +59,7 @@ const FormItem = (props: {
 const Settings = () => {
   const dispatch = useAppDispatch()
   const envData = useAppSelector(state => state.env.envData)
-  // const {value: autoExpandValue, onChange: setAutoExpandValue} = useEventChecked(envData.autoExpand)
+  const {value: autoExpandValue, onChange: setAutoExpandValue} = useEventChecked(envData.autoExpand)
   // const {value: autoScrollValue, onChange: setAutoScrollValue} = useEventChecked(envData.autoScroll)
   const {value: translateEnableValue, onChange: setTranslateEnableValue} = useEventChecked(envData.translateEnable)
   const {value: summarizeEnableValue, onChange: setSummarizeEnableValue} = useEventChecked(envData.summarizeEnable)
@@ -69,6 +72,8 @@ const Settings = () => {
   const [geminiApiKeyValue, { onChange: onChangeGeminiApiKeyValue }] = useEventTarget({initialValue: envData.geminiApiKey??''})
   const [languageValue, { onChange: onChangeLanguageValue }] = useEventTarget({initialValue: envData.language??LANGUAGE_DEFAULT})
   const [modelValue, { onChange: onChangeModelValue }] = useEventTarget({initialValue: envData.model??MODEL_DEFAULT})
+  const [customModelValue, { onChange: onChangeCustomModelValue }] = useEventTarget({initialValue: envData.customModel})
+  const [customModelTokensValue, setCustomModelTokensValue] = useState(envData.customModelTokens)
   const [summarizeLanguageValue, { onChange: onChangeSummarizeLanguageValue }] = useEventTarget({initialValue: envData.summarizeLanguage??SUMMARIZE_LANGUAGE_DEFAULT})
   const [hideOnDisableAutoTranslateValue, setHideOnDisableAutoTranslateValue] = useState(envData.hideOnDisableAutoTranslate)
   const [themeValue, setThemeValue] = useState(envData.theme)
@@ -109,11 +114,13 @@ const Settings = () => {
 
   const onSave = useCallback(() => {
     dispatch(setEnvData({
-      // autoExpand: autoExpandValue,
+      autoExpand: autoExpandValue,
       aiType: aiTypeValue,
       apiKey: apiKeyValue,
       serverUrl: serverUrlValue,
       model: modelValue,
+      customModel: customModelValue,
+      customModelTokens: customModelTokensValue,
       geminiApiKey: geminiApiKeyValue,
       translateEnable: translateEnableValue,
       language: languageValue,
@@ -133,7 +140,7 @@ const Settings = () => {
     }))
     dispatch(setPage(PAGE_MAIN))
     toast.success('保存成功')
-  }, [dispatch, aiTypeValue, apiKeyValue, serverUrlValue, modelValue, geminiApiKeyValue, translateEnableValue, languageValue, hideOnDisableAutoTranslateValue, themeValue, transDisplayValue, summarizeEnableValue, summarizeFloatValue, summarizeLanguageValue, wordsValue, fetchAmountValue, fontSizeValue, promptsValue, searchEnabledValue, cnSearchEnabledValue, askEnabledValue])
+  }, [dispatch, autoExpandValue, aiTypeValue, apiKeyValue, serverUrlValue, modelValue, customModelValue, customModelTokensValue, geminiApiKeyValue, translateEnableValue, languageValue, hideOnDisableAutoTranslateValue, themeValue, transDisplayValue, summarizeEnableValue, summarizeFloatValue, summarizeLanguageValue, wordsValue, fetchAmountValue, fontSizeValue, promptsValue, searchEnabledValue, cnSearchEnabledValue, askEnabledValue])
 
   const onCancel = useCallback(() => {
     dispatch(setPage(PAGE_MAIN))
@@ -192,10 +199,10 @@ const Settings = () => {
   }}>
     <div className="flex flex-col gap-3 p-2">
       <Section title='通用配置'>
-        {/* <FormItem title='自动展开' htmlFor='autoExpand' tip='是否视频有字幕时自动展开字幕列表'> */}
-        {/*  <input id='autoExpand' type='checkbox' className='toggle toggle-primary' checked={autoExpandValue} */}
-        {/*         onChange={setAutoExpandValue}/> */}
-        {/* </FormItem> */}
+        <FormItem title='自动展开' htmlFor='autoExpand' tip='是否视频有字幕时自动展开字幕列表'>
+          <input id='autoExpand' type='checkbox' className='toggle toggle-primary' checked={autoExpandValue}
+                 onChange={setAutoExpandValue}/>
+        </FormItem>
         <FormItem title='主题'>
           <div className="btn-group">
             <button onClick={onSelTheme1} className={classNames('btn btn-xs no-animation', (!themeValue || themeValue === 'system')?'btn-active':'')}>系统</button>
@@ -224,7 +231,7 @@ const Settings = () => {
         </FormItem>
         <FormItem title='服务器' htmlFor='serverUrl'>
           <input id='serverUrl' type='text' className='input input-sm input-bordered w-full'
-                 placeholder='默认使用官方地址' value={serverUrlValue}
+                 placeholder={DEFAULT_SERVER_URL_OPENAI} value={serverUrlValue}
                  onChange={e => setServerUrlValue(e.target.value)}/>
         </FormItem>
         <div>
@@ -233,16 +240,16 @@ const Settings = () => {
             <div>官方网址：<a className='link link-primary' href='https://platform.openai.com/' target='_blank'
                              rel="noreferrer">点击访问</a></div>
             <div>服务器地址：<a className='link link-primary'
-                               onClick={() => setServerUrlValue('https://api.openai.com')}
+                               onClick={() => setServerUrlValue(DEFAULT_SERVER_URL_OPENAI)}
                                rel='noreferrer'>点击设置</a></div>
-            <div className='flex justify-center font-semibold'>【第三方代理】</div>
-            <div>代理网址：<a className='link link-primary' href='https://api.openai-up.com/register?aff=varM'
-                             target='_blank'
-                             rel="noreferrer">点击访问</a></div>
-            <div>服务器地址：<a className='link link-primary'
-                               onClick={() => setServerUrlValue('https://api.openai-up.com')}
-                               rel='noreferrer'>点击设置</a></div>
-            <div className='text-amber-600 flex justify-center items-center'><FaGripfire/>目前价格不到官方价格的6折<FaGripfire/></div>
+            {/* <div className='flex justify-center font-semibold'>【第三方代理】</div> */}
+            {/* <div>代理网址：<a className='link link-primary' href='https://api.openai-up.com/register?aff=varM' */}
+            {/*                 target='_blank' */}
+            {/*                 rel="noreferrer">点击访问</a></div> */}
+            {/* <div>服务器地址：<a className='link link-primary' */}
+            {/*                   onClick={() => setServerUrlValue('https://api.openai-up.com')} */}
+            {/*                   rel='noreferrer'>点击设置</a></div> */}
+            {/* <div className='text-amber-600 flex justify-center items-center'><FaGripfire/>目前价格不到官方价格的6折<FaGripfire/></div> */}
           </div>
         </div>
         <FormItem title='模型选择' htmlFor='modelSel' tip='注意，不同模型有不同价格与token限制'>
@@ -251,31 +258,19 @@ const Settings = () => {
             {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 className='desc text-xs'>
+          {MODEL_TIP}
         </div>
-        {!promptsFold && <div>
-          {PROMPT_TYPES.map((item, idx) => <FormItem key={item.type} title={<div>
-            <div>{item.name}</div>
-            <div className='link text-xs' onClick={() => {
-              setPromptsValue({
-                ...promptsValue,
-                // @ts-expect-error
-                [item.type]: PROMPT_DEFAULTS[item.type] ?? ''
-              })
-            }}>点击填充默认
-            </div>
-          </div>} htmlFor={`prompt-${item.type}`}>
-            <textarea id={`prompt-${item.type}`} className='mt-2 textarea input-bordered w-full'
-                      placeholder='留空使用默认提示词' value={promptsValue[item.type] ?? ''} onChange={(e) => {
-                        setPromptsValue({
-                          ...promptsValue,
-                          [item.type]: e.target.value
-                        })
-                      }}/>
-          </FormItem>)}
-        </div>}
+        {modelValue === 'custom' && <FormItem title='模型名' htmlFor='customModel'>
+          <input id='customModel' type='text' className='input input-sm input-bordered w-full' placeholder='llama2'
+                 value={customModelValue} onChange={onChangeCustomModelValue}/>
+        </FormItem>}
+        {modelValue === 'custom' && <FormItem title='Token上限' htmlFor='customModelTokens'>
+          <input id='customModelTokens' type='number' className='input input-sm input-bordered w-full'
+                 placeholder={'' + CUSTOM_MODEL_TOKENS}
+                 value={customModelTokensValue}
+                 onChange={e => setCustomModelTokensValue(e.target.value ? parseInt(e.target.value) : undefined)}/>
+        </FormItem>}
       </Section>}
 
       {aiTypeValue === 'gemini' && <Section title='gemini配置'>
@@ -285,37 +280,14 @@ const Settings = () => {
         </FormItem>
         <div>
           <div className='desc text-xs'>
-            <div>官方网址：<a className='link link-primary' href='https://makersuite.google.com/app/apikey' target='_blank'
+            <div>官方网址：<a className='link link-primary' href='https://makersuite.google.com/app/apikey'
+                             target='_blank'
                              rel="noreferrer">Google AI Studio</a> (目前免费)
             </div>
-            <div className='text-xs text-error flex items-center'><IoWarning className='text-sm text-warning'/>谷歌模型安全要求比较高，有些视频可能无法生成总结!</div>
+            <div className='text-xs text-error flex items-center'><IoWarning className='text-sm text-warning'/>谷歌模型安全要求比较高，有些视频可能无法生成总结!
             </div>
           </div>
-        <div className='flex justify-center'>
-          <a className='link text-xs'
-             onClick={togglePromptsFold}>{promptsFold ? '点击查看提示词' : '点击折叠提示词'}</a>
         </div>
-        {!promptsFold && <div>
-          {PROMPT_TYPES.map((item, idx) => <FormItem key={item.type} title={<div>
-            <div>{item.name}</div>
-            <div className='link text-xs' onClick={() => {
-              setPromptsValue({
-                ...promptsValue,
-                // @ts-expect-error
-                [item.type]: PROMPT_DEFAULTS[item.type] ?? ''
-              })
-            }}>点击填充默认
-            </div>
-          </div>} htmlFor={`prompt-${item.type}`}>
-            <textarea id={`prompt-${item.type}`} className='mt-2 textarea input-bordered w-full'
-                      placeholder='留空使用默认提示词' value={promptsValue[item.type] ?? ''} onChange={(e) => {
-                        setPromptsValue({
-                          ...promptsValue,
-                          [item.type]: e.target.value
-                        })
-                      }}/>
-          </FormItem>)}
-        </div>}
       </Section>}
 
       <Section title={<div className='flex items-center'>
@@ -329,7 +301,8 @@ const Settings = () => {
                  onChange={setTranslateEnableValue}/>
         </FormItem>
         <FormItem title='目标语言' htmlFor='language'>
-          <select id='language' className="select select-sm select-bordered" value={languageValue} onChange={onChangeLanguageValue}>
+          <select id='language' className="select select-sm select-bordered" value={languageValue}
+                  onChange={onChangeLanguageValue}>
             {LANGUAGES.map(language => <option key={language.code} value={language.code}>{language.name}</option>)}
           </select>
         </FormItem>
@@ -406,9 +379,41 @@ const Settings = () => {
                  onChange={setAskEnabledValue}/>
         </FormItem>
       </Section>
+
+      <Section title='提示词配置'>
+        <div className='flex justify-center'>
+          <a className='text-xs link link-primary' onClick={togglePromptsFold}>点击{promptsFold ? '展开' : '折叠'}</a>
+        </div>
+        {!promptsFold && PROMPT_TYPES.map((item, idx) => <FormItem key={item.type} title={<div>
+          <div>{item.name}</div>
+          <div className='link text-xs' onClick={() => {
+            setPromptsValue({
+              ...promptsValue,
+              // @ts-expect-error
+              [item.type]: PROMPT_DEFAULTS[item.type] ?? ''
+            })
+          }}>点击填充默认
+          </div>
+        </div>} htmlFor={`prompt-${item.type}`}>
+          <textarea id={`prompt-${item.type}`} className='mt-2 textarea input-bordered w-full'
+                    placeholder='留空使用默认提示词' value={promptsValue[item.type] ?? ''} onChange={(e) => {
+                      setPromptsValue({
+                        ...promptsValue,
+                        [item.type]: e.target.value
+                      })
+                    }}/>
+        </FormItem>)}
+      </Section>
+
       <div className='flex justify-center gap-5'>
         <button className='btn btn-primary btn-sm' onClick={onSave}>保存</button>
         <button className='btn btn-sm' onClick={onCancel}>取消</button>
+        {/* <button className='btn btn-sm' onClick={() => {
+          dispatch(setTempData({
+            reviewed: undefined,
+            // reviewActions: 0
+          }))
+        }}>重置</button> */}
       </div>
     </div>
   </div>

src/chrome/content-script.cjs

@@ -24,7 +24,7 @@ const timerIframe = setInterval(function () {
       const iframe = document.createElement('iframe')
       iframe.id = IFRAME_ID
       iframe.src = chrome.runtime.getURL('index.html')
-      iframe.style = 'border: none; width: 100%; height: 44px;'
+      iframe.style = 'border: none; width: 100%; height: 44px;margin-bottom: 3px;'
       iframe.allow = 'clipboard-read; clipboard-write;'
       if (vKey) {
         iframe.dataset[vKey] = danmukuBox?.dataset[vKey]
@@ -158,6 +158,9 @@ window.addEventListener("message", (event) => {
     const video = getVideoElement()
     if (video) {
       video.currentTime = data.time
+      if (data.togglePause) {
+        video.paused ? video.play() : video.pause()
+      }
     }
   }
 

src/chrome/openaiService.ts

@@ -1,6 +1,8 @@
+import {DEFAULT_SERVER_URL_OPENAI} from '../const'
+
 const getServerUrl = (serverUrl?: string) => {
   if (!serverUrl) {
-    return 'https://api.openai.com'
+    return DEFAULT_SERVER_URL_OPENAI
   }
   if (serverUrl.endsWith('/')) {
     serverUrl = serverUrl.slice(0, -1)

src/components/RateExtension.tsx

@@ -0,0 +1,53 @@
+import React, { useState } from 'react';
+import { FaStar } from 'react-icons/fa';
+import { IoMdClose } from 'react-icons/io';
+import { setTempData } from '../redux/envReducer';
+import { useAppDispatch, useAppSelector } from '../hooks/redux';
+import { openUrl } from '@kky002/kky-util';
+
+const RateExtension: React.FC = () => {
+  const dispatch = useAppDispatch()
+  const [isHovered, setIsHovered] = useState(false);
+  const reviewed = useAppSelector(state => state.env.tempData.reviewed)
+
+  const handleRateClick = () => {
+    dispatch(setTempData({
+      reviewed: true
+    }))
+    // Chrome Web Store URL for your extension
+    openUrl(import.meta.env.VITE_REVIEW_URL)
+  };
+
+  if (reviewed === true || reviewed === undefined) return null;
+
+  return (
+    <div className="relative bg-gradient-to-r from-primary to-secondary text-primary-content p-4 rounded-lg shadow-lg text-sm transition-all duration-300 ease-in-out hover:shadow-xl">
+      <button
+        onClick={() => {
+          dispatch(setTempData({
+            reviewed: true
+          }))
+        }}
+        className="absolute top-2 right-2 text-primary-content opacity-70 hover:opacity-100 transition-opacity"
+      >
+        <IoMdClose size={20} />
+      </button>
+      <h3 className="text-lg font-bold mb-2 animate-pulse">喜欢这个扩展吗？</h3>
+      <p className="mb-3">如果觉得有用，请给我们评分！</p>
+      <button
+        onClick={handleRateClick}
+        onMouseEnter={() => setIsHovered(true)}
+        onMouseLeave={() => setIsHovered(false)}
+        className="btn btn-accent btn-sm gap-2 transition-all duration-300 ease-in-out hover:scale-105"
+      >
+        <FaStar className={`inline-block text-yellow-300 ${isHovered ? 'animate-spin' : ''}`} />
+        去评分
+        <span className="transition-transform duration-300 ease-in-out transform inline-block">
+          {isHovered ? '🚀' : '→'}
+        </span>
+      </button>
+    </div>
+  );
+};
+
+export default RateExtension;

src/const.tsx

@@ -8,6 +8,7 @@ export const STORAGE_TEMP = 'bilibili-subtitle_temp'
 export const PROMPT_TYPE_TRANSLATE = 'translate'
 export const PROMPT_TYPE_SUMMARIZE_OVERVIEW = 'summarize_overview'
 export const PROMPT_TYPE_SUMMARIZE_KEYPOINT = 'summarize_keypoint'
+export const PROMPT_TYPE_SUMMARIZE_QUESTION = 'summarize_question'
 export const PROMPT_TYPE_SUMMARIZE_BRIEF = 'summarize_brief'
 export const PROMPT_TYPE_ASK = 'ask'
 export const PROMPT_TYPES = [{
@@ -22,6 +23,9 @@ export const PROMPT_TYPES = [{
 }, {
   name: '总结',
   type: PROMPT_TYPE_SUMMARIZE_BRIEF,
+}, {
+  name: '问题',
+  type: PROMPT_TYPE_SUMMARIZE_QUESTION,
 }, {
   name: '提问',
   type: PROMPT_TYPE_ASK,
@@ -46,6 +50,12 @@ export const SUMMARIZE_TYPES = {
     downloadName: '💡视频要点💡',
     promptType: PROMPT_TYPE_SUMMARIZE_KEYPOINT,
   },
+  question: {
+    name: '问题',
+    desc: '常见问题',
+    downloadName: '💡常见问题💡',
+    promptType: PROMPT_TYPE_SUMMARIZE_QUESTION,
+  },
 }
 
 export const PROMPT_DEFAULTS = {
@@ -124,6 +134,46 @@ The video's subtitles:
 '''
 {{segment}}
 '''`,
+  [PROMPT_TYPE_SUMMARIZE_QUESTION]: `You are a helpful assistant that skilled at extracting questions from video subtitle.
+
+## Context
+
+The video's title: '''{{title}}'''.
+The video's subtitles:
+
+'''
+{{segment}}
+'''
+
+## Command
+
+Accurately extract key questions and their corresponding answers from the video subtitles based on the actual content provided. The number of questions should be between 3 and 5.
+
+- Identify questions as sentences starting with interrogative words (e.g., "What", "How", "Why") and extract the following sentences that directly answer these questions.
+- Include only those questions and answers that are relevant to the main points of the video, and ensure they cover different aspects of the video's content.
+- If an answer spans multiple non-consecutive parts of the subtitles, concatenate them into a coherent response without adding any information not present in the subtitles.
+- In cases where the number of potential Q&As exceeds 5, prioritize the most informative and directly answered ones.
+- If clear questions and answers are not available in the subtitles, refrain from creating them and instead note the absence of direct Q&As.
+- Answer in language '{{language}}'.
+- Format the output in markdown json format, as specified.
+
+## Output format
+
+Provide an example to illustrate the expected output:
+
+\`\`\`json
+[
+    {
+        "q": "What is the main theme of the video?",
+        "a": "The main theme of the video is explained as..."
+    },
+    {
+        "q": "How is the topic developed?",
+        "a": "The topic is developed through various examples, including..."
+    }
+]
+\`\`\`
+`,
   [PROMPT_TYPE_ASK]: `You are a helpful assistant who answers question related to video subtitles.
 Answer in language '{{language}}'.
 
@@ -169,23 +219,24 @@ export const SUMMARIZE_THRESHOLD = 100
 export const SUMMARIZE_LANGUAGE_DEFAULT = 'cn'
 export const SUMMARIZE_ALL_THRESHOLD = 5
 export const ASK_ENABLED_DEFAULT = true
-export const SERVER_URL_OPENAI = 'https://api.openai.com'
+export const DEFAULT_SERVER_URL_OPENAI = 'https://api.openai.com'
+export const CUSTOM_MODEL_TOKENS = 16385
 
+export const MODEL_TIP = '推荐gpt-4o-mini，能力强，价格低，token上限大'
 export const MODELS = [{
-  code: 'gpt-3.5-turbo',
-  name: 'gpt-3.5-turbo',
-  tokens: 4096,
+  code: 'gpt-4o-mini',
+  name: 'gpt-4o-mini',
+  tokens: 128000,
 }, {
   code: 'gpt-3.5-turbo-0125',
   name: 'gpt-3.5-turbo-0125',
   tokens: 16385,
 }, {
-  code: 'gpt-3.5-turbo-1106',
-  name: 'gpt-3.5-turbo-1106',
-  tokens: 16385,
+  code: 'custom',
+  name: '自定义',
 }]
 export const GEMINI_TOKENS = 32768
-export const MODEL_DEFAULT = MODELS[1].code
+export const MODEL_DEFAULT = MODELS[0].code
 export const MODEL_MAP: {[key: string]: typeof MODELS[number]} = {}
 for (const model of MODELS) {
   MODEL_MAP[model.code] = model

src/hooks/useKeyService.ts

@@ -0,0 +1,84 @@
+import {useEffect} from 'react'
+import {useMemoizedFn} from 'ahooks/es'
+import {useAppDispatch, useAppSelector} from './redux'
+import useSubtitle from './useSubtitle'
+import {setInputting} from '../redux/envReducer'
+
+const useKeyService = () => {
+  const dispatch = useAppDispatch()
+  const inputting = useAppSelector(state => state.env.inputting)
+  const curIdx = useAppSelector(state => state.env.curIdx)
+  const data = useAppSelector(state => state.env.data)
+  const {move} = useSubtitle()
+
+  // 输入中
+  useEffect(() => {
+    const onInputtingStart = (e: CompositionEvent) => {
+      dispatch(setInputting(true))
+    }
+    const onInputtingEnd = (e: CompositionEvent) => {
+      dispatch(setInputting(false))
+    }
+
+    document.addEventListener('compositionstart', onInputtingStart)
+    document.addEventListener('compositionend', onInputtingEnd)
+    return () => {
+      document.removeEventListener('compositionstart', onInputtingStart)
+      document.removeEventListener('compositionend', onInputtingEnd)
+    }
+  }, [dispatch])
+
+  const onKeyDown = useMemoizedFn((e: KeyboardEvent) => {
+    // 当前在输入中（如中文输入法）
+    if (inputting) {
+      return
+    }
+
+    // 有按其他控制键时，不触发
+    if (e.ctrlKey || e.metaKey || e.shiftKey) {
+      return
+    }
+
+    let cursorInInput = false
+    if (document.activeElement != null) {
+      const tagName = document.activeElement.tagName
+      if (tagName === 'INPUT' || tagName === 'TEXTAREA') {
+        cursorInInput = true
+      }
+    }
+    let prevent = false
+
+    // up arrow
+    if (e.key === 'ArrowUp') {
+      if (curIdx && (data != null) && !cursorInInput) {
+        prevent = true
+        const newCurIdx = Math.max(curIdx - 1, 0)
+        move(data.body[newCurIdx].from, false)
+      }
+    }
+    // down arrow
+    if (e.key === 'ArrowDown') {
+      if (curIdx !== undefined && (data != null) && !cursorInInput) {
+        prevent = true
+        const newCurIdx = Math.min(curIdx + 1, data.body.length - 1)
+        move(data.body[newCurIdx].from, false)
+      }
+    }
+
+    // 阻止默认事件
+    if (prevent) {
+      e.preventDefault()
+      e.stopPropagation()
+    }
+  })
+
+  // 检测快捷键
+  useEffect(() => {
+    document.addEventListener('keydown', onKeyDown)
+    return () => {
+      document.removeEventListener('keydown', onKeyDown)
+    }
+  }, [onKeyDown])
+}
+
+export default useKeyService

src/hooks/useSubtitle.ts

@@ -1,13 +1,24 @@
-import {useAppDispatch} from './redux'
+import {useAppDispatch, useAppSelector} from './redux'
 import React, {useCallback} from 'react'
-import {setNeedScroll} from '../redux/envReducer'
+import {setNeedScroll, setReviewAction, setTempData} from '../redux/envReducer'
 
 const useSubtitle = () => {
   const dispatch = useAppDispatch()
+  const reviewed = useAppSelector(state => state.env.tempData.reviewed)
+  const reviewAction = useAppSelector(state => state.env.reviewAction)
+  const reviewActions = useAppSelector(state => state.env.tempData.reviewActions)
 
-  const move = useCallback((time: number) => {
-    window.parent.postMessage({type: 'move', time}, '*')
-  }, [])
+  const move = useCallback((time: number, togglePause: boolean) => {
+    window.parent.postMessage({type: 'move', time, togglePause}, '*')
+
+    //review action
+    if (reviewed === undefined && !reviewAction) {
+      dispatch(setReviewAction(true))
+      dispatch(setTempData({
+        reviewActions: (reviewActions ?? 0) + 1
+      }))
+    }
+  }, [dispatch, reviewAction, reviewActions, reviewed])
 
   const scrollIntoView = useCallback((ref: React.RefObject<HTMLDivElement>) => {
     ref.current?.scrollIntoView({behavior: 'smooth', block: 'center'})

src/hooks/useSubtitleService.ts

@@ -13,20 +13,12 @@ import {
   setTitle,
   setTotalHeight,
   setUrl,
+  setTempData,
 } from '../redux/envReducer'
 import {EventBusContext} from '../Router'
-import {
-  EVENT_EXPAND,
-  GEMINI_TOKENS,
-  MODEL_DEFAULT,
-  MODEL_MAP,
-  TOTAL_HEIGHT_MAX,
-  TOTAL_HEIGHT_MIN,
-  WORDS_MIN,
-  WORDS_RATE
-} from '../const'
+import {EVENT_EXPAND, GEMINI_TOKENS, TOTAL_HEIGHT_MAX, TOTAL_HEIGHT_MIN, WORDS_MIN, WORDS_RATE} from '../const'
 import {useInterval} from 'ahooks'
-import {getWholeText} from '../util/biz_util'
+import {getModelMaxTokens, getWholeText} from '../util/biz_util'
 
 /**
  * Service是单例，类似后端的服务概念
@@ -48,6 +40,17 @@ const useSubtitleService = () => {
   const transResults = useAppSelector(state => state.env.transResults)
   const hideOnDisableAutoTranslate = useAppSelector(state => state.env.envData.hideOnDisableAutoTranslate)
   const autoTranslate = useAppSelector(state => state.env.autoTranslate)
+  const reviewed = useAppSelector(state => state.env.tempData.reviewed)
+  const reviewActions = useAppSelector(state => state.env.tempData.reviewActions)
+
+  //如果reviewActions达到15次，则设置reviewed为false
+  useEffect(() => {
+    if (reviewed === undefined && reviewActions && reviewActions >= 15) {
+      dispatch(setTempData({
+        reviewed: false
+      }))
+    }
+  }, [reviewActions, dispatch, reviewed])
 
   // 监听消息
   useEffect(() => {
@@ -100,20 +103,20 @@ const useSubtitleService = () => {
 
   // 有数据时自动展开
   useEffect(() => {
-    if (infos != null) {
+    if ((data != null) && data.body.length > 0) {
       eventBus.emit({
         type: EVENT_EXPAND
       })
     }
-  }, [eventBus, infos])
+  }, [data, eventBus, infos])
 
-  // 当前未展示 & 未折叠 & 有列表 => 展示第一个
+  // 当前未展示 & (未折叠 | 自动展开) & 有列表 => 展示第一个
   useEffect(() => {
-    if (!curInfo && !fold && (infos != null) && infos.length > 0) {
+    if (!curInfo && (!fold || (envReady && envData.autoExpand)) && (infos != null) && infos.length > 0) {
       dispatch(setCurInfo(infos[0]))
       dispatch(setCurFetched(false))
     }
-  }, [curInfo, dispatch, envReady, fold, infos])
+  }, [curInfo, dispatch, envData.autoExpand, envReady, fold, infos])
   // 获取
   useEffect(() => {
     if (curInfo && !curFetched) {
@@ -172,7 +175,7 @@ const useSubtitleService = () => {
           if (envData.aiType === 'gemini') {
             size = GEMINI_TOKENS*WORDS_RATE
           } else {
-            size = (MODEL_MAP[envData.model??MODEL_DEFAULT]?.tokens??4000)*WORDS_RATE
+            size = getModelMaxTokens(envData)*WORDS_RATE
           }
         }
         size = Math.max(size, WORDS_MIN)
@@ -209,7 +212,7 @@ const useSubtitleService = () => {
       }
     }
     dispatch(setSegments(segments))
-  }, [data?.body, dispatch, envData.aiType, envData.model, envData.summarizeEnable, envData.words])
+  }, [data?.body, dispatch, envData])
 
   // 每秒更新当前视频时间
   useInterval(() => {

src/hooks/useTranslate.ts

@@ -4,19 +4,18 @@ import {
   addTaskId,
   addTransResults,
   delTaskId,
-  setAskContent,
-  setAskError,
-  setAskStatus,
+  mergeAskInfo,
   setLastSummarizeTime,
   setLastTransTime,
   setSummaryContent,
   setSummaryError,
-  setSummaryStatus
+  setSummaryStatus,
+  setReviewAction,
+  setTempData
 } from '../redux/envReducer'
 import {
   LANGUAGE_DEFAULT,
   LANGUAGES_MAP,
-  MODEL_DEFAULT,
   PROMPT_DEFAULTS,
   PROMPT_TYPE_ASK,
   PROMPT_TYPE_TRANSLATE,
@@ -28,7 +27,7 @@ import {
 } from '../const'
 import toast from 'react-hot-toast'
 import {useMemoizedFn} from 'ahooks/es'
-import {extractJsonArray, extractJsonObject} from '../util/biz_util'
+import {extractJsonArray, extractJsonObject, getModel} from '../util/biz_util'
 import {formatTime} from '../util/util'
 
 const useTranslate = () => {
@@ -41,6 +40,9 @@ const useTranslate = () => {
   const language = LANGUAGES_MAP[envData.language??LANGUAGE_DEFAULT]
   const summarizeLanguage = LANGUAGES_MAP[envData.summarizeLanguage??SUMMARIZE_LANGUAGE_DEFAULT]
   const title = useAppSelector(state => state.env.title)
+  const reviewed = useAppSelector(state => state.env.tempData.reviewed)
+  const reviewAction = useAppSelector(state => state.env.reviewAction)
+  const reviewActions = useAppSelector(state => state.env.tempData.reviewActions)
 
   /**
    * 获取下一个需要翻译的行
@@ -104,7 +106,7 @@ const useTranslate = () => {
                 }
               }
             :{
-                model: envData.model??MODEL_DEFAULT,
+                model: getModel(envData),
                 messages: [
                   {
                     role: 'user',
@@ -137,9 +139,17 @@ const useTranslate = () => {
         dispatch(addTaskId(task.id))
       }
     }
-  }, [data?.body, envData.fetchAmount, envData.prompts, envData.aiType, envData.serverUrl, envData.model, envData.apiKey, envData.geminiApiKey, language.name, title, dispatch])
+  }, [data?.body, envData, language.name, title, dispatch])
 
   const addSummarizeTask = useCallback(async (type: SummaryType, segment: Segment) => {
+    //review action
+    if (reviewed === undefined && !reviewAction) {
+      dispatch(setReviewAction(true))
+      dispatch(setTempData({
+        reviewActions: (reviewActions ?? 0) + 1
+      }))
+    }
+
     if (segment.text.length >= SUMMARIZE_THRESHOLD) {
       let subtitles = ''
       for (const item of segment.items) {
@@ -173,7 +183,7 @@ const useTranslate = () => {
               }
             }
           :{
-              model: envData.model??MODEL_DEFAULT,
+              model: getModel(envData),
               messages: [
                 {
                   role: 'user',
@@ -198,9 +208,9 @@ const useTranslate = () => {
       const task = await chrome.runtime.sendMessage({type: 'addTask', taskDef})
       dispatch(addTaskId(task.id))
     }
-  }, [dispatch, envData.aiType, envData.apiKey, envData.geminiApiKey, envData.model, envData.prompts, envData.serverUrl, summarizeLanguage.name, title])
+  }, [dispatch, envData, summarizeLanguage.name, title])
 
-  const addAskTask = useCallback(async (segment: Segment, question: string) => {
+  const addAskTask = useCallback(async (id: string, segment: Segment, question: string) => {
     if (segment.text.length >= SUMMARIZE_THRESHOLD) {
       let prompt: string = envData.prompts?.[PROMPT_TYPE_ASK]??PROMPT_DEFAULTS[PROMPT_TYPE_ASK]
       // replace params
@@ -228,7 +238,7 @@ const useTranslate = () => {
               }
             }
           :{
-              model: envData.model??MODEL_DEFAULT,
+              model: getModel(envData),
               messages: [
                 {
                   role: 'user',
@@ -244,14 +254,18 @@ const useTranslate = () => {
           // startIdx: segment.startIdx,
           apiKey: envData.apiKey,
           geminiApiKey: envData.geminiApiKey,
+          askId: id,
         }
       }
       console.debug('addAskTask', taskDef)
-      dispatch(setAskStatus({status: 'pending'}))
+      dispatch(mergeAskInfo({
+        id,
+        status: 'pending'
+      }))
       const task = await chrome.runtime.sendMessage({type: 'addTask', taskDef})
       dispatch(addTaskId(task.id))
     }
-  }, [dispatch, envData.aiType, envData.apiKey, envData.geminiApiKey, envData.model, envData.prompts, envData.serverUrl, summarizeLanguage.name, title])
+  }, [dispatch, envData, summarizeLanguage.name, title])
 
   const handleTranslate = useMemoizedFn((task: Task, content: string) => {
     let map: {[key: string]: string} = {}
@@ -305,9 +319,13 @@ const useTranslate = () => {
   })
 
   const handleAsk = useMemoizedFn((task: Task, content?: string) => {
-    dispatch(setAskContent({content}))
-    dispatch(setAskStatus({status: 'done'}))
-    dispatch(setAskError({error: task.error}))
+    dispatch(mergeAskInfo({
+      id: task.def.extra.askId,
+      content,
+      status: 'done',
+      error: task.error,
+    }))
+
     console.debug('setAsk', content, task.error)
   })
 

src/redux/envReducer.ts

@@ -1,7 +1,7 @@
 import {createSlice, PayloadAction} from '@reduxjs/toolkit'
-import {find} from 'lodash-es'
+import {find, findIndex} from 'lodash-es'
 import {getDevData} from '../util/biz_util'
-import {SERVER_URL_OPENAI, TOTAL_HEIGHT_DEF} from '../const'
+import {DEFAULT_SERVER_URL_OPENAI, TOTAL_HEIGHT_DEF} from '../const'
 
 interface EnvState {
   envData: EnvData
@@ -39,29 +39,32 @@ interface EnvState {
   lastSummarizeTime?: number
 
   // ask
-  askFold?: boolean
-  askQuestion?: string
-  askStatus: SummaryStatus
-  askError?: string
-  askContent?: string
+  asks: AskInfo[]
+
+  /**
+   * 是否输入中（中文）
+   */
+  inputting: boolean
 
   searchText: string
   searchResult: Set<number>
+
+  //当前视频是否计算过操作
+  reviewAction: boolean
 }
 
 const initialState: EnvState = {
   envData: {
-    serverUrl: SERVER_URL_OPENAI,
+    serverUrl: DEFAULT_SERVER_URL_OPENAI,
     translateEnable: true,
     summarizeEnable: true,
-    // autoExpand: true,
+    autoExpand: true,
     theme: 'light',
     searchEnabled: true,
   },
   tempData: {
     curSummaryType: 'overview',
   },
-  askStatus: 'init',
   totalHeight: TOTAL_HEIGHT_DEF,
   autoScroll: true,
   currentTime: import.meta.env.VITE_ENV === 'web-dev' ? 30 : undefined,
@@ -71,8 +74,14 @@ const initialState: EnvState = {
   data: import.meta.env.VITE_ENV === 'web-dev' ? getDevData() : undefined,
   transResults: {},
 
+  inputting: false,
+
   searchText: '',
   searchResult: new Set(),
+
+  asks: [],
+
+  reviewAction: false,
 }
 
 export const slice = createSlice({
@@ -94,6 +103,9 @@ export const slice = createSlice({
         ...action.payload,
       }
     },
+    setReviewAction: (state, action: PayloadAction<boolean>) => {
+      state.reviewAction = action.payload
+    },
     setTempReady: (state) => {
       state.tempReady = true
     },
@@ -204,26 +216,20 @@ export const slice = createSlice({
         }
       }
     },
-    setAskFold: (state, action: PayloadAction<boolean>) => {
-      state.askFold = action.payload
+    addAskInfo: (state, action: PayloadAction<AskInfo>) => {
+      state.asks.push(action.payload)
     },
-    setAskQuestion: (state, action: PayloadAction<string | undefined>) => {
-      state.askQuestion = action.payload
+    delAskInfo: (state, action: PayloadAction<string>) => {
+      state.asks = state.asks.filter(ask => ask.id !== action.payload)
     },
-    setAskContent: (state, action: PayloadAction<{
-      content?: any
-    }>) => {
-      state.askContent = action.payload.content
-    },
-    setAskStatus: (state, action: PayloadAction<{
-      status: SummaryStatus
-    }>) => {
-      state.askStatus = action.payload.status
-    },
-    setAskError: (state, action: PayloadAction<{
-      error?: string
-    }>) => {
-      state.askError = action.payload.error
+    mergeAskInfo: (state, action: PayloadAction<PartialOfAskInfo>) => {
+      const idx = findIndex(state.asks, {id: action.payload.id})
+      if (idx >= 0) {
+        state.asks[idx] = {
+          ...state.asks[idx],
+          ...action.payload,
+        }
+      }
     },
     setSegmentFold: (state, action: PayloadAction<{
       segmentStartIdx: number
@@ -288,16 +294,14 @@ export const slice = createSlice({
     setFold: (state, action: PayloadAction<boolean>) => {
       state.fold = action.payload
     },
+    setInputting: (state, action: PayloadAction<boolean>) => {
+      state.inputting = action.payload
+    },
   },
 })
 
 export const {
   setUrl,
-  setAskFold,
-  setAskQuestion,
-  setAskStatus,
-  setAskError,
-  setAskContent,
   setTempReady,
   setTempData,
   setUploadedTranscript,
@@ -323,6 +327,7 @@ export const {
   setAutoTranslate,
   setAutoScroll,
   setNoVideo,
+  setReviewAction,
   setNeedScroll,
   setCurIdx,
   setEnvData,
@@ -335,6 +340,10 @@ export const {
   setFold,
   setSearchText,
   setSearchResult,
+  setInputting,
+  addAskInfo,
+  delAskInfo,
+  mergeAskInfo,
 } = slice.actions
 
 export default slice.reducer

src/typings.d.ts

@@ -1,5 +1,5 @@
 interface EnvData {
-  // autoExpand?: boolean
+  autoExpand?: boolean
   flagDot?: boolean
 
   aiType?: 'openai' | 'gemini'
@@ -7,6 +7,8 @@ interface EnvData {
   apiKey?: string
   serverUrl?: string
   model?: string
+  customModel?: string
+  customModelTokens?: number
   // gemini
   geminiApiKey?: string
 
@@ -38,6 +40,8 @@ interface TempData {
   curSummaryType: SummaryType
   downloadType?: string
   compact?: boolean // 是否紧凑视图
+  reviewActions?: number // 点击或总结行为达到一定次数后，显示评分（一个视频最多只加1次）
+  reviewed?: boolean // 是否点击过评分,undefined: 不显示；true: 已点击；false: 未点击(需要显示)
 }
 
 interface TaskDef {
@@ -103,6 +107,17 @@ interface Summary {
   content?: any
 }
 
+interface AskInfo {
+  id: string
+  fold?: boolean
+  question: string
+  status: SummaryStatus
+  error?: string
+  content?: string
+}
+
+type PartialOfAskInfo = Partial<PartOfAskInfo>
+
 /**
  * 概览
  */
@@ -127,4 +142,4 @@ interface BriefSummary extends Summary {
 }
 
 type SummaryStatus = 'init' | 'pending' | 'done'
-type SummaryType = 'overview' | 'keypoint' | 'brief'
+type SummaryType = 'overview' | 'keypoint' | 'brief' | 'question'

src/util/biz_util.ts

@@ -1,5 +1,5 @@
 import devData from '../data/data.json'
-import {APP_DOM_ID, SUMMARIZE_TYPES} from '../const'
+import {APP_DOM_ID, CUSTOM_MODEL_TOKENS, MODEL_DEFAULT, MODEL_MAP, SUMMARIZE_TYPES} from '../const'
 import {isDarkMode} from '@kky002/kky-util'
 import toast from 'react-hot-toast'
 import {findIndex} from 'lodash-es'
@@ -88,6 +88,9 @@ export const isSummaryEmpty = (summary: Summary) => {
   } else if (summary.type === 'brief') {
     const content: string[] = summary.content??''
     return content.length === 0
+  } else if (summary.type === 'question') {
+    const content: any[] = summary.content??[]
+    return content.length === 0
   }
   return true
 }
@@ -109,6 +112,11 @@ export const getSummaryStr = (summary: Summary) => {
       summary: ''
     }
     s += content.summary + '\n'
+  } else if (summary.type === 'question') {
+    const content: Array<{ q: string, a: string }> = summary.content ?? []
+    s += content.map(item => {
+      return item.q + '\n' + item.a + '\n'
+    }).join('\n')
   }
   return s
 }
@@ -123,6 +131,22 @@ export const getServerUrl = (serverUrl?: string) => {
   return serverUrl
 }
 
+export const getModel = (envData: EnvData) => {
+  if (envData.model === 'custom') {
+    return envData.customModel
+  } else {
+    return envData.model
+  }
+}
+
+export const getModelMaxTokens = (envData: EnvData) => {
+  if (envData.model === 'custom') {
+    return envData.customModelTokens??CUSTOM_MODEL_TOKENS
+  } else {
+    return MODEL_MAP[envData.model??MODEL_DEFAULT]?.tokens??4000
+  }
+}
+
 export const setTheme = (theme: EnvData['theme']) => {
   const appRoot = document.getElementById(APP_DOM_ID)
   if (appRoot != null) {

src/vite-env.d.ts

@@ -1,6 +1,8 @@
 /// <reference types="vite/client" />
 
 interface ImportMetaEnv {
+  readonly VITE_REVIEW_URL: string
+  readonly VITE_EXTENSION_ID: string
 }
 
 interface ImportMeta {

vite.config.ts

@@ -12,7 +12,7 @@ export default ({mode}) => {
     visualizer() as PluginOption,
   ]
   // @ts-ignore
-  if (mode === 'production_chrome') {
+  if (mode === 'production_chrome' || mode === 'production_edge') {
     plugins.push(crx({
       manifest,
     }))