Update index.html

index.html

@@ -1,168 +1,220 @@
-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)]
+<!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"></div>
+      </div>
+    </div>
+  </div>
+
+  <!-- Main chatbot script -->
+  <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 = '';
     }
 
-def validate_positive_number(value, field):
-    if not isinstance(value, (int, float)) or value <= 0:
-        raise ValueError(f"{field} must be a positive number")
+    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);
+    }
 
-if __name__ == '__main__':
-    app.run(host="0.0.0.0", port=5000, debug=True)
+    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);
+      chatArea.insertAdjacentHTML('beforeend', `
+        <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>
+      `);
+      state.step = 'complete';
+    }
+
+    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>