chore: release 1.9.3

This reverts commit e6db6747

README.md

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

fixFirefox.cjs

@@ -0,0 +1,22 @@
+console.log('fixFirefox.js loaded');
+
+const fs = require('fs')
+
+const manifest = require('./dist/manifest.json')
+manifest.web_accessible_resources[0].resources.push('index.html')
+manifest.action.default_popup = 'popup.html'
+//browser_specific_settings
+manifest.browser_specific_settings = {
+  "gecko": {
+    "id": "bilibili-subtitle@indiekky"
+  }
+}
+//background
+manifest.background = {
+  type: "module",
+  scripts: [manifest.background.service_worker]
+}
+//写回文件
+fs.writeFileSync('./dist/manifest.json', JSON.stringify(manifest, null, 2))
+
+console.log('fixFirefox.js done');

manifest.json

@@ -1,11 +1,15 @@
 {
   "name": "哔哩哔哩字幕列表",
   "description": "显示B站视频的字幕列表,可点击跳转与下载字幕,并支持翻译和总结字幕!",
-  "version": "1.7.5",
+  "version": "1.9.3",
   "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,16 @@
 {
   "private": true,
   "name": "bilibili-subtitle",
-  "version": "1.7.5",
+  "version": "1.9.3",
   "type": "module",
   "description": "哔哩哔哩字幕列表",
   "main": "index.js",
   "scripts": {
     "dev": "vite",
-    "build_chrome": "tsc && vite build -m production_chrome && pnpm run fixChrome",
-    "fix": "eslint --fix --quiet .",
-    "fixChrome": "node fixChrome.cjs"
+    "build": "tsc && vite build -m production_chrome",
+    "build_chrome": "pnpm run build && node fixChrome.cjs",
+    "build_firefox": "pnpm run build && node fixFirefox.cjs",
+    "fix": "eslint --fix --quiet ."
   },
   "author": "IndieKKY",
   "license": "MIT",

pnpm-lock.yaml

@@ -1,5 +1,9 @@
 lockfileVersion: '6.0'
 
+settings:
+  autoInstallPeers: true
+  excludeLinksFromLockfile: false
+
 dependencies:
   '@crxjs/vite-plugin':
     specifier: ^1.0.14
@@ -2386,6 +2390,7 @@ packages:
   /iconv-lite@0.6.3:
     resolution: {integrity: sha512-4fCk79wshMdzMp2rH06qWrJE4iolqLhCUH+OiuIgU++RB0+94NlDL81atO7GX55uUKueo0txHNtvEyI6D7WdMw==}
     engines: {node: '>=0.10.0'}
+    requiresBuild: true
     dependencies:
       safer-buffer: 2.1.2
     optional: true
@@ -3392,6 +3397,7 @@ packages:
   /pify@4.0.1:
     resolution: {integrity: sha512-uB80kBFb/tfd68bVleG9T5GGsGPjJrLAUpR5PZIrhBnIaRTQRjqdJSsIKkOP6OAIFbj7GOrcudc5pNjZ+geV2g==}
     engines: {node: '>=6'}
+    requiresBuild: true
     optional: true
 
   /postcss-import@14.1.0(postcss@8.4.19):
@@ -3475,6 +3481,7 @@ packages:
 
   /prr@1.0.1:
     resolution: {integrity: sha512-yPw4Sng1gWghHQWj0B3ZggWUm4qVbPwPFcRG8KyxiU7J2OHFSoEHKS+EZ3fv5l1t9CyCiop6l/ZYeWbrgoQejw==}
+    requiresBuild: true
     optional: true
 
   /punycode@2.1.1:
@@ -3802,10 +3809,12 @@ packages:
 
   /safer-buffer@2.1.2:
     resolution: {integrity: sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==}
+    requiresBuild: true
     optional: true
 
   /sax@1.2.4:
     resolution: {integrity: sha512-NqVDv9TpANUjFm0N8uM5GxL36UgKi9/atZw+x7YFnQ8ckwFGKrl4xX4yWtrey3UJm5nP1kUbnYgLopqWNSRhWw==}
+    requiresBuild: true
     optional: true
 
   /scheduler@0.23.0:
@@ -3822,6 +3831,7 @@ packages:
   /semver@5.7.1:
     resolution: {integrity: sha512-sauaDf/PZdVgrLTNYHRtpXa1iRiKcaebiKQ1BJdpQlWH2lCvexQdX55snPFyK7QzpudqbCI0qXFfOasHdyNDGQ==}
     hasBin: true
+    requiresBuild: true
     optional: true
 
   /semver@6.3.0:

src/App.tsx

@@ -15,6 +15,7 @@ import {handleJson} from '@kky002/kky-util'
 import {useLocalStorage} from '@kky002/kky-hooks'
 import {Toaster} from 'react-hot-toast'
 import {setTheme} from './util/biz_util'
+import useSearchService from './hooks/useSearchService'
 
 function App() {
   const dispatch = useAppDispatch()
@@ -72,6 +73,7 @@ function App() {
   // services
   useSubtitleService()
   useTranslateService()
+  useSearchService()
 
   return <div className={classNames('select-none', import.meta.env.VITE_ENV === 'web-dev'?'w-[350px]':'w-full')} style={{
     height: fold?undefined:`${totalHeight}px`,

src/biz/Body.tsx

@@ -1,24 +1,49 @@
-import React, {useCallback, useEffect, useRef} from 'react'
+import React, {useCallback, useEffect, useMemo, useRef} from 'react'
 import {
+  setAskFold,
+  setAskQuestion,
   setAutoScroll,
   setAutoTranslate,
   setCheckAutoScroll,
-  setCompact,
   setFoldAll,
   setNeedScroll,
   setPage,
-  setSegmentFold
+  setSearchText,
+  setSegmentFold,
+  setTempData
 } from '../redux/envReducer'
 import {useAppDispatch, useAppSelector} from '../hooks/redux'
-import {AiOutlineAim, FaRegArrowAltCircleDown, IoWarning, MdExpand, RiFileCopy2Line, RiTranslate} from 'react-icons/all'
+import {
+  AiOutlineAim,
+  AiOutlineCloseCircle,
+  BsDashSquare,
+  BsPlusSquare,
+  FaGripfire,
+  FaQuestion,
+  FaRegArrowAltCircleDown,
+  IoWarning,
+  MdExpand,
+  RiTranslate
+} from 'react-icons/all'
 import classNames from 'classnames'
 import toast from 'react-hot-toast'
 import SegmentCard from './SegmentCard'
-import {HEADER_HEIGHT, PAGE_SETTINGS, SUMMARIZE_ALL_THRESHOLD, SUMMARIZE_TYPES, TITLE_HEIGHT} from '../const'
+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'
 
 const Body = () => {
   const dispatch = useAppDispatch()
@@ -28,12 +53,17 @@ const Body = () => {
   const segments = useAppSelector(state => state.env.segments)
   const foldAll = useAppSelector(state => state.env.foldAll)
   const envData = useAppSelector(state => state.env.envData)
-  const compact = useAppSelector(state => state.env.compact)
-  const apiKey = useAppSelector(state => state.env.envData.apiKey)
+  const compact = useAppSelector(state => state.env.tempData.compact)
   const floatKeyPointsSegIdx = useAppSelector(state => state.env.floatKeyPointsSegIdx)
   const translateEnable = useAppSelector(state => state.env.envData.translateEnable)
   const summarizeEnable = useAppSelector(state => state.env.envData.summarizeEnable)
-  const {addSummarizeTask} = useTranslate()
+  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 bodyRef = useRef<any>()
   const curOffsetTop = useAppSelector(state => state.env.curOffsetTop)
   const checkAutoScroll = useAppSelector(state => state.env.checkAutoScroll)
@@ -41,13 +71,38 @@ const Body = () => {
   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 searchText = useAppSelector(state => state.env.searchText)
+  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])
+  const searchPlaceholder = useMemo(() => {
+    let placeholder = ''
+    if (envData.searchEnabled) {
+      if (envData.askEnabled??ASK_ENABLED_DEFAULT) {
+        placeholder = '搜索或提问字幕内容'
+      } else {
+        placeholder = '搜索字幕内容'
+      }
+    } else {
+      if (envData.askEnabled??ASK_ENABLED_DEFAULT) {
+        placeholder = '提问字幕内容'
+      }
+    }
+    return placeholder
+  }, [envData.askEnabled, envData.searchEnabled])
 
   const normalCallback = useCallback(() => {
-    dispatch(setCompact(false))
+    dispatch(setTempData({
+      compact: false
+    }))
   }, [dispatch])
 
   const compactCallback = useCallback(() => {
-    dispatch(setCompact(true))
+    dispatch(setTempData({
+      compact: true
+    }))
   }, [dispatch])
 
   const posCallback = useCallback(() => {
@@ -55,6 +110,7 @@ const Body = () => {
   }, [dispatch])
 
   const onSummarizeAll = useCallback(() => {
+    const apiKey = envData.aiType === 'gemini'?envData.geminiApiKey:envData.apiKey
     if (!apiKey) {
       dispatch(setPage(PAGE_SETTINGS))
       toast.error('需要先设置ApiKey!')
@@ -77,10 +133,11 @@ const Body = () => {
       }
       toast.success(`已添加${segments_.length}个总结任务!`)
     }
-  }, [addSummarizeTask, apiKey, curSummaryType, dispatch, segments])
+  }, [addSummarizeTask, curSummaryType, dispatch, envData.aiType, envData.apiKey, envData.geminiApiKey, segments])
 
   const onFoldAll = useCallback(() => {
     dispatch(setFoldAll(!foldAll))
+    dispatch(setAskFold(!foldAll))
     for (const segment of segments ?? []) {
       dispatch(setSegmentFold({
         segmentStartIdx: segment.startIdx,
@@ -90,13 +147,14 @@ const Body = () => {
   }, [dispatch, foldAll, segments])
 
   const toggleAutoTranslateCallback = useCallback(() => {
-    if (envData.apiKey) {
+    const apiKey = envData.aiType === 'gemini'?envData.geminiApiKey:envData.apiKey
+    if (apiKey) {
       dispatch(setAutoTranslate(!autoTranslate))
     } else {
       dispatch(setPage(PAGE_SETTINGS))
       toast.error('需要先设置ApiKey!')
     }
-  }, [autoTranslate, dispatch, envData.apiKey])
+  }, [autoTranslate, dispatch, envData.aiType, envData.apiKey, envData.geminiApiKey])
 
   const onEnableAutoScroll = useCallback(() => {
     dispatch(setAutoScroll(true))
@@ -118,10 +176,45 @@ const Body = () => {
     }
   }, [curSummaryType, segments, title])
 
+  const onSearchTextChange = useCallback((e: any) => {
+    const searchText = e.target.value
+    dispatch(setSearchText(searchText))
+  }, [dispatch])
+
+  const onClearSearchText = useCallback(() => {
+    dispatch(setSearchText(''))
+  }, [dispatch])
+
+  const onAsk = useCallback(() => {
+    if ((envData.askEnabled??ASK_ENABLED_DEFAULT) && searchText) {
+      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)
+        }
+      } else {
+        dispatch(setPage(PAGE_SETTINGS))
+        toast.error('需要先设置ApiKey!')
+      }
+    }
+  }, [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(() => {
     if (checkAutoScroll && curOffsetTop && autoScroll && !needScroll) {
-      if (bodyRef.current.scrollTop <= curOffsetTop - bodyRef.current.offsetTop - (totalHeight-120) + (floatKeyPointsSegIdx != null ? 100 : 0) ||
+      if (bodyRef.current.scrollTop <= curOffsetTop - bodyRef.current.offsetTop - (totalHeight-160) + (floatKeyPointsSegIdx != null ? 100 : 0) ||
         bodyRef.current.scrollTop >= curOffsetTop - bodyRef.current.offsetTop - 40 - 10
       ) {
         dispatch(setNeedScroll(true))
@@ -132,6 +225,7 @@ const Body = () => {
   }, [autoScroll, checkAutoScroll, curOffsetTop, dispatch, floatKeyPointsSegIdx, needScroll, totalHeight])
 
   return <div className='relative'>
+    {/* title */}
     <div className='absolute top-1 left-6 flex-center gap-1'>
       <AiOutlineAim className='cursor-pointer' onClick={posCallback} title='滚动到视频位置'/>
       {segments != null && segments.length > 0 &&
@@ -159,39 +253,186 @@ const Body = () => {
         <IoWarning className='text-warning'/>
       </div>}
     </div>
+
+    {/* 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}/>
+      {searchText && <button className='absolute top-1 right-2 btn btn-ghost btn-xs btn-circle text-base-content/75' onClick={onClearSearchText}><AiOutlineCloseCircle/></button>}
+    </div>}
+
+    {/* auto scroll btn */}
     {!autoScroll && <div
       className='absolute z-[999] top-[96px] right-6 tooltip tooltip-left cursor-pointer rounded-full bg-primary/25 hover:bg-primary/75 text-primary-content p-1.5 text-xl'
       data-tip='开启自动滚动'
       onClick={onEnableAutoScroll}>
       <FaRegArrowAltCircleDown className={autoScroll ? 'text-accent' : ''}/>
     </div>}
+
+    {/* 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}px`
+           height: `${totalHeight - HEADER_HEIGHT - TITLE_HEIGHT - RECOMMEND_HEIGHT - (showSearchInput ? SEARCH_BAR_HEIGHT : 0)}px`
          }}
     >
-      {segments?.map((segment, segmentIdx) => <SegmentCard key={segment.startIdx} segment={segment} segmentIdx={segmentIdx} bodyRef={bodyRef}/>)}
-      <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 className='text-secondary/75 font-semibold'>视频评论</span>里，发布后看看有什么效果🥳</div>
-        {(segments?.length??0) > 0 && <button className='mt-1.5 btn btn-xs btn-info' onClick={onCopy}>点击复制生成的{SUMMARIZE_TYPES[curSummaryType].name}<RiFileCopy2Line/></button>}
-      </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-subtitle.png' alt='youtube subtitle' className='w-8 h-8'/>Youtube Subtitle</div>
-        <div className='text-sm px-2 desc'>这是<span className='text-amber-600 font-semibold text-base'>Youtube</span>版的字幕列表</div>
-        <div className='flex gap-2'>
-          <a title='Chrome商店' href='https://chromewebstore.google.com/detail/fiaeclpicddpifeflpmlgmbjgaedladf' onClick={(e) => {
-            e.preventDefault()
-            openUrl('https://chromewebstore.google.com/detail/fiaeclpicddpifeflpmlgmbjgaedladf')
-          }} className='link text-sm text-accent'>Chrome商店</a>
-          <a title='Edge商店' href='https://microsoftedge.microsoft.com/addons/detail/galeejdehabppfgooagmkclpppnbccpc' onClick={e => {
-            e.preventDefault()
-            openUrl('https://microsoftedge.microsoft.com/addons/detail/galeejdehabppfgooagmkclpppnbccpc')
-          }} className='link text-sm text-accent'>Edge商店</a>
+      {/* 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>}
+
+      {/* 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 */}
+      {/*    className='text-secondary/75 font-semibold'>视频评论</span>里，发布后看看有什么效果🥳 */}
+      {/*  </div> */}
+      {/*  {(segments?.length ?? 0) > 0 && <button className='mt-1.5 btn btn-xs btn-info' */}
+      {/*                                          onClick={onCopy}>点击复制生成的{SUMMARIZE_TYPES[curSummaryType].name}<RiFileCopy2Line/> */}
+      {/*  </button>} */}
+      {/* </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'
+                                                                                  className='w-8 h-8'/>YouTube Caption
+          </div>
+          <div className='text-sm px-2 desc'>这是<span className='text-amber-600 font-semibold text-base'>YouTube</span>版的字幕列表
+          </div>
+          <div className='flex gap-2'>
+            <a title='Chrome商店' href='https://chromewebstore.google.com/detail/fiaeclpicddpifeflpmlgmbjgaedladf'
+               onClick={(e) => {
+                 e.preventDefault()
+                 openUrl('https://chromewebstore.google.com/detail/fiaeclpicddpifeflpmlgmbjgaedladf')
+               }} className='link text-sm text-accent'>Chrome商店</a>
+            <a title='Edge商店'
+               href='https://microsoftedge.microsoft.com/addons/detail/galeejdehabppfgooagmkclpppnbccpc'
+               onClick={e => {
+                 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'
+               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='/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>
+
+    {/* 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/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

@@ -4,17 +4,14 @@ import {getDisplay, getTransText} from '../util/biz_util'
 import classNames from 'classnames'
 
 const CompactSegmentItem = (props: {
-  item: {
-    from: number
-    to: number
-    content: string
-  }
+  item: TranscriptItem
   idx: number
   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)
@@ -23,10 +20,10 @@ 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>{!last && ', '}</span>
+    <span className='text-base-content/75'>{!last && ','}</span>
   </div>
 }
 

src/biz/MoreBtn.tsx

@@ -11,7 +11,7 @@ import {
 import Popover from '../components/Popover'
 import {Placement} from '@popperjs/core/lib/enums'
 import {useAppDispatch, useAppSelector} from '../hooks/redux'
-import {setDownloadType, setEnvData, setPage} from '../redux/envReducer'
+import {setEnvData, setPage, setTempData} from '../redux/envReducer'
 import {EventBusContext} from '../Router'
 import {EVENT_EXPAND, PAGE_SETTINGS} from '../const'
 import {formatSrtTime, formatTime, formatVttTime} from '../util/util'
@@ -62,10 +62,11 @@ const MoreBtn = (props: Props) => {
   const data = useAppSelector(state => state.env.data)
   const envReady = useAppSelector(state => state.env.envReady)
   const envData = useAppSelector(state => state.env.envData)
-  const downloadType = useAppSelector(state => state.env.downloadType)
+  const downloadType = useAppSelector(state => state.env.tempData.downloadType)
   const [moreVisible, setMoreVisible] = useState(false)
   const eventBus = useContext(EventBusContext)
   const segments = useAppSelector(state => state.env.segments)
+  const url = useAppSelector(state => state.env.url)
   const title = useAppSelector(state => state.env.title)
   const curSummaryType = useAppSelector(state => state.env.tempData.curSummaryType)
 
@@ -76,19 +77,19 @@ const MoreBtn = (props: Props) => {
 
     let s, fileName
     if (!downloadType || downloadType === 'text') {
-      s = ''
+      s = `${title??'无标题'}\n${url??'无链接'}\n\n`
       for (const item of data.body) {
         s += item.content + '\n'
       }
       fileName = 'download.txt'
     } else if (downloadType === 'textWithTime') {
-      s = ''
+      s = `${title??'无标题'}\n${url??'无链接'}\n\n`
       for (const item of data.body) {
         s += formatTime(item.from) + ' ' + item.content + '\n'
       }
       fileName = 'download.txt'
     } else if (downloadType === 'article') {
-      s = ''
+      s = `${title??'无标题'}\n${url??'无链接'}\n\n`
       for (const item of data.body) {
         s += item.content + ', '
       }
@@ -138,9 +139,10 @@ const MoreBtn = (props: Props) => {
       s = JSON.stringify(data)
       fileName = 'download.json'
     } else if (downloadType === 'summarize') {
+      s = `${title??'无标题'}\n${url??'无链接'}\n\n`
       const [success, content] = getSummarize(title, segments, curSummaryType)
       if (!success) return
-      s = content
+      s += content
       fileName = '总结.txt'
     } else {
       return
@@ -153,7 +155,7 @@ const MoreBtn = (props: Props) => {
       }).catch(console.error)
     }
     setMoreVisible(false)
-  }, [curSummaryType, data, downloadType, segments, title])
+  }, [curSummaryType, data, downloadType, segments, title, url])
 
   const downloadAudioCallback = useCallback(() => {
     window.parent.postMessage({
@@ -162,7 +164,9 @@ const MoreBtn = (props: Props) => {
   }, [])
 
   const selectCallback = useCallback((e: any) => {
-    dispatch(setDownloadType(e.target.value))
+    dispatch(setTempData({
+      downloadType: e.target.value,
+    }))
   }, [dispatch])
 
   const preventCallback = useCallback((e: any) => {
@@ -259,16 +263,27 @@ const MoreBtn = (props: Props) => {
             微信公众号(IndieKKY)
           </a>
         </li>
-        <li className='hover:bg-accent'>
-          <a className='flex items-center' onClick={(e) => {
-            e.preventDefault()
-            e.stopPropagation()
-            openUrl('https://chromewebstore.google.com/detail/fiaeclpicddpifeflpmlgmbjgaedladf')
-          }}>
-            <img alt='youtube subtitle' src='/youtube-subtitle.png' className='w-[20px] h-[20px] bg-white rounded-sm p-0.5'/>
-            Youtube Subtitle
-          </a>
-        </li>
+        {/* <li className='hover:bg-accent'> */}
+        {/*  <a className='flex items-center' onClick={(e) => { */}
+        {/*    e.preventDefault() */}
+        {/*    e.stopPropagation() */}
+        {/*    openUrl('https://bibigpt.co/r/bilibili') */}
+        {/*  }}> */}
+        {/*    <img alt='BibiGPT' src='/bibigpt.png' className='w-[20px] h-[20px] bg-white rounded-sm p-0.5'/> */}
+        {/*    BibiGPT */}
+        {/*  </a> */}
+        {/* </li> */}
+        {/* <li className='hover:bg-accent'> */}
+        {/*  <a className='flex items-center' onClick={(e) => { */}
+        {/*    e.preventDefault() */}
+        {/*    e.stopPropagation() */}
+        {/*    openUrl('https://chromewebstore.google.com/detail/fiaeclpicddpifeflpmlgmbjgaedladf') */}
+        {/*  }}> */}
+        {/*    <img alt='youtube subtitle' src='/youtube-caption.png' */}
+        {/*         className='w-[20px] h-[20px] bg-white rounded-sm p-0.5'/> */}
+        {/*    Youtube Caption */}
+        {/*  </a> */}
+        {/* </li> */}
         <li className='hover:bg-accent'>
           <a className='flex items-center' onClick={(e) => {
             dispatch(setPage(PAGE_SETTINGS))
@@ -282,7 +297,7 @@ const MoreBtn = (props: Props) => {
         </li>
       </ul>
     </Popover>}
-</>
+  </>
 }
 
 export default MoreBtn

src/biz/NormalSegmentItem.tsx

@@ -5,16 +5,13 @@ import {getDisplay, getTransText} from '../util/biz_util'
 import classNames from 'classnames'
 
 const NormalSegmentItem = (props: {
-  item: {
-    from: number
-    to: number
-    content: string
-  }
+  item: TranscriptItem
   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)
@@ -23,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

@@ -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])
 
@@ -66,19 +66,20 @@ const Summarize = (props: {
   const {segment, segmentIdx, summary, float} = props
 
   const dispatch = useAppDispatch()
-  const apiKey = useAppSelector(state => state.env.envData.apiKey)
+  const envData = useAppSelector(state => state.env.envData)
   const fontSize = useAppSelector(state => state.env.envData.fontSize)
   const curSummaryType = useAppSelector(state => state.env.tempData.curSummaryType)
   const {addSummarizeTask} = useTranslate()
 
   const onGenerate = useCallback(() => {
+    const apiKey = envData.aiType === 'gemini'?envData.geminiApiKey:envData.apiKey
     if (apiKey) {
       addSummarizeTask(curSummaryType, segment).catch(console.error)
     } else {
       dispatch(setPage(PAGE_SETTINGS))
       toast.error('需要先设置ApiKey!')
     }
-  }, [addSummarizeTask, apiKey, curSummaryType, dispatch, segment])
+  }, [addSummarizeTask, curSummaryType, dispatch, envData.aiType, envData.apiKey, envData.geminiApiKey, segment])
 
   const onCopy = useCallback(() => {
     if (summary != null) {
@@ -138,7 +139,7 @@ const SegmentCard = (props: {
   const summarizeFloat = useAppSelector(state => state.env.envData.summarizeFloat)
   const fold = useAppSelector(state => state.env.fold)
   const page = useAppSelector(state => state.env.page)
-  const compact = useAppSelector(state => state.env.compact)
+  const compact = useAppSelector(state => state.env.tempData.compact)
   const floatKeyPointsSegIdx = useAppSelector(state => state.env.floatKeyPointsSegIdx)
   const showCurrent = useMemo(() => curIdx != null && segment.startIdx <= curIdx && curIdx <= segment.endIdx, [curIdx, segment.endIdx, segment.startIdx])
   const curSummaryType = useAppSelector(state => state.env.tempData.curSummaryType)

src/biz/SegmentItem.tsx

@@ -1,4 +1,4 @@
-import React, {useCallback, useEffect, useRef} from 'react'
+import React, {useCallback, useEffect, useMemo, useRef} from 'react'
 import {useAppDispatch, useAppSelector} from '../hooks/redux'
 import useSubtitle from '../hooks/useSubtitle'
 import {setCheckAutoScroll, setCurOffsetTop, setNeedScroll} from '../redux/envReducer'
@@ -7,27 +7,41 @@ import CompactSegmentItem from './CompactSegmentItem'
 
 const SegmentItem = (props: {
   bodyRef: any
-  item: {
-    from: number
-    to: number
-    content: string
-  }
+  item: TranscriptItem
   idx: number
   isIn: boolean
   needScroll?: boolean
   last: boolean
 }) => {
-  const dispatch = useAppDispatch()
   const {bodyRef, item, idx, isIn, needScroll, last} = props
+  const dispatch = useAppDispatch()
   const ref = useRef<any>()
   const {move} = useSubtitle()
-  const compact = useAppSelector(state => state.env.compact)
+
+  const compact = useAppSelector(state => state.env.tempData.compact)
+  const searchText = useAppSelector(state => state.env.searchText)
+  const searchResult = useAppSelector(state => state.env.searchResult)
+  const display = useMemo(() => {
+    if (searchText) {
+      return searchResult.has(item.idx) ? 'inline' : 'none'
+    } else {
+      return 'inline'
+    }
+  }, [item.idx, searchResult, searchText])
 
   const moveCallback = useCallback((event: any) => {
     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])
 
@@ -47,7 +61,9 @@ const SegmentItem = (props: {
     }
   }, [dispatch, isIn])
 
-  return <span ref={ref}>
+  return <span ref={ref} style={{
+    display
+  }}>
     {compact
       ? <CompactSegmentItem
         item={item}
@@ -55,6 +71,7 @@ const SegmentItem = (props: {
         isIn={isIn}
         last={last}
         moveCallback={moveCallback}
+        move2Callback={move2Callback}
       />
       :
       <NormalSegmentItem
@@ -62,6 +79,7 @@ const SegmentItem = (props: {
         idx={idx}
         isIn={isIn}
         moveCallback={moveCallback}
+        move2Callback={move2Callback}
       />
     }
   </span>

src/biz/Settings.tsx

@@ -2,23 +2,27 @@ import React, {PropsWithChildren, useCallback, useMemo, useState} from 'react'
 import {setEnvData, setPage} 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,
   MODELS,
   PAGE_MAIN,
   PROMPT_DEFAULTS,
   PROMPT_TYPES,
-  SERVER_URL_THIRD,
   SUMMARIZE_LANGUAGE_DEFAULT,
   TRANSLATE_FETCH_DEFAULT,
   TRANSLATE_FETCH_MAX,
   TRANSLATE_FETCH_MIN,
   TRANSLATE_FETCH_STEP,
-  WORDS_DEFAULT,
+  WORDS_RATE,
 } from '../const'
-import {IoWarning} from 'react-icons/all'
+import {FaGripfire, IoWarning} from 'react-icons/all'
 import classNames from 'classnames'
 import toast from 'react-hot-toast'
 import {useBoolean, useEventTarget} from 'ahooks'
@@ -58,17 +62,24 @@ const Settings = () => {
   // const {value: autoScrollValue, onChange: setAutoScrollValue} = useEventChecked(envData.autoScroll)
   const {value: translateEnableValue, onChange: setTranslateEnableValue} = useEventChecked(envData.translateEnable)
   const {value: summarizeEnableValue, onChange: setSummarizeEnableValue} = useEventChecked(envData.summarizeEnable)
+  const {value: searchEnabledValue, onChange: setSearchEnabledValue} = useEventChecked(envData.searchEnabled)
+  const {value: askEnabledValue, onChange: setAskEnabledValue} = useEventChecked(envData.askEnabled??ASK_ENABLED_DEFAULT)
+  const {value: cnSearchEnabledValue, onChange: setCnSearchEnabledValue} = useEventChecked(envData.cnSearchEnabled)
   const {value: summarizeFloatValue, onChange: setSummarizeFloatValue} = useEventChecked(envData.summarizeFloat)
   const [apiKeyValue, { onChange: onChangeApiKeyValue }] = useEventTarget({initialValue: envData.apiKey??''})
   const [serverUrlValue, setServerUrlValue] = useState(envData.serverUrl)
+  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)
   const [fontSizeValue, setFontSizeValue] = useState(envData.fontSize)
+  const [aiTypeValue, setAiTypeValue] = useState(envData.aiType)
   const [transDisplayValue, setTransDisplayValue] = useState(envData.transDisplay)
-  const [wordsValue, setWordsValue] = useState<number | undefined>(envData.words??WORDS_DEFAULT)
+  const [wordsValue, setWordsValue] = useState<number | undefined>(envData.words)
   const [fetchAmountValue, setFetchAmountValue] = useState(envData.fetchAmount??TRANSLATE_FETCH_DEFAULT)
   const [moreFold, {toggle: toggleMoreFold}] = useBoolean(true)
   const [promptsFold, {toggle: togglePromptsFold}] = useBoolean(true)
@@ -89,6 +100,12 @@ const Settings = () => {
     }
     return list
   }, [])
+  const apiKeySetted = useMemo(() => {
+    if (aiTypeValue === 'gemini') {
+      return !!geminiApiKeyValue
+    }
+    return !!apiKeyValue
+  }, [aiTypeValue, apiKeyValue, geminiApiKeyValue])
 
   const onChangeHideOnDisableAutoTranslate = useCallback((e: any) => {
     setHideOnDisableAutoTranslateValue(e.target.checked)
@@ -97,9 +114,13 @@ const Settings = () => {
   const onSave = useCallback(() => {
     dispatch(setEnvData({
       autoExpand: autoExpandValue,
+      aiType: aiTypeValue,
       apiKey: apiKeyValue,
       serverUrl: serverUrlValue,
       model: modelValue,
+      customModel: customModelValue,
+      customModelTokens: customModelTokensValue,
+      geminiApiKey: geminiApiKeyValue,
       translateEnable: translateEnableValue,
       language: languageValue,
       hideOnDisableAutoTranslate: hideOnDisableAutoTranslateValue,
@@ -112,10 +133,13 @@ const Settings = () => {
       fetchAmount: fetchAmountValue,
       fontSize: fontSizeValue,
       prompts: promptsValue,
+      searchEnabled: searchEnabledValue,
+      cnSearchEnabled: cnSearchEnabledValue,
+      askEnabled: askEnabledValue,
     }))
     dispatch(setPage(PAGE_MAIN))
     toast.success('保存成功')
-  }, [modelValue, promptsValue, fontSizeValue, apiKeyValue, autoExpandValue, dispatch, fetchAmountValue, hideOnDisableAutoTranslateValue, languageValue, serverUrlValue, summarizeEnableValue, summarizeFloatValue, summarizeLanguageValue, themeValue, transDisplayValue, translateEnableValue, wordsValue])
+  }, [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))
@@ -161,6 +185,14 @@ const Settings = () => {
     setFontSizeValue('large')
   }, [])
 
+  const onSelOpenai = useCallback(() => {
+    setAiTypeValue('openai')
+  }, [])
+
+  const onSelGemini = useCallback(() => {
+    setAiTypeValue('gemini')
+  }, [])
+
   return <div className='text-sm overflow-y-auto' style={{
     height: fold?undefined:`${totalHeight-HEADER_HEIGHT}px`,
   }}>
@@ -183,62 +215,98 @@ const Settings = () => {
             <button onClick={onSelFontSize2} className={classNames('btn btn-xs no-animation', fontSizeValue === 'large'?'btn-active':'')}>加大</button>
           </div>
         </FormItem>
+        <FormItem title='AI类型' tip='OPENAI质量更高'>
+          <div className="btn-group">
+            <button onClick={onSelOpenai} className={classNames('btn btn-xs no-animation', (!aiTypeValue || aiTypeValue === 'openai')?'btn-active':'')}>OpenAI</button>
+            <button onClick={onSelGemini} className={classNames('btn btn-xs no-animation', aiTypeValue === 'gemini'?'btn-active':'')}>Gemini</button>
+          </div>
+        </FormItem>
       </Section>
-      <Section title='openai配置'>
+
+      {(!aiTypeValue || aiTypeValue === 'openai') && <Section title='openai配置'>
         <FormItem title='ApiKey' htmlFor='apiKey'>
-          <input id='apiKey' type='text' className='input input-sm input-bordered w-full' placeholder='sk-xxx' value={apiKeyValue} onChange={onChangeApiKeyValue}/>
+          <input id='apiKey' type='text' className='input input-sm input-bordered w-full' placeholder='sk-xxx'
+                 value={apiKeyValue} onChange={onChangeApiKeyValue}/>
         </FormItem>
         <FormItem title='服务器' htmlFor='serverUrl'>
-          <input id='serverUrl' type='text' className='input input-sm input-bordered w-full' placeholder='服务器地址,默认使用官方地址' value={serverUrlValue} onChange={e => setServerUrlValue(e.target.value)}/>
+          <input id='serverUrl' type='text' className='input input-sm input-bordered w-full'
+                 placeholder={DEFAULT_SERVER_URL_OPENAI} value={serverUrlValue}
+                 onChange={e => setServerUrlValue(e.target.value)}/>
         </FormItem>
-        <div className='flex justify-center'>
-          <a className='link text-xs' onClick={toggleMoreFold}>{moreFold?'点击查看说明':'点击折叠说明'}</a>
+        <div>
+          <div className='desc text-xs text-center'>
+            <div className='flex justify-center font-semibold'>【官方地址】</div>
+            <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(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>
         </div>
-        {!moreFold && <div>
-          <ul className='pl-3 list-decimal desc text-xs'>
-            <li>官方服务器需要科学上网才能访问</li>
-            <li>官方网址：<a className='link' href='https://platform.openai.com/' target='_blank' rel="noreferrer">openai.com</a></li>
-            <li>支持官方代理(使用官方ApiKey)：<a className='link' onClick={() => setServerUrlValue(SERVER_URL_THIRD)} rel='noreferrer'>点击设置</a></li>
-            <li>支持代理(配合ApiKey)：<a className='link' href='https://api2d.com/' target='_blank' rel="noreferrer">api2d</a> | <a className='link' onClick={() => setServerUrlValue('https://openai.api2d.net')} rel='noreferrer'>点击设置</a></li>
-            <li>支持代理(配合ApiKey)：<a className='link' href='https://openaimax.com/' target='_blank' rel="noreferrer">OpenAI-Max</a> | <a className='link' onClick={() => setServerUrlValue('https://api.openaimax.com')} rel='noreferrer'>点击设置</a></li>
-            <li>支持代理(配合ApiKey)：<a className='link' href='https://openai-sb.com/' target='_blank' rel="noreferrer">OpenAI-SB</a> | <a className='link' onClick={() => setServerUrlValue('https://api.openai-sb.com')} rel='noreferrer'>点击设置</a></li>
-            <li>支持代理(配合ApiKey)：<a className='link' href='https://www.ohmygpt.com/' target='_blank' rel="noreferrer">OhMyGPT</a> | <a className='link' onClick={() => setServerUrlValue('https://api.ohmygpt.com')} rel='noreferrer'>点击设置</a></li>
-            <li>支持代理(配合ApiKey)：<a className='link' href='https://aiproxy.io/' target='_blank' rel="noreferrer">AIProxy</a> | <a className='link' onClick={() => setServerUrlValue('https://api.aiproxy.io')} rel='noreferrer'>点击设置</a></li>
-            <li>支持代理(配合ApiKey)：<a className='link' href='https://key-rental.bowen.cool/' target='_blank' rel="noreferrer">Key Rental</a> | <a className='link' onClick={() => setServerUrlValue('https://key-rental-api.bowen.cool/openai')} rel='noreferrer'>点击设置</a></li>
-            <li>支持其他第三方代理，有问题可加群交流</li>
-          </ul>
-        </div>}
-        <FormItem title='模型选择' htmlFor='modelSel' tip='注意，不同模型有不同价格'>
-          <select id='modelSel' className="select select-sm select-bordered" value={modelValue} onChange={onChangeModelValue}>
+        <FormItem title='模型选择' htmlFor='modelSel' tip='注意，不同模型有不同价格与token限制'>
+          <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>
+        {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配置'>
+        <FormItem title='ApiKey' htmlFor='geminiApiKey'>
+          <input id='geminiApiKey' type='text' className='input input-sm input-bordered w-full' placeholder='xxx'
+                 value={geminiApiKeyValue} onChange={onChangeGeminiApiKeyValue}/>
+        </FormItem>
+        <div>
+          <div className='desc text-xs'>
+            <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>
         </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='提示词配置'>
+        {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>
+
       <Section title={<div className='flex items-center'>
         翻译配置
-        {!apiKeyValue && <div className='tooltip tooltip-right ml-1' data-tip='未设置ApiKey无法使用'>
+        {!apiKeySetted && <div className='tooltip tooltip-right ml-1' data-tip='未设置ApiKey无法使用'>
           <IoWarning className='text-sm text-warning'/>
         </div>}
       </div>}>
@@ -247,7 +315,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>
@@ -273,7 +342,7 @@ const Settings = () => {
       </Section>
       <Section title={<div className='flex items-center'>
         总结配置
-        {!apiKeyValue && <div className='tooltip tooltip-right ml-1' data-tip='未设置ApiKey无法使用'>
+        {!apiKeySetted && <div className='tooltip tooltip-right ml-1' data-tip='未设置ApiKey无法使用'>
           <IoWarning className='text-sm text-warning'/>
         </div>}
       </div>}>
@@ -292,13 +361,37 @@ const Settings = () => {
         </FormItem>
         <FormItem htmlFor='words' title='分段字数' tip='注意，不同模型有不同字数限制'>
           <div className='flex-1 flex flex-col'>
-            <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)}/>
+            <input id='words' type='number' className='input input-sm input-bordered w-full' placeholder={`默认为上限x${WORDS_RATE}`} value={wordsValue??''} onChange={e => setWordsValue(e.target.value?parseInt(e.target.value):undefined)}/>
             {/* <input type="range" min={WORDS_MIN} max={WORDS_MAX} step={WORDS_STEP} value={wordsValue} className="range range-primary" onChange={onWordsChange} /> */}
             {/* <div className="w-full flex justify-between text-xs px-2"> */}
             {/*  {wordsList.map(words => <span key={words}>{words}</span>)} */}
             {/* </div> */}
           </div>
         </FormItem>
+        <div className='desc text-xs'>
+          当前选择的模型的分段字数上限是<span className='font-semibold font-mono'>{aiTypeValue === 'gemini'?GEMINI_TOKENS:(MODEL_MAP[modelValue??MODEL_DEFAULT]?.tokens??'未知')}</span>
+          （太接近上限总结会报错）
+        </div>
+      </Section>
+      <Section title={<div className='flex items-center'>
+        搜索配置
+      </div>}>
+        <FormItem title='启用搜索' htmlFor='searchEnabled' tip='是否启用字幕搜索功能'>
+          <input id='searchEnabled' type='checkbox' className='toggle toggle-primary' checked={searchEnabledValue}
+                 onChange={setSearchEnabledValue}/>
+        </FormItem>
+        <FormItem title='拼音搜索' htmlFor='cnSearchEnabled' tip='是否启用中文拼音搜索'>
+          <input id='cnSearchEnabled' type='checkbox' className='toggle toggle-primary' checked={cnSearchEnabledValue}
+                 onChange={setCnSearchEnabledValue}/>
+        </FormItem>
+      </Section>
+      <Section title={<div className='flex items-center'>
+        提问配置
+      </div>}>
+        <FormItem title='启用提问' htmlFor='askEnabled' tip='是否启用字幕提问功能'>
+          <input id='askEnabled' type='checkbox' className='toggle toggle-primary' checked={askEnabledValue}
+                 onChange={setAskEnabledValue}/>
+        </FormItem>
       </Section>
       <div className='flex justify-center gap-5'>
         <button className='btn btn-primary btn-sm' onClick={onSave}>保存</button>

src/chrome/content-script.cjs

@@ -102,6 +102,7 @@ const refreshVideoInfo = async () => {
       //send setVideoInfo
       iframe.contentWindow.postMessage({
         type: 'setVideoInfo',
+        url: location.origin + location.pathname,
         title,
         aid,
         pages,
@@ -157,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,4 +1,14 @@
-import {getServerUrl} from '../util/biz_util'
+import {DEFAULT_SERVER_URL_OPENAI} from '../const'
+
+const getServerUrl = (serverUrl?: string) => {
+  if (!serverUrl) {
+    return DEFAULT_SERVER_URL_OPENAI
+  }
+  if (serverUrl.endsWith('/')) {
+    serverUrl = serverUrl.slice(0, -1)
+  }
+  return serverUrl
+}
 
 export const handleChatCompleteTask = async (task: Task) => {
   const data = task.def.data
@@ -18,3 +28,16 @@ export const handleChatCompleteTask = async (task: Task) => {
     throw new Error(`${task.resp.error.code as string??''} ${task.resp.error.message as string ??''}`)
   }
 }
+
+export const handleGeminiChatCompleteTask = async (task: Task) => {
+  const data = task.def.data
+  const resp = await fetch('https://generativelanguage.googleapis.com/v1/models/gemini-pro:generateContent', {
+    method: 'POST',
+    headers: {
+      'Content-Type': 'application/json',
+      'x-goog-api-key': task.def.extra.geminiApiKey,
+    },
+    body: JSON.stringify(data),
+  })
+  task.resp = await resp.json()
+}

src/chrome/taskService.ts

@@ -1,5 +1,5 @@
 import {TASK_EXPIRE_TIME} from '../const'
-import {handleChatCompleteTask} from './openaiService'
+import {handleChatCompleteTask, handleGeminiChatCompleteTask} from './openaiService'
 
 export const tasksMap = new Map<string, Task>()
 
@@ -11,6 +11,9 @@ export const handleTask = async (task: Task) => {
       case 'chatComplete':
         await handleChatCompleteTask(task)
         break
+      case 'geminiChatComplete':
+        await handleGeminiChatCompleteTask(task)
+        break
       default:
         // eslint-disable-next-line @typescript-eslint/restrict-template-expressions
         throw new Error(`任务类型不支持: ${task.def.type}`)

src/components/Markdown.tsx

@@ -0,0 +1,46 @@
+import classNames from 'classnames'
+import ReactMarkdown from 'react-markdown'
+import toast from 'react-hot-toast'
+
+function CopyBtn(props: {
+  content: string
+}) {
+  const {content} = props
+  return <div className='flex justify-center mt-1'>
+    <button className="btn btn-xs px-10 btn-primary normal-case" onClick={() => {
+      navigator.clipboard.writeText(content).then(() => {
+        toast.success('Copied!')
+      }).catch(console.error)
+    }}>Copy
+    </button>
+  </div>
+}
+
+function Markdown(props: {
+  content: string
+  codeBlockClass?: string
+}) {
+  const {content, codeBlockClass} = props
+
+  return <ReactMarkdown
+    className='markdown prose prose-sm dark:prose-invert prose-h1:text-center prose-h1:font-bold prose-h1:underline-offset-4 overflow-y-auto scrollbar-hide'
+    linkTarget={'_blank'}
+    components={{
+      code({node, inline, className, children, ...props}) {
+        if (inline) {
+          return <code
+            className={classNames(className, 'md-inline-block kbd kbd-xs rounded text-base-content/80')} {...props}>
+            {children}
+          </code>
+        } else {
+          return <code className={classNames(className, 'relative', codeBlockClass)} {...props}>
+            {children}
+            {className?.includes('language-copy') && <CopyBtn content={children[0] as string}/>}
+          </code>
+        }
+      }
+    }}
+  >{content}</ReactMarkdown>
+}
+
+export default Markdown

src/const.tsx

@@ -9,6 +9,7 @@ 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_BRIEF = 'summarize_brief'
+export const PROMPT_TYPE_ASK = 'ask'
 export const PROMPT_TYPES = [{
   name: '翻译',
   type: PROMPT_TYPE_TRANSLATE,
@@ -21,6 +22,9 @@ export const PROMPT_TYPES = [{
 }, {
   name: '总结',
   type: PROMPT_TYPE_SUMMARIZE_BRIEF,
+}, {
+  name: '提问',
+  type: PROMPT_TYPE_ASK,
 }]
 
 export const SUMMARIZE_TYPES = {
@@ -119,7 +123,20 @@ The video's subtitles:
 
 '''
 {{segment}}
-'''`
+'''`,
+  [PROMPT_TYPE_ASK]: `You are a helpful assistant who answers question related to video subtitles.
+Answer in language '{{language}}'.
+
+The video's title: '''{{title}}'''.
+The video's subtitles:
+
+'''
+{{segment}}
+'''
+
+Question: '''{{question}}'''
+Answer:
+`,
 }
 
 export const EVENT_EXPAND = 'expand'
@@ -141,26 +158,42 @@ export const TOTAL_HEIGHT_DEF = 520
 export const TOTAL_HEIGHT_MAX = 800
 export const HEADER_HEIGHT = 44
 export const TITLE_HEIGHT = 24
+export const SEARCH_BAR_HEIGHT = 32
+export const RECOMMEND_HEIGHT = 36
 
-export const WORDS_DEFAULT = import.meta.env.VITE_ENV === 'web-dev'?500:2000
+export const WORDS_RATE = 0.75
 export const WORDS_MIN = 500
 export const WORDS_MAX = 16000
 export const WORDS_STEP = 500
 export const SUMMARIZE_THRESHOLD = 100
 export const SUMMARIZE_LANGUAGE_DEFAULT = 'cn'
 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 ASK_ENABLED_DEFAULT = true
+export const DEFAULT_SERVER_URL_OPENAI = 'https://api.openai.com'
+export const CUSTOM_MODEL_TOKENS = 16385
 
 export const MODELS = [{
   code: 'gpt-3.5-turbo',
   name: 'gpt-3.5-turbo',
+  tokens: 4096,
 }, {
-  code: 'gpt-3.5-turbo-16k',
-  name: 'gpt-3.5-turbo-16k',
+  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 MODEL_DEFAULT = MODELS[0].code
+export const GEMINI_TOKENS = 32768
+export const MODEL_DEFAULT = MODELS[1].code
+export const MODEL_MAP: {[key: string]: typeof MODELS[number]} = {}
+for (const model of MODELS) {
+  MODEL_MAP[model.code] = model
+}
 
 export const LANGUAGES = [{
   code: 'en',

src/hooks/useKeyService.ts

@@ -0,0 +1,59 @@
+import {useEffect} from 'react'
+import {useMemoizedFn} from 'ahooks/es'
+import {useAppSelector} from './redux'
+import useSubtitle from './useSubtitle'
+
+const useKeyService = () => {
+  const curIdx = useAppSelector(state => state.env.curIdx)
+  const data = useAppSelector(state => state.env.data)
+  const {move} = useSubtitle()
+
+  const onKeyDown = useMemoizedFn((e: KeyboardEvent) => {
+    // 有按其他控制键时，不触发
+    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/useSearchService.ts

@@ -0,0 +1,61 @@
+import {useAppDispatch, useAppSelector} from './redux'
+import {useEffect, useMemo} from 'react'
+import {setSearchResult, setSearchText, } from '../redux/envReducer'
+import {Search} from '../util/search'
+
+interface Document {
+  idx: number
+  s: string // searchKeys
+}
+
+const useSearchService = () => {
+  const dispatch = useAppDispatch()
+
+  const envData = useAppSelector(state => state.env.envData)
+  const data = useAppSelector(state => state.env.data)
+  const searchText = useAppSelector(state => state.env.searchText)
+
+  const {reset, search} = useMemo(() => Search('idx', 's', 256, {
+    cnSearchEnabled: envData.cnSearchEnabled
+  }), [envData.cnSearchEnabled]) // 搜索实例
+
+  // reset search
+  useEffect(() => {
+    if (!envData.searchEnabled) {
+      return
+    }
+    const startTime = Date.now()
+    const docs: Document[] = []
+    for (const item of data?.body??[]) {
+      docs.push({
+        idx: item.idx,
+        s: item.content,
+      })
+    }
+    reset(docs)
+    // 清空搜索文本
+    dispatch(setSearchText(''))
+    // 日志
+    const endTime = Date.now()
+    console.debug(`[Search]reset ${docs.length} docs, cost ${endTime-startTime}ms`)
+  }, [data?.body, dispatch, envData.searchEnabled, reset])
+
+  // search text
+  useEffect(() => {
+    const searchResult: Set<number> = new Set()
+
+    if (envData.searchEnabled && searchText) {
+      // @ts-expect-error
+      const documents: Document[] | undefined = search(searchText)
+      if (documents != null) {
+        for (const document of documents) {
+          searchResult.add(document.idx)
+        }
+      }
+    }
+
+    dispatch(setSearchResult(searchResult))
+  }, [dispatch, envData.searchEnabled, search, searchText])
+}
+
+export default useSearchService

src/hooks/useSubtitle.ts

@@ -5,8 +5,8 @@ import {setNeedScroll} from '../redux/envReducer'
 const useSubtitle = () => {
   const dispatch = useAppDispatch()
 
-  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}, '*')
   }, [])
 
   const scrollIntoView = useCallback((ref: React.RefObject<HTMLDivElement>) => {

src/hooks/useSubtitleService.ts

@@ -12,11 +12,12 @@ import {
   setSegments,
   setTitle,
   setTotalHeight,
+  setUrl,
 } from '../redux/envReducer'
 import {EventBusContext} from '../Router'
-import {EVENT_EXPAND, TOTAL_HEIGHT_MAX, TOTAL_HEIGHT_MIN, WORDS_DEFAULT, WORDS_MAX, WORDS_MIN} 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是单例，类似后端的服务概念
@@ -46,6 +47,7 @@ const useSubtitleService = () => {
 
       if (data.type === 'setVideoInfo') {
         dispatch(setInfos(data.infos))
+        dispatch(setUrl(data.url))
         dispatch(setTitle(data.title))
         console.debug('video title: ', data.title)
       }
@@ -94,7 +96,7 @@ const useSubtitleService = () => {
         type: EVENT_EXPAND
       })
     }
-  }, [data, eventBus])
+  }, [data, eventBus, infos])
 
   // 当前未展示 & (未折叠 | 自动展开) & 有列表 => 展示第一个
   useEffect(() => {
@@ -156,8 +158,15 @@ const useSubtitleService = () => {
     const items = data?.body
     if (items != null) {
       if (envData.summarizeEnable) { // 分段
-        let size = envData.words??WORDS_DEFAULT
-        size = Math.min(Math.max(size, WORDS_MIN), WORDS_MAX)
+        let size = envData.words
+        if (!size) { // 默认
+          if (envData.aiType === 'gemini') {
+            size = GEMINI_TOKENS*WORDS_RATE
+          } else {
+            size = getModelMaxTokens(envData)*WORDS_RATE
+          }
+        }
+        size = Math.max(size, WORDS_MIN)
 
         segments = []
         let transcriptItems: TranscriptItem[] = []
@@ -191,7 +200,7 @@ const useSubtitleService = () => {
       }
     }
     dispatch(setSegments(segments))
-  }, [data?.body, dispatch, envData.summarizeEnable, envData.words])
+  }, [data?.body, dispatch, envData])
 
   // 每秒更新当前视频时间
   useInterval(() => {

src/hooks/useTranslate.ts

@@ -4,6 +4,9 @@ import {
   addTaskId,
   addTransResults,
   delTaskId,
+  setAskContent,
+  setAskError,
+  setAskStatus,
   setLastSummarizeTime,
   setLastTransTime,
   setSummaryContent,
@@ -13,8 +16,8 @@ import {
 import {
   LANGUAGE_DEFAULT,
   LANGUAGES_MAP,
-  MODEL_DEFAULT,
   PROMPT_DEFAULTS,
+  PROMPT_TYPE_ASK,
   PROMPT_TYPE_TRANSLATE,
   SUMMARIZE_LANGUAGE_DEFAULT,
   SUMMARIZE_THRESHOLD,
@@ -24,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 = () => {
@@ -82,23 +85,39 @@ const useTranslate = () => {
         prompt = prompt.replaceAll('{{subtitles}}', lineStr)
 
         const taskDef: TaskDef = {
-          type: 'chatComplete',
+          type: envData.aiType === 'gemini'?'geminiChatComplete':'chatComplete',
           serverUrl: envData.serverUrl,
-          data: {
-            model: envData.model??MODEL_DEFAULT,
-            messages: [
-              {
-                role: 'user',
-                content: prompt,
+          data: envData.aiType === 'gemini'
+            ?{
+                contents: [
+                  {
+                    parts: [
+                      {
+                        text: prompt
+                      }
+                    ]
+                  }
+                ],
+                generationConfig: {
+                  maxOutputTokens: 2048
+                }
               }
-            ],
-            temperature: 0,
-            n: 1,
-            stream: false,
-          },
+            :{
+                model: getModel(envData),
+                messages: [
+                  {
+                    role: 'user',
+                    content: prompt,
+                  }
+                ],
+                temperature: 0.25,
+                n: 1,
+                stream: false,
+              },
           extra: {
             type: 'translate',
             apiKey: envData.apiKey,
+            geminiApiKey: envData.geminiApiKey,
             startIdx,
             size: lines.length,
           }
@@ -117,10 +136,10 @@ const useTranslate = () => {
         dispatch(addTaskId(task.id))
       }
     }
-  }, [data?.body, dispatch, envData.apiKey, envData.fetchAmount, envData.serverUrl, envData.prompts, title, language.name])
+  }, [data?.body, envData, language.name, title, dispatch])
 
   const addSummarizeTask = useCallback(async (type: SummaryType, segment: Segment) => {
-    if (segment.text.length >= SUMMARIZE_THRESHOLD && envData.apiKey) {
+    if (segment.text.length >= SUMMARIZE_THRESHOLD) {
       let subtitles = ''
       for (const item of segment.items) {
         subtitles += formatTime(item.from) + ' ' + item.content + '\n'
@@ -135,25 +154,41 @@ const useTranslate = () => {
       prompt = prompt.replaceAll('{{segment}}', segment.text)
 
       const taskDef: TaskDef = {
-        type: 'chatComplete',
+        type: envData.aiType === 'gemini'?'geminiChatComplete':'chatComplete',
         serverUrl: envData.serverUrl,
-        data: {
-          model: envData.model??MODEL_DEFAULT,
-          messages: [
-            {
-              role: 'user',
-              content: prompt,
+        data: envData.aiType === 'gemini'
+          ?{
+              contents: [
+                {
+                  parts: [
+                    {
+                      text: prompt
+                    }
+                  ]
+                }
+              ],
+              generationConfig: {
+                maxOutputTokens: 2048
+              }
             }
-          ],
-          temperature: 0,
-          n: 1,
-          stream: false,
-        },
+          :{
+              model: getModel(envData),
+              messages: [
+                {
+                  role: 'user',
+                  content: prompt,
+                }
+              ],
+              temperature: 0.5,
+              n: 1,
+              stream: false,
+            },
         extra: {
           type: 'summarize',
           summaryType: type,
           startIdx: segment.startIdx,
           apiKey: envData.apiKey,
+          geminiApiKey: envData.geminiApiKey,
         }
       }
       console.debug('addSummarizeTask', taskDef)
@@ -162,7 +197,60 @@ const useTranslate = () => {
       const task = await chrome.runtime.sendMessage({type: 'addTask', taskDef})
       dispatch(addTaskId(task.id))
     }
-  }, [dispatch, envData.apiKey, envData.prompts, envData.serverUrl, summarizeLanguage.name, title])
+  }, [dispatch, envData, summarizeLanguage.name, title])
+
+  const addAskTask = useCallback(async (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
+      prompt = prompt.replaceAll('{{language}}', summarizeLanguage.name)
+      prompt = prompt.replaceAll('{{title}}', title??'')
+      prompt = prompt.replaceAll('{{segment}}', segment.text)
+      prompt = prompt.replaceAll('{{question}}', question)
+
+      const taskDef: TaskDef = {
+        type: envData.aiType === 'gemini'?'geminiChatComplete':'chatComplete',
+        serverUrl: envData.serverUrl,
+        data: envData.aiType === 'gemini'
+          ?{
+              contents: [
+                {
+                  parts: [
+                    {
+                      text: prompt
+                    }
+                  ]
+                }
+              ],
+              generationConfig: {
+                maxOutputTokens: 2048
+              }
+            }
+          :{
+              model: getModel(envData),
+              messages: [
+                {
+                  role: 'user',
+                  content: prompt,
+                }
+              ],
+              temperature: 0.5,
+              n: 1,
+              stream: false,
+            },
+        extra: {
+          type: 'ask',
+          // startIdx: segment.startIdx,
+          apiKey: envData.apiKey,
+          geminiApiKey: envData.geminiApiKey,
+        }
+      }
+      console.debug('addAskTask', taskDef)
+      dispatch(setAskStatus({status: 'pending'}))
+      const task = await chrome.runtime.sendMessage({type: 'addTask', taskDef})
+      dispatch(addTaskId(task.id))
+    }
+  }, [dispatch, envData, summarizeLanguage.name, title])
 
   const handleTranslate = useMemoizedFn((task: Task, content: string) => {
     let map: {[key: string]: string} = {}
@@ -215,13 +303,20 @@ const useTranslate = () => {
     console.debug('setSummary', task.def.extra.startIdx, summaryType, obj, task.error)
   })
 
+  const handleAsk = useMemoizedFn((task: Task, content?: string) => {
+    dispatch(setAskContent({content}))
+    dispatch(setAskStatus({status: 'done'}))
+    dispatch(setAskError({error: task.error}))
+    console.debug('setAsk', content, task.error)
+  })
+
   const getTask = useCallback(async (taskId: string) => {
     const taskResp = await chrome.runtime.sendMessage({type: 'getTask', taskId})
     if (taskResp.code === 'ok') {
       console.debug('getTask', taskResp.task)
       const task: Task = taskResp.task
       const taskType: string | undefined = task.def.extra?.type
-      const content = task.resp?.choices?.[0]?.message?.content?.trim()
+      const content = envData.aiType === 'gemini'?task.resp?.candidates[0]?.content?.parts[0]?.text?.trim():task.resp?.choices?.[0]?.message?.content?.trim()
       if (task.status === 'done') {
         // 异常提示
         if (task.error) {
@@ -234,14 +329,16 @@ const useTranslate = () => {
           handleTranslate(task, content)
         } else if (taskType === 'summarize') { // 总结
           handleSummarize(task, content)
+        } else if (taskType === 'ask') { // 总结
+          handleAsk(task, content)
         }
       }
     } else {
       dispatch(delTaskId(taskId))
     }
-  }, [dispatch, handleSummarize, handleTranslate])
+  }, [dispatch, envData.aiType, handleAsk, handleSummarize, handleTranslate])
 
-  return {getFetch, getTask, addTask, addSummarizeTask}
+  return {getFetch, getTask, addTask, addSummarizeTask, addAskTask}
 }
 
 export default useTranslate

src/redux/envReducer.ts

@@ -1,7 +1,7 @@
 import {createSlice, PayloadAction} from '@reduxjs/toolkit'
 import {find} 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
@@ -17,7 +17,6 @@ interface EnvState {
   autoScroll?: boolean
   checkAutoScroll?: boolean
   curOffsetTop?: number
-  compact?: boolean // 是否紧凑视图
   floatKeyPointsSegIdx?: number // segment的startIdx
 
   noVideo?: boolean
@@ -25,39 +24,55 @@ interface EnvState {
   curIdx?: number // 从0开始
   needScroll?: boolean
   currentTime?: number
-  downloadType?: string
   infos?: any[]
   curInfo?: any
   curFetched?: boolean
   data?: Transcript
   uploadedTranscript?: Transcript
   segments?: Segment[]
+  url?: string
   title?: string
 
   taskIds?: string[]
-  transResults: {[key: number]: TransResult}
+  transResults: { [key: number]: TransResult }
   lastTransTime?: number
   lastSummarizeTime?: number
+
+  // ask
+  askFold?: boolean
+  askQuestion?: string
+  askStatus: SummaryStatus
+  askError?: string
+  askContent?: string
+
+  searchText: string
+  searchResult: Set<number>
 }
 
 const initialState: EnvState = {
   envData: {
-    serverUrl: SERVER_URL_OPENAI,
+    serverUrl: DEFAULT_SERVER_URL_OPENAI,
     translateEnable: true,
     summarizeEnable: 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,
+  currentTime: import.meta.env.VITE_ENV === 'web-dev' ? 30 : undefined,
   envReady: false,
   tempReady: false,
   fold: true,
-  data: import.meta.env.VITE_ENV === 'web-dev'? getDevData(): undefined,
+  data: import.meta.env.VITE_ENV === 'web-dev' ? getDevData() : undefined,
   transResults: {},
+
+  searchText: '',
+  searchResult: new Set(),
 }
 
 export const slice = createSlice({
@@ -73,7 +88,7 @@ export const slice = createSlice({
     setEnvReady: (state) => {
       state.envReady = true
     },
-    setTempData: (state, action: PayloadAction<TempData>) => {
+    setTempData: (state, action: PayloadAction<Partial<TempData>>) => {
       state.tempData = {
         ...state.tempData,
         ...action.payload,
@@ -82,15 +97,18 @@ export const slice = createSlice({
     setTempReady: (state) => {
       state.tempReady = true
     },
+    setSearchText: (state, action: PayloadAction<string>) => {
+      state.searchText = action.payload
+    },
+    setSearchResult: (state, action: PayloadAction<Set<number>>) => {
+      state.searchResult = action.payload
+    },
     setFloatKeyPointsSegIdx: (state, action: PayloadAction<number | undefined>) => {
       state.floatKeyPointsSegIdx = action.payload
     },
     setFoldAll: (state, action: PayloadAction<boolean>) => {
       state.foldAll = action.payload
     },
-    setCompact: (state, action: PayloadAction<boolean>) => {
-      state.compact = action.payload
-    },
     setPage: (state, action: PayloadAction<string | undefined>) => {
       state.page = action.payload
     },
@@ -107,12 +125,12 @@ export const slice = createSlice({
       state.lastSummarizeTime = action.payload
     },
     addTaskId: (state, action: PayloadAction<string>) => {
-      state.taskIds = [...(state.taskIds??[]), action.payload]
+      state.taskIds = [...(state.taskIds ?? []), action.payload]
     },
     delTaskId: (state, action: PayloadAction<string>) => {
       state.taskIds = state.taskIds?.filter(id => id !== action.payload)
     },
-    addTransResults: (state, action: PayloadAction<{[key: number]: TransResult}>) => {
+    addTransResults: (state, action: PayloadAction<{ [key: number]: TransResult }>) => {
       // 不要覆盖TransResult里code为200的
       for (const payloadKey in action.payload) {
         const payloadItem = action.payload[payloadKey]
@@ -186,6 +204,27 @@ export const slice = createSlice({
         }
       }
     },
+    setAskFold: (state, action: PayloadAction<boolean>) => {
+      state.askFold = action.payload
+    },
+    setAskQuestion: (state, action: PayloadAction<string | undefined>) => {
+      state.askQuestion = 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
+    },
     setSegmentFold: (state, action: PayloadAction<{
       segmentStartIdx: number
       fold: boolean
@@ -216,15 +255,15 @@ export const slice = createSlice({
     setNoVideo: (state, action: PayloadAction<boolean>) => {
       state.noVideo = action.payload
     },
-    setDownloadType: (state, action: PayloadAction<string>) => {
-      state.downloadType = action.payload
-    },
     setNeedScroll: (state, action: PayloadAction<boolean>) => {
       state.needScroll = action.payload
     },
     setCurrentTime: (state, action: PayloadAction<number | undefined>) => {
       state.currentTime = action.payload
     },
+    setUrl: (state, action: PayloadAction<string | undefined>) => {
+      state.url = action.payload
+    },
     setTitle: (state, action: PayloadAction<string | undefined>) => {
       state.title = action.payload
     },
@@ -252,6 +291,50 @@ export const slice = createSlice({
   },
 })
 
-export const { setTempReady, setTempData, setUploadedTranscript, setTotalHeight, setCheckAutoScroll, setCurOffsetTop, setFloatKeyPointsSegIdx, setFoldAll, setCompact, setSegmentFold, setSummaryContent, setSummaryStatus, setSummaryError, setTitle, setSegments, setLastSummarizeTime, setPage, setLastTransTime, clearTransResults, addTransResults, addTaskId, delTaskId, setTaskIds, setDownloadType, setAutoTranslate, setAutoScroll, setNoVideo, setNeedScroll, setCurIdx, setEnvData, setEnvReady, setCurrentTime, setInfos, setCurInfo, setCurFetched, setData, setFold } = slice.actions
+export const {
+  setUrl,
+  setAskFold,
+  setAskQuestion,
+  setAskStatus,
+  setAskError,
+  setAskContent,
+  setTempReady,
+  setTempData,
+  setUploadedTranscript,
+  setTotalHeight,
+  setCheckAutoScroll,
+  setCurOffsetTop,
+  setFloatKeyPointsSegIdx,
+  setFoldAll,
+  setSegmentFold,
+  setSummaryContent,
+  setSummaryStatus,
+  setSummaryError,
+  setTitle,
+  setSegments,
+  setLastSummarizeTime,
+  setPage,
+  setLastTransTime,
+  clearTransResults,
+  addTransResults,
+  addTaskId,
+  delTaskId,
+  setTaskIds,
+  setAutoTranslate,
+  setAutoScroll,
+  setNoVideo,
+  setNeedScroll,
+  setCurIdx,
+  setEnvData,
+  setEnvReady,
+  setCurrentTime,
+  setInfos,
+  setCurInfo,
+  setCurFetched,
+  setData,
+  setFold,
+  setSearchText,
+  setSearchResult,
+} = slice.actions
 
 export default slice.reducer

src/typings.d.ts

@@ -1,9 +1,17 @@
 interface EnvData {
   autoExpand?: boolean
   flagDot?: boolean
+
+  aiType?: 'openai' | 'gemini'
+  // openai
   apiKey?: string
   serverUrl?: string
   model?: string
+  customModel?: string
+  customModelTokens?: number
+  // gemini
+  geminiApiKey?: string
+
   translateEnable?: boolean
   language?: string
   hideOnDisableAutoTranslate?: boolean
@@ -16,6 +24,13 @@ interface EnvData {
   theme?: 'system' | 'light' | 'dark'
   fontSize?: 'normal' | 'large'
 
+  // search
+  searchEnabled?: boolean
+  cnSearchEnabled?: boolean
+
+  // ask
+  askEnabled?: boolean
+
   prompts?: {
     [key: string]: string
   }
@@ -23,10 +38,12 @@ interface EnvData {
 
 interface TempData {
   curSummaryType: SummaryType
+  downloadType?: string
+  compact?: boolean // 是否紧凑视图
 }
 
 interface TaskDef {
-  type: 'chatComplete'
+  type: 'chatComplete' | 'geminiChatComplete'
   serverUrl?: string
   data: any
   extra?: any

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'
@@ -123,6 +123,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) {
@@ -253,7 +269,15 @@ export const extractJsonObject = (content: string) => {
   const start = content.indexOf('```')
   const end = content.lastIndexOf('```')
   if (start >= 0 && end >= 0) {
-    content = content.slice(start + 3, end)
+    if (start === end) { // 异常情况
+      if (content.startsWith('```')) {
+        content = content.slice(3)
+      } else {
+        content = content.slice(0, -3)
+      }
+    } else {
+      content = content.slice(start + 3, end)
+    }
   }
   // get content between { and }
   const start2 = content.indexOf('{')
@@ -269,7 +293,15 @@ export const extractJsonArray = (content: string) => {
   const start = content.indexOf('```')
   const end = content.lastIndexOf('```')
   if (start >= 0 && end >= 0) {
-    content = content.slice(start + 3, end)
+    if (start === end) { // 异常情况
+      if (content.startsWith('```')) {
+        content = content.slice(3)
+      } else {
+        content = content.slice(0, -3)
+      }
+    } else {
+      content = content.slice(start + 3, end)
+    }
   }
   // get content between [ and ]
   const start3 = content.indexOf('[')

src/util/pinyin_util.ts

@@ -0,0 +1,125 @@
+import pinyin from 'tiny-pinyin'
+import {uniq} from 'lodash-es'
+
+/**
+ * pinyin的返回结果
+ */
+interface Ret {
+  type: 1 | 2 | 3
+  source: string
+  target: string
+}
+
+interface Phase {
+  pinyin: boolean
+  list: Ret[]
+}
+
+/**
+ * 获取Phase列表(中英文分离列表)
+ */
+export const getPhases = (str: string) => {
+  const rets = pinyin.parse(str)
+
+  const phases: Phase[] = []
+  let curPinyin_ = false
+  let curPhase_: Ret[] = []
+  const addCurrentPhase = () => {
+    if (curPhase_.length > 0) {
+      phases.push({
+        pinyin: curPinyin_,
+        list: curPhase_,
+      })
+    }
+  }
+
+  // 遍历rets
+  for (const ret of rets) {
+    const newPinyin = ret.type === 2
+    // 如果跟旧的pinyin类型不同，先保存旧的
+    if (newPinyin !== curPinyin_) {
+      addCurrentPhase()
+      // 重置
+      curPinyin_ = newPinyin
+      curPhase_ = []
+    }
+    // 添加新的
+    curPhase_.push(ret)
+  }
+  // 最后一个
+  addCurrentPhase()
+
+  return phases
+}
+
+/**
+ * 获取原子字符列表，如 tool tab 汉 字
+ */
+export const getAtoms = (str: string) => {
+  const phases = getPhases(str)
+
+  const atoms = []
+  for (const phase of phases) {
+    if (phase.pinyin) { // all words
+      atoms.push(...phase.list.map(e => e.source).filter(e => e))
+    } else { // split
+      atoms.push(...(phase.list.map((e: any) => e.source).join('').match(/\w+/g)??[]).filter((e: string) => e))
+    }
+  }
+
+  return atoms
+}
+
+const fixStrs = (atoms: string[]) => {
+  // 小写
+  atoms = atoms.map(e => e.toLowerCase())
+
+  // 去重
+  atoms = uniq(atoms)
+
+  // 返回
+  return atoms
+}
+
+export const getWords = (str: string) => {
+  // 获取全部原子字符
+  const atoms = getAtoms(str)
+  // fix
+  return fixStrs(atoms)
+}
+
+/**
+ * 我的世界Minecraft => ['wodeshijie', 'deshijie', 'shijie', 'jie'] + ['wdsj', 'dsj', 'sj', 'j']
+ *
+ * 1. only handle pinyin, other is ignored
+ */
+export const getWordsPinyin = (str: string) => {
+  let result: string[] = []
+
+  for (const phase of getPhases(str)) {
+    // only handle pinyin
+    if (phase.pinyin) { // 我的世界
+      // 获取全部原子字符
+      // 我的世界 => [我, 的, 世, 界]
+      const atoms: string[] = []
+      atoms.push(...phase.list.map(e => e.source).filter(e => e))
+      // 获取全部子串
+      // [我, 的, 世, 界] => [我的世界, 的世界, 世界, 界]
+      const allSubStr = []
+      for (let i = 0; i < atoms.length; i++) {
+        allSubStr.push(atoms.slice(i).join(''))
+      }
+      // pinyin version
+      const pinyinList = allSubStr.map((e: string) => pinyin.convertToPinyin(e))
+      result.push(...pinyinList)
+      // pinyin first version
+      const pinyinFirstList = allSubStr.map((e: string) => pinyin.parse(e).map((e: any) => e.type === 2?e.target[0]:null).filter(e => !!e).join(''))
+      result.push(...pinyinFirstList)
+    }
+  }
+
+  // fix
+  result = fixStrs(result)
+
+  return result
+}

src/util/search.ts

@@ -0,0 +1,65 @@
+import * as JsSearch from 'js-search'
+import {uniq} from 'lodash-es'
+import {getWords, getWordsPinyin} from './pinyin_util'
+
+const tokenize = (maxLength: number, content: string, options?: SearchOptions) => {
+  const result: string[] = []
+
+  // 最大长度
+  if (content.length > maxLength) {
+    content = content.substring(0, maxLength)
+  }
+  result.push(...getWords(content))
+  // check cn
+  if (options?.cnSearchEnabled) {
+    result.push(...getWordsPinyin(content))
+  }
+
+  // console.debug('[Search] tokenize:', str, '=>', result)
+
+  return uniq(result)
+}
+
+export interface SearchOptions {
+  cnSearchEnabled?: boolean
+}
+
+export const Search = (uidFieldName: string, index: string, maxLength: number, options?: SearchOptions) => {
+  let searchRef: JsSearch.Search | undefined// 搜索器
+
+  /**
+   * 重置索引
+   */
+  const reset = (documents?: Object[]) => {
+    // 搜索器
+    searchRef = new JsSearch.Search(uidFieldName)
+    searchRef.tokenizer = {
+      tokenize: (str) => {
+        return tokenize(maxLength, str, options)
+      }
+    }
+    searchRef.addIndex(index)
+
+    // 检测添加文档
+    if (documents != null) {
+      searchRef.addDocuments(documents)
+    }
+  }
+
+  /**
+   * 添加文档
+   */
+  const add = (document: Object) => {
+    searchRef?.addDocument(document)
+  }
+
+  /**
+   * 搜索
+   * @return 未去重
+   */
+  const search = (text: string) => {
+    return searchRef?.search(text.toLowerCase())
+  }
+
+  return {reset, add, search}
+}

tailwind.config.cjs

@@ -18,11 +18,13 @@ module.exports = {
       light: {
         ...require("daisyui/src/colors/themes")["[data-theme=light]"],
         "--rounded-btn": "0.15rem",
+        "primary": "rgb(0, 174, 236)",
       },
     }, {
       dark: {
         ...require("daisyui/src/colors/themes")["[data-theme=dark]"],
         "--rounded-btn": "0.15rem",
+        "primary": "rgb(0, 174, 236)",
       }
     }],
     base: true,

vite.config.ts.timestamp-1705728659971.mjs

@@ -0,0 +1,66 @@
+// vite.config.ts
+import { defineConfig } from "vite";
+import react from "@vitejs/plugin-react";
+import { visualizer } from "rollup-plugin-visualizer";
+import { crx } from "@crxjs/vite-plugin";
+
+// manifest.json
+var manifest_default = {
+  name: "\u54D4\u54E9\u54D4\u54E9\u5B57\u5E55\u5217\u8868",
+  description: "\u663E\u793AB\u7AD9\u89C6\u9891\u7684\u5B57\u5E55\u5217\u8868,\u53EF\u70B9\u51FB\u8DF3\u8F6C\u4E0E\u4E0B\u8F7D\u5B57\u5E55,\u5E76\u652F\u6301\u7FFB\u8BD1\u548C\u603B\u7ED3\u5B57\u5E55!",
+  version: "1.7.11",
+  manifest_version: 3,
+  permissions: [
+    "storage"
+  ],
+  background: {
+    service_worker: "src/chrome/background.ts"
+  },
+  content_scripts: [
+    {
+      matches: ["https://www.bilibili.com/video/*", "https://www.bilibili.com/list/*"],
+      js: ["src/chrome/content-script.cjs"]
+    }
+  ],
+  icons: {
+    "16": "favicon-16x16.png",
+    "32": "favicon-32x32.png",
+    "48": "favicon-48x48.png",
+    "128": "favicon-128x128.png"
+  },
+  action: {
+    default_popup: "index.html",
+    default_icon: {
+      "16": "favicon-16x16.png",
+      "32": "favicon-32x32.png",
+      "48": "favicon-48x48.png",
+      "128": "favicon-128x128.png"
+    }
+  }
+};
+
+// vite.config.ts
+var vite_config_default = ({ mode }) => {
+  const plugins = [
+    react(),
+    visualizer()
+  ];
+  if (mode === "production_chrome") {
+    plugins.push(crx({
+      manifest: manifest_default
+    }));
+  }
+  return defineConfig({
+    base: "/",
+    plugins,
+    css: {
+      modules: {
+        localsConvention: "camelCase"
+      }
+    }
+  });
+};
+export {
+  vite_config_default as default
+};
+//# sourceMappingURL=data:application/json;base64,ewogICJ2ZXJzaW9uIjogMywKICAic291cmNlcyI6IFsidml0ZS5jb25maWcudHMiXSwKICAic291cmNlc0NvbnRlbnQiOiBbImNvbnN0IF9fdml0ZV9pbmplY3RlZF9vcmlnaW5hbF9kaXJuYW1lID0gXCIvVXNlcnMvZmVuZ3l1ZXhpYW5nL2RhdGEvcHJvamVjdC9iaWxpYmlsaS1zdWJ0aXRsZVwiO2NvbnN0IF9fdml0ZV9pbmplY3RlZF9vcmlnaW5hbF9maWxlbmFtZSA9IFwiL1VzZXJzL2Zlbmd5dWV4aWFuZy9kYXRhL3Byb2plY3QvYmlsaWJpbGktc3VidGl0bGUvdml0ZS5jb25maWcudHNcIjtjb25zdCBfX3ZpdGVfaW5qZWN0ZWRfb3JpZ2luYWxfaW1wb3J0X21ldGFfdXJsID0gXCJmaWxlOi8vL1VzZXJzL2Zlbmd5dWV4aWFuZy9kYXRhL3Byb2plY3QvYmlsaWJpbGktc3VidGl0bGUvdml0ZS5jb25maWcudHNcIjtpbXBvcnQge2RlZmluZUNvbmZpZywgUGx1Z2luT3B0aW9ufSBmcm9tICd2aXRlJ1xuaW1wb3J0IHJlYWN0IGZyb20gJ0B2aXRlanMvcGx1Z2luLXJlYWN0J1xuaW1wb3J0IHt2aXN1YWxpemVyfSBmcm9tIFwicm9sbHVwLXBsdWdpbi12aXN1YWxpemVyXCI7XG5pbXBvcnQge2NyeH0gZnJvbSAnQGNyeGpzL3ZpdGUtcGx1Z2luJ1xuLy8gQHRzLWlnbm9yZVxuaW1wb3J0IG1hbmlmZXN0IGZyb20gJy4vbWFuaWZlc3QuanNvbidcblxuLy8gaHR0cHM6Ly92aXRlanMuZGV2L2NvbmZpZy9cbmV4cG9ydCBkZWZhdWx0ICh7bW9kZX0pID0+IHtcbiAgY29uc3QgcGx1Z2lucyA9IFtcbiAgICByZWFjdCgpLFxuICAgIHZpc3VhbGl6ZXIoKSBhcyBQbHVnaW5PcHRpb24sXG4gIF1cbiAgLy8gQHRzLWlnbm9yZVxuICBpZiAobW9kZSA9PT0gJ3Byb2R1Y3Rpb25fY2hyb21lJykge1xuICAgIHBsdWdpbnMucHVzaChjcngoe1xuICAgICAgbWFuaWZlc3QsXG4gICAgfSkpXG4gIH1cbiAgcmV0dXJuIGRlZmluZUNvbmZpZyh7XG4gICAgYmFzZTogJy8nLFxuICAgIHBsdWdpbnMsXG4gICAgY3NzOiB7XG4gICAgICBtb2R1bGVzOiB7XG4gICAgICAgIGxvY2Fsc0NvbnZlbnRpb246IFwiY2FtZWxDYXNlXCJcbiAgICAgIH1cbiAgICB9XG4gIH0pXG59XG4iXSwKICAibWFwcGluZ3MiOiAiO0FBQXdVLFNBQVEsb0JBQWlDO0FBQ2pYLE9BQU8sV0FBVztBQUNsQixTQUFRLGtCQUFpQjtBQUN6QixTQUFRLFdBQVU7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7O0FBS2xCLElBQU8sc0JBQVEsQ0FBQyxFQUFDLEtBQUksTUFBTTtBQUN6QixRQUFNLFVBQVU7QUFBQSxJQUNkLE1BQU07QUFBQSxJQUNOLFdBQVc7QUFBQSxFQUNiO0FBRUEsTUFBSSxTQUFTLHFCQUFxQjtBQUNoQyxZQUFRLEtBQUssSUFBSTtBQUFBLE1BQ2Y7QUFBQSxJQUNGLENBQUMsQ0FBQztBQUFBLEVBQ0o7QUFDQSxTQUFPLGFBQWE7QUFBQSxJQUNsQixNQUFNO0FBQUEsSUFDTjtBQUFBLElBQ0EsS0FBSztBQUFBLE1BQ0gsU0FBUztBQUFBLFFBQ1Asa0JBQWtCO0FBQUEsTUFDcEI7QUFBQSxJQUNGO0FBQUEsRUFDRixDQUFDO0FBQ0g7IiwKICAibmFtZXMiOiBbXQp9Cg==