Spaces:

vialibre
/

edia

Running

App Files Files Community

LMartinezEXEX commited on Jan 23, 2023

Commit

832c074

•

1 Parent(s): 226cbb5

Initial commit

Browse files

Files changed (11) hide show

README.md +4 -5
images/background.png +0 -0
images/spain.png +0 -0
images/united-states.png +0 -0
index.html +74 -8
javascript/index.js +115 -0
languages/en.js +31 -0
languages/es.js +31 -0
links/en.js +23 -0
links/es.js +23 -0
style.css +248 -12

README.md CHANGED Viewed

@@ -1,11 +1,10 @@
 ---
-title: Edia 2
-emoji: 🌖
-colorFrom: green
-colorTo: gray
 sdk: static
 pinned: false
-license: mit
 ---
 Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

 ---
+title: Prueba
+emoji: 🏢
+colorFrom: blue
+colorTo: blue
 sdk: static
 pinned: false
 ---
 Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

images/background.png ADDED Viewed

images/spain.png ADDED Viewed

images/united-states.png ADDED Viewed

index.html CHANGED Viewed

@@ -3,17 +3,83 @@
 	<head>
 		<meta charset="utf-8" />
 		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
 		<link rel="stylesheet" href="style.css" />
 	</head>
 	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
 		</div>
 	</body>
 </html>

 	<head>
 		<meta charset="utf-8" />
 		<meta name="viewport" content="width=device-width" />
+		<title>EDIA</title>
 		<link rel="stylesheet" href="style.css" />
+		<script src="languages/es.js"></script>
+		<script src="languages/en.js"></script>
+		<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 contienen estereotipos discriminatorios. Aquí presentamos el proyecto 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 funciones 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 pestañas 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>
+		<div id="main-buttons-flex-container">
+			<a class="button" id="hf" target="_blank" href="https://huggingface.co/spaces/vialibre/bias_tool_serv1">Pruebalo en HuggingFace🤗!</a>
+			<a class="button" id="ccad" target="_blank" href="#">Pruebalo en CCAD!</a>
+			<a class="button" id="tutorial" target="_blank" href="#">Tutorial de la herramienta</a>
+		</div>
+		<div id="cards-container">
+			<div class="card" id="word-bias-card">
+				<h3 id="word-bias-title">Sesgos en listas de palabras</h3>
+				<div class="card-description-flex-container">
+					<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>
+						<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>
+						</div>
+					</div>
+				</div>
+			</div>
+			<div class="card" id="phrase-bias-card">
+				<h3 id="phrase-bias-title">Sesgos en frases</h3>
+				<div class="card-description-flex-container">
+					<p id="phrase-bias-description">Aquí desplegamos una herramienta que utiliza modelos de lenguaje para evidenciar sesgos en frases, lo que nos permite trabajar con sesgos no binarios (como mujer - hombre,  femenino - masculino) y eliminar ambigüedades (producto de polisemias). A partir de oraciones en donde una contenga <i>a) estereotipo</i> y la otra <i>b) antiestereotipo</i> (ejemplo: <i>a)</i> Las parejas de <i>homosexuales</i> no deberían tener permitido casarse, <i>b)</i> Las parejas de <i>heterosexuales</i> no deberían tener permitido casarse.), buscamos definir las preferencias de un modelo de lenguaje pre-entrenado a la hora de producir lenguaje. Si el modelo no tuviera sesgo ambas tendrían el mismo nivel de preferencia, pero si el modelo estuviera sesgado, una va a tener mayor preferencia.</p>
+					<div class="buttons-flex-container">
+						<a class="button demo" id="phrase-bias-demo" target="_blank" href="https://huggingface.co/spaces/vialibre/edia_lmodels_es">Demo</a>
+						<div class="divided-buttons-flex-container">
+							<a class="button tuto" id="phrase-bias-tutorial-1" target="_blank" href="#">Tutorial:<br>Sesgos en frases</a>
+							<a class="button tuto" id="phrase-bias-tutorial-2" target="_blank" href="#">Tutorial:<br>Crows-Pairs</a>
+						</div>
+						<div class="divided-buttons-flex-container">
+							<a class="button manual" id="phrase-bias-manual-1" target="_blank" href="https://shorturl.at/fkBL3">Manual:<br>Sesgos en frase</a>
+							<a class="button manual" id="phrase-bias-manual-2" target="_blank" href="https://shorturl.at/gJLTU">Manual:<br>Crows-Pairs</a>
+						</div>
+					</div>
+				</div>
+			</div>
+			<div class="card" id="data-bias-card">
+				<h3 id="data-bias-title">Datos de las palabras</h3>
+				<div class="card-description-flex-container">
+					<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 manual" target="_blank" id="data-bias-manual" href="https://shorturl.at/CIVY6">Manual</a>
+					</div>
+				</div>
+			</div>
+		</div>
+		<footer>
+			<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>

javascript/index.js ADDED Viewed

	@@ -0,0 +1,115 @@

+var language = "spanish"
+function translatePage() {
+    var data
+    var links
+    if (language === "spanish") {
+        data = english_data
+        links = english_links
+        document.getElementById("translate").innerHTML = "<img id=\"flag-translate\" src=\"images/spain.png\" alt=\"\"> Español"
+        language = "english"
+    } else {
+        data = spanish_data
+        links = spanish_links
+        document.getElementById("translate").innerHTML = "<img id=\"flag-translate\" src=\"images/united-states.png\" alt=\"\"> English"
+        language = "spanish"
+    }
+    displayElements(language)
+    // Head
+    document.getElementById("subname").innerHTML = data['toolSubname']
+    document.getElementById("intro_1").innerHTML = data['introduction_1']
+    document.getElementById("intro_2").innerHTML = data['introduction_2']
+    // Main buttons
+    document.getElementById("hf").innerHTML = data['hf_btn']
+    document.getElementById("ccad").innerHTML = data['ccad_btn']
+    document.getElementById("tutorial").innerHTML = data['tutorial_btn']
+    // Cards
+        // Word bias
+            // Labels
+    document.getElementById("word-bias-title").innerHTML = data['wordBias']['title']
+    document.getElementById("word-bias-description").innerHTML = data['wordBias']['description']
+    document.getElementById("word-bias-tutorial").innerHTML = data['wordBias']['tutorial']
+    document.getElementById("word-bias-manual-1").innerHTML = data['wordBias']['manual-1']
+    document.getElementById("word-bias-manual-2").innerHTML = data['wordBias']['manual-2']
+            // Buttons href
+    document.getElementById('word-bias-demo').href = links['wordBias']['demo']
+    document.getElementById("word-bias-tutorial").href = links['wordBias']['tutorial']
+    document.getElementById("word-bias-manual-1").href = links['wordBias']['manual-1']
+    document.getElementById("word-bias-manual-2").href = links['wordBias']['manual-2']
+        // Phrase bias
+            // Labels
+    document.getElementById("phrase-bias-title").innerHTML = data['phraseBias']['title']
+    document.getElementById("phrase-bias-description").innerHTML = data['phraseBias']['description']
+    document.getElementById("phrase-bias-tutorial-1").innerHTML = data['phraseBias']['tutorial-1']
+    document.getElementById("phrase-bias-tutorial-2").innerHTML = data['phraseBias']['tutorial-2']
+    document.getElementById("phrase-bias-manual-1").innerHTML = data['phraseBias']['manual-1']
+    document.getElementById("phrase-bias-manual-2").innerHTML = data['phraseBias']['manual-2']
+            // Buttons href
+    document.getElementById('phrase-bias-demo').href = links['phraseBias']['demo']
+    document.getElementById("phrase-bias-tutorial-1").href = links['phraseBias']['tutorial-1']
+    document.getElementById("phrase-bias-tutorial-2").href = links['phraseBias']['tutorial-2']
+    document.getElementById("phrase-bias-manual-1").href = links['phraseBias']['manual-1']
+    document.getElementById("phrase-bias-manual-2").href = links['phraseBias']['manual-2']
+        // Data bias
+            //Labels
+    document.getElementById("data-bias-title").innerHTML = data['dataBias']['title']
+    document.getElementById("data-bias-description").innerHTML = data['dataBias']['description']
+    document.getElementById("data-bias-tutorial").innerHTML = data['dataBias']['tutorial']
+    document.getElementById("data-bias-manual").innerHTML = data['dataBias']['manual']
+    document.getElementById("data-bias-demo").href = links['dataBias']['demo']
+    document.getElementById("data-bias-tutorial").href = links['dataBias']['tutorial']
+    document.getElementById("data-bias-manual").href = links['dataBias']['manual']
+    // Footer
+    document.getElementById("footer-description").innerHTML = data['footer']
+}
+function displayElements(language) {
+    // Hide elements when in English version
+    if (language === "english") {
+        // HugginfFace button
+        document.getElementById("hf").style.display = 'none'
+        // Word bias manuals
+        document.getElementById("word-bias-manual-1").style.visibility = 'hidden'
+        document.getElementById("word-bias-manual-2").style.visibility = 'hidden'
+        // Phrase bias manuals
+        document.getElementById("phrase-bias-manual-1").style.visibility = 'hidden'
+        document.getElementById("phrase-bias-manual-2").style.visibility = 'hidden'
+        // Data bias card
+        document.getElementById("data-bias-card").style.display = 'none'
+    } else {
+        // HugginfFace button
+        document.getElementById("hf").style.display = 'block'
+        // Word bias manuals
+        document.getElementById("word-bias-manual-1").style.visibility = 'visible'
+        document.getElementById("word-bias-manual-2").style.visibility = 'visible'
+        // Phrase bias manuals
+        document.getElementById("phrase-bias-manual-1").style.visibility = 'visible'
+        document.getElementById("phrase-bias-manual-2").style.visibility = 'visible'
+        // Data bias card
+        document.getElementById("data-bias-card").style.display = 'block'
+    }
+}

languages/en.js ADDED Viewed

	@@ -0,0 +1,31 @@

+const english_data = {
+        "toolName": "EDIA: Stereotypes and Discrimination in Artificial Intelligence",
+        "toolSubname": "Stereotypes and Discrimination in Artificial Intelligence",
+        "introduction_1": "Language models and word representations obtained with machine learning contain discriminatory stereotypes. Here we present the EDIA project (Stereotypes and Discrimination in Artificial Intelligence). This project aimed to design and evaluate a methodology that allows social scientists and domain experts in Latin America to explore biases and discriminatory stereotypes present in word embeddings (WE) and language models (LM). It also allowed them to define the type of bias to explore and  do  an intersectional analysis using two binary dimensions (for example, <i>female-male</i> intersected with <i>fat-skinny</i>).",
+        "introduction_2": "EDIA contains several functions that serve to detect and inspect biases in natural language processing systems based on language models or word embeddings. We have models in Spanish and English to work with and explore biases in different languages at the user's request. Each of the following spaces contains different functions that bring us closer to a particular aspect of the problem of bias and they allow us to understand different but complementary parts of it.",
+        "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",
+            "manual-1": "Handbook:<br>Word exploration",
+            "manual-2":"Handbook:<br>Word bias"
+        },
+        "phraseBias": {
+            "title": "Sentence biases",
+            "description": "Here we deploy a tool that uses language models to reveal sentence biases, allowing us to work with non-binary biases (such as female-male) and avoid ambiguities (product of polysemy). From sentences where one of them contains <i>a) stereotype</i> and the other <i>b) anti-stereotype</i> (example: <i>a)</i> <i>Homosexual</i> couples should not be allowed to get married, <i>b)</i> <i>Heterosexual</i> couples should not be allowed to get married). We seek to define the preferences of a pre-trained language model when producing language. If the model were unbiased, both would have the same level of preference, but if the model were biased, one would have a higher preference.",
+            "tutorial-1": "Tutorial:<br>Phrase bias",
+            "manual-1": "Handbook:<br>Phrase bias",
+            "tutorial-2": "Tutorial:<br>Crows - Pairs",
+            "manual-2": "Handbook:<br>Crows - Pairs"
+        },
+        "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",
+            "manual": "Handbook"
+        },
+        "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!",
+        "tutorial_btn": "EDIA video presentation"
+    }

languages/es.js ADDED Viewed

	@@ -0,0 +1,31 @@

+const spanish_data = {
+        "toolName": "EDIA: Estereotipos y Discriminación en Inteligencia Artificial",
+        "toolSubname": "Estereotipos y Discriminación en Inteligencia Artificial",
+        "introduction_1": "Los modelos de lenguaje y las representaciones de palabras obtenidas con aprendizaje automatizado contienen estereotipos discriminatorios. Aquí presentamos el proyecto 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>).",
+        "introduction_2": "EDIA contiene diversas funciones 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 pestañas 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.",
+        "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",
+            "manual-1": "Manual:<br>Explorar palabras",
+            "manual-2":"Manual:<br>Explorar sesgos"
+        },
+        "phraseBias": {
+            "title": "Sesgos en frases",
+            "description": "Aquí desplegamos una herramienta que utiliza modelos de lenguaje para evidenciar sesgos en frases, lo que nos permite trabajar con sesgos no binarios (como mujer - hombre,  femenino - masculino) y eliminar ambigüedades (producto de polisemias). A partir de oraciones en donde una contenga <i>a) estereotipo</i> y la otra <i>b) antiestereotipo</i> (ejemplo: <i>a)</i> Las parejas de <i>homosexuales</i> no deberían tener permitido casarse, <i>b)</i> Las parejas de <i>heterosexuales</i> no deberían tener permitido casarse.), buscamos definir las preferencias de un modelo de lenguaje pre-entrenado a la hora de producir lenguaje. Si el modelo no tuviera sesgo ambas tendrían el mismo nivel de preferencia, pero si el modelo estuviera sesgado, una va a tener mayor preferencia.",
+            "tutorial-1": "Tutorial:<br>Sesgos en frases",
+            "manual-1": "Manual:<br>Sesgos en frases",
+            "tutorial-2": "Tutorial:<br>Crows - Pairs",
+            "manual-2": "Manual:<br>Crows - Pairs"
+        },
+        "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",
+            "manual": "Manual"
+        },
+        "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!",
+        "tutorial_btn": "Video presentación de EDIA"
+    }

links/en.js ADDED Viewed

	@@ -0,0 +1,23 @@

+const english_links = {
+        "hf_stable": "#",
+        "ccad_stable": "#",
+        "main_tutorial": "#",
+        "wordBias": {
+            "demo": "https://huggingface.co/spaces/vialibre/edia_we_en",
+            "tutorial": "#",
+            "manual-1": "#",
+            "manual-2": "#"
+        },
+        "phraseBias": {
+            "demo": "https://huggingface.co/spaces/vialibre/edia_lmodels_en",
+            "tutorial-1": "#",
+            "tutorial-2": "#",
+            "manual-1": "#",
+            "manual-2": "#"
+        },
+        "dataBias": {
+            "demo": "#",
+            "tutorial": "#",
+            "manual": "#"
+        }
+    }

links/es.js ADDED Viewed

	@@ -0,0 +1,23 @@

+const spanish_links = {
+        "hf_stable": "https://huggingface.co/spaces/vialibre/bias_tool_serv1",
+        "ccad_stable": "#",
+        "main_tutorial": "#",
+        "wordBias": {
+            "demo": "https://huggingface.co/spaces/vialibre/edia_we_es",
+            "tutorial": "#",
+            "manual-1": "https://shorturl.at/cgwxJ",
+            "manual-2": "https://shorturl.at/htuEI"
+        },
+        "phraseBias": {
+            "demo": "https://huggingface.co/spaces/vialibre/edia_lmodels_es",
+            "tutorial-1": "#",
+            "tutorial-2": "#",
+            "manual-1": "https://shorturl.at/fkBL3",
+            "manual-2": "https://shorturl.at/gJLTU"
+        },
+        "dataBias": {
+            "demo": "https://huggingface.co/spaces/vialibre/edia_datos_es",
+            "tutorial": "#",
+            "manual": "https://shorturl.at/CIVY6"
+        }
+    }

style.css CHANGED Viewed

@@ -1,28 +1,264 @@
-body {
-	padding: 2rem;
-	font-family: -apple-system, BlinkMacSystemFont, "Arial", sans-serif;
 }
-h1 {
-	font-size: 16px;
-	margin-top: 0;
 }
 p {
-	color: rgb(107, 114, 128);
 	font-size: 15px;
 	margin-bottom: 10px;
 	margin-top: 5px;
 }
 .card {
-	max-width: 620px;
-	margin: 0 auto;
 	padding: 16px;
-	border: 1px solid lightgray;
 	border-radius: 16px;
 }
-.card p:last-child {
-	margin-bottom: 0;
 }

+:root {
+	--card-bg: white;
+	--main-btn-primary: black;
+	--main-btn-secundary: white;
 }
+body {
+	padding: 1rem;
+	font-family: -apple-system, BlinkMacSystemFont, "Arial", sans-serif;
+	background-image: url("images/background.png");
 }
 p {
+	color: rgb(24, 24, 24);
 	font-size: 15px;
 	margin-bottom: 10px;
 	margin-top: 5px;
+	text-align: justify;
+	line-height: 1.7;
+}
+button {
+	border: 0;
+	border-radius: 0.25rem;
+	font-size: 1rem;
+	line-height: 1.2;
+	padding: 0.25rem 0.5rem;
+	margin: 0.25rem;
+	cursor: pointer;
+}
+a.button {
+	display: block;
+	border: 0;
+	border-radius: 0.25rem;
+	font-size: 1rem;
+	line-height: 1.2;
+	padding: 0.25rem 0.5rem;
+	margin: 0.25rem;
+	cursor: pointer;
+	text-decoration: none;
+	text-align: center;
+	color: black;
+}
+#head-flex-container {
+	margin-bottom: 2rem;
+	display: flex;
+	flex-direction: row;
+	flex-wrap: wrap-reverse;
+	justify-content: space-between;
+	align-items: flex-end;
+	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;
+}
+#main-buttons-flex-container {
+	margin-top: 1.5rem;
+	display: flex;
+	flex-direction: row;
+	flex-wrap: wrap;
+	justify-content: space-evenly;
+	align-items: baseline;
+}
+#main-buttons-flex-container > .button {
+	flex: 1;
+	white-space: nowrap;
+	min-width: 230px;
+}
+#cards-container {
+	padding: 0.5rem 0;
 }
 .card {
+	min-width: 230px;
+	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 {
+	display: flex;
+	flex-direction: row;
+	flex-wrap: wrap;
+	justify-content: space-between;
+	align-items: flex-start;
+	column-gap: 20px;
+	min-width: 100%;
+}
+.card-description-flex-container p:first-child {
+	flex: 2 1 780px;
+}
+.card-description-flex-container div:nth-child(2) {
+	flex: 55 1 0;
+}
+.card-description-flex-container > p {
+	display: block;
+	text-align: justify;
+}
+.buttons-flex-container {
+	display: flex;
+	flex-direction: column;
+	gap: 7px 5px;
+	flex: 1;
+    max-width: 500px;
 }
+.divided-buttons-flex-container {
+	display: flex;
+	flex-direction: row;
+	gap: 0 5px;
 }
+.divided-buttons-flex-container > .button {
+	flex: 1;
+}
+footer > p {
+	color: rgb(136, 138, 142);
+	font-size: 10px;
+}
+/* Buttons Styling */
+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 {
+	vertical-align:bottom;
+	width: 20px;
+}
+#main-buttons-flex-container > .button {
+	padding: 0.5rem 0.75rem;
+}
+#main-buttons-flex-container > .button:hover {
+	box-shadow: -7px -7px 20px 0px #fff9,
+				-4px -4px 5px 0px #fff9,
+				7px 7px 20px 0px #0002,
+				4px 4px 5px 0px #0001;
+}
+#main-buttons-flex-container > .button#hf {
+	border-radius: 0;
+	background-color: var(--main-btn-primary);
+	border: 1px solid var(--main-btn-primary);
+	color: var(--main-btn-secundary);
+	transition: 0.4s;
+}
+#main-buttons-flex-container > .button#ccad {
+	border-radius: 0;
+	background-color: var(--main-btn-primary);
+	border: 1px solid var(--main-btn-primary);
+	color: var(--main-btn-secundary);
+	transition: 0.4s;
+}
+#main-buttons-flex-container > .button#hf:hover,
+#main-buttons-flex-container > .button#ccad:hover {
+	background: var(--main-btn-secundary);
+	color: var(--main-btn-primary);
+	border: none;
+}
+#main-buttons-flex-container > .button#tutorial {
+	border-radius: 0;
+	background-color: var(--main-btn-secundary);
+	border: 1px solid var(--main-btn-primary);
+	transition: 0.4s;
+}
+.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) {
+    button#translate  {
+        width: 100%;
+    }
+}