AI-powered image generator in JavaScript

Creating an AI-powered image generator in JavaScript requires integrating a model capable of generating images based on certain inputs. While client-side JavaScript itself isn’t equipped to run advanced AI models like those used for image generation, it can interact with server-side models or APIs that handle the heavy lifting.

One popular approach is to use an API that leverages a pre-trained model, such as OpenAI’s DALL-E or similar image generation services. In this example, we will simulate a simple AI image generator that interacts with such an API to generate images based on text descriptions provided by the user.

Step 1: HTML Structure

Create an index.html file with the following content:

html

<!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>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="container">
        <h1>AI Image Generator</h1>
        <div class="controls">
            <input type="text" id="text-input" placeholder="Enter description">
            <button id="generate-button">Generate Image</button>
        </div>
        <div id="result">
            <!-- Generated image will be displayed here -->
        </div>
    </div>

    <script src="script.js"></script>
</body>
</html>

Step 2: CSS Styling

Create a styles.css file with the following content:

css

body {
    font-family: Arial, sans-serif;
    background-color: #f0f0f0;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    margin: 0;
}

.container {
    text-align: center;
}

.controls {
    margin-bottom: 20px;
}

#result {
    margin-top: 20px;
}

#result img {
    max-width: 100%;
    border: 1px solid #000;
}

Step 3: JavaScript

Create a script.js file to handle the image generation:

javascript

document.getElementById('generate-button').addEventListener('click', generateImage);

async function generateImage() {
    const description = document.getElementById('text-input').value.trim();
    if (description === '') return;

    const resultDiv = document.getElementById('result');
    resultDiv.innerHTML = '<p>Generating image...</p>';

    try {
        const response = await fetch('YOUR_API_ENDPOINT', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
                'Authorization': `Bearer YOUR_API_KEY`
            },
            body: JSON.stringify({ prompt: description })
        });
        const data = await response.json();

        if (data.image) {
            resultDiv.innerHTML = `<img src="${data.image}" alt="Generated Image">`;
        } else {
            resultDiv.innerHTML = '<p>Failed to generate image. Please try again.</p>';
        }
    } catch (error) {
        console.error('Error:', error);
        resultDiv.innerHTML = '<p>Error generating image. Please try again.</p>';
    }
}

Explanation:

HTML Structure:
- A simple interface with an input field for text descriptions and a button to generate images.
- A div to display the generated image or status messages.
CSS Styling:
- Basic styling to center the elements and make the generated image fit within the container.
JavaScript:
- generateImage function is called when the button is clicked.
- It sends the user’s description to an API endpoint (you’ll need to replace 'YOUR_API_ENDPOINT' and 'YOUR_API_KEY' with actual values from your image generation service).
- If the API returns an image, it is displayed; otherwise, an error message is shown.

Setting Up the API

To use a service like OpenAI’s DALL-E, you would need to:

Sign up for API Access: Register and get API access from OpenAI or any other similar service.
API Endpoint and Key: Obtain your API endpoint and key from the service’s dashboard.

Example with OpenAI’s DALL-E (hypothetical API)

Replace the YOUR_API_ENDPOINT and YOUR_API_KEY in the script.js file with the actual endpoint and key:

javascript

const API_ENDPOINT = 'https://api.openai.com/v1/images/generate';
const API_KEY = 'your-openai-api-key';

async function generateImage() {
    const description = document.getElementById('text-input').value.trim();
    if (description === '') return;

    const resultDiv = document.getElementById('result');
    resultDiv.innerHTML = '<p>Generating image...</p>';

    try {
        const response = await fetch(API_ENDPOINT, {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
                'Authorization': `Bearer ${API_KEY}`
            },
            body: JSON.stringify({ prompt: description })
        });
        const data = await response.json();

        if (data.image_url) {
            resultDiv.innerHTML = `<img src="${data.image_url}" alt="Generated Image">`;
        } else {
            resultDiv.innerHTML = '<p>Failed to generate image. Please try again.</p>';
        }
    } catch (error) {
        console.error('Error:', error);
        resultDiv.innerHTML = '<p>Error generating image. Please try again.</p>';
    }
}

This example demonstrates how to set up a client-side JavaScript application that interacts with an AI image generation service. You would need to obtain access to such a service and replace the placeholder values with real ones.

Tony's CodeForge Blog