JS+TS: GPT-4 Turbo with Vision quickstart

Author: diberry

articles/ai-services/openai/gpt-v-quickstart.md

@@ -5,7 +5,7 @@ description: Use this article to get started using Azure OpenAI to deploy and us
 services: cognitive-services
 manager: nitinme
 ms.service: azure-ai-openai
-ms.custom: devx-track-python
+ms.custom: devx-track-python, devx-track-js, devx-track-ts
 ms.topic: quickstart
 author: PatrickFarley
 ms.author: pafarley

articles/ai-services/openai/includes/gpt-v-javascript.md

@@ -0,0 +1,206 @@
+---
+title: 'Quickstart: Use GPT-4 Turbo with Vision on your images and videos with the JavaScript SDK'
+titleSuffix: Azure OpenAI
+description: Get started using the OpenAI JavaScript SDK to deploy and use the GPT-4 Turbo with Vision model.
+services: cognitive-services
+manager: nitinme
+ms.service: azure-ai-openai
+ms.topic: include
+ms.custom: references_regions
+ms.date: 09/09/2024
+---
+
+Use this article to get started using the OpenAI JavaScript SDK to deploy and use the GPT-4 Turbo with Vision model. 
+
+This SDK is provided by OpenAI with Azure specific types provided by Azure. 
+
+[Reference documentation](https://platform.openai.com/docs/api-reference/chat) | [Library source code](https://github.com/openai/openai-node?azure-portal=true) | [Package (npm)](https://www.npmjs.com/package/openai) | [Samples](https://github.com/Azure/azure-sdk-for-js/tree/main/sdk/openai/openai/samples)
+
+
+## Prerequisites
+
+## [**TypeScript**](#tab/typescript)
+
+- An Azure subscription - [Create one for free](https://azure.microsoft.com/free/cognitive-services?azure-portal=true)
+- [LTS versions of Node.js](https://github.com/nodejs/release#release-schedule)
+- [TypeScript](https://www.typescriptlang.org/download/)
+- An Azure OpenAI resource created in a supported region (see [Region availability](/azure/ai-services/openai/concepts/models#model-summary-table-and-region-availability)). For more information, see [Create a resource and deploy a model with Azure OpenAI](../how-to/create-resource.md).
+
+
+## [**JavaScript**](#tab/javascript)
+
+- An Azure subscription - [Create one for free](https://azure.microsoft.com/free/cognitive-services?azure-portal=true)
+- [LTS versions of Node.js](https://github.com/nodejs/release#release-schedule)
+- An Azure OpenAI resource created in a supported region (see [Region availability](/azure/ai-services/openai/concepts/models#model-summary-table-and-region-availability)). For more information, see [Create a resource and deploy a model with Azure OpenAI](../how-to/create-resource.md).
+
+---
+
+
+> [!NOTE]
+> This library is maintained by OpenAI. Refer to the [release history](https://github.com/openai/openai-python/releases) to track the latest updates to the library.
+
+[!INCLUDE [get-key-endpoint](get-key-endpoint.md)]
+
+[!INCLUDE [environment-variables](environment-variables.md)]
+
+
+## Create a Node application
+
+In a console window (such as cmd, PowerShell, or Bash), create a new directory for your app, and navigate to it. Then run the `npm init` command to create a node application with a _package.json_ file.
+
+```console
+npm init
+```
+
+## Install the client library
+
+Install the client libraries with:
+
+## [**TypeScript**](#tab/typescript)
+
+```console
+npm install openai @azure/openai @azure/identity
+```
+
+## [**JavaScript**](#tab/javascript)
+
+```console
+npm install openai @azure/identity
+```
+
+---
+
+Your app's _package.json_ file will be updated with the dependencies.
+
+## Create a new JavaScript application for image prompts
+
+## [**TypeScript**](#tab/typescript)
+
+1. Create a _quickstart.ts_ and paste in the following code. 
+    
+    ```typescript
+    ```
+1. Make the following changes:
+    1. Enter the name of your GPT-4 Turbo with Vision deployment in the appropriate field.
+    1. Change the value of the `"url"` field to the URL of your image.
+        > [!TIP]
+        > You can also use a base 64 encoded image data instead of a URL. For more information, see the [GPT-4 Turbo with Vision how-to guide](../how-to/gpt-with-vision.md#use-a-local-image).
+
+1. Build the application with the following command:
+
+    ```console
+    tsc
+    ```
+
+1. Run the application with the following command:
+
+    ```console
+    node quickstart.js
+    ```
+
+
+## [**JavaScript**](#tab/javascript)
+
+1. Replace the contents of _quickstart.js_ with the following code. 
+    
+    ```javascript
+    ```
+1. Make the following changes:
+    1. Enter the name of your GPT-4 Turbo with Vision deployment in the appropriate field.
+    1. Change the value of the `"url"` field to the URL of your image.
+        > [!TIP]
+        > You can also use a base 64 encoded image data instead of a URL. For more information, see the [GPT-4 Turbo with Vision how-to guide](../how-to/gpt-with-vision.md#use-a-local-image).
+1. Run the application with the following command:
+
+    ```console
+    node quickstart.js
+    ```
+
+## Create a new JavaScript application for image prompt enhancements
+
+GPT-4 Turbo with Vision provides exclusive access to Azure AI Services tailored enhancements. When combined with Azure AI Vision, it enhances your chat experience by providing the chat model with more detailed information about visible text in the image and the locations of objects.
+
+The **Optical Character Recognition (OCR)** integration allows the model to produce higher quality responses for dense text, transformed images, and number-heavy financial documents. It also covers a wider range of languages.
+
+The **object grounding** integration brings a new layer to data analysis and user interaction, as the feature can visually distinguish and highlight important elements in the images it processes.
+
+> [!CAUTION]
+> Azure AI enhancements for GPT-4 Turbo with Vision will be billed separately from the core functionalities. Each specific Azure AI enhancement for GPT-4 Turbo with Vision has its own distinct charges. For details, see the [special pricing information](../concepts/gpt-with-vision.md#special-pricing-information).
+
+> [!IMPORTANT]
+> Vision enhancements are not supported by the GPT-4 Turbo GA model. They are only available with the preview models.
+
+## [**TypeScript**](#tab/typescript)
+
+1. Replace the contents of _quickstart.py_ with the following code. 
+    
+    ```typescript
+    
+    ```
+
+1. Make the following changes:
+    1. Enter your GPT-4 Turbo with Vision deployment name in the appropriate field. 
+    1. Enter your Computer Vision endpoint URL and key in the appropriate fields.
+    1. Change the value of the `"url"` field to the URL of your image.
+        > [!TIP]
+        > You can also use a base 64 encoded image data instead of a URL. For more information, see the [GPT-4 Turbo with Vision how-to guide](../how-to/gpt-with-vision.md#use-a-local-image).
+
+
+1. Build the application with the following command:
+
+    ```console
+    tsc
+    ```
+
+1. Run the application with the following command:
+
+    ```console
+    node quickstart.js
+    ```
+
+
+## [**JavaScript**](#tab/javascript)
+
+```javascript
+```
+
+1. Make the following changes:
+    1. Enter your GPT-4 Turbo with Vision deployment name in the appropriate field. 
+    1. Enter your Computer Vision endpoint URL and key in the appropriate fields.
+    1. Change the value of the `"url"` field to the URL of your image.
+        > [!TIP]
+        > You can also use a base 64 encoded image data instead of a URL. For more information, see the [GPT-4 Turbo with Vision how-to guide](../how-to/gpt-with-vision.md#use-a-local-image).
+1. Run the application with the following command:
+
+    ```console
+    node quickstart.js
+    ```
+
+---
+
+1. Make the following changes:
+    1. Enter your GPT-4 Turbo with Vision deployment name in the appropriate field. 
+    1. Enter your Computer Vision endpoint URL and key in the appropriate fields.
+    1. Change the value of the `"url"` field to the URL of your image.
+        > [!TIP]
+        > You can also use a base 64 encoded image data instead of a URL. For more information, see the [GPT-4 Turbo with Vision how-to guide](../how-to/gpt-with-vision.md#use-a-local-image).
+1. Run the application with the `python` command:
+
+    ```console
+    python quickstart.py
+    ```
+
+## Create a new JavaScript application for video prompt enhancements
+
+Video prompt integration is outside the scope of this quickstart. See the [GPT-4 Turbo with Vision how-to guide](../how-to/gpt-with-vision.md#use-vision-enhancement-with-video) for detailed instructions on setting up video prompts in chat completions programmatically.
+
+---
+
+## Clean up resources
+
+If you want to clean up and remove an Azure OpenAI resource, you can delete the resource or resource group. Deleting the resource group also deletes any other resources associated with it.
+
+- [Azure portal](../../multi-service-resource.md?pivots=azportal#clean-up-resources)
+- [Azure CLI](../../multi-service-resource.md?pivots=azcli#clean-up-resources)
+
+