Update app.py

app.py

@@ -15,9 +15,48 @@ st.set_page_config(
 # Initialize OpenAI client
 client = OpenAI()
 
-# Custom CSS for Thai-English bilingual display
+# Define level configurations
+level_options = {
+    'Beginner': {
+        'thai_name': 'ระดับเริ่มต้น (ป.1-3)',
+        'age_range': '7-9 ปี',
+        'description': 'เหมาะสำหรับน้องๆ ที่เริ่มเรียนรู้การเขียนประโยคภาษาอังกฤษ',
+        'features': [
+            'ประโยคสั้นๆ ง่ายๆ',
+            'คำศัพท์พื้นฐานที่ใช้ในชีวิตประจำวัน',
+            'มีคำแนะนำภาษาไทยละเอียด',
+            'เน้นการใช้ Present Simple Tense'
+        ]
+    },
+    'Intermediate': {
+        'thai_name': 'ระดับกลาง (ป.4-6)',
+        'age_range': '10-12 ปี',
+        'description': 'เหมาะสำหรับน้องๆ ที่สามารถเขียนประโยคพื้นฐานได้แล้ว',
+        'features': [
+            'ประโยคซับซ้อนขึ้น',
+            'เริ่มใช้ Past Tense ได้',
+            'คำศัพท์หลากหลายขึ้น',
+            'สามารถเขียนเรื่องราวต่อเนื่องได้'
+        ]
+    },
+    'Advanced': {
+        'thai_name': 'ระดับก้าวหน้า (ม.1-3)',
+        'age_range': '13-15 ปี',
+        'description': 'เหมาะสำหรับน้องๆ ที่มีพื้นฐานภาษาอังกฤษดี',
+        'features': [
+            'เขียนเรื่องราวได้หลากหลายรูปแบบ',
+            'ใช้ Tense ต่างๆ ได้',
+            'คำศัพท์ระดับสูงขึ้น',
+            'สามารถแต่งเรื่องที่ซับซ้อนได้'
+        ]
+    }
+}
+
+# Add custom CSS including new styles for level selection
 st.markdown("""
     <style>
+    @import url('https://fonts.googleapis.com/css2?family=Sarabun:wght@400;700&display=swap');
+    
     .thai-eng {
         font-size: 1.1em;
         padding: 10px;
@@ -32,10 +71,19 @@ st.markdown("""
     .eng {
         color: #333;
     }
-    .highlight {
+    .level-info {
         background-color: #e3f2fd;
-        padding: 2px 5px;
-        border-radius: 4px;
+        padding: 10px;
+        border-radius: 8px;
+        margin: 10px 0;
+        font-size: 0.9em;
+    }
+    .parent-guide {
+        background-color: #fff3e0;
+        padding: 15px;
+        border-radius: 8px;
+        margin: 15px 0;
+        border-left: 4px solid #ff9800;
     }
     </style>
 """, unsafe_allow_html=True)
@@ -61,7 +109,7 @@ init_session_state()
 
 def show_welcome_section():
     st.markdown("""
-        <div class="thai-eng">
+        <div class="welcome-header">
             <div class="thai">
             🌟 ยินดีต้อนรับสู่ JoyStory - แอพฝึกเขียนภาษาอังกฤษแสนสนุก!
             <br>
@@ -73,29 +121,61 @@ def show_welcome_section():
         </div>
     """, unsafe_allow_html=True)
 
-    st.markdown("""
-        <div class="thai-eng">
-            <div class="thai">
-            📝 วิธีการใช้งาน:
-            <br>• เลือกระดับภาษาของน้องๆ ที่เมนูด้านข้าง
-            <br>• เริ่มเขียนเรื่องราวที่น้องๆ อยากเล่า
-            <br>• AI จะช่วยต่อเรื่องและให้คำแนะนำ
-            <br>• สะสมคะแนนและรางวัลจากการเขียน
+def show_parent_guide():
+    with st.expander("📖 คำแนะนำสำหรับผู้ปกครอง | Parent's Guide"):
+        st.markdown("""
+            <div class="parent-guide">
+                <h4>คำแนะนำในการใช้งาน</h4>
+                <ul>
+                    <li>แนะนำให้นั่งเขียนเรื่องราวร่วมกับน้องๆ</li>
+                    <li>ช่วยอธิบายคำแนะนำและคำศัพท์ที่น้องๆ ไม่เข้าใจ</li>
+                    <li>ให้กำลังใจและชื่นชมเมื่อน้องๆ เขียนได้ดี</li>
+                    <li>ใช้เวลาในการเขียนแต่ละครั้งไม่เกิน 20-30 นาที</li>
+                </ul>
+                <p>💡 เคล็ดลับ: ให้น้องๆ พูดเรื่องราวที่อยากเขียนเป็นภาษาไทยก่อน 
+                แล้วค่อยๆ ช่วยกันแปลงเป็นภาษาอังกฤษ</p>
             </div>
-        </div>
-    """, unsafe_allow_html=True)
+        """, unsafe_allow_html=True)
 
 def generate_story_continuation(user_input: str, level: str) -> str:
-    """Generate AI story continuation using ChatGPT."""
+    """Generate AI story continuation using ChatGPT with level-appropriate content."""
+    level_context = {
+        'Beginner': """
+        Guidelines for Beginner level (Thai students grade 1-3):
+        - Use only Present Simple Tense
+        - Keep sentences very short and simple
+        - Use basic everyday vocabulary
+        - Focus on simple daily life topics
+        - Avoid complex words or phrases
+        """,
+        'Intermediate': """
+        Guidelines for Intermediate level (Thai students grade 4-6):
+        - Use Present and Past Tense
+        - Sentences can be slightly complex
+        - Use more varied vocabulary
+        - Include some descriptive words
+        - Stories can have more development
+        """,
+        'Advanced': """
+        Guidelines for Advanced level (Thai students grade 7-9):
+        - Use various tenses appropriately
+        - Complex sentences are acceptable
+        - Advanced vocabulary can be used
+        - Creative and detailed storytelling
+        - More sophisticated plot development
+        """
+    }
+    
     try:
         story_context = '\n'.join([entry['content'] for entry in st.session_state.story])
         
         response = client.chat.completions.create(
             model="gpt-4o-mini",
             messages=[
-                {"role": "system", "content": f"""You are a creative storytelling assistant for {level} English learners. 
-                Keep the language simple and engaging. Respond with only 1-2 short sentences to continue the story.
-                Avoid long descriptions and let the user contribute to the story development."""},
+                {"role": "system", "content": f"""You are a creative storytelling assistant for {level} level Thai students.
+                {level_context[level]}
+                Keep the language appropriate for the level while being engaging.
+                Respond with only 1-2 short sentences to continue the story."""},
                 {"role": "user", "content": f"Story so far:\n{story_context}\nUser's addition:\n{user_input}\nContinue the story with 1-2 short sentences:"}
             ],
             max_tokens=50,
@@ -272,26 +352,35 @@ if st.session_state.should_reset:
     reset_story()
 
 # Main UI Layout
-st.markdown("# 📖 JoyStory")
 show_welcome_section()
+show_parent_guide()  # Add parent guide right after welcome section
 
 # Sidebar for settings
 with st.sidebar:
     st.markdown("""
         <div class="thai">
-        🎯 เลือกระดับของน้องๆ
+        🎯 เลือกระดับการเรียนรู้
         </div>
     """, unsafe_allow_html=True)
     
     level = st.radio(
-        "Select your English level:",
-        ('Beginner', 'Intermediate', 'Advanced'),
-        index=['Beginner', 'Intermediate', 'Advanced'].index(st.session_state.level)
+        "",  # ไม่แสดงชื่อ label ภาษาอังกฤษ
+        options=list(level_options.keys()),
+        format_func=lambda x: level_options[x]['thai_name'],
+        help="เลือกระดับที่เหมาะสมกับความสามารถของน้องๆ"
     )
     
+    # แสดงคำอธิบายระดับ
+    st.markdown(f"""
+        <div class="level-info thai">
+            🎓 {level_options[level]['description']}
+            <br>📚 เหมาะสำหรับอายุ: {level_options[level]['age_range']}
+        </div>
+    """, unsafe_allow_html=True)
+
     st.session_state.level = level
     
-    if st.button("Start New Story"):
+    if st.button("เริ่มเรื่องใหม่ | Start New Story"):
         st.session_state.should_reset = True
         st.rerun()