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
@@ -27,7 +27,7 @@ In this tutorial, you learn how to:
27
27
28
28
* An Azure subscription. If you don't have one, create a [free account](https://azure.microsoft.com/free/ai-services).
29
29
* A single Immersive Reader resource configured for Microsoft Entra authentication. Follow [these instructions](how-to-create-immersive-reader.md) to get set up.
30
-
*Follow the [quickstart](quickstarts/client-libraries.md?pivots=programming-language-nodejs)to create a web app that launches the Immersive Reader with NodeJS.
30
+
*A [NodeJS web app](quickstarts/client-libraries.md?pivots=programming-language-nodejs) that launches Immersive Reader.
31
31
32
32
## Create multiple resources
33
33
@@ -147,118 +147,118 @@ The `getimmersivereaderlaunchparams` API endpoint should be secured behind some
147
147
148
148
## Add sample content
149
149
150
-
1.Open *views\index.pug*, and replace its content with the following code. This code populates the page with some sample content, and adds two buttons that launch the Immersive Reader. One that launches Immersive Reader for the EastUS resource, and another for the WestUS resource.
150
+
Open *views\index.pug*, and replace its content with the following code. This code populates the page with some sample content, and adds two buttons that launch the Immersive Reader. One that launches Immersive Reader for the **EastUS** resource, and another for the **WestUS** resource.
p Immersive Reader is a tool that implements proven techniques to improve reading comprehension for emerging readers, language learners, and people with learning differences. The Immersive Reader is designed to make reading more accessible for everyone. The Immersive Reader
181
-
182
-
ul
183
-
li Shows content in a minimal reading view
184
-
li Displays pictures of commonly used words
185
-
li Highlights nouns, verbs, adjectives, and adverbs
186
-
li Reads your content out loud to you
187
-
li Translates your content into another language
188
-
li Breaks down words into syllables
189
-
190
-
h3 The Immersive Reader is available in many languages.
191
-
192
-
p(lang="es-es") El Lector inmersivo está disponible en varios idiomas.
193
-
p(lang="zh-cn") 沉浸式阅读器支持许多语言
194
-
p(lang="de-de") Der plastische Reader ist in vielen Sprachen verfügbar.
195
-
p(lang="ar-eg" dir="rtl" style="text-align:right") يتوفر \"القارئ الشامل\" في العديد من اللغات.
p Immersive Reader is a tool that implements proven techniques to improve reading comprehension for emerging readers, language learners, and people with learning differences. The Immersive Reader is designed to make reading more accessible for everyone. The Immersive Reader
181
+
182
+
ul
183
+
li Shows content in a minimal reading view
184
+
li Displays pictures of commonly used words
185
+
li Highlights nouns, verbs, adjectives, and adverbs
186
+
li Reads your content out loud to you
187
+
li Translates your content into another language
188
+
li Breaks down words into syllables
189
+
190
+
h3 The Immersive Reader is available in many languages.
191
+
192
+
p(lang="es-es") El Lector inmersivo está disponible en varios idiomas.
193
+
p(lang="zh-cn") 沉浸式阅读器支持许多语言
194
+
p(lang="de-de") Der plastische Reader ist in vielen Sprachen verfügbar.
195
+
p(lang="ar-eg" dir="rtl" style="text-align:right") يتوفر \"القارئ الشامل\" في العديد من اللغات.
196
+
197
+
script(type="text/javascript").
198
+
function getTokenAndSubdomainAsync(region) {
199
+
return new Promise(function (resolve, reject) {
200
+
$.ajax({
201
+
url: "/GetTokenAndSubdomain",
202
+
type: "GET",
203
+
data: {
204
+
region: region
205
+
},
206
+
success: function (data) {
207
+
if (data.error) {
208
+
reject(data.error);
209
+
} else {
210
+
resolve(data);
215
211
}
216
-
});
212
+
},
213
+
error: function (err) {
214
+
reject(err);
215
+
}
216
+
});
217
+
});
218
+
}
219
+
220
+
function handleLaunchImmersiveReader(region) {
221
+
getTokenAndSubdomainAsync(region)
222
+
.then(function (response) {
223
+
const token = response["token"];
224
+
const subdomain = response["subdomain"];
225
+
// Learn more about chunk usage and supported MIME types https://learn.microsoft.com/azure/ai-services/immersive-reader/reference#chunk
226
+
const data = {
227
+
title: $("#ir-title").text(),
228
+
chunks: [{
229
+
content: $("#ir-content").html(),
230
+
mimeType: "text/html"
231
+
}]
232
+
};
233
+
// Learn more about options https://learn.microsoft.com/azure/ai-services/immersive-reader/reference#options
alert("Error in launching the Immersive Reader. Check the console.");
241
-
console.log(error);
242
-
});
243
-
})
244
-
.catch(function (error) {
245
-
alert("Error in getting the Immersive Reader token and subdomain. Check the console.");
246
-
console.log(error);
247
-
});
248
-
}
249
-
250
-
function exitCallback() {
251
-
console.log("This is the callback function. It is executed when the Immersive Reader closes.");
252
-
}
253
-
```
254
-
255
-
1. Your web app is now ready. Start the app by running:
256
-
257
-
```bash
258
-
npm start
259
-
```
260
-
261
-
1. Open your browser and navigate to `http://localhost:3000`. You should see the above content on the page. Select either the **EastUS Immersive Reader** button or the **WestUS Immersive Reader** button to launch the Immersive Reader using those respective resources.
248
+
}
249
+
250
+
function exitCallback() {
251
+
console.log("This is the callback function. It is executed when the Immersive Reader closes.");
252
+
}
253
+
```
254
+
255
+
Your web app is now ready. Start the app by running:
256
+
257
+
```bash
258
+
npm start
259
+
```
260
+
261
+
Open your browser and navigate to `http://localhost:3000`. You should see the above content on the page. Select either the **EastUS Immersive Reader** button or the **WestUS Immersive Reader** button to launch the Immersive Reader using those respective resources.
0 commit comments