425 lines
16 KiB
TypeScript
425 lines
16 KiB
TypeScript
'use client';
|
|
|
|
import { useState, useEffect } from 'react';
|
|
import Link from 'next/link';
|
|
import BackButton from '@/app/components/BackButton';
|
|
|
|
type VideoTranscript = {
|
|
id: string;
|
|
speech_detected: boolean;
|
|
language: string | null;
|
|
audio_type: string | null;
|
|
transcript: string | null;
|
|
non_speech_summary: string | null;
|
|
};
|
|
|
|
type Video = {
|
|
aweme_id: string;
|
|
desc: string;
|
|
cover_url: string;
|
|
duration_ms: number;
|
|
author: {
|
|
nickname: string;
|
|
};
|
|
transcript: VideoTranscript | null;
|
|
};
|
|
|
|
type ApiResponse = {
|
|
videos: Video[];
|
|
total: number;
|
|
};
|
|
|
|
export default function SttVideosPage() {
|
|
const [videos, setVideos] = useState<Video[]>([]);
|
|
const [loading, setLoading] = useState(true);
|
|
const [error, setError] = useState<string | null>(null);
|
|
const [transcribing, setTranscribing] = useState<Set<string>>(new Set());
|
|
const [filter, setFilter] = useState<'all' | 'transcribed' | 'pending'>('all');
|
|
const [batchTranscribing, setBatchTranscribing] = useState(false);
|
|
const [batchProgress, setBatchProgress] = useState({ current: 0, total: 0 });
|
|
|
|
useEffect(() => {
|
|
fetchVideos();
|
|
}, []);
|
|
|
|
const fetchVideos = async () => {
|
|
try {
|
|
setLoading(true);
|
|
const response = await fetch('/api/admin/stt/videos');
|
|
if (!response.ok) {
|
|
throw new Error('Failed to fetch videos');
|
|
}
|
|
const data: ApiResponse = await response.json();
|
|
setVideos(data.videos);
|
|
} catch (err) {
|
|
setError(err instanceof Error ? err.message : 'Unknown error');
|
|
} finally {
|
|
setLoading(false);
|
|
}
|
|
};
|
|
|
|
// 简单的 sleep 工具
|
|
const sleep = (ms: number) => new Promise((resolve) => setTimeout(resolve, ms));
|
|
|
|
type PollOptions = {
|
|
intervalMs?: number;
|
|
maxAttempts?: number;
|
|
};
|
|
|
|
// 轮询某个视频的转写状态直至完成或超时
|
|
const pollVideoUntilTranscribed = async (
|
|
awemeId: string,
|
|
{ intervalMs = 2000, maxAttempts = 30 }: PollOptions = {}
|
|
): Promise<boolean> => {
|
|
for (let attempt = 0; attempt < maxAttempts; attempt++) {
|
|
try {
|
|
const resp = await fetch('/api/admin/stt/videos');
|
|
if (resp.ok) {
|
|
const data: ApiResponse = await resp.json();
|
|
setVideos(data.videos);
|
|
const v = data.videos.find((x) => x.aweme_id === awemeId);
|
|
if (v && v.transcript) {
|
|
return true;
|
|
}
|
|
}
|
|
} catch (e) {
|
|
// 忽略网络错误，继续轮询
|
|
}
|
|
await sleep(intervalMs);
|
|
}
|
|
return false;
|
|
};
|
|
|
|
const handleTranscribe = async (awemeId: string) => {
|
|
setTranscribing(prev => new Set(prev).add(awemeId));
|
|
try {
|
|
const response = await fetch(`/api/stt?awemeId=${awemeId}`);
|
|
if (!response.ok) {
|
|
throw new Error('Failed to transcribe video');
|
|
}
|
|
// 轮询直到该视频转写完成或超时，避免后端异步导致立即刷新拿不到最新状态
|
|
const done = await pollVideoUntilTranscribed(awemeId);
|
|
if (!done) {
|
|
// 兜底刷新一次
|
|
await fetchVideos();
|
|
}
|
|
} catch (err) {
|
|
alert(err instanceof Error ? err.message : 'Transcription failed');
|
|
} finally {
|
|
setTranscribing(prev => {
|
|
const next = new Set(prev);
|
|
next.delete(awemeId);
|
|
return next;
|
|
});
|
|
}
|
|
};
|
|
|
|
const handleBatchTranscribe = async () => {
|
|
const pendingVideos = videos.filter(v => v.transcript === null);
|
|
if (pendingVideos.length === 0) {
|
|
alert('没有待转写的视频');
|
|
return;
|
|
}
|
|
|
|
if (!confirm(`确定要转写 ${pendingVideos.length} 个视频吗？这可能需要较长时间。`)) {
|
|
return;
|
|
}
|
|
|
|
setBatchTranscribing(true);
|
|
setBatchProgress({ current: 0, total: pendingVideos.length });
|
|
|
|
const pollers: Promise<boolean>[] = [];
|
|
for (let i = 0; i < pendingVideos.length; i++) {
|
|
const video = pendingVideos[i];
|
|
setBatchProgress({ current: i + 1, total: pendingVideos.length });
|
|
setTranscribing(prev => new Set(prev).add(video.aweme_id));
|
|
|
|
try {
|
|
const response = await fetch(`/api/stt?awemeId=${video.aweme_id}`);
|
|
if (!response.ok) {
|
|
console.error(`Failed to transcribe video ${video.aweme_id}`);
|
|
}
|
|
// 为该视频启动后台轮询，不阻塞批处理的顺序执行
|
|
const p = pollVideoUntilTranscribed(video.aweme_id).finally(() => {
|
|
setTranscribing(prev => {
|
|
const next = new Set(prev);
|
|
next.delete(video.aweme_id);
|
|
return next;
|
|
});
|
|
});
|
|
pollers.push(p);
|
|
} catch (err) {
|
|
console.error(`Error transcribing video ${video.aweme_id}:`, err);
|
|
}
|
|
}
|
|
|
|
// 等待所有轮询结束（完成或超时），再进行最终刷新
|
|
if (pollers.length > 0) {
|
|
await Promise.allSettled(pollers);
|
|
}
|
|
await fetchVideos();
|
|
setBatchTranscribing(false);
|
|
setBatchProgress({ current: 0, total: 0 });
|
|
alert('批量转写完成！');
|
|
};
|
|
|
|
const filteredVideos = videos.filter(v => {
|
|
if (filter === 'transcribed') return v.transcript !== null;
|
|
if (filter === 'pending') return v.transcript === null;
|
|
return true;
|
|
});
|
|
|
|
const stats = {
|
|
total: videos.length,
|
|
transcribed: videos.filter(v => v.transcript !== null).length,
|
|
pending: videos.filter(v => v.transcript === null).length,
|
|
};
|
|
|
|
if (loading) {
|
|
return (
|
|
<div className="min-h-screen bg-gray-50 p-8">
|
|
<div className="max-w-7xl mx-auto">
|
|
<div className="text-center py-12">
|
|
<div className="inline-block animate-spin rounded-full h-12 w-12 border-b-2 border-gray-900"></div>
|
|
<p className="mt-4 text-gray-600">加载中...</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
if (error) {
|
|
return (
|
|
<div className="min-h-screen bg-gray-50 p-8">
|
|
<div className="max-w-7xl mx-auto">
|
|
<div className="bg-red-50 border border-red-200 rounded-lg p-6 text-center">
|
|
<p className="text-red-600">错误: {error}</p>
|
|
<button
|
|
onClick={fetchVideos}
|
|
className="mt-4 px-4 py-2 bg-red-600 text-white rounded-lg hover:bg-red-700"
|
|
>
|
|
重试
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<div className="min-h-screen bg-gray-50">
|
|
<div className="max-w-7xl mx-auto p-8">
|
|
{/* Header */}
|
|
<div className="mb-8">
|
|
<BackButton />
|
|
<h1 className="text-3xl font-bold text-gray-900 mt-4">视频转写管理</h1>
|
|
<p className="text-gray-600 mt-2">管理视频的语音转写状态</p>
|
|
</div>
|
|
|
|
{/* Stats */}
|
|
<div className="grid grid-cols-1 md:grid-cols-3 gap-6 mb-8">
|
|
<div className="bg-white rounded-lg shadow p-6">
|
|
<div className="text-sm text-gray-600">总视频数</div>
|
|
<div className="text-3xl font-bold text-gray-900 mt-2">{stats.total}</div>
|
|
</div>
|
|
<div className="bg-white rounded-lg shadow p-6">
|
|
<div className="text-sm text-gray-600">已转写</div>
|
|
<div className="text-3xl font-bold text-green-600 mt-2">{stats.transcribed}</div>
|
|
</div>
|
|
<div className="bg-white rounded-lg shadow p-6">
|
|
<div className="text-sm text-gray-600">待转写</div>
|
|
<div className="text-3xl font-bold text-orange-600 mt-2">{stats.pending}</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Filter */}
|
|
<div className="bg-white rounded-lg shadow p-4 mb-6">
|
|
<div className="flex items-center justify-between">
|
|
<div className="flex gap-4">
|
|
<button
|
|
onClick={() => setFilter('all')}
|
|
className={`px-4 py-2 rounded-lg font-medium transition-colors ${
|
|
filter === 'all'
|
|
? 'bg-blue-600 text-white'
|
|
: 'bg-gray-100 text-gray-700 hover:bg-gray-200'
|
|
}`}
|
|
>
|
|
全部 ({stats.total})
|
|
</button>
|
|
<button
|
|
onClick={() => setFilter('transcribed')}
|
|
className={`px-4 py-2 rounded-lg font-medium transition-colors ${
|
|
filter === 'transcribed'
|
|
? 'bg-green-600 text-white'
|
|
: 'bg-gray-100 text-gray-700 hover:bg-gray-200'
|
|
}`}
|
|
>
|
|
已转写 ({stats.transcribed})
|
|
</button>
|
|
<button
|
|
onClick={() => setFilter('pending')}
|
|
className={`px-4 py-2 rounded-lg font-medium transition-colors ${
|
|
filter === 'pending'
|
|
? 'bg-orange-600 text-white'
|
|
: 'bg-gray-100 text-gray-700 hover:bg-gray-200'
|
|
}`}
|
|
>
|
|
待转写 ({stats.pending})
|
|
</button>
|
|
</div>
|
|
<div className="flex items-center gap-4">
|
|
{batchTranscribing && (
|
|
<div className="text-sm text-gray-600">
|
|
正在转写: {batchProgress.current} / {batchProgress.total}
|
|
</div>
|
|
)}
|
|
<button
|
|
onClick={handleBatchTranscribe}
|
|
disabled={batchTranscribing || stats.pending === 0}
|
|
className="px-6 py-2 bg-purple-600 text-white rounded-lg hover:bg-purple-700 disabled:bg-gray-400 disabled:cursor-not-allowed transition-colors font-medium"
|
|
>
|
|
{batchTranscribing ? (
|
|
<span className="flex items-center gap-2">
|
|
<span className="inline-block animate-spin rounded-full h-4 w-4 border-b-2 border-white"></span>
|
|
批量转写中...
|
|
</span>
|
|
) : (
|
|
'全部转写'
|
|
)}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Video List */}
|
|
<div className="bg-white rounded-lg shadow overflow-hidden">
|
|
<div className="overflow-x-auto">
|
|
<table className="min-w-full divide-y divide-gray-200">
|
|
<thead className="bg-gray-50">
|
|
<tr>
|
|
<th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
|
|
视频
|
|
</th>
|
|
<th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
|
|
时长
|
|
</th>
|
|
<th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
|
|
转写状态
|
|
</th>
|
|
<th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
|
|
操作
|
|
</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody className="bg-white divide-y divide-gray-200">
|
|
{filteredVideos.map((video) => (
|
|
<tr key={video.aweme_id} className="hover:bg-gray-50">
|
|
<td className="px-6 py-4">
|
|
<div className="flex items-center gap-4">
|
|
<img
|
|
src={video.cover_url}
|
|
alt=""
|
|
className="w-20 h-28 object-cover rounded"
|
|
/>
|
|
<div className="flex-1 min-w-0">
|
|
<Link
|
|
href={`/aweme/${video.aweme_id}`}
|
|
className="text-sm font-medium text-blue-600 hover:text-blue-800 line-clamp-2"
|
|
>
|
|
{video.desc || '无描述'}
|
|
</Link>
|
|
<p className="text-sm text-gray-500 mt-1">
|
|
@{video.author.nickname}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</td>
|
|
<td className="px-6 py-4 whitespace-nowrap text-sm text-gray-900">
|
|
{Math.floor(video.duration_ms / 1000)}s
|
|
</td>
|
|
<td className="px-6 py-4">
|
|
{video.transcript ? (
|
|
<div className="space-y-1">
|
|
<div className="flex items-center gap-2">
|
|
<span className="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-green-100 text-green-800">
|
|
已转写
|
|
</span>
|
|
{video.transcript.language && (
|
|
<span className="text-xs text-gray-500">
|
|
{video.transcript.language}
|
|
</span>
|
|
)}
|
|
</div>
|
|
{video.transcript.speech_detected ? (
|
|
<div className="text-xs text-gray-600 line-clamp-5 max-w-md">
|
|
{video.transcript.transcript}
|
|
</div>
|
|
) : (
|
|
<div className="text-xs text-gray-500">
|
|
<span className="font-medium">
|
|
{video.transcript.audio_type || '非语音'}
|
|
</span>
|
|
{video.transcript.non_speech_summary && (
|
|
<span className="ml-1">
|
|
- {video.transcript.non_speech_summary}
|
|
</span>
|
|
)}
|
|
</div>
|
|
)}
|
|
</div>
|
|
) : (
|
|
<span className="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-orange-100 text-orange-800">
|
|
待转写
|
|
</span>
|
|
)}
|
|
</td>
|
|
<td className="px-6 py-4 whitespace-nowrap text-sm">
|
|
{video.transcript ? (
|
|
<button
|
|
onClick={() => handleTranscribe(video.aweme_id)}
|
|
disabled={transcribing.has(video.aweme_id)}
|
|
className="px-4 py-2 bg-gray-600 text-white rounded-lg hover:bg-gray-700 disabled:bg-gray-400 disabled:cursor-not-allowed transition-colors"
|
|
>
|
|
{transcribing.has(video.aweme_id) ? (
|
|
<span className="flex items-center gap-2">
|
|
<span className="inline-block animate-spin rounded-full h-4 w-4 border-b-2 border-white"></span>
|
|
重新转写...
|
|
</span>
|
|
) : (
|
|
'重新转写'
|
|
)}
|
|
</button>
|
|
) : (
|
|
<button
|
|
onClick={() => handleTranscribe(video.aweme_id)}
|
|
disabled={transcribing.has(video.aweme_id)}
|
|
className="px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 disabled:bg-blue-400 disabled:cursor-not-allowed transition-colors"
|
|
>
|
|
{transcribing.has(video.aweme_id) ? (
|
|
<span className="flex items-center gap-2">
|
|
<span className="inline-block animate-spin rounded-full h-4 w-4 border-b-2 border-white"></span>
|
|
转写中...
|
|
</span>
|
|
) : (
|
|
'开始转写'
|
|
)}
|
|
</button>
|
|
)}
|
|
</td>
|
|
</tr>
|
|
))}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
|
|
{filteredVideos.length === 0 && (
|
|
<div className="text-center py-12 text-gray-500">
|
|
没有找到视频
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|