333 lines
14 KiB
TypeScript
333 lines
14 KiB
TypeScript
"use client"
|
|
|
|
import { useEffect, useMemo, useRef, useState } from "react"
|
|
import {
|
|
ArrowDownToLine,
|
|
CheckCircle2,
|
|
CircleAlert,
|
|
Film,
|
|
ImagePlus,
|
|
Link2,
|
|
Loader2,
|
|
Play,
|
|
RotateCcw,
|
|
TerminalSquare,
|
|
Upload,
|
|
} from "lucide-react"
|
|
|
|
const API_BASE = process.env.NEXT_PUBLIC_API_BASE ?? "http://localhost:4291"
|
|
|
|
type AgentRunLog = {
|
|
ts: number
|
|
level: "info" | "warn" | "error"
|
|
message: string
|
|
}
|
|
|
|
type AgentRun = {
|
|
id: string
|
|
job_id: string
|
|
status: "draft" | "queued" | "executing" | "reviewing" | "completed" | "failed"
|
|
stage: string
|
|
progress: number
|
|
logs: AgentRunLog[]
|
|
video_ids: string[]
|
|
final_video_url: string
|
|
contact_sheet_url: string
|
|
error: string
|
|
created_at: number
|
|
updated_at: number
|
|
}
|
|
|
|
const STAGES = [
|
|
{ key: "download", label: "下载" },
|
|
{ key: "assets", label: "素材" },
|
|
{ key: "analyze", label: "拆解" },
|
|
{ key: "plan", label: "规划" },
|
|
{ key: "execute", label: "生成" },
|
|
{ key: "review", label: "审片" },
|
|
{ key: "compose", label: "合成" },
|
|
{ key: "final", label: "成片" },
|
|
]
|
|
|
|
function formatClock(ts: number) {
|
|
if (!ts) return "--:--:--"
|
|
return new Date(ts * 1000).toLocaleTimeString("zh-CN", { hour12: false })
|
|
}
|
|
|
|
function runVideoUrl(run: AgentRun | null) {
|
|
if (!run?.final_video_url) return ""
|
|
return `${API_BASE}${run.final_video_url}`
|
|
}
|
|
|
|
function runContactUrl(run: AgentRun | null) {
|
|
if (!run?.contact_sheet_url) return ""
|
|
return `${API_BASE}${run.contact_sheet_url}`
|
|
}
|
|
|
|
export default function AgentPage() {
|
|
const [url, setUrl] = useState("")
|
|
const [files, setFiles] = useState<File[]>([])
|
|
const [run, setRun] = useState<AgentRun | null>(null)
|
|
const [recent, setRecent] = useState<AgentRun[]>([])
|
|
const [submitting, setSubmitting] = useState(false)
|
|
const [error, setError] = useState("")
|
|
const terminalRef = useRef<HTMLDivElement>(null)
|
|
|
|
const previews = useMemo(() => files.map((file) => ({ file, url: URL.createObjectURL(file) })), [files])
|
|
useEffect(() => () => previews.forEach((item) => URL.revokeObjectURL(item.url)), [previews])
|
|
|
|
useEffect(() => {
|
|
fetch(`${API_BASE}/agent-runs?limit=8`, { cache: "no-store" })
|
|
.then((res) => (res.ok ? res.json() : []))
|
|
.then((items: AgentRun[]) => {
|
|
setRecent(items)
|
|
const latest = items.find((item) => item.status === "executing" || item.status === "reviewing" || item.status === "completed")
|
|
if (latest) setRun(latest)
|
|
})
|
|
.catch(() => undefined)
|
|
}, [])
|
|
|
|
useEffect(() => {
|
|
if (!run || run.status === "completed" || run.status === "failed") return
|
|
const timer = window.setInterval(async () => {
|
|
try {
|
|
const res = await fetch(`${API_BASE}/agent-runs/${run.id}`, { cache: "no-store" })
|
|
if (!res.ok) return
|
|
const next = await res.json()
|
|
setRun(next)
|
|
} catch {
|
|
/* keep current state */
|
|
}
|
|
}, 2000)
|
|
return () => window.clearInterval(timer)
|
|
}, [run?.id, run?.status])
|
|
|
|
useEffect(() => {
|
|
const el = terminalRef.current
|
|
if (el) el.scrollTop = el.scrollHeight
|
|
}, [run?.logs.length])
|
|
|
|
async function submit() {
|
|
setError("")
|
|
if (!url.trim()) {
|
|
setError("需要 TikTok 链接")
|
|
return
|
|
}
|
|
setSubmitting(true)
|
|
try {
|
|
const form = new FormData()
|
|
form.append("tk_url", url.trim())
|
|
files.slice(0, 6).forEach((file) => form.append("product_files", file))
|
|
const res = await fetch(`${API_BASE}/agent-runs`, { method: "POST", body: form })
|
|
if (!res.ok) {
|
|
const text = await res.text().catch(() => "")
|
|
throw new Error(text.slice(0, 260) || `HTTP ${res.status}`)
|
|
}
|
|
const created = await res.json()
|
|
setRun(created)
|
|
setRecent((prev) => [created, ...prev.filter((item) => item.id !== created.id)].slice(0, 8))
|
|
} catch (e) {
|
|
setError(e instanceof Error ? e.message : String(e))
|
|
} finally {
|
|
setSubmitting(false)
|
|
}
|
|
}
|
|
|
|
const activeStageIndex = run ? Math.max(0, STAGES.findIndex((item) => item.key === run.stage)) : -1
|
|
const canStart = !!url.trim() && !submitting
|
|
const videoSrc = runVideoUrl(run)
|
|
const contactSrc = runContactUrl(run)
|
|
|
|
return (
|
|
<main className="min-h-screen bg-[#f3f4f7] text-[#111318]">
|
|
<div className="mx-auto flex min-h-screen w-full max-w-[1720px] flex-col gap-5 px-5 py-5">
|
|
<header className="flex items-center justify-between rounded-[28px] border border-black/5 bg-white/80 px-5 py-4 shadow-[0_24px_80px_rgba(20,25,38,0.08)] backdrop-blur-xl">
|
|
<div>
|
|
<div className="text-[12px] font-semibold uppercase tracking-[0.18em] text-[#7b8190]">SKG Agent Cut</div>
|
|
<h1 className="mt-1 text-[26px] font-semibold tracking-normal text-[#111318]">一分钟二创出片终端</h1>
|
|
</div>
|
|
<div className="hidden items-center gap-2 rounded-full bg-[#111318] px-3 py-2 text-[12px] font-medium text-white md:flex">
|
|
<TerminalSquare className="h-4 w-4 text-[#81d4ff]" />
|
|
{run ? `${run.status} · ${run.progress}%` : "standby"}
|
|
</div>
|
|
</header>
|
|
|
|
<section className="grid min-h-[calc(100vh-128px)] grid-cols-1 gap-5 xl:grid-cols-[390px_minmax(520px,1fr)_420px]">
|
|
<aside className="flex flex-col gap-4 rounded-[30px] border border-black/5 bg-white/85 p-4 shadow-[0_24px_80px_rgba(20,25,38,0.08)] backdrop-blur-xl">
|
|
<div className="rounded-[24px] border border-[#dfe3ea] bg-[#f8f9fb] p-4">
|
|
<label className="mb-2 flex items-center gap-2 text-[13px] font-semibold text-[#2b3038]">
|
|
<Link2 className="h-4 w-4 text-[#0a84ff]" />
|
|
TikTok 链接
|
|
</label>
|
|
<textarea
|
|
value={url}
|
|
onChange={(e) => setUrl(e.target.value)}
|
|
placeholder="https://www.tiktok.com/@..."
|
|
className="h-28 w-full resize-none rounded-[18px] border border-[#d9dee8] bg-white px-4 py-3 text-[14px] leading-relaxed text-[#111318] outline-none transition focus:border-[#0a84ff] focus:ring-4 focus:ring-[#0a84ff]/10"
|
|
/>
|
|
</div>
|
|
|
|
<div className="rounded-[24px] border border-[#dfe3ea] bg-[#f8f9fb] p-4">
|
|
<label className="mb-3 flex items-center gap-2 text-[13px] font-semibold text-[#2b3038]">
|
|
<ImagePlus className="h-4 w-4 text-[#34c759]" />
|
|
产品图
|
|
</label>
|
|
<label className="flex h-32 cursor-pointer flex-col items-center justify-center rounded-[20px] border border-dashed border-[#c7ceda] bg-white text-center transition hover:border-[#0a84ff] hover:bg-[#f7fbff]">
|
|
<Upload className="mb-2 h-6 w-6 text-[#7b8190]" />
|
|
<span className="text-[13px] font-medium text-[#2b3038]">上传产品图</span>
|
|
<span className="mt-1 text-[12px] text-[#7b8190]">最多 6 张</span>
|
|
<input
|
|
type="file"
|
|
accept="image/*"
|
|
multiple
|
|
className="hidden"
|
|
onChange={(e) => {
|
|
const next = Array.from(e.target.files ?? []).slice(0, 6)
|
|
setFiles(next)
|
|
}}
|
|
/>
|
|
</label>
|
|
{previews.length > 0 && (
|
|
<div className="mt-3 grid grid-cols-3 gap-2">
|
|
{previews.map((item) => (
|
|
<div key={`${item.file.name}-${item.file.size}`} className="aspect-square overflow-hidden rounded-[14px] border border-black/5 bg-white">
|
|
<img src={item.url} alt={item.file.name} className="h-full w-full object-contain" />
|
|
</div>
|
|
))}
|
|
</div>
|
|
)}
|
|
</div>
|
|
|
|
{error && (
|
|
<div className="rounded-[18px] border border-[#ff453a]/20 bg-[#ff453a]/10 px-4 py-3 text-[13px] text-[#9f1d17]">
|
|
{error}
|
|
</div>
|
|
)}
|
|
|
|
<button
|
|
type="button"
|
|
disabled={!canStart}
|
|
onClick={submit}
|
|
className="flex h-14 items-center justify-center gap-2 rounded-[20px] bg-[#111318] text-[15px] font-semibold text-white shadow-[0_16px_40px_rgba(17,19,24,0.18)] transition hover:bg-black disabled:cursor-not-allowed disabled:bg-[#b8bec8]"
|
|
>
|
|
{submitting ? <Loader2 className="h-5 w-5 animate-spin" /> : <Play className="h-5 w-5" />}
|
|
开始出片
|
|
</button>
|
|
|
|
<div className="mt-auto rounded-[24px] border border-[#dfe3ea] bg-[#f8f9fb] p-3">
|
|
<div className="mb-2 text-[12px] font-semibold text-[#7b8190]">最近任务</div>
|
|
<div className="space-y-2">
|
|
{recent.slice(0, 4).map((item) => (
|
|
<button
|
|
key={item.id}
|
|
type="button"
|
|
onClick={() => setRun(item)}
|
|
className="flex w-full items-center justify-between rounded-[16px] bg-white px-3 py-2 text-left text-[12px] text-[#2b3038] transition hover:bg-[#f1f5fb]"
|
|
>
|
|
<span className="font-medium">{item.id}</span>
|
|
<span className="text-[#7b8190]">{item.status}</span>
|
|
</button>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</aside>
|
|
|
|
<section className="flex min-h-[680px] flex-col rounded-[30px] border border-black/5 bg-[#111318] p-4 shadow-[0_24px_80px_rgba(20,25,38,0.16)]">
|
|
<div className="mb-4 flex items-center justify-between">
|
|
<div className="flex items-center gap-3">
|
|
<div className="flex h-10 w-10 items-center justify-center rounded-[16px] bg-white/8">
|
|
<TerminalSquare className="h-5 w-5 text-[#81d4ff]" />
|
|
</div>
|
|
<div>
|
|
<h2 className="text-[16px] font-semibold text-white">Agent Terminal</h2>
|
|
<p className="text-[12px] text-white/45">{run ? `run ${run.id} · job ${run.job_id}` : "waiting for input"}</p>
|
|
</div>
|
|
</div>
|
|
{run?.status === "failed" ? (
|
|
<CircleAlert className="h-5 w-5 text-[#ff453a]" />
|
|
) : run?.status === "completed" ? (
|
|
<CheckCircle2 className="h-5 w-5 text-[#34c759]" />
|
|
) : (
|
|
<Loader2 className={`h-5 w-5 text-[#81d4ff] ${run ? "animate-spin" : ""}`} />
|
|
)}
|
|
</div>
|
|
|
|
<div className="mb-4 grid grid-cols-4 gap-2 lg:grid-cols-8">
|
|
{STAGES.map((stage, index) => {
|
|
const active = index <= activeStageIndex || run?.status === "completed"
|
|
return (
|
|
<div key={stage.key} className={`rounded-[14px] px-3 py-2 text-[12px] ${active ? "bg-white text-[#111318]" : "bg-white/6 text-white/40"}`}>
|
|
{stage.label}
|
|
</div>
|
|
)
|
|
})}
|
|
</div>
|
|
|
|
<div className="mb-4 h-2 overflow-hidden rounded-full bg-white/8">
|
|
<div className="h-full rounded-full bg-[#34c759] transition-all duration-700" style={{ width: `${run?.progress ?? 0}%` }} />
|
|
</div>
|
|
|
|
<div ref={terminalRef} className="min-h-0 flex-1 overflow-auto rounded-[22px] border border-white/8 bg-black px-4 py-4 font-mono text-[12px] leading-relaxed text-[#d8f3dc]">
|
|
{!run && <div className="text-white/35">$ idle</div>}
|
|
{run?.logs.map((log, index) => (
|
|
<div key={`${log.ts}-${index}`} className={log.level === "error" ? "text-[#ff8a80]" : log.level === "warn" ? "text-[#ffd166]" : "text-[#d8f3dc]"}>
|
|
<span className="text-white/30">[{formatClock(log.ts)}]</span> {log.message}
|
|
</div>
|
|
))}
|
|
</div>
|
|
</section>
|
|
|
|
<aside className="flex flex-col gap-4 rounded-[30px] border border-black/5 bg-white/85 p-4 shadow-[0_24px_80px_rgba(20,25,38,0.08)] backdrop-blur-xl">
|
|
<div className="flex items-center justify-between">
|
|
<div>
|
|
<div className="text-[12px] font-semibold uppercase tracking-[0.16em] text-[#7b8190]">Final</div>
|
|
<h2 className="mt-1 text-[18px] font-semibold text-[#111318]">成片播放器</h2>
|
|
</div>
|
|
<Film className="h-5 w-5 text-[#ff9f0a]" />
|
|
</div>
|
|
|
|
<div className="aspect-[9/16] overflow-hidden rounded-[26px] border border-black/8 bg-[#111318]">
|
|
{videoSrc ? (
|
|
<video key={videoSrc} src={videoSrc} controls playsInline className="h-full w-full bg-black object-contain" />
|
|
) : (
|
|
<div className="flex h-full flex-col items-center justify-center gap-3 text-[#7b8190]">
|
|
<Film className="h-8 w-8" />
|
|
<span className="text-[13px]">等待成片</span>
|
|
</div>
|
|
)}
|
|
</div>
|
|
|
|
{contactSrc && (
|
|
<div className="overflow-hidden rounded-[18px] border border-black/8 bg-white">
|
|
<img src={contactSrc} alt="final contact sheet" className="w-full object-cover" />
|
|
</div>
|
|
)}
|
|
|
|
<div className="grid grid-cols-2 gap-2">
|
|
<a
|
|
href={videoSrc || undefined}
|
|
download
|
|
className={`flex h-11 items-center justify-center gap-2 rounded-[16px] text-[13px] font-semibold ${videoSrc ? "bg-[#0a84ff] text-white" : "pointer-events-none bg-[#dfe3ea] text-[#8d94a1]"}`}
|
|
>
|
|
<ArrowDownToLine className="h-4 w-4" />
|
|
下载
|
|
</a>
|
|
<button
|
|
type="button"
|
|
onClick={() => {
|
|
setRun(null)
|
|
setError("")
|
|
}}
|
|
className="flex h-11 items-center justify-center gap-2 rounded-[16px] bg-[#eef1f6] text-[13px] font-semibold text-[#2b3038] transition hover:bg-[#e3e7ef]"
|
|
>
|
|
<RotateCcw className="h-4 w-4" />
|
|
重来
|
|
</button>
|
|
</div>
|
|
</aside>
|
|
</section>
|
|
</div>
|
|
</main>
|
|
)
|
|
}
|