Update app.py

app.py

@@ -3,10 +3,11 @@ import streamlit as st
 import requests
 import json
 from PIL import Image
-import matplotlib.pyplot as plt
-import numpy as np
 from io import BytesIO
 
+# Set page configuration
+st.set_page_config(page_title="multilingual-storyteller", layout="wide")
+
 # Load tokens from environment variables
 HUGGINGFACE_TOKEN = os.getenv("HUGGINGFACE_TOKEN")
 GROQ_TOKEN = os.getenv("GROQ_TOKEN")
@@ -56,42 +57,157 @@ def generate_text(prompt, max_tokens, temperature):
 
 # Process input data
 def process_input(tamil_text, max_tokens, temperature):
-    english_text = translate_tamil_to_english(tamil_text)
-    image = generate_image(english_text)
-    generated_story = generate_text(english_text, max_tokens, temperature)
+    with st.spinner("Translating and generating content..."):
+        english_text = translate_tamil_to_english(tamil_text)
+        image = generate_image(english_text)
+        generated_story = generate_text(english_text, max_tokens, temperature)
     return english_text, image, generated_story
 
-# Streamlit UI
-st.markdown("<h1 style='text-align: center;'>multilingual-storyteller</h1>", unsafe_allow_html=True)
+# Style for title with animated gradient
+st.markdown(""" 
+    <style>
+    @keyframes gradient {
+        0% {background-position: 0% 50%;}
+        50% {background-position: 100% 50%;}
+        100% {background-position: 0% 50%;}
+    }
+    .title {
+        font-size: 60px;
+        color: white;
+        text-align: center;
+        background: linear-gradient(-45deg, #ff9966, #ff5e62, #ff9966, #ff5e62);
+        background-size: 400% 400%;
+        animation: gradient 10s ease infinite;
+        padding: 20px;
+        border-radius: 12px;
+        box-shadow: 0px 4px 15px rgba(0, 0, 0, 0.3);
+        margin-bottom: 20px;  /* Space below the title */
+    }
+    </style>
+    """, unsafe_allow_html=True)
+
+# Main Title
+st.markdown("<h1 class='title'>multilingual-storyteller</h1>", unsafe_allow_html=True)
+
+# Sidebar Styling
+st.markdown("""
+    <style>
+    .sidebar .sidebar-content {
+        background-color: #2c3e50;
+        color: white;
+        text-align: center;  /* Center text in sidebar */
+    }
+    .sidebar .stTextArea, .sidebar .stSlider {
+        width: 100%;  /* Full width for sidebar elements */
+    }
+    .sidebar .stButton > button {
+        display: block;  /* Center buttons */
+        margin: 0 auto;  /* Center buttons */
+    }
+    </style>
+    """, unsafe_allow_html=True)
 
 st.sidebar.header("Settings")
-tamil_text_input = st.sidebar.text_area("Enter Tamil Text")
-max_tokens_input = st.sidebar.slider("Max Tokens", min_value=50, max_value=200, value=100, step=10)
-temperature_input = st.sidebar.slider("Temperature", min_value=0.0, max_value=1.0, value=0.7, step=0.1)
 
+# Sidebar input elements
+tamil_text_input = st.sidebar.text_area("Enter Tamil Text", help="Paste or type the Tamil text to translate and generate a story.")
+max_tokens_input = st.sidebar.slider("Max Tokens", min_value=50, max_value=200, value=100, step=10, help="Controls the length of the generated story.")
+temperature_input = st.sidebar.slider("Temperature", min_value=0.0, max_value=1.0, value=0.7, step=0.1, help="Controls the randomness of the generated story.")
+
+# Initialize the session state for instructions
+if "show_instructions" not in st.session_state:
+    st.session_state.show_instructions = False
+
+# How to Use Button
+if st.sidebar.button("How to Use"):
+    st.session_state.show_instructions = not st.session_state.show_instructions
+
+# Show instructions if toggled on
+if st.session_state.show_instructions:
+    st.sidebar.info(
+        """
+        **Instructions:**
+        1. Enter the Tamil text you want to translate in the text area.
+        2. Adjust the **Max Tokens** slider to set the desired length of the generated story.
+        3. Use the **Temperature** slider to control the creativity of the generated output.
+        4. Click the **Submit** button to get the translated text and generated story along with an image.
+        5. Review the outputs displayed in the main area.
+        """
+    )
+
+# Display progress bar
+progress_bar = st.sidebar.progress(0)
+
+# Submit Button
 if st.sidebar.button("Submit"):
+    progress_bar.progress(20)  # Start progress
     english_text, image, generated_story = process_input(tamil_text_input, max_tokens_input, temperature_input)
+    progress_bar.progress(100)  # Complete progress
 
-    st.subheader("Translated English Text")
-    st.write(english_text)
+    # Notify the user that the process was successful
+    st.sidebar.success("Translation and generation complete!")
 
-    st.subheader("Generated Image")
-    if isinstance(image, Image.Image):
-        plt.imshow(np.array(image))
-        plt.axis('off')
-        st.pyplot(plt)
-    else:
-        st.error(image)
+    # Layout with 2 columns
+    col1, col2 = st.columns([1, 2])
 
-    st.subheader("Generated Story")
-    st.write(generated_story)
+    # Column 1: Translated and Generated Text
+    with col1:
+        st.markdown(f"""
+        <div style="border: 2px solid #ff9966; padding: 15px; border-radius: 10px; background-color: #ffffff;">
+        <h3 style="color: #ff5e62;">Translated English Text</h3>
+        <p style="padding: 10px; background-color: #f9f9f9; border-radius: 10px;">{english_text}</p>
+        </div>
+        """, unsafe_allow_html=True)
 
-# Guide section
-if st.sidebar.button("How to Use"):
-    st.sidebar.write(""" 
-    ### How to Use This App 
-    1. **Enter Tamil Text**: Type or paste the Tamil text you want to translate. 
-    2. **Adjust Settings**: Use the sliders to set the maximum tokens for text generation and the temperature for creativity. 
-    3. **Submit**: Click the Submit button to generate translations, images, and stories. 
-    4. **View Results**: Check the translated text, generated image, and story in the main area. 
-    """)
+        st.markdown(f"""
+        <div style="border: 2px solid #ff9966; padding: 15px; margin-top: 20px; border-radius: 10px; background-color: #ffffff;">
+        <h3 style="color: #ff5e62;">Generated Story</h3>
+        <p style="padding: 10px; background-color: #f9f9f9; border-radius: 10px;">{generated_story}</p>
+        </div>
+        """, unsafe_allow_html=True)
+
+    # Column 2: Generated Image
+    with col2:
+        st.subheader("Generated Image")
+        if isinstance(image, Image.Image):
+            st.image(image, caption="Generated from your prompt", use_column_width=True, output_format="JPEG")
+        else:
+            st.error(image)
+
+# Sidebar Tips
+st.sidebar.markdown("### Tips for Best Results:")
+st.sidebar.markdown("""
+    - Keep **Max Tokens** between 50-150 for concise stories.
+    - Use **Temperature** around 0.7 for creative but coherent outputs.
+    - Longer text inputs generate more detailed stories.
+""")
+
+# Footer Section
+st.markdown("""
+    <style>
+    .footer {
+        position: fixed;
+        bottom: 0;
+        width: 100%;
+        background-color: #2c3e50;
+        color: white;
+        text-align: center;
+        padding: 10px;
+        border-top: 2px solid #ff5e62;
+    }
+    </style>
+    <div class="footer">
+        Made with ❤️ by YASH | Contact: yashwantmanish@gmail.com
+    </div>
+    """, unsafe_allow_html=True)
+
+# Add animation to buttons
+st.markdown("""
+    <style>
+    .stButton > button:hover {
+        background-color: #ff5e62;
+        color: white;
+        transition: background-color 0.3s ease, color 0.3s ease;
+    }
+    </style>
+""", unsafe_allow_html=True)