Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8" /> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0" /> | |
| <meta | |
| name="description" | |
| content="Innomium Ember — ultra-light YOLO fire, smoke, and extinguisher detection with 90% accuracy. Built for safety monitoring and edge vision." | |
| /> | |
| <title>Innomium Ember — Fire Detection</title> | |
| <link rel="icon" href="innomium_icon.svg" type="image/svg+xml" /> | |
| <link rel="preconnect" href="https://fonts.googleapis.com" /> | |
| <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin /> | |
| <link | |
| href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap" | |
| rel="stylesheet" | |
| /> | |
| <link rel="stylesheet" href="style.css" /> | |
| </head> | |
| <body> | |
| <header class="site-header"> | |
| <div class="container header-inner"> | |
| <a class="brand" href="#top"> | |
| <img src="innomium_icon.svg" alt="Innomium" class="brand-logo" width="40" height="40" /> | |
| <span class="brand-text"> | |
| <strong>Innomium</strong> | |
| <small>Ember</small> | |
| </span> | |
| </a> | |
| <nav class="nav"> | |
| <a href="#performance">Performance</a> | |
| <a href="#capabilities">Capabilities</a> | |
| <a href="#use-cases">Use Cases</a> | |
| <a href="#demo" class="nav-cta">Live Demo</a> | |
| </nav> | |
| </div> | |
| </header> | |
| <main id="top"> | |
| <section class="hero"> | |
| <div class="container hero-grid"> | |
| <div class="hero-copy"> | |
| <p class="eyebrow">Innomium Vision · Edge YOLO</p> | |
| <h1> | |
| Fire & smoke detection<br /> | |
| <span class="accent-text">built for safety.</span> | |
| </h1> | |
| <p class="hero-lead"> | |
| Ember is Innomium's cutting-edge YOLO model for fire, smoke, and fire | |
| extinguisher detection — very light, very strong, and tuned for warehouses, | |
| industrial sites, and mission-critical safety monitoring with 90% accuracy. | |
| </p> | |
| <div class="hero-actions"> | |
| <a href="#demo" class="btn btn-primary">Try Live Demo</a> | |
| <a href="#performance" class="btn btn-secondary">See Results</a> | |
| </div> | |
| <dl class="hero-stats"> | |
| <div> | |
| <dt>Accuracy</dt> | |
| <dd>90%</dd> | |
| </div> | |
| <div> | |
| <dt>Model size</dt> | |
| <dd>9.8 MB</dd> | |
| </div> | |
| <div> | |
| <dt>Runtime</dt> | |
| <dd>Edge / Browser</dd> | |
| </div> | |
| </dl> | |
| </div> | |
| <div class="hero-visual"> | |
| <div class="hero-visual-card"> | |
| <img | |
| src="example_output.png" | |
| alt="Ember detecting fire, smoke, and fire extinguisher across a safety scene" | |
| class="hero-image" | |
| /> | |
| <div class="hero-visual-caption"> | |
| <span class="pill pill--live">Live detection</span> | |
| <span>All 3 classes · Fire, smoke, extinguisher</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <section id="performance" class="section"> | |
| <div class="container"> | |
| <div class="section-head section-head--center"> | |
| <p class="eyebrow">Proven performance</p> | |
| <h2>From raw scene to classified hazards.</h2> | |
| <p class="section-lead"> | |
| Ember detects fire, smoke, and fire extinguishers with per-class NMS, | |
| smoke merging, and color-prior filters — keeping alerts accurate even in | |
| complex industrial scenes. | |
| </p> | |
| </div> | |
| <div class="compare-grid"> | |
| <figure class="compare-card"> | |
| <figcaption> | |
| <span class="compare-label">Input</span> | |
| <span class="compare-meta">Raw camera frame</span> | |
| </figcaption> | |
| <div class="compare-frame"> | |
| <img | |
| src="example_input.png" | |
| alt="Bonfire and fire-safety drill — input frame without detections" | |
| loading="lazy" | |
| /> | |
| </div> | |
| </figure> | |
| <div class="compare-arrow" aria-hidden="true"> | |
| <svg width="24" height="24" viewBox="0 0 24 24" fill="none"> | |
| <path | |
| d="M5 12H19M19 12L13 6M19 12L13 18" | |
| stroke="currentColor" | |
| stroke-width="1.75" | |
| stroke-linecap="round" | |
| stroke-linejoin="round" | |
| /> | |
| </svg> | |
| </div> | |
| <figure class="compare-card compare-card--highlight"> | |
| <figcaption> | |
| <span class="compare-label">Ember output</span> | |
| <span class="compare-meta">Class labels + confidence</span> | |
| </figcaption> | |
| <div class="compare-frame"> | |
| <img | |
| src="example_output.png" | |
| alt="Same scene with Ember fire, smoke, and extinguisher detections" | |
| loading="lazy" | |
| /> | |
| </div> | |
| </figure> | |
| </div> | |
| <div class="performance-notes"> | |
| <article class="note-card"> | |
| <h3>Per-class precision</h3> | |
| <p> | |
| Separate NMS per class prevents smoke plumes from suppressing fire | |
| flames or extinguisher detections in overlapping regions. | |
| </p> | |
| </article> | |
| <article class="note-card"> | |
| <h3>Smoke merge & fire suppress</h3> | |
| <p> | |
| Fragmented smoke boxes merge into coherent plumes, while nested fire | |
| duplicates are suppressed to reduce false alerts. | |
| </p> | |
| </article> | |
| <article class="note-card"> | |
| <h3>Edge-ready ONNX</h3> | |
| <p> | |
| A compact ~9.8 MB model deploys on safety cameras, drones, and | |
| in-browser demos without a GPU farm. | |
| </p> | |
| </article> | |
| </div> | |
| </div> | |
| </section> | |
| <section id="capabilities" class="section section--muted"> | |
| <div class="container"> | |
| <div class="section-head"> | |
| <p class="eyebrow">Capabilities</p> | |
| <h2>Safety intelligence, without the overhead.</h2> | |
| </div> | |
| <div class="feature-grid"> | |
| <article class="feature-card"> | |
| <div class="feature-icon" aria-hidden="true"> | |
| <svg viewBox="0 0 24 24" fill="none"><path d="M12 22C16.97 22 21 17.97 21 13C21 8.03 12 2 12 2C12 2 3 8.03 3 13C3 17.97 7.03 22 12 22Z" stroke="currentColor" stroke-width="1.75" stroke-linejoin="round"/><path d="M12 18C14.21 18 16 16.21 16 14C16 11.5 12 8 12 8C12 8 8 11.5 8 14C8 16.21 9.79 18 12 18Z" stroke="currentColor" stroke-width="1.75"/></svg> | |
| </div> | |
| <h3>3 hazard classes</h3> | |
| <p> | |
| Detects fire, smoke, and fire extinguisher with class-aware remapping and | |
| per-class post-processing tuned for validator scoring. | |
| </p> | |
| </article> | |
| <article class="feature-card"> | |
| <div class="feature-icon" aria-hidden="true"> | |
| <svg viewBox="0 0 24 24" fill="none"><path d="M13 2L4 14H11L10 22L20 10H13L13 2Z" stroke="currentColor" stroke-width="1.75" stroke-linejoin="round"/></svg> | |
| </div> | |
| <h3>Ultra-light ONNX</h3> | |
| <p> | |
| ~9.8 MB footprint runs on CPU via ONNX Runtime Web in the browser or on | |
| edge hardware at the camera. | |
| </p> | |
| </article> | |
| <article class="feature-card"> | |
| <div class="feature-icon" aria-hidden="true"> | |
| <svg viewBox="0 0 24 24" fill="none"><path d="M4 12H20M4 12L8 8M4 12L8 16" stroke="currentColor" stroke-width="1.75" stroke-linecap="round"/><circle cx="16" cy="12" r="3" stroke="currentColor" stroke-width="1.75"/></svg> | |
| </div> | |
| <h3>False-positive control</h3> | |
| <p> | |
| Color-prior filters, per-class hard NMS, and confidence thresholds reduce | |
| spurious detections in complex scenes. | |
| </p> | |
| </article> | |
| <article class="feature-card"> | |
| <div class="feature-icon" aria-hidden="true"> | |
| <svg viewBox="0 0 24 24" fill="none"><rect x="5" y="10" width="14" height="10" rx="2" stroke="currentColor" stroke-width="1.75"/><path d="M8 10V8C8 5.8 9.8 4 12 4C14.2 4 16 5.8 16 8V10" stroke="currentColor" stroke-width="1.75" stroke-linecap="round"/></svg> | |
| </div> | |
| <h3>Privacy-first demo</h3> | |
| <p> | |
| Inference runs entirely in your browser. Frames never leave your device — | |
| ideal for regulated safety and surveillance pilots. | |
| </p> | |
| </article> | |
| </div> | |
| </div> | |
| </section> | |
| <section id="use-cases" class="section"> | |
| <div class="container"> | |
| <div class="section-head"> | |
| <p class="eyebrow">Use cases</p> | |
| <h2>Where Ember delivers.</h2> | |
| </div> | |
| <div class="usecase-grid"> | |
| <article class="usecase-card"> | |
| <span class="usecase-tag">Industrial</span> | |
| <h3>Warehouses & factories</h3> | |
| <p>Early fire and smoke detection in storage facilities, production floors, and loading bays.</p> | |
| </article> | |
| <article class="usecase-card"> | |
| <span class="usecase-tag">Commercial</span> | |
| <h3>Retail & offices</h3> | |
| <p>Monitor kitchens, server rooms, and common areas for fire hazards and smoke buildup.</p> | |
| </article> | |
| <article class="usecase-card"> | |
| <span class="usecase-tag">Outdoor</span> | |
| <h3>Wildfire & perimeter</h3> | |
| <p>Detect flames and smoke plumes along forest edges, campsites, and remote perimeters.</p> | |
| </article> | |
| <article class="usecase-card"> | |
| <span class="usecase-tag">Safety</span> | |
| <h3>Extinguisher compliance</h3> | |
| <p>Locate fire extinguishers in camera views for safety audits and equipment verification.</p> | |
| </article> | |
| </div> | |
| </div> | |
| </section> | |
| <section id="demo" class="section section--muted"> | |
| <div class="container"> | |
| <div class="section-head section-head--center"> | |
| <p class="eyebrow">Interactive demo</p> | |
| <h2>Upload your own scene.</h2> | |
| <p class="section-lead"> | |
| Run the production ONNX model in your browser — per-class NMS and color filters included. | |
| </p> | |
| </div> | |
| <div class="demo-shell"> | |
| <div class="demo-toolbar"> | |
| <div class="demo-status"> | |
| <span id="status-dot" class="status-dot status-dot--loading"></span> | |
| <span id="status">Initializing model...</span> | |
| </div> | |
| <div class="demo-metrics"> | |
| <div class="metric-pill"> | |
| <span class="metric-pill-label">Detected</span> | |
| <span id="count-value" class="metric-pill-value">—</span> | |
| </div> | |
| <div class="metric-pill"> | |
| <span class="metric-pill-label">Latency</span> | |
| <span id="latency-value" class="metric-pill-value">—</span> | |
| </div> | |
| </div> | |
| </div> | |
| <label id="dropzone" class="dropzone" for="file-input"> | |
| <input id="file-input" type="file" accept="image/*" hidden /> | |
| <div class="dropzone-inner"> | |
| <div class="dropzone-icon" aria-hidden="true"> | |
| <svg viewBox="0 0 24 24" fill="none"><path d="M12 16V4M12 4L8 8M12 4L16 8M4 17V18C4 19.1 4.9 20 6 20H18C19.1 20 20 19.1 20 18V17" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"/></svg> | |
| </div> | |
| <p><strong>Drop an image here</strong> or click to browse</p> | |
| <p class="dropzone-hint">PNG, JPG, WEBP — bonfires, industrial, and outdoor safety scenes</p> | |
| </div> | |
| </label> | |
| <div class="demo-actions"> | |
| <button id="detect-btn" type="button" class="btn btn-primary" disabled>Run Detection</button> | |
| <button id="clear-btn" type="button" class="btn btn-secondary" disabled>Clear</button> | |
| <button id="sample-btn" type="button" class="btn btn-secondary">Load Example</button> | |
| </div> | |
| <div class="canvas-grid"> | |
| <figure class="canvas-card"> | |
| <figcaption>Input</figcaption> | |
| <div class="canvas-frame"> | |
| <canvas id="input-canvas"></canvas> | |
| <div class="canvas-placeholder">No image loaded</div> | |
| </div> | |
| </figure> | |
| <figure class="canvas-card canvas-card--highlight"> | |
| <figcaption> | |
| Output | |
| <span id="output-badge" class="output-badge hidden">0 hazards</span> | |
| </figcaption> | |
| <div class="canvas-frame"> | |
| <canvas id="output-canvas"></canvas> | |
| <div class="canvas-placeholder">Awaiting detection</div> | |
| </div> | |
| </figure> | |
| </div> | |
| <details class="json-panel"> | |
| <summary>Detection JSON</summary> | |
| <pre id="json-output">[]</pre> | |
| </details> | |
| </div> | |
| </div> | |
| </section> | |
| <section class="cta-section"> | |
| <div class="container cta-card"> | |
| <img src="innomium_icon.svg" alt="" class="cta-logo" width="56" height="56" aria-hidden="true" /> | |
| <div class="cta-copy"> | |
| <h2>Deploy Ember in your safety stack.</h2> | |
| <p> | |
| Very light. Very strong. 90% accuracy on hazard detection. Multi-class | |
| fire and smoke detection for warehouses, industrial sites, and edge | |
| deployments that need reliable alerts. | |
| </p> | |
| </div> | |
| <div class="cta-actions"> | |
| <a href="#demo" class="btn btn-primary">Try the Demo</a> | |
| <a | |
| href="https://huggingface.co/innomium" | |
| class="btn btn-secondary" | |
| target="_blank" | |
| rel="noopener noreferrer" | |
| >Hugging Face</a> | |
| </div> | |
| </div> | |
| </section> | |
| </main> | |
| <footer class="site-footer"> | |
| <div class="container footer-inner"> | |
| <div class="footer-brand"> | |
| <img src="innomium_icon.svg" alt="Innomium" width="28" height="28" /> | |
| <span>© 2026 Innomium</span> | |
| </div> | |
| <p class="footer-note">Ember runs locally in your browser · No data uploaded</p> | |
| </div> | |
| </footer> | |
| <script type="module" src="main.js"></script> | |
| </body> | |
| </html> | |