app.py

import os
import time
import gradio as gr
from gtts import gTTS
import hashlib  # 🎵 파일명을 고유하게 하기 위해 추가

# 📌 단모음(Short Vowel) 스토리 데이터 (텍스트 + 이미지 URL 포함)
image_base_url = "https://huggingface.co/spaces/englissi/englishstories/resolve/main/image/"

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"},
    {"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"}
]

# 📌 장모음(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"}
]

# 📌 Blends & Digraphs 스토리 데이터
blends_digraphs_stories = [
    {"text": "Blake blows a blue blimp.", "image": f"{image_base_url}21.webp"},
    {"text": "Brad brings a brown brush.", "image": f"{image_base_url}22.webp"},
    {"text": "The clock clicks and claps.", "image": f"{image_base_url}23.webp"},
    {"text": "Crispy crackers crunch.", "image": f"{image_base_url}24.webp"},
    {"text": "A frog frogs on a free log.", "image": f"{image_base_url}25.webp"},
    {"text": "Green grapes grow big.", "image": f"{image_base_url}26.webp"},
    {"text": "The train trips on tracks.", "image": f"{image_base_url}27.webp"},
    {"text": "The ship shines in the sun.", "image": f"{image_base_url}28.webp"},
    {"text": "Chip and cheese are on my chin.", "image": f"{image_base_url}29.webp"},
    {"text": "The thumb is thick.", "image": f"{image_base_url}30.webp"},
    {"text": "White whales whisper.", "image": f"{image_base_url}31.webp"},
    {"text": "A skunk skips sky-high.", "image": f"{image_base_url}32.webp"},
    {"text": "The sleepy sloth slides.", "image": f"{image_base_url}33.webp"},
    {"text": "Small smiles smell sweet.", "image": f"{image_base_url}34.webp"},
    {"text": "The snail snaps a snack.", "image": f"{image_base_url}35.webp"},
    {"text": "The spider spins a spotty web.", "image": f"{image_base_url}36.webp"},
    {"text": "The star stands in the storm.", "image": f"{image_base_url}37.webp"},
    {"text": "A swan swims in the sweet lake.", "image": f"{image_base_url}38.webp"}
]

def generate_audio(text):
    try:
        # 이미 생성된 음성이 있으면 재사용 (429 오류 방지)
        if text in cached_audio:
            return cached_audio[text]

        # 고유한 파일명 생성 (해시 앞 10자리 사용)
        hash_key = hashlib.md5(text.encode()).hexdigest()[:10]
        filename = f"audio_{hash_key}.mp3"

        # gTTS를 사용하여 음성 생성
        tts = gTTS(text=text, lang="en")
        tts.save(filename)

        # 절대 경로로 변환
        abs_filename = os.path.abspath(filename)
        print(f"✅ 음성 파일 생성 완료: {abs_filename}")
        
        # 생성된 파일 캐싱
        cached_audio[text] = abs_filename

        # 요청 제한을 피하기 위해 1.5초 대기
        time.sleep(1.5)

        return abs_filename
    except Exception as e:
        print(f"⚠️ 음성 생성 실패: {e}")
        return None


# 📌 "다음" 버튼 클릭 시 호출되는 함수 (HTML 포함)
def next_story(current_index, story_list):
    new_index = (current_index + 1) % len(story_list)
    story = story_list[new_index]
    text = f"<div class='story-text'>{story['text']}</div>"
    image = story["image"]
    audio_file = generate_audio(story["text"])
    return new_index, text, image, audio_file, story["text"]

# 📌 "재생" 버튼 클릭 시 호출되는 함수 (Gradio 최신 버전에 맞게 수정)
def play_story(current_text):
    return generate_audio(current_text)

# 📌 초기 데이터 설정
init_index_short, init_text_short, init_image_short, init_audio_short = 0, short_vowel_stories[0]["text"], short_vowel_stories[0]["image"], generate_audio(short_vowel_stories[0]["text"])
init_index_long, init_text_long, init_image_long, init_audio_long = 0, long_vowel_stories[0]["text"], long_vowel_stories[0]["image"], generate_audio(long_vowel_stories[0]["text"])
init_index_blends, init_text_blends, init_image_blends, init_audio_blends = 0, blends_digraphs_stories[0]["text"], blends_digraphs_stories[0]["image"], generate_audio(blends_digraphs_stories[0]["text"])


# 📌 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: 2em;
        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; /* 연한 초록색 버튼 */
    }

    .story-image img {
        width: 300px !important;
        height: 300px !important;
        border-radius: 15px;
        border: 5px solid #FFFFFF;
        box-shadow: 4px 4px 10px rgba(0,0,0,0.2);
        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.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]
            )

        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]
            )

        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]
            )
# 📌 앱 실행
demo.launch()