acode123

Posted on Feb 25, 2023 • Originally published at freetechnologyhelp.com

How to make an AI Image Generator yourself for free(easy)🖼️

#ai #tutorial #webdev #openai

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

Today, we'll be making a fully working AI Image generator with pure Javascript. 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 pretrained dataset.

Please be aware that this course isn't aimed for 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

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.

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.

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

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.

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.

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.

Now in the window, type in .env.

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.

Then in the box, type server.js:

Inside server.js, copy the following code:

import * as dotenv from 'dotenv';
dotenv.config();

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(cors());
app.use(express.json());

app.post('/dream', async (req, res) => {
    const prompt = req.body.prompt;

    const aiResponse = await openai.createImage({
      prompt,
      n: 1,
      size: '1024x1024',
    });

    const image = aiResponse.data.data[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

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:

Copy the following:

<!DOCTYPE html>
<html lang="en">
  <head>
    <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>
  </head>
  <body>
    <main>
      <h1>AI Photo Generator</h1>


      <div id="result">
        Image will appear here
      </div>

      <form>
        <label for="prompt">Prompt</label>
        <textarea name="prompt" maxlength="160"></textarea>

        <button type="submit">Dream</button>
      </form>
    </main>

    <script type="module" src="/main.js"></script>
  </body>
</html>

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

Copy the following:

import './style.css';

const form = document.querySelector('form');

form.addEventListener('submit', async (e) => {
    e.preventDefault();

    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:

Copy the following:

@import url('https://fonts.googleapis.com/css2?family=Poppins&family=Rubik+Glitch&family=Rubik+Microbe&display=swap');
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.

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:

Type this: cd imgtutorial Replacing imgtutorial with whatever you named your sub folder.
Then Type: node server.js

You should see results similar to this.

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

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

You should see results like the following:

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!

Conclusion:

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: support@freetechnologyhelp.com

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:

Here on dev.to
On my twitter account
From my website

Top comments (2)

Gil Fewster • Feb 26 '23

I think this is a little more than “inspired” by. The source code published in your post appears to be exactly the same as the source code that accompanies the paid course you referenced.

By posting this course material with your own instructions here, you are depriving the original author of revenue from their work. Please do not do this.

acode123 • Feb 26 '23 • Edited

If all the code I've been referencing is public on github.com/fireship-io/javascript-... under no lience whatsoever, and I've credited the original author at the top of my post, I do not see anything wrong with it. I am merely explaining what he posted publicly on github.

He was the one who posted his source code online for everyone to view, not me.

Because the material I am using is under no licence at all, is not for commercial purposes and that I credited the original author, I do not see how what I am doing is wrong. It will not decrease the original author's profits, but it will bring him recognition.

Just to be sure, I also sent an email to the original author asking if he wants me to delete my post, if he replies with yes, I'll immediatly delete the post.

Thanks for your advice, I'll look into it.

DEV Community

How to make an AI Image Generator yourself for free(easy)🖼️

Project Set Up

OpenAI Account Creation

Backend Coding

Frontend Coding

Running your Project

Conclusion:

Top comments (2)

Read next

The Evolution of Frontend Development: Exploring Different Architectures

Should We Rethink About IDs? A Deep Dive into "Snowflake IDs"

Advanced Next.js caching strategies

Using Stable Diffusion in AWS Bedrock to Generate Images