完成转录功能，中文脚本搜索，播放界面显示脚本

app/admin/stt/page.tsx

@@ -0,0 +1,143 @@
+'use client';
+
+import Link from 'next/link';
+import BackButton from '@/app/components/BackButton';
+
+export default function SttAdminPage() {
+  return (
+    <div className="min-h-screen bg-gray-50">
+      <div className="max-w-4xl mx-auto p-8">
+        <BackButton />
+        
+        <div className="mt-8">
+          <h1 className="text-3xl font-bold text-gray-900">
+            STT 管理中心
+          </h1>
+          <p className="text-gray-600 mt-2">
+            管理和配置视频语音转写功能
+          </p>
+        </div>
+
+        <div className="mt-8 grid gap-6">
+          {/* 视频转写管理 */}
+          <Link
+            href="/admin/stt/videos"
+            className="block bg-white rounded-lg shadow-md hover:shadow-lg transition-shadow p-6 border border-gray-200 hover:border-blue-500"
+          >
+            <div className="flex items-start gap-4">
+              <div className="flex-shrink-0 w-12 h-12 bg-blue-100 rounded-lg flex items-center justify-center">
+                <svg
+                  className="w-6 h-6 text-blue-600"
+                  fill="none"
+                  stroke="currentColor"
+                  viewBox="0 0 24 24"
+                >
+                  <path
+                    strokeLinecap="round"
+                    strokeLinejoin="round"
+                    strokeWidth={2}
+                    d="M15 10l4.553-2.276A1 1 0 0121 8.618v6.764a1 1 0 01-1.447.894L15 14M5 18h8a2 2 0 002-2V8a2 2 0 00-2-2H5a2 2 0 00-2 2v8a2 2 0 002 2z"
+                  />
+                </svg>
+              </div>
+              <div className="flex-1">
+                <h2 className="text-xl font-semibold text-gray-900">
+                  视频转写管理
+                </h2>
+                <p className="text-gray-600 mt-1">
+                  查看和管理所有视频的转写状态，对待转写的视频进行批量或单个转写
+                </p>
+                <div className="mt-4 text-blue-600 font-medium flex items-center gap-1">
+                  进入管理
+                  <svg
+                    className="w-4 h-4"
+                    fill="none"
+                    stroke="currentColor"
+                    viewBox="0 0 24 24"
+                  >
+                    <path
+                      strokeLinecap="round"
+                      strokeLinejoin="round"
+                      strokeWidth={2}
+                      d="M9 5l7 7-7 7"
+                    />
+                  </svg>
+                </div>
+              </div>
+            </div>
+          </Link>
+
+          {/* 转写设置（预留） */}
+          <div className="block bg-white rounded-lg shadow-md p-6 border border-gray-200 opacity-60">
+            <div className="flex items-start gap-4">
+              <div className="flex-shrink-0 w-12 h-12 bg-gray-100 rounded-lg flex items-center justify-center">
+                <svg
+                  className="w-6 h-6 text-gray-600"
+                  fill="none"
+                  stroke="currentColor"
+                  viewBox="0 0 24 24"
+                >
+                  <path
+                    strokeLinecap="round"
+                    strokeLinejoin="round"
+                    strokeWidth={2}
+                    d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z"
+                  />
+                  <path
+                    strokeLinecap="round"
+                    strokeLinejoin="round"
+                    strokeWidth={2}
+                    d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"
+                  />
+                </svg>
+              </div>
+              <div className="flex-1">
+                <h2 className="text-xl font-semibold text-gray-900">
+                  转写设置
+                </h2>
+                <p className="text-gray-600 mt-1">
+                  配置转写 API、模型参数和其他高级选项
+                </p>
+                <div className="mt-4 text-gray-400 font-medium">
+                  即将推出
+                </div>
+              </div>
+            </div>
+          </div>
+
+          {/* 转写统计（预留） */}
+          <div className="block bg-white rounded-lg shadow-md p-6 border border-gray-200 opacity-60">
+            <div className="flex items-start gap-4">
+              <div className="flex-shrink-0 w-12 h-12 bg-gray-100 rounded-lg flex items-center justify-center">
+                <svg
+                  className="w-6 h-6 text-gray-600"
+                  fill="none"
+                  stroke="currentColor"
+                  viewBox="0 0 24 24"
+                >
+                  <path
+                    strokeLinecap="round"
+                    strokeLinejoin="round"
+                    strokeWidth={2}
+                    d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"
+                  />
+                </svg>
+              </div>
+              <div className="flex-1">
+                <h2 className="text-xl font-semibold text-gray-900">
+                  转写统计
+                </h2>
+                <p className="text-gray-600 mt-1">
+                  查看转写使用情况、成功率、语言分布等统计数据
+                </p>
+                <div className="mt-4 text-gray-400 font-medium">
+                  即将推出
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}

app/admin/stt/videos/page.tsx

@@ -0,0 +1,424 @@
+'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>
+  );
+}