Spaces:
Runtime error
Runtime error
File size: 3,679 Bytes
070c931 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 | 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>
);
}
|