Update app.py

app.py

@@ -186,24 +186,25 @@ chatbot_gradio_app = gr.ChatInterface(
 )
 
 banner_tab_content = """
-<picture>
-  <source srcset="https://huggingface.co/spaces/rocioadlc/test_4/resolve/main/front.jpg" media="(prefers-color-scheme: dark)" />
-  <img alt="WhisperSpeech banner with Collabora and LAION logos" src="https://huggingface.co/spaces/rocioadlc/test_4/resolve/main/front.jpg" media="(prefers-color-scheme: dark)" style="width: 60%; margin: 0 auto;" />
-</picture>
-¡Bienvenido a nuestro clasificador de imágenes y chatbot para un reciclaje más inteligente!
-¿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!
-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.
-¿Cómo funciona?
-Clasificador de Imágenes: Simplemente carga una foto del objeto que quieras reciclar, y nuestro modelo de inteligencia artificial identificará rápidamente el material y te dirá cómo desecharlo adecuadamente.
-Chatbot de Respuestas: ¿Tienes preguntas sobre reciclaje, materiales específicos o prácticas sostenibles? ¡Pregunta a nuestro chatbot! Está aquí para responder todas tus preguntas y ayudarte a tomar decisiones más informadas sobre tu reciclaje.
+<div style="text-align: center; padding: 20px;">
+    <img src="https://huggingface.co/spaces/rocioadlc/test_4/resolve/main/front.jpg" alt="Banner Image" style="width: 50%; max-width: 500px;">
+    <h1 style="font-size: 24px; color: #333; 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: #666;">¿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: #666;"> 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; color: #666;"> ¿Cómo funciona? </p>
+<p style="font-size: 16px; color: #666;"> 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>
+    <ul style="list-style-type: disc; text-align: left; margin-top: 20px; padding-left: 20px;">
+        <li style="font-size: 16px; color: #666;">Clasificador de Imágenes: Simplemente carga una foto del objeto que quieras reciclar, y nuestro modelo de inteligencia artificial identificará rápidamente el material y te dirá cómo desecharlo adecuadamente.</li>
+        <li style="font-size: 16px; color: #666;">Chatbot de Respuestas: ¿Tienes preguntas sobre reciclaje, materiales específicos o prácticas sostenibles? ¡Pregunta a nuestro chatbot! 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)
 
 # Combinar ambas interfaces en una sola aplicación con pestañas
 app = gr.TabbedInterface(
     [banner_tab, image_gradio_app, chatbot_gradio_app],
-    tab_names=["Banner & Explanation", "Green Greta Image Classification", "Green Greta Chat"],
+    tab_names=["Welcome to Green Greta", "Green Greta Image Classification", "Green Greta Chat"],
     theme=theme
 )