| <script> | |
| const state = { | |
| step: 'tileType', | |
| tileType: null, | |
| area: 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.area = 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 = 'area'; | |
| addMessage('user', type === 'floor' ? 'Floor tiles' : 'Wall tiles'); | |
| showTyping(); | |
| setTimeout(() => { | |
| hideTyping(); | |
| addMessage('bot', `Great choice for ${type} tiles! What's the total area you need to cover (in sq.ft)?`); | |
| }, 1000); | |
| } | |
| 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 === 'area') { | |
| const area = parseFloat(message); | |
| if (isNaN(area)) { | |
| addMessage('bot', 'Please enter a valid number for the area (e.g. 120).'); | |
| return; | |
| } | |
| state.area = area; | |
| state.step = 'tileSize'; | |
| addMessage('bot', '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 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 numTiles = Math.ceil((state.area / state.tileSize) * 1.1); | |
| const numBoxes = Math.ceil(numTiles / 10); | |
| const result = ` | |
| <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>📐 Area to Cover: ${state.area} 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> | |
| `; | |
| chatArea.insertAdjacentHTML('beforeend', result); | |
| state.step = 'complete'; | |
| fetchRecommendations(); | |
| } | |
| function fetchRecommendations() { | |
| fetch('/recommend', { | |
| method: 'POST', | |
| headers: { 'Content-Type': 'application/json' }, | |
| body: JSON.stringify({ | |
| tile_type: state.tileType, | |
| coverage: state.tileSize, | |
| area: state.area, | |
| price_range: [3, 10] | |
| }) | |
| }) | |
| .then(res => res.json()) | |
| .then(data => { | |
| if (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(err => console.error('Error fetching recommendations:', err)); | |
| } | |
| function loadProductRecommendations(products) { | |
| recommendations.innerHTML = ''; | |
| products.slice(0, 4).forEach(product => { | |
| const card = document.createElement('div'); | |
| card.className = 'bg-white rounded-lg overflow-hidden shadow-sm border border-gray-100'; | |
| card.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(card); | |
| }); | |
| } | |
| 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.textContent = 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> | |