Skip to content

Commit fd8796c

Browse files
diberrydiberry
committed
TS/JS: Whisper & TTS
1 parent 76c3cc9 commit fd8796c

File tree

9 files changed

+614
-122
lines changed

9 files changed

+614
-122
lines changed

‎articles/ai-services/openai/includes/text-to-speech-javascript.md

Lines changed: 160 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,160 @@
1+
---
2+
ms.topic: include
3+
manager: nitinme
4+
ms.service: azure-ai-openai
5+
ms.topic: include
6+
ms.date: 09/06/2024
7+
ms.reviewer: v-baolianzou
8+
ms.author: eur
9+
author: eric-urban
10+
recommendations: false
11+
---
12+
13+
## Prerequisites
14+
15+
#### [TypeScript](#tab/typescript)
16+
17+
- An Azure subscription - [Create one for free](https://azure.microsoft.com/free/cognitive-services?azure-portal=true)
18+
- [LTS versions of Node.js](https://github.com/nodejs/release#release-schedule)
19+
- [TypeScript](https://www.typescriptlang.org/download/)
20+
- 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).
21+
22+
23+
#### [JavaScript](#tab/javascript)
24+
25+
- An Azure subscription - [Create one for free](https://azure.microsoft.com/free/cognitive-services?azure-portal=true)
26+
- [LTS versions of Node.js](https://github.com/nodejs/release#release-schedule)
27+
- 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).
28+
29+
---
30+
31+
32+
## Passwordless authentication is recommended
33+
34+
For passwordless authentication, you need to
35+
36+
1. Use the `@azure/identity` package.
37+
1. Assign the `Cognitive Services User` role to your user account. This can be done in the Azure portal under **Access control (IAM)** > **Add role assignment**.
38+
1. Sign in with the Azure CLI such as `az login`.
39+
40+
## Set up
41+
42+
### Retrieve key and endpoint
43+
44+
To successfully make a call against Azure OpenAI, you need an **endpoint** and a **key**.
45+
46+
|Variable name | Value |
47+
|--------------------------|-------------|
48+
| `AZURE_OPENAI_ENDPOINT` | This value can be found in the **Keys & Endpoint** section when examining your resource from the Azure portal. Alternatively, you can find the value in the **Azure OpenAI Studio** > **Playground** > **Code View**. An example endpoint is: `https://aoai-docs.openai.azure.com/`.|
49+
| `AZURE_OPENAI_API_KEY` | This value can be found in the **Keys & Endpoint** section when examining your resource from the Azure portal. You can use either `KEY1` or `KEY2`.|
50+
51+
Go to your resource in the Azure portal. The **Endpoint and Keys** can be found in the **Resource Management** section. Copy your endpoint and access key as you need both for authenticating your API calls. You can use either `KEY1` or `KEY2`. Always having two keys allows you to securely rotate and regenerate keys without causing a service disruption.
52+
53+
:::image type="content" source="media/quickstarts/endpoint.png" alt-text="Screenshot of the overview UI for an Azure OpenAI resource in the Azure portal with the endpoint & access keys location highlighted." lightbox="media/quickstarts/endpoint.png":::
54+
55+
### Environment variables
56+
57+
Create and assign persistent environment variables for your key and endpoint.
58+
59+
[!INCLUDE [Azure key vault](~/reusable-content/ce-skilling/azure/includes/ai-services/security/azure-key-vault.md)]
60+
61+
# [Command Line](#tab/command-line)
62+
63+
```CMD
64+
setx AZURE_OPENAI_API_KEY "REPLACE_WITH_YOUR_KEY_VALUE_HERE"
65+
```
66+
67+
```CMD
68+
setx AZURE_OPENAI_ENDPOINT "REPLACE_WITH_YOUR_ENDPOINT_HERE"
69+
```
70+
71+
# [PowerShell](#tab/powershell)
72+
73+
```powershell
74+
[System.Environment]::SetEnvironmentVariable('AZURE_OPENAI_API_KEY', 'REPLACE_WITH_YOUR_KEY_VALUE_HERE', 'User')
75+
```
76+
77+
```powershell
78+
[System.Environment]::SetEnvironmentVariable('AZURE_OPENAI_ENDPOINT', 'REPLACE_WITH_YOUR_ENDPOINT_HERE', 'User')
79+
```
80+
81+
# [Bash](#tab/bash)
82+
83+
```Bash
84+
echo export AZURE_OPENAI_API_KEY="REPLACE_WITH_YOUR_KEY_VALUE_HERE" >> /etc/environment && source /etc/environment
85+
```
86+
87+
```Bash
88+
echo export AZURE_OPENAI_ENDPOINT="REPLACE_WITH_YOUR_ENDPOINT_HERE" >> /etc/environment && source /etc/environment
89+
```
90+
---
91+
92+
## Create a Node application
93+
94+
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.
95+
96+
```console
97+
npm init
98+
```
99+
100+
101+
102+
## Install the client library
103+
104+
Install the client libraries with:
105+
106+
## [**TypeScript**](#tab/typescript)
107+
108+
```console
109+
npm install openai @azure/openai @azure/identity
110+
```
111+
112+
The `@azure/openai` package provides the types the Azure service objects.
113+
114+
## [**JavaScript**](#tab/javascript)
115+
116+
```console
117+
npm install openai @azure/identity
118+
```
119+
120+
---
121+
122+
Your app's _package.json_ file will be updated with the dependencies.
123+
124+
## Create a speech file
125+
126+
127+
#### [TypeScript](#tab/typescript)
128+
129+
Create a new file named _Text-to-speech.ts_ and open it in your preferred code editor. Copy the following code into the _Text-to-speech.ts_ file:
130+
131+
```typescript
132+
```
133+
134+
1. Build the application with the following command:
135+
136+
```console
137+
tsc
138+
```
139+
140+
1. Run the application with the following command:
141+
142+
```console
143+
node Text-to-speech.js
144+
```
145+
146+
147+
#### [JavaScript](#tab/javascript)
148+
149+
Create a new file named _Text-to-speech.js_ and open it in your preferred code editor. Copy the following code into the _Text-to-speech.js_ file:
150+
151+
```javascript
152+
```
153+
154+
Run the script with the following command:
155+
156+
```console
157+
node Text-to-speech.js
158+
```
159+
160+
---

‎articles/ai-services/openai/includes/text-to-speech-rest.md

Lines changed: 59 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,65 @@ author: eric-urban
1010
recommendations: false
1111
---
1212

13-
## REST API
13+
## Prerequisites
14+
15+
- An Azure subscription - [Create one for free](https://azure.microsoft.com/free/cognitive-services?azure-portal=true).
16+
- An Azure OpenAI resource created in the North Central US or Sweden Central regions with the `tts-1` or `tts-1-hd` model deployed. For more information, see [Create a resource and deploy a model with Azure OpenAI](how-to/create-resource.md).
17+
18+
## Set up
19+
20+
### Retrieve key and endpoint
21+
22+
To successfully make a call against Azure OpenAI, you need an **endpoint** and a **key**.
23+
24+
|Variable name | Value |
25+
|--------------------------|-------------|
26+
| `AZURE_OPENAI_ENDPOINT` | This value can be found in the **Keys & Endpoint** section when examining your resource from the Azure portal. Alternatively, you can find the value in the **Azure OpenAI Studio** > **Playground** > **Code View**. An example endpoint is: `https://aoai-docs.openai.azure.com/`.|
27+
| `AZURE_OPENAI_API_KEY` | This value can be found in the **Keys & Endpoint** section when examining your resource from the Azure portal. You can use either `KEY1` or `KEY2`.|
28+
29+
Go to your resource in the Azure portal. The **Endpoint and Keys** can be found in the **Resource Management** section. Copy your endpoint and access key as you need both for authenticating your API calls. You can use either `KEY1` or `KEY2`. Always having two keys allows you to securely rotate and regenerate keys without causing a service disruption.
30+
31+
:::image type="content" source="media/quickstarts/endpoint.png" alt-text="Screenshot of the overview UI for an Azure OpenAI resource in the Azure portal with the endpoint & access keys location highlighted." lightbox="media/quickstarts/endpoint.png":::
32+
33+
### Environment variables
34+
35+
Create and assign persistent environment variables for your key and endpoint.
36+
37+
[!INCLUDE [Azure key vault](~/reusable-content/ce-skilling/azure/includes/ai-services/security/azure-key-vault.md)]
38+
39+
# [Command Line](#tab/command-line)
40+
41+
```CMD
42+
setx AZURE_OPENAI_API_KEY "REPLACE_WITH_YOUR_KEY_VALUE_HERE"
43+
```
44+
45+
```CMD
46+
setx AZURE_OPENAI_ENDPOINT "REPLACE_WITH_YOUR_ENDPOINT_HERE"
47+
```
48+
49+
# [PowerShell](#tab/powershell)
50+
51+
```powershell
52+
[System.Environment]::SetEnvironmentVariable('AZURE_OPENAI_API_KEY', 'REPLACE_WITH_YOUR_KEY_VALUE_HERE', 'User')
53+
```
54+
55+
```powershell
56+
[System.Environment]::SetEnvironmentVariable('AZURE_OPENAI_ENDPOINT', 'REPLACE_WITH_YOUR_ENDPOINT_HERE', 'User')
57+
```
58+
59+
# [Bash](#tab/bash)
60+
61+
```Bash
62+
echo export AZURE_OPENAI_API_KEY="REPLACE_WITH_YOUR_KEY_VALUE_HERE" >> /etc/environment && source /etc/environment
63+
```
64+
65+
```Bash
66+
echo export AZURE_OPENAI_ENDPOINT="REPLACE_WITH_YOUR_ENDPOINT_HERE" >> /etc/environment && source /etc/environment
67+
```
68+
---
69+
70+
71+
## Create a REST request and response
1472

1573
In a bash shell, run the following command. You need to replace `YourDeploymentName` with the deployment name you chose when you deployed the text to speech model. The deployment name isn't necessarily the same as the model name. Entering the model name results in an error unless you chose a deployment name that is identical to the underlying model name.
1674

‎articles/ai-services/openai/includes/whisper-javascript.md

Lines changed: 165 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,165 @@
1+
---
2+
ms.topic: include
3+
manager: nitinme
4+
ms.service: azure-ai-openai
5+
ms.topic: include
6+
ms.date: 2/1/2024
7+
ms.reviewer: v-baolianzou
8+
ms.author: eur
9+
author: eric-urban
10+
---
11+
12+
<a href="https://platform.openai.com/docs/guides/speech-to-text" target="_blank">Reference documentation</a> | <a href="https://github.com/openai/openai-node" target="_blank">Library source code</a> | <a href="https://www.npmjs.com/package/openai" target="_blank">Package (npm)</a> | <a href="https://github.com/Azure/azure-sdk-for-js/tree/main/sdk/openai/openai/samples" target="_blank">Samples</a>
13+
14+
## Prerequisites
15+
16+
#### [TypeScript](#tab/typescript)
17+
18+
- An Azure subscription - [Create one for free](https://azure.microsoft.com/free/cognitive-services?azure-portal=true)
19+
- [LTS versions of Node.js](https://github.com/nodejs/release#release-schedule)
20+
- [TypeScript](https://www.typescriptlang.org/download/)
21+
- 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).
22+
23+
24+
#### [JavaScript](#tab/javascript)
25+
26+
- An Azure subscription - [Create one for free](https://azure.microsoft.com/free/cognitive-services?azure-portal=true)
27+
- [LTS versions of Node.js](https://github.com/nodejs/release#release-schedule)
28+
- 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).
29+
30+
---
31+
32+
33+
## Set up
34+
35+
### Retrieve key and endpoint
36+
37+
To successfully make a call against Azure OpenAI, you need an *endpoint* and a *key*.
38+
39+
|Variable name | Value |
40+
|--------------------------|-------------|
41+
| `AZURE_OPENAI_ENDPOINT` | This value can be found in the **Keys & Endpoint** section when examining your resource from the Azure portal. Alternatively, you can find the value in the **Azure OpenAI Studio** > **Playground** > **Code View**. An example endpoint is: `https://aoai-docs.openai.azure.com/`.|
42+
| `AZURE_OPENAI_API_KEY` | This value can be found in the **Keys & Endpoint** section when examining your resource from the Azure portal. You can use either `KEY1` or `KEY2`.|
43+
44+
Go to your resource in the Azure portal. The **Endpoint and Keys** can be found in the **Resource Management** section. Copy your endpoint and access key as you'll need both for authenticating your API calls. You can use either `KEY1` or `KEY2`. Always having two keys allows you to securely rotate and regenerate keys without causing a service disruption.
45+
46+
:::image type="content" source="media/quickstarts/endpoint.png" alt-text="Screenshot of the overview UI for an Azure OpenAI resource in the Azure portal with the endpoint & access keys location circled in red." lightbox="media/quickstarts/endpoint.png":::
47+
48+
### Environment variables
49+
50+
Create and assign persistent environment variables for your key and endpoint.
51+
52+
[!INCLUDE [Azure key vault](~/reusable-content/ce-skilling/azure/includes/ai-services/security/azure-key-vault.md)]
53+
54+
# [Command Line](#tab/command-line)
55+
56+
```CMD
57+
setx AZURE_OPENAI_API_KEY "REPLACE_WITH_YOUR_KEY_VALUE_HERE"
58+
```
59+
60+
```CMD
61+
setx AZURE_OPENAI_ENDPOINT "REPLACE_WITH_YOUR_ENDPOINT_HERE"
62+
```
63+
64+
# [PowerShell](#tab/powershell)
65+
66+
```powershell
67+
[System.Environment]::SetEnvironmentVariable('AZURE_OPENAI_API_KEY', 'REPLACE_WITH_YOUR_KEY_VALUE_HERE', 'User')
68+
```
69+
70+
```powershell
71+
[System.Environment]::SetEnvironmentVariable('AZURE_OPENAI_ENDPOINT', 'REPLACE_WITH_YOUR_ENDPOINT_HERE', 'User')
72+
```
73+
74+
# [Bash](#tab/bash)
75+
76+
```Bash
77+
echo export AZURE_OPENAI_API_KEY="REPLACE_WITH_YOUR_KEY_VALUE_HERE" >> /etc/environment && source /etc/environment
78+
```
79+
80+
```Bash
81+
echo export AZURE_OPENAI_ENDPOINT="REPLACE_WITH_YOUR_ENDPOINT_HERE" >> /etc/environment && source /etc/environment
82+
```
83+
---
84+
85+
## Passwordless authentication is recommended
86+
87+
For passwordless authentication, you need to
88+
89+
1. Use the `@azure/identity` package.
90+
1. Assign the `Cognitive Services User` role to your user account. This can be done in the Azure portal under **Access control (IAM)** > **Add role assignment**.
91+
1. Sign in with the Azure CLI such as `az login`.
92+
93+
## Create a Node application
94+
95+
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.
96+
97+
```console
98+
npm init
99+
```
100+
101+
## Install the client library
102+
103+
Install the client libraries with:
104+
105+
## [**TypeScript**](#tab/typescript)
106+
107+
```console
108+
npm install openai @azure/openai @azure/identity
109+
```
110+
111+
The `@azure/openai` package provides the types the Azure service objects.
112+
113+
## [**JavaScript**](#tab/javascript)
114+
115+
```console
116+
npm install openai @azure/identity
117+
```
118+
119+
---
120+
Your app's _package.json_ file will be updated with the dependencies.
121+
122+
## Create a sample application
123+
Create a new file named _Whisper.js_ and open it in your preferred code editor. Copy the following code into the _Whisper.js_ file:
124+
125+
#### [TypeScript](#tab/typescript)
126+
127+
```typescript
128+
```
129+
130+
1. Build the application with the following command:
131+
132+
```console
133+
tsc
134+
```
135+
136+
1. Run the application with the following command:
137+
138+
```console
139+
node Whisper.js
140+
```
141+
142+
143+
#### [JavaScript](#tab/javascript)
144+
145+
```javascript
146+
```
147+
148+
Run the script with the following command:
149+
150+
```console
151+
node Whisper.js
152+
```
153+
154+
---
155+
156+
You can get sample audio files, such as *wikipediaOcelot.wav*, from the [Azure AI Speech SDK repository at GitHub](https://github.com/Azure-Samples/cognitive-services-speech-sdk/tree/master/sampledata/audiofiles).
157+
158+
> [!IMPORTANT]
159+
> For production, store and access your credentials using a secure method, such as [Azure Key Vault](/azure/key-vault/general/overview). For more information about credential security, see [Azure AI services security](../../security-features.md).
160+
161+
## Output
162+
163+
```json
164+
{"text":"The ocelot, Lepardus paradalis, is a small wild cat native to the southwestern United States, Mexico, and Central and South America. This medium-sized cat is characterized by solid black spots and streaks on its coat, round ears, and white neck and undersides. It weighs between 8 and 15.5 kilograms, 18 and 34 pounds, and reaches 40 to 50 centimeters 16 to 20 inches at the shoulders. It was first described by Carl Linnaeus in 1758. Two subspecies are recognized, L. p. paradalis and L. p. mitis. Typically active during twilight and at night, the ocelot tends to be solitary and territorial. It is efficient at climbing, leaping, and swimming. It preys on small terrestrial mammals such as armadillo, opossum, and lagomorphs."}
165+
```

0 commit comments

Comments
 (0)