auto-save 2026-05-12 15:47 (+2, ~3)

web/app/page.tsx

@@ -0,0 +1,162 @@
+"use client"
+import { useCallback, useEffect, useRef, useState } from "react"
+import { Toaster, toast } from "sonner"
+import { UrlInput } from "@/components/url-input"
+import { JobStatusBar } from "@/components/job-status"
+import { KeyframeGallery } from "@/components/keyframe-gallery"
+import { TranscriptPanel } from "@/components/transcript-panel"
+import { createJob, getJob, triggerTranscribe, videoUrl, type Job } from "@/lib/api"
+
+export default function Home() {
+  const [job, setJob] = useState<Job | null>(null)
+  const [submitting, setSubmitting] = useState(false)
+  const [selected, setSelected] = useState<Set<number>>(new Set())
+  const videoRef = useRef<HTMLVideoElement>(null)
+  const pollRef = useRef<ReturnType<typeof setInterval> | null>(null)
+  const transcribeTriggeredRef = useRef<string | null>(null)
+
+  const handleSubmit = useCallback(async (url: string) => {
+    setSubmitting(true)
+    setSelected(new Set())
+    transcribeTriggeredRef.current = null
+    try {
+      const created = await createJob(url)
+      setJob(created)
+      toast.success(`已创建任务 ${created.id.slice(0, 8)}`)
+    } catch (e) {
+      toast.error("提交失败：" + (e instanceof Error ? e.message : String(e)))
+    } finally {
+      setSubmitting(false)
+    }
+  }, [])
+
+  // 轮询 job 状态
+  useEffect(() => {
+    if (!job) return
+    if (job.status === "transcribed" || job.status === "failed") {
+      if (pollRef.current) clearInterval(pollRef.current)
+      return
+    }
+    pollRef.current = setInterval(async () => {
+      try {
+        const latest = await getJob(job.id)
+        setJob(latest)
+      } catch {
+        // silent
+      }
+    }, 1500)
+    return () => {
+      if (pollRef.current) clearInterval(pollRef.current)
+    }
+  }, [job?.id, job?.status])
+
+  // 抽帧完成后自动触发 ASR
+  useEffect(() => {
+    if (!job) return
+    if (job.status !== "frames_extracted") return
+    if (transcribeTriggeredRef.current === job.id) return
+    transcribeTriggeredRef.current = job.id
+    triggerTranscribe(job.id).catch((e) => toast.error("启动转录失败：" + e.message))
+  }, [job?.id, job?.status])
+
+  const toggleFrame = (idx: number) => {
+    setSelected((prev) => {
+      const next = new Set(prev)
+      if (next.has(idx)) next.delete(idx)
+      else if (next.size < 10) next.add(idx)
+      return next
+    })
+  }
+
+  const handleSeek = (sec: number) => {
+    if (videoRef.current) {
+      videoRef.current.currentTime = sec
+      videoRef.current.play().catch(() => {})
+    }
+  }
+
+  return (
+    <main className="relative min-h-screen text-white overflow-x-hidden">
+      <div className="ambient-glow" />
+      <div className="relative z-10 mx-auto max-w-6xl px-6 py-10 space-y-8">
+        {/* Header */}
+        <header className="space-y-2">
+          <div className="text-xs uppercase tracking-[0.3em] text-white/40">SKG · AI Material Pipeline</div>
+          <h1 className="font-serif text-4xl md:text-5xl leading-tight">
+            TK 二创工作台
+            <span className="text-white/40 ml-3 text-xl font-sans tracking-tight">/ Verification Prototype</span>
+          </h1>
+          <p className="text-white/50 text-sm max-w-2xl">
+            粘贴 TikTok 链接 → 自动抽取关键帧 + Gemini 双语转录 → 后续接入文案改写 / 生图 / 生视频。
+          </p>
+        </header>
+
+        {/* URL 输入 */}
+        <section>
+          <UrlInput loading={submitting || (job !== null && job.status !== "transcribed" && job.status !== "failed")} onSubmit={handleSubmit} />
+        </section>
+
+        {job && (
+          <>
+            {/* 状态条 */}
+            <section>
+              <JobStatusBar job={job} />
+            </section>
+
+            {/* 视频预览 + 关键帧 */}
+            {job.video_url && (
+              <section className="grid grid-cols-1 lg:grid-cols-[1fr_2fr] gap-6">
+                <div className="glass-card overflow-hidden">
+                  <video
+                    ref={videoRef}
+                    src={videoUrl(job.id)}
+                    controls
+                    className="w-full aspect-video bg-black"
+                  />
+                  <div className="px-4 py-2.5 text-[11px] font-mono text-white/40 border-t border-white/10">
+                    {job.width}×{job.height} · {job.duration?.toFixed(1)}s
+                  </div>
+                </div>
+                <div>
+                  <div className="mb-6">
+                    <div className="font-serif text-lg mb-1">关键帧 · Keyframes</div>
+                    <div className="text-xs text-white/40">自动抽取，点击勾选最多 10 张作为生图参考</div>
+                  </div>
+                  <KeyframeGallery frames={job.frames} selected={selected} onToggle={toggleFrame} />
+                </div>
+              </section>
+            )}
+
+            {/* 双语转录 */}
+            {(job.frames.length > 0 || job.transcript.length > 0) && (
+              <section>
+                <div className="mb-4">
+                  <div className="font-serif text-lg mb-1">双语转录 · Transcript</div>
+                  <div className="text-xs text-white/40">点击段落跳转视频时间点</div>
+                </div>
+                <TranscriptPanel
+                  segments={job.transcript}
+                  loading={job.status === "transcribing"}
+                  onSeek={handleSeek}
+                />
+              </section>
+            )}
+          </>
+        )}
+
+        {!job && (
+          <section className="text-center py-16">
+            <div className="font-serif text-2xl text-white/30">↑ 粘贴一条 TikTok 链接开始</div>
+          </section>
+        )}
+
+        {/* Footer */}
+        <footer className="pt-8 pb-4 text-[11px] text-white/30 font-mono flex items-center justify-between border-t border-white/5">
+          <div>SKG TK 二创验证 · MVP 第一冲刺（步骤 1-4）</div>
+          <div>4290 · {process.env.NEXT_PUBLIC_API_BASE ?? "localhost:4291"}</div>
+        </footer>
+      </div>
+      <Toaster theme="dark" position="top-right" />
+    </main>
+  )
+}