Olvasson weboldalakat és emeljen ki tartalmat az Amazon Polly segítségével

Ebben a bejegyzésben bemutatjuk, hogyan kell használni Amazon Polly– egy vezető felhőszolgáltatás, amely a szöveget élethű beszéddé alakítja – a weboldal tartalmának elolvasásához és a tartalom kiemeléséhez olvasás közben. Hanglejátszás hozzáadása egy weboldalhoz javítja az oldal hozzáférhetőségét és a látogatói élményt. A hanganyaggal kiegészített tartalom hatásosabb és emlékezetesebb, nagyobb forgalmat vonz az oldalra, és kihasználja a látogatók vásárlóerejét. Az oldalt kiadó vállalat vagy szervezet márkáját is javítja. A szövegfelolvasó technológia elérhetővé teszi ezeket az üzleti előnyöket. Felgyorsítjuk ezt az utat azzal, hogy bemutatjuk, hogyan érhetjük el ezt a célt az Amazon Polly használatával.

Ez a képesség javítja a fogyatékkal élő látogatók akadálymentesítését, és a szervezet akadálymentesítési stratégiájának részeként alkalmazható. Ugyanilyen fontos, hogy javítja az oldal élményét a fogyatékossággal nem rendelkező látogatók számára. Mindkét csoport jelentős vásárlóerővel rendelkezik, és szabadabban költ azokról az oldalakról, amelyek hangjavítást használnak a figyelmük felkeltésére.

A megoldás áttekintése

PollyReadsThePage (PRTP) – ahogyan a megoldásra hivatkozunk – lehetővé teszi a weboldal megjelenítői számára, hogy hangvezérlőt helyezzenek el a weboldalukon. Amikor a látogató úgy dönt játszani a vezérlőn a vezérlő beolvassa az oldalt és kiemeli a tartalmat. A PRTP az Amazon Polly általános képességét használja a beszéd szövegből történő szintetizálására. Meghívja az Amazon Polly-t, hogy két műterméket generáljon minden oldalhoz:

• A hangtartalom a böngésző által lejátszható formátumban: MP3
• Egy beszédjel-fájl, amely a szöveg minden mondatánál a következőket jelzi:
  • A mondat beolvasásának ideje lejátszás közben
  • A mondat helye az oldalon

Amikor a látogató úgy dönt játszani, a böngésző lejátssza az MP3 fájlt. A hang olvasása közben a böngésző ellenőrzi az időt, megkeresi a jelölőfájlban, hogy éppen melyik mondatot olvassa el, megkeresi az oldalon, és kiemeli.

A PRTP lehetővé teszi a látogató számára, hogy különböző hangokon és nyelveken olvasson. Minden hangnak saját fájlpárra van szüksége. A PRTP neurális hangokat használ. A támogatott neurális hangok és nyelvek listáját lásd: Neurális hangok. Az Amazon Polly szabványos és neurális hangjainak teljes listáját lásd Hangok az Amazon Pollyban.

Kétféle weboldalt tekintünk: statikus és dinamikus oldalakat. Az a statikus oldal, a tartalom az oldalon belül van, és csak az oldal új verziójának közzétételekor változik. A vállalat naponta vagy hetente frissítheti az oldalt a webépítési folyamat részeként. Az ilyen típusú oldalak esetében lehetőség van az audiofájlok előgenerálására az összeállításkor, és lejátszás céljából a webszerverre helyezhetők. Ahogy a következő ábra mutatja, a forgatókönyv PRTP Pre-Gen meghívja az Amazon Polly-t a hang létrehozásához. Bemenetként magát a HTML oldalt és opcionálisan egy konfigurációs fájlt veszi be, amely meghatározza, hogy az oldalról melyik szöveget kell kivonni (Text Extract Config). Ha a kivonat konfigurációja kimarad, a generálás előtti szkript ésszerűen választja ki az oldal törzséből kivonandó szöveget. Az Amazon Polly a fájlokat egy Amazon egyszerű tárolási szolgáltatás (Amazon S3) vödör; a szkript átmásolja őket a webszerverre. Amikor a látogató lejátssza a hangot, a böngésző közvetlenül a webszerverről tölti le az MP3-at. A kiemelésekhez egy beugró könyvtár, PRTP.js, a marks fájlt használja az olvasott szöveg kiemelésére.

A tartalma a dinamikus Az oldal a látogató interakciójára reagálva változik, így a hangot nem lehet előre generálni, hanem dinamikusan kell szintetizálni. Ahogy a következő ábra mutatja, amikor a látogató lejátssza a hangot, az oldal használja PRTP.js a hang létrehozásához az Amazon Pollyban, és kiemeli a szintetizált hangot ugyanazzal a megközelítéssel, mint a statikus oldalakon. Az AWS-szolgáltatások böngészőből való eléréséhez a látogatónak AWS-azonosítóra van szüksége. Megmutatjuk, hogyan kell használni egy Amazon Cognito identitáskészlet, hogy a látogató csak annyi hozzáférést biztosítson az Amazon Polly-hoz és az S3 vödörhöz, hogy megjelenítse a hangot.

Az Mp3 hang- és beszédjelek generálásához a Polly szolgáltatásnak kétszer kell szintetizálnia ugyanazt a bemenetet. Utal Amazon Polly árképzési oldal hogy megértsük a költségvonzatokat. Az előgenerálás költséget takarít meg, mivel a szintézis a felépítési időben történik, nem pedig az egyes látogatói interakciók esetén.

A bejegyzéshez mellékelt kód nyílt forráskódú tárhelyként érhető el a webhelyen GitHub.

A megoldás felfedezéséhez az alábbi lépéseket követjük:

1. Állítsa be az erőforrásokat, beleértve a generálás előtti build szervert, az S3 tárolót, a webszervert és az Amazon Cognito identitást.
2. Futtassa a statikus generálás előtti összeállítást, és tesztelje a statikus oldalakat.
3. Tesztelje a dinamikus oldalakat.

Előfeltételek

A példa futtatásához szüksége van egy AWS-fiók az Amazon Polly, az Amazon S3, az Amazon Cognito és (demó célokra) használatának engedéllyel AWS Cloud9.

Erőforrások biztosítása

Megosztunk egy AWS felhőképződés sablon, amellyel fiókjában önálló bemutatókörnyezetet hozhat létre, amely segít követni a bejegyzést. Ha inkább saját környezetében szeretné beállítani a PRTP-t, tekintse meg a következő utasításokat README.md.

A demókörnyezet CloudFormation használatával történő létrehozásához először töltse le a CloudFormation sablon. Ezután hajtsa végre a következő lépéseket:

1. Az AWS CloudFormation konzolon válassza a lehetőséget Verem létrehozása.
2. A pop-art design, négy időzóna kijelzése egyszerre és méretének arányai azok az érvek, amelyek a NeXtime Time Zones-t kiváló választássá teszik. Válassza a Új erőforrásokkal (standard).
3. választ Tölts fel egy sablonfájlt.
4. A pop-art design, négy időzóna kijelzése egyszerre és méretének arányai azok az érvek, amelyek a NeXtime Time Zones-t kiváló választássá teszik. Válassza a Válassz fájlt a letöltött sablon helyi példányának feltöltéséhez. A fájl neve prtp.yml.
5. A pop-art design, négy időzóna kijelzése egyszerre és méretének arányai azok az érvek, amelyek a NeXtime Time Zones-t kiváló választássá teszik. Válassza a Következő.
6. Adja meg a választott verem nevét. Később újra beírja ezt a helyett <StackName>.
7. Az alapértelmezett értékeket megtarthatja a paraméterek szakasz.
8. A pop-art design, négy időzóna kijelzése egyszerre és méretének arányai azok az érvek, amelyek a NeXtime Time Zones-t kiváló választássá teszik. Válassza a Következő.
9. Folytassa a többi szakaszon keresztül.
10. Olvassa el és jelölje be a jelölőnégyzeteket a Képességek szakasz.
11. A pop-art design, négy időzóna kijelzése egyszerre és méretének arányai azok az érvek, amelyek a NeXtime Time Zones-t kiváló választássá teszik. Válassza a Verem létrehozása.
12. Amikor a verem elkészült, keresse meg az értékét BucketName a veremkimenetekben.

Javasoljuk, hogy tekintse át a verem biztonsági csapatával, mielőtt éles környezetben használná.

Állítsa be a webszervert és a generálás előtti szervert egy AWS Cloud9 IDE-ben

Ezután az AWS Cloud9 konzolon keresse meg a környezetet PRTPDemoCloud9 a CloudFormation verem által létrehozott. Választ Nyissa meg az IDE-t az AWS Cloud9 környezet megnyitásához. Nyisson meg egy terminálablakot, és futtassa a következő parancsokat, amelyek klónozzák a PRTP-kódot, beállítják a generálás előtti függőségeket, és elindítanak egy webszervert a teszteléshez:

#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> 

A <StackName>, használja azt a nevet, amelyet a CloudFormation veremnek adott. Mert <IngressCIDR>, adja meg a webszerver eléréséhez engedélyezett IP-címek tartományát. A helyi gép böngészőjéhez való hozzáférés korlátozásához keresse meg IP-címét a segítségével https://whatismyipaddress.com/ és hozzáfűzi /32 a tartomány megadásához. Például, ha az Ön IP-címe 10.2.3.4, use 10.2.3.4/32. A kiszolgáló a 8080-as porton figyel. A kimenetben megjelenik az a nyilvános IP-cím, amelyen a szerver figyel. Például:

Public IP is

3.92.33.223

Statikus oldalak tesztelése

Böngészőjében navigáljon ide PRTPStaticDefault.html. (Ha a demót használja, akkor az URL http://<cloud9host>:8080/web/PRTPStaticDefault.html, Ahol <cloud9host> az a nyilvános IP-cím, amelyet az IDE beállítása során fedezett fel.) Válassza ki játszani az audiovezérlőn a tetején. Hallgassa meg a hanganyagot, és nézze meg a legfontosabb eseményeket. Fedezze fel a vezérlést a sebesség megváltoztatásával, a hang megváltoztatásával, a szüneteltetéssel, a gyors előre- és visszatekeréssel. A következő képernyőkép az oldalt mutatja; a „Rejtett bekezdés átugrása” szöveg ki van emelve, mert éppen olvasás alatt áll.

Próbáld meg ugyanezt PRTPStaticConfig.html és a PRTPStaticCustom.html. Az eredmények hasonlóak. Például mindhárman elolvasták a macska fényképének alternatív szövegét („Véletlenszerű macska képe”). Mindhárman ÉK-et, ÉNy-t, DK-t és DNy-t teljes szavakként olvassák („északkelet”, „északnyugat”, „délkelet”, „délnyugat”), kihasználva az Amazon Polly lexikonokat.

Figyelje meg a hangzás főbb különbségeit:

• PRTPStaticDefault.html beolvassa a teljes szöveget az oldal törzsében, beleértve az alján található összefoglaló részt is: „Az Ön gondolatai egy szóban”, „Lekérdezés beküldése”, „Utolsó frissítés: 1. április 2020.” és „Kérdések a fejlesztői csapatnak”. PRTPStaticConfig.html és a PRTPStaticCustom.html ezeket ne olvasd el, mert kifejezetten kizárják a beszédszintézisből a tördelést.
• PRTPStaticCustom.html olvassa a QB Bestseller táblázat különbözik a többitől. Csak az első három sort olvassa be, és minden sor sorszámát olvassa be. Minden sorhoz megismétli az oszlopokat. PRTPStaticCustom.html egyéni transzformációt használ a táblázat kiolvasásának testreszabásához. A többi oldal az alapértelmezett táblázat-megjelenítést használja.
• PRTPStaticCustom.html a „Tom Brady”-t hangosabban olvassa, mint a szöveg többi része. A beszédszintézis jelölőnyelvet (SSML) használja. prosody címkét Tom Brady olvasásának személyre szabásához. A többi oldal nem szabott így.
• PRTPStaticCustom.html, egy egyedi átalakításnak köszönhetően ÉNy, DNy, ÉK, DK sorrendben olvassa be a fő lapkákat; azaz „Mai cikkek”, „A nap idézete”, „A nap fotója”, „A nap viccei” felirat olvasható. A többi oldal abban a sorrendben olvasható, ahogy a csempék a természetes ÉNy, ÉK, DNy, DK sorrendben jelennek meg, ahogy a HTML-ben is megjelennek: „Mai cikkek”, „A nap fotója”, „A nap idézete”, „A nap viccei Nap."

Nézzük meg jobban, hogyan jön létre a hang, és hogyan emeli ki az oldal a szöveget.

Statikus előgenerátor

GitHub-tárhelyünk előre generált hangfájlokat tartalmaz a PRPTStatic oldalakat, de ha saját maga szeretné előállítani őket, akkor az AWS Cloud9 IDE bash shelljéből futtassa a következő parancsokat:

# 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

Most pedig nézzük meg, hogyan működnek ezek a szkriptek.

Alapértelmezett eset

Kezdjük 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

A szkript a Python program futtatásával kezdődik FixHTML.py a forrás HTML-fájl elkészítéséhez PRTPStaticDefault.html jól formált. A fájl jól formázott verzióját írja ide example/tmp_wff.html. Ez a lépés két okból is kulcsfontosságú:

• A legtöbb forrás-HTML nem jól formált. Ez a lépés javítja a forrás-HTML-t, hogy jól formázott legyen. Például sok HTML-oldal nem záródik be P elemeket. Ez a lépés bezárja őket.
• Nyomon követjük, hogy a HTML oldalon hol találunk szöveget. A helyeket ugyanazzal a dokumentumobjektum-modell (DOM) szerkezettel kell követnünk, amelyet a böngésző használ. Például a böngésző automatikusan hozzáadja a TBODY egy TABLE. A Python program ugyanazokat a jól formált javításokat követi, mint a böngésző.

gen_ssml.sh bemenetként veszi a jól formázott HTML-t, alkalmaz rá egy XML stíluslap-transzformációt (XSLT) és egy SSML-fájlt ad ki. (Az SSML az Amazon Polly nyelve, amellyel szabályozható a hang szövegből történő megjelenítése.) A jelenlegi példában a bemenet example/tmp_wff.html. A kimenet az example/tmp.ssml. Az átalakítás feladata annak eldöntése, hogy milyen szöveget kíván kivonni a HTML-ből, és továbbítani az Amazon Pollyhoz. generic.xslt egy ésszerű alapértelmezett XSLT átalakítás a legtöbb weboldalhoz. A következő példakódrészletben kizárja a hangvezérlést, a HTML-fejlécet, valamint a HTML-elemeket, mint pl. script és a form. Kizárja a rejtett attribútummal rendelkező elemeket is. Olyan elemeket tartalmaz, amelyek jellemzően szöveget tartalmaznak, mint pl P, H1és SPAN. Ezeknél egy jelet, beleértve az elem teljes XPath kifejezését, és az elem értékét is megjeleníti.

<!-- 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>

A következő egy részlet a megjelenített SSML-ből. Ezt az Amazon Polly bemenetként táplálja. Figyeljük meg például, hogy a „Rejtett bekezdés átugrása” szöveget kell olvasni a hanganyagban, és ezt egy jelzéssel társítjuk, amely azt jelzi, hogy ez a szöveg az oldalon az XPath kifejezés által megadott helyen található. /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>

A hang létrehozásához az Amazon Pollyban a szkriptet hívjuk run_polly.sh. Ez futtatja a AWS parancssori interfész (AWS CLI) parancsot aws polly start-speech-synthesis-task kétszer: egyszer az MP3 hang létrehozásához, és még egyszer a jelfájl létrehozásához. Mivel a generálás aszinkron, a szkript addig lekérdezi, amíg meg nem találja a kimenetet a megadott S3 tárolóban. Amikor megtalálja a kimenetet, letölti a build szerverre, és átmásolja a fájlokat a web/polly mappát. Az alábbi lista a webmappákat tartalmazza:

• 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

Minden oldalnak saját hangspecifikus MP3-készlete és jelölései vannak. Ezek a fájlok az előre generált fájlok. Az oldalnak nem kell az Amazon Polly-t meghívnia futás közben; a fájlok a web build részét képezik.

Konfig vezérelt tok

Ezután fontolja meg 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

A szkript hasonló az alapértelmezett esetben használt szkripthez, de a félkövér vonalak jelzik a fő különbséget. A mi megközelítésünk konfigurációvezérelt. Az oldalról kinyerendő tartalmat személyre szabjuk úgy, hogy megadjuk, mit kell kinyerni a konfiguráción keresztül, nem a kódot. Különösen a JSON fájlt használjuk transform_config.json, amely azt határozza meg, hogy a beillesztendő tartalom az azonosítókkal rendelkező elemek legyenek title, main, maintableés qbtable. Az azonosítóval rendelkező elem wrapup ki kell zárni. Lásd a következő kódot:

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

A Python programot futtatjuk ModGenericXSLT.py módosítani generic.xslt, amelyet az alapértelmezett esetben használunk az általunk megadott befoglalások és kizárások használatához transform_config.json. A program az eredményeket egy ideiglenes fájlba írja (example/tmp.xslt), amelyre átmegy gen_ssml.sh mint az XSLT transzformációja.

Ez egy alacsony kódú opció. A webes kiadónak nem kell tudnia, hogyan kell XSLT-t írni. De meg kell érteniük a HTML-oldal szerkezetét és a fő szervezőelemeiben használt azonosítókat.

Testreszabási eset

Végül fontolja meg 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

Ez a szkript majdnem teljesen megegyezik az alapértelmezett szkripttel, csak a saját XSLT-jét használja.example/custom.xslt– az általános XSLT helyett. A következő egy részlet az XSLT-ből:

<!-- 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>

Ha részletesen szeretné tanulmányozni a kódot, tekintse meg a szkripteket és programokat a GitHub-tárban.

Böngésző beállítása és kiemelések

A statikus oldalak tartalmaznak egy HTML5 hangvezérlőt, amely hangforrásként az Amazon Polly által generált és a webszerveren található MP3 fájlt használja:

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

A betöltéskor az oldal betölti az Amazon Polly által generált jelfájlt is. Ez a PRTP.js fájl, amelyet a HTML oldal tartalmaz. A következő egy részlet a következőhöz tartozó marks fájlból 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”}

Hanglejátszás közben van egy audio időzítő eseménykezelő PRTP.js amely ellenőrzi a hang aktuális idejét, megkeresi a kiemelendő szöveget, megtalálja annak helyét az oldalon, és kiemeli. A kiemelendő szöveg egy típusú bejegyzés sentence a marks fájlban. A hely az XPath kifejezés a mondatot megelőző SSML típusú bejegyzés name attribútumában. Például, ha az idő 18400, a pontfájl szerint a kiemelendő mondat a „Rejtett bekezdés átugrása”, amely 18334-nél kezdődik. A hely az SSML-bejegyzés 17667 időpontban: /html/body[1]/div[2]/ul[1]/li[1].

Tesztelje a dinamikus oldalakat

Az oldal PRTPDynamic.html bemutatja a dinamikus hangvisszaolvasást alapértelmezett, konfigurációvezérelt és egyéni hangkivonási megközelítésekkel.

Alapértelmezett eset

Böngészőjében navigáljon ide PRTPDynamic.html. Az oldalnak egy lekérdezési paramétere van, dynOption, amely értékeket fogad el default, configés custom. Alapértelmezés szerint default, tehát ebben az esetben kihagyhatja. Az oldal két részből áll, dinamikus tartalommal:

• Legfrissebb cikkek - Gyakran változik a nap folyamán
• A görög filozófusok dátum szerint keresnek – Lehetővé teszi a látogató számára, hogy dátum szerint keressen görög filozófusokat, és táblázatban jeleníti meg az eredményeket

Hozzon létre néhány tartalmat a görög filozófus szakaszban a -800 és 0 közötti dátumtartomány megadásával, ahogy a példában is látható. Akkor válassz Találjon.

Most válassza le a hangot játszani az audiovezérlőben.

A színfalak mögött az oldal a következő kódot futtatja a hang megjelenítéséhez és lejátszásához:

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

Először a függvényt hívja meg buildSSMLFromDefault in PRTP.js hogy a szöveg nagy részét kivonjuk a HTML-oldal törzséből. Ez a függvény végigjárja a DOM-fát, szöveget keresve az olyan közös elemekben, mint pl p, h1, pre, spanés td. Figyelmen kívül hagyja az olyan elemek szövegét, amelyek általában nem tartalmaznak felolvasandó szöveget, mint pl audio, optionés script. SSML jelölést épít az Amazon Polly beviteléhez. A következő részlet az első sor kivonatát mutatja be a philosopher asztal:

<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>

A chooseRenderAudio funkciója PRTP.js Az AWS SDK inicializálásával kezdődik az Amazon Cognito, az Amazon S3 és az Amazon Polly számára. Ez az inicializálás csak egyszer történik meg. Ha chooseRenderAudio ismét meghívódik, mert az oldal tartalma megváltozott, az inicializálás kimarad. Lásd a következő kódot:

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 hangot generál az Amazon Pollyból. A generálás szinkron a kis SSML-bemeneteknél, és aszinkron (az S3-tárolóba küldött kimenettel) a nagy (6,000 karakternél hosszabb) SSML-bemeneteknél. Szinkron esetben megkérjük az Amazon Polly-t, hogy adja meg az MP3 fájlt egy előre aláírt URL használatával. Amikor a szintetizált kimenet készen áll, beállítjuk a src az audiovezérlő attribútuma az URL-hez, és töltse be a vezérlőt. Ezután lekérjük a marks fájlt, és ugyanúgy betöltjük, mint a statikus esetben. Lásd a következő kódot:

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

Konfig vezérelt tok

Böngészőjében navigáljon ide PRTPDynamic.html?dynOption=config. Játssza le a hangot. A hanglejátszás hasonló az alapértelmezett esethez, de vannak kisebb eltérések. Különösen bizonyos tartalmak kimaradnak.

A színfalak mögött, amikor a config opciót, az oldal másképp bontja ki a tartalmat, mint az alapértelmezett esetben. Alapértelmezésben az oldal használja buildSSMLFromDefault. Konfig-vezérelt esetben az oldal meghatározza a felvenni és kizárni kívánt szakaszokat:

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

A buildSSMLFromConfig -ban definiált függvény PRTP.js, végigjárja a DOM-fát minden olyan szakaszban, amelynek az azonosítója meg van adva inclusions. Mindegyikből kivonja a tartalmat, és a megadott sorrendben egyesíti őket, hogy egy SSML dokumentumot alkossanak. alatt meghatározott szakaszokat nem tartalmazza exclusions. Minden szakaszból ugyanúgy kinyeri a tartalmat buildSSMLFromDefault kivonja a tartalmat az oldal törzséből.

Testreszabási eset

Böngészőjében navigáljon ide PRTPDynamic.html?dynOption=custom. Játssza le a hangot. Három észrevehető különbség van. Jegyezzük meg ezeket, és vegyük figyelembe a színfalak mögött futó egyéni kódot:

• A fő lapkákat ÉNy, DNy, ÉK, DK sorrendben olvassa be. Az egyéni kód a cellablokkok mindegyikét innen kapja maintable és hozzáadja őket az SSML-hez ÉNy, DNy, ÉK, DK sorrendben:

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” hangosan szólal meg. Az egyéni kód „Tom Brady” szöveget helyez az SSML-be prosody címke:

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

• Csak az első három sor olvasható a hátvédtáblázatban. Minden sorhoz beolvassa az oszlopfejléceket. Ellenőrizze a kódot a GitHub-tárban, hogy megtudja, hogyan valósult meg ez.

Tisztítsuk meg

A jövőbeni költségek elkerülése érdekében törölje a CloudFormation-vermet.

Következtetés

Ebben a bejegyzésben egy nagy értékű üzleti probléma technikai megoldását mutattuk be: hogyan lehet az Amazon Polly segítségével elolvasni egy weboldal tartalmát, és kiemelni a tartalmat olvasás közben. Ezt statikus és dinamikus oldalakon is megmutattuk. A tartalom kinyeréséhez az oldalról DOM-bejárást és XSLT-t használtunk. A kiemelés megkönnyítése érdekében az Amazon Polly beszédjelek funkcióját használtuk.

Tudjon meg többet az Amazon Pollyról, ha felkeresi szolgáltatási oldal.

Nyugodtan tegyen fel kérdéseket a megjegyzésekben.

A szerzőkről

Mike Havey az AWS megoldástervezője, több mint 25 éves tapasztalattal a vállalati alkalmazások építésében. Mike két könyv és számos cikk szerzője. Látogassa meg az Amazonját szerzői oldal többet olvasni.

Vineet Kachhawaha az AWS megoldástervezője, aki jártas a gépi tanulás terén. Feladata, hogy segítsen az ügyfeleknek skálázható, biztonságos és költséghatékony munkaterhelések kialakításában az AWS-en.