Update app.py

app.py

@@ -954,12 +954,103 @@ def get_theme_story_starter(theme_id: str, level: str) -> Dict[str, str]:
     """Get a dynamically generated story starter for the selected theme and level."""
     return generate_dynamic_story_starter(theme_id, level)
 
-def get_theme_vocabulary(theme_id: str, level: str) -> List[str]:
-    """Get vocabulary list for the selected theme and level."""
-    theme = story_themes.get(theme_id)
-    if not theme:
-        return []
-    return theme['vocabulary'].get(level, [])
+def get_theme_vocabulary(theme_id: str, level: str) -> List[Dict[str, str]]:
+    """
+    Get theme-specific vocabulary with Thai translations and example sentences.
+    Returns list of dictionaries containing word, type, thai meaning, and example.
+    """
+    vocab_data = {
+        'fantasy': {
+            'Beginner': [
+                {
+                    'word': 'magic',
+                    'type': 'noun',
+                    'thai': 'เวทมนตร์',
+                    'example_en': 'The magic made flowers appear.',
+                    'example_th': 'เวทมนตร์ทำให้ดอกไม้ปรากฏขึ้น'
+                },
+                {
+                    'word': 'wizard',
+                    'type': 'noun',
+                    'thai': 'พ่อมด',
+                    'example_en': 'The wizard waved his wand.',
+                    'example_th': 'พ่อมดโบกไม้กายสิทธิ์'
+                }
+            ],
+            'Intermediate': [
+                {
+                    'word': 'enchanted',
+                    'type': 'adjective',
+                    'thai': 'ที่ถูกสะกดด้วยเวทมนตร์',
+                    'example_en': 'They found an enchanted forest.',
+                    'example_th': 'พวกเขาพบป่าที่ถูกสะกดด้วยเวทมนตร์'
+                }
+            ]
+        },
+        'mystery': {
+            'Beginner': [
+                {
+                    'word': 'clue',
+                    'type': 'noun',
+                    'thai': 'เบาะแส',
+                    'example_en': 'The detective found an important clue.',
+                    'example_th': 'นักสืบพบเบาะแสสำคัญ'
+                }
+            ]
+        }
+    }
+
+    # แสดงคำศัพท์พร้อมตัวอย่างประโยคในหน้า UI
+    def show_vocabulary(word_list: List[Dict[str, str]]):
+        st.markdown("### 📚 คำศัพท์น่ารู้ประจำธีม")
+        for word_data in word_list:
+            st.markdown(f"""
+                <div style="background-color: #f5f5f5; padding: 10px; border-radius: 5px; margin: 5px 0;">
+                    <strong>{word_data['word']}</strong> ({word_data['type']}) - {word_data['thai']}
+                    <br/>
+                    <span style="color: #666;">
+                        🇬🇧 {word_data['example_en']}<br/>
+                        🇹🇭 {word_data['example_th']}
+                    </span>
+                </div>
+            """, unsafe_allow_html=True)
+
+    # ปรับปรุงฟังก์ชัน show_theme_vocabulary
+    def show_theme_vocabulary():
+        if st.session_state.current_theme:
+            vocab_list = vocab_data.get(st.session_state.current_theme, {}).get(st.session_state.level, [])
+            if vocab_list:
+                show_vocabulary(vocab_list)
+                
+                # เพิ่มปุ่มสำหรับฝึกคำศัพท์
+                if st.button("🎯 ฝึกคำศัพท์"):
+                    practice_vocabulary(vocab_list)
+
+    # เพิ่มฟังก์ชันฝึกคำศัพท์
+    def practice_vocabulary(vocab_list: List[Dict[str, str]]):
+        st.markdown("### 🎮 ฝึกคำศัพท์")
+        
+        # สุ่มคำศัพท์มาทำแบบฝึกหัด
+        word = random.choice(vocab_list)
+        
+        # สร้างตัวเลือก
+        choices = [word['thai']]  # คำตอบที่ถูก
+        other_words = [w['thai'] for w in vocab_list if w['thai'] != word['thai']]
+        choices.extend(random.sample(other_words, min(3, len(other_words))))
+        random.shuffle(choices)
+        
+        st.write(f"คำว่า '{word['word']}' แปลว่าอะไร?")
+        
+        for choice in choices:
+            if st.button(choice):
+                if choice == word['thai']:
+                    st.success("🎉 ถูกต้อง!")
+                    st.write(f"ตัวอย่างประโยค: {word['example_en']}")
+                    st.write(f"แปล: {word['example_th']}")
+                else:
+                    st.error("❌ ลองใหม่อีกครั้ง")
+
+    return vocab_data.get(theme_id, {}).get(level, [])
 
 # Add to session state initialization
 def init_theme_state():
@@ -1693,13 +1784,16 @@ with col1:
         on_click=submit_story
     )
 
+
 with col2:
-    show_theme_vocabulary()
+    # 1. Feedback Section (Most Important)
     if st.session_state.feedback:
         st.markdown("""
-            <div class="thai-eng">
-                <div class="thai">📝 คำแนะนำจากครู</div>
-                <div class="eng">Writing Feedback</div>
+            <div class="feedback-box">
+                <div class="thai-eng">
+                    <div class="thai">📝 คำแนะนำจากครู</div>
+                    <div class="eng">Writing Feedback</div>
+                </div>
             </div>
         """, unsafe_allow_html=True)
         
@@ -1750,74 +1844,76 @@ with col2:
                     </p>
                 </div>
             """, unsafe_allow_html=True)
-    
-    # Help and Suggestions Box
-    st.markdown("""
-        <div class="thai-eng">
-            <div class="thai">✨ เครื่องมือช่วยเขียน</div>
-            <div class="eng">Writing Tools</div>
-        </div>
-    """, unsafe_allow_html=True)
-    
-    if st.button("ดูคำศัพท์แนะนำ | Get Vocabulary Ideas"):
-        vocab_suggestions = get_vocabulary_suggestions()
-        st.markdown("#### 📚 คำศัพท์น่ารู้ | Useful Words")
-        for word in vocab_suggestions:
-            st.markdown(f"• {word}")
-    
-    if st.button("ขอคำใบ้ | Get Creative Prompt"):
-        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)
 
-    st.markdown("---")  # เส้นคั่น
-    show_achievements()
-    
-    # Achievements Box
-    st.markdown("""
-        <div class="thai-eng">
-            <div class="thai">🏆 ความสำเร็จ</div>
-            <div class="eng">Achievements</div>
-        </div>
-    """, unsafe_allow_html=True)
-    
-    # Save Story Button
+    # 2. Writing Tools (Expandable)
+    with st.expander("✨ เครื่องมือช่วยเขียน | Writing Tools"):
+        if st.button("🎯 ขอคำใบ้ | Get Creative Prompt"):
+            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)
+        
+        # Vocabulary ย้ายมาอยู่ในนี้
+        if st.button("📚 คำศัพท์แนะนำ | Vocabulary Tips"):
+            vocab_suggestions = get_vocabulary_suggestions()
+            st.markdown("#### 📚 คำศัพท์น่ารู้ | Useful Words")
+            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:
-        st.markdown("### 💾 บันทึกเรื่องราว")
         col1, col2 = st.columns(2)
         
         with col1:
             # บันทึกเป็น PDF
             pdf = create_story_pdf()
             st.download_button(
-                label="📑 ดาวน์โหลดเป็น PDF",
+                label="📑 PDF",
                 data=pdf,
                 file_name=f"my_story_{datetime.now().strftime('%Y%m%d')}.pdf",
                 mime="application/pdf"
             )
         
         with col2:
-            # บันทึกข้อมูลดิบ (JSON) สำหรับโหลดกลับมาเล่นต่อ
+            # บันทึกความก้าวหน้า
             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'])
-                }
+                'stats': st.session_state.stats
             }
             st.download_button(
-                label="💾 บันทึกความก้าวหน้า",
+                label="💾 Save",
                 data=json.dumps(story_data, indent=2),
                 file_name=f"story_progress_{datetime.now().strftime('%Y%m%d')}.json",
                 mime="application/json"
-            )
+            )
+
+# Add new CSS for improved layout
+st.markdown("""
+    <style>
+    .feedback-box {
+        margin-bottom: 20px;
+    }
+    .expander-box {
+        margin-top: 10px;
+    }
+    .save-options {
+        position: sticky;
+        bottom: 0;
+        background: white;
+        padding: 10px 0;
+        border-top: 1px solid #eee;
+    }
+    </style>
+""", unsafe_allow_html=True)