Build an AI Image Generator Website in HTML CSS and JavaScript
Last Updated :
21 Apr, 2025
Improve
Create an AI image generator website using HTML, CSS, and JavaScript by developing a user interface that lets users input text prompts and generate images by AI.
We incorporated API integration to fetch data, providing users with an effortless and dynamic experience in generating AI-driven images. An AI image generator website should have an input bar at the top of it, which simply accepts the text entered by the user and generates an image with the help of AI related to the entered text once the user submits the form or clicks the button to generate the image.
Preview:
Approach
The below approach can be utilized to build an AI image generator website using HTML, CSS and JavaScript:
- Define a webpage with meta tags, title, and sections for headings, input form, and image display.
- Styles the webpage layout, form elements, and adjusts container and image styles responsively.
- Manages form submission, fetches random images based on entered text, and handles errors.
- Utilizes media queries to adjust container width and image height for different screen sizes.
- Provides error messages for failed image fetch requests and empty input fields.
Example: The below example will explain you the process and the practical implementation of creating an AI Image generator website with the help of HTML, CSS, and JavaScript:
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Define the character encoding and viewport settings -->
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Page title -->
<title>
AI Image generator Website using HTML, CSS and JavaScript
</title>
<!-- Link to external CSS file for styling -->
<link rel="stylesheet" href="style.css">
</head>
<body>
<!-- Main container for all the content -->
<div class="main-container">
<!-- Container for the heading and form -->
<div class="container">
<!-- Section for page headings -->
<div class="headings-container">
<h1>GeeksforGeeks</h1> <!-- Main heading -->
<h2 class="heading">
AI Image generator website using JavaScript
</h2> <!-- Secondary heading explaining the purpose -->
<h5 class="sub-heading">
Enter the text in the below input bar and
<br />
get the AI generated image related to this text.
</h5> <!-- Subheading with instructions -->
</div>
<!-- Form container for input and submit button -->
<div id="generate-image-form" class="form-container">
<!-- Form to input text and generate image -->
<form class="my-form">
<!-- Text input for the user to enter some text -->
<input id="input-value"
placeholder="Enter some text..."
type="text"
class="form-input form-controls">
<!-- Button to submit and generate image -->
<button type="submit"
class="image-generate-btn
form-controls">
Generate Image
</button>
</form>
</div>
<!-- Section to display the generated image -->
<div id="images-visible" class="image-container">
<!-- Placeholder text that will be updated with the result -->
<p id="imageContainerText"></p>
<!-- Image tag to display the AI generated image -->
<img id="generated-image"
class="my-generated-image"
src='' alt="AI Generated Image">
</div>
</div>
</div>
<script src="index.js"></script>
</body>
</html>
74
1
2
<html lang="en">3
​4
<head>5
<!-- Define the character encoding and viewport settings -->6
<meta charset="UTF-8">7
<meta name="viewport" content="width=device-width, initial-scale=1.0">8
9
<!-- Page title -->10
<title>11
AI Image generator Website using HTML, CSS and JavaScript12
</title>13
14
<!-- Link to external CSS file for styling -->15
<link rel="stylesheet" href="style.css">16
</head>17
​18
<body>19
<!-- Main container for all the content -->20
<div class="main-container">21
​22
<!-- Container for the heading and form -->23
<div class="container">24
25
<!-- Section for page headings -->26
<div class="headings-container">27
<h1>GeeksforGeeks</h1> <!-- Main heading -->28
<h2 class="heading">29
AI Image generator website using JavaScript30
</h2> <!-- Secondary heading explaining the purpose -->31
<h5 class="sub-heading">32
Enter the text in the below input bar and 33
<br />34
get the AI generated image related to this text.35
</h5> <!-- Subheading with instructions -->36
</div>37
​38
<!-- Form container for input and submit button -->39
<div id="generate-image-form" class="form-container">40
41
<!-- Form to input text and generate image -->42
<form class="my-form">43
<!-- Text input for the user to enter some text -->44
<input id="input-value" 45
placeholder="Enter some text..." 46
type="text"47
class="form-input form-controls">48
​49
<!-- Button to submit and generate image -->50
<button type="submit" 51
class="image-generate-btn 52
form-controls">53
Generate Image54
</button>55
</form>56
</div>57
​58
<!-- Section to display the generated image -->59
<div id="images-visible" class="image-container">60
<!-- Placeholder text that will be updated with the result -->61
<p id="imageContainerText"></p>62
63
<!-- Image tag to display the AI generated image -->64
<img id="generated-image" 65
class="my-generated-image" 66
src='' alt="AI Generated Image">67
</div>68
</div>69
</div>70
​71
<script src="index.js"></script>72
</body>73
​74
</html>/* style.css */
body {
padding: 0;
margin: 0;
box-sizing: border-box;
}
.main-container {
display: flex;
align-items: center;
justify-content: center;
}
.container {
padding: 20px;
border: 2px solid #ccc;
width: 50%;
border-radius: 10px;
box-shadow: 0 0 20px rgba(0, 0, 0, 0.2);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
background-repeat: no-repeat;
background-size: cover;
color: #fff;
}
.heading {
color: #318C46;
}
.headings-container {
text-align: center;
color: #000;
}
.form-controls {
padding: 10px;
border-radius: 5px;
border: none;
}
.form-input:focus {
outline: none;
}
.image-generate-btn {
background-color: #318C46;
cursor: pointer;
color: #fff;
}
#imageContainerText {
color: #000;
}
.image-container {
margin: 50px 0;
display: none;
text-align: center;
}
.my-generated-image {
width: 100%;
height: 350px;
}
@media screen and (min-width: 280px) and (max-width: 920px) {
.container {
width: 100%;
}
.my-generated-image {
width: 100%;
height: 300px;
}
}
// index.js
let generateImageForm =
document.getElementById('generate-image-form');
let formInput =
document.getElementById('input-value');
let imageContainerText =
document.getElementById('imageContainerText');
let imageGenerated =
document.getElementById('generated-image');
let imageContainer =
document.getElementById('images-visible');
async function fetchImages(category) {
try {
let response =
await fetch(`use a API`);
if (!response.ok) {
throw new Error('Unable to fetch the data');
}
imageContainerText.innerText =
"Below is your generated Image:";
imageContainer.style.display = "block";
imageGenerated.src = response.url;
console.log(response.url);
}
catch (error) {
console.log(error);
}
}
generateImageForm.addEventListener('submit', (e) => {
e.preventDefault();
let enteredText = formInput.value;
if (enteredText !== "") {
fetchImages(enteredText);
}
else {
imageContainerText.innerText =
"Input field can not be empty!";
}
})
Output:
