멀티모달리티를 로컬에서 실행하기

이 페이지를 사용하여 추출한 멀티모달리티 프로젝트(이미지 생성 또는 이미지 이해)를 실행할 수 있습니다. 둘 다 동일한 Vite 키 적응과 OpenAI SDK 업데이트가 필요합니다. 그 후 보유한 프로젝트에 맞는 수정을 진행하세요. 키 적응은 모든 추출된 코스 프로젝트가 필요로 하는 것과 같으며, Chef Claude를 로컬에서 실행하기에서 두 개의 provider 경로가 있는 React 프로젝트에 이를 적용합니다.

먼저 필요한 것

지원되는 LTS 버전의 Node.js를 설치합니다. Node 24를 권장하며 npm이 포함되어 있습니다.

두 명령어가 모두 작동하는지 확인합니다:

$ node --version
v24.18.0
$ npm --version
11.18.0

청구 및 사용할 모델에 대한 액세스 권한이 있는 OpenAI API 키가 필요합니다. 이미지 생성 액세스는 조직 인증이 필요할 수 있습니다.

낮은 지출 한도가 있는 임시 키를 사용합니다. 두 프로젝트 모두 브라우저 코드에서 유료 OpenAI 요청을 하므로 키를 검사할 수 있습니다.

Juno먼저 필요한 것 Node.js LTS를 설치하고 청구 및 낮은 지출 한도가 있는 임시 OpenAI 키를 준비합니다. 이미지 생성은 조직 인증도 요청할 수 있으므로 개발을 시작하기 전에 확인합니다. 저는 한 번 청구가 첨부되지 않은 키로 하루 밤을 보냈는데 오류 메시지에서 한 번도 말하지 않았습니다!

Juno먼저 필요한 것 Vite는 OpenAI 프로젝트에 청구 또는 모델 액세스가 있기 훨씬 전에 페이지를 제공할 수 있으므로 로드되는 페이지는 계정에 대해 아무것도 증명하지 않습니다. 첫 번째 유료 이미지 요청이 키가 작동하는지 증명합니다. 그 키를 낮은 지출 한도로 제한하여 실수가 비용이 적게 되도록 합니다.

Juno먼저 필요한 것 로컬 번들링과 OpenAI 액세스는 독립적으로 실패하므로 이를 별도의 전제 조건으로 취급합니다. 브라우저가 키를 수신하므로 DevTools를 가진 누구나 그렇게 합니다. 지금 예산을 제한하고 배포처럼 보이는 것이 있기 전에 요청을 서버 측으로 이동합니다. 저는 이 정도로 키를 취소했습니다.

프로젝트 열기 및 준비하기

package.json이 포함된 추출한 폴더에서 터미널을 엽니다:

$ cd path-to-your-downloaded-project
$ npm install
$ npm install openai@latest

두 번째 설치는 현재 이미지 API를 사용하기 전에 오래된 코스 SDK를 업데이트합니다.

package.json 옆에 .env와 .gitignore를 생성합니다:

VITE_OPENAI_API_KEY=your-openai-api-key

.env
node_modules/

.gitignore 항목은 키와 재구성 가능한 node_modules 폴더를 생성하는 모든 저장소에서 제외합니다. 파일 무시 및 좋은 습관은 더 넓은 습관을 다룹니다.

index.js에서 OpenAI 클라이언트 키를 다음에서:

apiKey: process.env.OPENAI_API_KEY,

다음으로 변경합니다:

apiKey: import.meta.env.VITE_OPENAI_API_KEY,

키가 프론트엔드에 포함됨

이는 제한된 키를 사용한 임시 로컬 학습에만 허용됩니다. 이미지 요청은 비용이 들 수 있습니다. 브라우저 전용 버전을 배포하거나 공유하지 마세요. 먼저 OpenAI 요청을 백엔드로 이동합니다.

Juno프로젝트 열기 및 준비하기package.json이 포함된 추출한 폴더를 열고 패키지를 설치한 후 현재 OpenAI SDK를 설치합니다. 임시 키는 .env에 들어가고 .gitignore는 해당 파일을 Git에서 제외합니다. 커밋에 도달하지 않는 키는 교체할 필요가 없는 키입니다!

Juno프로젝트 열기 및 준비하기 두 프로젝트 모두 동일한 두 가지 편집을 필요로 합니다: SDK 업데이트와 Vite 키 대체입니다. Vite는 시작 시 .env를 읽으므로 파일을 변경한 후 다시 시작합니다. 그리고 모든 VITE_ 값은 브라우저로 전송되므로 접두사를 숨기는 장소가 아니라 게시 스위치로 취급합니다.

Juno프로젝트 열기 및 준비하기 먼저 SDK를 업그레이드합니다: 코스 버전은 gpt-image 요청 형태보다 먼저이므로 이전 패키지를 통한 새 모델 호출이 버전 격차가 아니라 버그로 보이는 방식으로 실패합니다. 그 다음 전역 모델과 응답 처리를 교환합니다. 저는 한 번 다른 순서로 했고 절대 문제가 아닌 코드를 감시하는 데 한 시간을 보냈습니다.

이미지 생성 프로젝트 수정하기

코스 스냅샷은 폐지된 dall-e-3 모델을 호출하고 호스팅된 이미지 URL을 기대합니다. 현재 OpenAI 이미지 생성 가이드에 따라 이미지 요청을 변경하여 gpt-image-2를 사용합니다:

const image = await openai.images.generate({
  model: "gpt-image-2",
  prompt,
  size: "1024x1024",
})

코드가 image.data[0].url을 읽는 곳에서 반환된 base64 이미지로 만든 데이터 URL로 바꿉니다:

`data:image/png;base64,${image.data[0].b64_json}`

추출한 파일의 주변 할당 또는 마크업을 유지합니다.

base64 문자열은 전체 이미지가 응답에 인라인되어 있으므로 1메가바이트 이상의 페이로드를 예상합니다. 백엔드가 있는 버전은 이미지를 서버 측에 저장하고 긴 데이터 URL 대신 짧은 URL을 페이지에 전달합니다.

Juno이미지 생성 프로젝트 수정하기 요청을 gpt-image-2로 지정하고 반환된 base64 값을 PNG 데이터 URL로 변환합니다. 폐지된 모델과 이전 .url 필드가 함께 가므로 두 부분 모두 업데이트가 필요합니다. 하나만 변경하면 깨진 이미지가 표시되므로 첫 번째로 만든 정확한 실수입니다!

Juno이미지 생성 프로젝트 수정하기 계약이 양쪽 끝에서 변경되었습니다: 요청하는 모델과 이미지가 반환되는 필드입니다. gpt-image-2를 요청하고 .url 대신 b64_json을 읽으며 추출에서 주변 할당을 유지합니다. 사진이 깨지면 다른 것을 건드리기 전에 data:image/png;base64, 접두사를 확인합니다.

Juno이미지 생성 프로젝트 수정하기 Base64는 전체 이미지가 JSON 응답 내부로 이동함을 의미하므로 1메가바이트 이상의 페이로드와 나머지 마크업을 능가하는 데이터 URL로 예산을 계획합니다. 백엔드 버전은 이미지를 서버 측에 유지하고 긴 데이터 URL 대신 짧은 URL을 페이지에 전달합니다. 인라인은 로컬 연습에 문제없습니다. 프로덕션에서는 비용입니다.

비전 프로젝트 수정하기

비전 2부 프로젝트에서 폐지된 모델 ID를 바꿉니다:

model: "gpt-4-vision-preview",

이미지 기능이 있는 gpt-4o-mini로:

model: "gpt-4o-mini",

기존 메시지 형식은 여전히 텍스트 및 이미지 입력을 보낼 수 있습니다.

업데이트된 요청이 실패하면 먼저 gpt-4o-mini에 텍스트만 보내는 메시지를 보냅니다. 거기서의 성공은 계정이 모델을 사용할 수 있음을 확인하여 메시지의 이미지 부분을 검사할 대상으로 남겨둡니다.

Juno비전 프로젝트 수정하기 폐지된 비전 모델을 gpt-4o-mini로 바꾸고 텍스트 및 이미지 메시지 형식을 그대로 둡니다. 모델 ID만 변경되었으며 요청의 형태는 아닙니다. 건드리는 줄이 적을수록 깰 수 있는 줄이 적으며, 이는 계속 다시 배우는 교훈입니다!

Juno비전 프로젝트 수정하기 이 수정은 모델 대체만입니다. 응답 형태 재작업은 여기가 아니라 이미지 생성에 속합니다. 요청을 gpt-4o-mini로 지정하고 멀티모달 콘텐츠 배열을 그대로 둡니다. 교환 후에도 호출이 실패하면 자신의 메시지 코드 전에 계정 액세스를 의심합니다.

Juno비전 프로젝트 수정하기 폐지된 모델 ID만 변경하고 멀티모달 콘텐츠 배열을 유지합니다. 호출이 실패하면 먼저 gpt-4o-mini에 텍스트만 보내는 요청을 보냅니다. 거기서의 성공은 계정 액세스를 증명하고 실패를 이미지 처리에 고정합니다. 재작성하기 전에 요청을 나누세요. 저는 먼저 재작성한 사람으로 말합니다.

프로젝트 실행하기

$ npm start

Vite에서 출력한 Local URL을 엽니다. 이미지 생성 프로젝트에서 프롬프트를 제출하고 페이지에서 생성된 이미지를 찾습니다. 비전 프로젝트에서 이미지와 질문을 제출하고 모델의 텍스트 응답을 찾습니다. .env를 변경한 후 다시 시작하고 Ctrl+C로 프로젝트를 중지합니다.

Juno프로젝트 실행하기npm start를 실행하고 Vite가 출력한 로컬 URL을 열고 흐름 끝을 끝까지 시도합니다. 생성된 이미지 또는 비전 회신은 성공 신호이며 모든 시도는 유료 요청입니다. 클릭을 시작하기 전에 테스트 프롬프트를 작성하면 비용과 의심을 절약합니다!

Juno프로젝트 실행하기 Vite 시작은 적응된 번들이 컴파일됨을 증명하며 계정에 대해 아무것도 말하지 않습니다. 한 번의 실제 요청은 키, 청구, 모델 액세스 및 프로젝트별 응답 경로를 한 번에 확인합니다. .env 편집 후 Vite를 다시 시작하거나 이전 값이 계속 제공됩니다.

Juno프로젝트 실행하기 각 프로젝트에는 자체 성공 신호가 있습니다: 이미지 생성은 base64를 수신하고 이를 데이터 URL로 렌더링해야 하며, 비전은 혼합 텍스트 및 이미지 메시지를 수락해야 합니다. 코드를 건드리기 전에 올바른 것에 대해 확인합니다. 모든 재시도는 청구되므로 콘솔을 먼저 읽고 두 번째 시도를 정보 있는 것으로 만듭니다.

문제 해결

process is not defined: index.js에서 남은 process.env 키 읽기를 import.meta.env.VITE_... 형식으로 바꿉니다.

생성된 이미지가 깨짐: 코드가 b64_json을 읽고 .url을 읽는 대신 data:image/png;base64, 접두사를 추가하는지 확인합니다.

모델을 사용할 수 없음: OpenAI 프로젝트에서 청구, 조직 인증 및 모델 액세스를 확인합니다. 제공자 가용성은 계정에 따라 다를 수 있습니다.

SDK가 브라우저 같은 환경 오류를 보고함: npm install openai@latest는 SDK의 브라우저 가드를 유지하며 이는 브라우저 코드에서 API 키로 실행하기를 거부합니다. 추출이 이미 OpenAI 클라이언트 옵션에서 dangerouslyAllowBrowser: true를 전달하지 않으면 apiKey 줄 옆에 추가합니다. 옵션 이름은 경고입니다: 이는 로컬에서 사용되는 임시 제한 키에만 허용됩니다.

요청은 작동하지만 페이지는 변경되지 않음: 브라우저 콘솔에서 렌더링 오류를 확인하고 반환된 필드를 위의 관련 수정과 비교합니다.

Juno문제 해결 목록을 작성합니다: 남은 process.env 읽기를 수정하고 모델을 확인한 후 이미지 생성을 위해 b64_json을 확인하거나 렌더링 오류를 위해 브라우저 콘솔을 확인합니다. 여기서 대부분의 실패는 미스터리가 아니라 하나의 완료되지 않은 편집입니다. 평범한 것을 먼저 확인합니다. 습관이 되는 데 너무 오래 걸렸습니다!

Juno문제 해결 Vite 대체, 계정 액세스, 응답 형태 및 페이지 렌더링을 분리합니다. 각 계층은 독립적으로 실패합니다. 성공적인 요청도 잘못 렌더링될 수 있으므로 네트워크 탭과 페이지가 불일치할 수 있습니다. 무언가를 편집하기 전에 증상을 한 계층과 일치시킵니다.

Juno문제 해결 UI 코드를 변경하기 전에 원시 제공자 응답을 검사합니다. 페이로드는 페이지가 할 수 없는 논쟁을 해결합니다. 이미지 생성 출력과 비전 메시지 처리를 분리합니다. 실패는 단지 비슷해 보입니다. 그리고 업그레이드된 SDK가 브라우저에서 실행하기를 거부하면 그 가드는 자신의 일을 하고 있습니다. dangerouslyAllowBrowser는 로컬 전용 재정의이지 프로덕션 답변이 아닙니다.