【Azure OpenAI Service】 写真解析アプリ作ってみたよぉ

環境メモ
⭐️Azure OpenAI service 30日無料クレジット
⭐️Windows 11
⭐️プロセッサ:AMD Ryzen 7 6800HS with Radeon Graphics
⭐️Python


<br/>
Azure AI services（Computer Vision）のImage Analysis 4.0 Analyze APIを使って写真解析アプリを作ってみた。

仕様:アップロードされた写真を分析し写真内の物体を特定します。
検出された物体は、その位置をバウンディングボックス（枠線）で囲み、物体名を左端に表示します。
<br/>

↓↓↓↓完成内容
<blockquote class="twitter-tweet"><p lang="ja" dir="ltr">📸Azure OpenAI Service📸 <br>写真解析📸アプリ作ってみたよぉ😍<br><br>タイトル:Pixel Search💕<br>サービス:Azure AI services（Computer Vision）✨<br>API:Image Analysis 4.0 Analyze API✨<br><br>↓↓↓自分メモ<a href="https://t.co/pXuCYonp1C">https://t.co/pXuCYonp1C</a><a href="https://twitter.com/hashtag/AzureOpenAIService?src=hash&amp;ref_src=twsrc%5Etfw">#AzureOpenAIService</a><a href="https://twitter.com/hashtag/CWBJ?src=hash&amp;ref_src=twsrc%5Etfw">#CWBJ</a> <a href="https://t.co/NQBu0nHWO5">pic.twitter.com/NQBu0nHWO5</a></p>&mdash; non (@nonnonkapibara) <a href="https://twitter.com/nonnonkapibara/status/1906348143798796524?ref_src=twsrc%5Etfw">March 30, 2025</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

<br/>

![020.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/93155/4bb16f5a-9f94-40f3-bad0-ed9792edf1ad.png)

<br/>

![021.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/93155/4e3f8f40-6d07-4972-832a-690f7f01e9a2.png)

<br/>

↓↓野菜の写真は読み取れなかったみたいです。

![022.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/93155/bdf2e9a9-e00f-4140-81a0-557394e36a01.png)

<br/>

![023.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/93155/ec44958c-57f1-4097-b7ed-eb37f07813c4.png)

<br/>

イラストの絵

![024.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/93155/2eb81020-6329-4e9c-937d-8a36b6bb77a2.png)

<br/>



# 「Azure OpenAI Service」の設定

バックエンド（Azure OpenAI Service）の設定とフロントエンド（Python）の実装は、Microsoftのクイックスタートの手順に従って実施しました。

Quickstart: Image Analysis 4.0
https://learn.microsoft.com/en-us/azure/ai-services/computer-vision/quickstarts-sdk/image-analysis-client-library-40?tabs=visual-studio%2Cwindows&pivots=programming-language-python

![000.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/93155/eaa698ba-d91f-4ebc-a6a1-7c1fd181fc08.png)

:::note warn
※注意;本記事は2025年3月時点の情報です。Azure OpenAI Serviceは継続的に進化しているため、バージョンアップによりUIや操作手順が変更される可能性があります。
:::

「Azure OpenAI Service」の設定は、以下の手順に従って行いました。

![001.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/93155/46d7acc3-6525-4976-a334-83b8fb989bf5.png)

![002.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/93155/b2fb9c19-9814-4bec-926c-fdd3eb533ebd.png)

![003.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/93155/64798a53-d870-4375-9c0e-c60261e95cf2.png)

![004.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/93155/b8b2f282-659d-476d-86eb-c47c7a8263c1.png)

![005.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/93155/97d7aae3-f21e-4d74-ac9e-0297eb111eaa.png)

![006.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/93155/b7c3366e-a51f-4f1e-99b5-8529106c22bd.png)

![007.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/93155/c7ad2990-137a-47e0-b176-a9e71b80aac4.png)

![008.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/93155/ab7ea48e-d20f-4266-9e2b-81abef0f80b9.png)

![009.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/93155/7fbaaf6e-a26b-43dd-b8d3-a24f2521960e.png)


フロントからAPI呼び出す際にキーとエンドポイントが必要になります。

![010.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/93155/d1b020fb-4ca1-4d00-b914-f3ce441b4fc8.png)