Spaces:
Runtime error
Runtime error
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() | |