Update app.py

app.py

@@ -1,6 +1,7 @@
-# app.py - کاتب 2025 Edition — تم خفن، سریع و بدون ارور
+# app.py - کاتب 2025 — تم خفن، بدون ارور css، 100% کارکردنی روی HF Spaces
 import gradio as gr
 from catboost import CatBoostRegressor
+import numpy as np
 
 # لود مدل (26 مگ = فوق سریع)
 model = CatBoostRegressor()
@@ -9,8 +10,8 @@ model.load_model("kaatib_v8_optimized.cbm")
 def predict(area_type, area, rooms, neighborhood, elevator, parking, warehouse, age):
     effective_area = area if area_type == "متراژ مفید (معمول در دیوار)" else area * 0.87
     pred = model.predict([[
-        effective_area, 
-        __import__("numpy").log1p(effective_area),
+        effective_area,
+        np.log1p(effective_area),
         rooms, age, 1 if age <= 5 else 0,
         neighborhood.strip(), int(elevator), int(parking), int(warehouse)
     ]])[0] / 1_000_000_000
@@ -22,136 +23,54 @@ def predict(area_type, area, rooms, neighborhood, elevator, parking, warehouse,
     </div>
     """
 
-# تم 2025 — سفید + نئون طلایی
-css = """
+# تم 2025 خفن — با gr.HTML() کار می‌کنه
+css_html = """
 <style>
-    :root {
-        --primary: #d4af37;
-        --bg: #ffffff;
-        --text: #1a1a1a;
-        --gray: #666666;
-    }
+    :root {--primary:#d4af37; --bg:#ffffff; --text:#1a1a1a; --gray:#666666;}
     .gradio-container {
-        max-width: 920px !important;
-        margin: 20px auto !important;
-        background: linear-gradient(135deg, #f8f9ff 0%, #ffffff 100%) !important;
-        border-radius: 28px !important;
-        box-shadow: 0 20px 60px rgba(0,0,0,0.08) !important;
-        padding: 30px !important;
-        direction: rtl !important;
+        max-width: 920px !important; margin: 20px auto !important;
+        background: linear-gradient(135deg, #f8f9ff, #ffffff) !important;
+        border-radius: 28px !important; box-shadow: 0 20px 60px rgba(0,0,0,0.08) !important;
+        padding: 30px !important; direction: rtl !important;
         font-family: 'Vazir', system-ui, sans-serif !important;
     }
     body {background: #f0f4f8 !important;}
-
-    /* هدر خفن */
-    .header {
-        text-align: center;
-        padding: 50px 20px;
-        background: linear-gradient(135deg, #0d2b1f 0%, #1e4d38 100%);
-        border-radius: 24px;
-        margin-bottom: 35px;
-        color: white;
-    }
-    .header h1 {
-        font-size: 68px;
-        margin: 0;
-        color: #d4af37;
-        text-shadow: 0 0 40px rgba(212,175,55,0.6);
-    }
-
-    /* کارت‌های ورودی */
-    .gr-form {
-        background: white !important;
-        padding: 24px !important;
-        border-radius: 20px !important;
-        box-shadow: 0 8px 30px rgba(0,0,0,0.06) !important;
-        margin-bottom: 20px;
-    }
-
-    /* لیبل‌ها */
-    label {
-        color: var(--text) !important;
-        font-weight: 600 !important;
-        font-size: 16px !important;
-    }
-
-    /* باکس‌ها */
-    .gr-textbox, .gr-dropdown, .gr-slider > div {
-        background: white !important;
-        border: 2px solid #e2e8f0 !important;
-        border-radius: 16px !important;
-        color: var(--gray) !important;
-    }
-    .gr-textbox input::placeholder {color: #94a3b8 !important;}
-
-    /* چک‌باکس و رادیو */
-    .gr-checkbox, .gr-radio {
-        background: white !important;
-        border: 2px solid var(--primary) !important;
-        border-radius: 12px !important;
-    }
-
-    /* دکمه طلایی با انیمیشن */
-    .gr-button {
-        background: linear-gradient(45deg, #d4af37, #f4d03f) !important;
-        color: black !important;
-        font-weight: bold !important;
-        font-size: 22px !important;
-        padding: 18px !important;
-        border-radius: 18px !important;
-        box-shadow: 0 10px 30px rgba(212,175,55,0.4) !important;
-        transition: all 0.3s ease !important;
-    }
-    .gr-button:hover {
-        transform: translateY(-4px) scale(1.02);
-        box-shadow: 0 20px 40px rgba(212,175,55,0.6) !important;
-    }
-
-    /* نتیجه */
-    .result-card {
-        text-align: center;
-        padding: 40px;
-        background: linear-gradient(135deg, #0d2b1f, #1e4d38);
-        border-radius: 24px;
-        border: 4px solid var(--primary);
-        color: white;
-        animation: fadeIn 0.8s ease;
-    }
-    .result-card h2 {
-        font-size: 52px;
-        color: #d4af37;
-        margin: 10px 0;
-    }
-    @keyframes fadeIn {from {opacity:0; transform:translateY(20px)} to {opacity:1; transform:translateY(0)}}
+    .header {text-align:center; padding:50px 20px; background:linear-gradient(135deg,#0d2b1f,#1e4d38);
+             border-radius:24px; margin-bottom:35px; color:white;}
+    .header h1 {font-size:68px; margin:0; color:#d4af37; text-shadow:0 0 40px rgba(212,175,55,0.6);}
+    .gr-form {background:white !important; padding:24px !important; border-radius:20px !important;
+              box-shadow:0 8px 30px rgba(0,0,0,0.06) !important; margin-bottom:20px;}
+    label {color:var(--text) !important; font-weight:600 !important; font-size:16px !important;}
+    .gr-textbox, .gr-dropdown, .gr-slider > div {background:white !important; border:2px solid #e2e8f0 !important;
+             border-radius:16px !important; color:var(--gray) !important;}
+    .gr-textbox input::placeholder {color:#94a3b8 !important;}
+    .gr-button {background:linear-gradient(45deg,#d4af37,#f4d03f) !important; color:black !important;
+                font-weight:bold !important; font-size:22px !important; padding:18px !important;
+                border-radius:18px !important; box-shadow:0 10px 30px rgba(212,175,55,0.4) !important;
+                transition:all 0.3s !important;}
+    .gr-button:hover {transform:translateY(-4px) scale(1.02); box-shadow:0 20px 40px rgba(212,175,55,0.6) !important;}
+    .result-card {text-align:center; padding:40px; background:linear-gradient(135deg,#0d2b1f,#1e4d38);
+                  border-radius:24px; border:4px solid var(--primary); color:white; animation:fadeIn 0.8s;}
+    .result-card h2 {font-size:52px; color:#d4af37; margin:10px 0;}
+    @keyframes fadeIn {from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}
 </style>
 """
 
-with gr.Blocks(css=css, title="کاتب 2025 - قیمت آپارتمان تهران") as app:
-    gr.HTML(css)
-    
-    gr.HTML("""
-    <div class="header">
-        <h1>کاتب</h1>
-        <p style="font-size:28px;margin:15px 0 5px">هوش مصنوعی پیش‌بینی قیمت مسکن تهران</p>
-        <p style="font-size:20px;color:#a0d8c8">۸۱,۰۰۰ آگهی واقعی دیوار ۱۴۰۴</p>
-    </div>
-    """)
+# اپ اصلی — بدون css= در Blocks
+with gr.Blocks(title="کاتب 2025 - قیمت آپارتمان تهران") as app:
+    gr.HTML(css_html)  # فقط این خط مهمه!
 
-    with gr.Row():
-        area_type = gr.Radio(["متراژ مفید (معمول در دیوار)", "متراژ سندی"], 
-                            value="متراژ مفید (معمول در دیوار)", label="نوع متراژ")
-    
+    gr.HTML('<div class="header"><h1>کاتب</h1><p style="font-size:28px;margin:15px 0 5px">هوش مصنوعی پیش‌بینی قیمت مسکن تهران</p><p style="font-size:20px;color:#a0d8c8">۸۱,۰۰۰ آگهی واقعی دیوار ۱۴۰۴</p></div>')
+
+    area_type = gr.Radio(["متراژ مفید (معمول در دیوار)", "متراژ سندی"], value="متراژ مفید (معمول در دیوار)", label="نوع متراژ")
     with gr.Row():
         area = gr.Slider(40, 450, 90, step=1, label="متراژ")
         rooms = gr.Dropdown([1,2,3,4,5,6], value=3, label="تعداد خواب")
-    
     neighborhood = gr.Textbox(placeholder="مثل: سعادت آباد، نیاوران، پونک، جردن...", label="محله")
-    
     with gr.Row():
         elevator = gr.Checkbox(label="آسانسور", value=True)
         parking = gr.Checkbox(label="پارکینگ", value=True)
         warehouse = gr.Checkbox(label="انباری", value=True)
-    
     age = gr.Slider(0, 50, 8, step=1, label="سن بنا (سال)")
 
     gr.Button("پیش‌بینی قیمت", variant="primary").click(
@@ -160,10 +79,6 @@ with gr.Blocks(css=css, title="کاتب 2025 - قیمت آپارتمان تهر
         outputs=gr.Markdown()
     )
 
-    gr.HTML("""
-    <div style="text-align:center;margin-top:50px;padding:35px;background:white;border-radius:20px;box-shadow:0 8px 30px rgba(0,0,0,0.08);border:2px dashed #d4af37">
-        <p style="color:#d4af37;font-size:26px;margin:0">ساخته شده با افتخار در ایران</p>
-    </div>
-    """)
+    gr.HTML('<div style="text-align:center;margin-top:50px;padding:35px;background:white;border-radius:20px;box-shadow:0 8px 30px rgba(0,0,0,0.08);border:2px dashed #d4af37"><p style="color:#d4af37;font-size:26px;margin:0">ساخته شده با افتخار در ایران</p></div>')
 
 app.launch()