제퍼넷 로고

AWS AI 및 ML 서비스를 사용하여 시각 또는 의사 소통 장애가 있는 사람들의 접근성 및 포함을 촉진합니다.

시간

AWS는 다음 제품군을 포함하여 광범위한 인공 지능(AI) 및 기계 학습(ML) 서비스를 제공합니다. 사전 훈련된 즉시 사용 가능한 서비스 ML 경험이 없는 개발자를 위한 것입니다. 이 게시물에서 우리는 보기, 읽기, 듣기, 말하기 또는 외국어로 대화하는 데 어려움을 포함하는 시각 장애 또는 의사 소통 장애를 가진 사람들을 포함하는 애플리케이션을 구축하기 위해 이러한 서비스를 사용하는 방법을 보여줍니다. 등의 서비스로 아마존 전사, 아마존 폴리, 아마존 번역, 아마존 인식아마존 텍사스, 라이브 트랜스크립션, TTS(텍스트 음성 변환), 번역, 객체 감지 및 이미지에서 텍스트 추출과 같은 기능을 프로젝트에 추가할 수 있습니다.

세계 보건기구 (WHO), 전 세계 인구의 약 1%인 15억 명이 넘는 사람들이 어떤 형태의 장애를 안고 살고 있으며 이 숫자는 인구 고령화와 일부 만성 질환의 유병률 증가로 인해 증가할 가능성이 있습니다. 언어, 청각, 시각 장애가 있는 사람들에게 연설이나 TV 프로그램 듣기, 감정이나 필요 표현하기, 주변 둘러보기, 책 읽기와 같은 일상적인 작업은 불가능한 도전처럼 느껴질 수 있습니다. 광범위한 연구에서 장애인을 사회에 포함시키기 위한 보조 기술의 중요성을 강조합니다. 에 따르면 유럽 ​​의회 연구 서비스(European Parliamentary Research Service)의 연구, 스마트폰과 같은 주류 기술은 장애인의 요구 사항을 해결하는 데 적합한 기능을 점점 더 많이 제공합니다. 또한 장애가 있는 사람들을 위해 디자인할 때 모든 사람의 경험을 개선하는 기능을 구축하는 경향이 있습니다. 이것은 로 알려져 있다 커브 컷 효과.

이 게시물은 사용 방법을 보여줍니다 JavaScript 용 AWS SDK AWS AI 서비스에서 제공하는 기능을 자체 솔루션에 통합합니다. 이를 위해 샘플 웹 애플리케이션은 Amazon Transcribe, Amazon Polly, Amazon Translate, Amazon Rekognition 및 Amazon Textract를 사용하여 접근성 기능을 쉽게 구현하는 방법을 보여줍니다. 이 애플리케이션의 소스 코드인 AWS AugmentAbility는 GitHub의 자신의 프로젝트를 위한 출발점으로 사용합니다.

솔루션 개요

AWS 증강 기능 Amazon Transcribe, Amazon Translate, Amazon Polly, Amazon Rekognition 및 Amazon Textract의 XNUMX가지 AWS AI 서비스로 구동됩니다. 그것은 또한 사용 아마존 코 그니 토 사용자 풀자격 증명 풀 사용자의 인증 및 권한 부여를 관리하기 위한 것입니다.

웹 앱을 배포한 후 다음 기능에 액세스할 수 있습니다.

  • 라이브 트랜스크립션 및 텍스트 음성 변환 – 앱은 자동 음성 인식 서비스인 Amazon Transcribe를 사용하여 실시간으로 대화와 연설을 텍스트로 변환합니다. 하고 싶은 말을 입력하면 앱이 Amazon Polly 텍스트 음성 변환 기능을 사용하여 말해줍니다. 이 기능은 Amazon Transcribe와도 통합됩니다. 스트리밍 트랜스크립션을 위한 자동 언어 식별—최소 3초의 오디오로 서비스가 자동으로 주요 언어를 감지하고 사용자가 음성 언어를 지정하지 않고도 스크립트를 생성할 수 있습니다.
  • 번역이 포함된 라이브 트랜스크립션 및 TTS(텍스트 음성 변환) – 앱은 실시간으로 대화와 연설을 전사하고 번역합니다. 하고 싶은 말을 입력하면 앱이 자동으로 번역하여 말해줍니다. 번역은 현재 Amazon Translate에서 지원하는 75개 이상의 언어로 제공됩니다.
  • 실시간 대화 번역 – 대상 언어를 선택하고 귀하의 언어로 말하면 앱은 Amazon Transcribe, Amazon Translate 및 Amazon Polly 기능을 결합하여 대상 언어로 말한 내용을 번역합니다.
  • 물체 감지 – 스마트폰으로 사진을 찍으면 앱이 Amazon Rekognition 라벨 감지 기능을 사용하여 주변 사물을 설명합니다.
  • 레이블, 기호 및 문서에 대한 텍스트 인식 – 라벨, 서명 또는 문서가 있는 스마트폰으로 사진을 찍으면 앱이 소리내어 읽어줍니다. 이 기능은 Amazon Rekognition 및 Amazon Textract 텍스트 추출 기능을 기반으로 합니다. AugmentAbility는 텍스트를 75개 이상의 언어로 번역하거나 OpenDyslexic 글꼴을 사용하여 난독증이 있는 사용자가 더 읽기 쉽게 만들 수 있습니다.

라이브 트랜스크립션, 텍스트 음성 변환 및 실시간 대화 번역 기능은 현재 중국어, 영어, 프랑스어, 독일어, 이탈리아어, 일본어, 한국어, 브라질 포르투갈어 및 스페인어로 제공됩니다. 텍스트 인식 기능은 현재 아랍어, 영어, 프랑스어, 독일어, 이탈리아어, 포르투갈어, 러시아어 및 스페인어로 제공됩니다. 각 기능에서 지원하는 언어의 업데이트된 목록은 AugmentAbility GitHub 리포지토리.

다음을 사용하여 컴퓨터 또는 AWS 계정에서 로컬로 AugmentAbility를 구축 및 배포할 수 있습니다. AWS Amplify 호스팅, 빠르고 안전하며 안정적인 정적 및 서버 측 렌더링 앱을 위한 완전 관리형 CI/CD 및 정적 웹 호스팅 서비스입니다.

다음 다이어그램은 AWS Amplify Hosting을 사용하여 클라우드에 배포된다고 가정한 애플리케이션의 아키텍처를 보여줍니다.

AWS Amplify, Amazon Cognito, Transcribe, Translate, Polly, Rekognition, Textract를 포함한 아키텍처 다이어그램.

솔루션 워크플로에는 다음 단계가 포함됩니다.

  1. 모바일 브라우저는 웹 앱(AWS Amplify Hosting에서 호스팅하는 HTML, CSS 및 JavaScript 애플리케이션)에 액세스하는 데 사용됩니다. 애플리케이션은 JavaScript용 SDK를 사용하여 구현되었으며 AWS Amplify JavaScript 라이브러리.
  2. 사용자는 사용자 이름과 암호를 입력하여 로그인합니다. 인증은 Amazon Cognito 사용자 풀에 대해 수행됩니다. 로그인에 성공하면 Amazon Cognito 자격 증명 풀을 사용하여 앱 기능에 액세스하는 데 필요한 임시 AWS 자격 증명을 사용자에게 제공합니다.
  3. 사용자가 앱의 다양한 기능을 탐색하는 동안 모바일 브라우저는 Amazon Transcribe(StartStreamTranscription웹소켓 작업), Amazon 번역(번역텍스트 작업), Amazon Polly(음성 합성 작업), Amazon Rekognition(라벨 감지텍스트 감지 작업) 및 Amazon Textract(문서 텍스트 감지 조작).

AWS 서비스는 JavaScript용 SDK를 사용하여 모바일 웹 앱에 통합되었습니다. 일반적으로 JavaScript용 SDK는 브라우저 스크립트 또는 Node.js에서 AWS 서비스에 대한 액세스를 제공합니다. 이 샘플 프로젝트의 경우 SDK는 브라우저 스크립트에서 사용됩니다. 브라우저 스크립트에서 AWS 서비스에 액세스하는 방법에 대한 추가 정보는 다음을 참조하십시오. 브라우저 스크립트에서 시작하기. JavaScript용 SDK는 AWS 서비스의 기본 세트를 지원하는 JavaScript 파일로 제공됩니다. 이 파일은 일반적으로 다음을 사용하여 브라우저 스크립트에 로드됩니다. <script> 호스팅된 SDK 패키지를 참조하는 태그입니다. 사용자 지정 브라우저 SDK는 지정된 서비스 세트로 구축되었습니다(지침은 브라우저용 SDK 빌드).

각 서비스는 가이드라인과 코드 샘플에 따라 모바일 웹 앱에 통합되었습니다. JavaScript용 AWS SDK 개발자 안내서. 라이브 트랜스크립션 기능을 구현하려면 몇 가지 추가 단계가 필요했습니다. Amazon Transcribe 스트리밍 WebSocket 개발자는 이벤트 스트림 인코딩으로 오디오를 인코딩하고 서명 버전 4 서명 프로세스 HTTP에서 보낸 AWS API 요청에 인증 정보를 추가합니다. 이 접근 방식에 대한 자세한 내용은 다음을 참조하십시오. WebSocket과 함께 Amazon Transcribe를 사용하여 실시간으로 음성을 텍스트로 변환.

사용자 로그인 웹페이지는 다음을 사용하여 구현되었습니다. 인증 AWS Amplify JavaScript 라이브러리의 기능. 인증 및 권한 부여 흐름에 대한 자세한 내용은 다음을 참조하세요. 로그인 후 자격 증명 풀을 사용하여 AWS 서비스에 액세스.

다음 연습은 AWS Amplify Hosting을 사용하여 AugmentAbility를 배포하는 방법을 보여줍니다. 여기에는 다음 단계가 포함됩니다.

  1. Amazon Cognito 사용자 풀 및 자격 증명 풀을 생성하고 AWS AI 서비스에 액세스할 수 있는 권한을 부여합니다.
  2. GitHub 리포지토리를 복제하고 구성 파일을 편집합니다.
  3. 모바일 웹 앱을 AWS 증폭 콘솔.
  4. 모바일 웹 앱을 사용합니다.

Amazon Cognito 사용자 풀 및 자격 증명 풀을 생성하고 AWS AI 서비스에 액세스할 수 있는 권한 부여

앱 배포에 필요한 첫 번째 단계는 다음으로 구성됩니다. Amazon Cognito 사용자 풀 생성 와 더불어 호스팅된 UI 사용, Amazon Cognito 자격 증명 풀 생성, 두 풀 통합, 그리고 마지막으로 권한 부여 AWS 서비스에 액세스하기 위해 AWS 자격 증명 및 액세스 관리 (IAM) 자격 증명 풀과 연결된 역할. 각 작업에서 수동으로 작업하거나 배포하여 이 단계를 완료할 수 있습니다. AWS 클라우드 포메이션 주형.

CloudFormation 템플릿은 Amazon Cognito 풀, IAM 역할 및 IAM 정책을 포함하여 필요한 리소스를 자동으로 프로비저닝하고 구성합니다.

  1. 에 로그인 AWS 관리 콘솔 선택하여 CloudFormation 템플릿을 시작합니다. 발사 스택:

    템플릿은 기본적으로 EU 서부(아일랜드) AWS 리전에서 시작됩니다. 다른 리전에서 솔루션을 시작하려면 콘솔 탐색 모음에서 리전 선택기를 사용합니다. 범위 내 AWS 서비스(Amazon Cognito, AWS Amplify, Amazon Transcribe, Amazon Polly, Amazon Translate, Amazon Rekognition 및 Amazon Textract)를 사용할 수 있는 리전을 선택해야 합니다(us-east-2, us-east-1, us-west-1, us-west-2, ap-south-1, ap-northeast-2, ap-southeast-1, ap-southeast-2, ca-central-1, eu-central-1, eu-west-1, eu-west-2).
  2. 왼쪽 메뉴에서 다음 보기.
  3. 럭셔리 지역, 사용하려는 지역의 식별자(지원되는 지역 중)를 입력합니다.
  4. 럭셔리 ID / Username, 앱에 액세스하는 데 사용할 사용자 이름을 입력합니다.
  5. 럭셔리 이메일, 첫 번째 로그인을 위한 임시 비밀번호가 전송될 이메일 주소를 입력하십시오.
  6. 왼쪽 메뉴에서 다음 보기.
  7. 스택 옵션 구성 페이지에서 선택 다음.
  8. 검토 페이지에서 설정을 검토하고 확인하십시오.
  9. 템플릿이 IAM 리소스를 생성하고 AWS CloudFormation 기능이 필요할 수 있음을 확인하는 확인란을 선택합니다.
  10. 왼쪽 메뉴에서 스택 생성 스택을 배포합니다.

AWS CloudFormation 콘솔에서 스택 상태를 볼 수 있습니다. Status 열. 당신은 받아야합니다 CREATE_COMPLETE 몇 분 안에 상태.

템플릿 배포의 일부로 인증된 사용자가 수임한 IAM 역할에 다음 권한이 부여됩니다.

  • transcribe:StartStreamTranscriptionWebSocket
  • translate:TranslateText
  • comprehend:DetectDominantLanguage
  • polly:SynthesizeSpeech
  • rekognition:DetectText
  • rekognition:DetectLabels
  • textract:DetectDocumentText

... 비록 ... 할지라도 아마존 이해 이 웹 애플리케이션에서 명시적으로 사용되지 않으며 작업에 대한 권한이 부여됩니다. 이해:DetectDominantLanguage. Amazon Translate는 Amazon Comprehend를 자동으로 호출하여 언어 코드가 지정되지 않은 경우 번역할 텍스트의 언어를 결정할 수 있습니다.

GitHub 저장소 복제 및 구성 파일 편집

이제 AWS AI 서비스에 대한 액세스가 구성되었으므로 GitHub 리포지토리를 복제하고 구성 파일을 편집할 준비가 되었습니다.

  1. . AWS AugmentAbility GitHub 리포지토리선택한다. 암호ZIP 다운로드.
    ZIP 파일을 다운로드해야 하는 컴퓨터의 위치를 ​​선택하라는 메시지가 표시되거나 자동으로 저장됩니다. Downloads 폴더에 있습니다.
  2. 파일을 다운로드한 후 압축을 풀고 ZIP 파일을 삭제합니다.
    이름이 지정된 폴더를 얻었어야 합니다. aws-augmentability-main 일부 파일과 하위 폴더가 있습니다.
  3. 이름이 지정된 파일 만들기 config.js 텍스트 편집기를 사용하여 다음 내용을 입력합니다.
    var appConfig = {
        "IdentityPoolId": "INSERT_COGNITO_IDENTITY_POOL_ID"
    }
    
    var amplifyConfig = {
        "Auth": {
            "region": "INSERT_AWS_REGION_ID",
            "userPoolId": "INSERT_COGNITO_USER_POOL_ID",
            "userPoolWebClientId": "INSERT_COGNITO_USER_POOL_CLIENT_ID",
            "mandatorySignIn": true,
            "cookieStorage": {
                "domain": window.location.hostname,
                "path": "/",
                "expires": 30,
                "secure": true
          }
        }
    }

  4. . config.js 생성한 파일에서 XNUMX개를 바꿉니다. INSERT_ Amazon Cognito 자격 증명 풀 ID, 선택한 리전의 식별자, Amazon Cognito 사용자 풀 ID 및 사용자 풀 클라이언트 ID가 있는 문자열.
    AWS CloudFormation 콘솔을 열고 이름이 지정된 스택을 선택하여 이러한 값을 검색할 수 있습니다. augmentability-stack, 그리고 선택 출력 탭.
    CloudFormation 스택 출력 탭의 스크린샷.
  5. config.js 파일을 aws-augmentability-main 폴더를 만들고 폴더를 압축하여 새 파일을 얻습니다. aws-augmentability-main.zip 파일.

Amplify 콘솔에 모바일 웹 앱 배포

AugmentAbility 프로젝트 파일을 다운로드하고 편집했으므로 이제 Amplify 콘솔을 사용하여 모바일 웹 앱을 빌드하고 배포할 준비가 되었습니다.

  1. Amplify Hosting 시작하기 페이지에서 선택 Git 공급자없이 배포.
  2. 왼쪽 메뉴에서 계속.
  3. . 수동 배포 시작 섹션 앱 이름, 앱 이름을 입력합니다.
  4. 럭셔리 환경 이름, 다음과 같이 환경에 대해 의미 있는 이름을 입력합니다. development or production.
  5. 럭셔리 방법선택한다. 드래그 앤 드롭.
  6. 드래그 앤 드롭하거나 aws-augmentability-main.zip 컴퓨터에서 드롭존으로 파일을 옮기거나 파일을 선택하십시오 선택하려면 aws-augmentability-main.zip 컴퓨터에서 파일.
  7. 왼쪽 메뉴에서 찜하기 배포, 메시지를 기다립니다. 배포가 성공적으로 완료되었습니다..

모바일 웹 앱 사용

이제 모바일 웹 앱이 배포되어야 합니다. 앱에 처음 접속하기 전에 1단계에서 자동으로 생성된 사용자의 새로운 비밀번호를 설정해야 합니다. 임시 로그인 화면에 대한 링크는 출력 CloudFormation 스택 탭(필드 UserPoolLoginUrl). 이 첫 번째 로그인에는 설정한 사용자 이름과 이메일로 받은 임시 비밀번호를 사용합니다.

새 비밀번호를 설정했으면 모바일 웹 앱을 테스트할 준비가 된 것입니다.

. 일반 Amplify 콘솔의 섹션에서 앱에 대한 링크를 찾을 수 있어야 합니다. 생산 지점 URL 상표. 열거나 스마트폰으로 보낸 다음 새 자격 증명으로 로그인하고 AugmentAbility로 게임을 시작하세요.

AWS AugmentAbility의 "라이브 전사 및 텍스트 음성 변환" 기능을 보여주는 애니메이션 스크린샷.

AWS AugmentAbility의 "라이브 전사 및 텍스트 음성 변환" 기능을 보여주는 애니메이션 스크린샷.

AWS AugmentAbility의 "객체 감지" 기능을 보여주는 애니메이션 스크린샷.

AWS AugmentAbility의 "객체 감지" 기능을 보여주는 애니메이션 스크린샷.

AWS AugmentAbility의 "텍스트 인식" 기능을 보여주는 애니메이션 스크린샷.

AWS AugmentAbility의 "텍스트 인식" 기능을 보여주는 애니메이션 스크린샷.

다음 단계

모바일 웹 앱을 변경하려면 리포지토리에서 복제된 파일에 대해 작업하고 모바일 웹 앱을 로컬로 빌드할 수 있습니다( 읽어보기 파일), Amplify 콘솔을 통해 업데이트된 ZIP 파일을 업로드하여 앱을 다시 배포합니다. 대안으로 GitHub, Bitbucket, GitLab 또는 AWS 코드 커밋 리포지토리에 프로젝트 파일을 저장하고 Amplify에 연결하여 모든 코드 커밋에서 자동 빌드의 이점을 누릴 수 있습니다. 이 접근 방식에 대한 자세한 내용은 다음을 참조하십시오. 기존 코드 시작하기. 이 자습서를 따르는 경우 명령을 교체해야 합니다. npm run buildnpm run-script build 2a단계에서.

Amazon Cognito 콘솔에서 추가 사용자를 생성하려면 다음을 참조하십시오. AWS Management 콘솔에서 새 사용자 생성. 사용자의 비밀번호를 복구해야 하는 경우에는 임시 비밀번호 변경에 사용한 임시 로그인 화면을 사용해야 합니다. 에서 링크를 찾을 수 있습니다. 출력 CloudFormation 스택의 탭(필드 UserPoolLoginUrl).

정리

테스트가 완료되면 향후 요금이 발생하지 않도록 이 연습에서 생성된 리소스를 삭제하십시오.

  1. AWS CloudFormation 콘솔에서 스택 탐색 창에서
  2. 스택 선택 augmentability-stack.
  3. 왼쪽 메뉴에서 . 메시지가 표시되면 삭제를 확인합니다.
  4. Amplify 콘솔에서 생성한 앱을 선택합니다.
  5. 행위 메뉴, 선택 앱 삭제 메시지가 표시되면 삭제를 확인합니다.

결론

이 게시물에서는 AWS AI 및 ML 서비스를 사용하여 라이브 트랜스크립션, 텍스트 음성 변환, 객체 감지 또는 텍스트 인식과 같은 기능을 모든 사람에게 제공하는 코드 샘플을 배포하는 방법을 보여 드렸습니다. 다양한 능력과 장애가 있는 사람들이 사용할 수 있는 애플리케이션을 구축하는 방법을 아는 것은 보다 포괄적이고 접근 가능한 제품을 만드는 데 중요합니다.

AugmentAbility를 시작하려면 복제하거나 분기하십시오. GitHub 저장소 모바일 웹 앱으로 실험을 시작합니다. AWS 계정에 리소스를 배포하기 전에 AugmentAbility를 실험해보고 싶다면 다음을 확인하십시오. 라이브 데모 (신임장: demo-user, Demo-password-1).


저자에 관하여

루카 구이다 AWS의 솔루션 아키텍트입니다. 그는 밀라노에 기반을 두고 있으며 클라우드 여정에서 이탈리아 ISV를 지원합니다. 컴퓨터 과학 및 엔지니어링 분야의 학문적 배경을 가진 그는 대학에서 AI/ML에 대한 열정을 키우기 시작했습니다. AWS 내 자연어 처리(NLP) 커뮤니티의 구성원인 Luca는 고객이 AI/ML 서비스를 도입하면서 성공할 수 있도록 지원합니다.

spot_img

최신 인텔리전스

spot_img