Name of code : DALL-E 2 Image Generator
Categorie : API
DALL-E 2 Image Generator
<!DOCTYPE html>
<html>
<head>
<title>DALL-E 2 Image Generator</title>
<style>
body {
background-color: #F5D0A9;
font-family: Arial, sans-serif;
font-size: 20px;
text-align: center;
}
img {
max-width: 100%;
height: auto;
margin-bottom: 20px;
}
h1 {
font-size: 50px;
margin-bottom: 20px;
}
p {
margin-bottom: 20px;
}
form {
margin-top: 50px;
}
input[type="text"] {
font-size: 20px;
padding: 10px;
border-radius: 5px;
border: none;
margin-right: 10px;
}
input[type="submit"] {
font-size: 20px;
padding: 10px 20px;
border-radius: 5px;
border: none;
background-color: #4CAF50;
color: white;
cursor: pointer;
}
input[type="submit"]:hover {
background-color: #3e8e41;
}
</style>
</head>
<body>
<h1>DALL-E 2 Image Generator</h1>
<form onsubmit="generateImage(event)">
<input type="text" id="textInput" placeholder="Entrez votre texte ici...">
<input type="submit" value="Générer une image">
</form>
<div id="imageContainer"></div>
<script>
const API_KEY = '*****'; // Remplacez YOUR_API_KEY par votre clé API
function generateImage(event) {
event.preventDefault();
const textInput = document.getElementById('textInput').value;
const imageContainer = document.getElementById('imageContainer');
imageContainer.innerHTML = '<p>Génération de l\'image en cours...</p>';
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: textInput,
num_images: 1,
size: '512x512',
response_format: 'url'
})
})
.then(response => response.json())
.then(data => {
const imageUrl = data.data[0].url;
imageContainer.innerHTML = '<img src="' + imageUrl + '" alt="Image générée">';
})
.catch(error => {
console.error(error);
imageContainer.innerHTML = '<p>Une erreur s\'est produite lors de la génération de l\'image. Veuillez réessayer.</p>';
});
}
</script>
</body>
</html>