Hugging Face's logo

Spaces:
Prime810
/
FaceFeel
Running

App Files Community
Prime810 commited on
Commit
84bae24
·
verified ·
1 Parent(s): 71f3e64

Update Frontend/index.html

Browse files
Files changed (1) hide show
  1. Frontend/index.html +31 -26
Frontend/index.html CHANGED
@@ -2,36 +2,41 @@
2
  <html lang="en">
3
  <head>
4
  <meta charset="UTF-8" />
5
- <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
6
- <title>FaceFeel: Emotion Mirror</title>
7
- <link rel="stylesheet" href="style.css">
8
  </head>
9
  <body>
10
- <header>
11
- <h1>FaceFeel</h1>
12
- <p>Your Face, Your Feelings!</p>
13
- </header>
14
 
15
- <section class="camera-section">
16
- <video autoplay="true" id="videoElement"></video>
17
- <div class="btn-group">
18
- <button class="btn" onclick="toggleCamera()">🔄 Flip Camera</button>
19
- <button class="btn primary" onclick="captureAndSend()">📸 Capture & Predict</button>
20
- </div>
21
- </section>
22
-
23
- <section class="result-section">
24
- <div id="capturedImagePreview">
25
- <h3>Captured Image</h3>
26
- <img id="snapshotImage" alt="Captured snapshot"/>
27
- </div>
 
28
 
29
- <div id="emojiDisplay"></div>
30
- <div id="emotionText"></div>
31
- <a id="downloadEmoji" download="emoji.png">⬇️ Download Emoji</a>
 
 
 
 
 
 
32
  </section>
33
 
34
-
35
- <script src="/static/scripts.js"></script>
36
  </body>
37
- </html>
 
2
  <html lang="en">
3
  <head>
4
  <meta charset="UTF-8" />
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0" />
6
+ <title>FaceSense</title>
7
+ <link rel="stylesheet" href="style.css" />
8
  </head>
9
  <body>
10
+ <section class="container">
11
+ <h1 class="title">FaceSense</h1>
12
+ <p class="subtitle">Detect Emotions from Facial Expressions</p>
 
13
 
14
+ <section class="camera-emoji-container">
15
+ <section class="camera-section">
16
+ <div class="video-wrapper">
17
+ <video id="videoElement" autoplay muted></video>
18
+ <button class="back-button">&#8592;</button>
19
+ </div>
20
+ <button id="switchCamera">Switch Camera</button>
21
+ <button id="capture">Capture</button>
22
+ </section>
23
+ <section class="emoji-section">
24
+ <div class="emoji-display" id="emoji">😮</div>
25
+ <p class="emotion-label" id="emotion">Surprised</p>
26
+ </section>
27
+ </section>
28
 
29
+ <section class="captured-section">
30
+ <div class="captured-img-wrapper">
31
+ <img id="capturedImage" alt="Captured" />
32
+ </div>
33
+ <div>
34
+ <p>Captured Image</p>
35
+ <a id="downloadLink" download="capture.png">⬇️ Download</a>
36
+ </div>
37
+ </section>
38
  </section>
39
 
40
+ <script src="script.js"></script>
 
41
  </body>
42
+ </html>