You've already forked bilibili-subtitle
Compare commits
12 Commits
Author | SHA1 | Date | |
---|---|---|---|
![]() |
9320928b34 | ||
![]() |
1fbdeaa8f6 | ||
![]() |
2f22a8c4a2 | ||
![]() |
baa15581ed | ||
![]() |
7e4733dfa8 | ||
![]() |
5c6dcab653 | ||
![]() |
975c524369 | ||
![]() |
4a6ebf0894 | ||
![]() |
64059f71e5 | ||
![]() |
be97b1d51a | ||
![]() |
19553de975 | ||
![]() |
39d3f9be8e |
@@ -1,7 +1,7 @@
|
||||
{
|
||||
"name": "哔哩哔哩字幕列表",
|
||||
"description": "显示B站视频的字幕列表,可点击跳转与下载字幕,并支持翻译和总结字幕!",
|
||||
"version": "1.9.3",
|
||||
"version": "1.10.1",
|
||||
"manifest_version": 3,
|
||||
"permissions": [
|
||||
"storage"
|
||||
|
@@ -1,7 +1,7 @@
|
||||
{
|
||||
"private": true,
|
||||
"name": "bilibili-subtitle",
|
||||
"version": "1.9.3",
|
||||
"version": "1.10.1",
|
||||
"type": "module",
|
||||
"description": "哔哩哔哩字幕列表",
|
||||
"main": "index.js",
|
||||
|
72
src/biz/Ask.tsx
Normal file
72
src/biz/Ask.tsx
Normal file
@@ -0,0 +1,72 @@
|
||||
import {AiOutlineCloseCircle, BsDashSquare, BsPlusSquare, FaQuestion} from 'react-icons/all'
|
||||
import classNames from 'classnames'
|
||||
import Markdown from '../components/Markdown'
|
||||
import React, {useCallback} from 'react'
|
||||
import {delAskInfo, mergeAskInfo, setPage} from '../redux/envReducer'
|
||||
import {useAppDispatch, useAppSelector} from '../hooks/redux'
|
||||
import {PAGE_SETTINGS} from '../const'
|
||||
import toast from 'react-hot-toast'
|
||||
import useTranslate from '../hooks/useTranslate'
|
||||
|
||||
const Ask = (props: {
|
||||
ask: AskInfo
|
||||
}) => {
|
||||
const {ask} = props
|
||||
const dispatch = useAppDispatch()
|
||||
const envData = useAppSelector(state => state.env.envData)
|
||||
const fontSize = useAppSelector(state => state.env.envData.fontSize)
|
||||
const segments = useAppSelector(state => state.env.segments)
|
||||
const {addAskTask} = useTranslate()
|
||||
|
||||
const onRegenerate = useCallback(() => {
|
||||
const apiKey = envData.aiType === 'gemini'?envData.geminiApiKey:envData.apiKey
|
||||
if (apiKey) {
|
||||
if (segments != null && segments.length > 0) {
|
||||
addAskTask(ask.id, segments[0], ask.question).catch(console.error)
|
||||
}
|
||||
} else {
|
||||
dispatch(setPage(PAGE_SETTINGS))
|
||||
toast.error('需要先设置ApiKey!')
|
||||
}
|
||||
}, [addAskTask, ask.id, ask.question, dispatch, envData.aiType, envData.apiKey, envData.geminiApiKey, segments])
|
||||
|
||||
const onAskFold = useCallback(() => {
|
||||
dispatch(mergeAskInfo({
|
||||
id: ask.id,
|
||||
fold: !ask.fold
|
||||
}))
|
||||
}, [ask, dispatch])
|
||||
|
||||
const onClose = useCallback(() => {
|
||||
dispatch(delAskInfo(ask.id))
|
||||
}, [ask, dispatch])
|
||||
|
||||
return <div className='shadow bg-base-200 my-0.5 mx-1.5 p-1.5 rounded flex flex-col justify-center items-center'>
|
||||
<div className='w-full relative flex justify-center min-h-[20px]'>
|
||||
<div className='absolute left-0 top-0 bottom-0 text-xs select-none flex-center desc'>
|
||||
{ask.fold
|
||||
? <BsPlusSquare className='cursor-pointer' onClick={onAskFold}/> :
|
||||
<BsDashSquare className='cursor-pointer' onClick={onAskFold}/>}
|
||||
</div>
|
||||
<button className='absolute right-0 top-0 bottom-0 btn btn-ghost btn-xs btn-circle text-base-content/75' onClick={onClose}>
|
||||
<AiOutlineCloseCircle/>
|
||||
</button>
|
||||
<div className="tabs">
|
||||
<a className="tab tab-lifted tab-xs tab-disabled cursor-default"></a>
|
||||
<a className='tab tab-lifted tab-xs tab-active'><FaQuestion/>提问</a>
|
||||
<a className="tab tab-lifted tab-xs tab-disabled cursor-default"></a>
|
||||
</div>
|
||||
</div>
|
||||
{!ask.fold && ask.question && <div className='text-sm font-medium max-w-[90%]'>{ask.question}</div>}
|
||||
{!ask.fold && ask.content &&
|
||||
<div className={classNames('font-medium max-w-[90%] mt-1', fontSize === 'large' ? 'text-sm' : 'text-xs')}>
|
||||
<Markdown content={ask.content}/>
|
||||
</div>}
|
||||
{!ask.fold && <button disabled={ask.status !== 'done'}
|
||||
className={classNames('btn btn-link btn-xs', ask.status === 'pending' && 'loading')}
|
||||
onClick={onRegenerate}>{ask.status === 'pending' ? '生成中' : '重新生成'}</button>}
|
||||
{!ask.fold && ask.error && <div className='text-xs text-error'>{ask.error}</div>}
|
||||
</div>
|
||||
}
|
||||
|
||||
export default Ask
|
271
src/biz/Body.tsx
271
src/biz/Body.tsx
@@ -1,7 +1,7 @@
|
||||
import React, {useCallback, useEffect, useMemo, useRef} from 'react'
|
||||
import {
|
||||
setAskFold,
|
||||
setAskQuestion,
|
||||
addAskInfo,
|
||||
mergeAskInfo,
|
||||
setAutoScroll,
|
||||
setAutoTranslate,
|
||||
setCheckAutoScroll,
|
||||
@@ -16,10 +16,6 @@ import {useAppDispatch, useAppSelector} from '../hooks/redux'
|
||||
import {
|
||||
AiOutlineAim,
|
||||
AiOutlineCloseCircle,
|
||||
BsDashSquare,
|
||||
BsPlusSquare,
|
||||
FaGripfire,
|
||||
FaQuestion,
|
||||
FaRegArrowAltCircleDown,
|
||||
IoWarning,
|
||||
MdExpand,
|
||||
@@ -32,21 +28,20 @@ import {
|
||||
ASK_ENABLED_DEFAULT,
|
||||
HEADER_HEIGHT,
|
||||
PAGE_SETTINGS,
|
||||
RECOMMEND_HEIGHT,
|
||||
SEARCH_BAR_HEIGHT,
|
||||
SUMMARIZE_ALL_THRESHOLD,
|
||||
TITLE_HEIGHT
|
||||
} from '../const'
|
||||
import {FaClipboardList} from 'react-icons/fa'
|
||||
import useTranslate from '../hooks/useTranslate'
|
||||
import {getSummarize} from '../util/biz_util'
|
||||
import {openUrl} from '@kky002/kky-util'
|
||||
import Markdown from '../components/Markdown'
|
||||
import {random} from 'lodash-es'
|
||||
import useKeyService from '../hooks/useKeyService'
|
||||
import Ask from './Ask'
|
||||
import {v4} from 'uuid'
|
||||
|
||||
const Body = () => {
|
||||
const dispatch = useAppDispatch()
|
||||
const inputting = useAppSelector(state => state.env.inputting)
|
||||
const noVideo = useAppSelector(state => state.env.noVideo)
|
||||
const autoTranslate = useAppSelector(state => state.env.autoTranslate)
|
||||
const autoScroll = useAppSelector(state => state.env.autoScroll)
|
||||
@@ -58,22 +53,18 @@ const Body = () => {
|
||||
const translateEnable = useAppSelector(state => state.env.envData.translateEnable)
|
||||
const summarizeEnable = useAppSelector(state => state.env.envData.summarizeEnable)
|
||||
const {addSummarizeTask, addAskTask} = useTranslate()
|
||||
const infos = useAppSelector(state => state.env.infos)
|
||||
const askFold = useAppSelector(state => state.env.askFold)
|
||||
const askQuestion = useAppSelector(state => state.env.askQuestion)
|
||||
const askContent = useAppSelector(state => state.env.askContent)
|
||||
const askStatus = useAppSelector(state => state.env.askStatus)
|
||||
const askError = useAppSelector(state => state.env.askError)
|
||||
// const infos = useAppSelector(state => state.env.infos)
|
||||
const bodyRef = useRef<any>()
|
||||
const curOffsetTop = useAppSelector(state => state.env.curOffsetTop)
|
||||
const checkAutoScroll = useAppSelector(state => state.env.checkAutoScroll)
|
||||
const needScroll = useAppSelector(state => state.env.needScroll)
|
||||
const totalHeight = useAppSelector(state => state.env.totalHeight)
|
||||
const curSummaryType = useAppSelector(state => state.env.tempData.curSummaryType)
|
||||
const title = useAppSelector(state => state.env.title)
|
||||
const fontSize = useAppSelector(state => state.env.envData.fontSize)
|
||||
// const title = useAppSelector(state => state.env.title)
|
||||
// const fontSize = useAppSelector(state => state.env.envData.fontSize)
|
||||
const searchText = useAppSelector(state => state.env.searchText)
|
||||
const recommendIdx = useMemo(() => random(0, 3), [])
|
||||
const asks = useAppSelector(state => state.env.asks)
|
||||
// const recommendIdx = useMemo(() => random(0, 3), [])
|
||||
const showSearchInput = useMemo(() => {
|
||||
return (segments != null && segments.length > 0) && (envData.searchEnabled ? envData.searchEnabled : (envData.askEnabled ?? ASK_ENABLED_DEFAULT))
|
||||
}, [envData.askEnabled, envData.searchEnabled, segments])
|
||||
@@ -81,7 +72,7 @@ const Body = () => {
|
||||
let placeholder = ''
|
||||
if (envData.searchEnabled) {
|
||||
if (envData.askEnabled??ASK_ENABLED_DEFAULT) {
|
||||
placeholder = '搜索或提问字幕内容'
|
||||
placeholder = '搜索或提问字幕内容(按Enter提问)'
|
||||
} else {
|
||||
placeholder = '搜索字幕内容'
|
||||
}
|
||||
@@ -137,14 +128,19 @@ const Body = () => {
|
||||
|
||||
const onFoldAll = useCallback(() => {
|
||||
dispatch(setFoldAll(!foldAll))
|
||||
dispatch(setAskFold(!foldAll))
|
||||
for (const ask of asks) {
|
||||
dispatch(mergeAskInfo({
|
||||
id: ask.id,
|
||||
fold: !foldAll
|
||||
}))
|
||||
}
|
||||
for (const segment of segments ?? []) {
|
||||
dispatch(setSegmentFold({
|
||||
segmentStartIdx: segment.startIdx,
|
||||
fold: !foldAll
|
||||
}))
|
||||
}
|
||||
}, [dispatch, foldAll, segments])
|
||||
}, [asks, dispatch, foldAll, segments])
|
||||
|
||||
const toggleAutoTranslateCallback = useCallback(() => {
|
||||
const apiKey = envData.aiType === 'gemini'?envData.geminiApiKey:envData.apiKey
|
||||
@@ -167,14 +163,14 @@ const Body = () => {
|
||||
}
|
||||
}, [autoScroll, dispatch])
|
||||
|
||||
const onCopy = useCallback(() => {
|
||||
const [success, content] = getSummarize(title, segments, curSummaryType)
|
||||
if (success) {
|
||||
navigator.clipboard.writeText(content).then(() => {
|
||||
toast.success('复制成功')
|
||||
}).catch(console.error)
|
||||
}
|
||||
}, [curSummaryType, segments, title])
|
||||
// const onCopy = useCallback(() => {
|
||||
// const [success, content] = getSummarize(title, segments, curSummaryType)
|
||||
// if (success) {
|
||||
// navigator.clipboard.writeText(content).then(() => {
|
||||
// toast.success('复制成功')
|
||||
// }).catch(console.error)
|
||||
// }
|
||||
// }, [curSummaryType, segments, title])
|
||||
|
||||
const onSearchTextChange = useCallback((e: any) => {
|
||||
const searchText = e.target.value
|
||||
@@ -190,8 +186,14 @@ const Body = () => {
|
||||
const apiKey = envData.aiType === 'gemini'?envData.geminiApiKey:envData.apiKey
|
||||
if (apiKey) {
|
||||
if (segments != null && segments.length > 0) {
|
||||
dispatch(setAskQuestion(searchText))
|
||||
addAskTask(segments[0], searchText).catch(console.error)
|
||||
const id = v4()
|
||||
addAskTask(id, segments[0], searchText).catch(console.error)
|
||||
// 添加ask
|
||||
dispatch(addAskInfo({
|
||||
id,
|
||||
question: searchText,
|
||||
status: 'pending',
|
||||
}))
|
||||
}
|
||||
} else {
|
||||
dispatch(setPage(PAGE_SETTINGS))
|
||||
@@ -200,14 +202,6 @@ const Body = () => {
|
||||
}
|
||||
}, [addAskTask, dispatch, envData.aiType, envData.apiKey, envData.askEnabled, envData.geminiApiKey, searchText, segments])
|
||||
|
||||
const onSetAsk = useCallback(() => {
|
||||
dispatch(setSearchText(askQuestion??''))
|
||||
}, [askQuestion, dispatch])
|
||||
|
||||
const onAskFold = useCallback(() => {
|
||||
dispatch(setAskFold(!askFold))
|
||||
}, [askFold, dispatch])
|
||||
|
||||
// service
|
||||
useKeyService()
|
||||
|
||||
@@ -256,7 +250,17 @@ const Body = () => {
|
||||
|
||||
{/* search */}
|
||||
{showSearchInput && <div className='px-2 py-1 flex flex-col relative'>
|
||||
<input type='text' className='input input-xs bg-base-200' placeholder={searchPlaceholder} value={searchText} onChange={onSearchTextChange}/>
|
||||
<input type='text' className='input input-xs bg-base-200' placeholder={searchPlaceholder} value={searchText} onChange={onSearchTextChange} onKeyDown={e => {
|
||||
// enter
|
||||
if (e.key === 'Enter') {
|
||||
if (!inputting) {
|
||||
e.preventDefault()
|
||||
e.stopPropagation()
|
||||
onAsk()
|
||||
dispatch(setSearchText(''))
|
||||
}
|
||||
}
|
||||
}}/>
|
||||
{searchText && <button className='absolute top-1 right-2 btn btn-ghost btn-xs btn-circle text-base-content/75' onClick={onClearSearchText}><AiOutlineCloseCircle/></button>}
|
||||
</div>}
|
||||
|
||||
@@ -272,36 +276,11 @@ const Body = () => {
|
||||
<div ref={bodyRef} onWheel={onWheel}
|
||||
className={classNames('flex flex-col gap-1.5 overflow-y-auto select-text scroll-smooth', floatKeyPointsSegIdx != null && 'pb-[100px]')}
|
||||
style={{
|
||||
height: `${totalHeight - HEADER_HEIGHT - TITLE_HEIGHT - RECOMMEND_HEIGHT - (showSearchInput ? SEARCH_BAR_HEIGHT : 0)}px`
|
||||
height: `${totalHeight - HEADER_HEIGHT - TITLE_HEIGHT - (showSearchInput ? SEARCH_BAR_HEIGHT : 0)}px`
|
||||
}}
|
||||
>
|
||||
{/* ask */}
|
||||
{(envData.askEnabled ?? ASK_ENABLED_DEFAULT) && (searchText || askQuestion) &&
|
||||
<div className='shadow bg-base-200 my-0.5 mx-1.5 p-1.5 rounded flex flex-col justify-center items-center'>
|
||||
<div className='w-full relative flex justify-center min-h-[20px]'>
|
||||
<div className='absolute left-0 top-0 bottom-0 text-xs select-none flex-center desc'>
|
||||
{askFold
|
||||
? <BsPlusSquare className='cursor-pointer' onClick={onAskFold}/> :
|
||||
<BsDashSquare className='cursor-pointer' onClick={onAskFold}/>}
|
||||
</div>
|
||||
<div className="tabs">
|
||||
<a className="tab tab-lifted tab-xs tab-disabled cursor-default"></a>
|
||||
<a className='tab tab-lifted tab-xs tab-active'><FaQuestion/>提问</a>
|
||||
<a className="tab tab-lifted tab-xs tab-disabled cursor-default"></a>
|
||||
</div>
|
||||
</div>
|
||||
{!askFold && askQuestion &&
|
||||
<div className='link link-hover text-sm font-medium max-w-[90%]' onClick={onSetAsk}>{askQuestion}</div>}
|
||||
{!askFold && askContent &&
|
||||
<div className={classNames('font-medium max-w-[90%] mt-1', fontSize === 'large' ? 'text-sm' : 'text-xs')}>
|
||||
<Markdown content={askContent}/>
|
||||
</div>}
|
||||
{!askFold && <button disabled={askStatus === 'pending'}
|
||||
className={classNames('btn btn-link btn-xs', askStatus === 'pending' && 'loading')}
|
||||
onClick={onAsk}>{askStatus === 'init' ? '点击提问' : (askStatus === 'pending' ? '生成中' : '重新生成')}</button>}
|
||||
{!askFold && askStatus === 'init' && <div className='desc-lighter text-xs'>提问举例:这个视频说了什么</div>}
|
||||
{!askFold && askError && <div className='text-xs text-error'>{askError}</div>}
|
||||
</div>}
|
||||
{/* asks */}
|
||||
{asks.map(ask => <Ask key={ask.id} ask={ask}/>)}
|
||||
|
||||
{/* segments */}
|
||||
{segments?.map((segment, segmentIdx) => <SegmentCard key={segment.startIdx} segment={segment}
|
||||
@@ -325,22 +304,22 @@ const Body = () => {
|
||||
{/* </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='/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'
|
||||
@@ -368,71 +347,71 @@ const Body = () => {
|
||||
}} 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 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 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>
|
||||
}
|
||||
|
||||
|
@@ -75,26 +75,27 @@ const MoreBtn = (props: Props) => {
|
||||
return
|
||||
}
|
||||
|
||||
let s, fileName
|
||||
let fileName = title
|
||||
let s, suffix
|
||||
if (!downloadType || downloadType === 'text') {
|
||||
s = `${title??'无标题'}\n${url??'无链接'}\n\n`
|
||||
for (const item of data.body) {
|
||||
s += item.content + '\n'
|
||||
}
|
||||
fileName = 'download.txt'
|
||||
suffix = 'txt'
|
||||
} else if (downloadType === 'textWithTime') {
|
||||
s = `${title??'无标题'}\n${url??'无链接'}\n\n`
|
||||
for (const item of data.body) {
|
||||
s += formatTime(item.from) + ' ' + item.content + '\n'
|
||||
}
|
||||
fileName = 'download.txt'
|
||||
suffix = 'txt'
|
||||
} else if (downloadType === 'article') {
|
||||
s = `${title??'无标题'}\n${url??'无链接'}\n\n`
|
||||
for (const item of data.body) {
|
||||
s += item.content + ', '
|
||||
}
|
||||
s = s.substring(0, s.length - 1) // remove last ','
|
||||
fileName = 'download.txt'
|
||||
suffix = 'txt'
|
||||
} else if (downloadType === 'srt') {
|
||||
/**
|
||||
* 1
|
||||
@@ -113,7 +114,7 @@ const MoreBtn = (props: Props) => {
|
||||
s += ss
|
||||
}
|
||||
s = s.substring(0, s.length - 1)// remove last '\n'
|
||||
fileName = 'download.srt'
|
||||
suffix = 'srt'
|
||||
} else if (downloadType === 'vtt') {
|
||||
/**
|
||||
* WEBVTT title
|
||||
@@ -134,21 +135,22 @@ const MoreBtn = (props: Props) => {
|
||||
s += ss
|
||||
}
|
||||
s = s.substring(0, s.length - 1)// remove last '\n'
|
||||
fileName = 'download.vtt'
|
||||
suffix = 'vtt'
|
||||
} else if (downloadType === 'json') {
|
||||
s = JSON.stringify(data)
|
||||
fileName = 'download.json'
|
||||
suffix = 'json'
|
||||
} else if (downloadType === 'summarize') {
|
||||
s = `${title??'无标题'}\n${url??'无链接'}\n\n`
|
||||
const [success, content] = getSummarize(title, segments, curSummaryType)
|
||||
if (!success) return
|
||||
s += content
|
||||
fileName = '总结.txt'
|
||||
fileName += ' - 总结'
|
||||
suffix = 'txt'
|
||||
} else {
|
||||
return
|
||||
}
|
||||
if (download) {
|
||||
downloadText(s, fileName)
|
||||
downloadText(s, fileName+'.'+suffix)
|
||||
} else {
|
||||
navigator.clipboard.writeText(s).then(() => {
|
||||
toast.success('复制成功')
|
||||
|
@@ -5,7 +5,7 @@ import classNames from 'classnames'
|
||||
import {FaClipboardList} from 'react-icons/fa'
|
||||
import {PAGE_MAIN, PAGE_SETTINGS, SUMMARIZE_THRESHOLD, SUMMARIZE_TYPES} from '../const'
|
||||
import useTranslate from '../hooks/useTranslate'
|
||||
import {BsDashSquare, BsPlusSquare, CgFileDocument, GrOverview, RiFileCopy2Line} from 'react-icons/all'
|
||||
import {BsDashSquare, BsPlusSquare, CgFileDocument, FaQuestion, GrOverview, RiFileCopy2Line} from 'react-icons/all'
|
||||
import toast from 'react-hot-toast'
|
||||
import {getLastTime, getSummaryStr, isSummaryEmpty, parseStrTimeToSeconds} from '../util/biz_util'
|
||||
import {useInViewport} from 'ahooks'
|
||||
@@ -107,6 +107,13 @@ const Summarize = (props: {
|
||||
<div className={classNames('font-medium max-w-[90%]', fontSize === 'large' ? 'text-sm' : 'text-xs')}>
|
||||
{summary.content.summary}
|
||||
</div>}
|
||||
{summary?.type === 'question' && (summary.content != null) &&
|
||||
<div className={classNames('max-w-[90%] flex flex-col gap-1', fontSize === 'large' ? 'text-sm' : 'text-xs')}>
|
||||
{summary.content.map((question: any, idx: number) => <div key={idx}>
|
||||
<h2 className={classNames('font-semibold underline', fontSize === 'large' ? 'text-sm' : 'text-xs')}>{question.q}</h2>
|
||||
<div className={classNames('font-normal', fontSize === 'large' ? 'text-sm' : 'text-xs')}>{question.a}</div>
|
||||
</div>)}
|
||||
</div>}
|
||||
</div>
|
||||
<div className='flex flex-col justify-center items-center'>
|
||||
{segment.text.length < SUMMARIZE_THRESHOLD && <div className='desc-lighter text-xs'>文字过短,无法总结.</div>}
|
||||
@@ -189,6 +196,12 @@ const SegmentCard = (props: {
|
||||
}))
|
||||
}, [dispatch])
|
||||
|
||||
const onSelQuestion = useCallback(() => {
|
||||
dispatch(setTempData({
|
||||
curSummaryType: 'question'
|
||||
}))
|
||||
}, [dispatch])
|
||||
|
||||
return <div
|
||||
className={classNames('border border-base-300 bg-base-200/25 rounded flex flex-col m-1.5 p-1.5 gap-1 shadow', showCurrent && 'shadow-primary')}>
|
||||
<div className='relative flex justify-center min-h-[20px]'>
|
||||
@@ -203,6 +216,7 @@ const SegmentCard = (props: {
|
||||
<a className={classNames('tab tab-lifted tab-xs', curSummaryType === 'brief' && 'tab-active')} onClick={onSelBrief}><CgFileDocument/>总结</a>
|
||||
<a className={classNames('tab tab-lifted tab-xs', curSummaryType === 'overview' && 'tab-active')} onClick={onSelOverview}><GrOverview/>概览</a>
|
||||
<a className={classNames('tab tab-lifted tab-xs', curSummaryType === 'keypoint' && 'tab-active')} onClick={onSelKeypoint}><FaClipboardList/>要点</a>
|
||||
<a className={classNames('tab tab-lifted tab-xs', curSummaryType === 'question' && 'tab-active')} onClick={onSelQuestion}><FaQuestion/>问题</a>
|
||||
<a className="tab tab-lifted tab-xs tab-disabled cursor-default"></a>
|
||||
</div>}
|
||||
<div
|
||||
|
@@ -22,7 +22,7 @@ import {
|
||||
TRANSLATE_FETCH_STEP,
|
||||
WORDS_RATE,
|
||||
} from '../const'
|
||||
import {FaGripfire, IoWarning} from 'react-icons/all'
|
||||
import {IoWarning} from 'react-icons/all'
|
||||
import classNames from 'classnames'
|
||||
import toast from 'react-hot-toast'
|
||||
import {useBoolean, useEventTarget} from 'ahooks'
|
||||
@@ -241,14 +241,14 @@ const Settings = () => {
|
||||
<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 className='flex justify-center font-semibold'>【第三方代理】</div> */}
|
||||
{/* <div>代理网址:<a className='link link-primary' href='https://api.openai-up.com/register?aff=varM' */}
|
||||
{/* target='_blank' */}
|
||||
{/* rel="noreferrer">点击访问</a></div> */}
|
||||
{/* <div>服务器地址:<a className='link link-primary' */}
|
||||
{/* onClick={() => setServerUrlValue('https://api.openai-up.com')} */}
|
||||
{/* rel='noreferrer'>点击设置</a></div> */}
|
||||
{/* <div className='text-amber-600 flex justify-center items-center'><FaGripfire/>目前价格不到官方价格的6折<FaGripfire/></div> */}
|
||||
</div>
|
||||
</div>
|
||||
<FormItem title='模型选择' htmlFor='modelSel' tip='注意,不同模型有不同价格与token限制'>
|
||||
@@ -282,28 +282,6 @@ const Settings = () => {
|
||||
</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'>
|
||||
翻译配置
|
||||
{!apiKeySetted && <div className='tooltip tooltip-right ml-1' data-tip='未设置ApiKey无法使用'>
|
||||
@@ -393,6 +371,32 @@ const Settings = () => {
|
||||
onChange={setAskEnabledValue}/>
|
||||
</FormItem>
|
||||
</Section>
|
||||
|
||||
<Section title='提示词配置'>
|
||||
<div className='flex justify-center'>
|
||||
<a className='text-xs link link-primary' onClick={togglePromptsFold}>点击{promptsFold ? '展开' : '折叠'}</a>
|
||||
</div>
|
||||
{!promptsFold && PROMPT_TYPES.map((item, idx) => <FormItem key={item.type} title={<div>
|
||||
<div>{item.name}</div>
|
||||
<div className='link text-xs' onClick={() => {
|
||||
setPromptsValue({
|
||||
...promptsValue,
|
||||
// @ts-expect-error
|
||||
[item.type]: PROMPT_DEFAULTS[item.type] ?? ''
|
||||
})
|
||||
}}>点击填充默认
|
||||
</div>
|
||||
</div>} htmlFor={`prompt-${item.type}`}>
|
||||
<textarea id={`prompt-${item.type}`} className='mt-2 textarea input-bordered w-full'
|
||||
placeholder='留空使用默认提示词' value={promptsValue[item.type] ?? ''} onChange={(e) => {
|
||||
setPromptsValue({
|
||||
...promptsValue,
|
||||
[item.type]: e.target.value
|
||||
})
|
||||
}}/>
|
||||
</FormItem>)}
|
||||
</Section>
|
||||
|
||||
<div className='flex justify-center gap-5'>
|
||||
<button className='btn btn-primary btn-sm' onClick={onSave}>保存</button>
|
||||
<button className='btn btn-sm' onClick={onCancel}>取消</button>
|
||||
|
@@ -24,7 +24,7 @@ const timerIframe = setInterval(function () {
|
||||
const iframe = document.createElement('iframe')
|
||||
iframe.id = IFRAME_ID
|
||||
iframe.src = chrome.runtime.getURL('index.html')
|
||||
iframe.style = 'border: none; width: 100%; height: 44px;'
|
||||
iframe.style = 'border: none; width: 100%; height: 44px;margin-bottom: 3px;'
|
||||
iframe.allow = 'clipboard-read; clipboard-write;'
|
||||
if (vKey) {
|
||||
iframe.dataset[vKey] = danmukuBox?.dataset[vKey]
|
||||
|
@@ -8,6 +8,7 @@ export const STORAGE_TEMP = 'bilibili-subtitle_temp'
|
||||
export const PROMPT_TYPE_TRANSLATE = 'translate'
|
||||
export const PROMPT_TYPE_SUMMARIZE_OVERVIEW = 'summarize_overview'
|
||||
export const PROMPT_TYPE_SUMMARIZE_KEYPOINT = 'summarize_keypoint'
|
||||
export const PROMPT_TYPE_SUMMARIZE_QUESTION = 'summarize_question'
|
||||
export const PROMPT_TYPE_SUMMARIZE_BRIEF = 'summarize_brief'
|
||||
export const PROMPT_TYPE_ASK = 'ask'
|
||||
export const PROMPT_TYPES = [{
|
||||
@@ -22,6 +23,9 @@ export const PROMPT_TYPES = [{
|
||||
}, {
|
||||
name: '总结',
|
||||
type: PROMPT_TYPE_SUMMARIZE_BRIEF,
|
||||
}, {
|
||||
name: '问题',
|
||||
type: PROMPT_TYPE_SUMMARIZE_QUESTION,
|
||||
}, {
|
||||
name: '提问',
|
||||
type: PROMPT_TYPE_ASK,
|
||||
@@ -46,6 +50,12 @@ export const SUMMARIZE_TYPES = {
|
||||
downloadName: '💡视频要点💡',
|
||||
promptType: PROMPT_TYPE_SUMMARIZE_KEYPOINT,
|
||||
},
|
||||
question: {
|
||||
name: '问题',
|
||||
desc: '常见问题',
|
||||
downloadName: '💡常见问题💡',
|
||||
promptType: PROMPT_TYPE_SUMMARIZE_QUESTION,
|
||||
},
|
||||
}
|
||||
|
||||
export const PROMPT_DEFAULTS = {
|
||||
@@ -124,6 +134,46 @@ The video's subtitles:
|
||||
'''
|
||||
{{segment}}
|
||||
'''`,
|
||||
[PROMPT_TYPE_SUMMARIZE_QUESTION]: `You are a helpful assistant that skilled at extracting questions from video subtitle.
|
||||
|
||||
## Context
|
||||
|
||||
The video's title: '''{{title}}'''.
|
||||
The video's subtitles:
|
||||
|
||||
'''
|
||||
{{segment}}
|
||||
'''
|
||||
|
||||
## Command
|
||||
|
||||
Accurately extract key questions and their corresponding answers from the video subtitles based on the actual content provided. The number of questions should be between 3 and 5.
|
||||
|
||||
- Identify questions as sentences starting with interrogative words (e.g., "What", "How", "Why") and extract the following sentences that directly answer these questions.
|
||||
- Include only those questions and answers that are relevant to the main points of the video, and ensure they cover different aspects of the video's content.
|
||||
- If an answer spans multiple non-consecutive parts of the subtitles, concatenate them into a coherent response without adding any information not present in the subtitles.
|
||||
- In cases where the number of potential Q&As exceeds 5, prioritize the most informative and directly answered ones.
|
||||
- If clear questions and answers are not available in the subtitles, refrain from creating them and instead note the absence of direct Q&As.
|
||||
- Answer in language '{{language}}'.
|
||||
- Format the output in markdown json format, as specified.
|
||||
|
||||
## Output format
|
||||
|
||||
Provide an example to illustrate the expected output:
|
||||
|
||||
\`\`\`json
|
||||
[
|
||||
{
|
||||
"q": "What is the main theme of the video?",
|
||||
"a": "The main theme of the video is explained as..."
|
||||
},
|
||||
{
|
||||
"q": "How is the topic developed?",
|
||||
"a": "The topic is developed through various examples, including..."
|
||||
}
|
||||
]
|
||||
\`\`\`
|
||||
`,
|
||||
[PROMPT_TYPE_ASK]: `You are a helpful assistant who answers question related to video subtitles.
|
||||
Answer in language '{{language}}'.
|
||||
|
||||
|
@@ -1,14 +1,39 @@
|
||||
import {useEffect} from 'react'
|
||||
import {useMemoizedFn} from 'ahooks/es'
|
||||
import {useAppSelector} from './redux'
|
||||
import {useAppDispatch, useAppSelector} from './redux'
|
||||
import useSubtitle from './useSubtitle'
|
||||
import {setInputting} from '../redux/envReducer'
|
||||
|
||||
const useKeyService = () => {
|
||||
const dispatch = useAppDispatch()
|
||||
const inputting = useAppSelector(state => state.env.inputting)
|
||||
const curIdx = useAppSelector(state => state.env.curIdx)
|
||||
const data = useAppSelector(state => state.env.data)
|
||||
const {move} = useSubtitle()
|
||||
|
||||
// 输入中
|
||||
useEffect(() => {
|
||||
const onInputtingStart = (e: CompositionEvent) => {
|
||||
dispatch(setInputting(true))
|
||||
}
|
||||
const onInputtingEnd = (e: CompositionEvent) => {
|
||||
dispatch(setInputting(false))
|
||||
}
|
||||
|
||||
document.addEventListener('compositionstart', onInputtingStart)
|
||||
document.addEventListener('compositionend', onInputtingEnd)
|
||||
return () => {
|
||||
document.removeEventListener('compositionstart', onInputtingStart)
|
||||
document.removeEventListener('compositionend', onInputtingEnd)
|
||||
}
|
||||
}, [dispatch])
|
||||
|
||||
const onKeyDown = useMemoizedFn((e: KeyboardEvent) => {
|
||||
// 当前在输入中(如中文输入法)
|
||||
if (inputting) {
|
||||
return
|
||||
}
|
||||
|
||||
// 有按其他控制键时,不触发
|
||||
if (e.ctrlKey || e.metaKey || e.shiftKey) {
|
||||
return
|
||||
|
@@ -4,9 +4,7 @@ import {
|
||||
addTaskId,
|
||||
addTransResults,
|
||||
delTaskId,
|
||||
setAskContent,
|
||||
setAskError,
|
||||
setAskStatus,
|
||||
mergeAskInfo,
|
||||
setLastSummarizeTime,
|
||||
setLastTransTime,
|
||||
setSummaryContent,
|
||||
@@ -199,7 +197,7 @@ const useTranslate = () => {
|
||||
}
|
||||
}, [dispatch, envData, summarizeLanguage.name, title])
|
||||
|
||||
const addAskTask = useCallback(async (segment: Segment, question: string) => {
|
||||
const addAskTask = useCallback(async (id: string, segment: Segment, question: string) => {
|
||||
if (segment.text.length >= SUMMARIZE_THRESHOLD) {
|
||||
let prompt: string = envData.prompts?.[PROMPT_TYPE_ASK]??PROMPT_DEFAULTS[PROMPT_TYPE_ASK]
|
||||
// replace params
|
||||
@@ -243,10 +241,14 @@ const useTranslate = () => {
|
||||
// startIdx: segment.startIdx,
|
||||
apiKey: envData.apiKey,
|
||||
geminiApiKey: envData.geminiApiKey,
|
||||
askId: id,
|
||||
}
|
||||
}
|
||||
console.debug('addAskTask', taskDef)
|
||||
dispatch(setAskStatus({status: 'pending'}))
|
||||
dispatch(mergeAskInfo({
|
||||
id,
|
||||
status: 'pending'
|
||||
}))
|
||||
const task = await chrome.runtime.sendMessage({type: 'addTask', taskDef})
|
||||
dispatch(addTaskId(task.id))
|
||||
}
|
||||
@@ -304,9 +306,13 @@ const useTranslate = () => {
|
||||
})
|
||||
|
||||
const handleAsk = useMemoizedFn((task: Task, content?: string) => {
|
||||
dispatch(setAskContent({content}))
|
||||
dispatch(setAskStatus({status: 'done'}))
|
||||
dispatch(setAskError({error: task.error}))
|
||||
dispatch(mergeAskInfo({
|
||||
id: task.def.extra.askId,
|
||||
content,
|
||||
status: 'done',
|
||||
error: task.error,
|
||||
}))
|
||||
|
||||
console.debug('setAsk', content, task.error)
|
||||
})
|
||||
|
||||
|
@@ -1,5 +1,5 @@
|
||||
import {createSlice, PayloadAction} from '@reduxjs/toolkit'
|
||||
import {find} from 'lodash-es'
|
||||
import {find, findIndex} from 'lodash-es'
|
||||
import {getDevData} from '../util/biz_util'
|
||||
import {DEFAULT_SERVER_URL_OPENAI, TOTAL_HEIGHT_DEF} from '../const'
|
||||
|
||||
@@ -39,11 +39,12 @@ interface EnvState {
|
||||
lastSummarizeTime?: number
|
||||
|
||||
// ask
|
||||
askFold?: boolean
|
||||
askQuestion?: string
|
||||
askStatus: SummaryStatus
|
||||
askError?: string
|
||||
askContent?: string
|
||||
asks: AskInfo[]
|
||||
|
||||
/**
|
||||
* 是否输入中(中文)
|
||||
*/
|
||||
inputting: boolean
|
||||
|
||||
searchText: string
|
||||
searchResult: Set<number>
|
||||
@@ -61,7 +62,6 @@ const initialState: EnvState = {
|
||||
tempData: {
|
||||
curSummaryType: 'overview',
|
||||
},
|
||||
askStatus: 'init',
|
||||
totalHeight: TOTAL_HEIGHT_DEF,
|
||||
autoScroll: true,
|
||||
currentTime: import.meta.env.VITE_ENV === 'web-dev' ? 30 : undefined,
|
||||
@@ -71,8 +71,12 @@ const initialState: EnvState = {
|
||||
data: import.meta.env.VITE_ENV === 'web-dev' ? getDevData() : undefined,
|
||||
transResults: {},
|
||||
|
||||
inputting: false,
|
||||
|
||||
searchText: '',
|
||||
searchResult: new Set(),
|
||||
|
||||
asks: [],
|
||||
}
|
||||
|
||||
export const slice = createSlice({
|
||||
@@ -204,26 +208,20 @@ export const slice = createSlice({
|
||||
}
|
||||
}
|
||||
},
|
||||
setAskFold: (state, action: PayloadAction<boolean>) => {
|
||||
state.askFold = action.payload
|
||||
addAskInfo: (state, action: PayloadAction<AskInfo>) => {
|
||||
state.asks.push(action.payload)
|
||||
},
|
||||
setAskQuestion: (state, action: PayloadAction<string | undefined>) => {
|
||||
state.askQuestion = action.payload
|
||||
delAskInfo: (state, action: PayloadAction<string>) => {
|
||||
state.asks = state.asks.filter(ask => ask.id !== action.payload)
|
||||
},
|
||||
setAskContent: (state, action: PayloadAction<{
|
||||
content?: any
|
||||
}>) => {
|
||||
state.askContent = action.payload.content
|
||||
},
|
||||
setAskStatus: (state, action: PayloadAction<{
|
||||
status: SummaryStatus
|
||||
}>) => {
|
||||
state.askStatus = action.payload.status
|
||||
},
|
||||
setAskError: (state, action: PayloadAction<{
|
||||
error?: string
|
||||
}>) => {
|
||||
state.askError = action.payload.error
|
||||
mergeAskInfo: (state, action: PayloadAction<PartialOfAskInfo>) => {
|
||||
const idx = findIndex(state.asks, {id: action.payload.id})
|
||||
if (idx >= 0) {
|
||||
state.asks[idx] = {
|
||||
...state.asks[idx],
|
||||
...action.payload,
|
||||
}
|
||||
}
|
||||
},
|
||||
setSegmentFold: (state, action: PayloadAction<{
|
||||
segmentStartIdx: number
|
||||
@@ -288,16 +286,14 @@ export const slice = createSlice({
|
||||
setFold: (state, action: PayloadAction<boolean>) => {
|
||||
state.fold = action.payload
|
||||
},
|
||||
setInputting: (state, action: PayloadAction<boolean>) => {
|
||||
state.inputting = action.payload
|
||||
},
|
||||
},
|
||||
})
|
||||
|
||||
export const {
|
||||
setUrl,
|
||||
setAskFold,
|
||||
setAskQuestion,
|
||||
setAskStatus,
|
||||
setAskError,
|
||||
setAskContent,
|
||||
setTempReady,
|
||||
setTempData,
|
||||
setUploadedTranscript,
|
||||
@@ -335,6 +331,10 @@ export const {
|
||||
setFold,
|
||||
setSearchText,
|
||||
setSearchResult,
|
||||
setInputting,
|
||||
addAskInfo,
|
||||
delAskInfo,
|
||||
mergeAskInfo,
|
||||
} = slice.actions
|
||||
|
||||
export default slice.reducer
|
||||
|
13
src/typings.d.ts
vendored
13
src/typings.d.ts
vendored
@@ -105,6 +105,17 @@ interface Summary {
|
||||
content?: any
|
||||
}
|
||||
|
||||
interface AskInfo {
|
||||
id: string
|
||||
fold?: boolean
|
||||
question: string
|
||||
status: SummaryStatus
|
||||
error?: string
|
||||
content?: string
|
||||
}
|
||||
|
||||
type PartialOfAskInfo = Partial<PartOfAskInfo>
|
||||
|
||||
/**
|
||||
* 概览
|
||||
*/
|
||||
@@ -129,4 +140,4 @@ interface BriefSummary extends Summary {
|
||||
}
|
||||
|
||||
type SummaryStatus = 'init' | 'pending' | 'done'
|
||||
type SummaryType = 'overview' | 'keypoint' | 'brief'
|
||||
type SummaryType = 'overview' | 'keypoint' | 'brief' | 'question'
|
||||
|
@@ -88,6 +88,9 @@ export const isSummaryEmpty = (summary: Summary) => {
|
||||
} else if (summary.type === 'brief') {
|
||||
const content: string[] = summary.content??''
|
||||
return content.length === 0
|
||||
} else if (summary.type === 'question') {
|
||||
const content: any[] = summary.content??[]
|
||||
return content.length === 0
|
||||
}
|
||||
return true
|
||||
}
|
||||
@@ -109,6 +112,11 @@ export const getSummaryStr = (summary: Summary) => {
|
||||
summary: ''
|
||||
}
|
||||
s += content.summary + '\n'
|
||||
} else if (summary.type === 'question') {
|
||||
const content: Array<{ q: string, a: string }> = summary.content ?? []
|
||||
s += content.map(item => {
|
||||
return item.q + '\n' + item.a + '\n'
|
||||
}).join('\n')
|
||||
}
|
||||
return s
|
||||
}
|
||||
|
Reference in New Issue
Block a user