CookSleep/gpt_image_playground
基于 OpenAI gpt-image-2 API 的图片生成与编辑工具
🎨 GPT Image Playground – 무엇인가요
GPT Image Playground는 OpenAI의 gpt-image-2 (및 호환되는) 이미지 생성 API를 위한 웹 기반 프론트엔드입니다. 브라우저에서 직접 이미지를 생성하고 편집할 수 있으며, 모든 요청과 결과를 로컬(IndexedDB)에 저장하여 제3자 서버로 전송되지 않습니다.
핵심 기능
| 기능 | 얻을 수 있는 것 |
|---|---|
| 텍스트에서 이미지, 이미지에서 이미지 | 프롬프트를 입력하고 최대 16개의 참조 이미지를 업로드하며 마스크를 추가하여 새로운 이미지를 생성합니다. |
| 배치 및 반복 워크플로우 | 한 번의 호출로 여러 이미지를 생성할 수 있으며, 결과 중 하나를 단일 클릭으로 다음 라운드의 참조 이미지로 승격할 수 있습니다. |
| 스트리밍 미리보기 | 모델이 작업 중일 때 중간 프레임을 실시간으로 볼 수 있어 긴 "공백" 대기 시간을 피할 수 있습니다. |
| 투명 배경 지원 | 제공자가 알파 채널을 반환하는 경우 네이티브 API 모드를 선택하거나, 고정 색상 배경을 로컬에서 제거하는 후처리를 사용할 수 있습니다. |
| 에이전트(채팅) 모드 | 컨텍스트를 기억하는 멀티턴 대화형 UI로, 이미지 도구를 자동으로 호출하고, 선택적으로 웹 검색도 수행할 수 있습니다. |
| 분기 및 재실행 | 어떤 단계든 편집하거나 재생성할 수 있으며, UI는 새로운 분기를 생성하여 기록을 잃지 않고 대안을 전환할 수 있습니다. |
| 풍부한 기록 및 갤러리 | 모든 작업이 로컬에 저장되며, 워터폴 스타일 갤러리에서 확인 가능하며, 사용자 이름으로 컬렉션에 정리되고 검색 가능하며 ZIP으로 내보낼 수 있습니다. |
| 다중 API 제공자 지원 | OpenAI 호환 엔드포인트, sub2api (비동기), fal.ai, 그리고 JSON 정의를 통해 사용자 정의 HTTP 제공자를 포함한 내장 지원. |
| 프로필별 구성 | 여러 API 프로필(다른 키, 모델, 타임아웃, 프록시 설정)을 저장하고 즉시 전환할 수 있습니다. |
| 프록시 및 CORS 처리 | Docker 또는 Vercel 배포에서 활성화 가능한 동일 출처 /api-proxy/를 선택적으로 사용하여 브라우저 CORS 제한을 우회할 수 있습니다. |
기술 스택
- 프론트엔드: React 19 + TypeScript, Vite로 번들링.
- 상태 및 저장소: 오프라인 전용 기록용 브라우저 IndexedDB (SHA‑256 중복 제거).
- 스타일링: Tailwind CSS (배지 스타일에서 암묵적으로 상속).
- 배포: 정적 빌드 (
npm run build)로, Vercel, GitHub Pages, Cloudflare Workers, Docker (NGINX 래퍼), 또는 어떤 정적 파일 호스팅에서도 제공 가능. - 백엔드: 필요 없음; 모든 중량 작업은 원격 이미지 생성 API가 처리합니다.
시작 방법
- 배포 방법 선택 – 1클릭 Vercel, GitHub Pages Action, Cloudflare Workers, Docker, 또는
npm run dev로 로컬 실행. - 사전 설정 API 구성 제공 –
VITE_DEFAULT_API_URL(Docker에서는DEFAULT_API_URL) 환경 변수로 제공. 일반 URL, 쿼리 매개변수 포함 URL, 또는 여러 프로필과 사용자 정의 제공자를 정의하는 전체 JSON 파일을 사용 가능. - UI 열기 – 호스팅된 사이트(예:
https://gpt-image-playground.cooksleep.dev)가 사전 설정을 로드하고 API 키를 요청하며, 이미지 생성 준비 완료.
일반적인 사용 사례
- 크리에이티브 전문가 : 투명 배경이 필요한 빠른 마크업, 스티커, 아이콘 필요 시.
- 개발자 : 코드를 작성하지 않고 새로운
gpt-image-2모델의 프롬프트 엔지니어링을 테스트하고 싶을 때. - 팀 : 공유되고, 프라이버시를 보장하는 생성 자산 갤러리가 필요할 때 (모든 내용은 브라우저 내부에 머무름).
- 실험가 : 에이전트 채팅 모드를 통해 다단계 이미지 워크플로우를 탐색하고, 자동 웹 검색 보완을 시도할 때.
TL;DR: GPT Image Playground는 오픈소스이며 React 기반의 UI로, OpenAI 호환 이미지 생성 API를 완전히 로컬에 저장되고, 다중 프로필, 배치 처리가 가능한 플레이그라운드로 변환합니다. 선택적 대화형 "에이전트" 모드와, 어떤 정적 호스팅 플랫폼에도 쉽게 배포할 수 있습니다.
관련
- 프로젝트
- Dispatch
- 프로젝트
- Dispatch
- Dispatch