Update app.py

app.py

@@ -9,138 +9,116 @@ from calendar_rag import (
 )
 
 # Custom CSS for enhanced styling
+def load_custom_css():
+    st.markdown("""
+        <style>
+        /* Main container styling */
+        .main {
+            padding: 2rem;
+        }
+        
+        /* Headers styling */
+        h1 {
+            color: #1E3A8A;
+            font-size: 2.5rem !important;
+            font-weight: 700 !important;
+            margin-bottom: 1.5rem !important;
+            text-align: center;
+            padding: 1rem 0;
+            border-bottom: 3px solid #1E3A8A;
+        }
+        
+        h3 {
+            color: #1E3A8A;
+            font-weight: 600 !important;
+            margin-top: 1.5rem !important;
+        }
+        
+        /* Chat message styling */
+        .chat-message {
+            padding: 1.5rem;
+            border-radius: 10px;
+            margin: 1rem 0;
+            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+        }
+        
+        .user-message {
+            background-color: #F3F4F6;
+        }
+        
+        .assistant-message {
+            background-color: #EFF6FF;
+        }
+        
+        /* Input field styling */
+        .stTextInput input {
+            border-radius: 8px;
+            border: 2px solid #E5E7EB;
+            padding: 0.75rem;
+            font-size: 1rem;
+        }
+        
+        .stTextInput input:focus {
+            border-color: #1E3A8A;
+            box-shadow: 0 0 0 2px rgba(30, 58, 138, 0.1);
+        }
+        
+        /* Button styling */
+        .stButton button {
+            border-radius: 8px;
+            font-weight: 600;
+            transition: all 0.2s ease;
+        }
+        
+        .stButton button:hover {
+            transform: translateY(-1px);
+            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+        }
+        
+        /* Expander styling */
+        .streamlit-expanderHeader {
+            background-color: #F9FAFB;
+            border-radius: 8px;
+            padding: 0.75rem !important;
+            font-weight: 600;
+        }
+        
+        /* Status indicator styling */
+        .status-indicator {
+            padding: 0.5rem 1rem;
+            border-radius: 6px;
+            font-weight: 500;
+        }
+        
+        .status-online {
+            background-color: #DEF7EC;
+            color: #03543F;
+        }
+        
+        .status-offline {
+            background-color: #FDE8E8;
+            color: #9B1C1C;
+        }
+        </style>
+    """, unsafe_allow_html=True)
+
+# Page config
 st.set_page_config(
     page_title="Academic Calendar Assistant",
     page_icon="📅",
-    layout="wide"
+    layout="wide",
+    initial_sidebar_state="collapsed"
 )
 
-# Apply custom CSS
-st.markdown("""
-<style>
-    /* Modern color scheme */
-    :root {
-        --primary-color: #2563eb;
-        --secondary-color: #1e40af;
-        --background-color: #f8fafc;
-        --text-color: #1e293b;
-        --accent-color: #3b82f6;
-    }
-    
-    /* Main container styling */
-    .main {
-        background-color: var(--background-color);
-        padding: 2rem;
-        border-radius: 1rem;
-    }
-    
-    /* Header styling */
-    .stTitle {
-        color: var(--primary-color) !important;
-        font-size: 2.5rem !important;
-        font-weight: 700 !important;
-        margin-bottom: 1rem !important;
-        text-align: center;
-        padding: 2rem 0;
-        background: linear-gradient(135deg, #2563eb 0%, #1e40af 100%);
-        -webkit-background-clip: text;
-        -webkit-text-fill-color: transparent;
-    }
-    
-    /* Card styling */
-    .stMarkdown {
-        background-color: white;
-        padding: 1.5rem;
-        border-radius: 0.75rem;
-        box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
-        margin-bottom: 1rem;
-    }
-    
-    /* Button styling */
-    .stButton > button {
-        border-radius: 0.5rem !important;
-        padding: 0.75rem 1.5rem !important;
-        font-weight: 600 !important;
-        transition: all 0.3s ease !important;
-    }
-    
-    .stButton > button:hover {
-        transform: translateY(-2px);
-        box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
-    }
-    
-    /* Input field styling */
-    .stTextInput > div > div > input {
-        border-radius: 0.5rem !important;
-        border: 2px solid #e2e8f0 !important;
-        padding: 1rem !important;
-        font-size: 1rem !important;
-        transition: all 0.3s ease !important;
-    }
-    
-    .stTextInput > div > div > input:focus {
-        border-color: var(--primary-color) !important;
-        box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.2) !important;
-    }
-    
-    /* Chat message styling */
-    .user-message {
-        background-color: #f1f5f9;
-        padding: 1rem;
-        border-radius: 0.5rem;
-        margin: 0.5rem 0;
-        border-left: 4px solid var(--primary-color);
-    }
-    
-    .assistant-message {
-        background-color: white;
-        padding: 1rem;
-        border-radius: 0.5rem;
-        margin: 0.5rem 0;
-        border-left: 4px solid var(--accent-color);
-        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
-    }
-    
-    /* Expander styling */
-    .streamlit-expander {
-        border: none !important;
-        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05) !important;
-        border-radius: 0.5rem !important;
-        margin: 1rem 0 !important;
-    }
-    
-    /* Status indicator styling */
-    .status-indicator {
-        display: inline-block;
-        width: 10px;
-        height: 10px;
-        border-radius: 50%;
-        margin-right: 0.5rem;
-    }
-    
-    .status-online {
-        background-color: #22c55e;
-    }
-    
-    /* Container styling */
-    .content-container {
-        background-color: white;
-        padding: 2rem;
-        border-radius: 1rem;
-        box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
-    }
-</style>
-""", unsafe_allow_html=True)
+# Load custom CSS
+load_custom_css()
 
-# Initialize session states
+# Initialize session state
 if 'pipeline' not in st.session_state:
     st.session_state.pipeline = None
     
 if 'chat_history' not in st.session_state:
     st.session_state.chat_history = []
-    
-if 'current_query' not in st.session_state:
-    st.session_state.current_query = ''
 
 def initialize_pipeline():
     """Initialize RAG pipeline with configurations"""
@@ -150,7 +128,6 @@ def initialize_pipeline():
         config.localization.enable_thai_normalization = True
         config.retriever.top_k = 5
         config.model.temperature = 0.3
-        
         pipeline = AcademicCalendarRAG(config)
         
         with open("calendar.json", "r", encoding="utf-8") as f:
@@ -165,161 +142,139 @@ def initialize_pipeline():
 
 def display_chat_history():
     """Display chat history with enhanced styling"""
-    for role, message in st.session_state.chat_history:
+    for i, (role, message) in enumerate(st.session_state.chat_history):
         if role == "user":
             st.markdown(f"""
-            <div class="user-message">
-                <strong>🧑 คำถาม:</strong><br>
-                {message}
-            </div>
+                <div class="chat-message user-message">
+                    <strong>🧑 คำถาม:</strong><br>
+                    {message}
+                </div>
             """, unsafe_allow_html=True)
         else:
             st.markdown(f"""
-            <div class="assistant-message">
-                <strong>🤖 คำตอบ:</strong><br>
-                {message}
-            </div>
+                <div class="chat-message assistant-message">
+                    <strong>🤖 คำตอบ:</strong><br>
+                    {message}
+                </div>
             """, unsafe_allow_html=True)
 
-def process_query(query: str):
-    """Process a query and update the chat history"""
-    if not query:
-        st.warning("⚠️ กรุณาระบุคำถาม")
-        return
-        
-    if st.session_state.pipeline is None:
-        st.error("❌ ไม่สามารถเชื่อมต่อกับระบบได้ กรุณาลองใหม่อีกครั้ง")
-        return
-        
-    st.session_state.chat_history.append(("user", query))
-        
-    try:
-        with st.spinner("🔄 กำลังค้นหาคำตอบ..."):
-            result = st.session_state.pipeline.process_query(query)
-            st.session_state.chat_history.append(("assistant", result["answer"]))
-            
-            with st.expander("📚 **ข้อมูลอ้างอิง**", expanded=False):
-                for i, doc in enumerate(result["documents"], 1):
-                    st.markdown(f"""
-                    <div class="content-container">
-                        <h3>เอกสารที่ {i}</h3>
-                        <p>{doc.content}</p>
-                    </div>
-                    """, unsafe_allow_html=True)
-            
-            with st.expander("🔍 **การวิเคราะห์คำถาม**", expanded=False):
-                analysis = result["query_info"]
-                col1, col2 = st.columns(2)
-                
-                with col1:
-                    st.markdown("""
-                    <div class="content-container">
-                        <h3>ประเภทคำถาม</h3>
-                        <p>{}</p>
-                        <h3>ภาคการศึกษา</h3>
-                        <p>{}</p>
-                    </div>
-                    """.format(
-                        analysis.get('event_type', 'ไม่ระบุ'),
-                        analysis.get('semester', 'ไม่ระบุ')
-                    ), unsafe_allow_html=True)
-                
-                with col2:
-                    st.markdown("""
-                    <div class="content-container">
-                        <h3>คำสำคัญ</h3>
-                        <p>{}</p>
-                        <h3>รูปแบบการตอบ</h3>
-                        <p>{}</p>
-                    </div>
-                    """.format(
-                        ', '.join(analysis.get('key_terms', ['ไม่พบคำสำคัญ'])),
-                        analysis.get('response_format', 'ไม่ระบุ')
-                    ), unsafe_allow_html=True)
-            
-    except Exception as e:
-        st.error(f"❌ เกิดข้อผิดพลาด: {str(e)}")
+def add_to_history(role: str, message: str):
+    """Add message to chat history"""
+    st.session_state.chat_history.append((role, message))
 
 def main():
-    # Header with gradient background
+    # Header with animation
     st.markdown("""
-    <div style="text-align: center; padding: 2rem 0; background: linear-gradient(135deg, #2563eb 0%, #1e40af 100%); margin-bottom: 2rem; border-radius: 1rem;">
-        <h1 style="color: white; font-size: 2.5rem; font-weight: 700;">🎓 ระบบค้นหาข้อมูลปฏิทินการศึกษา</h1>
-        <p style="color: white; font-size: 1.2rem;">ค้นหาข้อมูลและกำหนดการต่างๆ ในปฏิทินการศึกษาได้อย่างง่ายดาย</p>
-    </div>
+        <div style="text-align: center; padding: 2rem 0;">
+            <h1>🎓 ระบบค้นหาข้อมูลปฏิทินการศึกษา</h1>
+        </div>
     """, unsafe_allow_html=True)
 
     # Initialize pipeline if needed
     if st.session_state.pipeline is None:
-        with st.spinner("🚀 กำลังเริ่มต้นระบบ..."):
+        with st.spinner("กำลังเริ่มต้นระบบ..."):
             st.session_state.pipeline = initialize_pipeline()
     
-    # Main content area
-    chat_col, info_col = st.columns([2, 1])
+    # Create two columns with better proportions
+    chat_col, info_col = st.columns([7, 3])
     
     with chat_col:
-        st.markdown('<div class="content-container">', unsafe_allow_html=True)
-        display_chat_history()
-        
-        query = st.text_input(
-            "โปรดระบุคำถามเกี่ยวกับปฏิทินการศึกษา",
-            value=st.session_state.current_query,
-            placeholder="เช่น: วันสุดท้ายของการสอบปากเปล่าในภาคเรียนที่ 1/2567 คือวันที่เท่าไร?",
-            key="query_input"
-        )
-        
-        st.session_state.current_query = query
-        
-        col1, col2 = st.columns([1, 4])
-        with col1:
-            if st.button("🚀 ส่งคำถาม", type="primary", use_container_width=True):
-                if query:
-                    process_query(query)
-                    st.session_state.current_query = ''
+        # Add a subtle container for the chat interface
+        with st.container():
+            # Display chat history
+            display_chat_history()
+            
+            # Main query interface with enhanced styling
+            st.markdown("<br>", unsafe_allow_html=True)
+            query = st.text_input(
+                "โปรดระบุคำถามเกี่ยวกับปฏิทินการศึกษา:",
+                placeholder="เช่น: วันสุดท้ายของการสอบปากเปล่าในภาคเรียนที่ 1/2567 คือวันที่เท่าไร?",
+                key="query_input"
+            )
+
+            # Button layout with enhanced styling
+            col1, col2, col3 = st.columns([1, 1, 4])
+            with col1:
+                send_query = st.button("📤 ส่งคำถาม", type="primary", use_container_width=True)
+            with col2:
+                if st.button("🗑️ ล้างประวัติ", type="secondary", use_container_width=True):
+                    st.session_state.chat_history = []
                     st.rerun()
-        with col2:
-            if st.button("🗑️ ล้างประวัติ", type="secondary", use_container_width=True):
-                st.session_state.chat_history = []
-                st.session_state.current_query = ''
-                st.rerun()
-        st.markdown('</div>', unsafe_allow_html=True)
+
+            # Process query
+            if send_query and query:
+                if st.session_state.pipeline is None:
+                    st.error("❌ ไม่สามารถเชื่อมต่อกับระบบได้ กรุณาลองใหม่อีกครั้ง")
+                    return
+                    
+                add_to_history("user", query)
+                    
+                try:
+                    with st.spinner("🔍 กำลังค้นหาคำตอบ..."):
+                        result = st.session_state.pipeline.process_query(query)
+                        add_to_history("assistant", result["answer"])
+                        
+                        # Enhanced expandable sections
+                        with st.expander("📚 แสดงข้อมูลอ้างอิง", expanded=False):
+                            for i, doc in enumerate(result["documents"], 1):
+                                st.markdown(f"""
+                                    <div style="padding: 1rem; background-color: #F9FAFB; border-radius: 8px; margin: 0.5rem 0;">
+                                        <strong>เอกสารที่ {i}:</strong><br>
+                                        {doc.content}
+                                    </div>
+                                """, unsafe_allow_html=True)
+                        
+                        with st.expander("🔍 รายละเอียดการวิเคราะห์คำถาม", expanded=False):
+                            st.json(result["query_info"])
+                        
+                        st.session_state.query_input = ""
+                        st.rerun()
+                        
+                except Exception as e:
+                    st.error(f"❌ เกิดข้อผิดพลาด: {str(e)}")
+            
+            elif send_query and not query:
+                st.warning("⚠️ กรุณาระบุคำถาม")
     
     with info_col:
-        # System Information Card
+        # Enhanced system information section
         st.markdown("""
-        <div class="content-container">
-            <h2 style="color: var(--primary-color); font-size: 1.5rem; margin-bottom: 1rem;">
-                ℹ️ เกี่ยวกับระบบ
-            </h2>
-            <p style="margin-bottom: 1rem;">
-                ระบบนี้ใช้เทคโนโลยี <strong>RAG (Retrieval-Augmented Generation)</strong> 
-                ในการค้นหาและตอบคำถามเกี่ยวกับปฏิทินการศึกษา
-            </p>
-            <h3 style="font-size: 1.2rem; margin: 1rem 0;">สามารถสอบถามข้อมูลเกี่ยวกับ:</h3>
-            <ul style="list-style-type: none; padding-left: 0;">
-                <li style="margin: 0.5rem 0;">📅 กำหนดการต่างๆ ในปฏิทินการศึกษา</li>
-                <li style="margin: 0.5rem 0;">🎯 วันสำคัญและกิจกรรม</li>
-                <li style="margin: 0.5rem 0;">📝 การลงทะเบียนเรียน</li>
-                <li style="margin: 0.5rem 0;">📚 กำหนดการสอบ</li>
-                <li style="margin: 0.5rem 0;">🏖️ วันหยุดการศึกษา</li>
-            </ul>
-        </div>
-        
-        <div class="content-container" style="margin-top: 1rem;">
-            <h2 style="color: var(--primary-color); font-size: 1.5rem; margin-bottom: 1rem;">
-                🔄 สถานะระบบ
-            </h2>
-            <p>
-                <span class="status-indicator status-online"></span>
-                <strong>สถานะ:</strong> {'🟢 พร้อมใช้งาน' if st.session_state.pipeline else '🔴 ไม่พร้อมใช้งาน'}
-            </p>
-            <p style="margin-top: 0.5rem;">
-                <strong>⏰ เวลาปัจจุบัน:</strong><br>
-                {datetime.now().strftime('%Y-%m-%d %H:%M:%S')}
-            </p>
-        </div>
+            <div style="background-color: #F9FAFB; padding: 1.5rem; border-radius: 12px; margin-bottom: 2rem;">
+                <h3>ℹ️ เกี่ยวกับระบบ</h3>
+                <p style="color: #4B5563;">
+                    ระบบนี้ใช้เทคโนโลยี <strong>RAG (Retrieval-Augmented Generation)</strong> 
+                    ในการค้นหาและตอบคำถามเกี่ยวกับปฏิทินการศึกษา
+                </p>
+                <h4 style="color: #1E3A8A; margin-top: 1rem;">สามารถสอบถามข้อมูลเกี่ยวกับ:</h4>
+                <ul style="list-style-type: none; padding-left: 0;">
+                    <li>📅 กำหนดการต่างๆ ในปฏิทินการศึกษา</li>
+                    <li>🎯 วันสำคัญและกิจกรรม</li>
+                    <li>📝 การลงทะเบียนเรียน</li>
+                    <li>📚 กำหนดการสอบ</li>
+                    <li>🏖️ วันหยุดการศึกษา</li>
+                </ul>
+            </div>
         """, unsafe_allow_html=True)
+        
+        # Enhanced system status section
+        st.markdown("""
+            <div style="background-color: #F9FAFB; padding: 1.5rem; border-radius: 12px;">
+                <h3>🔄 สถานะระบบ</h3>
+                <div style="margin-top: 1rem;">
+                    <p><strong>⏰ เวลาปัจจุบัน:</strong><br>
+                    {}</p>
+                    <p><strong>📡 สถานะระบบ:</strong><br>
+                    <span class="status-indicator {}">
+                        {} {}
+                    </span></p>
+                </div>
+            </div>
+        """.format(
+            datetime.now().strftime('%Y-%m-%d %H:%M:%S'),
+            "status-online" if st.session_state.pipeline else "status-offline",
+            "🟢" if st.session_state.pipeline else "🔴",
+            "พร้อมใช้งาน" if st.session_state.pipeline else "ไม่พร้อมใช้งาน"
+        ), unsafe_allow_html=True)
 
 if __name__ == "__main__":
-    main()
-    
+    main()