Update app.py

app.py

@@ -929,4 +929,713 @@ def show_theme_card(theme: Dict):
                 st.rerun()
         except Exception as e:
             logging.error(f"Error selecting theme: {str(e)}")
-            st.error("เกิดข้อผิดพลาดในการเลือกธีม กรุณาลองใหม่อีกครั้ง")
+            st.error("เกิดข้อผิดพลาดในการเลือกธีม กรุณาลองใหม่อีกครั้ง")
+
+def show_story():
+    """Display the story with proper formatting"""
+    story_display = st.container()
+    
+    with story_display:
+        if not st.session_state.story:
+            st.info("เลือกธีมเรื่องราวที่ต้องการเพื่อเริ่มต้นการผจญภัย!")
+            return
+        
+        # Story Display Box
+        for idx, entry in enumerate(st.session_state.story):
+            if entry['role'] == 'AI':
+                if entry.get('is_starter'):
+                    # Story Starter
+                    st.markdown(f"""
+                        <div style="
+                            background-color: #f0f7ff; 
+                            padding: 20px; 
+                            border-radius: 10px; 
+                            margin: 10px 0;
+                            border-left: 4px solid #1e88e5;
+                            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
+                        ">
+                            <div style="color: #1e88e5; margin-bottom: 10px; font-size: 1.1em;">
+                                🎬 เริ่มเรื่อง:
+                            </div>
+                            <div style="color: #666; margin-bottom: 8px; font-family: 'Sarabun', sans-serif;">
+                                {entry.get('thai_content', '')}
+                            </div>
+                            <div style="color: #333; font-size: 1.1em;">
+                                {entry['content']}
+                            </div>
+                        </div>
+                    """, unsafe_allow_html=True)
+                else:
+                    # AI Response
+                    st.markdown(f"""
+                        <div style="
+                            background-color: #f8f9fa;
+                            padding: 15px;
+                            border-radius: 8px;
+                            margin: 8px 0;
+                            border-left: 4px solid #4caf50;
+                        ">
+                            <div style="color: #2e7d32;">
+                                🤖 AI: {entry['content']}
+                            </div>
+                        </div>
+                    """, unsafe_allow_html=True)
+            
+            elif entry['role'] == 'You':
+                # User Entry
+                status_icon = "✅" if entry.get('is_correct') else "✍️"
+                bg_color = "#e8f5e9" if entry.get('is_correct') else "#fff"
+                border_color = "#4caf50" if entry.get('is_correct') else "#1e88e5"
+                
+                st.markdown(f"""
+                    <div style="
+                        background-color: {bg_color};
+                        padding: 15px;
+                        border-radius: 8px;
+                        margin: 8px 0;
+                        border-left: 4px solid {border_color};
+                    ">
+                        <div style="color: #333;">
+                            👤 You: {status_icon} {entry['content']}
+                        </div>
+                        {f'<div style="font-size: 0.9em; color: #666; margin-top: 5px;">{entry.get("feedback", "")}</div>' if entry.get('feedback') else ''}
+                    </div>
+                """, unsafe_allow_html=True)
+
+def show_feedback_section():
+    """Display writing feedback section"""
+    if not st.session_state.feedback:
+        return
+
+    st.markdown("""
+        <div style="margin-bottom: 20px;">
+            <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'):
+        # Show error feedback
+        st.markdown(f"""
+            <div style="
+                background-color: #fff3e0;
+                padding: 20px;
+                border-radius: 10px;
+                border-left: 4px solid #ff9800;
+                margin: 10px 0;
+            ">
+                <p style="color: #e65100; margin-bottom: 15px;">
+                    {feedback_data['feedback']}
+                </p>
+                <div style="
+                    background-color: #fff;
+                    padding: 15px;
+                    border-radius: 8px;
+                    margin-top: 10px;
+                ">
+                    <p style="color: #666; margin-bottom: 5px;">
+                        ประโยคที่ถูกต้อง:
+                    </p>
+                    <p style="
+                        color: #2e7d32;
+                        font-weight: 500;
+                        font-size: 1.1em;
+                        margin: 0;
+                    ">
+                        {feedback_data['corrected']}
+                    </p>
+                </div>
+            </div>
+        """, unsafe_allow_html=True)
+        
+        # Correction button
+        if st.button(
+            "✍️ แก้ไขประโยคให้ถูกต้อง",
+            key="correct_button",
+            help="คลิกเพื่อแก้ไขประโยคให้ถูกต้องตามคำแนะนำ"
+        ):
+            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:
+        # Show success feedback
+        st.markdown(f"""
+            <div style="
+                background-color: #e8f5e9;
+                padding: 20px;
+                border-radius: 10px;
+                border-left: 4px solid #4caf50;
+                margin: 10px 0;
+            ">
+                <p style="color: #2e7d32; margin: 0;">
+                    {feedback_data.get('feedback', '✨ เขียนได้ถูกต้องแล้วค่ะ!')}
+                </p>
+            </div>
+        """, unsafe_allow_html=True)
+
+def show_writing_tools():
+    """Display writing tools section"""
+    with st.expander("✨ เครื่องมือช่วยเขียน | Writing Tools"):
+        col1, col2 = st.columns(2)
+        
+        with col1:
+            if st.button("🎯 ขอคำใบ้", use_container_width=True):
+                with st.spinner("กำลังสร้างคำใบ้..."):
+                    prompt = get_creative_prompt()
+                    st.markdown(f"""
+                        <div style="
+                            background-color: #f3e5f5;
+                            padding: 15px;
+                            border-radius: 8px;
+                            margin-top: 10px;
+                        ">
+                            <div style="color: #6a1b9a;">💭 {prompt['thai']}</div>
+                            <div style="color: #666; font-style: italic;">
+                                💭 {prompt['eng']}
+                            </div>
+                        </div>
+                    """, unsafe_allow_html=True)
+        
+        with col2:
+            if st.button("📚 คำศัพท์แนะนำ", use_container_width=True):
+                with st.spinner("กำลังค้นหาคำศัพท์..."):
+                    vocab_suggestions = get_vocabulary_suggestions()
+                    st.markdown("#### 📚 คำศัพท์น่ารู้")
+                    for word in vocab_suggestions:
+                        st.markdown(f"""
+                            <div style="
+                                background-color: #f5f5f5;
+                                padding: 10px;
+                                border-radius: 5px;
+                                margin: 5px 0;
+                            ">
+                                • {word}
+                            </div>
+                        """, unsafe_allow_html=True)
+
+def show_achievements():
+    """Display achievements and stats"""
+    with st.container():
+        # Points and Streak
+        st.markdown(f"""
+            <div style="
+                background-color: #e3f2fd;
+                padding: 20px;
+                border-radius: 10px;
+                margin-bottom: 20px;
+                text-align: center;
+            ">
+                <h3 style="color: #1e88e5; margin: 0;">
+                    🌟 คะแนนรวม: {st.session_state.points['total']}
+                </h3>
+                <p style="margin: 5px 0;">
+                    🔥 Streak ปัจจุบัน: {st.session_state.points['streak']} ประโยค
+                </p>
+                <p style="margin: 5px 0;">
+                    ⭐ Streak สูงสุด: {st.session_state.points['max_streak']} ประโยค
+                </p>
+            </div>
+        """, unsafe_allow_html=True)
+
+        # Writing Stats
+        st.markdown("""
+            <div style="margin-bottom: 15px;">
+                <h3>📊 สถิติการเขียน</h3>
+            </div>
+        """, unsafe_allow_html=True)
+        
+        col1, col2 = st.columns(2)
+        with col1:
+            st.metric(
+                "ประโยคที่เขียนทั้งหมด", 
+                st.session_state.stats['total_sentences'],
+                help="จำนวนประโยคทั้งหมดที่คุณได้เขียน"
+            )
+            st.metric(
+                "ถูกต้องตั้งแต่แรก", 
+                st.session_state.stats['correct_first_try'],
+                help="จำนวนประโยคที่ถูกต้องโดยไม่ต้องแก้ไข"
+            )
+        with col2:
+            st.metric(
+                "ความแม่นยำ", 
+                f"{st.session_state.stats['accuracy_rate']:.1f}%",
+                help="เปอร์เซ็นต์ของประโยคที่ถูกต้องตั้งแต่แรก"
+            )
+            st.metric(
+                "คำศัพท์ที่ใช้", 
+                len(st.session_state.stats['vocabulary_used']),
+                help="จำนวนคำศัพท์ที่ไม่ซ้ำกันที่คุณได้ใช้"
+            )
+
+        # Show Achievements
+        st.markdown("""
+            <div style="margin: 25px 0 15px 0;">
+                <h3>🏆 ความสำเร็จ</h3>
+            </div>
+        """, unsafe_allow_html=True)
+        
+        if st.session_state.achievements:
+            for achievement in st.session_state.achievements:
+                st.success(achievement)
+        else:
+            st.info("ยังไม่มีความสำเร็จ - เขียนต่อไปเพื่อปลดล็อกรางวัล!")
+            
+            # Show available achievements
+            st.markdown("""
+                <div style="
+                    margin-top: 15px;
+                    padding: 15px;
+                    background-color: #f5f5f5;
+                    border-radius: 8px;
+                ">
+                    <p style="color: #666; margin-bottom: 10px;">
+                        รางวัลที่รอคุณอยู่:
+                    </p>
+                    <ul style="list-style-type: none; padding-left: 0;">
+                        <li>🌟 นักเขียนไร้ที่ติ: เขียนถูกต้อง 5 ประโยคติดต่อกัน</li>
+                        <li>📚 ราชาคำศัพท์: ใช้คำศัพท์ไม่ซ้ำกัน 50 คำ</li>
+                        <li>📖 นักแต่งนิทาน: เขียนเรื่องยาว 10 ประโยค</li>
+                        <li>👑 ราชาความแม่นยำ: มีอัตราความถูกต้อง 80% ขึ้นไป</li>
+                    </ul>
+                </div>
+            """, unsafe_allow_html=True)
+
+def show_save_options():
+    """Display save and export options"""
+    st.markdown("### 💾 บันทึกเรื่องราว")
+    
+    if not st.session_state.story:
+        st.info("เริ่มเขียนเรื่องราวก่อนเพื่อบันทึกผลงานของคุณ")
+        return
+        
+    col1, col2 = st.columns(2)
+    with col1:
+        # PDF Export
+        if st.button("📑 บันทึกเป็น PDF", use_container_width=True):
+            try:
+                pdf = create_story_pdf()
+                st.download_button(
+                    "📥 ดาวน์โหลด PDF",
+                    data=pdf,
+                    file_name=f"story_{datetime.now().strftime('%Y%m%d')}.pdf",
+                    mime="application/pdf"
+                )
+            except Exception as e:
+                logging.error(f"Error creating PDF: {str(e)}")
+                st.error("เกิดข้อผิดพลาดในการสร้างไฟล์ PDF กรุณาลองใหม่อีกครั้ง")
+    
+    with col2:
+        # JSON Save
+        if st.button("💾 บันทึกความก้าวหน้า", use_container_width=True):
+            try:
+                story_data = {
+                    'timestamp': datetime.now().isoformat(),
+                    'level': st.session_state.level,
+                    'story': st.session_state.story,
+                    'achievements': st.session_state.achievements,
+                    'stats': convert_sets_to_lists(st.session_state.stats),
+                    'points': st.session_state.points
+                }
+                
+                st.download_button(
+                    "📥 ดาวน์โหลดไฟล์บันทึก",
+                    data=json.dumps(story_data, ensure_ascii=False, indent=2),
+                    file_name=f"story_progress_{datetime.now().strftime('%Y%m%d')}.json",
+                    mime="application/json"
+                )
+            except Exception as e:
+                logging.error(f"Error saving progress: {str(e)}")
+                st.error("เกิดข้อผิดพลาดในการบันทึกความก้าวหน้า กรุณาลองใหม่อีกครั้ง")
+
+def show_sidebar():
+    """Display sidebar content"""
+    st.sidebar.markdown("### ⚙️ การตั้งค่า")
+    
+    # Progress Upload
+    st.sidebar.markdown("#### 📂 โหลดความก้าวหน้า")
+    uploaded_file = st.sidebar.file_uploader(
+        "เลือกไฟล์ .json",
+        type=['json'],
+        help="เลือกไฟล์ความก้าวหน้าที่บันทึกไว้"
+    )
+    if uploaded_file:
+        if st.sidebar.button("โหลดความก้าวหน้า", use_container_width=True):
+            try:
+                data = json.loads(uploaded_file.getvalue())
+                load_progress(data)
+                st.sidebar.success("โหลดความก้าวหน้าเรียบร้อย!")
+                st.rerun()
+            except Exception as e:
+                logging.error(f"Error loading progress: {str(e)}")
+                st.sidebar.error("เกิดข้อผิดพลาดในการโหลดไฟล์")
+    
+    # Level Selection
+    st.sidebar.markdown("#### 🎯 ระดับการเรียน")
+    level = show_level_selection()
+    st.session_state.level = level
+    
+    # Theme Change Option
+    if st.session_state.current_theme:
+        st.sidebar.markdown("#### 🎨 ธีมเรื่องราว")
+        if st.sidebar.button("🔄 เปลี่ยนธีม", use_container_width=True):
+            st.session_state.current_theme = None
+            st.session_state.theme_story_starter = None
+            st.rerun()
+    
+    # Reset Option
+    st.sidebar.markdown("#### 🔄 รีเซ็ตเรื่องราว")
+    if st.sidebar.button("เริ่มเรื่องใหม่", use_container_width=True):
+        if st.session_state.story:
+            if st.sidebar.checkbox("ยืนยันการเริ่มใหม่"):
+                st.session_state.should_reset = True
+                st.rerun()
+        else:
+            st.sidebar.info("ยังไม่มีเรื่องราวที่จะรีเซ็ต")
+
+def show_story_input():
+    """Display story input section"""
+    st.markdown("""
+        <div class="thai-eng">
+            <div class="thai">✏️ ถึงตาคุณแล้ว</div>
+            <div class="eng">Your Turn</div>
+        </div>
+    """, unsafe_allow_html=True)
+    
+    # Input area
+    text_input = st.text_area(
+        "เขียนต่อจากเรื่องราว | Continue the story:",
+        height=100,
+        key="story_input_area",
+        help="พิมพ์ประโยคภาษาอังกฤษเพื่อต่อเรื่อง",
+        label_visibility="collapsed"
+    )
+    
+    # Submit button with character count
+    col1, col2 = st.columns([3, 1])
+    with col1:
+        if st.button("📝 ส่งคำตอบ | Submit", use_container_width=True):
+            if not text_input.strip():
+                st.warning("กรุณาเขียนข้อความก่อนส่ง")
+                return
+                
+            try:
+                with st.spinner("กำลังวิเคราะห์ประโยค..."):
+                    handle_story_submission(text_input.strip())
+            except Exception as e:
+                logging.error(f"Error submitting story: {str(e)}")
+                st.error("เกิดข้อผิดพลาดในการส่งคำตอบ กรุณาลองใหม่อีกครั้ง")
+    
+    with col2:
+        char_count = len(text_input)
+        st.markdown(f"""
+            <div style="text-align: right; color: {'red' if char_count > 200 else '#666'};">
+                {char_count}/200 ตัวอักษร
+            </div>
+        """, unsafe_allow_html=True)
+
+def handle_story_submission(text: str):
+    """Handle story submission and processing"""
+    if not st.session_state.story:
+        st.error("กรุณาเลือกธีมเรื่องราวก่อนเริ่มเขียน")
+        return
+
+    try:
+        # Get feedback
+        feedback_data = provide_feedback(text, st.session_state.level)
+        st.session_state.feedback = feedback_data
+        is_correct = not feedback_data.get('has_errors', False)
+        
+        # Add user's sentence
+        st.session_state.story.append({
+            "role": "You",
+            "content": text,
+            "is_corrected": False,
+            "is_correct": is_correct,
+            "timestamp": datetime.now().isoformat()
+        })
+        
+        # Update vocabulary
+        words = set(text.lower().split())
+        st.session_state.stats['vocabulary_used'].update(words)
+        
+        # Update points and achievements
+        update_points(is_correct)
+        update_achievements()
+        
+        # Generate AI continuation
+        if not feedback_data.get('has_errors'):
+            with st.spinner("กำลังต่อเรื่อง..."):
+                ai_response = generate_story_continuation(text, st.session_state.level)
+                st.session_state.story.append({
+                    "role": "AI",
+                    "content": ai_response,
+                    "timestamp": datetime.now().isoformat()
+                })
+        
+        # Update session stats
+        update_session_stats()
+        
+        # Clear input
+        st.session_state.story_input_area = ""
+        
+    except Exception as e:
+        logging.error(f"Error in story submission: {str(e)}")
+        raise
+
+def show_main_interface():
+    """Display main story interface"""
+    col1, col2 = st.columns([3, 1])
+    
+    with col1:
+        # Story display
+        st.markdown("""
+            <div class="thai-eng">
+                <div class="thai">📖 เรื่องราวของคุณ</div>
+                <div class="eng">Your Story</div>
+            </div>
+        """, unsafe_allow_html=True)
+        
+        show_story()
+        
+        if st.session_state.story:
+            show_story_input()
+    
+    with col2:
+        # Feedback section
+        show_feedback_section()
+        
+        # Writing tools
+        show_writing_tools()
+        
+        # Achievements
+        with st.expander("🏆 ความสำเร็จ | Achievements"):
+            show_achievements()
+        
+        # Save options
+        show_save_options()
+
+# === 6. MAIN APPLICATION LOGIC ===
+def main():
+    """Main application entry point"""
+    try:
+        # Initialize states
+        init_session_state()
+        init_theme_state()
+        
+        # Add watermark
+        st.markdown("""
+            <div style='position: fixed; bottom: 10px; right: 10px; z-index: 1000; 
+                        opacity: 0.7; font-size: 0.8em; color: #666;'>
+                Powered by JoyStory AI
+            </div>
+        """, unsafe_allow_html=True)
+
+        # Show header
+        st.markdown("# 📖 JoyStory")
+        show_welcome_section()
+        show_parent_guide()
+
+        # Sidebar
+        with st.sidebar:
+            show_sidebar()
+
+        # Session Status Check
+        check_session_status()
+
+        # Main content area
+        main_container = st.container()
+        with main_container:
+            if not st.session_state.current_theme:
+                show_theme_selection()
+            else:
+                show_main_interface()
+
+        # Handle reset if needed
+        if st.session_state.should_reset:
+            reset_story()
+            
+        # Auto-save progress periodically
+        if st.session_state.story:
+            auto_save_progress()
+
+    except Exception as e:
+        handle_application_error(e)
+
+def check_session_status():
+    """Check and maintain session status"""
+    try:
+        # Update session duration
+        if 'session_start' not in st.session_state:
+            st.session_state.session_start = datetime.now()
+        
+        # Check for session timeout (2 hours)
+        session_duration = (datetime.now() - st.session_state.session_start).total_seconds()
+        if session_duration > 7200:  # 2 hours
+            st.warning("เซสชันหมดอายุ กรุณาบันทึกความก้าวหน้าและรีเฟรชหน้าเว็บ")
+        
+        # Check for inactivity (30 minutes)
+        last_interaction = datetime.fromisoformat(st.session_state.last_interaction)
+        inactivity_duration = (datetime.now() - last_interaction).total_seconds()
+        if inactivity_duration > 1800:  # 30 minutes
+            st.info("ไม่มีกิจกรรมเป็นเวลานาน กรุณาบันทึกความก้าวหน้าเพื่อความปลอดภัย")
+        
+        # Update stats if story exists
+        if st.session_state.story:
+            update_session_stats()
+            
+    except Exception as e:
+        logging.error(f"Error checking session status: {str(e)}")
+
+def auto_save_progress():
+    """Automatically save progress to session state"""
+    try:
+        current_progress = {
+            'timestamp': datetime.now().isoformat(),
+            'story': st.session_state.story,
+            'stats': st.session_state.stats,
+            'points': st.session_state.points,
+            'achievements': st.session_state.achievements
+        }
+        
+        # Save to session state
+        if 'auto_save' not in st.session_state:
+            st.session_state.auto_save = {}
+        
+        st.session_state.auto_save = current_progress
+        
+        # Add timestamp for last auto-save
+        st.session_state.last_auto_save = datetime.now().isoformat()
+        
+    except Exception as e:
+        logging.error(f"Error in auto-save: {str(e)}")
+
+def handle_application_error(error: Exception):
+    """Handle application-wide errors"""
+    logging.error(f"Application error: {str(error)}")
+    
+    error_message = """
+    <div style="
+        background-color: #ffebee;
+        padding: 20px;
+        border-radius: 10px;
+        border-left: 4px solid #c62828;
+        margin: 20px 0;
+    ">
+        <h3 style="color: #c62828; margin: 0 0 10px 0;">
+            ⚠️ เกิดข้อผิดพลาดในระบบ
+        </h3>
+        <p style="color: #333; margin: 0;">
+            กรุณาลองใหม่อีกครั้ง หรือติดต่อผู้ดูแลระบบ
+        </p>
+    </div>
+    """
+    
+    st.markdown(error_message, unsafe_allow_html=True)
+    
+    # Show technical details in expander
+    with st.expander("รายละเอียดข้อผิดพลาด (สำหรับผู้ดูแลระบบ)"):
+        st.code(f"""
+        Error Type: {type(error).__name__}
+        Error Message: {str(error)}
+        Timestamp: {datetime.now().isoformat()}
+        """)
+
+def show_debug_info():
+    """Show debug information (development only)"""
+    if st.session_state.get('debug_mode'):
+        with st.expander("🔧 Debug Information"):
+            st.json({
+                'session_state': {
+                    key: str(value) if isinstance(value, (set, datetime)) else value
+                    for key, value in st.session_state.items()
+                    if key not in ['client', '_client']
+                }
+            })
+
+# Add CSS for loading animation
+st.markdown("""
+    <style>
+    @keyframes pulse {
+        0% { opacity: 0.6; }
+        50% { opacity: 1; }
+        100% { opacity: 0.6; }
+    }
+    
+    .loading-animation {
+        animation: pulse 1.5s infinite;
+        background-color: #f0f2f5;
+        border-radius: 8px;
+        padding: 20px;
+        text-align: center;
+        margin: 20px 0;
+    }
+    
+    /* Custom Scrollbar */
+    ::-webkit-scrollbar {
+        width: 8px;
+        height: 8px;
+    }
+    
+    ::-webkit-scrollbar-track {
+        background: #f1f1f1;
+        border-radius: 4px;
+    }
+    
+    ::-webkit-scrollbar-thumb {
+        background: #888;
+        border-radius: 4px;
+    }
+    
+    ::-webkit-scrollbar-thumb:hover {
+        background: #666;
+    }
+    
+    /* Toast Notifications */
+    .toast-notification {
+        position: fixed;
+        bottom: 20px;
+        right: 20px;
+        padding: 15px 25px;
+        background-color: #333;
+        color: white;
+        border-radius: 8px;
+        z-index: 1000;
+        animation: slideIn 0.3s ease-out;
+    }
+    
+    @keyframes slideIn {
+        from { transform: translateX(100%); }
+        to { transform: translateX(0); }
+    }
+    
+    /* Progress Indicator */
+    .progress-bar {
+        width: 100%;
+        height: 4px;
+        background-color: #e0e0e0;
+        border-radius: 2px;
+        overflow: hidden;
+    }
+    
+    .progress-bar-fill {
+        height: 100%;
+        background-color: #1e88e5;
+        transition: width 0.3s ease;
+    }
+    </style>
+""", unsafe_allow_html=True)
+
+if __name__ == "__main__":
+    try:
+        main()
+    except Exception as e:
+        handle_application_error(e)