اقرأ صفحات الويب وقم بتمييز المحتوى باستخدام Amazon Polly

في هذا المنشور ، نوضح كيفية الاستخدام الأمازون بولي—خدمة سحابية رائدة تقوم بتحويل النص إلى كلام نابض بالحياة — لقراءة محتوى صفحة ويب وتمييز المحتوى أثناء قراءته. تعمل إضافة تشغيل الصوت إلى صفحة ويب على تحسين إمكانية الوصول وتجربة الزائر للصفحة. المحتوى المحسّن بالصوت أكثر تأثيرًا ولا يُنسى ، ويجذب المزيد من حركة المرور إلى الصفحة ، ويستفيد من القدرة الشرائية للزوار. كما أنه يحسن العلامة التجارية للشركة أو المنظمة التي تنشر الصفحة. تجعل تقنية تحويل النص إلى كلام هذه الفوائد التجارية قابلة للتحقيق. نقوم بتسريع هذه الرحلة من خلال توضيح كيفية تحقيق هذا الهدف باستخدام Amazon Polly.

تعمل هذه الإمكانية على تحسين إمكانية الوصول للزوار ذوي الاحتياجات الخاصة ، ويمكن اعتمادها كجزء من استراتيجية إمكانية الوصول الخاصة بمؤسستك. وبنفس القدر من الأهمية ، فهو يعزز تجربة الصفحة للزوار غير المعوقين. تتمتع كلتا المجموعتين بقدرة شرائية كبيرة وتنفقان بحرية أكبر من الصفحات التي تستخدم تحسين الصوت لجذب انتباههم.

نظرة عامة على الحل

PollyReadsThePage (PRTP) - كما نشير إلى الحل - يسمح لناشر صفحات الويب بإسقاط عنصر تحكم صوتي على صفحة الويب الخاصة بهم. عندما يختار الزائر بلايستشن في عنصر التحكم ، يقرأ عنصر التحكم الصفحة ويميز المحتوى. يستخدم PRTP القدرة العامة لـ Amazon Polly لتجميع الكلام من النص. يستدعي Amazon Polly لإنشاء قطعتين من القطع الأثرية لكل صفحة:

• محتوى الصوت بتنسيق يمكن تشغيله بواسطة المتصفح: MP3
• ملف علامات الكلام يشير إلى كل جملة من النص:
  • الوقت الذي يتم فيه قراءة الجملة
  • الموقع على الصفحة تظهر الجملة

عندما يختار الزائر بلايستشن، يقوم المتصفح بتشغيل ملف MP3. أثناء قراءة الصوت ، يتحقق المتصفح من الوقت ، ويجد في ملف العلامات الجملة التي يجب قراءتها في ذلك الوقت ، ويحددها على الصفحة ، ويميزها.

يتيح PRTP للزائر القراءة بأصوات ولغات مختلفة. يتطلب كل صوت زوجًا من الملفات الخاصة به. يستخدم PRTP الأصوات العصبية. للحصول على قائمة الأصوات واللغات العصبية المدعومة ، راجع أصوات عصبية. للحصول على قائمة كاملة بالأصوات القياسية والعصبية في Amazon Polly ، راجع أصوات في أمازون بولي.

نحن نعتبر نوعين من صفحات الويب: الصفحات الثابتة والمتحركة. في ساكن الصفحة ، المحتوى مضمن داخل الصفحة ولا يتغير إلا عند نشر نسخة جديدة من الصفحة. قد تقوم الشركة بتحديث الصفحة يوميًا أو أسبوعيًا كجزء من عملية بناء الويب الخاصة بها. بالنسبة لهذا النوع من الصفحات ، من الممكن إنشاء ملفات الصوت مسبقًا في وقت الإنشاء ووضعها على خادم الويب للتشغيل. كما يوضح الشكل التالي ، البرنامج النصي PRTP Pre-Gen استدعاء Amazon Polly لإنشاء الصوت. يأخذ كمدخل صفحة HTML نفسها ، واختيارياً ، ملف تكوين يحدد النص من الصفحة المراد استخراجه (Text Extract Config). إذا تم حذف تكوين الاستخراج ، فإن البرنامج النصي للإنشاءات يقوم باختيار معقول للنص لاستخراجه من نص الصفحة. يقوم Amazon Polly بإخراج الملفات بتنسيق خدمة تخزين أمازون البسيطة (Amazon S3) دلو ؛ يقوم البرنامج النصي بنسخها إلى خادم الويب الخاص بك. عندما يقوم الزائر بتشغيل الصوت ، يقوم المتصفح بتنزيل ملف MP3 مباشرة من خادم الويب. للأشياء البارزة ، مكتبة منسدلة ، PRTP.js، يستخدم ملف العلامات لتمييز النص الذي تتم قراءته.

محتوى أ ديناميكي تتغير الصفحة استجابة لتفاعل الزائر ، لذلك لا يمكن إنشاء الصوت مسبقًا ولكن يجب توليفه ديناميكيًا. كما يوضح الشكل التالي ، عندما يقوم الزائر بتشغيل الصوت ، تستخدم الصفحة PRTP.js لتوليد الصوت في Amazon Polly ، ويسلط الضوء على الصوت المركب باستخدام نفس النهج كما هو الحال مع الصفحات الثابتة. للوصول إلى خدمات AWS من المتصفح ، يحتاج الزائر إلى هوية AWS. نعرض كيفية استخدام ملف أمازون كوجنيتو تجمع الهوية للسماح للزائر بالوصول الكافي فقط إلى Amazon Polly ودلو S3 لعرض الصوت.

يتطلب إنشاء كل من علامتي الصوت والكلام بتنسيق Mp3 أن تقوم خدمة Polly بتجميع نفس الإدخال مرتين. الرجوع إلى صفحة تسعير Amazon Polly لفهم الآثار المترتبة على التكلفة. يوفر التوليد المسبق التكاليف لأنه يتم تنفيذ التوليف في وقت الإنشاء بدلاً من عند الطلب لكل تفاعل للزائر.

الكود المصاحب لهذا المنشور متاح كمستودع مفتوح المصدر في GitHub جيثب:.

لاستكشاف الحل ، نتبع الخطوات التالية:

1. قم بإعداد الموارد ، بما في ذلك خادم إنشاء ما قبل الجيل ، ودلو S3 ، وخادم الويب ، وهوية Amazon Cognito.
2. قم بتشغيل إنشاء ما قبل الجيل الثابت واختبار الصفحات الثابتة.
3. اختبار الصفحات الديناميكية.

المتطلبات الأساسية المسبقة

لتشغيل هذا المثال ، تحتاج إلى ملف حساب AWS بإذن لاستخدام Amazon Polly و Amazon S3 و Amazon Cognito و (للأغراض التجريبية) سحابة AWS 9.

توفير الموارد

نحن نشارك تكوين سحابة AWS نموذج لإنشاء بيئة تجريبية قائمة بذاتها في حسابك لمساعدتك على متابعة المنشور. إذا كنت تفضل إعداد 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 ككلمات كاملة ("شمال شرق" ، "شمال غرب" ، "جنوب شرق" ، "جنوب غرب") ، مستفيدين من معاجم 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 repo الخاص بنا ملفات صوتية مُنشأة مسبقًا لـ PRPTStatic الصفحات ، ولكن إذا كنت ترغب في إنشائها بنفسك ، من bash shell في 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. يتبع برنامج 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. كما أنه يستبعد العناصر ذات السمة المخفية. يتضمن العناصر التي تحتوي عادةً على نص ، مثل 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 ، ماثيو. 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. العنصر ذو المعرف 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>

إذا كنت ترغب في دراسة الكود بالتفصيل ، فارجع إلى النصوص والبرامج في GitHub repo.

إعداد المتصفح والميزات

تتضمن الصفحات الثابتة عنصر تحكم صوتي بتنسيق 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 في سمة الاسم لإدخال نوع SSML الذي يسبق الجملة. على سبيل المثال ، إذا كان الوقت هو 18400 ، وفقًا لملف العلامات ، فإن الجملة المراد إبرازها هي "تخطي الفقرة المخفية" ، والتي تبدأ في 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 ليتم إدخاله إلى 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, []));

• يتم التحدث بصوت عالٍ "توم برادي". يضع الكود المخصص نص "Tom Brady" داخل SSML prosody العلامة:

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

• يقرأ فقط الصفوف الثلاثة الأولى من جدول قورتربك. يقرأ رؤوس الأعمدة لكل صف. تحقق من الكود في GitHub repo لاكتشاف كيفية تنفيذ ذلك.

تنظيف

لتجنب تكبد الرسوم المستقبلية ، احذف مكدس CloudFormation.

وفي الختام

في هذا المنشور ، أظهرنا حلاً تقنيًا لمشكلة تجارية عالية القيمة: كيفية استخدام Amazon Polly لقراءة محتوى صفحة ويب وتمييز المحتوى أثناء قراءته. لقد أظهرنا هذا باستخدام كل من الصفحات الثابتة والديناميكية. لاستخراج المحتوى من الصفحة ، استخدمنا DOM traversal و XSLT. لتسهيل التمييز ، استخدمنا إمكانية علامات الكلام في Amazon Polly.

تعرف على المزيد حول Amazon Polly من خلال زيارة موقع صفحة الخدمة.

لا تتردد في طرح الأسئلة في التعليقات.

عن المؤلفين

مايك هدي هو مهندس حلول لـ AWS يتمتع بخبرة تزيد عن 25 عامًا في بناء تطبيقات المؤسسة. مايك مؤلف كتابين والعديد من المقالات. قم بزيارة موقع أمازون الخاص به صفحة المؤلف لقراءة المزيد.

فينيت كاشواها هو مهندس حلول في AWS ولديه خبرة في التعلم الآلي. وهو مسؤول عن مساعدة العملاء في تصميم أعباء عمل قابلة للتطوير وآمنة وفعالة من حيث التكلفة على AWS.