MMIR Framework. Multimodal Mobile Interaction and Rendering Framework

Transkript

1 MMIR Framework Multimodal Mobile Interaction and Rendering Framework Workshop für Modellbasierte Entwicklung von Benutzerschnittstellen 2013, Koblenz Aaron Ruß, DFKI GmbH (Deutsches Forschungszentrum für Künstliche Intelligenz)

2 A report on work in progress MMIR FRAMEWORK

3 Dialog Benutzerschnittstelle: Multimodales Dialogsystem Dialogsystem für multimodale Interaktionen touch speech gesture

4 Dialog Benutzerschnittstelle: Multimodales Dialogsystem Mobiles Dialogsystem für multimodale Interaktionen touch speech gesture

5 Dialog Benutzerschnittstelle: Multimodales Dialogsystem Mobiles Dialogsystem für multimodale Interaktionen Lauffähig auf Desktop-Rechnern Mobilen Endgeräten touch speech gesture Ziele: Interaktionslogik auf dem mobilen Endgerät

6 Dialog Benutzerschnittstelle: Multimodales Dialogsystem Mobiles Dialogsystem für multimodale Interaktionen Lauffähig auf Desktop-Rechnern Mobilen Endgeräten Ziele: touch speech gesture portabel (einsetzbar auf möglichst vielen Plattformen) geringe Ressourcenbelastung (z.b. auch lauffähig auf mobilen Endgeräten) Kernfunktionalität / einfache Erweiterbarkeit für multimodale Interaktionen einfacher Einsatz und Erweiterbarkeit

7 Verwendete Technologien und Überblick ENTWICKLUNG MIT MMIR

8 MMIR Framework Realisierung mit Webtechnologie

9 MMIR Framework Realisierung mit Webtechnologie JavaScript-Interpreter Browser,

10 MMIR Framework Realisierung mit Webtechnologie Webtechnologie HTML, CSS, JavaScript

11 MMIR Framework Realisierung mit Webtechnologie + Apache Cordova TM (für Mobilplattformen) APACHE CORDOVA TM

12 MMIR Framework Realisierung mit Webtechnologie APACHE CORDOVA TM

13 MMIR Framework KONZEPTE UND ARCHITEKTUR

14 Model-View-Controller JavaScript Controller Application s GUI Process incoming requests Application s Data View Model HTML-Templates, CSS (ähnlich wie JSP/ASP) JavaScript, JSON 14

15 MVC Projekt-Struktur controllers/ JavaScript models/ JavaScript views/ layouts/ HTML templates 15

16 MVC: Applikationsentwicklung controllers/ ctrla.js ctrlb.js models/ modelk.js views/ modeli.js layouts/ ctrla.ehtml ctrlb.ehtml ctrla/ viewx.ehtml viewy.ehtml 16

17 MVC controllers/ ctrla.js ctrlb.js models/ modelk.js views/ modeli.js layouts/ ctrla.ehtml ctrlb.ehtml ctrla/ viewx.ehtml viewy.ehtml 17

18 MMIR Framework ARCHITEKTUR

19 MMIR Dialog System Architektur Input Semantic Rules Input Manager Interaction Manager Speech Touch Screen Semantic Interpreter Modality Automaton (SCXML) Action Planner Gesture Dialog Automaton (SCXML) Output Voice Graphics HTML Audio Multimodal Presentation Manager View2HTML CSS Models Controllers

20 W3C Multimodal Interaction Framework

21 MMIR Dialog System Ein- und Ausgabe Input Semantic Rules Input Manager Interaction Manager Speech Touch Screen Semantic Interpreter Modality Automaton (SCXML) Action Planner Gesture Dialog Automaton (SCXML) Output Voice Graphics HTML Audio Multimodal Presentation Manager View2HTML CSS Models Controllers

22 MMIR Framework-Architektur VERWENDUNG VON SCXML FÜR INPUT- UND APPLIKATIONSZUSTÄNDE

23 MMIR Dialog System Zustandsmechanismen Input Semantic Rules Input Manager Interaction Manager Speech Touch Screen Semantic Interpreter Modality Automaton (SCXML) Action Planner Gesture Dialog Automaton (SCXML) Output Voice Graphics HTML Audio Multimodal Presentation Manager View2HTML CSS Models Controllers

24 MMIR Dialog System Zustandsmechanismen Input Semantic Rules Input Manager Interaction Manager Speech Touch Screen Semantic Interpreter Modality Automaton (SCXML) Action Planner Gesture Dialog Automaton (SCXML) Output Input Manager Voice Fusion für Eingabe-Modalitäten Graphics HTML Audio Multimodal Presentation Manager State Machine für Modalität (SCXML) View2HTML CSS Models Controllers Action Planer Verwaltung der Anwendungszustände State Machine für Dialogzustand (SCXML)

25 W3C: Input Multimodal Interaction Framework

26 W3C: Input MMIR Semantic Interpreter (with JSON grammar) "JSON-Emma" Speech Controllers Models Input Manager (using SCXML ) HTML5 APIs (+ Cordova) Interaction Manager (using SCXML )

27 MMIR Framework-Architektur GRAMMATIK FÜR SPRACHKOMMANDOS

28 MMIR Dialog System Sprachgrammatik Input Semantic Rules Input Manager Interaction Manager Speech Touch Screen Semantic Interpreter Modality Automaton (SCXML) Action Planner Gesture Dialog Automaton (SCXML) Output Voice Graphics HTML Audio Multimodal Presentation Manager View2HTML CSS Models Controllers 28

29 { "tokens": { "V_PLAY_IMP": [ "spiel", "spiele" ], "V_SHOW_IMP": [ "zeig", "zeige" ], }, "utterances": { "PLAY_RADIO": { "phrases": [ } } }, // recognized sentences: // rules: "V_PLAY_IMP RADIO", "V_PLAY_IMP RADIO PREPOSITION", "V_PLAY_IMP RADIO THAT", Input "RADIO V_PLAY_INF", "RADIO V_PLAY_FIN", "THAT RADIO V_PLAY_INF", "V_PLAY_INF RADIO", "RADIO PREPOSITION", Speech "V_PLAY_RADIO_INF" ], "semantic": { // interpretation: "Play": { "type" : "radio" } } Touch Screen Gesture Audio MMIR Dialog System Sprachgrammatik Semantic Rules Semantic Interpreter Grammatik Output für Command & Multimodal Control Voice Presentation Definition als (strukturiertes) JSON Manager Graphics kontextfreie Grammatik (~ BNF) HTML View2HTML CSS Input Manager Modality Automaton (SCXML) Interaction Manager Action Planner Models Dialog Automaton (SCXML) Controllers 29

30 { "tokens": { "V_PLAY_IMP": [ "spiel", "spiele" ], "V_SHOW_IMP": [ "zeig", "zeige" ], }, "utterances": { "PLAY_RADIO": { "phrases": [ 1 } } // recognized sentences: // rules: "V_PLAY_IMP RADIO", "V_PLAY_IMP RADIO PREPOSITION", "V_PLAY_IMP RADIO THAT", Input "RADIO V_PLAY_INF", "RADIO V_PLAY_FIN", "THAT RADIO V_PLAY_INF", "V_PLAY_INF RADIO", "RADIO PREPOSITION", JSON-Grammatik }, Speech "V_PLAY_RADIO_INF" ], "semantic": { // interpretation: "Play": { "type" : "radio" } } Touch Screen Gesture Output Voice Graphics HTML Audio MMIR Dialog System 2 Sprachgrammatik Semantic Rules Semantic Interpreter 3 Multimodal Presentation Manager View2HTML Kompilierung zur ausführbarer Grammatik mit JavaScript-basierten Compiler (JS/CC) CSS Input Manager Modality Automaton (SCXML) Interaction Manager Action Planner Dialog Automaton (SCXML) ausführbare JavaScript-Grammatik (ASR-Parser) Models Controllers 30

31 MMIR Framework-Architektur AUSGABE: VIEWS & HTML TEMPLATES

32 MMIR Dialog System Rendering (GUI) Input Semantic Rules Input Manager Interaction Manager Speech Touch Screen Semantic Interpreter Modality Automaton (SCXML) Action Planner Gesture Dialog Automaton (SCXML) Output Voice Graphics HTML Audio Multimodal Presentation Manager View2HTML CSS Models Controllers

33 MMIR Dialog System Graphische Darstellung Input Speech Touch Screen Gesture Output Voice Graphics HTML Audio Semantic Rules Semantic Interpreter Multimodal Presentation Manager View2HTML CSS Input Manager Modality Automaton (SCXML) View2HTML Interaction Manager Action Planner Dialog Automaton (SCXML) HTML-Darstellung der Views gemäß MVC-Modell (Model-View-Controller) Client-basierter Template- Models Controllers Mechanismus Dynamische Template-Ausdrücke ~ ähnlich wie bei JSP, ASP, (nicht Server-basiert)

34 W3C: Output Multimodal Interaction Framework

35 W3C: Output MMIR Controllers Voice Views ehtml Models HTML, CSS, Presentation Manager HTML5 APIs (+ Cordova) Interaction Manager (using SCXML )

36 MMIR HTML Generator: Presentation Manager In HTML eingebettete Template-Ausdrücke für die dynamische Erzeugung von Ansichten (views) layout view rendered result <!DOCTYPE html> <html> "jqm-extentions" ) </head> <body> <div id="pagecontainer" data-role="page" data-url="pagecontainer" data-cache="false" > <div id="pageheader" data-role="header" </div> <div id="pagecontent" </div>... </div> </body> </dialogs> </h1> </h2> <div id=" field" data-role="fieldcontain" > <label </label> <input type="text" name=" " id=" " /> </div>... }@ <blockquote id="language-menu-panel" class="ui-body-a </blockquote>

37 MMIR HTML Generator: Presentation Manager In HTML eingebettete Template-Ausdrücke für die dynamische Erzeugung von Ansichten (views) layout view rendered result <!DOCTYPE html> <html> "jqm-extentions" ) </head> <body> <div id="pagecontainer" data-role="page" data-url="pagecontainer" data-cache="false" > <div id="pageheader" data-role="header" </div> <div id="pagecontent" </div>... </div> </body> </dialogs> </h1> </h2> <div id=" field" data-role="fieldcontain" > <label </label> <input type="text" name=" " id=" " /> </div>... }@ <blockquote id="language-menu-panel" class="ui-body-a </blockquote>

38 Beispiel: Partial View (HTML Template) partial = mobileds.languagemanager.getinstance().getlanguages(); }@ <ul id="languagelistview" class="ui-listview ui-listview-inset ui-corner-all ui-shadow" data-role="listview" data-theme="b" data-divider-theme="b" = = < }@ <li style="padding: 0px;" lang="@(@lang_code)"> <div class="flagiconheight" style="white-space: nowrap;"> <div id="flags-@(@lang_code)" class="flags"></div> <div style="display: </div> <div style="display: inline-block; height: 100%;"></div> </div> </li> </ul> en de

39 Beispiel: Partial View = mobileds.languagemanager.getinstance().getlanguages(); }@ <ul id="languagelistview" class="ui-listview ui-listview-inset ui-corner-all ui-shadow" data-role="listview" data-theme="b" data-divider-theme="b" = = < }@ <li style="padding: 0px;" lang="@(@lang_code)"> <div class="flagiconheight" style="white-space: nowrap;"> <div id="flags-@(@lang_code)" class="flags"></div> <div style="display: </div> <div style="display: inline-block; height: 100%;"></div> </div> </li> </ul> JavaScript-Block For-Schleife JavaScript-Ausdruck

40 MMIR Framework WEITERENTWICKKLUNG

41 Modalitätenverarbeitung Aktueller Stand Input Speech Touch Screen Voice Graphics HTML Audio Semantic Rules Semantic Interpreter Multimodal Presentation Manager View2HTML CSS Input Manager Modality Automaton (SCXML) Gesture Vorlage für zustandsbasierte Verarbeitung von Output Eingaben (input events) Input Manager (SCXML) Vorlage für zustandsbasierte Verarbeitung von Dialogabläufen Interaction Manager / Action Planner (SCXML) Offen: Methoden / Werkzeuge für Modellierung von Modalitätenfusion Werkzeugunterstützung von Modalitätenfusion Interaction Manager Action Planner Models Dialog Automaton (SCXML) Controllers MoBe Workshop

42 Figure taken from: Dumas, Bruno, Beat Signer, and Denis Lalanne. "A graphical uidl editor for multimodal interaction design based on smuiml." Proceedings of the workshop on software support for user interface description language Ansätze (1): Modalitätenverarbeitung Möglicher Ansatz: SMUIML* XML-Format zur Verknüpfung von 3 Ebenen 1. Anwendung (dialog) 2. Kommunikation (triggers, actions) 3. Implementierung (recoginzers) * SMUIML: Synchronized Multimodal User Interface Modelling Language

43 Ansätze (2): Modalitätenverarbeitung Möglicher Ansatz: MINT* Framework untergliedert in 3 Bereiche 1. UI-Objekte (Abstract / Concrete UI Model) definiert Zustände, Funktionalität etc. von UI-Elementen 2. Interaktionsobjekte (Interaction Ressources) definiert Zustände, Funktionalität etc. von Ein-/Ausgabegeräten 3. Verknüpfung / Fusion (Mapping Model) definiert Fusion, d.h. UI-Objekt op Interaktionsobjekt op: Operator zur Modalitätsverknüpfung gemäß Complementary, Assignment, Redundance, Equivalence, Sequence * MINT: MultimodalINTeraction Framework

44 MMIR: Mulitmodal Mobile Interaction and Rendering Framework Danke für Ihre Aufmerksamkeit!

45 MMIR Framework MMIR: Mobile Multimodal Interaction and Rendering MMIG-Team / Beitragende: Aaron Ruß Florian Petersen Matthias Feldmann Ehsan Gholamsaghahee Tatjana Scheffler Jessica Colnago als Open Source unter der MIT-Lizenz veröffentlicht auf GitHub: Kernkomponenten auf Basis von HTML5/JavaScript

46 MMIR Dialog System ZUSATZMATERIAL

47 Multimodale Interaktionen Touch Default-Interaktion für mobiles Endgerät Voice Sprachkommandos (Command & Control; Grammatik) Spracheingabe (Texteingabe durch Sprache; Freitext) Gesture / Sensors GPS/Kompass: Location-based Kontext Bewegung: Gesteneingabe Feedback: kontextabhängig von Eingabemodalität

48 State Chart XML SCXML <state id="some-state-a"> <transition event="goto-b" target="other-state-b" /> </state> goto-b some-state-a <state id="other-state-b"> </state> other-state-b

49 State Chart XML Conditional Transitions <state id="some-state-a"> some-state-a <transition cond="a!= 5" target="other-state-b" /> </state> a!= 5 <state id="other-state-b"> </state> other-state-b

50 State Chart XML Self-Transitions <state id="some-state-a"> <transition cond= a!= 5" target="other-state-b" /> <transition event= stay-at-a /> some-state-a stay-at-a </state>

51 State Chart XML Inner States (inheritance) outer inner outer inherited outer-state inner-state <state id="outer-state > <transition event="outer"... /> <state id="inner-state"> <transition event="inner"... /> </state> </state>

52 Spracherkennung Lösung Server/C lient Großes Vokabular Nativ Mobiles Web Grammatik basiert Audio- Zugriff Nuance Cloud ( ) * Google Cloud ** Android embedded Nuance VoCon Cloud Server (lokal) Pocketsphinx Client ( ) *** ( ) * * mit PhoneGap-Plugin ** Webschnittstelle, nur mit dem Chrome-Browser möglich *** Open Source: kleines Sprachmodell, schlechte Erkennungsergebnisse