This article will show you how to set up a basic React app that enables you to input Tattoo ideas and let OpenAI’s DALL·E 2 generate an image and post it in the app. First we will explain the basics of running React. If you already know this, skip to the second chapter. See github for the full code here.

Setting up React in Visual Studio Code

  1. Install Node.js and NPM. You can download the installer from the official Node.js website.
  2. Open Visual Studio Code and create a new folder where you want to store your project.
  3. Open a terminal window in Visual Studio Code (Ctrl + ~ (Windows/Linux) or Cmd + ~ (Mac)).
  4. Navigate to the folder you just created using the cd command in the terminal.
  5. Run the following command in the terminal to create a new React app using Create React App:
npx create-react-app my-app

Replace my-app with the name of your app. This command will create a new React app with all the necessary files and dependencies.

  1. Once the installation is complete, navigate to the app folder by typing cd my-app in the terminal.
  2. Start the development server by running the following command:
npm start

This will start the development server and open your app in a new browser window.

That’s it! You can now start building your React app in Visual Studio Code. You can edit your code in the src folder, and any changes you make will be automatically reflected in the browser window.

The image generator

In the src directory I created a new directory called ‘components. Here I created a file called ImageGenerator.js. First we define the imports. This code is importing three different modules in a React app:

  1. import '../App.css'; is importing a CSS file named App.css. This file contains styles that will be used in the React app.
  2. import { useState } from "react"; is importing the useState hook from the react module. This hook allows React components to have state, which is data that can change over time and trigger re-renders of the component.
  3. import { Configuration, OpenAIApi } from "openai"; is importing the Configuration and OpenAIApi classes from the openai module. These classes are part of the OpenAI API, which allows developers to access powerful natural language processing tools.
import '../App.css';
import { useState } from "react";
import { Configuration, OpenAIApi } from "openai";

This code below is a React component called ImageGenerator, which is responsible for generating a line art tattoo image using the OpenAI API.

The component uses the Configuration and OpenAIApi classes from the OpenAI API module to connect to the OpenAI API. It creates an instance of the OpenAIApi class with the OpenAI API key, which allows it to make requests to the API.

The generateImage function is called when the user clicks the “Generate tattoo” button. This function sets the placeholder state variable to indicate that the image is being generated, sets the loading state variable to true, and makes a request to the OpenAI API to generate an image based on the user input text. If the request is successful, it sets the loading state variable to false and stores the URL of the generated image in the result state variable. If the request fails, it logs an error to the console.

The return statement of the component returns a JSX element, which is the rendered output of the component. The component conditionally renders different elements based on the loading and result state variables. If loading is true, it displays a loading message. If loading is false and result is not an empty string, it displays the generated image. If loading is false and result is an empty string, it displays the input form and “Generate tattoo” button.

The component also includes some CSS classes (container, input-wrapper, app-input, and result-image) which are used to style the different elements of the component.

function ImageGenerator() {
    const [prompt, setPrompt] = useState("");
    const [result, setResult] = useState("");
    const [loading, setLoading] = useState(false);

    const [placeholder, setPlaceholder] = useState(
        "Type your tattoo idea here..."
    );

    const configuration = new Configuration({
        apiKey: "Fill_in_your_OpenAI_key_here",
    });

    const openai = new OpenAIApi(configuration);

    const generateImage = async () => {
        setPlaceholder(`Tattoo for ${prompt}..`);
        setLoading(true);

        try {
            const res = await openai.createImage({
                prompt: `line art tattoo. white background, white border, black lines: ${prompt}`,
                n: 1,
                size: "512x512",
            });

            setLoading(false);
            setResult(res.data.data[0].url);
        } catch (error) {
            setLoading(false);
            console.error(`Error generating image: ${error.response.data.error.message}`);
        }
    };
    return (
        <div className="container">
            {loading ? (
                <>
                    <h3>Generating tattoo, please wait...</h3>
                </>
            ) : (
                <>
                    <h2>AI overlord deciding your tattoo fate</h2>

                    <div className="input-wrapper">
                        <textarea
                            className="app-input"
                            placeholder={placeholder}
                            onChange={(e) => setPrompt(e.target.value)}
                            rows="1"
                            cols="50"
                        />
                        <button onClick={generateImage}>Generate tattoo</button>
                    </div>

                    {result.length > 0 ? (
                        <img className="result-image" src={result} alt="result" />
                    ) : (
                        <>
                        </>
                    )}
                </>
            )}
        </div>
    )
}

export default ImageGenerator

Adjust App.js to run the Image Generator

App.js is the main component for the app. After replacing the standard code with the following you can then navigate to http://localhost:3000 in your browser of choice to see the working app.

import './App.css';
import ImageGenerator from './components/ImageGenerator';

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <ImageGenerator />
      </header>
    </div>
  );
}

export default App;

The end result

Note that in the code it is specified to only generate black line tattoos with a white background. This makes sure that the generated image is useful as a tattoo. The prompt can for sure be improved to generate even more interesting tattoos.

Leave a Reply

Your email address will not be published. Required fields are marked *