Spaces:
Running
Running
| **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. `index.html` | |
| **Purpose**: Provides the HTML structure for the dark-themed web app, using Bootstrap for responsiveness and styling. | |
| **Content**: | |
| ```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> |