Update app.py

app.py

@@ -16,6 +16,12 @@ def img2text(url):
     return text
 
 
+# Translation function EN to ZH
+def translate_to_chinese(text):
+    translator = pipeline("translation", model="Helsinki-NLP/opus-mt-en-zh")
+    translation = translator(text)[0]["translation_text"]
+    return translation
+
 # text2story
 def text2story(text):
     # Initialize the text generation pipeline
@@ -35,10 +41,10 @@ def text2story(text):
     return story
 
 
-def text2audio(text):
+def text2audio(text, lang='zh'):
     try:
-        # Create a gTTS object
-        tts = gTTS(text=text, lang='en')
+        # Create a gTTS object with Chinese language
+        tts = gTTS(text=text, lang=lang)
         # Save to BytesIO object
         audio_bytes = io.BytesIO()
         tts.write_to_fp(audio_bytes)
@@ -49,17 +55,18 @@ def text2audio(text):
             'sampling_rate': 24000  # gTTS default sampling rate
         }
     except Exception as e:
-        st.error(f"Error in audio generation: {str(e)}")
+        st.error(f"音頻製作出左問題: {str(e)}")
         return None
 
 
 # Apply custom CSS for modern, stylish kid-friendly UI
-st.set_page_config(page_title="StoryMagic", page_icon="✨", layout="wide")
+st.set_page_config(page_title="故事魔法", page_icon="✨", layout="wide")
 
 st.markdown("""
 <style>
   /* Modern, stylish kid-friendly design */
   @import url('https://fonts.googleapis.com/css2?family=Quicksand:wght@400;600;700&display=swap');
+  @import url('https://fonts.googleapis.com/css2?family=Noto+Sans+HK:wght@400;500;700&display=swap');
 
   :root {
     --primary-color: #6C63FF;
@@ -73,7 +80,7 @@ st.markdown("""
 
   .stApp {
     background: linear-gradient(135deg, #F4F9FF, #EEFAFF);
-    font-family: 'Quicksand', sans-serif;
+    font-family: 'Noto Sans HK', sans-serif;
     color: var(--text-dark);
   }
 
@@ -85,7 +92,7 @@ st.markdown("""
 
   /* Modern headers */
   h1, h2, h3 {
-    font-family: 'Quicksand', sans-serif;
+    font-family: 'Noto Sans HK', sans-serif;
     font-weight: 700;
     color: var(--primary-color);
   }
@@ -125,7 +132,7 @@ st.markdown("""
 
   /* Accent borders for stages */
   .css-nahz7x, .css-ocqkz7, .css-4z1n4l {
-    border-left: 5px solid var(--primary-color) !important;
+    border-left: it 5px solid var(--primary-color) !important;
   }
 
   .css-1r6slb0, .css-1ubpcwi {
@@ -183,7 +190,7 @@ st.markdown("""
     padding: 0.6rem 1.5rem !important;
     font-size: 1.1rem !important;
     font-weight: 600 !important;
-    font-family: 'Quicksand', sans-serif !important;
+    font-family: 'Noto Sans HK', sans-serif !important;
     transition: all 0.3s ease !important;
     box-shadow: 0 5px 15px rgba(65, 184, 131, 0.3) !important;
   }
@@ -243,14 +250,14 @@ st.markdown("""
 </style>
 """, unsafe_allow_html=True)
 
-# App header
-st.title("✨ StoryMagic")
-st.markdown("<p class='subtitle'>Upload a picture and watch it transform into a magical story!</p>",
+# App header with Cantonese
+st.title("✨ 故事魔法")
+st.markdown("<p class='subtitle'>上載一張圖片，睇下佢點變成一個神奇嘅故事！</p>",
             unsafe_allow_html=True)
 
-# File uploader
+# File uploader with Cantonese
 with st.container():
-    st.subheader("Choose a picture")
+    st.subheader("揀一張靚相啦！")
     uploaded_file = st.file_uploader("", key="upload")
 
 if uploaded_file is not None:
@@ -263,42 +270,55 @@ if uploaded_file is not None:
 
     # Stage 1: Image to Text
     with st.container():
-        st.markdown("<h3><span class='stage-icon'>🔍</span> Image Analysis</h3>", unsafe_allow_html=True)
+        st.markdown("<h3><span class='stage-icon'>🔍</span> 圖片解讀中</h3>", unsafe_allow_html=True)
         scenario = img2text(uploaded_file.name)
-        st.text(scenario)
+        
+        # Translate the caption to Chinese
+        scenario_zh = translate_to_chinese(scenario)
+
+        # Display Chinese caption
+        st.text("中文描述:")
+        st.text(scenario_zh)
 
     # Stage 2: Text to Story
     with st.container():
-        st.markdown("<h3><span class='stage-icon'>📝</span> Story Creation</h3>", unsafe_allow_html=True)
+        st.markdown("<h3><span class='stage-icon'>📝</span> 故事創作中</h3>", unsafe_allow_html=True)
         story = text2story(scenario)
-        st.text(story)
+        # Translate the story to Chinese
+        story_zh = translate_to_chinese(story)
+
+        # Display Chinese story
+        st.text("中文故事:")
+        st.text(story_zh)
 
     # Stage 3: Story to Audio data
     with st.container():
-        st.markdown("<h3><span class='stage-icon'>🔊</span> Audio Narration</h3>", unsafe_allow_html=True)
-        audio_data = text2audio(story)
+        st.markdown("<h3><span class='stage-icon'>🔊</span> 故事朗讀準備中</h3>", unsafe_allow_html=True)
+
+        # Create audio for Chinese story
+        audio_data = text2audio(story_zh, lang='zh')
 
-        # Play button - now standard alignment
-        if st.button("🔊 Play Story"):
+        # Play button with Cantonese text
+        if st.button("🔊 播放故事"):
             if audio_data:
                 st.audio(audio_data['audio'],
                          format="audio/wav",
                          start_time=0,
                          sample_rate=audio_data['sampling_rate'])
             else:
-                st.error("Could not generate audio")
+                st.error("哎呀！聲音整唔到喎，再試多次啦！")
 
     # Cleanup: Remove the temporary file
     if os.path.exists(uploaded_file.name):
         os.remove(uploaded_file.name)
 else:
-    # Welcome message
+    # Welcome message in Cantonese
     st.markdown("""
     <div class="welcome-message">
         <div class="welcome-icon">✨</div>
-        <h2>Welcome to StoryMagic!</h2>
+        <h2>歡迎嚟到故事魔法！</h2>
         <p style="font-size: 1.2rem; color: #6B7897; max-width: 500px; margin: 0 auto 30px;">
-            Upload any picture, and our magic wizard will turn it into an exciting story just for you!
+            上載一張你鍾意嘅相片，我哋嘅魔法師會幫你變出一個好好玩嘅故事！
         </p>
         <div>
             <span class="emoji">🚀</span>