Update app.py

app.py

@@ -7,6 +7,7 @@ from gtts import gTTS
 import os
 import io
 
+
 # function part
 # img2text
 def img2text(url):
@@ -14,24 +15,26 @@ def img2text(url):
     text = image_to_text_model(url)[0]["generated_text"]
     return text
 
+
 # text2story
 def text2story(text):
     # Initialize the text generation pipeline
     generator = pipeline('text-generation', model='gpt2')
-    
+
     # Create a prompt for the story
     prompt = f"Create a short story about this scene: {text}\n\nStory:"
-    
+
     # Generate the story
-    story = generator(prompt, 
-                     max_length=150, 
-                     num_return_sequences=1,
-                     temperature=0.7)[0]['generated_text']
-    
+    story = generator(prompt,
+                      max_length=100,
+                      num_return_sequences=1,
+                      temperature=0.7)[0]['generated_text']
+
     # Clean up the story by removing the prompt
     story = story.replace(prompt, "").strip()
     return story
 
+
 def text2audio(text):
     try:
         # Create a gTTS object
@@ -40,7 +43,7 @@ def text2audio(text):
         audio_bytes = io.BytesIO()
         tts.write_to_fp(audio_bytes)
         audio_bytes.seek(0)  # Reset the pointer to the start
-        
+
         return {
             'audio': audio_bytes,
             'sampling_rate': 24000  # gTTS default sampling rate
@@ -49,43 +52,282 @@ def text2audio(text):
         st.error(f"Error in audio generation: {str(e)}")
         return None
 
-st.set_page_config(page_title="Your Image to Audio Story",
-                   page_icon="🦜")
-st.header("Turn Your Image to Audio Story")
-uploaded_file = st.file_uploader("Select an Image...")
+
+# Apply custom CSS for kid-friendly UI
+st.set_page_config(page_title="Magic Picture Storyteller", page_icon="🧙‍♂️")
+
+st.markdown("""
+<style>
+  /* Colorful, rounded child-friendly design */
+  @import url('https://fonts.googleapis.com/css2?family=Comic+Neue:wght@700&display=swap');
+
+  .stApp {
+    background: linear-gradient(135deg, #ffcce6, #b3ecff);
+    font-family: 'Comic Neue', cursive;
+  }
+
+  h1 {
+    color: #6a3e8c;
+    font-size: 2.5rem;
+    text-align: center;
+    text-shadow: 2px 2px 4px rgba(0,0,0,0.1);
+    background: rgba(255,255,255,0.7);
+    padding: 15px;
+    border-radius: 20px;
+    margin-bottom: 20px;
+    border: 3px dashed #ff9933;
+  }
+
+  .uploadfile {
+    background: rgba(255,255,255,0.7);
+    padding: 20px;
+    border-radius: 20px;
+    border: 3px solid #ff6b6b;
+    margin-bottom: 20px;
+  }
+
+  .stButton > button {
+    background-color: #6adb9d;
+    color: white;
+    font-size: 1.5rem;
+    border-radius: 30px;
+    padding: 10px 25px;
+    font-family: 'Comic Neue', cursive;
+    font-weight: bold;
+    border: none;
+    box-shadow: 0 4px 0 #489d73;
+    transition: all 0.2s;
+  }
+
+  .stButton > button:hover {
+    background-color: #5bc28d;
+    transform: translateY(2px);
+    box-shadow: 0 2px 0 #489d73;
+  }
+
+  .stButton > button:active {
+    transform: translateY(4px);
+    box-shadow: none;
+  }
+
+  .output-box {
+    background: rgba(255, 255, 255, 0.8);
+    padding: 15px;
+    border-radius: 20px;
+    margin: 15px 0;
+    border: 3px solid #7678ed;
+  }
+
+  .step-title {
+    background-color: #ff9e7d;
+    color: white;
+    padding: 8px 15px;
+    border-radius: 15px;
+    font-size: 1.2rem;
+    margin-bottom: 10px;
+    display: inline-block;
+  }
+
+  .story-text {
+    font-size: 1.3rem;
+    line-height: 1.6;
+    color: #333;
+  }
+
+  /* Custom file uploader */
+  .stFileUploader > div > div {
+    background: #ffea8c;
+    border: 2px dashed #ffaa44;
+    border-radius: 20px;
+    padding: 10px;
+  }
+
+  /* Audio player styling */
+  audio {
+    width: 100%;
+    border-radius: 30px;
+    background: #ffcc66;
+  }
+
+  /* Loading animation */
+  .loading {
+    display: flex;
+    justify-content: center;
+    margin: 15px 0;
+  }
+
+  .loading div {
+    width: 20px;
+    height: 20px;
+    background-color: #ff6b6b;
+    border-radius: 50%;
+    margin: 0 5px;
+    animation: bounce 0.8s infinite alternate;
+  }
+
+  .loading div:nth-child(2) {
+    animation-delay: 0.2s;
+    background-color: #ffcc66;
+  }
+
+  .loading div:nth-child(3) {
+    animation-delay: 0.4s;
+    background-color: #7678ed;
+  }
+
+  @keyframes bounce {
+    from { transform: translateY(0); }
+    to { transform: translateY(-15px); }
+  }
+
+  /* Fun floating animation for welcome screen */
+  @keyframes float {
+    0% { transform: translateY(0); }
+    50% { transform: translateY(-10px); }
+    100% { transform: translateY(0); }
+  }
+
+  .float-animation {
+    animation: float 3s infinite ease-in-out;
+  }
+
+  /* Title styling with icons */
+  .app-title {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 10px;
+  }
+
+  .app-title img {
+    height: 40px;
+  }
+
+  /* Speech bubble styling */
+  .speech-bubble {
+    position: relative;
+    background: #ffffff;
+    border-radius: 20px;
+    padding: 15px;
+    margin: 20px 0;
+    border: 3px solid #ff9e7d;
+  }
+
+  .speech-bubble:after {
+    content: '';
+    position: absolute;
+    bottom: 0;
+    left: 30px;
+    width: 0;
+    height: 0;
+    border: 15px solid transparent;
+    border-top-color: #ffffff;
+    border-bottom: 0;
+    margin-left: -15px;
+    margin-bottom: -15px;
+  }
+
+  /* Fun emoji decorations */
+  .emoji-decoration {
+    font-size: 2rem;
+    margin: 0 5px;
+    display: inline-block;
+    animation: wiggle 2s infinite;
+  }
+
+  @keyframes wiggle {
+    0%, 100% { transform: rotate(-5deg); }
+    50% { transform: rotate(5deg); }
+  }
+</style>
+""", unsafe_allow_html=True)
+
+# App header with kid-friendly design
+st.markdown(
+    "<h1><span class='emoji-decoration'>🧙‍♂️</span> Magic Picture Storyteller <span class='emoji-decoration'>🎨</span></h1>",
+    unsafe_allow_html=True)
+
+# File uploader with kid-friendly styling
+st.markdown("<h3>📷 Let's pick a picture!</h3>", unsafe_allow_html=True)
+uploaded_file = st.file_uploader("Choose a fun picture...", key="upload")
 
 if uploaded_file is not None:
-    print(uploaded_file)
     bytes_data = uploaded_file.getvalue()
     with open(uploaded_file.name, "wb") as file:
         file.write(bytes_data)
-    st.image(uploaded_file, caption="Uploaded Image",
-             use_column_width=True)
 
-    #Stage 1: Image to Text
-    st.text('Processing img2text...')
+    st.image(uploaded_file, caption="Your magical picture!", use_column_width=True)
+
+    # Stage 1: Image to Text
+    st.markdown("<div class='step-title'>🔍 Finding the magic in your picture...</div>", unsafe_allow_html=True)
+
+    # Add loading animation
+    st.markdown("""
+    <div class="loading">
+        <div></div>
+        <div></div>
+        <div></div>
+    </div>
+    """, unsafe_allow_html=True)
+
     scenario = img2text(uploaded_file.name)
-    st.write(scenario)
+    st.markdown(f"<p class='story-text'>{scenario}</p>", unsafe_allow_html=True)
+
+    # Stage 2: Text to Story
+    st.markdown("<div class='step-title'>📝 Creating a magical story...</div>", unsafe_allow_html=True)
+
+    # Add loading animation
+    st.markdown("""
+    <div class="loading">
+        <div></div>
+        <div></div>
+        <div></div>
+    </div>
+    """, unsafe_allow_html=True)
 
-    #Stage 2: Text to Story
-    st.text('Generating a story...')
     story = text2story(scenario)
-    st.write(story)
+    st.markdown(f"<p class='story-text'>{story}</p>", unsafe_allow_html=True)
+
+    # Stage 3: Story to Audio data
+    st.markdown("<div class='step-title'>🔊 Let's hear the story!</div>", unsafe_allow_html=True)
+
+    # Add loading animation
+    st.markdown("""
+    <div class="loading">
+        <div></div>
+        <div></div>
+        <div></div>
+    </div>
+    """, unsafe_allow_html=True)
 
-    #Stage 3: Story to Audio data
-    st.text('Generating audio data...')
     audio_data = text2audio(story)
 
-    # Play button
-    if st.button("Play Audio"):
+    # Play button with kid-friendly design
+    if st.button("🔊 Play My Story!"):
         if audio_data:
             st.audio(audio_data['audio'],
-                    format="audio/wav",
-                    start_time=0,
-                    sample_rate=audio_data['sampling_rate'])
+                     format="audio/wav",
+                     start_time=0,
+                     sample_rate=audio_data['sampling_rate'])
         else:
-            st.error("Failed to generate audio")
+            st.error("Oops! The magical voice got lost!")
+
 
     # Cleanup: Remove the temporary file
     if os.path.exists(uploaded_file.name):
-        os.remove(uploaded_file.name)
+        os.remove(uploaded_file.name)
+else:
+    # Fun welcome screen for kids
+    st.markdown("""
+    <div style="text-align: center; padding: 30px;" class="float-animation">
+        <div style="font-size: 80px; margin-bottom: 20px;">🧙‍♂️</div>
+        <h2 style="color: #6a3e8c;">Pick a picture to start the magic!</h2>
+        <p style="font-size: 1.2rem;">The wizard is waiting to tell you a story!</p>
+        <div style="margin-top: 30px;">
+            <span class="emoji-decoration">🌈</span>
+            <span class="emoji-decoration">⭐</span>
+            <span class="emoji-decoration">🦄</span>
+            <span class="emoji-decoration">🎭</span>
+        </div>
+    </div>
+    """, unsafe_allow_html=True)