Spaces:
Running
Running
app1
Browse files
app.py
CHANGED
|
@@ -174,15 +174,53 @@ chatbot_gradio_app = gr.ChatInterface(
|
|
| 174 |
banner_tab_content = """
|
| 175 |
<div style="background-color: #d3e3c3; text-align: center; padding: 20px; display: flex; flex-direction: column; align-items: center;">
|
| 176 |
<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;">
|
| 177 |
-
|
| 178 |
-
|
| 179 |
-
<
|
| 180 |
-
|
| 181 |
-
|
| 182 |
-
<
|
| 183 |
-
<
|
| 184 |
-
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 185 |
</div>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 186 |
"""
|
| 187 |
|
| 188 |
# Combine interfaces into a single app
|
|
|
|
| 174 |
banner_tab_content = """
|
| 175 |
<div style="background-color: #d3e3c3; text-align: center; padding: 20px; display: flex; flex-direction: column; align-items: center;">
|
| 176 |
<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;">
|
| 177 |
+
|
| 178 |
+
<!-- Spanish Version -->
|
| 179 |
+
<div id="spanish_version" style="margin-top: 20px;">
|
| 180 |
+
<h1 style="font-size: 24px; color: #4e6339;">¡Bienvenido a nuestro clasificador de imágenes y chatbot para un reciclaje más inteligente!♻️</h1>
|
| 181 |
+
<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>
|
| 182 |
+
<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>
|
| 183 |
+
<p style="font-size: 16px; text-align:center;"><strong>¿Cómo usarlo?</strong>
|
| 184 |
+
<ul style="list-style-type: disc; text-align: justify; margin-top: 20px; padding-left: 20px;">
|
| 185 |
+
<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>
|
| 186 |
+
<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>
|
| 187 |
+
</ul>
|
| 188 |
+
</div>
|
| 189 |
+
|
| 190 |
+
<!-- English Version -->
|
| 191 |
+
<div id="english_version" style="margin-top: 20px; display: none;">
|
| 192 |
+
<h1 style="font-size: 24px; color: #4e6339;">Welcome to our image classifier and chatbot for smarter recycling!♻️</h1>
|
| 193 |
+
<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>
|
| 194 |
+
<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>
|
| 195 |
+
<p style="font-size: 16px; text-align:center;"><strong>How to use:</strong>
|
| 196 |
+
<ul style="list-style-type: disc; text-align: justify; margin-top: 20px; padding-left: 20px;">
|
| 197 |
+
<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>
|
| 198 |
+
<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>
|
| 199 |
+
</ul>
|
| 200 |
+
</div>
|
| 201 |
+
|
| 202 |
+
<!-- Toggle Button -->
|
| 203 |
+
<button id="toggle_button" onclick="toggleLanguage()" style="margin-top: 20px;">Switch Language</button>
|
| 204 |
</div>
|
| 205 |
+
|
| 206 |
+
<!-- JavaScript for Language Toggle -->
|
| 207 |
+
<script>
|
| 208 |
+
function toggleLanguage() {
|
| 209 |
+
var spanishVersion = document.getElementById("spanish_version");
|
| 210 |
+
var englishVersion = document.getElementById("english_version");
|
| 211 |
+
var toggleButton = document.getElementById("toggle_button");
|
| 212 |
+
|
| 213 |
+
if (spanishVersion.style.display === "none") {
|
| 214 |
+
spanishVersion.style.display = "block";
|
| 215 |
+
englishVersion.style.display = "none";
|
| 216 |
+
toggleButton.innerHTML = "Switch to English";
|
| 217 |
+
} else {
|
| 218 |
+
spanishVersion.style.display = "none";
|
| 219 |
+
englishVersion.style.display = "block";
|
| 220 |
+
toggleButton.innerHTML = "Cambiar a Español";
|
| 221 |
+
}
|
| 222 |
+
}
|
| 223 |
+
</script>
|
| 224 |
"""
|
| 225 |
|
| 226 |
# Combine interfaces into a single app
|