JavaScript 用 Azure AI Vision Image Analysis クライアント ライブラリ - バージョン 1.0.0-beta.3
Image Analysis サービスは、画像を処理し、そのコンテンツに関する情報を返す AI アルゴリズムを提供します。 1 つのサービス呼び出しで、画像のキャプションの取得、画像に表示されるテキストの抽出 (OCR)、オブジェクトの検出など、1 つ以上の視覚的特徴を画像から同時に抽出できます。 サービスとサポートされているビジュアル機能の詳細については、「イメージ分析の概要」および「の概念」 ページを参照してください。
Image Analysis クライアント ライブラリを使用して、次の手順を実行します。
- サービスに対する認証
- 抽出する機能を設定する
- 分析用の画像をアップロードするか、画像 URL を送信する
- 分析結果を取得する
製品ドキュメント | サンプル | Vision Studio | API リファレンス ドキュメント | Package (npm) | SDK ソース コード
はじめ
現在サポートされている環境
- Node.js の LTS バージョンを
する - Safari、Chrome、Edge、Firefox の最新バージョン。
詳細については、サポート ポリシーの を参照してください。
前提 条件
- Azure サブスクリプション。
- Azure サブスクリプション内の Computer Vision リソース。
- サービスに対して認証するには、このリソースのキーとエンドポイントが必要です。
- Free 価格レベル (
F0) を使用してサービスを試し、後で運用環境用の有料レベルにアップグレードできます。 -
CaptionまたはDense Captions機能を使用してイメージ分析を実行するには、Azure リソースが GPU でサポートされているリージョン (East US、France Central、Korea Central、North Europe、Southeast Asia、West Europe、またはWest USのいずれか) である必要があります。
@azure-rest/ai-vision-image-analysis パッケージをインストールする
npmを使用して JavaScript 用の Image Analysis クライアント ライブラリをインストールします。
npm install @azure-rest/ai-vision-image-analysis
ブラウザーのサポート
JavaScript バンドル
ブラウザーでこのクライアント ライブラリを使用するには、まず、バンドルを使用する必要があります。 これを行う方法の詳細については、
主な概念
ImageAnalysisClientを初期化したら、分析する 1 つ以上の視覚的特徴を選択する必要があります。 オプションは、列挙型クラス VisualFeaturesで指定されます。 次の機能がサポートされています。
-
VisualFeatures.Caption: (サンプル | サンプル) 画像の内容を説明する人間が判読できる文を生成します。 -
VisualFeatures.Read: (サンプル | サンプル) は光学式文字認識 (OCR) とも呼ばれます。 画像から印刷または手書きのテキストを抽出します。 -
VisualFeatures.DenseCaptions: 密なキャプションは、画像全体の 1 つを含む、画像内の最大 10 の異なる領域に対して 1 文のキャプションを生成することで、より詳細な情報を提供します。 -
VisualFeatures.Tags: 画像に表示される何千もの認識可能なオブジェクト、生き物、風景、アクションのコンテンツ タグを抽出します。 -
VisualFeatures.Objects: 物体検出。 これはタグ付けに似ていますが、画像内の物理オブジェクトを検出し、その場所を返することに重点を置いていました。 -
VisualFeatures.SmartCrops: サムネイル生成用の画像の代表的なサブ領域を見つけるために使用され、顔を含めるために優先されます。 -
VisualFeatures.People: 画像内のユーザーを見つけて、その場所を返します。
これらの機能の詳細については、「イメージ分析の概要」および「の概念」 ページを参照してください。
サポートされているイメージ形式
画像分析は、次の要件を満たす画像に対して機能します。
- 画像は JPEG、PNG、GIF、BMP、WEBP、ICO、TIFF、または MPO 形式で表示する必要があります
- イメージのファイル サイズは 20 メガバイト (MB) 未満にする必要があります
- 画像のサイズは、50 x 50 ピクセルより大きく、16,000 x 16,000 ピクセル未満である必要があります
ImageAnalysisClient
ImageAnalysisClient は、開発者が Image Analysis サービスと対話するための主要なインターフェイスです。 これは、ライブラリとのすべての対話が行われるゲートウェイとして機能します。
例
クライアントを認証する
キーベースの認証を使用して 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 用の Image Analysis クライアント ライブラリを使用して画像を分析する方法を示します。
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 用の Image Analysis クライアント ライブラリを使用して、ローカル ファイルから画像を分析します。
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/loggerで setLogLevel を呼び出すことによって、実行時にログを有効にすることもできます。
const { setLogLevel } = require("@azure/logger");
setLogLevel("info");
ログを有効にする方法の詳細な手順については、@azure/logger パッケージのドキュメントを参照してください。
次の手順
クライアント ライブラリの使用方法を示す詳細な例については、ディレクトリ
貢献
このライブラリに投稿する場合は、コードをビルドしてテストする方法の詳細については、投稿ガイド を参照してください。
関連プロジェクト
- Microsoft Azure SDK for JavaScript の
Azure SDK for JavaScript