Skip to content

Commit 78deffc

Browse files
AnnaMHuffAnnaMHuff
authored
Merge pull request #169 from diberry/diberry/0906-tts
[Azure AI Svcs] TS/JS: Whisper & TTS
2 parents e46722d + b36cf33 commit 78deffc

File tree

9 files changed

+771
-122
lines changed

9 files changed

+771
-122
lines changed

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

Lines changed: 247 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,247 @@
1+
---
2+
ms.topic: include
3+
manager: nitinme
4+
ms.service: azure-ai-openai
5+
ms.topic: include
6+
ms.date: 09/12/2024
7+
ms.reviewer: v-baolianzou
8+
ms.author: eur
9+
author: eric-urban
10+
recommendations: false
11+
---
12+
13+
[Source code](https://github.com/openai/openai-node) | [Package (npm)](https://www.npmjs.com/package/openai) | [Samples](https://github.com/Azure/azure-sdk-for-js/tree/main/sdk/openai/openai/samples)
14+
15+
## Prerequisites
16+
17+
#### [JavaScript](#tab/javascript)
18+
19+
- An Azure subscription - [Create one for free](https://azure.microsoft.com/free/cognitive-services?azure-portal=true)
20+
- [LTS versions of Node.js](https://github.com/nodejs/release#release-schedule)
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+
#### [TypeScript](#tab/typescript)
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+
- [TypeScript](https://www.typescriptlang.org/download/)
29+
- 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).
30+
31+
32+
33+
---
34+
35+
## Set up
36+
37+
### Retrieve key and endpoint
38+
39+
To successfully make a call against Azure OpenAI, you need an **endpoint** and a **key**.
40+
41+
|Variable name | Value |
42+
|--------------------------|-------------|
43+
| `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/`.|
44+
| `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`.|
45+
46+
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.
47+
48+
:::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":::
49+
50+
### Environment variables
51+
52+
Create and assign persistent environment variables for your key and endpoint.
53+
54+
[!INCLUDE [Azure key vault](~/reusable-content/ce-skilling/azure/includes/ai-services/security/azure-key-vault.md)]
55+
56+
# [Command Line](#tab/command-line)
57+
58+
```CMD
59+
setx AZURE_OPENAI_API_KEY "REPLACE_WITH_YOUR_KEY_VALUE_HERE"
60+
```
61+
62+
```CMD
63+
setx AZURE_OPENAI_ENDPOINT "REPLACE_WITH_YOUR_ENDPOINT_HERE"
64+
```
65+
66+
# [PowerShell](#tab/powershell)
67+
68+
```powershell
69+
[System.Environment]::SetEnvironmentVariable('AZURE_OPENAI_API_KEY', 'REPLACE_WITH_YOUR_KEY_VALUE_HERE', 'User')
70+
```
71+
72+
```powershell
73+
[System.Environment]::SetEnvironmentVariable('AZURE_OPENAI_ENDPOINT', 'REPLACE_WITH_YOUR_ENDPOINT_HERE', 'User')
74+
```
75+
76+
# [Bash](#tab/bash)
77+
78+
```Bash
79+
echo export AZURE_OPENAI_API_KEY="REPLACE_WITH_YOUR_KEY_VALUE_HERE" >> /etc/environment && source /etc/environment
80+
```
81+
82+
```Bash
83+
echo export AZURE_OPENAI_ENDPOINT="REPLACE_WITH_YOUR_ENDPOINT_HERE" >> /etc/environment && source /etc/environment
84+
```
85+
---
86+
87+
## Create a Node application
88+
89+
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.
90+
91+
```console
92+
npm init
93+
```
94+
95+
## Install the client library
96+
97+
Install the client libraries with:
98+
99+
```console
100+
npm install openai @azure/identity
101+
```
102+
103+
Your app's _package.json_ file will be updated with the dependencies.
104+
105+
## Create a speech file
106+
107+
108+
109+
#### [JavaScript](#tab/javascript)
110+
111+
1. 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:
112+
113+
```javascript
114+
require("dotenv/config");
115+
const { writeFile } = require("fs/promises");
116+
const { AzureOpenAI } = require("openai");
117+
require("openai/shims/node");
118+
119+
// You will need to set these environment variables or edit the following values
120+
const endpoint = process.env["AZURE_OPENAI_ENDPOINT"] || "<endpoint>";
121+
const apiKey = process.env["AZURE_OPENAI_API_KEY"] || "<api key>";
122+
const speechFilePath =
123+
process.env["SPEECH_FILE_PATH"] || "<path to save the speech file>";
124+
125+
// Required Azure OpenAI deployment name and API version
126+
const deploymentName = "tts";
127+
const apiVersion = "2024-08-01-preview";
128+
129+
function getClient() {
130+
return new AzureOpenAI({
131+
endpoint,
132+
apiKey,
133+
apiVersion,
134+
deployment: deploymentName,
135+
});
136+
}
137+
138+
async function generateAudioStream(
139+
client,
140+
params
141+
) {
142+
const response = await client.audio.speech.create(params);
143+
if (response.ok) return response.body;
144+
throw new Error(`Failed to generate audio stream: ${response.statusText}`);
145+
}
146+
export async function main() {
147+
console.log("== Text to Speech Sample ==");
148+
149+
const client = getClient();
150+
const streamToRead = await generateAudioStream(client, {
151+
model: deploymentName,
152+
voice: "alloy",
153+
input: "the quick brown chicken jumped over the lazy dogs",
154+
});
155+
156+
console.log(`Streaming response to ${speechFilePath}`);
157+
await writeFile(speechFilePath, streamToRead);
158+
console.log("Finished streaming");
159+
}
160+
161+
main().catch((err) => {
162+
console.error("The sample encountered an error:", err);
163+
});
164+
165+
```
166+
167+
1. Run the script with the following command:
168+
169+
```console
170+
node Text-to-speech.js
171+
```
172+
173+
174+
#### [TypeScript](#tab/typescript)
175+
176+
1. 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:
177+
178+
```typescript
179+
import "dotenv/config";
180+
import { writeFile } from "fs/promises";
181+
import { AzureOpenAI } from "openai";
182+
import type { SpeechCreateParams } from "openai/resources/audio/speech";
183+
import "openai/shims/node";
184+
185+
// You will need to set these environment variables or edit the following values
186+
const endpoint = process.env["AZURE_OPENAI_ENDPOINT"] || "<endpoint>";
187+
const apiKey = process.env["AZURE_OPENAI_API_KEY"] || "<api key>";
188+
const speechFilePath =
189+
process.env["SPEECH_FILE_PATH"] || "<path to save the speech file>";
190+
191+
// Required Azure OpenAI deployment name and API version
192+
const deploymentName = "tts";
193+
const apiVersion = "2024-08-01-preview";
194+
195+
function getClient(): AzureOpenAI {
196+
return new AzureOpenAI({
197+
endpoint,
198+
apiKey,
199+
apiVersion,
200+
deployment: deploymentName,
201+
});
202+
}
203+
204+
async function generateAudioStream(
205+
client: AzureOpenAI,
206+
params: SpeechCreateParams
207+
): Promise<NodeJS.ReadableStream> {
208+
const response = await client.audio.speech.create(params);
209+
if (response.ok) return response.body;
210+
throw new Error(`Failed to generate audio stream: ${response.statusText}`);
211+
}
212+
export async function main() {
213+
console.log("== Text to Speech Sample ==");
214+
215+
const client = getClient();
216+
const streamToRead = await generateAudioStream(client, {
217+
model: deploymentName,
218+
voice: "alloy",
219+
input: "the quick brown chicken jumped over the lazy dogs",
220+
});
221+
222+
console.log(`Streaming response to ${speechFilePath}`);
223+
await writeFile(speechFilePath, streamToRead);
224+
console.log("Finished streaming");
225+
}
226+
227+
main().catch((err) => {
228+
console.error("The sample encountered an error:", err);
229+
});
230+
231+
```
232+
233+
The import of `"openai/shims/node"` is necessary when running the code in a Node.js environment. It ensures that the output type of the `client.audio.speech.create` method is correctly set to `NodeJS.ReadableStream`.
234+
235+
1. Build the application with the following command:
236+
237+
```console
238+
tsc
239+
```
240+
241+
1. Run the application with the following command:
242+
243+
```console
244+
node Text-to-speech.js
245+
```
246+
247+
---

‎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

0 commit comments

Comments
 (0)