| <!DOCTYPE html> |
| <html lang="en"> |
| <head> |
| <meta charset="utf-8" /> |
| <meta name="viewport" content="width=device-width, initial-scale=1" /> |
| <title>SentimentScope • Cosmic AI Analyzer 🚀</title> |
| |
| |
| <link rel="preconnect" href="https://cdn.plot.ly" /> |
| <script src="https://cdn.plot.ly/plotly-2.32.0.min.js" defer></script> |
| |
| |
| <link rel="stylesheet" href="/static/style.css" /> |
| </head> |
| <body> |
| |
| <div class="bg-gradient"></div> |
| <div class="stars"></div> |
| <div class="nebula"></div> |
| <div class="planets"> |
| <div class="planet p1"></div> |
| <div class="planet p2"></div> |
| <div class="planet p3"></div> |
| </div> |
| <div class="shooting-stars"></div> |
| <div id="parallax-cursor"></div> |
|
|
| |
| <header class="container fade-in-up"> |
| <h1 class="logo neon-glow">Sentiment<span>Scope</span></h1> |
| <p class="subtitle">✨ Generate posts with <span class="highlight">Gemini</span>, analyze them with Transformers, and watch insights come alive across the cosmos ✨</p> |
| </header> |
|
|
| |
| <main class="container"> |
| <section class="card glass-card zoom-in"> |
| <div class="card-head"> |
| <div class="icon pulse">#</div> |
| <h2>Analyze a hashtag</h2> |
| </div> |
|
|
| |
| <form id="analyze-form" class="grid"> |
| <div class="form-group float-up"> |
| <label for="hashtag">Hashtag</label> |
| <input id="hashtag" type="text" placeholder="#gla" required /> |
| </div> |
| <div class="form-group float-up"> |
| <label for="count">Posts (max 50)</label> |
| <input id="count" type="number" min="1" max="50" value="20" /> |
| </div> |
| <div class="form-group col-span"> |
| <button class="btn cosmic-btn" type="submit"> |
| <span class="btn-glow"></span> |
| <span class="btn-label">🚀 Generate & Analyze</span> |
| </button> |
| </div> |
| </form> |
|
|
| |
| <div id="status" class="status hidden fade-in"> |
| <div class="spinner"></div> |
| <p>🌌 Summoning Gemini and crunching cosmic sentiments<span class="dots"></span></p> |
| </div> |
|
|
| |
| <div id="meta" class="meta hidden slide-in"> |
| <div class="meta-item"> |
| <div class="meta-label">Hashtag</div> |
| <div class="meta-value cosmic-text" id="m-hashtag">—</div> |
| </div> |
| <div class="meta-item"> |
| <div class="meta-label">Generated by</div> |
| <div class="meta-value"> |
| <span id="m-gemini" class="chip chip-gemini glow">Gemini: 0</span> |
| <span id="m-fallback" class="chip chip-fallback glow">Fallback: 0</span> |
| </div> |
| </div> |
| <div class="meta-item"> |
| <div class="meta-label">Models</div> |
| <div class="meta-value cosmic-text" id="m-models">—</div> |
| </div> |
| </div> |
|
|
| |
| <div class="charts"> |
| <div class="chart-card holo-card"> |
| <h3>🌠 Sentiment Distribution</h3> |
| <div id="pie" class="chart-animate"></div> |
| </div> |
| <div class="chart-card holo-card"> |
| <h3>🌌 Rolling Mood</h3> |
| <div id="line" class="chart-animate"></div> |
| </div> |
| </div> |
|
|
| |
| <div class="table-card holo-card"> |
| <div class="table-head"> |
| <h3>📜 Posts</h3> |
| <div class="legend"> |
| <span class="chip chip-gemini">Gemini</span> |
| <span class="chip chip-fallback">Fallback</span> |
| </div> |
| </div> |
| <div id="table" class="table fade-in-up"></div> |
| </div> |
| </section> |
| </main> |
|
|
| |
| <footer class="footer"> |
| <p class="signature">Made with <span class="heart pulse">💜</span> by <span class="kavya neon-glow">Kavya</span></p> |
| </footer> |
|
|
| |
| <script src="/static/script.js" defer></script> |
| </body> |
| </html> |
|
|
