| <!DOCTYPE html> |
| <html lang="pl"> |
| <head> |
| <meta charset="UTF-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| <title>MusicMood 📺🎵</title> |
| <link rel="stylesheet" href="/static/style.css"> |
| </head> |
| <body> |
| <header> |
| <h1>Music<span>Mood</span></h1> |
| <p class="tagline">Twoja twarz · Twój nastrój · Twoja muzyka</p> |
| </header> |
|
|
| <div class="topbar"> |
| <input type="password" id="appPass" placeholder="Hasło dostępu" autocomplete="off"> |
| <select id="cameraSelect" title="Wybierz kamerę"></select> |
| <button id="scanBtn" disabled>📷 SCAN</button> |
| </div> |
|
|
| <main> |
| |
| <section class="left"> |
| <div class="camera-box"> |
| <video id="video" autoplay playsinline muted></video> |
| <canvas id="canvas" hidden></canvas> |
| <div id="flash"></div> |
| <div id="cameraMsg" class="camera-msg"> |
| <div> |
| <p id="cameraMsgText">Uruchamianie kamery…</p> |
| <button id="enableCamBtn" hidden>🎥 Włącz kamerę</button> |
| </div> |
| </div> |
| </div> |
|
|
| <div class="panel" id="resultsPanel"> |
| <h2>📊 Analiza i rekomendacja</h2> |
| <div id="status" class="status">Wpisz hasło dostępu, wybierz kamerę i kliknij SCAN.</div> |
| <div id="results" hidden> |
| <div class="param-group"> |
| <h3>👤 Osoba</h3> |
| <dl> |
| <dt>Płeć</dt><dd id="rPlec">—</dd> |
| <dt>Wiek</dt><dd id="rWiek">—</dd> |
| <dt>Nastrój</dt><dd id="rNastroj">—</dd> |
| <dt>Emocje</dt><dd id="rEmocje">—</dd> |
| </dl> |
| </div> |
| <div class="param-group"> |
| <h3>🌍 Kontekst</h3> |
| <dl> |
| <dt>Czas</dt><dd id="rCzas">—</dd> |
| <dt>Pogoda</dt><dd id="rPogoda">—</dd> |
| <dt>Ciśnienie</dt><dd id="rCisnienie">—</dd> |
| </dl> |
| </div> |
| <div class="param-group"> |
| <h3>🎵 Rekomendacja muzyczna</h3> |
| <dl> |
| <dt>Styl</dt><dd id="rStyl">—</dd> |
| <dt>Tempo</dt><dd id="rTempo">—</dd> |
| <dt>Rytmika</dt><dd id="rRytmika">—</dd> |
| <dt>Charakter</dt><dd id="rCharakter">—</dd> |
| </dl> |
| <p class="uzasadnienie" id="rUzasadnienie"></p> |
| <p class="query">🔎 <span id="rQuery"></span></p> |
| </div> |
| </div> |
| </div> |
| </section> |
|
|
| |
| <section class="right"> |
| <div class="tv"> |
| <div class="tv-antenna"> |
| <div class="antenna-rod left-rod"></div> |
| <div class="antenna-rod right-rod"></div> |
| <div class="antenna-base"></div> |
| </div> |
| <div class="tv-cabinet"> |
| <div class="tv-screen-frame"> |
| <div class="tv-screen" id="tvScreen"> |
| <div class="tv-static" id="tvStatic"> |
| <div class="tv-noise"></div> |
| <div class="tv-standby-text">▓ MOODTRON ▓</div> |
| <div class="tv-log" id="tvLog"></div> |
| </div> |
| <div id="ytplayer"></div> |
| </div> |
| <div class="tv-scanlines"></div> |
| </div> |
| <div class="tv-side"> |
| <div class="tv-brand">MOODTRON</div> |
| <div class="tv-knob knob-1"><div class="knob-marker"></div></div> |
| <div class="tv-knob knob-2"><div class="knob-marker"></div></div> |
| <div class="tv-speaker"> |
| <i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i> |
| </div> |
| <div class="tv-led" id="tvLed"></div> |
| </div> |
| </div> |
| <div class="tv-legs"> |
| <div class="tv-leg"></div> |
| <div class="tv-leg"></div> |
| </div> |
| </div> |
| </section> |
| </main> |
|
|
| <footer> |
| <p>Pogoda: Open-Meteo / wttr.in · Analiza: GPT-4o · Player: YouTube</p> |
| <p class="disclaimer"> |
| Aplikacja ma charakter wyłącznie rozrywkowo-demonstracyjny i korzysta z systemu |
| sztucznej inteligencji (GPT-4o), który na podstawie obrazu z kamery <em>szacuje</em> |
| nastrój, emocje, płeć i wiek — wyniki są przybliżeniami generowanymi przez AI, |
| mogą być błędne i nie stanowią identyfikacji biometrycznej, profilowania ani |
| podstawy jakichkolwiek decyzji wywołujących skutki wobec użytkownika. |
| Zdjęcie jest wykonywane wyłącznie po świadomym kliknięciu przycisku SCAN |
| (co stanowi dobrowolną zgodę na jego jednorazowe przetworzenie), jest przesyłane |
| bezpośrednio do interfejsu OpenAI API w celu wygenerowania rekomendacji muzycznej |
| i nie jest nigdzie zapisywane, przechowywane ani udostępniane innym podmiotom. |
| Aplikacja nie tworzy bazy danych wizerunków ani nie śledzi użytkowników. |
| Korzystając z aplikacji, przyjmujesz powyższe do wiadomości. |
| </p> |
| </footer> |
|
|
| <script src="https://www.youtube.com/iframe_api"></script> |
| <script src="/static/app.js"></script> |
| </body> |
| </html> |
|
|
