Si no tienes muy buena habilidad para la redacción ni la seducción, no te preocupes, la mayoría de los programadores tampoco. Aunque mejorar nuestras habilidades blandas debe ser algo fundamental para nuestro desarrollo, a veces tenemos que buscar soluciones que se adapten a nuestro tiempo, necesidades y habilidades.
Para este 14 de febrero, vamos a hacer algo diferente: crearemos un generador de poemas usando IA. Aunque pueda parecer más fácil entrar a ChatGPT, DeepSeek o una herramienta de generación de texto y pedirle un poema, nosotros lo haremos a nuestra manera.
Si vienes aquí de pasada y lo único que quieres es el código, te lo dejamos fácil. Ahora, si prefieres la explicación, abajo del bloque de código lo explicaremos paso a paso.
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Generador de Poemas de San Valentín</title>
<style>
body { font-family: Arial, sans-serif; text-align: center; }
textarea { width: 80%; height: 100px; margin-top: 10px; }
</style>
</head>
<body>
<h1>💖 Generador de Poemas de Amor 💖</h1>
<button onclick="generarPoema()">Generar Poema</button>
<textarea id="poema" readonly></textarea>
<script>
async function generarPoema() {
const apiKey = "TU_CLAVE_OPENAI"; // Reemplázala con tu clave de OpenAI
const prompt = "Escribe un poema romántico para San Valentín, breve y con un toque de nostalgia.";
const response = await fetch("https://api.openai.com/v1/completions", {
method: "POST",
headers: {
"Content-Type": "application/json",
"Authorization": `Bearer ${apiKey}`
},
body: JSON.stringify({
model: "text-davinci-003",
prompt: prompt,
max_tokens: 150
})
});
const data = await response.json();
document.getElementById("poema").value = data.choices[0].text.trim();
}
</script>
</body>
</html>
¿Qué hace este código?
async function generarPoema(): Es una función que se activa cuando el usuario hace clic en el botón. La palabraasyncindica que la función va a esperar un tiempo mientras obtiene información de otro lugar (en este caso, la API de OpenAI).const apiKey = "TU_CLAVE_OPENAI";: Aquí tienes que colocar tu clave personal de OpenAI, que te permitirá hacer uso de la API (la herramienta que genera el poema).const prompt = "Escribe un poema romántico...";: El “prompt” es como la pregunta que le haces a la IA. En este caso, le estamos pidiendo que genere un poema romántico para San Valentín.const response = await fetch("https://api.openai.com/v1/completions", {...});: Esta línea hace una solicitud (o “pregunta”) a OpenAI. Le estamos diciendo que use el modelo de lenguaje “text-davinci-003” para escribir el poema basado en el “prompt” que le dimos.method: "POST": Significa que estamos enviando datos a OpenAI.headers: {}: Aquí le decimos a OpenAI qué tipo de datos estamos enviando y que nuestra clave de API es válida.body: JSON.stringify({...}): Aquí es donde le decimos a OpenAI qué queremos exactamente (en este caso, un poema romántico) y cuántas palabras queremos como máximo (150).
const data = await response.json();: Esta línea espera la respuesta de OpenAI y la convierte en un formato que podamos leer.document.getElementById("poema").value = data.choices[0].text.trim();: Finalmente, esta línea coloca el poema generado dentro del área de texto que creamos antes, para que el usuario lo vea.