Universidad Mariano Gálvez De Guatemala Facultad De

Ingeniería En Sistemas De La Información

Inteligencia Artificial

Ingeniero. Jorge Santos

Actividad:

CONVERTIR TEXTO A VOZ UTILIZANDO SERVICIOS DE AWS

Estudiante: Luis Pablo Bautista Sánchez

Carné: 2890 – 15 – 1461

Sede: Retalhuleu

Sección: A

05 de marzo de 2023
• DESCRIBIR LOS SERVICIOS DE AWS UTILIZADOS EN LA
CONSTRUCCIÓN DE UNA API SERVERLESS PARA INTEGRAR POLLY

o AWS Lambda: Este servicio permite la creación de funciones de servidor

sin necesidad de crear ni mantener servidores. Se podría utilizar para
implementar la lógica empresarial de la API, por ejemplo, para tomar
una solicitud de texto, enviarla a Polly para que la convierta en voz y
luego devolver la respuesta de audio.

o Amazon API Gateway: Este servicio proporciona una interfaz para el

cliente de la API y es compatible con Lambda. Se podría utilizar para
aceptar solicitudes HTTP de entrada y enrutarlas a la función Lambda
apropiada.

o Amazon Polly: Este servicio es el principal componente de la API, ya

que proporciona la conversión de texto a voz. La API podría utilizar la
API de Polly para procesar solicitudes de texto y devolver audio
generado.

o Amazon S3: Este servicio de almacenamiento en la nube podría

utilizarse para almacenar los archivos de audio generados por Polly. La
API podría devolver un enlace de descarga al archivo de audio
almacenado en S3.

o AWS CloudFormation: Este servicio podría utilizarse para implementar la

infraestructura necesaria de AWS para la API Serverless. Se podría
utilizar una plantilla de CloudFormation para definir la configuración de la
API Gateway, la función Lambda y otros recursos de AWS necesarios
para la API.

o AWS IAM: Este servicio podría utilizarse para definir y administrar roles
y permisos para los usuarios y aplicaciones que utilizan la API. Por
ejemplo, se podrían definir permisos de acceso a S3 y a los servicios de
Polly en función de los roles de usuario.
 • DESCRIBA EL PROCEDIMIENTO PASO A PASO UTILIZADO PARA LA
CONSTRUCCIÓN DE SU API
o INCLUIR CAPTURAS PARA EVIDENCIAR EL FUNCIONAMIENTO
o INCLUIR DIAGRAMA DE ARQUITECTURA DE SU API.

Buckets

Crear bucket
Uso compartido de recursos entre orígenes (CORS)

Panel de IAM
Usuarios
npm install aws-sdk
npm install axios

codigo en App.js
import React, { useState } from "react";
import "bootstrap/dist/css/bootstrap.min.css";
import "./App.css";
import AWS from "aws-sdk";
import axios from "axios";

const accessKeyId = "AKIA4OZPTQACM3SLUGLZ";

const secretAccessKey =
"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";
const region = "us-east-2";
AWS.config.update({ accessKeyId, secretAccessKey, region });

function App() {
const [text, setText] = useState("");
const [voice, setVoice] = useState("Lucia");
const [audioUrl, setAudioUrl] = useState("");

const handleTextChange = (event) => {

setText(event.target.value);
};

const handleVoiceChange = (event) => {

setVoice(event.target.value);
 };

const handleSpeak = async () => {

let sendData = { text: text, voice: voice };
try {
const response = await axios.post(
"https://r0anj9po7b.execute-api.us-east-2.amazonaws.com/dev/speak",
sendData
);
setAudioUrl(response.data.url);
} catch (error) {
console.log(error);
}
};

const handleFetchAudio = async () => {

const response = await fetch(audioUrl);
const blob = await response.blob();
const url = URL.createObjectURL(blob);
setAudioUrl(url);
};

return (
<div className="container-fluid">
<div className="row">
<div className="col-sm-6 col-md-4">

</div>
<div className="col-sm-6 col-md-4">

<div className="App">
<h1 className="text-center mt-5"> Convertir texto a voz utilizando
servicios de AWS</h1>
<div className="input-container mt-5">
<label htmlFor="text" className="form-label">Text:</label>
<input type="text" id="text" className="form-control" value={text}
onChange={handleTextChange} />
</div>
<div className="select-container mt-3">
<label htmlFor="voice" className="form-label">Voice:</label>
<select id="voice" className="form-select" value={voice}
onChange={handleVoiceChange}>
 <option value="Lucia">Lucia</option>
<option value="Conchita">Conchita</option>
<option value="Enrique">Enrique</option>
</select>
</div>
<button className="btn btn-primary mt-3"
onClick={handleSpeak}>Speak</button>
{audioUrl && (
<div className="mt-3">
<button className="btn btn-secondary"
onClick={handleFetchAudio}>Reproducir Audio</button>
<audio controls className="mt-2">
<source src={audioUrl} type="audio/mpeg" />
Your browser does not support the audio element.
</audio>
</div>
)}
</div>

</div>
<div className="col-sm-12 col-md-4">

</div>
</div>
</div>
);
}

export default App;