# app.py ── Streamlit front-end for 3-10-year-olds
# Drop this file into your Hugging Face Space root.
import streamlit as st
from func import img2text, text2story, story2audio   # our back-end utilities

st.set_page_config(
    page_title="Magic Story Maker",
    page_icon="🧸",
    layout="centered"
)

# ------------- UI -------------
st.markdown(
    """
    <h1 style='text-align:center; color:#ff914d;'>🖼️ ➜ 📖 ➜ 🔊</h1>
    <h2 style='text-align:center; color:#ffcc00;'>Turn your picture into a talking story!</h2>
    """,
    unsafe_allow_html=True
)

uploaded = st.file_uploader(
    "🌟 **Choose a colourful picture (JPG / PNG)**",
    type=["jpg", "jpeg", "png"],
    accept_multiple_files=False
)

if uploaded:
    st.image(uploaded, caption="Nice choice!", use_column_width=True)

    with st.spinner("🌈 Looking at your picture..."):
        caption = img2text(uploaded)          # ① picture → caption
    st.success("Here's what I see:")
    st.markdown(f"> **_{caption}_**")

    with st.spinner("🪄 Writing a fun story..."):
        story = text2story(caption)            # ② caption → story
    st.success("Story ready! Read along below:")
    st.markdown(
    f"""
    <div style="
        padding:1rem;               /* comfy spacing             */
        border-radius:10px;         /* soft rounded corners      */
        font-size:20px;             /* kid-friendly large text   */
        line-height:1.6;            /* more breathing room       */
        color:#000000;              /* fixed dark font → visible on any theme */
    ">
        {story}
    </div>
    """,
    unsafe_allow_html=True
)

    with st.spinner("🎤 Recording the story..."):
        wav_path = story2audio(story)          # ③ story → audio
    st.audio(wav_path, format="audio/wav")
    st.balloons()

else:
    st.markdown(
        "<p style='text-align:center; font-size:18px;'>"
        "Upload a picture and let's make some magic!</p>",
        unsafe_allow_html=True
    )