Vamos a usar GPT-3 para dibujar, o intentarlo. Y no hablo de usar DALL-E, si no de usar el propio GPT-3 para que genere el dibujo, para que esto sea posible el dibujo debería de cumplir las siguientes condiciones:
- Tiene que estar realizado con texto. GPT-3 solo genera texto.
- Tiene que poderse incluir una descripción del mismo. Para poder pasarla a GPT-3 como texto a completar
SVG
SVG es un lenguaje de descripción de gráficos vectoriales. Permite describir dibujos usando un lenguaje basado en XML. Es decir, un lenguaje de etiquetas. Como SVG puede ir directamente en el código HTML vamos a pasar a DALL-E el principio de una web con una etiqueta abierta de SVG (a la que podemos añadir el ancho y el alto fijando las dimensiones del dibujo). Para describir el dibujo que queremos, justo antes de esa etiqueta pondrrmos un comentario HTML (<!– –>) describiendo el dibujo.
Por ejemplo le pedimos una estrella
<!DOCTYPE html>
<html>
<body>
<!-- svg code to draw a star -->
<svg height="210" width="500"
Le damos a autocompletar
<!DOCTYPE html>
<html>
<body>
<!-- svg code to draw a star -->
<svg height="210" width="500"
xmlns="http://www.w3.org/2000/svg">
<!-- Define five points. -->
<polygon points="100,10 40,198 190,78 10,78 160,198"
style="fill:lime;stroke:purple;stroke-width:5;fill-rule:nonzero;" />
<!-- Define the top right point. -->
<circle cx="100" cy="10" r="4" fill="red" />
<!-- Define the left middle point. -->
<circle cx="40" cy="198" r="4" fill="red" />
<!-- Define the bottom point. -->
<circle cx="190" cy="78" r="4" fill="red" />
<!-- Define the top left point. -->
<circle cx="10" cy="78" r="4" fill="red" />
<!-- Define the right middle point. -->
<circle cx="160" cy="198" r="4" fill="red" />
</svg>
</body>
</html>
¡Correcto!
Ahora probaremos a pedir un coche
<!DOCTYPE html>
<html>
<body>
<!-- svg code to draw a car-->
<svg height="210" width="500" xmlns="http://www.w3.org/2000/svg">
<defs>
<linearGradient id="grad1" x1="0%" y1="0%" x2="100%" y2="0%">
<stop offset="0%" style="stop-color:rgb(255,255,0);stop-opacity:1" />
<stop offset="100%" style="stop-color:rgb(255,0,0);stop-opacity:1" />
</linearGradient>
</defs>
<rect x="1" y="1" width="498" height="208" fill="url(#grad1)" />
<text x="280" y="150" font-family="Verdana" font-size="35">My car</text>
</svg>
</body>
</html>
No ha salido bien
Demosle otra oportunidad
<!DOCTYPE html>
<html>
<body>
<!-- svg code to draw a car-->
<svg height="210" width="500" xmlns="http://www.w3.org/2000/svg">
<rect width="300" height="100" style="fill:rgb(0,0,255);stroke-width:3;stroke:rgb(0,0,0)" />
<rect x="200" y="10" width="100" height="30" style="fill:rgb(0,255,0);stroke-width:3;stroke:rgb(0,0,0)" />
<circle cx="100" cy="100" r="80" fill="green" />
<rect x="20" y="20" width="10" height="10" style="fill:rgb(255,0,0);stroke-width:3;stroke:rgb(0,0,0)" />
<rect x="20" y="80" width="10" height="10" style="fill:rgb(255,0,0);stroke-width:3;stroke:rgb(0,0,0)" />
<rect x="40" y="20" width="10" height="10" style="fill:rgb(255,0,0);stroke-width:3;stroke:rgb(0,0,0)" />
<rect x="40" y="80" width="10" height="10" style="fill:rgb(255,0,0);stroke-width:3;stroke:rgb(0,0,0)" />
Sorry, your browser does not support inline SVG.
</svg>
</body>
</html>
Al menos parece que intenta dibujar un coche.
Ascii art
Lo primero que se me ocurrió es Ascii Art, un tipo de dibujo realizado con caracteres de texto, la idea era buena pero el resultado fue….curioso, a diversa peticiones:
A dog in ascii art
A bunny in ascii art
Respondió con el siguiente dibujo
,#####,
#_ _#
|a` `a|
| u |
\ = /
|\___/|
___ ____/: :\____ ___
.' `.-===-\ /-===-.` '.
/ .-"""""-.-"""""-. \
/' =:= '\
.' ' .: o -=:=- o :. ' `.
(.' /'. '-.....-'-.....-' .'\ '.)
/' ._/ ". --:-- ." \_. '\
| .'| ". ---:--- ." |'. |
| : | | ---:--- | | : |
\ : | |_____._____| | : /
/ ( |----|------| ) \
/... .| | | | |. ...\
|::::/'' jgs / | \ ''\::::|
'"""" /' .L_ `\ """"'
/'-.,__/` `\__..-'\
; / \ ;
: / \ |
| / \. |
|`../ | ,/
( _ ) | _)
| | | |
|___| \___|
:===| |==|
\ / |__|
/\/\ /"""`8.__
|oo| \__.//___)
|==|
\__/
Como poco inquitante.
A otras muchas peticiones respondió con cosas sin sentido o espacios en blanco
Emojis
Este era fácil y supuse que lo haría bien, usar emoticonos para representar ideas.
JS Canvas
Otra forma de dibujar es usando un canvas en una web y usar código JS para dibujar en el lo que quieras. la idea es parecida a SVG, pero con código JS.
Primero preparamos la web;
<!DOCTYPE html>
<html>
<body>
<canvas id="star" width="600" height="600"></canvas>
</body>
<script>
//Aquí ira el código generado por JS
</script>
La completaremos con el código que genere GPT-3
En lugar de pasarle la cabecera de la web le pasamos solo un comentario:
/* js code to draw a star in a canvas */
Le pedimos una estrella:
<!DOCTYPE html>
<html>
<body>
<canvas id="star" width="600" height="600"></canvas>
</body>
<script>
/* js code to draw a star in a canvas */
// Define the points of the star.
var points = 5;
var innerRadius = 50;
var outerRadius = 100;
var angle = Math.PI / points;
var x, y;
// Get the context of the canvas.
var canvas = document.getElementById('star');
var ctx = canvas.getContext('2d');
// Begin the path.
ctx.beginPath();
// Move to the first point.
x = canvas.width / 2 + Math.cos(0) * outerRadius;
y = canvas.height / 2 + Math.sin(0) * outerRadius;
ctx.moveTo(x, y);
// For each point draw a line to it.
for (i = 1; i <= points * 2; i++) {
x = canvas.width / 2 + Math.cos(angle * i) * (i % 2 === 0 ? innerRadius : outerRadius);
y = canvas.height / 2 + Math.sin(angle * i) * (i % 2 === 0 ? innerRadius : outerRadius);
ctx.lineTo(x, y);
}
// Close the path.
ctx.closePath();
// Fill the path.
ctx.fillStyle = '#000';
ctx.fill();
</script>
¡Casi! Y es fácil corregir el problema (basta con comentar el calculo del primer punto). Ahora, y esto le da nota extra, el método sirve para estrellas de cualquier numero de puntas, basta con cambiar la variable «points».
Ahora le pedimos un coche.
<!DOCTYPE html>
<html>
<body>
<canvas id="canvas" width="600" height="600"></canvas>
</body>
<script>
/* js code to draw a car in a canvas */
var canvas = document.getElementById('canvas');
var context = canvas.getContext('2d');
// draw car body
context.beginPath();
context.moveTo(75, 25);
context.quadraticCurveTo(25, 25, 25, 62.5);
context.quadraticCurveTo(25, 100, 50, 100);
context.quadraticCurveTo(50, 120, 30, 125);
context.quadraticCurveTo(60, 120, 65, 100);
context.quadraticCurveTo(125, 100, 125, 62.5);
context.quadraticCurveTo(125, 25, 75, 25);
context.stroke();
// draw car wheels
context.beginPath();
context.arc(75, 100, 10, 0, 2 * Math.PI);
context.fillStyle = "black";
context.fill();
context.lineWidth = 1;
context.strokeStyle = "black";
context.stroke();
context.closePath();
context.beginPath();
context.arc(125, 100, 10, 0, 2 * Math.PI);
context.fill();
context.lineWidth = 1;
context.stroke();
context.closePath();
</script>
La idea está ahí pero no es lo que queríamos
Vamos a darle más detalles a ver… «Un coche deportivo rojo»
<!DOCTYPE html>
<html>
<body>
<canvas id="canvas" width="1600" height="1600"></canvas>
</body>
<script>
/* js code to draw a red car in a canvas with id "canvas" */
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
// draw a rectangle for the car body
ctx.fillStyle = "red";
ctx.fillRect(30, 30, 150, 50);
// draw a triangle for the car roof
ctx.beginPath();
ctx.moveTo(40, 30);
ctx.lineTo(140, 30);
ctx.lineTo(90, 10);
ctx.fill();
// draw two circles for the car wheels
ctx.beginPath();
var centerX = 50;
var centerY = 75;
var radius = 20;
// draw left wheel
ctx.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
// move center coordinates to right wheel
centerX += 100;
// draw right wheel
ctx.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
// color the wheels
ctx.fillStyle = "black";
ctx.fill();
// reset the current path
ctx.beginPath();
// draw a line in the middle of the car to separate the two colors
ctx.moveTo(50, 30);
ctx.lineTo(50, 80);
ctx.stroke();
// stroke the current path with a thick line
ctx.lineWidth = 3;
ctx.stroke();
</script>
No es lo que tenía en mente, pero bueno un coche es, no sé si deportivo, y rojo también.
Conclusiones
Con dibujos muy sencillos e insistiendo a base de prueba y error se puede conseguir algo. Menos en Ascii Art que es una causa pérdida. No es un sistema cómodo, ni práctico. Eso no quita lo sorprendente que es que entienda lo que le pides y trate de dibujarlo, aunque sea con resultados irregulares.
Es posible que con un entrenamiento adecuado se puedan mejorar estos resultados. Hay que tener en cuenta que esta forma de dibuja obliga a entender como se relacionan los distintos elementos del dibujo entre ellos. no solo es dibuja la ruedas con dos círculos es colocarlas correctamente respecto al resto del dibujo.
Puedes ver un vídeo sobre el mismo tema en mi canal de Youtube:
Construyendo a Chispas 