Update app.py

app.py

@@ -1226,55 +1226,266 @@ def init_theme_state():
 
 # Theme Selection UI
 def show_theme_selection():
-    # Initialize counter in session state if not exists
-    if 'theme_button_counter' not in st.session_state:
-        st.session_state.theme_button_counter = 0
+    """แสดงหน้าเลือกธีมพร้อม animations และ interactive elements"""
+    
+    # Add custom CSS
+    st.markdown("""
+        <style>
+        /* Custom Fonts */
+        @import url('https://fonts.googleapis.com/css2?family=Sarabun:wght@400;600&display=swap');
+        
+        /* Container Styles */
+        .theme-container {
+            padding: 2rem 1rem;
+            max-width: 1200px;
+            margin: 0 auto;
+        }
+        
+        /* Header Styles */
+        .theme-header {
+            text-align: center;
+            margin-bottom: 2.5rem;
+        }
+        
+        .theme-header h2 {
+            color: #1E88E5;
+            font-family: 'Sarabun', sans-serif;
+            font-size: 2rem;
+            font-weight: 600;
+            margin-bottom: 0.5rem;
+        }
+        
+        .theme-header p {
+            color: #666;
+            font-size: 1.1rem;
+            max-width: 600px;
+            margin: 0 auto;
+        }
+        
+        /* Theme Card Animation */
+        @keyframes float {
+            0% { transform: translateY(0px); }
+            50% { transform: translateY(-5px); }
+            100% { transform: translateY(0px); }
+        }
+        
+        /* Theme Card Styles */
+        .theme-card {
+            background: white;
+            border-radius: 15px;
+            padding: 1.5rem;
+            box-shadow: 0 4px 6px rgba(0,0,0,0.1);
+            transition: all 0.3s ease;
+            position: relative;
+            overflow: hidden;
+            height: 100%;
+            animation: float 3s ease-in-out infinite;
+            cursor: pointer;
+        }
+        
+        .theme-card:hover {
+            transform: translateY(-8px);
+            box-shadow: 0 8px 15px rgba(0,0,0,0.15);
+        }
+        
+        .theme-card:hover .theme-hover-content {
+            opacity: 1;
+        }
+        
+        /* Theme Card Content */
+        .theme-icon {
+            font-size: 2.5rem;
+            margin-bottom: 1rem;
+            display: block;
+        }
+        
+        .theme-title {
+            font-size: 1.2rem;
+            font-weight: 600;
+            margin-bottom: 0.5rem;
+            color: #1E88E5;
+            font-family: 'Sarabun', sans-serif;
+        }
+        
+        .theme-description {
+            font-size: 0.9rem;
+            color: #666;
+            line-height: 1.4;
+            margin-bottom: 1rem;
+        }
+        
+        /* Level Badge */
+        .level-badge {
+            position: absolute;
+            top: 1rem;
+            right: 1rem;
+            padding: 0.25rem 0.75rem;
+            border-radius: 999px;
+            font-size: 0.8rem;
+            background: #E3F2FD;
+            color: #1E88E5;
+            font-weight: 500;
+        }
+        
+        /* Hover Content */
+        .theme-hover-content {
+            position: absolute;
+            bottom: 0;
+            left: 0;
+            right: 0;
+            background: rgba(255,255,255,0.95);
+            padding: 1rem;
+            opacity: 0;
+            transition: opacity 0.3s ease;
+        }
+        
+        /* Theme Button */
+        .theme-button {
+            width: 100%;
+            padding: 0.5rem;
+            background: #1E88E5;
+            color: white;
+            border: none;
+            border-radius: 8px;
+            font-size: 1rem;
+            font-weight: 500;
+            cursor: pointer;
+            transition: background 0.3s ease;
+        }
+        
+        .theme-button:hover {
+            background: #1565C0;
+        }
+        
+        /* Responsive Grid */
+        .theme-grid {
+            display: grid;
+            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
+            gap: 1.5rem;
+            padding: 1rem;
+        }
+        
+        /* Loading Animation */
+        @keyframes pulse {
+            0% { opacity: 0.6; }
+            50% { opacity: 1; }
+            100% { opacity: 0.6; }
+        }
+        
+        .loading {
+            animation: pulse 1.5s infinite;
+        }
+        
+        /* Tooltip */
+        .theme-tooltip {
+            position: relative;
+            display: inline-block;
+        }
+        
+        .theme-tooltip .tooltip-text {
+            visibility: hidden;
+            width: 200px;
+            background-color: #333;
+            color: white;
+            text-align: center;
+            border-radius: 6px;
+            padding: 5px;
+            position: absolute;
+            z-index: 1;
+            bottom: 125%;
+            left: 50%;
+            transform: translateX(-50%);
+            opacity: 0;
+            transition: opacity 0.3s;
+        }
+        
+        .theme-tooltip:hover .tooltip-text {
+            visibility: visible;
+            opacity: 1;
+        }
+        </style>
+    """, unsafe_allow_html=True)
 
+    # Header
     st.markdown("""
         <div class="theme-header">
-            <h3>🎨 เลือกธีมเรื่องราว | Choose Story Theme</h3>
+            <h2>🎨 เลือกธีมเรื่องราว | Choose Story Theme</h2>
+            <p>เลือกโลกแห่งจินตนาการที่คุณต้องการผจญภัย และเริ่มต้นเขียนเรื่องราวของคุณ</p>
         </div>
     """, unsafe_allow_html=True)
-    
-    # Create theme grid
-    available_themes = get_available_themes(st.session_state.level)
-    
-    # Create rows with 4 themes each
+
+    # Filter themes based on current level
+    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):
-        row_themes = available_themes[i:i+4]
         cols = st.columns(4)
+        row_themes = available_themes[i:i+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 Card Container
+                st.markdown(f"""
+                    <div class="theme-card" style="background-color: {theme['background_color']}">
+                        <div class="level-badge">{st.session_state.level}</div>
+                        <div class="theme-icon">{theme['icon']}</div>
+                        <div class="theme-title">{theme['name_th']}</div>
+                        <div class="theme-description">{theme['description_th']}</div>
+                        
+                        <div class="theme-hover-content">
+                            <p style="font-size: 0.8rem; margin-bottom: 0.5rem;">
+                                🎯 ตัวอย่างคำศัพท์:<br/>
+                                {', '.join(theme['vocabulary'][st.session_state.level][:3])}...
+                            </p>
+                        </div>
+                    </div>
+                """, unsafe_allow_html=True)
                 
-                # Theme button
+                # Theme Selection Button
                 if st.button(
-                    f"{theme['icon']} {theme['name_th']}", 
-                    key=button_key,
+                    f"เลือกธีม {theme['name_th']}", 
+                    key=f"theme_{theme['id']}",
                     use_container_width=True,
+                    help=f"คลิกเพื่อเริ่มเขียนเรื่องราวในธีม {theme['name_th']}"
                 ):
-                    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)
+                    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:
+                        st.error(f"เกิดข้อผิดพลาดในการเลือกธีม: {str(e)}")
+                        logging.error(f"Theme selection error: {str(e)}")
+
+    # Help Text
+    st.markdown("""
+        <div style="text-align: center; margin-top: 2rem; padding: 1rem; background: #F5F5F5; border-radius: 8px;">
+            <p style="color: #666; margin-bottom: 0.5rem;">💡 เคล็ดลับ: เลือกธีมที่คุณสนใจและอยากเขียนถึงที่สุด</p>
+            <p style="color: #666; font-size: 0.9rem;">
+                แต่ละธีมมีคำศัพท์และแนวเรื่องที่แตกต่างกัน เหมาะสำหรับการฝึกเขียนในบริบทต่างๆ
+            </p>
+        </div>
+    """, unsafe_allow_html=True)
+
+    # Error Handling
+    if not available_themes:
+        st.warning("""
+            ⚠️ ไม่พบธีมที่เหมาะสมกับระดับปัจจุบัน
+            กรุณาเลือกระดับการเรียนรู้ใหม่หรือติดต่อผู้ดูแลระบบ
+        """)
 
 # Add theme-specific CSS
 def add_theme_css():
@@ -1945,12 +2156,16 @@ if st.session_state.should_reset:
     reset_story()
 
 # Main UI Layout
-# In your main UI section, after init_session_state()
+
+# Initialize session state
+init_session_state()
 init_theme_state()
 add_theme_css()
+
+# Main UI Layout
 st.markdown("# 📖 JoyStory")
 show_welcome_section()
-show_parent_guide()  # Add parent guide right after welcome section
+show_parent_guide()
 
 # After showing the welcome section and before the main story area
 if not st.session_state.current_theme:
@@ -2011,147 +2226,156 @@ with st.sidebar:
         
 
 # Main content area
-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)
-
-    # Theme Selection หรือ Change Theme
-    if not st.session_state.current_theme:
-        show_theme_selection()
-    else:
-        # Show current theme and option to change - เพิ่ม key ให้ปุ่ม
-        if st.button("🔄 Change Theme", key="change_theme_button"):
-            st.session_state.current_theme = None
-            st.session_state.theme_story_starter = None
-            st.session_state.story = []
-            st.rerun()
-        
-        # แสดงเนื้อเรื่อง
-        show_story()
+if not st.session_state.current_theme:
+    # Show theme selection if no theme is selected
+    show_theme_selection()
+else:
+    # Show main story interface
+    col1, col2 = st.columns([3, 1])
 
-        # Text input area
+    with col1:
+        # Story Display Box
         st.markdown("""
             <div class="thai-eng">
-                <div class="thai">✏️ ถึงตาคุณแล้ว</div>
-                <div class="eng">Your Turn</div>
+                <div class="thai">📖 เรื่องราวของคุณ</div>
+                <div class="eng">Your Story</div>
             </div>
         """, unsafe_allow_html=True)
-        
-        # เพิ่ม key ให้ input area
-        st.text_area(
-            "เขียนต่อจากเรื่องราว | Continue the story:",
-            height=100,
-            key="story_input_area",
-            label_visibility="collapsed"
-        )
-        
-        # เพิ่ม key ให้ปุ่ม Submit
-        st.button("ส่งคำตอบ | Submit", key="submit_story_button", on_click=submit_story)
-        
-with col2:
-    # 1. Feedback Section (Most Important)
-    if st.session_state.feedback:
-        st.markdown("""
-            <div class="feedback-box">
+    
+        # Theme Selection หรือ Change Theme
+        if not st.session_state.current_theme:
+            show_theme_selection()
+        else:
+            # Show current theme and option to change - เพิ่ม key ให้ปุ่ม
+            if st.button("🔄 Change Theme", key="change_theme_button"):
+                st.session_state.current_theme = None
+                st.session_state.theme_story_starter = None
+                st.session_state.story = []
+                st.rerun()
+            
+            # แสดงเนื้อเรื่อง
+            show_story()
+    
+            # Text input area
+            st.markdown("""
                 <div class="thai-eng">
-                    <div class="thai">📝 คำแนะนำจากครู</div>
-                    <div class="eng">Writing Feedback</div>
-                </div>
-            </div>
-        """, unsafe_allow_html=True)
-        
-        feedback_data = st.session_state.feedback
-        if isinstance(feedback_data, dict) and feedback_data.get('has_errors'):
-            st.markdown(f"""
-                <div style='background-color: #f0f2f6; 
-                       padding: 15px; 
-                       border-radius: 8px; 
-                       border-left: 4px solid #FF9800;
-                       margin: 5px 0;
-                       font-family: "Sarabun", sans-serif;'>
-                    <p style='color: #1e88e5; margin-bottom: 10px;'>
-                        {feedback_data['feedback']}
-                    </p>
-                    <p style='color: #666; font-size: 0.9em;'>
-                        ประโยคที่ถูกต้อง:<br/>
-                        <span style='color: #4CAF50; font-weight: bold;'>
-                            {feedback_data['corrected']}
-                        </span>
-                    </p>
+                    <div class="thai">✏️ ถึงตาคุณแล้ว</div>
+                    <div class="eng">Your Turn</div>
                 </div>
             """, unsafe_allow_html=True)
             
-            # แสดงปุ่มแก้ไข
-            if st.button("✍️ แก้ไขประโยคให้ถูกต้อง", key="correct_button"):
-                last_user_entry_idx = next(
-                    (i for i, entry in reversed(list(enumerate(st.session_state.story))) 
-                     if entry['role'] == 'You'),
-                    None
-                )
-                if last_user_entry_idx is not None:
-                    apply_correction(
-                        last_user_entry_idx, 
-                        feedback_data['corrected']
-                    )
-                    st.rerun()
-        else:
-            st.markdown(f"""
-                <div style='background-color: #f0f2f6; 
-                       padding: 15px; 
-                       border-radius: 8px; 
-                       border-left: 4px solid #4CAF50;
-                       margin: 5px 0;
-                       font-family: "Sarabun", sans-serif;'>
-                    <p style='color: #1e88e5;'>
-                        {feedback_data.get('feedback', '✨ เขียนได้ถูกต้องแล้วค่ะ!')}
-                    </p>
-                </div>
-            """, unsafe_allow_html=True)
-
-    # 2. Writing Tools (Expandable)
-    with st.expander("✨ เครื่องมือช่วยเขียน | Writing Tools"):
-        if st.button("🎯 ขอคำใบ้"):
-            prompt = get_creative_prompt()
-            st.markdown(f"""
-                <div class="thai-eng">
-                    <div class="thai">💭 {prompt['thai']}</div>
-                    <div class="eng">💭 {prompt['eng']}</div>
+            # เพิ่ม key ให้ input area
+            st.text_area(
+                "เขียนต่อจากเรื่องราว | Continue the story:",
+                height=100,
+                key="story_input_area",
+                label_visibility="collapsed"
+            )
+            
+            # เพิ่ม key ให้ปุ่ม Submit
+            st.button("ส่งคำตอบ | Submit", key="submit_story_button", on_click=submit_story)
+            
+    with col2:
+        # 1. Feedback Section (Most Important)
+        if st.session_state.feedback:
+            st.markdown("""
+                <div class="feedback-box">
+                    <div class="thai-eng">
+                        <div class="thai">📝 คำแนะนำจากครู</div>
+                        <div class="eng">Writing Feedback</div>
+                    </div>
                 </div>
             """, unsafe_allow_html=True)
-        
-        if st.button("📚 คำศัพท์แนะนำ"):
-            vocab_suggestions = get_vocabulary_suggestions()
-            st.markdown("#### 📚 คำศัพท์น่ารู้")
-            for word in vocab_suggestions:
-                st.markdown(f"• {word}")
-
-    # 3. Achievements (Expandable)
-    with st.expander("🏆 ความสำเร็จ | Achievements"):
-        show_achievements()
-
-    # 4. Save Options (At the bottom)
-    st.markdown("### 💾 บันทึกเรื่องราว")
-    if st.session_state.story:
+            
+            feedback_data = st.session_state.feedback
+            if isinstance(feedback_data, dict) and feedback_data.get('has_errors'):
+                st.markdown(f"""
+                    <div style='background-color: #f0f2f6; 
+                           padding: 15px; 
+                           border-radius: 8px; 
+                           border-left: 4px solid #FF9800;
+                           margin: 5px 0;
+                           font-family: "Sarabun", sans-serif;'>
+                        <p style='color: #1e88e5; margin-bottom: 10px;'>
+                            {feedback_data['feedback']}
+                        </p>
+                        <p style='color: #666; font-size: 0.9em;'>
+                            ประโยคที่ถูกต้อง:<br/>
+                            <span style='color: #4CAF50; font-weight: bold;'>
+                                {feedback_data['corrected']}
+                            </span>
+                        </p>
+                    </div>
+                """, unsafe_allow_html=True)
+                
+                # แสดงปุ่มแก้ไข
+                if st.button("✍️ แก้ไขประโยคให้ถูกต้อง", key="correct_button"):
+                    last_user_entry_idx = next(
+                        (i for i, entry in reversed(list(enumerate(st.session_state.story))) 
+                         if entry['role'] == 'You'),
+                        None
+                    )
+                    if last_user_entry_idx is not None:
+                        apply_correction(
+                            last_user_entry_idx, 
+                            feedback_data['corrected']
+                        )
+                        st.rerun()
+            else:
+                st.markdown(f"""
+                    <div style='background-color: #f0f2f6; 
+                           padding: 15px; 
+                           border-radius: 8px; 
+                           border-left: 4px solid #4CAF50;
+                           margin: 5px 0;
+                           font-family: "Sarabun", sans-serif;'>
+                        <p style='color: #1e88e5;'>
+                            {feedback_data.get('feedback', '✨ เขียนได้ถูกต้องแล้วค่ะ!')}
+                        </p>
+                    </div>
+                """, unsafe_allow_html=True)
+    
+        # 2. Writing Tools (Expandable)
+        with st.expander("✨ เครื่องมือช่วยเขียน | Writing Tools"):
+            if st.button("🎯 ขอคำใบ้"):
+                prompt = get_creative_prompt()
+                st.markdown(f"""
+                    <div class="thai-eng">
+                        <div class="thai">💭 {prompt['thai']}</div>
+                        <div class="eng">💭 {prompt['eng']}</div>
+                    </div>
+                """, unsafe_allow_html=True)
+            
+            if st.button("📚 คำศัพท์แนะนำ"):
+                vocab_suggestions = get_vocabulary_suggestions()
+                st.markdown("#### 📚 คำศัพท์น่ารู้")
+                for word in vocab_suggestions:
+                    st.markdown(f"• {word}")
+    
+        # 3. Achievements (Expandable)
+        with st.expander("🏆 ความสำเร็จ | Achievements"):
+            show_achievements()
+    
+        # 4. Save Options (At the bottom)
         st.markdown("### 💾 บันทึกเรื่องราว")
-        col1, col2 = st.columns(2)
-        with col1:
-            pdf = create_story_pdf()
-            st.download_button("📑 PDF", data=pdf, file_name="story.pdf", mime="application/pdf")
-        with col2:
-            story_data = {
-                'level': st.session_state.level,
-                'story': st.session_state.story,
-                'achievements': st.session_state.achievements
-            }
-            st.download_button("💾 Save", data=json.dumps(story_data), file_name="story.json", mime="application/json")
-
+        if st.session_state.story:
+            st.markdown("### 💾 บันทึกเรื่องราว")
+            col1, col2 = st.columns(2)
+            with col1:
+                pdf = create_story_pdf()
+                st.download_button("📑 PDF", data=pdf, file_name="story.pdf", mime="application/pdf")
+            with col2:
+                story_data = {
+                    'level': st.session_state.level,
+                    'story': st.session_state.story,
+                    'achievements': st.session_state.achievements
+                }
+                st.download_button("💾 Save", data=json.dumps(story_data), file_name="story.json", mime="application/json")
+                
+# Handle story reset if needed
+if st.session_state.should_reset:
+    reset_story()
+    
 # Add new CSS for improved layout
 st.markdown("""
     <style>