Taller de Azure Cognitive Services

Taller de Azure Cognitive Services
01 - Análisis de imágenes remotas mediante la API REST y JavaScript en Computer Vision
En este taller, analizará una imagen almacenada de forma remota para extraer características
visuales con la API REST de Computer Vision. Con el método de Analyze Image, puede extraer
características visuales basadas en el contenido de una imagen.
Requisitos previos
 Una suscripción a Azure.
 Una vez que tenga la suscripción de Azure, cree un recurso de Computer Vision en Azure
Portal para obtener la clave y el punto de conexión.
 Una vez que se implemente, haga clic en Ir al recurso.
o Necesitará la clave (key) y el punto de conexión (endpoint) del recurso que cree
para conectar la aplicación al servicio Computer Vision.
o Puede usar el plan de tarifa gratis (F0) para probar el servicio.
Creando el recurso de Computer Vision: a) Buscando el servicio

Creando el recurso de Computer Vision: b) Creación del recurso
Creando el recurso de Computer Vision: c) Creando un grupo de recursos

Creando el recurso de Computer Vision: d) Ingreso de información

Creando el recurso de Computer Vision: e) Validación de información

Creando el recurso de Computer Vision: f) Aprovisionamiento del recurso
Creando el recurso de Computer Vision: g) Inicio rápido

Creando el recurso de Computer Vision: h) Acceso a llave y punto de conexión

Creación y ejecución del código de ejemplo
Para crear y ejecutar el ejemplo, siga estos pasos:
1. Cree un archivo llamado analyze-image.html, ábralo en un editor de texto y copie en él
el código mostrado en la siguiente página.
2. También puede reemplazar el valor del atributo value para el control inputImage por la
dirección URL de una imagen diferente que desee analizar.
3. Abra una ventana del explorador.
4. En el explorador, arrastre y coloque el archivo en la ventana del explorador.
5. Cuando se muestre la página web en el explorador, pegue la clave de suscripción y la
dirección URL del punto de conexión en los cuadros de entrada correspondientes.
6. Seleccione el botón Analyze Image (Analizar imagen).

<!DOCTYPE html>
<html>
<head>
<title>Ejemplo de análisis de imagen</title>
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
</head>
<body>
<script type="text/javascript">
function processImage() {
var subscriptionKey = document.getElementById("subscriptionKey").value;
var endpoint = document.getElementById("endpointUrl").value;
var uriBase = endpoint + "vision/v3.0/analyze";
// Request parameters.
var params = {
"visualFeatures": "Categories,Description,Color",
"details": "",
"language": "en",
};
// Display the image.
var sourceImageUrl = document.getElementById("inputImage").value;
document.querySelector("#sourceImage").src = sourceImageUrl;
// Make the REST API call.
$.ajax({
url: uriBase + "?" + $.param(params),
// Request headers.
beforeSend: function(xhrObj){
xhrObj.setRequestHeader("Content-Type","application/json");
xhrObj.setRequestHeader(
"Ocp-Apim-Subscription-Key", subscriptionKey);
},
type: "POST",
// Request body.
data: '{"url": ' + '"' + sourceImageUrl + '"}',
})
.done(function(data) {
// Show formatted JSON on webpage.
$("#responseTextArea").val(JSON.stringify(data, null, 2));
})
.fail(function(jqXHR, textStatus, errorThrown) {
// Display error message.
var errorString = (errorThrown === "") ? "Error. " :

errorThrown + " (" + jqXHR.status + "): ";
errorString += (jqXHR.responseText === "") ? "" :
jQuery.parseJSON(jqXHR.responseText).message;
alert(errorString);
});
};
</script>
<h1>Análisis de imágenes:</h1>
Ingresa la URL de una imagen, entonces haz click en el botón <strong>Analizar
imagen</strong>.
<br><br>
Subscription key:
<input type="text" name="subscriptionKey" id="subscriptionKey"
value="" />
Endpoint URL:
<input type="text" name="endpointUrl" id="endpointUrl"
value="" />
<br><br>
Imagen a analizar:
<input type="text" name="inputImage" id="inputImage"
value="https://upload.wikimedia.org/wikipedia/commons/3/3c/Shaki_waterfall.jpg"
/>
<button onclick="processImage()">Analizar imagen</button>
<br><br>
<div id="wrapper" style="width:1020px; display:table;">
<div id="jsonOutput" style="width:600px; display:table-cell;">
Respuesta:
<br><br>
<textarea id="responseTextArea" class="UIInput"
style="width:580px; height:400px;"></textarea>
</div>
<div id="imageDiv" style="width:420px; display:table-cell;">
Imagen:
<br><br>
<img id="sourceImage" width="400" />
</div>
</div>
</body>
</html>

02 - Detección de caras en una imagen mediante la API REST y JavaScript
En este tutorial usará la API REST de Azure Face con JavaScript para detectar rostros humanos
en una imagen.
Requisitos previos
 Una suscripción a Azure:
 Una vez que tenga la suscripción de Azure, cree un recurso de Face en Azure Portal para
obtener la clave y el punto de conexión.
para conectar la aplicación al servicio Face API.
 Puede usar el plan de tarifa gratis (F0) para probar el servicio.
Creando el recurso de Face: a) Buscando el servicio

Creando el recurso de Face: b) Creación del recurso

Creando el recurso de Face: c) Ingreso de información

Creando el recurso de Face: d) Validación de información

Creando el recurso de Face: e) Aprovisionamiento del recurso
Creando el recurso de Face: f) Inicio rápidp

Creando el recurso de Face: g) Acceso a llave y punto de conexión

1. Inicialización del archivo HTML
Cree un nuevo archivo HTML, detect_faces.html, y agregue el código siguiente.
<!DOCTYPE html>
<html>
<head>
<title>Ejemplo de detección de rostros</title>
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
</head>
<body></body>
</html>
2. Código de interfaz de la página
Luego agregue el siguiente código dentro del elemento body del documento. Este código
configura una interfaz de usuario básica con un campo de dirección URL, un botón Analizar foto,
un panel de respuesta y un panel de información de la imagen.
<h1>Detectando Rostros:</h1>
Ingresa la URL de una foto que incluya una o más caras, entonces haz clic en el
botón <strong>Analizar foto</strong>.<br><br>
Imagen a analizar: <input type="text" name="inputImage" id="inputImage"
value="https://upload.wikimedia.org/wikipedia/commons/c/c3/RH_Louise_Lillian_Gish
.jpg" />
<button onclick="processImage()">Analizar foto</button><br><br>
<div id="wrapper" style="width:1020px; display:table;">
<div id="jsonOutput" style="width:600px; display:table-cell;">
Response:<br><br>
<textarea id="responseTextArea" class="UIInput"
style="width:580px; height:400px;"></textarea>
</div>
<div id="imageDiv" style="width:420px; display:table-cell;">
Imagen:<br><br>
<img id="sourceImage" width="400" />
</div>
</div>

3. Escritura del script de JavaScript
Agregue el código siguiente justo encima del elemento h1 en el documento. Este código
configura el código JavaScript que llama a Face API. No olvides reemplazar las variables
subscriptionKey y uriBase por la llave y punto de conexión de Azure, respectivamente.
<script type="text/javascript">
function processImage() {
// Replace <Subscription Key> with your valid subscription key.
var subscriptionKey = "<Subscription Key>";
var uriBase =
"https://<My Endpoint String>.com/face/v1.0/detect";
// Request parameters.
var params = {
"returnFaceId": "true",
"returnFaceLandmarks": "false",
"returnFaceAttributes":
"age,gender,headPose,smile,facialHair,glasses,emotion," +
"hair,makeup,occlusion,accessories,blur,exposure,noise"
};
// Display the image.
var sourceImageUrl = document.getElementById("inputImage").value;
document.querySelector("#sourceImage").src = sourceImageUrl;
// Perform the REST API call.
$.ajax({
url: uriBase + "?" + $.param(params),
// Request headers.
beforeSend: function(xhrObj){
xhrObj.setRequestHeader("Content-Type","application/json");
xhrObj.setRequestHeader("Ocp-Apim-Subscription-Key",
subscriptionKey);
},
type: "POST",
// Request body.
data: '{"url": ' + '"' + sourceImageUrl + '"}',
})
.done(function(data) {
// Show formatted JSON on webpage.
$("#responseTextArea").val(JSON.stringify(data, null, 2));
})
.fail(function(jqXHR, textStatus, errorThrown) {
// Display error message.

var errorString = (errorThrown === "") ?
"Error. " : errorThrown + " (" + jqXHR.status + "): ";
errorString += (jqXHR.responseText === "") ?
"" : (jQuery.parseJSON(jqXHR.responseText).message) ?
jQuery.parseJSON(jqXHR.responseText).message :
jQuery.parseJSON(jqXHR.responseText).error.message;
alert(errorString);
});
};
</script>
4. Ejecute el script
Abra detect_faces.html en el explorador. Al hacer clic en el botón Analizar foto, la aplicación
debe mostrar la imagen de la dirección URL dada e imprimir una cadena JSON de los datos de
cara.

03 - Reconocimiento de voz a través de un micrófono
En este tutorial usará el SDK de Speech para reconocer de forma interactiva la voz de la entrada
de micrófono y obtener la transcripción del texto del audio capturado.
Es fácil integrar esta característica en las aplicaciones o dispositivos para tareas de
reconocimiento comunes, como transcribir conversaciones.
También se puede usar para integraciones más complejas, como el uso de Bot Framework con el
SDK de Voz para crear asistentes de voz.
Una vez que se cumplen los requisitos previos indicados en la siguiente sección, para realizar el
reconocimiento de voz a través de un micrófono solo son necesarios cuatro pasos:
 Cree un objeto SpeechConfig a partir de la clave y la región de suscripción.
 Cree un objeto SpeechRecognizer con el objeto SpeechConfig anterior.
 Con el objeto SpeechRecognizer, inicie el proceso de reconocimiento de una única
expresión.
 Inspeccione el objeto SpeechRecognitionResult devuelto.
Requisitos previos
 Una suscripción a Azure.
 Una vez que tenga la suscripción de Azure, cree un recurso de Text Analytics en Azure
Portal para obtener la clave y el punto de conexión.
para conectar la aplicación al servicio Text Analytics.
o Puede usar el plan de tarifa gratis (F0) para probar el servicio.

Creando el recurso de Speech: a) Buscando el servicio

Creando el recurso de Speech: b) Creación del recurso

Creando el recurso de Speech: c) Ingreso de información
Creando el recurso de Speech: d) Aprovisionamiento del recurso

Creando el recurso de Speech: e) Inicio rápido
Creando el recurso de Speech: f) Acceso a la llave y punto de conexión

Codificando el proyecto
1. Crea una carpeta llamada speech en la que trabajarás el proyecto.
2. Descarga el SDK de Speech desde el siguiente sitio
https://aka.ms/csspeech/jsbrowserpackage
Y descomprime los archivos en la carpeta speech

3. Crea una página speech_synthesis.html en la carpeta speech y con el código mostrado a
continuación.
<!DOCTYPE html>
<html>
<head>
<title>Microsoft Cognitive Services Speech SDK JavaScript Tutorial</title>
<meta charset="utf-8" />
</head>
<body style="font-family:'Helvetica Neue',Helvetica,Arial,sans-serif; font-
size:13px;">

<div id="warning">
<h1 style="font-weight:500;">Speech Recognition Speech SDK no encontrado (
falta el archivo microsoft.cognitiveservices.speech.sdk.bundle.js).</h1>
</div>
<div id="content" style="display:none">
<table width="100%">
<tr>
<td></td>
<td><h1 style="font-weight:500;">Microsoft Cognitive Services Speech SDK
JavaScript Tutorial</h1></td>
</tr>
<tr>
<td align="right"><a href="https://docs.microsoft.com/azure/cognitive-
services/speech-service/get-started" target="_blank">Subscription Key</a>:</td>
<td><input id="subscriptionKey" type="text" size="40"
value="subscription"></td>
</tr>
<tr>
<td align="right">Azure Region</td>
<td><input id="serviceRegion" type="text" size="40"
value="YourServiceRegion"></td>
</tr>
<tr>
<td></td>
<td><button id="startRecognizeOnceAsyncButton">Iniciar
reconocimiento</button></td>
</tr>
<tr>
<td align="right" valign="top">Results</td>
<td><textarea id="phraseDiv" style="display: inline-
block;width:500px;height:200px"></textarea></td>
</tr>
</table>
</div>



<script src="microsoft.cognitiveservices.speech.sdk.bundle.js"></script>

<script>
// Note: Replace the URL with a valid endpoint to retrieve
// authorization tokens for your subscription.
var authorizationEndpoint = "token.php";
function RequestAuthorizationToken() {
if (authorizationEndpoint) {
var a = new XMLHttpRequest();
a.open("GET", authorizationEndpoint);
a.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
a.send("");
a.onload = function() {
var token = JSON.parse(atob(this.responseText.split(".")[1]));
serviceRegion.value = token.region;
authorizationToken = this.responseText;
subscriptionKey.disabled = true;
subscriptionKey.value = "utilizando un token de autorización (f% para
refrescar)";
console.log("Token de autorización obtenido: " + token);
}
}
}
</script>



<script>
// status fields and start button in UI
var phraseDiv;
var startRecognizeOnceAsyncButton;
// subscription key and region for speech services.
var subscriptionKey, serviceRegion;
var authorizationToken;
var SpeechSDK;
var recognizer;
document.addEventListener("DOMContentLoaded", function () {
startRecognizeOnceAsyncButton =
document.getElementById("startRecognizeOnceAsyncButton");
subscriptionKey = document.getElementById("subscriptionKey");
serviceRegion = document.getElementById("serviceRegion");
phraseDiv = document.getElementById("phraseDiv");
startRecognizeOnceAsyncButton.addEventListener("click", function () {
startRecognizeOnceAsyncButton.disabled = true;
phraseDiv.innerHTML = "";

// if we got an authorization token, use the token. Otherwise use the
provided subscription key
var speechConfig;
if (authorizationToken) {
speechConfig =
SpeechSDK.SpeechConfig.fromAuthorizationToken(authorizationToken,
serviceRegion.value);
} else {
if (subscriptionKey.value === "" || subscriptionKey.value ===
"subscription") {
alert("Por favor ingresa tu Microsoft Cognitive Services Speech
subscription key");
return;
}
speechConfig =
SpeechSDK.SpeechConfig.fromSubscription(subscriptionKey.value,
serviceRegion.value);
}
speechConfig.speechRecognitionLanguage = "es-MX";
var audioConfig = SpeechSDK.AudioConfig.fromDefaultMicrophoneInput();
recognizer = new SpeechSDK.SpeechRecognizer(speechConfig, audioConfig);
recognizer.recognizeOnceAsync(
function (result) {
startRecognizeOnceAsyncButton.disabled = false;
phraseDiv.innerHTML += result.text;
window.console.log(result);
recognizer.close();
recognizer = undefined;
},
function (err) {
phraseDiv.innerHTML += err;
window.console.log(err);
recognizer.close();
recognizer = undefined;
});
});
if (!!window.SpeechSDK) {
SpeechSDK = window.SpeechSDK;
document.getElementById('content').style.display = 'block';
document.getElementById('warning').style.display = 'none';
// in case we have a function for getting an authorization token, call
it.

if (typeof RequestAuthorizationToken === "function") {
RequestAuthorizationToken();
}
}
});
</script>

</body>
</html>
4. Compilación y ejecución local del ejemplo
Para iniciar la aplicación, abra el archivo speech_synthesis.html con el explorador web.
Presentará una interfaz gráfica de usuario simple que le permitirá escribir su clave de suscripción
y región, y desencadenará un reconocimiento mediante el micrófono.

Taller de Azure Cognitive Services

Recomendados

Recomendados

Más contenido relacionado

Similar a Taller de Azure Cognitive Services

Similar a Taller de Azure Cognitive Services (20)

Más de Luis Beltran

Más de Luis Beltran (20)

Último

Último (20)

Taller de Azure Cognitive Services