Update index.html

Updated with api calls

index.html

@@ -158,19 +158,96 @@
             </section>
 
             <!-- Results Section (Initially Hidden) -->
-            <section id="resultsSection" class="hidden">
-                <!-- Data Sources Info -->
-                <div class="bg-blue-50 rounded-lg p-4 mb-6">
-                    <div class="flex items-center">
-                        <div class="p-2 rounded-full bg-blue-100 text-blue-600 mr-4">
-                            <i class="fas fa-database"></i>
-                        </div>
-                        <div>
-                            <h3 class="font-medium">Data Sources</h3>
-                            <p class="text-sm text-gray-600" id="dataSources">Aggregated from 12 sources including Amazon, Walmart, Google Trends, and Statista. Last updated: <span id="dynamicUpdateTime"></span></p>
-                        </div>
-                    </div>
-                </div>
+            <!-- The rest of your HTML code continues here -->
+<!-- Full content merged with backend-connected analyzeMarket function -->
+
+<!-- Results Section (Initially Hidden) -->
+<section id="resultsSection" class="hidden">
+    <!-- Sample content block -->
+    <div class="bg-white rounded-xl shadow-md p-6 mt-6">
+        <h2 class="text-2xl font-bold text-gray-800 mb-4" id="productTitle">Market Analysis</h2>
+        <p class="text-sm text-gray-500">Last updated: <span id="dynamicUpdateTime"></span></p>
+        <p class="text-sm text-gray-500">Top Brands: <span id="topBrands">(loading...)</span></p>
+        <p class="text-sm text-gray-500">Competitor Count: <span id="competitorCount">(loading...)</span></p>
+    </div>
+    <!-- Add charts and trend blocks as needed -->
+</section>
+
+<script>
+    const productInput = document.getElementById('productInput');
+    const analyzeBtn = document.getElementById('analyzeBtn');
+    const analyzeText = document.getElementById('analyzeText');
+    const analyzeSpinner = document.getElementById('analyzeSpinner');
+    const progressSection = document.getElementById('progressSection');
+    const resultsSection = document.getElementById('resultsSection');
+    const competitorProgress = document.getElementById('competitorProgress');
+    const dynamicUpdateTime = document.getElementById('dynamicUpdateTime');
+    const topBrands = document.getElementById('topBrands');
+    const competitorCount = document.getElementById('competitorCount');
+    const productTitle = document.getElementById('productTitle');
+
+    analyzeBtn.addEventListener('click', analyzeMarket);
+    productInput.addEventListener('keypress', function(e) {
+        if (e.key === 'Enter') analyzeMarket();
+    });
+
+    async function analyzeMarket() {
+        const product = productInput.value.trim().toLowerCase();
+        if (!product) {
+            alert('Please enter a product category');
+            return;
+        }
+
+        analyzeText.textContent = 'Analyzing';
+        analyzeSpinner.classList.remove('hidden');
+        progressSection.classList.remove('hidden');
+        resultsSection.classList.add('hidden');
+
+        let progress = 0;
+        const progressInterval = setInterval(() => {
+            progress += Math.random() * 10;
+            if (progress > 100) progress = 100;
+            competitorProgress.style.width = `${progress}%`;
+        }, 300);
+
+        try {
+            const response = await axios.get(`http://localhost:5000/api/analyze?product=${encodeURIComponent(product)}`);
+            const data = response.data;
+
+            clearInterval(progressInterval);
+            analyzeText.textContent = 'Analyze';
+            analyzeSpinner.classList.add('hidden');
+            progressSection.classList.add('hidden');
+
+            const now = new Date();
+            dynamicUpdateTime.textContent = now.toLocaleDateString('en-US', { month: 'long', year: 'numeric' });
+
+            productTitle.textContent = `${product.charAt(0).toUpperCase() + product.slice(1)} Market Analysis`;
+            if (data.amazonProducts && data.amazonProducts.length) {
+                topBrands.textContent = data.amazonProducts.map(p => p.title.split(' ')[0]).slice(0, 3).join(', ');
+                competitorCount.textContent = data.amazonProducts.length;
+            } else {
+                topBrands.textContent = 'N/A';
+                competitorCount.textContent = 'N/A';
+            }
+
+            resultsSection.classList.remove('hidden');
+            setTimeout(() => {
+                resultsSection.scrollIntoView({ behavior: 'smooth' });
+            }, 100);
+        } catch (error) {
+            console.error('Analysis error:', error);
+            alert('Error analyzing market. Please try again.');
+            analyzeText.textContent = 'Analyze';
+            analyzeSpinner.classList.add('hidden');
+            progressSection.classList.add('hidden');
+            clearInterval(progressInterval);
+        }
+    }
+</script>
+</body>
+</html>
+
 
                 <!-- Market Overview -->
                 <div class="bg-white rounded-xl shadow-md overflow-hidden mb-8">
@@ -693,63 +770,64 @@
 
         // Main analysis function
         async function analyzeMarket() {
-            const product = productInput.value.trim().toLowerCase();
-            
-            if (!product) {
-                alert('Please enter a product category');
-                return;
-            }
+          const product = productInput.value.trim().toLowerCase();
+          if (!product) {
+            alert('Please enter a product category');
+          return;
+    }
 
-            // Show loading state
-            analyzeText.textContent = 'Analyzing';
-            analyzeSpinner.classList.remove('hidden');
-            progressSection.classList.remove('hidden');
-            resultsSection.classList.add('hidden');
-            
-            // Update progress bar animation
-            let progress = 0;
-            const progressInterval = setInterval(() => {
-                progress += Math.random() * 10;
-                if (progress > 100) progress = 100;
-                competitorProgress.style.width = `${progress}%`;
-            }, 300);
+    // Show loading state
+    analyzeText.textContent = 'Analyzing';
+    analyzeSpinner.classList.remove('hidden');
+    progressSection.classList.remove('hidden');
+    resultsSection.classList.add('hidden');
 
-            // Simulate API calls (in a real app, these would be actual API calls)
-            try {
-                // Get current time for "last updated" display
-                const now = new Date();
-                const options = { month: 'long', year: 'numeric' };
-                dynamicUpdateTime.textContent = now.toLocaleDateString('en-US', options);
-                
-                // Simulate data fetching delay
-                await new Promise(resolve => setTimeout(resolve, 2500));
-                
-                // Clear loading state
-                clearInterval(progressInterval);
-                analyzeText.textContent = 'Analyze';
-                analyzeSpinner.classList.add('hidden');
-                progressSection.classList.add('hidden');
-                
-                // Show results with the appropriate data
-                showMarketAnalysis(product);
-                
-                // Scroll to results
-                setTimeout(() => {
-                    resultsSection.scrollIntoView({ behavior: 'smooth' });
-                }, 100);
-                
-            } catch (error) {
-                console.error('Analysis error:', error);
-                alert('Error analyzing market. Please try again.');
-                analyzeText.textContent = 'Analyze';
-                analyzeSpinner.classList.add('hidden');
-                progressSection.classList.add('hidden');
-                clearInterval(progressInterval);
-            }
-        }
+    let progress = 0;
+    const progressInterval = setInterval(() => {
+        progress += Math.random() * 10;
+        if (progress > 100) progress = 100;
+        competitorProgress.style.width = `${progress}%`;
+    }, 300);
+
+    try {
+        // 🚀 Real API call to backend
+        const response = await axios.get(`http://localhost:5000/api/analyze?product=${encodeURIComponent(product)}`);
+        const data = response.data;
+
+        clearInterval(progressInterval);
+        analyzeText.textContent = 'Analyze';
+        analyzeSpinner.classList.add('hidden');
+        progressSection.classList.add('hidden');
+
+        // 💡 For now, just log the result
+        console.log(data);
+
+        // Use parts of the response to populate UI
+        document.getElementById('productTitle').textContent = `${product.charAt(0).toUpperCase() + product.slice(1)} Market Analysis`;
+        document.getElementById('dynamicUpdateTime').textContent = new Date().toLocaleDateString('en-US', { month: 'long', year: 'numeric' });
+
+        // If you want to fill out mock UI:
+        updateUI({ ...getDefaultData(product), trends: data.trends, products: data.amazonProducts });
+
+        resultsSection.classList.remove('hidden');
+        setTimeout(() => {
+            resultsSection.scrollIntoView({ behavior: 'smooth' });
+        }, 100);
+    } catch (error) {
+        console.error('Analysis error:', error);
+        alert('Error analyzing market. Please try again.');
+        analyzeText.textContent = 'Analyze';
+        analyzeSpinner.classList.add('hidden');
+        progressSection.classList.add('hidden');
+        clearInterval(progressInterval);
+    }
+}
 
         // Function to show market analysis with fetched data
         function showMarketAnalysis(product) {
+          console.warn("showMarketAnalysis is deprecated. Use analyzeMarket's real data response instead.");
+}
+
             // In a real implementation, this would use actual API data
             // For this demo, we'll use sample data that simulates API responses