Function TextToImageForm

apps/frontend/src/components/TextToImageForm.tsx:25–225

({ onCreated }: Props)

}

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

  const [model, setModel] = useState("");
  const [prompt, setPrompt] = useState("");
  const [resolution, setResolution] = useState("");
  const [aspectRatio, setAspectRatio] = useState("");
  const [referenceImages, setReferenceImages] = useState<File[]>([]);

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

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

  useEffect(() => {
    fetchImageModels()
      .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;

  async function handleSubmit(e: React.FormEvent) {
    e.preventDefault();
    setError(null);
    if (!model || !prompt.trim()) {
      setError("Model and prompt are required.");
      return;
    }
    setSubmitting(true);
    try {
      const form = new FormData();
      form.set("model", model);
      form.set("prompt", prompt);
      if (resolution) form.set("resolution", resolution);
      if (aspectRatio) form.set("aspectRatio", aspectRatio);
      referenceImages.forEach((f) => form.append("referenceImages", f));

      const image = await createImage(form);
      refreshCredits();
      onCreated(image);
      setPrompt("");
    } catch (err) {
      setError(err instanceof Error ? err.message : "Failed to generate image");
    } finally {
      setSubmitting(false);
    }