快速入門：在 AI 聊天中使用影像

在此聊天工作階段中，您會指示助理協助了解輸入的影像。

1. 若要開始，請從下拉式清單中選取含有視覺功能的 GPT-4 Turbo 部署。

2. 在 [助理設定] 窗格中，提供系統訊息來引導助理。 預設系統訊息：「您是 AI 助理，可協助人員尋找資訊。」您可以根據您要上傳的影像或案例自訂系統訊息。

   注意

   建議將系統訊息更為工作專屬內容，藉此避免模型的不實用回應。

3. 儲存變更，並在系統提示確認更新系統訊息時，選取 [繼續]。

4. 在 [聊天工作階段] 窗格中，輸入文字提示 (例如「描述此影像」) 並使用附件按鈕上傳影像。 您可以針對使用案例使用不同的文字提示。 然後選取傳送。

5. 觀察提供的輸出。 請考慮詢問與影像分析相關的後續問題以深入了解。

清除資源

如果您想要清除和移除 Azure OpenAI 資源，則可以刪除資源或資源群組。 刪除資源群組也會刪除與其相關聯的任何其他資源。

• Azure 入口網站
• 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 部署名稱。
   2. 將 "url" 欄位的值變更為影像的 URL。

      提示

      您也可以使用 Base 64 編碼影像資料，而不是 URL。 如需詳細資訊，請參閱含有視覺功能的 GPT-4 Turbo 操作指南。

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 部署名稱。
   2. 將 "url" 欄位的值變更為影像的 URL。

      提示

      您也可以使用 Base 64 編碼影像資料，而不是 URL。 如需詳細資訊，請參閱含有視覺功能的 GPT-4 Turbo 操作指南。

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 部署名稱。
   2. 將 "url" 欄位的值變更為影像的 URL。

      提示

      您也可以使用 Base 64 編碼影像資料，而不是 URL。 如需詳細資訊，請參閱含有視覺功能的 GPT-4 Turbo 操作指南。

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 部署名稱。
   2. 將 "url" 欄位的值變更為影像的 URL。

      提示

      您也可以使用 Base 64 編碼影像資料，而不是 URL。 如需詳細資訊，請參閱含有視覺功能的 GPT-4 Turbo 操作指南。

3. 使用下列命令建置應用程式：

   tsc
   

4. 使用下列命令執行您的應用程式：

   node quickstart.js