문서
시작하기/빠른 시작

빠른 시작

AI 이미지 설명 API를 몇 분 안에 시작하세요. 이 가이드는 AI 기반 이미지 설명을 애플리케이션에 통합하는 필수 단계를 안내합니다.

사전 요구사항

시작하기 전에 다음을 확인하세요:

  • 계정: aidescribepicture.com에서 등록
  • API 키: 설정에서 API 키 생성
  • 크레딧: 이미지 설명 크레딧 구매
  • 이미지 URL: 테스트용 공개 접근 가능한 이미지 URL

1단계: API 키 받기

  1. aidescribepicture.com 방문
  2. Google 계정으로 로그인
  3. 설정 > API 키로 이동
  4. "새 API 키 만들기" 버튼 클릭
  5. 키 이름 입력 (예: "내 앱")
  6. 키 생성 후 전체 키 값을 복사 (안전하게 보관하세요!)

API 키 형식

  • sk-로 시작
  • 무작위로 생성된 문자 포함
  • 예시: sk-abc123def456ghi789...

2단계: 첫 번째 API 호출

cURL 사용

curl -X POST https://aidescribepicture.com/api/api-call/describe-picture \
  -H "Content-Type: application/json" \
  -H "Authorization: Bearer YOUR_API_KEY" \
  -d '{
    "imageUrl": "https://example.com/image.jpg",
    "prompt": "이 이미지를 자세히 설명하세요"
  }'

JavaScript 사용

async function describeImage(imageUrl, apiKey, prompt = null) {
  try {
    const response = await fetch('https://aidescribepicture.com/api/api-call/describe-picture', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
        'Authorization': `Bearer ${apiKey}`
      },
      body: JSON.stringify({
        imageUrl: imageUrl,
        prompt: prompt
      })
    });
 
    if (!response.ok) {
      const error = await response.text();
      throw new Error(`API 오류: ${response.status} - ${error}`);
    }
 
    const result = await response.json();
    
    // 설명 내용 추출
    const description = result.choices[0].message.content;
    return description;
  } catch (error) {
    console.error('이미지 설명 오류:', error);
    throw error;
  }
}
 
// 사용 예시
const description = await describeImage(
  'https://example.com/image.jpg',
  'your-api-key-here',
  '이 이미지를 자세히 설명하세요'
);
console.log('이미지 설명:', description);

3단계: 응답 처리

API는 이미지 설명이 포함된 JSON 응답을 반환합니다:

{
  "choices": [
    {
      "message": {
        "content": "이 이미지는 카메라를 향해 정면을 바라보는 붉은 여우의 클로즈업을 보여줍니다. 여우는 푹신한 주황색과 흰색 털을 가지고 있으며, 똑바로 선 귀와 밝은 갈색 눈을 가지고 있습니다. 배경은 흐릿하며, 아마도 눈이 쌓인 환경이나 밝은 환경일 것입니다."
      }
    }
  ]
}

choices[0].message.content 필드에 실제 이미지 설명 텍스트가 포함되어 있습니다.

4단계: 결과 표시

HTML에서

<div id="description">
  <p id="image-description"></p>
</div>

JavaScript에서

// 설명 표시
const descriptionElement = document.getElementById('image-description');
descriptionElement.textContent = description;

5단계: 오류 처리

항상 적절한 오류 처리를 구현하세요:

try {
  const description = await describeImage(imageUrl, apiKey, prompt);
  // 성공 처리
  console.log('설명:', description);
} catch (error) {
  if (error.message.includes('401')) {
    console.error('잘못된 API 키');
  } else if (error.message.includes('402')) {
    console.error('크레딧 부족');
  } else if (error.message.includes('429')) {
    console.error('속도 제한 초과');
  } else {
    console.error('API 오류:', error.message);
  }
}

API 키 관리

설정에서 키 관리

  • 모든 API 키 목록 보기
  • 키 사용 통계 보기
  • 사용하지 않는 키 비활성화 또는 삭제
  • 키의 마지막 사용 시간 보기

보안 모범 사례

  • 클라이언트 사이드 코드에서 API 키를 하드코딩하지 마세요
  • 환경 변수를 사용하여 키 저장
  • API 키를 정기적으로 교체
  • 다른 환경에서 다른 키 사용

환경 변수 예시

# .env 파일
IMAGE_DESCRIPTION_API_KEY=sk-your-api-key-here
// 코드에서 사용
const apiKey = process.env.IMAGE_DESCRIPTION_API_KEY;

On this page