Sessione "WinRT 8.1: speech API e NUI in Windows 8.1" tenuta in occasione dei Community Days di Roma il 25 settembre 2013

2. Grazie a
Sponsor

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

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

5. NUI
Si 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”.

6. 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.)

7. 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.

8. 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.

9. 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!!

10. 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;
• …

11. 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

12. SpeechSynthesizer SpeechSynthesisStream <MediaElement/>
TTS – Come funziona
Text/SSML
Voices

13. TTS – Come funziona
• La classe SpeechSynthesizer converte il
testo in uno stream audio
(SpeechSynthesisStream);
• Lo stream è riprodotto tramite un
<MediaElement>.

14. TTS – Testo semplice
Funzionalità 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 Using
End Sub
Creo l’istanza di
SpeechSynthesizer
Genero lo stream
audio
Riproduco l’audio
con il
MediaElement

15. 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

16. Ancora le voci
Possiamo 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

17. DEMO
Text to Speech – TTS Flower

18. 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.

19. TTS - Speech Synthesis Markup Language
Sezione dei metadati
(titolo, descrizione, e
tc., etc.)
Paragraph
Root element
Sentence (con
selezione della
lingua)
Selezione della
voce
(nome, sesso e
eta’)
Testo da
pronunciare Testo da
pronunciare con
enfasi

20. 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

21. 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

22. DEMO
Text to Speech – Text vs SSML

23. SSML e marker
I 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>

24. Gestire i marker
Ogni 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.Time
End Sub

25. SSML e Marker
Al 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 If
End Sub

26. DEMO
Text to Speech – Peanuts SSML

27. Pen & Ink
Il 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;
– …

28. Pen & Ink
L’utilizzo della penna come dispositivo di
input prevede due distinte fasi:
1. Gestione del tratto;
2. Riconoscimento della scrittura.

29. Gestione del tratto
Ingredienti:
• Una superfice di disegno
• Eventi di gestione dell’interazione del
dispositivo di input (la penna in questo
caso)
• Due righe di codice 

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

31. 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.

32. Gestione del tratto
Ogni volta che un dispositivo di input “tocca” un oggetto
sullo schermo, si scatenano una serie di eventi:
– PointerPressed;
– PointerMoved;
– PointerReleased;
– PointerEntered;
– PointerExited;
– ….

33. DEMO
Pen & Ink – Free Hand Design

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

35. Riconoscimento della scrittura
Possiamo implementare il riconoscimento
della scrittura grazie alla classe InkManager.

36. DEMO
Pen & Ink – InkMath

37. Conclusioni
Text 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!!

38. Q&A
Tutto il nateriale di questa sessione su
http://www.communitydays.it/
#CDays13