How to Create AI Image generator App and website in 2025
Here is the prompt and the codes you need to create AI image generator website and app in 2025
Prompt
‎Create a complete, single-file HTML application for an "AI Image Generator".
‎The application should have the following features:
‎HTML Structure:
‎A main container that is centered on the page.
‎An <h1> title, "AI Image Generator".
‎A <textarea> for the user to input their image description.
‎A "Generate Image" <button>.
‎A div to show status messages to the user (like "Generating...", "Success!", or error messages).
‎An <img> element, initially hidden, to display the generated image.
‎A "Download Image" <button>, which is hidden until an image is successfully generated.
‎CSS Styling:
‎The overall design should be modern, clean, and user-friendly.
‎Center the main container on the page. Give it a white background, rounded corners, and a subtle box-shadow.
‎The page should be responsive and function well on both desktop and mobile devices.
‎Style the buttons and text area to be visually appealing and easy to use.
‎JavaScript Functionality:
‎When the "Generate Image" button is clicked, it should trigger a POST request to the Hugging Face API endpoint: https://api-inference.huggingface.co/models/black-forest-labs/FLUX.1-dev.
‎Use the fetch API for the request. The request headers must include an Authorization field with a bearer token. Use a placeholder constant in the script, like YOUR_HF_API_TOKEN, for the API key.
‎During Generation:
‎Disable the "Generate Image" button to prevent multiple requests.
‎Display a "Generating... This might take a moment." message.
‎On API Success:
‎The API will return an image blob. Create an object URL from this blob (URL.createObjectURL) and set it as the src for the <img> element.
‎Make the <img> element and the "Download Image" button visible.
‎Show a success message.
‎On API Failure:
‎Display a clear and helpful error message to the user.
‎Log the detailed error to the console.
‎After Generation (Success or Failure):
‎Re-enable the "Generate Image" button.
‎Download Functionality:
‎When the "Download Image" button is clicked, it should trigger a browser download of the generated image file, preferably as a .jpeg.
‎Codes
Copy and paste the codes. The code will be splited into two parts. Copy and paste both in a code editor.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>AI Image Generator</title>
<style>
body {
font-family: Arial, sans-serif;
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background-color: #f0f2f5;
margin: 0;
padding: 20px;
box-sizing: border-box;
}
.container {
background-color: #ffffff;
padding: 30px;
border-radius: 12px;
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
max-width: 600px;
width: 100%;
text-align: center;
box-sizing: border-box;
}
h1 {
color: #333;
margin-bottom: 25px;
font-size: 2em;
}
.input-group {
margin-bottom: 20px;
}
textarea {
width: calc(100% - 20px);
padding: 12px;
margin-bottom: 15px;
border: 1px solid #ddd;
border-radius: 8px;
font-size: 1rem;
resize: vertical;
min-height: 80px;
box-sizing: border-box;
}
button {
background-color: #007bff;
color: white;
padding: 12px 25px;
border: none;
border-radius: 8px;
cursor: pointer;
font-size: 1.1rem;
transition: background-color 0.3s ease, transform 0.2s ease;
margin: 5px;
}
button:hover {
background-color: #0056b3;
transform: translateY(-2px);
}
button:disabled {
background-color: #cccccc;
cursor: not-allowed;
}
.image-display {
margin-top: 30px;
min-height: 200px;
display: flex;
justify-content: center;
align-items: center;
border: 1px dashed #e0e0e0;
border-radius: 8px;
overflow: hidden;
background-color: #f9f9f9;
}
.image-display img {
max-width: 100%;
max-height: 500px;
border-radius: 6px;
display: block; /* Remove extra space below image */
}
.status-message {
margin-top: 20px;
font-size: 0.95rem;
color: #555;
min-height: 20px;
}
.error-message {
color: #dc3545;
font-weight: bold;
}
.success-message {
color: #28a745;
}
.download-button-group {
margin-top: 20px;
}
@media (max-width: 768px) {
.container {
margin: 10px;
padding: 20px;
}
h1 {
font-size: 1.6em;
}
button {
width: calc(100% - 10px);
margin-bottom: 10px;
}
}
</style>
</head>
<body>
<div class="container">
<h1>AI Image Generator</h1>
<div class="input-group">
<textarea id="promptInput" placeholder="Enter your image description here (e.g., a astronaut riding a horse on Mars, photorealistic, cinematic light)..."></textarea>
<button id="generateButton">Generate Image</button>
</div>
<div class="status-message" id="statusMessage"></div>
<div class="image-display">
<img id="generatedImage" src="" alt="Generated Image" style="display: none;">
</div>
<div class="download-button-group">
<button id="downloadButton" style="display: none;">Download Image</button>
</div>
</div>
<script>
// IMPORTANT: Replace 'YOUR_HF_API_TOKEN' with your actual Hugging Face API token.
// You can get one from your Hugging Face profile settings.
const HF_API_TOKEN = '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';
const API_URL = "https://api-inference.huggingface.co/models/black-forest-labs/FLUX.1-dev";
const promptInput = document.getElementById('promptInput');
const generateButton = document.getElementById('generateButton');
const statusMessage = document.getElementById('statusMessage');
const generatedImage = document.getElementById('generatedImage');
const downloadButton = document.getElementById('downloadButton');
let currentBlob = null; // To store the raw image blob for download
generateButton.addEventListener('click', generateImage);
downloadButton.addEventListener('click', downloadImage);
async function generateImage() {
const prompt = promptInput.value.trim();
if (!prompt) {
statusMessage.textContent = 'Please enter a description for the image.';
statusMessage.className = 'status-message error-message';
return;
}
Part 2 below
if (HF_API_TOKEN === 'YOUR_HF_API_TOKEN' || !HF_API_TOKEN) {
statusMessage.textContent = 'Error: Please replace "YOUR_HF_API_TOKEN" with your actual Hugging Face API token.';
statusMessage.className = 'status-message error-message';
return;
}
// Clear previous image and download button
if (currentBlob) {
URL.revokeObjectURL(generatedImage.src); // Revoke previous blob URL
currentBlob = null;
}
generatedImage.src = '';
generatedImage.style.display = 'none';
downloadButton.style.display = 'none';
statusMessage.textContent = 'Generating... This might take a moment.';
statusMessage.className = 'status-message';
generateButton.disabled = true;
try {
const negative_prompt = "blurry, low quality, distorted, extra limbs, ugly, deformed, noisy, out of focus";
const response = await fetch(API_URL, {
method: 'POST',
headers: {
'Content-Type': 'application/json',
'Authorization': `Bearer ${HF_API_TOKEN}`
},
body: JSON.stringify({
inputs: prompt,
parameters: {
negative_prompt: negative_prompt
}
})
});
if (!response.ok) {
const errorText = await response.text();
let errorMessage = `API Error: ${response.status} ${response.statusText}.`;
try {
const errorJson = JSON.parse(errorText);
if (errorJson.error) {
errorMessage += ` Details: ${errorJson.error}`;
}
} catch (e) {
errorMessage += ` Response: ${errorText}`;
}
if (response.status === 429) {
errorMessage += " You might be rate-limited. Please try again in a moment.";
} else if (response.status === 401) {
errorMessage += " Invalid API token. Please check your Hugging Face API token.";
}
throw new Error(errorMessage);
}
currentBlob = await response.blob(); // Store the blob directly
const blobUrl = URL.createObjectURL(currentBlob); // Create a URL for display
generatedImage.src = blobUrl;
generatedImage.style.display = 'block';
downloadButton.style.display = 'inline-block';
statusMessage.textContent = 'Image generated successfully!';
statusMessage.className = 'status-message success-message';
} catch (error) {
statusMessage.textContent = `Error: ${error.message}`;
statusMessage.className = 'status-message error-message';
console.error('Error generating image:', error);
} finally {
generateButton.disabled = false;
}
}
function downloadImage() {
if (currentBlob) {
const a = document.createElement('a');
a.href = URL.createObjectURL(currentBlob); // Create a new URL for download
a.download = 'generated-image.jpeg'; // Save as JPEG
document.body.appendChild(a);
a.click();
document.body.removeChild(a);
URL.revokeObjectURL(a.href); // Clean up the object URL after download
} else {
statusMessage.textContent = 'No image to download.';
statusMessage.className = 'status-message error-message';
}
}
</script>
</body>
</html>