app.py

# 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")

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),
        'rooms': int(rooms),
        'age': int(age),
        'is_new': 1 if age <= 5 else 0,
        'neighborhood': neighborhood.strip(),
        'elevator': bool(elevator),
        '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>
"""

# 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("""
    <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>
    """)

    # ورودی‌ها
    area_type = gr.Radio(
        ["متراژ مفید (معمول در دیوار)", "متراژ سندی"],
        value="متراژ مفید (معمول در دیوار)",
        label="نوع متراژ"
    )
    
    with gr.Row():
        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="محله")
    
    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="سن بنا (سال)")

    # دکمه و خروجی
    btn = gr.Button("پیش‌بینی قیمت", variant="primary")
    output = gr.Markdown()

    btn.click(
        fn=predict,
        inputs=[area_type, area, rooms, neighborhood, elevator, parking, warehouse, age],
        outputs=output
    )

    # فوتر
    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>
    """)

# لانچ
app.launch()