app.py

import gradio as gr
import requests
import time

# تنظیمات اصلی

CUSTOM_CSS = """
/* متغیرهای اصلی */
:root {
    --primary-color: #6e8efb;
    --secondary-color: #4a6cf7;
    --glass-bg: rgba(255, 255, 255, 0.15);
    --message-shadow: 5px 5px 15px rgba(0,0,0,0.1);
}

/* استایل‌های پایه */
body {
    font-family: 'Vazir', sans-serif;
    background: linear-gradient(135deg, #e0eafc, #cfdef3);
}

/* آیکون ربات انیمیشنی */
.robot-avatar {
    --robot-color: #4a6cf7;
    --eye-color: #fff;
    --antenna-color: #6e8efb;
    width: 150px;
    height: 150px;
    position: relative;
    margin: 0 auto;
}

.robot-head {
    background: linear-gradient(135deg, var(--robot-color), #8a9fff);
    width: 100px;
    height: 100px;
    border-radius: 45% 45% 45% 45% / 60% 60% 40% 40%;
    position: absolute;
    top: 30px;
    left: 25px;
    box-shadow:
        0 10px 25px rgba(74,108,247,0.3),
        inset 0 -8px 30px rgba(0,0,0,0.2),
        inset 0 8px 30px rgba(255,255,255,0.4);
    animation: floatHead 3s ease-in-out infinite;
}

.robot-eye {
    background: var(--eye-color);
    width: 20px;
    height: 20px;
    border-radius: 50%;
    position: absolute;
    top: 35px;
    box-shadow:
        inset 0 0 15px rgba(74,108,247,0.8),
        0 0 20px rgba(74,108,247,0.4);
    animation: blinkEye 4s infinite;
}

.robot-eye.left { left: 25px; }
.robot-eye.right { right: 25px; }

.robot-antenna {
    width: 8px;
    height: 30px;
    background: var(--antenna-color);
    position: absolute;
    top: -20px;
    left: 50%;
    transform: translateX(-50%);
    border-radius: 20px;
    box-shadow: 0 0 15px rgba(74,108,247,0.6);
    animation: antennaGlow 2s ease-in-out infinite;
}

/* افکت‌های هولوگرافیک */
.hologram-container {
    position: relative;
    overflow: hidden;
    border-radius: 20px;
}

.hologram-effect {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(
        45deg,
        transparent 0%,
        rgba(255,255,255,0.1) 30%,
        rgba(255,255,255,0.2) 50%,
        rgba(255,255,255,0.1) 70%,
        transparent 100%
    );
    mix-blend-mode: overlay;
    animation: hologramScan 3s linear infinite;
}

/* استایل پیام‌ها */
.message-bubble {
    position: relative;
    padding: 15px;
    margin: 10px;
    border-radius: 20px;
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    box-shadow:
        inset 0 0 15px rgba(255,255,255,0.5),
        0 5px 15px rgba(0,0,0,0.1);
    transform-style: preserve-3d;
    transition: all 0.3s ease;
}

.message-bubble:hover {
    transform: translateY(-3px) rotateX(5deg);
}

/* استایل دکمه‌ها */
.button-modern {
    background: linear-gradient(135deg, #6e8efb, #4a6cf7);
    color: white;
    padding: 12px 25px;
    border: none;
    border-radius: 15px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow:
        0 5px 15px rgba(74,108,247,0.2),
        inset 0 -2px 5px rgba(0,0,0,0.1),
        inset 0 2px 5px rgba(255,255,255,0.2);
}

.button-modern:hover {
    background: linear-gradient(135deg, #7e9bff, #5a7cff);
    transform: translateY(-2px);
    box-shadow:
        0 8px 20px rgba(74,108,247,0.3),
        inset 0 -2px 5px rgba(0,0,0,0.1),
        inset 0 2px 5px rgba(255,255,255,0.3);
}

.button-modern:active {
    transform: translateY(1px);
    box-shadow:
        0 2px 10px rgba(74,108,247,0.2),
        inset 0 -1px 3px rgba(0,0,0,0.1),
        inset 0 1px 3px rgba(255,255,255,0.2);
}

/* انیمیشن‌ها */
@keyframes floatHead {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-10px); }
}

@keyframes blinkEye {
    0%, 45%, 55%, 100% { transform: scale(1); }
    50% { transform: scale(0.1); }
}

@keyframes antennaGlow {
    0%, 100% { box-shadow: 0 0 15px rgba(74,108,247,0.6); }
    50% { box-shadow: 0 0 25px rgba(74,108,247,0.9); }
}

@keyframes hologramScan {
    0% { transform: translateX(-100%) rotate(0deg); }
    100% { transform: translateX(100%) rotate(360deg); }
}

/* استایل تنظیمات حالت لایت و دارک */
.theme-selector {
    position: absolute;
    top: 20px;
    right: 20px;
}

.theme-selector button {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 20px;
    color: var(--primary-color);
}

.theme-selector button:hover {
    color: var(--secondary-color);
}

/* استایل ورود ادمین */
.admin-login {
    position: absolute;
    top: 20px;
    left: 20px;
}

.admin-login button {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 20px;
    color: var(--primary-color);
}

.admin-login button:hover {
    color: var(--secondary-color);
}

.admin-dashboard {
    display: none;
    margin-top: 20px;
}

.admin-dashboard.visible {
    display: block;
}
"""

class ModernChatbot:
    def __init__(self):
        self.conversation_history = []

    def chat_response(self, message, history):
        time.sleep(0.5)  # تاخیر طبیعی
        try:
            response = requests.post(
                API_URL,
                headers=HEADERS,
                json={"inputs": message},
                timeout=10
            )
            bot_message = response.json()[0]['generated_text']
        except:
            bot_message = "متأسفانه در پردازش پیام مشکلی پیش آمد. لطفاً دوباره تلاش کنید."

        return bot_message

def create_interface():
    chatbot = ModernChatbot()

    with gr.Blocks(css=CUSTOM_CSS) as demo:
        # تنظیمات حالت لایت و دارک
        with gr.Row(elem_classes="theme-selector"):
            theme_selector = gr.Radio(
                ["روز", "شب"],
                label="تنظیمات حالت لایت و دارک",
                value="روز",
                interactive=True
            )

        # لوگو و هدر
        gr.HTML("""
            <div class="robot-avatar">
                <div class="robot-head">
                    <div class="robot-eye left"></div>
                    <div class="robot-eye right"></div>
                    <div class="robot-antenna"></div

>
                </div>
                <div class="hologram-effect"></div>
            </div>
            <h1 style="text-align: center; margin-top: 20px;
                       background: linear-gradient(135deg, #4a6cf7, #8a9fff);
                       -webkit-background-clip: text;
                       -webkit-text-fill-color: transparent;
                       font-size: 2.5em;
                       text-shadow: 3px 3px 6px rgba(0,0,0,0.2);">
                دستیار هوشمند
            </h1>
        """)

        chatbot_interface = gr.Chatbot(
            height=500,
            bubble_full_width=False,
            show_label=False,
            elem_classes="message-bubble",
            type='messages'  # تغییر نوع پیام به فرمت جدید
        )

        with gr.Row():
            msg = gr.Textbox(
                placeholder="پیام خود را اینجا بنویسید...",
                label="",
                elem_classes="input-field"
            )
            submit = gr.Button(
                "ارسال",
                elem_classes="button-modern submit-button"
            )

        clear = gr.Button(
            "پاک کردن گفتگو",
            elem_classes="button-modern clear-button"
        )

        # تنظیم رویدادها
        submit.click(
            chatbot.chat_response,
            inputs=[msg, chatbot_interface],
            outputs=chatbot_interface
        )

        msg.submit(
            chatbot.chat_response,
            inputs=[msg, chatbot_interface],
            outputs=chatbot_interface
        )

        clear.click(lambda: None, None, chatbot_interface)

        # ورود ادمین
        with gr.Row(elem_classes="admin-login"):
            admin_button = gr.Button("ورود ادمین", elem_classes="button-modern admin-button")

        admin_username = gr.Textbox(
            placeholder="نام کاربری مدیر",
            label="نام کاربری",
            elem_classes="input-field",
            visible=False
        )
        admin_password = gr.Textbox(
            placeholder="رمز عبور مدیر",
            label="رمز عبور",
            elem_classes="input-field",
            type="password",
            visible=False
        )
        admin_login = gr.Button(
            "ورود",
            elem_classes="button-modern admin-button",
            visible=False
        )

        def admin_login_handler(username, password):
            if username == "admin" and password == "admin":
                return gr.update(visible=True)
            else:
                return gr.update(visible=False)

        admin_dashboard = gr.HTML("""
            <div class="admin-dashboard">
                <h2>داشبورد ادمین</h2>
                <p>اینجا داشبورد ادمین قرار دارد.</p>
            </div>
        """, visible=False)

        admin_button.click(
            lambda: (gr.update(visible=True), gr.update(visible=True), gr.update(visible=True)),
            None,
            [admin_username, admin_password, admin_login]
        )

        admin_login.click(
            admin_login_handler,
            inputs=[admin_username, admin_password],
            outputs=admin_dashboard
        )

    return demo
share=True
if __name__ == "__main__":
    demo = create_interface()
    demo.launch(debug=True, share=True)