[GPT/챗GPT] OpenAI API를 활용한 이미지 생성 (DALL-E, Node.js, React 사용)

OpenAI DALL-E를 활용한 이미지 생성

이 글에서는 OpenAI API를 사용하여 이미지를 생성해 볼 예정입니다. 사용자로부터 입력 받은 프롬프트에 대한 응답으로 DALL-E 모델을 사용하여 새로운 이미지를 생성합니다. OpenAI Labs 인터페이스를 사용하여 별도의 구현 없이 이미지 생성을 테스트할 수도 있습니다. 

 

OpenAI

OpenAI는 Sam Altman과 Elon Musk가 2015년에 설립한 인공지능(AI) 연구 기업입니다. OpenAI의 미션은 인공지능이 인류 전체에 이익을 주도록 하는 것입니다. OpenAI API를 사용하면 자연어, 코드, 그래픽을 읽거나 생성하는 거의 모든 작업을 수행할 수 있습니다. OpenAI에서는 텍스트를 이해하고 생성할 수 있는 현대적이고 능력 있는 언어 모델을 제공합니다. 콘텐츠 생성부터 의미론적 검색 및 분류에 이르기까지 이러한 모델을 사용할 수 있습니다. OpenAI는 Moderation API를 사용하여 불법적이거나 위험한 정보를 표시하고 콘텐츠 정책을 위반하는 것을 방지합니다. GPT/챗GPT

 

OpenAI 모델

OpenAI API는 다양한 기능과 가격대를 갖춘 다양한 모델을 제공합니다. 기본 기반 모델은 특정 사용 사례에 맞게 세밀하게 조정될 수도 있습니다. 아래는 일부 OpenAI 모델입니다:

 

GPT-3, GPT-3.5, GPT-4: 코드 또는 일반 언어를 이해하고 생성합니다.

DALL-E: 자연어 질의에 대한 응답으로 이미지를 생성하고 변경합니다.

Whisper: 오디오를 텍스트로 변환합니다.

Moderation: 민감하거나 위험한 텍스트를 감지합니다.

 

자세한 내용은 공식 OpenAI Models 문서를 참조하세요. GPT/챗GPT

 

OpenAI 계정 설정

코드를 더 자세히 살펴보기 전에 OpenAI에서 계정을 생성하세요. 로그인한 후 프로필에서 API 키 보기 옵션을 발견할 수 있습니다.

 

OpenAI 계정 프로필

 

 

OpenAI API를 사용하려면 새로운 시크릿 키를 생성하세요.

 

OpenAI API 키 생성

 

 

새로 생성된 시크릿 키를 복사하세요.

 

OpenAI API 키

 

Node.js 서버 설정

이제 이미지 생성 API와 함께 Node.js 서버를 시작해 봅시다. 아래는 절차입니다.

 

1. npm init -y 명령어를 통해 package.json 파일을 생성합니다.

 

2. express, body-parser, dotenv 및 cors와 같이 서버 설정에 필요한 종속성을 설치합니다

npm i --save express body-parser dotenv cors

3. OpenAI API를 사용하기 위해 openai 종속성을 설치합니다.

npm i --save openai

4. OPENAI_API_KEY라는 환경 변수를 포함하는 .env 파일을 생성합니다.

OPENAI_API_KEY = "openai API key" <-- 아까 발급받은 코드를 넣어주세요

5. OpenAI 구성과 함께 서버를 시작합니다.

require("dotenv").config();
const express = require("express");
const bodyParser = require("body-parser");
const cors = require("cors");
const { Configuration, OpenAIApi } = require("openai");

const app = express();
const { OPENAI_API_KEY } = process.env;

const configuration = new Configuration({
  apiKey: OPENAI_API_KEY,
});
const openai = new OpenAIApi(configuration);

app.use(bodyParser.json());
app.use(cors());

app.listen(8080, () => {
  console.log("server started");
});

module.exports = app;

6. POST 엔드포인트 /create를 추가하여 이미지를 생성합니다.

app.post("/create", async (req, res) => {
  const { prompt } = req.body;
  try {
    const response = await openai.createImage({
      prompt,
      n: 1,
      size: "512x512",
    });
    res.send(response.data.data[0].url);
  } catch (err) {
    res.send(err.message);
  }
});

위의 POST 메서드는 req.body에서 prompt를 받습니다. 여기서 prompt는 생성할 이미지에 대한 설명입니다. 매개변수 n으로 1에서 10까지의 여러 이미지를 생성할 수 있습니다. 이미지 크기는 256x256, 512x512 또는 1024x1024 픽셀로 설정할 수 있습니다. 작은 크기일수록 더 빠르게 생성됩니다. 설명이 구체적일수록 원하는 결과를 더 잘 받을 수 있습니다. GPT/챗GPT

 

---

React.js로 사용자 인터페이스 만들기

이제 React.js를 사용하여 사용자 인터페이스를 만들어 보겠습니다. 

 

1. 아래 명령을 사용하여 React 애플리케이션을 생성합니다.
(create-react-app 설치 방법)

npx create-react-app app_name

2. App.js 파일에서 사용자 프롬프트를 입력하기 위한 텍스트 상자와 해당 프롬프트로 API를 호출하기 위한 버튼을 렌더링 합니다.

import { useState } from "react";

import "./App.css";

function App() {
  const [prompt, setPrompt] = useState("");

  const handleChange = (e) => {
    setPrompt(e.target.value);
  };

  return (
    <div className="container-fluid">
      <div className="form">
        <h1>당신의 예술 작품을 만드세요!</h1>
        <input
          type="text"
          onChange={handleChange}
          placeholder="이미지 설명을 입력하세요"
        />
        <button type="submit" className="btn btn-primary">
          Submit
        </button>
      </div>
    </div>
  );
}

export default App;

 

사용자 인터페이스는 다음과 같이 나타납니다.

사용자 인터페이스

3. 버튼 제출 시 axios를 사용하여 이미지 생성 API를 호출합니다.

import { useState } from "react";
import axios from "axios";

import "./App.css";

function App() {
  const [prompt, setPrompt] = useState("");
  const [imageURL, setImage] = useState("");

  const createImg = async () => {
    const response = await axios.post("http://localhost:8080/create", {
      prompt,
    });
    setImage(response.data);
  };

  const handleChange = (e) => {
    setPrompt(e.target.value);
  };

  return (
      <div className="container-fluid">
        <div className="form">
          <h1>당신의 예술 작품을 만드세요!</h1>
          {imageURL && <img src={imageURL} alt="prompt" />}
          <div>
            <input
                type="text"
                onChange={handleChange}
                placeholder="이미지 설명을 입력하세요"
            />
            <button type="submit" className="btn btn-primary" onClick={createImg}>
              Submit
            </button>
          </div>
        </div>
      </div>
  );
}

export default App;

 

테스트 스냅샷

AI의 놀라운 기능을 확인하기 위해 몇 가지 흥미로운 테스트 스냅샷을 보여드리겠습니다. GPT/챗GPT

 

피자를 먹는 강아지

선글라스를 쓴 고양이

 

화성의 유일한 에펠타워

요약

지금까지 NodeJs와 React가 OpenAI API를 사용하여 이미지를 생성하는 방법을 보여드렸습니다. 이미지 API는 새 텍스트 입력에 따라 기존 이미지를 변경하고 기존 이미지를 변경할 수 있는 기능 또한 제공합니다. 이 글에서는 OpenAI API의 한 가지 애플리케이션인 이미지 생성만 다루었습니다. OpenAI에서 제공하는 다른 선택사항은 텍스트 완료, 대화 완료, 음성에서 텍스트로 변환 등입니다. OpenAI 페이지를 방문하여 더 자세히 알아보고 AI의 매력에 흠뻑 빠져보세요.