Este código es un generador de imágenes a partir de texto utilizando la API de OpenAI. Aquí hay una descripción básica de su estructura y funcionalidad:
El código utiliza HTML, CSS y JavaScript para lograr esta funcionalidad. La estructura del generador de imágenes contiene un encabezado, un campo de entrada de texto, un botón de generación de imagen, una sección para mostrar la imagen generada y un indicador de carga (loader).
El código CSS proporciona estilos de diseño y apariencia al generador de imágenes. Define el diseño de la página, los estilos de los elementos y la apariencia de los botones y la imagen generada.
El código JavaScript maneja la funcionalidad principal del generador de imágenes. Cuando se hace clic en el botón de generación de imagen (#generar), se ejecuta la función generarImagen(). Esta función obtiene el texto ingresado por el usuario (#texto), muestra el indicador de carga y realiza una solicitud a la API de OpenAI para generar una imagen basada en el texto proporcionado.
La constante API_KEY contiene la clave de la API de OpenAI que se debe proporcionar para usar el servicio. Asegúrate de reemplazar 'TU API KEY AQUÍ' con tu propia clave de API antes de utilizar el código.
En resumen, este código crea una página web interactiva que permite a los usuarios generar imágenes a partir de texto. Al ingresar el texto deseado y hacer clic en el botón, se generará una imagen única y se mostrará en la página para su descarga.
<![CDATA[
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Generador de imágenes por texto</title>
<link rel="stylesheet" href="style.css">
<style type="text/css">
* {
box-sizing: border-box;
}
html{
height: 100%;
}
body {
margin: 0;
font-family: Arial, sans-serif;
background: -webkit-linear-gradient(11deg, #75356a, #92cbbd);
background: -moz-linear-gradient(11deg, #75356a, #92cbbd);
background: -ms-linear-gradient(11deg, #75356a, #92cbbd);
background: -o-linear-gradient(11deg, #75356a, #92cbbd);
background: linear-gradient(11deg, #75356a, #92cbbd);
}
.container {
max-width: 800px;
margin:50px auto;
padding: 20px 10px;
background-color: rgb(250, 250, 250, 0.3);
border-radius: 15px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
@media only screen and (max-width:810px){
.container{
width: 95%;
}
}
h1 {
margin-top: 0;
font-size: 36px;
text-align: center;
color: #f5f5f5;
}
input[type="text"] {
padding: 10px;
margin-bottom: 20px;
width: 100%;
max-width: 600px;
border-radius: 5px;
border: none;
outline: none;
font-size: 18px;
}
button {
padding: 10px 20px;
background: -webkit-linear-gradient(294deg, #32a588, #5da873);
background: -moz-linear-gradient(294deg, #32a588, #5da873);
background: -ms-linear-gradient(294deg, #32a588, #5da873);
background: -o-linear-gradient(294deg, #32a588, #5da873);
background: linear-gradient(294deg, #32a588, #5da873);
color: #fff;
border: none;
border-radius: 5px;
cursor: pointer;
font-size: 18px;
transition: background-color 0.2s ease;
}
a{
padding: 10px 20px;
background: -webkit-linear-gradient(4deg, #61b433, #c1b065);
background: -moz-linear-gradient(4deg, #61b433, #c1b065);
background: -ms-linear-gradient(4deg, #61b433, #c1b065);
background: -o-linear-gradient(4deg, #61b433, #c1b065);
background: linear-gradient(4deg, #61b433, #c1b065);
color: #fff;
border: none;
border-radius: 5px;
cursor: pointer;
font-size: 18px;
transition: background-color 0.2s ease;
}
#imagen {
width: 500px;
margin: 30px auto;
text-align: center;
}
@media only screen and (max-width:810px){
#imagen{
width: 95%;
}
}
#imagen img {
max-width: 100%;
height: auto;
border-radius: 15px;
}
.loader {
border: 8px solid rgba(0, 0, 0, 0.1);
border-top: 8px solid #4CAF50;
border-radius: 50%;
width: 64px;
height: 64px;
animation: spin 1s linear infinite;
margin: 0 -25px auto;
}
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
.loader-wrapper {
position: relative;
}
.loader-wrapper:before {
content: "";
display: block;
padding-top: 56.25%; /* Proporción 16:9 */
}
.loader {
/* Estilos del loader */
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
display: none;
z-index: 1;
}
p{
text-align:center ;
color: #f5f5f5;
font-size: 0.7em;
}
/* Estilos responsivos */
@media screen and (max-width: 600px) {
h1 {
font-size: 28px;
}
input[type="text"] {
font-size: 16px;
}
button[type="submit"] {
font-size: 16px;
}
}
@media screen and (max-width: 400px) {
input[type="text"] {
font-size: 14px;
}
button[type="submit"] {
font-size: 14px;
}
}
</style>
</head>
<body>
<div class="container">
<h1>Generador de imagen</h1>
<input type="text" id="texto" placeholder="Describe aquí tu imagen">
<button id="generar" onclick="generarImagen()"><svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" fill="currentColor" class="bi bi-brush" viewBox="0 0 16 16">
<path d="M15.825.12a.5.5 0 0 1 .132.584c-1.53 3.43-4.743 8.17-7.095 10.64a6.067 6.067 0 0 1-2.373 1.534c-.018.227-.06.538-.16.868-.201.659-.667 1.479-1.708 1.74a8.118 8.118 0 0 1-3.078.132 3.659 3.659 0 0 1-.562-.135 1.382 1.382 0 0 1-.466-.247.714.714 0 0 1-.204-.288.622.622 0 0 1 .004-.443c.095-.245.316-.38.461-.452.394-.197.625-.453.867-.826.095-.144.184-.297.287-.472l.117-.198c.151-.255.326-.54.546-.848.528-.739 1.201-.925 1.746-.896.126.007.243.025.348.048.062-.172.142-.38.238-.608.261-.619.658-1.419 1.187-2.069 2.176-2.67 6.18-6.206 9.117-8.104a.5.5 0 0 1 .596.04zM4.705 11.912a1.23 1.23 0 0 0-.419-.1c-.246-.013-.573.05-.879.479-.197.275-.355.532-.5.777l-.105.177c-.106.181-.213.362-.32.528a3.39 3.39 0 0 1-.76.861c.69.112 1.736.111 2.657-.12.559-.139.843-.569.993-1.06a3.122 3.122 0 0 0 .126-.75l-.793-.792zm1.44.026c.12-.04.277-.1.458-.183a5.068 5.068 0 0 0 1.535-1.1c1.9-1.996 4.412-5.57 6.052-8.631-2.59 1.927-5.566 4.66-7.302 6.792-.442.543-.795 1.243-1.042 1.826-.121.288-.214.54-.275.72v.001l.575.575zm-4.973 3.04.007-.005a.031.031 0 0 1-.007.004zm3.582-3.043.002.001h-.002z"></path>
</svg> Crear</button>
</div>
<div id="imagen">
</div>
<div class="loader"></div>
<p>Deja presionada la imagen para descargar</p>
<script>
const API_KEY = ' TU API KEY AQUÍ';
function generarImagen() {
const texto = document.getElementById('texto').value;
document.querySelector('.loader').style.display = 'block'; // Mostrar loader
fetch('https://api.openai.com/v1/images/generations', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
'Authorization': `Bearer ${API_KEY}`
},
body: JSON.stringify({
"model": "image-alpha-001",
"prompt": texto,
"num_images": 1,
"size": "512x512"
})
})
.then(response => response.json())
.then(data => {
const imagen = data.data[0].url;
const imagenHTML = `<img src="${imagen}" alt="Imagen generada por OpenAI">`;
document.getElementById('imagen').innerHTML = imagenHTML;
document.querySelector('.loader').style.display = 'none';
})
.catch(error => console.log(error));
}
</script>
</body>
</html>
]]>
Copiar texto
.png)
Comentarios
Publicar un comentario