React

import { useEffect, useMemo, useRef } from "react";
import { createJsonTransport, mountForm } from "mlform";

export function PredictionForm() {
  const ref = useRef<HTMLDivElement>(null);
  const schema = useMemo(
    () => ({
      fields: [{ id: "prompt", kind: "text", label: "Prompt" }],
      reports: [{ id: "prediction", kind: "classifier", label: "Prediction" }],
    }),
    [],
  );

  useEffect(() => {
    if (!ref.current) return;
    const mounted = mountForm(ref.current, {
      transport: createJsonTransport({ endpoint: "/api/predict" }),
      schema,
    });
    return () => mounted.unmount();
  }, [schema]);

  return <div ref={ref} />;
}

Evita reconstruir el schema en cada render salvo que quieras remount intencional.