Changed buttons labels

Added links to EDIA's interest pages

index.html

@@ -38,7 +38,7 @@
 					<p id="word-bias-description">Basada en una técnica para detectar sesgos en WE, esta función nos permite visualizar la distribución de palabras en un espacio 2D y con ello observar la distancia entre ellas. Entre más contextos de ocurrencia compartan, estarán más cerca, y entre menos contextos de ocurrencia compartan, estarán más lejos. Esto, generalmente, hace que las palabras con un significado parecido aparezcan cercanas. A partir de la creación de listas de palabras que nos sirven para definir campos semánticos, podremos observar sesgos y explorar palabras vecinas entre esos significados.</p>
 					<div class="buttons-flex-container">
 						<a class="button demo" id="word-bias-demo" target="_blank" href="https://huggingface.co/spaces/vialibre/edia_we_es">Demo</a>
-						<a class="button tuto" target="_blank" id="word-bias-tutorial" href="#">Tutorial: Explorar palabras y sus sesgos</a>
+						<a class="button tuto" target="_blank" id="word-bias-tutorial" href="#">Tutorial: Explorar listas de palabras</a>
 						<div class="divided-buttons-flex-container">
 							<a class="button manual" id="word-bias-manual-1" target="_blank" href="https://shorturl.at/cgwxJ">Manual:<br>Explorar palabras</a>
 							<a class="button manual" id="word-bias-manual-2" target="_blank" href="https://shorturl.at/htuEI">Manual:<br>Explorar sesgos</a>
@@ -71,7 +71,7 @@
 					<p id="data-bias-description">Esta herramienta muestra información adicional de la palabra, como la frecuencia y el contexto de aparición dentro del corpus de entrenamiento. Sirve para explicar e interpretar comportamientos inesperados en otras pestañas producto de la polisemia o la poca frecuencia de las palabras, y a partir de esta exploración, poder realizar modificaciones pertinentes en nuestras listas de palabras y frases.</p>
 					<div class="buttons-flex-container">
 						<a class="button demo" id="data-bias-demo" target="_blank" href="https://huggingface.co/spaces/vialibre/edia_datos_es">Demo</a>
-						<a class="button tuto" target="_blank" id="data-bias-tutorial" href="#">Tutorial: Sesgo en datos</a>
+						<a class="button tuto" target="_blank" id="data-bias-tutorial" href="#">Tutorial: Datos de las palabras</a>
 						<a class="button manual" target="_blank" id="data-bias-manual" href="https://shorturl.at/CIVY6">Manual</a>
 					</div>
 				</div>
@@ -79,6 +79,29 @@
 		</div>
 
 		<footer>
+			<div id="image-flex-container">
+				<div id="our-pages-flex-container">
+					<h4 id="our-pages-title">Puedes encontrar a EDIA en:</h4>
+					<a target="_blank" href="https://github.com/fvialibre/edia">
+						<img id="github-logo" src="images/github.png" alt="EDIA's Github repository">
+						Github
+					</a>
+
+					<a target="_blank" href="https://hub.docker.com/r/fvialibre/edia">
+						<img id="docker-logo" src="images/docker.png" alt="EDIA's DockerHub image">
+						DockerHub
+					</a>
+
+					<a target="_blank" href="https://huggingface.co/vialibre">
+						<img id="hf-logo" src="images/huggingface.svg" alt="ViaLibre's HuggingFace page">
+						HuggingFace🤗
+					</a>
+				</div>
+				<a target="_blank" href="https://www.vialibre.org.ar/">
+					<img id="viaLibre-logo" src="images/viaLibre.jpg" alt="Banner Fundación ViaLibre">
+				</a>
+				
+			</div>
 			<p id="footer-description">ACLARACIONES IMPORTANTES: Las consultas realizadas al usar este software quedan registradas automáticamente en nuestro sistema. Declaramos que la información recabada es anónima, confidencial y que el uso de la misma sólo será para fines de investigación. Para realizar las exploraciones de las dimensiones de análisis, como género, necesitamos simplificarlo a un fenómeno binario; entendemos que es una sobresimplificación, se trata de una primera aproximación a la familia de soluciones de mitigación que sabemos requiere de una mayor complejidad para tratar los fenómenos de sesgo dentro de los constructos sociales.</p>
 		</footer>
 	</body>

javascript/index.js

@@ -81,6 +81,7 @@ function translatePage() {
     document.getElementById("data-bias-manual").href = links['dataBias']['manual']
 
     // Footer
+    document.getElementById("our-pages-title").innerHTML = data['our-pages-title']
     document.getElementById("footer-description").innerHTML = data['footer']
 }
 

languages/en.js

@@ -6,7 +6,7 @@ const english_data = {
         "wordBias": {
             "title": "Biases in words",
             "description": "Based on a technique to detect biases in WE, this function allows us to visualize the distribution of words in 2D space and thus observe the distance between them. The more occurrence contexts they share, the closer they will be, and the fewer occurrence contexts they share, the further they will be. This usually makes words with a similar meaning appear close. From the creation of word lists to define semantic fields, we will be able to observe biases and explore neighboring words between those meanings.",
-            "tutorial": "Tutorial: Word exploration and bias",
+            "tutorial": "Tutorial: Word lists exploration",
             "manual-1": "Handbook:<br>Word exploration",
             "manual-2":"Handbook:<br>Word bias"
         },
@@ -21,9 +21,10 @@ const english_data = {
         "dataBias": {
             "title": "Data",
             "description": "This tool shows additional information about the word, such as frequency and context of occurrence within the training corpus used to explain and interpret unexpected behaviors in other tabs as a result of polysemy or the infrequency of words, and from this exploration, to be able to make pertinent modifications in our lists of words and phrases.",
-            "tutorial": "Tutorial: Bias in data",
+            "tutorial": "Tutorial: Words data",
             "manual": "Handbook"
         },
+        "our-pages-title": "Where you can find EDIA:",
         "footer": "IMPORTANT CLARIFICATIONS: Queries made when using this software are automatically registered in our system. We declare that the information collected is anonymous, confidential and that it will only be used for research purposes. <i>To perform the explorations of the dimensions of analysis, such as gender, we need to simplify it to a binary phenomenon; We understand that it is an oversimplification, it is a first approximation and we are aware of this limitation while representing complex phenomena within social constructs.</i>",
         "hf_btn": "Try it out in HuggingFace🤗!",
         "ccad_btn": "Try it out in CCAD!",

languages/es.js

@@ -6,7 +6,7 @@ const spanish_data = {
         "wordBias": {
             "title": "Sesgos en listas de palabras",
             "description": "Basada en una técnica para detectar sesgos en WE, esta función nos permite visualizar la distribución de palabras en un espacio 2D y con ello observar la distancia entre ellas. Entre más contextos de ocurrencia compartan, estarán más cerca, y entre menos contextos de ocurrencia compartan, estarán más lejos. Esto, generalmente, hace que las palabras con un significado parecido aparezcan cercanas. A partir de la creación de listas de palabras que nos sirven para definir campos semánticos, podremos observar sesgos y explorar palabras vecinas entre esos significados.",
-            "tutorial": "Tutorial: Explorar palabras y sus sesgos",
+            "tutorial": "Tutorial: Explorar listas de palabras",
             "manual-1": "Manual:<br>Explorar palabras",
             "manual-2":"Manual:<br>Explorar sesgos"
         },
@@ -21,9 +21,10 @@ const spanish_data = {
         "dataBias": {
             "title": "Datos de las palabras",
             "description": "Esta herramienta muestra información adicional de la palabra, como la frecuencia y el contexto de aparición dentro del corpus de entrenamiento. Sirve para explicar e interpretar comportamientos inesperados en otras pestañas producto de la polisemia o la poca frecuencia de las palabras, y a partir de esta exploración, poder realizar modificaciones pertinentes en nuestras listas de palabras y frases.",
-            "tutorial": "Tutorial: Sesgo en datos",
+            "tutorial": "Tutorial: Datos de las palabras",
             "manual": "Manual"
         },
+        "our-pages-title": "Puedes encontrar a EDIA en:",
         "footer": "ACLARACIONES IMPORTANTES: Las consultas realizadas al usar este software quedan registradas automáticamente en nuestro sistema. Declaramos que la información recabada es anónima, confidencial y que el uso de la misma sólo será para fines de investigación. <i>Para realizar las exploraciones de las dimensiones de análisis, como género, necesitamos simplificarlo a un fenómeno binario; entendemos que es una sobresimplificación, se trata de una primera aproximación a la familia de soluciones de mitigación que sabemos requiere de una mayor complejidad para tratar los fenómenos de sesgo dentro de los constructos sociales.</i>",
         "hf_btn": "Pruebalo en HuggingFace🤗!",
         "ccad_btn": "Pruebalo en CCAD!",

style.css

@@ -156,6 +156,56 @@ footer > p {
 	font-size: 10px;
 }
 
+footer > #image-flex-container {
+	display: flex;
+	flex-direction: row;
+	flex-wrap: wrap;
+	justify-content: space-between;
+	align-items: center;
+	gap: 30px 15px;
+	margin-bottom: 2rem;
+}
+
+footer img#viaLibre-logo {
+	max-width: 25rem;
+}
+
+#our-pages-flex-container {
+	min-width: 230px;
+	display: flex;
+	flex-direction: column;
+	flex-wrap: nowrap;
+	gap: 0.5rem;
+}
+
+#our-pages-flex-container h4 {
+	color: rgb(24, 24, 24);
+	margin: 10px 0 5px 0;
+}
+
+#our-pages-flex-container a {
+	text-decoration: none;
+	color: rgb(24, 24, 24);
+}
+
+footer img#github-logo {
+	vertical-align:middle;
+	width: 2.5rem;
+	margin-right: 5px;
+}
+
+footer img#docker-logo {
+	vertical-align:middle;
+	width: 2.5rem;
+	margin-right: 5px;
+}
+
+footer img#hf-logo {
+	vertical-align:middle;
+	width: 2.5rem;
+	margin-right: 5px;
+}
+
 /* Buttons Styling */
 
 button#translate {
@@ -258,6 +308,10 @@ button#translate > img {
 /* Media queries */
 
 @media only screen and (max-width: 769px) {
+	footer img#viaLibre-logo {
+		max-width: 20rem;
+	}
+
     button#translate  {
         width: 100%;
     }