Update app.py

app.py

@@ -1,132 +1,367 @@
 import streamlit as st
-from transformers import pipeline, AutoTokenizer, AutoModelForCausalLM
-
-# تنظیمات ادمین
-ADMIN_USERNAME = "admin"
-ADMIN_PASSWORD = "password"
-
-# CSS برای ظاهر برنامه
-CUSTOM_CSS = """
-<style>
-body {
-    font-family: 'Vazir', sans-serif;
-    background: linear-gradient(135deg, #e8effa, #ffffff);
-}
-.chat-container {
-    max-width: 400px;
-    margin: 0 auto;
-    border-radius: 15px;
-    box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.1);
-}
-.header {
-    background: linear-gradient(135deg, #4a90e2, #50e3c2);
-    color: white;
-    padding: 10px;
-    text-align: center;
-    font-weight: bold;
-    font-size: 18px;
-}
-.message {
-    padding: 12px 15px;
-    margin: 10px 0;
-    border-radius: 15px;
-    width: fit-content;
-    max-width: 80%;
-    font-size: 15px;
-}
-.message.user {
-    align-self: flex-end;
-    background: #4a90e2;
-    color: white;
-}
-.message.bot {
-    align-self: flex-start;
-    background: #ff6b6b;
-    color: white;
-}
-.footer {
-    display: flex;
-    padding: 10px;
-    background: #f5f5f5;
-    align-items: center;
+import gradio as gr
+from datetime import datetime
+import persianutils as pu
+from transformers import pipeline
+
+# تنظیمات پایه
+SETTINGS = {
+    "dark_mode": False,
+    "font_size": 14,
+    "language": "fa",
+    "theme_color": "#fa8721"
 }
-.footer input[type="text"] {
-    flex: 1;
-    padding: 10px;
-    border: none;
-    border-radius: 20px;
-    background: #ffffff;
-    margin-right: 10px;
+
+# پیام‌های پیش‌فرض
+DEFAULT_MESSAGES = [
+    "سلام! چطور می‌تونم کمکتون کنم؟",
+    "خوشحالم که اینجا هستید!",
+    "بفرمایید، در خدمتم"
+]
+
+# آیکون‌های SVG
+ICONS = {
+    'settings': '''<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+        <circle cx="12" cy="12" r="3"/>
+        <path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"/>
+    </svg>''',
+    'user': '''<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+        <path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"/>
+        <circle cx="12" cy="7" r="4"/>
+    </svg>''',
+    'send': '''<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+        <line x1="22" y1="2" x2="11" y2="13"/>
+        <polygon points="22 2 15 22 11 13 2 9 22 2"/>
+    </svg>'''
 }
-</style>
-"""
-st.markdown(CUSTOM_CSS, unsafe_allow_html=True)
-
-class ModernChatbot:
-    def __init__(self):
-        # تنظیم بارگذاری تنبل مدل
-        if "model_loaded" not in st.session_state:
-            st.session_state.model_loaded = False
-
-    def load_model(self):
-        """بارگذاری مدل و توکنایزر تنها در صورت نیاز"""
-        if not st.session_state.model_loaded:
-            model_name = "HuggingFaceH4/zephyr-7b-beta"
-            st.session_state.tokenizer = AutoTokenizer.from_pretrained(model_name)
-            st.session_state.model = AutoModelForCausalLM.from_pretrained(model_name)
-            st.session_state.chat_pipeline = pipeline(
-                "text-generation",
-                model=st.session_state.model,
-                tokenizer=st.session_state.tokenizer
+
+# تابع پردازش پیام و تاریخ
+def chat_assistant(message, history):
+    """پردازش پیام و تولید پاسخ"""
+    current_time = pu.convert_en_numbers(datetime.now().strftime("%H:%M"))
+    response = DEFAULT_MESSAGES[0]  # پیام پیش‌فرض
+    history = history + [(message, response)]
+    return "", history
+
+# تابع ساخت رابط کاربری
+def create_interface():
+    """ساخت رابط کاربری"""
+    with gr.Blocks(css=get_custom_css()) as demo:
+        # هدر
+        gr.HTML(create_header())
+
+        # بخش چت
+        chatbox = gr.Chatbot(
+            elem_id="chatbox",
+            label="چت با دستیار",
+            placeholder="پیام خود را تایپ کنید...",
+            height="70vh"
+        )
+
+        # بخش ورودی
+        with gr.Row():
+            with gr.Column(scale=10):
+                msg_box = gr.Textbox(
+                    show_label=False,
+                    placeholder="پیام خود را بنویسید...",
+                    elem_id="message-box"
+                )
+            with gr.Column(scale=2):
+                send_btn = gr.Button(
+                    "ارسال",
+                    variant="primary",
+                    elem_id="send-button"
+                )
+
+        # تنظیمات
+        with gr.Accordion("تنظیمات", open=False):
+            dark_mode = gr.Checkbox(
+                label="حالت شب",
+                value=SETTINGS["dark_mode"]
+            )
+            font_size = gr.Slider(
+                minimum=12,
+                maximum=20,
+                value=SETTINGS["font_size"],
+                label="اندازه فونت"
             )
-            st.session_state.model_loaded = True
-
-    def generate_response(self, message):
-        """تولید پاسخ با مدل بارگذاری شده"""
-        self.load_model()
-        response = st.session_state.chat_pipeline(
-            message, max_length=50, num_return_sequences=1
-        )[0]['generated_text']
-        return response
-
-    def login_admin(self, username, password):
-        """ورود به عنوان مدیر"""
-        return username == ADMIN_USERNAME and password == ADMIN_PASSWORD
-
-# ذخیره تاریخچه مکالمات و وضعیت ورود ادمین در session_state
-if "conversation_history" not in st.session_state:
-    st.session_state.conversation_history = []
-
-# ایجاد نمونه چت‌بات
-chatbot = ModernChatbot()
-
-# آیکون و پاپ‌آپ ورود ادمین
-if st.sidebar.button("ورود ادمین"):
-    username = st.sidebar.text_input("نام کاربری")
-    password = st.sidebar.text_input("رمز عبور", type="password")
-    if st.sidebar.button("تایید"):
-        if chatbot.login_admin(username, password):
-            st.session_state.admin_logged_in = True
-            st.sidebar.success("ورود موفقیت‌آمیز بود")
-        else:
-            st.sidebar.error("نام کاربری یا رمز عبور اشتباه است")
-
-# نمایش مکالمات
-st.markdown("<div class='chat-container'><div class='header'>چت‌بات هوشمند</div>", unsafe_allow_html=True)
-for sender, message in st.session_state.conversation_history:
-    align_class = "user" if sender == "شما" else "bot"
-    st.markdown(f"<div class='message {align_class}'>{sender}: {message}</div>", unsafe_allow_html=True)
-st.markdown("</div>", unsafe_allow_html=True)
-
-# ورودی پیام کاربر
-user_message = st.text_input("پیام خود را اینجا بنویسید...", key="user_message")
-if st.button("ارسال") and user_message:
-    st.session_state.conversation_history.append(("شما", user_message))
-    response = chatbot.generate_response(user_message)
-    st.session_state.conversation_history.append(("ربات", response))
-    st.experimental_rerun()
-
-# پاک‌سازی مکالمات
-if st.sidebar.button("پاک کردن تاریخچه مکالمات"):
-    st.session_state.conversation_history = []
-    st.experimental_rerun()
+            language = gr.Dropdown(
+                choices=["فارسی", "English"],
+                value="فارسی",
+                label="زبان"
+            )
+
+        # رویدادها
+        msg_box.submit(
+            chat_assistant,
+            [msg_box, chatbox],
+            [msg_box, chatbox]
+        )
+        send_btn.click(
+            chat_assistant,
+            [msg_box, chatbox],
+            [msg_box, chatbox]
+        )
+
+        return demo
+
+# تابع برای اضافه کردن استایل‌های سفارشی
+def get_custom_css():
+    """استایل‌های سفارشی"""
+    return """
+    @font-face {
+        font-family: 'Vazir';
+        src: url('https://cdn.jsdelivr.net/gh/rastikerdar/[email protected]/dist/Vazir.woff2') format('woff2');
+    }
+
+    * {
+        font-family: 'Vazir', Arial, sans-serif;
+        direction: rtl;
+    }
+
+    .container {
+        max-width: 800px;
+        margin: 0 auto;
+        padding: 20px;
+    }
+
+    .chat-area {
+        height: 500px;
+        overflow-y: auto;
+        padding: 20px;
+        background: #f5f5f5;
+        border-radius: 10px;
+    }
+
+    .message {
+        margin: 10px 0;
+        padding: 10px;
+        border-radius: 10px;
+        animation: fadeIn 0.3s ease-out;
+    }
+
+    .user-message {
+        background: white;
+        margin-left: 20%;
+    }
+
+    .bot-message {
+        background: #fa8721;
+        color: white;
+        margin-right: 20%;
+    }
+
+    @keyframes fadeIn {
+        from { opacity: 0; transform: translateY(10px); }
+        to { opacity: 1; transform: translateY(0); }
+    }
+    """
+
+# تابع برای ساخت هدر
+def create_header():
+    """ساخت هدر"""
+    return f"""
+    <div class="header">
+        <div class="logo">
+            {ICONS['user']}
+            <h1>دستیار هوشمند</h1>
+        </div>
+        <div class="settings">
+            {ICONS['settings']}
+        </div>
+    </div>
+    """
+
+# تنظیمات صفحه Streamlit
+def setup_page():
+    st.set_page_config(
+        page_title="دستیار هوشمند فارسی",
+        page_icon="🤖",
+        layout="centered"
+    )
+
+# استایل‌های سفارشی Streamlit
+def apply_custom_styles():
+    st.markdown("""
+    <style>
+        @font-face {
+            font-family: 'Vazir';
+            src: url('https://cdn.jsdelivr.net/gh/rastikerdar/[email protected]/dist/Vazir.woff2') format('woff2');
+        }
+
+        body {
+            font-family: 'Vazir', Arial, sans-serif;
+            direction: rtl;
+            background: #f4f4f4;
+            color: #333;
+            margin: 0;
+            padding: 0;
+        }
+
+        .chat-container {
+            max-width: 900px;
+            margin: 50px auto;
+            padding: 20px;
+            background-color: white;
+            border-radius: 10px;
+            box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
+        }
+
+        .header {
+            display: flex;
+            justify-content: space-between;
+            padding: 10px;
+        }
+
+        .logo {
+            display: flex;
+            align-items: center;
+        }
+
+        .logo h1 {
+            margin-left: 10px;
+        }
+
+        .send-button {
+            background-color: #fa8721;
+            color: white;
+            padding: 12px 16px;
+            border-radius: 50%;
+            border: none;
+            cursor: pointer;
+            transition: background-color 0.3s ease;
+        }
+
+        .send-button:hover {
+            background-color: #f78f34;
+        }
+    </style>
+    """, unsafe_allow_html=True)
+
+# هدر صفحه
+def display_header():
+    st.markdown("""
+    <div class="container">
+        <div class="header">
+            <div class="header-icons">
+                <div class="icon">
+                    <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M2 20h.01"></path><path d="M7 20v-4"></path><path d="M12 20v-8"></path><path d="M17 20V8"></path></svg>
+                </div>
+                <div class="icon">
+                    <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 20h.01"></path><path d="M2 8.82a15 15 0 0 1 20 0"></path><path d="M5 12.859a10 10 0 0 1 14 0"></path><path d="M8.5 16.429a5 5 0 0 1 7 0"></path></svg>
+                </div>
+                <div class="icon">
+                    <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect width="16" height="10" x="2" y="7" rx="2" ry="2"></rect><line x1="22" x2="22" y1="11" y2="13"></line></svg>
+                </div>
+                <div class="settings-button">
+                    <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 2a10 10 0 0 1 10 10c0 5.523-4.477 10-10 10S2 17.523 2 12 6.477 2 12 2"></path><circle cx="12" cy="12" r="3"></circle><path d="M12 8v1M12 15v1M8 12h1M15 12h1"></path></svg>
+                </div>
+            </div>
+            <div class="header-buttons">
+                <button>
+                    <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                        <circle cx="12" cy="12" r="5"/>
+                        <path d="M12 1v2M12 21v2M4.22 4.22l1.42 1.42M18.36 18.36l1.42 1.42M1 12h2M21 12h2M4.22 19.78l1.42-1.42M18.36 5.64l1.42-1.42"/>
+                    </svg>
+                </button>
+                <button>
+                    <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                        <path d="M3 12h18M3 6h18M3 18h18"/>
+                    </svg>
+                </button>
+            </div>
+            <h1>
+                <svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                    <path d="M12 2a10 10 0 0 1 10 10c0 5.523-4.477 10-10 10S2 17.523 2 12 6.477 2 12 2"/>
+                    <circle cx="12" cy="12" r="3"/>
+                    <path d="M12 8v1M12 15v1M8 12h1M15 12h1"/>
+                </svg>
+                دستیار هوشمند
+            </h1>
+            <div class="admin-avatar">
+                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                    <path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"/>
+                    <circle cx="12" cy="7" r="4"/>
+                </svg>
+            </div>
+        </div>
+    </div>
+    """, unsafe_allow_html=True)
+
+# بخش چت
+def display_chat():
+    st.markdown("""
+        <div class="chat-container">
+            <div class="chat-bubble left">
+                سلام! من دستیار هوشمند شما هستم. چطور میتونم کمکتون کنم؟
+            </div>
+            <div class="chat-bubble right">
+                سلام، خوشحالم که اینجایی
+            </div>
+            <div class="chat-bubble left">
+                ممنون! من آماده‌ام به سوالات شما پاسخ بدم
+            </div>
+            <div class="typing-indicator">
+                <div class="typing-dot"></div>
+                <div class="typing-dot"></div>
+                <div class="typing-dot"></div>
+            </div>
+        </div>
+    """, unsafe_allow_html=True)
+
+# بخش ورودی
+def display_input():
+    st.markdown("""
+        <div class="input-container">
+            <input type="text" placeholder="پیام خود را بنویسید..." id="user-input">
+            <button onclick="sendMessage()">
+                <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                    <line x1="22" y1="2" x2="11" y2="13"/>
+                    <polygon points="22 2 15 22 11 13 2 9 22 2"/>
+                </svg>
+            </button>
+        </div>
+    """, unsafe_allow_html=True)
+
+    st.markdown("""
+    <script>
+        function sendMessage() {
+            const userInput = document.getElementById('user-input').value;
+            if (userInput) {
+                const chatContainer = document.querySelector('.chat-container');
+                const userMessage = document.createElement('div');
+                userMessage.classList.add('chat-bubble', 'right');
+                userMessage.textContent = userInput;
+                chatContainer.appendChild(userMessage);
+
+                // Simulate bot response
+                setTimeout(() => {
+                    const botMessage = document.createElement('div');
+                    botMessage.classList.add('chat-bubble', 'left');
+                    botMessage.textContent = 'پاسخ به پیام شما: ' + userInput;
+                    chatContainer.appendChild(botMessage);
+                    chatContainer.scrollTop = chatContainer.scrollHeight;
+                }, 1000);
+
+                document.getElementById('user-input').value = '';
+            }
+        }
+    </script>
+    """, unsafe_allow_html=True)
+
+# اجرای توابع
+setup_page()
+apply_custom_styles()
+display_header()
+display_chat()
+display_input()
+
+# اجرای برنامه Gradio
+if __name__ == "__main__":
+    # توکن احراز هویت Hugging Face را اینجا قرار دهید
+    token = "YOUR_HUGGINGFACE_TOKEN"
+
+    # استفاده از توکن برای دسترسی به مدل خصوصی
+    nlp_pipeline = pipeline("text-generation", model="HooshvareLab/gpt2-fa-zwnj", token=token)
+
+    create_interface().launch(share=True)