Amazon Polly PlatoBlockchain 데이터 인텔리전스를 사용하여 웹 페이지를 읽고 콘텐츠를 강조 표시합니다. 수직 검색. 일체 포함.

Amazon Polly를 사용하여 웹 페이지 읽기 및 콘텐츠 강조 표시

타임 스탬프 : 16 년 2022 월 11 일 오전 23:XNUMX

이 게시물에서는 사용 방법을 보여줍니다. 아마존 폴리—텍스트를 생생한 음성으로 변환하는 선도적인 클라우드 서비스—웹 페이지의 콘텐츠를 읽고 읽고 있는 콘텐츠를 강조 표시합니다. 웹 페이지에 오디오 재생을 추가하면 페이지의 접근성과 방문자 경험이 향상됩니다. 오디오 향상 콘텐츠는 더 영향력 있고 기억에 남으며 페이지로 더 많은 트래픽을 끌어들이고 방문자의 소비력을 활용합니다. 또한 페이지를 게시하는 회사 또는 조직의 브랜드를 향상시킵니다. TTS(텍스트 음성 변환) 기술을 통해 이러한 비즈니스 이점을 얻을 수 있습니다. Amazon Polly를 사용하여 이 목표를 달성하는 방법을 보여줌으로써 그 여정을 가속화합니다.

이 기능은 장애가 있는 방문자의 접근성을 향상시키며 조직의 접근성 전략의 일부로 채택될 수 있습니다. 중요한 것은 장애가 없는 방문자의 페이지 경험을 향상시키는 것입니다. 두 그룹 모두 상당한 지출력을 가지고 있으며 오디오 향상을 사용하여 관심을 끄는 페이지에서 더 자유롭게 지출합니다.

솔루션 개요

PollyReadsThePage (PRTP)(솔루션 참조)를 사용하면 웹 페이지 게시자가 웹 페이지에 오디오 컨트롤을 놓을 수 있습니다. 방문자가 선택할 때 연극 컨트롤에서 컨트롤은 페이지를 읽고 콘텐츠를 강조 표시합니다. PRTP는 Amazon Polly의 일반 기능을 사용하여 텍스트에서 음성을 합성합니다. Amazon Polly를 호출하여 각 페이지에 대해 두 개의 아티팩트를 생성합니다.

  • 브라우저에서 재생할 수 있는 형식의 오디오 콘텐츠: MP3
  • 텍스트의 각 문장에 대해 다음을 나타내는 음성 표시 파일:
    • 문장을 읽는 재생 중 시간
    • 문장이 나타나는 페이지의 위치

방문자가 선택할 때 연극, 브라우저는 MP3 파일을 재생합니다. 오디오를 읽을 때 브라우저는 시간을 확인하고 마크 파일에서 그 시간에 읽을 문장을 찾아 페이지에서 찾아 강조 표시합니다.

PRTP를 통해 방문자는 다양한 음성과 언어로 읽을 수 있습니다. 각 음성에는 고유한 파일 쌍이 필요합니다. PRTP는 신경 음성을 사용합니다. 지원되는 신경 음성 및 언어 목록은 다음을 참조하세요. 신경 음성. Amazon Polly의 표준 및 신경망 음성의 전체 목록은 다음을 참조하십시오. Amazon Polly의 목소리.

정적 페이지와 동적 페이지라는 두 가지 유형의 웹페이지를 고려합니다. 안에 정적 인 페이지에서 콘텐츠는 페이지 내에 포함되며 페이지의 새 버전이 게시될 때만 변경됩니다. 회사는 웹 빌드 프로세스의 일부로 페이지를 매일 또는 매주 업데이트할 수 있습니다. 이러한 유형의 페이지의 경우 빌드 시 오디오 파일을 미리 생성하고 재생을 위해 웹 서버에 배치할 수 있습니다. 다음 그림과 같이 스크립트는 PRTP Pre-Gen Amazon Polly를 호출하여 오디오를 생성합니다. HTML 페이지 자체와 선택적으로 페이지에서 추출할 텍스트를 지정하는 구성 파일(Text Extract Config). 추출 구성이 생략된 경우 pre-gen 스크립트는 페이지 본문에서 추출할 텍스트를 합리적으로 선택합니다. Amazon Polly는 파일을 아마존 단순 스토리지 서비스 (Amazon S3) 버킷; 스크립트는 웹 서버에 복사합니다. 방문자가 오디오를 재생하면 브라우저는 웹 서버에서 직접 MP3를 다운로드합니다. 하이라이트의 경우 드롭인 라이브러리, PRTP.js, 마크 파일을 사용하여 읽고 있는 텍스트를 강조 표시합니다.

의 내용 동적 방문자 상호 작용에 대한 응답으로 페이지가 변경되므로 오디오를 미리 생성할 수 없지만 동적으로 합성해야 합니다. 다음 그림에서 볼 수 있듯이 방문자가 오디오를 재생할 때 페이지는 PRTP.js Amazon Polly에서 오디오를 생성하고 정적 페이지와 동일한 접근 방식을 사용하여 합성된 오디오를 강조 표시합니다. 브라우저에서 AWS 서비스에 액세스하려면 방문자에게 AWS 자격 증명이 필요합니다. 우리는 사용 방법을 보여줍니다 아마존 코 그니 토 방문자가 Amazon Polly 및 S3 버킷에 액세스하여 오디오를 렌더링할 수 있도록 하는 자격 증명 풀입니다.

동적 콘텐츠

Mp3 오디오와 음성 표시를 모두 생성하려면 Polly 서비스에서 동일한 입력을 두 번 합성해야 합니다. 참조 Amazon Polly 요금 페이지 비용 영향을 이해합니다. 사전 생성은 각 방문자 상호 작용에 대해 주문형이 아니라 빌드 시 합성이 수행되기 때문에 비용을 절감합니다.

이 게시물과 함께 제공되는 코드는 다음에서 오픈 소스 저장소로 사용할 수 있습니다. GitHub의.

솔루션을 탐색하기 위해 다음 단계를 따릅니다.

  1. 사전 생성 빌드 서버, S3 버킷, 웹 서버 및 Amazon Cognito 자격 증명을 포함한 리소스를 설정합니다.
  2. 정적 pre-gen 빌드를 실행하고 정적 페이지를 테스트합니다.
  3. 동적 페이지를 테스트합니다.

사전 조건

이 예제를 실행하려면 다음이 필요합니다. AWS 계정 Amazon Polly, Amazon S3, Amazon Cognito 및 (데모용) 사용 권한이 있는 경우 AWS 클라우드9.

리소스 프로비저닝

우리는 공유 AWS 클라우드 포메이션 게시물을 따라가는 데 도움이 되는 자체 포함된 데모 환경을 계정에 만들 수 있는 템플릿입니다. 자신의 환경에서 PRTP를 설정하려면 다음 지침을 참조하십시오. README.md.

CloudFormation을 사용하여 데모 환경을 프로비저닝하려면 먼저 CloudFormation 템플릿. 그런 다음 다음 단계를 완료하십시오.

  1. AWS CloudFormation 콘솔에서 스택을 만듭니다.
  2. 왼쪽 메뉴에서 새로운 리소스 사용(표준).
  3. 선택 템플릿 파일을 업로드합니다.
  4. 왼쪽 메뉴에서 파일 선택 다운로드한 템플릿의 로컬 복사본을 업로드합니다. 파일 이름은 prtp.yml.
  5. 왼쪽 메뉴에서 다음 보기.
  6. 선택한 스택 이름을 입력합니다. 나중에 이를 대체 항목으로 다시 입력합니다. .
  7. 당신은 기본값을 유지할 수 있습니다 파라미터 안내
  8. 왼쪽 메뉴에서 다음 보기.
  9. 나머지 섹션을 계속 진행합니다.
  10. 의 확인란을 읽고 선택합니다. 기능 안내
  11. 왼쪽 메뉴에서 스택 생성.
  12. 스택이 완료되면 다음 값을 찾습니다. BucketName 스택 출력에서.

프로덕션 환경을 사용하기 전에 보안 팀과 함께 스택을 검토하는 것이 좋습니다.

AWS Cloud9 IDE에서 웹 서버 및 사전 생성 서버 설정

다음으로 AWS Cloud9 콘솔에서 환경을 찾습니다. PRTPDemoCloud9 CloudFormation 스택에 의해 생성됩니다. 선택하다 IDE 열기 AWS Cloud9 환경을 엽니다. 터미널 창을 열고 PRTP 코드를 복제하고, pre-gen 종속성을 설정하고, 테스트할 웹 서버를 시작하는 다음 명령을 실행합니다.

#Obtain PRTP code
cd /home/ec2-user/environment
git clone https://github.com/aws-samples/amazon-polly-reads-the-page.git

# Navigate to that code
cd amazon-polly-reads-the-page/setup

# Install Saxon and html5 Python lib. For pre-gen.
sh ./setup.sh <StackName>

# Run Python simple HTTP server
cd ..
./runwebserver.sh <IngressCIDR>

럭셔리 , CloudFormation 스택에 지정한 이름을 사용합니다. 을 위한 , 웹 서버에 액세스할 수 있는 IP 주소 범위를 지정합니다. 로컬 컴퓨터의 브라우저에 대한 액세스를 제한하려면 다음을 사용하여 IP 주소를 찾으십시오. https://whatismyipaddress.com/ 및 추가 /32 범위를 지정합니다. 예를 들어, 귀하의 IP가 10.2.3.4, use 10.2.3.4/32. 서버는 포트 8080에서 수신 대기합니다. 서버가 수신 대기하는 공용 IP 주소는 출력에 제공됩니다. 예를 들어:

Public IP is

3.92.33.223

정적 페이지 테스트

브라우저에서 PRTPStaticDefault.html. (데모를 사용하는 경우 URL은 http://<cloud9host>:8080/web/PRTPStaticDefault.html어디로 IDE를 설정할 때 발견한 공용 IP 주소입니다.) 연극 상단의 오디오 컨트롤에서 오디오를 듣고 하이라이트를 보십시오. 속도 변경, 음성 변경, 일시 중지, 빨리 감기 및 되감기를 통해 컨트롤을 탐색합니다. 다음 스크린샷은 페이지를 보여줍니다. 현재 읽고 있기 때문에 "숨겨진 단락 건너뛰기" 텍스트가 강조 표시됩니다.

Amazon Polly PlatoBlockchain 데이터 인텔리전스를 사용하여 웹 페이지를 읽고 콘텐츠를 강조 표시합니다. 수직 검색. 일체 포함.

동일한 시도 PRTPStaticConfig.html 과 PRTPStaticCustom.html. 결과는 비슷합니다. 예를 들어, 세 사람 모두 고양이 사진에 대한 대체 텍스트를 읽습니다("임의의 고양이 사진"). 세 개 모두 NE, NW, SE 및 SW를 전체 단어("northeast", "northwest", "southeast", "southwest")로 읽고 Amazon Polly 사전을 활용합니다.

오디오의 주요 차이점을 확인하십시오.

  • PRTPStaticDefault.html 페이지 본문의 모든 텍스트를 읽습니다. 하단에 "귀하의 생각을 한 단어로 요약", "쿼리 제출", "1년 2020월 XNUMX일에 최종 업데이트됨" 및 "개발팀을 위한 질문"이 포함된 요약 부분을 포함합니다. PRTPStaticConfig.html 과 PRTPStaticCustom.html 음성 합성에서 요약을 명시적으로 제외하므로 읽지 마십시오.
  • PRTPStaticCustom.html 읽습니다 QB 베스트 셀러 남들과 다른 식탁. 처음 세 행만 읽고 각 행의 행 번호를 읽습니다. 각 행에 대해 열을 반복합니다. PRTPStaticCustom.html 사용자 정의 변환을 사용하여 테이블 판독값을 조정합니다. 다른 페이지는 기본 테이블 렌더링을 사용합니다.
  • PRTPStaticCustom.html 나머지 텍스트보다 더 큰 볼륨으로 "Tom Brady"를 읽습니다. SSML(음성 합성 마크업 언어)을 사용합니다. prosody 태그를 사용하여 Tom Brady의 읽기를 조정합니다. 다른 페이지는 이러한 방식으로 조정되지 않습니다.
  • PRTPStaticCustom.html, 사용자 정의 변환 덕분에 NW, SW, NE, SE 순서로 기본 타일을 읽습니다. 즉, "오늘의 기사", "오늘의 인용문", "오늘의 사진", "오늘의 농담"을 읽습니다. 다른 페이지는 타일이 HTML에 나타나는 자연스러운 NW, NE, SW, SE 순서로 읽힙니다. "오늘의 기사", "오늘의 사진", "오늘의 인용문", "농담 낮."

오디오가 생성되는 방식과 페이지에서 텍스트를 강조 표시하는 방식에 대해 더 자세히 살펴보겠습니다.

정적 사전 생성기

GitHub 리포지토리에는 사전 생성된 오디오 파일이 포함되어 있습니다. PRPTStatic 페이지를 생성하려면 AWS Cloud9 IDE의 bash 셸에서 다음 명령을 실행하십시오.

# 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. 또한 hidden 속성이 있는 요소는 제외됩니다. 여기에는 다음과 같이 일반적으로 텍스트가 포함된 요소가 포함됩니다. 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, 포함할 콘텐츠가 ID가 있는 요소임을 지정합니다. title, main, maintable및 qbtable. ID가 있는 요소 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 페이지의 구조와 주요 구성 요소에 사용된 ID를 이해해야 합니다.

커스터마이즈 케이스

마지막으로, 고려 gen_custom.sh:

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

이 스크립트는 자체 XSLT를 사용한다는 점을 제외하고는 기본 스크립트와 거의 동일합니다.example/custom.xslt- 일반 XSLT 대신. 다음은 XSLT의 스니펫입니다.

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

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

코드를 자세히 공부하고 싶다면 GitHub repo에 있는 스크립트와 프로그램을 참고하세요.

브라우저 설정 및 하이라이트

정적 페이지에는 Amazon Polly에서 생성하고 웹 서버에 있는 MP5 파일을 오디오 소스로 사용하는 HTML3 오디오 컨트롤이 포함되어 있습니다.

<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 마크 파일에서 위치는 문장 앞에 오는 SSML 유형 항목의 이름 속성에 있는 XPath 표현식입니다. 예를 들어 시간이 18400이면 마크 파일에 따라 강조 표시되는 문장은 18334에서 시작하는 "숨겨진 단락 건너뛰기"입니다. 위치는 시간 17667의 SSML 항목입니다. /html/body[1]/div[2]/ul[1]/li[1].

동적 페이지 테스트

그 페이지 PRTPDynamic.html 기본, 구성 기반 및 사용자 지정 오디오 추출 접근 방식을 사용하여 동적 오디오 리드백을 보여줍니다.

기본 케이스

브라우저에서 PRTPDynamic.html. 페이지에는 하나의 쿼리 매개변수가 있습니다. dynOption, 값을 허용합니다. default, config및 custom. 기본적으로 default, 따라서 이 경우 생략할 수 있습니다. 페이지에는 동적 콘텐츠가 포함된 두 개의 섹션이 있습니다.

  • 최신 기사 – 하루 종일 자주 변경
  • 그리스 철학자 날짜별 검색 – 방문자가 날짜별로 그리스 철학자를 검색하고 결과를 테이블로 표시할 수 있습니다.

Amazon Polly PlatoBlockchain 데이터 인텔리전스를 사용하여 웹 페이지를 읽고 콘텐츠를 강조 표시합니다. 수직 검색. 일체 포함.

에서 일부 콘텐츠를 생성합니다. 그리스 철학자 예와 같이 -800에서 0 사이의 날짜 범위를 입력하여 섹션을 선택합니다. 그런 다음 선택 Find.

이제 다음을 선택하여 오디오를 재생합니다. 연극 오디오 컨트롤에서.

무대 뒤에서 페이지는 다음 코드를 실행하여 오디오를 렌더링하고 재생합니다.

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

먼저 함수를 호출합니다. buildSSMLFromDefault in PRTP.js HTML 페이지 본문에서 대부분의 텍스트를 추출합니다. 이 함수는 DOM 트리를 탐색하면서 다음과 같은 공통 요소에서 텍스트를 찾습니다. p, h1, pre, span및 td. 일반적으로 다음과 같이 소리내어 읽을 텍스트가 포함되어 있지 않은 요소의 텍스트는 무시합니다. audio, option및 script. Amazon Polly에 입력할 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>

XNUMXD덴탈의 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()
};

Amazon Polly에서 MP3 오디오를 생성합니다. 생성은 작은 SSML 입력의 경우 동기식이고 큰 SSML 입력(3자 이상)의 경우 비동기식(출력이 S6,000 버킷으로 전송됨)입니다. 동기식의 경우 Amazon Polly에 미리 서명된 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"}
	 ]
	});

XNUMXD덴탈의 buildSSMLFromConfig 함수, 정의 PRTP.js, ID가 아래에 제공된 각 섹션에서 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 내부에 "Tom Brady" 텍스트를 넣습니다. 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 순회와 XSLT를 사용했습니다. 강조 표시를 용이하게 하기 위해 Amazon Polly의 음성 표시 기능을 사용했습니다.

다음을 방문하여 Amazon Polly에 대해 자세히 알아보십시오. 서비스 페이지.

의견에 자유롭게 질문하십시오.

저자 소개

Amazon Polly PlatoBlockchain 데이터 인텔리전스를 사용하여 웹 페이지를 읽고 콘텐츠를 강조 표시합니다. 수직 검색. 일체 포함.마이크 헤비 25년 이상의 엔터프라이즈 애플리케이션 구축 경험이 있는 AWS용 솔루션 아키텍트입니다. Mike는 두 권의 책과 수많은 기사의 저자입니다. 그의 아마존 방문 저자 페이지 더 읽기.

Amazon Polly PlatoBlockchain 데이터 인텔리전스를 사용하여 웹 페이지를 읽고 콘텐츠를 강조 표시합니다. 수직 검색. 일체 포함.비니트 카차와하 기계 학습 전문 지식을 갖춘 AWS의 솔루션 아키텍트입니다. 그는 고객이 AWS에서 확장 가능하고 안전하며 비용 효율적인 워크로드를 설계하도록 지원하는 일을 담당하고 있습니다.

타임 스탬프 :

더보기 AWS 기계 학습