Update app.py

app.py

@@ -4,6 +4,31 @@ import datetime
 from openai import OpenAI
 from typing import Dict, List, Set
 
+# Custom CSS for Thai-English bilingual display
+st.markdown("""
+    <style>
+    .thai-eng {
+        font-size: 1.1em;
+        padding: 10px;
+        background-color: #f8f9fa;
+        border-radius: 8px;
+        margin: 10px 0;
+    }
+    .thai {
+        color: #1e88e5;
+        font-family: 'Sarabun', sans-serif;
+    }
+    .eng {
+        color: #333;
+    }
+    .highlight {
+        background-color: #e3f2fd;
+        padding: 2px 5px;
+        border-radius: 4px;
+    }
+    </style>
+""", unsafe_allow_html=True)
+
 # Initialize OpenAI client
 client = OpenAI()
 
@@ -15,6 +40,32 @@ st.set_page_config(
     initial_sidebar_state="collapsed",
 )
 
+def show_welcome_section():
+    st.markdown("""
+        <div class="thai-eng">
+            <div class="thai">
+            🌟 ยินดีต้อนรับสู่ JoyStory - แอพฝึกเขียนภาษาอังกฤษแสนสนุก!
+            <br>
+            เรียนรู้ภาษาอังกฤษผ่านการเขียนเรื่องราวด้วยตัวเอง พร้อมผู้ช่วย AI ที่จะช่วยแนะนำและให้กำลังใจ
+            </div>
+            <div class="eng">
+            Welcome to JoyStory - Fun English Writing Adventure!
+            </div>
+        </div>
+    """, unsafe_allow_html=True)
+
+    st.markdown("""
+        <div class="thai-eng">
+            <div class="thai">
+            📝 วิธีการใช้งาน:
+            <br>• เลือกระดับภาษาของน้องๆ ที่เมนูด้านข้าง
+            <br>• เริ่มเขียนเรื่องราวที่น้องๆ อยากเล่า
+            <br>• AI จะช่วยต่อเรื่องและให้คำแนะนำ
+            <br>• สะสมคะแนนและรางวัลจากการเขียน
+            </div>
+        </div>
+    """, unsafe_allow_html=True)
+
 # Initialize session state variables
 def init_session_state():
     if 'story' not in st.session_state:
@@ -56,33 +107,29 @@ def generate_story_continuation(user_input: str, level: str) -> str:
         return "I'm having trouble continuing the story. Please try again."
 
 def get_vocabulary_suggestions() -> List[str]:
-    """Get contextual vocabulary suggestions based on the current story."""
+    """Get contextual vocabulary suggestions with Thai translations."""
     try:
-        # Get the last few story entries for context
         recent_story = '\n'.join([entry['content'] for entry in st.session_state.story[-3:]] if st.session_state.story else "Story just started")
         
         response = client.chat.completions.create(
             model="gpt-4o-mini",
             messages=[
-                {"role": "system", "content": f"""You are a creative writing tutor for {st.session_state.level} English learners.
-                Based on the story context, suggest 5 varied words that could be used next:
-                - Include a mix of nouns, verbs, and adjectives
-                - Match the {st.session_state.level} level
-                - Words should fit the story theme
-                - No basic words like 'happy', 'sad', 'good'
-                Format: word1 (type), word2 (type), etc."""},
-                {"role": "user", "content": f"Story context:\n{recent_story}\n\nSuggest 5 relevant, interesting words:"}
+                {"role": "system", "content": f"""You are a Thai-English bilingual teacher.
+                Suggest 5 English words with their Thai translations and examples.
+                Format each suggestion as:
+                word (type) - คำแปล | example sentence
+                Make sure words match {st.session_state.level} level."""},
+                {"role": "user", "content": f"Story context:\n{recent_story}\n\nSuggest 5 relevant words with Thai translations:"}
             ],
-            max_tokens=100,
+            max_tokens=200,
             temperature=0.8
         )
-        
-        # Parse the response to get words and their types
-        word_suggestions = response.choices[0].message.content.split(', ')
-        return word_suggestions
+        return response.choices[0].message.content.split('\n')
     except Exception as e:
         st.error(f"Error getting vocabulary suggestions: {str(e)}")
-        return ["adventure (noun)", "whisper (verb)", "mysterious (adjective)"]
+        return ["happy (adj) - มีความสุข | I am happy today",
+                "run (verb) - วิ่ง | The dog runs fast",
+                "tree (noun) - ต้นไม้ | A tall tree"]
 
 # In the main UI section, update how vocabulary suggestions are displayed:
     if st.button("Get Vocabulary Ideas"):
@@ -99,22 +146,40 @@ def get_vocabulary_suggestions() -> List[str]:
             </div>
             """.format(st.session_state.feedback), unsafe_allow_html=True)
 
-def get_creative_prompt() -> str:
-    """Generate a creative prompt to inspire the next part of the story."""
+# Update the creative prompt function
+def get_creative_prompt() -> Dict[str, str]:
+    """Generate a bilingual creative prompt."""
     try:
         response = client.chat.completions.create(
             model="gpt-4o-mini",
             messages=[
-                {"role": "system", "content": "Generate an inspiring question to help continue the story."},
-                {"role": "user", "content": "Create a short, open-ended question to inspire the next part of the story."}
+                {"role": "system", "content": "Create a story prompt in both English and Thai."},
+                {"role": "user", "content": "Generate a simple, engaging story prompt for children:"}
             ],
-            max_tokens=50,
+            max_tokens=100,
             temperature=0.7
         )
-        return response.choices[0].message.content
+        prompt_eng = response.choices[0].message.content
+        
+        # Get Thai translation
+        response_thai = client.chat.completions.create(
+            model="gpt-4o-mini",
+            messages=[
+                {"role": "system", "content": "Translate this prompt to natural, child-friendly Thai:"},
+                {"role": "user", "content": prompt_eng}
+            ],
+            max_tokens=100,
+            temperature=0.7
+        )
+        prompt_thai = response_thai.choices[0].message.content
+        
+        return {"eng": prompt_eng, "thai": prompt_thai}
     except Exception as e:
         st.error(f"Error generating creative prompt: {str(e)}")
-        return "What happens next in your story?"
+        return {
+            "eng": "What happens next in your story?",
+            "thai": "เรื่องราวต่อไปจะเป็นอย่างไร?"
+        }
 
 def provide_feedback(text: str, level: str) -> Dict[str, str]:
     """Provide educational feedback with grammar explanation and encouragement."""
@@ -197,20 +262,21 @@ if st.session_state.should_reset:
     reset_story()
 
 # Main UI Layout
-st.title("📖 JoyStory - Interactive Story Adventure")
+st.markdown("# 📖 JoyStory")
+show_welcome_section()
 
 # Sidebar for settings
 with st.sidebar:
-    st.header("Settings")
+    st.markdown("""
+        <div class="thai">
+        🎯 เลือกระดับของน้องๆ
+        </div>
+    """, unsafe_allow_html=True)
     level = st.radio(
         "Select your English level:",
-        ('Beginner', 'Intermediate', 'Advanced')
+        ('Beginner', 'Intermediate', 'Advanced'),
+        index=['Beginner', 'Intermediate', 'Advanced'].index(st.session_state.level)
     )
-    st.session_state.level = level
-    
-    if st.button("Start New Story"):
-        st.session_state.should_reset = True
-        st.rerun()
 
 # Main content area
 col1, col2 = st.columns([3, 1])
@@ -254,22 +320,27 @@ with col1:
             st.warning("Please write something to continue the story.")
 
 with col2:
-    # Feedback Display (separate from story)
-    if st.session_state.feedback:
-        st.markdown("### 📝 Writing Feedback")
-        st.markdown(f"*{st.session_state.feedback}*")
+    st.markdown("""
+        <div class="thai-eng">
+        <div class="thai">✨ เครื่องมือช่วยเขียน</div>
+        <div class="eng">Writing Tools</div>
+        </div>
+    """, unsafe_allow_html=True)
     
-    # Help and Suggestions Box
-    st.header("Writing Help")
     if st.button("Get Vocabulary Ideas"):
         vocab_suggestions = get_vocabulary_suggestions()
-        st.write("Try using these words:")
+        st.markdown("#### 📚 คำศัพท์น่ารู้ | Useful Words")
         for word in vocab_suggestions:
-            st.write(f"• {word}")
+            st.markdown(f"• {word}")
     
-    if st.button("Get a Creative Prompt"):
-        creative_prompt = get_creative_prompt()
-        st.write("💭", creative_prompt)
+    if st.button("Get Writing Prompt"):
+        prompt = get_creative_prompt()
+        st.markdown("""
+            <div class="thai-eng">
+            <div class="thai">💭 {}</div>
+            <div class="eng">💭 {}</div>
+            </div>
+        """.format(prompt["thai"], prompt["eng"]), unsafe_allow_html=True)
     
     # Achievements Box
     st.header("Your Achievements")