CookSleep/gpt_image_playground
基于 OpenAI gpt-image-2.5 API 的图片生成与编辑工具
🎨 GPT Image Playground – 무엇인가요
GPT Image Playground는 OpenAI의 gpt-image-2.5(및 호환) 이미지 생성 API를 위한 브라우저 기반 UI입니다. 웹 페이지에서 직접 이미지를 생성, 편집 및 관리할 수 있으며, 모든 데이터가 브라우저 로컬(IndexedDB)에 저장되므로 서버 측 스토리지가 필요하지 않습니다.
핵심 기능 (README 설명 기준)
| 기능 | 설명 |
|---|---|
| 텍스트-투-이미지 & 이미지-투-이미지 | 프롬프트로 이미지를 생성하거나, 최대 16개의 참조 이미지와 마스크를 사용하여 가이드 편집 가능. |
| 배치 & 반복 워크플로우 | 한 번의 요청으로 여러 이미지를 생성하고, 결과를 새 참조 이미지로 승격하여 다음 라운드에서 편집을 계속할 수 있음. |
| 스트리밍 미리보기 | Images API와 최신 Responses API 모두 중간 단계를 스트리밍하여 최종 이미지가 완료되기 전에 부분적인 결과를 볼 수 있음. |
| 투명 배경 지원 | API 네이티브(모델이 알파 채널 반환) 또는 로컬 후처리(브라우저에서 녹색/마젠타 배경 제거)를 선택하여 PNG/WebP 출력 가능. |
| 에이전트 모드 (다중 턴 채팅) | 컨텍스트를 기억하는 대화형 어시스턴트. 이미지 도구를 자동으로 호출하고, 이전 이미지에 대한 @ 참조를 지원하며, 병렬 배치 생성을 실행하고, 선택적으로 웹 검색 수행 가능. |
| 브랜치 & 다시 실행 | 채팅의 임의 턴을 편집하거나 재생성하여 이미지 참조가 분리된 별도의 브랜치를 생성 가능. |
| 세밀한 매개변수 추적 | 크기, 품질, 지연 시간, API가 실제로 사용한 모델 재작성 프롬프트를 표시. 빠른 사전 설정 크기(1K/2K/4K) 및 모델 제한에 대한 자동 반올림 기능 포함. |
| 로컬 전용 기록 & 갤러리 | 모든 작업, 썸네일, 메타데이터는 IndexedDB에 저장되며 SHA-256으로 중복 제거됨. 작업을 이름별 컬렉션으로 정리, 드래그 앤 드롭 정렬, 이름 변경, ZIP 파일로 내보내기 가능. |
| 다중 제공자 구성 | OpenAI 호환 엔드포인트, sub2api (async), fal.ai 및 JSON 정의를 통한 모든 사용자 지정 HTTP 제공자 내장 지원. 각 제공자별로 API 키, 모델, 타임아웃, 프록시 설정, 투명 배경 처리 방법 설정 가능. |
| API 프록시 & CORS 처리 | 서버(Docker, Vercel, Cloudflare Workers) 뒤에 배포할 경우, 동일 출처 /api-proxy/를 활성화하여 요청을 전달하고 브라우저의 CORS 제한을 우회 가능. |
| Codex-CLI 호환성 | 앱을 Codex-CLI 엔드포인트로 지정하면 UI가 자동으로 다중 이미지 요청을 병렬 단일 이미지 호출로 분할하고 Codex가 지원하는 추가 매개변수를 노출. |
| URL 기반 빠른 입력 | 쿼리 매개변수(apiUrl, apiKey, model, …)를 추가하여 설정을 미리 채울 수 있음. 북마크나 다른 사이트에 도구를 임베드할 때 유용. |
기술 스택 (배지 및 일반적인 Vite 프로젝트 기준)
- 프론트엔드: React 19 + TypeScript, Vite로 빌드.
- 스타일 / UI: Tailwind/Ant Design 스타일 컴포넌트 (명시되지 않았으나 대시보드에서 일반적).
- 상태 & 스토리지: 브라우저 IndexedDB를 사용하여 로컬 기록 유지; SHA-256 해싱으로 중복 제거.
- 빌드 & 배포: 정적 사이트 호스트(Vercel, GitHub Pages, Cloudflare Workers) 및 Nginx 프록시 + 빌드된 에셋을 실행하는 Docker 이미지 지원.
실행 방법
- 원클릭 클라우드 – Vercel, GitHub Pages 또는 Cloudflare Workers에 배포. 환경 변수
VITE_DEFAULT_API_URL(또는 JSON 설정)을 이미지 생성 엔드포인트로 지정. - Docker –
ghcr.io/cooksleep/gpt_image_playground:latest를 풀(pull)하여 실행. 선택적으로ENABLE_API_PROXY를 활성화하여 실제 API URL을 숨길 수 있음. - 로컬 개발 –
npm install && npm run dev.dev-proxy.config.json을 추가하여 개발 중 CORS 우회 가능. - 정적 빌드 –
npm run build로 생성된dist/폴더를 모든 정적 웹 서버에서 서비스 가능.
권장 사용자
- 아티스트 & 디자이너: 코딩 없이 OpenAI 이미지 모델용 UI를 빠르게 사용하려는 분.
- 제품 팀: 프롬프트 아이디어를 테스트하거나 에셋을 배치 생성하려는 팀.
- 개발자: 자체 앱에 통합하기 전에 다양한 API 제공자(OpenAI, fal.ai, 사용자 지정 엔드포인트)를 실험할 샌드박스가 필요한 분.
- 교육자 / 취미 사용자: 셀프 호스팅 방식의 개인정보 보호 중심 이미지 생성 환경을 찾는 분.
빠른 시작 체크리스트
- 호환 서비스(OpenAI, fal.ai, sub2api 게이트웨이 등)의 API 키 획득.
- 선호하는 방식으로 배포하고
VITE_DEFAULT_API_URL설정(또는 URL 매개변수 사용). - 웹 UI를 열고 설정을 추가(또는 미리 채워진 설정 사용)하여 생성 시작!
라이선스
이 프로젝트는 MIT License 하에 배포되므로 자유롭게 포크, 수정 및 셀프 호스팅할 수 있습니다.
관련
- Dispatch
- Dispatch
- Dispatch
- Dispatch
- 프로젝트