How to create an AI ART generator website like DALL-E Using Js

Home > HTML > AI Art Generator Website Like DALL-E

So this project is made by taking inspiration from DALL-E,

Today is this page we will learn how to create an website or app like DALL-E just by using two free image styling model provided my google.

All code material as well as the video tutorial is also available below like on the thumbnail to watch the video tutorial and scroll down a bit check the whole code. For downloading scroll a bit more then hit the download button to get the whole source code to free of cost and I am sharing this projects source code for free.

So, to support me. Please Subscribe to my YouTube channel .

It is important to know before start working on this project.

If your bring this project online, then should give us a credit at footer, because it takes alot time make all these kinds of projects now if you ask that I want to bring it online but I will not give any credits to the developers & the provider then it is very wrong man.But still if you want to bring it online but you don't want to give us an credit.Then mail us at somrajf12@gmail.com

HTML

First, Create an HTML file with the name of index.html and paste the code given below, in your HTML file. Remember, you’ve to create a file with .html extension.

Note*: Click on the HTML Code then press ctrl + A to select the whole HTML Code, then ctrl + C to copy.

<!DOCTYPE html>
        <html lang="en" >
        <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>DALL-E by CoDroiD</title>
        <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"/>		
        <script src="https://cdn.jsdelivr.net/npm/@tensorflow/tfjs/dist/tf.min.js"></script>
        <script src="https://cdn.jsdelivr.net/npm/@tensorflow/tfjs-tflite@0.0.1-alpha.6/dist/tf-tflite.min.js"></script>
        <link rel="stylesheet" href="./style.css">

</head>
        <body>

<div id="styleTransfer">
<div class="wrapper" id="contentImg">
<img crossorigin="Anonymous" src="https://coderesting.dev/assets/codepen/random/babymaus2.jpg" />
<span id="upload" class="material-icons"> cloud_upload </span>
</div>

<button id="generateArtButton">Generate new Art</button>
         </div>

<rect x="20" y="0" width="4" height="10" fill="#333">
			   <animateTransform attributeType="xml" attributeName="transform" type="translate" values="0 0; 0 20; 0 0" 
			   begin="0.4s" dur="0.6s" repeatCount="indefinite" />
         </rect>
         </svg>
         <span id="download" class="material-icons"> cloud_download </span>
         </div>
         </div>

</body>
</html>

Css

Second, Create a CSS file with the name of style.css and paste the code given below, in your CSS file. Remember, you’ve to create a file with .css extension.

Note*: Click on the Css Code then press ctrl + A to select the whole Css Code, then ctrl + C to copy.

html {
          height: 100%;
        }
        body {
          background-color: #ffe19f;
          width: 100%;
          height: 100%;
          margin: 0;
          font-family: Arial;
          display: flex;
          align-items: center;
          justify-content: center;
          min-width: 600px;
        }
        
        #styleTransfer {
          box-sizing: border-box;
          width: 100%;
          height: 100%;
          max-height: 500px;
          padding: 20px;
          display: grid;
          grid-template-columns: 1fr auto 1fr auto 1fr;
          gap: 30px;
          align-items: center;
        }
        
        h1 {
          color: #eee;
          font-size: 100px;
        }
        
        img,
        canvas {
          width: 100%;
          height: 100%;
          position: absolute;
          border-radius: 10px;
        }
        
        .wrapper {
          width: 100%;
          height: 100%;
          border-radius: 10px;
          position: relative;
        }
        
        .wrapper > svg {
          position: absolute;
          top: 30%;
          left: 30%;
          right: 30%;
          bottom: 30%;
          width: 40%;
          height: 40%;
          opacity: 0;
          transition: 0.3s ease;
        }
        
        body.loading .wrapper > svg {
          opacity: 1;
        }
        
        .wrapper .material-icons {
          position: absolute;
          width: 55px;
          height: 55px;
          display: flex;
          justify-content: center;
          align-items: center;
          color: #424242;
          font-size: 40px;
          box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23);
          background: #eee;
          border-radius: 10px;
          cursor: pointer;
          overflow: hidden;
        }
        
        #stylePicker {
          height: 100%;
          width: 100%;
          display: flex;
          flex-direction: column;
          justify-content: center;
          align-items: center;
        }
        
        #stylePicker button {
          font-size: 20px;
          padding: 15px;
          cursor: pointer;
          border: solid #533014 3px;
          border-radius: 10px;
          color: #533014;
          background-color: transparent;
          margin-top: 20px;
          transition: opacity 0.2s ease;
        }
        
        #stylePicker button:disabled {
          opacity: 0.4;
        }
        
        #input {
          display: none;
        }
        
        svg rect {
          fill: #ff6700;
        }
        
        @media (max-width: 900px) {
          #stylePicker button {
            padding: 10px;
            font-size: 15px;
          }
        
          .wrapper .material-icons {
            font-size: 30px;
            width: 40px;
            height: 40px;
          }
        }

JavaScript

Third, Create a JS file with the name of script.js and paste the code given below in your Javascript file. Remember, you’ve to create a file with .js extension.

Note*: Click on the JS Code then press ctrl + A to select the whole JS Code, then ctrl + C to copy.

class Transferer {
          constructor() {
            this.contentImgWrapper = document.getElementById("contentImg");
            this.contentImg = document.querySelector("img");
        
            this.styleImgWrapper = document.getElementById("styleImg");
            this.styleImg = this.styleImgWrapper.querySelector("img");
        
            this.styledCanvasWrapper = document.getElementById("styledCanvas");
            this.styledCanvas = this.styledCanvasWrapper.querySelector("canvas");
        
            this.generateArtButton = document.getElementById("generateArtButton");
        
            this.uploadButton = document.getElementById("upload");
            this.fileInput = document.getElementById("input");
        
            this.downloadButton = document.getElementById("download");
        
            this.neuralNet = new NeuralNet();
            this.init();
          }
        
          async init() {
            this.setLoading(true);
            this.generateArtButton.addEventListener("click", this.updateStyle.bind(this));
            this.downloadButton.addEventListener("click", this.download.bind(this));
            this.uploadButton.addEventListener("click", () => this.fileInput.click());
            this.fileInput.addEventListener("change", this.upload.bind(this));
            window.addEventListener("resize", this.resize.bind(this));
        
            await new Promise((res) => {
              this.contentImg.onload = res;
              if (this.contentImg.complete && this.contentImg.naturalHeight !== 0) res();
            });
            this.resize();
        
            await this.neuralNet.init();
            this.applyStyle();
          }
        
          async updateStyle() {
            this.setLoading(true);
            await new Promise((res) => {
              setTimeout(res, 1000);
            });
            this.styleImg.src =
              "https://source.unsplash.com/random/256x256/?art&" + Math.random();
        
            await new Promise((res) => {
              this.styleImg.onload = res;
              if (this.styleImg.complete && this.styleImg.naturalHeight !== 0) res();
            });
            this.applyStyle();
          }
        
          async applyStyle() {
            this.setLoading(true);
            try {
              const styledData = await this.neuralNet.applyStyle(
                this.contentImg,
                this.styleImg
              );
              tf.browser.toPixels(styledData, this.styledCanvas);
              this.setLoading(false);
            } catch (e) {
              console.log(e);
              this.generateArtButton.innerText = "Error: try to reload";
            }
          }
        
          async upload(e) {
            if (e.target.files[0]) {
              this.contentImg.src = window.URL.createObjectURL(e.target.files[0]);
              await new Promise((res) => {
                this.contentImg.onload = res;
                if (this.contentImg.complete && this.contentImg.naturalHeight !== 0) res();
              });
              this.resize();
              this.applyStyle();
            }
          }
        
          download() {
            var a = document.createElement("a");
            a.href = this.styledCanvas
              .toDataURL("image/png")
              .replace("image/png", "image/octet-stream");
            a.download = "styled.png";
            document.body.appendChild(a);
            a.click();
          }
        
          setLoading(loading) {
            if (loading) document.body.classList.add("loading");
            else document.body.classList.remove("loading");
        
            this.generateArtButton.disabled = loading;
          }
        
          resize() {
            const imgWidth = this.contentImg.naturalWidth;
            const imgHeight = this.contentImg.naturalHeight;
        
            for (const elm of [this.contentImg, this.styledCanvas]) {
              const containerRect = elm.parentElement.getBoundingClientRect();
        
              const { width, height } = this.contain(
                { width: imgWidth, height: imgHeight },
                containerRect
              );
              elm.style.top = (containerRect.height - height) / 2 + "px";
              elm.style.left = (containerRect.width - width) / 2 + "px";
              elm.style.width = width + "px";
              elm.style.height = height + "px";
              const icon = elm.parentElement.querySelector(".material-icons");
              if (icon) {
                icon.style.bottom = (containerRect.height - height) / 2 + 10 + "px";
                icon.style.right = (containerRect.width - width) / 2 + 10 + "px";
              }
            }
        
            this.styleImgWrapper.style.width = "100%";
            this.styleImgWrapper.style.height = "100%";
            const { width, height } = this.styleImgWrapper.getBoundingClientRect();
            if (width > height) this.styleImgWrapper.style.width = height + "px";
            else {
              this.styleImgWrapper.style.height = width + "px";
            }
            this.generateArtButton.style.width = this.styleImgWrapper.style.width;
          }
        
          contain(imgRect, containerRect) {
            const imageRatio = imgRect.width / imgRect.height;
        
            if (imageRatio >= containerRect.width / containerRect.height)
              return {
                width: containerRect.width,
                height: containerRect.width / imageRatio
              };
            else
              return {
                width: containerRect.height * imageRatio,
                height: containerRect.height
              };
          }
        }
        
        class NeuralNet {
          constructor() {}
        
          async init() {
            this.transferModel = await tflite.loadTFLiteModel(
              "https://tfhub.dev/google/lite-model/magenta/arbitrary-image-stylization-v1-256/fp16/transfer/1"
            );
            this.bottleneckModel = await tflite.loadTFLiteModel(
              "https://tfhub.dev/google/lite-model/magenta/arbitrary-image-stylization-v1-256/fp16/prediction/1"
            );
          }
        
          async applyStyle(contentImg, styleImg) {
            const contentImgData = tf.browser
              .fromPixels(contentImg, 3)
              .resizeBilinear([384, 384])
              .expandDims(0)
              .div(255);
            const styleImgData = tf.browser
              .fromPixels(styleImg, 3)
              .resizeBilinear([256, 256])
              .expandDims(0)
              .div(255);
        
            const bottleneck = await this.createStyleBottleneck(styleImgData);
            let styledImageData = this.transferModel.predict([
              contentImgData,
              bottleneck
            ]);
        
            if (styledImageData.shape.length > 3)
              styledImageData = tf.squeeze(styledImageData);
        
            return styledImageData.resizeBilinear([contentImg.height, contentImg.width]);
          }
        
          async createStyleBottleneck(styleImg) {
            const bottleneckTensor = this.bottleneckModel.predict(styleImg);
            const bottleneckData = bottleneckTensor.dataSync();
            const bottleneckClone = new Float32Array(100);
            for (var i = 0; i < bottleneckClone.length; i++) {
              bottleneckClone[i] = bottleneckData[i];
            }
            bottleneckTensor.dispose();
            return tf.tensor(bottleneckClone, [1, 1, 1, 100]);
          }
        }
        
        const transferer = new Transferer();

One-Tap to Get the File

Note*: After Clicking the Download button wait for sometime.
If the source file dosen't start to download, then allow this site to download files in your system.

Frequently Asked Questions

Q 1: Can I use this Source Code without giving credits ?

Ans: Yes, you can use but if your bring this projects, then should give us a credit at footer, because it takes alot time make all thess kinds of projects now if you ask that I want to bring it online but I will not give any credits to the developers & the provider then it is very wrong.

Q 2: Actually I want to bring this project online but I don't want to give credits ?

Ans: Ok, we have problem but also you cannot claim that it is made by you.
It is not all about flex you should increase you knowledge.

Q 3: If I am bringing this project online and not giving credits & claiming it is developed by me then ?

Ans: Ok, 1-3 times you will be warned and your that site will be suspended.
Still if you continue, then it can become to a legal things.