| <!DOCTYPE html> |
| <html lang="en"> |
| <head> |
| <meta charset="UTF-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| <title>Pip — Your Screen Companion</title> |
| <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=Silkscreen:wght@400;700&family=Space+Grotesk:wght@300;400;500;600&family=JetBrains+Mono:wght@400&display=swap" rel="stylesheet"> |
| <link rel="stylesheet" href="/static/style.css"> |
| </head> |
| <body> |
| <div class="page"> |
|
|
| |
| <div id="iframe-warning" class="banner banner--warn" hidden> |
| <span class="banner__icon">⚠</span> |
| Document PiP requires a top-level page. |
| <a id="direct-link" href="#" target="_blank" class="banner__link">Open Pip in a new tab →</a> |
| </div> |
|
|
| |
| <div id="unsupported-warning" class="banner banner--warn" hidden> |
| <span class="banner__icon">⚠</span> |
| Please update your browser if you have issues with companion not working. |
| </div> |
|
|
| |
| <header class="header"> |
| <h1 class="header__title">Pip</h1> |
| <p class="header__sub">your screen companion</p> |
| </header> |
|
|
| |
| <section class="hero"> |
| <div class="pip-frame"> |
| <div class="pip-frame__chrome"> |
| <span class="pip-frame__dot"></span> |
| <span class="pip-frame__dot"></span> |
| <span class="pip-frame__dot"></span> |
| </div> |
| <div class="pip-frame__body"> |
| <div class="companion-preview"> |
| <svg viewBox="0 0 64 64" class="companion-svg state-idle" xmlns="http://www.w3.org/2000/svg" aria-label="Pip the ghost companion"> |
| <g class="body-group"> |
| <path class="body" d="M16,42 C16,26 20,14 32,14 C44,14 48,26 48,42 |
| C48,46 46,50 43,50 L41,47 L38,50 L35,47 L32,50 L29,47 L26,50 L23,47 L21,50 |
| C18,50 16,46 16,42 Z"/> |
| <circle class="blush blush-l" cx="22" cy="35" r="3"/> |
| <circle class="blush blush-r" cx="42" cy="35" r="3"/> |
| </g> |
| <g class="eyes-group"> |
| <ellipse class="eye-white" cx="26" cy="30" rx="5" ry="6" fill="white"/> |
| <ellipse class="eye-white" cx="38" cy="30" rx="5" ry="6" fill="white"/> |
| <g class="pupil-group"> |
| <ellipse class="pupil" cx="26" cy="30" rx="3" ry="3.5"/> |
| <circle class="highlight" cx="27.5" cy="28.5" r="1.2"/> |
| </g> |
| <g class="pupil-group"> |
| <ellipse class="pupil" cx="38" cy="30" rx="3" ry="3.5"/> |
| <circle class="highlight" cx="39.5" cy="28.5" r="1.2"/> |
| </g> |
| </g> |
| <g class="arm-group"> |
| <path class="arm" d="M48,36 Q54,34 56,38" stroke-width="3" fill="none" stroke-linecap="round"/> |
| </g> |
| </svg> |
| <div class="speech-bubble speech-bubble--demo"> |
| <span class="speech-bubble__text" id="demo-text">Nice work on that function!</span> |
| </div> |
| </div> |
| </div> |
| </div> |
| </section> |
|
|
| |
| <section class="steps"> |
| <div class="step"> |
| <span class="step__num">1</span> |
| <h3 class="step__title">Launch</h3> |
| <p class="step__desc">Click the button below. Pip appears as a floating window above everything.</p> |
| </div> |
| <div class="step"> |
| <span class="step__num">2</span> |
| <h3 class="step__title">Share Screen</h3> |
| <p class="step__desc">Grant screen capture permission. Pip sees a tiny 256px snapshot — nothing stored.</p> |
| </div> |
| <div class="step"> |
| <span class="step__num">3</span> |
| <h3 class="step__title">Get Encouraged</h3> |
| <p class="step__desc">Every few seconds, Pip looks at what you're doing and cheers you on.</p> |
| </div> |
| </section> |
|
|
| |
| <section class="launch-section"> |
| <button id="launch-btn" class="launch-btn" type="button"> |
| <span class="launch-btn__ghost">👻</span> |
| Launch Companion |
| </button> |
| <p class="launch-section__note" id="launch-status"></p> |
| </section> |
|
|
| |
| <section class="privacy"> |
| <div class="privacy__badge"> |
| <span class="privacy__icon">🔒</span> |
| <div> |
| <strong>Privacy-first</strong><br> |
| Screenshots are 256px, processed instantly by AI, never stored or logged. |
| </div> |
| </div> |
| </section> |
|
|
| |
| <footer class="footer"> |
| <p>Built for the <a href="https://huggingface.co/build-small-hackathon" target="_blank">HF Build Small Hackathon</a> · SmolVLM-2B · Document PiP API</p> |
| </footer> |
|
|
| </div> |
|
|
| <script type="module" src="/static/companion.js"></script> |
| </body> |
| </html> |
|
|
