feat: Add comprehensive timeline editor with frame editing and regeneration capabilities

2026-01-05 14:48:43 +08:00
parent 7d78dcd078
commit ca018a9b1f
68 changed files with 14904 additions and 57 deletions
--- a/frontend/src/app/editor/page.tsx
+++ b/frontend/src/app/editor/page.tsx
@@ -0,0 +1,409 @@
+'use client'
+
+import { useEffect, useState } from 'react'
+import { useSearchParams } from 'next/navigation'
+import { Separator } from '@/components/ui/separator'
+import { Button } from '@/components/ui/button'
+import { Save, Download, Settings, ArrowLeft, Loader2 } from 'lucide-react'
+import { Timeline } from '@/components/timeline'
+import { PreviewPlayer } from '@/components/preview'
+import { useEditorStore, Storyboard } from '@/stores/editor-store'
+import { editorApi } from '@/services/editor-api'
+
+// Mock data for demo (fallback)
+const mockStoryboard: Storyboard = {
+    id: 'demo-1',
+    title: '演示视频',
+    totalDuration: 15.5,
+    frames: [
+        {
+            id: 'frame-1',
+            index: 0,
+            order: 0,
+            narration: '在一个宁静的早晨，阳光洒满了整个城市',
+            imagePrompt: 'A peaceful morning cityscape with golden sunlight',
+            duration: 3.2,
+        },
+        {
+            id: 'frame-2',
+            index: 1,
+            order: 1,
+            narration: '小明决定出门去探索这个美丽的世界',
+            imagePrompt: 'A young man stepping out of his house',
+            duration: 2.8,
+        },
+        {
+            id: 'frame-3',
+            index: 2,
+            order: 2,
+            narration: '他走过熟悉的街道，感受着微风的吹拂',
+            imagePrompt: 'Walking through familiar streets with gentle breeze',
+            duration: 3.5,
+        },
+        {
+            id: 'frame-4',
+            index: 3,
+            order: 3,
+            narration: '公园里的花朵正在盛开，散发着迷人的芬芳',
+            imagePrompt: 'Blooming flowers in a park with beautiful fragrance',
+            duration: 3.0,
+        },
+        {
+            id: 'frame-5',
+            index: 4,
+            order: 4,
+            narration: '这是新的一天的开始，充满了无限可能',
+            imagePrompt: 'A new day begins with endless possibilities',
+            duration: 3.0,
+        },
+    ],
+}
+
+export default function EditorPage() {
+    const searchParams = useSearchParams()
+    const { storyboard, setStoryboard } = useEditorStore()
+    const [loading, setLoading] = useState(true)
+    const [error, setError] = useState<string | null>(null)
+
+    useEffect(() => {
+        async function loadStoryboard() {
+            // Get storyboard_id from URL, default to demo-1
+            const storyboardId = searchParams.get('storyboard_id') || 'demo-1'
+
+            try {
+                setLoading(true)
+                setError(null)
+
+                // Try to load from API
+                const data = await editorApi.getStoryboard(storyboardId)
+
+                // Convert API response to store format
+                const storyboardData: Storyboard = {
+                    id: data.id,
+                    title: data.title,
+                    totalDuration: data.total_duration,
+                    frames: data.frames.map((f: any) => ({
+                        id: f.id,
+                        index: f.index,
+                        order: f.order,
+                        narration: f.narration,
+                        imagePrompt: f.image_prompt,
+                        imagePath: f.image_path,
+                        audioPath: f.audio_path,
+                        duration: f.duration,
+                    })),
+                }
+
+                setStoryboard(storyboardData)
+            } catch (err: any) {
+                console.error('Failed to load storyboard:', err)
+
+                // Fallback to mock data for demo
+                if (storyboardId === 'demo-1') {
+                    setStoryboard(mockStoryboard)
+                } else {
+                    setError(`无法加载分镜板: ${err.message || storyboardId}`)
+                }
+            } finally {
+                setLoading(false)
+            }
+        }
+
+        loadStoryboard()
+    }, [searchParams, setStoryboard])
+
+    // Loading state
+    if (loading) {
+        return (
+            <div className="h-screen flex items-center justify-center bg-background">
+                <div className="flex flex-col items-center gap-4">
+                    <Loader2 className="h-8 w-8 animate-spin text-primary" />
+                    <p className="text-muted-foreground">加载分镜板...</p>
+                </div>
+            </div>
+        )
+    }
+
+    // Error state
+    if (error) {
+        return (
+            <div className="h-screen flex items-center justify-center bg-background">
+                <div className="flex flex-col items-center gap-4 max-w-md text-center">
+                    <p className="text-destructive text-lg">{error}</p>
+                    <Button onClick={() => window.location.href = '/editor?storyboard_id=demo-1'}>
+                        加载演示数据
+                    </Button>
+                </div>
+            </div>
+        )
+    }
+
+    return (
+        <div className="h-screen flex flex-col bg-background">
+            {/* Header */}
+            <header className="h-14 border-b flex items-center justify-between px-4">
+                <div className="flex items-center gap-4">
+                    <Button variant="ghost" size="icon" onClick={() => window.history.back()}>
+                        <ArrowLeft className="h-4 w-4" />
+                    </Button>
+                    <Separator orientation="vertical" className="h-6" />
+                    <h1 className="font-semibold">{storyboard?.title || '加载中...'}</h1>
+                </div>
+
+                <div className="flex items-center gap-2">
+                    <Button variant="ghost" size="sm">
+                        <Settings className="h-4 w-4 mr-2" />
+                        设置
+                    </Button>
+                    <Button variant="ghost" size="sm">
+                        <Save className="h-4 w-4 mr-2" />
+                        保存
+                    </Button>
+                    <Button size="sm">
+                        <Download className="h-4 w-4 mr-2" />
+                        导出视频
+                    </Button>
+                </div>
+            </header>
+
+            {/* Main content */}
+            <div className="flex-1 flex overflow-hidden">
+                {/* Preview panel */}
+                <div className="flex-1 min-w-0">
+                    <PreviewPlayer />
+                </div>
+
+                {/* Right sidebar (optional, for frame details) */}
+                <div className="w-80 border-l bg-muted/30 p-4 hidden lg:block">
+                    <h3 className="font-semibold mb-4">分镜详情</h3>
+                    <SelectedFrameDetails />
+                </div>
+            </div>
+
+            {/* Timeline */}
+            <Timeline />
+        </div>
+    )
+}
+
+function SelectedFrameDetails() {
+    const { storyboard, selectedFrameId, updateFrame } = useEditorStore()
+    const selectedFrame = storyboard?.frames.find((f) => f.id === selectedFrameId)
+
+    const [isEditing, setIsEditing] = useState(false)
+    const [narration, setNarration] = useState('')
+    const [imagePrompt, setImagePrompt] = useState('')
+    const [isSaving, setIsSaving] = useState(false)
+    const [isRegeneratingImage, setIsRegeneratingImage] = useState(false)
+    const [isRegeneratingAudio, setIsRegeneratingAudio] = useState(false)
+    const [error, setError] = useState<string | null>(null)
+
+    // Update local state when frame changes
+    useEffect(() => {
+        if (selectedFrame) {
+            setNarration(selectedFrame.narration || '')
+            setImagePrompt(selectedFrame.imagePrompt || '')
+            setIsEditing(false)
+            setError(null)
+        }
+    }, [selectedFrame?.id])
+
+    if (!selectedFrame) {
+        return (
+            <p className="text-sm text-muted-foreground">选择一个分镜查看详情</p>
+        )
+    }
+
+    const handleSave = async () => {
+        if (!storyboard || !selectedFrame) return
+
+        setIsSaving(true)
+        setError(null)
+
+        try {
+            await editorApi.updateFrame(storyboard.id, selectedFrame.id, {
+                narration,
+                image_prompt: imagePrompt,
+            })
+
+            // Update local store
+            updateFrame(selectedFrame.id, {
+                narration,
+                imagePrompt,
+            })
+
+            setIsEditing(false)
+        } catch (err: any) {
+            setError(err.message || '保存失败')
+        } finally {
+            setIsSaving(false)
+        }
+    }
+
+    const handleRegenerateImage = async () => {
+        if (!storyboard || !selectedFrame) return
+
+        setIsRegeneratingImage(true)
+        setError(null)
+
+        try {
+            const result = await editorApi.regenerateImage(
+                storyboard.id,
+                selectedFrame.id,
+                imagePrompt
+            )
+
+            // Update local store with new image path
+            updateFrame(selectedFrame.id, {
+                imagePath: result.image_path,
+            })
+        } catch (err: any) {
+            setError(err.message || '重新生成图片失败')
+        } finally {
+            setIsRegeneratingImage(false)
+        }
+    }
+
+    const handleRegenerateAudio = async () => {
+        if (!storyboard || !selectedFrame) return
+
+        setIsRegeneratingAudio(true)
+        setError(null)
+
+        try {
+            const result = await editorApi.regenerateAudio(
+                storyboard.id,
+                selectedFrame.id,
+                narration
+            )
+
+            // Update local store with new audio path and duration
+            updateFrame(selectedFrame.id, {
+                audioPath: result.audio_path,
+                duration: result.duration,
+            })
+        } catch (err: any) {
+            setError(err.message || '重新生成音频失败')
+        } finally {
+            setIsRegeneratingAudio(false)
+        }
+    }
+
+    return (
+        <div className="space-y-4">
+            {error && (
+                <div className="text-sm text-destructive bg-destructive/10 p-2 rounded">
+                    {error}
+                </div>
+            )}
+
+            {/* Edit/Save buttons */}
+            <div className="flex gap-2">
+                {isEditing ? (
+                    <>
+                        <Button
+                            size="sm"
+                            onClick={handleSave}
+                            disabled={isSaving}
+                        >
+                            {isSaving ? (
+                                <Loader2 className="h-4 w-4 animate-spin mr-1" />
+                            ) : (
+                                <Save className="h-4 w-4 mr-1" />
+                            )}
+                            保存
+                        </Button>
+                        <Button
+                            size="sm"
+                            variant="ghost"
+                            onClick={() => {
+                                setNarration(selectedFrame.narration || '')
+                                setImagePrompt(selectedFrame.imagePrompt || '')
+                                setIsEditing(false)
+                            }}
+                        >
+                            取消
+                        </Button>
+                    </>
+                ) : (
+                    <Button
+                        size="sm"
+                        variant="outline"
+                        onClick={() => setIsEditing(true)}
+                    >
+                        编辑
+                    </Button>
+                )}
+            </div>
+
+            {/* Narration */}
+            <div>
+                <label className="text-xs text-muted-foreground">旁白</label>
+                {isEditing ? (
+                    <textarea
+                        value={narration}
+                        onChange={(e) => setNarration(e.target.value)}
+                        className="w-full mt-1 p-2 text-sm border rounded bg-background resize-none"
+                        rows={3}
+                    />
+                ) : (
+                    <p className="text-sm mt-1">{selectedFrame.narration}</p>
+                )}
+            </div>
+
+            {/* Image Prompt */}
+            <div>
+                <label className="text-xs text-muted-foreground">图像提示词</label>
+                {isEditing ? (
+                    <textarea
+                        value={imagePrompt}
+                        onChange={(e) => setImagePrompt(e.target.value)}
+                        className="w-full mt-1 p-2 text-sm border rounded bg-background resize-none"
+                        rows={3}
+                    />
+                ) : (
+                    <p className="text-sm mt-1 text-muted-foreground">
+                        {selectedFrame.imagePrompt}
+                    </p>
+                )}
+            </div>
+
+            {/* Duration */}
+            <div>
+                <label className="text-xs text-muted-foreground">时长</label>
+                <p className="text-sm mt-1">{selectedFrame.duration.toFixed(1)} 秒</p>
+            </div>
+
+            {/* Regenerate buttons */}
+            {!isEditing && (
+                <div className="pt-4 border-t space-y-2">
+                    <Button
+                        size="sm"
+                        variant="secondary"
+                        className="w-full"
+                        onClick={handleRegenerateImage}
+                        disabled={isRegeneratingImage}
+                    >
+                        {isRegeneratingImage ? (
+                            <Loader2 className="h-4 w-4 animate-spin mr-2" />
+                        ) : null}
+                        重新生成图片
+                    </Button>
+                    <Button
+                        size="sm"
+                        variant="secondary"
+                        className="w-full"
+                        onClick={handleRegenerateAudio}
+                        disabled={isRegeneratingAudio}
+                    >
+                        {isRegeneratingAudio ? (
+                            <Loader2 className="h-4 w-4 animate-spin mr-2" />
+                        ) : null}
+                        重新生成音频
+                    </Button>
+                </div>
+            )}
+        </div>
+    )
+}
+
--- a/frontend/src/app/favicon.ico
+++ b/frontend/src/app/favicon.ico
--- a/frontend/src/app/globals.css
+++ b/frontend/src/app/globals.css
@@ -0,0 +1,125 @@
+@import "tailwindcss";
+@import "tw-animate-css";
+
+@custom-variant dark (&:is(.dark *));
+
+@theme inline {
+  --color-background: var(--background);
+  --color-foreground: var(--foreground);
+  --font-sans: var(--font-geist-sans);
+  --font-mono: var(--font-geist-mono);
+  --color-sidebar-ring: var(--sidebar-ring);
+  --color-sidebar-border: var(--sidebar-border);
+  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
+  --color-sidebar-accent: var(--sidebar-accent);
+  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
+  --color-sidebar-primary: var(--sidebar-primary);
+  --color-sidebar-foreground: var(--sidebar-foreground);
+  --color-sidebar: var(--sidebar);
+  --color-chart-5: var(--chart-5);
+  --color-chart-4: var(--chart-4);
+  --color-chart-3: var(--chart-3);
+  --color-chart-2: var(--chart-2);
+  --color-chart-1: var(--chart-1);
+  --color-ring: var(--ring);
+  --color-input: var(--input);
+  --color-border: var(--border);
+  --color-destructive: var(--destructive);
+  --color-accent-foreground: var(--accent-foreground);
+  --color-accent: var(--accent);
+  --color-muted-foreground: var(--muted-foreground);
+  --color-muted: var(--muted);
+  --color-secondary-foreground: var(--secondary-foreground);
+  --color-secondary: var(--secondary);
+  --color-primary-foreground: var(--primary-foreground);
+  --color-primary: var(--primary);
+  --color-popover-foreground: var(--popover-foreground);
+  --color-popover: var(--popover);
+  --color-card-foreground: var(--card-foreground);
+  --color-card: var(--card);
+  --radius-sm: calc(var(--radius) - 4px);
+  --radius-md: calc(var(--radius) - 2px);
+  --radius-lg: var(--radius);
+  --radius-xl: calc(var(--radius) + 4px);
+  --radius-2xl: calc(var(--radius) + 8px);
+  --radius-3xl: calc(var(--radius) + 12px);
+  --radius-4xl: calc(var(--radius) + 16px);
+}
+
+:root {
+  --radius: 0.625rem;
+  --background: oklch(1 0 0);
+  --foreground: oklch(0.145 0 0);
+  --card: oklch(1 0 0);
+  --card-foreground: oklch(0.145 0 0);
+  --popover: oklch(1 0 0);
+  --popover-foreground: oklch(0.145 0 0);
+  --primary: oklch(0.205 0 0);
+  --primary-foreground: oklch(0.985 0 0);
+  --secondary: oklch(0.97 0 0);
+  --secondary-foreground: oklch(0.205 0 0);
+  --muted: oklch(0.97 0 0);
+  --muted-foreground: oklch(0.556 0 0);
+  --accent: oklch(0.97 0 0);
+  --accent-foreground: oklch(0.205 0 0);
+  --destructive: oklch(0.577 0.245 27.325);
+  --border: oklch(0.922 0 0);
+  --input: oklch(0.922 0 0);
+  --ring: oklch(0.708 0 0);
+  --chart-1: oklch(0.646 0.222 41.116);
+  --chart-2: oklch(0.6 0.118 184.704);
+  --chart-3: oklch(0.398 0.07 227.392);
+  --chart-4: oklch(0.828 0.189 84.429);
+  --chart-5: oklch(0.769 0.188 70.08);
+  --sidebar: oklch(0.985 0 0);
+  --sidebar-foreground: oklch(0.145 0 0);
+  --sidebar-primary: oklch(0.205 0 0);
+  --sidebar-primary-foreground: oklch(0.985 0 0);
+  --sidebar-accent: oklch(0.97 0 0);
+  --sidebar-accent-foreground: oklch(0.205 0 0);
+  --sidebar-border: oklch(0.922 0 0);
+  --sidebar-ring: oklch(0.708 0 0);
+}
+
+.dark {
+  --background: oklch(0.145 0 0);
+  --foreground: oklch(0.985 0 0);
+  --card: oklch(0.205 0 0);
+  --card-foreground: oklch(0.985 0 0);
+  --popover: oklch(0.205 0 0);
+  --popover-foreground: oklch(0.985 0 0);
+  --primary: oklch(0.922 0 0);
+  --primary-foreground: oklch(0.205 0 0);
+  --secondary: oklch(0.269 0 0);
+  --secondary-foreground: oklch(0.985 0 0);
+  --muted: oklch(0.269 0 0);
+  --muted-foreground: oklch(0.708 0 0);
+  --accent: oklch(0.269 0 0);
+  --accent-foreground: oklch(0.985 0 0);
+  --destructive: oklch(0.704 0.191 22.216);
+  --border: oklch(1 0 0 / 10%);
+  --input: oklch(1 0 0 / 15%);
+  --ring: oklch(0.556 0 0);
+  --chart-1: oklch(0.488 0.243 264.376);
+  --chart-2: oklch(0.696 0.17 162.48);
+  --chart-3: oklch(0.769 0.188 70.08);
+  --chart-4: oklch(0.627 0.265 303.9);
+  --chart-5: oklch(0.645 0.246 16.439);
+  --sidebar: oklch(0.205 0 0);
+  --sidebar-foreground: oklch(0.985 0 0);
+  --sidebar-primary: oklch(0.488 0.243 264.376);
+  --sidebar-primary-foreground: oklch(0.985 0 0);
+  --sidebar-accent: oklch(0.269 0 0);
+  --sidebar-accent-foreground: oklch(0.985 0 0);
+  --sidebar-border: oklch(1 0 0 / 10%);
+  --sidebar-ring: oklch(0.556 0 0);
+}
+
+@layer base {
+  * {
+    @apply border-border outline-ring/50;
+  }
+  body {
+    @apply bg-background text-foreground;
+  }
+}
--- a/frontend/src/app/layout.tsx
+++ b/frontend/src/app/layout.tsx
@@ -0,0 +1,35 @@
+import type { Metadata } from "next";
+import { Geist, Geist_Mono } from "next/font/google";
+import "./globals.css";
+
+const geistSans = Geist({
+  variable: "--font-geist-sans",
+  subsets: ["latin"],
+});
+
+const geistMono = Geist_Mono({
+  variable: "--font-geist-mono",
+  subsets: ["latin"],
+});
+
+export const metadata: Metadata = {
+  title: "Create Next App",
+  description: "Generated by create next app",
+};
+
+export default function RootLayout({
+  children,
+}: Readonly<{
+  children: React.ReactNode;
+}>) {
+  return (
+    <html lang="en" suppressHydrationWarning>
+      <body
+        className={`${geistSans.variable} ${geistMono.variable} antialiased`}
+        suppressHydrationWarning
+      >
+        {children}
+      </body>
+    </html>
+  );
+}
--- a/frontend/src/app/page.tsx
+++ b/frontend/src/app/page.tsx
@@ -0,0 +1,65 @@
+import Image from "next/image";
+
+export default function Home() {
+  return (
+    <div className="flex min-h-screen items-center justify-center bg-zinc-50 font-sans dark:bg-black">
+      <main className="flex min-h-screen w-full max-w-3xl flex-col items-center justify-between py-32 px-16 bg-white dark:bg-black sm:items-start">
+        <Image
+          className="dark:invert"
+          src="/next.svg"
+          alt="Next.js logo"
+          width={100}
+          height={20}
+          priority
+        />
+        <div className="flex flex-col items-center gap-6 text-center sm:items-start sm:text-left">
+          <h1 className="max-w-xs text-3xl font-semibold leading-10 tracking-tight text-black dark:text-zinc-50">
+            To get started, edit the page.tsx file.
+          </h1>
+          <p className="max-w-md text-lg leading-8 text-zinc-600 dark:text-zinc-400">
+            Looking for a starting point or more instructions? Head over to{" "}
+            <a
+              href="https://vercel.com/templates?framework=next.js&utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
+              className="font-medium text-zinc-950 dark:text-zinc-50"
+            >
+              Templates
+            </a>{" "}
+            or the{" "}
+            <a
+              href="https://nextjs.org/learn?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
+              className="font-medium text-zinc-950 dark:text-zinc-50"
+            >
+              Learning
+            </a>{" "}
+            center.
+          </p>
+        </div>
+        <div className="flex flex-col gap-4 text-base font-medium sm:flex-row">
+          <a
+            className="flex h-12 w-full items-center justify-center gap-2 rounded-full bg-foreground px-5 text-background transition-colors hover:bg-[#383838] dark:hover:bg-[#ccc] md:w-[158px]"
+            href="https://vercel.com/new?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
+            target="_blank"
+            rel="noopener noreferrer"
+          >
+            <Image
+              className="dark:invert"
+              src="/vercel.svg"
+              alt="Vercel logomark"
+              width={16}
+              height={16}
+            />
+            Deploy Now
+          </a>
+          <a
+            className="flex h-12 w-full items-center justify-center rounded-full border border-solid border-black/[.08] px-5 transition-colors hover:border-transparent hover:bg-black/[.04] dark:border-white/[.145] dark:hover:bg-[#1a1a1a] md:w-[158px]"
+            href="https://nextjs.org/docs?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
+            target="_blank"
+            rel="noopener noreferrer"
+          >
+            Documentation
+          </a>
+        </div>
+      </main>
+    </div>
+  );
+}
--- a/frontend/src/components/preview/index.ts
+++ b/frontend/src/components/preview/index.ts
@@ -0,0 +1 @@
+export { PreviewPlayer } from './preview-player'
--- a/frontend/src/components/preview/preview-player.tsx
+++ b/frontend/src/components/preview/preview-player.tsx
@@ -0,0 +1,176 @@
+'use client'
+
+import { useEffect, useRef, useCallback } from 'react'
+import { Play, Pause, SkipBack, SkipForward, Maximize } from 'lucide-react'
+import { Button } from '@/components/ui/button'
+import { Slider } from '@/components/ui/slider'
+import { useEditorStore } from '@/stores/editor-store'
+
+export function PreviewPlayer() {
+    const {
+        storyboard,
+        isPlaying,
+        currentTime,
+        setPlaying,
+        setCurrentTime,
+        selectedFrameId,
+        setSelectedFrameId
+    } = useEditorStore()
+
+    const timerRef = useRef<NodeJS.Timeout | null>(null)
+
+    // Get current frame based on currentTime
+    const getCurrentFrameIndex = useCallback(() => {
+        if (!storyboard?.frames.length) return 0
+        let elapsed = 0
+        for (let i = 0; i < storyboard.frames.length; i++) {
+            elapsed += storyboard.frames[i].duration
+            if (currentTime < elapsed) return i
+        }
+        return storyboard.frames.length - 1
+    }, [storyboard, currentTime])
+
+    // Update selected frame when time changes during playback
+    useEffect(() => {
+        if (isPlaying && storyboard?.frames.length) {
+            const frameIndex = getCurrentFrameIndex()
+            const frame = storyboard.frames[frameIndex]
+            if (frame && frame.id !== selectedFrameId) {
+                setSelectedFrameId(frame.id)
+            }
+        }
+    }, [currentTime, isPlaying, storyboard, selectedFrameId, setSelectedFrameId, getCurrentFrameIndex])
+
+    // Playback timer
+    useEffect(() => {
+        if (isPlaying) {
+            timerRef.current = setInterval(() => {
+                setCurrentTime((prev: number) => {
+                    const totalDuration = storyboard?.totalDuration || 0
+                    if (prev >= totalDuration) {
+                        setPlaying(false)
+                        return 0
+                    }
+                    return prev + 0.1
+                })
+            }, 100)
+        } else {
+            if (timerRef.current) {
+                clearInterval(timerRef.current)
+                timerRef.current = null
+            }
+        }
+        return () => {
+            if (timerRef.current) {
+                clearInterval(timerRef.current)
+            }
+        }
+    }, [isPlaying, storyboard, setCurrentTime, setPlaying])
+
+    const selectedFrame = storyboard?.frames.find((f) => f.id === selectedFrameId)
+
+    const formatTime = (seconds: number) => {
+        const mins = Math.floor(seconds / 60)
+        const secs = Math.floor(seconds % 60)
+        return `${mins}:${secs.toString().padStart(2, '0')}`
+    }
+
+    // Navigate to previous/next frame
+    const goToPrevFrame = () => {
+        if (!storyboard?.frames.length) return
+        const currentIndex = storyboard.frames.findIndex(f => f.id === selectedFrameId)
+        if (currentIndex > 0) {
+            const prevFrame = storyboard.frames[currentIndex - 1]
+            setSelectedFrameId(prevFrame.id)
+            // Calculate time for this frame
+            let time = 0
+            for (let i = 0; i < currentIndex - 1; i++) {
+                time += storyboard.frames[i].duration
+            }
+            setCurrentTime(time)
+        }
+    }
+
+    const goToNextFrame = () => {
+        if (!storyboard?.frames.length) return
+        const currentIndex = storyboard.frames.findIndex(f => f.id === selectedFrameId)
+        if (currentIndex < storyboard.frames.length - 1) {
+            const nextFrame = storyboard.frames[currentIndex + 1]
+            setSelectedFrameId(nextFrame.id)
+            // Calculate time for this frame
+            let time = 0
+            for (let i = 0; i <= currentIndex; i++) {
+                time += storyboard.frames[i].duration
+            }
+            setCurrentTime(time)
+        }
+    }
+
+    return (
+        <div className="flex flex-col h-full">
+            {/* Video/Image Preview Area - Fixed height */}
+            <div className="flex-1 min-h-0 flex items-center justify-center bg-black">
+                {selectedFrame?.imagePath ? (
+                    <img
+                        src={selectedFrame.imagePath}
+                        alt="Preview"
+                        className="max-h-full max-w-full object-contain"
+                    />
+                ) : (
+                    <div className="text-muted-foreground text-center">
+                        <p className="text-lg mb-2">预览区域</p>
+                        <p className="text-sm">选择分镜查看预览</p>
+                    </div>
+                )}
+            </div>
+
+            {/* Playback Controls - Fixed at bottom */}
+            <div className="flex-shrink-0 bg-background/90 backdrop-blur p-4 space-y-3 border-t">
+                {/* Progress bar */}
+                <div className="flex items-center gap-3">
+                    <span className="text-xs text-muted-foreground w-12">
+                        {formatTime(currentTime)}
+                    </span>
+                    <Slider
+                        value={[currentTime]}
+                        min={0}
+                        max={storyboard?.totalDuration || 100}
+                        step={0.1}
+                        onValueChange={([value]) => setCurrentTime(value)}
+                        className="flex-1"
+                    />
+                    <span className="text-xs text-muted-foreground w-12 text-right">
+                        {formatTime(storyboard?.totalDuration || 0)}
+                    </span>
+                </div>
+
+                {/* Control buttons */}
+                <div className="flex items-center justify-center gap-2">
+                    <Button variant="ghost" size="icon" onClick={goToPrevFrame}>
+                        <SkipBack className="h-4 w-4" />
+                    </Button>
+                    <Button
+                        variant="outline"
+                        size="icon"
+                        className="h-10 w-10"
+                        onClick={() => setPlaying(!isPlaying)}
+                    >
+                        {isPlaying ? (
+                            <Pause className="h-5 w-5" />
+                        ) : (
+                            <Play className="h-5 w-5 ml-0.5" />
+                        )}
+                    </Button>
+                    <Button variant="ghost" size="icon" onClick={goToNextFrame}>
+                        <SkipForward className="h-4 w-4" />
+                    </Button>
+                    <div className="flex-1" />
+                    <Button variant="ghost" size="icon">
+                        <Maximize className="h-4 w-4" />
+                    </Button>
+                </div>
+            </div>
+        </div>
+    )
+}
+
--- a/frontend/src/components/timeline/frame-card.tsx
+++ b/frontend/src/components/timeline/frame-card.tsx
@@ -0,0 +1,95 @@
+'use client'
+
+import { useSortable } from '@dnd-kit/sortable'
+import { CSS } from '@dnd-kit/utilities'
+import { GripVertical, Clock, Image as ImageIcon } from 'lucide-react'
+import { Card, CardContent, CardHeader } from '@/components/ui/card'
+import { Slider } from '@/components/ui/slider'
+import { cn } from '@/lib/utils'
+import { StoryboardFrame, useEditorStore } from '@/stores/editor-store'
+
+interface FrameCardProps {
+    frame: StoryboardFrame
+    isSelected: boolean
+}
+
+export function FrameCard({ frame, isSelected }: FrameCardProps) {
+    const { selectFrame, updateFrameDuration } = useEditorStore()
+
+    const {
+        attributes,
+        listeners,
+        setNodeRef,
+        transform,
+        transition,
+        isDragging,
+    } = useSortable({ id: frame.id })
+
+    const style = {
+        transform: CSS.Transform.toString(transform),
+        transition,
+    }
+
+    return (
+        <Card
+            ref={setNodeRef}
+            style={style}
+            className={cn(
+                'cursor-pointer transition-all',
+                isSelected && 'ring-2 ring-primary',
+                isDragging && 'opacity-50 shadow-lg'
+            )}
+            onClick={() => selectFrame(frame.id)}
+        >
+            <CardHeader className="p-3 pb-2 flex flex-row items-center gap-2">
+                <button
+                    {...attributes}
+                    {...listeners}
+                    className="cursor-grab active:cursor-grabbing p-1 hover:bg-muted rounded"
+                >
+                    <GripVertical className="h-4 w-4 text-muted-foreground" />
+                </button>
+                <span className="text-sm font-medium">分镜 {frame.order + 1}</span>
+            </CardHeader>
+
+            <CardContent className="p-3 pt-0 space-y-3">
+                {/* Thumbnail */}
+                <div className="aspect-video bg-muted rounded-md flex items-center justify-center overflow-hidden">
+                    {frame.imagePath ? (
+                        <img
+                            src={frame.imagePath}
+                            alt={`Frame ${frame.order + 1}`}
+                            className="object-cover w-full h-full"
+                        />
+                    ) : (
+                        <ImageIcon className="h-8 w-8 text-muted-foreground" />
+                    )}
+                </div>
+
+                {/* Narration */}
+                <p className="text-sm text-muted-foreground line-clamp-2">
+                    {frame.narration}
+                </p>
+
+                {/* Duration slider */}
+                <div className="space-y-1">
+                    <div className="flex items-center justify-between text-xs text-muted-foreground">
+                        <span className="flex items-center gap-1">
+                            <Clock className="h-3 w-3" />
+                            时长
+                        </span>
+                        <span>{frame.duration.toFixed(1)}s</span>
+                    </div>
+                    <Slider
+                        value={[frame.duration]}
+                        min={0.5}
+                        max={10}
+                        step={0.1}
+                        onValueChange={([value]) => updateFrameDuration(frame.id, value)}
+                        onClick={(e) => e.stopPropagation()}
+                    />
+                </div>
+            </CardContent>
+        </Card>
+    )
+}
--- a/frontend/src/components/timeline/index.ts
+++ b/frontend/src/components/timeline/index.ts
@@ -0,0 +1,2 @@
+export { Timeline } from './timeline'
+export { FrameCard } from './frame-card'
--- a/frontend/src/components/timeline/timeline.tsx
+++ b/frontend/src/components/timeline/timeline.tsx
@@ -0,0 +1,94 @@
+'use client'
+
+import {
+    DndContext,
+    closestCenter,
+    KeyboardSensor,
+    PointerSensor,
+    useSensor,
+    useSensors,
+    DragEndEvent,
+} from '@dnd-kit/core'
+import {
+    SortableContext,
+    sortableKeyboardCoordinates,
+    horizontalListSortingStrategy,
+} from '@dnd-kit/sortable'
+import { ScrollArea, ScrollBar } from '@/components/ui/scroll-area'
+import { useEditorStore } from '@/stores/editor-store'
+import { FrameCard } from './frame-card'
+
+export function Timeline() {
+    const { storyboard, selectedFrameId, reorderFrames } = useEditorStore()
+
+    const sensors = useSensors(
+        useSensor(PointerSensor, {
+            activationConstraint: {
+                distance: 8,
+            },
+        }),
+        useSensor(KeyboardSensor, {
+            coordinateGetter: sortableKeyboardCoordinates,
+        })
+    )
+
+    const handleDragEnd = (event: DragEndEvent) => {
+        const { active, over } = event
+
+        if (over && active.id !== over.id) {
+            const frames = storyboard?.frames || []
+            const oldIndex = frames.findIndex((f) => f.id === active.id)
+            const newIndex = frames.findIndex((f) => f.id === over.id)
+
+            if (oldIndex !== -1 && newIndex !== -1) {
+                reorderFrames(oldIndex, newIndex)
+            }
+        }
+    }
+
+    if (!storyboard || storyboard.frames.length === 0) {
+        return (
+            <div className="h-64 flex items-center justify-center text-muted-foreground border-t">
+                <p>暂无分镜，请先生成视频</p>
+            </div>
+        )
+    }
+
+    const sortedFrames = [...storyboard.frames].sort((a, b) => a.order - b.order)
+
+    return (
+        <div className="border-t bg-muted/30">
+            <div className="p-4 border-b flex items-center justify-between">
+                <h3 className="font-semibold">时间轴</h3>
+                <span className="text-sm text-muted-foreground">
+                    {storyboard.frames.length} 个分镜 · 总时长 {storyboard.totalDuration.toFixed(1)}s
+                </span>
+            </div>
+
+            <ScrollArea className="w-full">
+                <DndContext
+                    sensors={sensors}
+                    collisionDetection={closestCenter}
+                    onDragEnd={handleDragEnd}
+                >
+                    <SortableContext
+                        items={sortedFrames.map((f) => f.id)}
+                        strategy={horizontalListSortingStrategy}
+                    >
+                        <div className="flex gap-4 p-4">
+                            {sortedFrames.map((frame) => (
+                                <div key={frame.id} className="w-64 flex-shrink-0">
+                                    <FrameCard
+                                        frame={frame}
+                                        isSelected={frame.id === selectedFrameId}
+                                    />
+                                </div>
+                            ))}
+                        </div>
+                    </SortableContext>
+                </DndContext>
+                <ScrollBar orientation="horizontal" />
+            </ScrollArea>
+        </div>
+    )
+}
--- a/frontend/src/components/ui/button.tsx
+++ b/frontend/src/components/ui/button.tsx
@@ -0,0 +1,62 @@
+import * as React from "react"
+import { Slot } from "@radix-ui/react-slot"
+import { cva, type VariantProps } from "class-variance-authority"
+
+import { cn } from "@/lib/utils"
+
+const buttonVariants = cva(
+  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
+  {
+    variants: {
+      variant: {
+        default: "bg-primary text-primary-foreground hover:bg-primary/90",
+        destructive:
+          "bg-destructive text-white hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60",
+        outline:
+          "border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50",
+        secondary:
+          "bg-secondary text-secondary-foreground hover:bg-secondary/80",
+        ghost:
+          "hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50",
+        link: "text-primary underline-offset-4 hover:underline",
+      },
+      size: {
+        default: "h-9 px-4 py-2 has-[>svg]:px-3",
+        sm: "h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5",
+        lg: "h-10 rounded-md px-6 has-[>svg]:px-4",
+        icon: "size-9",
+        "icon-sm": "size-8",
+        "icon-lg": "size-10",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default",
+    },
+  }
+)
+
+function Button({
+  className,
+  variant = "default",
+  size = "default",
+  asChild = false,
+  ...props
+}: React.ComponentProps<"button"> &
+  VariantProps<typeof buttonVariants> & {
+    asChild?: boolean
+  }) {
+  const Comp = asChild ? Slot : "button"
+
+  return (
+    <Comp
+      data-slot="button"
+      data-variant={variant}
+      data-size={size}
+      className={cn(buttonVariants({ variant, size, className }))}
+      {...props}
+    />
+  )
+}
+
+export { Button, buttonVariants }
--- a/frontend/src/components/ui/card.tsx
+++ b/frontend/src/components/ui/card.tsx
@@ -0,0 +1,92 @@
+import * as React from "react"
+
+import { cn } from "@/lib/utils"
+
+function Card({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card"
+      className={cn(
+        "bg-card text-card-foreground flex flex-col gap-6 rounded-xl border py-6 shadow-sm",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function CardHeader({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-header"
+      className={cn(
+        "@container/card-header grid auto-rows-min grid-rows-[auto_auto] items-start gap-2 px-6 has-data-[slot=card-action]:grid-cols-[1fr_auto] [.border-b]:pb-6",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function CardTitle({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-title"
+      className={cn("leading-none font-semibold", className)}
+      {...props}
+    />
+  )
+}
+
+function CardDescription({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-description"
+      className={cn("text-muted-foreground text-sm", className)}
+      {...props}
+    />
+  )
+}
+
+function CardAction({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-action"
+      className={cn(
+        "col-start-2 row-span-2 row-start-1 self-start justify-self-end",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function CardContent({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-content"
+      className={cn("px-6", className)}
+      {...props}
+    />
+  )
+}
+
+function CardFooter({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-footer"
+      className={cn("flex items-center px-6 [.border-t]:pt-6", className)}
+      {...props}
+    />
+  )
+}
+
+export {
+  Card,
+  CardHeader,
+  CardFooter,
+  CardTitle,
+  CardAction,
+  CardDescription,
+  CardContent,
+}
--- a/frontend/src/components/ui/scroll-area.tsx
+++ b/frontend/src/components/ui/scroll-area.tsx
@@ -0,0 +1,58 @@
+"use client"
+
+import * as React from "react"
+import * as ScrollAreaPrimitive from "@radix-ui/react-scroll-area"
+
+import { cn } from "@/lib/utils"
+
+function ScrollArea({
+  className,
+  children,
+  ...props
+}: React.ComponentProps<typeof ScrollAreaPrimitive.Root>) {
+  return (
+    <ScrollAreaPrimitive.Root
+      data-slot="scroll-area"
+      className={cn("relative", className)}
+      {...props}
+    >
+      <ScrollAreaPrimitive.Viewport
+        data-slot="scroll-area-viewport"
+        className="focus-visible:ring-ring/50 size-full rounded-[inherit] transition-[color,box-shadow] outline-none focus-visible:ring-[3px] focus-visible:outline-1"
+      >
+        {children}
+      </ScrollAreaPrimitive.Viewport>
+      <ScrollBar />
+      <ScrollAreaPrimitive.Corner />
+    </ScrollAreaPrimitive.Root>
+  )
+}
+
+function ScrollBar({
+  className,
+  orientation = "vertical",
+  ...props
+}: React.ComponentProps<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>) {
+  return (
+    <ScrollAreaPrimitive.ScrollAreaScrollbar
+      data-slot="scroll-area-scrollbar"
+      orientation={orientation}
+      className={cn(
+        "flex touch-none p-px transition-colors select-none",
+        orientation === "vertical" &&
+          "h-full w-2.5 border-l border-l-transparent",
+        orientation === "horizontal" &&
+          "h-2.5 flex-col border-t border-t-transparent",
+        className
+      )}
+      {...props}
+    >
+      <ScrollAreaPrimitive.ScrollAreaThumb
+        data-slot="scroll-area-thumb"
+        className="bg-border relative flex-1 rounded-full"
+      />
+    </ScrollAreaPrimitive.ScrollAreaScrollbar>
+  )
+}
+
+export { ScrollArea, ScrollBar }
--- a/frontend/src/components/ui/separator.tsx
+++ b/frontend/src/components/ui/separator.tsx
@@ -0,0 +1,28 @@
+"use client"
+
+import * as React from "react"
+import * as SeparatorPrimitive from "@radix-ui/react-separator"
+
+import { cn } from "@/lib/utils"
+
+function Separator({
+  className,
+  orientation = "horizontal",
+  decorative = true,
+  ...props
+}: React.ComponentProps<typeof SeparatorPrimitive.Root>) {
+  return (
+    <SeparatorPrimitive.Root
+      data-slot="separator"
+      decorative={decorative}
+      orientation={orientation}
+      className={cn(
+        "bg-border shrink-0 data-[orientation=horizontal]:h-px data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-px",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export { Separator }
--- a/frontend/src/components/ui/slider.tsx
+++ b/frontend/src/components/ui/slider.tsx
@@ -0,0 +1,63 @@
+"use client"
+
+import * as React from "react"
+import * as SliderPrimitive from "@radix-ui/react-slider"
+
+import { cn } from "@/lib/utils"
+
+function Slider({
+  className,
+  defaultValue,
+  value,
+  min = 0,
+  max = 100,
+  ...props
+}: React.ComponentProps<typeof SliderPrimitive.Root>) {
+  const _values = React.useMemo(
+    () =>
+      Array.isArray(value)
+        ? value
+        : Array.isArray(defaultValue)
+          ? defaultValue
+          : [min, max],
+    [value, defaultValue, min, max]
+  )
+
+  return (
+    <SliderPrimitive.Root
+      data-slot="slider"
+      defaultValue={defaultValue}
+      value={value}
+      min={min}
+      max={max}
+      className={cn(
+        "relative flex w-full touch-none items-center select-none data-[disabled]:opacity-50 data-[orientation=vertical]:h-full data-[orientation=vertical]:min-h-44 data-[orientation=vertical]:w-auto data-[orientation=vertical]:flex-col",
+        className
+      )}
+      {...props}
+    >
+      <SliderPrimitive.Track
+        data-slot="slider-track"
+        className={cn(
+          "bg-muted relative grow overflow-hidden rounded-full data-[orientation=horizontal]:h-1.5 data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-1.5"
+        )}
+      >
+        <SliderPrimitive.Range
+          data-slot="slider-range"
+          className={cn(
+            "bg-primary absolute data-[orientation=horizontal]:h-full data-[orientation=vertical]:w-full"
+          )}
+        />
+      </SliderPrimitive.Track>
+      {Array.from({ length: _values.length }, (_, index) => (
+        <SliderPrimitive.Thumb
+          data-slot="slider-thumb"
+          key={index}
+          className="border-primary ring-ring/50 block size-4 shrink-0 rounded-full border bg-white shadow-sm transition-[color,box-shadow] hover:ring-4 focus-visible:ring-4 focus-visible:outline-hidden disabled:pointer-events-none disabled:opacity-50"
+        />
+      ))}
+    </SliderPrimitive.Root>
+  )
+}
+
+export { Slider }
--- a/frontend/src/services/editor-api.ts
+++ b/frontend/src/services/editor-api.ts
@@ -0,0 +1,198 @@
+/**
+ * Editor API client for connecting to FastAPI backend
+ */
+
+const API_BASE = process.env.NEXT_PUBLIC_API_URL || 'http://localhost:8000/api'
+
+export interface StoryboardFrame {
+    id: string
+    index: number
+    order: number
+    narration: string
+    image_prompt?: string
+    image_path?: string
+    audio_path?: string
+    video_segment_path?: string
+    duration: number
+}
+
+export interface Storyboard {
+    id: string
+    title: string
+    frames: StoryboardFrame[]
+    total_duration: number
+    final_video_path?: string
+    created_at?: string
+}
+
+export interface PreviewResponse {
+    preview_path: string
+    duration: number
+    frames_count: number
+}
+
+class EditorApiClient {
+    private baseUrl: string
+
+    constructor(baseUrl: string = API_BASE) {
+        this.baseUrl = baseUrl
+    }
+
+    /**
+     * Fetch storyboard by ID
+     */
+    async getStoryboard(storyboardId: string): Promise<Storyboard> {
+        const response = await fetch(`${this.baseUrl}/editor/storyboard/${storyboardId}`)
+
+        if (!response.ok) {
+            throw new Error(`Failed to fetch storyboard: ${response.statusText}`)
+        }
+
+        return response.json()
+    }
+
+    /**
+     * Reorder frames in storyboard
+     */
+    async reorderFrames(storyboardId: string, order: string[]): Promise<Storyboard> {
+        const response = await fetch(`${this.baseUrl}/editor/storyboard/${storyboardId}/reorder`, {
+            method: 'PATCH',
+            headers: { 'Content-Type': 'application/json' },
+            body: JSON.stringify({ order }),
+        })
+
+        if (!response.ok) {
+            throw new Error(`Failed to reorder frames: ${response.statusText}`)
+        }
+
+        return response.json()
+    }
+
+    /**
+     * Update frame duration
+     */
+    async updateFrameDuration(
+        storyboardId: string,
+        frameId: string,
+        duration: number
+    ): Promise<StoryboardFrame> {
+        const response = await fetch(
+            `${this.baseUrl}/editor/storyboard/${storyboardId}/frames/${frameId}/duration`,
+            {
+                method: 'PATCH',
+                headers: { 'Content-Type': 'application/json' },
+                body: JSON.stringify({ duration }),
+            }
+        )
+
+        if (!response.ok) {
+            throw new Error(`Failed to update duration: ${response.statusText}`)
+        }
+
+        return response.json()
+    }
+
+    /**
+     * Generate preview video
+     */
+    async generatePreview(
+        storyboardId: string,
+        startFrame?: number,
+        endFrame?: number
+    ): Promise<PreviewResponse> {
+        const response = await fetch(`${this.baseUrl}/editor/storyboard/${storyboardId}/preview`, {
+            method: 'POST',
+            headers: { 'Content-Type': 'application/json' },
+            body: JSON.stringify({
+                start_frame: startFrame ?? 0,
+                end_frame: endFrame,
+            }),
+        })
+
+        if (!response.ok) {
+            throw new Error(`Failed to generate preview: ${response.statusText}`)
+        }
+
+        return response.json()
+    }
+
+    /**
+     * Update frame content (narration and/or image prompt)
+     */
+    async updateFrame(
+        storyboardId: string,
+        frameId: string,
+        data: { narration?: string; image_prompt?: string }
+    ): Promise<{ id: string; narration: string; image_prompt?: string; updated: boolean }> {
+        const response = await fetch(
+            `${this.baseUrl}/editor/storyboard/${storyboardId}/frames/${frameId}`,
+            {
+                method: 'PUT',
+                headers: { 'Content-Type': 'application/json' },
+                body: JSON.stringify(data),
+            }
+        )
+
+        if (!response.ok) {
+            const error = await response.json().catch(() => ({ detail: response.statusText }))
+            throw new Error(error.detail || `Failed to update frame: ${response.statusText}`)
+        }
+
+        return response.json()
+    }
+
+    /**
+     * Regenerate image for a frame
+     */
+    async regenerateImage(
+        storyboardId: string,
+        frameId: string,
+        imagePrompt?: string
+    ): Promise<{ image_path: string; success: boolean }> {
+        const response = await fetch(
+            `${this.baseUrl}/editor/storyboard/${storyboardId}/frames/${frameId}/regenerate-image`,
+            {
+                method: 'POST',
+                headers: { 'Content-Type': 'application/json' },
+                body: JSON.stringify({ image_prompt: imagePrompt }),
+            }
+        )
+
+        if (!response.ok) {
+            const error = await response.json().catch(() => ({ detail: response.statusText }))
+            throw new Error(error.detail || `Failed to regenerate image: ${response.statusText}`)
+        }
+
+        return response.json()
+    }
+
+    /**
+     * Regenerate audio for a frame
+     */
+    async regenerateAudio(
+        storyboardId: string,
+        frameId: string,
+        narration?: string,
+        voice?: string
+    ): Promise<{ audio_path: string; duration: number; success: boolean }> {
+        const response = await fetch(
+            `${this.baseUrl}/editor/storyboard/${storyboardId}/frames/${frameId}/regenerate-audio`,
+            {
+                method: 'POST',
+                headers: { 'Content-Type': 'application/json' },
+                body: JSON.stringify({ narration, voice }),
+            }
+        )
+
+        if (!response.ok) {
+            const error = await response.json().catch(() => ({ detail: response.statusText }))
+            throw new Error(error.detail || `Failed to regenerate audio: ${response.statusText}`)
+        }
+
+        return response.json()
+    }
+}
+
+// Export singleton instance
+export const editorApi = new EditorApiClient()
+
--- a/frontend/src/stores/editor-store.ts
+++ b/frontend/src/stores/editor-store.ts
@@ -0,0 +1,122 @@
+import { create } from 'zustand'
+
+export interface StoryboardFrame {
+  id: string
+  index: number
+  narration: string
+  imagePrompt: string
+  imagePath?: string
+  audioPath?: string
+  duration: number
+  order: number
+}
+
+export interface Storyboard {
+  id: string
+  title: string
+  frames: StoryboardFrame[]
+  totalDuration: number
+}
+
+interface EditorState {
+  storyboard: Storyboard | null
+  selectedFrameId: string | null
+  isPlaying: boolean
+  currentTime: number
+
+  // Actions
+  setStoryboard: (storyboard: Storyboard) => void
+  selectFrame: (frameId: string | null) => void
+  setSelectedFrameId: (frameId: string | null) => void // Alias for selectFrame
+  reorderFrames: (fromIndex: number, toIndex: number) => void
+  updateFrameDuration: (frameId: string, duration: number) => void
+  updateFrame: (frameId: string, updates: Partial<StoryboardFrame>) => void
+  setPlaying: (playing: boolean) => void
+  setCurrentTime: (time: number | ((prev: number) => number)) => void
+}
+
+export const useEditorStore = create<EditorState>((set, get) => ({
+  storyboard: null,
+  selectedFrameId: null,
+  isPlaying: false,
+  currentTime: 0,
+
+  setStoryboard: (storyboard) => set({ storyboard }),
+
+  selectFrame: (frameId) => set({ selectedFrameId: frameId }),
+
+  setSelectedFrameId: (frameId) => set({ selectedFrameId: frameId }),
+
+  reorderFrames: (fromIndex, toIndex) => {
+    const { storyboard } = get()
+    if (!storyboard) return
+
+    const frames = [...storyboard.frames]
+    const [removed] = frames.splice(fromIndex, 1)
+    frames.splice(toIndex, 0, removed)
+
+    // Update order values
+    const reorderedFrames = frames.map((frame, idx) => ({
+      ...frame,
+      order: idx,
+    }))
+
+    set({
+      storyboard: {
+        ...storyboard,
+        frames: reorderedFrames,
+      },
+    })
+  },
+
+  updateFrameDuration: (frameId, duration) => {
+    const { storyboard } = get()
+    if (!storyboard) return
+
+    const frames = storyboard.frames.map((frame) =>
+      frame.id === frameId ? { ...frame, duration } : frame
+    )
+
+    const totalDuration = frames.reduce((sum, f) => sum + f.duration, 0)
+
+    set({
+      storyboard: {
+        ...storyboard,
+        frames,
+        totalDuration,
+      },
+    })
+  },
+
+  updateFrame: (frameId, updates) => {
+    const { storyboard } = get()
+    if (!storyboard) return
+
+    const frames = storyboard.frames.map((frame) =>
+      frame.id === frameId ? { ...frame, ...updates } : frame
+    )
+
+    const totalDuration = frames.reduce((sum, f) => sum + f.duration, 0)
+
+    set({
+      storyboard: {
+        ...storyboard,
+        frames,
+        totalDuration,
+      },
+    })
+  },
+
+  setPlaying: (playing) => set({ isPlaying: playing }),
+
+  setCurrentTime: (time) => {
+    if (typeof time === 'function') {
+      const { currentTime } = get()
+      set({ currentTime: time(currentTime) })
+    } else {
+      set({ currentTime: time })
+    }
+  },
+}))
+
+
				`@@ -0,0 +1 @@`
				`export { PreviewPlayer } from './preview-player'`