Update app.py

app.py

@@ -71,10 +71,25 @@ chatbot_gradio_app = gr.ChatInterface(
     title=custom_title
 )
 
-# Combine both interfaces into a single app
+banner_tab_content = """
+<div style="background-color: #d3e3c3; text-align: center; padding: 20px; display: flex; flex-direction: column; align-items: center;">
+    <img src="https://huggingface.co/spaces/rocioadlc/test_4/resolve/main/front_4.jpg" alt="Banner Image" style="width: 50%; max-width: 500px; margin: 0 auto;">
+    <h1 style="font-size: 24px; color: "#92b96a"; margin-top: 20px;">¡Bienvenido a nuestro clasificador de imágenes y chatbot para un reciclaje más inteligente!♻️</h1>
+    <p style="font-size: 16px; color: "#92b96a"; text-align: justify;">¿Alguna vez te has preguntado si puedes reciclar un objeto en particular? ¿O te has sentido abrumado por la cantidad de residuos que generas y no sabes cómo manejarlos de manera más sostenible? ¡Estás en el lugar correcto!</p>
+    <p style="font-size: 16px; color: "#92b96a"; text-align: justify;">Nuestra plataforma combina la potencia de la inteligencia artificial con la comodidad de un chatbot para brindarte respuestas rápidas y precisas sobre qué objetos son reciclables y cómo hacerlo de la manera más eficiente.</p>
+    <p style="font-size: 16px; text-align:center;"><strong><span style="color: "#92b96a";">¿Cómo usarlo?</span></strong>
+    <ul style="list-style-type: disc; text-align: justify; margin-top: 20px; padding-left: 20px;">
+        <li style="font-size: 16px; color: "#92b96a";"><strong><span style="color: "#92b96a";">Green Greta Image Classification:</span></strong> Ve a la pestaña Greta Image Classification y simplemente carga una foto del objeto que quieras reciclar, y nuestro modelo de identificará de qué se trata🕵️‍♂️ para que puedas desecharlo adecuadamente.</li>
+        <li style="font-size: 16px; color: "#92b96a";"><strong><span style="color: "#92b96a";">Green Greta Chat:</span></strong> ¿Tienes preguntas sobre reciclaje, materiales específicos o prácticas sostenibles? ¡Pregunta a nuestro chatbot en la pestaña Green Greta Chat!📝 Está aquí para responder todas tus preguntas y ayudarte a tomar decisiones más informadas sobre tu reciclaje.</li>
+    </ul>
+</div>
+"""
+banner_tab = gr.Markdown(banner_tab_content)
+
+# Combine interfaces into a single app
 app = gr.TabbedInterface(
-    [image_gradio_app, chatbot_gradio_app],
-    tab_names=["Green Greta Image Classification","Green Greta Chat"],
+    [banner_tab, image_gradio_app, chatbot_gradio_app],
+    tab_names=["Welcome to Green Greta", "Green Greta Image Classification", "Green Greta Chat"],
     theme=theme
 )