Hugging Face's logo

Spaces:
Marek4321
/
MusicMood
Paused

App Files Community
MusicMood
File size: 5,074 Bytes
2a7eb0c
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
c2fe66e
 
 
 
 
 
2a7eb0c
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
<!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>
    <!-- LEWA KOLUMNA: kamera + parametry -->
    <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>

    <!-- PRAWA KOLUMNA: retro TV z playerem YouTube -->
    <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>