Update app.py

app.py

@@ -1,11 +1,10 @@
 import os
-import requests
 import gradio as gr
-from gtts import gTTS  # ✅ gTTS 추가
+from gtts import gTTS  # ✅ gTTS 사용
 
-# 스토리 데이터 (텍스트 + 이미지 URL 포함)
+# 📌 단모음(Short Vowel) 스토리 데이터 (텍스트 + 이미지 URL 포함)
 image_base_url = "https://huggingface.co/spaces/englissi/englishstories/resolve/main/image/"
-stories = [
+short_vowel_stories = [
     {"text": "Sam has a cat.", "image": f"{image_base_url}1.webp"},
     {"text": "The cat is fat and tan.", "image": f"{image_base_url}2.webp"},
     {"text": "Sam and the cat nap on a mat.", "image": f"{image_base_url}3.webp"},
@@ -18,6 +17,20 @@ stories = [
     {"text": "Fun in the sun is the best!", "image": f"{image_base_url}10.webp"}
 ]
 
+# 📌 장모음(Long Vowel) 스토리 데이터
+long_vowel_stories = [
+    {"text": "Kate ate a big cake.", "image": f"{image_base_url}11.webp"},
+    {"text": "The train is late today.", "image": f"{image_base_url}12.webp"},
+    {"text": "I see a green tree.", "image": f"{image_base_url}13.webp"},
+    {"text": "He likes to read a book.", "image": f"{image_base_url}14.webp"},
+    {"text": "The kite is flying high.", "image": f"{image_base_url}15.webp"},
+    {"text": "The light is very bright.", "image": f"{image_base_url}16.webp"},
+    {"text": "The rose is red.", "image": f"{image_base_url}17.webp"},
+    {"text": "We saw a boat on the lake.", "image": f"{image_base_url}18.webp"},
+    {"text": "He is cute and kind.", "image": f"{image_base_url}19.webp"},
+    {"text": "A baby bird flew away.", "image": f"{image_base_url}20.webp"}
+]
+
 # 📌 gTTS를 사용하여 음성 파일 생성
 def generate_audio(text, filename="story.mp3"):
     try:
@@ -29,7 +42,7 @@ def generate_audio(text, filename="story.mp3"):
         print(f"⚠️ 음성 생성 실패: {e}")
         return None
 
-# 스토리 텍스트를 HTML 스타일로 크게 표시하고 중앙 정렬하는 함수
+# 📌 스토리 텍스트를 HTML 스타일로 크게 표시하고 중앙 정렬하는 함수
 def format_story_text(text):
     return f"""
     <div style='
@@ -44,70 +57,94 @@ def format_story_text(text):
     </div>
     """
 
-# 초기 스토리 로딩 함수
-def init_story():
+# 📌 초기 스토리 로딩 함수
+def init_story(story_list):
     index = 0
-    story = stories[index]
+    story = story_list[index]
     text = story["text"]
     image = story["image"]
     audio_file = generate_audio(text, filename="story.mp3")
     return index, text, image, audio_file
 
-# "다음" 버튼 클릭 시 호출되는 함수
-def next_story(current_index):
-    new_index = (current_index + 1) % len(stories)
-    story = stories[new_index]
+# 📌 "다음" 버튼 클릭 시 호출되는 함수
+def next_story(current_index, story_list):
+    new_index = (current_index + 1) % len(story_list)
+    story = story_list[new_index]
     text = story["text"]
     image = story["image"]
     audio_file = generate_audio(text, filename="story.mp3")
     return new_index, format_story_text(text), image, audio_file, text
 
-# "재생" 버튼 클릭 시 호출되는 함수
+# 📌 "재생" 버튼 클릭 시 호출되는 함수
 def play_story(current_text):
     audio_file = generate_audio(current_text, filename="story.mp3")
     return audio_file
 
-# 초기 데이터 설정
-init_index, init_text, init_image, init_audio = init_story()
+# 📌 초기 데이터 설정 (단모음 & 장모음)
+init_index_short, init_text_short, init_image_short, init_audio_short = init_story(short_vowel_stories)
+init_index_long, init_text_long, init_image_long, init_audio_long = init_story(long_vowel_stories)
 
-# Gradio 인터페이스 구성
+# 📌 Gradio 인터페이스 구성 (탭 추가)
 with gr.Blocks(title="📚 귀여운 스토리 앱") as demo:
     gr.HTML("<h1 style='text-align:center;'>🎈 재미있는 영어 스토리 타임! 📖</h1>")
-
+    
     gr.HTML("<p style='text-align:center; font-size:1.2em;'>🐱 귀여운 이야기와 함께 영어를 배워보아요! <br> "
             "버튼을 눌러 다음 이야기로 넘어가고, 음성을 들으며 따라 읽어보세요! 🎵</p>")
 
-    # 상태값: 현재 스토리 인덱스와 현재 스토리 텍스트 저장
-    state_index = gr.State(value=init_index)
-    state_text = gr.State(value=init_text)
-
-    # UI 컴포넌트 생성
-    story_text = gr.Markdown(value=format_story_text(init_text), label="스토리")
-
-    story_image = gr.Image(
-        value=init_image, label="이미지", type="filepath", width=400, height=400,
-        container=True
-    )
-
-    audio_output = gr.Audio(value=init_audio, label="🎧 음성 재생", type="filepath", autoplay=True)
-
-    with gr.Row():
-        next_button = gr.Button("👉 다음 이야기", elem_id="next-btn")
-        play_button = gr.Button("🔊 다시 듣기", elem_id="play-btn")
-
-    # "다음" 버튼 클릭 이벤트 처리
-    next_button.click(
-        fn=next_story,
-        inputs=[state_index],
-        outputs=[state_index, story_text, story_image, audio_output, state_text]
-    )
-
-    # "재생" 버튼 클릭 이벤트 처리
-    play_button.click(
-        fn=play_story,
-        inputs=[state_text],
-        outputs=[audio_output]
-    )
+    with gr.Tabs():
+        with gr.TabItem("Short Vowel (단모음)"):
+            # 단모음 상태값
+            state_index_short = gr.State(value=init_index_short)
+            state_text_short = gr.State(value=init_text_short)
+
+            # 단모음 UI
+            story_text_short = gr.Markdown(value=format_story_text(init_text_short), label="스토리")
+            story_image_short = gr.Image(value=init_image_short, label="이미지", type="filepath", width=400, height=400)
+            audio_output_short = gr.Audio(value=init_audio_short, label="🎧 음성 재생", type="filepath", autoplay=True)
+
+            with gr.Row():
+                next_button_short = gr.Button("👉 다음 이야기", elem_id="next-btn")
+                play_button_short = gr.Button("🔊 다시 듣기", elem_id="play-btn")
+
+            next_button_short.click(
+                fn=next_story,
+                inputs=[state_index_short, gr.State(value=short_vowel_stories)],
+                outputs=[state_index_short, story_text_short, story_image_short, audio_output_short, state_text_short]
+            )
+
+            play_button_short.click(
+                fn=play_story,
+                inputs=[state_text_short],
+                outputs=[audio_output_short]
+            )
+
+        with gr.TabItem("Long Vowel (장모음)"):
+            # 장모음 상태값
+            state_index_long = gr.State(value=init_index_long)
+            state_text_long = gr.State(value=init_text_long)
+
+            # 장모음 UI
+            story_text_long = gr.Markdown(value=format_story_text(init_text_long), label="스토리")
+            story_image_long = gr.Image(value=init_image_long, label="이미지", type="filepath", width=400, height=400)
+            audio_output_long = gr.Audio(value=init_audio_long, label="🎧 음성 재생", type="filepath", autoplay=True)
+
+            with gr.Row():
+                next_button_long = gr.Button("👉 다음 이야기", elem_id="next-btn")
+                play_button_long = gr.Button("🔊 다시 듣기", elem_id="play-btn")
+
+            next_button_long.click(
+                fn=next_story,
+                inputs=[state_index_long, gr.State(value=long_vowel_stories)],
+                outputs=[state_index_long, story_text_long, story_image_long, audio_output_long, state_text_long]
+            )
+
+            play_button_long.click(
+                fn=play_story,
+                inputs=[state_text_long],
+                outputs=[audio_output_long]
+            )
+
+
 
 # CSS 스타일 추가 (귀여운 테마)
 demo.css = """