Spaces:

Coots
/

Tile

Sleeping

App Files Files Community

Coots commited on Jun 22

Commit

f4054a2

verified ·

1 Parent(s): 5d5165f

Update index.html

Browse files

Files changed (1) hide show

index.html +145 -114

index.html CHANGED Viewed

@@ -1,125 +1,156 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-  <meta charset="UTF-8" />
-  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
-  <title>Tile Calculator AI</title>
-  <script src="https://cdn.tailwindcss.com"></script>
-  <style>
-    /* Your existing styles… */
-  </style>
-</head>
-<body class="bg-gray-100">
-  <!-- (Header + Chat Area + Input Area omitted for brevity) -->
-  <div id="chat-area" class="chat-container p-4 overflow-y-auto">
-    <div class="bot-message bg-gray-100 rounded-lg p-4 max-w-xs mb-3">
-      <p>Hello! 👋 Floor or wall tiles?</p>
-      <button onclick="selectTileType('floor')" class="quick-reply">Floor</button>
-      <button onclick="selectTileType('wall')" class="quick-reply">Wall</button>
-    </div>
-  </div>
-  <!-- Recommendations Section -->
-  <div id="recommendations" class="grid grid-cols-2 md:grid-cols-4 gap-4 p-4 border-t bg-gray-50"></div>
-  <script>
-    const state = { step: 'tileType', tileType: null, length: null, width: null };
-    const chatArea = document.getElementById('chat-area'),
-          userInput = null, /* we won't use user text input here for simplicity */,
-          recommendations = document.getElementById('recommendations');
-    function selectTileType(type){
-      state.tileType = type;
-      state.step = 'length';
-      appendBot(`Great. What's the length of the area in ft?`);
-    }
-    function appendBot(text) {
-      chatArea.insertAdjacentHTML('beforeend', `
-        <div class="bot-message bg-gray-100 rounded-lg p-4 mb-3">${text}</div>
-      `);
-      chatArea.scrollTop = chatArea.scrollHeight;
-    }
-    function appendUser(text) {
-      chatArea.insertAdjacentHTML('beforeend', `
-        <div class="user-message ml-auto bg-indigo-600 text-white rounded-lg p-4 mb-3">${text}</div>
-      `);
-      chatArea.scrollTop = chatArea.scrollHeight;
-    }
-    function askValue(val){
-      const answer = prompt(val);
-      if (!answer) return appendBot('Input canceled.');
-      appendUser(answer);
-      processValue(parseFloat(answer));
-    }
-    function processValue(num){
-      if (state.step === 'length'){
-        state.length = num;
         state.step = 'width';
-        appendBot("And the width (ft)?");
-        askValue("Width in ft:");
-      } else if (state.step === 'width'){
-        state.width = num;
-        calculate();
-      }
-    }
-    function calculate(){
-      const area = state.length * state.width;
-      const coverage = 1; // tile covers 1 sq ft default
-      const numTiles = Math.ceil(area * 1.1 / coverage);
-      appendBot(`📐 Area: ${area.toFixed(2)} ft²<br>🧮 Tiles needed (incl. 10%): ${numTiles}`);
-      fetchRecommendations(coverage, area);
-    }
-    function fetchRecommendations(coverage, area){
-      fetch('/recommend', {
-        method: 'POST',
-        headers:{'Content-Type':'application/json'},
-        body: JSON.stringify({
-          tile_type: state.tileType,
-          coverage,
-          area,
-          price_range: [3,10]
-        })
-      })
-      .then(r=>r.json())
-      .then(d=> {
-        if (d.recommended_products?.length){
-          showProducts(d.recommended_products);
-        } else {
-          appendBot("No recommendations found for your specs.");
         }
-      });
-    }
-    function showProducts(products){
-      recommendations.innerHTML = '';
-      products.forEach(p => {
-        recommendations.insertAdjacentHTML('beforeend', `
-          <div class="bg-white shadow rounded-lg p-4">
-            <h4 class="font-medium">${p.name}</h4>
-            <p class="text-sm">₹${p.price}/box</p>
-            <a href="${p.link}" target="_blank" class="text-indigo-600 hover:underline">View</a>
-          </div>
-        `);
-      });
     }
-    // start logic: after selecting tile type, ask length
-    document.addEventListener('DOMContentLoaded', ()=> {
-      if(state.step!=='tileType') return;
-      document.querySelectorAll('.quick-reply').forEach(btn=>{
-        btn.onclick = ()=> {
-          const type = btn.getAttribute('onclick').match(/'(\w+)'/)[1];
-          appendUser(type);
-          selectTileType(type);
-          askValue("Length in ft:");
-        }
-      });
-    });
-  </script>
-</body>
-</html>

+<script>
+  const state = {
+    step: 'tileType',
+    tileType: null,
+    length: null,
+    width: null,
+    tileSize: null
+  };
+  const chatArea = document.getElementById('chat-area');
+  const userInput = document.getElementById('user-input');
+  const recommendations = document.getElementById('recommendations');
+  const resetBtn = document.getElementById('reset-btn');
+  resetBtn.addEventListener('click', resetConversation);
+  userInput.addEventListener('keypress', (e) => {
+    if (e.key === 'Enter') sendMessage();
+  });
+  function resetConversation() {
+    state.step = 'tileType';
+    state.tileType = null;
+    state.length = null;
+    state.width = null;
+    state.tileSize = null;
+    chatArea.innerHTML = `
+      <div class="bot-message bg-gray-100 rounded-lg p-4 max-w-xs mb-3">
+        <p>Hello! 👋 I'm your Tile Calculator Assistant. Let's estimate how many tiles you need.</p>
+        <p class="mt-2">Are you looking for <span class="font-semibold">floor</span> or <span class="font-semibold">wall</span> tiles?</p>
+        <div class="flex gap-2 mt-3">
+          <button onclick="selectTileType('floor')" class="quick-reply bg-white text-indigo-600 border border-indigo-600 px-4 py-2 rounded-full font-medium hover:bg-indigo-50">Floor</button>
+          <button onclick="selectTileType('wall')" class="quick-reply bg-white text-indigo-600 border border-indigo-600 px-4 py-2 rounded-full font-medium hover:bg-indigo-50">Wall</button>
+        </div>
+      </div>
+    `;
+    recommendations.innerHTML = '';
+  }
+  function selectTileType(type) {
+    state.tileType = type;
+    state.step = 'length';
+    addMessage('user', type === 'floor' ? 'Floor tiles' : 'Wall tiles');
+    showTyping();
+    setTimeout(() => {
+      hideTyping();
+      addMessage('bot', `Great choice! Please enter the <strong>length</strong> of the area in feet (e.g. 10):`);
+    }, 800);
+  }
+  function sendMessage() {
+    const message = userInput.value.trim();
+    if (!message) return;
+    addMessage('user', message);
+    userInput.value = '';
+    processUserMessage(message);
+  }
+  function processUserMessage(message) {
+    showTyping();
+    setTimeout(() => {
+      hideTyping();
+      if (state.step === 'length') {
+        const length = parseFloat(message);
+        if (isNaN(length) || length <= 0) {
+          addMessage('bot', 'Please enter a valid number for the length in feet.');
+          return;
+        }
+        state.length = length;
         state.step = 'width';
+        addMessage('bot', 'Now enter the <strong>width</strong> of the area in feet (e.g. 12):');
+      } else if (state.step === 'width') {
+        const width = parseFloat(message);
+        if (isNaN(width) || width <= 0) {
+          addMessage('bot', 'Please enter a valid number for the width in feet.');
+          return;
+        }
+        state.width = width;
+        state.step = 'tileSize';
+        addMessage('bot', 'What is the tile size? (e.g. "2x2", "600x600", or "300*300")');
+      } 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();
+      }
+    }, 800);
+  }
+  function parseTileSize(input) {
+    input = input.toLowerCase().replace(/×|into|\*/g, 'x').replace(/ft|feet|mm/g, '').trim();
+    if (input.includes('x')) {
+      const [a, b] = input.split('x').map(s => parseFloat(s.replace(/[^\d.]/g, '')));
+      if (isNaN(a) || isNaN(b)) return null;
+      return (a > 20 ? (a * b) / 92903.04 : a * b);
+    } else if (/^\d+(\.\d+)?$/.test(input)) {
+      const val = parseFloat(input);
+      return val > 20 ? (val * val) / 92903.04 : val * val;
     }
+    return null;
+  }
+  function calculateTiles() {
+    const area = state.length * state.width;
+    const numTiles = Math.ceil((area / state.tileSize) * 1.1);
+    const numBoxes = Math.ceil(numTiles / 10);
+    chatArea.insertAdjacentHTML('beforeend', `
+      <div class="bot-message bg-gray-100 rounded-lg p-4 mb-3">
+        <p class="font-semibold">Calculation Results:</p>
+        <p>🧱 Tile Type: ${state.tileType}</p>
+        <p>📏 Length: ${state.length} ft</p>
+        <p>📐 Width: ${state.width} ft</p>
+        <p>📦 Area: ${area.toFixed(2)} sq.ft</p>
+        <p>🧮 Tile Size: ${state.tileSize.toFixed(2)} sq.ft per tile</p>
+        <p class="mt-2">🔢 <span class="font-bold">Tiles Needed:</span> ${numTiles} (${numBoxes} boxes)</p>
+      </div>
+    `);
+    state.step = 'complete';
+  }
+  function addMessage(sender, message) {
+    const messageDiv = document.createElement('div');
+    messageDiv.className = `${sender}-message ${sender === 'user' ? 'ml-auto bg-indigo-600 text-white' : 'bg-gray-100'} rounded-lg p-4 max-w-xs mb-3`;
+    messageDiv.innerHTML = message;
+    chatArea.appendChild(messageDiv);
+    chatArea.scrollTop = chatArea.scrollHeight;
+  }
+  function showTyping() {
+    const typingDiv = document.createElement('div');
+    typingDiv.className = 'typing-indicator bg-gray-100 rounded-lg p-4 max-w-xs mb-3 flex gap-1';
+    typingDiv.id = 'typing-indicator';
+    typingDiv.innerHTML = '<span class="w-2 h-2 bg-gray-400 rounded-full"></span><span class="w-2 h-2 bg-gray-400 rounded-full"></span><span class="w-2 h-2 bg-gray-400 rounded-full"></span>';
+    chatArea.appendChild(typingDiv);
+    chatArea.scrollTop = chatArea.scrollHeight;
+  }
+  function hideTyping() {
+    const typingIndicator = document.getElementById('typing-indicator');
+    if (typingIndicator) typingIndicator.remove();
+  }
+</script>