인공 지능은 지속적으로 발전하고 있으며 이제 놀라운 이미지를 만들 수 있습니다. 최근 바이러스에 감염된 한 예는 세계에서 가장 부유하고 영향력 있는 사람들이 찢어진 옷을 입고 빈민가 환경에 살고 있는 모습을 묘사했습니다. 이 이미지에서 인상적인 점은 인물과 주변 환경 모두에서 높은 수준의 디테일을 포착했다는 점입니다.
DALL-E 및 Midjourney와 같은 언어 모델은 이러한 이미지 생성 기능을 강화하여 텍스트 설명을 입력으로 받아 매력적인 이미지를 생성합니다.
OpenAI의 DALL-E API를 통합하여 React 애플리케이션에서 이미지를 생성하는 방법을 알아보세요.
OpenAI의 DALL-E 언어 모델을 사용한 이미지 생성
DALL-E 언어 모델은 실제로 어떻게 이미지를 생성할까요? AI 이미지 생성의 복잡성에 대해 너무 깊이 파고들지 않고, DALL-E는 먼저 자연어 처리(NLP)를 사용하여 입력으로 제공된 텍스트 설명을 해석합니다. 그런 다음 주어진 설명과 거의 일치하는 사실적인 이미지를 렌더링합니다.
입력 프롬프트에는 사람, 사물 또는 장면에 대한 텍스트 설명이 포함될 수 있습니다. 또한 특정 색상, 모양 및 크기와 같은 세부 정보도 포함될 수 있습니다. 입력 텍스트의 복잡성이나 단순성에 관계없이 DALL-E는 입력 설명과 거의 일치하는 이미지를 생성합니다.
다른 모델과 마찬가지로 언어 모델도 수백만 개의 이미지 데이터가 포함된 대규모 데이터 세트를 학습하여 주어진 입력에서 사실적인 이미지를 식별하고 생성하는 방법을 학습했다는 점에 유의해야 합니다.
OpenAI의 DALL-E API 시작하기
OpenAI의 DALL-E API는 공개 베타로 사용할 수 있습니다. React 애플리케이션에서 사용하기 위해 API를 통합하려면 OpenAI의 API 키가 필요합니다. OpenAI 로 이동하여 계정 개요 페이지에 로그인하여 API 키를 받으세요.
로그인한 후 개요 페이지의 오른쪽 상단에 있는 사용자 프로필 아이콘을 클릭합니다. 그런 다음 API 키 보기를 선택하고 클릭합니다.
API 키 설정 페이지에서 새 비밀 키 만들기 버튼을 클릭하고 API 키의 이름을 입력한 후 비밀 키 생성을 클릭하여 API 키를 생성합니다.
React 프로젝트 생성
터미널에서 아래 명령어를 실행하여 로컬에 새 React 프로젝트를 생성합니다. 참고로 Node.js가 설치되어 있어야 합니다.
이 두 문서를 참고하여 Windows에 Node.js를 설치하는 방법과 Ubuntu에 Node.js를 설치하는 방법을 알아보세요.
mkdir React-project
cd React-project
npx create-react-app image-generator-app
cd image-generator-app
npm start
또는 create-react-app 명령을 사용하는 대신 Vite를 사용하여 React 프로젝트를 설정할 수 있습니다. Vite는 웹 애플리케이션을 빠르고 효율적으로 빌드하기 위해 설계된 빌드 도구입니다.
이미지 생성을 위해 OpenAI의 DALL-E API 통합
React 애플리케이션을 실행하고 나면, React 애플리케이션에서 사용할 수 있도록 OpenAI의 Node.js 라이브러리를 설치하세요.
npm install openai
다음으로 프로젝트 폴더의 루트 디렉토리에 API 키를 저장할 새 .env 파일을 생성합니다.
REACT_APP_OPENAI_API_KEY = "API KEY"
이 프로젝트의 코드는 이 GitHub 리포지토리에서 찾을 수 있습니다.
이미지 생성기 컴포넌트 만들기
/src 디렉터리에 새 폴더를 만들고 이름을 components로 지정한 다음 그 안에 ImageGenerator.js라는 이름의 새 파일을 만듭니다. 이 파일에 아래 코드를 추가합니다.
필요한 모듈을 가져와서 시작합니다:
import '../App.css';
import { useState } from "react";
import { Configuration, OpenAIApi } from "openai";
Configuration 모듈은 OpenAI의 API 클라이언트를 사용할 수 있도록 구성하고, OpenAIApi 모듈은 OpenAI의 API와 상호 작용하는 메서드를 제공합니다. 이 두 모듈을 통해 React 애플리케이션에서 DALL-E의 기능에 접근하고 사용할 수 있습니다.
다음으로 함수형 컴포넌트를 정의하고 다음 코드를 추가합니다:
function ImageGenerator() {
const [prompt, setPrompt] = useState("");
const [result, setResult] = useState("");
const [loading, setLoading] = useState(false);
const [placeholder, setPlaceholder] = useState(
"Search for a lion with Paint Brushes painting the mona lisa painting..."
);
const configuration = new Configuration({
apiKey: process.env.REACT_APP_OPENAI_API_KEY,
});
const openai = new OpenAIApi(configuration);
const generateImage = async () => {
setPlaceholder(`Search ${prompt}..`);
setLoading(true);
try {
const res = await openai.createImage({
prompt: 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}`);
}
};
이 코드는 ImageGenerator라는 React 함수형 컴포넌트를 정의합니다. 이 컴포넌트는 여러 상태 변수를 사용해 입력 프롬프트, 출력 결과, 로딩 상태, 플레이스홀더 텍스트를 관리합니다.
이 컴포넌트는 또한 환경 변수에서 검색된 API 키를 포함하는 OpenAI API 클라이언트를 위한 구성 객체를 생성합니다.
비동기 생성 이미지 함수는 사용자가 버튼을 클릭할 때 실행되어 사용자 프롬프트를 전달합니다.
그런 다음 openai.createImage 메서드를 호출하여 주어진 프롬프트에 따라 이미지를 생성합니다. 이 메서드는 생성된 이미지 URL이 포함된 응답 객체를 반환합니다.
API 호출이 성공하면 코드가 결과 상태 변수를 URL로 업데이트하고 로딩 상태를 false로 설정합니다. API 호출이 실패하면 여전히 로딩 상태를 false로 설정하지만 콘솔에 오류 메시지도 기록합니다.
마지막으로 이미지 생성기 컴포넌트를 구성하는 React JSX 요소를 렌더링합니다.
return (
<div className="container">
{ loading ? (
<>
<h3>Generating image... Please Wait...</h3>
</>
) : (
<>
<h2>Generate an Image using Open AI API</h2>
<textarea
className="app-input"
placeholder={placeholder}
onChange={(e) => setPrompt(e.target.value)}
rows="10"
cols="100"
/>
<button onClick={generateImage}>Generate an Image</button>
{ result.length > 0 ? (
<img className="result-image" src={result} alt="result" />
) : (
<>
</>
)}
</>
)}
</div>
)
}
export default ImageGenerator
이 컴포넌트의 코드는 로딩 상태 변수의 값에 따라 다른 요소를 조건부로 렌더링합니다.
로딩이 참이면 로딩 메시지를 표시합니다. 반대로 로딩이 거짓이면 사용자 프롬프트를 캡처하는 텍스트 영역과 제출 버튼으로 구성된 OpenAI API를 사용하여 이미지를 생성하기 위한 기본 인터페이스를 표시합니다.
결과 상태 변수는 나중에 브라우저에서 렌더링되는 생성된 이미지 URL을 보유합니다.
App.js 컴포넌트 업데이트
이 코드를 App.js 파일에 추가합니다:
import './App.css';
import ImageGenerator from './component/ImageGenerator';
function App() {
return (
<div className="App">
<header className="App-header">
<ImageGenerator />
</header>
</div>
);
}
export default App;
이제 개발 서버를 스핀업하여 변경 사항을 업데이트하고 브라우저로 http://localhost:3000 로 이동하여 이미지 생성 기능을 테스트할 수 있습니다.
AI 도구를 사용하여 이미지를 생성할 때 최상의 결과를 얻으려면 텍스트 영역에 자세한 프롬프트를 제공해야 합니다. 즉, 세부 사항을 빠뜨리지 말고 이미지를 최대한 자세하게 설명해야 합니다.
이 프로세스를 프롬프트 엔지니어링이라고 하며, 언어 모델이 제공된 사용자 입력을 기반으로 최상의 결과를 생성할 수 있도록 자세한 프롬프트를 제공하는 것이 포함됩니다.
최근 시장에 출시되는 AI 소프트웨어가 급증하고 있는 만큼 프롬프트 엔지니어링 분야에서 경력을 쌓는 것은 수익성 높은 기회가 될 수 있습니다.
소프트웨어 개발에서 언어 모델의 힘 극대화
대규모 언어 모델로 구동되는 AI 도구는 놀라운 기능과 성능으로 인해 소프트웨어 개발 분야를 강타했습니다.
이러한 도구는 개발자가 다양한 제품의 사용성을 향상시키는 멋진 AI 기능을 통합할 수 있게 함으로써 현재 소프트웨어 생태계를 개선할 수 있는 잠재력을 가지고 있으며, AI 기술을 활용하면 혁신적인 방식으로 소프트웨어를 구축할 수 있는 특별한 기회를 제공합니다.