diff --git a/public/immersive-summary.png b/public/immersive-summary.png new file mode 100644 index 0000000..59c94fb Binary files /dev/null and b/public/immersive-summary.png differ diff --git a/src/biz/Body.tsx b/src/biz/Body.tsx index 2384e72..01fcb0b 100644 --- a/src/biz/Body.tsx +++ b/src/biz/Body.tsx @@ -22,7 +22,6 @@ import { FaRegArrowAltCircleDown, IoWarning, MdExpand, - RiFileCopy2Line, RiTranslate } from 'react-icons/all' import classNames from 'classnames' @@ -32,9 +31,9 @@ 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' @@ -42,6 +41,7 @@ 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() @@ -56,6 +56,7 @@ 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) @@ -70,6 +71,10 @@ const Body = () => { 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, 2), []) + 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) { @@ -245,7 +250,7 @@ const Body = () => { {/* search */} - {(envData.searchEnabled ? envData.searchEnabled : (envData.askEnabled ?? ASK_ENABLED_DEFAULT)) &&
+ {showSearchInput &&
{searchText && }
} @@ -262,11 +267,11 @@ const Body = () => {
{/* ask */} - {(envData.askEnabled??ASK_ENABLED_DEFAULT) && (searchText || askQuestion) && + {(envData.askEnabled ?? ASK_ENABLED_DEFAULT) && (searchText || askQuestion) &&
@@ -287,8 +292,8 @@ const Body = () => {
} {!askFold && } + className={classNames('btn btn-link btn-xs', askStatus === 'pending' && 'loading')} + onClick={onAsk}>{askStatus === 'init' ? '点击提问' : (askStatus === 'pending' ? '生成中' : '重新生成')}} {!askFold && askStatus === 'init' &&
提问举例:这个视频说了什么
} {!askFold && askError &&
{askError}
}
} @@ -298,49 +303,101 @@ const Body = () => { segmentIdx={segmentIdx} bodyRef={bodyRef}/>)} {/* tip */} -
-
💡提示💡
-
可以尝试将概览生成的内容粘贴到视频评论里,发布后看看有什么效果🥳 + {/*
*/} + {/*
💡提示💡
*/} + {/*
可以尝试将概览生成的内容粘贴到视频评论里,发布后看看有什么效果🥳 */} + {/*
*/} + {/* {(segments?.length ?? 0) > 0 && } */} + {/*
*/} + {((infos == null) || infos.length === 0) &&
+
+
BibiGPT logoBibiGPT +
+
这是网页版的字幕列表,支持任意视频提取字幕总结(包括没有字幕的视频) +
+
- {(segments?.length ?? 0) > 0 && } -
-
-
BibiGPTBibiGPT + -
这是网页版的字幕列表,支持任意视频提取字幕总结(包括没有字幕的视频)
- - +
} +
+ + {/* recommend */} +
} diff --git a/src/biz/MoreBtn.tsx b/src/biz/MoreBtn.tsx index 3676194..bda7928 100644 --- a/src/biz/MoreBtn.tsx +++ b/src/biz/MoreBtn.tsx @@ -261,27 +261,27 @@ const MoreBtn = (props: Props) => { 微信公众号(IndieKKY) -
  • - { - e.preventDefault() - e.stopPropagation() - openUrl('https://bibigpt.co/r/bilibili') - }}> - BibiGPT - BibiGPT - -
  • -
  • - { - e.preventDefault() - e.stopPropagation() - openUrl('https://chromewebstore.google.com/detail/fiaeclpicddpifeflpmlgmbjgaedladf') - }}> - youtube subtitle - Youtube Caption - -
  • + {/*
  • */} + {/* { */} + {/* e.preventDefault() */} + {/* e.stopPropagation() */} + {/* openUrl('https://bibigpt.co/r/bilibili') */} + {/* }}> */} + {/* BibiGPT */} + {/* BibiGPT */} + {/* */} + {/*
  • */} + {/*
  • */} + {/* { */} + {/* e.preventDefault() */} + {/* e.stopPropagation() */} + {/* openUrl('https://chromewebstore.google.com/detail/fiaeclpicddpifeflpmlgmbjgaedladf') */} + {/* }}> */} + {/* youtube subtitle */} + {/* Youtube Caption */} + {/* */} + {/*
  • */}
  • { dispatch(setPage(PAGE_SETTINGS)) diff --git a/src/const.tsx b/src/const.tsx index d1581c5..6756274 100644 --- a/src/const.tsx +++ b/src/const.tsx @@ -159,6 +159,7 @@ 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_RATE = 0.75 export const WORDS_MIN = 500 diff --git a/src/hooks/useSubtitleService.ts b/src/hooks/useSubtitleService.ts index 96fc1ed..b508f64 100644 --- a/src/hooks/useSubtitleService.ts +++ b/src/hooks/useSubtitleService.ts @@ -86,6 +86,7 @@ const useSubtitleService = () => { if (data.data.totalHeight) { dispatch(setTotalHeight(Math.min(Math.max(data.data.totalHeight, TOTAL_HEIGHT_MIN), TOTAL_HEIGHT_MAX))) } + console.debug('setSettings', data.data) } } @@ -98,12 +99,12 @@ const useSubtitleService = () => { // 有数据时自动展开 useEffect(() => { - if ((data != null) && data.body.length > 0) { + if (infos != null) { eventBus.emit({ type: EVENT_EXPAND }) } - }, [data, eventBus]) + }, [eventBus, infos]) // 当前未展示 & (未折叠 | 自动展开) & 有列表 => 展示第一个 useEffect(() => { @@ -207,7 +208,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(() => {