Update app.py

app.py

@@ -1,5 +1,6 @@
 import streamlit as st
 from transformers import MarianMTModel, MarianTokenizer
+from PIL import Image
 
 # Define available languages with MarianMT models
 LANGUAGES = {
@@ -13,9 +14,24 @@ LANGUAGES = {
     'Russian': 'ru',
     'Italian': 'it',
     'Portuguese': 'pt',
-    # Add more languages if needed
 }
 
+# Load a background image for the app
+def add_bg_image(image_path):
+    with open(image_path, "rb") as f:
+        data = f.read()
+    st.markdown(
+        f"""
+        <style>
+        .stApp {{
+            background-image: url(data:image/{"png"};base64,{data.encode("base64").decode()});
+            background-size: cover;
+        }}
+        </style>
+        """,
+        unsafe_allow_html=True
+    )
+
 # Function to load the model based on the selected language
 @st.cache_resource
 def load_model(src_lang='en', tgt_lang='es'):
@@ -31,27 +47,64 @@ def translate_text(model, tokenizer, text):
     translated_text = tokenizer.decode(translated[0], skip_special_tokens=True)
     return translated_text
 
-# Streamlit app
-st.title("Language Translator")
-st.write("Translate English text to any language using Hugging Face models.")
+# Load the background image
+add_bg_image("path_to_your_image.png")  # You need to provide your image
+
+# Streamlit app layout
+st.markdown("<h1 style='text-align: center; color: #4B9CD3;'>🌍 Multilingual Translator 🌍</h1>", unsafe_allow_html=True)
+st.markdown("<p style='text-align: center; color: #333; font-size: 18px;'>Translate English text into multiple languages</p>", unsafe_allow_html=True)
+
+# Sidebar for language selection and instructions
+st.sidebar.title("Language Options")
+language = st.sidebar.selectbox("Choose target language", list(LANGUAGES.keys()))
+
+st.sidebar.markdown("### How to use")
+st.sidebar.write("1. Enter English text in the box below.")
+st.sidebar.write("2. Select the target language from the options.")
+st.sidebar.write("3. Click **Translate** to get the result.")
 
 # Input text
-text = st.text_area("Enter text in English to translate:")
+text = st.text_area("Enter text in English to translate:", height=150)
 
-# Language selection
-language = st.selectbox("Choose target language", list(LANGUAGES.keys()))
+# Character count
+st.write(f"Character count: {len(text)}")
 
+# Button to translate
 if st.button("Translate"):
     if text:
-        # Load model and tokenizer based on selected language
-        tgt_lang = LANGUAGES[language]
-        model, tokenizer = load_model('en', tgt_lang)
-        
-        # Perform translation
-        translated_text = translate_text(model, tokenizer, text)
+        # Show a spinner during the translation process
+        with st.spinner('Translating...'):
+            # Load model and tokenizer based on selected language
+            tgt_lang = LANGUAGES[language]
+            model, tokenizer = load_model('en', tgt_lang)
+            
+            # Perform translation
+            translated_text = translate_text(model, tokenizer, text)
         
         # Display the translation
-        st.write(f"**Translated text ({language}):**")
-        st.write(translated_text)
+        st.markdown("<h3 style='color: #4B9CD3;'>Translated Text:</h3>", unsafe_allow_html=True)
+        st.success(translated_text)
     else:
-        st.write("Please enter text to translate.")
+        st.error("Please enter text to translate.")
+
+# Footer with styling
+st.markdown(
+    """
+    <style>
+    footer {visibility: hidden;}
+    .footer-text {
+        position: fixed;
+        bottom: 0;
+        left: 0;
+        right: 0;
+        background-color: #f9f9f9;
+        padding: 10px;
+        text-align: center;
+        color: #4B9CD3;
+        font-weight: bold;
+    }
+    </style>
+    <div class="footer-text">Powered by Hugging Face Transformers</div>
+    """,
+    unsafe_allow_html=True
+)