Hugging Face's logo

Spaces:
Dreamy0
/
EmoNet
Running

App Files Community
1
Dreamy0 commited on
Commit
f67c19c
·
verified ·
1 Parent(s): 71bb818

Create ui/index.html

Browse files
Files changed (1) hide show
  1. ui/index.html +258 -0
ui/index.html ADDED
@@ -0,0 +1,258 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE 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>EmoNet - Emotional Damage Scanner</title>
7
+ <style>
8
+ body {
9
+ margin: 0;
10
+ padding: 0;
11
+ background-color: #0d1117;
12
+ font-family: 'Poppins', sans-serif;
13
+ color: #f1f5f9;
14
+ display: flex;
15
+ flex-direction: column;
16
+ align-items: center;
17
+ justify-content: flex-start;
18
+ min-height: 100vh;
19
+ padding: 2rem 1rem;
20
+ }
21
+
22
+ h1 {
23
+ font-size: 2rem;
24
+ color: #00f7ff;
25
+ text-shadow: 0 0 5px #00f7ff88;
26
+ margin-bottom: 0.5rem;
27
+ text-align: center;
28
+ }
29
+
30
+ p.description {
31
+ font-size: 0.95rem;
32
+ font-style: italic;
33
+ font-weight: 300;
34
+ color: #cbd5e1;
35
+ margin-top: -0.25rem;
36
+ margin-bottom: 2rem;
37
+ text-align: center;
38
+ max-width: 600px;
39
+ padding: 0 1rem;
40
+ }
41
+
42
+ .container {
43
+ background: #161b22;
44
+ padding: 2rem 1rem;
45
+ border-radius: 12px;
46
+ max-width: 600px;
47
+ width: 100%;
48
+ box-shadow: 0 0 20px rgba(0, 0, 0, 0.5);
49
+ box-sizing: border-box;
50
+ }
51
+
52
+ textarea {
53
+ width: 100%;
54
+ height: 100px;
55
+ background: #0d1117;
56
+ border: none;
57
+ color: #f1f5f9;
58
+ padding: 1rem;
59
+ font-size: 1rem;
60
+ border-radius: 10px;
61
+ resize: none;
62
+ outline: none;
63
+ margin-bottom: 1rem;
64
+ box-sizing: border-box;
65
+ }
66
+
67
+ button {
68
+ width: 100%;
69
+ background: #facc15;
70
+ border: none;
71
+ padding: 0.7rem;
72
+ font-size: 1rem;
73
+ font-weight: bold;
74
+ color: #0d1117;
75
+ border-radius: 8px;
76
+ cursor: pointer;
77
+ box-shadow: 0 0 10px #facc1544;
78
+ transition: all 0.2s ease;
79
+ }
80
+
81
+ button:hover {
82
+ background: #ff3c98;
83
+ color: #fff;
84
+ box-shadow: 0 0 10px #ff3c9877;
85
+ }
86
+
87
+ #loader {
88
+ font-size: 0.95rem;
89
+ color: #a1a1a1;
90
+ text-align: center;
91
+ margin-top: 1rem;
92
+ }
93
+
94
+ #result {
95
+ margin-top: 2rem;
96
+ text-align: center;
97
+ font-size: 1.2rem;
98
+ display: none;
99
+ }
100
+
101
+ .level {
102
+ font-size: 1.5rem;
103
+ margin-bottom: 0.5rem;
104
+ }
105
+
106
+ .bar-container {
107
+ width: 100%;
108
+ background: #2c2f33;
109
+ border-radius: 10px;
110
+ height: 20px;
111
+ margin: 1rem auto;
112
+ overflow: hidden;
113
+ }
114
+
115
+ .bar-fill {
116
+ height: 100%;
117
+ width: 0%;
118
+ background: linear-gradient(90deg, #00f7ff, #ff3c98);
119
+ border-radius: 10px;
120
+ transition: width 0.7s ease-in-out;
121
+ }
122
+
123
+ .emoji {
124
+ font-size: 2rem;
125
+ margin-top: 0.5rem;
126
+ }
127
+
128
+ .verdict {
129
+ margin-top: 1rem;
130
+ font-style: italic;
131
+ font-size: 1.1rem;
132
+ color: #ddd;
133
+ }
134
+
135
+ @media screen and (max-width: 400px) {
136
+ h1 {
137
+ font-size: 1.5rem;
138
+ }
139
+
140
+ .level {
141
+ font-size: 1.2rem;
142
+ }
143
+
144
+ .verdict {
145
+ font-size: 1rem;
146
+ }
147
+
148
+ textarea {
149
+ height: 90px;
150
+ font-size: 0.95rem;
151
+ }
152
+
153
+ button {
154
+ font-size: 0.95rem;
155
+ }
156
+ }
157
+ </style>
158
+ </head>
159
+ <body>
160
+ <h1>✨ EmoNet ✨</h1>
161
+ <p class="description">
162
+ Journaling, but with judgment. Let EmoNet rate your trauma so you can cry more efficiently.
163
+ </p>
164
+
165
+ <div class="container">
166
+ <textarea id="textInput" placeholder="type text here..."></textarea>
167
+ <button onclick="analyze()">Analyze</button>
168
+
169
+ <div id="loader" style="display: none;">🧠 Cooking up the roast...</div>
170
+
171
+ <div id="result">
172
+ <div class="level" id="damageLabel"></div>
173
+ <div class="bar-container">
174
+ <div class="bar-fill" id="barFill"></div>
175
+ </div>
176
+ <div class="emoji" id="emojiOutput"></div>
177
+ <div class="verdict" id="roastVerdict"></div>
178
+ </div>
179
+ </div>
180
+
181
+ <script>
182
+ const levelEmoji = {
183
+ 0: "😌",
184
+ 1: "🧐",
185
+ 2: "😬",
186
+ 3: "💢",
187
+ 4: "🔥",
188
+ 5: "🗿💀",
189
+ 6: "💀🔥🧨",
190
+ 7: "☠️📉🧠"
191
+ };
192
+
193
+ async function analyze() {
194
+ const input = document.getElementById("textInput").value.trim();
195
+ const result = document.getElementById("result");
196
+ const damageLabel = document.getElementById("damageLabel");
197
+ const barFill = document.getElementById("barFill");
198
+ const emojiOutput = document.getElementById("emojiOutput");
199
+ const roastVerdict = document.getElementById("roastVerdict");
200
+ const loader = document.getElementById("loader");
201
+
202
+ if (!input) {
203
+ alert("Paste a roast, you lazy noodle.");
204
+ return;
205
+ }
206
+
207
+ // Reset
208
+ loader.style.display = "block";
209
+ result.style.display = "none";
210
+ barFill.style.width = "0%";
211
+ roastVerdict.textContent = "";
212
+ damageLabel.textContent = "Analyzing...";
213
+ emojiOutput.textContent = "🤖";
214
+
215
+ try {
216
+ const response = await fetch("/api/predict", {
217
+ method: "POST",
218
+ headers: { "Content-Type": "application/json" },
219
+ body: JSON.stringify({ text: input })
220
+ });
221
+
222
+ const data = await response.json();
223
+
224
+ const label = data.label || "Level ? unknown";
225
+ const roast = data.roast || "EmoNet is speechless.";
226
+ const level = parseInt(label.match(/\d+/)?.[0]) || 0;
227
+
228
+ loader.style.display = "none";
229
+ damageLabel.textContent = label;
230
+ emojiOutput.textContent = levelEmoji[level] || "😶";
231
+ roastVerdict.textContent = roast;
232
+ barFill.style.width = `${(level + 1) * 12.5}%`;
233
+
234
+ result.style.display = "block";
235
+ } catch (err) {
236
+ console.error(err);
237
+ loader.style.display = "none";
238
+ damageLabel.textContent = "💀 EmoNet crashed. Try again.";
239
+ roastVerdict.textContent = "";
240
+ emojiOutput.textContent = "🥀";
241
+ result.style.display = "block";
242
+ }
243
+ }
244
+ </script>
245
+
246
+ <!-- ☕ Buy Me a Coffee Widget -->
247
+ <script data-name="BMC-Widget"
248
+ src="https://cdnjs.buymeacoffee.com/1.0.0/widget.prod.min.js"
249
+ data-id="juii03"
250
+ data-description="Support me on Buy me a coffee!"
251
+ data-message="Like this app? Roast me with caffeine ☕"
252
+ data-color="#ffdd00"
253
+ data-position="Right"
254
+ data-x_margin="18"
255
+ data-y_margin="18">
256
+ </script>
257
+ </body>
258
+ </html>