Hugging Face's logo

Spaces:
ruslanmv
/
HomePilot
Running

App Files Community
HomePilot / frontend /src /ui /CreatorStudioEditor.jsx
HomePilot Deploy Bot
chore(hf): sync HomePilot to HF Space
921d377
Raw History Blame Contribute Delete
130 kB
import React, { useEffect, useState, useCallback } from "react";
import { ArrowLeft, Play, Pause, SkipBack, SkipForward, Plus, RefreshCw, Check, Loader2, ImageIcon, Monitor, Edit3, Wand2, Save, X, Settings, FileText, Sparkles, AlertCircle, Download, Tv, Smartphone, Presentation, Camera, Palette, Star, Lock, Shield, Film, MoreHorizontal, Sliders, ChevronDown, } from "lucide-react";
import { useTVModeStore } from "./studio/stores/tvModeStore";
import { TVModeContainer } from "./studio/components/TVMode/TVModeContainer";
import CreatorStudioSettings, { CREATOR_STUDIO_PARAM_DEFAULTS, } from "./CreatorStudioSettings";
import CreatorExportWizard from "./components/CreatorExportWizard";
/**
* CreatorStudioEditor - Professional editor for Creator Studio projects
* Styled like Play Story mode but enhanced for creators
*/
export function CreatorStudioEditor({ projectId, backendUrl, apiKey, onExit, autoGenerateFirst = false, targetSceneCount = 8, defaultLLMModel = "", imageProvider = "comfyui", imageModel, imageWidth = 1344, imageHeight = 768, imageSteps, imageCfg, videoModel, enableVideoGeneration = false, }) {
const authKey = (apiKey || "").trim();
const [hasAutoTriggered, setHasAutoTriggered] = useState(false);
const [hasAutoGeneratedOutline, setHasAutoGeneratedOutline] = useState(false);
// TV Mode store
const tvModeActive = useTVModeStore((s) => s.isActive);
const enterTVMode = useTVModeStore((s) => s.enterTVMode);
const updateSceneImageByIdx = useTVModeStore((s) => s.updateSceneImageByIdx);
// State
const [project, setProject] = useState(null);
const [scenes, setScenes] = useState([]);
const [loading, setLoading] = useState(true);
// Story outline state
const [storyOutline, setStoryOutline] = useState(null);
const [isGeneratingOutline, setIsGeneratingOutline] = useState(false);
const [showOutlinePanel, setShowOutlinePanel] = useState(false);
const [showExportWizard, setShowExportWizard] = useState(false);
// Scene editor state
const [showSceneEditor, setShowSceneEditor] = useState(false);
const [editingScene, setEditingScene] = useState(null);
const [editNarration, setEditNarration] = useState("");
const [editImagePrompt, setEditImagePrompt] = useState("");
const [editNegativePrompt, setEditNegativePrompt] = useState("");
const [isSavingScene, setIsSavingScene] = useState(false);
// Model selection state
const [availableLLMModels, setAvailableLLMModels] = useState([]);
const [availableImageModels, setAvailableImageModels] = useState([]);
const [selectedLLMModel, setSelectedLLMModel] = useState(defaultLLMModel);
const [selectedImageModel, setSelectedImageModel] = useState(imageModel || "");
const [selectedVideoModel, setSelectedVideoModel] = useState(videoModel || "");
const [settingsLLMModel, setSettingsLLMModel] = useState(defaultLLMModel);
const [error, setError] = useState(null);
const [currentSceneIndex, setCurrentSceneIndex] = useState(0);
const [isPlaying, setIsPlaying] = useState(false);
const [isTTSSpeaking, setIsTTSSpeaking] = useState(false);
const [isSaving, setIsSaving] = useState(false);
const [lastSaved, setLastSaved] = useState(null);
const [isGeneratingScene, setIsGeneratingScene] = useState(false);
const [isGeneratingImage, setIsGeneratingImage] = useState(false);
const [isGeneratingVideo, setIsGeneratingVideo] = useState(false);
const [hoveredSceneIdx, setHoveredSceneIdx] = useState(null);
const [canPlayWebm, setCanPlayWebm] = useState(true);
// Batch generation state (generates all scenes from outline)
const [isBatchGenerating, setIsBatchGenerating] = useState(false);
const [batchProgress, setBatchProgress] = useState({ current: 0, total: 0, phase: 'scene' });
// Project Settings Modal state
const [showSettingsModal, setShowSettingsModal] = useState(false);
const [settingsTitle, setSettingsTitle] = useState("");
const [settingsLogline, setSettingsLogline] = useState("");
const [settingsPlatform, setSettingsPlatform] = useState("youtube_16_9");
const [settingsGoal, setSettingsGoal] = useState("Educate");
const [settingsVisualStyle, setSettingsVisualStyle] = useState("Cinematic");
const [settingsTones, setSettingsTones] = useState(["Documentary", "Calm"]);
const [settingsSceneCount, setSettingsSceneCount] = useState(8);
const [settingsSceneDuration, setSettingsSceneDuration] = useState(5);
const [settingsLockIdentity, setSettingsLockIdentity] = useState(true);
const [settingsContentRating, setSettingsContentRating] = useState("sfw");
const [settingsEnableVideo, setSettingsEnableVideo] = useState(false); // Enable video generation capability
const [isSavingSettings, setIsSavingSettings] = useState(false);
// Model override state for Project Settings
const [settingsImageModel, setSettingsImageModel] = useState("");
const [settingsVideoModel, setSettingsVideoModel] = useState("");
const [availableVideoModels, setAvailableVideoModels] = useState([]);
const [loadingModels, setLoadingModels] = useState(false);
// Generation parameters state (advanced customization)
const [genParams, setGenParams] = useState(CREATOR_STUDIO_PARAM_DEFAULTS);
// Project-level capability: can this project generate videos?
// IMPORTANT: do NOT rely only on enableVideoGeneration (wizard-only, transient)
// This derives video capability from project metadata/tags for existing projects
const projectWantsVideo = Boolean(project?.metadata?.generationMode === "video" ||
project?.tags?.includes("mode:video") ||
project?.tags?.includes("projectType:video") ||
project?.tags?.includes("projectType:video_series") ||
enableVideoGeneration === true // backward compatibility with wizard prop
);
// API helpers
const fetchApi = useCallback(async (path) => {
const url = `${backendUrl.replace(/\/+$/, "")}${path}`;
const res = await fetch(url, {
method: "GET",
headers: {
"Content-Type": "application/json",
...(authKey ? { "x-api-key": authKey } : {}),
},
});
if (!res.ok) {
const text = await res.text().catch(() => "");
throw new Error(`HTTP ${res.status}${text ? `: ${text}` : ""}`);
}
return (await res.json());
}, [backendUrl, authKey]);
const postApi = useCallback(async (path, body) => {
const url = `${backendUrl.replace(/\/+$/, "")}${path}`;
const res = await fetch(url, {
method: "POST",
headers: {
"Content-Type": "application/json",
...(authKey ? { "x-api-key": authKey } : {}),
},
body: JSON.stringify(body),
});
if (!res.ok) {
const text = await res.text().catch(() => "");
throw new Error(`HTTP ${res.status}${text ? `: ${text}` : ""}`);
}
return (await res.json());
}, [backendUrl, authKey]);
const patchApi = useCallback(async (path, body) => {
const url = `${backendUrl.replace(/\/+$/, "")}${path}`;
const res = await fetch(url, {
method: "PATCH",
headers: {
"Content-Type": "application/json",
...(authKey ? { "x-api-key": authKey } : {}),
},
body: JSON.stringify(body),
});
if (!res.ok) {
const text = await res.text().catch(() => "");
throw new Error(`HTTP ${res.status}${text ? `: ${text}` : ""}`);
}
return (await res.json());
}, [backendUrl, authKey]);
const deleteApi = useCallback(async (path) => {
const url = `${backendUrl.replace(/\/+$/, "")}${path}`;
const res = await fetch(url, {
method: "DELETE",
headers: {
"Content-Type": "application/json",
...(authKey ? { "x-api-key": authKey } : {}),
},
});
if (!res.ok) {
const text = await res.text().catch(() => "");
throw new Error(`HTTP ${res.status}${text ? `: ${text}` : ""}`);
}
return (await res.json());
}, [backendUrl, authKey]);
// ---------- API <-> UI normalization helpers ----------
// Backend may return snake_case (image_url/video_url). UI uses camelCase (imageUrl/videoUrl).
const normalizeScene = useCallback((raw) => {
return {
id: raw.id,
videoId: raw.videoId ?? raw.video_id ?? "",
idx: raw.idx ?? raw.index ?? raw.scene_index ?? 0,
narration: raw.narration ?? "",
imagePrompt: raw.imagePrompt ?? raw.image_prompt ?? "",
negativePrompt: raw.negativePrompt ?? raw.negative_prompt ?? "",
imageUrl: raw.imageUrl ?? raw.image_url ?? null,
videoUrl: raw.videoUrl ?? raw.video_url ?? null,
audioUrl: raw.audioUrl ?? raw.audio_url ?? null,
status: raw.status ?? "pending",
durationSec: raw.durationSec ?? raw.duration_sec ?? 5,
createdAt: raw.createdAt ?? raw.created_at ?? 0,
updatedAt: raw.updatedAt ?? raw.updated_at ?? 0,
};
}, []);
const normalizeScenes = useCallback((arr) => {
if (!Array.isArray(arr))
return [];
return arr.map(normalizeScene).sort((a, b) => a.idx - b.idx);
}, [normalizeScene]);
// Convert UI patch (camelCase) to backend-friendly payload (include snake_case too)
const toScenePatch = useCallback((patch) => {
const out = { ...patch };
if ("imageUrl" in out)
out.image_url = out.imageUrl;
if ("videoUrl" in out)
out.video_url = out.videoUrl;
if ("audioUrl" in out)
out.audio_url = out.audioUrl;
if ("imagePrompt" in out)
out.image_prompt = out.imagePrompt;
if ("negativePrompt" in out)
out.negative_prompt = out.negativePrompt;
if ("durationSec" in out)
out.duration_sec = out.durationSec;
return out;
}, []);
// Authoritative refresh from backend (source of truth)
const refreshScenes = useCallback(async () => {
try {
const scenesRes = await fetchApi(`/studio/videos/${projectId}/scenes`);
setScenes(normalizeScenes(scenesRes.scenes));
}
catch (e) {
// Non-critical - log but don't alert
console.warn('[CreatorStudioEditor] Failed to refresh scenes:', e);
}
}, [fetchApi, projectId, normalizeScenes]);
// Proxy video URL through backend for correct Content-Type headers
// This ensures WebM videos play correctly in browsers
const proxyVideoUrl = useCallback((rawUrl) => {
if (!rawUrl)
return null;
// Only proxy ComfyUI localhost URLs
if (rawUrl.startsWith('http://localhost:8188/') || rawUrl.startsWith('http://127.0.0.1:8188/')) {
return `${backendUrl.replace(/\/+$/, '')}/studio/media?url=${encodeURIComponent(rawUrl)}`;
}
// Already proxied or external URL - return as-is
return rawUrl;
}, [backendUrl]);
// Detect when "videoUrl" is actually an animated image (e.g. .webp, .gif)
// Some Comfy workflows output animated WebP instead of WebM when ffmpeg is unavailable
const isAnimatedImageUrl = useCallback((u) => {
if (!u)
return false;
const s = u.toLowerCase();
// Covers direct URLs and ComfyUI view?filename=... patterns
return s.includes(".webp") || s.includes(".gif");
}, []);
// Detect if URL is a WebM video
const isWebmUrl = useCallback((u) => {
if (!u)
return false;
return u.toLowerCase().includes(".webm");
}, []);
// Sync outline with current scenes (keeps outline in sync with actual scene data)
const syncOutlineWithScenes = useCallback(async () => {
if (!projectId)
return;
try {
console.log('[CreatorStudioEditor] Syncing outline with scenes...');
const data = await postApi(`/studio/videos/${projectId}/sync-outline`, {});
if (data.ok && data.outline) {
setStoryOutline(data.outline);
console.log(`[CreatorStudioEditor] Outline synced: ${data.scene_count} scenes`);
}
}
catch (e) {
console.warn('[CreatorStudioEditor] Failed to sync outline:', e.message);
// Non-critical - don't alert user
}
}, [projectId, postApi]);
// Generate AI-powered story outline
const generateStoryOutline = useCallback(async () => {
if (!project || isGeneratingOutline)
return;
setIsGeneratingOutline(true);
try {
console.log('[CreatorStudioEditor] Generating story outline...');
const data = await postApi(`/studio/videos/${projectId}/generate-outline`, {
target_scenes: targetSceneCount,
scene_duration: 5,
ollama_model: selectedLLMModel || undefined,
});
if (data.ok && data.outline) {
setStoryOutline(data.outline);
console.log('[CreatorStudioEditor] Story outline generated:', data.outline.title);
}
}
catch (e) {
console.error('[CreatorStudioEditor] Failed to generate outline:', e);
alert(`Failed to generate outline: ${e.message}`);
}
finally {
setIsGeneratingOutline(false);
}
}, [project, projectId, targetSceneCount, selectedLLMModel, isGeneratingOutline, postApi]);
// Load existing story outline
const loadStoryOutline = useCallback(async () => {
try {
const data = await fetchApi(`/studio/videos/${projectId}/outline`);
if (data.ok && data.outline) {
setStoryOutline(data.outline);
}
}
catch (e) {
console.log('[CreatorStudioEditor] No existing outline found');
}
}, [projectId, fetchApi]);
// Open scene editor
const openSceneEditor = useCallback((scene) => {
setEditingScene(scene);
setEditNarration(scene.narration || "");
setEditImagePrompt(scene.imagePrompt || "");
setEditNegativePrompt(scene.negativePrompt || "");
setShowSceneEditor(true);
}, []);
// Save scene edits
const saveSceneEdits = useCallback(async () => {
if (!editingScene)
return;
setIsSavingScene(true);
try {
await patchApi(`/studio/videos/${projectId}/scenes/${editingScene.id}`, {
narration: editNarration,
imagePrompt: editImagePrompt,
negativePrompt: editNegativePrompt,
});
setScenes((prev) => prev.map((s) => s.id === editingScene.id
? { ...s, narration: editNarration, imagePrompt: editImagePrompt, negativePrompt: editNegativePrompt }
: s));
setLastSaved(new Date());
setShowSceneEditor(false);
setEditingScene(null);
}
catch (e) {
console.error('[CreatorStudioEditor] Failed to save scene:', e);
alert(`Failed to save scene: ${e.message}`);
}
finally {
setIsSavingScene(false);
}
}, [editingScene, editNarration, editImagePrompt, editNegativePrompt, projectId, patchApi]);
// Parse tags from project
const parseTagsFromProject = useCallback((proj) => {
const tags = proj.tags || [];
let goal = "Educate";
let visualStyle = "Cinematic";
let tones = [];
let lockIdentity = true;
let sceneCount = 8;
let sceneDuration = 5;
tags.forEach((tag) => {
if (tag.startsWith("goal:")) {
const g = tag.replace("goal:", "");
if (g === "entertain")
goal = "Entertain";
else if (g === "educate")
goal = "Educate";
else if (g === "inspire")
goal = "Inspire";
}
else if (tag.startsWith("visual:")) {
const v = tag.replace("visual:", "").replace(/_/g, " ");
if (v.toLowerCase() === "cinematic")
visualStyle = "Cinematic";
else if (v.toLowerCase() === "digital art")
visualStyle = "Digital Art";
else if (v.toLowerCase() === "anime")
visualStyle = "Anime";
}
else if (tag.startsWith("tone:")) {
const t = tag.replace("tone:", "").replace(/_/g, " ");
const capitalizedTone = t.charAt(0).toUpperCase() + t.slice(1);
tones.push(capitalizedTone);
}
else if (tag === "lock:identity") {
lockIdentity = true;
}
else if (tag.startsWith("scenes:")) {
sceneCount = parseInt(tag.replace("scenes:", ""), 10) || 8;
}
else if (tag.startsWith("duration:")) {
sceneDuration = parseInt(tag.replace("duration:", ""), 10) || 5;
}
});
return { goal, visualStyle, tones, lockIdentity, sceneCount, sceneDuration };
}, []);
// Parse generation params from project tags
const parseGenParamsFromTags = useCallback((tags) => {
const t = tags || [];
const next = { ...CREATOR_STUDIO_PARAM_DEFAULTS };
const get = (k) => t.find(x => x.startsWith(`gen:${k}=`))?.split("=")[1];
next.enabled = get("enabled") === "1";
next.steps = Number(get("steps") ?? next.steps);
next.cfgScale = Number(get("cfg") ?? next.cfgScale);
next.creativity = Number(get("creativity") ?? next.creativity);
next.lockSeed = get("seedlock") === "1";
next.seed = Number(get("seed") ?? next.seed);
return next;
}, []);
// Open settings modal
const openSettingsModal = useCallback(async () => {
if (!project)
return;
setSettingsTitle(project.title || "");
setSettingsLogline(project.logline || "");
setSettingsPlatform(project.platformPreset || "youtube_16_9");
setSettingsContentRating(project.contentRating || "sfw");
const parsed = parseTagsFromProject(project);
setSettingsGoal(parsed.goal);
setSettingsVisualStyle(parsed.visualStyle);
setSettingsTones(parsed.tones.length > 0 ? parsed.tones : ["Documentary", "Calm"]);
setSettingsSceneCount(parsed.sceneCount);
setSettingsSceneDuration(parsed.sceneDuration);
setSettingsLockIdentity(parsed.lockIdentity);
// Set the LLM model from current selection or project tags
const tags = project.tags || [];
const llmTag = tags.find((t) => t.startsWith("llm:"));
setSettingsLLMModel(llmTag ? llmTag.replace("llm:", "") : selectedLLMModel);
// Initialize video generation enabled state from tags or enableVideoGeneration prop
const hasVideoMode = tags.includes("mode:video") ||
tags.includes("projectType:video") ||
tags.includes("projectType:video_series") ||
project?.metadata?.generationMode === "video" ||
enableVideoGeneration === true;
setSettingsEnableVideo(hasVideoMode);
// Initialize generation params from project tags
const parsedGenParams = parseGenParamsFromTags(tags);
// Also restore negative prompt from localStorage
try {
const key = `creatorstudio:genparams:${projectId}:neg`;
const stored = localStorage.getItem(key);
if (stored) {
const neg = JSON.parse(stored);
parsedGenParams.useCustomNegativePrompt = Boolean(neg?.use);
parsedGenParams.customNegativePrompt = String(neg?.text || "");
}
}
catch { }
setGenParams(parsedGenParams);
// Initialize image/video model overrides from project tags or props
const imageModelTag = tags.find((t) => t.startsWith("imageModel:"));
setSettingsImageModel(imageModelTag?.replace("imageModel:", "") || imageModel || "");
const videoModelTag = tags.find((t) => t.startsWith("videoModel:"));
setSettingsVideoModel(videoModelTag?.replace("videoModel:", "") || videoModel || "");
// Fetch available models to ensure the dropdowns are populated
setLoadingModels(true);
try {
// Fetch LLM, Image, and Video models in parallel
const [llmData, imgData, vidData] = await Promise.all([
fetchApi('/models?provider=ollama'),
fetchApi('/models?provider=comfyui&model_type=image'),
fetchApi('/models?provider=comfyui&model_type=video'),
]);
if (llmData.models) {
const models = llmData.models.map(m => ({ id: m.id, name: m.name || m.id }));
setAvailableLLMModels(models);
}
if (imgData.models) {
const models = imgData.models.map(m => ({ id: m, name: m }));
setAvailableImageModels(models);
}
if (vidData.models) {
const models = vidData.models.map(m => ({ id: m, name: m }));
setAvailableVideoModels(models);
}
}
catch (e) {
console.log('[CreatorStudioEditor] Failed to fetch models for settings:', e);
}
finally {
setLoadingModels(false);
}
setShowSettingsModal(true);
}, [project, projectId, parseTagsFromProject, parseGenParamsFromTags, selectedLLMModel, imageModel, videoModel, enableVideoGeneration, fetchApi]);
// Toggle tone in settings
const toggleSettingsTone = useCallback((tone) => {
setSettingsTones((prev) => {
if (prev.includes(tone)) {
return prev.filter((t) => t !== tone);
}
return [...prev, tone];
});
}, []);
// Build tags from settings
const buildTagsFromSettings = useCallback(() => {
const tags = [];
// Video generation mode - critical for "Make Video" button visibility
tags.push(`mode:${settingsEnableVideo ? "video" : "slideshow"}`);
if (settingsGoal)
tags.push(`goal:${settingsGoal.toLowerCase()}`);
if (settingsVisualStyle)
tags.push(`visual:${settingsVisualStyle.toLowerCase().replace(/ /g, "_")}`);
settingsTones.forEach((t) => tags.push(`tone:${t.toLowerCase().replace(/ /g, "_")}`));
if (settingsLockIdentity)
tags.push("lock:identity");
tags.push(`scenes:${settingsSceneCount}`);
tags.push(`duration:${settingsSceneDuration}`);
if (settingsLLMModel)
tags.push(`llm:${settingsLLMModel}`);
// Model overrides - allows per-project model selection
if (settingsImageModel)
tags.push(`imageModel:${settingsImageModel}`);
if (settingsVideoModel)
tags.push(`videoModel:${settingsVideoModel}`);
return tags;
}, [settingsEnableVideo, settingsGoal, settingsVisualStyle, settingsTones, settingsLockIdentity, settingsSceneCount, settingsSceneDuration, settingsLLMModel, settingsImageModel, settingsVideoModel]);
// Build tags including generation params
const buildGenTags = useCallback((p) => {
// Start with base settings tags, filter out any existing gen:* tags
const tags = buildTagsFromSettings().filter(t => !t.startsWith("gen:"));
// Add generation params
tags.push(`gen:enabled=${p.enabled ? "1" : "0"}`);
tags.push(`gen:steps=${p.steps}`);
tags.push(`gen:cfg=${p.cfgScale}`);
tags.push(`gen:creativity=${p.creativity}`);
tags.push(`gen:seedlock=${p.lockSeed ? "1" : "0"}`);
tags.push(`gen:seed=${p.seed}`);
return tags;
}, [buildTagsFromSettings]);
// Save project settings
const saveProjectSettings = useCallback(async () => {
if (!project)
return;
setIsSavingSettings(true);
try {
const tags = buildGenTags(genParams);
await patchApi(`/studio/videos/${projectId}`, {
title: settingsTitle.trim(),
logline: settingsLogline.trim(),
platformPreset: settingsPlatform,
contentRating: settingsContentRating,
tags,
});
// Persist negative prompt locally (can be long, so not in tags)
try {
const key = `creatorstudio:genparams:${projectId}:neg`;
localStorage.setItem(key, JSON.stringify({
use: genParams.useCustomNegativePrompt,
text: genParams.customNegativePrompt,
}));
}
catch { }
// Update local project state
setProject((prev) => prev ? {
...prev,
title: settingsTitle.trim(),
logline: settingsLogline.trim(),
platformPreset: settingsPlatform,
contentRating: settingsContentRating,
tags,
} : null);
// Update selected models to match settings
setSelectedLLMModel(settingsLLMModel);
if (settingsImageModel)
setSelectedImageModel(settingsImageModel);
if (settingsVideoModel)
setSelectedVideoModel(settingsVideoModel);
setLastSaved(new Date());
setShowSettingsModal(false);
console.log('[CreatorStudioEditor] Project settings saved');
}
catch (e) {
console.error('[CreatorStudioEditor] Failed to save settings:', e);
alert(`Failed to save settings: ${e.message}`);
}
finally {
setIsSavingSettings(false);
}
}, [project, projectId, settingsTitle, settingsLogline, settingsPlatform, settingsContentRating, settingsLLMModel, settingsImageModel, settingsVideoModel, genParams, buildGenTags, patchApi]);
// Delete scene
const deleteScene = useCallback(async (sceneId) => {
if (scenes.length <= 1) {
alert("Cannot delete the last scene.");
return;
}
if (!window.confirm("Delete this scene? This cannot be undone.")) {
return;
}
try {
console.log('[CreatorStudioEditor] Deleting scene:', sceneId);
await deleteApi(`/studio/videos/${projectId}/scenes/${sceneId}`);
const deletedIndex = scenes.findIndex((s) => s.id === sceneId);
setScenes((prev) => {
const newScenes = prev
.filter((s) => s.id !== sceneId)
.map((s, i) => ({ ...s, idx: i }));
return newScenes;
});
if (deletedIndex >= 0 && deletedIndex <= currentSceneIndex) {
setCurrentSceneIndex((prev) => Math.max(0, prev - 1));
}
setLastSaved(new Date());
console.log('[CreatorStudioEditor] Scene deleted successfully');
}
catch (e) {
console.error('[CreatorStudioEditor] Failed to delete scene:', e);
alert(`Failed to delete scene: ${e.message}`);
}
}, [projectId, scenes, currentSceneIndex, deleteApi]);
// Fetch available models
const fetchAvailableModels = useCallback(async () => {
try {
const llmData = await fetchApi('/models?provider=ollama');
if (llmData.models) {
const models = llmData.models.map(m => ({ id: m.id, name: m.name || m.id }));
setAvailableLLMModels(models);
// Auto-select a model if none selected
if (!selectedLLMModel && models.length > 0) {
// Prefer llama3:8b if available, otherwise first model
const preferred = models.find(m => m.id === "llama3:8b") || models[0];
setSelectedLLMModel(preferred.id);
setSettingsLLMModel(preferred.id);
}
}
}
catch (e) {
console.log('[CreatorStudioEditor] Failed to fetch LLM models:', e);
}
try {
const imgData = await fetchApi('/models?provider=comfyui&model_type=image');
if (imgData.models) {
setAvailableImageModels(imgData.models.map(m => ({ id: m, name: m })));
}
}
catch (e) {
console.log('[CreatorStudioEditor] Failed to fetch image models:', e);
}
}, [fetchApi, selectedLLMModel]);
// Convert Creator Studio scene to TV Mode scene format
const sceneToTVScene = useCallback((scene) => {
return {
idx: scene.idx,
narration: scene.narration || "",
image_prompt: scene.imagePrompt || "",
negative_prompt: scene.negativePrompt || "",
duration_s: scene.durationSec || 5,
tags: {},
image_url: scene.imageUrl || null,
status: scene.status === "ready" ? "ready" : "pending",
imageStatus: scene.imageUrl ? "ready" : "pending",
};
}, []);
// Enter TV Mode with current scenes
const handleEnterTVMode = useCallback(() => {
if (!project || scenes.length === 0)
return;
const tvScenes = scenes.map(sceneToTVScene);
enterTVMode(projectId, project.title, tvScenes, currentSceneIndex);
}, [project, projectId, scenes, currentSceneIndex, enterTVMode, sceneToTVScene]);
// Editor playback with TTS - speak scene narration when playing
useEffect(() => {
if (!isPlaying || scenes.length === 0) {
// Stop any ongoing speech when not playing
if (window.SpeechService?.stopSpeaking) {
window.SpeechService.stopSpeaking();
}
setIsTTSSpeaking(false);
return;
}
const currentScene = scenes[currentSceneIndex];
if (!currentScene?.narration) {
// No narration, advance to next scene after a short delay
const timer = setTimeout(() => {
if (currentSceneIndex < scenes.length - 1) {
setCurrentSceneIndex((i) => i + 1);
}
else {
setIsPlaying(false); // End of scenes
}
}, 2000);
return () => clearTimeout(timer);
}
// Speak the current scene's narration
const svc = window.SpeechService;
if (!svc?.speak) {
// Fallback if no TTS - use fixed timer
const timer = setTimeout(() => {
if (currentSceneIndex < scenes.length - 1) {
setCurrentSceneIndex((i) => i + 1);
}
else {
setIsPlaying(false);
}
}, 5000);
return () => clearTimeout(timer);
}
console.log(`[Editor] Speaking scene ${currentSceneIndex + 1} narration...`);
setIsTTSSpeaking(true);
svc.speak(currentScene.narration, {
onStart: () => setIsTTSSpeaking(true),
onEnd: () => {
setIsTTSSpeaking(false);
// Auto-advance to next scene after narration finishes
if (currentSceneIndex < scenes.length - 1) {
setCurrentSceneIndex((i) => i + 1);
}
else {
setIsPlaying(false); // End of scenes
}
},
onError: () => {
setIsTTSSpeaking(false);
// On error, advance anyway after delay
setTimeout(() => {
if (currentSceneIndex < scenes.length - 1) {
setCurrentSceneIndex((i) => i + 1);
}
else {
setIsPlaying(false);
}
}, 2000);
},
});
return () => {
svc.stopSpeaking?.();
};
}, [isPlaying, currentSceneIndex, scenes]);
// Generate image for a scene
const generateImageForScene = useCallback(async (sceneId, imagePrompt, force = false) => {
if (isGeneratingImage && !force) {
console.log('[CreatorStudioEditor] Already generating image, skipping');
return;
}
setIsGeneratingImage(true);
console.log('[CreatorStudioEditor] Generating image for scene:', sceneId);
try {
const llmProvider = imageProvider === 'comfyui' ? 'ollama' : imageProvider;
// Apply generation parameters if enabled
const effectiveSteps = genParams.enabled ? genParams.steps : imageSteps;
const effectiveCfg = genParams.enabled ? genParams.cfgScale : imageCfg;
// Get scene-level negative prompt if available
const scene = scenes.find(s => s.id === sceneId);
const sceneNeg = scene?.negativePrompt || "";
const combinedNegativePrompt = (genParams.enabled && genParams.useCustomNegativePrompt && genParams.customNegativePrompt.trim())
? [sceneNeg, genParams.customNegativePrompt.trim()].filter(Boolean).join(", ")
: sceneNeg || undefined;
// Send explicit width/height from wizard selection to backend
// This ensures the resolution selected in Step 2 is actually used
const data = await postApi('/chat', {
message: `imagine ${imagePrompt}`,
mode: 'imagine',
provider: llmProvider,
imgModel: selectedImageModel || imageModel || undefined,
// Pass explicit resolution from wizard (if available)
// Backend will use these values directly instead of computing from aspect ratio
...(imageWidth ? { imgWidth: imageWidth } : {}),
...(imageHeight ? { imgHeight: imageHeight } : {}),
imgSteps: effectiveSteps,
imgCfg: effectiveCfg,
negativePrompt: combinedNegativePrompt,
imgSeed: genParams.enabled && genParams.lockSeed ? genParams.seed : undefined,
creativity: genParams.enabled ? genParams.creativity : undefined,
promptRefinement: false,
});
const imageUrl = data?.media?.images?.[0];
if (imageUrl) {
console.log('[CreatorStudioEditor] Image generated:', imageUrl);
await patchApi(`/studio/videos/${projectId}/scenes/${sceneId}`, toScenePatch({
imageUrl,
status: 'ready',
}));
setScenes((prev) => prev.map((s) => s.id === sceneId ? { ...s, imageUrl, status: 'ready' } : s));
setLastSaved(new Date());
}
else {
console.warn('[CreatorStudioEditor] No image returned from backend');
}
}
catch (e) {
console.error('[CreatorStudioEditor] Failed to generate image:', e);
}
finally {
setIsGeneratingImage(false);
}
}, [projectId, imageProvider, imageModel, selectedImageModel, imageWidth, imageHeight, imageSteps, imageCfg, postApi, patchApi, isGeneratingImage, toScenePatch, genParams, scenes]);
// Generate video for a scene (converts image to video)
const generateVideoForScene = useCallback(async (sceneId, imageUrl, prompt) => {
if (isGeneratingVideo) {
console.log('[CreatorStudioEditor] Already generating video, skipping');
return;
}
if (!imageUrl) {
console.warn('[CreatorStudioEditor] No image URL to animate');
return;
}
setIsGeneratingVideo(true);
console.log('[CreatorStudioEditor] Generating video for scene:', sceneId);
try {
// IMPORTANT:
// Backend animate mode detects the reference image via URL in the message (in this project version).
// Backend also expects vidModel (not videoModel).
const data = await postApi('/chat', {
message: `${prompt || 'Animate this scene with subtle motion'} ${imageUrl}`,
mode: 'animate',
provider: 'ollama',
vidModel: selectedVideoModel || videoModel || undefined,
// Apply generation parameters if enabled
vidSeed: genParams.enabled && genParams.lockSeed ? genParams.seed : undefined,
vidSteps: genParams.enabled ? genParams.steps : undefined,
vidCfg: genParams.enabled ? genParams.cfgScale : undefined,
creativity: genParams.enabled ? genParams.creativity : undefined,
});
// Backend returns media.video_url (NOT always media.videos[]).
const rawVideoUrl = data?.media?.video_url ||
data?.media?.videos?.[0] ||
null;
if (rawVideoUrl) {
// Proxy the URL for correct Content-Type headers (WebM playback)
const proxiedVideoUrl = proxyVideoUrl(rawVideoUrl) || rawVideoUrl;
console.log('[CreatorStudioEditor] Video generated:', rawVideoUrl, '-> proxied:', proxiedVideoUrl);
await patchApi(`/studio/videos/${projectId}/scenes/${sceneId}`, toScenePatch({
videoUrl: proxiedVideoUrl,
status: 'ready',
}));
setScenes((prev) => prev.map((s) => s.id === sceneId ? { ...s, videoUrl: proxiedVideoUrl, status: 'ready' } : s));
setLastSaved(new Date());
}
else {
console.warn('[CreatorStudioEditor] No video returned from backend');
}
}
catch (e) {
console.error('[CreatorStudioEditor] Failed to generate video:', e);
}
finally {
setIsGeneratingVideo(false);
}
}, [projectId, videoModel, selectedVideoModel, postApi, patchApi, isGeneratingVideo, toScenePatch, proxyVideoUrl, genParams]);
// Remove video and fall back to image-only for a scene
const removeVideoForScene = useCallback(async (sceneId) => {
if (!window.confirm("Remove the video for this scene and keep the image?"))
return;
try {
await patchApi(`/studio/videos/${projectId}/scenes/${sceneId}`, toScenePatch({ videoUrl: null, status: 'ready' }));
setScenes(prev => prev.map(s => (s.id === sceneId ? { ...s, videoUrl: null, status: 'ready' } : s)));
setLastSaved(new Date());
}
catch (e) {
console.error('[CreatorStudioEditor] Failed to remove video:', e);
alert(`Failed to remove video: ${e.message}`);
}
}, [projectId, patchApi, toScenePatch]);
// Generate scene from outline
const generateSceneFromOutline = useCallback(async (sceneIndex) => {
if (!storyOutline || sceneIndex >= storyOutline.scenes.length)
return;
setIsGeneratingScene(true);
try {
const data = await postApi(`/studio/videos/${projectId}/scenes/generate-from-outline?scene_index=${sceneIndex}`, {});
if (data.ok && data.scene) {
setScenes((prev) => [...prev, data.scene]);
setCurrentSceneIndex(scenes.length);
setLastSaved(new Date());
generateImageForScene(data.scene.id, data.scene.imagePrompt);
}
}
catch (e) {
console.error('[CreatorStudioEditor] Failed to generate scene from outline:', e);
alert(`Failed to generate scene: ${e.message}`);
}
finally {
setIsGeneratingScene(false);
}
}, [projectId, storyOutline, scenes.length, postApi, generateImageForScene]);
// Generate ALL scenes from outline in sequence (batch generation)
const generateAllScenesFromOutline = useCallback(async () => {
if (!storyOutline || !storyOutline.scenes || storyOutline.scenes.length === 0) {
console.log('[CreatorStudioEditor] No outline scenes to generate');
return;
}
const totalScenes = storyOutline.scenes.length;
console.log(`[CreatorStudioEditor] Starting batch generation of ${totalScenes} scenes`);
setIsBatchGenerating(true);
setBatchProgress({ current: 0, total: totalScenes, phase: 'scene' });
const generatedScenes = [];
try {
// Generate all scenes first (without images for speed)
for (let i = 0; i < totalScenes; i++) {
setBatchProgress({ current: i + 1, total: totalScenes, phase: 'scene' });
console.log(`[CreatorStudioEditor] Generating scene ${i + 1}/${totalScenes}`);
try {
const data = await postApi(`/studio/videos/${projectId}/scenes/generate-from-outline?scene_index=${i}`, {});
if (data.ok && data.scene) {
generatedScenes.push(data.scene);
setScenes((prev) => [...prev, data.scene]);
setCurrentSceneIndex(i);
}
}
catch (sceneErr) {
console.error(`[CreatorStudioEditor] Failed to generate scene ${i + 1}:`, sceneErr);
// Continue with remaining scenes even if one fails
}
// Small delay between scene creations to avoid overwhelming the server
if (i < totalScenes - 1) {
await new Promise(resolve => setTimeout(resolve, 200));
}
}
console.log(`[CreatorStudioEditor] Created ${generatedScenes.length} scenes, now generating images...`);
// Phase 2: Generate images for all scenes
const scenesWithImages = [];
for (let i = 0; i < generatedScenes.length; i++) {
const scene = generatedScenes[i];
setBatchProgress({ current: i + 1, total: generatedScenes.length, phase: 'image' });
console.log(`[CreatorStudioEditor] Generating image ${i + 1}/${generatedScenes.length}`);
try {
// Generate image inline (can't use generateImageForScene due to isGeneratingImage lock)
const llmProvider = imageProvider === 'comfyui' ? 'ollama' : imageProvider;
const data = await postApi('/chat', {
message: `imagine ${scene.imagePrompt}`,
mode: 'imagine',
provider: llmProvider,
imgModel: selectedImageModel || imageModel || undefined,
imgAspectRatio: '16:9',
imgSteps: imageSteps,
imgCfg: imageCfg,
promptRefinement: false,
});
const imageUrl = data?.media?.images?.[0];
if (imageUrl) {
await patchApi(`/studio/videos/${projectId}/scenes/${scene.id}`, toScenePatch({
imageUrl,
status: projectWantsVideo ? 'generating' : 'ready',
}));
setScenes((prev) => prev.map((s) => s.id === scene.id ? { ...s, imageUrl, status: (projectWantsVideo ? 'generating' : 'ready') } : s));
scenesWithImages.push({ scene, imageUrl });
}
}
catch (imgErr) {
console.error(`[CreatorStudioEditor] Failed to generate image for scene ${i + 1}:`, imgErr);
// Continue with remaining images
}
}
// Phase 3: Generate videos from images (if enabled)
if (projectWantsVideo && scenesWithImages.length > 0) {
console.log(`[CreatorStudioEditor] Phase 3: Generating ${scenesWithImages.length} videos...`);
for (let i = 0; i < scenesWithImages.length; i++) {
const { scene, imageUrl } = scenesWithImages[i];
setBatchProgress({ current: i + 1, total: scenesWithImages.length, phase: 'video' });
console.log(`[CreatorStudioEditor] Generating video ${i + 1}/${scenesWithImages.length}`);
try {
// Use the animate endpoint to generate video from image
// IMPORTANT: Include imageUrl in message and use vidModel (not videoModel)
const data = await postApi('/chat', {
message: `${scene.imagePrompt} ${imageUrl}`,
mode: 'animate',
provider: 'ollama',
vidModel: selectedVideoModel || videoModel || undefined,
});
// Backend returns media.video_url (NOT always media.videos[])
const rawVideoUrl = data?.media?.video_url ||
data?.media?.videos?.[0] ||
null;
if (rawVideoUrl) {
// Proxy the URL for correct Content-Type headers (WebM playback)
const proxiedVideoUrl = proxyVideoUrl(rawVideoUrl) || rawVideoUrl;
await patchApi(`/studio/videos/${projectId}/scenes/${scene.id}`, toScenePatch({
videoUrl: proxiedVideoUrl,
status: 'ready',
}));
setScenes((prev) => prev.map((s) => s.id === scene.id ? { ...s, videoUrl: proxiedVideoUrl, status: 'ready' } : s));
}
else {
// No video generated, mark scene as ready anyway (image only)
await patchApi(`/studio/videos/${projectId}/scenes/${scene.id}`, toScenePatch({
status: 'ready',
}));
setScenes((prev) => prev.map((s) => s.id === scene.id ? { ...s, status: 'ready' } : s));
}
}
catch (vidErr) {
console.error(`[CreatorStudioEditor] Failed to generate video for scene ${i + 1}:`, vidErr);
// Mark scene as ready anyway (fallback to image only)
try {
await patchApi(`/studio/videos/${projectId}/scenes/${scene.id}`, toScenePatch({ status: 'ready' }));
setScenes((prev) => prev.map((s) => s.id === scene.id ? { ...s, status: 'ready' } : s));
}
catch { }
}
}
}
setLastSaved(new Date());
setCurrentSceneIndex(0); // Go back to first scene
console.log('[CreatorStudioEditor] Batch generation complete!');
// Sync outline with actual scene data to keep them in sync
await syncOutlineWithScenes();
// Final refresh so UI shows all persisted videoUrl values
await refreshScenes();
}
catch (e) {
console.error('[CreatorStudioEditor] Batch generation failed:', e);
}
finally {
setIsBatchGenerating(false);
setBatchProgress({ current: 0, total: 0, phase: 'scene' });
}
}, [storyOutline, projectId, postApi, patchApi, imageProvider, imageModel, selectedImageModel, imageSteps, imageCfg, projectWantsVideo, videoModel, selectedVideoModel, syncOutlineWithScenes, toScenePatch, refreshScenes, proxyVideoUrl]);
// Load project and scenes
useEffect(() => {
async function loadData() {
setLoading(true);
setError(null);
try {
const [projectRes, scenesRes] = await Promise.all([
fetchApi(`/studio/videos/${projectId}`),
fetchApi(`/studio/videos/${projectId}/scenes`),
]);
setProject(projectRes.video);
setScenes(normalizeScenes(scenesRes.scenes));
// Extract LLM model from project tags if not already set
const tags = projectRes.video.tags || [];
const llmTag = tags.find((t) => t.startsWith("llm:"));
if (llmTag && !defaultLLMModel) {
const modelFromTag = llmTag.replace("llm:", "");
setSelectedLLMModel(modelFromTag);
setSettingsLLMModel(modelFromTag);
}
}
catch (e) {
setError(e.message || String(e));
}
finally {
setLoading(false);
}
}
loadData();
}, [projectId, fetchApi, defaultLLMModel, normalizeScenes]);
// Load available models and existing outline on mount
useEffect(() => {
fetchAvailableModels();
loadStoryOutline();
}, [fetchAvailableModels, loadStoryOutline]);
// Detect whether the browser can play WebM videos
useEffect(() => {
try {
const v = document.createElement("video");
const ok = Boolean(v.canPlayType('video/webm; codecs="vp8, vorbis"') ||
v.canPlayType('video/webm; codecs="vp9"') ||
v.canPlayType("video/webm"));
setCanPlayWebm(ok);
console.log('[CreatorStudioEditor] WebM playback support:', ok);
}
catch {
setCanPlayWebm(false);
}
}, []);
// Auto-generate outline when project is newly created
useEffect(() => {
if (autoGenerateFirst &&
!hasAutoGeneratedOutline &&
!loading &&
project &&
!storyOutline &&
!isGeneratingOutline &&
selectedLLMModel // Wait until we have a model selected
) {
console.log('[CreatorStudioEditor] Auto-generating story outline for new project');
setHasAutoGeneratedOutline(true);
generateStoryOutline();
}
}, [autoGenerateFirst, hasAutoGeneratedOutline, loading, project, storyOutline, isGeneratingOutline, selectedLLMModel, generateStoryOutline]);
// Current scene
const currentScene = scenes[currentSceneIndex] || null;
// Extract visual style from project tags
const getVisualStyle = useCallback(() => {
if (!project)
return "cinematic";
const tags = project.tags || [];
const visualTag = tags.find((t) => t.startsWith("visual:"));
if (visualTag) {
const style = visualTag.replace("visual:", "").replace(/_/g, " ");
return style;
}
return "cinematic";
}, [project]);
// Extract tone from project tags
const getTones = useCallback(() => {
if (!project)
return ["documentary"];
const tags = project.tags || [];
const tones = tags.filter((t) => t.startsWith("tone:")).map((t) => t.replace("tone:", "").replace(/_/g, " "));
return tones.length > 0 ? tones : ["documentary"];
}, [project]);
// Generate AI-powered scene with better prompts
const generateFirstSceneWithAI = useCallback(async () => {
if (!project || isGeneratingScene)
return;
setIsGeneratingScene(true);
try {
let narration;
let imagePrompt;
let negativePrompt = "blurry, low quality, text, watermark, ugly, deformed, disfigured, bad anatomy, worst quality, low resolution, duplicate, clone, multiple people, two heads, two faces, split image, extra limbs";
if (storyOutline && storyOutline.scenes && storyOutline.scenes.length > 0) {
const outlineScene = storyOutline.scenes[0];
narration = outlineScene.narration;
imagePrompt = outlineScene.image_prompt;
negativePrompt = outlineScene.negative_prompt || negativePrompt;
console.log('[CreatorStudioEditor] Using story outline for first scene');
}
else {
const visualStyle = getVisualStyle();
const tones = getTones();
const toneDesc = tones.join(", ");
narration = `The story begins. ${project.logline || `Welcome to "${project.title}".`}`;
imagePrompt = `${visualStyle} style, ${project.logline || project.title}, opening scene, establishing shot, ${toneDesc} mood, high quality, detailed, 4k, masterpiece`;
}
const data = await postApi(`/studio/videos/${projectId}/scenes`, {
narration,
imagePrompt,
negativePrompt,
durationSec: 5.0,
});
setScenes((prev) => [...prev, data.scene]);
setCurrentSceneIndex(0);
setLastSaved(new Date());
console.log('[CreatorStudioEditor] Auto-generating image for first scene');
generateImageForScene(data.scene.id, data.scene.imagePrompt);
}
catch (e) {
console.error('[CreatorStudioEditor] Failed to create scene:', e);
alert(`Failed to create scene: ${e.message}`);
}
finally {
setIsGeneratingScene(false);
}
}, [project, projectId, isGeneratingScene, postApi, getVisualStyle, getTones, storyOutline, generateImageForScene]);
// Auto-generate ALL scenes after outline is generated (batch generation)
useEffect(() => {
if (autoGenerateFirst &&
!hasAutoTriggered &&
!loading &&
project &&
storyOutline &&
storyOutline.scenes &&
storyOutline.scenes.length > 0 &&
scenes.length === 0 &&
!isGeneratingScene &&
!isBatchGenerating) {
console.log('[CreatorStudioEditor] Auto-generating ALL scenes from outline');
setHasAutoTriggered(true);
generateAllScenesFromOutline();
}
}, [autoGenerateFirst, hasAutoTriggered, loading, project, storyOutline, scenes.length, isGeneratingScene, isBatchGenerating, generateAllScenesFromOutline]);
// Generate first scene (non-AI fallback)
const generateFirstScene = useCallback(async () => {
if (!project || isGeneratingScene)
return;
setIsGeneratingScene(true);
try {
const data = await postApi(`/studio/videos/${projectId}/scenes`, {
narration: `Opening scene for "${project.title}"`,
imagePrompt: `${project.logline || project.title}, cinematic, high quality, detailed`,
negativePrompt: "blurry, low quality, text, watermark",
durationSec: 5.0,
});
setScenes((prev) => [...prev, data.scene]);
setCurrentSceneIndex(0);
setLastSaved(new Date());
}
catch (e) {
alert(`Failed to create scene: ${e.message}`);
}
finally {
setIsGeneratingScene(false);
}
}, [project, projectId, isGeneratingScene, postApi]);
// Generate next scene with AI-powered prompts (uses backend outline for reliability)
const generateNextScene = useCallback(async () => {
if (!project || isGeneratingScene)
return;
setIsGeneratingScene(true);
try {
const nextSceneIndex = scenes.length;
// First, try to generate from outline via backend (reads outline from database - most reliable)
try {
const data = await postApi(`/studio/videos/${projectId}/scenes/generate-from-outline?scene_index=${nextSceneIndex}`, {});
if (data.ok && data.scene) {
setScenes((prev) => [...prev, data.scene]);
setCurrentSceneIndex(nextSceneIndex);
setLastSaved(new Date());
console.log(`[CreatorStudioEditor] Generated scene ${nextSceneIndex + 1} from outline`);
generateImageForScene(data.scene.id, data.scene.imagePrompt);
// Sync outline with new scene
syncOutlineWithScenes();
return;
}
}
catch (outlineErr) {
// Outline not available or scene index out of range - try AI continuation
console.log('[CreatorStudioEditor] No outline scene available, trying AI continuation:', outlineErr.message);
}
// Second: Try AI-powered continuation based on previous scenes
if (scenes.length > 0) {
try {
console.log('[CreatorStudioEditor] Generating AI continuation from previous context...');
const contData = await postApi(`/studio/videos/${projectId}/scenes/generate-continuation`, {});
if (contData.ok && contData.scene) {
setScenes((prev) => [...prev, contData.scene]);
setCurrentSceneIndex(nextSceneIndex);
setLastSaved(new Date());
console.log(`[CreatorStudioEditor] Generated scene ${nextSceneIndex + 1} via AI continuation`);
generateImageForScene(contData.scene.id, contData.scene.imagePrompt);
// Sync outline with new scene
syncOutlineWithScenes();
return;
}
}
catch (contErr) {
console.log('[CreatorStudioEditor] AI continuation failed, using fallback:', contErr.message);
}
}
// Final fallback: Generate a scene based on project settings (no outline, no AI)
const sceneNum = scenes.length + 1;
const visualStyle = getVisualStyle();
const tones = getTones();
const toneDesc = tones.join(", ");
const narration = `Scene ${sceneNum}. ${project.logline || `The story of "${project.title}" continues...`}`;
const imagePrompt = `${visualStyle} style, ${project.logline || project.title}, scene ${sceneNum}, ${toneDesc} mood, high quality, detailed, 4k, masterpiece`;
const negativePrompt = "blurry, low quality, text, watermark, ugly, deformed, disfigured, bad anatomy, worst quality, low resolution, duplicate, clone, multiple people, two heads, two faces, split image, extra limbs";
const data = await postApi(`/studio/videos/${projectId}/scenes`, {
narration,
imagePrompt,
negativePrompt,
durationSec: 5.0,
});
setScenes((prev) => [...prev, data.scene]);
setCurrentSceneIndex(scenes.length);
setLastSaved(new Date());
console.log('[CreatorStudioEditor] Generated scene with fallback content:', sceneNum);
generateImageForScene(data.scene.id, data.scene.imagePrompt);
// Sync outline with new scene
syncOutlineWithScenes();
}
catch (e) {
alert(`Failed to create scene: ${e.message}`);
}
finally {
setIsGeneratingScene(false);
}
}, [project, projectId, scenes.length, isGeneratingScene, postApi, getVisualStyle, getTones, generateImageForScene, syncOutlineWithScenes]);
// Generate next scene for TV Mode (uses backend outline for reliability)
const generateNextForTVMode = useCallback(async () => {
if (!project || isGeneratingScene)
return null;
try {
const nextSceneIndex = scenes.length;
// First, try to generate from outline via backend
try {
const data = await postApi(`/studio/videos/${projectId}/scenes/generate-from-outline?scene_index=${nextSceneIndex}`, {});
if (data.ok && data.scene) {
setScenes((prev) => [...prev, data.scene]);
console.log(`[CreatorStudioEditor] TV Mode: Generated scene ${nextSceneIndex + 1} from outline`);
return sceneToTVScene(data.scene);
}
}
catch (outlineErr) {
console.log('[CreatorStudioEditor] TV Mode: No outline available, trying AI continuation');
}
// Second: Try AI-powered continuation based on previous scenes
if (scenes.length > 0) {
try {
console.log('[CreatorStudioEditor] TV Mode: Generating AI continuation from previous context...');
const contData = await postApi(`/studio/videos/${projectId}/scenes/generate-continuation`, {});
if (contData.ok && contData.scene) {
setScenes((prev) => [...prev, contData.scene]);
console.log(`[CreatorStudioEditor] TV Mode: Generated scene ${nextSceneIndex + 1} via AI continuation`);
return sceneToTVScene(contData.scene);
}
}
catch (contErr) {
console.log('[CreatorStudioEditor] TV Mode: AI continuation failed, using fallback:', contErr.message);
}
}
// Final fallback: Generate scene based on project settings
const sceneNum = scenes.length + 1;
const visualStyle = getVisualStyle();
const tones = getTones();
const toneDesc = tones.join(", ");
const narration = `Scene ${sceneNum}. ${project.logline || `The story of "${project.title}" continues...`}`;
const imagePrompt = `${visualStyle} style, ${project.logline || project.title}, scene ${sceneNum}, ${toneDesc} mood, high quality, detailed, 4k, masterpiece`;
const negativePrompt = "blurry, low quality, text, watermark, ugly, deformed, disfigured, bad anatomy, worst quality, low resolution, duplicate, clone, multiple people, two heads, two faces, split image, extra limbs";
const data = await postApi(`/studio/videos/${projectId}/scenes`, {
narration,
imagePrompt,
negativePrompt,
durationSec: 5.0,
});
setScenes((prev) => [...prev, data.scene]);
return sceneToTVScene(data.scene);
}
catch (e) {
console.error('[CreatorStudioEditor] Failed to generate scene for TV mode:', e);
return null;
}
}, [project, projectId, scenes.length, isGeneratingScene, postApi, getVisualStyle, getTones, sceneToTVScene]);
// Ensure image for TV Mode scene
const ensureImageForTVMode = useCallback((tvScene) => {
const scene = scenes.find(s => s.idx === tvScene.idx);
if (!scene)
return;
if (!tvScene.image_url && !tvScene.image) {
generateImageForScene(scene.id, scene.imagePrompt).then(() => {
const updatedScene = scenes.find(s => s.idx === tvScene.idx);
if (updatedScene?.imageUrl) {
updateSceneImageByIdx(tvScene.idx, updatedScene.imageUrl);
}
});
}
}, [scenes, generateImageForScene, updateSceneImageByIdx]);
// Status badge color
const getStatusBadge = (status) => {
switch (status) {
case "draft":
return { bg: "bg-amber-500/20", text: "text-amber-300", label: "Draft" };
case "approved":
return { bg: "bg-emerald-500/20", text: "text-emerald-300", label: "Finished" };
case "in_review":
return { bg: "bg-cyan-500/20", text: "text-cyan-300", label: "In Review" };
case "archived":
return { bg: "bg-slate-500/20", text: "text-slate-300", label: "Archived" };
default:
return { bg: "bg-slate-500/20", text: "text-slate-300", label: status };
}
};
// Scene status indicator
const SceneStatusIndicator = ({ status }) => {
switch (status) {
case 'generating':
return (<div className="w-4 h-4 rounded-full bg-black/60 flex items-center justify-center">
<Loader2 size={10} className="text-cyan-400 animate-spin"/>
</div>);
case 'ready':
return null;
case 'error':
return (<div className="w-4 h-4 rounded-full bg-red-500/80 flex items-center justify-center">
<AlertCircle size={10} className="text-white"/>
</div>);
case 'pending':
default:
return (<div className="w-4 h-4 rounded-full bg-black/60 flex items-center justify-center">
<div className="w-2 h-2 rounded-full bg-white/40"/>
</div>);
}
};
// Loading state
if (loading) {
return (<div className="min-h-screen w-full bg-gradient-to-b from-black via-[#0a0a0f] to-[#0f0f18] text-white flex items-center justify-center">
<div className="flex flex-col items-center gap-4">
<Loader2 className="w-10 h-10 animate-spin text-cyan-400"/>
<div className="text-white/60 text-sm">Loading project...</div>
</div>
</div>);
}
// Error state
if (error || !project) {
return (<div className="min-h-screen w-full bg-gradient-to-b from-black via-[#0a0a0f] to-[#0f0f18] text-white flex items-center justify-center">
<div className="flex flex-col items-center gap-4 max-w-md text-center">
<div className="w-16 h-16 rounded-2xl bg-red-500/10 border border-red-500/20 flex items-center justify-center mb-2">
<AlertCircle size={28} className="text-red-400"/>
</div>
<div className="text-red-400 text-lg font-medium">Failed to load project</div>
<div className="text-white/50 text-sm">{error || "Project not found"}</div>
<button onClick={onExit} className="mt-4 px-6 py-2.5 bg-white/5 hover:bg-white/10 border border-white/10 rounded-xl transition-colors text-sm">
← Back to Studio
</button>
</div>
</div>);
}
const statusBadge = getStatusBadge(project.status);
return (<div className="min-h-screen w-full bg-gradient-to-b from-black via-[#0a0a0f] to-[#0f0f18] text-white flex flex-col">
{/* Batch Generation Progress Overlay */}
{isBatchGenerating && (<div className="fixed inset-0 z-50 flex items-center justify-center bg-black/90 backdrop-blur-sm">
<div className="bg-[#1a1a2e] border border-white/10 rounded-2xl p-8 max-w-md w-full mx-4 shadow-2xl">
<div className="text-center">
{/* Animated Icon */}
<div className="mb-6 flex justify-center">
<div className="relative">
<div className="w-20 h-20 rounded-full border-4 border-[#3ea6ff]/20"/>
<div className="absolute inset-0 w-20 h-20 rounded-full border-4 border-transparent border-t-[#3ea6ff] animate-spin" style={{ animationDuration: '1s' }}/>
<div className="absolute inset-0 flex items-center justify-center">
{batchProgress.phase === 'scene' ? (<Sparkles size={28} className="text-[#3ea6ff]"/>) : batchProgress.phase === 'image' ? (<ImageIcon size={28} className="text-[#3ea6ff]"/>) : (<Film size={28} className="text-[#3ea6ff]"/>)}
</div>
</div>
</div>
{/* Title */}
<h2 className="text-xl font-semibold text-white mb-2">
{batchProgress.phase === 'scene' ? 'Creating Scenes' :
batchProgress.phase === 'image' ? 'Generating Images' : 'Generating Videos'}
</h2>
{/* Progress Text */}
<p className="text-white/60 mb-6">
{batchProgress.phase === 'scene'
? `Building scene ${batchProgress.current} of ${batchProgress.total}...`
: batchProgress.phase === 'image'
? `Generating image ${batchProgress.current} of ${batchProgress.total}...`
: `Generating video ${batchProgress.current} of ${batchProgress.total}...`}
</p>
{/* Progress Bar */}
<div className="mb-4">
<div className="h-2 bg-white/10 rounded-full overflow-hidden">
<div className="h-full bg-gradient-to-r from-[#3ea6ff] to-[#6ec7ff] transition-all duration-300 ease-out" style={{
width: batchProgress.total > 0
? `${(batchProgress.current / batchProgress.total) * 100}%`
: '0%'
}}/>
</div>
<div className="mt-2 text-xs text-white/40">
{batchProgress.phase === 'scene'
? (projectWantsVideo ? 'Phase 1/3: Creating scenes' : 'Phase 1/2: Creating scenes')
: batchProgress.phase === 'image'
? (projectWantsVideo ? 'Phase 2/3: Generating images' : 'Phase 2/2: Generating images')
: 'Phase 3/3: Generating videos'}
</div>
</div>
{/* Tip */}
<p className="text-xs text-white/30 mt-4">
{batchProgress.phase === 'video'
? 'Video generation may take several minutes per scene'
: 'This may take a few minutes depending on your hardware'}
</p>
</div>
</div>
</div>)}
{/* Header - Compact & Cinematic */}
<header className="flex items-center justify-between px-4 py-3 border-b border-white/5 bg-black/40 backdrop-blur-md">
<div className="flex items-center gap-4">
<button onClick={onExit} className="flex items-center gap-2 px-3 py-2 text-sm text-white/50 hover:text-white hover:bg-white/5 rounded-lg transition-all">
<ArrowLeft size={16}/>
<span className="hidden sm:inline">Back</span>
</button>
<div className="h-6 w-px bg-white/10"/>
<div>
<h1 className="text-base font-semibold text-white">{project.title}</h1>
<div className="text-xs text-white/40">
{scenes.length} scene{scenes.length !== 1 ? "s" : ""} • Creator Studio
</div>
</div>
</div>
<div className="flex items-center gap-2">
{/* Status Badge */}
<span className={`text-xs px-2.5 py-1 rounded-full font-medium ${statusBadge.bg} ${statusBadge.text}`}>
{statusBadge.label}
</span>
{/* Save Indicator */}
<div className="hidden sm:flex items-center gap-1.5 text-xs text-white/40 px-2">
{isSaving ? (<>
<Loader2 size={12} className="animate-spin"/>
<span>Saving...</span>
</>) : lastSaved ? (<>
<Check size={12} className="text-emerald-400"/>
<span>Saved</span>
</>) : null}
</div>
{/* Project Settings Button */}
<button onClick={openSettingsModal} className="p-2 bg-white/5 hover:bg-white/10 border border-white/10 rounded-lg transition-all" title="Project Settings">
<Settings size={16} className="text-white/60"/>
</button>
{/* Story Outline Button */}
<button onClick={() => setShowOutlinePanel(true)} className="flex items-center gap-2 px-3 py-2 bg-white/5 hover:bg-white/10 border border-white/10 rounded-lg text-sm transition-all" title="Story Outline">
<Wand2 size={14} className="text-cyan-400"/>
<span className="hidden sm:inline">Outline</span>
</button>
{/* Export Button — opens the 2-step MP4 export wizard. */}
<button type="button" onClick={() => setShowExportWizard(true)} className="flex items-center gap-2 px-3 py-2 bg-white/5 hover:bg-white/10 border border-white/10 rounded-lg text-sm transition-all" title="Export project">
<Download size={14}/>
<span className="hidden sm:inline">Export</span>
</button>
</div>
</header>
{/* Export Wizard — mounts only while open. The wizard self-cleans
its in-flight polling when closed (epoch guard). */}
{showExportWizard && (<CreatorExportWizard open={showExportWizard} onClose={() => setShowExportWizard(false)} backendUrl={backendUrl} videoId={projectId} videoTitle={project?.title} scenes={scenes.map((s) => ({
id: s.id,
idx: s.idx,
narration: s.narration || "",
audioUrl: s.audioUrl || null,
}))} disabledReason={scenes.length === 0
? "Add at least one scene before exporting."
: scenes.some((s) => s.status !== "ready")
? "All scenes must finish generating before export."
: null}/>)}
{/* Scene Chips Rail - Like Play Story */}
{scenes.length > 0 && (<div className="w-full overflow-x-auto scrollbar-hide border-b border-white/5 bg-black/20">
<div className="flex gap-2 px-4 py-3 min-w-max">
{scenes.map((scene, idx) => {
const isActive = idx === currentSceneIndex;
const hasImage = Boolean(scene.imageUrl);
const hasVideo = Boolean(scene.videoUrl);
const isHovered = hoveredSceneIdx === idx;
const showDelete = isHovered && scenes.length > 1;
return (<div key={scene.id} className="relative" onMouseEnter={() => setHoveredSceneIdx(idx)} onMouseLeave={() => setHoveredSceneIdx(null)}>
<button onClick={() => setCurrentSceneIndex(idx)} className={`
relative rounded-lg overflow-hidden transition-all duration-200
${isActive
? "ring-2 ring-cyan-400 ring-offset-2 ring-offset-black scale-105"
: hasVideo
? "ring-1 ring-cyan-500/50 opacity-80 hover:opacity-100 hover:scale-102"
: "opacity-60 hover:opacity-100 hover:scale-102"}
`} type="button" title={`Scene ${idx + 1}${hasVideo ? ' (Video)' : ''}`}>
<div className="w-20 h-12 flex items-center justify-center bg-white/5">
{hasImage ? (<img src={scene.imageUrl} alt={`Scene ${idx + 1}`} className="w-full h-full object-cover"/>) : (<ImageIcon size={16} className="text-white/20"/>)}
</div>
{/* Subtle video indicator - small dot in corner */}
{hasVideo && (<div className="absolute top-1 right-1 w-2 h-2 bg-cyan-400 rounded-full shadow-sm shadow-cyan-400/50" title="Has video"/>)}
{/* Status indicator */}
<div className="absolute bottom-1 right-1">
<SceneStatusIndicator status={scene.status}/>
</div>
{/* Scene number */}
{!scene.status || scene.status === 'ready' ? (<div className="absolute bottom-1 left-1 text-[10px] bg-black/70 px-1.5 rounded font-medium">
{idx + 1}
</div>) : null}
</button>
{/* Delete button */}
{showDelete && (<button onClick={(e) => {
e.stopPropagation();
deleteScene(scene.id);
}} className="absolute -top-2 -right-2 w-5 h-5 rounded-full flex items-center justify-center transition-all transform hover:scale-110 bg-black/90 text-white/60 hover:text-white hover:bg-red-500 border border-white/10" type="button" title="Delete scene">
<X size={10}/>
</button>)}
</div>);
})}
{/* Add Scene Chip */}
<button onClick={generateNextScene} disabled={isGeneratingScene} className="w-20 h-12 rounded-lg border border-dashed border-white/20 hover:border-cyan-400/50 hover:bg-cyan-400/5 flex items-center justify-center transition-all disabled:opacity-40" title="Add scene">
{isGeneratingScene ? (<Loader2 size={16} className="text-cyan-400 animate-spin"/>) : (<Plus size={16} className="text-white/40"/>)}
</button>
</div>
</div>)}
{/* Main Content */}
{scenes.length === 0 ? (
// Empty State - Cinematic
<div className="flex-1 flex items-center justify-center p-8">
<div className="max-w-md text-center">
<div className="w-28 h-28 mx-auto mb-8 rounded-3xl bg-gradient-to-br from-cyan-500/20 via-blue-500/10 to-transparent border border-cyan-500/20 flex items-center justify-center">
<ImageIcon size={48} className="text-cyan-400/60"/>
</div>
<h2 className="text-2xl font-semibold text-white mb-3">Create Your First Scene</h2>
<p className="text-white/50 mb-8 leading-relaxed">
Your project is ready. Generate a scene to start bringing your story to life with AI-powered visuals.
</p>
<button onClick={generateFirstScene} disabled={isGeneratingScene} className="inline-flex items-center gap-3 px-8 py-4 bg-gradient-to-r from-cyan-500 to-blue-500 hover:from-cyan-400 hover:to-blue-400 disabled:opacity-50 disabled:cursor-not-allowed rounded-2xl text-base font-semibold shadow-lg shadow-cyan-500/25 transition-all">
{isGeneratingScene ? (<>
<Loader2 size={20} className="animate-spin"/>
Generating...
</>) : (<>
<Play size={20} fill="currentColor"/>
Generate First Scene
</>)}
</button>
<p className="text-xs text-white/30 mt-6">
Powered by AI • Based on your project settings
</p>
</div>
</div>) : (
// Preview + Actions - Cinematic Layout
<div className="flex-1 flex flex-col">
{/* Preview Panel - Dominant */}
<div className="flex-1 relative overflow-hidden">
{/* Background gradient */}
<div className="absolute inset-0 bg-gradient-to-b from-transparent via-[#0a0a0f] to-[#0f0f18]"/>
{/* Main preview area */}
<div className="absolute inset-0 flex items-center justify-center p-6">
{currentScene?.videoUrl ? (
/* Video/Animation Preview - when scene has generated media */
<div className="relative max-w-full max-h-full group">
{isAnimatedImageUrl(currentScene.videoUrl) ? (
/* Animated WebP/GIF - render as <img> (some Comfy workflows output this) */
<img src={proxyVideoUrl(currentScene.videoUrl) || currentScene.videoUrl} alt={`Scene ${currentSceneIndex + 1} animation`} className="max-h-[calc(100vh-320px)] max-w-full object-contain rounded-xl shadow-2xl shadow-black/50"/>) : isWebmUrl(currentScene.videoUrl) ? (
/* WebM video - render as <video> */
canPlayWebm ? (<video className="max-h-[calc(100vh-320px)] max-w-full object-contain rounded-xl shadow-2xl shadow-black/50" controls loop muted autoPlay playsInline preload="metadata" crossOrigin="anonymous" src={proxyVideoUrl(currentScene.videoUrl) || currentScene.videoUrl}/>) : (<div className="max-w-xl w-full bg-black/40 border border-white/10 rounded-xl p-6 text-center">
<div className="flex items-center justify-center gap-2 text-cyan-300 font-medium mb-2">
<Film size={16}/>
Video generated (WebM)
</div>
<div className="text-white/60 text-sm mb-4">
This browser cannot play WebM inline. Use Chrome/Edge/Firefox, or download the clip.
</div>
<a href={proxyVideoUrl(currentScene.videoUrl) || currentScene.videoUrl} target="_blank" rel="noreferrer" className="inline-flex items-center gap-2 px-4 py-2 rounded-lg bg-white/10 hover:bg-white/15 border border-white/10 text-sm">
<Download size={14}/>
Open / Download WebM
</a>
</div>)) : (
/* Unknown format fallback - try to display with download option */
<div className="max-w-xl w-full bg-black/40 border border-white/10 rounded-xl p-6 text-center">
<div className="flex items-center justify-center gap-2 text-cyan-300 font-medium mb-2">
<Film size={16}/>
Generated media
</div>
<div className="text-white/60 text-sm mb-4">
This output format may not preview inline. Try opening in a new tab.
</div>
<a href={proxyVideoUrl(currentScene.videoUrl) || currentScene.videoUrl} target="_blank" rel="noreferrer" className="inline-flex items-center gap-2 px-4 py-2 rounded-lg bg-white/10 hover:bg-white/15 border border-white/10 text-sm">
<Download size={14}/>
Open
</a>
</div>)}
{/* Top-right overlay controls - glass style */}
<div className="absolute top-3 right-3 flex items-center gap-2 opacity-0 group-hover:opacity-100 transition-opacity duration-200">
{/* More options */}
<button type="button" className="w-9 h-9 rounded-full bg-black/40 backdrop-blur-md border border-white/10 flex items-center justify-center text-white/70 hover:text-white hover:bg-black/60 transition-all disabled:opacity-50 disabled:cursor-not-allowed" title="More options" onClick={() => {
setEditingScene(currentScene);
setEditNarration(currentScene.narration);
setEditImagePrompt(currentScene.imagePrompt);
setEditNegativePrompt(currentScene.negativePrompt || '');
setShowSceneEditor(true);
}}>
<MoreHorizontal size={16}/>
</button>
{/* Regenerate video */}
<button type="button" onClick={() => generateVideoForScene(currentScene.id, currentScene.imageUrl, currentScene.imagePrompt)} disabled={isGeneratingVideo} className="w-9 h-9 rounded-full bg-black/40 backdrop-blur-md border border-white/10 flex items-center justify-center text-white/70 hover:text-white hover:bg-black/60 transition-all disabled:opacity-50 disabled:cursor-not-allowed" title="Regenerate video">
<RefreshCw size={16} className={isGeneratingVideo ? 'animate-spin' : ''}/>
</button>
{/* Remove video */}
<button type="button" onClick={() => removeVideoForScene(currentScene.id)} disabled={isGeneratingVideo} className="w-9 h-9 rounded-full bg-red-500/30 backdrop-blur-md border border-red-500/30 flex items-center justify-center text-red-200 hover:text-white hover:bg-red-500/50 transition-all disabled:opacity-50 disabled:cursor-not-allowed" title="Remove video (keep image)">
<X size={16}/>
</button>
</div>
{/* Generating video overlay */}
{isGeneratingVideo && (<div className="absolute inset-0 flex items-center justify-center bg-black/70 backdrop-blur-sm rounded-xl">
<div className="flex flex-col items-center gap-3">
<Loader2 size={36} className="text-cyan-400 animate-spin"/>
<span className="text-white/70 text-sm">Generating video...</span>
</div>
</div>)}
</div>) : currentScene?.imageUrl ? (
/* Image Preview - when scene has image but no video */
<div className="relative max-w-full max-h-full group">
<img src={currentScene.imageUrl} alt={`Scene ${currentSceneIndex + 1}`} className="max-h-[calc(100vh-320px)] max-w-full object-contain rounded-xl shadow-2xl shadow-black/50 transition-all duration-500"/>
{/* Top-right overlay controls - glass style */}
<div className="absolute top-3 right-3 flex items-center gap-2 opacity-0 group-hover:opacity-100 transition-opacity duration-200">
{/* More options */}
<button type="button" className="w-9 h-9 rounded-full bg-black/40 backdrop-blur-md border border-white/10 flex items-center justify-center text-white/70 hover:text-white hover:bg-black/60 transition-all disabled:opacity-50 disabled:cursor-not-allowed" title="Edit scene" onClick={() => {
setEditingScene(currentScene);
setEditNarration(currentScene.narration);
setEditImagePrompt(currentScene.imagePrompt);
setEditNegativePrompt(currentScene.negativePrompt || '');
setShowSceneEditor(true);
}}>
<MoreHorizontal size={16}/>
</button>
{/* Regenerate image */}
<button type="button" onClick={() => generateImageForScene(currentScene.id, currentScene.imagePrompt, true)} disabled={isGeneratingImage || isGeneratingVideo} className="w-9 h-9 rounded-full bg-black/40 backdrop-blur-md border border-white/10 flex items-center justify-center text-white/70 hover:text-white hover:bg-black/60 transition-all disabled:opacity-50 disabled:cursor-not-allowed" title="Regenerate image">
<RefreshCw size={16} className={isGeneratingImage ? 'animate-spin' : ''}/>
</button>
</div>
{/* Bottom-right Make Video CTA - only show if project wants video and scene has no video yet */}
{projectWantsVideo && !currentScene.videoUrl && !isGeneratingImage && !isGeneratingVideo && (<div className="absolute bottom-4 right-4 opacity-0 group-hover:opacity-100 transition-opacity duration-200">
<button type="button" onClick={() => generateVideoForScene(currentScene.id, currentScene.imageUrl, currentScene.imagePrompt)} className="flex items-center gap-2 px-4 py-2 bg-cyan-500/90 backdrop-blur-md border border-cyan-400/30 rounded-full text-white text-sm font-medium hover:bg-cyan-500 transition-all shadow-lg shadow-cyan-500/20" title="Convert to video">
<Film size={14}/>
Make Video
</button>
</div>)}
{/* Generating image overlay */}
{isGeneratingImage && (<div className="absolute inset-0 flex items-center justify-center bg-black/70 backdrop-blur-sm rounded-xl">
<div className="flex flex-col items-center gap-3">
<Loader2 size={36} className="text-cyan-400 animate-spin"/>
<span className="text-white/70 text-sm">Generating image...</span>
</div>
</div>)}
{/* Generating video overlay */}
{isGeneratingVideo && (<div className="absolute inset-0 flex items-center justify-center bg-black/70 backdrop-blur-sm rounded-xl">
<div className="flex flex-col items-center gap-3">
<Loader2 size={36} className="text-cyan-400 animate-spin"/>
<span className="text-white/70 text-sm">Converting to video...</span>
<span className="text-white/40 text-xs">This may take a few minutes</span>
</div>
</div>)}
</div>) : (
/* Empty state when no image */
<div className="flex flex-col items-center justify-center text-center p-8">
{isGeneratingImage ? (<>
<Loader2 size={48} className="text-cyan-400 animate-spin mb-4"/>
<p className="text-white/60 text-sm">Generating image...</p>
{currentScene?.imagePrompt && (<p className="text-white/30 text-xs mt-2 max-w-md line-clamp-2">{currentScene.imagePrompt}</p>)}
</>) : (<>
<div className="w-20 h-20 rounded-2xl bg-white/5 border border-white/10 flex items-center justify-center mb-4">
<ImageIcon size={32} className="text-white/20"/>
</div>
<p className="text-white/40 text-sm mb-4">No image for this scene</p>
<button onClick={() => currentScene && generateImageForScene(currentScene.id, currentScene.imagePrompt)} className="flex items-center gap-2 px-5 py-2.5 bg-cyan-500 hover:bg-cyan-400 rounded-full text-white text-sm font-medium transition-colors" type="button">
Generate Image
</button>
</>)}
</div>)}
</div>
{/* Narration subtitle overlay */}
{currentScene?.narration && (<div className="absolute bottom-8 left-0 right-0 flex justify-center px-8 pointer-events-none">
<div className="bg-black/80 backdrop-blur-md px-6 py-4 rounded-xl max-w-3xl shadow-xl border border-white/5">
<p className="text-base md:text-lg text-white leading-relaxed text-center">
{currentScene.narration}
</p>
</div>
</div>)}
</div>
{/* Action Bar - Like Play Story */}
<div className="border-t border-white/5 bg-black/60 backdrop-blur-md">
<div className="max-w-4xl mx-auto px-4 py-4">
<div className="flex items-center justify-between gap-4">
{/* Left: Playback controls */}
<div className="flex items-center gap-2">
<button onClick={() => setCurrentSceneIndex((i) => Math.max(0, i - 1))} disabled={currentSceneIndex === 0} className="p-3 text-white/40 hover:text-white hover:bg-white/5 rounded-full transition-all disabled:opacity-30 disabled:cursor-not-allowed" type="button" title="Previous scene">
<SkipBack size={20}/>
</button>
<button onClick={() => setIsPlaying(!isPlaying)} className="p-4 bg-cyan-500 hover:bg-cyan-400 rounded-full transition-all shadow-lg shadow-cyan-500/25" type="button" title={isPlaying ? "Pause" : "Play"}>
{isPlaying ? <Pause size={24}/> : <Play size={24} fill="currentColor"/>}
</button>
<button onClick={() => setCurrentSceneIndex((i) => Math.min(scenes.length - 1, i + 1))} disabled={currentSceneIndex >= scenes.length - 1} className="p-3 text-white/40 hover:text-white hover:bg-white/5 rounded-full transition-all disabled:opacity-30 disabled:cursor-not-allowed" type="button" title="Next scene">
<SkipForward size={20}/>
</button>
</div>
{/* Center: Scene progress bar */}
<div className="flex-1 mx-4 hidden sm:block">
<div className="flex gap-1">
{scenes.map((_, i) => (<button key={i} onClick={() => setCurrentSceneIndex(i)} className={`flex-1 h-1.5 rounded-full transition-all ${i === currentSceneIndex
? 'bg-cyan-400'
: i < currentSceneIndex
? 'bg-white/30'
: 'bg-white/10'}`} type="button" title={`Scene ${i + 1}`}/>))}
</div>
</div>
{/* Right: Actions */}
<div className="flex items-center gap-2">
{/* Edit Scene Button */}
<button onClick={() => currentScene && openSceneEditor(currentScene)} disabled={!currentScene} className="flex items-center gap-2 px-4 py-2 bg-white/5 hover:bg-white/10 border border-white/10 rounded-full text-sm transition-all disabled:opacity-40" title="Edit scene">
<Edit3 size={14}/>
<span className="hidden sm:inline">Edit</span>
</button>
{/* Generate Next Scene */}
<button onClick={generateNextScene} disabled={isGeneratingScene} className="flex items-center gap-2 px-4 py-2 bg-cyan-500/20 hover:bg-cyan-500/30 text-cyan-300 border border-cyan-500/30 rounded-full text-sm transition-all disabled:opacity-50" title="Generate next scene">
{isGeneratingScene ? (<>
<Loader2 size={14} className="animate-spin"/>
<span className="hidden sm:inline">Generating...</span>
</>) : (<>
<Plus size={14}/>
<span className="hidden sm:inline">Next Scene</span>
</>)}
</button>
{/* TV Mode */}
<button onClick={handleEnterTVMode} disabled={scenes.length === 0} className="flex items-center gap-2 px-4 py-2 bg-gradient-to-r from-cyan-500/20 to-blue-500/20 hover:from-cyan-500/30 hover:to-blue-500/30 text-cyan-300 border border-cyan-500/30 rounded-full text-sm transition-all disabled:opacity-40" type="button" title="Watch in TV Mode">
<Monitor size={14}/>
<span className="hidden sm:inline">TV Mode</span>
</button>
</div>
</div>
</div>
</div>
</div>)}
{/* Scene Editor Modal */}
{showSceneEditor && editingScene && (<div className="fixed inset-0 z-50 flex items-center justify-center p-4">
<div className="absolute inset-0 bg-black/80 backdrop-blur-sm" onClick={() => setShowSceneEditor(false)}/>
<div className="relative w-full max-w-2xl rounded-2xl border border-white/10 bg-[#0f0f18] shadow-2xl max-h-[90vh] overflow-y-auto">
{/* Modal Header */}
<div className="flex items-center justify-between p-5 border-b border-white/10">
<div className="flex items-center gap-3">
<div className="w-10 h-10 rounded-xl bg-cyan-500/20 flex items-center justify-center">
<Edit3 size={18} className="text-cyan-400"/>
</div>
<div>
<h2 className="text-lg font-semibold">Edit Scene {editingScene.idx + 1}</h2>
<p className="text-xs text-white/40">Update narration and prompts</p>
</div>
</div>
<button onClick={() => setShowSceneEditor(false)} className="p-2 rounded-lg hover:bg-white/5 transition-colors">
<X size={18} className="text-white/40"/>
</button>
</div>
{/* Modal Content */}
<div className="p-5 space-y-5">
{/* Narration */}
<div>
<label className="flex items-center gap-2 text-sm font-medium text-white/70 mb-2">
<FileText size={14}/>
Narration
</label>
<textarea value={editNarration} onChange={(e) => setEditNarration(e.target.value)} className="w-full px-4 py-3 bg-black/40 border border-white/10 rounded-xl text-white placeholder-white/30 focus:border-cyan-500/50 focus:ring-1 focus:ring-cyan-500/25 focus:outline-none resize-none transition-all" rows={3} placeholder="Enter narration text for this scene..."/>
</div>
{/* Image Prompt */}
<div>
<label className="flex items-center gap-2 text-sm font-medium text-white/70 mb-2">
<Sparkles size={14}/>
Image Prompt
</label>
<textarea value={editImagePrompt} onChange={(e) => setEditImagePrompt(e.target.value)} className="w-full px-4 py-3 bg-black/40 border border-white/10 rounded-xl text-white placeholder-white/30 focus:border-cyan-500/50 focus:ring-1 focus:ring-cyan-500/25 focus:outline-none resize-none transition-all" rows={4} placeholder="Describe the visual elements for image generation..."/>
</div>
{/* Negative Prompt */}
<div>
<label className="text-sm font-medium text-white/70 mb-2 block">
Negative Prompt
</label>
<textarea value={editNegativePrompt} onChange={(e) => setEditNegativePrompt(e.target.value)} className="w-full px-4 py-3 bg-black/40 border border-white/10 rounded-xl text-white placeholder-white/30 focus:border-cyan-500/50 focus:ring-1 focus:ring-cyan-500/25 focus:outline-none resize-none transition-all" rows={2} placeholder="Elements to avoid in the image..."/>
</div>
{/* Model Selection */}
<div className="grid grid-cols-2 gap-4">
<div>
<label className="flex items-center gap-2 text-sm font-medium text-white/70 mb-2">
<Settings size={14}/>
LLM Model
</label>
<select value={selectedLLMModel} onChange={(e) => setSelectedLLMModel(e.target.value)} className="w-full px-3 py-2.5 bg-black/40 border border-white/10 rounded-xl text-white focus:border-cyan-500/50 focus:outline-none transition-all">
<option value="">Default</option>
{availableLLMModels.map((m) => (<option key={m.id} value={m.id}>{m.name}</option>))}
</select>
</div>
<div>
<label className="flex items-center gap-2 text-sm font-medium text-white/70 mb-2">
<ImageIcon size={14}/>
Image Model
</label>
<select value={selectedImageModel} onChange={(e) => setSelectedImageModel(e.target.value)} className="w-full px-3 py-2.5 bg-black/40 border border-white/10 rounded-xl text-white focus:border-cyan-500/50 focus:outline-none transition-all">
<option value="">Default</option>
{availableImageModels.map((m) => (<option key={m.id} value={m.id}>{m.name}</option>))}
</select>
</div>
</div>
</div>
{/* Modal Footer */}
<div className="flex items-center justify-between p-5 border-t border-white/10">
<div className="flex items-center gap-2">
{/* Regenerate Image button */}
<button onClick={() => {
generateImageForScene(editingScene.id, editImagePrompt, true);
setShowSceneEditor(false);
}} disabled={isGeneratingImage || isGeneratingVideo} className="flex items-center gap-2 px-4 py-2 bg-white/5 hover:bg-white/10 border border-white/10 rounded-xl text-sm transition-all disabled:opacity-50">
<RefreshCw size={14}/>
Regenerate Image
</button>
{/* Make Video / Regenerate Video button */}
{projectWantsVideo && editingScene.imageUrl && (<div className="flex items-center gap-2">
<button onClick={() => {
generateVideoForScene(editingScene.id, editingScene.imageUrl, editImagePrompt);
setShowSceneEditor(false);
}} disabled={isGeneratingImage || isGeneratingVideo} className={[
"flex items-center gap-2 px-4 py-2 rounded-xl text-sm transition-all disabled:opacity-50",
editingScene.videoUrl
? "bg-white/5 hover:bg-white/10 border border-white/10"
: "bg-cyan-500/20 hover:bg-cyan-500/30 border border-cyan-500/30 text-cyan-300"
].join(" ")}>
<Film size={14}/>
{editingScene.videoUrl ? 'Regenerate Video' : 'Make Video'}
</button>
{editingScene.videoUrl && (<button onClick={() => {
removeVideoForScene(editingScene.id);
setShowSceneEditor(false);
}} disabled={isGeneratingImage || isGeneratingVideo} className="flex items-center gap-2 px-4 py-2 bg-red-500/15 hover:bg-red-500/25 border border-red-500/25 rounded-xl text-sm text-red-200 transition-all disabled:opacity-50" title="Remove video and keep image">
<X size={14}/>
Remove Video
</button>)}
</div>)}
</div>
<div className="flex items-center gap-3">
<button onClick={() => setShowSceneEditor(false)} className="px-4 py-2 text-sm text-white/50 hover:text-white transition-colors">
Cancel
</button>
<button onClick={saveSceneEdits} disabled={isSavingScene} className="flex items-center gap-2 px-5 py-2.5 bg-cyan-500 hover:bg-cyan-400 disabled:opacity-50 rounded-xl text-sm font-medium transition-all">
{isSavingScene ? (<>
<Loader2 size={14} className="animate-spin"/>
Saving...
</>) : (<>
<Save size={14}/>
Save Changes
</>)}
</button>
</div>
</div>
</div>
</div>)}
{/* Story Outline Panel */}
{showOutlinePanel && (<div className="fixed inset-0 z-50 flex items-center justify-center p-4">
<div className="absolute inset-0 bg-black/80 backdrop-blur-sm" onClick={() => setShowOutlinePanel(false)}/>
<div className="relative w-full max-w-3xl rounded-2xl border border-white/10 bg-[#0f0f18] shadow-2xl max-h-[90vh] overflow-y-auto">
{/* Panel Header */}
<div className="flex items-center justify-between p-5 border-b border-white/10">
<div className="flex items-center gap-3">
<div className="w-10 h-10 rounded-xl bg-cyan-500/20 flex items-center justify-center">
<Wand2 size={18} className="text-cyan-400"/>
</div>
<div>
<h2 className="text-lg font-semibold">Story Outline</h2>
<p className="text-xs text-white/40">AI-powered story structure</p>
</div>
</div>
<div className="flex items-center gap-3">
<button onClick={generateStoryOutline} disabled={isGeneratingOutline} className="flex items-center gap-2 px-4 py-2 bg-cyan-500 hover:bg-cyan-400 disabled:opacity-50 rounded-xl text-sm font-medium transition-all">
{isGeneratingOutline ? (<>
<Loader2 size={14} className="animate-spin"/>
Generating...
</>) : (<>
<Sparkles size={14}/>
{storyOutline ? "Regenerate" : "Generate"}
</>)}
</button>
<button onClick={() => setShowOutlinePanel(false)} className="p-2 rounded-lg hover:bg-white/5 transition-colors">
<X size={18} className="text-white/40"/>
</button>
</div>
</div>
{/* Panel Content */}
<div className="p-5">
{storyOutline ? (<div className="space-y-6">
{/* Story Arc */}
<div className="p-4 bg-black/30 rounded-xl border border-white/5">
<h3 className="text-sm font-semibold text-cyan-400 mb-3">Story Arc</h3>
<div className="grid grid-cols-5 gap-2 text-xs">
{['beginning', 'rising_action', 'climax', 'falling_action', 'resolution'].map((key, i) => (<div key={key} className="p-2.5 bg-white/5 rounded-lg">
<div className="text-white/40 mb-1 capitalize">{['Beginning', 'Rising', 'Climax', 'Falling', 'Resolution'][i]}</div>
<div className="text-white/80">{storyOutline.story_arc?.[key] || "—"}</div>
</div>))}
</div>
</div>
{/* Scene Outlines */}
<div>
<h3 className="text-sm font-semibold text-white/70 mb-3">
Scene Outlines ({storyOutline.scenes?.length || 0} scenes)
</h3>
<div className="space-y-3">
{storyOutline.scenes?.map((scene, idx) => {
const alreadyGenerated = scenes.length > idx;
return (<div key={idx} className={`p-4 rounded-xl border transition-all ${alreadyGenerated
? "bg-emerald-500/10 border-emerald-500/30"
: "bg-black/30 border-white/10 hover:border-white/20"}`}>
<div className="flex items-start justify-between gap-4">
<div className="flex-1">
<div className="flex items-center gap-2 mb-1">
<span className="text-sm font-medium text-white">
Scene {scene.scene_number}: {scene.title}
</span>
{alreadyGenerated && (<span className="text-xs px-2 py-0.5 bg-emerald-500/20 text-emerald-400 rounded-full">
Generated
</span>)}
</div>
<p className="text-sm text-white/50 mb-2">{scene.description}</p>
<p className="text-xs text-white/30 italic">"{scene.narration}"</p>
</div>
{!alreadyGenerated && scenes.length === idx && (<button onClick={() => {
generateSceneFromOutline(idx);
setShowOutlinePanel(false);
}} disabled={isGeneratingScene} className="flex items-center gap-1.5 px-3 py-1.5 bg-cyan-500 hover:bg-cyan-400 disabled:opacity-50 rounded-lg text-xs font-medium transition-all">
<Plus size={12}/>
Generate
</button>)}
</div>
</div>);
})}
</div>
</div>
</div>) : (<div className="text-center py-16">
<div className="w-20 h-20 mx-auto rounded-2xl bg-white/5 border border-white/10 flex items-center justify-center mb-6">
<Wand2 size={32} className="text-white/20"/>
</div>
<h3 className="text-lg font-medium text-white mb-2">No Outline Yet</h3>
<p className="text-white/40 mb-8 max-w-md mx-auto">
Generate an AI-powered story outline based on your project settings.
This creates a complete story arc with scene-by-scene planning.
</p>
<button onClick={generateStoryOutline} disabled={isGeneratingOutline} className="inline-flex items-center gap-3 px-8 py-4 bg-gradient-to-r from-cyan-500 to-blue-500 hover:from-cyan-400 hover:to-blue-400 disabled:opacity-50 rounded-2xl font-semibold shadow-lg shadow-cyan-500/25 transition-all">
{isGeneratingOutline ? (<>
<Loader2 size={20} className="animate-spin"/>
Generating Outline...
</>) : (<>
<Sparkles size={20}/>
Generate Story Outline
</>)}
</button>
</div>)}
</div>
</div>
</div>)}
{/* Project Settings Modal */}
{showSettingsModal && (<div className="fixed inset-0 z-50 flex items-center justify-center p-4">
<div className="absolute inset-0 bg-black/80 backdrop-blur-sm" onClick={() => setShowSettingsModal(false)}/>
<div className="relative w-full max-w-2xl rounded-2xl border border-white/10 bg-[#0f0f18] shadow-2xl max-h-[90vh] overflow-y-auto">
{/* Modal Header */}
<div className="flex items-center justify-between p-5 border-b border-white/10 sticky top-0 bg-[#0f0f18] z-10">
<div className="flex items-center gap-3">
<div className="w-10 h-10 rounded-xl bg-cyan-500/20 flex items-center justify-center">
<Settings size={18} className="text-cyan-400"/>
</div>
<div>
<h2 className="text-lg font-semibold">Project Settings</h2>
<p className="text-xs text-white/40">Customize your project configuration</p>
</div>
</div>
<button onClick={() => setShowSettingsModal(false)} className="p-2 rounded-lg hover:bg-white/5 transition-colors">
<X size={18} className="text-white/40"/>
</button>
</div>
{/* Modal Content */}
<div className="p-5 space-y-6">
{/* Title & Description */}
<div className="space-y-4">
<h3 className="text-sm font-semibold text-cyan-400 flex items-center gap-2">
<FileText size={14}/>
Details
</h3>
<div>
<label className="block text-xs font-medium text-white/50 mb-2">Title</label>
<input type="text" value={settingsTitle} onChange={(e) => setSettingsTitle(e.target.value)} className="w-full px-4 py-3 bg-black/40 border border-white/10 rounded-xl text-white placeholder-white/30 focus:border-cyan-500/50 focus:ring-1 focus:ring-cyan-500/25 focus:outline-none transition-all" placeholder="Project title"/>
</div>
<div>
<label className="block text-xs font-medium text-white/50 mb-2">Description</label>
<textarea value={settingsLogline} onChange={(e) => setSettingsLogline(e.target.value)} className="w-full px-4 py-3 bg-black/40 border border-white/10 rounded-xl text-white placeholder-white/30 focus:border-cyan-500/50 focus:ring-1 focus:ring-cyan-500/25 focus:outline-none resize-none transition-all" rows={2} placeholder="A short description of your project..."/>
</div>
</div>
{/* Format */}
<div className="space-y-3">
<h3 className="text-sm font-semibold text-cyan-400 flex items-center gap-2">
<Tv size={14}/>
Format
</h3>
<div className="grid grid-cols-3 gap-3">
<button onClick={() => setSettingsPlatform("youtube_16_9")} className={`p-4 rounded-xl border text-center transition-all ${settingsPlatform === "youtube_16_9"
? "border-cyan-500 bg-cyan-500/10"
: "border-white/10 bg-white/5 hover:bg-white/10"}`}>
<Tv size={24} className={`mx-auto mb-2 ${settingsPlatform === "youtube_16_9" ? "text-cyan-400" : "text-white/40"}`}/>
<div className="text-sm font-medium">YouTube Video</div>
<div className="text-xs text-white/40">16:9 Landscape</div>
</button>
<button onClick={() => setSettingsPlatform("shorts_9_16")} className={`p-4 rounded-xl border text-center transition-all ${settingsPlatform === "shorts_9_16"
? "border-cyan-500 bg-cyan-500/10"
: "border-white/10 bg-white/5 hover:bg-white/10"}`}>
<Smartphone size={24} className={`mx-auto mb-2 ${settingsPlatform === "shorts_9_16" ? "text-cyan-400" : "text-white/40"}`}/>
<div className="text-sm font-medium">YouTube Short</div>
<div className="text-xs text-white/40">9:16 Vertical</div>
</button>
<button onClick={() => setSettingsPlatform("slides_16_9")} className={`p-4 rounded-xl border text-center transition-all ${settingsPlatform === "slides_16_9"
? "border-cyan-500 bg-cyan-500/10"
: "border-white/10 bg-white/5 hover:bg-white/10"}`}>
<Presentation size={24} className={`mx-auto mb-2 ${settingsPlatform === "slides_16_9" ? "text-cyan-400" : "text-white/40"}`}/>
<div className="text-sm font-medium">Slides</div>
<div className="text-xs text-white/40">16:9 Presentation</div>
</button>
</div>
</div>
{/* Image Generation Model */}
<div className="space-y-3">
<h3 className="text-sm font-semibold text-cyan-400 flex items-center gap-2">
<ImageIcon size={14}/>
Image Generation
</h3>
<div className="p-4 rounded-xl border border-white/10 bg-white/5">
<label className="block text-xs font-medium text-white/50 mb-2">Image Model</label>
<div className="relative">
<select value={settingsImageModel} onChange={(e) => setSettingsImageModel(e.target.value)} className="w-full px-4 py-3 bg-black/40 border border-white/10 rounded-xl text-white focus:border-cyan-500/50 focus:ring-1 focus:ring-cyan-500/25 focus:outline-none transition-all appearance-none cursor-pointer" disabled={loadingModels}>
{loadingModels ? (<option value="">Loading models...</option>) : availableImageModels.length === 0 ? (<option value="">No models available</option>) : (availableImageModels.map((m) => (<option key={m.id} value={m.id}>{m.name}</option>)))}
</select>
<ChevronDown className="absolute right-3 top-1/2 -translate-y-1/2 w-4 h-4 text-white/40 pointer-events-none"/>
</div>
<p className="text-xs text-white/30 mt-2">Override the global image model for this project</p>
</div>
</div>
{/* Video Generation Toggle */}
<div className="space-y-3">
<h3 className="text-sm font-semibold text-cyan-400 flex items-center gap-2">
<Film size={14}/>
Video Generation
</h3>
<div className={`p-4 rounded-xl border transition-all ${settingsEnableVideo
? "border-cyan-500 bg-cyan-500/10"
: "border-white/10 bg-white/5 hover:bg-white/10 cursor-pointer"}`} onClick={(e) => {
// Only toggle if clicking on the toggle area, not on child elements like select
if (e.target.tagName !== 'SELECT') {
if (!settingsEnableVideo)
setSettingsEnableVideo(true);
}
}}>
<div className="flex items-center justify-between">
<div className="flex items-center gap-3">
<div className={`w-10 h-10 rounded-lg flex items-center justify-center ${settingsEnableVideo ? "bg-cyan-500/30" : "bg-white/10"}`}>
<Film size={18} className={settingsEnableVideo ? "text-cyan-400" : "text-white/40"}/>
</div>
<div>
<div className="text-sm font-medium">Enable Video Generation</div>
<div className="text-xs text-white/40">
{settingsEnableVideo
? "Make Video button visible for each scene"
: "Scenes will be static images only"}
</div>
</div>
</div>
<div className={`relative w-12 h-6 rounded-full transition-colors ${settingsEnableVideo ? "bg-cyan-500" : "bg-white/20"}`}>
<div className={`absolute top-1 w-4 h-4 rounded-full bg-white transition-transform ${settingsEnableVideo ? "translate-x-7" : "translate-x-1"}`}/>
</div>
</div>
{settingsEnableVideo && settingsPlatform === "slides_16_9" && (<div className="mt-3 p-2 bg-amber-500/10 border border-amber-500/30 rounded-lg text-xs text-amber-400">
Tip: Slides with video will create animated clips instead of static images with Ken Burns effect.
</div>)}
{/* Video Model Selector - shown when video is enabled */}
{settingsEnableVideo && (<div className="mt-4 pt-4 border-t border-white/10" onClick={(e) => e.stopPropagation()}>
<label className="block text-xs font-medium text-white/50 mb-2">Video Model</label>
<div className="relative">
<select value={settingsVideoModel} onChange={(e) => setSettingsVideoModel(e.target.value)} className="w-full px-4 py-3 bg-black/40 border border-white/10 rounded-xl text-white focus:border-cyan-500/50 focus:ring-1 focus:ring-cyan-500/25 focus:outline-none transition-all appearance-none cursor-pointer" disabled={loadingModels}>
{loadingModels ? (<option value="">Loading models...</option>) : availableVideoModels.length === 0 ? (<option value="">No video models available</option>) : (availableVideoModels.map((m) => (<option key={m.id} value={m.id}>{m.name}</option>)))}
</select>
<ChevronDown className="absolute right-3 top-1/2 -translate-y-1/2 w-4 h-4 text-white/40 pointer-events-none"/>
</div>
<p className="text-xs text-white/30 mt-2">Override the global video model for this project</p>
</div>)}
{/* Toggle OFF button when video is enabled */}
{settingsEnableVideo && (<button type="button" onClick={(e) => { e.stopPropagation(); setSettingsEnableVideo(false); }} className="mt-4 w-full px-4 py-2 text-xs text-white/50 hover:text-white/70 border border-white/10 rounded-lg hover:bg-white/5 transition-all">
Disable Video Generation
</button>)}
</div>
</div>
{/* Intent */}
<div className="space-y-3">
<h3 className="text-sm font-semibold text-cyan-400">Intent</h3>
<div className="flex gap-2 flex-wrap">
{["Entertain", "Educate", "Inspire"].map((g) => (<button key={g} onClick={() => setSettingsGoal(g)} className={`px-4 py-2 rounded-full text-sm border transition-all ${settingsGoal === g
? "bg-white text-black font-medium border-transparent"
: "bg-white/5 text-white/60 border-white/10 hover:bg-white/10 hover:text-white"}`}>
{g}
</button>))}
</div>
</div>
{/* Episode Configuration */}
<div className="grid grid-cols-2 gap-4">
<div>
<label className="block text-xs font-medium text-white/50 mb-2">Scenes per Episode</label>
<div className="flex gap-2 flex-wrap">
{[4, 6, 8, 10, 12].map((count) => (<button key={count} onClick={() => setSettingsSceneCount(count)} className={`px-4 py-2 rounded-lg text-sm transition-all ${settingsSceneCount === count
? "bg-cyan-500 text-white font-medium"
: "bg-white/5 text-white/60 hover:bg-white/10"}`}>
{count}
</button>))}
</div>
<p className="text-xs text-white/30 mt-1">
~{settingsSceneCount * settingsSceneDuration}s total
</p>
</div>
<div>
<label className="block text-xs font-medium text-white/50 mb-2">Scene Duration</label>
<div className="flex gap-2 flex-wrap">
{[3, 5, 7, 10].map((dur) => (<button key={dur} onClick={() => setSettingsSceneDuration(dur)} className={`px-4 py-2 rounded-lg text-sm transition-all ${settingsSceneDuration === dur
? "bg-cyan-500 text-white font-medium"
: "bg-white/5 text-white/60 hover:bg-white/10"}`}>
{dur}s
</button>))}
</div>
</div>
</div>
{/* Visual Style */}
<div className="space-y-3">
<h3 className="text-sm font-semibold text-cyan-400 flex items-center gap-2">
<Palette size={14}/>
Visual Style
</h3>
<div className="grid grid-cols-3 gap-3">
<button onClick={() => setSettingsVisualStyle("Cinematic")} className={`p-3 rounded-xl border text-center transition-all ${settingsVisualStyle === "Cinematic"
? "border-cyan-500 bg-cyan-500/10"
: "border-white/10 bg-white/5 hover:bg-white/10"}`}>
<Camera size={20} className={`mx-auto mb-1.5 ${settingsVisualStyle === "Cinematic" ? "text-cyan-400" : "text-white/40"}`}/>
<div className="text-sm font-medium">Cinematic</div>
<div className="text-xs text-white/40">High fidelity</div>
</button>
<button onClick={() => setSettingsVisualStyle("Digital Art")} className={`p-3 rounded-xl border text-center transition-all ${settingsVisualStyle === "Digital Art"
? "border-cyan-500 bg-cyan-500/10"
: "border-white/10 bg-white/5 hover:bg-white/10"}`}>
<Palette size={20} className={`mx-auto mb-1.5 ${settingsVisualStyle === "Digital Art" ? "text-cyan-400" : "text-white/40"}`}/>
<div className="text-sm font-medium">Digital Art</div>
<div className="text-xs text-white/40">Stylized</div>
</button>
<button onClick={() => setSettingsVisualStyle("Anime")} className={`p-3 rounded-xl border text-center transition-all ${settingsVisualStyle === "Anime"
? "border-cyan-500 bg-cyan-500/10"
: "border-white/10 bg-white/5 hover:bg-white/10"}`}>
<Star size={20} className={`mx-auto mb-1.5 ${settingsVisualStyle === "Anime" ? "text-cyan-400" : "text-white/40"}`}/>
<div className="text-sm font-medium">Anime</div>
<div className="text-xs text-white/40">Japanese style</div>
</button>
</div>
</div>
{/* Mood & Tone */}
<div className="space-y-3">
<h3 className="text-sm font-semibold text-cyan-400">Mood & Tone</h3>
<div className="flex gap-2 flex-wrap">
{["Documentary", "Dramatic", "Calm", "Upbeat", "Dark"].map((t) => (<button key={t} onClick={() => toggleSettingsTone(t)} className={`px-4 py-2 rounded-full text-sm border transition-all ${settingsTones.includes(t)
? "bg-white text-black font-medium border-transparent"
: "bg-white/5 text-white/60 border-white/10 hover:bg-white/10 hover:text-white"}`}>
{t}
</button>))}
</div>
</div>
{/* AI Story Model */}
<div className="space-y-3">
<h3 className="text-sm font-semibold text-cyan-400 flex items-center gap-2">
<Sparkles size={14}/>
AI Story Model
</h3>
<p className="text-xs text-white/40">Select the AI model for generating outlines and narration</p>
<select value={settingsLLMModel} onChange={(e) => setSettingsLLMModel(e.target.value)} className="w-full px-4 py-3 bg-black/40 border border-white/10 rounded-xl text-white focus:border-cyan-500/50 focus:outline-none transition-all appearance-none cursor-pointer">
{availableLLMModels.length === 0 ? (<option value="">No models available</option>) : (availableLLMModels.map((m) => (<option key={m.id} value={m.id}>
{m.name}
</option>)))}
</select>
{availableLLMModels.length === 0 && (<p className="text-xs text-red-400">
No Ollama models found. Make sure Ollama is running with at least one model.
</p>)}
</div>
{/* Checks */}
<div className="space-y-3">
<h3 className="text-sm font-semibold text-cyan-400 flex items-center gap-2">
<Shield size={14}/>
Checks
</h3>
<div className="bg-black/30 rounded-xl border border-white/10 divide-y divide-white/10">
<label className="flex items-center justify-between p-4 cursor-pointer hover:bg-white/5 transition-colors">
<div className="flex items-center gap-3">
<Lock size={16} className="text-white/40"/>
<div>
<div className="text-sm font-medium">Consistency Lock</div>
<div className="text-xs text-white/40">Keep characters stable across scenes</div>
</div>
</div>
<input type="checkbox" checked={settingsLockIdentity} onChange={(e) => setSettingsLockIdentity(e.target.checked)} className="w-5 h-5 accent-cyan-500"/>
</label>
<label className="flex items-center justify-between p-4 cursor-pointer hover:bg-white/5 transition-colors">
<div className="flex items-center gap-3">
<Shield size={16} className="text-white/40"/>
<div>
<div className="text-sm font-medium">Safe for Work (SFW)</div>
<div className="text-xs text-white/40">Filter explicit content</div>
</div>
</div>
<input type="checkbox" checked={settingsContentRating === "sfw"} onChange={(e) => setSettingsContentRating(e.target.checked ? "sfw" : "mature")} className="w-5 h-5 accent-cyan-500"/>
</label>
</div>
{settingsContentRating === "mature" && (<div className="p-3 bg-purple-500/10 border border-purple-500/30 rounded-xl text-sm">
<span className="font-medium text-purple-400">Mature Mode Enabled</span>
<span className="text-white/50 ml-2">- This project may generate explicit content.</span>
</div>)}
</div>
{/* Generation Parameters */}
<div className="space-y-3">
<h3 className="text-sm font-semibold text-cyan-400 flex items-center gap-2">
<Sliders size={14}/>
Generation Parameters
</h3>
<p className="text-xs text-white/40">
Customize generation defaults for images & videos. These override model presets.
</p>
<CreatorStudioSettings value={genParams} onChange={setGenParams}/>
</div>
</div>
{/* Modal Footer */}
<div className="flex items-center justify-end gap-3 p-5 border-t border-white/10 sticky bottom-0 bg-[#0f0f18]">
<button onClick={() => setShowSettingsModal(false)} className="px-4 py-2 text-sm text-white/50 hover:text-white transition-colors">
Cancel
</button>
<button onClick={saveProjectSettings} disabled={isSavingSettings || !settingsTitle.trim()} className="flex items-center gap-2 px-5 py-2.5 bg-cyan-500 hover:bg-cyan-400 disabled:opacity-50 rounded-xl text-sm font-medium transition-all">
{isSavingSettings ? (<>
<Loader2 size={14} className="animate-spin"/>
Saving...
</>) : (<>
<Save size={14}/>
Save Settings
</>)}
</button>
</div>
</div>
</div>)}
{/* TV Mode Overlay */}
{tvModeActive && (<TVModeContainer onGenerateNext={generateNextForTVMode} onEnsureImage={ensureImageForTVMode} onSyncOutline={syncOutlineWithScenes}/>)}
{/* Custom scrollbar hide */}
<style>{`
.scrollbar-hide::-webkit-scrollbar { display: none; }
.scrollbar-hide { -ms-overflow-style: none; scrollbar-width: none; }
.line-clamp-2 {
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
`}</style>
</div>);
}
export default CreatorStudioEditor;