Spaces:
Running on Zero
Running on Zero
| <html lang="en"> | |
| <head> | |
| <meta charset="utf-8" /> | |
| <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, viewport-fit=cover" /> | |
| <meta name="theme-color" content="#05060a" /> | |
| <title>Iris</title> | |
| <link rel="stylesheet" href="/static/style.css" /> | |
| </head> | |
| <body> | |
| <!-- live camera (background) --> | |
| <video id="cam" autoplay playsinline muted aria-hidden="true"></video> | |
| <canvas id="canvas" hidden></canvas> | |
| <!-- top bar: accessibility + language --> | |
| <header id="topbar"> | |
| <button id="a11y" class="chip" aria-pressed="false" aria-label="High contrast and larger text"> | |
| <span aria-hidden="true">Aa</span> | |
| </button> | |
| <button id="lang" class="chip" aria-label="Language">PT</button> | |
| </header> | |
| <!-- stage: the whole screen is tappable (tap=describe, hold=ask, double-tap=live) --> | |
| <main id="stage" aria-label="Iris. Tap to describe, hold to ask, double tap for live mode."> | |
| <div id="halo" aria-hidden="true"></div> | |
| <div id="brand" aria-hidden="true"> | |
| <svg viewBox="0 0 100 100" class="iris-mark"> | |
| <defs> | |
| <radialGradient id="irisG" cx="42%" cy="40%" r="62%"> | |
| <stop offset="0%" stop-color="#ffe39a"/> | |
| <stop offset="38%" stop-color="#ff9d3c"/> | |
| <stop offset="72%" stop-color="#ff7a18"/> | |
| <stop offset="100%" stop-color="#5e2400"/> | |
| </radialGradient> | |
| </defs> | |
| <path d="M5 50 Q50 14 95 50 Q50 86 5 50 Z" fill="none" stroke="rgba(255,255,255,.55)" stroke-width="3.2"/> | |
| <circle cx="50" cy="50" r="23" fill="url(#irisG)"/> | |
| <g stroke="rgba(40,16,0,.32)" stroke-width="1.4" stroke-linecap="round"> | |
| <line x1="50" y1="29" x2="50" y2="39"/> | |
| <line x1="50" y1="29" x2="50" y2="39" transform="rotate(30 50 50)"/> | |
| <line x1="50" y1="29" x2="50" y2="39" transform="rotate(60 50 50)"/> | |
| <line x1="50" y1="29" x2="50" y2="39" transform="rotate(90 50 50)"/> | |
| <line x1="50" y1="29" x2="50" y2="39" transform="rotate(120 50 50)"/> | |
| <line x1="50" y1="29" x2="50" y2="39" transform="rotate(150 50 50)"/> | |
| <line x1="50" y1="29" x2="50" y2="39" transform="rotate(180 50 50)"/> | |
| <line x1="50" y1="29" x2="50" y2="39" transform="rotate(210 50 50)"/> | |
| <line x1="50" y1="29" x2="50" y2="39" transform="rotate(240 50 50)"/> | |
| <line x1="50" y1="29" x2="50" y2="39" transform="rotate(270 50 50)"/> | |
| <line x1="50" y1="29" x2="50" y2="39" transform="rotate(300 50 50)"/> | |
| <line x1="50" y1="29" x2="50" y2="39" transform="rotate(330 50 50)"/> | |
| </g> | |
| <circle cx="50" cy="50" r="23" fill="none" stroke="rgba(255,255,255,.25)" stroke-width="1.2"/> | |
| <circle cx="50" cy="50" r="9.5" fill="#08080d"/> | |
| <circle cx="44.5" cy="44.5" r="3.2" fill="#fff" opacity=".92"/> | |
| </svg> | |
| </div> | |
| <p id="status" role="status" aria-live="assertive">Iris</p> | |
| <p id="answer" aria-live="polite"></p> | |
| <p id="hint" aria-hidden="true"></p> | |
| </main> | |
| <!-- explicit controls (low vision / keyboard / screen reader) --> | |
| <nav id="controls" aria-label="Actions"> | |
| <button id="btn-ask" class="ctl" aria-label="Ask a question. Press and hold, then speak."> | |
| <span class="ic" aria-hidden="true"> | |
| <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> | |
| <rect x="9" y="2" width="6" height="12" rx="3"/><path d="M5 11a7 7 0 0 0 14 0"/><line x1="12" y1="18" x2="12" y2="22"/> | |
| </svg> | |
| </span><span class="ctl-lbl">Ask</span> | |
| </button> | |
| <button id="btn-describe" class="ctl primary" aria-label="Describe what is in front of me"> | |
| <span class="ic" aria-hidden="true"> | |
| <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> | |
| <path d="M2 12s3.5-7 10-7 10 7 10 7-3.5 7-10 7-10-7-10-7z"/><circle cx="12" cy="12" r="3"/> | |
| </svg> | |
| </span><span class="ctl-lbl">Describe</span> | |
| </button> | |
| <button id="btn-live" class="ctl" aria-pressed="false" aria-label="Live mode: announce new things around you"> | |
| <span class="ic" aria-hidden="true"> | |
| <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> | |
| <circle cx="12" cy="12" r="2"/><path d="M16.2 7.8a6 6 0 0 1 0 8.5M7.8 16.2a6 6 0 0 1 0-8.5M19 5a10 10 0 0 1 0 14M5 19A10 10 0 0 1 5 5"/> | |
| </svg> | |
| </span><span class="ctl-lbl">Live</span> | |
| </button> | |
| </nav> | |
| <audio id="player" playsinline></audio> | |
| <!-- in-browser object detection (gates live mode); falls back to pixel-diff if unavailable --> | |
| <script src="https://cdn.jsdelivr.net/npm/@tensorflow/tfjs@4"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/@tensorflow-models/coco-ssd@2"></script> | |
| <script type="module" src="/static/app.js"></script> | |
| </body> | |
| </html> | |