app1

app.py

@@ -174,31 +174,31 @@ chatbot_gradio_app = gr.ChatInterface(
 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;">
-
+    
     <!-- Spanish Version -->
     <div id="spanish_version" style="margin-top: 20px;">
         <h1 style="font-size: 24px; color: #4e6339;">¡Bienvenido a nuestro clasificador de imágenes y chatbot para un reciclaje más inteligente!♻️</h1>
         <p style="font-size: 16px; color: #4e6339; 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: #4e6339; 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>¿Cómo usarlo?</strong></p>
+        <p style="font-size: 16px; text-align:center;"><strong><span style="color: #4e6339;">¿Cómo usarlo?</span></strong></p>
         <ul style="list-style-type: disc; text-align: justify; margin-top: 20px; padding-left: 20px;">
-            <li style="font-size: 16px; color: #4e6339;"><strong>Green Greta Image Classification:</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: #4e6339;"><strong>Green Greta Chat:</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>
+            <li style="font-size: 16px; color: #4e6339;"><strong><span style="color: #4e6339;">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: #4e6339;"><strong><span style="color: #4e6339;">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>
-
+    
     <!-- English Version -->
     <div id="english_version" style="margin-top: 20px; display: none;">
         <h1 style="font-size: 24px; color: #4e6339;">Welcome to our image classifier and chatbot for smarter recycling!♻️</h1>
         <p style="font-size: 16px; color: #4e6339; text-align: justify;">Have you ever wondered if you can recycle a particular item? Or have you felt overwhelmed by the amount of waste you generate and don't know how to handle it more sustainably? You're in the right place!</p>
         <p style="font-size: 16px; color: #4e6339; text-align: justify;">Our platform combines the power of artificial intelligence with the convenience of a chatbot to provide you with quick and accurate answers on which items are recyclable and how to do it most efficiently.</p>
-        <p style="font-size: 16px; text-align:center;"><strong>How to use:</strong></p>
+        <p style="font-size: 16px; text-align:center;"><strong><span style="color: #4e6339;">How to use:</span></strong></p>
         <ul style="list-style-type: disc; text-align: justify; margin-top: 20px; padding-left: 20px;">
-            <li style="font-size: 16px; color: #4e6339;"><strong>Green Greta Image Classification:</strong> Go to the Greta Image Classification tab and simply upload a photo of the object you want to recycle, and our model will identify what it is🕵️‍♂️ so you can dispose of it properly.</li>
-            <li style="font-size: 16px; color: #4e6339;"><strong>Green Greta Chat:</strong> Do you have questions about recycling, specific materials, or sustainable practices? Ask our chatbot in the Green Greta Chat tab!📝 It's here to answer all your questions and help you make more informed decisions about your recycling.</li>
+            <li style="font-size: 16px; color: #4e6339;"><strong><span style="color: #4e6339;">Green Greta Image Classification:</span></strong> Go to the Greta Image Classification tab and simply upload a photo of the object you want to recycle, and our model will identify what it is���️‍♂️ so you can dispose of it properly.</li>
+            <li style="font-size: 16px; color: #4e6339;"><strong><span style="color: #4e6339;">Green Greta Chat:</span></strong> Do you have questions about recycling, specific materials, or sustainable practices? Ask our chatbot in the Green Greta Chat tab!📝 It's here to answer all your questions and help you make more informed decisions about your recycling.</li>
         </ul>
     </div>
-
+    
     <!-- Toggle Button -->
     <button id="toggle_button" onclick="toggleLanguage()" style="margin-top: 20px;">Switch Language</button>
 </div>