Διαβάστε ιστοσελίδες και επισημάνετε περιεχόμενο χρησιμοποιώντας το Amazon Polly

Σε αυτήν την ανάρτηση, δείχνουμε πώς να το χρησιμοποιήσετε Amazon Polly—μια κορυφαία υπηρεσία cloud που μετατρέπει το κείμενο σε ρεαλιστική ομιλία—για την ανάγνωση του περιεχομένου μιας ιστοσελίδας και την επισήμανση του περιεχομένου καθώς διαβάζεται. Η προσθήκη αναπαραγωγής ήχου σε μια ιστοσελίδα βελτιώνει την προσβασιμότητα και την εμπειρία των επισκεπτών της σελίδας. Το περιεχόμενο βελτιωμένου ήχου είναι πιο εντυπωσιακό και αξιομνημόνευτο, προσελκύει περισσότερη επισκεψιμότητα στη σελίδα και αξιοποιεί τη δύναμη των επισκεπτών που ξοδεύουν. Βελτιώνει επίσης το εμπορικό σήμα της εταιρείας ή του οργανισμού που δημοσιεύει τη σελίδα. Η τεχνολογία μετατροπής κειμένου σε ομιλία καθιστά εφικτά αυτά τα επιχειρηματικά οφέλη. Επιταχύνουμε αυτό το ταξίδι δείχνοντας πώς να επιτύχετε αυτόν τον στόχο χρησιμοποιώντας το Amazon Polly.

Αυτή η δυνατότητα βελτιώνει την προσβασιμότητα για επισκέπτες με αναπηρίες και θα μπορούσε να υιοθετηθεί ως μέρος της στρατηγικής προσβασιμότητας του οργανισμού σας. Εξίσου σημαντικό, βελτιώνει την εμπειρία της σελίδας για επισκέπτες χωρίς αναπηρία. Και οι δύο ομάδες έχουν σημαντική ισχύ δαπανών και ξοδεύουν πιο ελεύθερα από σελίδες που χρησιμοποιούν βελτίωση ήχου για να τραβήξουν την προσοχή τους.

Επισκόπηση της λύσης

PollyReadsThePage (PRTP)—όπως αναφερόμαστε στη λύση—επιτρέπει σε έναν εκδότη ιστοσελίδας να αφήσει ένα στοιχείο ελέγχου ήχου στην ιστοσελίδα του. Όταν ο επισκέπτης επιλέξει Δοκιμάστε να παίξετε στο στοιχείο ελέγχου, το στοιχείο ελέγχου διαβάζει τη σελίδα και επισημαίνει το περιεχόμενο. Το PRTP χρησιμοποιεί τη γενική ικανότητα του Amazon Polly για τη σύνθεση ομιλίας από κείμενο. Επικαλείται το Amazon Polly για να δημιουργήσει δύο τεχνουργήματα για κάθε σελίδα:

• Το ηχητικό περιεχόμενο σε μορφή που μπορεί να αναπαραχθεί από το πρόγραμμα περιήγησης: MP3
• Ένα αρχείο σημαδιών ομιλίας που υποδεικνύει για κάθε πρόταση κειμένου:
  • Ο χρόνος κατά την αναπαραγωγή που διαβάζεται η πρόταση
  • Η θέση στη σελίδα εμφανίζεται η πρόταση

Όταν ο επισκέπτης επιλέξει Δοκιμάστε να παίξετε, το πρόγραμμα περιήγησης αναπαράγει το αρχείο MP3. Καθώς διαβάζεται ο ήχος, το πρόγραμμα περιήγησης ελέγχει την ώρα, βρίσκει στο αρχείο σημάτων ποια πρόταση να διαβάσει εκείνη τη στιγμή, την εντοπίζει στη σελίδα και την επισημαίνει.

Το PRTP επιτρέπει στον επισκέπτη να διαβάζει σε διαφορετικές φωνές και γλώσσες. Κάθε φωνή απαιτεί το δικό της ζευγάρι αρχείων. Το PRTP χρησιμοποιεί νευρικές φωνές. Για μια λίστα υποστηριζόμενων νευρικών φωνών και γλωσσών, βλ Νευρωνικές φωνές. Για μια πλήρη λίστα τυπικών και νευρικών φωνών στο Amazon Polly, βλ Φωνές στο Amazon Polly.

Θεωρούμε δύο τύπους ιστοσελίδων: στατικές και δυναμικές σελίδες. Σε ένα στατικός σελίδα, το περιεχόμενο περιέχεται στη σελίδα και αλλάζει μόνο όταν δημοσιεύεται μια νέα έκδοση της σελίδας. Η εταιρεία ενδέχεται να ενημερώνει τη σελίδα καθημερινά ή εβδομαδιαία ως μέρος της διαδικασίας κατασκευής ιστού. Για αυτόν τον τύπο σελίδας, είναι δυνατή η προ-δημιουργία των αρχείων ήχου κατά το χρόνο δημιουργίας και η τοποθέτηση τους στον διακομιστή web για αναπαραγωγή. Όπως δείχνει το παρακάτω σχήμα, το σενάριο PRTP Pre-Gen επικαλείται το Amazon Polly για να δημιουργήσει τον ήχο. Λαμβάνει ως είσοδο την ίδια τη σελίδα HTML και, προαιρετικά, ένα αρχείο διαμόρφωσης που καθορίζει ποιο κείμενο από τη σελίδα θα εξαχθεί (Text Extract Config). Εάν η διαμόρφωση εξαγωγής παραλειφθεί, το σενάριο προγενέστερης παραγωγής κάνει μια λογική επιλογή κειμένου που θα εξαχθεί από το σώμα της σελίδας. Το Amazon Polly εξάγει τα αρχεία σε ένα Απλή υπηρεσία αποθήκευσης Amazon (Amazon S3) κάδος? το σενάριο τα αντιγράφει στον διακομιστή ιστού σας. Όταν ο επισκέπτης αναπαράγει τον ήχο, το πρόγραμμα περιήγησης κατεβάζει το MP3 απευθείας από τον διακομιστή web. Για τις καλύτερες στιγμές, μια αναπτυσσόμενη βιβλιοθήκη, PRTP.js, χρησιμοποιεί το αρχείο σημάτων για να επισημάνει το κείμενο που διαβάζεται.

Το περιεχόμενο του α δυναμικός Η σελίδα αλλάζει ως απόκριση στην αλληλεπίδραση με τον επισκέπτη, επομένως ο ήχος δεν μπορεί να δημιουργηθεί εκ των προτέρων, αλλά πρέπει να συντεθεί δυναμικά. Όπως δείχνει το παρακάτω σχήμα, όταν ο επισκέπτης παίζει τον ήχο, η σελίδα χρησιμοποιεί PRTP.js για τη δημιουργία του ήχου στο Amazon Polly και επισημαίνει τον συνθετικό ήχο χρησιμοποιώντας την ίδια προσέγγιση όπως και με τις στατικές σελίδες. Για να αποκτήσει πρόσβαση στις υπηρεσίες AWS από το πρόγραμμα περιήγησης, ο επισκέπτης χρειάζεται μια ταυτότητα AWS. Δείχνουμε πώς να χρησιμοποιήσετε ένα Amazon Cognito πισίνα ταυτότητας για να επιτρέψει στον επισκέπτη αρκετή πρόσβαση στο Amazon Polly και στον κάδο S3 για την απόδοση του ήχου.

Η δημιουργία σημάτων ήχου και ομιλίας Mp3 απαιτεί από την υπηρεσία Polly να συνθέσει την ίδια είσοδο δύο φορές. Αναφέρομαι στο Σελίδα τιμολόγησης Amazon Polly για την κατανόηση των επιπτώσεων του κόστους. Η προ-παραγωγή εξοικονομεί κόστος επειδή η σύνθεση εκτελείται κατά το χρόνο κατασκευής και όχι κατ' απαίτηση για κάθε αλληλεπίδραση επισκέπτη.

Ο κώδικας που συνοδεύει αυτήν την ανάρτηση είναι διαθέσιμος ως αποθετήριο ανοιχτού κώδικα στο GitHub.

Για να εξερευνήσουμε τη λύση, ακολουθούμε τα εξής βήματα:

1. Ρυθμίστε τους πόρους, συμπεριλαμβανομένου του διακομιστή δημιουργίας προγενέστερης γενιάς, του κάδου S3, του διακομιστή ιστού και της ταυτότητας Amazon Cognito.
2. Εκτελέστε το static pre-gen build και δοκιμάστε στατικές σελίδες.
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 στις εξόδους στοίβας.

Σας ενθαρρύνουμε να ελέγξετε τη στοίβα με την ομάδα ασφαλείας σας πριν τη χρησιμοποιήσετε σε περιβάλλον παραγωγής.

Ρυθμίστε τον διακομιστή web και τον διακομιστή προγενέστερης γενιάς σε ένα 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 που επιτρέπεται να έχουν πρόσβαση στον διακομιστή web. Για να περιορίσετε την πρόσβαση στο πρόγραμμα περιήγησης στον τοπικό σας υπολογιστή, βρείτε τη διεύθυνση 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.) Επιλέξτε Δοκιμάστε να παίξετε στο χειριστήριο ήχου στο επάνω μέρος. Ακούστε τον ήχο και παρακολουθήστε τα highlights. Εξερευνήστε τον έλεγχο αλλάζοντας ταχύτητες, αλλάζοντας φωνές, παύση, γρήγορη προώθηση και επαναφορά. Το παρακάτω στιγμιότυπο οθόνης δείχνει τη σελίδα. το κείμενο "Παράβλεψη κρυφής παραγράφου" επισημαίνεται επειδή αυτή τη στιγμή διαβάζεται.

Δοκιμάστε το ίδιο για PRTPStaticConfig.html και PRTPStaticCustom.html. Τα αποτελέσματα είναι παρόμοια. Για παράδειγμα, και οι τρεις διάβασαν το εναλλακτικό κείμενο για τη φωτογραφία της γάτας ("Τυχαία εικόνα μιας γάτας"). Και οι τρεις διαβάζουν ΒΑ, ΒΔ, ΝΑ και ΝΔ ως πλήρεις λέξεις ("βορειοανατολικά", "βορειοδυτικά", "νοτιοανατολικά", "νοτιοδυτικά"), εκμεταλλευόμενοι τα λεξικά του Amazon Polly.

Παρατηρήστε τις κύριες διαφορές στον ήχο:

• PRTPStaticDefault.html διαβάζει όλο το κείμενο στο σώμα της σελίδας, συμπεριλαμβανομένου του ανακεφαλαιωτικού τμήματος στο κάτω μέρος με "Οι σκέψεις σας με μια λέξη", "Υποβολή ερωτήματος", "Τελευταία ενημέρωση 1 Απριλίου 2020" και "Ερωτήσεις για την ομάδα προγραμματιστών". PRTPStaticConfig.html και PRTPStaticCustom.html μην τα διαβάζετε γιατί αποκλείουν ρητά την αναδίπλωση από τη σύνθεση ομιλίας.
• PRTPStaticCustom.html διαβάσει το QB Best Sellers τραπέζι διαφορετικά από τα άλλα. Διαβάζει μόνο τις τρεις πρώτες σειρές και διαβάζει τον αριθμό σειράς για κάθε σειρά. Επαναλαμβάνει τις στήλες για κάθε γραμμή. PRTPStaticCustom.html χρησιμοποιεί έναν προσαρμοσμένο μετασχηματισμό για να προσαρμόσει την ανάγνωση του πίνακα. Οι άλλες σελίδες χρησιμοποιούν προεπιλεγμένη απόδοση πίνακα.
• PRTPStaticCustom.html διαβάζει το "Tom Brady" σε μεγαλύτερη ένταση από το υπόλοιπο κείμενο. Χρησιμοποιεί τη γλώσσα σήμανσης σύνθεσης ομιλίας (SSML) prosody tag για να προσαρμόσετε την ανάγνωση του Tom Brady. Οι άλλες σελίδες δεν προσαρμόζονται με αυτόν τον τρόπο.
• PRTPStaticCustom.html, χάρη σε έναν προσαρμοσμένο μετασχηματισμό, διαβάζει τα κύρια πλακίδια με σειρά ΒΔ, ΝΔ, ΒΑ, ΝΑ. Δηλαδή, διαβάζει «Τα σημερινά άρθρα», «Απόσπασμα της ημέρας», «Φωτογραφία της ημέρας», «Ανέκδοτα της ημέρας». Οι άλλες σελίδες διαβάζονται με τη σειρά που εμφανίζονται τα πλακίδια με τη φυσική σειρά ΒΔ, ΒΑ, ΝΔ, ΝΑ που εμφανίζονται στην HTML: "Τα σημερινά άρθρα", "Φωτογραφία της ημέρας", "Απόσπασμα της ημέρας", "Ανέκδοτα του Ημέρα."

Ας εμβαθύνουμε στο πώς δημιουργείται ο ήχος και πώς η σελίδα επισημαίνει το κείμενο.

Στατική προγεννήτρια

Το αποθετήριο GitHub περιλαμβάνει προ-δημιουργημένα αρχεία ήχου για το PRPTStatic σελίδες, αλλά εάν θέλετε να τις δημιουργήσετε μόνοι σας, από το κέλυφος bash στο AWS Cloud9 IDE, εκτελέστε τις ακόλουθες εντολές:

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

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

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

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

Τώρα ας δούμε πώς λειτουργούν αυτά τα σενάρια.

Προεπιλεγμένη περίπτωση

Αρχίζουμε με gen_default.sh:

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

Το σενάριο ξεκινά εκτελώντας το πρόγραμμα Python FixHTML.py για να δημιουργήσετε το αρχείο προέλευσης HTML PRTPStaticDefault.html καλοσχηματισμένος. Γράφει την καλοσχηματισμένη έκδοση του αρχείου στο example/tmp_wff.html. Αυτό το βήμα είναι κρίσιμο για δύο λόγους:

• Τα περισσότερα HTML προέλευσης δεν είναι καλά διαμορφωμένα. Αυτό το βήμα επιδιορθώνει το HTML προέλευσης ώστε να είναι καλά διαμορφωμένο. Για παράδειγμα, πολλές σελίδες HTML δεν κλείνουν P στοιχεία. Αυτό το βήμα τους κλείνει.
• Παρακολουθούμε πού βρίσκουμε κείμενο στη σελίδα HTML. Πρέπει να παρακολουθούμε τοποθεσίες χρησιμοποιώντας την ίδια δομή μοντέλου αντικειμένου εγγράφου (DOM) που χρησιμοποιεί το πρόγραμμα περιήγησης. Για παράδειγμα, το πρόγραμμα περιήγησης προσθέτει αυτόματα ένα 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, Matthew.mp3, Matthew.marks
• polly/PRTPStaticCustom/Joanna.mp3, Joanna.marks, Matthew.mp3, Matthew.marks

Κάθε σελίδα έχει το δικό της σύνολο από MP3 ειδικά για τη φωνή και επισημαίνει αρχεία. Αυτά τα αρχεία είναι τα προ-δημιουργημένα αρχεία. Η σελίδα δεν χρειάζεται να επικαλείται το Amazon Polly κατά το χρόνο εκτέλεσης. τα αρχεία είναι μέρος της κατασκευής ιστού.

Θήκη που βασίζεται σε ρυθμίσεις

Στη συνέχεια, σκεφτείτε gen_config.sh:

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

Το σενάριο είναι παρόμοιο με το σενάριο στην προεπιλεγμένη περίπτωση, αλλά οι έντονες γραμμές υποδεικνύουν την κύρια διαφορά. Η προσέγγισή μας βασίζεται στη διαμόρφωση. Προσαρμόζουμε το περιεχόμενο που θα εξαχθεί από τη σελίδα, καθορίζοντας τι θα εξαχθεί μέσω διαμόρφωσης και όχι μέσω κώδικα. Συγκεκριμένα, χρησιμοποιούμε το αρχείο JSON transform_config.json, το οποίο προσδιορίζει ότι το περιεχόμενο που θα συμπεριληφθεί είναι τα στοιχεία με αναγνωριστικά title, main, maintable, να qbtable. Το στοιχείο με ID wrapup πρέπει να εξαιρεθούν. Δείτε τον παρακάτω κώδικα:

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

Εκτελούμε το πρόγραμμα Python ModGenericXSLT.py να τροποποιήσει generic.xslt, που χρησιμοποιείται στην προεπιλεγμένη περίπτωση, για να χρησιμοποιήσει τις συμπεριλήψεις και τις εξαιρέσεις που καθορίζουμε transform_config.json. Το πρόγραμμα εγγράφει τα αποτελέσματα σε ένα αρχείο temp (example/tmp.xslt), στο οποίο περνάει gen_ssml.sh καθώς ο μετασχηματισμός XSLT του.

Αυτή είναι μια επιλογή χαμηλού κώδικα. Ο εκδότης Ιστού δεν χρειάζεται να ξέρει πώς να γράφει XSLT. Πρέπει όμως να κατανοήσουν τη δομή της σελίδας HTML και τα αναγνωριστικά που χρησιμοποιούνται στα κύρια οργανωτικά στοιχεία της.

Θήκη προσαρμογής

Τέλος, σκεφτείτε gen_custom.sh:

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

Αυτό το σενάριο είναι σχεδόν πανομοιότυπο με το προεπιλεγμένο σενάριο, εκτός από το ότι χρησιμοποιεί το δικό του XSLT—example/custom.xslt— αντί για το γενικό XSLT. Το παρακάτω είναι ένα απόσπασμα του XSLT:

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

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

Εάν θέλετε να μελετήσετε τον κώδικα λεπτομερώς, ανατρέξτε στα σενάρια και τα προγράμματα στο αποθετήριο GitHub.

Ρύθμιση προγράμματος περιήγησης και επισημάνσεις

Οι στατικές σελίδες περιλαμβάνουν ένα στοιχείο ελέγχου ήχου HTML5, το οποίο λαμβάνει ως πηγή ήχου το αρχείο MP3 που δημιουργείται από το Amazon Polly και βρίσκεται στον διακομιστή ιστού:

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

Κατά τη φόρτωση, η σελίδα φορτώνει επίσης το αρχείο σημάτων που δημιουργήθηκε από το Amazon Polly. Αυτό συμβαίνει στο PRTP.js αρχείο, το οποίο περιλαμβάνει η σελίδα HTML. Το παρακάτω είναι ένα απόσπασμα του αρχείου σημείων για PRTPStaticDefault:

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

Κατά την αναπαραγωγή ήχου, υπάρχει ένας χειριστής συμβάντων με χρονοδιακόπτη ήχου PRTP.js που ελέγχει την τρέχουσα ώρα του ήχου, βρίσκει το κείμενο προς επισήμανση, βρίσκει τη θέση του στη σελίδα και το επισημαίνει. Το κείμενο που θα επισημανθεί είναι μια καταχώρηση τύπου sentence στο αρχείο σημάτων. Η τοποθεσία είναι η έκφραση XPath στο χαρακτηριστικό name της καταχώρισης τύπου SSML που προηγείται της πρότασης. Για παράδειγμα, εάν η ώρα είναι 18400, σύμφωνα με το αρχείο σημείων, η πρόταση που θα επισημανθεί είναι "Παραλείπει την κρυφή παράγραφο", η οποία ξεκινά στο 18334. Η τοποθεσία είναι η καταχώρηση SSML τη στιγμή 17667: /html/body[1]/div[2]/ul[1]/li[1].

Δοκιμή δυναμικών σελίδων

Η σελίδα PRTPDynamic.html επιδεικνύει δυναμική ανάγνωση ήχου χρησιμοποιώντας προεπιλεγμένες, βασισμένες στη διαμόρφωση και προσαρμοσμένες προσεγγίσεις εξαγωγής ήχου.

Προεπιλεγμένη περίπτωση

Στο πρόγραμμα περιήγησής σας, μεταβείτε στο PRTPDynamic.html. Η σελίδα έχει μία παράμετρο ερωτήματος, dynOption, που δέχεται αξίες default, config, να custom. Από προεπιλογή default, οπότε μπορείτε να το παραλείψετε σε αυτήν την περίπτωση. Η σελίδα έχει δύο ενότητες με δυναμικό περιεχόμενο:

• Πρόσφατα Άρθρα – Αλλάζει συχνά κατά τη διάρκεια της ημέρας
• Έλληνες Φιλόσοφοι Αναζήτηση κατά Ημερομηνία – Επιτρέπει στον επισκέπτη να αναζητήσει Έλληνες φιλοσόφους κατά ημερομηνία και εμφανίζει τα αποτελέσματα σε πίνακα

Δημιουργήστε κάποιο περιεχόμενο στο Έλληνας φιλόσοφος εισάγοντας ένα εύρος ημερομηνιών από -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. Παίξτε τον ήχο. Υπάρχουν τρεις εμφανείς διαφορές. Ας τα σημειώσουμε αυτά και ας εξετάσουμε τον προσαρμοσμένο κώδικα που εκτελείται στα παρασκήνια:

• Διαβάζει τα κύρια πλακίδια με σειρά ΒΔ, ΝΔ, ΒΑ, ΝΑ. Ο προσαρμοσμένος κώδικας λαμβάνει καθένα από αυτά τα μπλοκ κελιών από maintable και τα προσθέτει στο 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, []));

• Το "Tom Brady" ακούγεται δυνατά. Ο προσαρμοσμένος κώδικας τοποθετεί το κείμενο "Tom Brady" μέσα σε ένα SSML prosody ετικέτα:

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

• Διαβάζει μόνο τις τρεις πρώτες σειρές του πίνακα στρατηγών. Διαβάζει τις κεφαλίδες στηλών για κάθε γραμμή. Ελέγξτε τον κώδικα στο αποθετήριο GitHub για να ανακαλύψετε πώς εφαρμόζεται.

εκκαθάριση

Για να αποφύγετε μελλοντικές χρεώσεις, διαγράψτε τη στοίβα CloudFormation.

Συμπέρασμα

Σε αυτήν την ανάρτηση, παρουσιάσαμε μια τεχνική λύση σε ένα επιχειρηματικό πρόβλημα υψηλής αξίας: πώς να χρησιμοποιήσετε το Amazon Polly για να διαβάσετε το περιεχόμενο μιας ιστοσελίδας και να τονίσετε το περιεχόμενο καθώς διαβάζεται. Το δείξαμε χρησιμοποιώντας τόσο στατικές όσο και δυναμικές σελίδες. Για να εξαγάγουμε περιεχόμενο από τη σελίδα, χρησιμοποιήσαμε το DOM traversal και το XSLT. Για να διευκολυνθεί η επισήμανση, χρησιμοποιήσαμε τη δυνατότητα ομιλίας στο Amazon Polly.

Μάθετε περισσότερα για το Amazon Polly μεταβαίνοντας σε αυτό σελίδα υπηρεσίας.

Μη διστάσετε να κάνετε ερωτήσεις στα σχόλια.

Σχετικά με τους συγγραφείς

Mike Havey είναι Αρχιτέκτονας Λύσεων για AWS με πάνω από 25 χρόνια εμπειρίας στη δημιουργία εταιρικών εφαρμογών. Ο Mike είναι συγγραφέας δύο βιβλίων και πολλών άρθρων. Επισκεφθείτε την Amazon του σελίδα συγγραφέα για να διαβάσετε περισσότερα.

Vineet Kachhawaha είναι αρχιτέκτονας λύσεων στην AWS με εξειδίκευση στη μηχανική μάθηση. Είναι υπεύθυνος να βοηθά τους πελάτες να αρχιτεκτονήσουν κλιμακωτούς, ασφαλείς και οικονομικά αποδοτικούς φόρτους εργασίας στο AWS.