Spaces:
Runtime error
Runtime error
| import { useState } from "react"; | |
| import { videoStylesApi } from "../../api/endpoints"; | |
| import type { VideoStyleItem } from "../../api/types"; | |
| import { errorMessage, Modal } from "../ui"; | |
| /** A custom video style: guidance for how the script is written. Draft it with AI from a description, or write it. | |
| * Pass `style` to edit an existing one. */ | |
| export function StyleCreator({ style, onClose, onSaved }: { | |
| style?: VideoStyleItem; onClose: () => void; onSaved: (s: VideoStyleItem) => void; | |
| }) { | |
| const [prompt, setPrompt] = useState(""); | |
| const [name, setName] = useState(style?.name ?? ""); | |
| const [guidance, setGuidance] = useState(style?.guidance ?? ""); | |
| const [method, setMethod] = useState<"manual" | "ai">("manual"); | |
| const [busy, setBusy] = useState<"draft" | "save" | null>(null); | |
| const [error, setError] = useState<string | null>(null); | |
| async function draft() { | |
| setBusy("draft"); | |
| setError(null); | |
| try { | |
| const d = await videoStylesApi.aiDraft(prompt.trim()); | |
| setName(d.name); | |
| setGuidance(d.guidance); | |
| setMethod("ai"); | |
| } catch (e) { | |
| setError(errorMessage(e)); | |
| } finally { | |
| setBusy(null); | |
| } | |
| } | |
| async function save() { | |
| setBusy("save"); | |
| setError(null); | |
| try { | |
| const saved = style?.custom_id | |
| ? await videoStylesApi.update(style.custom_id, { name: name.trim(), guidance: guidance.trim(), version: style.version ?? 0 }) | |
| : await videoStylesApi.create({ name: name.trim(), guidance: guidance.trim(), creation_method: method, | |
| source_prompt: method === "ai" ? prompt.trim() : undefined }); | |
| onSaved(saved); | |
| } catch (e) { | |
| setError(errorMessage(e)); | |
| setBusy(null); | |
| } | |
| } | |
| return ( | |
| <Modal title={style ? "Edit video style" : "Create a video style"} onClose={onClose} wide> | |
| <div className="stack"> | |
| {!style && ( | |
| <div className="field"> | |
| <span className="vw-label">Describe the style (optional)</span> | |
| <textarea className="input" rows={3} maxLength={1000} value={prompt} onChange={(e) => setPrompt(e.target.value)} | |
| placeholder="Punchy and direct, short sentences, one idea per scene, end every video with a question." /> | |
| <div className="row"> | |
| <button className="btn btn-small" onClick={draft} disabled={!!busy || prompt.trim().length < 20}> | |
| {busy === "draft" ? "Drafting..." : "Draft with AI"} | |
| </button> | |
| <small className="muted">Or write the style yourself below.</small> | |
| </div> | |
| </div> | |
| )} | |
| <label className="field"> | |
| <span className="vw-label">Name</span> | |
| <input className="input" value={name} maxLength={80} onChange={(e) => setName(e.target.value)} /> | |
| </label> | |
| <label className="field"> | |
| <span className="vw-label">Guidance</span> | |
| <textarea className="input" rows={7} maxLength={2000} value={guidance} onChange={(e) => setGuidance(e.target.value)} | |
| placeholder="How scripts in this style should read: tone, pacing, structure, words to use or avoid." /> | |
| <small className="muted">{guidance.length}/2000</small> | |
| </label> | |
| {error && <p className="error-text">{error}</p>} | |
| <div className="vw-nav"> | |
| <button className="btn" onClick={onClose} disabled={!!busy}>Cancel</button> | |
| <button className="btn btn-primary" onClick={save} disabled={!!busy || !name.trim() || !guidance.trim()}> | |
| {busy === "save" ? "Saving..." : "Save style"} | |
| </button> | |
| </div> | |
| </div> | |
| </Modal> | |
| ); | |
| } | |