クイックスタート: AI チャットで画像を使用する

このチャット セッションでは、入力した画像を解釈できるようにアシスタントに指示します。

1. まず、GPT-4 Turbo with Vision デプロイをドロップダウンから選択します。

2. [アシスタントのセットアップ] ペインで、アシスタントをガイドするシステム メッセージを入力します。 既定のシステム メッセージは、"あなたは、情報の検索を支援する AI アシスタントです" です。アップロードする画像またはシナリオに合わせてシステム メッセージを調整できます。

   Note

   モデルから役に立たない応答が返されないように、タスクに特化したシステム メッセージに更新することをお勧めします。

3. 変更を保存し、システム メッセージの更新を確定するか問われたら、[続行] を選択します。

4. [チャット セッション] ウィンドウで、"この画像を説明して" などのテキスト プロンプトを入力し、添付ボタンで画像をアップロードします。 ユース ケースには別のテキスト プロンプトを使用できます。 次に、[送信] を選択します。

5. 出力を確認します。 理解を深めるため、画像の分析に関連するフォローアップの質問をすることを検討してください。

リソースをクリーンアップする

Azure OpenAI リソースをクリーンアップして削除したい場合は、リソースまたはリソース グループを削除できます。 リソース グループを削除すると、それに関連付けられている他のリソースも削除されます。

• Azure Portal
• Azure CLI

setx AZURE_OPENAI_API_KEY "REPLACE_WITH_YOUR_KEY_VALUE_HERE" 
setx AZURE_OPENAI_ENDPOINT "REPLACE_WITH_YOUR_ENDPOINT_HERE" 

[System.Environment]::SetEnvironmentVariable('AZURE_OPENAI_API_KEY', 'REPLACE_WITH_YOUR_KEY_VALUE_HERE', 'User')
[System.Environment]::SetEnvironmentVariable('AZURE_OPENAI_ENDPOINT', 'REPLACE_WITH_YOUR_ENDPOINT_HERE', 'User')

export AZURE_OPENAI_API_KEY="REPLACE_WITH_YOUR_KEY_VALUE_HERE"
export AZURE_OPENAI_ENDPOINT="REPLACE_WITH_YOUR_ENDPOINT_HERE"

setx AZURE_OPENAI_API_KEY "REPLACE_WITH_YOUR_KEY_VALUE_HERE" 
setx AZURE_OPENAI_ENDPOINT "REPLACE_WITH_YOUR_ENDPOINT_HERE" 

[System.Environment]::SetEnvironmentVariable('AZURE_OPENAI_API_KEY', 'REPLACE_WITH_YOUR_KEY_VALUE_HERE', 'User')
[System.Environment]::SetEnvironmentVariable('AZURE_OPENAI_ENDPOINT', 'REPLACE_WITH_YOUR_ENDPOINT_HERE', 'User')

export AZURE_OPENAI_API_KEY="REPLACE_WITH_YOUR_KEY_VALUE_HERE"
export AZURE_OPENAI_ENDPOINT="REPLACE_WITH_YOUR_ENDPOINT_HERE"

1. quickstart.js の内容を次のコードに置き換えます。

   const AzureOpenAI = require('openai').AzureOpenAI;
   const { 
       DefaultAzureCredential, 
       getBearerTokenProvider 
   } = require('@azure/identity');
   
   // You will need to set these environment variables or edit the following values
   const endpoint = process.env["AZURE_OPENAI_ENDPOINT"] || "<endpoint>";
   const imageUrl = process.env["IMAGE_URL"] || "<image url>";
   
   // Required Azure OpenAI deployment name and API version
   const apiVersion = "2024-07-01-preview";
   const deploymentName = "gpt-4-with-turbo";
   
   // keyless authentication    
   const credential = new DefaultAzureCredential();
   const scope = "https://cognitiveservices.azure.com/.default";
   const azureADTokenProvider = getBearerTokenProvider(credential, scope);
   
   function getClient(): AzureOpenAI {
     return new AzureOpenAI({
       endpoint,
       azureADTokenProvider,
       apiVersion,
       deployment: deploymentName,
     });
   }
   function createMessages() {
     return {
       messages: [
         { role: "system", content: "You are a helpful assistant." },
         {
           role: "user",
           content: [
             {
               type: "text",
               text: "Describe this picture:",
             },
             {
               type: "image_url",
               image_url: {
                 url: imageUrl,
               },
             },
           ],
         },
       ],
       model: "",
       max_tokens: 2000,
     };
   }
   async function printChoices(completion) {
     for (const choice of completion.choices) {
       console.log(choice.message);
     }
   }
   export async function main() {
     console.log("== Get GPT-4 Turbo with vision Sample ==");
   
     const client = getClient();
     const messages = createMessages();
     const completion = await client.chat.completions.create(messages);
     await printChoices(completion);
   }
   
   main().catch((err) => {
     console.error("Error occurred:", err);
   });
   

2. 次の変更を行います。

   1. 適切なフィールドに GPT-4 Turbo with Vision デプロイの名前を入力します。
   2. "url" フィールドの値を画像の URL に変更します。

      ヒント

      URL ではなく、Base 64 でエンコードされた画像データを使うこともできます。 詳細については、GPT-4 Turbo with Vision の攻略ガイドに関するページを参照してください。

3. 次のコマンドでアプリケーションを実行します。

   node quickstart.js
   

1. quickstart.js の内容を次のコードに置き換えます。

   const { AzureOpenAI } = require("openai");
   
   // You will need to set these environment variables or edit the following values
   const endpoint = process.env["AZURE_OPENAI_ENDPOINT"] || "<endpoint>";
   const apiKey = process.env["AZURE_OPENAI_API_KEY"] || "<api key>";
   const imageUrl = process.env["IMAGE_URL"] || "<image url>";
   
   // Required Azure OpenAI deployment name and API version
   const apiVersion = "2024-07-01-preview";
   const deploymentName = "gpt-4-with-turbo";
   
   function getClient() {
     return new AzureOpenAI({
       endpoint,
       apiKey,
       apiVersion,
       deployment: deploymentName,
     });
   }
   function createMessages() {
     return {
       messages: [
         { role: "system", content: "You are a helpful assistant." },
         {
           role: "user",
           content: [
             {
               type: "text",
               text: "Describe this picture:",
             },
             {
               type: "image_url",
               image_url: {
                 url: imageUrl,
               },
             },
           ],
         },
       ],
       model: "",
       max_tokens: 2000,
     };
   }
   async function printChoices(completion) {
     for (const choice of completion.choices) {
       console.log(choice.message);
     }
   }
   export async function main() {
     console.log("== Get GPT-4 Turbo with vision Sample ==");
   
     const client = getClient();
     const messages = createMessages();
     const completion = await client.chat.completions.create(messages);
     await printChoices(completion);
   }
   
   main().catch((err) => {
     console.error("Error occurred:", err);
   });
   

2. 次の変更を行います。

   1. 適切なフィールドに GPT-4 Turbo with Vision デプロイの名前を入力します。
   2. "url" フィールドの値を画像の URL に変更します。

      ヒント

      URL ではなく、Base 64 でエンコードされた画像データを使うこともできます。 詳細については、GPT-4 Turbo with Vision の攻略ガイドに関するページを参照してください。

3. 次のコマンドでアプリケーションを実行します。

   node quickstart.js
   

setx AZURE_OPENAI_API_KEY "REPLACE_WITH_YOUR_KEY_VALUE_HERE" 
setx AZURE_OPENAI_ENDPOINT "REPLACE_WITH_YOUR_ENDPOINT_HERE" 

[System.Environment]::SetEnvironmentVariable('AZURE_OPENAI_API_KEY', 'REPLACE_WITH_YOUR_KEY_VALUE_HERE', 'User')
[System.Environment]::SetEnvironmentVariable('AZURE_OPENAI_ENDPOINT', 'REPLACE_WITH_YOUR_ENDPOINT_HERE', 'User')

export AZURE_OPENAI_API_KEY="REPLACE_WITH_YOUR_KEY_VALUE_HERE"
export AZURE_OPENAI_ENDPOINT="REPLACE_WITH_YOUR_ENDPOINT_HERE"

1. quickstart.ts を作成し、次のコードを貼り付けます。

   import { AzureOpenAI } from "openai";
   import { 
       DefaultAzureCredential, 
       getBearerTokenProvider 
   } from "@azure/identity";
   import type {
     ChatCompletion,
     ChatCompletionCreateParamsNonStreaming,
   } from "openai/resources/index";
   
   // You will need to set these environment variables or edit the following values
   const endpoint = process.env["AZURE_OPENAI_ENDPOINT"] || "<endpoint>";
   const imageUrl = process.env["IMAGE_URL"] || "<image url>";
   
   // Required Azure OpenAI deployment name and API version
   const apiVersion = "2024-07-01-preview";
   const deploymentName = "gpt-4-with-turbo";
   
   // keyless authentication    
   const credential = new DefaultAzureCredential();
   const scope = "https://cognitiveservices.azure.com/.default";
   const azureADTokenProvider = getBearerTokenProvider(credential, scope);
   
   function getClient(): AzureOpenAI {
     return new AzureOpenAI({
       endpoint,
       azureADTokenProvider,
       apiVersion,
       deployment: deploymentName,
     });
   }
   function createMessages(): ChatCompletionCreateParamsNonStreaming {
     return {
       messages: [
         { role: "system", content: "You are a helpful assistant." },
         {
           role: "user",
           content: [
             {
               type: "text",
               text: "Describe this picture:",
             },
             {
               type: "image_url",
               image_url: {
                 url: imageUrl,
               },
             },
           ],
         },
       ],
       model: "",
       max_tokens: 2000,
     };
   }
   async function printChoices(completion: ChatCompletion): Promise<void> {
     for (const choice of completion.choices) {
       console.log(choice.message);
     }
   }
   export async function main() {
     console.log("== Get GPT-4 Turbo with vision Sample ==");
   
     const client = getClient();
     const messages = createMessages();
     const completion = await client.chat.completions.create(messages);
     await printChoices(completion);
   }
   
   main().catch((err) => {
     console.error("Error occurred:", err);
   });
   

2. 次の変更を行います。

   1. 適切なフィールドに GPT-4 Turbo with Vision デプロイの名前を入力します。
   2. "url" フィールドの値を画像の URL に変更します。

      ヒント

      URL ではなく、Base 64 でエンコードされた画像データを使うこともできます。 詳細については、GPT-4 Turbo with Vision の攻略ガイドに関するページを参照してください。

3. 次のコマンドを使用してアプリケーションをビルドします。

   tsc
   

4. 次のコマンドでアプリケーションを実行します。

   node quickstart.js
   

1. quickstart.ts を作成し、次のコードを貼り付けます。

   import { AzureOpenAI } from "openai";
   import type {
     ChatCompletion,
     ChatCompletionCreateParamsNonStreaming,
   } from "openai/resources/index";
   
   // You will need to set these environment variables or edit the following values
   const endpoint = process.env["AZURE_OPENAI_ENDPOINT"] || "<endpoint>";
   const apiKey = process.env["AZURE_OPENAI_API_KEY"] || "<api key>";
   const imageUrl = process.env["IMAGE_URL"] || "<image url>";
   
   // Required Azure OpenAI deployment name and API version
   const apiVersion = "2024-07-01-preview";
   const deploymentName = "gpt-4-with-turbo";
   
   function getClient(): AzureOpenAI {
     return new AzureOpenAI({
       endpoint,
       apiKey,
       apiVersion,
       deployment: deploymentName,
     });
   }
   function createMessages(): ChatCompletionCreateParamsNonStreaming {
     return {
       messages: [
         { role: "system", content: "You are a helpful assistant." },
         {
           role: "user",
           content: [
             {
               type: "text",
               text: "Describe this picture:",
             },
             {
               type: "image_url",
               image_url: {
                 url: imageUrl,
               },
             },
           ],
         },
       ],
       model: "",
       max_tokens: 2000,
     };
   }
   async function printChoices(completion: ChatCompletion): Promise<void> {
     for (const choice of completion.choices) {
       console.log(choice.message);
     }
   }
   export async function main() {
     console.log("== Get GPT-4 Turbo with vision Sample ==");
   
     const client = getClient();
     const messages = createMessages();
     const completion = await client.chat.completions.create(messages);
     await printChoices(completion);
   }
   
   main().catch((err) => {
     console.error("Error occurred:", err);
   });
   

2. 次の変更を行います。

   1. 適切なフィールドに GPT-4 Turbo with Vision デプロイの名前を入力します。
   2. "url" フィールドの値を画像の URL に変更します。

      ヒント

      URL ではなく、Base 64 でエンコードされた画像データを使うこともできます。 詳細については、GPT-4 Turbo with Vision の攻略ガイドに関するページを参照してください。

3. 次のコマンドを使用してアプリケーションをビルドします。

   tsc
   

4. 次のコマンドでアプリケーションを実行します。

   node quickstart.js