Update index.html

index.html

@@ -1,77 +1,69 @@
 <script>
-  const state = {
-    step: 'tileType',
-    tileType: null,
-    length: null,
-    width: null,
-    area: null,
-    tileSize: null
-  };
-
-  // ... (keep all previous DOM references and resetConversation as-is)
-
-  function selectTileType(type) {
-    state.tileType = type;
-    state.step = 'length';
-
-    addMessage('user', type === 'floor' ? 'Floor tiles' : 'Wall tiles');
+  const state={step:'tileType',tileType:null,area:null,length:null,width:null};
+  function selectTileType(t){
+    state.tileType=t;state.step='area';
+    addMessage('user',t+' tiles'); ask('area');
+  }
+  function ask(field){
     showTyping();
-
-    setTimeout(() => {
+    setTimeout(()=>{
       hideTyping();
-      addMessage('bot', `Great! What's the **length** of the area (in feet)?`);
-    }, 1000);
+      addMessage('bot',
+         field==='area' ? "Total area (sq.ft)?" :
+         field==='length' ? "Tile length (ft)?" : "Tile width (ft)?"
+      );
+      state.step=field;
+    },1000);
   }
-
-  function sendMessage() {
-    const message = userInput.value.trim();
-    if (!message) return;
-
-    addMessage('user', message);
-    userInput.value = '';
-
-    processUserMessage(message);
+  function sendMessage(){
+    const m=userInput.value.trim(); if(!m)return;
+    addMessage('user',m);userInput.value='';
+    handleUser(m);
   }
-
-  function processUserMessage(message) {
-    showTyping();
-
-    setTimeout(() => {
-      hideTyping();
-
-      if (state.step === 'length') {
-        const length = parseFloat(message);
-        if (isNaN(length)) {
-          addMessage('bot', 'Please enter a valid number for the length (e.g. 12).');
-          return;
-        }
-        state.length = length;
-        state.step = 'width';
-        addMessage('bot', 'Great! Now enter the **width** of the area (in feet):');
-      }
-
-      else if (state.step === 'width') {
-        const width = parseFloat(message);
-        if (isNaN(width)) {
-          addMessage('bot', 'Please enter a valid number for the width (e.g. 10).');
-          return;
-        }
-        state.width = width;
-        state.area = state.length * state.width;
-        state.step = 'tileSize';
-        addMessage('bot', `✅ Got it! Your total area is **${state.area.toFixed(2)} sq.ft**. Now, enter the tile size (e.g. "2x2", "600x600 mm", or "200*200"):`);
-      }
-
-      else if (state.step === 'tileSize') {
-        const tileArea = parseTileSize(message);
-        if (!tileArea) {
-          addMessage('bot', 'I couldn\'t understand that tile size. Try: "2x2", "600x600 mm", or "200*200".');
-          return;
-        }
-
-        state.tileSize = tileArea;
-        calculateTiles();
-      }
-    }, 1000);
+  function handleUser(msg){
+    if(state.step==='area'){
+      const v=parseFloat(msg);
+      return isNaN(v)? addBot("Enter valid area.") : (state.area=v,ask('length'));
+    }
+    if(state.step==='length'){
+      const v=parseFloat(msg);
+      return isNaN(v)? addBot("Enter valid length.") : (state.length=v,ask('width'));
+    }
+    if(state.step==='width'){
+      const v=parseFloat(msg);
+      return isNaN(v)? addBot("Enter valid width.") : (
+        state.width=v,
+        showResults()
+      );
+    }
+  }
+  function showResults(){
+    const c = state.length * state.width;
+    const tiles = Math.ceil((state.area/c)*1.1);
+    addBot(`📦 You need ${tiles} tiles (~10% buffer).`);
+    fetch('/recommend', {
+      method:'POST', headers:{'Content-Type':'application/json'},
+      body:JSON.stringify({
+        tile_type: state.tileType,
+        area: state.area,
+        length: state.length,
+        width: state.width,
+        price_range: [3,10]
+      })
+    })
+    .then(r=>r.json())
+    .then(r=>{
+      if(r.recommended_products && r.recommended_products.length){
+        recommendations.innerHTML = '';
+        r.recommended_products.forEach(p=>{
+          recommendations.innerHTML += `
+            <div class="card">
+              <h4>${p.name}</h4>
+              <p>${p.size} — ₹${p.price}/box</p>
+            </div>`;
+        });
+      } else addBot("No recommendations.");
+    });
   }
+  // Helper functions: addBot, addMessage, showTyping, hideTyping (as before)...
 </script>