Update app.py

app.py

@@ -104,7 +104,7 @@ st.markdown("""
 }
 .stButton>button {
     background-color: #ffcccb;
-    color: #000000; /* Black text */
+    color: #000000;
     border-radius: 10px;
     border: 2px solid #ff9999;
     font-size: 18px;
@@ -114,38 +114,36 @@ st.markdown("""
 }
 .stButton>button:hover {
     background-color: #ff9999;
-    color: #ffffff; /* White text on hover for contrast */
+    color: #ffffff;
     transform: scale(1.05);
 }
 .stFileUploader {
-    background-color: #ffb300; /* Darker yellow for better contrast with white label text */
-    border: 2px dashed #ff8c00; /* Darker orange border to match */
+    background-color: #ffb300;
+    border: 2px dashed #ff8c00;
     border-radius: 10px;
     padding: 10px;
 }
-/* Style for the file uploader's inner text */
 .stFileUploader div[role="button"] {
-    background-color: #f0f0f0; /* Very light gray background for contrast with black text */
+    background-color: #f0f0f0;
     border-radius: 10px;
     padding: 10px;
 }
 .stFileUploader div[role="button"] > div {
-    color: #000000 !important; /* Black text */
+    color: #000000 !important;
     font-size: 16px;
 }
-/* Style for the "Browse files" button inside the file uploader */
 .stFileUploader button {
-    background-color: #ffca28 !important; /* Yellow button background */
-    color: #000000 !important; /* Black text */
+    background-color: #ffca28 !important;
+    color: #000000 !important;
     border-radius: 8px !important;
-    border: 2px solid #ffb300 !important; /* Match the container background */
+    border: 2px solid #ffb300 !important;
     padding: 5px 15px !important;
     font-weight: bold !important;
-    box-shadow: 0 2px 4px rgba(0,0,0,0.2) !important; /* Subtle shadow to make button stand out */
+    box-shadow: 0 2px 4px rgba(0,0,0,0.2) !important;
 }
 .stFileUploader button:hover {
-    background-color: #ff8c00 !important; /* Slightly darker yellow on hover */
-    color: #000000 !important; /* Keep black text */
+    background-color: #ff8c00 !important;
+    color: #000000 !important;
 }
 .stImage {
     border: 3px solid #81c784;
@@ -159,7 +157,7 @@ st.markdown("""
     text-align: center;
     font-size: 24px;
     font-weight: bold;
-    color: #000000; /* Black text */
+    color: #000000;
     margin-bottom: 10px;
 }
 .caption-box, .story-box {
@@ -168,10 +166,13 @@ st.markdown("""
     border-radius: 10px;
     border: 2px solid #d4e157;
     margin-bottom: 20px;
-    color: #000000; /* Black text */
+    color: #000000;
 }
 .caption-box b, .story-box b {
-    color: #000000; /* Black text for bold headers */
+    color: #000000;
+}
+.stProgress > div > div {
+    background-color: #81c784;
 }
 </style>
 """, unsafe_allow_html=True)
@@ -194,23 +195,38 @@ with st.spinner("Looking at your picture..."):
 
 # Caption section
 with st.container():
+    st.markdown("<div class='section-header'>2️⃣ What's in the Picture? 🧐</div>", unsafe_allow_html=True)
     captioner = get_image_captioner()
+    progress_bar = st.progress(0)
     with st.spinner("Figuring out what's in your picture..."):
-        caption = part1_image_to_text(pil_img, captioner)
-    st.markdown(f"<div class='caption-box'><b>What's in the Picture? 🧐</b><br>{caption}</div>", unsafe_allow_html=True)
+        for i in range(100):
+            progress_bar.progress(i + 1)
+            if i == 99:
+                caption = part1_image_to_text(pil_img, captioner)
+    progress_bar.empty()
+    st.markdown(f"<div class='caption-box'><b>Picture Description:</b><br>{caption}</div>", unsafe_allow_html=True)
 
 # Story and audio section
 with st.container():
-    st.markdown("<div class='section-header'>2️⃣ Make a Story and Hear It! 🎵</div>", unsafe_allow_html=True)
-    if st.button("Create My Story! 🎉"):
-        # Story
-        story_pipe = get_story_pipe()
-        with st.spinner("Writing a super cool story..."):
-            story = part2_text_to_story(caption, story_pipe)
-        st.markdown(f"<div class='story-box'><b>Your Cool Story! 📚</b><br>{story}</div>", unsafe_allow_html=True)
+    st.markdown("<div class='section-header'>3️⃣ Your Story and Audio! 🎵</div>", unsafe_allow_html=True)
+    # Story
+    story_pipe = get_story_pipe()
+    progress_bar = st.progress(0)
+    with st.spinner("Writing a super cool story..."):
+        for i in range(100):
+            progress_bar.progress(i + 1)
+            if i == 99:
+                story = part2_text_to_story(caption, story_pipe)
+    progress_bar.empty()
+    st.markdown(f"<div class='story-box'><b>Your Cool Story! 📚</b><br>{story}</div>", unsafe_allow_html=True)
 
-        # TTS
-        tts_pipe = get_tts_pipe()
-        with st.spinner("Turning your story into sound..."):
-            audio_bytes = part3_text_to_speech_bytes(story, tts_pipe)
-            st.audio(audio_bytes, format="audio/wav")
+    # TTS
+    tts_pipe = get_tts_pipe()
+    progress_bar = st.progress(0)
+    with st.spinner("Turning your story into sound..."):
+        for i in range(100):
+            progress_bar.progress(i + 1)
+            if i == 99:
+                audio_bytes = part3_text_to_speech_bytes(story, tts_pipe)
+    progress_bar.empty()
+    st.audio(audio_bytes, format="audio/wav")