Amazon Polly ব্যবহার করে ওয়েবপেজ পড়ুন এবং বিষয়বস্তু হাইলাইট করুন

এই পোস্টে, আমরা কীভাবে ব্যবহার করব তা প্রদর্শন করি আমাজন পলি—একটি নেতৃস্থানীয় ক্লাউড পরিষেবা যা পাঠ্যকে প্রাণবন্ত বক্তৃতায় রূপান্তরিত করে—একটি ওয়েবপৃষ্ঠার বিষয়বস্তু পড়ার জন্য এবং বিষয়বস্তু পড়ার সাথে সাথে হাইলাইট করার জন্য৷ একটি ওয়েবপৃষ্ঠায় অডিও প্লেব্যাক যোগ করা পৃষ্ঠাটির অ্যাক্সেসযোগ্যতা এবং দর্শকদের অভিজ্ঞতা উন্নত করে৷ অডিও-বর্ধিত বিষয়বস্তু আরও প্রভাবশালী এবং স্মরণীয়, পৃষ্ঠায় আরও ট্র্যাফিক টেনে আনে এবং দর্শকদের ব্যয় করার ক্ষমতাকে ট্যাপ করে৷ এটি পৃষ্ঠাটি প্রকাশ করে এমন কোম্পানি বা সংস্থার ব্র্যান্ডকেও উন্নত করে। টেক্সট-টু-স্পিচ প্রযুক্তি এই ব্যবসার সুবিধাগুলিকে অর্জনযোগ্য করে তোলে। Amazon Polly ব্যবহার করে কীভাবে এই লক্ষ্য অর্জন করা যায় তা প্রদর্শন করে আমরা সেই যাত্রাকে ত্বরান্বিত করি।

এই ক্ষমতা প্রতিবন্ধী দর্শকদের জন্য অ্যাক্সেসযোগ্যতা উন্নত করে, এবং আপনার প্রতিষ্ঠানের অ্যাক্সেসিবিলিটি কৌশলের অংশ হিসাবে গৃহীত হতে পারে। ঠিক তেমনই গুরুত্বপূর্ণ, এটি অক্ষমতা ছাড়াই দর্শকদের জন্য পৃষ্ঠার অভিজ্ঞতা বাড়ায়। উভয় গোষ্ঠীরই উল্লেখযোগ্য ব্যয় করার ক্ষমতা রয়েছে এবং তাদের মনোযোগ আকর্ষণ করতে অডিও বর্ধন ব্যবহার করে এমন পৃষ্ঠাগুলি থেকে আরও অবাধে ব্যয় করে৷

সমাধান ওভারভিউ

PollyReadsThePage (PRTP)-যেমন আমরা সমাধানের কথা বলি—একজন ওয়েবপৃষ্ঠা প্রকাশককে তাদের ওয়েবপৃষ্ঠায় একটি অডিও নিয়ন্ত্রণ ড্রপ করার অনুমতি দেয়৷ যখন দর্শক পছন্দ করে খেলা নিয়ন্ত্রণে, নিয়ন্ত্রণ পৃষ্ঠাটি পড়ে এবং বিষয়বস্তু হাইলাইট করে। PRTP টেক্সট থেকে বক্তৃতা সংশ্লেষিত করতে Amazon Polly-এর সাধারণ ক্ষমতা ব্যবহার করে। এটি প্রতিটি পৃষ্ঠার জন্য দুটি আর্টিফ্যাক্ট তৈরি করতে অ্যামাজন পলিকে আহ্বান করে:

• ব্রাউজার দ্বারা প্লেযোগ্য একটি বিন্যাসে অডিও সামগ্রী: MP3
• একটি বক্তৃতা চিহ্নিত ফাইল যা পাঠ্যের প্রতিটি বাক্যের জন্য নির্দেশ করে:
  • প্লেব্যাকের সময় যে বাক্যটি পড়া হয়
  • পৃষ্ঠার অবস্থান বাক্যটি প্রদর্শিত হবে

যখন দর্শক পছন্দ করে খেলা, ব্রাউজারটি MP3 ফাইল চালায়। অডিওটি পড়ার সাথে সাথে, ব্রাউজার সময় পরীক্ষা করে, সেই সময়ে কোন বাক্যটি পড়তে হবে তা চিহ্নিত ফাইলে খুঁজে পায়, পৃষ্ঠায় এটি সনাক্ত করে এবং হাইলাইট করে।

পিআরটিপি ভিজিটরকে বিভিন্ন কণ্ঠ ও ভাষায় পড়তে দেয়। প্রতিটি ভয়েস এর নিজস্ব জোড়া ফাইল প্রয়োজন। PRTP নিউরাল ভয়েস ব্যবহার করে। সমর্থিত নিউরাল ভয়েস এবং ভাষার তালিকার জন্য, দেখুন নিউরাল ভয়েস. অ্যামাজন পলিতে স্ট্যান্ডার্ড এবং নিউরাল ভয়েসের সম্পূর্ণ তালিকার জন্য দেখুন আমাজন পলিতে ভয়েস.

আমরা দুই ধরনের ওয়েবপেজ বিবেচনা করি: স্ট্যাটিক এবং ডাইনামিক পেজ। ক স্থির পৃষ্ঠায়, বিষয়বস্তু পৃষ্ঠার মধ্যে থাকে এবং পৃষ্ঠার একটি নতুন সংস্করণ প্রকাশিত হলেই পরিবর্তন হয়। কোম্পানি তার ওয়েব বিল্ড প্রক্রিয়ার অংশ হিসাবে প্রতিদিন বা সাপ্তাহিক পৃষ্ঠা আপডেট করতে পারে। এই ধরনের পৃষ্ঠার জন্য, বিল্ড টাইমে অডিও ফাইলগুলি প্রাক-জেনারেট করা এবং প্লেব্যাকের জন্য ওয়েব সার্ভারে স্থাপন করা সম্ভব। নিচের চিত্রটি দেখায়, স্ক্রিপ্ট PRTP Pre-Gen অডিও তৈরি করতে অ্যামাজন পলিকে আহ্বান করে। এটি এইচটিএমএল পৃষ্ঠাটি নিজেই ইনপুট হিসাবে নেয় এবং, ঐচ্ছিকভাবে, একটি কনফিগারেশন ফাইল যা নির্দিষ্ট করে যে পৃষ্ঠা থেকে কোন পাঠ্যটি বের করতে হবে (Text Extract Config) যদি এক্সট্র্যাক্ট কনফিগারেশনটি বাদ দেওয়া হয়, তাহলে প্রাক-জেন স্ক্রিপ্ট পৃষ্ঠার মূল অংশ থেকে বের করার জন্য পাঠ্যের একটি বুদ্ধিমান পছন্দ করে। আমাজন পলি একটি ফাইল আউটপুট আমাজন সিম্পল স্টোরেজ সার্ভিস (Amazon S3) বালতি; স্ক্রিপ্ট তাদের আপনার ওয়েব সার্ভারে অনুলিপি করে। দর্শক যখন অডিও চালায়, ব্রাউজার সরাসরি ওয়েব সার্ভার থেকে MP3 ডাউনলোড করে। হাইলাইটের জন্য, একটি ড্রপ-ইন লাইব্রেরি, PRTP.js, পড়া হচ্ছে পাঠ্য হাইলাইট করতে মার্ক ফাইল ব্যবহার করে।

এর বিষয়বস্তু a প্রগতিশীল ভিজিটর ইন্টারঅ্যাকশনের প্রতিক্রিয়ায় পৃষ্ঠা পরিবর্তন হয়, তাই অডিও আগে থেকে তৈরি করা যাবে না কিন্তু গতিশীলভাবে সংশ্লেষিত হতে হবে। নিচের চিত্রটি দেখায়, দর্শক যখন অডিও চালায়, পৃষ্ঠাটি ব্যবহার করে PRTP.js অ্যামাজন পলিতে অডিও তৈরি করতে, এবং এটি স্ট্যাটিক পৃষ্ঠাগুলির মতো একই পদ্ধতি ব্যবহার করে সংশ্লেষিত অডিও হাইলাইট করে। ব্রাউজার থেকে AWS পরিষেবাগুলি অ্যাক্সেস করতে, দর্শকের একটি AWS পরিচয় প্রয়োজন৷ আমরা দেখাই কিভাবে একটি ব্যবহার করতে হয় অ্যামাজন কগনিটো অডিও রেন্ডার করার জন্য ভিজিটরকে অ্যামাজন পলি এবং S3 বালতিতে যথেষ্ট অ্যাক্সেসের অনুমতি দেওয়ার জন্য পরিচয় পুল।

Mp3 অডিও এবং বক্তৃতা চিহ্ন উভয়ই তৈরি করতে পলি পরিষেবাকে একই ইনপুট দুবার সংশ্লেষণ করতে হবে। পড়ুন আমাজন পলি প্রাইসিং পেজ খরচের প্রভাব বুঝতে। প্রাক-প্রজন্ম খরচ বাঁচায় কারণ প্রতিটি ভিজিটর ইন্টারঅ্যাকশনের জন্য চাহিদা অনুযায়ী সংশ্লেষণ না করে বিল্ড টাইমে সঞ্চালিত হয়।

এই পোস্টের সাথে থাকা কোডটি একটি ওপেন সোর্স রিপোজিটরি হিসাবে উপলব্ধ GitHub.

সমাধানটি অন্বেষণ করতে, আমরা এই পদক্ষেপগুলি অনুসরণ করি:

1. প্রাক-জেন বিল্ড সার্ভার, S3 বাকেট, ওয়েব সার্ভার, এবং Amazon Cognito পরিচয় সহ সংস্থানগুলি সেট আপ করুন৷
2. স্ট্যাটিক প্রি-জেন বিল্ড চালান এবং স্ট্যাটিক পৃষ্ঠাগুলি পরীক্ষা করুন।
3. গতিশীল পৃষ্ঠাগুলি পরীক্ষা করুন।

পূর্বশর্ত

এই উদাহরণ চালানোর জন্য, আপনি একটি প্রয়োজন এডাব্লুএস অ্যাকাউন্ট অ্যামাজন পলি, অ্যামাজন এস 3, অ্যামাজন কগনিটো এবং (ডেমো উদ্দেশ্যে) ব্যবহার করার অনুমতি সহ এডাব্লুএস ক্লাউড 9.

সংস্থান সংস্থান

আমরা একটি ভাগ এডাব্লুএস ক্লাউডফর্মেশন আপনার অ্যাকাউন্টে একটি স্বয়ংসম্পূর্ণ ডেমো পরিবেশ তৈরি করতে টেমপ্লেট যা আপনাকে পোস্টের সাথে অনুসরণ করতে সহায়তা করবে। আপনি যদি নিজের পরিবেশে PRTP সেট আপ করতে চান, তাহলে নির্দেশাবলী দেখুন README.md.

ক্লাউডফর্মেশন ব্যবহার করে ডেমো পরিবেশের ব্যবস্থা করতে, প্রথমে এর একটি অনুলিপি ডাউনলোড করুন CloudFormation টেমপ্লেট. তারপর নিম্নলিখিত পদক্ষেপগুলি সম্পূর্ণ করুন:

1. এডাব্লুএস ক্লাউডফর্মেশন কনসোলে, নির্বাচন করুন স্ট্যাক তৈরি করুন।
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 ঠিকানাগুলির একটি পরিসর নির্দিষ্ট করুন৷ আপনার স্থানীয় মেশিনে ব্রাউজারে অ্যাক্সেস সীমাবদ্ধ করতে, ব্যবহার করে আপনার আইপি ঠিকানা খুঁজুন 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. ফলাফল অনুরূপ. উদাহরণস্বরূপ, তিনটিই বিড়ালের ছবির জন্য অল্ট টেক্সট পড়ে ("একটি বিড়ালের র্যান্ডম ছবি")। তিনটিই NE, NW, SE, এবং SW কে সম্পূর্ণ শব্দ হিসেবে পড়ে (“উত্তরপূর্ব,” “উত্তরপশ্চিম,” “দক্ষিণ-পূর্ব,” “দক্ষিণপশ্চিম”), অ্যামাজন পলি অভিধানের সুবিধা নিয়ে।

অডিও প্রধান পার্থক্য লক্ষ্য করুন:

• 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 ক্রম অনুসারে এইচটিএমএল-এ প্রদর্শিত হয়: “আজকের প্রবন্ধ,” “দিনের ছবি,” “দিনের উদ্ধৃতি,” “জোকস অফ দ্য দিন."

আসুন কীভাবে অডিও তৈরি হয় এবং পৃষ্ঠাটি কীভাবে পাঠ্যটিকে হাইলাইট করে সে সম্পর্কে গভীরভাবে খনন করা যাক।

স্ট্যাটিক প্রাক জেনারেটর

আমাদের GitHub রেপোতে এর জন্য প্রাক-উত্পন্ন অডিও ফাইল অন্তর্ভুক্ত রয়েছে 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 পৃষ্ঠা বন্ধ হয় না P উপাদান এই পদক্ষেপ তাদের বন্ধ করে দেয়।
• আমরা এইচটিএমএল পৃষ্ঠায় কোথায় পাঠ্য খুঁজে পাই তা আমরা ট্র্যাক রাখি। আমাদের ব্রাউজার ব্যবহার করে একই ডকুমেন্ট অবজেক্ট মডেল (DOM) কাঠামো ব্যবহার করে অবস্থানগুলি ট্র্যাক করতে হবে। উদাহরণস্বরূপ, ব্রাউজার স্বয়ংক্রিয়ভাবে a যোগ করে TBODY একটি থেকে TABLE. পাইথন প্রোগ্রাম ব্রাউজার হিসাবে একই সুগঠিত মেরামত অনুসরণ করে।

gen_ssml.sh সুগঠিত HTML কে ইনপুট হিসাবে নেয়, এটিতে একটি XML স্টাইলশীট ট্রান্সফরমেশন (XSLT) রূপান্তর প্রয়োগ করে এবং একটি SSML ফাইল আউটপুট করে। (এসএসএমএল হল অ্যামাজন পলির ভাষা যা পাঠ্য থেকে কীভাবে অডিও রেন্ডার করা হয় তা নিয়ন্ত্রণ করে।) বর্তমান উদাহরণে, ইনপুটটি হল example/tmp_wff.html. আউটপুট হয় example/tmp.ssml. ট্রান্সফর্মের কাজ হল এইচটিএমএল থেকে কোন টেক্সট বের করে অ্যামাজন পলিতে ফিড করা হবে তা ঠিক করা। generic.xslt বেশিরভাগ ওয়েবপৃষ্ঠার জন্য একটি বুদ্ধিমান ডিফল্ট XSLT রূপান্তর। নিম্নলিখিত উদাহরণ কোড স্নিপেটে, এটি অডিও নিয়ন্ত্রণ, এইচটিএমএল শিরোনাম, পাশাপাশি এইচটিএমএল উপাদানগুলি বাদ দেয় 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 এর একটি স্নিপেট যা রেন্ডার করা হয়েছে। এটি অ্যামাজন পলিতে ইনপুট হিসাবে খাওয়ানো হয়। লক্ষ্য করুন, উদাহরণস্বরূপ, অডিওতে "লুকানো অনুচ্ছেদ এড়িয়ে যায়" পাঠ্যটি পড়তে হবে এবং আমরা এটিকে একটি চিহ্নের সাথে সংযুক্ত করি, যা আমাদের বলে যে এই পাঠ্যটি 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 CLI) কমান্ড aws polly start-speech-synthesis-task দুইবার: একবার MP3 অডিও জেনারেট করতে এবং আবার মার্ক ফাইল জেনারেট করতে। যেহেতু জেনারেশনটি অ্যাসিঙ্ক্রোনাস, তাই স্ক্রিপ্টটি নির্দিষ্ট S3 বালতিতে আউটপুট না পাওয়া পর্যন্ত পোল করে। যখন এটি আউটপুট খুঁজে পায়, এটি বিল্ড সার্ভারে ডাউনলোড করে এবং ফাইলগুলিকে কপি করে web/polly ফোল্ডার নিম্নলিখিত ওয়েব ফোল্ডারগুলির একটি তালিকা:

• PRTPSstaticDefault.html
• PRTPSstaticConfig.html
• PRTPSstaticCustom.html
• PRTP.js
• polly/PRTPStaticDefault/Joanna.mp3, Joanna.marks, Matthew.mp3, Matthew.marks
• polly/PRTPStaticConfig/Joanna.mp3, Joanna.marks, Matthew.mp3, Matthew.marks
• polly/PRTPStaticCustom/Joanna.mp3, Joanna.marks, Matthew.mp3, Matthew.marks

প্রতিটি পৃষ্ঠায় ভয়েস-নির্দিষ্ট MP3 এর নিজস্ব সেট রয়েছে এবং ফাইলগুলি চিহ্নিত করে৷ এই ফাইলগুলি হল প্রি-জেনারেট করা ফাইল। পৃষ্ঠাটি রানটাইমে অ্যামাজন পলিকে ডাকতে হবে না; ফাইলগুলি ওয়েব বিল্ডের অংশ।

কনফিগ-চালিত কেস

পরবর্তী, বিবেচনা করুন gen_config.sh:

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

স্ক্রিপ্টটি ডিফল্ট ক্ষেত্রে স্ক্রিপ্টের অনুরূপ, তবে বোল্ড করা লাইনগুলি প্রধান পার্থক্য নির্দেশ করে। আমাদের পদ্ধতি কনফিগার-চালিত হয়. আমরা পৃষ্ঠা থেকে আহরণ করার জন্য বিষয়বস্তু তৈরি করি কনফিগারেশনের মাধ্যমে কী বের করতে হবে, কোড নয়। বিশেষ করে, আমরা JSON ফাইল ব্যবহার করি transform_config.json, যা উল্লেখ করে যে আইডি সহ উপাদানগুলি অন্তর্ভুক্ত করা হবে৷ title, main, maintable, এবং qbtable. আইডি সহ উপাদান wrapup বাদ দেওয়া উচিত। নিম্নলিখিত কোড দেখুন:

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

আমরা পাইথন প্রোগ্রাম চালাই ModGenericXSLT.py পরিবর্তন করার generic.xslt, ডিফল্ট ক্ষেত্রে ব্যবহৃত, অন্তর্ভুক্তি এবং বর্জন ব্যবহার করতে যা আমরা উল্লেখ করি transform_config.json. প্রোগ্রামটি একটি টেম্প ফাইলে ফলাফল লেখে (example/tmp.xslt), যা এটি পাস করে gen_ssml.sh এর XSLT রূপান্তর হিসাবে।

এটি একটি কম-কোড বিকল্প। ওয়েব প্রকাশককে XSLT কীভাবে লিখতে হয় তা জানতে হবে না। কিন্তু তাদের HTML পৃষ্ঠার গঠন এবং এর প্রধান সংগঠিত উপাদানগুলিতে ব্যবহৃত আইডিগুলি বুঝতে হবে।

কাস্টমাইজেশন কেস

অবশেষে, বিবেচনা করুন gen_custom.sh:

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

এই স্ক্রিপ্টটি ডিফল্ট স্ক্রিপ্টের সাথে প্রায় অভিন্ন, এটির নিজস্ব XSLT- ব্যবহার করা ছাড়াexample/custom.xslt-সাধারণ XSLT-এর পরিবর্তে। নিচে XSLT-এর একটি স্নিপেট:

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

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

আপনি যদি কোডটি বিস্তারিতভাবে অধ্যয়ন করতে চান, GitHub রেপোতে স্ক্রিপ্ট এবং প্রোগ্রামগুলি পড়ুন।

ব্রাউজার সেটআপ এবং হাইলাইট

স্ট্যাটিক পৃষ্ঠাগুলিতে একটি HTML5 অডিও নিয়ন্ত্রণ রয়েছে, যা তার অডিও উত্স হিসাবে আমাজন পলি দ্বারা তৈরি করা এবং ওয়েব সার্ভারে থাকা MP3 ফাইলটিকে গ্রহণ করে:

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

লোডের সময়, পৃষ্ঠাটি অ্যামাজন পলি-জেনারেটেড মার্ক ফাইলও লোড করে। এই ঘটে 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 এ শুরু হয়। অবস্থানটি 17667 সময়ে SSML এন্ট্রি: /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 এইচটিএমএল পেজ বডি থেকে বেশিরভাগ টেক্সট বের করতে। যে ফাংশন DOM ট্রি হাঁটা, সাধারণ উপাদান যেমন পাঠ্য খুঁজছেন p, h1, pre, span, এবং td. এটি এমন উপাদানগুলির পাঠ্যকে উপেক্ষা করে যেগুলিতে সাধারণত উচ্চস্বরে পড়ার মতো পাঠ্য থাকে না, যেমন audio, option, এবং script. এটি অ্যামাজন পলিতে ইনপুট করার জন্য SSML মার্কআপ তৈরি করে। নিম্নলিখিত একটি স্নিপেট থেকে প্রথম সারি নিষ্কাশন দেখাচ্ছে philosopher টেবিল:

<speak>
...
  <p><mark name="/HTML[1]/BODY[1]/DIV[3]/DIV[1]/DIV[1]/TABLE[1]/TBODY[1]/TR[2]/TD[1]"/>Thales</p>
  <p><mark name="/HTML[1]/BODY[1]/DIV[3]/DIV[1]/DIV[1]/TABLE[1]/TBODY[1]/TR[2]/TD[2]"/>-624 to -546</p>
  <p><mark name="/HTML[1]/BODY[1]/DIV[3]/DIV[1]/DIV[1]/TABLE[1]/TBODY[1]/TR[2]/TD[3]"/>Miletus</p>
  <p><mark name="/HTML[1]/BODY[1]/DIV[3]/DIV[1]/DIV[1]/TABLE[1]/TBODY[1]/TR[2]/TD[4]"/>presocratic</p>
...
</speak>

সার্জারির chooseRenderAudio মধ্যে ফাংশন PRTP.js Amazon Cognito, Amazon S3, এবং Amazon Polly-এর জন্য 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()
};

এটি আমাজন পলি থেকে MP3 অডিও তৈরি করে। প্রজন্মটি ছোট SSML ইনপুটগুলির জন্য সিঙ্ক্রোনাস এবং বড় SSML ইনপুটগুলির জন্য (3 অক্ষরের চেয়ে বেশি) অ্যাসিঙ্ক্রোনাস (S6,000 বালতিতে পাঠানো আউটপুট সহ)। সিঙ্ক্রোনাস ক্ষেত্রে, আমরা অ্যামাজন পলিকে একটি নির্ধারিত URL ব্যবহার করে MP3 ফাইল প্রদান করতে বলি। সংশ্লেষিত আউটপুট প্রস্তুত হলে, আমরা সেট করি 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 এবং সেগুলিকে NW, SW, NE, SE অর্ডারে SSML-এ যোগ করে:

const nw = getElementByXpath("//*[@id='maintable']//tr[1]/td[1]");
const sw = getElementByXpath("//*[@id='maintable']//tr[2]/td[1]");
const ne = getElementByXpath("//*[@id='maintable']//tr[1]/td[2]");
const se = getElementByXpath("//*[@id='maintable']//tr[2]/td[2]");
[nw, sw, ne, se].forEach(dir => buildSSMLSection(dir, []));

• "টম ব্র্যাডি" জোরে উচ্চারিত হয়। কাস্টম কোড একটি SSML এর ভিতরে "টম ব্র্যাডি" পাঠ্য রাখে prosody ট্যাগ:

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

• এটি কোয়ার্টারব্যাক টেবিলের শুধুমাত্র প্রথম তিনটি সারি পড়ে। এটি প্রতিটি সারির জন্য কলাম হেডার পড়ে। এটি কীভাবে প্রয়োগ করা হয় তা আবিষ্কার করতে GitHub রেপোতে কোডটি পরীক্ষা করুন।

পরিষ্কার কর

ভবিষ্যতের চার্জ এড়াতে, ক্লাউডফর্মেশন স্ট্যাকটি মুছুন।

উপসংহার

এই পোস্টে, আমরা একটি উচ্চ-মূল্যের ব্যবসায়িক সমস্যার একটি প্রযুক্তিগত সমাধান প্রদর্শন করেছি: কীভাবে একটি ওয়েবপৃষ্ঠার বিষয়বস্তু পড়ার জন্য Amazon Polly ব্যবহার করবেন এবং এটি পড়ার সময় বিষয়বস্তু হাইলাইট করবেন। আমরা স্ট্যাটিক এবং ডাইনামিক উভয় পৃষ্ঠা ব্যবহার করে এটি দেখিয়েছি। পৃষ্ঠা থেকে বিষয়বস্তু বের করতে, আমরা DOM ট্রাভার্সাল এবং XSLT ব্যবহার করেছি। হাইলাইট করার সুবিধার্থে, আমরা অ্যামাজন পলিতে স্পিচ মার্কের ক্ষমতা ব্যবহার করেছি।

অ্যামাজন পলি সম্পর্কে আরও জানুন এটিতে গিয়ে সেবা পাতা.

মন্তব্যে প্রশ্ন জিজ্ঞাসা করতে নির্দ্বিধায়.

লেখক সম্পর্কে

মাইক হ্যাভি AWS-এর একজন সমাধান স্থপতি হলেন 25 বছরের বেশি অভিজ্ঞতার সাথে এন্টারপ্রাইজ অ্যাপ্লিকেশন তৈরির। মাইক দুটি বই এবং অসংখ্য নিবন্ধের লেখক। তার অ্যামাজনে যান লেখক পৃষ্ঠা আরও পড়তে

বিনীত কাছাওয়াহা মেশিন লার্নিংয়ে দক্ষতা সহ AWS-এর একজন সমাধান স্থপতি। তিনি AWS-এ গ্রাহকদের স্থপতিকে স্কেলযোগ্য, সুরক্ষিত এবং সাশ্রয়ী কাজের লোডগুলিকে সাহায্য করার জন্য দায়ী৷