Spaces:

Coots
/

Tile

Sleeping

App Files Files Community

Coots commited on Jun 22

Commit

3ea94bc

verified ·

1 Parent(s): d12096d

Update index.html

Browse files

Files changed (1) hide show

index.html +171 -292

index.html CHANGED Viewed

@@ -1,311 +1,190 @@
-<!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">
-            <!-- Header -->
-            <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>
-            <!-- Chat Area -->
-            <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>
-            <!-- Input Area -->
-            <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>
-            <!-- Recommendations Section -->
-            <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">
-                    <!-- Products will be loaded here -->
-                </div>
-            </div>
-        </div>
-    </div>
-    <script>
-        // Conversation state
-        const state = {
-            step: 'tileType',
-            tileType: null,
-            area: null,
-            tileSize: null
-        };
-        // DOM elements
-        const chatArea = document.getElementById('chat-area');
-        const userInput = document.getElementById('user-input');
-        const recommendations = document.getElementById('recommendations');
-        const resetBtn = document.getElementById('reset-btn');
-        // Event listeners
-        resetBtn.addEventListener('click', resetConversation);
-        userInput.addEventListener('keypress', (e) => {
-            if (e.key === 'Enter') sendMessage();
-        });
-        // Reset conversation
-        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 = '';
-        }
-        // Select tile type
-        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);
-        }
-        // Send message handler
-        function sendMessage() {
-            const message = userInput.value.trim();
-            if (!message) return;
-            addMessage('user', message);
-            userInput.value = '';
-            processUser Message(message);
-        }
-        // Process user message based on current step
-        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);
-        }
-        // Parse tile size input
-        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;
-                    // If values > 20, assume mm, else feet
-                    return val1 > 20 ?
-                        (val1 * val2) / 92903.04 :  // mm² to ft²
-                        val1 * val2;                // ft²
                 }
-            } else if (/^\d+(\.\d+)?$/.test(input)) {
-                const val = parseFloat(input);
-                return val > 20 ?
-                    (val * val) / 92903.04 :  // mm² to ft²
-                    val * val;                // ft²
-            }
-            return null;
-        }
-        // Calculate tiles and show results
-        function calculateTiles() {
-            const numTiles = Math.ceil((state.area / state.tileSize) * 1.1); // 10% buffer
-            const numBoxes = Math.ceil(numTiles / 10); // Assuming 10 tiles per box
-            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';
-            // Get recommendations
-            fetchRecommendations();
-        }
-        // Fetch product recommendations from Flask backend
-        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] // 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);
-            });
-        }
-        // Load product recommendations
-        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);
-            });
         }
-        // Helper functions
-        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>

+<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>