Upload folder using huggingface_hub

README.md

@@ -11,6 +11,15 @@ pinned: false
   <h1>HeartFlow OS</h1>
   <p><strong>Cardiovascular Telemetry & Edge MLOps Engine</strong></p>
   
+  <p>
+    <a href="https://huggingface.co/spaces/IDKHowToCodeFR/HEARTFLOW_OS" target="_blank">
+      <img src="https://img.shields.io/badge/🤗_HuggingFace-Live_Demo-FFD21E.svg?style=for-the-badge" alt="Hugging Face Space" />
+    </a>
+    <a href="https://heartflow-os.vercel.app" target="_blank">
+      <img src="https://img.shields.io/badge/🌐_Website-Live_App-black.svg?style=for-the-badge&logo=vercel" alt="Live Website" />
+    </a>
+  </p>
+
   <p>
     <img src="https://img.shields.io/badge/Next.js-16+-black.svg?style=for-the-badge&logo=next.js" alt="Next.js" />
     <img src="https://img.shields.io/badge/React-19-61DAFB.svg?style=for-the-badge&logo=react&logoColor=black" alt="React" />

frontend/src/app/architecture/page.tsx

@@ -17,14 +17,34 @@ const fadeUp = {
   show: { opacity: 1, y: 0, transition: { duration: 0.8, ease: easeFluid } }
 };
 
+const BlueprintNode = ({ title, desc, pulse = false }: { title: string, desc: string, pulse?: boolean }) => (
+  <motion.div 
+    whileHover={{ x: 5 }}
+    className="border border-slate/30 bg-ink/50 p-4 relative group hover:border-hazard transition-colors cursor-default"
+  >
+    {pulse && (
+      <div className="absolute right-4 top-1/2 -translate-y-1/2 flex items-center justify-center">
+        <motion.div 
+          animate={{ scale: [1, 2, 1], opacity: [0.8, 0, 0.8] }} 
+          transition={{ duration: 1.5, repeat: Infinity, ease: "easeInOut" }}
+          className="absolute w-3 h-3 bg-hazard rounded-full"
+        />
+        <div className="w-1.5 h-1.5 bg-hazard rounded-full relative z-10" />
+      </div>
+    )}
+    <div className="text-[10px] text-slate tracking-[0.1em] mb-1 uppercase">{desc}</div>
+    <div className="text-[14px] text-white font-bold tracking-tight uppercase">{title}</div>
+  </motion.div>
+);
+
 export default function Architecture() {
   return (
-    <main className="min-h-[100dvh] bg-canvas-cream flex flex-col font-mono selection:bg-hazard selection:text-white pb-16">
+    <main className="min-h-[100dvh] bg-canvas-cream flex flex-col font-mono selection:bg-hazard selection:text-white pb-16 overflow-x-hidden">
       <motion.div 
         variants={staggerContainer}
         initial="hidden"
         animate="show"
-        className="max-w-[1000px] mx-auto w-full px-4 md:px-8 py-8 md:py-16 flex-1 flex flex-col"
+        className="max-w-[1200px] mx-auto w-full px-4 md:px-8 py-8 md:py-16 flex-1 flex flex-col"
       >
         <motion.header variants={fadeUp} className="mb-8 md:mb-12 border-b-4 border-ink pb-8 flex justify-between items-end">
           <div>
@@ -37,40 +57,44 @@ export default function Architecture() {
           </div>
         </motion.header>
 
-        <motion.div variants={fadeUp} className="border-2 border-ink bg-white p-6 md:p-8 mb-8 hover:border-hazard transition-colors">
-          <h2 className="text-[16px] md:text-[18px] font-sans font-black tracking-[-0.02em] uppercase text-ink mb-6 border-b-2 border-ink pb-4">
-            [ 01 ] Client Plane (Frontend)
-          </h2>
-          <p className="text-[13px] md:text-[14px] text-slate uppercase leading-relaxed mb-4">
-            Engineered using Next.js 16 (App Router). The UI adheres to an Industrial Brutalist aesthetic utilizing hard grids, monochromatic blueprints, and high-contrast hazard states. A global Telemetry Provider manages native WebSocket streams with exponential backoff and UI-level auto-reconnection, rendered via hardware-accelerated SVG paths.
-          </p>
-        </motion.div>
+        {/* Live Hardware Blueprint */}
+        <motion.div variants={fadeUp} className="w-full bg-ink p-8 md:p-12 mb-16 relative font-mono overflow-hidden border-2 border-ink shadow-[8px_8px_0px_0px_rgba(242,56,39,1)]">
+          {/* Animated Scanning Line */}
+          <motion.div 
+            animate={{ top: ["-10%", "110%"] }}
+            transition={{ duration: 8, ease: "linear", repeat: Infinity }}
+            className="absolute left-0 right-0 h-32 bg-gradient-to-b from-transparent via-hazard/10 to-transparent pointer-events-none z-0"
+          />
+          
+          <div className="relative z-10 flex flex-col lg:flex-row gap-12 lg:gap-16 items-stretch">
+            
+            {/* Stage 1: Ingestion */}
+            <div className="flex-1 flex flex-col gap-6 border-l-2 border-slate/30 pl-6 relative">
+              <div className="absolute -left-[5px] top-0 w-2 h-2 bg-hazard" />
+              <div className="text-[10px] text-hazard tracking-[0.2em] font-bold">PHASE_01 // INGESTION</div>
+              <BlueprintNode title="PATIENT SENSORS" desc="60Hz Telemetry Stream" pulse />
+              <BlueprintNode title="CLIENT UI" desc="Next.js 16 / React 19" />
+              <BlueprintNode title="CSV BATCH" desc="Offline Dataset Upload" />
+            </div>
 
-        <motion.div variants={fadeUp} className="border-2 border-ink bg-white p-6 md:p-8 mb-8 hover:border-hazard transition-colors">
-          <h2 className="text-[16px] md:text-[18px] font-sans font-black tracking-[-0.02em] uppercase text-ink mb-6 border-b-2 border-ink pb-4">
-            [ 02 ] Core Plane (Backend)
-          </h2>
-          <p className="text-[13px] md:text-[14px] text-slate uppercase leading-relaxed mb-4">
-            Built on FastAPI (Python 3.10+) maximizing async throughput. Full-stack orchestration is containerized via Docker Compose. A state-machine driven data simulator generates correlated, volatile telemetry streams. Storage employs aiosqlite for non-blocking database writes to track historical classifications without stalling the event loop.
-          </p>
-        </motion.div>
+            {/* Stage 2: Processing */}
+            <div className="flex-1 flex flex-col gap-6 border-l-2 border-slate/30 pl-6 relative">
+              <div className="absolute -left-[5px] top-0 w-2 h-2 bg-hazard" />
+              <div className="text-[10px] text-hazard tracking-[0.2em] font-bold">PHASE_02 // CORE_ROUTER</div>
+              <BlueprintNode title="FASTAPI SERVER" desc="Async WebSockets & REST" pulse />
+              <BlueprintNode title="SQLITE DB" desc="Aiosqlite Async Storage" />
+            </div>
 
-        <motion.div variants={fadeUp} className="border-2 border-ink bg-white p-6 md:p-8 mb-8 hover:border-hazard transition-colors">
-          <h2 className="text-[16px] md:text-[18px] font-sans font-black tracking-[-0.02em] uppercase text-ink mb-6 border-b-2 border-ink pb-4">
-            [ 03 ] Intelligence Pipeline (MLOps)
-          </h2>
-          <p className="text-[13px] md:text-[14px] text-slate uppercase leading-relaxed mb-4">
-            Clinical precision is achieved via a 5-model soft-voting ensemble (RF, KNN, SVM, LogReg, MLP). The `/retrain` pipeline implements a strict CI/CD gate: it evaluates newly uploaded datasets against a test holdout, and automatically rolls back if the F1-score degrades. Winning models are logged to a JSON registry and hot-swapped globally.
-          </p>
-        </motion.div>
+            {/* Stage 3: Inference & Compilation */}
+            <div className="flex-1 flex flex-col gap-6 border-l-2 border-slate/30 pl-6 relative">
+              <div className="absolute -left-[5px] top-0 w-2 h-2 bg-hazard" />
+              <div className="text-[10px] text-hazard tracking-[0.2em] font-bold">PHASE_03 // EDGE_INTELLIGENCE</div>
+              <BlueprintNode title="SCIKIT-LEARN" desc="Soft-Voting Ensemble" pulse />
+              <BlueprintNode title="AST COMPILER" desc="Python to C Transpiler" />
+              <BlueprintNode title="ESP32 HARDWARE" desc="Zero-Dep C Firmware" pulse />
+            </div>
 
-        <motion.div variants={fadeUp} className="border-2 border-ink bg-white p-6 md:p-8 mb-8 hover:border-hazard transition-colors">
-          <h2 className="text-[16px] md:text-[18px] font-sans font-black tracking-[-0.02em] uppercase text-ink mb-6 border-b-2 border-ink pb-4">
-            [ 04 ] Edge Compilation (TinyML)
-          </h2>
-          <p className="text-[13px] md:text-[14px] text-slate uppercase leading-relaxed mb-4">
-            The backend transpiles trained SciKit-Learn tree models directly into standalone zero-dependency C-headers (`model.h`). Floating-point thresholds are quantized to INT8, shrinking payload footprints by ~75%. A PlatformIO firmware wrapper handles deployment to ESP32/Arduino, guaranteed by an automated structural integrity testing script.
-          </p>
+          </div>
         </motion.div>
       </motion.div>
     </main>

frontend/src/app/layout.tsx

@@ -56,6 +56,8 @@ export default function RootLayout({ children }: { children: React.ReactNode })
               © 2026 HEARTFLOW_OS. TELEMETRY_SYS.
             </div>
             <div className="flex flex-wrap items-center justify-center gap-4 md:gap-8">
+              <a href="https://huggingface.co/spaces/IDKHowToCodeFR/HEARTFLOW_OS" target="_blank" rel="noopener noreferrer" className="text-[12px] font-bold tracking-[0.05em] uppercase text-ink hover:text-hazard transition-colors">HUGGING_FACE</a>
+              <a href="https://heartflow-os.vercel.app" target="_blank" rel="noopener noreferrer" className="text-[12px] font-bold tracking-[0.05em] uppercase text-ink hover:text-hazard transition-colors">LIVE_APP</a>
               <Link href="/architecture" className="text-[12px] font-bold tracking-[0.05em] uppercase text-ink hover:text-hazard transition-colors">ARCHITECTURE.MD</Link>
               <a href={`${process.env.NEXT_PUBLIC_API_URL || "http://localhost:8000"}/docs`} target="_blank" rel="noopener noreferrer" className="text-[12px] font-bold tracking-[0.05em] uppercase text-ink hover:text-hazard transition-colors">API_DOCS</a>
               <a href="https://github.com/IDKHowToCodeFR/HEARTFLOW_OS" target="_blank" rel="noopener noreferrer" className="text-[12px] font-bold tracking-[0.05em] uppercase text-ink hover:text-hazard transition-colors">GITHUB_REPO</a>