Hugging Face's logo

Spaces:
apamplona2011
/
amazoncomparisontool
Configuration error

App Files Community
apamplona2011 commited on
Commit
928619c
·
verified ·
1 Parent(s): b3e5b1a

Build an interactive app using either Gradio or Streamlit for Hugging Face Spaces. The app should allow users to compare at least two products based on their Amazon review analysis, using category scores for Price, Durability, Features, Usability, and Customer Service. For each product, display category scores (from 0 to 100) based on review text analysis (you can use mock data for now). Key Features: • Input Section: Let users select products to compare (use at least Product A and Product B as examples). • Priority Setting: Allow users to set their priorities for each category, either with sliders (weights summing to 100%) or a dropdown for the most important factor. • Score Calculation: Compute an overall score for each product based on the user’s selected weights/priorities. • Recommendation Output: Clearly show which product is recommended, along with an explanation based on the priorities. • Visualization: Show a comparison table and a bar or radar chart of category scores for each product. • Modular Design: Organize code so mock data can be easily replaced with real data in the future. • Bonus: Display the user’s current weights and optionally some sample review snippets for each category. Please use best practices for code structure and UI clarity, and ensure compatibility with Hugging Face Spaces deployment. - Initial Deployment

Browse files
Files changed (2) hide show
  1. README.md +6 -4
  2. index.html +592 -19
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Amazoncomparisontool
3
- emoji: 👀
4
  colorFrom: gray
5
- colorTo: yellow
6
  sdk: static
7
  pinned: false
 
 
8
  ---
9
 
10
- Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
 
1
  ---
2
+ title: amazoncomparisontool
3
+ emoji: 🐳
4
  colorFrom: gray
5
+ colorTo: blue
6
  sdk: static
7
  pinned: false
8
+ tags:
9
+ - deepsite
10
  ---
11
 
12
+ Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
index.html CHANGED
@@ -1,19 +1,592 @@
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
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>Product Comparison Tool</title>
7
+ <script src="https://cdn.tailwindcss.com"></script>
8
+ <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
9
+ <style>
10
+ .radar-chart-container {
11
+ position: relative;
12
+ height: 300px;
13
+ width: 100%;
14
+ }
15
+ .priority-slider::-webkit-slider-thumb {
16
+ -webkit-appearance: none;
17
+ appearance: none;
18
+ width: 20px;
19
+ height: 20px;
20
+ border-radius: 50%;
21
+ background: #3b82f6;
22
+ cursor: pointer;
23
+ }
24
+ .priority-slider::-moz-range-thumb {
25
+ width: 20px;
26
+ height: 20px;
27
+ border-radius: 50%;
28
+ background: #3b82f6;
29
+ cursor: pointer;
30
+ }
31
+ </style>
32
+ </head>
33
+ <body class="bg-gray-50 min-h-screen">
34
+ <div class="container mx-auto px-4 py-8">
35
+ <header class="text-center mb-10">
36
+ <h1 class="text-4xl font-bold text-blue-600 mb-2">Amazon Review Analyzer</h1>
37
+ <p class="text-gray-600 text-lg">Compare products based on customer feedback analysis</p>
38
+ </header>
39
+
40
+ <div class="grid grid-cols-1 lg:grid-cols-3 gap-8">
41
+ <!-- Left Column - Input Section -->
42
+ <div class="bg-white p-6 rounded-lg shadow-md lg:col-span-1">
43
+ <h2 class="text-xl font-semibold mb-4 text-gray-800">Product Selection</h2>
44
+
45
+ <div class="mb-6">
46
+ <label class="block text-gray-700 mb-2">Product A</label>
47
+ <select id="productA" class="w-full p-2 border border-gray-300 rounded-md focus:ring-blue-500 focus:border-blue-500">
48
+ <option value="product1">Wireless Earbuds X200</option>
49
+ <option value="product2">Smart Watch Pro</option>
50
+ <option value="product3">Bluetooth Speaker Z5</option>
51
+ </select>
52
+ </div>
53
+
54
+ <div class="mb-6">
55
+ <label class="block text-gray-700 mb-2">Product B</label>
56
+ <select id="productB" class="w-full p-2 border border-gray-300 rounded-md focus:ring-blue-500 focus:border-blue-500">
57
+ <option value="product2">Smart Watch Pro</option>
58
+ <option value="product1">Wireless Earbuds X200</option>
59
+ <option value="product3">Bluetooth Speaker Z5</option>
60
+ </select>
61
+ </div>
62
+
63
+ <button id="compareBtn" class="w-full bg-blue-600 text-white py-2 px-4 rounded-md hover:bg-blue-700 transition duration-200">
64
+ Compare Products
65
+ </button>
66
+
67
+ <div class="mt-8">
68
+ <h2 class="text-xl font-semibold mb-4 text-gray-800">Set Your Priorities</h2>
69
+ <p class="text-sm text-gray-500 mb-4">Adjust the sliders to reflect what matters most to you (total must be 100%)</p>
70
+
71
+ <div class="space-y-4">
72
+ <div>
73
+ <label class="block text-gray-700 mb-1">Price</label>
74
+ <input type="range" min="0" max="100" value="20" class="w-full priority-slider" id="pricePriority">
75
+ <div class="flex justify-between text-xs text-gray-500">
76
+ <span>0%</span>
77
+ <span id="priceValue">20%</span>
78
+ <span>100%</span>
79
+ </div>
80
+ </div>
81
+
82
+ <div>
83
+ <label class="block text-gray-700 mb-1">Durability</label>
84
+ <input type="range" min="0" max="100" value="20" class="w-full priority-slider" id="durabilityPriority">
85
+ <div class="flex justify-between text-xs text-gray-500">
86
+ <span>0%</span>
87
+ <span id="durabilityValue">20%</span>
88
+ <span>100%</span>
89
+ </div>
90
+ </div>
91
+
92
+ <div>
93
+ <label class="block text-gray-700 mb-1">Features</label>
94
+ <input type="range" min="0" max="100" value="20" class="w-full priority-slider" id="featuresPriority">
95
+ <div class="flex justify-between text-xs text-gray-500">
96
+ <span>0%</span>
97
+ <span id="featuresValue">20%</span>
98
+ <span>100%</span>
99
+ </div>
100
+ </div>
101
+
102
+ <div>
103
+ <label class="block text-gray-700 mb-1">Usability</label>
104
+ <input type="range" min="0" max="100" value="20" class="w-full priority-slider" id="usabilityPriority">
105
+ <div class="flex justify-between text-xs text-gray-500">
106
+ <span>0%</span>
107
+ <span id="usabilityValue">20%</span>
108
+ <span>100%</span>
109
+ </div>
110
+ </div>
111
+
112
+ <div>
113
+ <label class="block text-gray-700 mb-1">Customer Service</label>
114
+ <input type="range" min="0" max="100" value="20" class="w-full priority-slider" id="servicePriority">
115
+ <div class="flex justify-between text-xs text-gray-500">
116
+ <span>0%</span>
117
+ <span id="serviceValue">20%</span>
118
+ <span>100%</span>
119
+ </div>
120
+ </div>
121
+ </div>
122
+
123
+ <div class="mt-4 p-3 bg-blue-50 rounded-md">
124
+ <p class="text-sm text-blue-800">Total: <span id="totalPriority">100</span>%</p>
125
+ </div>
126
+ </div>
127
+ </div>
128
+
129
+ <!-- Right Column - Results Section -->
130
+ <div class="bg-white p-6 rounded-lg shadow-md lg:col-span-2">
131
+ <div id="resultsSection" class="hidden">
132
+ <h2 class="text-2xl font-semibold mb-6 text-gray-800">Comparison Results</h2>
133
+
134
+ <!-- Recommendation Banner -->
135
+ <div id="recommendationBanner" class="mb-8 p-4 rounded-md bg-gradient-to-r from-blue-50 to-indigo-50 border border-blue-200">
136
+ <div class="flex items-center">
137
+ <div class="mr-4 p-2 bg-blue-100 rounded-full">
138
+ <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-blue-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
139
+ <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
140
+ </svg>
141
+ </div>
142
+ <div>
143
+ <h3 class="font-bold text-lg text-blue-800" id="recommendationTitle">Our Recommendation</h3>
144
+ <p class="text-gray-700" id="recommendationText"></p>
145
+ </div>
146
+ </div>
147
+ </div>
148
+
149
+ <!-- Radar Chart -->
150
+ <div class="mb-8">
151
+ <h3 class="text-lg font-medium text-gray-800 mb-4">Category Comparison</h3>
152
+ <div class="radar-chart-container">
153
+ <canvas id="radarChart"></canvas>
154
+ </div>
155
+ </div>
156
+
157
+ <!-- Scores Table -->
158
+ <div class="mb-8 overflow-x-auto">
159
+ <h3 class="text-lg font-medium text-gray-800 mb-4">Detailed Scores</h3>
160
+ <table class="min-w-full divide-y divide-gray-200">
161
+ <thead class="bg-gray-50">
162
+ <tr>
163
+ <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Category</th>
164
+ <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Weight</th>
165
+ <th id="productAName" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Product A</th>
166
+ <th id="productBName" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Product B</th>
167
+ </tr>
168
+ </thead>
169
+ <tbody class="bg-white divide-y divide-gray-200">
170
+ <tr>
171
+ <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">Price</td>
172
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500"><span id="weightPrice">20</span>%</td>
173
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500"><span id="productAPrice">0</span>/100</td>
174
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500"><span id="productBPrice">0</span>/100</td>
175
+ </tr>
176
+ <tr class="bg-gray-50">
177
+ <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">Durability</td>
178
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500"><span id="weightDurability">20</span>%</td>
179
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500"><span id="productADurability">0</span>/100</td>
180
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500"><span id="productBDurability">0</span>/100</td>
181
+ </tr>
182
+ <tr>
183
+ <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">Features</td>
184
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500"><span id="weightFeatures">20</span>%</td>
185
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500"><span id="productAFeatures">0</span>/100</td>
186
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500"><span id="productBFeatures">0</span>/100</td>
187
+ </tr>
188
+ <tr class="bg-gray-50">
189
+ <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">Usability</td>
190
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500"><span id="weightUsability">20</span>%</td>
191
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500"><span id="productAUsability">0</span>/100</td>
192
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500"><span id="productBUsability">0</span>/100</td>
193
+ </tr>
194
+ <tr>
195
+ <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">Customer Service</td>
196
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500"><span id="weightService">20</span>%</td>
197
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500"><span id="productAService">0</span>/100</td>
198
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500"><span id="productBService">0</span>/100</td>
199
+ </tr>
200
+ <tr class="bg-blue-50 border-t-2 border-blue-200">
201
+ <td class="px-6 py-4 whitespace-nowrap text-sm font-bold text-blue-800">Overall Score</td>
202
+ <td class="px-6 py-4 whitespace-nowrap text-sm font-bold text-blue-800">100%</td>
203
+ <td class="px-6 py-4 whitespace-nowrap text-sm font-bold text-blue-800"><span id="productAOverall">0</span>/100</td>
204
+ <td class="px-6 py-4 whitespace-nowrap text-sm font-bold text-blue-800"><span id="productBOverall">0</span>/100</td>
205
+ </tr>
206
+ </tbody>
207
+ </table>
208
+ </div>
209
+
210
+ <!-- Review Snippets -->
211
+ <div>
212
+ <h3 class="text-lg font-medium text-gray-800 mb-4">Sample Review Highlights</h3>
213
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
214
+ <div class="border border-gray-200 rounded-lg p-4">
215
+ <h4 class="font-medium text-blue-600 mb-2" id="productAName2">Product A</h4>
216
+ <div class="space-y-3">
217
+ <div class="text-sm">
218
+ <p class="font-medium text-gray-700">Price:</p>
219
+ <p class="text-gray-600 italic" id="productAPriceReview">"Great value for money compared to competitors."</p>
220
+ </div>
221
+ <div class="text-sm">
222
+ <p class="font-medium text-gray-700">Durability:</p>
223
+ <p class="text-gray-600 italic" id="productADurabilityReview">"Held up well after 6 months of daily use."</p>
224
+ </div>
225
+ <div class="text-sm">
226
+ <p class="font-medium text-gray-700">Features:</p>
227
+ <p class="text-gray-600 italic" id="productAFeaturesReview">"Has all the features I need but some are hard to find."</p>
228
+ </div>
229
+ </div>
230
+ </div>
231
+ <div class="border border-gray-200 rounded-lg p-4">
232
+ <h4 class="font-medium text-blue-600 mb-2" id="productBName2">Product B</h4>
233
+ <div class="space-y-3">
234
+ <div class="text-sm">
235
+ <p class="font-medium text-gray-700">Price:</p>
236
+ <p class="text-gray-600 italic" id="productBPriceReview">"A bit expensive but you get what you pay for."</p>
237
+ </div>
238
+ <div class="text-sm">
239
+ <p class="font-medium text-gray-700">Durability:</p>
240
+ <p class="text-gray-600 italic" id="productBDurabilityReview">"Screen scratched within the first month."</p>
241
+ </div>
242
+ <div class="text-sm">
243
+ <p class="font-medium text-gray-700">Features:</p>
244
+ <p class="text-gray-600 italic" id="productBFeaturesReview">"Innovative features that competitors don't have."</p>
245
+ </div>
246
+ </div>
247
+ </div>
248
+ </div>
249
+ </div>
250
+ </div>
251
+
252
+ <!-- Empty State -->
253
+ <div id="emptyState" class="text-center py-12">
254
+ <svg xmlns="http://www.w3.org/2000/svg" class="mx-auto h-12 w-12 text-gray-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
255
+ <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9.172 16.172a4 4 0 015.656 0M9 10h.01M15 10h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
256
+ </svg>
257
+ <h3 class="mt-2 text-lg font-medium text-gray-900">No comparison yet</h3>
258
+ <p class="mt-1 text-gray-500">Select two products and click "Compare Products" to see results.</p>
259
+ </div>
260
+ </div>
261
+ </div>
262
+ </div>
263
+
264
+ <script>
265
+ // Mock data for products
266
+ const products = {
267
+ product1: {
268
+ name: "Wireless Earbuds X200",
269
+ scores: {
270
+ price: 85,
271
+ durability: 70,
272
+ features: 75,
273
+ usability: 80,
274
+ service: 65
275
+ },
276
+ reviews: {
277
+ price: "Great value for money compared to competitors.",
278
+ durability: "Held up well after 6 months of daily use.",
279
+ features: "Has all the features I need but some are hard to find.",
280
+ usability: "Very comfortable and easy to pair with devices.",
281
+ service: "Had to contact support once, response was slow."
282
+ }
283
+ },
284
+ product2: {
285
+ name: "Smart Watch Pro",
286
+ scores: {
287
+ price: 60,
288
+ durability: 65,
289
+ features: 90,
290
+ usability: 85,
291
+ service: 80
292
+ },
293
+ reviews: {
294
+ price: "A bit expensive but you get what you pay for.",
295
+ durability: "Screen scratched within the first month.",
296
+ features: "Innovative features that competitors don't have.",
297
+ usability: "Interface is intuitive and responsive.",
298
+ service: "Excellent warranty service when I had an issue."
299
+ }
300
+ },
301
+ product3: {
302
+ name: "Bluetooth Speaker Z5",
303
+ scores: {
304
+ price: 75,
305
+ durability: 85,
306
+ features: 70,
307
+ usability: 75,
308
+ service: 70
309
+ },
310
+ reviews: {
311
+ price: "Mid-range price with premium sound quality.",
312
+ durability: "Built like a tank - survived multiple drops.",
313
+ features: "Basic features but does them very well.",
314
+ usability: "Simple controls but the app could be better.",
315
+ service: "Average response time for customer inquiries."
316
+ }
317
+ }
318
+ };
319
+
320
+ // DOM elements
321
+ const compareBtn = document.getElementById('compareBtn');
322
+ const resultsSection = document.getElementById('resultsSection');
323
+ const emptyState = document.getElementById('emptyState');
324
+ const recommendationText = document.getElementById('recommendationText');
325
+ const recommendationTitle = document.getElementById('recommendationTitle');
326
+ const recommendationBanner = document.getElementById('recommendationBanner');
327
+
328
+ // Slider elements
329
+ const sliders = [
330
+ { element: document.getElementById('pricePriority'), value: document.getElementById('priceValue'), weight: document.getElementById('weightPrice') },
331
+ { element: document.getElementById('durabilityPriority'), value: document.getElementById('durabilityValue'), weight: document.getElementById('weightDurability') },
332
+ { element: document.getElementById('featuresPriority'), value: document.getElementById('featuresValue'), weight: document.getElementById('weightFeatures') },
333
+ { element: document.getElementById('usabilityPriority'), value: document.getElementById('usabilityValue'), weight: document.getElementById('weightUsability') },
334
+ { element: document.getElementById('servicePriority'), value: document.getElementById('serviceValue'), weight: document.getElementById('weightService') }
335
+ ];
336
+
337
+ const totalPriority = document.getElementById('totalPriority');
338
+
339
+ // Product score elements
340
+ const productElements = {
341
+ productA: {
342
+ name: [document.getElementById('productAName'), document.getElementById('productAName2')],
343
+ price: document.getElementById('productAPrice'),
344
+ durability: document.getElementById('productADurability'),
345
+ features: document.getElementById('productAFeatures'),
346
+ usability: document.getElementById('productAUsability'),
347
+ service: document.getElementById('productAService'),
348
+ overall: document.getElementById('productAOverall'),
349
+ reviews: {
350
+ price: document.getElementById('productAPriceReview'),
351
+ durability: document.getElementById('productADurabilityReview'),
352
+ features: document.getElementById('productAFeaturesReview'),
353
+ usability: document.getElementById('productAUsabilityReview'),
354
+ service: document.getElementById('productAServiceReview')
355
+ }
356
+ },
357
+ productB: {
358
+ name: [document.getElementById('productBName'), document.getElementById('productBName2')],
359
+ price: document.getElementById('productBPrice'),
360
+ durability: document.getElementById('productBDurability'),
361
+ features: document.getElementById('productBFeatures'),
362
+ usability: document.getElementById('productBUsability'),
363
+ service: document.getElementById('productBService'),
364
+ overall: document.getElementById('productBOverall'),
365
+ reviews: {
366
+ price: document.getElementById('productBPriceReview'),
367
+ durability: document.getElementById('productBDurabilityReview'),
368
+ features: document.getElementById('productBFeaturesReview'),
369
+ usability: document.getElementById('productBUsabilityReview'),
370
+ service: document.getElementById('productBServiceReview')
371
+ }
372
+ }
373
+ };
374
+
375
+ // Radar chart
376
+ let radarChart = null;
377
+
378
+ // Initialize slider values
379
+ function initializeSliders() {
380
+ sliders.forEach(slider => {
381
+ slider.value.textContent = slider.element.value + '%';
382
+ slider.weight.textContent = slider.element.value;
383
+
384
+ slider.element.addEventListener('input', () => {
385
+ updateSliders();
386
+ });
387
+ });
388
+
389
+ updateSliders();
390
+ }
391
+
392
+ // Update slider values and ensure they sum to 100
393
+ function updateSliders() {
394
+ const total = sliders.reduce((sum, slider) => sum + parseInt(slider.element.value), 0);
395
+
396
+ if (total !== 100) {
397
+ // Adjust the first slider to make the total 100
398
+ const difference = 100 - total;
399
+ const firstSliderValue = parseInt(sliders[0].element.value) + difference;
400
+ sliders[0].element.value = firstSliderValue;
401
+ sliders[0].value.textContent = firstSliderValue + '%';
402
+ sliders[0].weight.textContent = firstSliderValue;
403
+ }
404
+
405
+ // Update all value displays
406
+ sliders.forEach(slider => {
407
+ slider.value.textContent = slider.element.value + '%';
408
+ slider.weight.textContent = slider.element.value;
409
+ });
410
+
411
+ totalPriority.textContent = sliders.reduce((sum, slider) => sum + parseInt(slider.element.value), 0);
412
+ }
413
+
414
+ // Compare products
415
+ function compareProducts() {
416
+ const productAId = document.getElementById('productA').value;
417
+ const productBId = document.getElementById('productB').value;
418
+
419
+ if (productAId === productBId) {
420
+ alert("Please select two different products to compare.");
421
+ return;
422
+ }
423
+
424
+ const productA = products[productAId];
425
+ const productB = products[productBId];
426
+
427
+ // Update product names
428
+ productElements.productA.name.forEach(el => el.textContent = productA.name);
429
+ productElements.productB.name.forEach(el => el.textContent = productB.name);
430
+
431
+ // Update scores
432
+ updateProductScores('productA', productA);
433
+ updateProductScores('productB', productB);
434
+
435
+ // Calculate weighted scores
436
+ const weights = {
437
+ price: parseInt(sliders[0].element.value) / 100,
438
+ durability: parseInt(sliders[1].element.value) / 100,
439
+ features: parseInt(sliders[2].element.value) / 100,
440
+ usability: parseInt(sliders[3].element.value) / 100,
441
+ service: parseInt(sliders[4].element.value) / 100
442
+ };
443
+
444
+ const overallA = calculateOverallScore(productA.scores, weights);
445
+ const overallB = calculateOverallScore(productB.scores, weights);
446
+
447
+ productElements.productA.overall.textContent = overallA.toFixed(1);
448
+ productElements.productB.overall.textContent = overallB.toFixed(1);
449
+
450
+ // Update recommendation
451
+ updateRecommendation(productA.name, productB.name, overallA, overallB);
452
+
453
+ // Update radar chart
454
+ updateRadarChart(productA, productB);
455
+
456
+ // Show results
457
+ emptyState.classList.add('hidden');
458
+ resultsSection.classList.remove('hidden');
459
+ }
460
+
461
+ // Update individual product scores
462
+ function updateProductScores(productKey, productData) {
463
+ const elements = productElements[productKey];
464
+
465
+ elements.price.textContent = productData.scores.price;
466
+ elements.durability.textContent = productData.scores.durability;
467
+ elements.features.textContent = productData.scores.features;
468
+ elements.usability.textContent = productData.scores.usability;
469
+ elements.service.textContent = productData.scores.service;
470
+
471
+ // Update review snippets
472
+ elements.reviews.price.textContent = `"${productData.reviews.price}"`;
473
+ elements.reviews.durability.textContent = `"${productData.reviews.durability}"`;
474
+ elements.reviews.features.textContent = `"${productData.reviews.features}"`;
475
+ elements.reviews.usability.textContent = `"${productData.reviews.usability}"`;
476
+ elements.reviews.service.textContent = `"${productData.reviews.service}"`;
477
+ }
478
+
479
+ // Calculate overall score
480
+ function calculateOverallScore(scores, weights) {
481
+ return (
482
+ scores.price * weights.price +
483
+ scores.durability * weights.durability +
484
+ scores.features * weights.features +
485
+ scores.usability * weights.usability +
486
+ scores.service * weights.service
487
+ );
488
+ }
489
+
490
+ // Update recommendation
491
+ function updateRecommendation(nameA, nameB, scoreA, scoreB) {
492
+ if (scoreA > scoreB) {
493
+ recommendationTitle.textContent = `We recommend ${nameA}`;
494
+ recommendationText.textContent = `Based on your priorities, ${nameA} scored higher (${scoreA.toFixed(1)} vs ${scoreB.toFixed(1)}) with better performance in key categories.`;
495
+ recommendationBanner.className = "mb-8 p-4 rounded-md bg-gradient-to-r from-blue-50 to-indigo-50 border border-blue-200";
496
+ } else if (scoreB > scoreA) {
497
+ recommendationTitle.textContent = `We recommend ${nameB}`;
498
+ recommendationText.textContent = `Based on your priorities, ${nameB} scored higher (${scoreB.toFixed(1)} vs ${scoreA.toFixed(1)}) with better performance in key categories.`;
499
+ recommendationBanner.className = "mb-8 p-4 rounded-md bg-gradient-to-r from-green-50 to-teal-50 border border-green-200";
500
+ } else {
501
+ recommendationTitle.textContent = "Both products are equally good";
502
+ recommendationText.textContent = `Both ${nameA} and ${nameB} scored ${scoreA.toFixed(1)} based on your priorities. Consider other factors like brand preference or design.`;
503
+ recommendationBanner.className = "mb-8 p-4 rounded-md bg-gradient-to-r from-purple-50 to-pink-50 border border-purple-200";
504
+ }
505
+ }
506
+
507
+ // Update radar chart
508
+ function updateRadarChart(productA, productB) {
509
+ const ctx = document.getElementById('radarChart').getContext('2d');
510
+
511
+ const data = {
512
+ labels: ['Price', 'Durability', 'Features', 'Usability', 'Customer Service'],
513
+ datasets: [
514
+ {
515
+ label: productA.name,
516
+ data: [
517
+ productA.scores.price,
518
+ productA.scores.durability,
519
+ productA.scores.features,
520
+ productA.scores.usability,
521
+ productA.scores.service
522
+ ],
523
+ backgroundColor: 'rgba(59, 130, 246, 0.2)',
524
+ borderColor: 'rgba(59, 130, 246, 1)',
525
+ borderWidth: 2,
526
+ pointBackgroundColor: 'rgba(59, 130, 246, 1)'
527
+ },
528
+ {
529
+ label: productB.name,
530
+ data: [
531
+ productB.scores.price,
532
+ productB.scores.durability,
533
+ productB.scores.features,
534
+ productB.scores.usability,
535
+ productB.scores.service
536
+ ],
537
+ backgroundColor: 'rgba(16, 185, 129, 0.2)',
538
+ borderColor: 'rgba(16, 185, 129, 1)',
539
+ borderWidth: 2,
540
+ pointBackgroundColor: 'rgba(16, 185, 129, 1)'
541
+ }
542
+ ]
543
+ };
544
+
545
+ const config = {
546
+ type: 'radar',
547
+ data: data,
548
+ options: {
549
+ responsive: true,
550
+ maintainAspectRatio: false,
551
+ scales: {
552
+ r: {
553
+ angleLines: {
554
+ display: true
555
+ },
556
+ suggestedMin: 0,
557
+ suggestedMax: 100,
558
+ ticks: {
559
+ stepSize: 20
560
+ }
561
+ }
562
+ },
563
+ plugins: {
564
+ legend: {
565
+ position: 'top',
566
+ },
567
+ tooltip: {
568
+ callbacks: {
569
+ label: function(context) {
570
+ return context.dataset.label + ': ' + context.raw + '/100';
571
+ }
572
+ }
573
+ }
574
+ }
575
+ }
576
+ };
577
+
578
+ if (radarChart) {
579
+ radarChart.destroy();
580
+ }
581
+
582
+ radarChart = new Chart(ctx, config);
583
+ }
584
+
585
+ // Event listeners
586
+ compareBtn.addEventListener('click', compareProducts);
587
+
588
+ // Initialize
589
+ initializeSliders();
590
+ </script>
591
+ <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=apamplona2011/amazoncomparisontool" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
592
+ </html>