अमेज़ॅन पॉली का उपयोग करके वेबपेज पढ़ें और सामग्री को हाइलाइट करें

इस पोस्ट में, हम प्रदर्शित करते हैं कि कैसे उपयोग करें अमेज़ॅन पोली—एक प्रमुख क्लाउड सेवा जो टेक्स्ट को सजीव भाषण में परिवर्तित करती है—किसी वेबपेज की सामग्री को पढ़ने और सामग्री को पढ़ते समय हाइलाइट करने के लिए। वेबपेज पर ऑडियो प्लेबैक जोड़ने से पेज की एक्सेसिबिलिटी और विज़िटर अनुभव में सुधार होता है। ऑडियो-उन्नत सामग्री अधिक प्रभावशाली और यादगार है, पृष्ठ पर अधिक ट्रैफ़िक खींचती है, और आगंतुकों की खर्च करने की शक्ति का दोहन करती है। यह पेज प्रकाशित करने वाली कंपनी या संगठन के ब्रांड को भी सुधारता है। टेक्स्ट-टू-स्पीच तकनीक इन व्यावसायिक लाभों को प्राप्य बनाती है। हम Amazon Poly का उपयोग करके इस लक्ष्य को प्राप्त करने का तरीका प्रदर्शित करके उस यात्रा को गति देते हैं।

यह क्षमता विकलांग आगंतुकों के लिए पहुंच में सुधार करती है, और इसे आपके संगठन की पहुंच-योग्यता रणनीति के हिस्से के रूप में अपनाया जा सकता है। उतना ही महत्वपूर्ण, यह बिना विकलांग आगंतुकों के लिए पृष्ठ अनुभव को बढ़ाता है। दोनों समूहों के पास महत्वपूर्ण खर्च करने की शक्ति है और वे उन पृष्ठों से अधिक स्वतंत्र रूप से खर्च करते हैं जो उनका ध्यान आकर्षित करने के लिए ऑडियो एन्हांसमेंट का उपयोग करते हैं।

समाधान का अवलोकन

PollyReadsThePage (पीआरटीपी)—जैसा कि हम समाधान के लिए संदर्भित करते हैं—एक वेबपेज प्रकाशक को अपने वेबपेज पर एक ऑडियो नियंत्रण छोड़ने की अनुमति देता है। जब आगंतुक चुनता है प्ले नियंत्रण पर, नियंत्रण पृष्ठ को पढ़ता है और सामग्री को हाइलाइट करता है। पीआरटीपी टेक्स्ट से भाषण को संश्लेषित करने के लिए अमेज़ॅन पोली की सामान्य क्षमता का उपयोग करता है। यह प्रत्येक पृष्ठ के लिए दो कलाकृतियों को उत्पन्न करने के लिए अमेज़ॅन पोली को आमंत्रित करता है:

• ब्राउज़र द्वारा चलाने योग्य प्रारूप में ऑडियो सामग्री: MP3
• एक वाक् चिह्न फ़ाइल जो पाठ के प्रत्येक वाक्य के लिए इंगित करती है:
  • प्लेबैक के दौरान वह समय जब वाक्य पढ़ा जाता है
  • पृष्ठ पर स्थान वाक्य प्रकट होता है

जब आगंतुक चुनता है प्ले, ब्राउज़र एमपी3 फ़ाइल चलाता है। जैसे ही ऑडियो पढ़ा जाता है, ब्राउज़र समय की जांच करता है, मार्क्स फ़ाइल में ढूंढता है कि उस समय कौन सा वाक्य पढ़ना है, इसे पृष्ठ पर ढूंढता है, और इसे हाइलाइट करता है।

पीआरटीपी आगंतुक को विभिन्न आवाजों और भाषाओं में पढ़ने की अनुमति देता है। प्रत्येक आवाज को फाइलों की अपनी जोड़ी की आवश्यकता होती है। पीआरटीपी तंत्रिका आवाजों का उपयोग करता है। समर्थित तंत्रिका आवाजों और भाषाओं की सूची के लिए, देखें तंत्रिका आवाज. Amazon पोली में मानक और तंत्रिका संबंधी आवाज़ों की पूरी सूची के लिए, देखें अमेज़ॅन पोली में आवाज़ें.

हम दो प्रकार के वेबपृष्ठों पर विचार करते हैं: स्थिर और गतिशील पृष्ठ। में एक स्थिर पृष्ठ, सामग्री पृष्ठ के भीतर समाहित है और केवल तभी बदलती है जब पृष्ठ का एक नया संस्करण प्रकाशित होता है। कंपनी अपनी वेब बिल्ड प्रक्रिया के हिस्से के रूप में पेज को दैनिक या साप्ताहिक रूप से अपडेट कर सकती है। इस प्रकार के पेज के लिए, ऑडियो फाइलों को बिल्ड टाइम पर प्री-जेनरेट करना और प्लेबैक के लिए वेब सर्वर पर रखना संभव है। जैसा कि निम्न आकृति से पता चलता है, स्क्रिप्ट PRTP Pre-Gen ऑडियो उत्पन्न करने के लिए अमेज़न पोली को आमंत्रित करता है। यह HTML पृष्ठ को इनपुट के रूप में लेता है और, वैकल्पिक रूप से, एक कॉन्फ़िगरेशन फ़ाइल जो निर्दिष्ट करती है कि पृष्ठ से कौन सा पाठ निकालना है (Text Extract Config) यदि एक्सट्रेक्ट कॉन्फिग को छोड़ दिया जाता है, तो प्री-जेन स्क्रिप्ट पेज के मुख्य भाग से निकालने के लिए टेक्स्ट का एक समझदार विकल्प बनाती है। अमेज़ॅन पोली फाइलों को एक में आउटपुट करता है अमेज़न सरल भंडारण सेवा (अमेज़ॅन S3) बकेट; स्क्रिप्ट उन्हें आपके वेब सर्वर पर कॉपी करती है। जब आगंतुक ऑडियो चलाता है, तो ब्राउज़र सीधे वेब सर्वर से एमपी3 डाउनलोड करता है। हाइलाइट्स के लिए, एक ड्रॉप-इन लाइब्रेरी, PRTP.js, पढ़े जा रहे टेक्स्ट को हाइलाइट करने के लिए मार्क्स फ़ाइल का उपयोग करता है।

ए . की सामग्री गतिशील विज़िटर इंटरैक्शन के जवाब में पृष्ठ में परिवर्तन होता है, इसलिए ऑडियो को पूर्व-जनरेट नहीं किया जा सकता है, लेकिन गतिशील रूप से संश्लेषित किया जाना चाहिए। जैसा कि निम्न चित्र दिखाता है, जब विज़िटर ऑडियो चलाता है, तो पृष्ठ उपयोग करता है PRTP.js अमेज़ॅन पोली में ऑडियो उत्पन्न करने के लिए, और यह स्थिर पृष्ठों के समान दृष्टिकोण का उपयोग करके संश्लेषित ऑडियो को हाइलाइट करता है। ब्राउज़र से AWS सेवाओं तक पहुँचने के लिए, आगंतुक को AWS पहचान की आवश्यकता होती है। हम दिखाते हैं कि an . का उपयोग कैसे करें अमेज़ॅन कॉग्निटो आइडेंटिटी पूल, विज़िटर को ऑडियो रेंडर करने के लिए Amazon पोली और S3 बकेट तक पर्याप्त पहुंच प्रदान करता है।

Mp3 ऑडियो और वाक् चिह्न दोनों उत्पन्न करने के लिए पोली सेवा को एक ही इनपुट को दो बार संश्लेषित करने की आवश्यकता होती है। को देखें अमेज़न पोली प्राइसिंग पेज लागत प्रभाव को समझने के लिए। प्री-जेनरेशन लागत बचाता है क्योंकि प्रत्येक विज़िटर इंटरैक्शन के लिए ऑन-डिमांड के बजाय निर्माण समय पर संश्लेषण किया जाता है।

इस पोस्ट के साथ कोड एक ओपन-सोर्स रिपॉजिटरी के रूप में उपलब्ध है GitHub.

समाधान का पता लगाने के लिए, हम इन चरणों का पालन करते हैं:

1. प्री-जेन बिल्ड सर्वर, S3 बकेट, वेब सर्वर और Amazon Cognito पहचान सहित संसाधन सेट करें।
2. स्टैटिक प्री-जेन बिल्ड चलाएँ और स्टैटिक पेजों का परीक्षण करें।
3. गतिशील पृष्ठों का परीक्षण करें।

.. पूर्वापेक्षाएँ

इस उदाहरण को चलाने के लिए, आपको एक की आवश्यकता है AWS खाता Amazon Poly, Amazon S3, Amazon Cognito, और (डेमो प्रयोजनों के लिए) का उपयोग करने की अनुमति के साथ AWS क्लाउड 9.

प्रावधान संसाधन

हम साझा करते हैं एडब्ल्यूएस CloudFormation पोस्ट के साथ अनुसरण करने में आपकी सहायता करने के लिए आपके खाते में एक स्व-निहित डेमो वातावरण बनाने के लिए टेम्पलेट। यदि आप अपने स्वयं के वातावरण में पीआरटीपी स्थापित करना पसंद करते हैं, तो निर्देशों का संदर्भ लें 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 स्टैक द्वारा बनाया गया। चुनना आईडीई खोलें 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 पतों की एक श्रेणी निर्दिष्ट करें। अपने स्थानीय मशीन पर ब्राउज़र तक पहुंच को प्रतिबंधित करने के लिए, का उपयोग करके अपना आईपी पता खोजें https://whatismyipaddress.com/ और संलग्न करें /32 सीमा निर्दिष्ट करने के लिए। उदाहरण के लिए, यदि आपका आईपी है 10.2.3.4, use 10.2.3.4/32. सर्वर पोर्ट 8080 पर सुनता है। सार्वजनिक आईपी पता जिस पर सर्वर सुनता है वह आउटपुट में दिया जाता है। उदाहरण के लिए:

Public IP is

3.92.33.223

स्थिर पृष्ठों का परीक्षण करें

अपने ब्राउज़र में, नेविगेट करें PRTPStaticDefault.html. (यदि आप डेमो का उपयोग कर रहे हैं, तो URL है http://<cloud9host>:8080/web/PRTPStaticDefault.html, जहां सार्वजनिक आईपी पता है जिसे आपने आईडीई की स्थापना में खोजा था।) चुनें प्ले शीर्ष पर ऑडियो नियंत्रण पर। ऑडियो सुनें और हाइलाइट्स देखें। गति को बदलकर, आवाजें बदलकर, रुककर, तेजी से अग्रेषण और रिवाइंड करके नियंत्रण का अन्वेषण करें। निम्न स्क्रीनशॉट पृष्ठ दिखाता है; पाठ "छिपे हुए पैराग्राफ को छोड़ता है" हाइलाइट किया गया है क्योंकि इसे वर्तमान में पढ़ा जा रहा है।

के लिए भी यही प्रयास करें PRTPStaticConfig.html और PRTPStaticCustom.html. परिणाम समान हैं। उदाहरण के लिए, तीनों ने बिल्ली की तस्वीर के लिए वैकल्पिक पाठ पढ़ा ("बिल्ली की यादृच्छिक तस्वीर")। अमेज़ॅन पोली लेक्सिकॉन का लाभ उठाते हुए तीनों ने एनई, एनडब्ल्यू, एसई, और एसडब्ल्यू को पूर्ण शब्दों ("पूर्वोत्तर," "उत्तर-पश्चिम," "दक्षिण-पूर्व," "दक्षिण-पश्चिम") के रूप में पढ़ा।

ऑडियो में मुख्य अंतरों पर ध्यान दें:

• PRTPStaticDefault.html "आपके विचार एक शब्द में," "प्रश्न सबमिट करें," "अंतिम बार 1 अप्रैल, 2020 को अपडेट किया गया," और "देव टीम के लिए प्रश्न" के साथ नीचे दिए गए रैपअप भाग सहित, पृष्ठ के मुख्य भाग में सभी पाठ पढ़ता है। PRTPStaticConfig.html और PRTPStaticCustom.html इन्हें न पढ़ें क्योंकि ये स्पीच सिंथेसिस से रैपअप को स्पष्ट रूप से बाहर कर देते हैं।
• PRTPStaticCustom.html पढ़ता है क्यूबी बेस्ट सेलर्स तालिका दूसरों से अलग। यह केवल पहली तीन पंक्तियों को पढ़ता है, और प्रत्येक पंक्ति के लिए पंक्ति संख्या को पढ़ता है। यह प्रत्येक पंक्ति के लिए कॉलम दोहराता है। PRTPStaticCustom.html तालिका के रीडआउट को तैयार करने के लिए एक कस्टम परिवर्तन का उपयोग करता है। अन्य पृष्ठ डिफ़ॉल्ट तालिका प्रतिपादन का उपयोग करते हैं।
• PRTPStaticCustom.html "टॉम ब्रैडी" को बाकी पाठ की तुलना में अधिक मात्रा में पढ़ता है। यह वाक् संश्लेषण मार्कअप भाषा (SSML) का उपयोग करता है prosody टॉम ब्रैडी के पढ़ने को तैयार करने के लिए टैग। अन्य पृष्ठ इस तरह से तैयार नहीं होते हैं।
• PRTPStaticCustom.html, एक कस्टम परिवर्तन के लिए धन्यवाद, NW, SW, NE, SE क्रम में मुख्य टाइलें पढ़ता है; अर्थात्, यह "आज के लेख," "दिन का उद्धरण," "दिन की तस्वीर," "दिन के चुटकुले" पढ़ता है। अन्य पृष्ठ उस क्रम में पढ़े जाते हैं जिस क्रम में टाइलें प्राकृतिक NW, NE, SW, SE क्रम में दिखाई देती हैं, वे HTML में दिखाई देती हैं: "आज के लेख," "दिन की तस्वीर," "दिन का उद्धरण," "जोक्स ऑफ़ द दिन।"

आइए गहराई से देखें कि ऑडियो कैसे उत्पन्न होता है, और पृष्ठ टेक्स्ट को कैसे हाइलाइट करता है।

स्टेटिक प्री-जनरेटर

हमारे गिटहब रेपो में पहले से जेनरेट की गई ऑडियो फाइलें शामिल हैं PRPTStatic पृष्ठ, लेकिन यदि आप उन्हें स्वयं उत्पन्न करना चाहते हैं, तो 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) संरचना का उपयोग करके स्थानों को ट्रैक करने की आवश्यकता है जो ब्राउज़र उपयोग करता है। उदाहरण के लिए, ब्राउज़र स्वचालित रूप से a . जोड़ता है TBODY एक करने के लिए TABLE. पायथन प्रोग्राम ब्राउज़र की तरह ही अच्छी तरह से बनाई गई मरम्मत का अनुसरण करता है।

gen_ssml.sh अच्छी तरह से गठित HTML को इनपुट के रूप में लेता है, इसमें एक XML स्टाइलशीट ट्रांसफ़ॉर्मेशन (XSLT) ट्रांसफ़ॉर्मेशन लागू करता है, और एक SSML फ़ाइल को आउटपुट करता है। (एसएसएमएल अमेज़ॅन पोली में यह नियंत्रित करने के लिए भाषा है कि टेक्स्ट से ऑडियो कैसे प्रस्तुत किया जाता है।) वर्तमान उदाहरण में, इनपुट है example/tmp_wff.html. आउटपुट है example/tmp.ssml. ट्रांसफॉर्म का काम यह तय करना है कि HTML से कौन सा टेक्स्ट निकाला जाए और Amazon Poly को फीड किया जाए। 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 पोली को इनपुट के रूप में फीड किया जाता है। उदाहरण के लिए, ध्यान दें कि "छिपे हुए अनुच्छेद को छोड़ता है" पाठ को ऑडियो में पढ़ा जाना है, और हम इसे एक चिह्न के साथ जोड़ते हैं, जो हमें बताता है कि यह पाठ 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 polly start-speech-synthesis-task दो बार: एक बार एमपी3 ऑडियो जेनरेट करने के लिए, और फिर मार्क्स फाइल जेनरेट करने के लिए। क्योंकि पीढ़ी अतुल्यकालिक है, स्क्रिप्ट तब तक मतदान करती है जब तक कि उसे निर्दिष्ट S3 बकेट में आउटपुट नहीं मिल जाता। जब यह आउटपुट पाता है, तो यह बिल्ड सर्वर पर डाउनलोड हो जाता है और फाइलों को कॉपी करता है web/polly फ़ोल्डर। निम्नलिखित वेब फ़ोल्डरों की एक सूची है:

• PRTStaticDefault.html
• PRTStaticConfig.html
• PRTStaticCustom.html
• पीआरटीपी.जेएस
• पोली/PRTPStaticDefault/Joanna.mp3, Joanna.marks, Matthew.mp3, Matthew.marks
• पोली/PRTPStaticConfig/Joanna.mp3, Joanna.marks, Matthew.mp3, Matthew.marks
• पोली/PRTPStaticCustom/Joanna.mp3, Joanna.marks, Matthew.mp3, Matthew.marks

प्रत्येक पृष्ठ में ध्वनि-विशिष्ट एमपी3 का अपना सेट होता है और फाइलों को चिह्नित करता है। ये फाइलें पहले से जेनरेट की गई फाइलें हैं। पेज को रनटाइम पर Amazon पोली को लागू करने की आवश्यकता नहीं है; फ़ाइलें वेब बिल्ड का हिस्सा हैं।

कॉन्फिग-संचालित मामला

अगला, विचार करें 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 कैसे लिखा जाता है। लेकिन उन्हें 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 के बजाय। निम्नलिखित एक्सएसएलटी का एक स्निपेट है:

<!-- 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 ऑडियो नियंत्रण शामिल है, जो अमेज़ॅन पोली द्वारा उत्पन्न और वेब सर्वर पर रहने वाली एमपी3 फ़ाइल को अपने ऑडियो स्रोत के रूप में लेता है:

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

लोड होने पर, पेज Amazon पोली-जनरेटेड मार्क्स फ़ाइल को भी लोड करता है। यह में होता है 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 मार्क्स फाइल में। स्थान SSML प्रकार की प्रविष्टि के नाम विशेषता में XPath व्यंजक है जो वाक्य से पहले आता है। उदाहरण के लिए, यदि समय 18400 है, तो अंक फ़ाइल के अनुसार, हाइलाइट किया जाने वाला वाक्य "छिपे हुए अनुच्छेद को छोड़ देता है" है, जो 18334 से शुरू होता है। स्थान 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. यह अमेज़ॅन पोली में इनपुट होने के लिए एसएसएमएल मार्कअप बनाता है। निम्नलिखित से पहली पंक्ति के निष्कर्षण को दर्शाने वाला एक स्निपेट है 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>

RSI chooseRenderAudio समारोह में PRTP.js Amazon Cognito, Amazon S3 और Amazon Poly के लिए AWS SDK को इनिशियलाइज़ करने से शुरू होता है। यह आरंभीकरण केवल एक बार होता है। यदि 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()
};

यह एमेजॉन पोली से एमपी3 ऑडियो जेनरेट करता है। पीढ़ी छोटे SSML इनपुट के लिए सिंक्रोनस और बड़े SSML इनपुट (3 से अधिक वर्णों) के लिए एसिंक्रोनस (S6,000 बकेट को भेजे गए आउटपुट के साथ) है। समकालिक मामले में, हम Amazon Poly को एक निर्धारित URL का उपयोग करके MP3 फ़ाइल प्रदान करने के लिए कहते हैं। जब संश्लेषित आउटपुट तैयार होता है, तो हम सेट करते हैं src उस यूआरएल पर ऑडियो नियंत्रण की विशेषता और नियंत्रण लोड करें। फिर हम अंक फ़ाइल का अनुरोध करते हैं और इसे स्थिर मामले की तरह ही लोड करते हैं। निम्नलिखित कोड देखें:

// 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"}
	 ]
	});

RSI buildSSMLFromConfig समारोह, में परिभाषित PRTP.js, प्रत्येक अनुभाग में DOM ट्री चलता है जिसकी आईडी नीचे दी गई है inclusions. यह प्रत्येक से सामग्री निकालता है और एसएसएमएल दस्तावेज़ बनाने के लिए निर्दिष्ट क्रम में उन्हें एक साथ जोड़ता है। इसमें निर्दिष्ट अनुभाग शामिल नहीं हैं 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();
}

• यह क्वार्टरबैक टेबल की केवल पहली तीन पंक्तियों को पढ़ता है। यह प्रत्येक पंक्ति के लिए कॉलम हेडर पढ़ता है। यह कैसे कार्यान्वित किया जाता है यह जानने के लिए गिटहब रेपो में कोड देखें।

क्लीन अप

भविष्य के शुल्कों से बचने के लिए, CloudFormation स्टैक को हटा दें।

निष्कर्ष

इस पोस्ट में, हमने एक उच्च-मूल्य वाली व्यावसायिक समस्या के तकनीकी समाधान का प्रदर्शन किया: वेबपेज की सामग्री को पढ़ने के लिए अमेज़ॅन पोली का उपयोग कैसे करें और सामग्री को पढ़ते समय हाइलाइट करें। हमने इसे स्थिर और गतिशील दोनों पृष्ठों का उपयोग करके दिखाया। पृष्ठ से सामग्री निकालने के लिए, हमने DOM ट्रैवर्सल और XSLT का उपयोग किया। हाइलाइटिंग की सुविधा के लिए, हमने अमेज़ॅन पोली में स्पीच मार्क्स क्षमता का उपयोग किया।

अमेज़न पोली के बारे में इसके बारे में और जानें सेवा पृष्ठ.

टिप्पणियों में प्रश्न पूछने के लिए स्वतंत्र महसूस करें।

लेखक के बारे में

माइक हैवी 25 से अधिक वर्षों के अनुभव के साथ उद्यम अनुप्रयोगों के निर्माण के साथ एडब्ल्यूएस के लिए एक समाधान वास्तुकार है। माइक दो पुस्तकों और कई लेखों के लेखक हैं। उसके अमेज़न पर जाएँ लेखक पृष्ठ और पढ़ने के लिए।

विनीत कच्छवाहा मशीन लर्निंग में विशेषज्ञता के साथ एडब्ल्यूएस में एक समाधान वास्तुकार है। वह ग्राहकों को एडब्ल्यूएस पर स्केलेबल, सुरक्षित और लागत प्रभावी वर्कलोड आर्किटेक्ट की मदद करने के लिए जिम्मेदार है।