Update app.py

app.py

@@ -1,16 +1,15 @@
-# app.py - نسخه نهایی کاتب با فونت ۱۰۰٪ مشکی و خوانا (مخصوص Hugging Face Spaces)
+# app.py - نسخه نهایی کاتب با ظاهر سفید، راست‌چین، حرفه‌ای و کاملاً خوانا
 import gradio as gr
 import pandas as pd
 import numpy as np
 from catboost import CatBoostRegressor
 
-# لود مدل بهینه (فایل kaatib_v8_optimized.cbm باید آپلود شده باشه)
+# لود مدل
 model = CatBoostRegressor()
 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
-    
     df = pd.DataFrame([{
         'area': effective_area,
         'log_area': np.log1p(effective_area),
@@ -22,107 +21,101 @@ def predict(area_type, area, rooms, neighborhood, elevator, parking, warehouse,
         'parking': bool(parking),
         'warehouse': bool(warehouse)
     }])
-
     pred = model.predict(df)[0] / 1_000_000_000
     lower = pred * 0.88
     upper = pred * 1.15
-
     return f"""
-<div style="text-align:center; padding:40px; background:linear-gradient(135deg,#0d2b1f,#1a3d2e); border-radius:20px; border:4px solid #d4af37; box-shadow:0 15px 40px rgba(212,175,55,0.3);">
-  <h1 style="color:#d4af37; font-size:52px; margin:10px 0;">{pred:.2f} میلیارد تومان</h1>
-  <p style="color:#b8d5cd; font-size:22px;">رنج واقعی بازار: {lower:.2f} – {upper:.2f} میلیارد</p>
-</div>
-"""
+    <div style="text-align:center; padding:35px; background:#0d2b1f; color:white; border-radius:18px; border:4px solid #d4af37; box-shadow:0 10px 30px rgba(0,0,0,0.5);">
+      <h1 style="font-size:48px; margin:10px 0; color:#d4af37;">{pred:.2f} میلیارد تومان</h1>
+      <p style="font-size:20px; margin:5px; color:#b8d5cd;">رنج واقعی بازار: {lower:.2f} – {upper:.2f} میلیارد</p>
+    </div>
+    """
 
-# CSS کامل با فونت ۱۰۰٪ مشکی و خوانا
+# CSS کاملاً تمیز، سفید، راست‌چین و حرفه‌ای
 css = """
 <style>
-/* پس‌زمینه اصلی */
+/* پس‌زمینه اصلی سفید و تمیز */
 .gradio-container {
-    max-width: 960px !important;
+    max-width: 920px !important;
     margin: 20px auto !important;
-    background: linear-gradient(135deg, #0a1e15, #0f2b1f);
-    border-radius: 30px;
-    box-shadow: 0 30px 80px rgba(0,0,0,0.95);
-    padding: 20px;
+    background: white !important;
+    border-radius: 24px !important;
+    box-shadow: 0 10px 40px rgba(0,0,0,0.1) !important;
+    padding: 30px !important;
+    direction: rtl !important;
+    text-align: right !important;
+    font-family: 'Vazir', Tahoma, sans-serif !important;
+}
+body {background: #f5f7fa !important;}
+
+/* همه متن‌ها مشکی و راست‌چین */
+label, .gr-form label, h1, h2, h3, p, span, div {
+    color: #1a1a1a !important;
+    text-align: right !important;
+    direction: rtl !important;
+    font-weight: 600 !important;
 }
-body {background: #040a07 !important;}
 
-/* تمام لیبل‌ها و متن‌های بالای ورودی‌ها */
-label, .gr-form label, .gr-block-title {
-    color: black !important;
-    font-weight: bold !important;
+/* باکس‌های ورودی سفید با حاشیه نرم */
+.gr-textbox, .gr-dropdown, .gr-slider > div, .gr-radio > div, .gr-checkbox > div {
     background: white !important;
-    padding: 12px 20px !important;
+    border: 2px solid #e0e0e0 !important;
     border-radius: 16px !important;
-    box-shadow: 0 4px 15px rgba(0,0,0,0.3) !important;
+    padding: 12px !important;
 }
 
-/* رادیو و چک‌باکس */
-.gr-radio label, .gr-checkbox label, 
-.gr-radio > div > label, .gr-checkbox > div > label {
-    color: black !important;
-    background: white !important;
-    padding: 10px 18px !important;
-    border-radius: 12px !important;
-    border: 2px solid #d4af37 !important;
+/* متن داخل تکست‌باکس و دراپ‌داون طوسی */
+.gr-textbox input, .gr-textbox textarea,
+.gr-dropdown select, .gr-dropdown input {
+    color: #666666 !important;
+    font-size: 16px !important;
 }
 
-/* اسلایدر (اعداد، خط و دکمه) */
-.gr-slider input[type="range"],
-.gr-slider .track, 
-.gr-slider .thumb,
-.gr-slider div[role="slider"],
-.gr-slider > div > div > div,
-.gr-slider input[type="range"] + div {
-    color: black !important;
-    background: white !important;
-    font-weight: bold !important;
+/* placeholder طوسی */
+.gr-textbox input::placeholder {
+    color: #999999 !important;
 }
 
-/* دراپ‌داون (تعداد خواب) */
-.gr-dropdown, .gr-dropdown > div {
-    background: white !important;
-    color: black !important;
-    border-radius: 16px !important;
+/* اسلایدر — خط و اعداد */
+.gr-slider input[type="range"] {
+    background: #d4af37 !important;
 }
+.gr-slider .track {background: #d4af37 !important;}
+.gr-slider > div > div > div {color: #1a1a1a !important; font-weight: bold !important;}
 
-/* تکست‌باکس (محله) */
-.gr-textbox {
+/* چک‌باکس و رادیو */
+.gr-checkbox label, .gr-radio label {
+    color: #1a1a1a !important;
     background: white !important;
-    color: black !important;
-    border-radius: 16px !important;
+    border: 2px solid #d4af37 !important;
+    border-radius: 12px !important;
+    padding: 10px 16px !important;
 }
 
-/* دکمه اصلی */
+/* دکمه طلایی */
 .gr-button {
     background: linear-gradient(45deg, #d4af37, #b8971a) !important;
     color: black !important;
-    font-size: 24px !important;
-    padding: 22px !important;
-    border-radius: 20px !important;
     font-weight: bold !important;
+    font-size: 22px !important;
+    padding: 18px !important;
+    border-radius: 18px !important;
+    box-shadow: 0 8px 25px rgba(212,175,55,0.4) !important;
 }
-
-/* مطمئن بشیم هیچ متنی سفید نباشه */
-* { color: black !important; }
-input, select, textarea, .gr-form *, span, div { color: black !important; }
 </style>
 """
 
-with gr.Blocks(title="کاتب - قیمت آپارتمان تهران ۱۴۰۴") as app:
-    gr.HTML(css)  # CSS رو اول لود می‌کنیم
-
-    # هدر طلایی
+with gr.Blocks(css=css, title="کاتب - پیش‌بینی قیمت آپارتمان تهران") as app:
+    # هدر
     gr.HTML("""
-    <div style="text-align:center; padding:60px 20px; background:linear-gradient(135deg,#0d2b1f,#1e4d38); border-bottom:6px solid #d4af37; border-radius:25px 25px 0 0;">
-        <h1 style="font-size:70px; margin:0; color:#d4af37; text-shadow:0 0 40px #d4af3777;">کاتب</h1>
-        <p style="font-size:34px; color:#b8d5cd; margin:10px 0 5px;">هوش مصنوعی پیش‌بینی قیمت مسکن تهران</p>
-        <p style="font-size:24px; color:#8fb8a2;">۸۱,۰۰۰ آگهی واقعی دیوار ۱۴۰۴</p>
+    <div style="text-align:center; padding:50px 20px; background:linear-gradient(135deg,#0d2b1f,#1e4d38); border-radius:20px; margin-bottom:30px;">
+        <h1 style="font-size:62px; margin:0; color:#d4af37; text-shadow:0 0 30px #d4af3777;">کاتب</h1>
+        <p style="font-size:28px; color:#b8d5cd; margin:10px 0 5px;">هوش مصنوعی پیش‌بینی قیمت مسکن تهران</p>
+        <p style="font-size:20px; color:#8fb8a2;">بر اساس ۸۱,۰۰۰ آگهی واقعی دیوار ۱۴۰۴</p>
     </div>
     """)
 
-    # ورودی‌ها
+    # فرم ورودی
     area_type = gr.Radio(
         ["متراژ مفید (معمول در دیوار)", "متراژ سندی"],
         value="متراژ مفید (معمول در دیوار)",
@@ -130,20 +123,23 @@ with gr.Blocks(title="کاتب - قیمت آپارتمان تهران ۱۴۰۴")
     )
     
     with gr.Row():
-        area = gr.Slider(40, 450, value=90, step=1, label="متراژ")
+        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="محله")
+    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, value=8, step=1, label="سن بنا (سال)")
+    age = gr.Slider(0, 50, 8, step=1, label="سن بنا (سال)")
 
     # دکمه و خروجی
-    btn = gr.Button("پیش‌بینی قیمت", variant="primary")
+    btn = gr.Button("پیش‌بینی قیمت با کاتب")
     output = gr.Markdown()
 
     btn.click(
@@ -154,10 +150,9 @@ with gr.Blocks(title="کاتب - قیمت آپارتمان تهران ۱۴۰۴")
 
     # فوتر
     gr.HTML("""
-    <div style="text-align:center; margin:60px 20px 20px; padding:40px; background:rgba(212,175,55,0.15); border-radius:25px; border:3px dashed #d4af37;">
-        <p style="color:#d4af37; font-size:26px; margin:0;">ساخته شده با افتخار در ایران</p>
+    <div style="text-align:center; margin-top:50px; padding:30px; background:#f8f9fa; border-radius:18px; border:2px dashed #d4af37;">
+        <p style="color:#d4af37; font-size:24px; margin:0;">ساخته شده با افتخار در ایران</p>
     </div>
     """)
 
-# لانچ
 app.launch()