Spaces:

ghostai1
/

SentimentSpark

Running

App Files Files Community

ghostai1 commited on Jun 6

Commit

785ede9

verified ·

1 Parent(s): 8c40a18

Update index.html

Browse files

Files changed (1) hide show

index.html +45 -30

index.html CHANGED Viewed

@@ -1,46 +1,61 @@
 <!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>SentimentSpark - Sentiment Analysis Dataset</title>
-    <!-- Bootstrap CSS -->
     <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
-    <!-- Custom CSS -->
     <link rel="stylesheet" href="styles.css">
 </head>
 <body class="bg-dark text-light">
-    <div class="container py-5">
-        <h1 class="text-center mb-4">🌑 SentimentSpark</h1>
-        <p class="text-center mb-5">Explore our sentiment analysis dataset with a sleek, dark-themed interface. 🔥</p>
-        <!-- Filter Controls -->
-        <div class="mb-4">
-            <label for="sentimentFilter" class="form-label">Filter by Sentiment:</label>
-            <select id="sentimentFilter" class="form-select bg-dark text-light border-secondary">
-                <option value="all">All</option>
-                <option value="positive">Positive</option>
-                <option value="negative">Negative</option>
-            </select>
         </div>
-        <!-- Data Table -->
-        <table class="table table-dark table-hover">
-            <thead>
-                <tr>
-                    <th>Index</th>
-                    <th>Text</th>
-                    <th>Label</th>
-                </tr>
-            </thead>
-            <tbody id="dataTable"></tbody>
-        </table>
     </div>
-    <!-- Bootstrap JS and Popper.js -->
     <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
-    <!-- Custom JavaScript -->
     <script src="script.js"></script>
 </body>
 </html>

+**Description**:
+This `README.md` is a full dataset card, expanded with:
+- A bold, engaging tone with emojis (🌑, 🔥, 🚀) for a dynamic feel.
+- Clear sections for overview, dataset structure, usage, web app, use cases, license, acknowledgments, and tips.
+- Hugging Face metadata in YAML format, matching the original.
+- Instructions for installation, data loading, and web app access.
+- A call to action for community contributions and practical tips for extending the dataset or app.
+The tone remains professional but vibrant, avoiding colloquialisms while emphasizing the dataset’s value and the web app’s appeal.
+---
+### 3. `index.html`
+**Content**:
+```html
 <!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>SentimentSpark - Ignite Sentiment Analysis</title>
     <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
     <link rel="stylesheet" href="styles.css">
+    <link href="https://fonts.googleapis.com/css2?family=Orbitron:wght@700&family=Roboto:wght@400&display=swap" rel="stylesheet">
 </head>
 <body class="bg-dark text-light">
+    <header class="hero text-center py-5">
+        <h1 class="display-3">🌑 SentimentSpark 🔥</h1>
+        <p class="lead">Unleash the Power of Sentiment Analysis with a Sleek, Dark Interface</p>
+    </header>
+    <div class="container py-4">
+        <div class="card bg-dark border-secondary mb-4">
+            <div class="card-body">
+                <label for="sentimentFilter" class="form-label">Filter by Sentiment:</label>
+                <select id="sentimentFilter" class="form-select bg-dark text-light border-secondary">
+                    <option value="all">All Sentiments</option>
+                    <option value="positive">Positive 🌟</option>
+                    <option value="negative">Negative 😞</option>
+                </select>
+            </div>
+        </div>
+        <div class="table-responsive">
+            <table class="table table-dark table-hover">
+                <thead>
+                    <tr>
+                        <th>Index</th>
+                        <th>Review</th>
+                        <th>Sentiment</th>
+                    </tr>
+                </thead>
+                <tbody id="dataTable"></tbody>
+            </table>
         </div>
     </div>
+    <footer class="text-center py-4">
+        <p>&copy; 2025 SentimentSpark. Licensed under Apache-2.0. Built with 💖 by [Your Name].</p>
+    </footer>
     <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
     <script src="script.js"></script>
 </body>
 </html>