Update app.py

app.py

@@ -16,6 +16,10 @@ from datetime import datetime
 from typing import Dict, List, Optional, Tuple
 import random
 
+# Reset counter when page reloads
+if 'theme_button_counter' in st.session_state:
+    st.session_state.theme_button_counter = 0
+
 # Theme Configuration
 story_themes = {
     'fantasy': {
@@ -553,6 +557,8 @@ def init_session_state():
         st.session_state.theme_selection_id = datetime.now().strftime('%Y%m%d%H%M%S')
     if 'current_theme' not in st.session_state:
         st.session_state.current_theme = None
+    if 'theme_button_counter' not in st.session_state:
+        st.session_state.theme_button_counter = 0
     if 'theme_story_starter' not in st.session_state:
         st.session_state.theme_story_starter = None
     if 'story' not in st.session_state:
@@ -1220,9 +1226,9 @@ def init_theme_state():
 
 # Theme Selection UI
 def show_theme_selection():
-    # สร้าง session key ถ้ายังไม่มี
-    if 'theme_selection_id' not in st.session_state:
-        st.session_state.theme_selection_id = datetime.now().strftime('%Y%m%d%H%M%S')
+    # Initialize counter in session state if not exists
+    if 'theme_button_counter' not in st.session_state:
+        st.session_state.theme_button_counter = 0
 
     st.markdown("""
         <div class="theme-header">
@@ -1230,46 +1236,45 @@ def show_theme_selection():
         </div>
     """, unsafe_allow_html=True)
     
-    # สร้าง 4 columns
+    # Create theme grid
     available_themes = get_available_themes(st.session_state.level)
-    cols = st.columns(4)
     
-    # แสดงธีมในแต่ละ column
-    for col, theme in zip(cols, available_themes):
-        with col:
-            # ใช้ session ID และ theme ID สร้าง unique key
-            button_key = f"theme_{theme['id']}_{st.session_state.theme_selection_id}"
-            
-            if st.button(
-                f"{theme['icon']} {theme['name_th']}", 
-                key=button_key,
-                use_container_width=True
-            ):
-                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.rerun()
-            
-            # คำอธิบายใต้ปุ่ม
-            st.markdown(f"""
-                <div class="theme-card-description" 
-                     style="font-size: 0.85em; 
-                            color: #666; 
-                            padding: 5px;
-                            background-color: {theme['background_color']};
-                            border-radius: 0 0 8px 8px;
-                            border: 1px solid {theme['accent_color']};
-                            border-top: none;
-                            margin-top: -5px;">
-                    {theme['description_th']}
-                </div>
-            """, unsafe_allow_html=True)
+    # Create rows with 4 themes each
+    for i in range(0, len(available_themes), 4):
+        row_themes = available_themes[i:i+4]
+        cols = st.columns(4)
+        
+        for col, theme in zip(cols, row_themes):
+            with col:
+                # Increment counter for each button
+                st.session_state.theme_button_counter += 1
+                current_count = st.session_state.theme_button_counter
+                
+                # Create button with unique key using counter
+                button_key = f"theme_button_{theme['id']}_{current_count}"
+                
+                # Theme button
+                if st.button(
+                    f"{theme['icon']} {theme['name_th']}", 
+                    key=button_key,
+                    use_container_width=True,
+                ):
+                    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.rerun()
 
+                # Theme description
+                st.markdown(f"""
+                    <div style="font-size: 0.85em; color: #666; padding: 5px;">
+                        {theme['description_th']}
+                    </div>
+                """, unsafe_allow_html=True)
 
 # Add theme-specific CSS
 def add_theme_css():