Update app.py

app.py

@@ -30,7 +30,14 @@ def generate_audio(text, filename="story.mp3"):
 # 스토리 텍스트를 HTML 스타일로 크게 표시하고 중앙 정렬하는 함수
 def format_story_text(text):
     return f"""
-    <div style='font-size:4em; font-weight:bold; text-align:center; margin: 20px 0;'>
+    <div style='
+        font-size:4em;
+        font-weight:bold;
+        text-align:center;
+        color:#FF4500;
+        font-family:sans-serif;
+        margin: 20px 0;
+    '>
         {text}
     </div>
     """
@@ -62,11 +69,15 @@ def play_story(current_text):
 init_index, init_text, init_image, init_audio = init_story()
 
 # Gradio 인터페이스 구성
-with gr.Blocks(title="스토리 앱") as demo:
-    gr.Markdown("## 📖 스토리 앱", elem_id="title", style="text-align:center;")
+with gr.Blocks(title="📚 귀여운 스토리 앱") as demo:
     gr.Markdown(
-        "<div style='text-align:center;'>아래의 스토리를 확인하세요. <br> **다음** 버튼을 눌러 스토리를 순서대로 볼 수 있으며, 음성이 자동 재생됩니다. "
-        "<br> 음성을 다시 듣고 싶으면 **재생** 버튼을 눌러주세요.</div>",
+        "<div style='text-align:center; font-size:2em; font-weight:bold;'>🎈 재미있는 영어 스토리 타임! 📖</div>",
+        unsafe_allow_html=True
+    )
+    
+    gr.Markdown(
+        "<div style='text-align:center; font-size:1.2em;'>🐱 귀여운 이야기와 함께 영어를 배워보아요! <br> "
+        "버튼을 눌러 다음 이야기로 넘어가고, 음성을 들으며 따라 읽어보세요! 🎵</div>",
         unsafe_allow_html=True
     )
 
@@ -76,12 +87,17 @@ with gr.Blocks(title="스토리 앱") as demo:
 
     # 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)
-    audio_output = gr.Audio(value=init_audio, label="음성 재생", type="filepath", autoplay=True)
+
+    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("다음")
-        play_button = gr.Button("재생")
+        next_button = gr.Button("👉 다음 이야기", elem_id="next-btn")
+        play_button = gr.Button("🔊 다시 듣기", elem_id="play-btn")
 
     # "다음" 버튼 클릭 이벤트 처리
     next_button.click(
@@ -97,5 +113,33 @@ with gr.Blocks(title="스토리 앱") as demo:
         outputs=[audio_output]
     )
 
+# CSS 스타일 추가 (귀여운 테마)
+demo.css = """
+body {
+    background-color: #FFFAF0; /* 따뜻한 크림색 배경 */
+}
+
+#next-btn {
+    background-color: #FFD700; /* 노란색 버튼 */
+    font-size: 1.5em;
+    font-weight: bold;
+    border-radius: 20px;
+    padding: 10px;
+}
+
+#play-btn {
+    background-color: #90EE90; /* 연한 초록색 버튼 */
+    font-size: 1.5em;
+    font-weight: bold;
+    border-radius: 20px;
+    padding: 10px;
+}
+
+img {
+    border-radius: 10px; /* 둥근 테두리 */
+    border: 5px solid #FFFFFF; /* 흰색 테두리 */
+}
+"""
+
 # 앱 실행
 demo.launch()