Update app.py

app.py

@@ -217,158 +217,34 @@ with gr.Blocks(title="📚 귀여운 스토리 앱") as demo:
     gr.HTML("<h1>🎈 재미있는 영어 스토리 타임! 📖</h1>")
     gr.HTML("<p>🐱 귀여운 이야기와 함께 영어를 배워보아요! <br> 버튼을 눌러 다음 이야기로 넘어가고, 음성을 들으며 따라 읽어보세요! 🎵</p>")
 
-    with gr.Tabs():
-        # -- Short Vowel Tab --
-        with gr.TabItem("Short Vowel (단모음)"):
-            state_index_short = gr.State(value=init_index_short)
-            state_text_short = gr.State(value=init_text_short)
-
-            story_text_short = gr.HTML(value=f"<div class='story-text'>{init_text_short}</div>")
-            story_image_short = gr.Image(value=init_image_short, width=300, height=300)
-            audio_output_short = gr.Audio(value=init_audio_short, autoplay=False)
-
-            with gr.Row():
-                next_button_short = gr.Button("👉 다음 이야기", elem_classes=["btn-custom", "next-btn"])
-                play_button_short = gr.Button("🔊 다시 듣기", elem_classes=["btn-custom", "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]
-            )
-
-        # -- Long Vowel Tab --
-        with gr.TabItem("Long Vowel (장모음)"):
-            state_index_long = gr.State(value=init_index_long)
-            state_text_long = gr.State(value=init_text_long)
-
-            story_text_long = gr.HTML(value=f"<div class='story-text'>{init_text_long}</div>")
-            story_image_long = gr.Image(value=init_image_long, width=300, height=300)
-            audio_output_long = gr.Audio(value=init_audio_long, autoplay=False)
-
-            with gr.Row():
-                next_button_long = gr.Button("👉 다음 이야기", elem_classes=["btn-custom", "next-btn"])
-                play_button_long = gr.Button("🔊 다시 듣기", elem_classes=["btn-custom", "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]
-            )
-
-        # -- Blends & Digraphs Tab --
-        with gr.TabItem("Blends (이중자음)"):
-            state_index_blends = gr.State(value=init_index_blends)
-            state_text_blends = gr.State(value=init_text_blends)
-
-            story_text_blends = gr.HTML(value=f"<div class='story-text'>{init_text_blends}</div>")
-            story_image_blends = gr.Image(value=init_image_blends, width=300, height=300)
-            audio_output_blends = gr.Audio(value=init_audio_blends, autoplay=False)
-
-            with gr.Row():
-                next_button_blends = gr.Button("👉 다음 이야기", elem_classes=["btn-custom", "next-btn"])
-                play_button_blends = gr.Button("🔊 다시 듣기", elem_classes=["btn-custom", "play-btn"])
-
-            next_button_blends.click(
-                fn=next_story,
-                inputs=[state_index_blends, gr.State(value=blends_digraphs_stories)],
-                outputs=[state_index_blends, story_text_blends, story_image_blends, audio_output_blends, state_text_blends]
-            )
-
-            play_button_blends.click(
-                fn=play_story,
-                inputs=[state_text_blends],
-                outputs=[audio_output_blends]
-            )
-
-        # -- The Red Ball Tab --
-        with gr.TabItem("The Red Ball"):
-            state_index_red_ball = gr.State(value=the_red_ball_index)
-            state_text_red_ball = gr.State(value=the_red_ball_text)
-
-            story_text_red_ball = gr.HTML(value=f"<div class='story-text'>{the_red_ball_text}</div>")
-            story_image_red_ball = gr.Image(value=the_red_ball_image, width=300, height=300)
-            audio_output_red_ball = gr.Audio(value=the_red_ball_audio, autoplay=False)
-
-            with gr.Row():
-                next_button_red_ball = gr.Button("👉 다음 이야기", elem_classes=["btn-custom", "next-btn"])
-                play_button_red_ball = gr.Button("🔊 다시 듣기", elem_classes=["btn-custom", "play-btn"])
-
-            next_button_red_ball.click(
-                fn=next_story,
-                inputs=[state_index_red_ball, gr.State(value=the_red_ball_story)],
-                outputs=[state_index_red_ball, story_text_red_ball, story_image_red_ball, audio_output_red_ball, state_text_red_ball]
-            )
-
-            play_button_red_ball.click(
-                fn=play_story,
-                inputs=[state_text_red_ball],
-                outputs=[audio_output_red_ball]
-            )
-
-        # -- The Big Cat Tab --
-        with gr.TabItem("The Big Cat"):
-            state_index_big_cat = gr.State(value=the_big_cat_index)
-            state_text_big_cat = gr.State(value=the_big_cat_text)
-    
-            story_text_big_cat = gr.HTML(value=f"<div class='story-text'>{the_big_cat_text}</div>")
-            story_image_big_cat = gr.Image(value=the_big_cat_image, width=300, height=300)
-            audio_output_big_cat = gr.Audio(value=the_big_cat_audio, autoplay=False)
-        
-        with gr.Row():
-            next_button_big_cat = gr.Button("👉 다음 이야기", elem_classes=["btn-custom", "next-btn"])
-            play_button_big_cat = gr.Button("🔊 다시 듣기", elem_classes=["btn-custom", "play-btn"])
-    
-        next_button_big_cat.click(
-            fn=next_story,
-            inputs=[state_index_big_cat, gr.State(value=the_big_cat_story)],
-            outputs=[state_index_big_cat, story_text_big_cat, story_image_big_cat, audio_output_big_cat, state_text_big_cat]
-        )
-    
-        play_button_big_cat.click(
-            fn=play_story,
-            inputs=[state_text_big_cat],
-            outputs=[audio_output_big_cat]
-        )
-
-        # -- The Hot Sun --
-        with gr.TabItem("The Hot Sun"):
-            state_index_hot_sun = gr.State(value=the_hot_sun_index)
-            state_text_hot_sun = gr.State(value=the_hot_sun_text)
-        
-            story_text_hot_sun = gr.HTML(value=f"<div class='story-text'>{the_hot_sun_text}</div>")
-            story_image_hot_sun = gr.Image(value=the_hot_sun_image, width=300, height=300)
-            audio_output_hot_sun = gr.Audio(value=the_hot_sun_audio, autoplay=False)
-
-        with gr.Row():
-            next_button_hot_sun = gr.Button("👉 다음 이야기", elem_classes=["btn-custom", "next-btn"])
-            play_button_hot_sun = gr.Button("🔊 다시 듣기", elem_classes=["btn-custom", "play-btn"])
-    
-        next_button_hot_sun.click(
-            fn=next_story,
-            inputs=[state_index_hot_sun, gr.State(value=the_hot_sun_story)],
-            outputs=[state_index_hot_sun, story_text_hot_sun, story_image_hot_sun, audio_output_hot_sun, state_text_hot_sun]
-        )
-    
-        play_button_hot_sun.click(
-            fn=play_story,
-            inputs=[state_text_hot_sun],
-            outputs=[audio_output_hot_sun]
-        )
-
+   with gr.Tabs():
+        for story_name, story_data in [("Short Vowel", short_vowel_stories),
+                                       ("Long Vowel", long_vowel_stories),
+                                       ("Blends & Digraphs", blends_digraphs_stories),
+                                       ("The Red Ball", the_red_ball_story),
+                                       ("The Big Cat", the_big_cat_story),
+                                       ("The Hot Sun", the_hot_sun_story)]:
+            with gr.TabItem(story_name):
+                state_index = gr.State(value=0)
+                state_text = gr.State(value=story_data[0]["text"])
+                
+                story_text = gr.HTML(value=f"<div class='story-text'>{story_data[0]['text']}</div>")
+                story_image = gr.Image(value=story_data[0]["image"], width=300, height=300)
+                audio_output = gr.Audio(value=generate_audio(story_data[0]["text"]), autoplay=False)
+                
+                with gr.Row():
+                    next_button = gr.Button("👉 다음 이야기", elem_classes=["btn-custom", "next-btn"])
+                    play_button = gr.Button("🔊 다시 듣기", elem_classes=["btn-custom", "play-btn"])
+                
+                next_button.click(
+                    fn=next_story,
+                    inputs=[state_index, gr.State(value=story_data)],
+                    outputs=[state_index, story_text, story_image, audio_output, state_text]
+                )
+                play_button.click(
+                    fn=play_story,
+                    inputs=[state_text],
+                    outputs=[audio_output]
+                )
 # 📌 앱 실행
 demo.launch()