Function TextToVideoForm

apps/frontend/src/components/TextToVideoForm.tsx:33–317

({ onCreated }: Props)

}

export function TextToVideoForm({ onCreated }: Props) {
  const [models, setModels] = useState<VideoModel[]>([]);
  const [modelsError, setModelsError] = useState<string | null>(null);

  const [model, setModel] = useState("");
  const [prompt, setPrompt] = useState("");
  const [duration, setDuration] = useState("");
  const [resolution, setResolution] = useState("");
  const [aspectRatio, setAspectRatio] = useState("");
  const [generateAudio, setGenerateAudio] = useState(true);
  const [startFrame, setStartFrame] = useState<File | null>(null);
  const [endFrame, setEndFrame] = useState<File | null>(null);
  const [referenceFrames, setReferenceFrames] = useState<File[]>([]);

  const [submitting, setSubmitting] = useState(false);
  const [error, setError] = useState<string | null>(null);

  const costs = useActionCosts();
  const fileInputRef = useRef<HTMLInputElement>(null);

  useEffect(() => {
    fetchModels()
      .then((m) => {
        setModels(m);
        if (m[0]) setModel(m[0].id);
      })
      .catch((err) => setModelsError(err.message));
  }, []);

  const selectedModel = useMemo(() => models.find((m) => m.id === model), [models, model]);
  const resolutions = selectedModel?.supported_resolutions?.length
    ? selectedModel.supported_resolutions
    : FALLBACK_RESOLUTIONS;
  const aspectRatios = selectedModel?.supported_aspect_ratios?.length
    ? selectedModel.supported_aspect_ratios
    : FALLBACK_ASPECT_RATIOS;

  // Only show models that support the chosen duration (spec 09).
  const availableModels = useMemo(
    () => modelsForDuration(models, duration ? Number(duration) : null),
    [models, duration],
  );

  function handleDurationChange(value: string) {
    setDuration(value);
    const allowed = modelsForDuration(models, value ? Number(value) : null);
    if (model && !allowed.some((m) => m.id === model)) {
      setModel(allowed[0]?.id ?? "");
    }
  }

  async function handleSubmit(e: React.FormEvent) {
    e.preventDefault();
    setError(null);
    if (!model || !prompt.trim()) {
      setError("Model and prompt are required.");
      return;
    }