You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: articles/ai-services/immersive-reader/how-to-launch-immersive-reader.md
+3-3Lines changed: 3 additions & 3 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -1,20 +1,20 @@
1
1
---
2
2
title: "How to launch the Immersive Reader"
3
3
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.
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.
Copy file name to clipboardExpand all lines: articles/ai-services/immersive-reader/includes/how-to/how-to-launch-immersive-reader-android.md
+8-8Lines changed: 8 additions & 8 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -3,23 +3,23 @@ author: rwallerms
3
3
manager: nitinme
4
4
ms.service: azure-ai-immersive-reader
5
5
ms.topic: include
6
-
ms.date: 03/04/2021
6
+
ms.date: 02/14/2024
7
7
ms.author: rwaller
8
8
---
9
9
10
10
## Prerequisites
11
11
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.
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).
21
21
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.
23
23
24
24
```text
25
25
TENANT_ID=<YOUR_TENANT_ID>
@@ -34,5 +34,5 @@ Choose a device emulator from the AVD Manager, and run the project.
34
34
35
35
## Next steps
36
36
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)
Copy file name to clipboardExpand all lines: articles/ai-services/immersive-reader/includes/how-to/how-to-launch-immersive-reader-ios.md
+7-8Lines changed: 7 additions & 8 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -3,22 +3,21 @@ author: rwallerms
3
3
manager: nitinme
4
4
ms.service: azure-ai-immersive-reader
5
5
ms.topic: include
6
-
ms.date: 03/04/2021
6
+
ms.date: 02/14/2024
7
7
ms.author: rwaller
8
8
---
9
9
10
10
## Prerequisites
11
11
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).
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.
22
21
1. On the top menu, select **Product** > **Scheme** > **Edit Scheme**.
23
22
1. In the **Run** view, select the **Arguments** tab.
24
23
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.
38
37
39
38
## Next steps
40
39
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)
Copy file name to clipboardExpand all lines: articles/ai-services/immersive-reader/includes/how-to/how-to-launch-immersive-reader-nodejs.md
+21-21Lines changed: 21 additions & 21 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -3,16 +3,16 @@ author: rwallerms
3
3
manager: nitinme
4
4
ms.service: azure-ai-immersive-reader
5
5
ms.topic: include
6
-
ms.date: 03/04/2021
6
+
ms.date: 02/14/2024
7
7
ms.author: rwaller
8
8
---
9
9
10
10
## Prerequisites
11
11
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).
16
16
17
17
## Create a Node.js web app with Express
18
18
@@ -24,7 +24,7 @@ express --view=pug myapp
24
24
cd myapp
25
25
```
26
26
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.
28
28
29
29
```bash
30
30
yarn
@@ -47,7 +47,7 @@ ClientSecret => Azure AD Application Service Principal password
47
47
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/')
48
48
````
49
49
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.
51
51
52
52
```text
53
53
TENANT_ID={YOUR_TENANT_ID}
@@ -58,13 +58,13 @@ SUBDOMAIN={YOUR_SUBDOMAIN}
58
58
59
59
Be sure not to commit this file into source control, as it contains secrets that should not be made public.
60
60
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.
62
62
63
63
```javascript
64
64
require('dotenv').config();
65
65
```
66
66
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.
68
68
69
69
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.
70
70
@@ -111,14 +111,14 @@ The **getimmersivereaderlaunchparams** API endpoint should be secured behind som
111
111
112
112
## Launch the Immersive Reader with sample content
113
113
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.
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.
122
122
123
123
```pug
124
124
extends layout
@@ -168,13 +168,13 @@ The **getimmersivereaderlaunchparams** API endpoint should be secured behind som
168
168
npm start
169
169
```
170
170
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.
172
172
173
173
## Specify the language of your content
174
174
175
175
The Immersive Reader has support for many different languages. You can specify the language of your content by following the steps below.
176
176
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.
178
178
179
179
```pug
180
180
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
189
189
});
190
190
```
191
191
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.
193
193
194
194
## Specify the language of the Immersive Reader interface
195
195
196
196
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.
197
197
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.
199
199
200
200
```javascript
201
201
const options = {
@@ -204,13 +204,13 @@ By default, the language of the Immersive Reader interface matches the browser's
0 commit comments