Update app.py

app.py

@@ -83,18 +83,85 @@ init_index_long, init_text_long, init_image_long, init_audio_long = 0, long_vowe
 
 # 📌 Gradio UI 구성
 with gr.Blocks(title="📚 귀여운 스토리 앱") as demo:
+    gr.HTML("""
+    <style>
+    body {
+        background-color: #FFFAF0; /* 따뜻한 크림색 배경 */
+        font-family: 'Comic Sans MS', cursive, sans-serif;
+    }
+
+    h1 {
+        color: #FF6347;
+        text-align: center;
+        font-size: 3em;
+        font-weight: bold;
+        margin-top: 20px;
+    }
+
+    p {
+        text-align: center;
+        font-size: 1.2em;
+        color: #6B4226;
+    }
+
+    .story-text {
+        font-size: 4em;
+        font-weight: bold;
+        text-align: center;
+        color: #FF4500;
+        padding: 20px;
+        border-radius: 15px;
+        background: #FFF3E0;
+        display: inline-block;
+        box-shadow: 4px 4px 10px rgba(0,0,0,0.2);
+    }
+
+    .btn-custom {
+        font-size: 1.5em;
+        font-weight: bold;
+        border-radius: 20px;
+        padding: 10px 20px;
+        margin: 5px;
+        border: none;
+        cursor: pointer;
+        box-shadow: 3px 3px 8px rgba(0,0,0,0.2);
+    }
+
+    .next-btn {
+        background-color: #FFD700; /* 노란색 버튼 */
+    }
+
+    .play-btn {
+        background-color: #90EE90; /* 연한 초록색 버튼 */
+    }
+
+    img {
+        border-radius: 15px;
+        border: 5px solid #FFFFFF;
+        box-shadow: 4px 4px 10px rgba(0,0,0,0.2);
+        width: 400px;
+        height: 400px;
+        display: block;
+        margin: auto;
+    }
+    </style>
+    """)
+
+    gr.HTML("<h1>🎈 재미있는 영어 스토리 타임! 📖</h1>")
+    gr.HTML("<p>🐱 귀여운 이야기와 함께 영어를 배워보아요! <br> 버튼을 눌러 다음 이야기로 넘어가고, 음성을 들으며 따라 읽어보세요! 🎵</p>")
+
     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)
 
-            story_text_short = gr.Markdown(value=init_text_short)
-            story_image_short = gr.Image(value=init_image_short, width=400, height=400)
+            story_text_short = gr.Markdown(value=f"<div class='story-text'>{init_text_short}</div>")
+            story_image_short = gr.Image(value=init_image_short)
             audio_output_short = gr.Audio(value=init_audio_short, autoplay=True)
 
             with gr.Row():
-                next_button_short = gr.Button("👉 다음 이야기")
-                play_button_short = gr.Button("🔊 다시 듣기")
+                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,
@@ -112,13 +179,13 @@ with gr.Blocks(title="📚 귀여운 스토리 앱") as demo:
             state_index_long = gr.State(value=init_index_long)
             state_text_long = gr.State(value=init_text_long)
 
-            story_text_long = gr.Markdown(value=init_text_long)
-            story_image_long = gr.Image(value=init_image_long, width=400, height=400)
+            story_text_long = gr.Markdown(value=f"<div class='story-text'>{init_text_long}</div>")
+            story_image_long = gr.Image(value=init_image_long)
             audio_output_long = gr.Audio(value=init_audio_long, autoplay=False)
 
             with gr.Row():
-                next_button_long = gr.Button("👉 다음 이야기")
-                play_button_long = gr.Button("🔊 다시 듣기")
+                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,
@@ -132,6 +199,5 @@ with gr.Blocks(title="📚 귀여운 스토리 앱") as demo:
                 outputs=[audio_output_long]
             )
 
-
 # 📌 앱 실행
 demo.launch()