Update app.py

app.py

@@ -186,19 +186,18 @@ chatbot_gradio_app = gr.ChatInterface(
 )
 
 banner_tab_content = """
-<div style="text-align: center; padding: 20px;">
+<div style="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.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>
+    <h1 style="font-size: 24px; color: white; 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: white;">¿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: white;">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>
+        <li style="font-size: 16px; color: white;">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: white;">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