Читайте веб-сторінки та виділяйте вміст за допомогою Amazon Polly

Перевидано Платоном

читають: 0

У цій публікації ми демонструємо, як використовувати Амазонка Поллі— провідний хмарний сервіс, який перетворює текст на реалістичне мовлення — щоб читати вміст веб-сторінки та виділяти вміст під час читання. Додавання відтворення аудіо на веб-сторінку покращує доступність сторінки та покращує її враження від відвідувачів. Покращений аудіоконтент є більш вражаючим і таким, що запам’ятовується, приваблює більше трафіку на сторінку та впливає на платіжну спроможність відвідувачів. Це також покращує бренд компанії чи організації, яка публікує сторінку. Технологія синтезу мовлення робить ці бізнес-вигоди доступними. Ми прискорюємо цю подорож, демонструючи, як досягти цієї мети за допомогою Amazon Polly.

Ця можливість покращує доступність для відвідувачів з обмеженими можливостями та може бути використана як частина стратегії доступності вашої організації. Не менш важливо те, що це покращує роботу сторінки для відвідувачів без обмежених можливостей. Обидві групи мають значну платіжну спроможність і вільніше витрачають на сторінки, які використовують покращення звуку, щоб привернути їх увагу.

Огляд рішення

PollyReadsThePage (PRTP) — як ми називаємо рішення — дозволяє видавцю веб-сторінки розміщувати на своїй веб-сторінці елемент керування звуком. Коли відвідувач вибере Play на елементі керування елемент керування читає сторінку та виділяє вміст. PRTP використовує загальні можливості Amazon Polly для синтезу мови з тексту. Він викликає Amazon Polly для створення двох артефактів для кожної сторінки:

Аудіовміст у форматі, який можна відтворити в браузері: MP3
Файл позначок мови, який вказує для кожного речення тексту:
- Час читання речення під час відтворення
- Місце на сторінці, де з’являється речення

Коли відвідувач вибере Play, браузер відтворить файл MP3. Коли аудіо зчитується, браузер перевіряє час, знаходить у файлі позначок, яке речення читати в цей час, знаходить його на сторінці та виділяє.

PRTP дозволяє відвідувачу читати різними голосами та мовами. Для кожного голосу потрібна своя пара файлів. PRTP використовує нейронні голоси. Список підтримуваних нейронних голосів і мов див Нейронні голоси. Повний список стандартних і нейронних голосів в Amazon Polly див Голоси в Amazon Polly.

Ми розглядаємо два типи веб-сторінок: статичні та динамічні. В статичний сторінки, вміст міститься на сторінці та змінюється лише після публікації нової версії сторінки. Компанія може оновлювати сторінку щодня або щотижня в рамках процесу створення веб-сайту. Для цього типу сторінки можна попередньо створити аудіофайли під час створення та розмістити їх на веб-сервері для відтворення. Як показано на малюнку нижче, сценарій PRTP Pre-Gen викликає Amazon Polly для створення аудіо. Він приймає як вхідні дані саму сторінку HTML і, за бажанням, файл конфігурації, який визначає, який текст зі сторінки потрібно витягти (Text Extract Config). Якщо конфігурацію вилучення опущено, сценарій попереднього створення робить розумний вибір тексту для вилучення з основної частини сторінки. Amazon Polly виводить файли в Служба простого зберігання Amazon (Amazon S3) відро; сценарій копіює їх на ваш веб-сервер. Коли відвідувач відтворює аудіо, браузер завантажує MP3 безпосередньо з веб-сервера. Додаткова бібліотека PRTP.js, використовує файл позначок для виділення тексту, який читається.

Зміст а динамічний сторінка змінюється у відповідь на взаємодію відвідувача, тому аудіо не може бути попередньо згенеровано, а має бути синтезовано динамічно. Як показано на малюнку нижче, коли відвідувач відтворює аудіо, сторінка використовує PRTP.js для створення аудіо в Amazon Polly, і він виділяє синтезоване аудіо, використовуючи той самий підхід, що й зі статичними сторінками. Щоб отримати доступ до послуг AWS із браузера, відвідувачу потрібна ідентифікаційна інформація AWS. Ми показуємо, як використовувати an Амазонка Когніто пул ідентифікацій, щоб надати відвідувачу достатньо доступу до Amazon Polly і відра S3 для відтворення аудіо.

Створення як аудіо Mp3, так і мовних позначок вимагає, щоб служба Polly двічі синтезувала той самий вхідний сигнал. Зверніться до Сторінка цін Amazon Polly щоб зрозуміти наслідки витрат. Попередня генерація заощаджує витрати, оскільки синтез виконується під час створення, а не на вимогу для кожної взаємодії відвідувача.

Код, який супроводжує цю публікацію, доступний у сховищі з відкритим вихідним кодом на GitHub.

Щоб дослідити рішення, ми виконаємо такі кроки:

Налаштуйте ресурси, зокрема сервер збірки попереднього покоління, сегмент S3, веб-сервер і ідентифікатор Amazon Cognito.
Запустіть статичну збірку попереднього покоління та протестуйте статичні сторінки.
Перевірте динамічні сторінки.

Передумови

Щоб запустити цей приклад, вам потрібен Обліковий запис AWS з дозволом на використання Amazon Polly, Amazon S3, Amazon Cognito та (для демонстраційних цілей) AWS Cloud9.

Ресурси забезпечення

Ми поділяємо AWS CloudFormation шаблон для створення у вашому обліковому записі автономного демонстраційного середовища, яке допоможе вам стежити за публікацією. Якщо ви бажаєте налаштувати PRTP у своєму власному середовищі, зверніться до інструкцій у README.md.

Щоб створити демонстраційне середовище за допомогою CloudFormation, спочатку завантажте копію Шаблон CloudFormation. Потім виконайте наступні дії:

На консолі AWS CloudFormation виберіть Створіть стек.
Вибирати З новими ресурсами (стандарт).
Select Завантажте файл шаблону.
Вибирати Виберіть файл щоб завантажити локальну копію шаблону, який ви завантажили. Ім'я файлу є prtp.yml.
Вибирати МАЙБУТНІ.
Введіть назву стека за вашим вибором. Пізніше ви знову введете це як заміну .
Ви можете зберегти значення за замовчуванням у параметри .
Вибирати МАЙБУТНІ.
Продовжте перегляд решти розділів.
Прочитайте та встановіть прапорці в Можливості .
Вибирати Створити стек.
Коли стек буде завершений, знайдіть значення для BucketName у виводах стека.

Ми рекомендуємо вам переглянути стек разом зі своєю командою безпеки, перш ніж використовувати його у робочому середовищі.

Налаштуйте веб-сервер і сервер попереднього покоління в IDE AWS Cloud9

Далі на консолі AWS Cloud9 знайдіть середовище PRTPDemoCloud9 створений стеком CloudFormation. Виберіть Відкрийте IDE щоб відкрити середовище AWS Cloud9. Відкрийте вікно терміналу та виконайте наступні команди, які клонують код PRTP, встановлюють залежності перед генерацією та запускають веб-сервер для тестування:

#Obtain PRTP code
cd /home/ec2-user/environment
git clone https://github.com/aws-samples/amazon-polly-reads-the-page.git

# Navigate to that code
cd amazon-polly-reads-the-page/setup

# Install Saxon and html5 Python lib. For pre-gen.
sh ./setup.sh <StackName>

# Run Python simple HTTP server
cd ..
./runwebserver.sh <IngressCIDR>

для , використовуйте назву, яку ви дали стеку CloudFormation. для , вкажіть діапазон IP-адрес, дозволених для доступу до веб-сервера. Щоб обмежити доступ до браузера на вашому локальному комп’ютері, знайдіть свою IP-адресу за допомогою https://whatismyipaddress.com/ і додати /32 щоб указати діапазон. Наприклад, якщо ваш IP 10.2.3.4, use 10.2.3.4/32. Сервер прослуховує порт 8080. Загальнодоступна IP-адреса, яку прослуховує сервер, вказується у вихідних даних. Наприклад:

Public IP is

3.92.33.223

Перевірте статичні сторінки

У своєму браузері перейдіть до PRTPStaticDefault.html. (Якщо ви використовуєте демонстрацію, URL-адреса http://<cloud9host>:8080/web/PRTPStaticDefault.html, Де це публічна IP-адреса, яку ви знайшли під час налаштування IDE.) Виберіть Play на кнопці керування звуком у верхній частині. Слухайте аудіо та дивіться основні моменти. Ознайомтеся з керуванням, змінюючи швидкість, змінюючи голос, роблячи паузу, перемотуючи вперед і назад. На наступному знімку екрана показано сторінку; текст «Пропускає прихований абзац» виділено, оскільки він зараз читається.

Читайте веб-сторінки та виділіть вміст за допомогою Amazon Polly PlatoBlockchain Data Intelligence. Вертикальний пошук. Ai.

Спробуйте те саме для PRTPStaticConfig.html та PRTPStaticCustom.html. Результати схожі. Наприклад, усі троє читають альтернативний текст до фотографії кота («Випадкова картинка кота»). Усі троє читають NE, NW, SE та SW як повні слова («північний схід», «північний захід», «південний схід», «південний захід»), використовуючи лексикони Amazon Polly.

Зверніть увагу на основні відмінності звуку:

PRTPStaticDefault.html читає весь текст у тілі сторінки, включаючи підсумкову частину внизу з «Ваші думки одним словом», «Надіслати запит», «Останнє оновлення 1 квітня 2020 року» та «Запитання для команди розробників». PRTPStaticConfig.html та PRTPStaticCustom.html не читайте їх, тому що вони явно виключають підсумок із синтезу мовлення.
PRTPStaticCustom.html читає Лідери продажів QB стіл відрізняється від інших. Він читає лише перші три рядки та зчитує номер рядка для кожного рядка. Він повторює стовпці для кожного рядка. PRTPStaticCustom.html використовує спеціальне перетворення, щоб налаштувати зчитування таблиці. Інші сторінки використовують відтворення таблиці за замовчуванням.
PRTPStaticCustom.html читає «Том Брейді» голосніше, ніж решта тексту. Він використовує мову розмітки синтезу мовлення (SSML) prosody тег, щоб адаптувати читання Тома Брейді. Інші сторінки не підлаштовуються таким чином.
PRTPStaticCustom.html, завдяки спеціальному перетворенню, зчитує основні фрагменти в порядку NW, SW, NE, SE; тобто читається «Сьогоднішні статті», «Цитата дня», «Фото дня», «Жарти дня». Інші сторінки читаються в тому порядку, у якому плитки з’являються в природному порядку NW, NE, SW, SE в HTML: «Сьогодні статті», «Фото дня», «Цитата дня», «Жарти День».

Давайте розберемося глибше, як генерується звук і як на сторінці виділяється текст.

Статичний прегенератор

Наше репо GitHub містить попередньо створені аудіофайли для PRPTStatic сторінки, але якщо ви хочете згенерувати їх самостійно, з оболонки bash в AWS Cloud9 IDE, виконайте такі команди:

# navigate to examples
cd /home/ec2-user/environment/amazon-polly-reads-the-page-blog/pregen/examples

# Set env var for my S3 bucket. Example, I called mine prtp-output
S3_BUCKET=prtp-output # Use output BucketName from CloudFormation

#Add lexicon for pronuniciation of NE NW SE NW
#Script invokes aws polly put-lexicon
./addlexicon.sh.

#Gen each variant
./gen_default.sh
./gen_config.sh
./gen_custom.sh

Тепер давайте розглянемо, як працюють ці сценарії.

Регістр за замовчуванням

Почнемо з того gen_default.sh:

cd ..
python FixHTML.py ../web/PRTPStaticDefault.html  
   example/tmp_wff.html
./gen_ssml.sh example/tmp_wff.html generic.xslt example/tmp.ssml
./run_polly.sh example/tmp.ssml en-US Joanna 
   ../web/polly/PRTPStaticDefault compass
./run_polly.sh example/tmp.ssml en-US Matthew 
   ../web/polly/PRTPStaticDefault compass

Сценарій починається із запуску програми Python FixHTML.py щоб створити вихідний файл HTML PRTPStaticDefault.html добре сформований. Він записує правильно сформовану версію файлу example/tmp_wff.html. Цей крок важливий з двох причин:

Більшість вихідного коду HTML сформовано неправильно. Цей крок відновлює вихідний HTML, щоб він був правильно сформованим. Наприклад, багато сторінок HTML не закриваються P елементів. Цей крок закриває їх.
Ми відстежуємо, де на сторінці HTML знаходимо текст. Нам потрібно відстежувати розташування за допомогою тієї самої структури об’єктної моделі документа (DOM), яку використовує браузер. Наприклад, браузер автоматично додає a TBODY до TABLE. Програма Python виконує ті ж добре сформовані ремонти, що й браузер.

gen_ssml.sh приймає правильно сформований HTML як вхідні дані, застосовує до нього перетворення таблиці стилів XML (XSLT) і виводить файл SSML. (SSML — це мова в Amazon Polly для керування відтворенням аудіо з тексту.) У поточному прикладі вхідні дані example/tmp_wff.html. Вихід є example/tmp.ssml. Завдання трансформації полягає в тому, щоб вирішити, який текст витягти з HTML і передати в Amazon Polly. generic.xslt є розумним стандартним перетворенням XSLT для більшості веб-сторінок. У наведеному нижче прикладі фрагмент коду виключає елемент керування звуком, заголовок HTML, а також такі елементи HTML, як script та form. Він також виключає елементи з атрибутом hidden. Він містить елементи, які зазвичай містять текст, наприклад P, H1 та SPAN. Для них він відображає як позначку, включаючи повний XPath-вираз елемента, так і значення елемента.

<!-- skip the header -->
<xsl:template match="html/head">
</xsl:template>

<!-- skip the audio itself -->
<xsl:template match="html/body/table[@id='prtp-audio']">
</xsl:template>

<!-- For the body, work through it by applying its templates. This is the default. -->
<xsl:template match="html/body">
<speak>
      <xsl:apply-templates />
</speak>
</xsl:template>

<!-- skip these -->
<xsl:template match="audio|option|script|form|input|*[@hidden='']">
</xsl:template>

<!-- include these -->
<xsl:template match="p|h1|h2|h3|h4|li|pre|span|a|th/text()|td/text()">
<xsl:for-each select=".">
<p>
      <mark>
          <xsl:attribute name="name">
          <xsl:value-of select="prtp:getMark(.)"/>
          </xsl:attribute>
      </mark>
      <xsl:value-of select="normalize-space(.)"/>
</p>
</xsl:for-each>
</xsl:template>

Нижче наведено фрагмент SSML, який відтворюється. Це надсилається як вхідні дані в Amazon Polly. Зверніть увагу, наприклад, що текст «Пропускає прихований абзац» має бути прочитаний у аудіо, і ми пов’язуємо його з позначкою, яка говорить нам, що цей текст зустрічається в місці на сторінці, заданому виразом XPath /html/body[1]/div[2]/ul[1]/li[1].

<speak>
<p><mark name="/html/body[1]/div[1]/h1[1]"/>PollyReadsThePage Normal Test Page</p>
<p><mark name="/html/body[1]/div[2]/p[1]"/>PollyReadsThePage is a test page for audio readout with highlights.</p>
<p><mark name="/html/body[1]/div[2]/p[2]"/>Here are some features:</p>
<p><mark name="/html/body[1]/div[2]/ul[1]/li[1]"/>Skips hidden paragraph</p>
<p><mark name="/html/body[1]/div[2]/ul[1]/li[2]"/>Speaks but does not highlight collapsed content</p>
…
</speak>

Щоб створити аудіо в Amazon Polly, ми викликаємо сценарій run_polly.sh. Він запускає Інтерфейс командного рядка AWS (AWS CLI). aws polly start-speech-synthesis-task двічі: один раз для створення аудіо у форматі MP3 і ще раз для створення файлу позначок. Оскільки генерація є асинхронною, сценарій опитує, доки не знайде результат у вказаному сегменті S3. Коли він знаходить результат, він завантажує на сервер збірки та копіює файли на web/polly папку. Нижче наведено список веб-папок:

PRTPStaticDefault.html
PRTPStaticConfig.html
PRTPStaticCustom.html
PRTP.js
polly/PRTPStaticDefault/Joanna.mp3, Joanna.marks, Matthew.mp3, Matthew.marks
polly/PRTPStaticConfig/Joanna.mp3, Joanna.marks, Matthew.mp3, Matthew.marks
polly/PRTPStaticCustom/Joanna.mp3, Joanna.marks, Matthew.mp3, Matthew.marks

Кожна сторінка має власний набір голосових файлів MP3 і позначок. Ці файли є попередньо згенерованими файлами. Сторінці не потрібно запускати Amazon Polly під час виконання; файли є частиною веб-складання.

Справа, керована конфігурацією

Далі розглянемо gen_config.sh:

cd ..
python FixHTML.py ../web/PRTPStaticConfig.html 
  example/tmp_wff.html
python ModGenericXSLT.py example/transform_config.json 
  example/tmp.xslt
./gen_ssml.sh example/tmp_wff.html example/tmp.xslt 
  example/tmp.ssml
./run_polly.sh example/tmp.ssml en-US Joanna 
  ../web/polly/PRTPStaticConfig compass
./run_polly.sh example/tmp.ssml en-US Matthew 
  ../web/polly/PRTPStaticConfig compass

Сценарій схожий на сценарій у типовому випадку, але жирні лінії вказують на головну відмінність. Наш підхід базується на конфігурації. Ми налаштовуємо вміст, який буде витягнуто зі сторінки, вказуючи, що видобувати через конфігурацію, а не код. Зокрема, ми використовуємо файл JSON transform_config.json, який визначає, що вміст, який потрібно включити, є елементами з ідентифікаторами title, main, maintable та qbtable. Елемент з ID wrapup слід виключити. Перегляньте наступний код:

{
 "inclusions": [ 
 	{"id" : "title"} , 
 	{"id": "main"}, 
 	{"id": "maintable"}, 
 	{"id": "qbtable" }
 ],
 "exclusions": [
 	{"id": "wrapup"}
 ]
}

Запускаємо програму Python ModGenericXSLT.py змінити generic.xslt, який використовується у випадку за замовчуванням, щоб використовувати включення та виключення, які ми вказуємо transform_config.json. Програма записує результати у тимчасовий файл (example/tmp.xslt), до якого він переходить gen_ssml.sh як його перетворення XSLT.

Це варіант із низьким кодом. Веб-видавцеві не потрібно знати, як писати XSLT. Але їм потрібно розуміти структуру HTML-сторінки та ідентифікатори, які використовуються в її основних організаційних елементах.

Корпус для налаштування

Нарешті, розглянемо gen_custom.sh:

cd ..
python FixHTML.py ../web/PRTPStaticCustom.html 
   example/tmp_wff.html
./gen_ssml.sh example/tmp_wff.html example/custom.xslt  
   example/tmp.ssml
./run_polly.sh example/tmp.ssml en-US Joanna 
   ../web/polly/PRTPStaticCustom compass
./run_polly.sh example/tmp.ssml en-US Matthew 
   ../web/polly/PRTPStaticCustom compass

Цей сценарій майже ідентичний сценарію за замовчуванням, за винятком того, що він використовує власний XSLT—example/custom.xslt— а не загальний XSLT. Нижче наведено фрагмент XSLT:

<!-- Use NW, SW, NE, SE order for main tiles! -->
<xsl:template match="*[@id='maintable']">
    <mark>
        <xsl:attribute name="name">
        <xsl:value-of select="stats:getMark(.)"/>
        </xsl:attribute>
    </mark>
    <xsl:variable name="tiles" select="./tbody"/>
    <xsl:variable name="tiles-nw" select="$tiles/tr[1]/td[1]"/>
    <xsl:variable name="tiles-ne" select="$tiles/tr[1]/td[2]"/>
    <xsl:variable name="tiles-sw" select="$tiles/tr[2]/td[1]"/>
    <xsl:variable name="tiles-se" select="$tiles/tr[2]/td[2]"/>
    <xsl:variable name="tiles-seq" select="($tiles-nw,  $tiles-sw, $tiles-ne, $tiles-se)"/>
    <xsl:for-each select="$tiles-seq">
         <xsl:apply-templates />  
    </xsl:for-each>
</xsl:template>   

<!-- Say Tom Brady load! -->
<xsl:template match="span[@style = 'color:blue']" >
<p>
      <mark>
          <xsl:attribute name="name">
          <xsl:value-of select="prtp:getMark(.)"/>
          </xsl:attribute>
      </mark>
      <prosody volume="x-loud">Tom Brady</prosody>
</p>
</xsl:template>

Якщо ви хочете детально вивчити код, зверніться до сценаріїв і програм у сховищі GitHub.

Налаштування браузера та виділення

Статичні сторінки включають елемент керування аудіо HTML5, який використовує як джерело аудіо файл MP3, створений Amazon Polly і розміщений на веб-сервері:

<audio id="audio" controls>
  <source src="polly/PRTPStaticDefault/en/Joanna.mp3" type="audio/mpeg">
</audio>

Під час завантаження сторінка також завантажує файл позначок, створених Amazon Polly. Це відбувається в PRTP.js файл, який містить сторінка HTML. Нижче наведено фрагмент файлу марок для PRTPStaticDefault:

{“time”:11747,“type”:“sentence”,“start”:289,“end”:356,“value”:“PollyReadsThePage is a test page for audio readout with highlights.“}
{“time”:15784,“type”:“ssml”,“start”:363,“end”:403,“value”:“/html/body[1]/div[2]/p[2]“}
{“time”:16427,“type”:“sentence”,“start”:403,“end”:426,“value”:“Here are some features:“}
{“time”:17677,“type”:“ssml”,“start”:433,“end”:480,“value”:“/html/body[1]/div[2]/ul[1]/li[1]“}
{“time”:18344,“type”:“sentence”,“start”:480,“end”:502,“value”:“Skips hidden paragraph”}
{“time”:19894,“type”:“ssml”,“start”:509,“end”:556,“value”:“/html/body[1]/div[2]/ul[1]/li[2]“}
{“time”:20537,“type”:“sentence”,“start”:556,“end”:603,“value”:“Speaks but does not highlight collapsed content”}

Під час відтворення аудіо є обробник події аудіо таймера PRTP.js який перевіряє поточний час аудіо, знаходить текст для виділення, знаходить його розташування на сторінці та виділяє його. Текст, який буде виділено, є записом типу sentence у файлі марок. Розташування — це вираз XPath в атрибуті name запису типу SSML, який передує реченню. Наприклад, якщо час 18400, відповідно до файлу позначок, речення, яке буде виділено, це «Пропускає прихований абзац», яке починається з 18334. Місцем є запис SSML у момент часу 17667: /html/body[1]/div[2]/ul[1]/li[1].

Перевірте динамічні сторінки

Сторінка PRTPDynamic.html демонструє динамічне зчитування аудіо з використанням підходів до вилучення аудіо за замовчуванням, на основі конфігурації та спеціального підходу.

Регістр за замовчуванням

У своєму браузері перейдіть до PRTPDynamic.html. Сторінка має один параметр запиту, dynOption, який приймає значення default, config та custom. За замовчуванням default, тому ви можете опустити його в цьому випадку. Сторінка має два розділи з динамічним вмістом:

Останні статті – Часто змінюється протягом дня
Пошук грецьких філософів за датою – Дозволяє відвідувачу шукати грецьких філософів за датою та показує результати в таблиці

Читайте веб-сторінки та виділіть вміст за допомогою Amazon Polly PlatoBlockchain Data Intelligence. Вертикальний пошук. Ai.

Створіть певний вміст у грецький філософ розділ, ввівши діапазон дат від -800 до 0, як показано в прикладі. Тоді вибирайте знайти.

Тепер відтворіть аудіо, вибравши Play в управлінні звуком.

За лаштунками на сторінці запускається такий код для візуалізації та відтворення аудіо:

   buildSSMLFromDefault();
   chooseRenderAudio();
   setVoice();

Спочатку він викликає функцію buildSSMLFromDefault in PRTP.js щоб витягти більшу частину тексту з тіла сторінки HTML. Ця функція проходить по дереву DOM, шукаючи текст у загальних елементах, таких як p, h1, pre, span та td. Він ігнорує текст в елементах, які зазвичай не містять тексту для читання вголос, наприклад audio, option та script. Він створює розмітку SSML для введення в Amazon Polly. Нижче наведено фрагмент, який показує вилучення першого рядка з philosopher стіл:

<speak>
...
  <p><mark name="/HTML[1]/BODY[1]/DIV[3]/DIV[1]/DIV[1]/TABLE[1]/TBODY[1]/TR[2]/TD[1]"/>Thales</p>
  <p><mark name="/HTML[1]/BODY[1]/DIV[3]/DIV[1]/DIV[1]/TABLE[1]/TBODY[1]/TR[2]/TD[2]"/>-624 to -546</p>
  <p><mark name="/HTML[1]/BODY[1]/DIV[3]/DIV[1]/DIV[1]/TABLE[1]/TBODY[1]/TR[2]/TD[3]"/>Miletus</p>
  <p><mark name="/HTML[1]/BODY[1]/DIV[3]/DIV[1]/DIV[1]/TABLE[1]/TBODY[1]/TR[2]/TD[4]"/>presocratic</p>
...
</speak>

Команда chooseRenderAudio функція в PRTP.js починається з ініціалізації AWS SDK для Amazon Cognito, Amazon S3 і Amazon Polly. Ця ініціалізація відбувається лише один раз. Якщо chooseRenderAudio викликається знову, оскільки вміст сторінки змінився, ініціалізація пропускається. Перегляньте наступний код:

AWS.config.region = env.REGION
AWS.config.credentials = new AWS.CognitoIdentityCredentials({
            IdentityPoolId: env.IDP});
audioTracker.sdk.connection = {
   polly: new AWS.Polly({apiVersion: '2016-06-10'}),
   s3: new AWS.S3()
};

Він генерує MP3-аудіо з Amazon Polly. Генерація є синхронною для невеликих вхідних даних SSML і асинхронною (з виводом, що надсилається до сегмента S3) для великих вхідних даних SSML (понад 6,000 символів). У синхронному випадку ми просимо Amazon Polly надати файл MP3, використовуючи попередньо підписану URL-адресу. Коли синтезований вихід готовий, ми встановлюємо src атрибут елемента керування звуком до цієї URL-адреси та завантажте елемент керування. Потім ми запитуємо файл позначок і завантажуємо його так само, як у статичному випадку. Перегляньте наступний код:

// create signed URL
const signer = new AWS.Polly.Presigner(pollyAudioInput, audioTracker.sdk.connection.polly);

// call Polly to get MP3 into signed URL
signer.getSynthesizeSpeechUrl(pollyAudioInput, function(error, url) {
  // Audio control uses signed URL
  audioTracker.audioControl.src =
    audioTracker.sdk.audio[audioTracker.voice];
  audioTracker.audioControl.load();

  // call Polly to get marks
  audioTracker.sdk.connection.polly.synthesizeSpeech(
    pollyMarksInput, function(markError, markData) {
    const marksStr = new
      TextDecoder().decode(markData.AudioStream);
    // load marks into page the same as with static
    doLoadMarks(marksStr);
  });
});

Справа, керована конфігурацією

У своєму браузері перейдіть до PRTPDynamic.html?dynOption=config. Відтворити аудіо. Відтворення звуку схоже на типове, але є незначні відмінності. Зокрема, деякий вміст пропускається.

За кадром, під час використання config сторінка витягує вміст інакше, ніж у випадку за замовчуванням. У випадку за замовчуванням сторінка використовує buildSSMLFromDefault. У випадку, керованому конфігурацією, сторінка визначає розділи, які вона хоче включити та виключити:

const ssml = buildSSMLFromConfig({
	 "inclusions": [ 
	 	{"id": "title"}, 
	 	{"id": "main"}, 
	 	{"id": "maintable"}, 
	 	{"id": "phil-result"},
	 	{"id": "qbtable"}, 
	 ],
	 "exclusions": [
	 	{"id": "wrapup"}
	 ]
	});

Команда buildSSMLFromConfig функція, визначена в PRTP.js, проходить по дереву DOM у кожному розділі, ідентифікатор якого надано під inclusions. Він витягує вміст із кожного й поєднує їх разом у вказаному порядку, щоб сформувати документ SSML. Це виключає розділи, зазначені в exclusions. Він витягує вміст із кожного розділу однаково buildSSMLFromDefault витягує вміст із основної сторінки.

Корпус для налаштування

У своєму браузері перейдіть до PRTPDynamic.html?dynOption=custom. Відтворити аудіо. Є три помітні відмінності. Зверніть увагу на це та розглянемо спеціальний код, який працює за лаштунками:

Він читає основні тайли в порядку NW, SW, NE, SE. Спеціальний код отримує кожен із цих блоків клітинок maintable і додає їх до SSML у порядку NW, SW, NE, SE:

const nw = getElementByXpath("//*[@id='maintable']//tr[1]/td[1]");
const sw = getElementByXpath("//*[@id='maintable']//tr[2]/td[1]");
const ne = getElementByXpath("//*[@id='maintable']//tr[1]/td[2]");
const se = getElementByXpath("//*[@id='maintable']//tr[2]/td[2]");
[nw, sw, ne, se].forEach(dir => buildSSMLSection(dir, []));

«Том Брейді» вимовляється голосно. Спеціальний код розміщує текст «Том Брейді» всередині SSML prosody тег:

if (cellText == "Tom Brady") {
   addSSMLMark(getXpathOfNode( node.childNodes[tdi]));
   startSSMLParagraph();
   startSSMLTag("prosody", {"volume": "x-loud"});
   addSSMLText(cellText);
   endSSMLTag();
   endSSMLParagraph();
}

Він читає лише перші три рядки таблиці захисників. Він зчитує заголовки стовпців для кожного рядка. Перевірте код у сховищі GitHub, щоб дізнатися, як це реалізовано.

Прибирати

Щоб уникнути майбутніх витрат, видаліть стек CloudFormation.

Висновок

У цій публікації ми продемонстрували технічне рішення важливої бізнес-проблеми: як використовувати Amazon Polly для читання вмісту веб-сторінки та виділення вмісту під час його читання. Ми показали це, використовуючи як статичні, так і динамічні сторінки. Щоб отримати вміст зі сторінки, ми використовували DOM traversal і XSLT. Щоб полегшити виділення, ми використали можливість мовних позначок в Amazon Polly.

Дізнайтеся більше про Amazon Polly, відвідавши її сервісна сторінка.

Не соромтеся задавати запитання в коментарях.

Про авторів

Читайте веб-сторінки та виділіть вміст за допомогою Amazon Polly PlatoBlockchain Data Intelligence. Вертикальний пошук. Ai. Майк Хейві є архітектором рішень для AWS із понад 25-річним досвідом створення корпоративних програм. Майк є автором двох книг і численних статей. Відвідайте його Amazon авторська сторінка читати далі.

Вінет Качаваха є архітектором рішень в AWS і має досвід машинного навчання. Він відповідає за допомогу клієнтам у розробці масштабованих, безпечних і економічно ефективних робочих навантажень на AWS.

Часова мітка: Вересень 16, 2022Вересень 16, 2022

Часова мітка: Квітень 12, 2023

Читайте веб-сторінки та виділіть вміст за допомогою Amazon Polly

Перевидано Платоном

Огляд рішення

Передумови

Ресурси забезпечення

Налаштуйте веб-сервер і сервер попереднього покоління в IDE AWS Cloud9

Перевірте статичні сторінки

Статичний прегенератор

Регістр за замовчуванням

Справа, керована конфігурацією

Корпус для налаштування

Налаштування браузера та виділення

Перевірте динамічні сторінки

Регістр за замовчуванням

Справа, керована конфігурацією

Корпус для налаштування

Прибирати

Висновок

Про авторів

Більше від AWS Машинне навчання

Організуйте свою подорож машинного навчання за допомогою Amazon SageMaker Experiments і Amazon SageMaker Pipelines

Створюйте випадкові та стратифіковані вибірки даних за допомогою Amazon SageMaker Data Wrangler

Використовуйте ADFS OIDC як IdP для приватної робочої сили Amazon SageMaker Ground Truth

Подолайте мовні бар’єри за допомогою Amazon Transcribe, Amazon Translate і Amazon Polly

Intuitivo досягає вищої пропускної здатності, заощаджуючи витрати на AI/ML за допомогою AWS Inferentia та PyTorch | Веб-сервіси Amazon

Про нас

Вертикальний пошук & Ai

платформа

Залишайтеся на зв'язку

рахунки