Spaces:

vialibre
/

edia

Running

LMartinezEXEX commited on Feb 2, 2023

Commit

afffaf5

1 Parent(s): 7831135

Added semantic elements tags

Better css style selector
Added Notre Dame University banner and link
Made sponsors and develpment section divided into independent two columns

Files changed (3) hide show

images/notre_dame.jpg +0 -0
index.html +39 -12
style.css +87 -65

images/notre_dame.jpg ADDED Viewed

index.html CHANGED Viewed

@@ -1,6 +1,7 @@
 <!DOCTYPE html>
 <html>
 	<head>
 		<meta charset="utf-8" />
 		<meta name="viewport" content="width=device-width" />
@@ -12,23 +13,32 @@
 		<script src="links/es.js"></script>
 		<script src="links/en.js"></script>
 		<script type="text/javascript" src="javascript/index.js"></script>
 	</head>
 	<body>
-		<div id="head-flex-container">
 			<div id="title-container">
 				<h1 id="name">EDIA</h1>
 				<h2 id="subname">Estereotipos y Discriminación en Inteligencia Artificial</h2>
 			</div>
 			<button id="translate" onclick="translatePage()"><img id="flag-translate" src="images/united-states.png" alt=""> English</button>
-		</div>
-		<div id="description-container">
 			<p id="intro_1">Los modelos de lenguaje y las representaciones de palabras obtenidas con aprendizaje automatizado han demostrado contener estereotipos discriminatorios. Aquí presentamos un conjunto de herramientas de inspección: EDIA (Estereotipos y Discriminación en Inteligencia Artificial). El objetivo de este proyecto es diseñar y evaluar una metodología que permita a comunidades de ciencias sociales y personas expertas de dominio en Latinoamérica, explorar sesgos y estereotipos discriminatorios presentes en word embeddings y modelos de lenguaje. También les permite definir el tipo de sesgo a explorar y acercarse a un enfoque interseccional desde dos dimensiones binarias de análisis (por ejemplo, <i>mujer-hombre</i> vs <i>gordo-flaco</i>).</p>
 			<p id="intro_2">EDIA contiene diversas herramientas que sirven para detectar e inspeccionar sesgos en sistemas de procesamiento de lenguaje natural basados en modelos de lenguaje o word embeddings. Contamos con modelos en español e inglés para trabajar y explorar los sesgos en diferentes idiomas a requerimiento de las personas usuarias. Cada una de las siguientes herramientas son funciones distintas que nos acercan a un aspecto particular de la problemática del sesgo y a la vez, nos permiten entender partes diferentes pero complementarias del mismo.</p>
-		</div>
-		<a class="button" id="tutorial" target="_blank" href="https://screencast-o-matic.com/watch/c3XlIKVUeMN">Video presentación de EDIA</a>
-		<div id="cards-container">
 			<div class="card" id="word-bias-card">
 				<h3 id="word-bias-title">Sesgos en listas de palabras</h3>
@@ -74,34 +84,47 @@
 					</div>
 				</div>
 			</div>
-		</div>
 		<footer>
-			<div id="image-flex-container">
 				<div id="main-buttons-flex-container">
 					<h4 id="backup-title">Backups de EDIA:</h4>
 					<a class="button" id="hf" target="_blank" href="https://huggingface.co/spaces/vialibre/edia_full_es">Pruébalo en HuggingFace🤗!</a>
 					<a class="button disabled" id="ccad" target="_blank" href="#">Pruébalo en nuestra universidad!</a>
 				</div>
 				<div id="organization-container">
 					<h4 id="organization-title">Desarollado por:</h4>
 					<a target="_blank" href="https://www.vialibre.org.ar/">
-						<img id="viaLibre-logo" src="images/viaLibre.jpg" alt="Banner Fundación ViaLibre">
 					</a>
 					<a target="_blank" href="https://www.famaf.unc.edu.ar/">
-						<img id="FaMAF-logo" src="images/Logo-FAMAF_UNC-color-2.jpg" alt="Banner FaMAF">
 					</a>
 					<h4 id="sponsors-title">Auspiciado por:</h4>
 					<a target="_blank" href="https://aplusalliance.org/about-fair/">
-						<img id="FaiR-logo" src="images/fair.png" alt="Banner FaiR">
 					</a>
 				</div>
 				<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">
@@ -117,10 +140,14 @@
 						<img id="hf-logo" src="images/huggingface.svg" alt="ViaLibre's HuggingFace page">
 						HuggingFace🤗
 					</a>
 				</div>
-			</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>
 </html>

 <!DOCTYPE html>
 <html>
 	<head>
 		<meta charset="utf-8" />
 		<meta name="viewport" content="width=device-width" />
 		<script src="links/es.js"></script>
 		<script src="links/en.js"></script>
 		<script type="text/javascript" src="javascript/index.js"></script>
 	</head>
 	<body>
+		<header id="head-flex-container">
 			<div id="title-container">
 				<h1 id="name">EDIA</h1>
 				<h2 id="subname">Estereotipos y Discriminación en Inteligencia Artificial</h2>
 			</div>
 			<button id="translate" onclick="translatePage()"><img id="flag-translate" src="images/united-states.png" alt=""> English</button>
+		</header>
+		<section id="description-container">
 			<p id="intro_1">Los modelos de lenguaje y las representaciones de palabras obtenidas con aprendizaje automatizado han demostrado contener estereotipos discriminatorios. Aquí presentamos un conjunto de herramientas de inspección: EDIA (Estereotipos y Discriminación en Inteligencia Artificial). El objetivo de este proyecto es diseñar y evaluar una metodología que permita a comunidades de ciencias sociales y personas expertas de dominio en Latinoamérica, explorar sesgos y estereotipos discriminatorios presentes en word embeddings y modelos de lenguaje. También les permite definir el tipo de sesgo a explorar y acercarse a un enfoque interseccional desde dos dimensiones binarias de análisis (por ejemplo, <i>mujer-hombre</i> vs <i>gordo-flaco</i>).</p>
 			<p id="intro_2">EDIA contiene diversas herramientas que sirven para detectar e inspeccionar sesgos en sistemas de procesamiento de lenguaje natural basados en modelos de lenguaje o word embeddings. Contamos con modelos en español e inglés para trabajar y explorar los sesgos en diferentes idiomas a requerimiento de las personas usuarias. Cada una de las siguientes herramientas son funciones distintas que nos acercan a un aspecto particular de la problemática del sesgo y a la vez, nos permiten entender partes diferentes pero complementarias del mismo.</p>
+			<a class="button" id="tutorial" target="_blank" href="https://screencast-o-matic.com/watch/c3XlIKVUeMN">Video presentación de EDIA</a>
+		</section>
+		<section id="cards-container">
 			<div class="card" id="word-bias-card">
 				<h3 id="word-bias-title">Sesgos en listas de palabras</h3>
 					</div>
 				</div>
 			</div>
+		</section>
 		<footer>
+			<section id="image-flex-container">
 				<div id="main-buttons-flex-container">
 					<h4 id="backup-title">Backups de EDIA:</h4>
 					<a class="button" id="hf" target="_blank" href="https://huggingface.co/spaces/vialibre/edia_full_es">Pruébalo en HuggingFace🤗!</a>
 					<a class="button disabled" id="ccad" target="_blank" href="#">Pruébalo en nuestra universidad!</a>
 				</div>
 				<div id="organization-container">
 					<h4 id="organization-title">Desarollado por:</h4>
 					<a target="_blank" href="https://www.vialibre.org.ar/">
+						<img class="banner" id="viaLibre-logo" src="images/viaLibre.jpg" alt="Fundación ViaLibre banner">
 					</a>
 					<a target="_blank" href="https://www.famaf.unc.edu.ar/">
+						<img class="banner" id="FaMAF-logo" src="images/Logo-FAMAF_UNC-color-2.jpg" alt="FaMAF banner">
 					</a>
+				</div>
+				<div id="sponsors-container">
 					<h4 id="sponsors-title">Auspiciado por:</h4>
 					<a target="_blank" href="https://aplusalliance.org/about-fair/">
+						<img class="banner" id="FaiR-logo" src="images/fair.png" alt="FaiR banner">
+					</a>
+					<a target="_blank" href="https://www.nd.edu/">
+						<img class="banner" id="notre-dame-logo" src="images/notre_dame.jpg" alt="Notre Dame banner">
 					</a>
 				</div>
 				<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">
 						<img id="hf-logo" src="images/huggingface.svg" alt="ViaLibre's HuggingFace page">
 						HuggingFace🤗
 					</a>
 				</div>
+			</section>
 			<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>
 </html>

style.css CHANGED Viewed

@@ -1,7 +1,33 @@
 :root {
-	--card-bg: white;
-	--main-btn-primary: black;
-	--main-btn-secundary: white;
 }
 body {
@@ -11,7 +37,7 @@ body {
 }
 p {
-	color: rgb(24, 24, 24);
 	font-size: 15px;
 	margin-bottom: 10px;
 	margin-top: 5px;
@@ -40,10 +66,10 @@ a.button {
 	cursor: pointer;
 	text-decoration: none;
 	text-align: center;
-	color: black;
 }
-#head-flex-container {
 	margin-bottom: 2rem;
 	display: flex;
 	flex-direction: row;
@@ -53,28 +79,28 @@ a.button {
 	gap: 1rem;
 }
-#head-flex-container > #title-container {
 	flex-grow: 3;
 }
-#title-container > #name {
 	margin: 0;
 	font-size: 42px;
 }
-#title-container > #subname {
 	margin: 0;
-	color: white;
 	font-size: 18px;
 }
-a.button#tutorial {
-	max-width: 230px;
-	margin: 1rem auto;
 	align-items: center;
 }
-#cards-container {
 	padding: 0.5rem 0;
 }
@@ -83,22 +109,22 @@ a.button#tutorial {
 	margin: 1rem auto;
 	padding: 16px;
 	border: 1px solid var(--card-bg);
-	border-radius: 16px;
 	background-color: var(--card-bg);
 	transition: transform .5s, box-shadow 1s;
 }
 .card:hover {
 	transform: scale(1.02) perspective(0px);
-	box-shadow: 0 10px 10px rgba(0, 0, 0, 0.2);
 }
-.card > h3 {
 	margin: 0.25rem;
 }
 .card p {
-	color: rgb(92, 93, 97);
 }
 .card-description-flex-container {
@@ -143,11 +169,11 @@ a.button#tutorial {
 }
 footer > p {
-	color: rgb(136, 138, 142);
 	font-size: 10px;
 }
-footer > #image-flex-container {
 	display: flex;
 	flex-direction: row;
 	flex-wrap: wrap;
@@ -157,6 +183,11 @@ footer > #image-flex-container {
 	margin-bottom: 2rem;
 }
 #main-buttons-flex-container {
 	order: 1;
 	min-width: 260px;
@@ -167,11 +198,6 @@ footer > #image-flex-container {
 	gap: 0.7rem;
 }
-#main-buttons-flex-container h4 {
-	color: rgb(24, 24, 24);
-	margin: 10px 0 0 0;
-}
 #main-buttons-flex-container > .button {
 	min-width: 230px;
 	margin: 0;
@@ -184,13 +210,15 @@ footer > #image-flex-container {
 	gap: 0.25rem 0;
 }
-#organization-container h4 {
-	color: rgb(24, 24, 24);
-	margin: 10px 0 12px 0;
 }
 #our-pages-flex-container {
-	order: 3;
 	min-width: 260px;
 	display: flex;
 	flex-direction: column;
@@ -198,43 +226,27 @@ footer > #image-flex-container {
 	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#viaLibre-logo,
-footer img#FaMAF-logo,
-footer img#FaiR-logo {
 	max-width: 25rem;
 	transition: transform .5s, box-shadow 1s;
 }
-footer img#viaLibre-logo:hover,
-footer img#FaMAF-logo:hover,
-footer img#FaiR-logo:hover {
 	transform: scale(1.02) perspective(0px);
-	box-shadow: 0 10px 10px rgba(0, 0, 0, 0.2);
 }
-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;
@@ -250,13 +262,13 @@ footer img#hf-logo {
 button#translate {
 	padding: 0.5rem 0.75rem;
 	margin: 5px 0 0 0;
-	background-color: #58A6FF;
-	color: white;
 	transition: background-color 0.6s;
 }
 button#translate:hover {
-	background-color: #4080c9;
 }
 button#translate > img {
@@ -309,49 +321,55 @@ a.button#tutorial {
 .buttons-flex-container .button.demo {
 	border-radius: 0;
-	background: linear-gradient(45deg, purple 0%, rgb(242, 202, 242) 60%, white 100%);
 	background-size: 200% 200%;
     background-position: right bottom;
 	transition: 0.5s;
 }
 .buttons-flex-container .button.demo:hover {
 	background-position: left bottom;
-	color: white;
 }
 .buttons-flex-container .button.tuto {
 	border-radius: 0;
-	background: linear-gradient(45deg, green 0%, rgb(189, 223, 189) 60%, white 100%);
 	background-size: 200% 200%;
     background-position: right bottom;
 	transition: 0.5s;
 }
 .buttons-flex-container .button.tuto:hover {
 	background-position: left bottom;
-	color: white;
 }
 .buttons-flex-container .button.manual {
 	border-radius: 0;
-	background: linear-gradient(45deg, orange 0%,rgb(225, 219, 208) 60%, white 100%);
 	background-size: 200% 200%;
     background-position: right bottom;
 	transition: 0.5s;
 }
 .buttons-flex-container .button.manual:hover {
 	background-position: left bottom;
-	color: white;
 }
 /* Media queries */
 @media only screen and (max-width: 769px) {
-	footer img#viaLibre-logo,
-	footer img#FaMAF-logo,
-	footer img#FaiR-logo {
 		max-width: 260px;
 	}
@@ -367,6 +385,10 @@ a.button#tutorial {
 		order: 3;
 	}
 	#our-pages-flex-container {
 		order: 2;
 	}

 :root {
+	--text-primary: rgb(24, 24, 24);
+	--text-secondary: #FFFFFF;
+	--card-bg: #FFFFFF;
+	--card-title: rgb(24, 24, 24);
+	--card-text: rgb(92, 93, 97);
+	--card-hover: rgba(0, 0, 0, 0.2);
+	--main-btn-primary: rgb(24, 24, 24);
+	--main-btn-secundary: #FFFFFF;
+	--translate-btn-primary: #58A6FF;
+	--translate-btn-secundary: #FFFFFF;
+	--translate-btn-hover: #4080c9;
+	--demo-btn-primary: rgb(128, 0, 128);
+	--demo-btn-secundary: rgb(242, 202, 242);
+	--demo-btn-tertiary: #FFFFFF;
+	--tuto-btn-primary: rgb(0, 128, 0);
+	--tuto-btn-secundary: rgb(189, 223, 189);
+	--tuto-btn-tertiary: #FFFFFF;
+	--manual-btn-primary: rgb(255, 165, 0);
+	--manual-btn-secundary: rgb(225, 219, 208);
+	--manual-btn-tertiary: #FFFFFF;
+	--footer-primary: rgb(24, 24, 24);
+	--footer-secundary: rgb(136, 138, 142);
 }
 body {
 }
 p {
+	color: var(--text_primary);
 	font-size: 15px;
 	margin-bottom: 10px;
 	margin-top: 5px;
 	cursor: pointer;
 	text-decoration: none;
 	text-align: center;
+	color: var(--main-btn-primary);
 }
+header#head-flex-container {
 	margin-bottom: 2rem;
 	display: flex;
 	flex-direction: row;
 	gap: 1rem;
 }
+#title-container {
 	flex-grow: 3;
 }
+#name {
+	color: var(--text-primary);
 	margin: 0;
 	font-size: 42px;
 }
+#subname {
 	margin: 0;
+	color: var(--text-secondary);
 	font-size: 18px;
 }
+#description-container > a.button#tutorial {
+	max-width: 400px;
 	align-items: center;
 }
+section#cards-container {
 	padding: 0.5rem 0;
 }
 	margin: 1rem auto;
 	padding: 16px;
 	border: 1px solid var(--card-bg);
 	background-color: var(--card-bg);
 	transition: transform .5s, box-shadow 1s;
 }
 .card:hover {
 	transform: scale(1.02) perspective(0px);
+	box-shadow: 0 10px 10px var(--card-hover);
 }
+.card h3 {
+	color: var(--card-title);
 	margin: 0.25rem;
 }
 .card p {
+	color: var(--card-text);
 }
 .card-description-flex-container {
 }
 footer > p {
+	color: var(--footer-secundary);
 	font-size: 10px;
 }
+footer > section#image-flex-container {
 	display: flex;
 	flex-direction: row;
 	flex-wrap: wrap;
 	margin-bottom: 2rem;
 }
+section#image-flex-container h4 {
+	color: var(--footer-primary);
+	margin: 10px 0 0 0;
+}
 #main-buttons-flex-container {
 	order: 1;
 	min-width: 260px;
 	gap: 0.7rem;
 }
 #main-buttons-flex-container > .button {
 	min-width: 230px;
 	margin: 0;
 	gap: 0.25rem 0;
 }
+#sponsors-container {
+	order: 3;
+	display: flex;
+	flex-direction: column;
+	gap: 0.25rem 0;
 }
 #our-pages-flex-container {
+	order: 4;
 	min-width: 260px;
 	display: flex;
 	flex-direction: column;
 	gap: 0.5rem;
 }
 #our-pages-flex-container a {
 	text-decoration: none;
+	color: var(--footer-primary);
 }
+.banner {
 	max-width: 25rem;
 	transition: transform .5s, box-shadow 1s;
+	background-color: var(--card-bg);
 }
+.banner:hover {
 	transform: scale(1.02) perspective(0px);
+	box-shadow: 0 10px 10px var(--card-hover);
 }
+#sponsors-container img {
+	width: 20rem;
 }
+#our-pages-flex-container img {
 	vertical-align:middle;
 	width: 2.5rem;
 	margin-right: 5px;
 button#translate {
 	padding: 0.5rem 0.75rem;
 	margin: 5px 0 0 0;
+	background-color: var(--translate-btn-primary);
+	color: var(--translate-btn-secundary);
 	transition: background-color 0.6s;
 }
 button#translate:hover {
+	background-color: var(--translate-btn-hover);
 }
 button#translate > img {
 .buttons-flex-container .button.demo {
 	border-radius: 0;
+	background: linear-gradient(45deg, var(--demo-btn-primary) 0%, var(--demo-btn-secundary) 60%, var(--demo-btn-tertiary) 100%);
 	background-size: 200% 200%;
     background-position: right bottom;
 	transition: 0.5s;
+	color: var(--main-btn-primary);
 }
 .buttons-flex-container .button.demo:hover {
 	background-position: left bottom;
+	color: var(--main-btn-secundary);
 }
 .buttons-flex-container .button.tuto {
 	border-radius: 0;
+	background: linear-gradient(45deg, var(--tuto-btn-primary) 0%, var(--tuto-btn-secundary) 60%, var(--tuto-btn-tertiary) 100%);
 	background-size: 200% 200%;
     background-position: right bottom;
 	transition: 0.5s;
+	color: var(--main-btn-primary);
 }
 .buttons-flex-container .button.tuto:hover {
 	background-position: left bottom;
+	color: var(--main-btn-secundary);
 }
 .buttons-flex-container .button.manual {
 	border-radius: 0;
+	background: linear-gradient(45deg, var(--manual-btn-primary) 0%,var(--manual-btn-secundary) 60%, var(--manual-btn-tertiary) 100%);
 	background-size: 200% 200%;
     background-position: right bottom;
 	transition: 0.5s;
+	color: var(--main-btn-primary);
 }
 .buttons-flex-container .button.manual:hover {
 	background-position: left bottom;
+	color: var(--main-btn-secundary);
 }
 /* Media queries */
 @media only screen and (max-width: 769px) {
+	#description-container > a.button#tutorial {
+		margin: 1rem auto;
+	}
+	.banner {
 		max-width: 260px;
 	}
 		order: 3;
 	}
+	#sponsors-container {
+		order: 4;
+	}
 	#our-pages-flex-container {
 		order: 2;
 	}