ajax/bilibili-subtitle
1
0
Fork 0
Code Pull Requests Releases Activity

优化

Browse Source
This commit is contained in:
IndieKKY
2024-10-07 09:36:48 +08:00
parent 5005806917
commit f69bc7f040
1 changed files with 78 additions and 79 deletions
Download Patch File Download Diff File Expand all files Collapse all files

157
src/pages/OptionsPage.tsx
View File

@@ -27,17 +27,23 @@ import toast from 'react-hot-toast'
import {useBoolean, useEventTarget} from 'ahooks'
import {useEventChecked} from '@kky002/kky-hooks'
import { useMessage } from '@/hooks/message'
import { FaChevronDown, FaChevronUp } from 'react-icons/fa'
const Section = (props: {
title: ShowElement
htmlFor?: string
} & PropsWithChildren) => {
const {title, htmlFor, children} = props
return <div className='flex flex-col gap-1'>
<label className='font-medium desc-lighter text-sm' htmlFor={htmlFor}>{title}</label>
<div className='flex flex-col gap-1 rounded py-2 px-2 bg-base-200/75'>{children}</div>
</div>
}
const OptionCard = ({ title, children, defaultExpanded = true }: { title: React.ReactNode; children: React.ReactNode; defaultExpanded?: boolean }) => {
const [isExpanded, setIsExpanded] = useState(defaultExpanded);
return (
<div className="card bg-base-200 shadow-xl mb-4">
<div className="card-body p-4">
<h2 className="card-title flex justify-between cursor-pointer" onClick={() => setIsExpanded(!isExpanded)}>
{title}
{isExpanded ? <FaChevronUp /> : <FaChevronDown />}
</h2>
{isExpanded && <div className="mt-4">{children}</div>}
</div>
</div>
);
};
const FormItem = (props: {
title: ShowElement
@@ -45,14 +51,16 @@ const FormItem = (props: {
htmlFor?: string
} & PropsWithChildren) => {
const {title, tip, htmlFor, children} = props
return <div className='flex items-center gap-2'>
<div className={classNames('basis-3/12 justify-end flex-center', tip && 'tooltip tooltip-right z-[100] underline underline-offset-2 decoration-dashed')} data-tip={tip}>
<label className='font-medium desc' htmlFor={htmlFor}>{title}</label>
return (
<div className='flex items-center gap-4 mb-2'>
<div className={classNames('w-1/3 text-right', tip && 'tooltip tooltip-right z-50')} data-tip={tip}>
<label className={classNames('font-medium', tip && 'border-b border-dotted border-current pb-[2px]')} htmlFor={htmlFor}>{title}</label>
</div>
<div className='w-2/3'>
{children}
</div>
</div>
<div className='basis-9/12 flex items-center'>
{children}
</div>
</div>
)
}
const OptionsPage = () => {
@@ -199,9 +207,9 @@ const OptionsPage = () => {
setAiTypeValue('gemini')
}, [])
return <div className='flex justify-center'>
<div className="w-2/3 max-w-[600px] flex flex-col gap-3 p-2">
<Section title='通用配置'>
return (
<div className='container mx-auto max-w-3xl p-4'>
<OptionCard title="通用配置">
<FormItem title='侧边栏' htmlFor='sidePanel' tip='字幕列表是否显示在侧边栏'>
<input id='sidePanel' type='checkbox' className='toggle toggle-primary' checked={sidePanelValue}
onChange={setSidePanelValue}/>
@@ -216,37 +224,37 @@ const OptionsPage = () => {
</FormItem>}
<FormItem title='主题'>
<div className="btn-group">
<button onClick={onSelTheme1} className={classNames('btn btn-xs no-animation', (!themeValue || themeValue === 'system')?'btn-active':'')}>系统</button>
<button onClick={onSelTheme2} className={classNames('btn btn-xs no-animation', themeValue === 'light'?'btn-active':'')}>浅色</button>
<button onClick={onSelTheme3} className={classNames('btn btn-xs no-animation', themeValue === 'dark'?'btn-active':'')}>深色</button>
<button onClick={onSelTheme1} className={classNames('btn btn-sm no-animation', (!themeValue || themeValue === 'system')?'btn-active':'')}>系统</button>
<button onClick={onSelTheme2} className={classNames('btn btn-sm no-animation', themeValue === 'light'?'btn-active':'')}>浅色</button>
<button onClick={onSelTheme3} className={classNames('btn btn-sm no-animation', themeValue === 'dark'?'btn-active':'')}>深色</button>
</div>
</FormItem>
<FormItem title='字体大小'>
<div className="btn-group">
<button onClick={onSelFontSize1} className={classNames('btn btn-xs no-animation', (!fontSizeValue || fontSizeValue === 'normal')?'btn-active':'')}>普通</button>
<button onClick={onSelFontSize2} className={classNames('btn btn-xs no-animation', fontSizeValue === 'large'?'btn-active':'')}>加大</button>
<button onClick={onSelFontSize1} className={classNames('btn btn-sm no-animation', (!fontSizeValue || fontSizeValue === 'normal')?'btn-active':'')}>普通</button>
<button onClick={onSelFontSize2} className={classNames('btn btn-sm no-animation', fontSizeValue === 'large'?'btn-active':'')}>加大</button>
</div>
</FormItem>
<FormItem title='AI类型' tip='OPENAI质量更高'>
<div className="btn-group">
<button onClick={onSelOpenai} className={classNames('btn btn-xs no-animation', (!aiTypeValue || aiTypeValue === 'openai')?'btn-active':'')}>OpenAI</button>
<button onClick={onSelGemini} className={classNames('btn btn-xs no-animation', aiTypeValue === 'gemini'?'btn-active':'')}>Gemini</button>
<button onClick={onSelOpenai} className={classNames('btn btn-sm', (!aiTypeValue || aiTypeValue === 'openai')?'btn-active':'')}>OpenAI</button>
<button onClick={onSelGemini} className={classNames('btn btn-sm', aiTypeValue === 'gemini'?'btn-active':'')}>Gemini</button>
</div>
</FormItem>
</Section>
</OptionCard>
{(!aiTypeValue || aiTypeValue === 'openai') && <Section title='openai配置'>
<FormItem title='ApiKey' htmlFor='apiKey'>
<OptionCard title="AI 配置">
{(!aiTypeValue || aiTypeValue === '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}/>
</FormItem>
<FormItem title='服务器' htmlFor='serverUrl'>
</FormItem>}
{(!aiTypeValue || aiTypeValue === 'openai') && <FormItem title='服务器' htmlFor='serverUrl'>
<input id='serverUrl' type='text' className='input input-sm input-bordered w-full'
placeholder={DEFAULT_SERVER_URL_OPENAI} value={serverUrlValue}
onChange={e => setServerUrlValue(e.target.value)}/>
</FormItem>
<div>
<div className='desc text-xs text-center'>
</FormItem>}
{(!aiTypeValue || aiTypeValue === 'openai') && <div>
<div className='desc text-sm 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>
@@ -262,16 +270,16 @@ const OptionsPage = () => {
{/* 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限制'>
</div>}
{(!aiTypeValue || aiTypeValue === 'openai') && <FormItem title='模型选择' htmlFor='modelSel' tip='注意，不同模型有不同价格与token限制'>
<select id='modelSel' className="select select-sm select-bordered" value={modelValue}
onChange={onChangeModelValue}>
{MODELS.map(model => <option key={model.code} value={model.code}>{model.name}</option>)}
</select>
</FormItem>
<div className='desc text-xs'>
</FormItem>}
{(!aiTypeValue || aiTypeValue === 'openai') && <div className='desc text-sm'>
{MODEL_TIP}
</div>
</div>}
{modelValue === 'custom' && <FormItem title='模型名' htmlFor='customModel'>
<input id='customModel' type='text' className='input input-sm input-bordered w-full' placeholder='llama2'
value={customModelValue} onChange={onChangeCustomModelValue}/>
@@ -282,26 +290,23 @@ const OptionsPage = () => {
value={customModelTokensValue}
onChange={e => setCustomModelTokensValue(e.target.value ? parseInt(e.target.value) : undefined)}/>
</FormItem>}
</Section>}
{aiTypeValue === 'gemini' && <Section title='gemini配置'>
<FormItem title='ApiKey' htmlFor='geminiApiKey'>
{aiTypeValue === 'gemini' && <FormItem title='ApiKey' htmlFor='geminiApiKey'>
<input id='geminiApiKey' type='text' className='input input-sm input-bordered w-full' placeholder='xxx'
value={geminiApiKeyValue} onChange={onChangeGeminiApiKeyValue}/>
</FormItem>
<div>
<div className='desc text-xs'>
</FormItem>}
{aiTypeValue === 'gemini' && <div>
<div className='desc text-sm'>
<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 className='text-sm text-error flex items-center'><IoWarning className='text-sm text-warning'/>谷歌模型安全要求比较高，有些视频可能无法生成总结!
</div>
</div>
</div>
</Section>}
</div>}
</OptionCard>
<Section title={<div className='flex items-center'>
<OptionCard title={<div className='flex items-center'>
翻译配置
{!apiKeySetted && <div className='tooltip tooltip-right ml-1' data-tip='未设置ApiKey无法使用'>
<IoWarning className='text-sm text-warning'/>
@@ -320,24 +325,24 @@ const OptionsPage = () => {
<FormItem title='翻译条数' tip='每次翻译条数'>
<div className='flex-1 flex flex-col'>
<input type="range" min={TRANSLATE_FETCH_MIN} max={TRANSLATE_FETCH_MAX} step={TRANSLATE_FETCH_STEP} value={fetchAmountValue} className="range range-primary" onChange={onFetchAmountChange} />
<div className="w-full flex justify-between text-xs px-2">
<div className="w-full flex justify-between text-sm px-2">
{transFetchAmountList.map(amount => <span key={amount}>{amount}</span>)}
</div>
</div>
</FormItem>
<FormItem title='翻译显示'>
<div className="btn-group">
<button onClick={onSel1} className={classNames('btn btn-xs no-animation', (!transDisplayValue || transDisplayValue === 'originPrimary')?'btn-active':'')}>原文为主</button>
<button onClick={onSel2} className={classNames('btn btn-xs no-animation', transDisplayValue === 'targetPrimary'?'btn-active':'')}>翻译为主</button>
<button onClick={onSel3} className={classNames('btn btn-xs no-animation', transDisplayValue === 'target'?'btn-active':'')}>仅翻译</button>
<button onClick={onSel1} className={classNames('btn btn-sm no-animation', (!transDisplayValue || transDisplayValue === 'originPrimary')?'btn-active':'')}>原文为主</button>
<button onClick={onSel2} className={classNames('btn btn-sm no-animation', transDisplayValue === 'targetPrimary'?'btn-active':'')}>翻译为主</button>
<button onClick={onSel3} className={classNames('btn btn-sm no-animation', transDisplayValue === 'target'?'btn-active':'')}>仅翻译</button>
</div>
</FormItem>
<FormItem title='隐藏翻译' tip='取消自动翻译时,隐藏已翻译内容' htmlFor='hideOnDisableAutoTranslate'>
<input id='hideOnDisableAutoTranslate' type='checkbox' className='toggle toggle-primary' checked={hideOnDisableAutoTranslateValue}
onChange={onChangeHideOnDisableAutoTranslate}/>
</FormItem>
</Section>
<Section title={<div className='flex items-center'>
</OptionCard>
<OptionCard title={<div className='flex items-center'>
总结配置
{!apiKeySetted && <div className='tooltip tooltip-right ml-1' data-tip='未设置ApiKey无法使用'>
<IoWarning className='text-sm text-warning'/>
@@ -360,17 +365,17 @@ const OptionsPage = () => {
<div className='flex-1 flex flex-col'>
<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"> */}
{/* <div className="w-full flex justify-between text-sm px-2"> */}
{/* {wordsList.map(words => <span key={words}>{words}</span>)} */}
{/* </div> */}
</div>
</FormItem>
<div className='desc text-xs'>
<div className='desc text-sm'>
当前选择的模型的分段字数上限是<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'>
</OptionCard>
<OptionCard title={<div className='flex items-center'>
搜索配置
</div>}>
<FormItem title='启用搜索' htmlFor='searchEnabled' tip='是否启用字幕搜索功能'>
@@ -381,23 +386,23 @@ const OptionsPage = () => {
<input id='cnSearchEnabled' type='checkbox' className='toggle toggle-primary' checked={cnSearchEnabledValue}
onChange={setCnSearchEnabledValue}/>
</FormItem>
</Section>
<Section title={<div className='flex items-center'>
</OptionCard>
<OptionCard 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>
</OptionCard>
<Section title='提示词配置'>
<OptionCard title='提示词配置'>
<div className='flex justify-center'>
<a className='text-xs link link-primary' onClick={togglePromptsFold}>点击{promptsFold ? '展开' : '折叠'}</a>
<a className='text-sm 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={() => {
<div className='link text-sm' onClick={() => {
setPromptsValue({
...promptsValue,
// @ts-expect-error
@@ -414,20 +419,14 @@ const OptionsPage = () => {
})
}}/>
</FormItem>)}
</Section>
</OptionCard>
<div className='flex justify-center gap-5'>
<button className='btn btn-primary btn-sm' onClick={onSave}>保存</button>
<button className='btn btn-sm' onClick={onCancel}>取消</button>
{/* <button className='btn btn-sm' onClick={() => {
dispatch(setTempData({
reviewed: undefined,
// reviewActions: 0
}))
}}>重置</button> */}
<div className='flex flex-col justify-center items-center gap-5 mt-6'>
<button className='btn btn-primary btn-wide' onClick={onSave}>保存</button>
<button className='btn btn-wide' onClick={onCancel}>取消</button>
</div>
</div>
</div>
)
}
export default OptionsPage
export default OptionsPage