Kaotings/www_site
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

tts: 将图片转文字/查错字/自动分段三个功能卡移至输入文本卡片内

Browse Source
This commit is contained in:
2570050763@qq.com 2026-09-18 11:49:33 +08:00
parent b4c3a99d67
commit d79c6cb67f
1 changed files with 7 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
app/tts/page.tsx
View File

@ -476,6 +476,13 @@ export default function TtsPage() {
spellCheck
suppressContentEditableWarning
/>
<div className="mt-6 grid gap-4 md:grid-cols-3">
<button className="assist-card text-left" disabled={helperBusy} onClick={() => fileInputRef.current?.click()} onDragOver={(event) => event.preventDefault()} onDrop={(event) => { event.preventDefault(); void handleOcr(event.dataTransfer.files[0]); }} type="button"><span className="assist-icon">▧</span><span><strong>图片转文字</strong><small>上传或拖入截图、纸稿、PPT，识别结果填入编辑区</small></span><span className="assist-arrow">→</span></button>
<button className="assist-card text-left" onClick={checkTypos} type="button"><span className="assist-icon">✓</span><span><strong>生成前查错字</strong><small>扫描疑似错字，红色波浪线标出并支持一键替换</small></span><span className="assist-arrow">→</span></button>
<button className="assist-card text-left" onClick={autoSegment} type="button"><span className="assist-icon">↵</span><span><strong>自动分段</strong><small>按句号、问号和感叹号切分长文案，方便控制节奏</small></span><span className="assist-arrow">→</span></button>
</div>
<input accept="image/*" className="hidden" onChange={(event) => void handleOcr(event.target.files?.[0])} ref={fileInputRef} type="file" />
{helperMessage ? <p className="mt-4 rounded-lg border border-cyan/20 bg-cyan/5 px-3 py-2 text-xs text-cyan">{helperMessage}</p> : null}
<div className="mt-5 border-t border-line pt-5">
<div className="flex flex-wrap items-center gap-2">
<span className="mr-1 text-sm text-muted">输入停顿</span>
@ -524,17 +531,6 @@ export default function TtsPage() {
</aside>
</div>
<section className="mt-8 rounded-2xl border border-line bg-panel/40 p-5 sm:p-7">
<div className="flex flex-col justify-between gap-4 sm:flex-row sm:items-end"><span className="rounded-full border border-cyan/20 bg-cyan/5 px-3 py-1 text-xs text-cyan">少打字 · 少校对 · 少返工</span></div>
<div className="mt-6 grid gap-4 md:grid-cols-3">
<button className="assist-card text-left" disabled={helperBusy} onClick={() => fileInputRef.current?.click()} onDragOver={(event) => event.preventDefault()} onDrop={(event) => { event.preventDefault(); void handleOcr(event.dataTransfer.files[0]); }} type="button"><span className="assist-icon">▧</span><span><strong>图片转文字</strong><small>上传或拖入截图、纸稿、PPT，识别结果填入编辑区</small></span><span className="assist-arrow">→</span></button>
<button className="assist-card text-left" onClick={checkTypos} type="button"><span className="assist-icon">✓</span><span><strong>生成前查错字</strong><small>扫描疑似错字，红色波浪线标出并支持一键替换</small></span><span className="assist-arrow">→</span></button>
<button className="assist-card text-left" onClick={autoSegment} type="button"><span className="assist-icon">↵</span><span><strong>自动分段</strong><small>按句号、问号和感叹号切分长文案，方便控制节奏</small></span><span className="assist-arrow">→</span></button>
</div>
<input accept="image/*" className="hidden" onChange={(event) => void handleOcr(event.target.files?.[0])} ref={fileInputRef} type="file" />
{helperMessage ? <p className="mt-4 rounded-lg border border-cyan/20 bg-cyan/5 px-3 py-2 text-xs text-cyan">{helperMessage}</p> : null}
</section>
{error ? <p className="mt-6 rounded-xl border border-danger/30 bg-danger/10 px-4 py-3 text-sm leading-6 text-danger" role="alert">{error}</p> : null}
{result ? <section className="mt-8 rounded-2xl border border-success/30 bg-success/5 p-5 sm:p-7" aria-labelledby="tts-result-title"><div className="flex items-start justify-between gap-4"><div><p className="text-xs font-semibold uppercase tracking-[0.18em] text-success">04 / Result</p><h2 className="mt-2 text-xl font-semibold" id="tts-result-title">生成完成</h2><p className="mt-2 break-all text-sm text-muted">{result.fileName}</p></div><WaveIcon className="h-8 w-8 shrink-0 text-success" /></div><audio autoPlay className="mt-5 w-full" controls src={result.url} /><div className="mt-4 flex justify-end"><a className="button-secondary" download={result.fileName} href={result.url}><BrandIcon />下载音频</a></div></section> : <section className="mt-8 rounded-2xl border border-line bg-panel/40 p-5 sm:p-7"><div className="flex min-h-28 flex-col items-center justify-center text-center"><span className="text-cyan"><WaveIcon className="h-9 w-9" /></span><p className="mt-3 font-semibold">生成结果会显示在这里</p><p className="mt-1 text-sm text-muted">选择音色并输入文本后，即可试听和下载。</p></div></section>}