🐛 Fix: Resolve backend 500 on Vercel by implementing FastAPI and syncing dependencies

backend/agents.py

@@ -185,14 +185,13 @@ async def _call_amd_vllm(
         "temperature": 0.1,  # Low temperature for deterministic structured output
     }
 
-    # Candidate endpoints
     base_url = AMD_INFERENCE_URL.rstrip("/")
+    if not base_url.startswith("http"):
+        base_url = f"http://{base_url}"
+    if "/proxy/8000" not in base_url:
+        base_url = f"{base_url}/proxy/8000"
     candidates = [
-        f"{base_url}/proxy/8000/v1/chat/completions",
-        f"{base_url}/proxy/8001/v1/chat/completions",
-        f"{base_url}:8000/v1/chat/completions",
-        f"{base_url}:8001/v1/chat/completions",
-        f"{base_url}/v1/chat/completions",
+        f"{base_url}/v1/chat/completions"
     ]
 
     headers = {}
@@ -297,6 +296,16 @@ async def run_pipeline(
         ),
     )
 
+    # 5) Social (text only)
+    social = await _run_agent(
+        "social",
+        SOCIAL_SYSTEM,
+        (
+            f"INSPECTOR_REPORT:\n{json.dumps(inspector['parsed'])}\n\n"
+            f"REPORTER_SUMMARY:\n{json.dumps(reporter['parsed'])}"
+        ),
+    )
+
     model_label = AMD_MODEL_NAME
     return {
         "agents": [
@@ -304,6 +313,7 @@ async def run_pipeline(
             {"role": "diagnostician", "label": "Diagnostician Agent", "model": model_label, "output": diagnostician},
             {"role": "action",        "label": "Action Agent",        "model": model_label, "output": action},
             {"role": "reporter",      "label": "Reporter Agent",      "model": model_label, "output": reporter},
+            {"role": "social",        "label": "Social Agent",        "model": model_label, "output": social},
         ],
     }
 

backend/app.py

@@ -1,20 +1,22 @@
-"""
-ForgeSight — Hugging Face Spaces Gradio backend.
-Wraps the multi-agent pipeline so the React frontend can call it
-via the Gradio Client JS SDK or plain HTTP POST to /api/<fn_name>.
-
-Deploy: push this repo to a HF Space (Gradio SDK).
-"""
 import os
-import json
-import math
-import time
 import uuid
-import gradio as gr
+import time
+import math
+import httpx
+import json
+import tempfile
+import asyncio
 from datetime import datetime, timezone
+from typing import List, Optional
+
+import gradio as gr
+from fastapi import FastAPI, Request
+from fastapi.responses import JSONResponse, FileResponse
+from fastapi.middleware.cors import CORSMiddleware
+from fpdf import FPDF
 
-# ── Import the agent pipeline ───────────────────────────────────────────────
-from agents import run_pipeline, generate_social_post
+# Import our agent pipeline
+from agents import run_pipeline, AMD_INFERENCE_URL, AMD_MODEL_NAME, AMD_INFERENCE_TOKEN, generate_social_post
 
 # ── MONGODB PERSISTENCE (optional, falls back to in-memory) ──────────────────
 MONGO_URL = os.getenv("MONGO_URL", "")
@@ -30,10 +32,17 @@ async def _init_db():
     """Attempt to connect to MongoDB; silently fall back to in-memory if unavailable."""
     global _db, _inspections_col, _journal_col
     if not MONGO_URL:
+        print("⚠️ MONGO_URL not set – using in-memory storage")
         return
     try:
         from motor.motor_asyncio import AsyncIOMotorClient
-        client = AsyncIOMotorClient(MONGO_URL, serverSelectionTimeoutMS=4000)
+        import certifi
+        client = AsyncIOMotorClient(
+            MONGO_URL, 
+            serverSelectionTimeoutMS=5000,
+            tlsCAFile=certifi.where()
+        )
+        # Verify connection
         await client.admin.command("ping")
         _db = client["forgesight"]
         _inspections_col = _db["inspections"]
@@ -66,52 +75,154 @@ async def _db_list_journal(limit=50) -> list:
         return await cursor.to_list(length=limit)
     return _mem_journal[:limit]
 
+# ── HELPERS ───────────────────────────────────────────────────────────────────
 
 def _now_iso() -> str:
     return datetime.now(timezone.utc).isoformat()
 
+def _summarize(inspection: dict) -> dict:
+    agents = inspection.get("transcript", {}).get("agents", [])
+    inspector = next((a for a in agents if a["role"] == "inspector"), None)
+    reporter  = next((a for a in agents if a["role"] == "reporter"), None)
+    action    = next((a for a in agents if a["role"] == "action"), None)
 
-# ── 1. Inspection endpoint ──────────────────────────────────────────────────
-async def inspect(image_base64: str, notes: str = "", product_spec: str = "", source: str = "upload"):
-    """Run the 4-agent inspection pipeline on a base64 image."""
-    # Strip potential data-URI prefix
-    if "," in image_base64 and image_base64.strip().startswith("data:"):
-        image_base64 = image_base64.split(",", 1)[1]
+    inspector_out = (inspector or {}).get("output", {}).get("parsed", {}) or {}
+    reporter_out  = (reporter  or {}).get("output", {}).get("parsed", {}) or {}
+    action_out    = (action    or {}).get("output", {}).get("parsed", {}) or {}
 
-    transcript = await run_pipeline(
-        image_base64=image_base64,
-        notes=notes or "",
-        product_spec=product_spec or "",
-    )
+    defects = inspector_out.get("defects") or []
+    return {
+        "id":           inspection["id"],
+        "created_at":   inspection["created_at"],
+        "verdict":      inspector_out.get("verdict", "warn"),
+        "confidence":   float(inspector_out.get("confidence", 0.0) or 0.0),
+        "headline":     (reporter_out.get("headline") or inspector_out.get("observation", "Inspection complete"))[:60],
+        "defect_count": len(defects) if isinstance(defects, list) else 0,
+        "priority":     action_out.get("priority", "P2"),
+        "source":       inspection.get("source", "upload"),
+    }
 
-    inspection = {
-        "id": str(uuid.uuid4()),
-        "created_at": _now_iso(),
-        "notes": notes or "",
-        "product_spec": product_spec or "",
-        "source": source or "upload",
-        "transcript": transcript,
+async def _seed_journal():
+    """Seed the journal with initial milestones (instant, no LLM calls)."""
+    existing = await _db_list_journal(1)
+    if existing:
+        return
+    seeds = [
+        {
+            "title": "Kickoff: ForgeSight on AMD Developer Cloud",
+            "body": "Spun up an MI300X instance on AMD Developer Cloud. First impression: zero CUDA-lock-in, ROCm + PyTorch just worked.",
+            "tags": ["kickoff", "amd", "rocm"],
+            "x_post": "🚀 ForgeSight is live! We've officially spun up an AMD Instinct MI300X instance on the Developer Cloud. Zero CUDA-lock-in, just raw ROCm power. #AMDHackathon #ROCm #AIatAMD @lablab @AIatAMD",
+            "linkedin_post": "We've officially kicked off ForgeSight for the AMD + lablab.ai Hackathon! We're leveraging the massive 192GB VRAM of the MI300X to build a production-ready QC pipeline. #AI #AMD #Engineering",
+        },
+        {
+            "title": "Multi-agent pipeline wired end-to-end",
+            "body": "Inspector → Diagnostician → Action → Reporter. Each agent produces strict JSON so hand-offs stay auditable.",
+            "tags": ["agents", "pipeline", "qwen"],
+            "x_post": "Our 4-agent pipeline is wired! Inspector → Diagnostician → Action → Reporter. Real-time vision reasoning on MI300X. #AIatAMD #AMDHackathon @lablab",
+            "linkedin_post": "Auditability is key in industrial QC. ForgeSight's multi-agent pipeline ensures every decision is grounded in structured data. #QualityControl #Agents",
+        },
+    ]
+    for s in seeds:
+        entry = {
+            "id": str(uuid.uuid4()),
+            "created_at": _now_iso(),
+            **s,
+        }
+        await _db_insert_journal(entry)
+
+# ── API LOGIC ─────────────────────────────────────────────────────────────────
+
+async def api_get_telemetry():
+    t = time.time()
+    status = "Connected"
+    error_msg = None
+    
+    # FOR HACKATHON DEMO: Simulated data for premium UI visuals
+    gpu_util      = 65 + 25 * math.sin(t / 4.0)
+    vram_used     = 142.0 + 10 * math.sin(t / 6.0)
+    tokens_per_sec = int(2700 + 300 * math.sin(t / 3.0))
+    power_w       = int(480 + 50 * math.sin(t / 5.0))
+
+    return {
+        "gpu_util_pct":   round(gpu_util, 1),
+        "vram_used_gb":   round(vram_used, 1),
+        "vram_total_gb":  192.0,
+        "temp_c":         round(64 + 4 * math.sin(t / 7.0), 1),
+        "power_watts":    power_w,
+        "tokens_per_sec": tokens_per_sec,
+        "device":         "AMD Instinct MI300X",
+        "status":         status,
+        "is_simulated":   True,
+        "persistence":    "MongoDB" if _inspections_col is not None else "In-Memory",
+        "ts":             _now_iso(),
     }
-    await _db_insert_inspection(inspection)
 
-    summary = _summarize(inspection)
-    return json.dumps({
-        "id": inspection["id"],
-        "created_at": inspection["created_at"],
-        "transcript": transcript,
-        "summary": summary,
-    })
+# ── FASTAPI SETUP ─────────────────────────────────────────────────────────────
 
+app = FastAPI(title="ForgeSight API")
 
-# ── 2. List inspections ─────────────────────────────────────────────────────
-async def list_inspections(limit: int = 50):
+app.add_middleware(
+    CORSMiddleware,
+    allow_origins=["*"],
+    allow_methods=["*"],
+    allow_headers=["*"],
+)
+
+@app.on_event("startup")
+async def startup_event():
+    await _init_db()
+    await _seed_journal()
+
+@app.get("/api")
+@app.get("/api/health")
+async def handle_health():
+    return {"status": "online", "service": "forgesight", "db": "connected" if _inspections_col is not None else "memory"}
+
+@app.get("/api/inspections")
+async def get_inspections(limit: int = 50):
     docs = await _db_list_inspections(limit)
     items = [_summarize(doc) for doc in docs]
-    return json.dumps({"items": items, "total": len(items)})
+    return {"items": items, "total": len(items)}
+
+@app.post("/api/inspections")
+async def create_inspection(request: Request):
+    data = await request.json()
+    image_base64 = data.get("image_base64", "")
+    notes = data.get("notes", "")
+    product_spec = data.get("product_spec", "")
+    source = data.get("source", "upload")
+
+    if image_base64 and "," in image_base64:
+        image_base64 = image_base64.split(",")[1]
+
+    transcript = await run_pipeline(image_base64, notes, product_spec)
 
+    inspection = {
+        "id":            str(uuid.uuid4()),
+        "created_at":    _now_iso(),
+        "notes":         notes or "",
+        "product_spec":  product_spec or "",
+        "source":        source or "upload",
+        "transcript":    transcript,
+    }
+    await _db_insert_inspection(inspection)
+    return inspection
+
+@app.get("/api/inspections/{inspection_id}")
+async def get_inspection(inspection_id: str):
+    inspection = None
+    if _inspections_col is not None:
+        inspection = await _inspections_col.find_one({"id": inspection_id}, {"_id": 0})
+    else:
+        inspection = next((i for i in _mem_inspections if i["id"] == inspection_id), None)
+    
+    if not inspection:
+        return JSONResponse({"detail": "Inspection not found"}, status_code=404)
+    return inspection
 
-# ── 3. Metrics ───────────────────────────────────────────────────────────────
-async def metrics():
+@app.get("/api/metrics")
+async def get_metrics():
     docs = await _db_list_inspections(500)
     total = len(docs)
     verdict_counts = {"pass": 0, "warn": 0, "fail": 0}
@@ -134,107 +245,50 @@ async def metrics():
 
     avg_conf = sum(confidences) / len(confidences) if confidences else 0.0
     top_defects = sorted(defect_type_counts.items(), key=lambda x: x[1], reverse=True)[:6]
-    quality_score = 0
-    if total > 0:
-        quality_score = round(100 * (verdict_counts["pass"] + 0.5 * verdict_counts["warn"]) / total)
+    quality_score = round(100 * (verdict_counts["pass"] + 0.5 * verdict_counts["warn"]) / total) if total > 0 else 100
 
-    return json.dumps({
+    return {
         "total_inspections": total,
         "verdict_counts": verdict_counts,
         "avg_confidence": round(avg_conf, 3),
         "top_defects": [{"type": t, "count": c} for t, c in top_defects],
         "quality_score": quality_score,
-    })
+    }
 
+@app.get("/api/telemetry")
+async def get_telemetry():
+    return await api_get_telemetry()
 
-# ── 4. Telemetry (simulated MI300X) ─────────────────────────────────────────
-async def telemetry():
-    t = time.time()
-    gpu_util = 62 + 30 * math.sin(t / 4.0)
-    vram_used = 88 + 20 * math.sin(t / 7.0)
-    tokens_per_sec = 2850 + 450 * math.sin(t / 3.0)
-    power_w = 620 + 80 * math.sin(t / 5.0)
-    temp_c = 58 + 7 * math.sin(t / 6.0)
-    return json.dumps({
-        "simulated": True,
-        "device": "AMD Instinct MI300X",
-        "gpu_util_pct": round(max(0, min(100, gpu_util)), 1),
-        "vram_used_gb": round(max(0, vram_used), 1),
-        "vram_total_gb": 192.0,
-        "tokens_per_sec": int(max(0, tokens_per_sec)),
-        "power_watts": int(max(0, power_w)),
-        "temp_c": round(max(0, temp_c), 1),
-        "ts": _now_iso(),
-    })
-
-
-# ── 5. Blueprint ────────────────────────────────────────────────────────────
-async def blueprint():
-    return json.dumps({
+@app.get("/api/blueprint")
+async def get_blueprint():
+    return {
         "stack": [
-            {
-                "layer": "Hardware",
-                "title": "AMD Instinct MI300X",
-                "detail": "192 GB HBM3 · 5.3 TB/s memory bandwidth · 8× GPU node",
-                "why": "Massive VRAM enables serving 70B-class Qwen-VL models without sharding.",
-            },
-            {
-                "layer": "Runtime",
-                "title": "ROCm 6.2",
-                "detail": "Open compute runtime · HIP · MIOpen · RCCL",
-                "why": "PyTorch + vLLM run natively on MI300X via ROCm.",
-            },
-            {
-                "layer": "Serving",
-                "title": "vLLM on ROCm",
-                "detail": "PagedAttention · continuous batching · OpenAI-compatible API",
-                "why": "High-throughput multimodal inference for the agent pipeline.",
-            },
-            {
-                "layer": "Model",
-                "title": "Qwen2-VL-72B (fine-tuned)",
-                "detail": "LoRA fine-tune on defect-image + work-order pairs via Optimum-AMD",
-                "why": "Domain-specialized vision reasoning beats zero-shot generic VLMs.",
-            },
-            {
-                "layer": "Agents",
-                "title": "Inspector → Diagnostician → Action → Reporter",
-                "detail": "Sequential multi-agent with structured JSON hand-offs",
-                "why": "Interpretable, auditable pipeline for industrial QC.",
-            },
-            {
-                "layer": "Product",
-                "title": "ForgeSight Console",
-                "detail": "React + FastAPI · live transcript · defect feed · build journal",
-                "why": "End-to-end demonstrable app shipped for the hackathon.",
-            },
-        ],
-        "finetune_recipe": {
-            "base_model": "Qwen/Qwen2-VL-72B-Instruct",
-            "dataset": "ForgeSight-QC-10K (proprietary defect-image ↔ work-order pairs)",
-            "method": "QLoRA r=64 · Optimum-AMD · bf16",
-            "hardware": "1× MI300X node (8 GPUs)",
-            "expected_wall_clock": "~6h for 3 epochs on 10K pairs",
-            "serve_with": "vLLM 0.6+ on ROCm",
-        },
-    })
-
+            {"layer": "Hardware", "title": "AMD Instinct MI300X", "detail": "192 GB HBM3 · 5.3 TB/s bandwidth", "why": "Enables massive VRAM pools for multimodal Qwen-VL."},
+            {"layer": "Runtime", "title": "ROCm 6.2", "detail": "Open compute stack · PyTorch 2.4", "why": "Native AMD acceleration without CUDA lock-in."},
+            {"layer": "Serving", "title": "vLLM", "detail": "PagedAttention · continuous batching", "why": "High-throughput serving for agentic chains."},
+            {"layer": "Model", "title": "Qwen2-VL-72B", "detail": "Fine-tuned for structural defects", "why": "Domain-specialized vision reasoning."},
+            {"layer": "Agents", "title": "Sequential Agentic Chain", "detail": "Structured JSON hand-offs", "why": "Auditability and reliability."},
+        ]
+    }
 
-# ── 6. Journal ──────────────────────────────────────────────────────────────
-async def journal_list():
-    docs = await _db_list_journal(50)
-    # Auto-seed if empty
-    if not docs:
+@app.get("/api/journal")
+async def list_journal():
+    items = await _db_list_journal(50)
+    if not items:
         await _seed_journal()
-        docs = await _db_list_journal(50)
-    return json.dumps({"items": docs, "total": len(docs)})
-
-
-async def journal_create(title: str, body: str, tags: str = ""):
-    tag_list = [t.strip() for t in tags.split(",") if t.strip()] if tags else []
+        items = await _db_list_journal(50)
+    return {"items": items, "total": len(items)}
+
+@app.post("/api/journal")
+async def create_journal(request: Request):
+    data = await request.json()
+    title = data.get("title", "")
+    body = data.get("body", "")
+    tags = data.get("tags", [])
+    
     try:
         social = await generate_social_post(title, body)
-    except Exception:
+    except:
         social = {"x_post": "", "linkedin_post": ""}
 
     entry = {
@@ -242,246 +296,28 @@ async def journal_create(title: str, body: str, tags: str = ""):
         "created_at": _now_iso(),
         "title": title,
         "body": body,
-        "tags": tag_list,
+        "tags": tags,
         "x_post": social.get("x_post", ""),
         "linkedin_post": social.get("linkedin_post", ""),
     }
     await _db_insert_journal(entry)
-    return json.dumps(entry)
+    return entry
 
+# ── GRADIO ADMIN CONSOLE ──────────────────────────────────────────────────────
 
-async def _seed_journal():
-    existing = await _db_list_journal(1)
-    if existing:
-        return
-    seeds = [
-        {
-            "title": "Kickoff: ForgeSight on AMD Developer Cloud",
-            "body": "Spun up an MI300X instance on AMD Developer Cloud. First impression: zero CUDA-lock-in, ROCm + PyTorch just worked. Targeting all three hackathon tracks with one agentic multimodal QC copilot.",
-            "tags": ["kickoff", "amd", "rocm"],
-        },
-        {
-            "title": "Multi-agent pipeline wired end-to-end",
-            "body": "Inspector → Diagnostician → Action → Reporter. Each agent produces strict JSON so hand-offs stay auditable. Running on Claude Sonnet 4.5 today, swapping to Qwen2-VL on MI300X next.",
-            "tags": ["agents", "pipeline", "qwen"],
-        },
-        {
-            "title": "Fine-tune recipe: QLoRA on Qwen2-VL with Optimum-AMD",
-            "body": "Drafted the LoRA fine-tune path for 10K defect-image ↔ work-order pairs. Expecting ~6h wall-clock on a single MI300X node. vLLM-ROCm will serve the result.",
-            "tags": ["fine-tuning", "qlora", "optimum-amd"],
-        },
-    ]
-    for s in seeds:
-        try:
-            social = await generate_social_post(s["title"], s["body"])
-        except Exception:
-            social = {"x_post": "", "linkedin_post": ""}
-        entry = {
-            "id": str(uuid.uuid4()),
-            "created_at": _now_iso(),
-            **s,
-            "x_post": social.get("x_post", ""),
-            "linkedin_post": social.get("linkedin_post", ""),
-        }
-        await _db_insert_journal(entry)
+def _dummy_run():
+    return "ForgeSight Admin active."
 
+with gr.Blocks(title="ForgeSight Admin") as demo:
+    gr.Markdown("# 🔍 ForgeSight Control Center")
+    gr.Markdown("FastAPI backend is serving the REST API. Gradio is for admin tasks.")
+    btn = gr.Button("Ping")
+    out = gr.Textbox()
+    btn.click(fn=_dummy_run, outputs=out)
 
-# ── Helpers ──────────────────────────────────────────────────────────────────
-def _summarize(inspection: dict) -> dict:
-    agents = inspection.get("transcript", {}).get("agents", [])
-    inspector = next((a for a in agents if a["role"] == "inspector"), None)
-    reporter = next((a for a in agents if a["role"] == "reporter"), None)
-    action = next((a for a in agents if a["role"] == "action"), None)
-
-    inspector_out = (inspector or {}).get("output", {}).get("parsed", {}) or {}
-    reporter_out = (reporter or {}).get("output", {}).get("parsed", {}) or {}
-    action_out = (action or {}).get("output", {}).get("parsed", {}) or {}
-
-    defects = inspector_out.get("defects") or []
-    return {
-        "id": inspection["id"],
-        "created_at": inspection["created_at"],
-        "verdict": inspector_out.get("verdict", "warn"),
-        "confidence": float(inspector_out.get("confidence", 0.0) or 0.0),
-        "headline": reporter_out.get("headline") or inspector_out.get("observation", "Inspection complete")[:60],
-        "defect_count": len(defects) if isinstance(defects, list) else 0,
-        "priority": action_out.get("priority", "P2"),
-        "source": inspection.get("source", "upload"),
-    }
-
-
-# ── Health / root check ─────────────────────────────────────────────────────
-async def health():
-    return json.dumps({
-        "service": "forgesight",
-        "status": "online",
-        "track": "AMD Hackathon — Tracks 1+2+3",
-        "runtime": "Hugging Face Spaces (Gradio)",
-    })
-
-
-# ── Build the Gradio app ────────────────────────────────────────────────────
-# Each gr.Interface becomes a named API endpoint at /api/<fn_name>
-# The React frontend calls these via fetch() to the HF Space URL.
-
-with gr.Blocks(title="ForgeSight — AMD MI300X QC Copilot") as demo:
-    gr.Markdown("# 🔍 ForgeSight — Multimodal QC Copilot")
-    gr.Markdown("Backend API for the ForgeSight React frontend. Powered by AMD Instinct MI300X + ROCm.")
-
-    # --- API-only endpoints (hidden UI, exposed as /api/...) ---
-
-    # Health check
-    health_btn = gr.Button("Health Check", visible=False)
-    health_out = gr.Textbox(visible=False)
-    health_btn.click(fn=health, inputs=[], outputs=health_out, api_name="health")
-
-    # Inspect
-    inspect_img = gr.Textbox(visible=False)
-    inspect_notes = gr.Textbox(visible=False)
-    inspect_spec = gr.Textbox(visible=False)
-    inspect_source = gr.Textbox(visible=False)
-    inspect_out = gr.Textbox(visible=False)
-    inspect_btn = gr.Button("Inspect", visible=False)
-    inspect_btn.click(
-        fn=inspect,
-        inputs=[inspect_img, inspect_notes, inspect_spec, inspect_source],
-        outputs=inspect_out,
-        api_name="inspect",
-    )
-
-    # List inspections
-    list_limit = gr.Number(visible=False, value=50)
-    list_out = gr.Textbox(visible=False)
-    list_btn = gr.Button("List", visible=False)
-    list_btn.click(fn=list_inspections, inputs=[list_limit], outputs=list_out, api_name="list_inspections")
-
-    # Metrics
-    metrics_out = gr.Textbox(visible=False)
-    metrics_btn = gr.Button("Metrics", visible=False)
-    metrics_btn.click(fn=metrics, inputs=[], outputs=metrics_out, api_name="metrics")
-
-    # Telemetry
-    telem_out = gr.Textbox(visible=False)
-    telem_btn = gr.Button("Telemetry", visible=False)
-    telem_btn.click(fn=telemetry, inputs=[], outputs=telem_out, api_name="telemetry")
-
-    # Blueprint
-    bp_out = gr.Textbox(visible=False)
-    bp_btn = gr.Button("Blueprint", visible=False)
-    bp_btn.click(fn=blueprint, inputs=[], outputs=bp_out, api_name="blueprint")
-
-    # Journal list
-    jl_out = gr.Textbox(visible=False)
-    jl_btn = gr.Button("Journal List", visible=False)
-    jl_btn.click(fn=journal_list, inputs=[], outputs=jl_out, api_name="journal_list")
-
-    # Journal create
-    jc_title = gr.Textbox(visible=False)
-    jc_body = gr.Textbox(visible=False)
-    jc_tags = gr.Textbox(visible=False)
-    jc_out = gr.Textbox(visible=False)
-    jc_btn = gr.Button("Journal Create", visible=False)
-    jc_btn.click(
-        fn=journal_create,
-        inputs=[jc_title, jc_body, jc_tags],
-        outputs=jc_out,
-        api_name="journal_create",
-    )
-
-    # --- Visible demo UI for HF Space visitors ---
-    with gr.Tab("🔬 Quick Inspect"):
-        gr.Markdown("Upload an image to run the 4-agent QC pipeline.")
-        with gr.Row():
-            with gr.Column():
-                demo_img = gr.Image(type="filepath", label="Product Image")
-                demo_notes = gr.Textbox(label="Operator Notes", placeholder="e.g. batch B-124, shift 2")
-                demo_spec = gr.Textbox(label="Product Spec", placeholder="e.g. aluminum 6061 bracket")
-                demo_run = gr.Button("🚀 Run Inspection", variant="primary")
-            with gr.Column():
-                demo_result = gr.JSON(label="Pipeline Result")
-
-        async def demo_inspect(img_path, notes, spec):
-            if not img_path:
-                return {"error": "Please upload an image"}
-            import base64
-            with open(img_path, "rb") as f:
-                b64 = base64.b64encode(f.read()).decode()
-            raw = await inspect(b64, notes or "", spec or "", "upload")
-            return json.loads(raw)
-
-        demo_run.click(fn=demo_inspect, inputs=[demo_img, demo_notes, demo_spec], outputs=demo_result)
-
-    with gr.Tab("📊 Status"):
-        gr.Markdown("### Service Status")
-        status_btn = gr.Button("Check Status")
-        status_out = gr.JSON()
-        async def check_status():
-            h = json.loads(await health())
-            m = json.loads(await metrics())
-            return {**h, **m}
-        status_btn.click(fn=check_status, inputs=[], outputs=status_out)
-    
-    with gr.Tab("📐 Architecture"):
-        gr.Markdown("### ForgeSight Agentic Pipeline Architecture")
-        gr.HTML("""
-        <div style="background: #0d0d10; padding: 20px; border: 1px solid #333; border-radius: 8px; font-family: sans-serif;">
-            <svg viewBox="0 0 800 400" xmlns="http://www.w3.org/2000/svg">
-                <!-- Data Flow -->
-                <rect x="50" y="150" width="120" height="60" rx="4" fill="#141416" stroke="#333" />
-                <text x="110" y="185" text-anchor="middle" fill="white" font-size="14">Image Upload</text>
-                
-                <path d="M 170 180 L 220 180" stroke="#ED1C24" stroke-width="2" marker-end="url(#arrow)" />
-                
-                <rect x="220" y="150" width="120" height="60" rx="4" fill="#ED1C24" stroke="#ED1C24" />
-                <text x="280" y="185" text-anchor="middle" fill="white" font-size="14" font-weight="bold">vLLM / MI300X</text>
-                
-                <path d="M 340 180 L 390 180" stroke="#ED1C24" stroke-width="2" marker-end="url(#arrow)" />
-                
-                <!-- Agents -->
-                <rect x="390" y="50" width="100" height="40" rx="4" fill="#141416" stroke="#ED1C24" />
-                <text x="440" y="75" text-anchor="middle" fill="white" font-size="12">Inspector</text>
-                
-                <rect x="390" y="120" width="100" height="40" rx="4" fill="#141416" stroke="#ED1C24" />
-                <text x="440" y="145" text-anchor="middle" fill="white" font-size="12">Diagnostician</text>
-                
-                <rect x="390" y="190" width="100" height="40" rx="4" fill="#141416" stroke="#ED1C24" />
-                <text x="440" y="215" text-anchor="middle" fill="white" font-size="12">Action</text>
-                
-                <rect x="390" y="260" width="100" height="40" rx="4" fill="#141416" stroke="#ED1C24" />
-                <text x="440" y="285" text-anchor="middle" fill="white" font-size="12">Reporter</text>
-                
-                <!-- Connections -->
-                <path d="M 440 90 L 440 120" stroke="#666" stroke-width="1" />
-                <path d="M 440 160 L 440 190" stroke="#666" stroke-width="1" />
-                <path d="M 440 230 L 440 260" stroke="#666" stroke-width="1" />
-                
-                <path d="M 490 155 L 550 155" stroke="#ED1C24" stroke-width="2" marker-end="url(#arrow)" />
-                
-                <rect x="550" y="130" width="150" height="100" rx="4" fill="#141416" stroke="#333" />
-                <text x="625" y="165" text-anchor="middle" fill="white" font-size="14">MongoDB Archival</text>
-                <text x="625" y="190" text-anchor="middle" fill="#666" font-size="12">Persistence Layer</text>
-                
-                <defs>
-                    <marker id="arrow" markerWidth="10" markerHeight="10" refX="0" refY="3" orient="auto" markerUnits="strokeWidth">
-                        <path d="M0,0 L0,6 L9,3 z" fill="#ED1C24" />
-                    </marker>
-                </defs>
-            </svg>
-        </div>
-        """)
-        gr.Markdown("""
-        ### Stack Details
-        - **Hardware**: AMD Instinct MI300X (192GB VRAM)
-        - **Runtime**: ROCm 6.2 + PyTorch
-        - **Inference**: vLLM (OpenAI-compatible)
-        - **Persistence**: MongoDB Atlas
-        """)
-
+# Mount Gradio
+app = gr.mount_gradio_app(app, demo, path="/gradio")
 
 if __name__ == "__main__":
-    import asyncio
-    # Initialize DB before launching
-    loop = asyncio.get_event_loop()
-    loop.run_until_complete(_init_db())
-    
-    demo.launch(server_name="0.0.0.0", server_port=7860)
+    import uvicorn
+    uvicorn.run(app, host="0.0.0.0", port=7860)

backend/deploy_to_amd.sh

@@ -60,7 +60,7 @@ MONGO_URL=mongodb://localhost:27017
 DB_NAME=forgesight
 CORS_ORIGINS=*
 # Set your AMD vLLM inference server URL here:
-AMD_INFERENCE_URL=http://165.245.137.80
+AMD_INFERENCE_URL=http://129.212.189.214
 AMD_INFERENCE_TOKEN=DiPipPSZoxb96rcrP7X+B0N5mTTEzxU/ziesgI/Z2NPo9xPKM
 AMD_MODEL_NAME=Qwen/Qwen2-VL-7B-Instruct
 EOF

backend/requirements.txt

@@ -26,3 +26,6 @@ jq>=1.6.0
 typer>=0.9.0
 httpx>=0.27.0
 aiohttp>=3.9.0
+gradio==4.26.0
+fpdf==1.7.2
+certifi==2024.2.2

frontend/src/components/AgentTranscript.jsx

@@ -1,11 +1,12 @@
 import { useEffect, useState } from "react";
-import { Eye, Stethoscope, Wrench, FileText, CheckCircle2, AlertTriangle, XCircle, WifiOff } from "lucide-react";
+import { Eye, Stethoscope, Wrench, FileText, Share2, CheckCircle2, AlertTriangle, XCircle, WifiOff, Twitter, Linkedin } from "lucide-react";
 
 const ICONS = {
   inspector:    Eye,
   diagnostician: Stethoscope,
   action:       Wrench,
   reporter:     FileText,
+  social:       Share2,
 };
 
 const VERDICT_CONFIG = {
@@ -178,6 +179,50 @@ function ReporterOutput({ parsed }) {
   );
 }
 
+function SocialOutput({ parsed }) {
+  const xText = parsed?.x_post || "";
+  const linkedInText = parsed?.linkedin_post || "";
+  return (
+    <div className="grid md:grid-cols-2 gap-4">
+      <div className="p-4 border border-white/5 bg-[#141416] rounded-sm fs-rise">
+        <div className="flex items-center gap-2 mb-3">
+          <Twitter className="w-4 h-4 text-[#1DA1F2]" />
+          <span className="font-mono text-[10px] text-zinc-500 uppercase tracking-widest">X / Twitter</span>
+        </div>
+        <p className="text-xs text-zinc-300 font-mono leading-relaxed">{xText}</p>
+        <div className="mt-4 flex justify-end">
+          <button 
+            onClick={() => window.open(`https://twitter.com/intent/tweet?text=${encodeURIComponent(xText)}`, '_blank')}
+            className="font-mono text-[10px] px-2 py-1 border border-white/10 hover:bg-white/5 transition-colors text-zinc-400"
+          >
+            Draft Post
+          </button>
+        </div>
+      </div>
+      <div className="p-4 border border-white/5 bg-[#141416] rounded-sm fs-rise">
+        <div className="flex items-center gap-2 mb-3">
+          <Linkedin className="w-4 h-4 text-[#0A66C2]" />
+          <span className="font-mono text-[10px] text-zinc-500 uppercase tracking-widest">LinkedIn</span>
+        </div>
+        <div className="text-[11px] text-zinc-400 font-sans whitespace-pre-wrap leading-relaxed max-h-32 overflow-y-auto pr-2 custom-scrollbar">
+          {linkedInText}
+        </div>
+        <div className="mt-4 flex justify-end">
+          <button 
+            onClick={() => {
+              navigator.clipboard.writeText(linkedInText);
+              alert("LinkedIn text copied!");
+            }}
+            className="font-mono text-[10px] px-2 py-1 border border-white/10 hover:bg-white/5 transition-colors text-zinc-400"
+          >
+            Copy Text
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+}
+
 function AgentContent({ agent, isMock }) {
   const { role, output } = agent;
   const parsed = output?.parsed || {};
@@ -185,6 +230,7 @@ function AgentContent({ agent, isMock }) {
   if (role === "diagnostician") return <DiagnosticianOutput parsed={parsed} />;
   if (role === "action")        return <ActionOutput parsed={parsed} />;
   if (role === "reporter")      return <ReporterOutput parsed={parsed} />;
+  if (role === "social")        return <SocialOutput parsed={parsed} />;
   return <pre className="font-mono text-xs text-zinc-400 whitespace-pre-wrap break-words">{JSON.stringify(parsed, null, 2)}</pre>;
 }
 

frontend/src/index.css

@@ -49,16 +49,41 @@ code {
     }
 }
 
-@layer base {
-    [data-debug-wrapper="true"] {
-        display: contents !important;
+@layer utilities {
+    .glass {
+        @apply bg-white/[0.03] border border-white/10 backdrop-blur-md;
+    }
+    .fs-glow {
+        box-shadow: 0 0 20px -5px rgba(237, 28, 36, 0.2);
+    }
+    .fs-glow-intense {
+        box-shadow: 0 0 40px -10px rgba(237, 28, 36, 0.4);
+    }
+    .fs-label {
+        @apply font-mono text-[10px] uppercase tracking-widest text-zinc-500;
+    }
+    .fs-chip {
+        @apply font-mono text-[10px] px-2 py-0.5 border rounded-sm;
+    }
+    .fs-chip-pass {
+        @apply border-[#10B981]/30 text-[#10B981] bg-[#10B981]/5;
     }
-    [data-debug-wrapper="true"] > * {
-        margin-left: inherit; margin-right: inherit; margin-top: inherit; margin-bottom: inherit;
-        padding-left: inherit; padding-right: inherit; padding-top: inherit; padding-bottom: inherit;
-        column-gap: inherit; row-gap: inherit; gap: inherit;
-        border-left-width: inherit; border-right-width: inherit; border-top-width: inherit; border-bottom-width: inherit;
-        border-left-style: inherit; border-right-style: inherit; border-top-style: inherit; border-bottom-style: inherit;
-        border-left-color: inherit; border-right-color: inherit; border-top-color: inherit; border-bottom-color: inherit;
+    .fs-chip-fail {
+        @apply border-[#ED1C24]/30 text-[#ED1C24] bg-[#ED1C24]/5;
+    }
+    .custom-scrollbar::-webkit-scrollbar {
+        width: 4px;
+        height: 4px;
+    }
+    .custom-scrollbar::-webkit-scrollbar-track {
+        background: transparent;
+    }
+    .custom-scrollbar::-webkit-scrollbar-thumb {
+        background: #333;
+        border-radius: 10px;
+    }
+    .custom-scrollbar::-webkit-scrollbar-thumb:hover {
+        background: #ED1C24;
     }
 }
+

frontend/src/pages/Blueprint.jsx

@@ -1,18 +1,15 @@
 import { useEffect, useState, useRef } from "react";
 import mermaid from "mermaid";
 import { forgesight } from "@/lib/api";
-import { Cpu, HardDrive, Server, BookOpen, Bot, Rocket, ArrowDown } from "lucide-react";
+import { Cpu, HardDrive, Server, BookOpen, Bot, Rocket, ArrowRight, Terminal, Zap, ShieldCheck } from "lucide-react";
 
 const LAYER_ICONS = {
   Hardware: Cpu, Runtime: HardDrive, Serving: Server,
   Model: BookOpen, Agents: Bot, Product: Rocket,
 };
 
-const BLUEPRINT_IMG = "https://static.prod-images.emergentagent.com/jobs/d5829a2e-bc03-4880-adcd-73acc809a3bd/images/7251062dc0e36ea4218374b05cc959bc4e6c55a2cf4789a8a2cbc38db6392916.png";
-
 export default function Blueprint() {
   const [data, setData] = useState(null);
-
   const mermaidRef = useRef(null);
 
   useEffect(() => {
@@ -20,13 +17,17 @@ export default function Blueprint() {
     
     mermaid.initialize({
       theme: "dark",
+      startOnLoad: true,
+      securityLevel: "loose",
       themeVariables: {
         primaryColor: "#ED1C24",
         primaryTextColor: "#fff",
         primaryBorderColor: "#ED1C24",
-        lineColor: "#ED1C24",
+        lineColor: "#333",
         secondaryColor: "#141416",
         tertiaryColor: "#0A0A0A",
+        fontSize: "12px",
+        fontFamily: "JetBrains Mono",
       },
     });
   }, []);
@@ -40,127 +41,176 @@ export default function Blueprint() {
   const pipelineDiagram = `
 graph TD
     subgraph "Data Acquisition"
-        IMG[Image / Video] -->|Base64| API[FastAPI / Gradio]
+        IMG[Image Feed]
     end
 
-    subgraph "MI300X + ROCm Inference"
-        API -->|vLLM Request| VLLM[vLLM / Qwen2-VL]
-        VLLM -->|JSON Response| API
+    subgraph "AMD MI300X Cluster"
+        VLLM[vLLM Engine]
+        QWEN[Qwen2-VL-7B]
+        VLLM --- QWEN
     end
 
     subgraph "Agentic Pipeline"
-        I[Inspector] -->|Defects JSON| D[Diagnostician]
-        D -->|Root Cause JSON| A[Action]
-        A -->|Work Order JSON| R[Reporter]
-        R -->|Final Summary| UI[React UI]
+        I[Inspector Agent]
+        D[Diagnose Agent]
+        A[Action Agent]
+        R[Report Agent]
+        I --> D --> A --> R
     end
 
-    API -.-> I
-    classDef default font-family:Inter,color:#fff,fill:#0d0d10,stroke:#333
-    classDef accent fill:#ED1C24,stroke:#ED1C24,color:#fff
-    class VLLM,I,D,A,R accent
+    IMG --> I
+    I -.-> VLLM
+    D -.-> VLLM
+    A -.-> VLLM
+    R -.-> VLLM
+    
+    classDef device font-family:Inter,fill:#0d0d10,stroke:#333,color:#888
+    classDef compute fill:#ED1C24,stroke:#ED1C24,color:#fff,stroke-width:2px
+    classDef agent fill:#141416,stroke:#ED1C24,color:#fff,padding:10px
+    
+    class IMG device
+    class VLLM,QWEN compute
+    class I,D,A,R agent
   `;
 
   return (
-    <div className="mx-auto max-w-[1400px] px-6 py-10" data-testid="blueprint-page">
-      <header className="mb-10 grid md:grid-cols-2 gap-10">
-        <div>
-          <div className="fs-label mb-3">§ BLUEPRINT · DEPLOYMENT STACK</div>
-          <h1 className="font-display font-black tracking-tighter text-4xl md:text-5xl">
-            The exact stack<br />we ship on MI300X.
-          </h1>
-          <p className="text-zinc-400 mt-4 max-w-lg">
-            Six layers. Zero CUDA lock-in. Every choice is justified against the constraints
-            of a factory-floor deployment: latency, privacy, and model memory footprint.
-          </p>
-        </div>
-        <div className="border border-white/10 bg-[#0A0A0A] p-6 fs-corners flex items-center justify-center min-h-[300px]">
-          <div className="mermaid w-full text-center" ref={mermaidRef}>
-            {pipelineDiagram}
+    <div className="mx-auto max-w-[1400px] px-6 py-10 space-y-20" data-testid="blueprint-page">
+      {/* HERO SECTION */}
+      <header className="relative py-10 overflow-hidden">
+        <div className="absolute top-0 right-0 w-[600px] h-[600px] bg-[#ED1C24]/5 blur-[120px] rounded-full -translate-y-1/2 translate-x-1/4 -z-10" />
+        
+        <div className="grid lg:grid-cols-2 gap-16 items-center">
+          <div className="space-y-6">
+            <div className="inline-flex items-center gap-2 px-3 py-1 rounded-full border border-[#ED1C24]/30 bg-[#ED1C24]/5 text-[#ED1C24] font-mono text-[10px] tracking-widest uppercase">
+              <Zap className="w-3 h-3" /> System Architecture
+            </div>
+            <h1 className="font-display font-black tracking-tighter text-5xl md:text-7xl leading-[0.9]">
+              Built for <span className="text-[#ED1C24]">Pure Performance.</span>
+            </h1>
+            <p className="text-zinc-400 text-lg max-w-lg leading-relaxed">
+              ForgeSight is architected to leverage the massive memory bandwidth of the AMD MI300X. 
+              A six-layer stack designed for zero-latency industrial inference.
+            </p>
+            <div className="flex items-center gap-8 pt-4">
+              <Stat label="Hardware" value="MI300X" />
+              <Stat label="VRAM" value="192GB" />
+              <Stat label="Bandwidth" value="5.3 TB/s" />
+            </div>
+          </div>
+
+          <div className="glass p-8 fs-glow border-white/5 relative group">
+            <div className="absolute inset-0 bg-gradient-to-br from-[#ED1C24]/10 to-transparent opacity-0 group-hover:opacity-100 transition-opacity" />
+            <div className="mermaid w-full overflow-hidden" ref={mermaidRef}>
+              {pipelineDiagram}
+            </div>
           </div>
         </div>
       </header>
 
-      <section className="mb-16">
-        <div className="fs-label mb-6">Stack · top to bottom</div>
-        <div className="border-l-2 border-[#ED1C24] pl-0">
+      {/* STACK LAYERS */}
+      <section>
+        <div className="flex items-end justify-between mb-10">
+          <div>
+            <div className="fs-label mb-2">The Stack</div>
+            <h2 className="font-display font-black text-3xl tracking-tight">Top-to-Bottom Integration</h2>
+          </div>
+          <div className="text-zinc-500 font-mono text-xs hidden md:block">06 TOTAL LAYERS</div>
+        </div>
+
+        <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-6">
           {data?.stack?.map((layer, i) => {
             const Icon = LAYER_ICONS[layer.layer] || Cpu;
             return (
-              <div key={i} className="relative">
-                <div className="grid md:grid-cols-12 gap-6 border-b border-white/10 p-6 hover:bg-[#141416] transition-colors">
-                  <div className="md:col-span-2 flex items-start gap-3">
-                    <div className="w-9 h-9 border border-[#ED1C24] text-[#ED1C24] flex items-center justify-center">
-                      <Icon className="w-4 h-4" />
-                    </div>
-                    <div>
-                      <div className="fs-mono-small text-zinc-500">LAYER {String(i + 1).padStart(2, "0")}</div>
-                      <div className="font-display font-bold text-sm">{layer.layer}</div>
-                    </div>
-                  </div>
-                  <div className="md:col-span-4">
-                    <div className="font-display font-black tracking-tight text-xl">{layer.title}</div>
-                    <div className="font-mono text-xs text-zinc-500 mt-1">{layer.detail}</div>
+              <div key={i} className="glass p-6 group hover:border-[#ED1C24]/50 transition-all duration-500 fs-glow">
+                <div className="flex items-start justify-between mb-6">
+                  <div className="w-10 h-10 border border-[#ED1C24]/30 group-hover:border-[#ED1C24] text-[#ED1C24] flex items-center justify-center transition-colors">
+                    <Icon className="w-5 h-5" />
                   </div>
-                  <div className="md:col-span-6 text-sm text-zinc-400 leading-relaxed">{layer.why}</div>
+                  <span className="font-mono text-[10px] text-zinc-600">L{String(i + 1).padStart(2, "0")}</span>
+                </div>
+                <div className="space-y-2">
+                  <div className="fs-label text-zinc-500">{layer.layer}</div>
+                  <h3 className="font-display font-black text-xl group-hover:text-[#ED1C24] transition-colors">{layer.title}</h3>
+                  <p className="text-sm text-zinc-400 leading-relaxed min-h-[60px]">{layer.why}</p>
+                </div>
+                <div className="mt-6 pt-6 border-t border-white/5">
+                  <div className="font-mono text-[10px] text-zinc-500 mb-2 uppercase">Tech Spec</div>
+                  <div className="text-xs text-white font-mono bg-white/5 px-2 py-1 inline-block">{layer.detail}</div>
                 </div>
-                {i < (data?.stack?.length || 0) - 1 && (
-                  <div className="flex justify-start pl-4 -mt-2 -mb-2">
-                    <ArrowDown className="w-3.5 h-3.5 text-[#ED1C24]" />
-                  </div>
-                )}
               </div>
             );
           })}
         </div>
       </section>
 
+      {/* FINETUNE RECIPE */}
       {data?.finetune_recipe && (
-        <section className="border border-white/10 bg-[#141416] p-8 fs-corners" data-testid="finetune-recipe">
-          <div className="flex items-end justify-between mb-6 flex-wrap gap-3">
-            <div>
-              <div className="fs-label mb-2">§ FINE-TUNE RECIPE · TRACK 2</div>
-              <h2 className="font-display font-black tracking-tighter text-2xl md:text-3xl">QLoRA on Qwen2-VL</h2>
+        <section className="relative">
+          <div className="absolute inset-0 bg-[#ED1C24]/5 blur-[100px] -z-10" />
+          <div className="glass p-10 border-white/5 space-y-10">
+            <div className="flex items-start justify-between flex-wrap gap-6">
+              <div>
+                <div className="fs-label mb-2 flex items-center gap-2">
+                   <Terminal className="w-3 h-3" /> Training Protocol
+                </div>
+                <h2 className="font-display font-black tracking-tighter text-4xl">QLoRA Optimization</h2>
+                <p className="text-zinc-400 mt-2">Maximum efficiency training recipe for Qwen2-VL-7B.</p>
+              </div>
+              <div className="flex items-center gap-3">
+                <div className="px-4 py-2 bg-[#ED1C24] text-white font-display font-black text-sm tracking-tight">8× MI300X</div>
+                <div className="px-4 py-2 border border-white/10 text-white font-mono text-xs">BF16 MIXED</div>
+              </div>
+            </div>
+
+            <div className="grid md:grid-cols-3 gap-8">
+              <SpecItem icon={BookOpen} label="Base Model" value={data.finetune_recipe.base_model} />
+              <SpecItem icon={Server} label="Serving Engine" value={data.finetune_recipe.serve_with} />
+              <SpecItem icon={ShieldCheck} label="Compute Platform" value={data.finetune_recipe.hardware} />
+            </div>
+
+            <div className="relative">
+              <div className="absolute top-4 right-4 flex gap-2">
+                <div className="w-2 h-2 rounded-full bg-zinc-700" />
+                <div className="w-2 h-2 rounded-full bg-zinc-700" />
+                <div className="w-2 h-2 rounded-full bg-zinc-700" />
+              </div>
+              <pre className="font-mono text-[13px] leading-relaxed text-zinc-300 bg-[#050505] border border-white/10 p-8 pt-12 overflow-x-auto custom-scrollbar shadow-2xl">
+                <code className="text-blue-400"># ForgeSight ROCm Optimized Fine-tune</code>{"\n"}
+                <code className="text-[#ED1C24]">accelerate launch</code> --mixed_precision bf16 train_qlora.py \{"\n"}
+                {"  "}--base <span className="text-green-400">Qwen/Qwen2-VL-7B-Instruct</span> \{"\n"}
+                {"  "}--data <span className="text-green-400">forgesight/qc-industrial-v1</span> \{"\n"}
+                {"  "}--lora_r 64 --lora_alpha 128 \{"\n"}
+                {"  "}--epochs 3 --batch_size 4 --grad_accum 8{"\n\n"}
+                <code className="text-blue-400"># Production Inference</code>{"\n"}
+                <code className="text-[#ED1C24]">vllm serve</code> forgesight/qwen2-vl-mi300x \{"\n"}
+                {"  "}--enforce-eager --no-enable-chunked-prefill \{"\n"}
+                {"  "}--dtype bfloat16 --port 8000
+              </pre>
             </div>
-            <span className="fs-chip fs-chip-fail">MI300X · 8× GPU</span>
-          </div>
-          <div className="grid md:grid-cols-2 gap-0 border-t border-l border-white/10">
-            <Cell k="BASE MODEL" v={data.finetune_recipe.base_model} />
-            <Cell k="DATASET" v={data.finetune_recipe.dataset} />
-            <Cell k="METHOD" v={data.finetune_recipe.method} />
-            <Cell k="HARDWARE" v={data.finetune_recipe.hardware} />
-            <Cell k="WALL CLOCK" v={data.finetune_recipe.expected_wall_clock} />
-            <Cell k="SERVING" v={data.finetune_recipe.serve_with} />
           </div>
-          <pre className="mt-8 font-mono text-[12px] leading-relaxed text-zinc-300 bg-[#0A0A0A] border border-white/10 p-5 overflow-x-auto">{`# ForgeSight fine-tune — MI300X + ROCm
-docker run --device=/dev/kfd --device=/dev/dri \\
-  --security-opt seccomp=unconfined --group-add video \\
-  rocm/pytorch:latest
-
-pip install "transformers>=4.45" "peft" "bitsandbytes" \\
-            "optimum-amd" "datasets" "accelerate" "vllm"
-
-# train
-accelerate launch --mixed_precision bf16 train_qlora.py \\
-  --base Qwen/Qwen2-VL-72B-Instruct \\
-  --data forgesight/qc-10k \\
-  --lora_r 64 --lora_alpha 128 \\
-  --epochs 3 --batch_size 4 --grad_accum 8
-
-# serve
-vllm serve forgesight/qwen2-vl-72b-qc \\
-  --tensor-parallel-size 8 --dtype bfloat16 --port 8000`}</pre>
         </section>
       )}
     </div>
   );
 }
 
-function Cell({ k, v }) {
+function Stat({ label, value }) {
+  return (
+    <div className="space-y-1">
+      <div className="fs-label">{label}</div>
+      <div className="font-display font-black text-2xl text-white tracking-tighter">{value}</div>
+    </div>
+  );
+}
+
+function SpecItem({ icon: Icon, label, value }) {
   return (
-    <div className="border-r border-b border-white/10 p-5">
-      <div className="fs-label mb-2">{k}</div>
-      <div className="font-mono text-sm text-white break-words">{v}</div>
+    <div className="flex gap-4 items-center p-4 bg-white/[0.02] border border-white/5">
+      <Icon className="w-5 h-5 text-[#ED1C24]" />
+      <div>
+        <div className="fs-label mb-0.5 text-zinc-500">{label}</div>
+        <div className="font-mono text-xs text-white">{value}</div>
+      </div>
     </div>
   );
 }

vercel.json

@@ -6,7 +6,7 @@
             "framework": "create-react-app"
         },
         "backend": {
-            "entrypoint": "backend",
+            "entrypoint": "backend/app.py",
             "routePrefix": "/_/backend",
             "framework": "python"
         }