Hugging Face's logo

Spaces:
ghostai1
/
SentimentSpark
Running

App Files Community
ghostai1 commited on
Commit
04f58a5
·
verified ·
1 Parent(s): c61b2c1

Update index.html

Browse files
Files changed (1) hide show
  1. index.html +55 -19
index.html CHANGED
@@ -1,19 +1,55 @@
1
- <!doctype html>
2
- <html>
3
- <head>
4
- <meta charset="utf-8" />
5
- <meta name="viewport" content="width=device-width" />
6
- <title>My static Space</title>
7
- <link rel="stylesheet" href="style.css" />
8
- </head>
9
- <body>
10
- <div class="card">
11
- <h1>Welcome to your static Space!</h1>
12
- <p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
13
- <p>
14
- Also don't forget to check the
15
- <a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
16
- </p>
17
- </div>
18
- </body>
19
- </html>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+
2
+ **Explanation**: The README follows the provided template exactly, with a professional yet engaging tone. It includes metadata in YAML format, a dark-themed aesthetic with emojis, and clear sections for project overview, dataset structure, usage instructions, and web app details. Placeholder links (`your-username`) should be replaced with your actual Hugging Face username when deploying.
3
+
4
+ ---
5
+
6
+ ### 3. `index.html`
7
+ **Purpose**: Provides the HTML structure for the dark-themed web app, using Bootstrap for responsiveness and styling.
8
+
9
+ **Content**:
10
+ ```html
11
+ <!DOCTYPE html>
12
+ <html lang="en">
13
+ <head>
14
+ <meta charset="UTF-8">
15
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
16
+ <title>SentimentSpark - Sentiment Analysis Dataset</title>
17
+ <!-- Bootstrap CSS -->
18
+ <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
19
+ <!-- Custom CSS -->
20
+ <link rel="stylesheet" href="styles.css">
21
+ </head>
22
+ <body class="bg-dark text-light">
23
+ <div class="container py-5">
24
+ <h1 class="text-center mb-4">🌑 SentimentSpark</h1>
25
+ <p class="text-center mb-5">Explore our sentiment analysis dataset with a sleek, dark-themed interface. 🔥</p>
26
+
27
+ <!-- Filter Controls -->
28
+ <div class="mb-4">
29
+ <label for="sentimentFilter" class="form-label">Filter by Sentiment:</label>
30
+ <select id="sentimentFilter" class="form-select bg-dark text-light border-secondary">
31
+ <option value="all">All</option>
32
+ <option value="positive">Positive</option>
33
+ <option value="negative">Negative</option>
34
+ </select>
35
+ </div>
36
+
37
+ <!-- Data Table -->
38
+ <table class="table table-dark table-hover">
39
+ <thead>
40
+ <tr>
41
+ <th>Index</th>
42
+ <th>Text</th>
43
+ <th>Label</th>
44
+ </tr>
45
+ </thead>
46
+ <tbody id="dataTable"></tbody>
47
+ </table>
48
+ </div>
49
+
50
+ <!-- Bootstrap JS and Popper.js -->
51
+ <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
52
+ <!-- Custom JavaScript -->
53
+ <script src="script.js"></script>
54
+ </body>
55
+ </html>