Update app.py

app.py

@@ -8,36 +8,151 @@ from calendar_rag import (
     PipelineConfig
 )
 
-# Page config
+# Custom CSS for enhanced styling
 st.set_page_config(
     page_title="Academic Calendar Assistant",
     page_icon="📅",
     layout="wide"
 )
 
-# Initialize session state for pipeline and chat history
+# 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)
+
+# Initialize session states
 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"""
     try:
-        # Get OpenAI API key from environment variable or Streamlit secrets
         openai_api_key = os.getenv('OPENAI_API_KEY') or st.secrets['OPENAI_API_KEY']
-        
-        # Create config
         config = create_default_config(openai_api_key)
         config.localization.enable_thai_normalization = True
         config.retriever.top_k = 5
         config.model.temperature = 0.3
         
-        # Initialize pipeline
         pipeline = AcademicCalendarRAG(config)
         
-        # Load calendar data
         with open("calendar.json", "r", encoding="utf-8") as f:
             calendar_data = json.load(f)
         pipeline.load_data(calendar_data)
@@ -49,120 +164,161 @@ def initialize_pipeline():
         return None
 
 def display_chat_history():
-    """Display chat history with user and assistant messages"""
-    for i, (role, message) in enumerate(st.session_state.chat_history):
+    """Display chat history with enhanced styling"""
+    for role, message in st.session_state.chat_history:
         if role == "user":
-            st.markdown(f"**🧑 คำถาม:**")
-            st.markdown(f"> {message}")
+            st.markdown(f"""
+            <div class="user-message">
+                <strong>🧑 คำถาม:</strong><br>
+                {message}
+            </div>
+            """, unsafe_allow_html=True)
         else:
-            st.markdown(f"**🤖 คำตอบ:**")
-            st.markdown(message)
-            st.markdown("---")
-
-def add_to_history(role: str, message: str):
-    """Add message to chat history"""
-    st.session_state.chat_history.append((role, message))
+            st.markdown(f"""
+            <div class="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("กรุณาระบุคำถาม")
+        st.warning("⚠️ กรุณาระบุคำถาม")
         return
         
     if st.session_state.pipeline is None:
-        st.error("ไม่สามารถเชื่อมต่อกับระบบได้ กรุณาลองใหม่อีกครั้ง")
+        st.error("❌ ไม่สามารถเชื่อมต่อกับระบบได้ กรุณาลองใหม่อีกครั้ง")
         return
         
-    # Add user query to history
-    add_to_history("user", query)
+    st.session_state.chat_history.append(("user", query))
         
     try:
-        with st.spinner("กำลังค้นหาคำตอบ..."):
-            # Process query
+        with st.spinner("🔄 กำลังค้นหาคำตอบ..."):
             result = st.session_state.pipeline.process_query(query)
+            st.session_state.chat_history.append(("assistant", result["answer"]))
             
-            # Add assistant response to history
-            add_to_history("assistant", result["answer"])
-            
-            # Create containers for additional information
-            with st.expander("📚 แสดงข้อมูลอ้างอิง"):
+            with st.expander("📚 **ข้อมูลอ้างอิง**", expanded=False):
                 for i, doc in enumerate(result["documents"], 1):
-                    st.markdown(f"**เอกสารที่ {i}:**")
-                    st.text(doc.content)
-                    st.markdown("---")
+                    st.markdown(f"""
+                    <div class="content-container">
+                        <h3>เอกสารที่ {i}</h3>
+                        <p>{doc.content}</p>
+                    </div>
+                    """, unsafe_allow_html=True)
             
-            with st.expander("🔍 รายละเอียดการวิเคราะห์คำถาม"):
-                st.json(result["query_info"])
+            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)}")
+        st.error(f"❌ เกิดข้อผิดพลาด: {str(e)}")
 
 def main():
-    # Header
-    st.title("🎓 ระบบค้นหาข้อมูลปฏิทินการศึกษา")
-    st.markdown("---")
+    # Header with gradient background
+    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>
+    """, 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()
     
-    # Create two columns for chat layout
+    # Main content area
     chat_col, info_col = st.columns([2, 1])
     
     with chat_col:
-        # Display chat history
+        st.markdown('<div class="content-container">', unsafe_allow_html=True)
         display_chat_history()
         
-        # Initialize query input in session state if not present
-        if 'current_query' not in st.session_state:
-            st.session_state.current_query = ''
-
-        # Main query interface
         query = st.text_input(
-            "โปรดระบุคำถามเกี่ยวกับปฏิทินการศึกษา:",
+            "โปรดระบุคำถามเกี่ยวกับปฏิทินการศึกษา",
             value=st.session_state.current_query,
             placeholder="เช่น: วันสุดท้ายของการสอบปากเปล่าในภาคเรียนที่ 1/2567 คือวันที่เท่าไร?",
             key="query_input"
         )
-
-        # Update current query in session state
+        
         st.session_state.current_query = query
-
-        # Add query button and clear chat button in the same line
+        
         col1, col2 = st.columns([1, 4])
         with col1:
-            if st.button("ส่งคำถาม", type="primary", use_container_width=True):
-                if query:  # Only process if query is not empty
+            if st.button("🚀 ส่งคำถาม", type="primary", use_container_width=True):
+                if query:
                     process_query(query)
-                    # Clear the input only after successful processing
                     st.session_state.current_query = ''
                     st.rerun()
         with col2:
-            if st.button("ล้างประวัติการสนทนา", type="secondary", use_container_width=True):
+            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)
     
     with info_col:
-        # System information
-        st.markdown("### ℹ️ เกี่ยวกับระบบ")
+        # System Information Card
         st.markdown("""
-        ระบบนี้ใช้เทคโนโลยี RAG (Retrieval-Augmented Generation) 
-        ในการค้นหาและตอบคำถามเกี่ยวกับปฏิทินการศึกษา
-        
-        สามารถสอบถามข้อมูลเกี่ยวกับ:
-        - กำหนดการต่างๆ ในปฏิทินการศึกษา
-        - วันสำคัญและกิจกรรม
-        - การลงทะเบียนเรียน
-        - กำหนดการสอบ
-        - วันหยุดการศึกษา
-        """)
+        <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>
         
-        # System status
-        st.markdown("### 🔄 สถานะระบบ")
-        st.markdown(f"**เวลาปัจจุบัน:** {datetime.now().strftime('%Y-%m-%d %H:%M:%S')}")
-        st.markdown(f"**สถานะระบบ:** {'🟢 พร้อมใช้งาน' if st.session_state.pipeline else '🔴 ไม่พร้อมใช้งาน'}")
+        <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>
+        """, unsafe_allow_html=True)
 
 if __name__ == "__main__":
     main()