JavaScript용 Azure AI Vision Image Analysis 클라이언트 라이브러리 - 버전 1.0.0-beta.3

이미지 분석 서비스는 이미지를 처리하고 콘텐츠에 대한 정보를 반환하기 위한 AI 알고리즘을 제공합니다. 단일 서비스 호출에서 이미지 캡션 가져오기, 이미지에 표시된 텍스트 추출(OCR) 및 개체 검색을 포함하여 이미지에서 하나 이상의 시각적 기능을 동시에 추출할 수 있습니다. 서비스 및 지원되는 시각적 기능에 대한 자세한 내용은 이미지 분석 개요및 개념 페이지를 참조하세요.

이미지 분석 클라이언트 라이브러리를 사용하여 다음을 수행합니다.

• 서비스에 대해 인증
• 추출할 기능 설정
• 분석을 위해 이미지 업로드 또는 이미지 URL 보내기
• 분석 결과 가져오기

제품 설명서 | 샘플 | Vision Studio | API 참조 설명서 | 패키지(npm) | SDK 소스 코드

시작

현재 지원되는 환경

• LTS 버전의 Node.js
• Safari, Chrome, Edge 및 Firefox의 최신 버전입니다.

자세한 내용은 지원 정책 참조하세요.

필수 구성 요소

• Azure 구독.
• Azure 구독에서 Computer Vision 리소스.
  • 서비스에 대해 인증하려면 이 리소스의 키와 엔드포인트가 필요합니다.
  • 무료 가격 책정 계층(F0)을 사용하여 서비스를 시도하고 나중에 프로덕션용 유료 계층으로 업그레이드할 수 있습니다.
  • Caption 또는 Dense Captions 기능을 사용하여 이미지 분석을 실행하려면 Azure 리소스는 East US, France Central, Korea Central, North Europe, Southeast Asia, West Europe또는 West USGPU 지원 지역 중 하나여야 합니다.

@azure-rest/ai-vision-image-analysis 패키지 설치

npm사용하여 JavaScript용 이미지 분석 클라이언트 라이브러리를 설치합니다.

npm install @azure-rest/ai-vision-image-analysis

브라우저 지원

JavaScript 번들

브라우저에서 이 클라이언트 라이브러리를 사용하려면 먼저 번들러를 사용해야 합니다. 이 작업을 수행하는 방법에 대한 자세한 내용은 번들링 설명서참조하세요.

주요 개념

ImageAnalysisClient초기화한 후에는 분석할 시각적 기능을 하나 이상 선택해야 합니다. 옵션은 열거형 클래스 VisualFeatures지정됩니다. 지원되는 기능은 다음과 같습니다.

1. VisualFeatures.Caption: (예제 | 샘플) 이미지의 내용을 설명하는 사람이 읽을 수 있는 문장을 생성합니다.
2. VisualFeatures.Read: (예제 | 샘플) OCR(광학 문자 인식)라고도 합니다. 이미지에서 인쇄 또는 필기 텍스트를 추출합니다.
3. VisualFeatures.DenseCaptions: 조밀 캡션은 전체 이미지에 대한 캡션을 포함하여 이미지에서 최대 10개의 다른 영역에 대해 1개의 문장 캡션을 생성하여 자세한 정보를 제공합니다.
4. VisualFeatures.Tags: 이미지에 나타나는 수천 개의 인식 가능한 개체, 살아있는 존재, 풍경 및 작업에 대한 콘텐츠 태그를 추출합니다.
5. VisualFeatures.Objects: 개체 검색 이는 태그 지정과 비슷하지만 이미지에서 물리적 개체를 검색하고 해당 위치를 반환하는 데 중점을 두는 데 중점을 두는 것입니다.
6. VisualFeatures.SmartCrops: 얼굴을 포함하도록 우선 순위가 지정된 썸네일 생성을 위한 이미지의 대표적인 하위 영역을 찾는 데 사용됩니다.
7. VisualFeatures.People: 이미지에서 사람을 찾고 해당 위치를 반환합니다.

이러한 기능에 대한 자세한 내용은 이미지 분석 개요및 개념 페이지를 참조하세요.

지원되는 이미지 형식

이미지 분석은 다음 요구 사항을 충족하는 이미지에서 작동합니다.

• 이미지는 JPEG, PNG, GIF, BMP, WEBP, ICO, TIFF 또는 MPO 형식으로 표시되어야 합니다.
• 이미지의 파일 크기는 20MB 미만이어야 합니다.
• 이미지의 크기는 50 x 50 픽셀보다 크고 16,000 x 16,000 픽셀 미만이어야 합니다.

ImageAnalysisClient

ImageAnalysisClient 이미지 분석 서비스와 상호 작용하는 개발자를 위한 기본 인터페이스입니다. 라이브러리와의 모든 상호 작용이 발생하는 게이트웨이 역할을 합니다.

예제

클라이언트 인증

다음은 키 기반 인증을 사용하여 ImageAnalysisClient 인스턴스를 만드는 방법의 예입니다.

const key = "<your_key>";
const credential = new AzureKeyCredential(key);

const client = new ImageAnalysisClient(endpoint, credential);

const { ImageAnalysisClient } = require("@azure-rest/ai-vision-image-analysis");
const { AzureKeyCredential } = require('@azure/core-auth');

const endpoint = "<your_endpoint>";
const key = "<your_key>";
const credential = new AzureKeyCredential(key);

const client = new ImageAnalysisClient(endpoint, credential);

Microsoft Entra ID 자격 증명을 사용하여 ImageAnalysisClient 만들기

클라이언트 구독 키 인증은 이 시작 가이드의 대부분의 예제에서 사용되지만 [Azure ID 라이브러리][azure_identity]를 사용하여 Microsoft Entra ID(이전의 Azure Active Directory)로 인증할 수도 있습니다. 아래에 표시된 [DefaultAzureCredential][azure_identity_dac] 공급자 또는 Azure SDK와 함께 제공되는 기타 자격 증명 공급자를 사용하려면 Azure.Identity 패키지를 설치하세요.

npm install @azure/identity

const endpoint = "<your_endpoint>";
const credential = new DefaultAzureCredential();

const client = new ImageAnalysisClient(endpoint, credential);

URL에서 이미지 분석

다음 예제에서는 JavaScript용 이미지 분석 클라이언트 라이브러리를 사용하여 이미지를 분석하는 방법을 보여 줍니다.

const imageUrl = "https://example.com/image.jpg";
const features = ["Caption", "DenseCaptions", "Objects", "People", "Read", "SmartCrops", "Tags"];

async function analyzeImageFromUrl() {
  const result = await client.path("/imageanalysis:analyze").post({
    body: {
      url: imageUrl,
    },
    queryParameters: {
      features: features,
      "smartCrops-aspect-ratios": [0.9, 1.33],
    },
    contentType: "application/json",
  });

  console.log("Image analysis result:", result.body);
}

analyzeImageFromUrl();

로컬 파일에서 이미지 분석

이 예제에서는 JavaScript용 이미지 분석 클라이언트 라이브러리를 사용하여 로컬 파일의 이미지를 분석합니다.

const fs = require("fs");

const imagePath = "./path/to/your/image.jpg";
const features = ["Caption", "DenseCaptions", "Objects", "People", "Read", "SmartCrops", "Tags"];

async function analyzeImageFromFile() {
  const imageBuffer = fs.readFileSync(imagePath);

  const result = await client.path("/imageanalysis:analyze").post({
    body: imageBuffer,
    queryParameters: {
      features: features,
      "smartCrops-aspect-ratios": [0.9, 1.33],
    },
    contentType: "application/octet-stream",
  });

  console.log("Image analysis result:", result.body);
}

analyzeImageFromFile();

이미지 URL에서 텍스트 추출

이 예제에서는 ImageAnalysisClient를 사용하여 이미지 파일 sample.jpg 인쇄되거나 손으로 쓴 텍스트를 추출하는 방법을 보여 줍니다. 메서드 호출은 ImageAnalysisResult 개체를 반환합니다. 반환된 개체의 ReadResult 속성에는 텍스트 줄 목록과 각 텍스트 줄을 둘러싼 경계 다각형이 포함됩니다. 각 줄에 대해 텍스트 줄의 단어 목록과 각 단어를 둘러싼 경계 다각형도 반환합니다.

const client: ImageAnalysisClient = createImageAnalysisClient(endpoint, credential);

const features: string[] = [
  'Read'
];

const imageUrl: string = 'https://aka.ms/azsdk/image-analysis/sample.jpg';

client.path('/imageanalysis:analyze').post({
  body: { url: imageUrl },
  queryParameters: { features: features },
  contentType: 'application/json'
}).then(result => {
  const iaResult: ImageAnalysisResultOutput = result.body as ImageAnalysisResultOutput;

  // Process the response
  if (iaResult.readResult && iaResult.readResult.blocks.length > 0) {
    iaResult.readResult.blocks.forEach(block => {
      console.log(`Detected text block: ${JSON.stringify(block)}`);
    });
  } else {
    console.log('No text blocks detected.');
  }

문제 해결

로깅

로깅을 사용하도록 설정하면 오류에 대한 유용한 정보를 파악하는 데 도움이 될 수 있습니다. HTTP 요청 및 응답 로그를 보려면 AZURE_LOG_LEVEL 환경 변수를 info설정합니다. 또는 @azure/loggersetLogLevel 호출하여 런타임에 로깅을 사용하도록 설정할 수 있습니다.

const { setLogLevel } = require("@azure/logger");

setLogLevel("info");

로그를 사용하도록 설정하는 방법에 대한 자세한 지침은 @azure/로거 패키지 문서확인할 수 있습니다.

다음 단계

클라이언트 라이브러리를 사용하는 방법을 보여 주는 자세한 예제는 샘플 디렉터리를 살펴보세요.

기여

이 라이브러리에 기여하려면 기여 가이드 읽어 코드를 빌드하고 테스트하는 방법에 대해 자세히 알아보세요.

관련 프로젝트

• JavaScript용 Microsoft Azure SDK