AI Image generator

Technologies Used

• 언어 및 라이브러리: Javascript, React.js, OpenAI API 

• 웹 개발 프레임워크: Cloudflare, MongoDB, Vite.js

Project Features

• 텍스트 입력: 사용자는 웹 인터페이스를 통해 이미지를 원하는 내용을 설명하는 텍스트를 입력합니다.

• AI 모델 호출: 입력된 텍스트 설명을 OpenAI API로 전달하여 이미지 생성 모델을 호출합니다.

• 이미지 생성: AI 모델은 입력된 설명에 기초하여 이미지를 생성하고 이를 반환합니다.

• 이미지 표시: 생성된 이미지를 사용자에게 표시하여 확인할 수 있도록 웹 인터페이스에 출력합니다.

• 이미지 공유: 생성된 이미지를 다른 사용자들에게 공유할 수 있습니다.

• 이미지 다운로드: 공유된 이미지와 다른 사용자들에게 공유되어진 AI 생성 이미지를 다운로드 할 수 있습니다.

• ​이미지 검색: 원하는 이미지 키워드를 검색하면 특정 이미지만 필터링 되어서 검색이 됩니다.

Challenges & Results

1. API Rate Limit: OpenAI API의 요청 제한으로 인해 초당 요청 수 및 일일 한도를 고려하여 API 사용을 관리했습니다. Open Ai 에서 제공하는 무료 크레딧이 없는 이상, 최소 5달러를 지불해야하며 크레딧을 모두 소진 할 시 더이상 이미지가 생성되지 않습니다.

2. 500 Server Side Internal Error: 생성된 이미지를 공유 할 시 공유 되어지지 않고 Internal Error 가 떠서 공유 버튼을 누르면 포스트가 되어지는 함수를 다시한번 꼼꼼하게 코드를 살펴봐야 했습니다.

3. Open Ai API 최신버전의 원초적인 문제: 최신버전의 API 가 현제 Fetch Error 로 더이상 AI 이미지가 생성되지 않으며 작동하지 않아, 버전을 한 단계 내려서 이 문제를 해결해야 했습니다.

4. 성공적인 이미지 생성: 사용자의 텍스트 입력에 따라 모델이 다양하고 품질 높은 이미지를 생성함으로써 성과를 달성했습니다.

5. ​저는 이 프로젝트를 통하여 최근 발생한 해결되지 않은 문제점을 다른 개발자들과 공유하고 리포트 하였습니다. 조금 더 참고하고 싶으시다면 깃헙 을 확인해주세요.