fix: 性能优化、前端转写器配置、任务进度丢失及 MLX Whisper 回退问题修复

### 性能优化
- 后端任务执行从串行锁改为 ThreadPoolExecutor 并发执行(默认3线程)
- 添加 GZipMiddleware 响应压缩 + Nginx gzip 配置
- 数据库连接池参数优化(pool_size=10, max_overflow=20)
- 视频帧提取并行化(ThreadPoolExecutor)
- LLM 重试配置缓存到实例,避免每次请求读 env var
- 前端路由级代码拆分(React.lazy + Suspense)
- Vite manualChunks 拆分 markdown/markmap/vendor
- MarkdownViewer 用 React.memo + useMemo 减少不必要渲染
- NoteHistory Fuse.js 实例 useMemo 缓存
- useTaskPolling 无待处理任务时跳过轮询
- 移除 antd 依赖(NoteForm Alert、modelForm Tag),改用 shadcn/ui

### 前端转写器配置(新功能)
- 新增 TranscriberConfigManager(JSON 文件存储,替代环境变量)
- 新增 GET/POST /transcriber_config API 端点
- 新增 GET /transcriber_models_status 模型下载状态查询
- 新增 POST /transcriber_download 后台模型下载触发
- 前端转写器设置页面:引擎选择、模型大小选择、模型下载管理
- deploy_status 端点同步从配置文件读取

### Bug 修复
- 修复任务进行中切换页面后进度丢失:Home.tsx status 派生逻辑补全中间状态
- 修复 MLX Whisper 静默回退 fast-whisper:移除环境变量门控,macOS 下自动尝试导入
- MLX Whisper 不可用时抛出 RuntimeError 而非静默回退
- 前端展示 MLX Whisper 可用性状态,不可用时禁用保存

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
huangjianwu
2026-03-23 14:09:34 +08:00
parent 1cd8c33983
commit c105342ded
24 changed files with 1016 additions and 356 deletions

View File

@@ -1,5 +1,6 @@
import {
BotMessageSquare,
Captions,
HardDriveDownload,
Info,
Activity,
@@ -14,14 +15,12 @@ const Menu = () => {
icon: <BotMessageSquare />,
path: '/settings/model',
},
// TODO :下一版本升级优化
// {
// id: ' transcriber',
// name: '音频转译配置',
// icon: <Captions />,
// path: '/settings/transcriber',
// },
// //下载配置
{
id: 'transcriber',
name: '音频转写配置',
icon: <Captions />,
path: '/settings/transcriber',
},
{
id: 'download',
name: '下载配置',

View File

@@ -1,8 +1,255 @@
const Transcriber = () => {
import { useState, useEffect, useCallback } from 'react'
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
import { Button } from '@/components/ui/button'
import { Badge } from '@/components/ui/badge'
import {
Select,
SelectContent,
SelectItem,
SelectTrigger,
SelectValue,
} from '@/components/ui/select'
import { Alert, AlertDescription } from '@/components/ui/alert'
import { AudioLines, AlertTriangle, CheckCircle2, Download, Loader2, Save, XCircle } from 'lucide-react'
import { toast } from 'react-hot-toast'
import {
getTranscriberConfig,
updateTranscriberConfig,
getModelsStatus,
downloadModel,
TranscriberConfig,
ModelStatus,
} from '@/services/transcriber'
const isWhisperType = (type: string) =>
type === 'fast-whisper' || type === 'mlx-whisper'
export default function Transcriber() {
const [config, setConfig] = useState<TranscriberConfig | null>(null)
const [loading, setLoading] = useState(true)
const [saving, setSaving] = useState(false)
const [selectedType, setSelectedType] = useState('')
const [selectedModelSize, setSelectedModelSize] = useState('')
const [modelStatuses, setModelStatuses] = useState<ModelStatus[]>([])
const [mlxModelStatuses, setMlxModelStatuses] = useState<ModelStatus[]>([])
const [mlxAvailable, setMlxAvailable] = useState(false)
const fetchModelsStatus = useCallback(async () => {
try {
const data = await getModelsStatus()
setModelStatuses(data.whisper)
setMlxModelStatuses(data.mlx_whisper)
setMlxAvailable(data.mlx_available)
} catch {
// 静默失败,不阻塞主流程
}
}, [])
useEffect(() => {
const load = async () => {
try {
const data = await getTranscriberConfig()
setConfig(data)
setSelectedType(data.transcriber_type)
setSelectedModelSize(data.whisper_model_size)
} catch {
toast.error('获取转写器配置失败')
} finally {
setLoading(false)
}
}
load()
fetchModelsStatus()
}, [fetchModelsStatus])
// 有下载中的模型时自动轮询状态
useEffect(() => {
const hasDownloading =
modelStatuses.some(m => m.downloading) || mlxModelStatuses.some(m => m.downloading)
if (!hasDownloading) return
const timer = setInterval(fetchModelsStatus, 3000)
return () => clearInterval(timer)
}, [modelStatuses, mlxModelStatuses, fetchModelsStatus])
const handleSave = async () => {
setSaving(true)
try {
const payload: { transcriber_type: string; whisper_model_size?: string } = {
transcriber_type: selectedType,
}
if (isWhisperType(selectedType)) {
payload.whisper_model_size = selectedModelSize
}
await updateTranscriberConfig(payload)
toast.success('转写器配置已保存')
} catch {
toast.error('保存失败')
} finally {
setSaving(false)
}
}
const handleDownload = async (modelSize: string, transcriberType: string) => {
try {
await downloadModel({ model_size: modelSize, transcriber_type: transcriberType })
toast.success(`模型 ${modelSize} 开始下载`)
// 立即刷新状态
setTimeout(fetchModelsStatus, 1000)
} catch {
toast.error('下载请求失败')
}
}
if (loading) {
return (
<div className="flex h-64 items-center justify-center">
<Loader2 className="h-6 w-6 animate-spin text-neutral-400" />
</div>
)
}
if (!config) {
return <div className="p-6 text-center text-neutral-500"></div>
}
const currentModels = selectedType === 'mlx-whisper' ? mlxModelStatuses : modelStatuses
return (
<div className="flex h-screen w-full flex-col items-center justify-center">
<h1 className="text-center text-4xl font-bold">Transcriber is under development</h1>
<div className="space-y-6 p-6">
<div>
<h2 className="text-2xl font-semibold"></h2>
<p className="mt-1 text-sm text-neutral-500">
使
</p>
</div>
{/* 转写引擎选择 */}
<Card>
<CardHeader>
<CardTitle className="flex items-center gap-2 text-lg">
<AudioLines className="h-5 w-5" />
</CardTitle>
</CardHeader>
<CardContent className="space-y-4">
<div className="space-y-2">
<label className="text-sm font-medium"></label>
<Select value={selectedType} onValueChange={setSelectedType}>
<SelectTrigger className="w-full max-w-xs">
<SelectValue />
</SelectTrigger>
<SelectContent>
{config.available_types.map(t => (
<SelectItem key={t.value} value={t.value}>
{t.label}
</SelectItem>
))}
</SelectContent>
</Select>
</div>
{isWhisperType(selectedType) && (
<div className="space-y-2">
<label className="text-sm font-medium">Whisper </label>
<Select value={selectedModelSize} onValueChange={setSelectedModelSize}>
<SelectTrigger className="w-full max-w-xs">
<SelectValue />
</SelectTrigger>
<SelectContent>
{config.whisper_model_sizes.map(size => {
const status = currentModels.find(m => m.model_size === size)
return (
<SelectItem key={size} value={size}>
<span className="flex items-center gap-2">
{size}
{status?.downloaded && (
<CheckCircle2 className="h-3 w-3 text-green-500" />
)}
</span>
</SelectItem>
)
})}
</SelectContent>
</Select>
<p className="text-xs text-neutral-400">
</p>
</div>
)}
{selectedType === 'mlx-whisper' && !config.mlx_whisper_available && (
<Alert variant="warning" className="text-sm">
<AlertTriangle className="h-4 w-4" />
<AlertDescription>
MLX Whisper macOS {' '}
<code className="rounded bg-neutral-100 px-1">pip install mlx_whisper</code>
</AlertDescription>
</Alert>
)}
<Button onClick={handleSave} disabled={saving || (selectedType === 'mlx-whisper' && !config.mlx_whisper_available)} className="mt-2">
{saving ? (
<Loader2 className="mr-2 h-4 w-4 animate-spin" />
) : (
<Save className="mr-2 h-4 w-4" />
)}
</Button>
</CardContent>
</Card>
{/* Whisper 模型管理 */}
{isWhisperType(selectedType) && currentModels.length > 0 && (
<Card>
<CardHeader>
<CardTitle className="flex items-center gap-2 text-lg">
<Download className="h-5 w-5" />
<span className="text-sm font-normal text-neutral-400">
{selectedType === 'mlx-whisper' ? 'MLX Whisper' : 'Faster Whisper'}
</span>
</CardTitle>
</CardHeader>
<CardContent>
<div className="space-y-3">
{currentModels.map(model => (
<div
key={model.model_size}
className="flex items-center justify-between rounded-md border px-4 py-3"
>
<div className="flex items-center gap-3">
<span className="font-medium">{model.model_size}</span>
{model.downloaded ? (
<Badge variant="default" className="bg-green-500 hover:bg-green-600">
</Badge>
) : model.downloading ? (
<Badge variant="secondary" className="flex items-center gap-1">
<Loader2 className="h-3 w-3 animate-spin" />
</Badge>
) : (
<Badge variant="outline"></Badge>
)}
</div>
{!model.downloaded && !model.downloading && (
<Button
size="sm"
variant="outline"
onClick={() => handleDownload(model.model_size, selectedType)}
>
<Download className="mr-1 h-4 w-4" />
</Button>
)}
</div>
))}
</div>
</CardContent>
</Card>
)}
</div>
)
}
export default Transcriber