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
- Install Node.js and NPM. You can download the installer from the official Node.js website.
- Open Visual Studio Code and create a new folder where you want to store your project.
- Open a terminal window in Visual Studio Code (
Ctrl
+~
(Windows/Linux) orCmd
+~
(Mac)). - Navigate to the folder you just created using the
cd
command in the terminal. - 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.
- Once the installation is complete, navigate to the app folder by typing
cd my-app
in the terminal. - 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:
import '../App.css';
is importing a CSS file namedApp.css
. This file contains styles that will be used in the React app.import { useState } from "react";
is importing theuseState
hook from thereact
module. This hook allows React components to have state, which is data that can change over time and trigger re-renders of the component.import { Configuration, OpenAIApi } from "openai";
is importing theConfiguration
andOpenAIApi
classes from theopenai
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.


