Spaces:
Configuration error
Configuration error
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
928619c
verified
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Product Comparison Tool</title> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/chart.js"></script> | |
| <style> | |
| .radar-chart-container { | |
| position: relative; | |
| height: 300px; | |
| width: 100%; | |
| } | |
| .priority-slider::-webkit-slider-thumb { | |
| -webkit-appearance: none; | |
| appearance: none; | |
| width: 20px; | |
| height: 20px; | |
| border-radius: 50%; | |
| background: #3b82f6; | |
| cursor: pointer; | |
| } | |
| .priority-slider::-moz-range-thumb { | |
| width: 20px; | |
| height: 20px; | |
| border-radius: 50%; | |
| background: #3b82f6; | |
| cursor: pointer; | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-gray-50 min-h-screen"> | |
| <div class="container mx-auto px-4 py-8"> | |
| <header class="text-center mb-10"> | |
| <h1 class="text-4xl font-bold text-blue-600 mb-2">Amazon Review Analyzer</h1> | |
| <p class="text-gray-600 text-lg">Compare products based on customer feedback analysis</p> | |
| </header> | |
| <div class="grid grid-cols-1 lg:grid-cols-3 gap-8"> | |
| <!-- Left Column - Input Section --> | |
| <div class="bg-white p-6 rounded-lg shadow-md lg:col-span-1"> | |
| <h2 class="text-xl font-semibold mb-4 text-gray-800">Product Selection</h2> | |
| <div class="mb-6"> | |
| <label class="block text-gray-700 mb-2">Product A</label> | |
| <select id="productA" class="w-full p-2 border border-gray-300 rounded-md focus:ring-blue-500 focus:border-blue-500"> | |
| <option value="product1">Wireless Earbuds X200</option> | |
| <option value="product2">Smart Watch Pro</option> | |
| <option value="product3">Bluetooth Speaker Z5</option> | |
| </select> | |
| </div> | |
| <div class="mb-6"> | |
| <label class="block text-gray-700 mb-2">Product B</label> | |
| <select id="productB" class="w-full p-2 border border-gray-300 rounded-md focus:ring-blue-500 focus:border-blue-500"> | |
| <option value="product2">Smart Watch Pro</option> | |
| <option value="product1">Wireless Earbuds X200</option> | |
| <option value="product3">Bluetooth Speaker Z5</option> | |
| </select> | |
| </div> | |
| <button id="compareBtn" class="w-full bg-blue-600 text-white py-2 px-4 rounded-md hover:bg-blue-700 transition duration-200"> | |
| Compare Products | |
| </button> | |
| <div class="mt-8"> | |
| <h2 class="text-xl font-semibold mb-4 text-gray-800">Set Your Priorities</h2> | |
| <p class="text-sm text-gray-500 mb-4">Adjust the sliders to reflect what matters most to you (total must be 100%)</p> | |
| <div class="space-y-4"> | |
| <div> | |
| <label class="block text-gray-700 mb-1">Price</label> | |
| <input type="range" min="0" max="100" value="20" class="w-full priority-slider" id="pricePriority"> | |
| <div class="flex justify-between text-xs text-gray-500"> | |
| <span>0%</span> | |
| <span id="priceValue">20%</span> | |
| <span>100%</span> | |
| </div> | |
| </div> | |
| <div> | |
| <label class="block text-gray-700 mb-1">Durability</label> | |
| <input type="range" min="0" max="100" value="20" class="w-full priority-slider" id="durabilityPriority"> | |
| <div class="flex justify-between text-xs text-gray-500"> | |
| <span>0%</span> | |
| <span id="durabilityValue">20%</span> | |
| <span>100%</span> | |
| </div> | |
| </div> | |
| <div> | |
| <label class="block text-gray-700 mb-1">Features</label> | |
| <input type="range" min="0" max="100" value="20" class="w-full priority-slider" id="featuresPriority"> | |
| <div class="flex justify-between text-xs text-gray-500"> | |
| <span>0%</span> | |
| <span id="featuresValue">20%</span> | |
| <span>100%</span> | |
| </div> | |
| </div> | |
| <div> | |
| <label class="block text-gray-700 mb-1">Usability</label> | |
| <input type="range" min="0" max="100" value="20" class="w-full priority-slider" id="usabilityPriority"> | |
| <div class="flex justify-between text-xs text-gray-500"> | |
| <span>0%</span> | |
| <span id="usabilityValue">20%</span> | |
| <span>100%</span> | |
| </div> | |
| </div> | |
| <div> | |
| <label class="block text-gray-700 mb-1">Customer Service</label> | |
| <input type="range" min="0" max="100" value="20" class="w-full priority-slider" id="servicePriority"> | |
| <div class="flex justify-between text-xs text-gray-500"> | |
| <span>0%</span> | |
| <span id="serviceValue">20%</span> | |
| <span>100%</span> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="mt-4 p-3 bg-blue-50 rounded-md"> | |
| <p class="text-sm text-blue-800">Total: <span id="totalPriority">100</span>%</p> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Right Column - Results Section --> | |
| <div class="bg-white p-6 rounded-lg shadow-md lg:col-span-2"> | |
| <div id="resultsSection" class="hidden"> | |
| <h2 class="text-2xl font-semibold mb-6 text-gray-800">Comparison Results</h2> | |
| <!-- Recommendation Banner --> | |
| <div id="recommendationBanner" class="mb-8 p-4 rounded-md bg-gradient-to-r from-blue-50 to-indigo-50 border border-blue-200"> | |
| <div class="flex items-center"> | |
| <div class="mr-4 p-2 bg-blue-100 rounded-full"> | |
| <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"> | |
| <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" /> | |
| </svg> | |
| </div> | |
| <div> | |
| <h3 class="font-bold text-lg text-blue-800" id="recommendationTitle">Our Recommendation</h3> | |
| <p class="text-gray-700" id="recommendationText"></p> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Radar Chart --> | |
| <div class="mb-8"> | |
| <h3 class="text-lg font-medium text-gray-800 mb-4">Category Comparison</h3> | |
| <div class="radar-chart-container"> | |
| <canvas id="radarChart"></canvas> | |
| </div> | |
| </div> | |
| <!-- Scores Table --> | |
| <div class="mb-8 overflow-x-auto"> | |
| <h3 class="text-lg font-medium text-gray-800 mb-4">Detailed Scores</h3> | |
| <table class="min-w-full divide-y divide-gray-200"> | |
| <thead class="bg-gray-50"> | |
| <tr> | |
| <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Category</th> | |
| <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Weight</th> | |
| <th id="productAName" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Product A</th> | |
| <th id="productBName" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Product B</th> | |
| </tr> | |
| </thead> | |
| <tbody class="bg-white divide-y divide-gray-200"> | |
| <tr> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">Price</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500"><span id="weightPrice">20</span>%</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500"><span id="productAPrice">0</span>/100</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500"><span id="productBPrice">0</span>/100</td> | |
| </tr> | |
| <tr class="bg-gray-50"> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">Durability</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500"><span id="weightDurability">20</span>%</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500"><span id="productADurability">0</span>/100</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500"><span id="productBDurability">0</span>/100</td> | |
| </tr> | |
| <tr> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">Features</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500"><span id="weightFeatures">20</span>%</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500"><span id="productAFeatures">0</span>/100</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500"><span id="productBFeatures">0</span>/100</td> | |
| </tr> | |
| <tr class="bg-gray-50"> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">Usability</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500"><span id="weightUsability">20</span>%</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500"><span id="productAUsability">0</span>/100</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500"><span id="productBUsability">0</span>/100</td> | |
| </tr> | |
| <tr> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">Customer Service</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500"><span id="weightService">20</span>%</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500"><span id="productAService">0</span>/100</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500"><span id="productBService">0</span>/100</td> | |
| </tr> | |
| <tr class="bg-blue-50 border-t-2 border-blue-200"> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm font-bold text-blue-800">Overall Score</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm font-bold text-blue-800">100%</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm font-bold text-blue-800"><span id="productAOverall">0</span>/100</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm font-bold text-blue-800"><span id="productBOverall">0</span>/100</td> | |
| </tr> | |
| </tbody> | |
| </table> | |
| </div> | |
| <!-- Review Snippets --> | |
| <div> | |
| <h3 class="text-lg font-medium text-gray-800 mb-4">Sample Review Highlights</h3> | |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-4"> | |
| <div class="border border-gray-200 rounded-lg p-4"> | |
| <h4 class="font-medium text-blue-600 mb-2" id="productAName2">Product A</h4> | |
| <div class="space-y-3"> | |
| <div class="text-sm"> | |
| <p class="font-medium text-gray-700">Price:</p> | |
| <p class="text-gray-600 italic" id="productAPriceReview">"Great value for money compared to competitors."</p> | |
| </div> | |
| <div class="text-sm"> | |
| <p class="font-medium text-gray-700">Durability:</p> | |
| <p class="text-gray-600 italic" id="productADurabilityReview">"Held up well after 6 months of daily use."</p> | |
| </div> | |
| <div class="text-sm"> | |
| <p class="font-medium text-gray-700">Features:</p> | |
| <p class="text-gray-600 italic" id="productAFeaturesReview">"Has all the features I need but some are hard to find."</p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="border border-gray-200 rounded-lg p-4"> | |
| <h4 class="font-medium text-blue-600 mb-2" id="productBName2">Product B</h4> | |
| <div class="space-y-3"> | |
| <div class="text-sm"> | |
| <p class="font-medium text-gray-700">Price:</p> | |
| <p class="text-gray-600 italic" id="productBPriceReview">"A bit expensive but you get what you pay for."</p> | |
| </div> | |
| <div class="text-sm"> | |
| <p class="font-medium text-gray-700">Durability:</p> | |
| <p class="text-gray-600 italic" id="productBDurabilityReview">"Screen scratched within the first month."</p> | |
| </div> | |
| <div class="text-sm"> | |
| <p class="font-medium text-gray-700">Features:</p> | |
| <p class="text-gray-600 italic" id="productBFeaturesReview">"Innovative features that competitors don't have."</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Empty State --> | |
| <div id="emptyState" class="text-center py-12"> | |
| <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"> | |
| <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" /> | |
| </svg> | |
| <h3 class="mt-2 text-lg font-medium text-gray-900">No comparison yet</h3> | |
| <p class="mt-1 text-gray-500">Select two products and click "Compare Products" to see results.</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <script> | |
| // Mock data for products | |
| const products = { | |
| product1: { | |
| name: "Wireless Earbuds X200", | |
| scores: { | |
| price: 85, | |
| durability: 70, | |
| features: 75, | |
| usability: 80, | |
| service: 65 | |
| }, | |
| reviews: { | |
| price: "Great value for money compared to competitors.", | |
| durability: "Held up well after 6 months of daily use.", | |
| features: "Has all the features I need but some are hard to find.", | |
| usability: "Very comfortable and easy to pair with devices.", | |
| service: "Had to contact support once, response was slow." | |
| } | |
| }, | |
| product2: { | |
| name: "Smart Watch Pro", | |
| scores: { | |
| price: 60, | |
| durability: 65, | |
| features: 90, | |
| usability: 85, | |
| service: 80 | |
| }, | |
| reviews: { | |
| price: "A bit expensive but you get what you pay for.", | |
| durability: "Screen scratched within the first month.", | |
| features: "Innovative features that competitors don't have.", | |
| usability: "Interface is intuitive and responsive.", | |
| service: "Excellent warranty service when I had an issue." | |
| } | |
| }, | |
| product3: { | |
| name: "Bluetooth Speaker Z5", | |
| scores: { | |
| price: 75, | |
| durability: 85, | |
| features: 70, | |
| usability: 75, | |
| service: 70 | |
| }, | |
| reviews: { | |
| price: "Mid-range price with premium sound quality.", | |
| durability: "Built like a tank - survived multiple drops.", | |
| features: "Basic features but does them very well.", | |
| usability: "Simple controls but the app could be better.", | |
| service: "Average response time for customer inquiries." | |
| } | |
| } | |
| }; | |
| // DOM elements | |
| const compareBtn = document.getElementById('compareBtn'); | |
| const resultsSection = document.getElementById('resultsSection'); | |
| const emptyState = document.getElementById('emptyState'); | |
| const recommendationText = document.getElementById('recommendationText'); | |
| const recommendationTitle = document.getElementById('recommendationTitle'); | |
| const recommendationBanner = document.getElementById('recommendationBanner'); | |
| // Slider elements | |
| const sliders = [ | |
| { element: document.getElementById('pricePriority'), value: document.getElementById('priceValue'), weight: document.getElementById('weightPrice') }, | |
| { element: document.getElementById('durabilityPriority'), value: document.getElementById('durabilityValue'), weight: document.getElementById('weightDurability') }, | |
| { element: document.getElementById('featuresPriority'), value: document.getElementById('featuresValue'), weight: document.getElementById('weightFeatures') }, | |
| { element: document.getElementById('usabilityPriority'), value: document.getElementById('usabilityValue'), weight: document.getElementById('weightUsability') }, | |
| { element: document.getElementById('servicePriority'), value: document.getElementById('serviceValue'), weight: document.getElementById('weightService') } | |
| ]; | |
| const totalPriority = document.getElementById('totalPriority'); | |
| // Product score elements | |
| const productElements = { | |
| productA: { | |
| name: [document.getElementById('productAName'), document.getElementById('productAName2')], | |
| price: document.getElementById('productAPrice'), | |
| durability: document.getElementById('productADurability'), | |
| features: document.getElementById('productAFeatures'), | |
| usability: document.getElementById('productAUsability'), | |
| service: document.getElementById('productAService'), | |
| overall: document.getElementById('productAOverall'), | |
| reviews: { | |
| price: document.getElementById('productAPriceReview'), | |
| durability: document.getElementById('productADurabilityReview'), | |
| features: document.getElementById('productAFeaturesReview'), | |
| usability: document.getElementById('productAUsabilityReview'), | |
| service: document.getElementById('productAServiceReview') | |
| } | |
| }, | |
| productB: { | |
| name: [document.getElementById('productBName'), document.getElementById('productBName2')], | |
| price: document.getElementById('productBPrice'), | |
| durability: document.getElementById('productBDurability'), | |
| features: document.getElementById('productBFeatures'), | |
| usability: document.getElementById('productBUsability'), | |
| service: document.getElementById('productBService'), | |
| overall: document.getElementById('productBOverall'), | |
| reviews: { | |
| price: document.getElementById('productBPriceReview'), | |
| durability: document.getElementById('productBDurabilityReview'), | |
| features: document.getElementById('productBFeaturesReview'), | |
| usability: document.getElementById('productBUsabilityReview'), | |
| service: document.getElementById('productBServiceReview') | |
| } | |
| } | |
| }; | |
| // Radar chart | |
| let radarChart = null; | |
| // Initialize slider values | |
| function initializeSliders() { | |
| sliders.forEach(slider => { | |
| slider.value.textContent = slider.element.value + '%'; | |
| slider.weight.textContent = slider.element.value; | |
| slider.element.addEventListener('input', () => { | |
| updateSliders(); | |
| }); | |
| }); | |
| updateSliders(); | |
| } | |
| // Update slider values and ensure they sum to 100 | |
| function updateSliders() { | |
| const total = sliders.reduce((sum, slider) => sum + parseInt(slider.element.value), 0); | |
| if (total !== 100) { | |
| // Adjust the first slider to make the total 100 | |
| const difference = 100 - total; | |
| const firstSliderValue = parseInt(sliders[0].element.value) + difference; | |
| sliders[0].element.value = firstSliderValue; | |
| sliders[0].value.textContent = firstSliderValue + '%'; | |
| sliders[0].weight.textContent = firstSliderValue; | |
| } | |
| // Update all value displays | |
| sliders.forEach(slider => { | |
| slider.value.textContent = slider.element.value + '%'; | |
| slider.weight.textContent = slider.element.value; | |
| }); | |
| totalPriority.textContent = sliders.reduce((sum, slider) => sum + parseInt(slider.element.value), 0); | |
| } | |
| // Compare products | |
| function compareProducts() { | |
| const productAId = document.getElementById('productA').value; | |
| const productBId = document.getElementById('productB').value; | |
| if (productAId === productBId) { | |
| alert("Please select two different products to compare."); | |
| return; | |
| } | |
| const productA = products[productAId]; | |
| const productB = products[productBId]; | |
| // Update product names | |
| productElements.productA.name.forEach(el => el.textContent = productA.name); | |
| productElements.productB.name.forEach(el => el.textContent = productB.name); | |
| // Update scores | |
| updateProductScores('productA', productA); | |
| updateProductScores('productB', productB); | |
| // Calculate weighted scores | |
| const weights = { | |
| price: parseInt(sliders[0].element.value) / 100, | |
| durability: parseInt(sliders[1].element.value) / 100, | |
| features: parseInt(sliders[2].element.value) / 100, | |
| usability: parseInt(sliders[3].element.value) / 100, | |
| service: parseInt(sliders[4].element.value) / 100 | |
| }; | |
| const overallA = calculateOverallScore(productA.scores, weights); | |
| const overallB = calculateOverallScore(productB.scores, weights); | |
| productElements.productA.overall.textContent = overallA.toFixed(1); | |
| productElements.productB.overall.textContent = overallB.toFixed(1); | |
| // Update recommendation | |
| updateRecommendation(productA.name, productB.name, overallA, overallB); | |
| // Update radar chart | |
| updateRadarChart(productA, productB); | |
| // Show results | |
| emptyState.classList.add('hidden'); | |
| resultsSection.classList.remove('hidden'); | |
| } | |
| // Update individual product scores | |
| function updateProductScores(productKey, productData) { | |
| const elements = productElements[productKey]; | |
| elements.price.textContent = productData.scores.price; | |
| elements.durability.textContent = productData.scores.durability; | |
| elements.features.textContent = productData.scores.features; | |
| elements.usability.textContent = productData.scores.usability; | |
| elements.service.textContent = productData.scores.service; | |
| // Update review snippets | |
| elements.reviews.price.textContent = `"${productData.reviews.price}"`; | |
| elements.reviews.durability.textContent = `"${productData.reviews.durability}"`; | |
| elements.reviews.features.textContent = `"${productData.reviews.features}"`; | |
| elements.reviews.usability.textContent = `"${productData.reviews.usability}"`; | |
| elements.reviews.service.textContent = `"${productData.reviews.service}"`; | |
| } | |
| // Calculate overall score | |
| function calculateOverallScore(scores, weights) { | |
| return ( | |
| scores.price * weights.price + | |
| scores.durability * weights.durability + | |
| scores.features * weights.features + | |
| scores.usability * weights.usability + | |
| scores.service * weights.service | |
| ); | |
| } | |
| // Update recommendation | |
| function updateRecommendation(nameA, nameB, scoreA, scoreB) { | |
| if (scoreA > scoreB) { | |
| recommendationTitle.textContent = `We recommend ${nameA}`; | |
| recommendationText.textContent = `Based on your priorities, ${nameA} scored higher (${scoreA.toFixed(1)} vs ${scoreB.toFixed(1)}) with better performance in key categories.`; | |
| recommendationBanner.className = "mb-8 p-4 rounded-md bg-gradient-to-r from-blue-50 to-indigo-50 border border-blue-200"; | |
| } else if (scoreB > scoreA) { | |
| recommendationTitle.textContent = `We recommend ${nameB}`; | |
| recommendationText.textContent = `Based on your priorities, ${nameB} scored higher (${scoreB.toFixed(1)} vs ${scoreA.toFixed(1)}) with better performance in key categories.`; | |
| recommendationBanner.className = "mb-8 p-4 rounded-md bg-gradient-to-r from-green-50 to-teal-50 border border-green-200"; | |
| } else { | |
| recommendationTitle.textContent = "Both products are equally good"; | |
| recommendationText.textContent = `Both ${nameA} and ${nameB} scored ${scoreA.toFixed(1)} based on your priorities. Consider other factors like brand preference or design.`; | |
| recommendationBanner.className = "mb-8 p-4 rounded-md bg-gradient-to-r from-purple-50 to-pink-50 border border-purple-200"; | |
| } | |
| } | |
| // Update radar chart | |
| function updateRadarChart(productA, productB) { | |
| const ctx = document.getElementById('radarChart').getContext('2d'); | |
| const data = { | |
| labels: ['Price', 'Durability', 'Features', 'Usability', 'Customer Service'], | |
| datasets: [ | |
| { | |
| label: productA.name, | |
| data: [ | |
| productA.scores.price, | |
| productA.scores.durability, | |
| productA.scores.features, | |
| productA.scores.usability, | |
| productA.scores.service | |
| ], | |
| backgroundColor: 'rgba(59, 130, 246, 0.2)', | |
| borderColor: 'rgba(59, 130, 246, 1)', | |
| borderWidth: 2, | |
| pointBackgroundColor: 'rgba(59, 130, 246, 1)' | |
| }, | |
| { | |
| label: productB.name, | |
| data: [ | |
| productB.scores.price, | |
| productB.scores.durability, | |
| productB.scores.features, | |
| productB.scores.usability, | |
| productB.scores.service | |
| ], | |
| backgroundColor: 'rgba(16, 185, 129, 0.2)', | |
| borderColor: 'rgba(16, 185, 129, 1)', | |
| borderWidth: 2, | |
| pointBackgroundColor: 'rgba(16, 185, 129, 1)' | |
| } | |
| ] | |
| }; | |
| const config = { | |
| type: 'radar', | |
| data: data, | |
| options: { | |
| responsive: true, | |
| maintainAspectRatio: false, | |
| scales: { | |
| r: { | |
| angleLines: { | |
| display: true | |
| }, | |
| suggestedMin: 0, | |
| suggestedMax: 100, | |
| ticks: { | |
| stepSize: 20 | |
| } | |
| } | |
| }, | |
| plugins: { | |
| legend: { | |
| position: 'top', | |
| }, | |
| tooltip: { | |
| callbacks: { | |
| label: function(context) { | |
| return context.dataset.label + ': ' + context.raw + '/100'; | |
| } | |
| } | |
| } | |
| } | |
| } | |
| }; | |
| if (radarChart) { | |
| radarChart.destroy(); | |
| } | |
| radarChart = new Chart(ctx, config); | |
| } | |
| // Event listeners | |
| compareBtn.addEventListener('click', compareProducts); | |
| // Initialize | |
| initializeSliders(); | |
| </script> | |
| <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> | |
| </html> |