chore: release 1.9.0

manifest.json

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

package.json

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

src/biz/Body.tsx

@@ -1,5 +1,7 @@
-import React, {useCallback, useEffect, useRef} from 'react'
+import React, {useCallback, useEffect, useMemo, useRef} from 'react'
 import {
+  setAskFold,
+  setAskQuestion,
   setAutoScroll,
   setAutoTranslate,
   setCheckAutoScroll,
@@ -14,27 +16,33 @@ import {useAppDispatch, useAppSelector} from '../hooks/redux'
 import {
   AiOutlineAim,
   AiOutlineCloseCircle,
+  BsDashSquare,
+  BsPlusSquare,
+  FaGripfire,
+  FaQuestion,
   FaRegArrowAltCircleDown,
   IoWarning,
   MdExpand,
-  RiFileCopy2Line,
   RiTranslate
 } from 'react-icons/all'
 import classNames from 'classnames'
 import toast from 'react-hot-toast'
 import SegmentCard from './SegmentCard'
 import {
+  ASK_ENABLED_DEFAULT,
   HEADER_HEIGHT,
   PAGE_SETTINGS,
+  RECOMMEND_HEIGHT,
   SEARCH_BAR_HEIGHT,
   SUMMARIZE_ALL_THRESHOLD,
-  SUMMARIZE_TYPES,
   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'
 
 const Body = () => {
   const dispatch = useAppDispatch()
@@ -48,7 +56,13 @@ const Body = () => {
   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)
@@ -56,7 +70,27 @@ 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(setTempData({
@@ -102,6 +136,7 @@ const Body = () => {
 
   const onFoldAll = useCallback(() => {
     dispatch(setFoldAll(!foldAll))
+    dispatch(setAskFold(!foldAll))
     for (const segment of segments ?? []) {
       dispatch(setSegmentFold({
         segmentStartIdx: segment.startIdx,
@@ -149,10 +184,33 @@ const Body = () => {
     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])
+
   // 自动滚动
   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))
@@ -193,8 +251,8 @@ const Body = () => {
     </div>
 
     {/* search */}
-    {envData.searchEnabled && <div className='px-2 py-1 flex flex-col relative'>
+    {showSearchInput && <div className='px-2 py-1 flex flex-col relative'>
-      <input type='text' className='input input-xs bg-base-200' placeholder='搜索字幕内容' value={searchText} onChange={onSearchTextChange}/>
+      <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>}
 
@@ -210,56 +268,157 @@ const Body = () => {
     <div ref={bodyRef} onWheel={onWheel}
          className={classNames('flex flex-col gap-1.5 overflow-y-auto select-text scroll-smooth', floatKeyPointsSegIdx != null && 'pb-[100px]')}
          style={{
-           height: `${totalHeight - HEADER_HEIGHT - TITLE_HEIGHT - (envData.searchEnabled ? SEARCH_BAR_HEIGHT : 0)}px`
+           height: `${totalHeight - HEADER_HEIGHT - TITLE_HEIGHT - RECOMMEND_HEIGHT - (showSearchInput ? SEARCH_BAR_HEIGHT : 0)}px`
          }}
     >
+      {/* ask */}
+      {(envData.askEnabled ?? ASK_ENABLED_DEFAULT) && (searchText || askQuestion) &&
+        <div className='shadow bg-base-200 my-0.5 mx-1.5 p-1.5 rounded flex flex-col justify-center items-center'>
+          <div className='w-full relative flex justify-center min-h-[20px]'>
+            <div className='absolute left-0 top-0 bottom-0 text-xs select-none flex-center desc'>
+              {askFold
+                ? <BsPlusSquare className='cursor-pointer' onClick={onAskFold}/> :
+                <BsDashSquare className='cursor-pointer' onClick={onAskFold}/>}
+            </div>
+            <div className="tabs">
+              <a className="tab tab-lifted tab-xs tab-disabled cursor-default"></a>
+              <a className='tab tab-lifted tab-xs tab-active'><FaQuestion/>提问</a>
+              <a className="tab tab-lifted tab-xs tab-disabled cursor-default"></a>
+            </div>
+          </div>
+          {!askFold && askQuestion &&
+            <div className='link link-hover text-sm font-medium max-w-[90%]' onClick={onSetAsk}>{askQuestion}</div>}
+          {!askFold && askContent &&
+            <div className={classNames('font-medium max-w-[90%] mt-1', fontSize === 'large' ? 'text-sm' : 'text-xs')}>
+              <Markdown content={askContent}/>
+            </div>}
+          {!askFold && <button disabled={askStatus === 'pending'}
+                               className={classNames('btn btn-link btn-xs', askStatus === 'pending' && 'loading')}
+                               onClick={onAsk}>{askStatus === 'init' ? '点击提问' : (askStatus === 'pending' ? '生成中' : '重新生成')}</button>}
+          {!askFold && askStatus === 'init' && <div className='desc-lighter text-xs'>提问举例：这个视频说了什么</div>}
+          {!askFold && askError && <div className='text-xs text-error'>{askError}</div>}
+        </div>}
+
+      {/* segments */}
       {segments?.map((segment, segmentIdx) => <SegmentCard key={segment.startIdx} segment={segment}
                                                            segmentIdx={segmentIdx} bodyRef={bodyRef}/>)}
 
       {/* tip */}
-      <div className='flex flex-col items-center text-center pt-1 pb-2'>
+      {/* <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='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
+      {/*  <div className='text-sm desc px-2'>可以尝试将<span className='text-amber-600 font-semibold'>概览</span>生成的内容粘贴到<span */}
-          className='text-secondary/75 font-semibold'>视频评论</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> */}
+      {((infos == null) || infos.length === 0) && <div className='flex flex-col'>
+        <div className='flex flex-col items-center text-center py-2 mx-4'>
+          <div className='font-semibold text-accent flex items-center gap-1'><img src='/bibigpt.png'
+                                                                                  alt='BibiGPT logo'
+                                                                                  className='w-8 h-8'/>BibiGPT
+          </div>
+          <div className='text-sm px-2 desc'>这是<span className='text-amber-600 font-semibold text-base'>网页</span>版的字幕列表，支持<span
+            className='font-semibold'>任意</span>视频提取字幕总结（包括没有字幕的视频）
+          </div>
+          <div className='flex gap-2'>
+            <a title='BibiGPT' href='https://bibigpt.co/r/bilibili'
+               onClick={(e) => {
+                 e.preventDefault()
+                 openUrl('https://bibigpt.co/r/bilibili')
+               }} className='link text-sm text-accent'>✨ BibiGPT ✨</a>
+          </div>
         </div>
-        {(segments?.length ?? 0) > 0 && <button className='mt-1.5 btn btn-xs btn-info'
+        <div className='flex flex-col items-center text-center py-2 mx-4 border-t border-t-base-300'>
-                                                onClick={onCopy}>点击复制生成的{SUMMARIZE_TYPES[curSummaryType].name}<RiFileCopy2Line/>
+          <div className='font-semibold text-accent flex items-center gap-1'><img src='/youtube-caption.png'
-        </button>}
+                                                                                  alt='youtube caption logo'
-      </div>
+                                                                                  className='w-8 h-8'/>YouTube Caption
-      <div className='flex flex-col items-center text-center py-2 mx-4 border-t border-t-base-300'>
+          </div>
-        <div className='font-semibold text-accent flex items-center gap-1'><img src='/bibigpt.png'
+          <div className='text-sm px-2 desc'>这是<span className='text-amber-600 font-semibold text-base'>YouTube</span>版的字幕列表
-                                                                                alt='BibiGPT'
+          </div>
-                                                                                className='w-8 h-8'/>BibiGPT
+          <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='text-sm px-2 desc'>这是<span className='text-amber-600 font-semibold text-base'>网页</span>版的字幕列表，支持<span className='font-semibold'>任意</span>视频提取字幕总结（包括没有字幕的视频）</div>
+        <div className='flex flex-col items-center text-center py-2 mx-4 border-t border-t-base-300'>
-        <div className='flex gap-2'>
+          <div className='font-semibold text-accent flex items-center gap-1'><img src='/immersive-summary.png'
-          <a title='BibiGPT' href='https://bibigpt.co/r/bilibili'
+                                                                                  alt='Immersive Summary logo'
-             onClick={(e) => {
+                                                                                  className='w-8 h-8'/>Immersive Summary
-               e.preventDefault()
+          </div>
-               openUrl('https://bibigpt.co/r/bilibili')
+          <div className='text-sm px-2 desc'>沉浸式总结，多种方式总结网页文章。</div>
-             }} className='link text-sm text-accent'>✨ BibiGPT ✨</a>
+          <div className='flex gap-2'>
+            <a title='Chrome商店' href='https://chromewebstore.google.com/detail/mcijpllinkhflgpkggimnafkbmpiijah'
+               onClick={(e) => {
+                 e.preventDefault()
+                 openUrl('https://chromewebstore.google.com/detail/mcijpllinkhflgpkggimnafkbmpiijah')
+               }} className='link text-sm text-accent'>Chrome商店</a>
+            <a title='Crx搜搜(国内可访问)'
+               href='https://www.crxsoso.com/webstore/detail/mcijpllinkhflgpkggimnafkbmpiijah'
+               onClick={(e) => {
+                 e.preventDefault()
+                 openUrl('https://www.crxsoso.com/webstore/detail/mcijpllinkhflgpkggimnafkbmpiijah')
+               }} className='link text-sm text-accent'>Crx搜搜(国内可访问)</a>
+          </div>
         </div>
-      </div>
+      </div>}
-      <div className='flex flex-col items-center text-center py-2 mx-4 border-t border-t-base-300'>
+    </div>
-        <div className='font-semibold text-accent flex items-center gap-1'><img src='/youtube-caption.png'
+
-                                                                                alt='youtube caption'
+    {/* recommend */}
-                                                                                className='w-8 h-8'/>YouTube Caption Pro
+    <div className='p-0.5' style={{
-        </div>
+      height: `${RECOMMEND_HEIGHT}px`
-        <div className='text-sm px-2 desc'>这是<span className='text-amber-600 font-semibold text-base'>YouTube</span>版的字幕列表
+    }}>
-        </div>
+      {recommendIdx === 0 && <div className='flex items-center gap-1.5 rounded shadow-sm bg-base-200/10'>
-        <div className='flex gap-2'>
+        <a className='link link-accent link-hover font-semibold text-sm flex items-center' onClick={(e) => {
-          <a title='Chrome商店' href='https://chromewebstore.google.com/detail/fiaeclpicddpifeflpmlgmbjgaedladf'
+          e.preventDefault()
-             onClick={(e) => {
+          openUrl('https://bibigpt.co/r/bilibili')
-               e.preventDefault()
+        }}><img src='/bibigpt.png'
-               openUrl('https://chromewebstore.google.com/detail/fiaeclpicddpifeflpmlgmbjgaedladf')
+                alt='BibiGPT logo'
-             }} className='link text-sm text-accent'>Chrome商店</a>
+                className='w-8 h-8'/>✨ BibiGPT ✨</a>
-          <a title='Edge商店' href='https://microsoftedge.microsoft.com/addons/detail/galeejdehabppfgooagmkclpppnbccpc'
+        <span className='text-sm desc'>支持任意视频的网页版总结。</span>
-             onClick={e => {
+      </div>}
-               e.preventDefault()
+      {recommendIdx === 1 && <div className='flex items-center gap-1 rounded shadow-sm bg-base-200/10'>
-               openUrl('https://microsoftedge.microsoft.com/addons/detail/galeejdehabppfgooagmkclpppnbccpc')
+        <a className='link link-accent link-hover font-semibold text-sm flex items-center' onClick={(e) => {
-             }} className='link text-sm text-accent'>Edge商店</a>
+          e.preventDefault()
-        </div>
+          openUrl('https://chromewebstore.google.com/detail/fiaeclpicddpifeflpmlgmbjgaedladf')
-      </div>
+        }}><img src='/youtube-caption.png'
+                alt='youtube caption logo'
+                className='w-8 h-8'/>YouTube Caption</a>
+        <span className='text-sm desc'>YouTube版的字幕列表。</span>
+      </div>}
+      {recommendIdx === 2 && <div className='flex items-center gap-1 rounded shadow-sm bg-base-200/10'>
+        <a className='link link-accent link-hover font-semibold text-sm flex items-center' onClick={(e) => {
+          e.preventDefault()
+          openUrl('https://chromewebstore.google.com/detail/mcijpllinkhflgpkggimnafkbmpiijah')
+        }}><img src='/immersive-summary.png'
+                alt='Immersive Summary logo'
+                className='w-8 h-8'/>Immersive Summary</a>
+        <span className='text-sm desc'>沉浸式总结网页文章。</span>
+      </div>}
+      {recommendIdx === 3 && <div className='flex items-center gap-1 rounded shadow-sm bg-base-200/10'>
+        <a className='link link-accent link-hover font-semibold text-sm flex items-center' onClick={(e) => {
+          e.preventDefault()
+          openUrl('https://api.openai-up.com/register?aff=varM')
+        }}><img src='/openai-up.ico'
+                alt='Openai Up logo'
+                className='w-8 h-8'/>Openai代理</a>
+        <span className='text-sm desc flex items-center'>目前价格不到官方的6折<FaGripfire className='text-amber-600'/></span>
+      </div>}
     </div>
   </div>
 }

src/biz/MoreBtn.tsx

@@ -66,6 +66,7 @@ const MoreBtn = (props: Props) => {
   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({
@@ -261,27 +263,27 @@ const MoreBtn = (props: Props) => {
             微信公众号(IndieKKY)
           </a>
         </li>
-        <li className='hover:bg-accent'>
+        {/* <li className='hover:bg-accent'> */}
-          <a className='flex items-center' onClick={(e) => {
+        {/*  <a className='flex items-center' onClick={(e) => { */}
-            e.preventDefault()
+        {/*    e.preventDefault() */}
-            e.stopPropagation()
+        {/*    e.stopPropagation() */}
-            openUrl('https://bibigpt.co/r/bilibili')
+        {/*    openUrl('https://bibigpt.co/r/bilibili') */}
-          }}>
+        {/*  }}> */}
-            <img alt='BibiGPT' src='/bibigpt.png' className='w-[20px] h-[20px] bg-white rounded-sm p-0.5'/>
+        {/*    <img alt='BibiGPT' src='/bibigpt.png' className='w-[20px] h-[20px] bg-white rounded-sm p-0.5'/> */}
-            BibiGPT
+        {/*    BibiGPT */}
-          </a>
+        {/*  </a> */}
-        </li>
+        {/* </li> */}
-        <li className='hover:bg-accent'>
+        {/* <li className='hover:bg-accent'> */}
-          <a className='flex items-center' onClick={(e) => {
+        {/*  <a className='flex items-center' onClick={(e) => { */}
-            e.preventDefault()
+        {/*    e.preventDefault() */}
-            e.stopPropagation()
+        {/*    e.stopPropagation() */}
-            openUrl('https://chromewebstore.google.com/detail/fiaeclpicddpifeflpmlgmbjgaedladf')
+        {/*    openUrl('https://chromewebstore.google.com/detail/fiaeclpicddpifeflpmlgmbjgaedladf') */}
-          }}>
+        {/*  }}> */}
-            <img alt='youtube subtitle' src='/youtube-caption.png'
+        {/*    <img alt='youtube subtitle' src='/youtube-caption.png' */}
-                 className='w-[20px] h-[20px] bg-white rounded-sm p-0.5'/>
+        {/*         className='w-[20px] h-[20px] bg-white rounded-sm p-0.5'/> */}
-            Youtube Caption
+        {/*    Youtube Caption */}
-          </a>
+        {/*  </a> */}
-        </li>
+        {/* </li> */}
         <li className='hover:bg-accent'>
           <a className='flex items-center' onClick={(e) => {
             dispatch(setPage(PAGE_SETTINGS))

src/biz/Settings.tsx

@@ -2,23 +2,25 @@ import React, {PropsWithChildren, useCallback, useMemo, useState} from 'react'
 import {setEnvData, setPage} from '../redux/envReducer'
 import {useAppDispatch, useAppSelector} from '../hooks/redux'
 import {
+  ASK_ENABLED_DEFAULT,
+  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'
@@ -54,11 +56,12 @@ const FormItem = (props: {
 const Settings = () => {
   const dispatch = useAppDispatch()
   const envData = useAppSelector(state => state.env.envData)
-  const {value: autoExpandValue, onChange: setAutoExpandValue} = useEventChecked(envData.autoExpand)
+  // const {value: autoExpandValue, onChange: setAutoExpandValue} = useEventChecked(envData.autoExpand)
   // const {value: autoScrollValue, onChange: setAutoScrollValue} = useEventChecked(envData.autoScroll)
   const {value: translateEnableValue, onChange: setTranslateEnableValue} = useEventChecked(envData.translateEnable)
   const {value: summarizeEnableValue, onChange: setSummarizeEnableValue} = useEventChecked(envData.summarizeEnable)
   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??''})
@@ -72,7 +75,7 @@ const Settings = () => {
   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)
@@ -106,7 +109,7 @@ const Settings = () => {
 
   const onSave = useCallback(() => {
     dispatch(setEnvData({
-      autoExpand: autoExpandValue,
+      // autoExpand: autoExpandValue,
       aiType: aiTypeValue,
       apiKey: apiKeyValue,
       serverUrl: serverUrlValue,
@@ -126,10 +129,11 @@ const Settings = () => {
       prompts: promptsValue,
       searchEnabled: searchEnabledValue,
       cnSearchEnabled: cnSearchEnabledValue,
+      askEnabled: askEnabledValue,
     }))
     dispatch(setPage(PAGE_MAIN))
     toast.success('保存成功')
-  }, [dispatch, aiTypeValue, geminiApiKeyValue, autoExpandValue, apiKeyValue, serverUrlValue, modelValue, translateEnableValue, languageValue, hideOnDisableAutoTranslateValue, themeValue, transDisplayValue, summarizeEnableValue, summarizeFloatValue, summarizeLanguageValue, wordsValue, fetchAmountValue, fontSizeValue, promptsValue, searchEnabledValue, cnSearchEnabledValue])
+  }, [dispatch, aiTypeValue, apiKeyValue, serverUrlValue, modelValue, geminiApiKeyValue, translateEnableValue, languageValue, hideOnDisableAutoTranslateValue, themeValue, transDisplayValue, summarizeEnableValue, summarizeFloatValue, summarizeLanguageValue, wordsValue, fetchAmountValue, fontSizeValue, promptsValue, searchEnabledValue, cnSearchEnabledValue, askEnabledValue])
 
   const onCancel = useCallback(() => {
     dispatch(setPage(PAGE_MAIN))
@@ -188,10 +192,10 @@ const Settings = () => {
   }}>
     <div className="flex flex-col gap-3 p-2">
       <Section title='通用配置'>
-        <FormItem title='自动展开' htmlFor='autoExpand' tip='是否视频有字幕时自动展开字幕列表'>
+        {/* <FormItem title='自动展开' htmlFor='autoExpand' tip='是否视频有字幕时自动展开字幕列表'> */}
-          <input id='autoExpand' type='checkbox' className='toggle toggle-primary' checked={autoExpandValue}
+        {/*  <input id='autoExpand' type='checkbox' className='toggle toggle-primary' checked={autoExpandValue} */}
-                 onChange={setAutoExpandValue}/>
+        {/*         onChange={setAutoExpandValue}/> */}
-        </FormItem>
+        {/* </FormItem> */}
         <FormItem title='主题'>
           <div className="btn-group">
             <button onClick={onSelTheme1} className={classNames('btn btn-xs no-animation', (!themeValue || themeValue === 'system')?'btn-active':'')}>系统</button>
@@ -205,7 +209,7 @@ const Settings = () => {
             <button onClick={onSelFontSize2} className={classNames('btn btn-xs no-animation', fontSizeValue === 'large'?'btn-active':'')}>加大</button>
           </div>
         </FormItem>
-        <FormItem title='AI类型' tip='不同AI质量可能有差异'>
+        <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>
@@ -215,35 +219,41 @@ const Settings = () => {
 
       {(!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='默认使用官方地址' value={serverUrlValue}
+                 onChange={e => setServerUrlValue(e.target.value)}/>
         </FormItem>
-        <div className='flex justify-center'>
+        <div>
-          <a className='link text-xs' onClick={toggleMoreFold}>{moreFold?'点击查看说明':'点击折叠说明'}</a>
+          <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('https://api.openai.com')}
+                               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>
+        <FormItem title='模型选择' htmlFor='modelSel' tip='注意，不同模型有不同价格与token限制'>
-          <ul className='pl-3 list-decimal desc text-xs'>
+          <select id='modelSel' className="select select-sm select-bordered" value={modelValue}
-            <li>官方服务器需要科学上网才能访问</li>
+                  onChange={onChangeModelValue}>
-            <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}>
             {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>
+          <a className='link text-xs'
+             onClick={togglePromptsFold}>{promptsFold ? '点击查看提示词' : '点击折叠提示词'}</a>
         </div>
         {!promptsFold && <div>
           {PROMPT_TYPES.map((item, idx) => <FormItem key={item.type} title={<div>
@@ -252,16 +262,18 @@ const Settings = () => {
               setPromptsValue({
                 ...promptsValue,
                 // @ts-expect-error
-                [item.type]: PROMPT_DEFAULTS[item.type]??''
+                [item.type]: PROMPT_DEFAULTS[item.type] ?? ''
               })
-            }}>点击填充默认</div>
+            }}>点击填充默认
+            </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) => {
+            <textarea id={`prompt-${item.type}`} className='mt-2 textarea input-bordered w-full'
-              setPromptsValue({
+                      placeholder='留空使用默认提示词' value={promptsValue[item.type] ?? ''} onChange={(e) => {
-                ...promptsValue,
+                        setPromptsValue({
-                [item.type]: e.target.value
+                          ...promptsValue,
-              })
+                          [item.type]: e.target.value
-            }}/>
+                        })
+                      }}/>
           </FormItem>)}
         </div>}
       </Section>}
@@ -271,15 +283,14 @@ const Settings = () => {
           <input id='geminiApiKey' type='text' className='input input-sm input-bordered w-full' placeholder='xxx'
                  value={geminiApiKeyValue} onChange={onChangeGeminiApiKeyValue}/>
         </FormItem>
-        <div className='flex justify-center'>
+        <div>
-          <a className='link text-xs' onClick={toggleMoreFold}>{moreFold ? '点击查看说明' : '点击折叠说明'}</a>
+          <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>
-        {!moreFold && <div>
-          <ul className='pl-3 list-decimal desc text-xs'>
-            <li>官方网址：<a className='link' href='https://makersuite.google.com/app/apikey' target='_blank'
-                            rel="noreferrer">Google AI Studio</a> (目前免费)</li>
-          </ul>
-        </div>}
         <div className='flex justify-center'>
           <a className='link text-xs'
              onClick={togglePromptsFold}>{promptsFold ? '点击查看提示词' : '点击折叠提示词'}</a>
@@ -363,13 +374,17 @@ 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'>
         搜索配置
@@ -383,6 +398,14 @@ const Settings = () => {
                  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>
         <button className='btn btn-sm' onClick={onCancel}>取消</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,

src/chrome/openaiService.ts

@@ -1,4 +1,12 @@
-import {getServerUrl} from '../util/biz_util'
+const getServerUrl = (serverUrl?: string) => {
+  if (!serverUrl) {
+    return 'https://api.openai.com'
+  }
+  if (serverUrl.endsWith('/')) {
+    serverUrl = serverUrl.slice(0, -1)
+  }
+  return serverUrl
+}
 
 export const handleChatCompleteTask = async (task: Task) => {
   const data = task.def.data

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'
@@ -142,29 +159,37 @@ 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 ASK_ENABLED_DEFAULT = true
 export const SERVER_URL_OPENAI = 'https://api.openai.com'
-export const SERVER_URL_THIRD = 'https://op.kongkongye.com'
 
 export const MODELS = [{
   code: 'gpt-3.5-turbo',
   name: 'gpt-3.5-turbo',
+  tokens: 4096,
 }, {
   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,
 }]
-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/useSearchService.ts

@@ -21,6 +21,9 @@ const useSearchService = () => {
 
   // reset search
   useEffect(() => {
+    if (!envData.searchEnabled) {
+      return
+    }
     const startTime = Date.now()
     const docs: Document[] = []
     for (const item of data?.body??[]) {
@@ -35,13 +38,13 @@ const useSearchService = () => {
     // 日志
     const endTime = Date.now()
     console.debug(`[Search]reset ${docs.length} docs, cost ${endTime-startTime}ms`)
-  }, [data?.body, dispatch, reset])
+  }, [data?.body, dispatch, envData.searchEnabled, reset])
 
   // search text
   useEffect(() => {
     const searchResult: Set<number> = new Set()
 
-    if (searchText) {
+    if (envData.searchEnabled && searchText) {
       // @ts-expect-error
       const documents: Document[] | undefined = search(searchText)
       if (documents != null) {
@@ -52,7 +55,7 @@ const useSearchService = () => {
     }
 
     dispatch(setSearchResult(searchResult))
-  }, [dispatch, search, searchText])
+  }, [dispatch, envData.searchEnabled, search, searchText])
 }
 
 export default useSearchService

src/hooks/useSubtitleService.ts

@@ -12,9 +12,19 @@ import {
   setSegments,
   setTitle,
   setTotalHeight,
+  setUrl,
 } from '../redux/envReducer'
 import {EventBusContext} from '../Router'
-import {EVENT_EXPAND, TOTAL_HEIGHT_MAX, TOTAL_HEIGHT_MIN, WORDS_DEFAULT, WORDS_MIN} from '../const'
+import {
+  EVENT_EXPAND,
+  GEMINI_TOKENS,
+  MODEL_DEFAULT,
+  MODEL_MAP,
+  TOTAL_HEIGHT_MAX,
+  TOTAL_HEIGHT_MIN,
+  WORDS_MIN,
+  WORDS_RATE
+} from '../const'
 import {useInterval} from 'ahooks'
 import {getWholeText} from '../util/biz_util'
 
@@ -46,6 +56,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)
       }
@@ -89,20 +100,20 @@ const useSubtitleService = () => {
 
   // 有数据时自动展开
   useEffect(() => {
-    if ((data != null) && data.body.length > 0) {
+    if (infos != null) {
       eventBus.emit({
         type: EVENT_EXPAND
       })
     }
-  }, [data, eventBus])
+  }, [eventBus, infos])
 
-  // 当前未展示 & (未折叠 | 自动展开) & 有列表 => 展示第一个
+  // 当前未展示 & 未折叠 & 有列表 => 展示第一个
   useEffect(() => {
-    if (!curInfo && (!fold || (envReady && envData.autoExpand)) && (infos != null) && infos.length > 0) {
+    if (!curInfo && !fold && (infos != null) && infos.length > 0) {
       dispatch(setCurInfo(infos[0]))
       dispatch(setCurFetched(false))
     }
-  }, [curInfo, dispatch, envData.autoExpand, envReady, fold, infos])
+  }, [curInfo, dispatch, envReady, fold, infos])
   // 获取
   useEffect(() => {
     if (curInfo && !curFetched) {
@@ -156,7 +167,14 @@ const useSubtitleService = () => {
     const items = data?.body
     if (items != null) {
       if (envData.summarizeEnable) { // 分段
-        let size = envData.words??WORDS_DEFAULT
+        let size = envData.words
+        if (!size) { // 默认
+          if (envData.aiType === 'gemini') {
+            size = GEMINI_TOKENS*WORDS_RATE
+          } else {
+            size = (MODEL_MAP[envData.model??MODEL_DEFAULT]?.tokens??4000)*WORDS_RATE
+          }
+        }
         size = Math.max(size, WORDS_MIN)
 
         segments = []
@@ -191,7 +209,7 @@ const useSubtitleService = () => {
       }
     }
     dispatch(setSegments(segments))
-  }, [data?.body, dispatch, envData.summarizeEnable, envData.words])
+  }, [data?.body, dispatch, envData.aiType, envData.model, envData.summarizeEnable, envData.words])
 
   // 每秒更新当前视频时间
   useInterval(() => {

src/hooks/useTranslate.ts

@@ -4,6 +4,9 @@ import {
   addTaskId,
   addTransResults,
   delTaskId,
+  setAskContent,
+  setAskError,
+  setAskStatus,
   setLastSummarizeTime,
   setLastTransTime,
   setSummaryContent,
@@ -15,6 +18,7 @@ import {
   LANGUAGES_MAP,
   MODEL_DEFAULT,
   PROMPT_DEFAULTS,
+  PROMPT_TYPE_ASK,
   PROMPT_TYPE_TRANSLATE,
   SUMMARIZE_LANGUAGE_DEFAULT,
   SUMMARIZE_THRESHOLD,
@@ -107,7 +111,7 @@ const useTranslate = () => {
                     content: prompt,
                   }
                 ],
-                temperature: 0,
+                temperature: 0.25,
                 n: 1,
                 stream: false,
               },
@@ -176,7 +180,7 @@ const useTranslate = () => {
                   content: prompt,
                 }
               ],
-              temperature: 0,
+              temperature: 0.5,
               n: 1,
               stream: false,
             },
@@ -196,6 +200,59 @@ const useTranslate = () => {
     }
   }, [dispatch, envData.aiType, envData.apiKey, envData.geminiApiKey, envData.model, envData.prompts, envData.serverUrl, 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: envData.model??MODEL_DEFAULT,
+              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.aiType, envData.apiKey, envData.geminiApiKey, envData.model, envData.prompts, envData.serverUrl, summarizeLanguage.name, title])
+
   const handleTranslate = useMemoizedFn((task: Task, content: string) => {
     let map: {[key: string]: string} = {}
     try {
@@ -247,6 +304,13 @@ 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') {
@@ -266,14 +330,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, envData.aiType, 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

@@ -30,6 +30,7 @@ interface EnvState {
   data?: Transcript
   uploadedTranscript?: Transcript
   segments?: Segment[]
+  url?: string
   title?: string
 
   taskIds?: string[]
@@ -37,6 +38,13 @@ interface EnvState {
   lastTransTime?: number
   lastSummarizeTime?: number
 
+  // ask
+  askFold?: boolean
+  askQuestion?: string
+  askStatus: SummaryStatus
+  askError?: string
+  askContent?: string
+
   searchText: string
   searchResult: Set<number>
 }
@@ -46,13 +54,14 @@ const initialState: EnvState = {
     serverUrl: SERVER_URL_OPENAI,
     translateEnable: true,
     summarizeEnable: true,
-    autoExpand: true,
+    // autoExpand: true,
     theme: 'light',
     searchEnabled: true,
   },
   tempData: {
     curSummaryType: 'overview',
   },
+  askStatus: 'init',
   totalHeight: TOTAL_HEIGHT_DEF,
   autoScroll: true,
   currentTime: import.meta.env.VITE_ENV === 'web-dev' ? 30 : undefined,
@@ -195,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
@@ -231,6 +261,9 @@ export const slice = createSlice({
     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
     },
@@ -259,6 +292,12 @@ export const slice = createSlice({
 })
 
 export const {
+  setUrl,
+  setAskFold,
+  setAskQuestion,
+  setAskStatus,
+  setAskError,
+  setAskContent,
   setTempReady,
   setTempData,
   setUploadedTranscript,

src/typings.d.ts

@@ -1,5 +1,5 @@
 interface EnvData {
-  autoExpand?: boolean
+  // autoExpand?: boolean
   flagDot?: boolean
 
   aiType?: 'openai' | 'gemini'
@@ -26,6 +26,9 @@ interface EnvData {
   searchEnabled?: boolean
   cnSearchEnabled?: boolean
 
+  // ask
+  askEnabled?: boolean
+
   prompts?: {
     [key: string]: string
   }