با استفاده از آمازون پولی، صفحات وب را بخوانید و محتوا را برجسته کنید

در این پست نحوه استفاده را نشان می دهیم آمازون پولی—یک سرویس ابری پیشرو که متن را به گفتار واقعی تبدیل می کند—برای خواندن محتوای یک صفحه وب و برجسته کردن محتوا در حین خواندن. افزودن پخش صدا به صفحه وب، دسترسی و تجربه بازدیدکنندگان از صفحه را بهبود می بخشد. محتوای تقویت‌شده صوتی تأثیرگذارتر و خاطره‌انگیزتر است، ترافیک بیشتری را به صفحه جذب می‌کند و از قدرت هزینه‌کردن بازدیدکنندگان بهره می‌برد. همچنین برند شرکت یا سازمانی را که صفحه را منتشر می کند بهبود می بخشد. فناوری تبدیل متن به گفتار این مزایای تجاری را قابل دستیابی می کند. ما با نشان دادن چگونگی دستیابی به این هدف با استفاده از آمازون پولی، این سفر را تسریع می کنیم.

این قابلیت دسترسی بازدیدکنندگان دارای معلولیت را بهبود می بخشد و می تواند به عنوان بخشی از استراتژی دسترسی سازمان شما به کار گرفته شود. به همان اندازه مهم، تجربه صفحه را برای بازدیدکنندگان بدون معلولیت افزایش می دهد. هر دو گروه قدرت خرج قابل توجهی دارند و از صفحاتی که از بهبود صدا برای جلب توجه آنها استفاده می کنند، آزادانه خرج می کنند.

بررسی اجمالی راه حل

PollyReadsThePage (PRTP) - همانطور که به راه حل اشاره می کنیم - به ناشر صفحه وب اجازه می دهد تا کنترل صوتی را روی صفحه وب خود قرار دهد. زمانی که بازدید کننده انتخاب می کند بازی در کنترل، کنترل صفحه را می خواند و محتوا را برجسته می کند. PRTP از قابلیت عمومی Amazon Polly برای ترکیب گفتار از متن استفاده می کند. آمازون پولی را فراخوانی می کند تا برای هر صفحه دو مصنوع تولید کند:

• محتوای صوتی در قالب قابل پخش توسط مرورگر: MP3
• یک فایل علامت‌گذاری گفتار که برای هر جمله از متن نشان می‌دهد:
  • زمان در حین پخش که جمله خوانده می شود
  • مکان روی صفحه جمله ظاهر می شود

زمانی که بازدید کننده انتخاب می کند بازی، مرورگر فایل MP3 را پخش می کند. همانطور که صدا خوانده می شود، مرورگر زمان را بررسی می کند، در فایل علامت گذاری می یابد که کدام جمله را در آن زمان بخواند، آن را در صفحه قرار می دهد و آن را برجسته می کند.

PRTP به بازدید کننده اجازه می دهد تا به صداها و زبان های مختلف بخواند. هر صدا به جفت فایل خاص خود نیاز دارد. PRTP از صداهای عصبی استفاده می کند. برای لیستی از صداها و زبان های عصبی پشتیبانی شده، رجوع کنید صداهای عصبی. برای لیست کامل صداهای استاندارد و عصبی در آمازون پولی، نگاه کنید صداها در آمازون پولی.

ما دو نوع صفحه وب را در نظر می گیریم: صفحات استاتیک و پویا. در یک ایستا در صفحه، محتوا در داخل صفحه قرار می گیرد و تنها زمانی تغییر می کند که نسخه جدیدی از صفحه منتشر شود. این شرکت ممکن است به عنوان بخشی از فرآیند ساخت وب خود، صفحه را روزانه یا هفتگی به روز کند. برای این نوع صفحات، می توان فایل های صوتی را از قبل در زمان ساخت تولید کرد و آنها را برای پخش در وب سرور قرار داد. همانطور که در شکل زیر نشان داده شده است، اسکریپت PRTP Pre-Gen آمازون پولی را برای تولید صدا فراخوانی می کند. به عنوان ورودی خود صفحه HTML و به صورت اختیاری، یک فایل پیکربندی است که مشخص می کند کدام متن از صفحه استخراج شود (Text Extract Config). اگر پیکربندی استخراج حذف شود، اسکریپت pre-gen انتخاب معقولی از متن را برای استخراج از بدنه صفحه انجام می دهد. آمازون پولی فایل ها را در یک خروجی می دهد سرویس ذخیره سازی ساده آمازون سطل (Amazon S3); اسکریپت آنها را در وب سرور شما کپی می کند. هنگامی که بازدید کننده صدا را پخش می کند، مرورگر MP3 را مستقیماً از سرور وب دانلود می کند. برای نکات برجسته، یک کتابخانه کشویی، PRTP.js، از فایل علامت ها برای برجسته کردن متن خوانده شده استفاده می کند.

محتوای الف پویا صفحه در پاسخ به تعامل بازدیدکننده تغییر می کند، بنابراین صدا را نمی توان از قبل تولید کرد بلکه باید به صورت پویا ترکیب شود. همانطور که در شکل زیر نشان داده شده است، هنگامی که بازدید کننده صدا را پخش می کند، صفحه از آن استفاده می کند PRTP.js برای تولید صدا در آمازون پولی، و صدای سنتز شده را با استفاده از همان رویکرد صفحات استاتیک برجسته می کند. برای دسترسی به خدمات AWS از مرورگر، بازدیدکننده به یک هویت AWS نیاز دارد. ما نحوه استفاده از an را نشان می دهیم Cognito آمازون مخزن هویت به بازدیدکننده اجازه می دهد تا به اندازه کافی به آمازون پولی و سطل S3 برای ارائه صدا دسترسی داشته باشد.

برای تولید هر دو علامت صوتی Mp3 و گفتار، باید سرویس Polly یک ورودی را دو بار ترکیب کند. رجوع به صفحه قیمت گذاری آمازون پولی برای درک پیامدهای هزینه پیش تولید باعث صرفه جویی در هزینه ها می شود زیرا سنتز در زمان ساخت به جای درخواست برای هر تعامل بازدید کننده انجام می شود.

کد همراه این پست به عنوان یک مخزن منبع باز در دسترس است GitHub.

برای بررسی راه حل، مراحل زیر را دنبال می کنیم:

1. منابع را تنظیم کنید، از جمله سرور ساخت پیش از نسل، سطل S3، وب سرور و هویت آمازون Cognito.
2. استاتیک پیش نسل را اجرا کنید و صفحات استاتیک را آزمایش کنید.
3. تست صفحات پویا

پیش نیازها

برای اجرای این مثال به یک حساب AWS با اجازه استفاده از Amazon Polly، Amazon S3، Amazon Cognito و (برای اهداف نمایشی) AWS Cloud9.

تامین منابع

ما یک را به اشتراک می گذاریم AWS CloudFormation قالبی برای ایجاد یک محیط نمایشی مستقل در حساب خود تا به شما کمک کند تا پست را دنبال کنید. اگر ترجیح می دهید PRTP را در محیط خود راه اندازی کنید، به دستورالعمل های موجود در آن مراجعه کنید README.md.

برای تهیه محیط آزمایشی با استفاده از CloudFormation، ابتدا یک کپی از آن را دانلود کنید قالب CloudFormation. سپس مراحل زیر را انجام دهید:

1. در کنسول AWS CloudFormation، را انتخاب کنید پشته ایجاد کنید.
2. را انتخاب کنید با منابع جدید (استاندارد).
3. انتخاب کنید یک فایل قالب بارگذاری کنید.
4. را انتخاب کنید انتخاب فایل برای آپلود نسخه محلی قالبی که دانلود کرده اید. نام فایل است prtp.yml.
5. را انتخاب کنید بعدی.
6. نام پشته دلخواه خود را وارد کنید. بعداً دوباره این را به عنوان جایگزینی وارد می کنید .
7. می توانید مقادیر پیش فرض را در قسمت نگه دارید پارامترهای بخش.
8. را انتخاب کنید بعدی.
9. قسمت های باقی مانده را ادامه دهید.
10. چک باکس های موجود در را بخوانید و انتخاب کنید توانمندی ها بخش.
11. را انتخاب کنید پشته ایجاد کنید.
12. وقتی پشته کامل شد، مقدار آن را پیدا کنید BucketName در خروجی های پشته

ما شما را تشویق می کنیم که پشته را با تیم امنیتی خود قبل از استفاده از آن در محیط تولید بررسی کنید.

سرور وب و سرور پیش نسل را در یک AWS Cloud9 IDE راه اندازی کنید

در مرحله بعد، در کنسول 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 کشف کردید.) انتخاب کنید بازی روی کنترل صوتی در بالا. به صوت گوش دهید و نکات برجسته را تماشا کنید. با تغییر سرعت، تغییر صدا، مکث، جلو بردن سریع و عقب بردن، کنترل را کاوش کنید. تصویر زیر صفحه را نشان می دهد. متن "پرش از پاراگراف پنهان" برجسته شده است زیرا در حال حاضر در حال خواندن است.

برای همین هم امتحان کنید PRTPStaticConfig.html و PRTPStaticCustom.html. نتایج مشابه است. به عنوان مثال، هر سه متن جایگزین برای عکس گربه ("تصویر تصادفی یک گربه") را بخوانید. هر سه NE، NW، SE و SW را به عنوان کلمات کامل ("شمال شرقی"، "شمال غربی"، "جنوب شرقی"، "جنوب غربی") می‌خوانند و از واژگان آمازون پولی بهره می‌برند.

به تفاوت های اصلی در صدا توجه کنید:

• PRTPStaticDefault.html تمام متن را در بدنه صفحه می‌خواند، از جمله بخش جمع‌بندی در پایین با «افکار شما در یک کلمه»، «ارسال پرسش»، «آخرین به‌روزرسانی ۱ آوریل ۲۰۲۰» و «سوالاتی برای تیم توسعه‌دهنده». 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

اسکریپت با اجرای برنامه پایتون شروع می شود FixHTML.py برای ساخت فایل HTML منبع PRTPStaticDefault.html خوب شکل گرفته نسخه خوش فرم فایل را می نویسد example/tmp_wff.html. این مرحله به دو دلیل حیاتی است:

• بیشتر HTML منبع به خوبی شکل نگرفته است. این مرحله HTML منبع را تعمیر می کند تا به خوبی شکل بگیرد. به عنوان مثال، بسیاری از صفحات HTML بسته نمی شوند P عناصر. این مرحله آنها را می بندد.
• ما جایی را در صفحه HTML که متن را پیدا می کنیم، پیگیری می کنیم. ما باید مکان‌ها را با استفاده از همان ساختار مدل شی سند (DOM) که مرورگر استفاده می‌کند، ردیابی کنیم. به عنوان مثال، مرورگر به طور خودکار یک را اضافه می کند TBODY به TABLE. برنامه پایتون از همان تعمیرات خوش فرم مرورگر پیروی می کند.

gen_ssml.sh HTML خوش فرم را به عنوان ورودی می گیرد، تبدیل XML stylesheet (XSLT) را روی آن اعمال می کند و یک فایل SSML را خروجی می دهد. (SSML زبانی در آمازون پولی برای کنترل نحوه نمایش صدا از متن است.) در مثال فعلی، ورودی example/tmp_wff.html. خروجی است example/tmp.ssml. وظیفه تبدیل این است که تصمیم بگیرد چه متنی را از HTML استخراج کرده و به Amazon Polly تغذیه کند. generic.xslt یک تبدیل XSLT پیش فرض معقول برای اکثر صفحات وب است. در نمونه کد زیر، کنترل صوتی، هدر HTML و همچنین عناصر HTML مانند script و form. همچنین عناصر با ویژگی پنهان را حذف می کند. این شامل عناصری است که معمولاً حاوی متن هستند، مانند 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 است که ارائه شده است. این به عنوان ورودی به آمازون پولی داده می شود. به عنوان مثال، توجه داشته باشید که متن "Skips hidden paragraph" باید در صدا خوانده شود، و ما آن را با یک علامت مرتبط می کنیم، که به ما می گوید که این متن در مکان صفحه ای که توسط عبارت 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>

برای تولید صدا در آمازون پولی، اسکریپت را فراخوانی می کنیم 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 مخصوص صدا و علامت گذاری فایل ها است. این فایل ها فایل های از پیش تولید شده هستند. صفحه نیازی به فراخوانی آمازون پولی در زمان اجرا ندارد. فایل ها بخشی از ساخت وب هستند.

کیس پیکربندی محور

بعد، در نظر بگیرید 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. عنصر با شناسه wrapup باید مستثنی شوند. کد زیر را ببینید:

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

ما برنامه پایتون را اجرا می کنیم 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>

اگر می خواهید کد را با جزئیات مطالعه کنید، به اسکریپت ها و برنامه های موجود در مخزن گیت هاب مراجعه کنید.

راه اندازی مرورگر و نکات برجسته

صفحات استاتیک شامل یک کنترل صوتی HTML5 است که فایل MP3 تولید شده توسط آمازون پولی و ساکن در سرور وب را به عنوان منبع صوتی خود می گیرد:

<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 در ویژگی نام ورودی از نوع SSML است که قبل از جمله قرار دارد. برای مثال، اگر زمان 18400 باشد، طبق فایل علامت‌ها، جمله‌ای که باید برجسته شود «Skips hidden Paragraph» است که از 18334 شروع می‌شود. مکان ورودی SSML در زمان 17667 است: /html/body[1]/div[2]/ul[1]/li[1].

تست صفحات پویا

صفحه PRTPDynamic.html بازخوانی صدای پویا را با استفاده از رویکردهای استخراج صوتی پیش‌فرض، مبتنی بر پیکربندی و سفارشی نشان می‌دهد.

مورد پیش فرض

در مرورگر خود، به PRTPDynamic.html. صفحه دارای یک پارامتر پرس و جو است، dynOption، که مقادیر را می پذیرد default, configو custom. به صورت پیش فرض می باشد default، بنابراین ممکن است در این مورد آن را حذف کنید. این صفحه دارای دو بخش با محتوای پویا است:

• آخرین مقالات - به طور مکرر در طول روز تغییر می کند
• فیلسوفان یونانی جستجو بر اساس تاریخ - به بازدید کننده اجازه می دهد تا فیلسوفان یونانی را بر اساس تاریخ جستجو کند و نتایج را در جدول نشان دهد

ایجاد مقداری محتوا در فیلسوف یونانی همانطور که در مثال نشان داده شده است، با وارد کردن محدوده تاریخ 800- تا 0، بخش را وارد کنید. سپس انتخاب کنید پیدا کردن.

حالا صدا را با انتخاب پخش کنید بازی در کنترل صدا

در پشت صحنه، صفحه کد زیر را برای رندر و پخش صدا اجرا می کند:

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

ابتدا تابع را فراخوانی می کند buildSSMLFromDefault in PRTP.js برای استخراج بیشتر متن از بدنه صفحه HTML. آن تابع درخت DOM را راه می‌اندازد و به دنبال متن در عناصر رایج مانند p, h1, pre, spanو td. متن را در عناصری که معمولاً حاوی متنی برای خواندن با صدای بلند نیستند، نادیده می گیرد، مانند audio, optionو script. این نشانه گذاری SSML را برای ورودی آمازون پولی ایجاد می کند. در زیر قطعه ای است که استخراج ردیف اول را نشان می دهد 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>

La 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 کاراکتر) است. در حالت همزمان، از آمازون پولی می‌خواهیم که فایل 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"}
	 ]
	});

La buildSSMLFromConfig تابع، تعریف شده در PRTP.js، درخت DOM را در هر یک از بخش هایی که شناسه آن در زیر ارائه شده است، راه می رود inclusions. محتوا را از هر کدام استخراج می کند و آنها را به ترتیب مشخص شده با هم ترکیب می کند تا یک سند SSML تشکیل دهد. بخش های مشخص شده در زیر را مستثنی می کند exclusions. مطالب را از هر بخش به همان روش استخراج می کند buildSSMLFromDefault مطالب را از بدنه صفحه استخراج می کند.

مورد سفارشی سازی

در مرورگر خود، به PRTPDynamic.html?dynOption=custom. صدا را پخش کنید. سه تفاوت قابل توجه وجود دارد. بیایید به این موارد توجه کنیم و کد سفارشی که در پشت صحنه اجرا می شود را در نظر بگیریم:

• کاشی های اصلی را به ترتیب NW، SW، NE، SE می خواند. کد سفارشی از هر یک از این بلوک های سلولی دریافت می کند maintable و آنها را به ترتیب NW، SW، NE، SE به SSML اضافه می کند:

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 استفاده کردیم. برای تسهیل برجسته‌سازی، از قابلیت علامت‌های گفتاری در آمازون پولی استفاده کردیم.

با مراجعه به آمازون پولی بیشتر درباره آمازون پولی بیاموزید صفحه خدمات.

در نظرات بپرسید.

درباره نویسندگان

مایک هیوی یک معمار راه حل برای AWS با بیش از 25 سال تجربه در ساخت برنامه های کاربردی سازمانی است. مایک نویسنده دو کتاب و مقالات متعدد است. از آمازون او دیدن کنید صفحه نویسنده برای خواندن بیشتر

وینیت کچاواها یک معمار راه حل در AWS با تخصص در یادگیری ماشین است. او مسئول کمک به مشتریان در معماری حجم کاری مقیاس پذیر، ایمن و مقرون به صرفه در AWS است.