How to make an AI Image Generator yourself for free

Note: This tutorial is heavily inspired by a paid course created by Fireship: Link to the paid course

Today, we’ll be making a fully working AI Image generator with pure Javascript. To be realistic, we won’t be able to train our own AI with billions of images for free, so we’ll be using OpenAI’s pre-trained dataset.

Please be aware that this course isn’t aimed at pure beginners, if you are reading this, please make sure you have some basic understanding of Javascript and using the Terminal.

Project Set Up

First, be aware that I’ll be using VSCode as my IDE, you can download it to follow along.

To get started, create a new folder, and open the folder up in VSCode. Name the folder whatever you want, but remember the name.

Opening a folder: File>Open Folder

Creating a new folder in VSCode

After you got a folder open, select Terminal>New Terminal from the top of the screen.

In the new terminal, type the following command:
npm init vite@latest imgtutorial

Feel free to replace imgtutorial with any name you want. Now you would be prompted to select a framework, just hit enter, do the same when it tells you to select a variant.

Creating a new Terminal and Init Vite

Now type the following commands in order:

cd imgtutorial npm install

After that, just to check that you got everything right, type npm run dev which should start up your frontend server. You can either type the link manually into your search engine, or control(command on mac)+click the link shown.

Vite Setup

If you see a demo website like the one below, you did it right.

Demo Frontend

OpenAI Account Creation

Now that we got our frontend setup, let’s take a break from coding and set up OpenAI.

To get started, go to OpenAI and create an account. After that, click on your profile on the top right corner, and select view API keys.

OpenAI API Key

Then click Create New Secret Key, and store the key shown somewhere secure. It is REALLY important that you do not tell anyone your API key.

Generated API Key

Now to store your API key in your project, head back to VSCode, and click once on the folder you’ve just created with the Command Prompt, then select the create file icon.

Creating a .env file

Now in the window, type in .env.

Finnished enviorment creation

Now type the following code into your .env file, replacing yourkey with your OpenAI API key.

OPENAI="your key"

Now we’ll create another Terminal window exactly the same way we did before. You should click Terminal>New Terminal. In your new terminal, type the following command, replacing with imgtutorial with the name of your folder.

cd imgtutorial

Now inside your sub folder, type in the following command to install some more dependencies.

npm i dotenv express cors openai

After this, you should have your OpenAI fully setup and ready to use in your backend code.

Backend Coding

Now as we did before, we’ll create a new file called server.js. Again, click on your subfolder, and then click on the add file icon.

Creating the Server.js file

Then in the box, type server.js:

Naming the new file

Inside server.js, copy the following code:

import * as dotenv from 'dotenv';
import { Configuration, OpenAIApi } from 'openai';
const configuration = new Configuration({
  apiKey: process.env.OPENAI,
const openai = new OpenAIApi(configuration);
import express from 'express';
import cors from 'cors';
const app = express();
app.use(express.json());'/dream', async (req, res) => {
    const prompt = req.body.prompt;
    const aiResponse = await openai.createImage({
      n: 1,
      size: '1024x1024',
    const image =[0].url;
    res.send({ image });
app.listen(8080, () => console.log('make art on http://localhost:8080/dream'));

Now in the same terminal window you added your dependencies, type in the following command:

node server.js

Creating Backend for AI Img Gen

This should return you with an URL, but you can ignore it. Anyway, now we got our backend set up and complete!

Frontend Coding

We are now almost finnished with our AI image generator, the last step is to create the frontend, which is accturally the easiest step.

First, go to the HTML file and copy this in:

HTML file location

Copy the following:

<!DOCTYPE html>
<html lang="en">
    <meta charset="UTF-8" />
    <link rel="icon" type="image/svg+xml" href="favicon.svg" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Vite App</title>
      <h1>AI Photo Generator</h1>

      <div id="result">
        Image will appear here
        <label for="prompt">Prompt</label>
        <textarea name="prompt" maxlength="160"></textarea>
        <button type="submit">Dream</button>
    <script type="module" src="/main.js"></script>

Then go to the main.js file and copy this in:

Javascript File Location

Copy the following:

import './style.css';
const form = document.querySelector('form');
form.addEventListener('submit', async (e) => {
    const data = new FormData(form);
    const response = await fetch('http://localhost:8080/dream', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
      body: JSON.stringify({
        prompt: data.get('prompt'),
    const { image } = await response.json();
    const result = document.querySelector('#result');
    result.innerHTML = `<img src="${image}" width="512" />`;

Then go to the style.css and copy this in:

StyleCSS location

Copy the following:

@import url('');
body {
  background-color: #0b0b0e;
  color: white;
  font-family: 'Poppins', sans-serif;
  margin-top: 50px;
main {
 display: grid;
 place-items: center;
h1 {
  font-family: 'Rubik Microbe', cursive;
  font-weight: 400;
  font-size: 5rem;
#result {
  aspect-ratio: 1/1;
  max-width: 512px;
  width: 100%;
  background: #3a3a43;
  display: flex;
  justify-content: center;
  align-items: center;
form {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  max-width: 512px;
  margin-top: 2rem;
textarea {
  width: 100%;
  height: 100px;
  margin: 10px 0;
  font-size: 1.5rem;
button {
  width: 100%;
  height: 50px;
  background-color: #1b1b1e;
  color: white;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  text-transform: uppercase;
  font-weight: 600;
  margin-bottom: 50px;
button:hover {
  background-color: #2b2b2e;
.hidden {
  display: none;

.spinner {
  animation: spin 1s linear infinite;
  display: inline-block;

@keyframes spin {
  from {transform:rotate(0deg);}
  to {transform:rotate(360deg);}

Now you are all set! We just need to run our frontend code again and we got a complete image generator!

Running your Project

This is the final step in this course. Under the terminal tab, delete all currently running terminals.

Delete terminal

To delete a terminal, hover over it, then select the trash icon, do this with all the terminals available.

Now create a new one(terminal>new terminal) and do the following:

  1. Type this: cd imgtutorial Replacing imgtutorial with whatever you named your subfolder.
  2. Then Type: node server.js

You should see results similar to this.
Backend Results

Now create another terminal(terminal>new terminal) and do the following:

  1. Type this: cd imgtutorial Replacing imgtutorial with whatever you named your sub folder.
  2. Then type npm run dev

You should see results like the following:

Frontend Results

Now to access your AI image generator, copy the link generated and access it in a browser.

In the prompt area, describe the image you want it to generate, then click dream. Wait for 1-2 minute and you should see a generated image!

How to use AI img gen


This is quite a complex tutorial, and you probibally will experience some bugs throughout completing this project. But I’m here to help, just message me and I’ll sort your issue out:

My Email:

If you enjoyed this tutorial, chances are that you’ll enjoy my other tutorials too! So here are some ways you can learn more from me:

  1. Here on
  2. On my twitter account
  3. From my website