Spaces:

Coots
/

Tile

Sleeping

File size: 15,017 Bytes

9f9b6af

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