Update app.py

app.py

@@ -1209,72 +1209,34 @@ def show_theme_selection():
         </div>
     """, unsafe_allow_html=True)
     
-    # สร้าง 2 rows, แต่ละ row มี 4 themes
-    themes_per_row = 4
+    # สร้าง 4 columns
     available_themes = get_available_themes(st.session_state.level)
+    cols = st.columns(4)
     
-    # แบ่งธีมเป็น rows
-    for i in range(0, len(available_themes), themes_per_row):
-        row_themes = available_themes[i:i + themes_per_row]
-        cols = st.columns(themes_per_row)
-        
-        # แสดงแต่ละธีมใน column
-        for col, theme in zip(cols, row_themes):
-            with col:
-                # สร้าง unique key โดยใช้ timestamp และ theme id
-                unique_key = f"theme_{theme['id']}_{datetime.now().timestamp()}"
-                
-                # ใช้ container เพื่อจัดการ layout
-                with st.container():
-                    # สร้างปุ่มพร้อมสไตล์
-                    button_html = f"""
-                        <div style="
-                            background: linear-gradient(135deg, {theme['background_color']}, white);
-                            border: 2px solid {theme['accent_color']};
-                            border-radius: 12px;
-                            padding: 15px;
-                            margin: 5px;
-                            text-align: center;
-                            min-height: 150px;">
-                            <div style="font-size: 2em; margin-bottom: 8px;">
-                                {theme['icon']}
-                            </div>
-                            <h4 style="color: {theme['accent_color']}; 
-                                   margin: 5px 0; 
-                                   font-family: 'Sarabun', sans-serif;">
-                                {theme['name_th']}
-                            </h4>
-                            <p style="font-size: 0.85em; 
-                                 color: #666; 
-                                 margin-top: 5px;">
-                                {theme['description_th']}
-                            </p>
-                        </div>
-                    """
-                    
-                    # ใช้ clickable div แทน button
-                    if st.markdown(f"""
-                        <div style="cursor: pointer;" onclick="document.getElementById('{unique_key}').click()">
-                            {button_html}
-                        </div>
-                        """, unsafe_allow_html=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.button("Select", key=unique_key, help=theme['description_th'], 
-                             on_click=lambda: None, 
-                             style="display: none;")
-
-    # เพิ่มช่องว่างด้านล่าง
-    st.markdown("<br>", unsafe_allow_html=True)
+    # แสดงธีมในแต่ละ column
+    for idx, (col, theme) in enumerate(zip(cols, available_themes)):
+        with col:
+            if st.button(
+                f"{theme['icon']} {theme['name_th']}", 
+                key=f"theme_select_{idx}",  # ใช้ index เป็น 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 style="font-size: 0.85em; color: #666; padding: 5px;">
+                    {theme['description_th']}
+                </div>
+            """, unsafe_allow_html=True)
 
 
 # Add theme-specific CSS
@@ -2015,7 +1977,7 @@ with st.sidebar:
 col1, col2 = st.columns([3, 1])
 
 with col1:
-    # แสดงส่วนบนของหน้า
+    # Story Display Box
     st.markdown("""
         <div class="thai-eng">
             <div class="thai">📖 เรื่องราวของคุณ</div>
@@ -2023,15 +1985,12 @@ with col1:
         </div>
     """, unsafe_allow_html=True)
 
-    # ตรวจสอบว่ามีธีมที่เลือกแล้วหรือไม่
+    # Theme Selection หรือ Change Theme
     if not st.session_state.current_theme:
-        # ถ้ายังไม่มีธีม แสดงส่วนเลือกธีม
         show_theme_selection()
     else:
-        # ถ้ามีธีมแล้ว แสดงปุ่ม Change Theme
-        if st.button("🔄 Change Theme", key="change_theme_button", 
-                    help="คลิกเพื่อเปลี่ยนธีมเรื่องราว"):
-            # รีเซ็ตค่าเมื่อต้องการเปลี่ยนธีม
+        # Show current theme and option to change
+        if st.button("🔄 Change Theme"):
             st.session_state.current_theme = None
             st.session_state.theme_story_starter = None
             st.session_state.story = []
@@ -2040,8 +1999,7 @@ with col1:
         # แสดงเนื้อเรื่อง
         show_story()
 
-    # User Input Box (แสดงเฉพาะเมื่อมีธีมแล้ว)
-    if st.session_state.current_theme:
+        # Text input area
         st.markdown("""
             <div class="thai-eng">
                 <div class="thai">✏️ ถึงตาคุณแล้ว</div>
@@ -2049,20 +2007,15 @@ with col1:
             </div>
         """, unsafe_allow_html=True)
         
-        # Text input with callback
         st.text_area(
             "เขียนต่อจากเรื่องราว | Continue the story:",
             height=100,
             key="text_input",
-            label_visibility="collapsed" 
+            label_visibility="collapsed"
         )
         
-        # Submit button with callback
-        st.button(
-            "ส่งคำตอบ | Submit",
-            on_click=submit_story
-        )
-
+        st.button("ส่งคำตอบ | Submit", on_click=submit_story)
+        
 with col2:
     # 1. Feedback Section (Most Important)
     if st.session_state.feedback:
@@ -2125,7 +2078,7 @@ with col2:
 
     # 2. Writing Tools (Expandable)
     with st.expander("✨ เครื่องมือช่วยเขียน | Writing Tools"):
-        if st.button("🎯 ขอคำใบ้ | Get Creative Prompt"):
+        if st.button("🎯 ขอคำใบ้"):
             prompt = get_creative_prompt()
             st.markdown(f"""
                 <div class="thai-eng">
@@ -2134,10 +2087,9 @@ with col2:
                 </div>
             """, unsafe_allow_html=True)
         
-        # Vocabulary ย้ายมาอยู่ในนี้
-        if st.button("📚 คำศัพท์แนะนำ | Vocabulary Tips"):
+        if st.button("📚 คำศัพท์แนะนำ"):
             vocab_suggestions = get_vocabulary_suggestions()
-            st.markdown("#### 📚 คำศัพท์น่ารู้ | Useful Words")
+            st.markdown("#### 📚 คำศัพท์น่ารู้")
             for word in vocab_suggestions:
                 st.markdown(f"• {word}")
 
@@ -2148,44 +2100,18 @@ with col2:
     # 4. Save Options (At the bottom)
     st.markdown("### 💾 บันทึกเรื่องราว")
     if st.session_state.story:
+        st.markdown("### 💾 บันทึกเรื่องราว")
         col1, col2 = st.columns(2)
-        
         with col1:
-            # บันทึกเป็น PDF
             pdf = create_story_pdf()
-            st.download_button(
-                label="📑 PDF",
-                data=pdf,
-                file_name=f"my_story_{datetime.now().strftime('%Y%m%d')}.pdf",
-                mime="application/pdf"
-            )
-        
+            st.download_button("📑 PDF", data=pdf, file_name="story.pdf", mime="application/pdf")
         with col2:
-            # บันทึกความก้าวหน้า (แก้ไขส่วนนี้)
             story_data = {
                 'level': st.session_state.level,
-                'date': datetime.now().isoformat(),
                 'story': st.session_state.story,
-                'achievements': st.session_state.achievements,
-                'points': st.session_state.points,
-                'stats': {
-                    'total_sentences': st.session_state.stats['total_sentences'],
-                    'correct_first_try': st.session_state.stats['correct_first_try'],
-                    'accuracy_rate': st.session_state.stats['accuracy_rate'],
-                    'vocabulary_used': list(st.session_state.stats['vocabulary_used'])  # แปลง set เป็น list
-                }
+                'achievements': st.session_state.achievements
             }
-            
-            # แปลงข้อมูลทั้งหมดที่อาจมี set
-            serializable_data = convert_sets_to_lists(story_data)
-            
-            st.download_button(
-                label="💾 Save",
-                data=json.dumps(serializable_data, indent=2),
-                file_name=f"story_progress_{datetime.now().strftime('%Y%m%d')}.json",
-                mime="application/json"
-            )
-
+            st.download_button("💾 Save", data=json.dumps(story_data), file_name="story.json", mime="application/json")
 
 # Add new CSS for improved layout
 st.markdown("""