Spaces:

Really-amin
/

bankchatbot

Paused

Update app.py

40035a8 verified almost 2 years ago

13.4 kB

import streamlit as st
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"
}

# پیام‌های پیش‌فرض
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>'''
}

# تابع پردازش پیام و تاریخ
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="اندازه فونت"
            )
            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/vazir-font@v27.2.2/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/vazir-font@v27.2.2/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 را اینجا قرار دهید
   
    # استفاده از توکن برای دسترسی به مدل خصوصی
 
    create_interface().launch(share=True)

	import streamlit as st
	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"
	}

	# پیام‌های پیش‌فرض
	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>'''
	}

	# تابع پردازش پیام و تاریخ
	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="اندازه فونت"
	)
	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/vazir-font@v27.2.2/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/vazir-font@v27.2.2/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 را اینجا قرار دهید

	# استفاده از توکن برای دسترسی به مدل خصوصی

	create_interface().launch(share=True)