Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8" /> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0" /> | |
| <title>EmoNet - Emotional Damage Scanner</title> | |
| <style> | |
| body { | |
| margin: 0; | |
| padding: 0; | |
| background-color: #0d1117; | |
| font-family: 'Poppins', sans-serif; | |
| color: #f1f5f9; | |
| display: flex; | |
| flex-direction: column; | |
| align-items: center; | |
| justify-content: flex-start; | |
| min-height: 100vh; | |
| padding: 2rem 1rem; | |
| } | |
| h1 { | |
| font-size: 2rem; | |
| color: #00f7ff; | |
| text-shadow: 0 0 5px #00f7ff88; | |
| margin-bottom: 0.5rem; | |
| text-align: center; | |
| } | |
| p.description { | |
| font-size: 0.95rem; | |
| font-style: italic; | |
| font-weight: 300; | |
| color: #cbd5e1; | |
| margin-top: -0.25rem; | |
| margin-bottom: 2rem; | |
| text-align: center; | |
| max-width: 600px; | |
| padding: 0 1rem; | |
| } | |
| .container { | |
| background: #161b22; | |
| padding: 2rem 1rem; | |
| border-radius: 12px; | |
| max-width: 600px; | |
| width: 100%; | |
| box-shadow: 0 0 20px rgba(0, 0, 0, 0.5); | |
| box-sizing: border-box; | |
| } | |
| textarea { | |
| width: 100%; | |
| height: 100px; | |
| background: #0d1117; | |
| border: none; | |
| color: #f1f5f9; | |
| padding: 1rem; | |
| font-size: 1rem; | |
| border-radius: 10px; | |
| resize: none; | |
| outline: none; | |
| margin-bottom: 1rem; | |
| box-sizing: border-box; | |
| } | |
| button { | |
| width: 100%; | |
| background: #facc15; | |
| border: none; | |
| padding: 0.7rem; | |
| font-size: 1rem; | |
| font-weight: bold; | |
| color: #0d1117; | |
| border-radius: 8px; | |
| cursor: pointer; | |
| box-shadow: 0 0 10px #facc1544; | |
| transition: all 0.2s ease; | |
| } | |
| button:hover { | |
| background: #ff3c98; | |
| color: #fff; | |
| box-shadow: 0 0 10px #ff3c9877; | |
| } | |
| #loader { | |
| font-size: 0.95rem; | |
| color: #a1a1a1; | |
| text-align: center; | |
| margin-top: 1rem; | |
| } | |
| #result { | |
| margin-top: 2rem; | |
| text-align: center; | |
| font-size: 1.2rem; | |
| display: none; | |
| } | |
| .level { | |
| font-size: 1.5rem; | |
| margin-bottom: 0.5rem; | |
| } | |
| .bar-container { | |
| width: 100%; | |
| background: #2c2f33; | |
| border-radius: 10px; | |
| height: 20px; | |
| margin: 1rem auto; | |
| overflow: hidden; | |
| } | |
| .bar-fill { | |
| height: 100%; | |
| width: 0%; | |
| background: linear-gradient(90deg, #00f7ff, #ff3c98); | |
| border-radius: 10px; | |
| transition: width 0.7s ease-in-out; | |
| } | |
| .emoji { | |
| font-size: 2rem; | |
| margin-top: 0.5rem; | |
| } | |
| .verdict { | |
| margin-top: 1rem; | |
| font-style: italic; | |
| font-size: 1.1rem; | |
| color: #ddd; | |
| } | |
| @media screen and (max-width: 400px) { | |
| h1 { | |
| font-size: 1.5rem; | |
| } | |
| .level { | |
| font-size: 1.2rem; | |
| } | |
| .verdict { | |
| font-size: 1rem; | |
| } | |
| textarea { | |
| height: 90px; | |
| font-size: 0.95rem; | |
| } | |
| button { | |
| font-size: 0.95rem; | |
| } | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <h1>✨ EmoNet ✨</h1> | |
| <p class="description"> | |
| Journaling, but with judgment. Let EmoNet rate your trauma so you can cry more efficiently. | |
| </p> | |
| <div class="container"> | |
| <textarea id="textInput" placeholder="type text here..."></textarea> | |
| <button onclick="analyze()">Analyze</button> | |
| <div id="loader" style="display: none;">🧠 Cooking up the roast...</div> | |
| <div id="result"> | |
| <div class="level" id="damageLabel"></div> | |
| <div class="bar-container"> | |
| <div class="bar-fill" id="barFill"></div> | |
| </div> | |
| <div class="emoji" id="emojiOutput"></div> | |
| <div class="verdict" id="roastVerdict"></div> | |
| </div> | |
| </div> | |
| <script> | |
| const levelEmoji = { | |
| 0: "😌", | |
| 1: "🧐", | |
| 2: "😬", | |
| 3: "💢", | |
| 4: "🔥", | |
| 5: "🗿💀", | |
| 6: "💀🔥🧨", | |
| 7: "☠️📉🧠" | |
| }; | |
| // ✅ Put your actual ngrok URL here (HTTPS one) | |
| const API_URL = "https://cf6827739654.ngrok-free.app"; | |
| async function analyze() { | |
| const input = document.getElementById("textInput").value.trim(); | |
| const result = document.getElementById("result"); | |
| const damageLabel = document.getElementById("damageLabel"); | |
| const barFill = document.getElementById("barFill"); | |
| const emojiOutput = document.getElementById("emojiOutput"); | |
| const roastVerdict = document.getElementById("roastVerdict"); | |
| const loader = document.getElementById("loader"); | |
| if (!input) { | |
| alert("Paste a roast, you lazy noodle."); | |
| return; | |
| } | |
| // Reset UI | |
| loader.style.display = "block"; | |
| result.style.display = "none"; | |
| barFill.style.width = "0%"; | |
| roastVerdict.textContent = ""; | |
| damageLabel.textContent = "Analyzing..."; | |
| emojiOutput.textContent = "🤖"; | |
| try { | |
| const response = await fetch(`${API_URL}/predict`, { | |
| method: "POST", | |
| headers: { "Content-Type": "application/json" }, | |
| body: JSON.stringify({ text: input }) | |
| }); | |
| const data = await response.json(); | |
| const label = data.label || "Level ? unknown"; | |
| const roast = data.roast || "EmoNet is speechless."; | |
| const level = parseInt(label.match(/\d+/)?.[0]) || 0; | |
| loader.style.display = "none"; | |
| damageLabel.textContent = label; | |
| emojiOutput.textContent = levelEmoji[level] || "😶"; | |
| roastVerdict.textContent = roast; | |
| barFill.style.width = `${(level + 1) * 12.5}%`; | |
| result.style.display = "block"; | |
| } catch (err) { | |
| console.error(err); | |
| loader.style.display = "none"; | |
| damageLabel.textContent = "💀 EmoNet crashed. Try again."; | |
| roastVerdict.textContent = ""; | |
| emojiOutput.textContent = "🥀"; | |
| result.style.display = "block"; | |
| } | |
| } | |
| </script> | |
| <!-- ☕ Buy Me a Coffee Widget --> | |
| <script data-name="BMC-Widget" | |
| src="https://cdnjs.buymeacoffee.com/1.0.0/widget.prod.min.js" | |
| data-id="juii03" | |
| data-description="Support me on Buy me a coffee!" | |
| data-message="Like this app? Roast me with caffeine ☕" | |
| data-color="#ffdd00" | |
| data-position="Right" | |
| data-x_margin="18" | |
| data-y_margin="18"> | |
| </script> | |
| </body> | |
| </html> | |