🍦 Text-to-Image Frontend UI

Build a UI for the Text-to-Image Web App

The FormData object is closely related to which built-in JS class?

Text-to-Image Frontend Code

First, build out the HTML for the UI. It has a placeholder for the image and a simple form with a single textarea element.

file_type_html index.html
<!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>

Now we listen to the form submit event and use the browser fetch API to send a POST request to our Node server.

file_type_js main.js
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" />`;

Note: You can find the CSS styles in the full source code

Questions? Let's chat

Open Discord