Skip to content

Commit cc3ecec

Browse files
committed
Freshness pass
1 parent 45d13f6 commit cc3ecec

11 files changed

+85
-84
lines changed

articles/ai-services/immersive-reader/how-to-launch-immersive-reader.md

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,20 +1,20 @@
11
---
22
title: "How to launch the Immersive Reader"
33
titleSuffix: Azure AI services
4-
description: Learn how to launch the Immersive reader using JavaScript, Python, Android, or iOS. Immersive Reader uses proven techniques to improve reading comprehension for language learners, emerging readers, and students with learning differences.
4+
description: Learn how to launch the Immersive reader using JavaScript, Python, Android, or iOS.
55
author: rwallerms
66
manager: nitinme
77
ms.service: azure-ai-immersive-reader
88
ms.topic: how-to
9-
ms.date: 03/04/2021
9+
ms.date: 02/14/2024
1010
ms.author: rwaller
1111
ms.custom: devx-track-js, devx-track-extended-java, devx-track-python
1212
zone_pivot_groups: immersive-reader-how-to-guides
1313
---
1414

1515
# How to launch the Immersive Reader
1616

17-
In the [overview](./overview.md), you learned about what the Immersive Reader is and how it implements proven techniques to improve reading comprehension for language learners, emerging readers, and students with learning differences. This article demonstrates how to launch the Immersive Reader JavaScript, Python, Android, or iOS.
17+
In the [overview](./overview.md), you learned about the Immersive Reader and how it implements proven techniques to improve reading comprehension for language learners, emerging readers, and students with learning differences. This article demonstrates how to launch the Immersive Reader using JavaScript, Python, Android, or iOS.
1818

1919
::: zone pivot="programming-language-javascript"
2020

articles/ai-services/immersive-reader/includes/how-to/how-to-launch-immersive-reader-android.md

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -3,23 +3,23 @@ author: rwallerms
33
manager: nitinme
44
ms.service: azure-ai-immersive-reader
55
ms.topic: include
6-
ms.date: 03/04/2021
6+
ms.date: 02/14/2024
77
ms.author: rwaller
88
---
99

1010
## Prerequisites
1111

12-
* Azure subscription - [Create one for free](https://azure.microsoft.com/free/cognitive-services)
13-
* An Immersive Reader resource configured for Microsoft Entra authentication. Follow [these instructions](../../how-to-create-immersive-reader.md) to get set up. You will need some of the values created here when configuring the environment properties. Save the output of your session into a text file for future reference.
14-
* [Git](https://git-scm.com/).
12+
* An Azure subscription. You can [create one for free](https://azure.microsoft.com/free/ai-services).
13+
* An Immersive Reader resource configured for Microsoft Entra authentication. Follow [these instructions](../../how-to-create-immersive-reader.md) to get set up. Save the output of your session into a text file so you can configure the environment properties.
14+
* [Git](https://git-scm.com).
1515
* [Immersive Reader SDK](https://github.com/microsoft/immersive-reader-sdk).
1616
* [Android Studio](https://developer.android.com/studio).
1717

1818
## Configure authentication credentials
1919

20-
1. Start Android Studio, and open the project from the **immersive-reader-sdk/js/samples/quickstart-java-android** directory (Java) or the **immersive-reader-sdk/js/samples/quickstart-kotlin** directory (Kotlin).
20+
1. Start Android Studio, and open the project from the *immersive-reader-sdk/js/samples/quickstart-java-android* directory (Java) or the *immersive-reader-sdk/js/samples/quickstart-kotlin* directory (Kotlin).
2121

22-
1. Create a file named **env** inside the **/assets** folder. Add the following names and values, and supply values as appropriate. Don't commit this file into source control because it contains secrets that shouldn't be made public.
22+
1. Create a file named *.env* inside the **/assets** folder. Add the following names and values, and supply values as appropriate. Don't commit this file into source control because it contains secrets that shouldn't be made public.
2323

2424
```text
2525
TENANT_ID=<YOUR_TENANT_ID>
@@ -34,5 +34,5 @@ Choose a device emulator from the AVD Manager, and run the project.
3434
3535
## Next steps
3636
37-
* Explore the [Immersive Reader SDK](https://github.com/microsoft/immersive-reader-sdk) and the [Immersive Reader SDK reference](../../reference.md).
38-
* View code samples on [GitHub](https://github.com/microsoft/immersive-reader-sdk/tree/master/js/samples/).
37+
> [!div class="nextstepaction"]
38+
> [Explore the Immersive Reader SDK](https://github.com/microsoft/immersive-reader-sdk)

articles/ai-services/immersive-reader/includes/how-to/how-to-launch-immersive-reader-ios.md

Lines changed: 7 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -3,22 +3,21 @@ author: rwallerms
33
manager: nitinme
44
ms.service: azure-ai-immersive-reader
55
ms.topic: include
6-
ms.date: 03/04/2021
6+
ms.date: 02/14/2024
77
ms.author: rwaller
88
---
99

1010
## Prerequisites
1111

12-
* Azure subscription - [Create one for free](https://azure.microsoft.com/free/cognitive-services)
13-
* An Immersive Reader resource configured for Microsoft Entra authentication. Follow [these instructions](../../how-to-create-immersive-reader.md) to get set up. You will need some of the values created here when configuring the environment properties. Save the output of your session into a text file for future reference.
14-
* [macOS](https://www.apple.com/macos).
12+
* An Azure subscription. You can [create one for free](https://azure.microsoft.com/free/ai-services).
13+
* An Immersive Reader resource configured for Microsoft Entra authentication. Follow [these instructions](../../how-to-create-immersive-reader.md) to get set up. Save the output of your session into a text file so you can configure the environment properties.
14+
* [macOS](https://www.apple.com/macos) and [Xcode](https://apps.apple.com/us/app/xcode/id497799835?mt=12).
1515
* [Git](https://git-scm.com/).
1616
* [Immersive Reader SDK](https://github.com/microsoft/immersive-reader-sdk).
17-
* [Xcode](https://apps.apple.com/us/app/xcode/id497799835?mt=12).
1817

1918
## Configure authentication credentials
2019

21-
1. Open Xcode, and open **immersive-reader-sdk/js/samples/ios/quickstart-swift/quickstart-swift.xcodeproj**.
20+
1. Open Xcode, and open the *immersive-reader-sdk/js/samples/ios/quickstart-swift* directory or the *immersive-reader-sdk/js/samples/ios/quickstart-swift.xcodeproj* directory.
2221
1. On the top menu, select **Product** > **Scheme** > **Edit Scheme**.
2322
1. In the **Run** view, select the **Arguments** tab.
2423
1. In the **Environment Variables** section, add the following names and values. Supply the values given when you created your Immersive Reader resource.
@@ -38,5 +37,5 @@ In Xcode, select **Ctrl+R** to run the project.
3837
3938
## Next steps
4039
41-
* Explore the [Immersive Reader SDK](https://github.com/microsoft/immersive-reader-sdk) and the [Immersive Reader SDK reference](../../reference.md).
42-
* View code samples on [GitHub](https://github.com/microsoft/immersive-reader-sdk/tree/master/js/samples/).
40+
> [!div class="nextstepaction"]
41+
> [Explore the Immersive Reader SDK](https://github.com/microsoft/immersive-reader-sdk)

articles/ai-services/immersive-reader/includes/how-to/how-to-launch-immersive-reader-nodejs.md

Lines changed: 21 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -3,16 +3,16 @@ author: rwallerms
33
manager: nitinme
44
ms.service: azure-ai-immersive-reader
55
ms.topic: include
6-
ms.date: 03/04/2021
6+
ms.date: 02/14/2024
77
ms.author: rwaller
88
---
99

1010
## Prerequisites
1111

12-
* Azure subscription - [Create one for free](https://azure.microsoft.com/free/cognitive-services)
13-
* An Immersive Reader resource configured for Microsoft Entra authentication. Follow [these instructions](../../how-to-create-immersive-reader.md) to get set up. You will need some of the values created here when configuring the environment properties. Save the output of your session into a text file for future reference.
14-
* [Node.js](https://nodejs.org/) and [Yarn](https://yarnpkg.com)
15-
* An IDE such as [Visual Studio Code](https://code.visualstudio.com/)
12+
* An Azure subscription. You can [create one for free](https://azure.microsoft.com/free/ai-services).
13+
* An Immersive Reader resource configured for Microsoft Entra authentication. Follow [these instructions](../../how-to-create-immersive-reader.md) to get set up. Save the output of your session into a text file so you can configure the environment properties.
14+
* [Node.js](https://nodejs.org) and [Yarn](https://yarnpkg.com).
15+
* An IDE such as [Visual Studio Code](https://code.visualstudio.com).
1616

1717
## Create a Node.js web app with Express
1818

@@ -24,7 +24,7 @@ express --view=pug myapp
2424
cd myapp
2525
```
2626

27-
Install yarn dependencies, and add dependencies `request` and `dotenv`, which will be used later in the tutorial.
27+
Install yarn dependencies, and add dependencies `request` and `dotenv`, which are used later in the tutorial.
2828

2929
```bash
3030
yarn
@@ -47,7 +47,7 @@ ClientSecret => Azure AD Application Service Principal password
4747
Subdomain => Immersive Reader resource subdomain (resource 'Name' if the resource was created in the Azure portal, or 'CustomSubDomain' option if the resource was created with Azure CLI PowerShell. Check the Azure portal for the subdomain on the Endpoint in the resource Overview page, for example, 'https://[SUBDOMAIN].cognitiveservices.azure.com/')
4848
````
4949

50-
Once you have these values, create a new file called _.env_, and paste the following code into it, supplying your custom property values from above. Do not include quotation marks or the "{" and "}" characters.
50+
Once you have these values, create a new file called *.env*, and paste the following code into it, supplying your custom property values from above. Do not include quotation marks or the "{" and "}" characters.
5151

5252
```text
5353
TENANT_ID={YOUR_TENANT_ID}
@@ -58,13 +58,13 @@ SUBDOMAIN={YOUR_SUBDOMAIN}
5858

5959
Be sure not to commit this file into source control, as it contains secrets that should not be made public.
6060

61-
Next, open _app.js_ and add the following to the top of the file. This loads the properties defined in the .env file as environment variables into Node.
61+
Next, open *app.js* and add the following to the top of the file. This loads the properties defined in the .env file as environment variables into Node.
6262

6363
```javascript
6464
require('dotenv').config();
6565
```
6666

67-
Open the _routes\index.js_ file and replace its content with the following code.
67+
Open the *routes\index.js* file and replace its content with the following code.
6868

6969
This code creates an API endpoint that acquires a Microsoft Entra authentication token using your service principal password. It also retrieves the subdomain. It then returns an object containing the token and subdomain.
7070

@@ -111,14 +111,14 @@ The **getimmersivereaderlaunchparams** API endpoint should be secured behind som
111111

112112
## Launch the Immersive Reader with sample content
113113

114-
1. Open _views\layout.pug_, and add the following code under the `head` tag, before the `body` tag. These `script` tags load the [Immersive Reader SDK](https://github.com/microsoft/immersive-reader-sdk) and jQuery.
114+
1. Open *views\layout.pug*, and add the following code under the `head` tag, before the `body` tag. These `script` tags load the [Immersive Reader SDK](https://github.com/microsoft/immersive-reader-sdk) and jQuery.
115115

116116
```pug
117117
script(src='https://ircdname.azureedge.net/immersivereadersdk/immersive-reader-sdk.1.2.0.js')
118118
script(src='https://code.jquery.com/jquery-3.3.1.min.js')
119119
```
120120
121-
2. Open _views\index.pug_, and replace its content with the following code. This code populates the page with some sample content, and adds a button that launches the Immersive Reader.
121+
2. Open *views\index.pug*, and replace its content with the following code. This code populates the page with some sample content, and adds a button that launches the Immersive Reader.
122122
123123
```pug
124124
extends layout
@@ -168,13 +168,13 @@ The **getimmersivereaderlaunchparams** API endpoint should be secured behind som
168168
npm start
169169
```
170170
171-
4. Open your browser and navigate to _http://localhost:3000_. You should see the above content on the page. Select the **Immersive Reader** button to launch the Immersive Reader with your content.
171+
4. Open your browser and navigate to <http://localhost:3000>. You should see the above content on the page. Select the **Immersive Reader** button to launch the Immersive Reader with your content.
172172
173173
## Specify the language of your content
174174
175175
The Immersive Reader has support for many different languages. You can specify the language of your content by following the steps below.
176176
177-
1. Open _views\index.pug_ and add the following code below the `p(id=content)` tag that you added in the previous step. This code adds some content Spanish content to your page.
177+
1. Open *views\index.pug* and add the following code below the `p(id=content)` tag that you added in the previous step. This code adds some content Spanish content to your page.
178178
179179
```pug
180180
p(id='content-spanish') El estudio de las formas terrestres de la Tierra se llama geografía física. Los accidentes geográficos pueden ser montañas y valles. También pueden ser glaciares, lagos o ríos.
@@ -189,13 +189,13 @@ The Immersive Reader has support for many different languages. You can specify t
189189
});
190190
```
191191
192-
3. Navigate to _http://localhost:3000_ again. You should see the Spanish text on the page, and when you select **Immersive Reader**, it will show up in the Immersive Reader as well.
192+
3. Navigate to <http://localhost:3000> again. You should see the Spanish text on the page, and when you select **Immersive Reader**, it shows up in the Immersive Reader as well.
193193
194194
## Specify the language of the Immersive Reader interface
195195
196196
By default, the language of the Immersive Reader interface matches the browser's language settings. You can also specify the language of the Immersive Reader interface with the following code.
197197
198-
1. In _views\index.pug_, replace the call to `ImmersiveReader.launchAsync(token, subdomain, content)` with the code below.
198+
1. In *views\index.pug*, replace the call to `ImmersiveReader.launchAsync(token, subdomain, content)` with the following code.
199199
200200
```javascript
201201
const options = {
@@ -204,13 +204,13 @@ By default, the language of the Immersive Reader interface matches the browser's
204204
ImmersiveReader.launchAsync(token, subdomain, content, options);
205205
```
206206
207-
2. Navigate to _http://localhost:3000_. When you launch the Immersive Reader, the interface will be shown in French.
207+
2. Navigate to <http://localhost:3000>. When you launch the Immersive Reader, the interface is shown in French.
208208
209209
## Launch the Immersive Reader with math content
210210
211211
You can include math content in the Immersive Reader by using [MathML](https://developer.mozilla.org/en-US/docs/Web/MathML).
212212
213-
1. Modify _views\index.pug_ to include the following code above the call to `ImmersiveReader.launchAsync`:
213+
1. Modify *views\index.pug* to include the following code above the call to `ImmersiveReader.launchAsync`:
214214
215215
```javascript
216216
const mathML = '<math xmlns="https://www.w3.org/1998/Math/MathML" display="block"> \
@@ -235,9 +235,9 @@ You can include math content in the Immersive Reader by using [MathML](https://d
235235
});
236236
```
237237
238-
2. Navigate to _http://localhost:3000_. When you launch the Immersive Reader and scroll to the bottom, you'll see the math formula.
238+
2. Navigate to <http://localhost:3000>. When you launch the Immersive Reader and scroll to the bottom, you'll see the math formula.
239239
240-
## Next steps
240+
## Next step
241241
242-
* Explore the [Immersive Reader SDK](https://github.com/microsoft/immersive-reader-sdk) and the [Immersive Reader SDK Reference](../../reference.md)
243-
* View code samples on [GitHub](https://github.com/microsoft/immersive-reader-sdk/tree/master/js/samples/advanced-csharp)
242+
> [!div class="nextstepaction"]
243+
> [Explore the Immersive Reader SDK](https://github.com/microsoft/immersive-reader-sdk)

0 commit comments

Comments
 (0)