app.py

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

# 생성된 오디오 파일을 재사용하기 위한 캐시 딕셔너리
cached_audio = {}

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

# 📌 "The Red Ball" 스토리 데이터
the_red_ball_story = [
    {"text": "Tom has a red ball. He throws the ball up. The ball goes high. Then it falls down!", "image": f"{image_base_url}39.webp"}
]

# 📌 "The Big Cat" 스토리 데이터
the_big_cat_story = [
    {"text": "The cat is big. It jumps on the mat. The mat is soft. The cat takes a nap.", "image": f"{image_base_url}40.webp"}
]

# 📌 "The Hot Sun" 스토리 데이터
the_hot_sun_story = [
    {"text": "The sun is hot. I wear my hat. I drink some water. Now I feel cool!", "image": f"{image_base_url}41.webp"}
]

# 📌 gTTS를 이용해 오디오 파일을 생성하거나, 이미 있으면 재사용
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

        # API 요청 제한을 피하기 위해 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_html = f"<div class='story-text'>{story['text']}</div>"
    image = story["image"]
    audio_file = generate_audio(story["text"])
    return new_index, text_html, image, audio_file, story["text"]

# 📌 "재생" 버튼 클릭 시 호출되는 함수
def play_story(current_text):
    return generate_audio(current_text)

# 📌 초기 값 설정
init_index_short = 0
init_text_short = short_vowel_stories[0]["text"]
init_image_short = short_vowel_stories[0]["image"]
init_audio_short = generate_audio(init_text_short)

init_index_long = 0
init_text_long = long_vowel_stories[0]["text"]
init_image_long = long_vowel_stories[0]["image"]
init_audio_long = generate_audio(init_text_long)

init_index_blends = 0
init_text_blends = blends_digraphs_stories[0]["text"]
init_image_blends = blends_digraphs_stories[0]["image"]
init_audio_blends = generate_audio(init_text_blends)

the_red_ball_index = 0
the_red_ball_text = the_red_ball_story[0]["text"]
the_red_ball_image = the_red_ball_story[0]["image"]
the_red_ball_audio = generate_audio(the_red_ball_text)

the_big_cat_index = 0
the_big_cat_text = the_big_cat_story[0]["text"]
the_big_cat_image = the_big_cat_story[0]["image"]
the_big_cat_audio = generate_audio(the_big_cat_text)

the_hot_sun_index = 0
the_hot_sun_text = the_hot_sun_story[0]["text"]
the_hot_sun_image = the_hot_sun_story[0]["image"]
the_hot_sun_audio = generate_audio(the_hot_sun_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;
    }
    </style>
    """)

    gr.HTML("<h1>🎈 재미있는 영어 스토리 타임! 📖</h1>")
    gr.HTML("<p>🐱 귀여운 이야기와 함께 영어를 배워보아요! <br> 버튼을 눌러 다음 이야기로 넘어가고, 음성을 들으며 따라 읽어보세요! 🎵</p>")

   # 📌 단모음(Short Vowel) 스토리 데이터
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"}
]

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

# 📌 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"}
]

# 📌 "The Red Ball" 스토리 데이터
the_red_ball_story = [
    {"text": "Tom has a red ball. He throws the ball up. The ball goes high. Then it falls down!", "image": f"{image_base_url}39.webp"}
]

# 📌 "The Big Cat" 스토리 데이터
the_big_cat_story = [
    {"text": "The cat is big. It jumps on the mat. The mat is soft. The cat takes a nap.", "image": f"{image_base_url}40.webp"}
]

# 📌 "The Hot Sun" 스토리 데이터
the_hot_sun_story = [
    {"text": "The sun is hot. I wear my hat. I drink some water. Now I feel cool!", "image": f"{image_base_url}41.webp"}
]

# 📌 초기 값 설정
init_index_short = 0
init_text_short = short_vowel_stories[0]["text"]
init_image_short = short_vowel_stories[0]["image"]
init_audio_short = generate_audio(init_text_short)

init_index_long = 0
init_text_long = long_vowel_stories[0]["text"]
init_image_long = long_vowel_stories[0]["image"]
init_audio_long = generate_audio(init_text_long)

init_index_blends = 0
init_text_blends = blends_digraphs_stories[0]["text"]
init_image_blends = blends_digraphs_stories[0]["image"]
init_audio_blends = generate_audio(init_text_blends)

# 📌 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;
    }
    </style>
    """)

    gr.HTML("<h1>🎈 재미있는 영어 스토리 타임! 📖</h1>")
    gr.HTML("<p>🐱 귀여운 이야기와 함께 영어를 배워보아요! 🎵</p>")

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