app.py

import os
from gtts import gTTS
import gradio as gr

# 스토리 데이터 (텍스트 + 이미지 URL 포함)
image_base_url = "https://huggingface.co/spaces/englissi/englishstories/resolve/main/image/"
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"},
    {"text": "Ben has a red pen.", "image": f"{image_base_url}4.webp"},
    {"text": "He pets a hen in a den.", "image": f"{image_base_url}5.webp"},
    {"text": "Tim sits and grins.", "image": f"{image_base_url}6.webp"},
    {"text": "A big pig digs in the mud.", "image": f"{image_base_url}7.webp"},
    {"text": "Dot the dog jogs and hops.", "image": f"{image_base_url}8.webp"},
    {"text": "Gus the pup has a cup.", "image": f"{image_base_url}9.webp"},
    {"text": "Fun in the sun is the best!", "image": f"{image_base_url}10.webp"}
]

# 음성 파일 생성 함수 (gTTS 이용)
def generate_audio(text, filename="story.mp3"):
    try:
        repeated_text = " ".join([text] * 3)  # 3번 반복해서 읽기
        tts = gTTS(repeated_text, lang='en')
        tts.save(filename)
    except Exception as e:
        print("TTS 생성 오류:", e)
    return filename

# 스토리 텍스트를 HTML 스타일로 크게 표시하고 중앙 정렬하는 함수
def format_story_text(text):
    return f"""
    <div style='
        font-size:4em;
        font-weight:bold;
        text-align:center;
        color:#FF4500;
        font-family:sans-serif;
        margin: 20px 0;
    '>
        {text}
    </div>
    """

# 초기 스토리 로딩 함수
def init_story():
    index = 0
    story = stories[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]
    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()

# Gradio 인터페이스 구성
with gr.Blocks(title="📚 귀여운 스토리 앱") as demo:
    gr.Markdown(
        "<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
    )

    # 상태값: 현재 스토리 인덱스와 현재 스토리 텍스트 저장
    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]
    )

# 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()