Update app.py

app.py

@@ -1279,31 +1279,101 @@ def show_level_selection():
 
 def show_theme_selection():
     """Display theme selection interface"""
-    st.markdown("""
-        <div class="theme-header text-center">
-            <h2 style="color: #1e88e5; font-family: 'Sarabun', sans-serif;">
-                🎨 เลือกธีมเรื่องราว | Choose Story Theme
-            </h2>
-            <p style="color: #666; max-width: 600px; margin: 0 auto;">
+    # Header section
+    header_html = '''
+        <div style="text-align: center; margin-bottom: 2rem;">
+            <div style="display: flex; justify-content: center; align-items: center; gap: 10px;">
+                <img src="🎨" alt="palette" style="width: 2rem; height: 2rem;"/>
+                <h2 style="color: #1e88e5; font-family: 'Sarabun', sans-serif; margin: 0;">
+                    เลือกธีมเรื่องราว | Choose Story Theme
+                </h2>
+            </div>
+            <p style="color: #666; max-width: 600px; margin: 1rem auto 0;">
                 เลือกโลกแห่งจินตนาการที่คุณต้องการผจญภัย และเริ่มต้นเขียนเรื่องราวของคุณ
             </p>
         </div>
-    """, unsafe_allow_html=True)
+    '''
+    st.markdown(header_html, unsafe_allow_html=True)
 
-    # Filter themes for current level
+    # Filter available themes
     available_themes = [
         theme for theme in story_themes.values()
         if st.session_state.level in theme['level_range']
     ]
 
-    # Create rows of 4 themes each
-    for i in range(0, len(available_themes), 4):
+    # Create grid layout
+    num_themes = len(available_themes)
+    rows = (num_themes + 3) // 4  # Ceiling division to get number of rows needed
+    
+    # Create rows with 4 themes each
+    for row in range(rows):
         cols = st.columns(4)
-        row_themes = available_themes[i:i+4]
-        
-        for col, theme in zip(cols, row_themes):
-            with col:
-                show_theme_card(theme)  # เปลี่ยนจาก display_theme_card เป็น show_theme_card
+        for col_idx, col in enumerate(cols):
+            theme_idx = row * 4 + col_idx
+            if theme_idx < num_themes:
+                theme = available_themes[theme_idx]
+                with col:
+                    # Theme card container
+                    theme_card = f'''
+                        <div style="
+                            background-color: {theme['background_color']};
+                            border-radius: 15px;
+                            padding: 1.5rem;
+                            margin-bottom: 1rem;
+                            height: 100%;
+                            position: relative;
+                            transition: all 0.3s ease;
+                            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
+                        ">
+                            <div style="position: absolute; top: 1rem; right: 1rem; 
+                                      padding: 0.25rem 0.75rem; border-radius: 999px; 
+                                      font-size: 0.8rem; background: #E3F2FD; 
+                                      color: #1E88E5;">
+                                {st.session_state.level}
+                            </div>
+                            <div style="font-size: 2.5rem; margin-bottom: 1rem;">
+                                {theme['icon']}
+                            </div>
+                            <div style="font-size: 1.2rem; font-weight: 600; 
+                                      margin-bottom: 0.5rem; color: {theme['accent_color']};">
+                                {theme['name_th']}
+                            </div>
+                            <div style="font-size: 0.9rem; color: #666; 
+                                      line-height: 1.4; margin-bottom: 1rem;">
+                                {theme['description_th']}
+                            </div>
+                        </div>
+                    '''
+                    st.markdown(theme_card, unsafe_allow_html=True)
+                    
+                    # Theme selection button
+                    if st.button(
+                        f"เลือกธีม {theme['name_th']}", 
+                        key=f"theme_{theme['id']}_{row}_{col_idx}",
+                        use_container_width=True
+                    ):
+                        handle_theme_selection(theme)
+
+def handle_theme_selection(theme: dict):
+    """Handle theme selection and initialization"""
+    try:
+        with st.spinner("กำลังเตรียมเรื่องราว..."):
+            st.session_state.current_theme = theme['id']
+            starter = generate_dynamic_story_starter(
+                theme['id'],
+                st.session_state.level
+            )
+            st.session_state.story = [{
+                "role": "AI",
+                "content": starter['en'],
+                "thai_content": starter['th'],
+                "is_starter": True
+            }]
+            st.success(f"เลือกธีม {theme['name_th']} เรียบร้อยแล้ว!")
+            st.rerun()
+    except Exception as e:
+        logging.error(f"Error selecting theme: {str(e)}")
+        st.error("เกิดข้อผิดพลาดในการเลือกธีม กรุณาลองใหม่อีกครั้ง")
 
 def show_theme_card(theme: Dict):  # เปลี่ยนจาก display_theme_card เป็น show_theme_card
     """Display a single theme card with proper styling"""