Update index.html

index.html

@@ -1,168 +1,311 @@
-from flask import Flask, request, jsonify, send_file
-from flask_cors import CORS
-import joblib
-import xgboost as xgb
-import numpy as np
-import json
-import math
-import os
-import logging
-
-app = Flask(__name__)
-CORS(app)
-logging.basicConfig(level=logging.INFO)
-
-# Load models
-try:
-    rf = joblib.load("rf_model.pkl")
-    xgb_model = xgb.Booster()
-    xgb_model.load_model("xgb_model.json")
-    app.logger.info("✅ Models loaded successfully.")
-except Exception as e:
-    app.logger.error(f"❌ Error loading models: {e}")
-    raise e
-
-# Load tile metadata
-with open("tile_catalog.json", "r", encoding="utf-8") as f:
-    tile_catalog = json.load(f)
-
-with open("tile_sizes.json", "r", encoding="utf-8") as f:
-    tile_sizes = json.load(f)
-
-@app.route("/")
-def home():
-    return send_file("index.html")
-
-@app.route('/recommend', methods=['POST'])
-def recommend():
-    try:
-        data = request.get_json()
-
-        required = ['tile_type', 'coverage', 'area', 'price_range']
-        if not all(k in data for k in required):
-            return jsonify({"error": "Missing required fields"}), 400
-
-        tile_type = data['tile_type'].lower()
-        if tile_type not in ['floor', 'wall']:
-            return jsonify({"error": "Invalid tile type"}), 400
-
-        validate_positive_number(data['coverage'], "coverage")
-        validate_positive_number(data['area'], "area")
-
-        pr = data['price_range']
-        if (not isinstance(pr, list) or len(pr) != 2 or pr[0] < 0 or pr[1] <= 0 or pr[0] >= pr[1]):
-            return jsonify({"error": "Invalid price range"}), 400
-
-        features = prepare_features(data)
-        xgb_pred = float(xgb_model.predict(xgb.DMatrix(features))[0])
-        rf_pred = float(rf.predict_proba(features)[0][1])
-        combined_score = (xgb_pred + rf_pred) / 2
-
-        recommended = filter_products(
-            tile_type=tile_type,
-            min_price=pr[0],
-            max_price=pr[1],
-            preferred_sizes=data.get("preferred_sizes", []),
-            min_score=0.5
-        )
-
-        return jsonify({
-            "recommendation_score": round(combined_score, 3),
-            "total_matches": len(recommended),
-            "recommended_products": recommended[:5],
-            "calculation": calculate_requirements(data['area'], data['coverage'])
-        })
-
-    except Exception as e:
-        app.logger.error(f"Error in /recommend: {e}")
-        return jsonify({"error": "Internal server error"}), 500
-
-@app.route('/calculate', methods=['POST'])
-def calculate():
-    try:
-        data = request.get_json()
-
-        for k in ['tile_type', 'area', 'tile_size']:
-            if k not in data:
-                return jsonify({"error": f"Missing field: {k}"}), 400
-
-        tile_type = data['tile_type'].lower()
-        if tile_type not in ['floor', 'wall']:
-            return jsonify({"error": "Invalid tile type"}), 400
-
-        tile_size_key = data['tile_size']
-        if tile_size_key not in tile_sizes:
-            return jsonify({"error": "Invalid tile size"}), 400
-
-        validate_positive_number(data['area'], "area")
-
-        tile_info = tile_sizes[tile_size_key]
-        area_per_tile = tile_info['length'] * tile_info['width']
-        tiles_needed = math.ceil((data['area'] / area_per_tile) * 1.1)
-        tiles_per_box = tile_info.get('tiles_per_box', 10)
-        boxes_needed = math.ceil(tiles_needed / tiles_per_box)
-
-        matching = [
-            p for p in tile_catalog
-            if p['type'].lower() == tile_type and p['size'] == tile_size_key
-        ]
-
-        return jsonify({
-            "tile_type": tile_type,
-            "area": data['area'],
-            "tile_size": tile_size_key,
-            "tiles_needed": tiles_needed,
-            "boxes_needed": boxes_needed,
-            "matching_products": matching[:3],
-            "total_matches": len(matching)
-        })
-
-    except Exception as e:
-        app.logger.error(f"Error in /calculate: {e}")
-        return jsonify({"error": "Internal server error"}), 500
-
-def prepare_features(data):
-    tile_type_num = 0 if data['tile_type'] == 'floor' else 1
-    price_per_sqft = data['price_range'][1] / data['coverage']
-    budget_efficiency = data['coverage'] / data['price_range'][1]
-
-    return np.array([[
-        tile_type_num,
-        data['area'],
-        data['coverage'],
-        data['price_range'][0],
-        data['price_range'][1],
-        price_per_sqft,
-        budget_efficiency
-    ]])
-
-def filter_products(tile_type, min_price, max_price, preferred_sizes, min_score=0.5):
-    results = []
-    for p in tile_catalog:
-        if (
-            p['type'].lower() == tile_type and
-            min_price <= p['price'] <= max_price and
-            (not preferred_sizes or p['size'] in preferred_sizes)
-        ):
-            price_score = 1 - ((p['price'] - min_price) / (max_price - min_price + 1e-6))
-            size_score = 1 if not preferred_sizes or p['size'] in preferred_sizes else 0.5
-            score = (price_score + size_score) / 2
-            if score >= min_score:
-                results.append({**p, "recommendation_score": round(score, 2)})
-    return sorted(results, key=lambda x: x['recommendation_score'], reverse=True)
-
-def calculate_requirements(area, coverage):
-    min_tiles = math.ceil(area / coverage)
-    suggested = math.ceil(min_tiles * 1.1)
-    return {
-        "minimum_tiles": min_tiles,
-        "suggested_tiles": suggested,
-        "estimated_cost_range": [round(area * 3, 2), round(area * 10, 2)]
-    }
-
-def validate_positive_number(value, field):
-    if not isinstance(value, (int, float)) or value <= 0:
-        raise ValueError(f"{field} must be a positive number")
-
-if __name__ == '__main__':
-    app.run(host="0.0.0.0", port=5000, debug=True)
+<!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>