WinRT 8.1: speech API e NUI in Windows 8.1

WIN804 - WinRT 8.1: speech API e NUI in Windows 8.1

#CDays13 – 24, 25 e 26 settembre 2013, Roma

Massimo Bonanni

.NET Senior Developer - MVP

[email protected]: @massimobonannihttp://codetailor.blogspot.com

Grazie aSponsor

Agenda• Introduzione• Text to Speech• Pen & Ink• Conclusioni

IntroduzioneText to Speech e riconoscimento della scrittura sono due strumenti permettono di realizzare Natural User Interface (NUI).

NUISi definisce NUI l’interfaccia di un sistema in cui gli utenti riescono ad interagire utilizzando un approccio «naturale» cioè riescono ad utilizzare le funzionalità del sistema senza l’uso di dispositivi artificiali (come mouse, trackball o tastiera).

Una NUI ben scritta e implementata risulta più semplice da utilizzare e non ha bisogno di “addestramento”.

NUI - Vantaggi• Rapido apprendimento delle funzionalità;

• L’utente è in grado di diventare «esperto» sull’interfaccia in minor tempo;

• Può aiutare portatori di handicap nell’utilizzo del sistema;

• Puo’ aiutare in casi in cui non si possono utilizzare i mezzi convenzionali (mouse, tastiera, etc., etc.)

Voice interaction - Perchè• Due braccia non bastano:

– Entrambe sono occupate a tenere qualcosa (la spesa, il volante, il bimbo)

• Parlare è più facile che scrivere:– I telefoni hanno la tastiera piccolo– I tablet non hanno la tastiera fisica

Ad esempio: L'interazione vocale consente a un utente di inviare un testo rapidamente, senza staccare le mani dal volante o gli occhi dalla strada.

Voice interaction - Perchè• L’attenzione è concentrata su altro:– sto camminando, pedalando, guidando

• Devo eseguire un’operazione velocemente:– dire “Nota: comprare un litro di latte” è più veloce

che aprire l’applicazione e digitare

Ad esempio: L'utente può premere il pulsante Bluetooth dell’auricolare e controllare musica mentre il telefono è in tasca con comandi vocali.

Quando usare la voce• Saltare ad una funzione particolare dell’app:

“Riproduci Michael Jackson”;

• Trovare qualcosa velocemente: “Cerca ristorante a Roma”

• Il numero di passaggi da eseguire con il touch è alto: “Chiama Mario Rossi cellulare”

• ….

Utilizzate la voce quando è più facile e veloce rispetto all’equivalente funzionalità touch!!

Quando NON usare la voce• Si ha bisogno di controllo preciso sull’interfaccia:

Una serie di comandi ripetuti non sono adatti;

• La pronuncia di qualche parola della funzionalità non è facile: Un url in una pagina web;

• L’ambiente circostante non è adatto: Nel pieno di una stazione affollata;

• Nel comando vocale ci sono dati sensibili:La privacy prima di tutto;

• …

Text to Speech

• Sintetizzazione vocale per semplici stringhe di testo;

• Voci di alta qualità per differenti linguaggi;

• Supporto per la modifica di intonazione, ritmo e cadenza;

• Possibilità di gestire dei markers

SpeechSynthesizer SpeechSynthesisStream

<MediaElement/>

TTS – Come funziona

Text/SSML

Voices

TTS – Come funziona• La classe SpeechSynthesizer

converte il testo in uno stream audio (SpeechSynthesisStream);

• Lo stream è riprodotto tramite un <MediaElement>.

TTS – Testo sempliceFunzionalità di base del Text to Speech.Permette di “pronunciare” una stringa

Public Async Sub PlayText(text As String) Using synth = New SpeechSynthesizer() Dim synthStream = Await synth.SynthesizeTextToStreamAsync(text) MediaElement.SetSource(synthStream, synthStream.ContentType) MediaElement.Play() End UsingEnd Sub

Creo l’istanza di SpeechSynthesi

zer

Genero lo stream audioRiproduco

l’audio con il MediaElement

Sento le “voci”La classe SpeechSynthesizer fornisce l’elenco delle voci installate nel sistema:

Public Function GetItalianVoice() As VoiceInformation Dim voices = SpeechSynthesizer.AllVoices Return voices.FirstOrDefault(Function(v) v.Language = "it-IT")End Function

Ancora le vociPossiamo selezionare una qualsiasi voce installata e usarla nell’istanza di SpeechSynthesizer:

Using synth = New SpeechSynthesizer() synth.Voice = GetItalianVoice() Dim synthStream = Await synth.SynthesizeTextToStreamAsync("Ciao!") MediaElement.SetSource(synthStream, synthStream.ContentType) MediaElement.Play()End Using

DEMOText to Speech – TTS Flower

TTS - Speech Synthesis Markup Language

«E’ un linguaggio di markup basato su XML e orientato ai sistemi di conversione del testo in parlato, per

controllarne e ottimizzarne la resa»

Le specifiche del linguaggio sono dettate dal gruppo di studio "Voice browser" del W3C e sono disponibili all’indirizzo:

http://www.w3.org/TR/speech-synthesis/

Trova frequente applicazioni in script per sistemi di telefonia interattiva automatizzata e per la produzione di audiolibri.

TTS - Speech Synthesis Markup Language

Sezione dei metadati (titolo, descrizione, etc.,

etc.)

Paragraph

Root element

Sentence (con selezione della

lingua)Selezione della

voce (nome, sesso e eta’)

Testo da pronunciare Testo da

pronunciare con enfasi

Perche’ SSML

Esempi di utilizzo dei tag SSML:

– Dare un’inflessione più umana alla macchina:<prosody pitch='x-high' rate='slow'>Have a good day</prosody>

– Pronunciare numeri ordinali invece che cardinali:<say-as interpret-as='number_ordinal'>1</say-as>

– Pronunciare date o ore:<say-as interpret-as='date_md'>10.20</say-as>

– Pronunciare singole cifre anzichè numeri interi:<say-as interpret-as='number_digit'>12345</say-as>

– Aggiungere pause:Press 1 or wait for tone.<break time='3s'/> I didn't hear you! <break strength='weak'/>Please repeat

Il Synthesizer è in grado di utilizzare file secondo le specifiche SSML versione 1.0:

TTS - Speech Synthesis Markup Language

Public Async Function PlaySSML() As Task Dim synth = New SpeechSynthesizer() Dim ssmlString = Await LoadSSMLFile("SSML.xml") Dim stream = Await synth.SynthesizeSsmlToStreamAsync(ssmlString) MediaElement.SetSource(synthStream, synthStream.ContentType) MediaElement.Play()End Function

DEMOText to Speech – Text vs SSML

SSML e markerI marker sono dei tag che consentono di definire marcatori temporali (una sorta di milestone).

Un marker è identificato da un nome (obbligatorio).

<?xml version="1.0"?> <speak version="1.0" xmlns="http://www.w3.org/2001/10/synthesis"

xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"xsi:schemaLocation="http://www.w3.org/2001/10/synthesis

http://www.w3.org/TR/speech-synthesis/synthesis.xsd"xml:lang="en-US">

Go from <mark name="here"/> here, to <mark name="there"/> there! </speak>

Gestire i markerOgni volta che il MediaElement raggiunge un marker all’interno dello stream che sta riproducendo, solleva l’evento MarkerReached:

Private Sub MediaElement_MarkerReached(sender As Object, e As TimelineMarkerRoutedEventArgs) Dim markerName = e.Marker.Text Dim markerTimestamp = e.Marker.TimeEnd Sub

SSML e MarkerAl momento, lo stream generato dal metodo SynthesizeSsmlToStreamAsync, pur supportando i markers, non è in grado di comunicarli al MediaElement.

Per poter gestire tali marker dobbiamo, dopo aver generato lo stream, creare gli opportuni marker nell’istanza del media element:

Public Sub SetSpeechSynthesisSource(control As MediaElement, stream As SpeechSynthesisStream) If control Is Nothing Then Throw New NullReferenceException("MediaElement") control.SetSource(stream, stream.ContentType) If stream.Markers IsNot Nothing Then For index = 0 To stream.Markers.Count() - 1 Dim marker = stream.Markers(index) control.Markers.Add(New TimelineMarker() With {.Text = marker.Text, .Time = marker.Time, .Type = marker.MediaMarkerType}) Next End IfEnd Sub

DEMOText to Speech – Peanuts SSML

Pen & InkIl supporto alla penna e al riconoscimento della scrittura apre nuovi interessanti scenari per le nostre applicazioni:

– Scenari didattici (questionari, esercizi per bambini);– Scenari industriali (checklist di produzione);– Chioschi informativi;– …

Pen & InkL’utilizzo della penna come dispositivo di input prevede due distinte fasi:

1. Gestione del tratto;2. Riconoscimento della scrittura.

Gestione del trattoIngredienti:• Una superfice di disegno• Eventi di gestione dell’interazione del

dispositivo di input (la penna in questo caso)

• Due righe di codice

Gestione del trattoUna ottima superficie di disegno per la gestione del tratto e’ il <Canvas> che consente facilmente di creare oggetti e linee al suo interno

Gestione del tratto• Un qualsiasi “oggetto” che può avere

interazione con lo schermo viene astratto con il concetto di Pointer;

• Un pointer rappresenta un singolo input proveniente da un device di input sia esso uno o più dita, il mouse, una penna o altro.

Gestione del trattoOgni volta che un dispositivo di input “tocca” un oggetto sullo schermo, si scatenano una serie di eventi:

– PointerPressed;– PointerMoved;– PointerReleased;– PointerEntered;– PointerExited;– ….

DEMOPen & Ink – Free Hand Design

Riconoscimento della scrittura

Windows 8.0 supporta il riconoscimento della scrittura fin dalle prime versioni.

Riconoscimento della scrittura

Possiamo implementare il riconoscimento della scrittura grazie alla classe InkManager.

DEMOPen & Ink – InkMath

ConclusioniText to Speech e Penna sono ingredienti per realizzare interface più user-friendly e come tali vanno usati: QB!!!

Se danno un valore aggiunto ben vengano, altrimenti rimangono un mero esercizio stilistico e, in quanto tale, inutile!!

Q&ATutto il nateriale di questa sessione suhttp://www.communitydays.it/

#CDays13