gpu/single-gpu/home_benjamin_hdbasin/code/web/src/main.tsx

import { StrictMode, useEffect, useMemo, useState } from "react";
import { createRoot } from "react-dom/client";
import {
  BarChart3,
  CheckCircle2,
  ChevronRight,
  CreditCard,
  FileText,
  Gauge,
  Lock,
  Upload,
  Waves,
} from "lucide-react";
import "./styles.css";

type Budget = 8 | 12 | 20;
type Step = "configure" | "checkout" | "queued";
type Workload = "sentiment" | "intent" | "feedback" | "documents";
type FitLevel = "strong" | "okay" | "review";
type JobStatus = "queued" | "running" | "succeeded" | "failed" | "canceled" | "awaiting_payment";

type ActiveJob = {
  id: string;
  token: string;
};

type JobSummary = {
  id: string;
  status: JobStatus;
  file_name: string;
  workload: string;
  trial_budget: number;
  price_cents: number;
  worker_id: string | null;
  report_uri: string | null;
  result_uri: string | null;
  best_config_uri: string | null;
  best_validation_loss: number | null;
  failure_reason: string | null;
  started_at: string | null;
  finished_at: string | null;
};

type ReportPayload = {
  report: string | null;
  result: Record<string, unknown> | null;
  bestConfig: Record<string, unknown> | null;
};

const plans: Record<Budget, { label: string; price: number; runtime: string; trials: string; bestFor: string; badge?: string }> = {
  8: { label: "Scout", price: 19, runtime: "20-40 min", trials: "8 trials", bestFor: "First evidence check" },
  12: { label: "Launch", price: 39, runtime: "35-65 min", trials: "12 trials", bestFor: "Best value", badge: "Most popular" },
  20: { label: "Deepen", price: 79, runtime: "60-110 min", trials: "20 trials", bestFor: "More confidence" },
};

const workloads: Record<Workload, { label: string; example: string }> = {
  sentiment: { label: "Sentiment classifier", example: "reviews, comments, survey text" },
  intent: { label: "Intent classifier", example: "demo, cancel, renew, question" },
  feedback: { label: "Feedback tagger", example: "pricing, UX, performance, docs" },
  documents: { label: "Document labeler", example: "policy, invoice, note, contract" },
};

const benchmarkRows = [
  { name: "AG News", task: "Topic classification", change: "17.9% lower validation loss", note: "Clear HD-Basin win", result: "win", margin: 17.9 },
  { name: "Emotion", task: "Emotion classification", change: "5.5% lower validation loss", note: "HD-Basin win", result: "win", margin: 5.5 },
  { name: "SST-2", task: "Sentiment classification", change: "4.5% lower validation loss", note: "HD-Basin win", result: "win", margin: 4.5 },
  { name: "TweetEval", task: "Tweet sentiment", change: "0.2% lower validation loss", note: "Small HD-Basin win", result: "win", margin: 0.2 },
  { name: "IMDB", task: "Movie sentiment", change: "0.3% higher validation loss", note: "Near tie", result: "near", margin: 0.3 },
  { name: "CIFAR-10", task: "Image classification", change: "0.8% higher validation loss", note: "Baseline slightly better", result: "loss", margin: 0.8 },
  { name: "Fashion-MNIST", task: "Image classification", change: "4.9% higher validation loss", note: "Baseline better", result: "loss", margin: 4.9 },
];

const computeSavingsStats = [
  {
    value: "17 / 24",
    label: "Matched-quality passes",
    body: "20-seed A100 target-savings comparisons where HD-BasinFlow reached baseline-quality loss with at least 20% fewer evaluations.",
  },
  {
    value: "70.0%",
    label: "Median evaluation saving",
    body: "Median savings across reviewable target-savings rows, measured against the baseline final-quality target.",
  },
  {
    value: "69.0%",
    label: "Median wall-time proxy saving",
    body: "Median wall-clock/GPU-time proxy saving across the same reviewable comparisons.",
  },
];

const computeSavingsRows = [
  { workload: "IMDB", baseline: "Random / Optuna / Sobol / ASHA", evalSaved: "83.3%", wallSaved: "79.5-80.6%", note: "Quality pass across four baselines" },
  { workload: "Tabular credit", baseline: "ASHA", evalSaved: "81.2%", wallSaved: "77.6%", note: "Quality pass, strongest tabular row" },
  { workload: "CIFAR-10", baseline: "Optuna TPE", evalSaved: "70.0%", wallSaved: "61.4%", note: "Quality pass in target-savings table" },
  { workload: "AG News", baseline: "Random / Sobol", evalSaved: "75.0%", wallSaved: "67.2-71.0%", note: "Not a claim: saved compute but missed quality tolerance" },
];

const sampleDataset = `text,label
"The onboarding was fast and the report made the best setting clear.",positive
"Checkout took too long and I could not tell what happened next.",negative
"The dashboard is easy to scan and the upload step feels simple.",positive
"The model result was confusing and the summary missed the main issue.",negative
"Support answered quickly and the final report was useful.",positive
"The page froze during upload and I had to restart the run.",negative
"The pricing was clear and the trial budget matched what I expected.",positive
"The status message was vague after I created the job.",negative
"The results helped me choose a classifier setting quickly.",positive
"The form asked for columns but did not explain the missing label.",negative
"The demo felt polished and the fit score was helpful.",positive
"The file validation error was hard to understand.",negative`;

type FitResult = {
  level: FitLevel;
  score: number;
  title: string;
  summary: string;
  rows: number;
  labels: number;
  avgTextLength: number;
  notes: string[];
};

function parseDelimitedLine(line: string) {
  const values: string[] = [];
  let current = "";
  let quoted = false;
  for (let i = 0; i < line.length; i += 1) {
    const char = line[i];
    const next = line[i + 1];
    if (char === '"' && quoted && next === '"') {
      current += '"';
      i += 1;
    } else if (char === '"') {
      quoted = !quoted;
    } else if (char === "," && !quoted) {
      values.push(current.trim());
      current = "";
    } else {
      current += char;
    }
  }
  values.push(current.trim());
  return values;
}

function analyzeDatasetSample(sampleText: string, textColumn: string, labelColumn: string, workload: Workload): FitResult {
  const fallback: FitResult = {
    level: "okay",
    score: 68,
    title: "Likely fit",
    summary: "Upload a sample to score the dataset shape before payment.",
    rows: 0,
    labels: 0,
    avgTextLength: 0,
    notes: ["Best evidence is for labeled text classification with compact labels."],
  };

  if (!sampleText.trim()) return fallback;

  const lines = sampleText
    .split(/\r?\n/)
    .map((line) => line.trim())
    .filter(Boolean)
    .slice(0, 2001);

  if (lines.length < 2) {
    return {
      ...fallback,
      level: "review",
      score: 34,
      title: "Needs review",
      summary: "The file sample is too small to judge.",
      notes: ["Add a header row and enough labeled rows for a classifier."],
    };
  }

  let rows: Record<string, string>[] = [];
  if (lines[0].startsWith("{")) {
    rows = lines
      .map((line) => {
        try {
          return JSON.parse(line) as Record<string, string>;
        } catch {
          return null;
        }
      })
      .filter((row): row is Record<string, string> => Boolean(row));
  } else {
    const headers = parseDelimitedLine(lines[0]).map((header) => header.replace(/^"|"$/g, ""));
    rows = lines.slice(1).map((line) => {
      const values = parseDelimitedLine(line);
      return Object.fromEntries(headers.map((header, index) => [header, values[index] ?? ""]));
    });
  }

  const usableRows = rows.filter((row) => row[textColumn] && row[labelColumn]);
  const labels = new Set(usableRows.map((row) => String(row[labelColumn]).trim()).filter(Boolean));
  const lengths = usableRows.map((row) => String(row[textColumn]).trim().split(/\s+/).filter(Boolean).length);
  const avgTextLength = lengths.length ? Math.round(lengths.reduce((sum, value) => sum + value, 0) / lengths.length) : 0;

  let score = 50;
  const notes: string[] = [];

  if (usableRows.length >= 200) {
    score += 18;
    notes.push("Enough labeled rows in the sample for a first tuning run.");
  } else if (usableRows.length >= 50) {
    score += 8;
    notes.push("Small but testable; more rows would improve confidence.");
  } else {
    score -= 18;
    notes.push("Very few labeled rows found in the sample.");
  }

  if (labels.size >= 2 && labels.size <= 8) {
    score += 18;
    notes.push(`${labels.size} label classes looks suitable for the current classifier path.`);
  } else if (labels.size > 8) {
    score -= 8;
    notes.push("Many label classes found; review first if labels are sparse.");
  } else {
    score -= 20;
    notes.push("Need at least two label classes.");
  }

  if (avgTextLength >= 4 && avgTextLength <= 180) {
    score += 12;
    notes.push("Text length looks compatible with the tested DistilBERT path.");
  } else if (avgTextLength > 180) {
    score -= 8;
    notes.push("Long text may need a separate setup before tuning.");
  } else {
    score -= 8;
    notes.push("Text looks very short; signal may be limited.");
  }

  if (["sentiment", "intent", "feedback", "documents"].includes(workload)) {
    score += 8;
  }

  score = Math.max(5, Math.min(96, score));
  const level: FitLevel = score >= 78 ? "strong" : score >= 55 ? "okay" : "review";

  return {
    level,
    score,
    title: level === "strong" ? "Strong fit" : level === "okay" ? "Worth testing" : "Review first",
    summary:
      level === "strong"
        ? "This looks close to the text-classifier workloads where HD-Basin has the strongest evidence."
        : level === "okay"
          ? "This can be tested, but the report should be treated as exploratory."
          : "This may need manual review before charging for a GPU run.",
    rows: usableRows.length,
    labels: labels.size,
    avgTextLength,
    notes: notes.slice(0, 3),
  };
}

function App() {
  const [budget, setBudget] = useState<Budget>(12);
  const [step, setStep] = useState<Step>("configure");
  const [workload, setWorkload] = useState<Workload>("sentiment");
  const [fileName, setFileName] = useState("product_feedback_labeled.csv");
  const [sampleText, setSampleText] = useState("");
  const [textColumn, setTextColumn] = useState("text");
  const [labelColumn, setLabelColumn] = useState("label");
  const [apiMessage, setApiMessage] = useState("Use Sample, then Run free demo to create a no-payment test job.");
  const [isSubmitting, setIsSubmitting] = useState(false);
  const [activeJob, setActiveJob] = useState<ActiveJob | null>(null);
  const [jobSummary, setJobSummary] = useState<JobSummary | null>(null);
  const [reportPayload, setReportPayload] = useState<ReportPayload | null>(null);

  const selectedPlan = plans[budget];
  const selectedWorkload = workloads[workload];
  const fit = useMemo(
    () => analyzeDatasetSample(sampleText, textColumn, labelColumn, workload),
    [sampleText, textColumn, labelColumn, workload],
  );
  const ready = fileName.trim() && textColumn.trim() && labelColumn.trim();
  const progress = useMemo(() => {
    if (jobSummary?.status === "succeeded") return 100;
    if (jobSummary?.status === "failed" || jobSummary?.status === "canceled") return 100;
    if (jobSummary?.status === "running") return 75;
    if (jobSummary?.status === "queued") return 45;
    if (step === "queued") return 35;
    if (step === "checkout") return 44;
    return 18;
  }, [jobSummary?.status, step]);
  const progressLabel = useMemo(() => {
    if (jobSummary?.status === "succeeded") return "Complete";
    if (jobSummary?.status === "failed") return "Failed";
    if (jobSummary?.status === "canceled") return "Canceled";
    if (jobSummary?.status === "running") return "Running on A100";
    if (jobSummary?.status === "queued" || step === "queued") return "Free demo job queued";
    if (step === "checkout") return "Checkout ready";
    return "Ready to test";
  }, [jobSummary?.status, step]);

  async function postApi<T>(path: string, body: unknown): Promise<T> {
    const response = await fetch(path, {
      method: "POST",
      headers: { "content-type": "application/json" },
      body: JSON.stringify(body),
    });
    const data = (await response.json().catch(() => ({}))) as T & { error?: string };
    if (!response.ok) {
      throw new Error(data.error || `Request failed with status ${response.status}`);
    }
    return data;
  }

  async function getApi<T>(path: string): Promise<T> {
    const response = await fetch(path);
    const data = (await response.json().catch(() => ({}))) as T & { error?: string };
    if (!response.ok) {
      throw new Error(data.error || `Request failed with status ${response.status}`);
    }
    return data;
  }

  useEffect(() => {
    if (!activeJob) return;

    let cancelled = false;
    let timer: number | undefined;
    const tokenQuery = `token=${encodeURIComponent(activeJob.token)}`;

    async function pollJob() {
      try {
        const status = await getApi<{ job: JobSummary }>(`/api/jobs/${activeJob.id}?${tokenQuery}`);
        if (cancelled) return;

        setJobSummary(status.job);
        if (status.job.status === "succeeded") {
          const report = await getApi<ReportPayload>(`/api/jobs/${activeJob.id}/report?${tokenQuery}`);
          if (!cancelled) {
            setReportPayload(report);
            setApiMessage("Report is ready below.");
          }
          return;
        }

        if (status.job.status === "failed" || status.job.status === "canceled") {
          setApiMessage(status.job.failure_reason || `Job ${status.job.status}.`);
          return;
        }

        setApiMessage(status.job.status === "running" ? "A100 worker is running the demo job..." : "Demo job is waiting for the A100 worker...");
        timer = window.setTimeout(pollJob, 4000);
      } catch (error) {
        if (!cancelled) {
          setApiMessage(error instanceof Error ? error.message : "Could not load job status.");
          timer = window.setTimeout(pollJob, 6000);
        }
      }
    }

    pollJob();
    return () => {
      cancelled = true;
      if (timer) window.clearTimeout(timer);
    };
  }, [activeJob]);

  async function handlePrimaryAction() {
    if (!ready) return;
    setIsSubmitting(true);
    setApiMessage("Checking dataset shape...");
    try {
      const payload = { fileName, sampleText, textColumn, labelColumn, workload, budget };
      if (step === "configure") {
        const validation = await postApi<{ rowsInSample: number; labelClasses: number }>("/api/datasets/validate", payload);
        setApiMessage(`Backend validation passed: ${validation.rowsInSample} sampled rows, ${validation.labelClasses} label classes.`);
        setStep("checkout");
        return;
      }
      const checkout = await postApi<{ checkoutUrl?: string; jobId: string }>("/api/checkout/session", payload);
      if (checkout.checkoutUrl) {
        window.location.href = checkout.checkoutUrl;
        return;
      }
      setApiMessage(`Job ${checkout.jobId} created, but no checkout URL was returned.`);
      setStep("queued");
    } catch (error) {
      setApiMessage(error instanceof Error ? error.message : "Backend request failed.");
    } finally {
      setIsSubmitting(false);
    }
  }

  async function handleDemoAction() {
    if (!ready) return;
    setIsSubmitting(true);
    setApiMessage("Creating a free demo job...");
    setJobSummary(null);
    setReportPayload(null);
    try {
      const payload = { fileName, sampleText, textColumn, labelColumn, workload, budget };
      const demo = await postApi<{ jobId: string; token: string; statusUrl: string; message: string }>("/api/demo/session", payload);
      setStep("queued");
      setActiveJob({ id: demo.jobId, token: demo.token });
      setApiMessage(`${demo.message} Job: ${demo.jobId}.`);
    } catch (error) {
      setApiMessage(error instanceof Error ? error.message : "Free demo request failed.");
    } finally {
      setIsSubmitting(false);
    }
  }

  return (
    <main className="app">
      <header className="topbar">
        <a className="brand" href="#top" aria-label="HD-Basin home">
          <span className="brand-mark">HD</span>
          <span>HD-Basin</span>
        </a>
        <nav aria-label="Primary navigation">
          <a href="#flow">Flow</a>
          <a href="#evidence">Evidence</a>
          <a href="#pricing">Pricing</a>
        </nav>
        <a className="primary compact" href="#runner">
          Start
          <ChevronRight size={15} aria-hidden="true" />
        </a>
      </header>

      <section className="hero" id="top">
        <div className="hero-copy">
          <p className="eyebrow">Text classifier tuning on one GPU</p>
          <h1>Lower Loss, Clearer Reports</h1>
          <p className="subhead">Test whether HD-Basin can find better settings for your labeled text dataset.</p>
          <p>
            Upload a labeled text dataset. HD-Basin searches a fixed tuning space and returns a
            report showing the best settings, whether validation loss improved, the baseline comparison, and GPU time used.
          </p>
          <div className="hero-actions">
            <a className="primary" href="#runner">
              Upload CSV
              <Upload size={17} aria-hidden="true" />
            </a>
            <a className="ghost" href="#evidence">
              See evidence
              <BarChart3 size={17} aria-hidden="true" />
            </a>
          </div>
        </div>

        <section className="runner-card" id="runner" aria-label="Classifier tuning demo">
          <div className="basin-preview compact-basin" aria-hidden="true">
            <div className="basin-surface">
              <span className="basin-point start">start</span>
              <span className="basin-point best">best</span>
            </div>
          </div>

          <div className="runner-head">
            <div>
              <h2>Upload, test, report.</h2>
              <p>Current demo path: DistilBERT text classifier.</p>
            </div>
            <Lock size={18} aria-hidden="true" />
          </div>

          <div className="dropzone" aria-label="Dataset upload dropzone">
            <Upload size={21} aria-hidden="true" />
            <div>
              <strong>{fileName || "Drop a CSV or JSONL file"}</strong>
              <span>CSV or JSONL with one text column and one label column.</span>
            </div>
            <label className="file-control primary-file">
              Choose
              <input
                type="file"
                accept=".csv,.jsonl"
                onChange={(event) => {
                  const file = event.currentTarget.files?.[0];
                  if (file) {
                    setFileName(file.name);
                    file
                      .slice(0, 450_000)
                      .text()
                      .then(setSampleText)
                      .catch(() => setSampleText(""));
                  }
                }}
              />
            </label>
            <button
              className="sample-control"
              type="button"
              onClick={() => {
                setFileName("hdbasin_sample_feedback.csv");
                setSampleText(sampleDataset);
                setTextColumn("text");
                setLabelColumn("label");
                setWorkload("feedback");
              }}
            >
              Sample
            </button>
          </div>

          <div className="form-grid">
            <label>
              Text column
              <input value={textColumn} onChange={(event) => setTextColumn(event.target.value)} />
            </label>
            <label>
              Label column
              <input value={labelColumn} onChange={(event) => setLabelColumn(event.target.value)} />
            </label>
            <label className="wide">
              Classifier type
              <select value={workload} onChange={(event) => setWorkload(event.target.value as Workload)}>
                {(Object.keys(workloads) as Workload[]).map((key) => (
                  <option key={key} value={key}>
                    {workloads[key].label}
                  </option>
                ))}
              </select>
            </label>
          </div>

          <FitCheck fit={fit} />

          <div className="budget-row" aria-label="Trial budget selector">
            {(Object.keys(plans) as Array<`${Budget}`>).map((value) => {
              const numeric = Number(value) as Budget;
              return (
                <button
                  key={value}
                  className={budget === numeric ? "budget selected" : "budget"}
                  type="button"
                  onClick={() => setBudget(numeric)}
                >
                  <span>{plans[numeric].label}</span>
                  <strong>{plans[numeric].trials}</strong>
                  {plans[numeric].badge && <em>{plans[numeric].badge}</em>}
                  <small>${plans[numeric].price}</small>
                </button>
              );
            })}
          </div>

          <div className="action-strip">
            <div>
              <span>{selectedWorkload.label}</span>
              <strong>${selectedPlan.price}.00</strong>
              <small>{plans[budget].trials}, estimated {selectedPlan.runtime}</small>
            </div>
            <button className="primary" type="button" disabled={!ready || isSubmitting} onClick={handlePrimaryAction}>
              {isSubmitting ? "Working" : step === "configure" ? "Continue" : "Checkout"}
              {step === "checkout" ? <CreditCard size={16} aria-hidden="true" /> : <ChevronRight size={16} aria-hidden="true" />}
            </button>
          </div>

          <button className="demo-button" type="button" disabled={!ready || isSubmitting} onClick={handleDemoAction}>
            Run free demo
            <Gauge size={16} aria-hidden="true" />
          </button>

          <p className="api-message" role="status">
            {apiMessage}
          </p>

          {(jobSummary || reportPayload) && <ResultPanel job={jobSummary} reportPayload={reportPayload} />}

          <div className="run-state" aria-label={`Run progress ${progress}%`}>
            <span>
              {progressLabel}
              <strong>{progress}%</strong>
            </span>
            <div role="progressbar" aria-valuemin={0} aria-valuemax={100} aria-valuenow={progress}>
              <i style={{ width: `${progress}%` }} />
            </div>
          </div>
        </section>
      </section>

      <section className="flow-section" id="flow">
        <SectionTitle title="A simple path to a useful classifier" body="Three steps, one fixed tuning path, and a report your customer can understand." />
        <div className="flow-grid">
          <FlowStep icon={<Upload size={20} />} title="Upload" body="CSV or JSONL with text and labels." />
          <FlowStep icon={<Waves size={20} />} title="Search" body="HD-Basin tries a fixed number of settings and tracks validation loss." />
          <FlowStep icon={<FileText size={20} />} title="Report" body="Best setting, lower-or-higher loss, baseline comparison, and GPU time." />
        </div>
      </section>

      <section className="evidence-section" id="evidence">
        <div className="evidence-panel">
          <div>
            <SectionTitle title="Honest evidence, simple claim" body="Latest A100 market test: 7 workloads, 5 seeds, 8 optimizers, 2,400 evaluations." />
            <div className="evidence-stats">
              <Stat label="HD-Basin had lower loss" value="4 of 7 tests" />
              <Stat label="Best current fit" value="Text tasks" />
              <Stat label="Typical result" value="0.2% lower loss" />
            </div>
          </div>
          <div className="basin-card" aria-label="Loss basin visual">
            <div className="contour-map">
              <span />
            </div>
            <p>HD-Basin is strongest so far on low-budget text-classifier tuning. Vision results are not ready for broad claims.</p>
          </div>
        </div>
      </section>

      <section className="benchmark-section" id="benchmarks">
        <SectionTitle
          title="Benchmark results in plain English"
          body="Lower validation loss is better. Each card compares HD-Basin with the best standard baseline at the same trial budget."
        />
        <div className="benchmark-grid" aria-label="Public benchmark results">
          {benchmarkRows.map((row) => (
            <BenchmarkCard key={row.name} {...row} />
          ))}
        </div>
        <p className="benchmark-note">
          Clear public claim: HD-Basin currently looks most promising for low-budget text classifier tuning. We should not claim it beats every optimizer or every dataset type.
        </p>
      </section>

      <section className="compute-section" id="compute-savings">
        <SectionTitle
          title="Same quality, less compute"
          body="The more commercial test: can HD-BasinFlow reach baseline-quality validation loss with fewer evaluations or less GPU-time proxy?"
        />
        <div className="compute-stats" aria-label="Matched quality compute savings summary">
          {computeSavingsStats.map((item) => (
            <article className="compute-stat-card" key={item.label}>
              <strong>{item.value}</strong>
              <span>{item.label}</span>
              <p>{item.body}</p>
            </article>
          ))}
        </div>
        <div className="compute-grid" aria-label="Target savings comparison cards">
          {computeSavingsRows.map((row) => (
            <ComputeSavingsCard key={`${row.workload}-${row.baseline}`} {...row} />
          ))}
        </div>
        <p className="benchmark-note">
          Source: 20-seed A100 target-savings table. Pass means HD-BasinFlow reached within 1% of baseline median final loss and saved at least 20% of evaluations.
        </p>
      </section>

      <section className="pricing-section" id="pricing">
        <SectionTitle title="Simple one-GPU pricing" body="Start with a small search. Larger plans run more trials and take longer." />
        <div className="pricing-grid">
          {(Object.keys(plans) as Array<`${Budget}`>).map((value) => {
            const numeric = Number(value) as Budget;
            return (
              <article className={budget === numeric ? "price-card selected" : "price-card"} key={value}>
                {plans[numeric].badge && <em>{plans[numeric].badge}</em>}
                <span>{plans[numeric].label}</span>
                <strong>${plans[numeric].price}</strong>
                <p>{plans[numeric].trials} plus a downloadable result report. {plans[numeric].bestFor}.</p>
                <button className={budget === numeric ? "primary" : "ghost"} type="button" onClick={() => setBudget(numeric)}>
                  {budget === numeric ? "Selected" : "Select"}
                </button>
              </article>
            );
          })}
        </div>
      </section>

      <section className="future-section" id="future">
        <SectionTitle
          title="Future work"
          body="The public demo starts narrow on purpose. These are the next directions for teams that need deeper integration or stricter data control."
        />
        <div className="future-grid">
          <article className="future-card">
            <h3>Internal API access</h3>
            <p>
              A developer API for teams that want to submit tuning jobs from their own apps,
              dashboards, notebooks, or backend systems instead of using the public upload page.
            </p>
          </article>
          <article className="future-card">
            <h3>Private company workflows</h3>
            <p>
              Options for sensitive data, including private storage, locked-down deployments,
              audit logs, and company-controlled environments where datasets do not need to move through a public demo flow.
            </p>
          </article>
          <article className="future-card">
            <h3>Broader optimization targets</h3>
            <p>
              Better algorithms for finding low-loss regions across more problem types, moving beyond
              the current text-classifier path into wider ML, AI, and scientific optimization workloads.
            </p>
          </article>
        </div>
      </section>

      <footer className="footer">
        <span>HD-Basin</span>
        <a href="/docs/hdbasin_market_hf_evidence_report.pdf">Evidence PDF</a>
      </footer>
    </main>
  );
}

function SectionTitle({ title, body }: { title: string; body: string }) {
  return (
    <div className="section-title">
      <h2>{title}</h2>
      <p>{body}</p>
    </div>
  );
}

function FlowStep({ icon, title, body }: { icon: React.ReactNode; title: string; body: string }) {
  return (
    <article className="flow-step">
      <span aria-hidden="true">{icon}</span>
      <h3>{title}</h3>
      <p>{body}</p>
    </article>
  );
}

function FitCheck({ fit }: { fit: FitResult }) {
  return (
    <section className={`fit-check ${fit.level}`} aria-label="HD-Basin fit check">
      <div className="fit-score">
        <strong>{fit.score}</strong>
        <span>fit score</span>
      </div>
      <div>
        <h3>{fit.title}</h3>
        <p>{fit.summary}</p>
        <dl>
          <div>
            <dt>Rows</dt>
            <dd>{fit.rows || "sample"}</dd>
          </div>
          <div>
            <dt>Labels</dt>
            <dd>{fit.labels || "-"}</dd>
          </div>
          <div>
            <dt>Avg words</dt>
            <dd>{fit.avgTextLength || "-"}</dd>
          </div>
        </dl>
        <ul>
          {fit.notes.map((note) => (
            <li key={note}>{note}</li>
          ))}
        </ul>
      </div>
    </section>
  );
}

function ResultPanel({ job, reportPayload }: { job: JobSummary | null; reportPayload: ReportPayload | null }) {
  const status = job?.status ?? "queued";
  const resultStatus = typeof reportPayload?.result?.status === "string" ? reportPayload.result.status : "";
  const isDemoPipelineReport = resultStatus === "demo_pipeline_passed" || resultStatus === "smoke_succeeded";
  const isRealTrainingReport = resultStatus === "real_training_succeeded";
  const improvement =
    typeof reportPayload?.result?.validation_loss_improvement_pct === "number"
      ? reportPayload.result.validation_loss_improvement_pct
      : null;
  const statusText =
    status === "succeeded"
      ? "Report ready"
      : status === "running"
        ? "A100 worker running"
        : status === "failed"
          ? "Run failed"
          : "Waiting in queue";
  const resultLine =
    status === "succeeded"
      ? "The worker finished. Open the result box below to review the report."
      : status === "running"
        ? "The A100 worker has claimed the job and is writing the report."
        : status === "failed"
          ? "The worker could not finish this job."
          : "The job is saved and waiting for the worker.";

  return (
    <section className={`result-panel ${status}`} aria-label="Run results">
      <div className="result-head">
        <div>
          <span>{statusText}</span>
          <h3>{job?.file_name ?? "Demo job"}</h3>
          <p>{resultLine}</p>
        </div>
        <strong>{status}</strong>
      </div>

      {job && (
        <dl className="result-meta">
          <div>
            <dt>Job</dt>
            <dd>{job.id.slice(0, 8)}</dd>
          </div>
          <div>
            <dt>Trials</dt>
            <dd>{job.trial_budget}</dd>
          </div>
          <div>
            <dt>Worker</dt>
            <dd>{job.worker_id || "-"}</dd>
          </div>
          <div>
            <dt>Best loss</dt>
            <dd>{job.best_validation_loss ?? "-"}</dd>
          </div>
        </dl>
      )}

      {job?.failure_reason && <p className="result-error">{job.failure_reason}</p>}

      <details className="result-dropdown" open={status === "succeeded"}>
        <summary>
          <span>{status === "succeeded" ? "Open results" : "Waiting for results"}</span>
          <strong>{status === "succeeded" ? "Ready" : "Not ready yet"}</strong>
        </summary>

        {reportPayload?.report ? (
          <>
            {isRealTrainingReport && (
              <div className="result-explainer">
                <h4>Real training result</h4>
                <strong>{improvement !== null && improvement >= 0 ? "HD-Basin found a lower-loss setting" : "Real A100 training completed"}</strong>
                <p>
                  This run trained DistilBERT on a small AG News demo workload and compared HD-BasinFlow with standard baselines.
                  Lower validation loss is better.
                </p>
                <ul>
                  <li>HD-Basin loss: {reportPayload.result?.hdbasin_best_validation_loss ?? "not available"}</li>
                  <li>Best baseline loss: {reportPayload.result?.baseline_best_validation_loss ?? "not available"}</li>
                  <li>Improvement: {improvement !== null ? `${improvement.toFixed(2)}%` : "not available"}</li>
                </ul>
              </div>
            )}
            {isDemoPipelineReport && (
              <div className="result-explainer">
                <h4>Free demo result</h4>
                <strong>Pipeline test passed</strong>
                <p>
                  This proves the website, job queue, A100 worker, result storage, and result display are connected.
                  It does not train a real classifier yet.
                </p>
                <ul>
                  <li>Upload accepted</li>
                  <li>A100 worker completed the job</li>
                  <li>Report returned to the website</li>
                </ul>
              </div>
            )}
            <div className="report-box">
              <h4>{isDemoPipelineReport || isRealTrainingReport ? "Detailed report" : "Report"}</h4>
              <pre>{reportPayload.report}</pre>
            </div>
          </>
        ) : (
          <p className="result-wait">Results will appear here automatically when the worker finishes.</p>
        )}

        {(reportPayload?.result || reportPayload?.bestConfig) && (
          <div className="artifact-grid">
            {reportPayload.result && (
              <div>
                <h4>Result JSON</h4>
                <pre>{JSON.stringify(reportPayload.result, null, 2)}</pre>
              </div>
            )}
            {reportPayload.bestConfig && (
              <div>
                <h4>Best config</h4>
                <pre>{JSON.stringify(reportPayload.bestConfig, null, 2)}</pre>
              </div>
            )}
          </div>
        )}
      </details>
    </section>
  );
}

function BenchmarkCard({
  name,
  task,
  change,
  note,
  result,
  margin,
}: {
  name: string;
  task: string;
  change: string;
  note: string;
  result: string;
  margin: number;
}) {
  const barWidth = Math.min(100, Math.max(8, (margin / 18) * 100));
  return (
    <article className={`benchmark-card ${result}`}>
      <div>
        <h3>{name}</h3>
        <p>{task}</p>
      </div>
      <strong>{change}</strong>
      <div className="benchmark-meter" aria-hidden="true">
        <i style={{ width: `${barWidth}%` }} />
      </div>
      <span>{note}</span>
    </article>
  );
}

function ComputeSavingsCard({
  workload,
  baseline,
  evalSaved,
  wallSaved,
  note,
}: {
  workload: string;
  baseline: string;
  evalSaved: string;
  wallSaved: string;
  note: string;
}) {
  const isCaveat = note.toLowerCase().includes("not a claim");
  return (
    <article className={isCaveat ? "compute-card caveat" : "compute-card"}>
      <div>
        <h3>{workload}</h3>
        <p>vs {baseline}</p>
      </div>
      <dl>
        <div>
          <dt>Eval saved</dt>
          <dd>{evalSaved}</dd>
        </div>
        <div>
          <dt>Wall saved</dt>
          <dd>{wallSaved}</dd>
        </div>
      </dl>
      <span>{note}</span>
    </article>
  );
}

function Stat({ label, value }: { label: string; value: string }) {
  return (
    <div className="stat">
      <strong>{value}</strong>
      <span>{label}</span>
    </div>
  );
}

createRoot(document.getElementById("root")!).render(
  <StrictMode>
    <App />
  </StrictMode>,
);