Spaces:

chitrark
/

reachy_mini_bookreader

Running

App Files Files Community

chitrark commited on Feb 9

Commit

b21fd1a

1 Parent(s): 67be16e

Sync local changes

Browse files

Files changed (1) hide show

index.html.save +542 -0

index.html.save ADDED Viewed

	@@ -0,0 +1,542 @@

+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1" />
+  <title>ReadingBuddy • Reachy Mini BookReader</title>
+  <style>
+    :root{
+      --bg0:#0b1020;
+      --bg1:#0f172a;
+      --card:rgba(255,255,255,.06);
+      --card2:rgba(255,255,255,.08);
+      --stroke:rgba(255,255,255,.10);
+      --text:#e5e7eb;
+      --muted:#a3aab8;
+      --muted2:#b6becc;
+      --brand:#818cf8;   /* indigo */
+      --brand2:#22c55e;  /* green */
+      --warn:#f59e0b;    /* amber */
+      --shadow: 0 20px 60px rgba(0,0,0,.35);
+      --radius: 18px;
+    }
+    *{ box-sizing:border-box; }
+    html,body{ height:100%; }
+    body{
+      margin:0;
+      font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
+      color:var(--text);
+      background:
+        radial-gradient(1200px 600px at 15% 0%, rgba(129,140,248,.25), transparent 60%),
+        radial-gradient(900px 500px at 85% 10%, rgba(34,197,94,.18), transparent 55%),
+        radial-gradient(700px 450px at 50% 95%, rgba(245,158,11,.16), transparent 55%),
+        linear-gradient(180deg, var(--bg0), var(--bg1));
+      line-height:1.6;
+    }
+    a{ color:#c7d2fe; text-decoration:none; }
+    a:hover{ text-decoration:underline; }
+    .container{
+      max-width: 980px;
+      margin: 0 auto;
+      padding: 28px 16px 64px;
+    }
+    /* Top mini-nav */
+    .topbar{
+      position: sticky;
+      top: 0;
+      z-index: 10;
+      margin: -12px 0 18px;
+      padding: 10px 0;
+      backdrop-filter: blur(10px);
+      background: linear-gradient(180deg, rgba(11,16,32,.72), rgba(11,16,32,.35));
+      border-bottom: 1px solid rgba(255,255,255,.06);
+    }
+    .topbar-inner{
+      display:flex;
+      align-items:center;
+      justify-content:space-between;
+      gap:12px;
+      max-width: 980px;
+      margin: 0 auto;
+      padding: 0 16px;
+    }
+    .brandline{
+      display:flex;
+      align-items:center;
+      gap:10px;
+      min-width: 200px;
+    }
+    .logo{
+      width:34px;
+      height:34px;
+      border-radius:12px;
+      background:
+        radial-gradient(circle at 30% 30%, rgba(129,140,248,.9), rgba(129,140,248,.25) 55%, transparent 60%),
+        radial-gradient(circle at 70% 70%, rgba(34,197,94,.65), rgba(34,197,94,.15) 58%, transparent 62%),
+        rgba(255,255,255,.06);
+      border: 1px solid rgba(255,255,255,.14);
+      box-shadow: 0 10px 24px rgba(0,0,0,.25);
+      display:grid;
+      place-items:center;
+      font-size: 16px;
+    }
+    .brandtext{
+      display:flex;
+      flex-direction:column;
+      line-height:1.15;
+    }
+    .brandtext strong{ font-size: 0.95rem; letter-spacing:.2px; }
+    .brandtext span{ font-size: 0.78rem; color: var(--muted); }
+    .navlinks{
+      display:flex;
+      flex-wrap:wrap;
+      gap:8px;
+      justify-content:flex-end;
+    }
+    .chiplink{
+      display:inline-flex;
+      align-items:center;
+      gap:6px;
+      padding: 7px 10px;
+      border-radius: 999px;
+      background: rgba(255,255,255,.06);
+      border: 1px solid rgba(255,255,255,.10);
+      color: var(--text);
+      font-size: 0.85rem;
+      white-space:nowrap;
+    }
+    .chiplink:hover{
+      background: rgba(255,255,255,.09);
+      text-decoration:none;
+    }
+    /* Hero */
+    header.hero{
+      margin-top: 14px;
+      padding: 22px 22px;
+      border-radius: var(--radius);
+      background: linear-gradient(135deg, rgba(255,255,255,.08), rgba(255,255,255,.03));
+      border: 1px solid rgba(255,255,255,.12);
+      box-shadow: var(--shadow);
+      overflow:hidden;
+      position:relative;
+    }
+    header.hero:before{
+      content:"";
+      position:absolute;
+      inset:-2px;
+      background:
+        radial-gradient(600px 200px at 18% 10%, rgba(129,140,248,.18), transparent 65%),
+        radial-gradient(500px 220px at 82% 0%, rgba(34,197,94,.16), transparent 68%);
+      pointer-events:none;
+    }
+    .hero-inner{
+      position:relative;
+      display:grid;
+      grid-template-columns: 1.2fr 0.8fr;
+      gap: 18px;
+      align-items:center;
+    }
+    @media (max-width: 860px){
+      .hero-inner{ grid-template-columns: 1fr; }
+    }
+    .badge{
+      display:inline-flex;
+      gap:8px;
+      align-items:center;
+      padding: 6px 10px;
+      border-radius: 999px;
+      background: rgba(129,140,248,.14);
+      border: 1px solid rgba(129,140,248,.26);
+      color: #e0e7ff;
+      font-size: 0.85rem;
+      width: fit-content;
+    }
+    h1{
+      margin: 10px 0 8px;
+      font-size: 2.25rem;
+      line-height: 1.15;
+      letter-spacing: -0.3px;
+    }
+    .sub{
+      margin: 0;
+      color: var(--muted2);
+      max-width: 62ch;
+    }
+    .hero-actions{
+      display:flex;
+      flex-direction:column;
+      gap:10px;
+      align-items:stretch;
+      justify-content:center;
+    }
+    .statrow{
+      display:grid;
+      grid-template-columns: 1fr 1fr;
+      gap: 10px;
+    }
+    .stat{
+      padding: 12px 12px;
+      border-radius: 14px;
+      background: rgba(255,255,255,.06);
+      border: 1px solid rgba(255,255,255,.10);
+    }
+    .stat .k{ color: var(--muted); font-size:.78rem; }
+    .stat .v{ font-size: 0.95rem; margin-top: 3px; }
+    .btnrow{
+      display:flex;
+      gap:10px;
+      flex-wrap:wrap;
+    }
+    .btn{
+      display:inline-flex;
+      align-items:center;
+      justify-content:center;
+      gap:8px;
+      padding: 10px 12px;
+      border-radius: 14px;
+      border: 1px solid rgba(255,255,255,.14);
+      background: rgba(255,255,255,.08);
+      color: var(--text);
+      font-weight: 600;
+      font-size: 0.92rem;
+      cursor: default;
+      user-select:none;
+    }
+    .btn.primary{
+      background: linear-gradient(135deg, rgba(129,140,248,.95), rgba(99,102,241,.70));
+      border: 1px solid rgba(129,140,248,.55);
+      color: #0b1020;
+    }
+    .btn small{ font-weight: 500; opacity:.9; }
+    /* Sections grid */
+    .grid{
+      display:grid;
+      grid-template-columns: 1fr 1fr;
+      gap: 14px;
+      margin-top: 14px;
+    }
+    @media (max-width: 860px){
+      .grid{ grid-template-columns: 1fr; }
+    }
+    .card{
+      padding: 18px 18px;
+      border-radius: var(--radius);
+      background: var(--card);
+      border: 1px solid var(--stroke);
+      box-shadow: 0 10px 30px rgba(0,0,0,.22);
+    }
+    .card.full{ grid-column: 1 / -1; }
+    .card h2{
+      margin: 0 0 10px;
+      font-size: 1.2rem;
+      letter-spacing:-0.2px;
+      display:flex;
+      gap:8px;
+      align-items:center;
+    }
+    .card p{ margin: 0 0 10px; color: var(--muted2); }
+    .card p:last-child{ margin-bottom:0; }
+    .list{
+      margin: 10px 0 0;
+      padding: 0;
+      list-style:none;
+      display:grid;
+      gap: 10px;
+    }
+    .li{
+      display:flex;
+      gap:10px;
+      align-items:flex-start;
+      padding: 12px 12px;
+      border-radius: 14px;
+      background: rgba(255,255,255,.05);
+      border: 1px solid rgba(255,255,255,.09);
+    }
+    .li .icon{
+      width: 34px;
+      height: 34px;
+      border-radius: 12px;
+      display:grid;
+      place-items:center;
+      background: rgba(255,255,255,.06);
+      border: 1px solid rgba(255,255,255,.10);
+      flex: 0 0 auto;
+      margin-top: 1px;
+    }
+    .li strong{ display:block; margin-bottom: 2px; }
+    .li span{ color: var(--muted2); font-size: 0.95rem; }
+    .pills{
+      display:flex;
+      gap:8px;
+      flex-wrap:wrap;
+      margin-top: 10px;
+    }
+    .pill{
+      display:inline-flex;
+      align-items:center;
+      gap:6px;
+      padding: 6px 10px;
+      border-radius: 999px;
+      background: rgba(255,255,255,.06);
+      border: 1px solid rgba(255,255,255,.10);
+      font-size: 0.85rem;
+      color: var(--text);
+    }
+    .pill.good{ border-color: rgba(34,197,94,.35); background: rgba(34,197,94,.12); }
+    .pill.info{ border-color: rgba(129,140,248,.35); background: rgba(129,140,248,.12); }
+    .pill.warn{ border-color: rgba(245,158,11,.35); background: rgba(245,158,11,.12); }
+    code{
+      background: rgba(255,255,255,.08);
+      border: 1px solid rgba(255,255,255,.10);
+      padding: 2px 8px;
+      border-radius: 10px;
+      font-size: 0.92em;
+      color: #e9edff;
+      word-break: break-word;
+    }
+    ol{
+      margin: 10px 0 0;
+      padding-left: 1.1rem;
+      color: var(--muted2);
+    }
+    ol li{ margin: 8px 0; }
+    .callout{
+      margin-top: 12px;
+      padding: 12px 12px;
+      border-radius: 16px;
+      background: rgba(34,197,94,.10);
+      border: 1px solid rgba(34,197,94,.22);
+      color: #d1fae5;
+    }
+    .callout strong{ color:#ecfdf5; }
+    .kbd{
+      display:inline-block;
+      padding: 2px 8px;
+      border-radius: 10px;
+      border: 1px solid rgba(255,255,255,.16);
+      background: rgba(255,255,255,.07);
+      font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
+      font-size: 0.9em;
+    }
+    footer{
+      margin-top: 18px;
+      padding-top: 14px;
+      border-top: 1px solid rgba(255,255,255,.10);
+      color: var(--muted);
+      font-size: 0.92rem;
+    }
+    .fineprint{
+      display:flex;
+      flex-wrap:wrap;
+      gap:10px;
+      align-items:center;
+      justify-content:space-between;
+    }
+    .right{
+      opacity:.9;
+    }
+  </style>
+</head>
+<body>
+  <div class="topbar">
+    <div class="topbar-inner">
+      <div class="brandline">
+        <div class="logo">🤖</div>
+        <div class="brandtext">
+          <strong>ReadingBuddy</strong>
+          <span>Reachy Mini BookReader</span>
+        </div>
+      </div>
+      <nav class="navlinks" aria-label="On-page navigation">
+        <a class="chiplink" href="#what">✨ What it does</a>
+        <a class="chiplink" href="#install">🚀 Install</a>
+        <a class="chiplink" href="#session">🎮 Session</a>
+        <a class="chiplink" href="#reqs">📦 Requirements</a>
+      </nav>
+    </div>
+  </div>
+  <main class="container">
+    <header class="hero">
+      <div class="hero-inner">
+        <div>
+          <div class="badge">🤖📚 Reachy Mini App • Kid-friendly reading companion</div>
+          <h1>ReadingBuddy</h1>
+          <p class="sub">
+            Turn your Reachy Mini into a book-reading buddy with fun voices, page memory,
+            and a simple camera-to-reading flow that kids can actually use.
+          </p>
+          <div class="pills" style="margin-top:14px;">
+            <span class="pill info">📸 OCR from camera</span>
+            <span class="pill info">🎭 Character voices</span>
+            <span class="pill good">🧠 Resume by book</span>
+            <span class="pill warn">🔊 Hybrid TTS</span>
+          </div>
+        </div>
+        <div class="hero-actions" aria-label="Quick overview">
+          <div class="statrow">
+            <div class="stat">
+              <div class="k">Voices</div>
+              <div class="v">Tech Storyteller • Princess • Superhero • Robot Hero</div>
+            </div>
+            <div class="stat">
+              <div class="k">Best for</div>
+              <div class="v">Picture books + short pages kids follow along</div>
+            </div>
+          </div>
+          <div class="btnrow">
+            <div class="btn primary">✅ Designed for demos <small>(fast + reliable)</small></div>
+            <div class="btn">🧩 Works with dashboard install</div>
+          </div>
+        </div>
+      </div>
+    </header>
+    <section id="what" class="grid" style="margin-top:16px;">
+      <div class="card full">
+        <h2>✨ What ReadingBuddy does</h2>
+        <p>
+          <strong>ReadingBuddy turns your Reachy Mini into a book-reading companion.</strong>
+          Put a book in front of Reachy, choose a voice, capture a page, confirm the photo, and it reads out loud —
+          while remembering where you stopped so kids can resume next time.
+        </p>
+      </div>
+      <div class="card">
+        <h2>Core features</h2>
+        <ul class="list">
+          <li class="li">
+            <div class="icon">📸</div>
+            <div><strong>Smart OCR</strong><span>Capture a page from Reachy’s camera and extract readable text.</span></div>
+          </li>
+          <li class="li">
+            <div class="icon">🎭</div>
+            <div><strong>4 character voices</strong><span>Tech Storyteller, Princess, Superhero, Robot Hero.</span></div>
+          </li>
+          <li class="li">
+            <div class="icon">🧠</div>
+            <div><strong>Page memory</strong><span>Saves your place per book for easy “resume”.</span></div>
+          </li>
+        </ul>
+      </div>
+      <div class="card">
+        <h2>Kid-friendly flow</h2>
+        <ul class="list">
+          <li class="li">
+            <div class="icon">✅</div>
+            <div><strong>Preview + confirm</strong><span>Kids can confirm the photo before OCR/reading starts.</span></div>
+          </li>
+          <li class="li">
+            <div class="icon">📚</div>
+            <div><strong>Built-in stories</strong><span>Read preloaded public-domain stories without a camera.</span></div>
+          </li>
+          <li class="li">
+            <div class="icon">🎮</div>
+            <div><strong>Simple controls</strong><span>Read, Retake, Next Page + Read, Again, Stop, hold-to-talk.</span></div>
+          </li>
+        </ul>
+      </div>
+    </section>
+    <section id="install" class="grid">
+      <div class="card full">
+        <h2>🚀 How to install on Reachy Mini</h2>
+        <ol>
+          <li>Start the daemon (wireless version) and open the dashboard at <code>http://REACHY_MINI_IP:8000</code>.</li>
+          <li>Click <strong>Install from Hugging Face</strong>.</li>
+          <li>Search for <strong><code>reachy_mini_bookreader</code></strong> and click <strong>Install</strong>.</li>
+          <li>Open <strong>Applications</strong> → <strong>ReadingBuddy / BookReader</strong> → <strong>Run</strong>.</li>
+          <li>Click the <strong>⚙️</strong> settings icon on the app tile to open the full web UI.</li>
+        </ol>
+        <p style="margin-top:10px;">
+          Prefer CLI? You can publish/install via <span class="kbd">reachy-mini-app-assistant</span>.
+        </p>
+      </div>
+    </section>
+    <section id="session" class="grid">
+      <div class="card full">
+        <h2>🎮 How a reading session works</h2>
+        <ol>
+          <li>Enter a <strong>book title</strong> + page number (or resume saved progress).</li>
+          <li>Select a <strong>voice</strong> (optional: press <strong>Test Voice</strong>).</li>
+          <li>Press <strong>Read From Camera</strong> and hold the page steady in front of Reachy.</li>
+          <li>Confirm the captured photo in the preview modal.</li>
+          <li>Reachy runs OCR and reads the page aloud.</li>
+          <li>Use controls: <span class="pill info">Read</span> <span class="pill info">Retake</span> <span class="pill good">Next page</span> <span class="pill info">Again</span> <span class="pill warn">Stop</span></li>
+        </ol>
+        <div class="callout">
+          <strong>Tip:</strong> For glossy pages or low light, move the book slightly closer and keep it flat.
+          A tiny angle change can make OCR much cleaner.
+        </div>
+      </div>
+    </section>
+    <section id="reqs" class="grid">
+      <div class="card">
+        <h2>📦 Requirements</h2>
+        <ul class="list">
+          <li class="li">
+            <div class="icon">🤖</div>
+            <div><strong>Reachy Mini</strong><span>Wireless version recommended, with camera + audio working.</span></div>
+          </li>
+          <li class="li">
+            <div class="icon">🧩</div>
+            <div><strong>SDK + dashboard</strong><span><code>reachy-mini</code> version ≥ <strong>1.2.13</strong>.</span></div>
+          </li>
+          <li class="li">
+            <div class="icon">🔊</div>
+            <div><strong>Hybrid TTS</strong><span>Uses ElevenLabs when available, otherwise espeak-ng fallback.</span></div>
+          </li>
+        </ul>
+      </div>
+      <div class="card">
+        <h2>🔐 Optional env vars</h2>
+        <p>Set these if you want premium voice quality:</p>
+        <div class="pills">
+          <span class="pill warn"><strong>ELEVENLABS_API_KEY</strong></span>
+        </div>
+        <p style="margin-top:10px;">
+          If not set, the app automatically falls back to free TTS (so your demo still works).
+        </p>
+      </div>
+    </section>
+    <footer>
+      <div class="fineprint">
+        <div>
+          This is a Reachy Mini app — it requires the robot hardware to run.
+        </div>
+        <div class="right">
+          Learn more: <a href="https://www.pollen-robotics.com/reachy-mini/" target="_blank" rel="noreferrer">Pollen Robotics • Reachy Mini</a>
+        </div>
+      </div>
+    </footer>
+  </main>
+</body>
+</html>