Update index.html

index.html

@@ -153,7 +153,7 @@
 
           state.area = area;
           state.step = 'tileLength';
-          addMessage('bot', 'Now, please enter the tile length (e.g. "2" for 2 feet):');
+          addMessage('bot', 'Now, please enter the tile length (in feet):');
 
         } else if (state.step === 'tileLength') {
           const length = parseFloat(message);
@@ -164,7 +164,7 @@
 
           state.tileLength = length;
           state.step = 'tileWidth';
-          addMessage('bot', 'Now, please enter the tile width (e.g. "2" for 2 feet):');
+          addMessage('bot', 'Now, please enter the tile width (in feet):');
 
         } else if (state.step === 'tileWidth') {
           const width = parseFloat(message);
@@ -194,6 +194,61 @@
         </div>
       `);
       state.step = 'complete';
+
+      // Fetch recommended products
+      fetchRecommendedProducts();
+    }
+
+    function fetchRecommendedProducts() {
+      fetch('/recommend', {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json',
+        },
+        body: JSON.stringify({
+          tile_type: state.tileType,
+          coverage: state.tileLength * state.tileWidth,
+          area: state.area,
+          price_range: [3, 10] // Example price range
+        })
+      })
+      .then(response => response.json())
+      .then(data => {
+        if (data.recommended_products && data.recommended_products.length > 0) {
+          loadProductRecommendations(data.recommended_products);
+        } else {
+          recommendations.innerHTML = `
+            <div class="col-span-4 text-center py-4 text-gray-500">
+              No strong recommendations available for these parameters.
+            </div>
+          `;
+        }
+      })
+      .catch(error => {
+        console.error('Error fetching recommendations:', error);
+      });
+    }
+
+    function loadProductRecommendations(products) {
+      recommendations.innerHTML = '';
+      
+      products.slice(0, 4).forEach(product => {
+        const productCard = document.createElement('div');
+        productCard.className = 'bg-white rounded-lg overflow-hidden shadow-sm border border-gray-100';
+        productCard.innerHTML = `
+          <div class="h-32 bg-gray-200 flex items-center justify-center">
+            <svg xmlns="http://www.w3.org/2000/svg" class="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="1" d="M4 6a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2H6a2 2 0 01-2-2V6zM14 6a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2h-2a2 2 0 01-2-2V6zM4 16a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2H6a2 2 0 01-2-2v-2zM14 16a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2h-2a2 2 0 01-2-2v-2z" />
+            </svg>
+          </div>
+          <div class="p-3">
+            <h4 class="font-medium text-gray-800">${product.name || 'Tile Product'}</h4>
+            <p class="text-sm text-gray-600 mt-1">${product.price || '$0.00'}/box</p>
+            <button class="mt-2 w-full bg-indigo-600 text-white py-1 rounded text-sm hover:bg-indigo-700 transition">View Details</button>
+          </div>
+        `;
+        recommendations.appendChild(productCard);
+      });
     }
 
     function addMessage(sender, message) {