edit front

app.py

@@ -11,62 +11,98 @@ from langchain.chat_models import ChatOpenAI
 from typing import List
 from together import Together
 
+
 st.set_page_config(page_title="چت‌ بات ارتش", page_icon="🪖", layout="wide")
 
 st.markdown("""
     <style>
-    .main {
-        background-color: #f9f9f9;
+    @import url('https://fonts.googleapis.com/css2?family=Vazirmatn:wght@400;700&display=swap');
+
+    html, body, [class*="css"] {
+        font-family: 'Vazirmatn', Tahoma, sans-serif;
+        direction: rtl;
+        text-align: right;
+    }
+
+    .stApp {
+        background: url("./military_bg.jpeg") no-repeat center center fixed;
+        background-size: cover;
+        backdrop-filter: blur(2px);
     }
 
     .stChatMessage {
-        background-color: #e0f7fa;
+        background-color: rgba(255,255,255,0.8);
+        border: 1px solid #4e8a3e;
         border-radius: 12px;
-        padding: 12px;
-        margin-bottom: 12px;
+        padding: 16px;
+        margin-bottom: 15px;
+        box-shadow: 0 4px 10px rgba(0,0,0,0.2);
+        animation: fadeIn 0.4s ease-in-out;
+    }
+
+    .stTextInput > div > input, .stTextArea textarea {
+        background-color: rgba(255,255,255,0.9) !important;
+        border-radius: 8px !important;
         direction: rtl;
         text-align: right;
-        font-family: 'Tahoma', sans-serif;
+        font-family: 'Vazirmatn', Tahoma;
     }
 
-    .stMarkdown, .stTextInput, .stTextArea, .stButton {
-        direction: rtl !important;
-        text-align: right !important;
-        font-family: 'Tahoma', sans-serif;
+    .stButton>button {
+        background-color: #4e8a3e !important;
+        color: white !important;
+        font-weight: bold;
+        border-radius: 10px;
+        padding: 8px 20px;
+        transition: 0.3s;
     }
 
-    .header-container {
-        display: flex;
-        flex-direction: column;
-        align-items: center;
-        justify-content: center;
-        margin-top: 30px;
-        margin-bottom: 40px;
+    .stButton>button:hover {
+        background-color: #3c6d30 !important;
     }
 
-    .header-container img {
-        width: 140px;
-        border-radius: 15px;
-        margin-bottom: 12px;
-        box-shadow: 0 4px 15px rgba(0,0,0,0.2);
+    .header-text {
+        text-align: center;
+        margin-top: 20px;
+        margin-bottom: 40px;
+        background-color: rgba(255, 255, 255, 0.75);
+        padding: 20px;
+        border-radius: 20px;
+        box-shadow: 0 4px 12px rgba(0,0,0,0.2);
     }
 
-    .header-container h1 {
-        font-size: 36px;
+    .header-text h1 {
+        font-size: 42px;
         color: #2c3e50;
-        font-family: 'Tahoma', sans-serif;
         margin: 0;
+        font-weight: bold;
+    }
+
+    .subtitle {
+        font-size: 18px;
+        color: #34495e;
+        margin-top: 8px;
+    }
+
+    @keyframes fadeIn {
+        from { opacity: 0; transform: translateY(10px); }
+        to { opacity: 1; transform: translateY(0); }
     }
     </style>
 """, unsafe_allow_html=True)
 
+col1, col2, col3 = st.columns([1, 1, 1])
+with col2:
+    st.image("army.png", width=240)
+
 st.markdown("""
-    <div class="header-container">
-        <img src="army.png" alt="لوگو">
-        <h1>هوش مصنوعی توانا</h1>
+    <div class="header-text">
+        <h1>چت‌ بات ارتش</h1>
+        <div class="subtitle">دستیار هوشمند برای تصمیم‌گیری در میدان نبرد</div>
     </div>
 """, unsafe_allow_html=True)
 
+
 class TogetherEmbeddings(Embeddings):
     def __init__(self, model_name: str, api_key: str):
         self.model_name = model_name