Crea tu propia red neuronal que forme paletas de colores
Fatima Arámbula ● 5 min
Este artículo será un paso a paso para crear tu propia red neuronal en el navegador que, según el color de entrada que le des, te dará otros 3 colores diferentes que combinen entre sí para formar una paleta de colores.
Para poder realizar este tutorial te recomiendo que revises mi artículo anterior “Redes neuronales artificiales” en donde abordamos los conceptos básicos como qué es inteligencia artificial, qué son las redes neuronales y sus principales componentes como el perceptrón, entradas, salidas, y diversas capas como la capa de entrada, capa de salida y capas ocultas.
No es necesario saber estos conceptos de memoria para seguir este tutorial, pero te servirán como base para entender mejor qué es lo que está pasando dentro de la red neuronal que vamos a programar.
Entonces, ahora sí, ¡manos a la obra!
Para este tutorial utilizaremos brain.js, una librería de redes neuronales desarrollada en JavaScript (para más información puedes consultar la página oficial de brain.js https://brain.js.org/ , donde tienen tutoriales y más ejemplos).
Para este programa queremos darle al usuario a elegir un color cualquiera, y dependiendo del color que nos indique la red neuronal deberá automáticamente mostrar otros 3 colores que combinen con el color base para así formar una paleta de colores.
Para poder utilizar una red neuronal podemos dividirlo en 3 simples pasos:
- Inicializar la red neuronal
- Entrenarla
- Predecir y usar los resultados
Para inicializar la red neuronal es necesario importar la librería de brain.js
Como nuestro programa lo desarrollaremos en html y javascript las líneas de código necesarias son las siguientes:
<script src="https://unpkg.com/brain.js"></script>//Inicializar red neuronal
var network = new brain.NeuralNetwork();Para entrenar la red neuronal hará falta tener diversos ejemplos de paletas de colores ya creadas que se adapten a nuestro gusto. En este punto es donde definiremos la entrada y salida de la red neuronal y cómo esperamos que se comporte. En este caso nuestra entrada sería un color que el usuario nos va a proporcionar. Y la salida serán los tres diferentes colores que queremos que la red neuronal prediga.
Pero, ¿cómo logramos decirle a la computadora qué color queremos? Para que la computadora entienda los colores debemos usar el sistema RGB término que se compone por “red”, “green”, “blue” o rojo, verde y azul. Le indicaremos a nuestro programa cuánto de rojo, cuánto de verde y cuánto de azul queremos para formar el color deseado. Lo mostraremos en un rango de 0 a 1.
Imaginemos que el usuario nos da el color azul de entrada, y nosotros esperamos que la red neuronal nos muestre tres colores que combinen (como en el caso de arriba). Para lograr eso el código es el siguiente:
network.train([
{
input: {
rojo: 0.7, verde: 0.9, azul: 0.9
},
output: {
rojo1: 0.9, verde1: 0.9, azul1: 0.8,
rojo2: 1, verde2: 0.7,azul2: 0.7,
rojo3: 0.9, verde3: 0.5, azul3: 0.6,
},
}
]);En esta parte lo que estamos haciendo es entrenar la neurona y pasarle los ejemplos, de entrada simplemente le pasamos la combinación de rojo, verde y azul para formar el color azul bajito del ejemplo, y como salida regresamos 3 combinaciones de colores, donde rojo1, verde1 y azul1 pertenecen a la salida 1 y así sucesivamente.
Es necesario pasarle a la red neuronal más de un ejemplo para que verdaderamente pueda predecir paletas de colores con diversas entradas. Los ejemplos de entrada dependerán de nuestro gusto para que la red neuronal se ajuste a este.
En este caso en particular supongamos que queremos usar la red neuronal para crear paletas de colores muy sutiles, nuestros ejemplos deberán ser paletas de colores claras para que se ajuste a eso. Por lo tanto agregaremos los siguientes ejemplos para entrenarla:
{input:{rojo:0.99,verde:0.94,azul:0.94},output:{rojo1:0.96,verde1:0.87,azul1:0.82,rojo2:0.85,verde2:0.82,azul2:0.76,rojo3:0.8,verde3:0.73,azul3:0.65,},},
{input:{rojo:0.99,verde:0.85,azul:0.83},output:{rojo1:0.99,verde1:0.96,azul1:0.94,rojo2:0.97,verde2:0.89,azul2:0.81,rojo3:0.96,verde3:0.78,azul3:0.67,},},
{input:{rojo:1,verde:0.97,azul:0.86},output:{rojo1:0.9,verde1:0.87,azul1:0.78,rojo2:0.76,verde2:0.72,azul2:0.64,rojo3:0.63,verde3:0.6,azul3:0.51,},},
{input:{rojo:1,verde:0.96,azul:0.92},output:{rojo1:0.87,verde1:0.93,azul1:0.94,rojo2:0.96,verde2:0.78,azul2:0.67,rojo3:0.7,verde3:0.72,azul3:0.64,},},
{input:{rojo:0.79,verde:0.97,azul:0.89},output:{rojo1:0.97,verde1:0.93,azul1:0.93,rojo2:0.96,verde2:0.87,azul2:0.92,rojo3:0.89,verde3:0.73,azul3:0.83,},},
{input:{rojo:0.8,verde:0.61,azul:0.43},output:{rojo1:0.95,verde1:0.79,azul1:0.54,rojo2:0.95,verde2:0.85,azul2:0.76,rojo3:0.78,verde3:0.76,azul3:0.74,},},
{input:{rojo:0.63,verde:0.58,azul:0.49},output:{rojo1:0.91,verde1:0.83,azul1:0.71,rojo2:0.96,verde2:0.9,azul2:0.8,rojo3:0.89,verde3:0.8,azul3:0.76,},},
{input:{rojo:0.47,verde:0.53,azul:0.47},output:{rojo1:0.64,verde1:0.7,azul1:0.62,rojo2:0.74,verde2:0.82,azul2:0.71,rojo3:0.97,verde3:0.93,azul3:0.89,},},
{input:{rojo:0.63,verde:0.79,azul:0.89},output:{rojo1:0.76,verde1:0.69,azul1:0.57,rojo2:0.81,verde2:0.77,azul2:0.65,rojo3:0.92,verde3:0.89,azul3:0.78,},},
{input:{rojo:0.67,verde:0.67,azul:0.67},output:{rojo1:0.64,verde1:0.92,azul1:0.95,rojo2:0.8,verde2:0.95,azul2:0.96,rojo3:0.96,verde3:0.98,azul3:0.98,},},
{input:{rojo:0.6,verde:0.61,azul:0.52},output:{rojo1:0.85,verde1:0.67,azul1:0.61,rojo2:0.94,verde2:0.85,azul2:0.82,rojo3:0.96,verde3:0.93,azul3:0.93,},},
{input:{rojo:0.67,verde:0.67,azul:0.67},output:{rojo1:1,verde1:0.78,azul1:0.78,rojo2:1,verde2:0.89,azul2:0.89,rojo3:0.96,verde3:0.96,azul3:0.96,},},
{input:{rojo:0.67,verde:0.67,azul:0.67},output:{rojo1:0.73,verde1:0.73,azul1:0.73,rojo2:0.95,verde2:0.86,azul2:0.73,rojo3:0.98,verde3:0.97,azul3:0.81,},},
{input:{rojo:0.94,verde:0.87,azul:0.75},output:{rojo1:1,verde1:0.75,azul1:0.82,rojo2:1,verde2:0.88,azul2:0.88,rojo3:1,verde3:0.98,azul3:0.98,},},
{input:{rojo:0.69,verde:0.75,azul:0.84},output:{rojo1:0.75,verde1:0.85,azul1:0.84,rojo2:0.87,verde2:0.87,azul2:0.87,rojo3:0.96,verde3:0.95,azul3:0.95,},},
{input:{rojo:0.96,verde:0.95,azul:0.95},output:{rojo1:0.87,verde1:0.87,azul1:0.87,rojo2:0.75,verde2:0.85,azul2:0.84,rojo3:0.69,verde3:0.75,azul3:0.84,},},
{input:{rojo:0.98,verde:0.93,azul:0.93},output:{rojo1:0.94,verde1:0.85,azul1:0.85,rojo2:0.78,verde2:0.85,azul2:0.92,rojo3:0.93,verde3:0.95,azul3:0.98,},},
{input:{rojo:0.99,verde:0.96,azul:0.93},output:{rojo1:0.98,verde1:0.91,azul1:0.91,rojo2:0.97,verde2:0.87,azul2:0.87,rojo3:1,verde3:0.77,azul3:0.82,},},
{input:{rojo:0.97,verde:0.96,azul:0.89},output:{rojo1:0.82,verde1:0.88,azul1:0.78,rojo2:1,verde2:0.89,azul2:0.65,rojo3:0.98,verde3:0.77,azul3:0.67,},},Una vez entrenada nuestra red neuronal el último paso es predecir y usar esos resultados. Para poder predecir se utilizará el siguiente código:
//Ejemplo de entrada
var entrada = {
rojo: 1,
verde: 0.5,
azul: 0.7,
};
//Obtener la predicción de la red
var resultado = network.run(entrada);
//En este ejemplo nuestra red arrojó la siguiente salida:
output: {
azul1: 0.590060293674469
azul2: 0.7216562032699585
azul3: 0.7065945267677307
rojo1: 0.9565170407295227
rojo2: 0.928886353969574
rojo3: 0.799133837223053
verde1: 0.7809740304946899
verde2: 0.838914155960083
verde3: 0.8030785322189331
}Ya tenemos el código base de nuestra red neuronal programada, pero ahora queremos que el usuario pueda interactuar con el programa para poder predecir las paletas de colores de manera automática.
El código final quedaría de la siguiente manera:
<!DOCTYPE html>
<html>
<head>
<title>Paleta de colores - Red neuronal</title>
<style type="text/css">
/*css para mostrar los colores*/
#entrada, #div1, #div2, #div3 {
padding: 5rem;
font-size: 5rem;
margin-left: 15rem;
}
</style>
</head>
<body>
<input data-jscolor="{value:'#CC66FF'}", onInput="update(this.jscolor)">
<div id="entrada">
Entrada/Input
</div>
<div id="div1">
Salida/Output 1
</div>
<div id="div2">
Salida/Output 2
</div>
<div id="div3">
Salida/Output 3
</div>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jscolor/2.4.5/jscolor.min.js"></script>
<script src="https://unpkg.com/brain.js"></script>
<script type="text/javascript">
//Inicializar red neuronal
var network = new brain.NeuralNetwork();
//Entrenarla, darle ejemplos de paletas de colores ya creadas
network.train([
{
input:{rojo:0.7,verde:0.9,azul:0.9},
output:{
rojo1:0.9,verde1:0.9,azul1:0.8,
rojo2:1,verde2:0.7,azul2:0.7,
rojo3:0.9,verde3:0.5,azul3:0.6,
},
},
{input:{rojo:0.99,verde:0.94,azul:0.94},output:{rojo1:0.96,verde1:0.87,azul1:0.82,rojo2:0.85,verde2:0.82,azul2:0.76,rojo3:0.8,verde3:0.73,azul3:0.65,},},
{input:{rojo:0.99,verde:0.85,azul:0.83},output:{rojo1:0.99,verde1:0.96,azul1:0.94,rojo2:0.97,verde2:0.89,azul2:0.81,rojo3:0.96,verde3:0.78, azul3:0.67,},},
{input:{rojo:1,verde:0.97,azul:0.86},output:{rojo1:0.9,verde1:0.87,azul1:0.78,rojo2:0.76,verde2:0.72,azul2:0.64,rojo3:0.63,verde3:0.6,azul3:0. 51,},},
{input:{rojo:1,verde:0.96,azul:0.92},output:{rojo1:0.87,verde1:0.93,azul1:0.94,rojo2:0.96,verde2:0.78,azul2:0.67,rojo3:0.7,verde3:0.72,azul3:0. 64,},},
{input:{rojo:0.79,verde:0.97,azul:0.89},output:{rojo1:0.97,verde1:0.93,azul1:0.93,rojo2:0.96,verde2:0.87,azul2:0.92,rojo3:0.89,verde3:0.73, azul3:0.83,},},
{input:{rojo:0.8,verde:0.61,azul:0.43},output:{rojo1:0.95,verde1:0.79,azul1:0.54,rojo2:0.95,verde2:0.85,azul2:0.76,rojo3:0.78,verde3:0.76, azul3:0.74,},},
{input:{rojo:0.63,verde:0.58,azul:0.49},output:{rojo1:0.91,verde1:0.83,azul1:0.71,rojo2:0.96,verde2:0.9,azul2:0.8,rojo3:0.89,verde3:0.8,azul3:0. 76,},},
{input:{rojo:0.47,verde:0.53,azul:0.47},output:{rojo1:0.64,verde1:0.7,azul1:0.62,rojo2:0.74,verde2:0.82,azul2:0.71,rojo3:0.97,verde3:0.93, azul3:0.89,},},
{input:{rojo:0.63,verde:0.79,azul:0.89},output:{rojo1:0.76,verde1:0.69,azul1:0.57,rojo2:0.81,verde2:0.77,azul2:0.65,rojo3:0.92,verde3:0.89, azul3:0.78,},},
{input:{rojo:0.67,verde:0.67,azul:0.67},output:{rojo1:0.64,verde1:0.92,azul1:0.95,rojo2:0.8,verde2:0.95,azul2:0.96,rojo3:0.96,verde3:0.98, azul3:0.98,},},
{input:{rojo:0.6,verde:0.61,azul:0.52},output:{rojo1:0.85,verde1:0.67,azul1:0.61,rojo2:0.94,verde2:0.85,azul2:0.82,rojo3:0.96,verde3:0.93, azul3:0.93,},},
{input:{rojo:0.67,verde:0.67,azul:0.67},output:{rojo1:1,verde1:0.78,azul1:0.78,rojo2:1,verde2:0.89,azul2:0.89,rojo3:0.96,verde3:0.96,azul3:0. 96,},},
{input:{rojo:0.67,verde:0.67,azul:0.67},output:{rojo1:0.73,verde1:0.73,azul1:0.73,rojo2:0.95,verde2:0.86,azul2:0.73,rojo3:0.98,verde3:0.97, azul3:0.81,},},
{input:{rojo:0.94,verde:0.87,azul:0.75},output:{rojo1:1,verde1:0.75,azul1:0.82,rojo2:1,verde2:0.88,azul2:0.88,rojo3:1,verde3:0.98,azul3:0.98,},},
{input:{rojo:0.69,verde:0.75,azul:0.84},output:{rojo1:0.75,verde1:0.85,azul1:0.84,rojo2:0.87,verde2:0.87,azul2:0.87,rojo3:0.96,verde3:0.95, azul3:0.95,},},
{input:{rojo:0.96,verde:0.95,azul:0.95},output:{rojo1:0.87,verde1:0.87,azul1:0.87,rojo2:0.75,verde2:0.85,azul2:0.84,rojo3:0.69,verde3:0.75, azul3:0.84,},},
{input:{rojo:0.98,verde:0.93,azul:0.93},output:{rojo1:0.94,verde1:0.85,azul1:0.85,rojo2:0.78,verde2:0.85,azul2:0.92,rojo3:0.93,verde3:0.95, azul3:0.98,},},
{input:{rojo:0.99,verde:0.96,azul:0.93},output:{rojo1:0.98,verde1:0.91,azul1:0.91,rojo2:0.97,verde2:0.87,azul2:0.87,rojo3:1,verde3:0.77,azul3:0. 82,},},
{input:{rojo:0.97,verde:0.96,azul:0.89},output:{rojo1:0.82,verde1:0.88,azul1:0.78,rojo2:1,verde2:0.89,azul2:0.65,rojo3:0.98,verde3:0.77,azul3:0. 67,},},
]);
//funcion que actualiza los colores cada que se selecciona uno distinto
function update(color) {
//Obtener el rgb del color seleccionado en el picker
var rgb = [color.channels.r, color.channels.g, color.channels.b];
//Obtener los elementos para cambiarles el color
var divEntrada = document.getElementById("entrada");
var div1 = document.getElementById("div1");
var div2 = document.getElementById("div2");
var div3 = document.getElementById("div3");
//Asignar el color del div de entrada por el que el usuario seleccionó
divEntrada.style.background = color.toHEXString();
//Tomar el fondo actual elegido por el usuario,
//para usarlo de entrada para que la red nos de su
//prediccion de los otros tres colores para formar la paleta
//(se dividen entre 255 porque el picker lo regresa en un rango de 0 a 255
// y nosotros lo necesitamos en un rango de 0 a 1)
var entrada = {
rojo: rgb[0]/255,
verde: rgb[1]/255,
azul: rgb[2]/255,
};
//Obtener la prediccion de la red
var resultado = network.run(entrada);
//Mostrar el resultado en consola
console.log(resultado);
//Los resultados se pasan a string y se le da formato para poder utilizarlos
var x1 = "rgb(" + [resultado.rojo1*255,resultado.verde1*255,resultado.azul1*255].join(',') + ")" ;
var x2 = "rgb(" + [resultado.rojo2*255,resultado.verde2*255,resultado.azul2*255].join(',') + ")" ;
var x3 = "rgb(" + [resultado.rojo3*255,resultado.verde3*255,resultado.azul3*255].join(',') + ")" ;
//Se asigna cada color que predijo la red al fondo del div para mostrarlos
div1.style.backgroundColor = x1;
div2.style.backgroundColor = x2;
div3.style.backgroundColor = x3;
}
</script>
</body>
</html>Y listo, de esta manera logramos ver en el navegador nuestra red funcionando en tiempo real. Recuerda que puedes personalizar los ejemplos de entrenamiento para que la red se ajuste a tus necesidades y gusto personal.
