Hugging Face's logo

Spaces:
GLAkavya
/
analyzer
Sleeping

App Files Community
GLAkavya commited on
Commit
ade9c99
·
verified ·
1 Parent(s): 6af3f66

Update templates/index.html

Browse files
Files changed (1) hide show
  1. templates/index.html +41 -27
templates/index.html CHANGED
@@ -3,15 +3,20 @@
3
  <head>
4
  <meta charset="utf-8" />
5
  <meta name="viewport" content="width=device-width, initial-scale=1" />
6
- <title>Social Sentiment Analyzer • Made with 💜 by Kavya</title>
 
 
7
  <link rel="preconnect" href="https://cdn.plot.ly" />
8
  <script src="https://cdn.plot.ly/plotly-2.32.0.min.js" defer></script>
 
 
9
  <link rel="stylesheet" href="/static/style.css" />
10
  </head>
11
  <body>
12
  <!-- Background layers -->
13
  <div class="bg-gradient"></div>
14
  <div class="stars"></div>
 
15
  <div class="planets">
16
  <div class="planet p1"></div>
17
  <div class="planet p2"></div>
@@ -20,86 +25,95 @@
20
  <div class="shooting-stars"></div>
21
  <div id="parallax-cursor"></div>
22
 
23
- <header class="container">
24
- <h1 class="logo">Sentiment<span>Scope</span></h1>
25
- <p class="subtitle">Generate posts with Gemini, analyze them with Transformers, and watch insights come alive.</p>
 
26
  </header>
27
 
 
28
  <main class="container">
29
- <section class="card">
30
  <div class="card-head">
31
- <div class="icon">#</div>
32
  <h2>Analyze a hashtag</h2>
33
  </div>
34
 
 
35
  <form id="analyze-form" class="grid">
36
- <div class="form-group">
37
  <label for="hashtag">Hashtag</label>
38
  <input id="hashtag" type="text" placeholder="#gla" required />
39
  </div>
40
- <div class="form-group">
41
  <label for="count">Posts (max 50)</label>
42
  <input id="count" type="number" min="1" max="50" value="20" />
43
  </div>
44
  <div class="form-group col-span">
45
- <button class="btn" type="submit">
46
  <span class="btn-glow"></span>
47
- <span class="btn-label">Generate & Analyze</span>
48
  </button>
49
  </div>
50
  </form>
51
 
52
- <div id="status" class="status hidden">
 
53
  <div class="spinner"></div>
54
- <p>Summoning Gemini and crunching sentiments<span class="dots"></span></p>
55
  </div>
56
 
57
- <div id="meta" class="meta hidden">
 
58
  <div class="meta-item">
59
  <div class="meta-label">Hashtag</div>
60
- <div class="meta-value" id="m-hashtag">—</div>
61
  </div>
62
  <div class="meta-item">
63
  <div class="meta-label">Generated by</div>
64
  <div class="meta-value">
65
- <span id="m-gemini" class="chip chip-gemini">Gemini: 0</span>
66
- <span id="m-fallback" class="chip chip-fallback">Fallback: 0</span>
67
  </div>
68
  </div>
69
  <div class="meta-item">
70
  <div class="meta-label">Models</div>
71
- <div class="meta-value" id="m-models">—</div>
72
  </div>
73
  </div>
74
 
 
75
  <div class="charts">
76
- <div class="chart-card">
77
- <h3>Sentiment Distribution</h3>
78
- <div id="pie"></div>
79
  </div>
80
- <div class="chart-card">
81
- <h3>Rolling Mood</h3>
82
- <div id="line"></div>
83
  </div>
84
  </div>
85
 
86
- <div class="table-card">
 
87
  <div class="table-head">
88
- <h3>Posts</h3>
89
  <div class="legend">
90
  <span class="chip chip-gemini">Gemini</span>
91
  <span class="chip chip-fallback">Fallback</span>
92
  </div>
93
  </div>
94
- <div id="table" class="table"></div>
95
  </div>
96
  </section>
97
  </main>
98
 
 
99
  <footer class="footer">
100
- <p class="signature">Made with <span class="heart">💜</span> by <span class="kavya">Kavya</span></p>
101
  </footer>
102
 
 
103
  <script src="/static/script.js" defer></script>
104
  </body>
105
  </html>
 
3
  <head>
4
  <meta charset="utf-8" />
5
  <meta name="viewport" content="width=device-width, initial-scale=1" />
6
+ <title>SentimentScope • Cosmic AI Analyzer 🚀</title>
7
+
8
+ <!-- Plotly -->
9
  <link rel="preconnect" href="https://cdn.plot.ly" />
10
  <script src="https://cdn.plot.ly/plotly-2.32.0.min.js" defer></script>
11
+
12
+ <!-- CSS -->
13
  <link rel="stylesheet" href="/static/style.css" />
14
  </head>
15
  <body>
16
  <!-- Background layers -->
17
  <div class="bg-gradient"></div>
18
  <div class="stars"></div>
19
+ <div class="nebula"></div>
20
  <div class="planets">
21
  <div class="planet p1"></div>
22
  <div class="planet p2"></div>
 
25
  <div class="shooting-stars"></div>
26
  <div id="parallax-cursor"></div>
27
 
28
+ <!-- HEADER -->
29
+ <header class="container fade-in-up">
30
+ <h1 class="logo neon-glow">Sentiment<span>Scope</span></h1>
31
+ <p class="subtitle">✨ Generate posts with <span class="highlight">Gemini</span>, analyze them with Transformers, and watch insights come alive across the cosmos ✨</p>
32
  </header>
33
 
34
+ <!-- MAIN -->
35
  <main class="container">
36
+ <section class="card glass-card zoom-in">
37
  <div class="card-head">
38
+ <div class="icon pulse">#</div>
39
  <h2>Analyze a hashtag</h2>
40
  </div>
41
 
42
+ <!-- FORM -->
43
  <form id="analyze-form" class="grid">
44
+ <div class="form-group float-up">
45
  <label for="hashtag">Hashtag</label>
46
  <input id="hashtag" type="text" placeholder="#gla" required />
47
  </div>
48
+ <div class="form-group float-up">
49
  <label for="count">Posts (max 50)</label>
50
  <input id="count" type="number" min="1" max="50" value="20" />
51
  </div>
52
  <div class="form-group col-span">
53
+ <button class="btn cosmic-btn" type="submit">
54
  <span class="btn-glow"></span>
55
+ <span class="btn-label">🚀 Generate & Analyze</span>
56
  </button>
57
  </div>
58
  </form>
59
 
60
+ <!-- STATUS LOADER -->
61
+ <div id="status" class="status hidden fade-in">
62
  <div class="spinner"></div>
63
+ <p>🌌 Summoning Gemini and crunching cosmic sentiments<span class="dots"></span></p>
64
  </div>
65
 
66
+ <!-- META DATA -->
67
+ <div id="meta" class="meta hidden slide-in">
68
  <div class="meta-item">
69
  <div class="meta-label">Hashtag</div>
70
+ <div class="meta-value cosmic-text" id="m-hashtag">—</div>
71
  </div>
72
  <div class="meta-item">
73
  <div class="meta-label">Generated by</div>
74
  <div class="meta-value">
75
+ <span id="m-gemini" class="chip chip-gemini glow">Gemini: 0</span>
76
+ <span id="m-fallback" class="chip chip-fallback glow">Fallback: 0</span>
77
  </div>
78
  </div>
79
  <div class="meta-item">
80
  <div class="meta-label">Models</div>
81
+ <div class="meta-value cosmic-text" id="m-models">—</div>
82
  </div>
83
  </div>
84
 
85
+ <!-- CHARTS -->
86
  <div class="charts">
87
+ <div class="chart-card holo-card">
88
+ <h3>🌠 Sentiment Distribution</h3>
89
+ <div id="pie" class="chart-animate"></div>
90
  </div>
91
+ <div class="chart-card holo-card">
92
+ <h3>🌌 Rolling Mood</h3>
93
+ <div id="line" class="chart-animate"></div>
94
  </div>
95
  </div>
96
 
97
+ <!-- TABLE -->
98
+ <div class="table-card holo-card">
99
  <div class="table-head">
100
+ <h3>📜 Posts</h3>
101
  <div class="legend">
102
  <span class="chip chip-gemini">Gemini</span>
103
  <span class="chip chip-fallback">Fallback</span>
104
  </div>
105
  </div>
106
+ <div id="table" class="table fade-in-up"></div>
107
  </div>
108
  </section>
109
  </main>
110
 
111
+ <!-- FOOTER -->
112
  <footer class="footer">
113
+ <p class="signature">Made with <span class="heart pulse">💜</span> by <span class="kavya neon-glow">Kavya</span></p>
114
  </footer>
115
 
116
+ <!-- JS -->
117
  <script src="/static/script.js" defer></script>
118
  </body>
119
  </html>