Update app.py

app.py

@@ -4,6 +4,17 @@ import datetime
 from openai import OpenAI
 from typing import Dict, List, Set
 
+# Set up Streamlit page configuration
+st.set_page_config(
+    page_title="JoyStory - Interactive Story Adventure",
+    page_icon="📖",
+    layout="wide",
+    initial_sidebar_state="collapsed",
+)
+
+# Initialize OpenAI client
+client = OpenAI()
+
 # Custom CSS for Thai-English bilingual display
 st.markdown("""
     <style>
@@ -29,16 +40,24 @@ st.markdown("""
     </style>
 """, unsafe_allow_html=True)
 
-# Initialize OpenAI client
-client = OpenAI()
+# Initialize session state variables
+def init_session_state():
+    if 'story' not in st.session_state:
+        st.session_state.story = []
+    if 'feedback' not in st.session_state:
+        st.session_state.feedback = None
+    if 'level' not in st.session_state:
+        st.session_state.level = 'Beginner'
+    if 'unique_words' not in st.session_state:
+        st.session_state.unique_words = set()
+    if 'total_words' not in st.session_state:
+        st.session_state.total_words = 0
+    if 'badges' not in st.session_state:
+        st.session_state.badges = []
+    if 'should_reset' not in st.session_state:
+        st.session_state.should_reset = False
 
-# Set up Streamlit page configuration
-st.set_page_config(
-    page_title="JoyStory - Interactive Story Adventure",
-    page_icon="📖",
-    layout="wide",
-    initial_sidebar_state="collapsed",
-)
+init_session_state()
 
 def show_welcome_section():
     st.markdown("""
@@ -66,25 +85,6 @@ def show_welcome_section():
         </div>
     """, unsafe_allow_html=True)
 
-# Initialize session state variables
-def init_session_state():
-    if 'story' not in st.session_state:
-        st.session_state.story = []
-    if 'feedback' not in st.session_state:
-        st.session_state.feedback = None
-    if 'level' not in st.session_state:
-        st.session_state.level = 'Beginner'
-    if 'unique_words' not in st.session_state:
-        st.session_state.unique_words = set()
-    if 'total_words' not in st.session_state:
-        st.session_state.total_words = 0
-    if 'badges' not in st.session_state:
-        st.session_state.badges = []
-    if 'should_reset' not in st.session_state:
-        st.session_state.should_reset = False
-
-init_session_state()
-
 def generate_story_continuation(user_input: str, level: str) -> str:
     """Generate AI story continuation using ChatGPT."""
     try:
@@ -272,23 +272,35 @@ with st.sidebar:
         🎯 เลือกระดับของน้องๆ
         </div>
     """, unsafe_allow_html=True)
+    
     level = st.radio(
         "Select your English level:",
         ('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])
 
 with col1:
     # Story Display Box
-    st.header("Your Story")
-    story_display = st.container()
+    st.markdown("""
+        <div class="thai-eng">
+            <div class="thai">📖 เรื่องราวของคุณ</div>
+            <div class="eng">Your Story</div>
+        </div>
+    """, unsafe_allow_html=True)
     
+    story_display = st.container()
     with story_display:
         if not st.session_state.story:
-            st.info("Start your adventure by writing the first sentence!")
+            st.info("เริ่มต้นผจญภัยด้วยการเขียนประโยคแรกกันเลย! | Start your adventure by writing the first sentence!")
         else:
             for entry in st.session_state.story:
                 if entry['role'] == 'You':
@@ -297,62 +309,77 @@ with col1:
                     st.write("🤖 AI:", entry['content'])
     
     # User Input Box
-    st.header("Your Turn")
-    user_input = st.text_area("Continue the story:", height=100)
+    st.markdown("""
+        <div class="thai-eng">
+            <div class="thai">✏️ ถึงตาคุณแล้ว</div>
+            <div class="eng">Your Turn</div>
+        </div>
+    """, unsafe_allow_html=True)
+    
+    user_input = st.text_area("เขียนต่อจากเรื่องราว | Continue the story:", height=100)
     
-    if st.button("Submit"):
+    if st.button("ส่งคำตอบ | Submit"):
         if user_input.strip():
-            # Add user's input to story
             st.session_state.story.append({"role": "You", "content": user_input})
-            
-            # Update achievements
             update_achievements(user_input)
-            
-            # Generate feedback (stored separately)
             st.session_state.feedback = provide_feedback(user_input, st.session_state.level)
-            
-            # Generate AI continuation
             ai_response = generate_story_continuation(user_input, st.session_state.level)
             st.session_state.story.append({"role": "AI", "content": ai_response})
-            
             st.rerun()
         else:
-            st.warning("Please write something to continue the story.")
+            st.warning("กรุณาเขียนเนื้อเรื่องก่อนกดส่ง | Please write something to continue the story.")
 
 with col2:
+    # Feedback Display
+    if st.session_state.feedback:
+        st.markdown("""
+            <div class="thai-eng">
+                <div class="thai">📝 คำแนะนำ</div>
+                <div class="eng">Writing Feedback</div>
+            </div>
+        """, unsafe_allow_html=True)
+        st.markdown(f"*{st.session_state.feedback}*")
+    
+    # Help and Suggestions Box
     st.markdown("""
         <div class="thai-eng">
-        <div class="thai">✨ เครื่องมือช่วยเขียน</div>
-        <div class="eng">Writing Tools</div>
+            <div class="thai">✨ เครื่องมือช่วยเขียน</div>
+            <div class="eng">Writing Tools</div>
         </div>
     """, unsafe_allow_html=True)
     
-    if st.button("Get Vocabulary Ideas"):
+    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 Writing Prompt"):
+    if st.button("ขอคำใบ้ | Get Creative Prompt"):
         prompt = get_creative_prompt()
-        st.markdown("""
+        st.markdown(f"""
             <div class="thai-eng">
-            <div class="thai">💭 {}</div>
-            <div class="eng">💭 {}</div>
+                <div class="thai">💭 {prompt['thai']}</div>
+                <div class="eng">💭 {prompt['eng']}</div>
             </div>
-        """.format(prompt["thai"], prompt["eng"]), unsafe_allow_html=True)
+        """, unsafe_allow_html=True)
     
     # Achievements Box
-    st.header("Your Achievements")
+    st.markdown("""
+        <div class="thai-eng">
+            <div class="thai">🏆 ความสำเร็จ</div>
+            <div class="eng">Achievements</div>
+        </div>
+    """, unsafe_allow_html=True)
+    
     if st.session_state.badges:
         for badge in st.session_state.badges:
             st.success(f"🏆 {badge}")
     else:
-        st.write("Keep writing to earn badges!")
+        st.write("เขียนต่อไปเพื่อรับรางวัล | Keep writing to earn badges!")
     
     # Save Story Button
     if st.session_state.story:
-        if st.button("Save Story"):
+        if st.button("บันทึกเรื่องราว | Save Story"):
             story_data = {
                 'level': st.session_state.level,
                 'date': datetime.datetime.now().isoformat(),
@@ -362,7 +389,7 @@ with col2:
                 'unique_words': list(st.session_state.unique_words)
             }
             st.download_button(
-                label="Download Story",
+                label="ดาวน์โหลดเรื่องราว | Download Story",
                 data=json.dumps(story_data, indent=2),
                 file_name='joystory.json',
                 mime='application/json'