Update app.py

app.py

@@ -369,6 +369,7 @@ st.markdown("""
     <style>
     @import url('https://fonts.googleapis.com/css2?family=Sarabun:wght@400;700&display=swap');
     
+    /* ส่วน CSS เดิม */
     .thai-eng {
         font-size: 1.1em;
         padding: 10px;
@@ -397,6 +398,101 @@ st.markdown("""
         margin: 15px 0;
         border-left: 4px solid #ff9800;
     }
+
+    /* เพิ่ม CSS สำหรับ Theme Cards */
+    .theme-header {
+        text-align: center;
+        margin-bottom: 20px;
+    }
+    
+    .theme-header h3 {
+        color: #1e88e5;
+        font-family: 'Sarabun', sans-serif;
+    }
+    
+    .theme-card {
+        position: relative;
+        overflow: hidden;
+    }
+    
+    .theme-card:hover {
+        transform: translateY(-5px);
+        box-shadow: 0 5px 15px rgba(0,0,0,0.2);
+    }
+    
+    .theme-card:before {
+        content: '';
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+        background: linear-gradient(45deg, rgba(255,255,255,0.1), rgba(255,255,255,0.5));
+        opacity: 0;
+        transition: opacity 0.3s ease;
+    }
+    
+    .theme-card:hover:before {
+        opacity: 1;
+    }
+    
+    .theme-card.selected {
+        transform: scale(0.98);
+        box-shadow: 0 2px 5px rgba(0,0,0,0.2);
+    }
+
+    /* CSS สำหรับปุ่ม Change Theme */
+    .stButton button {
+        padding: 0.5rem 1rem;
+        border-radius: 0.5rem;
+        border: 1px solid rgba(49, 51, 63, 0.2);
+        background-color: #ffffff;
+        color: #31333f;
+        transition: all 0.2s ease;
+    }
+    
+    .stButton button:hover {
+        border-color: #1e88e5;
+        color: #1e88e5;
+        transform: translateY(-1px);
+        box-shadow: 0 2px 4px rgba(0,0,0,0.1);
+    }
+
+    /* ปรับแต่ง tooltip */
+    .stTooltipIcon {
+        color: #1e88e5;
+    }
+
+    /* Responsive Design */
+    @media (max-width: 768px) {
+        .theme-card {
+            min-height: 120px;
+        }
+        
+        .theme-card h4 {
+            font-size: 0.9em;
+        }
+        
+        .theme-card p {
+            font-size: 0.8em;
+        }
+    }
+
+    /* Story Display Styling */
+    .story-message {
+        padding: 10px;
+        margin: 5px 0;
+        border-radius: 5px;
+    }
+    .story-message.ai {
+        background-color: #f0f7ff;
+    }
+    .story-message.user {
+        background-color: #fff;
+    }
+    .story-message.corrected {
+        background-color: #f0f9ff;
+    }
     </style>
 """, unsafe_allow_html=True)
 
@@ -1928,39 +2024,53 @@ with st.sidebar:
 col1, col2 = st.columns([3, 1])
 
 with col1:
-    # Story Display Box
+    # แสดงส่วนบนของหน้า
     st.markdown("""
         <div class="thai-eng">
             <div class="thai">📖 เรื่องราวของคุณ</div>
             <div class="eng">Your Story</div>
         </div>
     """, unsafe_allow_html=True)
-    
-    # เรียกใช้ show_story() แทนโค้ดเดิม
-    show_story()
 
-    # User Input Box
-    st.markdown("""
-        <div class="thai-eng">
-            <div class="thai">✏️ ถึงตาคุณแล้ว</div>
-            <div class="eng">Your Turn</div>
-        </div>
-    """, unsafe_allow_html=True)
-    
-    # Text input with callback
-    st.text_area(
-        "เขียนต่อจากเรื่องราว | Continue the story:",
-        height=100,
-        key="text_input",
-        label_visibility="collapsed" 
-    )
-    
-    # Submit button with callback
-    st.button(
-        "ส่งคำตอบ | Submit",
-        on_click=submit_story
-    )
+    # ตรวจสอบว่ามีธีมที่เลือกแล้วหรือไม่
+    if not st.session_state.current_theme:
+        # ถ้ายังไม่มีธีม แสดงส่วนเลือกธีม
+        show_theme_selection()
+    else:
+        # ถ้ามีธีมแล้ว แสดงปุ่ม Change Theme
+        if st.button("🔄 Change Theme", key="change_theme_button", 
+                    help="คลิกเพื่อเปลี่ยนธีมเรื่องราว"):
+            # รีเซ็ตค่าเมื่อต้องการเปลี่ยนธีม
+            st.session_state.current_theme = None
+            st.session_state.theme_story_starter = None
+            st.session_state.story = []
+            st.rerun()
+        
+        # แสดงเนื้อเรื่อง
+        show_story()
 
+    # User Input Box (แสดงเฉพาะเมื่อมีธีมแล้ว)
+    if st.session_state.current_theme:
+        st.markdown("""
+            <div class="thai-eng">
+                <div class="thai">✏️ ถึงตาคุณแล้ว</div>
+                <div class="eng">Your Turn</div>
+            </div>
+        """, unsafe_allow_html=True)
+        
+        # Text input with callback
+        st.text_area(
+            "เขียนต่อจากเรื่องราว | Continue the story:",
+            height=100,
+            key="text_input",
+            label_visibility="collapsed" 
+        )
+        
+        # Submit button with callback
+        st.button(
+            "ส่งคำตอบ | Submit",
+            on_click=submit_story
+        )
 
 with col2:
     # 1. Feedback Section (Most Important)