Hugging Face's logo

Spaces:
SreyaDvn
/
Sentiment_Analyzer
Sleeping

App Files Community
Venessadvn commited on
Commit
8b6ddff
·
1 Parent(s): 6b61cad

Added index.html and batch.html templates

Browse files
Files changed (2) hide show
  1. templates/batch.html +178 -0
  2. templates/index.html +113 -0
templates/batch.html ADDED
@@ -0,0 +1,178 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html>
3
+ <head>
4
+ <title>Batch Prediction - Amazon Review Sentiment Analysis</title>
5
+ <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
6
+ <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet">
7
+ <style>
8
+ :root {
9
+ --color-teal: #5BA082;
10
+ --color-lime: #9DC25C;
11
+ --color-orange: #D18B5C;
12
+ --color-pink: #D29BB5;
13
+ --color-beige: #BFB5A0;
14
+ --color-rose: #D5658D;
15
+ --color-sage: #A3A899;
16
+ --color-charcoal: #5B5958;
17
+ --color-mint: #A8DCC1;
18
+ --color-seafoam: #8EC4B3;
19
+ }
20
+ body {
21
+ background: linear-gradient(135deg, var(--color-teal) 0%, var(--color-sage) 30%, var(--color-beige) 70%);
22
+ font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
23
+ min-height: 100vh;
24
+ }
25
+ .main-container {
26
+ display: flex;
27
+ justify-content: center;
28
+ align-items: flex-start;
29
+ min-height: 100vh;
30
+ padding: 20px;
31
+ }
32
+ .prediction-card {
33
+ background: rgba(255,255,255,0.95);
34
+ border-radius: 24px;
35
+ padding: 40px;
36
+ width: 100%;
37
+ max-width: 950px;
38
+ box-shadow: 0 20px 50px rgba(0,0,0,0.1);
39
+ }
40
+ .main-title { font-size: 2.5rem; font-weight: 700; color: var(--color-teal); }
41
+ .subtitle { color: var(--color-charcoal); font-size: 1.2rem; }
42
+ .upload-zone {
43
+ border: 2px dashed var(--color-sage);
44
+ border-radius: 20px;
45
+ padding: 40px;
46
+ text-align: center;
47
+ margin-bottom: 20px;
48
+ }
49
+ .upload-zone:hover { border-color: var(--color-teal); background: rgba(91,160,130,0.05); }
50
+ .file-name {
51
+ font-weight: 700;
52
+ color: var(--color-teal);
53
+ margin-top: 12px;
54
+ display: inline-block;
55
+ }
56
+ .submit-btn {
57
+ background: var(--color-teal); border: none; color: white;
58
+ padding: 16px; border-radius: 50px; font-size: 1.2rem;
59
+ font-weight: 700; width: 100%;
60
+ }
61
+ .confidence-bar { height: 8px; border-radius: 4px; overflow: hidden; margin-top: 5px; }
62
+ .confidence-fill { height: 100%; }
63
+ .confidence-fill.positive { background: linear-gradient(90deg,var(--color-mint),var(--color-teal)); }
64
+ .confidence-fill.negative { background: linear-gradient(90deg,var(--color-rose),var(--color-pink)); }
65
+ .confidence-fill.neutral { background: linear-gradient(90deg,var(--color-sage),var(--color-beige)); }
66
+ </style>
67
+ </head>
68
+ <body>
69
+ <div class="main-container">
70
+ <div class="prediction-card">
71
+ <div class="text-center mb-4">
72
+ <h1 class="main-title">Batch Prediction</h1>
73
+ <p class="subtitle">Upload multiple reviews for sentiment analysis</p>
74
+ </div>
75
+
76
+ <!-- Error / Success Messages -->
77
+ {% if error %}
78
+ <div class="alert alert-danger" id="errorMessage">
79
+ <i class="fas fa-exclamation-circle"></i> {{ error }}
80
+ </div>
81
+ {% endif %}
82
+ <div class="alert alert-danger" id="errorMessage" style="display:none;">
83
+ <i class="fas fa-exclamation-circle"></i> Invalid file format. Please upload a .csv file.
84
+ </div>
85
+
86
+ {% if results %}
87
+ <div class="alert alert-success">
88
+ <i class="fas fa-check-circle"></i> File processed successfully!
89
+ </div>
90
+ {% endif %}
91
+
92
+ <!-- Upload Form -->
93
+ <form method="POST" enctype="multipart/form-data" id="uploadForm">
94
+ <div class="upload-zone" id="uploadZone">
95
+ <i class="fas fa-cloud-upload-alt fa-3x text-success"></i>
96
+ <p class="mt-2">Drop your CSV file here or click to browse</p>
97
+ <input type="file" name="csvfile" class="file-input" accept=".csv" required id="fileInput" style="display:none;">
98
+ <label for="fileInput" class="btn btn-outline-success mt-2">Choose File</label>
99
+ <div class="file-name" id="fileName" style="display:none;"></div>
100
+ </div>
101
+ <button type="submit" class="submit-btn">
102
+ <i class="fas fa-brain"></i> Analyze Sentiment
103
+ </button>
104
+ </form>
105
+
106
+ <!-- Results Table -->
107
+ {% if results %}
108
+ <div class="mt-5">
109
+ <h4 class="text-center mb-4" style="color: var(--color-teal); font-weight:700;">Prediction Results</h4>
110
+ <div class="table-responsive">
111
+ <table class="table table-bordered table-hover align-middle">
112
+ <thead class="table-success">
113
+ <tr>
114
+ <th>Review</th>
115
+ <th>Sentiment</th>
116
+ <th>Confidence</th>
117
+ <th>Model Used</th>
118
+ </tr>
119
+ </thead>
120
+ <tbody>
121
+ {% for r in results %}
122
+ <tr>
123
+ <td>{{ r.text }}</td>
124
+ <td>
125
+ {% if r.sentiment.lower().startswith("positive") %}
126
+ <span class="badge bg-success">{{ r.sentiment }}</span>
127
+ {% elif r.sentiment.lower().startswith("negative") %}
128
+ <span class="badge bg-danger">{{ r.sentiment }}</span>
129
+ {% else %}
130
+ <span class="badge bg-secondary">{{ r.sentiment }}</span>
131
+ {% endif %}
132
+ </td>
133
+ <td>
134
+ <span>{{ r.confidence }}%</span>
135
+ <div class="confidence-bar">
136
+ <div class="confidence-fill {{ r.sentiment.lower() }}" style="width: {{ r.confidence }}%"></div>
137
+ </div>
138
+ </td>
139
+ <td>
140
+ <i class="fas fa-robot text-muted"></i> {{ r.chosen_model }}
141
+ </td>
142
+ </tr>
143
+ {% endfor %}
144
+ </tbody>
145
+ </table>
146
+ </div>
147
+ </div>
148
+ {% endif %}
149
+
150
+ <!-- Back Button -->
151
+ <div class="text-center mt-4">
152
+ <a href="{{ url_for('single_review') }}" class="btn btn-outline-secondary">
153
+ <i class="fas fa-arrow-left"></i> Back to Single Prediction
154
+ </a>
155
+ </div>
156
+ </div>
157
+ </div>
158
+
159
+ <script>
160
+ const fileInput = document.getElementById("fileInput");
161
+ const fileName = document.getElementById("fileName");
162
+ const errorMessage = document.getElementById("errorMessage");
163
+
164
+ fileInput.addEventListener("change", () => {
165
+ const file = fileInput.files[0];
166
+ if (file && file.name.endsWith(".csv")) {
167
+ fileName.textContent = file.name;
168
+ fileName.style.display = "block";
169
+ errorMessage.style.display = "none";
170
+ } else {
171
+ fileInput.value = "";
172
+ fileName.style.display = "none";
173
+ errorMessage.style.display = "block";
174
+ }
175
+ });
176
+ </script>
177
+ </body>
178
+ </html>
templates/index.html ADDED
@@ -0,0 +1,113 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html>
3
+ <head>
4
+ <title>Review Sentiment Analysis</title>
5
+ <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
6
+ <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet">
7
+ <style>
8
+ :root {
9
+ --color-teal: #5BA082;
10
+ --color-lime: #9DC25C;
11
+ --color-orange: #D18B5C;
12
+ --color-pink: #D29BB5;
13
+ --color-sage: #A3A899;
14
+ --color-rose: #D5658D;
15
+ --color-charcoal: #5B5958;
16
+ --color-mint: #A8DCC1;
17
+ --color-seafoam: #8EC4B3;
18
+ --color-beige: #BFB5A0;
19
+ }
20
+ body {
21
+ background: linear-gradient(135deg, var(--color-teal) 0%, var(--color-sage) 30%, var(--color-beige) 100%);
22
+ font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
23
+ min-height: 100vh;
24
+ }
25
+ .main-container {
26
+ display: flex; align-items: center; justify-content: center;
27
+ min-height: 100vh; padding: 20px;
28
+ }
29
+ .prediction-card {
30
+ background: rgba(255,255,255,0.95);
31
+ backdrop-filter: blur(15px);
32
+ border-radius: 24px;
33
+ padding: 40px;
34
+ width: 100%; max-width: 650px;
35
+ box-shadow: 0 20px 50px rgba(0,0,0,0.1);
36
+ position: relative;
37
+ }
38
+ .title-section { text-align: center; margin-bottom: 30px; }
39
+ .main-title { font-size: 2.5rem; font-weight: 700; color: var(--color-teal); }
40
+ .subtitle { color: var(--color-charcoal); font-size: 1.2rem; }
41
+ .form-control {
42
+ border: 2px solid var(--color-sage);
43
+ border-radius: 16px;
44
+ padding: 14px;
45
+ font-size: 1rem;
46
+ }
47
+ .submit-btn {
48
+ background: var(--color-teal); border: none; color: white;
49
+ padding: 16px; border-radius: 50px; font-size: 1.2rem;
50
+ font-weight: 700; width: 100%;
51
+ transition: background 0.3s ease;
52
+ }
53
+ .submit-btn:hover {
54
+ background: var(--color-seafoam);
55
+ }
56
+ .prediction-result {
57
+ margin-top: 30px; padding: 20px;
58
+ border-radius: 16px; text-align: center;
59
+ }
60
+ .prediction-result.positive { color: var(--color-teal); }
61
+ .prediction-result.negative { color: var(--color-rose); }
62
+ .prediction-result.neutral { color: var(--color-charcoal); }
63
+ .confidence-bar { height: 8px; border-radius: 4px; overflow: hidden; margin-top: 10px; background: #ddd; }
64
+ .confidence-fill { height: 100%; transition: width 0.5s ease; }
65
+ .confidence-fill.positive { background: linear-gradient(90deg,var(--color-mint),var(--color-teal)); }
66
+ .confidence-fill.negative { background: linear-gradient(90deg,var(--color-rose),var(--color-pink)); }
67
+ .confidence-fill.neutral { background: linear-gradient(90deg,var(--color-sage),var(--color-beige)); }
68
+ .model-label {
69
+ margin-top: 15px; font-size: 0.95rem;
70
+ color: var(--color-charcoal); opacity: 0.85;
71
+ }
72
+ </style>
73
+ </head>
74
+ <body>
75
+ <div class="main-container">
76
+ <div class="prediction-card">
77
+ <div class="title-section">
78
+ <h1 class="main-title">Review Analyzer</h1>
79
+ <p class="subtitle">Analyze the sentiment of your review</p>
80
+ </div>
81
+
82
+ <form method="POST" id="predictionForm">
83
+ <div class="mb-3">
84
+ <label for="review" class="form-label"><i class="fas fa-comment-dots"></i> Enter your review:</label>
85
+ <textarea name="review" id="review" class="form-control" rows="4" placeholder="E.g. This product is great!" required>{{ review or '' }}</textarea>
86
+ </div>
87
+ <button type="submit" class="submit-btn">
88
+ <i class="fas fa-search"></i> Predict Sentiment
89
+ </button>
90
+ </form>
91
+
92
+ {% if prediction %}
93
+ <div class="prediction-result {{ prediction|lower }}">
94
+ <h4><i class="fas fa-bullseye"></i> Prediction: {{ prediction }}</h4>
95
+ <p><strong>Confidence:</strong> {{ "%.2f"|format(confidence) }}%</p>
96
+
97
+ <div class="confidence-bar">
98
+ <div class="confidence-fill {{ prediction|lower }}" style="width: {{ "%.2f"|format(confidence) }}%"></div>
99
+ </div>
100
+
101
+ <p class="model-label"><i class="fas fa-robot"></i> Model used: <strong>{{ chosen_model }}</strong></p>
102
+ </div>
103
+ {% endif %}
104
+ <!-- Navigation Button -->
105
+ <div class="text-center mt-4">
106
+ <a href="{{ url_for('batch_review') }}" class="btn btn-outline-secondary">
107
+ <i class="fas fa-list"></i> Go to Batch Prediction
108
+ </a>
109
+ </div>
110
+ </div>
111
+ </div>
112
+ </body>
113
+ </html>