Update index.html

index.html

@@ -1,17 +1,10 @@
+```html
 <!DOCTYPE html>
 <html>
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>مشاور مبلمان</title>
-    <script type="importmap">
-    {
-        "imports": {
-            "@gradio/lite": "https://cdn.jsdelivr.net/npm/@gradio/lite@0.4.2/dist/lite.js"
-        }
-    }
-    </script>
-    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@gradio/lite@0.4.2/dist/lite.css" />
     <style>
         body {
             font-family: sans-serif;
@@ -35,34 +28,166 @@
             text-align: center;
             color: #2c3e50;
         }
-        .gradio-container {
+        .upload-area {
+            border: 3px dashed #667eea;
+            border-radius: 20px;
+            padding: 30px;
+            text-align: center;
+            margin: 20px 0;
+            background: #f8f9fa;
+            cursor: pointer;
+            transition: all 0.3s;
+        }
+        .upload-area:hover {
+            background: #e9ecef;
+            border-color: #764ba2;
+        }
+        .upload-area input[type="file"] {
+            display: none;
+        }
+        .upload-area label {
+            cursor: pointer;
+            font-size: 1.2rem;
+            color: #2c3e50;
+        }
+        .upload-area label span {
+            font-size: 3rem;
+            display: block;
+        }
+        #image-preview {
+            max-width: 100%;
+            max-height: 300px;
+            border-radius: 15px;
+            margin: 10px 0;
+            display: none;
+        }
+        .btn-analyze {
+            background: #667eea;
+            color: white;
+            border: none;
+            padding: 15px 40px;
+            border-radius: 50px;
+            font-size: 1.2rem;
+            cursor: pointer;
+            margin-top: 15px;
+            transition: all 0.3s;
+            width: 100%;
+        }
+        .btn-analyze:hover {
+            background: #764ba2;
+            transform: scale(1.02);
+        }
+        .result-box {
+            background: #f8f9fa;
+            padding: 20px;
+            border-radius: 15px;
             margin-top: 20px;
+            white-space: pre-wrap;
+            font-family: monospace;
+            display: none;
         }
         .tip {
-            background: #f8f9fa;
+            background: #fff3cd;
             padding: 15px;
             border-radius: 10px;
             margin-top: 20px;
             text-align: center;
-            color: #6c757d;
-            border: 2px dashed #dee2e6;
+            border: 1px solid #ffc107;
         }
     </style>
 </head>
 <body>
     <div class="container">
         <h1>🪑 مشاور هوشمند مبلمان</h1>
-        <p style="text-align:center; color:#6c757d;">برای آپلود، روی کادر کلیک کنید یا عکس را بکشید و رها کنید</p>
+        <p style="text-align:center; color:#6c757d;">عکس مبل خود را انتخاب کنید</p>
+        
+        <div class="upload-area" id="uploadArea">
+            <label for="fileInput">
+                <span>📸</span>
+                <br>
+                <strong>برای آپلود عکس کلیک کنید</strong>
+                <br>
+                <small>یا عکس را بکشید و اینجا رها کنید</small>
+            </label>
+            <input type="file" id="fileInput" accept="image/*">
+        </div>
         
-        <div class="gradio-container">
-            <gradio-lite>
-                import gradio as gr
-                
-                def analyze_furniture(image):
-                    if image is None:
-                        return "⚠️ لطفاً یک عکس انتخاب کنید"
-                    
-                    return """
+        <img id="image-preview" alt="پیش‌نمایش عکس">
+        
+        <button class="btn-analyze" id="analyzeBtn">🔍 تحلیل کن</button>
+        
+        <div class="result-box" id="resultBox">
+            🪑 نتیجه تحلیل شما اینجا نمایش داده می‌شود...
+        </div>
+        
+        <div class="tip">
+            💡 نکته: روی جعبه بالا کلیک کنید و عکس مبل خود را انتخاب کنید
+        </div>
+    </div>
+
+    <script>
+        const fileInput = document.getElementById('fileInput');
+        const uploadArea = document.getElementById('uploadArea');
+        const preview = document.getElementById('image-preview');
+        const analyzeBtn = document.getElementById('analyzeBtn');
+        const resultBox = document.getElementById('resultBox');
+        let selectedImage = null;
+        
+        fileInput.addEventListener('change', function(e) {
+            const file = this.files[0];
+            if (file) {
+                const reader = new FileReader();
+                reader.onload = function(e) {
+                    preview.src = e.target.result;
+                    preview.style.display = 'block';
+                    selectedImage = e.target.result;
+                    resultBox.style.display = 'none';
+                };
+                reader.readAsDataURL(file);
+            }
+        });
+        
+        uploadArea.addEventListener('dragover', function(e) {
+            e.preventDefault();
+            this.style.borderColor = '#764ba2';
+            this.style.background = '#e9ecef';
+        });
+        
+        uploadArea.addEventListener('dragleave', function(e) {
+            e.preventDefault();
+            this.style.borderColor = '#667eea';
+            this.style.background = '#f8f9fa';
+        });
+        
+        uploadArea.addEventListener('drop', function(e) {
+            e.preventDefault();
+            this.style.borderColor = '#667eea';
+            this.style.background = '#f8f9fa';
+            const file = e.dataTransfer.files[0];
+            if (file) {
+                const reader = new FileReader();
+                reader.onload = function(e) {
+                    preview.src = e.target.result;
+                    preview.style.display = 'block';
+                    selectedImage = e.target.result;
+                    resultBox.style.display = 'none';
+                };
+                reader.readAsDataURL(file);
+            }
+        });
+        
+        uploadArea.addEventListener('click', function() {
+            fileInput.click();
+        });
+        
+        analyzeBtn.addEventListener('click', function() {
+            if (!selectedImage) {
+                alert('⚠️ لطفاً ابتدا یک عکس انتخاب کنید!');
+                return;
+            }
+            
+            resultBox.style.display = 'block';
+            resultBox.innerHTML = `
 🪑 **نتیجه تحلیل مبلمان شما**
 
 📸 **نوع مبل:** مبل راحتی مدرن
@@ -73,28 +198,10 @@
 💡 **نکات طراحی:**
 • با دیوارهای روشن هماهنگ کنید
 • از کوسن‌های متضاد استفاده کنید
-"""
-                
-                demo = gr.Interface(
-                    fn=analyze_furniture,
-                    inputs=gr.Image(
-                        label="📸 برای آپلود اینجا کلیک کنید",
-                        type="pil",
-                        sources=["upload"],
-                        interactive=True
-                    ),
-                    outputs=gr.Markdown(),
-                    title="🪑 مشاور مبلمان",
-                    description="عکس مبل را آپلود کنید"
-                )
-                
-                demo.launch()
-            </gradio-lite>
-        </div>
-        
-        <div class="tip">
-            💡 راهنما: روی جعبه بالا کلیک کنید یا عکس را بکشید و در آن رها کنید
-        </div>
-    </div>
+• نور گرم و غیرمستقیم انتخاب کنید
+            `;
+        });
+    </script>
 </body>
-</html>
+</html>
+```