React로 OpenAI AI 이미지 생성기 앱 만들기

Find AI Tools

No difficulty

No complicated process

Find ai tools

Home AI News KR React로 OpenAI AI 이미지 생성기 앱 만들기

React로 OpenAI AI 이미지 생성기 앱 만들기

테이블 오브 컨텐츠(Table of Contents):

🤖 소개
🧩 AI 이미지 생성기의 작동 원리
✨ 리액트.js를 사용한 AI 이미지 생성기 만들기
🎨 웹 페이지 디자인
🌐 API 연동 및 이미지 출력
⏳ 로딩 애니메이션 추가
🧪 테스트와 예외 처리
ℹ️ 자세한 문서와 리소스

🤖 소개

이번 글에서는 React.js와 open AI API를 사용하여 AI 이미지 생성기를 만들어보려고 합니다. 이 프로젝트는 사용자의 텍스트 설명에 따라 이미지를 생성하는 간단한 웹 애플리케이션입니다. 사용자는 입력 필드에 원하는 이미지에 대한 설명을 작성한 후, "생성" 버튼을 클릭하면 약 15초 동안 이미지가 생성됩니다. 이러한 AI 이미지 생성기를 step by step으로 만들어보겠습니다.

🧩 AI 이미지 생성기의 작동 원리

AI 이미지 생성기는 open AI API를 사용하여 이미지를 생성합니다. 사용자가 입력한 설명은 API로 전송되며, API는 해당 설명에 기반하여 이미지를 생성합니다. 생성된 이미지는 API의 응답 데이터로 받아와 웹 페이지에 출력됩니다. 사용자는 원하는 설명을 작성하고 "생성" 버튼을 클릭함으로써 이미지를 생성할 수 있습니다.

✨ 리액트.js를 사용한 AI 이미지 생성기 만들기

리액트.js 프로젝트 설정

먼저, AI 이미지 생성기를 위한 React.js 프로젝트를 설정해야 합니다. 아래의 단계를 따라 진행해보세요:

AI Image Generator라는 이름의 새로운 폴더를 생성합니다.
Visual Studio Code 또는 다른 텍스트 에디터로 해당 폴더를 엽니다.
터미널을 실행하고 다음 명령어를 입력합니다: npx create-react-app .
프로젝트 생성이 완료되면 npm start 명령어를 입력하여 React 앱을 실행합니다.

기본 설정 초기화

React 앱을 기본 설정으로 초기화해야 합니다. src/App.js 파일을 열고 아래의 내용을 삭제합니다:

// 삭제할 내용
<div>...</div>

그리고 public/index.html 파일을 열고 <title> 태그의 내용을 "AI Image Generator"로 변경합니다.

컴포넌트와 에셋 폴더 생성

이제 컴포넌트와 에셋 폴더를 생성해야 합니다. 아래의 단계를 따라 진행해보세요:

src 폴더 내에 components 폴더를 생성합니다.
src/components 폴더 내에 assets 폴더를 생성합니다.

이미지 생성기 컴포넌트 만들기

이미지 생성기 컴포넌트를 만들어 보겠습니다. 아래의 단계를 따라 진행해보세요:

src/components/image-generator 폴더 내에 ImageGenerator.jsx 파일을 생성합니다.
src/components/image-generator 폴더 내에 ImageGenerator.css 파일을 생성합니다.

앱에 이미지 생성기 컴포넌트 추가

마지막으로, 앱에 이미지 생성기 컴포넌트를 추가해야 합니다. src/App.js 파일을 열고 아래의 내용을 추가합니다:

import React from 'react';
import ImageGenerator from './components/image-generator/ImageGenerator';

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

export default App;

🎨 웹 페이지 디자인

이제 웹 페이지의 디자인을 설정해보겠습니다. CSS 스타일시트와 클래스 이름을 사용하여 웹 페이지를 스타일링합니다. 다음 단계를 따라 진행해보세요:

src/components/image-generator/ImageGenerator.css 파일을 열고 아래의 CSS 스타일을 추가합니다:

.AI-image-generator {
  display: flex;
  flex-direction: column;
  margin: 20px;
  align-items: center;
  justify-content: center;
}

.header {
  font-size: 24px;
  font-weight: bold;
  margin-bottom: 20px;
}

.header span {
  color: #ff9800;
}

.img-loading {
  width: 512px;
  height: 512px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #f5f5f5;
}

.loading-bar {
  width: 60%;
  height: 8px;
  background: #e0e0e0;
  animation: loading-animation 2s linear infinite;
}

@keyframes loading-animation {
  0% {
    width: 10%;
  }
  50% {
    width: 50%;
  }
  100% {
    width: 90%;
  }
}

.loading-text {
  font-size: 18px;
  margin-top: 10px;
}

/** 나머지 스타일 생략 **/

src/components/image-generator/ImageGenerator.jsx 파일을 열고 className 속성을 사용하여 컴포넌트에 CSS 클래스 이름을 추가합니다.

이제 웹 페이지의 디자인이 완료되었습니다.

🌐 API 연동 및 이미지 출력

이미지 생성기와 open AI API를 연동하여 이미지를 출력해보겠습니다. 다음 단계를 따라 진행해보세요:

src/components/image-generator/ImageGenerator.jsx 파일을 열고 아래 코드를 추가합니다:

import React, { useState, useRef } from 'react';

const ImageGenerator = () => {
  const [imageUrl, setImageUrl] = useState(null);
  const inputRef = useRef(null);

  const generateImage = async () => {
    if (inputRef.current.value === '') {
      return;
    }

    const response = await fetch('API_URL', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
        Authorization: 'Bearer API_KEY',
        'User-Agent': 'Chrome',
      },
      body: JSON.stringify({
        prompt: inputRef.current.value,
        n: 1,
        size: '512x512',
      }),
    });

    const data = await response.json();

    setImageUrl(data.data[0].image_url);
  };

  return (
    <div className="AI-image-generator">
      <div className="header">
        AI Image <span>Generator</span>
      </div>
      <div className="img-loading">
        {imageUrl ? (
          <img src={imageUrl} alt="Generated Image" />
        ) : (
          <div className="loading">
            <div className="loading-bar"></div>
            <div className="loading-text">Loading</div>
          </div>
        )}
      </div>
      <div className="search-box">
        <input type="text" className="search-input" placeholder="원하는 이미지를 설명해보세요" ref={inputRef} />
        <button className="generate-btn" onClick={generateImage}>
          생성
        </button>
      </div>
    </div>
  );
};

export default ImageGenerator;

src/components/image-generator/ImageGenerator.jsx 파일을 열고 API URL 및 API 키 값을 설정해야 합니다. (API_URL, API_KEY 자리에 실제 값이 들어가야 함)
이미지 생성 및 출력을 위한 로직을 구현한 함수인 generateImage 함수를 작성하였습니다.
API 응답에서 이미지 URL을 추출하고, setImageUrl 함수를 사용하여 이미지 URL을 상태로 업데이트합니다.
이미지 URL이 존재하는 경우 이미지를 출력하고, 없는 경우 로딩 애니메이션을 출력합니다.

이제 open AI API와 이미지 생성기가 연동되어 이미지가 생성되고 웹 페이지에 출력됩니다.

⏳ 로딩 애니메이션 추가

이미지가 생성될 때까지 사용자에게 로딩 애니메이션을 보여주도록 해봅시다. 다음 단계를 따라 진행해보세요:

src/components/image-generator/ImageGenerator.css 파일을 열고 아래의 CSS 스타일을 추가합니다:

.loading-bar {
  width: 0;
  height: 4px;
  background: #4caf50;
  transition: width 0.3s;
}

.loading-wordful .loading-bar {
  width: 100%;
}

src/components/image-generator/ImageGenerator.jsx 파일을 열고 아래 코드를 수정합니다:

// 코드 생략

const [loading, setLoading] = useState(false);

const generateImage = async () => {
  if (inputRef.current.value === '') {
    return;
  }

  setLoading(true);

  const response = await fetch('API_URL', {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json',
      Authorization: 'Bearer API_KEY',
      'User-Agent': 'Chrome',
    },
    // 코드 생략
  });

  const data = await response.json();

  setImageUrl(data.data[0].image_url);
  setLoading(false);
};

// 코드 생략

<div className={`loading ${loading ? 'loading-wordful' : ''}`}>
  <div className="loading-bar"></div>
  <div className="loading-text">로딩 중...</div>
</div>

// 코드 생략

이제 이미지가 생성될 때까지 로딩 애니메이션이 보여집니다.

🧪 테스트와 예외 처리

이미지 생성기를 테스트하고 예외 상황에 대한 처리를 추가해봅시다. 다음 단계를 따라 진행해보세요:

src/components/image-generator/ImageGenerator.jsx 파일을 열고 아래 코드를 추가합니다:

// 코드 생략

const generateImage = async () => {
  if (inputRef.current.value === '') {
    return;
  }

  setLoading(true);

  try {
    const response = await fetch('API_URL', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
        Authorization: 'Bearer API_KEY',
        'User-Agent': 'Chrome',
      },
      // 코드 생략
    });

    if (!response.ok) {
      throw new Error('이미지를 생성하는 도중 오류가 발생했습니다.');
    }

    const data = await response.json();

    setImageUrl(data.data[0].image_url);
  } catch (error) {
    console.error(error);
    alert('이미지 생성 중 오류가 발생했습니다. 다시 시도해주세요.');
  } finally {
    setLoading(false);
  }
};

// 코드 생략