Next.js slice and demo

npx create-next-app@latest sutraai-web --typescript --app --tailwind --eslint --no-src-dir
cd sutraai-web
echo "NEXT_PUBLIC_API=http://<jetson-ip>:8000" > .env.local
npm run dev                           # http://localhost:3000

"use client";
import { useState } from "react";

const API = process.env.NEXT_PUBLIC_API ?? "http://localhost:8000";
type Line = { epoch?: number; loss?: number; val_acc?: number; val_f1?: number; event?: string };
const TEMPLATES = [
  { id: "audio", name: "Bird sound (audio · MFCC)" },
  { id: "sensor", name: "Fall detection (accelerometer)" },
  { id: "image", name: "Defect QC (images)" },
  { id: "detect", name: "Driver drowsiness (object detection)" },
];

export default function Home() {
  const [template, setTemplate] = useState("audio");
  const [file, setFile] = useState<File | null>(null);
  const [pid, setPid] = useState<string | null>(null);
  const [lines, setLines] = useState<Line[]>([]);
  const [status, setStatus] = useState("Pick a template and a zip file.");
  const [metrics, setMetrics] = useState<any>(null);

  async function start() {
    if (!file) return setStatus("Choose a zip file first.");
    setLines([]); setMetrics(null); setStatus("Creating project…");
    const p = await fetch(`${API}/projects?template=${template}`, { method: "POST" }).then(r => r.json());
    setPid(p.project_id);
    setStatus("Uploading…");
    const fd = new FormData(); fd.append("file", file);
    await fetch(`${API}/projects/${p.project_id}/dataset`, { method: "POST", body: fd });
    const j = await fetch(`${API}/projects/${p.project_id}/train`, { method: "POST" }).then(r => r.json());
    setStatus("Training…");
    const es = new EventSource(`${API}/jobs/${j.job_id}/events`);
    es.onmessage = async (e) => {
      const msg: Line = JSON.parse(e.data);
      if (msg.event === "finished") {
        es.close(); setStatus("Done.");
        setMetrics(await fetch(`${API}/projects/${p.project_id}/metrics`).then(r => r.json()));
      } else if (msg.epoch) setLines(l => [...l, msg]);
    };
    es.onerror = () => { es.close(); setStatus("Lost the connection to the training job."); };
  }

  const last = lines[lines.length - 1];
  return (
    <main className="mx-auto max-w-2xl p-6 space-y-6">
      <h1 className="text-2xl font-semibold">SutraAI</h1>
      <div className="space-y-3">
        <label htmlFor="tpl" className="block text-sm font-medium">Template</label>
        <select id="tpl" className="w-full border rounded p-2" value={template} onChange={e => setTemplate(e.target.value)}>
          {TEMPLATES.map(t => <option key={t.id} value={t.id}>{t.name}</option>)}
        </select>
        <label htmlFor="zip" className="block text-sm font-medium">Dataset (.zip)</label>
        <input id="zip" type="file" accept=".zip" onChange={e => setFile(e.target.files?.[0] ?? null)} />
        <button onClick={start} className="rounded bg-blue-700 text-white px-4 py-2">Train</button>
        <p className="text-sm text-gray-600">{status}</p>
      </div>
      {last && (
        <div className="rounded border p-4">
          <p>Epoch {last.epoch} · loss {last.loss} · validation {last.val_acc ?? last.val_f1}</p>
          <progress className="w-full" value={last.epoch} max={100} />
        </div>
      )}
      {metrics && pid && (
        <div className="rounded border p-4 space-y-2">
          <p className="font-medium">Test score: {(metrics.test_acc ?? metrics.test_f1)?.toFixed(3)}</p>
          <div className="flex gap-3 flex-wrap">
            {["onnx", "tflite_int8", "c_array", "pytorch"].map(f => (
              <a key={f} className="underline" href={`${API}/projects/${pid}/download?fmt=${f}`}>Download {f}</a>
            ))}
          </div>
        </div>
      )}
    </main>
  );
}