|
|
<!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> |
|
|
.chat-container { |
|
|
height: 80vh; |
|
|
background-image: radial-gradient(circle at 1px 1px, #e5e7eb 1px, transparent 0); |
|
|
background-size: 20px 20px; |
|
|
} |
|
|
.typing-indicator span { |
|
|
animation: bounce 1.5s infinite ease-in-out; |
|
|
} |
|
|
@keyframes bounce { |
|
|
0%, 60%, 100% { transform: translateY(0); } |
|
|
30% { transform: translateY(-5px); } |
|
|
} |
|
|
</style> |
|
|
</head> |
|
|
<body class="bg-gray-100"> |
|
|
<div class="max-w-4xl mx-auto p-4"> |
|
|
<div class="bg-white rounded-xl shadow-lg overflow-hidden"> |
|
|
|
|
|
<div class="bg-indigo-600 text-white p-4 flex justify-between items-center"> |
|
|
<div class="flex items-center space-x-3"> |
|
|
<div class="w-10 h-10 bg-white rounded-full flex items-center justify-center"> |
|
|
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-indigo-600" fill="none" viewBox="0 0 24 24" stroke="currentColor"> |
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10" /> |
|
|
</svg> |
|
|
</div> |
|
|
<div> |
|
|
<h1 class="font-bold text-xl">Tile Calculator AI</h1> |
|
|
<p class="text-xs opacity-80">Powered by your models</p> |
|
|
</div> |
|
|
</div> |
|
|
<button id="reset-btn" class="p-2 rounded-full hover:bg-indigo-700 transition"> |
|
|
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor"> |
|
|
<path fill-rule="evenodd" d="M4 2a1 1 0 011 1v2.101a7.002 7.002 0 0111.601 2.566 1 1 0 11-1.885.666A5.002 5.002 0 005.999 7H9a1 1 0 010 2H4a1 1 0 01-1-1V3a1 1 0 011-1zm.008 9.057a1 1 0 011.276.61A5.002 5.002 0 0014.001 13H11a1 1 0 110-2h5a1 1 0 011 1v5a1 1 0 11-2 0v-2.101a7.002 7.002 0 01-11.601-2.566 1 1 0 01.61-1.276z" clip-rule="evenodd" /> |
|
|
</svg> |
|
|
</button> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="chat-container p-4 overflow-y-auto" id="chat-area"> |
|
|
<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> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="border-t p-4 bg-white"> |
|
|
<div class="flex gap-2"> |
|
|
<input type="text" id="user-input" placeholder="Type your message..." class="flex-1 border rounded-full px-4 py-2 focus:outline-none focus:ring-2 focus:ring-indigo-500"> |
|
|
<button onclick="sendMessage()" class="bg-indigo-600 text-white rounded-full p-2 hover:bg-indigo-700 transition"> |
|
|
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor"> |
|
|
<path d="M10.894 2.553a1 1 0 00-1.788 0l-7 14a1 1 0 001.169 1.409l5-1.429A1 1 0 009 15.571V11a1 1 0 112 0v4.571a1 1 0 00.725.962l5 1.428a1 1 0 001.17-1.408l-7-14z" /> |
|
|
</svg> |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="bg-gray-50 p-4 border-t"> |
|
|
<h3 class="font-semibold text-gray-800 mb-3">Recommended Products</h3> |
|
|
<div class="grid grid-cols-2 md:grid-cols-4 gap-4" id="recommendations"> |
|
|
|
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<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 = ''; |
|
|
|
|
|
processUser Message(message); |
|
|
} |
|
|
|
|
|
|
|
|
function processUser Message(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('×', 'x') |
|
|
.replace('into', 'x') |
|
|
.replace('*', 'x') |
|
|
.replace('ft', '') |
|
|
.replace('feet', '') |
|
|
.replace('mm', '') |
|
|
.trim(); |
|
|
|
|
|
if (input.includes('x')) { |
|
|
const parts = input.split('x'); |
|
|
if (parts.length === 2) { |
|
|
const val1 = parseFloat(parts[0].replace(/[^\d.]/g, '')); |
|
|
const val2 = parseFloat(parts[1].replace(/[^\d.]/g, '')); |
|
|
|
|
|
if (isNaN(val1) || isNaN(val2)) return null; |
|
|
|
|
|
|
|
|
return val1 > 20 ? |
|
|
(val1 * val2) / 92903.04 : |
|
|
val1 * val2; |
|
|
} |
|
|
} 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); |
|
|
|
|
|
let 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(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) { |
|
|
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> |
|
|
</body> |
|
|
</html> |
|
|
|
