Update app.py

app.py

@@ -1,10 +1,10 @@
-# app.py - نسخه نهایی و 100٪ کارکردنی
+# app.py - نسخه نهایی کاتب با فونت ۱۰۰٪ مشکی و خوانا (مخصوص Hugging Face Spaces)
 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")
 
@@ -34,40 +34,130 @@ def predict(area_type, area, rooms, neighborhood, elevator, parking, warehouse,
 </div>
 """
 
+# CSS کامل با فونت ۱۰۰٪ مشکی و خوانا
+css = """
+<style>
+/* پس‌زمینه اصلی */
+.gradio-container {
+    max-width: 960px !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;
+}
+body {background: #040a07 !important;}
+
+/* تمام لیبل‌ها و متن‌های بالای ورودی‌ها */
+label, .gr-form label, .gr-block-title {
+    color: black !important;
+    font-weight: bold !important;
+    background: white !important;
+    padding: 12px 20px !important;
+    border-radius: 16px !important;
+    box-shadow: 0 4px 15px rgba(0,0,0,0.3) !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-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;
+}
+
+/* دراپ‌داون (تعداد خواب) */
+.gr-dropdown, .gr-dropdown > div {
+    background: white !important;
+    color: black !important;
+    border-radius: 16px !important;
+}
+
+/* تکست‌باکس (محله) */
+.gr-textbox {
+    background: white !important;
+    color: black !important;
+    border-radius: 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;
+}
+
+/* مطمئن بشیم هیچ متنی سفید نباشه */
+* { color: black !important; }
+input, select, textarea, .gr-form *, span, div { color: black !important; }
+</style>
+"""
+
 with gr.Blocks(title="کاتب - قیمت آپارتمان تهران ۱۴۰۴") as app:
+    gr.HTML(css)  # CSS رو اول لود می‌کنیم
+
+    # هدر طلایی
     gr.HTML("""
-    <style>
-    .gradio-container {max-width: 960px !important; margin: 20px auto; background: linear-gradient(135deg, #0a1e15, #0f2b1f); border-radius: 30px; box-shadow: 0 30px 80px rgba(0,0,0,0.95); padding: 20px;}
-    body {background: #040a07 !important;}
-    label {color: black !important; font-weight: bold !important; background: white !important; padding: 12px 20px !important; border-radius: 16px !important;}
-    .gr-button {background: linear-gradient(45deg, #d4af37, #b8971a) !important; color: black !important; font-size: 24px !important; padding: 20px !important; border-radius: 20px !important;}
-    </style>
-    <div style="text-align:center; padding:60px 20px; background:linear-gradient(135deg,#0d2b1f,#1e4d38); border-bottom:6px solid #d4af37;">
+    <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;">هوش مصنوعی پیش‌بینی قیمت مسکن تهران</p>
+        <p style="font-size:34px; color:#b8d5cd; margin:10px 0 5px;">هوش مصنوعی پیش‌بینی قیمت مسکن تهران</p>
         <p style="font-size:24px; color:#8fb8a2;">۸۱,۰۰۰ آگهی واقعی دیوار ۱۴۰۴</p>
     </div>
     """)
 
-    area_type = gr.Radio(["متراژ مفید (معمول در دیوار)", "متراژ سندی"], value="متراژ مفید (معمول در دیوار)", label="نوع متراژ")
+    # ورودی‌ها
+    area_type = gr.Radio(
+        ["متراژ مفید (معمول در دیوار)", "متراژ سندی"],
+        value="متراژ مفید (معمول در دیوار)",
+        label="نوع متراژ"
+    )
+    
     with gr.Row():
-        area = gr.Slider(40, 450, 90, step=1, label="متراژ")
+        area = gr.Slider(40, 450, value=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, 8, step=1, label="سن بنا (سال)")
+    
+    age = gr.Slider(0, 50, value=8, step=1, label="سن بنا (سال)")
+
+    # دکمه و خروجی
+    btn = gr.Button("پیش‌بینی قیمت", variant="primary")
+    output = gr.Markdown()
 
-    gr.Button("پیش‌بینی قیمت").click(predict,
+    btn.click(
+        fn=predict,
         inputs=[area_type, area, rooms, neighborhood, elevator, parking, warehouse, age],
-        outputs=gr.Markdown())
+        outputs=output
+    )
 
+    # فوتر
     gr.HTML("""
-    <div style="text-align:center; margin:60px; padding:40px; background:rgba(212,175,55,0.15); border-radius:25px; border:3px dashed #d4af37;">
-        <p style="color:#d4af37; font-size:26px;">ساخته شده با افتخار در ایران</p>
+    <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>
     """)
 
+# لانچ
 app.launch()