Der Begriff Computer-Supported Collaborative Work (CSCW) „is a generic term that combines the understanding of the way people work in groups with the enabling technologies of computer networking and associated hardware, software, services and techniques.“ (Wilson, 1991, S.1). Hierfür wurden über die Jahre verschiedene Werkzeuge entwickelt, um das kollaborative Arbeiten zu unterstützen. Ein Beispiel hierfür ist das Konferenzsystem Accelerator der Hochschule Reutlingen. Das vorliegende Projekt beschäftigt sich mit diesem System und stellt eine Implementierung im Bereich „Barrierefreiheit/3D” vor.
Der Begriff Computer-Supported Collaborative Work (CSCW) „is a generic term that combines the understanding of the way people work in groups with the enabling technologies of computer networking and associated hardware, software, services and techniques.“ (Wilson, 1991, S.1). Hierfür wurden über die Jahre verschiedene Werkzeuge entwickelt, um das kollaborative Arbeiten zu unterstützen. Ein Beispiel hierfür ist das Konferenzsystem Accelerator der Hochschule Reutlingen. Es bietet neben den Möglichkeiten von vergleichbaren Tools (z. B. Zoom oder Skype) auch weitere Funktionen. Eine dieser Funktionen sind Dragables. Dragables sind z. B. Formen und Notizzettel, die die Teilnehmer kontrollieren und beschriften können und die für alle sichtbar sind. Der Accelerator ist spezialisiert darauf, dass die Teilnehmer kollaborativ Arbeiten können. Das vorliegende Projekt beschäftigt sich mit diesem System und stellt eine Implementierung im Bereich „Barrierefreiheit/3D” vor. Barrierefreiheit ist ein Feld, welches viele verschiedene Themen und Lösungen beinhaltet. In diesem Projekt soll es speziell um die Barrierefreiheit für Menschen mit Hörschädigungen gehen. Die Implementierung eines Speech-to-text-Tools, was in Tools wie z.B. Zoom bereits existiert, ist für den Accelerator dabei ein Teilziel. Dabei soll das Gesprochene des Moderators als Untertitel für alle anderen Teilnehmer dargestellt werden. Dieses Projekt möchte an dieser Stelle jedoch einen Schritt weiter gehen und einen Gebärden-Avatar implementieren. Dieser soll den Untertitel in Gebärden darstellen, womit eine Speech-to-Sign Umwandlung realisiert werden kann.
Der Accelerator ist unter https://accelerator.reutlingen-university.de/ erreichbar.
<h3>Motivation</h3>
Besonders in der Zeit der COVID-19 Pandemie wird CSCW ein immer wichtiger werdender Bestandteil der Lehre und des Arbeitslebens. Unter Einsatz verschiedener Technologien wird Zusammenarbeit trotz Kontaktbeschränkungen möglich. Ein wichtiger Aspekt ist hierbei die Barrierefreiheit solcher Technologien. Diese sollten so gestaltet sein, dass jeder Mensch sie verwenden kann. Aus diesem Grund befasst sich das Projekt mit der barrierefreien Gestaltung des Accelerators.
Besonders in der Zeit der COVID-19 Pandemie wird CSCW ein immer wichtiger werdender Bestandteil der Lehre und des Arbeitslebens. Unter Einsatz verschiedener Technologien wird so Zusammenarbeit trotz Kontaktbeschränkungen möglich. Ein wichtiger Aspekt ist hierbei die Barrierefreiheit solcher Technologien. Diese sollten so gestaltet sein, dass jeder Mensch sie verwenden kann. Aus diesem Grund befasst sich das Projekt mit der barrierefreien Gestaltung des Accelerators.
<h3>Idee</h3>
Das grundlegende Ziel dieses Projektes ist es, den Accelerator für Menschen mit Hörbeeinträchtigungen zugänglich zu machen. Diese Menschen können an diversen Graden an Hörbeeinträchtigung bis zu komplettem Hörverlust leiden und daher große Schwierigkeiten haben andere Teilnehmer im Accelerator zu verstehen. Eine Alternative zu Audio soll durch den Einsatz von Untertiteln und Gebärden durch einen animierten Avatar angeboten werden. Hierbei wird das Gesprochene (in Echtzeit) transkribiert und zusätzlich die passenden Gebärden dargestellt. Gebärden sind dabei wichtig für diese Zielgruppe, da die Gebärdensprache oftmals die Muttersprache ist und die deutsche Schriftsprache und Grammatik nur eine Zweitsprache darstellt.
Das grundlegende Ziel dieses Projektes ist es, den Accelerator für Menschen mit Hörschädigung zugänglich zu machen. Diese Menschen können an diversen Graden an Hörbeeinträchtigung bis zu kompletten Hörverlust leiden und daher große Schwierigkeiten haben, andere Teilnehmer im Accelerator zu verstehen. Eine Alternative zu Audio soll durch den Einsatz von Untertiteln und Gebärden von einem animierten Avatar angeboten werden. Hierbei wird das Gesprochene in Echtzeit transkribiert und zusätzlich die passenden Gebärden dargestellt. Gebärden sind dabei wichtig für diese Zielgruppe, da die Gebärdensprache oftmals die Muttersprache von Hörgeschädigten ist und die deutsche Schriftsprache und Grammatik bei dieser Gruppe nur eine Zweitsprache darstellt.
<h2>Konzeption</h2>
Im Rahmen dieses Projekts wurde eine Komponente für den Accelerator implementiert, welche gesprochene Sprache in Gebärdensprache (Speech to Sign Language) umwandelt und diese in Form eines 3D-Avatars und Untertiteln in deutscher Schriftsprache darstellt. In diesem Kapitel wird die Konzeption des Projektes beschrieben.
<h3>Spracherkennung</h3>
Um das Gesagte in Gebärden anzeigen zu können, muss dies in einem ersten Schritt in Text umgewandelt werden. Aus diesem Grund muss eine Spracherkennung im Accelerator eingebunden werden. Hierfür wird häufig auf Deep Learning zurückgegriffen und ein neuronales Netz trainiert. Es existieren bereits viele Tools, mit denen sich die Spracherkennung in bereits vorhandene Projekte integrieren lässt, ohne selber ein neuronales Netz trainieren zu müssen. Diese Option wurde daher auch für den Accelerator in Betracht gezogen und eine Recherche zu den Tools durchgeführt. In den folgenden Absätzen werden drei Tools vorgestellt, welche im Rahmen der Recherche identifiziert wurden: Web Speech API, Watson Speech to text und Dialogflow.<br><br>
Um Gesagtes in Gebärden anzeigen zu können, soll dies in einem ersten Schritt in Text umgewandelt werden. Hierzu muss eine Spracherkennung im Accelerator eingebunden werden. Für Spracherkennungen wird häufig auf Deep Learning zurückgegriffen und ein neuronales Netz trainiert. Es existieren bereits viele Tools, mit denen sich die Spracherkennung in bereits vorhandene Projekte integrieren lässt, ohne selbst ein neuronales Netz trainieren zu müssen. Diese Option wurde daher auch für den Accelerator in Betracht gezogen und eine Recherche zu den Tools durchgeführt. In den folgenden Absätzen werden drei Tools vorgestellt, welche im Rahmen der Recherche identifiziert wurden: Web Speech API, Watson Speech to text und Dialogflow.<br><br>
Die <ahref="https://developer.mozilla.org/en-US/docs/Web/API/Web_Speech_API">_Web Speech API_</a> ist ein open-source Tool zur Spracherkennung und -ausgabe und wird von Mozilla angeboten. Dadurch, dass das Tool für jeden zur Verfügung steht, ist keine vorgegebene Zeitbeschränkung für die Spracherkennung gegeben. Es wurde speziell für Webbrowser entwickelt, um auch hier die Spracherkennung und -ausgabe zu ermöglichen. Die API wird mit JavaScript verwendet und ist somit leicht in Webprojekte implementierbar. Jedoch ist die Web Speech API noch kein ausgereiftes Produkt und unterstützt die Spracherkennung momentan nur für den Google Chrome Browser. <br>
Die <ahref="https://developer.mozilla.org/en-US/docs/Web/API/Web_Speech_API">_Web Speech API_</a> ist ein von Mozilla angebotenes Open Source Tool zur Spracherkennung und -ausgabe. Dadurch, dass das Tool frei zur Verfügung steht, ist keine vorgegebene Zeitbeschränkung für die Spracherkennung gegeben. Es wurde speziell für Webbrowser entwickelt, um auch hier die Spracherkennung und -ausgabe zu ermöglichen. Die API wird mit JavaScript verwendet und ist somit leicht in Webprojekte implementierbar. Die Web Speech API ist jedoch noch kein ausgereiftes Produkt und unterstützt die Spracherkennung momentan nur für den Google Chrome Browser. <br>
Das Tool <ahref="https://cloud.ibm.com/catalog/services/speech-to-text">_Watson Speech to text_</a> ist ein Service der IBM Cloud zur Spracherkennung und -transkribierung. Es bietet verschiedene Schnittstellen zur Einbindung in eigene Projekte an und das Sprachmodell, mit dem der Service arbeitet, ist anpassbar. Außerdem können in einem Gespräch die Stimmer verschiedener Sprecher identifiziert werden. Der Nachteil an diesem Tool sind die Kosten. In der “Lite”-Version des Tools sind die ersten 500 Minuten pro Monat kostenfrei. Alles was darüber hinausgeht, muss bezahlt werden. Das bedeutet, dass lediglich 8 Stunden und 20 Minuten pro Monat aufgenommen und transkribiert werden können. <br>
Das Tool <ahref="https://cloud.ibm.com/catalog/services/speech-to-text">_Watson Speech to text_</a> ist ein Service der IBM Cloud zur Spracherkennung und -Transkribierung. Es bietet verschiedene Schnittstellen zur Einbindung in eigene Projekte an und das Sprachmodell, mit dem der Service arbeitet, ist anpassbar. Außerdem können in einem Gespräch die Stimmen verschiedener Sprecher identifiziert werden. Der Nachteil an diesem Tool sind die Kosten. In der “Lite”-Version des Tools sind die ersten 500 Minuten pro Monat kostenfrei. Alles, was darüber hinausgeht, muss bezahlt werden. Das bedeutet, dass lediglich 8 Stunden und 20 Minuten pro Monat aufgenommen und transkribiert werden können. <br>
<ahref="https://cloud.google.com/dialogflow/docs?hl=de">_Dialogflow_</a> ist ein Service der Google Cloud, welcher dazu verwendet werden kann, Spracherkennung in verschiedene Anwendungen, wie zum Beispiel Webanwendungen oder Sprachassistenten, einzubinden. Es existieren zwei verschiedene Dienste (Dialogflow CX und Dialogflow ES), welche sich an der Komplexität des zu implementierenden Agenten ausrichten. Es existiert zu Dialogflow ES eine Testversion, jedoch enthält diese verschiedene Begrenzungen wie beispielsweise eine Beschränkung von 1.000 Anfragen pro Tag <sup>1</sup>. <br>
<ahref="https://cloud.google.com/dialogflow/docs?hl=de">_Dialogflow_</a> ist ein Service der Google Cloud, welcher dazu verwendet werden kann, Spracherkennung in verschiedene Anwendungen, wie zum Beispiel Webanwendungen oder Sprachassistenten, einzubinden. Es existieren zwei verschiedene Dienste, Dialogflow CX und Dialogflow ES, welche sich an der Komplexität des zu implementierenden Agenten ausrichten. Zu Dialogflow ES existiert eine Testversion, jedoch enthält diese verschiedene Begrenzungen wie beispielsweise eine Beschränkung von 1.000 Anfragen pro Tag <sup>1</sup>. <br>
Mit Hinblick auf eine dauerhafte und freie Nutzung eines Spracherkennungs-Tools im Accelerator werden die Tools Watson Speech to text und Dialogflow im Rahmen dieses Projektes nicht verwendet. Aufgrund der leichten Implementierung der Web Speech API durch JavaScript-Code in Webprojekte und die uneingeschränkte Nutzungsdauer der Spracherkennung fiel die Entscheidung auf dieses Tool.
Mit Hinblick auf eine dauerhafte und freie Nutzung eines Spracherkennungs-Tools im Accelerator werden die Tools Watson Speech to text und Dialogflow im Rahmen dieses Projektes nicht verwendet. Aufgrund der leichten Implementierung der Web Speech API durch JavaScript-Code in Webprojekte und die uneingeschränkte Nutzungsdauer der Spracherkennung fiel die Entscheidung auf dieses Tool. In Kapitel 3.1. wird die genaue Implementierung der Spracherkennung mit der Web Speech API beschrieben.
<h3>Gebärdensprache</h3>
Die erkannte Sprache sollte anschließend in Gebärdenanimationen umgewandelt werden. Hierzu wurde zunächst eine erste Grobrecherche durchgeführt. Dabei ergab sich zu Beginn des Projektes der Plan die erkannten Texte zunächst zu analysieren und anschließend in Gebärdengrammatik umzustellen. Für die Analyse wurde dabei zunächst ermittelt, dass von der Universität Leipzig das Angebot der Leipzig Corpora Collection <ahref="http://api.corpora.uni-leipzig.de/ws/swagger-ui.html#/word-service/getWordRelationsUsingGET">Leipzig Corpora Collection</a> besteht, welches eine API für den deutschen Wortschatz zur Verfügung stellt . Über diese können deutsche Texte auf die vorhandenen Wörter und deren Eigenschaften untersucht werden. So wurde der Plan entwickelt die erkannten Texte mithilfe dieser API zunächst auf die enthaltenen Worte und Wortarten zu analysieren. Anschließend sollten diese Informationen genutzt werden, um die bestehende Grammatik mithilfe von Context-Free Grammar in Gebärdengrammatik umzuwandeln. Hierzu wurde eine Recherche zum grammatikalischen Aufbau von Sätzen der deutschen Gebärdensprache (DGS) durchgeführt. Dabei hat sich herausgestellt, dass die DGS über eine vollständige eigene Grammatik verfügt. Der Satz Wie alt bist du? würde in der Gebärdensprache du, wie alt? gebärdet werden. Des Weiteren hat die Gebärdensprache keine offizielle Schriftform. Es ist also schwierig einen Zwischenschritt in der Übersetzung hin zur Darstellung durch einen Gebärden-Avatar einzulegen. Das heißt die Schriftsprache des Deutschen kann nicht in die Schriftsprache der Gebärdensprache übersetzt werden, weil diese offiziell nicht existiert. Es gibt zwar Ansätze und Versuche, Gebärdensprache schriftlich darzustellen, jedoch finden diese in der Praxis keine Anwendung. Außerdem sind diese Schriften sehr kompliziert. Der Grund hierfür ist, dass für die schriftliche Darstellung der Lautsprache nur eine Repräsentation, also ein oder mehrere Buchstaben, des Lautes benötigt wird. Eine Schrift der Gebärdensprache muss mehr Informationen darstellen, z.B. Ausführungsstelle, Mundbild, Mimik oder Handflächen-Orientierung. Um diese fehlende Schriftsprache zu umgehen sollten die Worte in ihrer Grundform direkt in Gebärden umgesetzt und damit ein “Wörterbuch” erstellt werden. So könnte das Gesprochene zunächst analysiert, in die Grundform umgewandelt, in die neue Satzstruktur umgestellt und mithilfe des Wörterbuchs in Animationen dargestellt werden.<br><br>
Die erkannte Sprache soll nach der Umwandlung in Text anschließend in Gebärden-Animationen umgewandelt werden. Hierzu wurde zunächst eine erste Übersichts-Recherche durchgeführt. Dabei ergab sich zu Beginn des Projektes der Plan, die erkannten Texte zunächst zu analysieren und anschließend in Gebärden-Grammatik umzustellen. Für die Analyse wurde dabei zunächst ermittelt, dass von der Universität Leipzig das Angebot der Leipzig Corpora Collection <ahref="http://api.corpora.uni-leipzig.de/ws/swagger-ui.html#/word-service/getWordRelationsUsingGET">Leipzig Corpora Collection</a> besteht, welches eine API für den deutschen Wortschatz zur Verfügung stellt . Über diese können deutsche Texte auf die vorhandenen Wörter und deren Eigenschaften untersucht werden. So wurde der Plan entwickelt, die erkannten Texte mithilfe dieser API zunächst auf die enthaltenen Worte und Wortarten zu analysieren.<br>
Anschließend sollen diese Informationen genutzt werden, um die bestehende Grammatik mithilfe von Context-Free Grammar in Gebärden-Grammatik umzuwandeln. Hierzu wurde eine Recherche zum grammatikalischen Aufbau von Sätzen der deutschen Gebärdensprache (DGS) durchgeführt. Dabei hat sich herausgestellt, dass die DGS über eine vollständige eigene Grammatik verfügt. Der Satz “Wie alt bist du?” würde in der Gebärdensprache “du, wie alt?” gebärdet werden. Des Weiteren hat die Gebärdensprache keine offizielle Schriftform. Es ist also schwierig einen Zwischenschritt in der Übersetzung hin zur Darstellung durch einen Gebärden-Avatar einzulegen. Das heißt, dass die Schriftsprache des Deutschen nicht in die Schriftsprache der Gebärdensprache übersetzt werden kann, weil diese offiziell nicht existiert. Es gibt zwar Ansätze und Versuche, Gebärdensprache schriftlich darzustellen, jedoch finden diese in der Praxis keine Anwendung. Außerdem sind diese Schriften sehr kompliziert. Der Grund hierfür ist, dass für die schriftliche Darstellung der Lautsprache nur eine Repräsentation, also ein oder mehrere Buchstaben, des Lautes benötigt wird. Eine Schrift der Gebärdensprache muss mehr Informationen darstellen, z. B. Ausführungsstelle, Mundbild, Mimik oder Handflächen-Orientierung. Um diese fehlende Schriftsprache zu umgehen, sollen die Worte in ihrer Grundform direkt in Gebärden umgesetzt und damit ein “Wörterbuch” erstellt werden. So könnte das Gesprochene zunächst analysiert, in die Grundform umgewandelt, in die neue Satzstruktur umgestellt und mithilfe des Wörterbuchs in Animationen dargestellt werden.<br><br>
Bei den ersten Versuchen der Umsetzung dieses Plans haben sich jedoch mehrere Schwierigkeiten herauskristallisiert. Die größte Schwierigkeit stellte dabei die Analyse der gesprochenen Sprache dar. Da Deutsch über eine Vielzahl verschiedener Satzstrukturen verfügt ist es schwierig zu ermittelt, bei welchem Wort es sich um Subjekt, Verb, Objekt, Nebenverb oder Ähnliches handelt. Ohne diese Information kann jedoch das Konzept der Context-Free Grammar nicht angewendet werden, um die bestehenden Satzstrukturen in Neue umzuwandeln. Zudem nutzt der Accelerator Node.js als Programmiersprache, welche wiederum nur wenige Möglichkeiten zum Natural Language Processing bietet. Eine weitere Herausforderung stellte sich außerdem bei der DGS-Grammatik, da diese auch über flexible Elemente, wie das Zeigen auf eine bestimmte Person im Raum, verfügt, welche so in der deutschen gesprochenen Sprache nicht existieren und schwer übersetzt werden können. Außerdem stellte sich bei der Recherche zu bereits bestehenden Projekten heraus, dass aktuelle Ansätze Deep-Learning einsetzen. Dies ist beispielsweise im Projekt von Saunders et al. (2020) der Fall, in welchem Gebärdensprach-Übersetzungen aus dem Fernsehen eingesetzt werden, um Übersetzungen zwischen DGS und gesprochenem Deutsch zu erstellen. Der Zugriff auf das Gesprochene als auch auf die gebärdete Übersetzung stellt sich hierbei als großer Vorteil heraus und das Projekt konnte vielversprechende Ergebnisse erzielen. Leider stehen die Technik und die Ressourcen dieser Ansätze in diesem Projekt nicht nicht zur Verfügung.<br>
Bei den ersten Versuchen der Umsetzung dieses Plans haben sich jedoch mehrere Schwierigkeiten herauskristallisiert. Die größte Schwierigkeit stellte dabei die Analyse der gesprochenen Sprache dar. Da Deutsch über eine Vielzahl verschiedener Satzstrukturen verfügt, ist es schwierig zu ermittelt, bei welchem Wort es sich um Subjekt, Verb, Objekt, Nebenverb oder Ähnliches handelt. Ohne diese Information kann jedoch das Konzept der Context-Free Grammar nicht angewendet werden, um die bestehenden Satzstrukturen in Neue umzuwandeln. Zudem nutzt der Accelerator Node.js als Serverumgebung, welche wiederum nur wenige Möglichkeiten zum Natural Language Processing bietet. Eine weitere Herausforderung stellte sich außerdem bei der DGS-Grammatik, da diese auch über flexible Elemente wie das Zeigen auf eine bestimmte Person im Raum verfügt, welche so in der deutschen gesprochenen Sprache nicht existieren und schwer übersetzt werden können. Außerdem stellte sich bei der Recherche zu bereits bestehenden Projekten heraus, dass aktuelle Ansätze vor allem Deep Learning Verfahren einsetzen. Dies ist beispielsweise im Projekt von Saunders et al. (2020) der Fall, bei dem Gebärdensprach-Übersetzungen aus dem Fernsehen eingesetzt werden, um Übersetzungen zwischen DGS und gesprochenem Deutsch zu erstellen. Der Zugriff auf das Gesprochene als auch auf die gebärdete Übersetzung stellt sich hierbei als großer Vorteil heraus und das Projekt konnte vielversprechende Ergebnisse erzielen. Leider stehen die Technik und die Ressourcen dieser Ansätze für das Projekt im Accelerator nicht zur Verfügung.
<br>
Aufgrund dieser Schwierigkeiten und der begrenzten Kapazitäten wurde der ursprüngliche Plan abgewandelt. Es werden nun Beispielsätze umgesetzt, welche mit festen Animationen versehen und durch einen 3D-Avatar dargestellt werden. Dabei werden relevante Sätze und Wörter ausgewählt, die in Online Konferenzen oft genutzt werden oder besonders nützlich sind. Das zu entwickelnde Tool soll für jeden gesprochenen Satz erkennen, ob etwas gesprochen wurde, für das eine Animation gespeichert ist. Wenn eine entsprechende Animation im Wörterbuch hinterlegt ist, soll diese abgespielt werden. Wenn also das Wort Hallo gesprochen wird, wird die zugehörige Animation für Hallo dargestellt. Diese Animationen werden in den Accelerator mit eingebunden werden und sollen nach Bedarf über einen Button ein- und ausgeblendet werden können. So kann jeder Nutzer entscheiden, ob er das Tool nutzen möchte oder nicht.
Aufgrund dieser Schwierigkeiten und der begrenzten Kapazitäten wurde der ursprüngliche Plan abgewandelt. Es werden nun Beispielsätze umgesetzt, welche mit festen Animationen versehen und durch einen 3D-Avatar dargestellt werden. Dabei werden relevante Sätze und Wörter ausgewählt, die in Online Konferenzen oft genutzt werden beziehungsweise besonders nützlich sind. Das zu entwickelnde Tool soll dafür erkennen, wann etwas gesprochen wird, für das eine Animation gespeichert ist. Anschließend soll die dazu passende Animation abgespielt werden. Wenn also das Wort Hallo gesprochen wird die zugehörige Animation Hallo dargestellt. Diese Animationen werden in den Accelerator mit eingebunden werden und solle nach Bedarf über einen Button ein- und ausgeblendet werden können. So kann jeder Nutzer entscheiden kann, ob er das Tool nutzen möchte oder nicht.
<h2>Umsetzung</h2>
In diesem Kapitel wird die Umsetzung der Spracherkennung und der Darstellung der Gebärdensprache beschrieben.
<h2>Umsetzung Spracherkennung</h2>
Wie bereits erwähnt, wird für dieses Projekt die Web Speech API verwendet. Grundlage für die Implementierung der Spracherkennung diente ein<ahref="https://codingshiksha.com/javascript/javascript-speech-to-text-notes-app-using-web-speech-api-full-project/">Codebeispiel</a> aus dem Internet. Dieser beinhaltet zum einen den Code für die Einbindung der Web Speech API und verschiedener Kontrollelemente, welche in der Datei js/libs/speech-to-text.js implementiert wurden. Zum anderen werden in der index.html des Accelerators weitere Elemente eingefügt, die für die Ausgabe der Transkription verwendet werden. Im Folgenden wird die Entwicklung der Spracherkennung im Accelerator präsentiert.
Wie bereits in Kapitel 2.1. erwähnt, wird für dieses Projekt die Web Speech API verwendet. Als Grundlage für die Implementierung der Spracherkennung diente ein<ahref="https://codingshiksha.com/javascript/javascript-speech-to-text-notes-app-using-web-speech-api-full-project/">Codebeispiel</a> aus dem Internet. Dieses beinhaltet zum einen den Code für die Einbindung der Web Speech API und verschiedener Kontrollelemente, welche in der Datei js/libs/speech-to-text.js implementiert wurden. Zum anderen werden in der index.html des Accelerators weitere Elemente eingefügt, die für die Ausgabe der Transkription verwendet werden. Im Folgenden wird die Entwicklung der Spracherkennung im Accelerator präsentiert.
<h3>Erste Version</h3>
Zu Beginn wurde das Codebeispiel auf den Accelerator angepasst. Hierzu wurde zunächst das User Interface (UI) der Spracherkennung in der index.html des Accelerators modifiziert, siehe folgender Codeausschnitt:<br>
...
...
@@ -53,9 +63,9 @@ Zu Beginn wurde das Codebeispiel auf den Accelerator angepasst. Hierzu wurde zun
</div>
```
Die verschiedene Elemente befinden sich in dem div-Element _speechToTextArea_. Neben einer Textbox (_note-textarea_), in der die Transkription ausgegeben wird, wurden ebenfalls verschiedene Buttons implementiert: _start-record-btn_ zum Starten der Aufnahme, _pause-record-btn_ zum Pausieren der Aufnahme und _clean-btn_ zum Löschen des Textes in der Textbox. Außerdem wurden in einem p-Element (_recording-instructions_) ausgegeben, ob die Aufnahme gerade aktiv ist oder pausiert.
Die verschiedenen Elemente befinden sich in dem div-Element speechToTextArea. Neben einer Textbox (note-textarea), in der die Transkription ausgegeben wird, wurden ebenfalls verschiedene Buttons implementiert: start-record-btn zum Starten der Aufnahme, pause-record-btn zum Pausieren der Aufnahme und clean-btn zum Löschen des Textes in der Textbox. Außerdem wurden in einem p-Element (recording-instructions) ausgegeben, ob die Aufnahme gerade aktiv ist oder pausiert.
<br><br>
Das div-Element _speechToTextArea_ ist zu Beginn ausgeblendet, da das UI nur nach Bedarf geöffnet werden soll. Das geschieht über einen Button in der Usertoolbar am unteren Bildschirmrand. Klickt der Nutzer auf diesen Button, wird das CSS des div-Element verändert, indem _display_ auf den Wert _block_ umgestellt wird. Dieses Umschalten wurde ebenfalls aus einem <ahref="https://www.w3schools.com/howto/howto_js_toggle_hide_show.asp">Codebeispiel</a> abgeleitet:
Das div-Element speechToTextArea ist zu Beginn ausgeblendet, da das UI nur nach Bedarf geöffnet werden soll. Das geschieht über einen Button in der Usertoolbar am unteren Bildschirmrand (siehe Abbildung 01, roter Kasten). Klickt der Nutzer auf diesen Button, wird das CSS des div-Element verändert, indem display auf den Wert block umgestellt wird. Dieses Umschalten wurde ebenfalls aus einem <ahref="https://www.w3schools.com/howto/howto_js_toggle_hide_show.asp">Codebeispiel</a> abgeleitet:
```
function toggleSpeechToTextArea(){
...
...
@@ -68,7 +78,7 @@ function toggleSpeechToTextArea(){
}
```
<br>Die Web Speech API wird in der Datei js/libs/speech-to-text.js verwendet. Für die Steuerung wird zunächst ein _SpeechRecognition_-Objekt erzeugt, welches als Schnittstelle zur Steuerung der Spracherkennung dient, sowie die Textbox und das p-Elements für die Anweisungen in die Variablen _noteTextarea_ und _instructions_ geschrieben. Außerdem wird eine leere Variable _noteContent_ des Typs String erstellt, um dort die Transkription zu speichern.
<br>Die Web Speech API wird in der Datei js/libs/speech-to-text.js verwendet. Für die Steuerung wird zunächst ein SpeechRecognition-Objekt erzeugt, welches als Schnittstelle zur Steuerung der Spracherkennung dient, sowie die Textbox und das p-Elements für die Anweisungen in die Variablen noteTextarea und instructions geschrieben. Außerdem wird eine leere Variable noteContent des Typs String erstellt, um dort die Transkription zu speichern.
```
var recognition = new SpeechRecognition();
...
...
@@ -79,7 +89,7 @@ var instructions = $('#recording-instructions');
var noteContent = '';
```
<br>Wird nun die Aufnahme durch das Anklicken des start-record-btn Button gestartet, wird dem noteContent ein Leerzeichen hinzugefügt und anschließend die Aufnahme mit der Funktion _start()_ des SpeechRecognition-Objekts gestartet. Wird der pause-record-btn button gedrückt, wird die Aufnahme mit der Funktion _stop()_ pausiert und dementsprechend die Anweisung ausgegeben.
<br>Wird nun die Aufnahme durch das Anklicken des start-record-btn Button gestartet, wird dem noteContent ein Leerzeichen hinzugefügt und anschließend die Aufnahme mit der Funktion start() des SpeechRecognition-Objekts gestartet. Wird der pause-record-btn button gedrückt, wird die Aufnahme mit der Funktion stop() pausiert und dementsprechend die Anweisung ausgegeben.
<br>Zusätzlich wird beim Starten der Aufnahme ein Anweisungstext ausgegeben (_recognition.onstart_). Jedes Mal, wenn die API etwas aufnimmt, wird in _recognition.onresult_ der aktuell transkribierte Text herausgefiltert, in noteContent gespeichert und der noteTextarea übergeben. Somit wird der Text anschließend in der Textbox für den Nutzer anzeigt.
<br>Zusätzlich wird beim Starten der Aufnahme ein Anweisungstext ausgegeben (recognition.onstart). Jedes Mal, wenn die API etwas aufnimmt, wird in recognition.onresult der aktuell transkribierte Text herausgefiltert, in noteContent gespeichert und der noteTextarea übergeben. Somit wird der Text anschließend in der Textbox für den Nutzer anzeigt.
<br>Der ausgegebene Text ist jedoch nur für den Nutzer selbst sichtbar. Um sie für alle Nutzer sichtbar darzustellen, war zunächst die Überlegung, den Text direkt in den Chat zu posten. Hierfür wurde am Ende von recognition.onresult der Text in noteContent in die Funktion _sendChatMsg()_ übergeben. Dies ist eine bereits bestehende Funktion im Accelerator und sendet den Input der Funktion als Nachricht in den Chat. Jedoch würden somit alle Nutzer den Text sehen, egal ob sie sich diese Unterstützung wünschen oder nicht. Außerdem könnten so Nachrichten, welche von anderen Nutzern in den Chat geschrieben wurden, schnell untergehen. Daher wurde im Verlauf der Entwicklung die Ausgabe der Untertitel aus dem UI ausgelagert.
<br>Der ausgegebene Text ist jedoch nur für den Nutzer selbst sichtbar. Um sie für alle Nutzer sichtbar darzustellen, war zunächst die Überlegung, den Text direkt in den Chat zu posten. Hierfür wurde am Ende von recognition.onresult der Text in noteContent in die Funktion sendChatMsg() übergeben. Dies ist eine bereits bestehende Funktion im Accelerator und sendet den Input der Funktion als Nachricht in den Chat, siehe Abbildung 02. Jedoch würden somit alle Nutzer den Text sehen, egal ob sie sich diese Unterstützung wünschen oder nicht. Außerdem könnten so Nachrichten, welche von anderen Nutzern in den Chat geschrieben wurden, schnell untergehen. Daher wurde im Verlauf der Entwicklung die Ausgabe der Untertitel aus dem UI ausgelagert.
<h3>Erweiterung</h3>
Im nächsten Schritt wurde das UI der Spracherkennung in den Moderatoren-Bereich verschoben. Somit kann nur der Moderator selbst die Spracherkennung starten, zum Beispiel um während einer Präsentation die Generierung von Untertiteln zu ermöglichen. Ein Grund für diese Verlagerung ist, dass die Spracherkennung momentan client-seitig läuft und somit jeder Nutzer diese selbst aktivieren muss. Zum anderen müsste bei einer Fernschaltung der Spracherkennung durch einen anderen Nutzer auch der Punkt Sicherheit und Datenschutz gegeben sein, jedoch übersteigt dies die Kenntnisse der Gruppenteilnehmer. Jedoch wäre zukünftig die Fernschaltung erstrebenswert, damit hörbeeinträchtigte Nutzer selbst die Aufnahme der Stimme des Redners starten können, falls dieser das Starten der Aufnahme vergisst.<br><br>
Außerdem wurde das Design des UI verändert. Da die Untertitel nicht mehr im UI ausgegeben werden sollen, wurde die Textbox und der Button zum leeren der Textbox entfernt. Zudem wurde der ganze Container neben die Präsentation platziert und ist ebenfalls über einen Button in der Kontrollleiste ein- und ausblendbar. Des Weiteren wurde das Design angepasst und beispielsweise die Buttons der CI des Accelerators angepasst. Inspiration hierfür war der Container für die Draggables. Zusätzlich wird zu den Anweisungen der Sprachsteuerung das Icon eines Mikrofons und ein farbiger Punkt dargestellt. Ist die Aufnahme pausiert, ist ein durchgestrichenes Mikrofon und ein roter Punkt dargestellt. Wird die Aufnahme gestartet, färbt sich der Punkt grün und das Mikrofon ist nicht mehr durchgestrichen. Somit hat der Moderator auch neben dem Anweisungstext ein weiteres visuelles Feedback zu dem Zustand der Sprachaufnahme.<br>
Außerdem wurde das Design des UI verändert, siehe Abbildung 03. Da die Untertitel nicht mehr im UI ausgegeben werden sollen, wurde die Textbox und der Button zum leeren der Textbox entfernt. Zudem wurde der ganze Container neben die Präsentation platziert und ist ebenfalls über einen Button (siehe Abbildung 03, roter Kasten) in der Kontrollleiste ein- und ausblendbar. Des Weiteren wurde das Design angepasst und beispielsweise die Buttons der CI des Accelerators angepasst. Inspiration hierfür war der Container für die Draggables. Zusätzlich wird zu den Anweisungen der Sprachsteuerung das Icon eines Mikrofons und ein farbiger Punkt dargestellt. Ist die Aufnahme pausiert, wird ein durchgestrichenes Mikrofon und ein roter Punkt dargestellt. Wird die Aufnahme gestartet, färbt sich der Punkt grün und das Mikrofon ist nicht mehr durchgestrichen. Somit hat der Moderator auch neben dem Anweisungstext ein weiteres visuelles Feedback zu dem Zustand der Sprachaufnahme.<br>
Die Untertitel werden nun als _subtitleElement_ , einem einfachem p-Element, direkt unter der Gebärden-Animation angezeigt. Diese befindet sich über der Chatbox und kann über den Button in der Usertoolbar, der ursprünglich mit der UI der Spracherkennung verknüpft war und nun zusätzlich noch verschoben wurde, ein- und ausgeblendet werden.
Wird der Untertitel in recognition.onresult nun in das p-Element subtitleElement geschrieben, wird der Text nur für den Moderator sichtbar, da die Veränderung nur client-seitig abläuft. Um den Untertitel für alle Personen, die die Gebärde-Animation geöffnet haben, anzuzeigen, müssen Web Sockets verwendet werden. Dadurch wird eine Verbindung zwischen Client und Server hergestellt. Hierfür wurde ein kleiner Teil des Codes in der speech-to-text.js verändert:
Die Untertitel werden nun als p-Element mit der ID subtitleElement direkt unter der Gebärden-Animation angezeigt, siehe Abbildung 04. Diese befindet sich über der Chatbox und kann über den Button in der Usertoolbar, der ursprünglich mit der UI der Spracherkennung verknüpft war und nun zusätzlich noch verschoben wurde, ein- und ausgeblendet werden. Mehr zu der Gebärden-Animation in Kapitel 3.2..
Wird der Untertitel in recognition.onresult nun in das p-Element subtitleElement geschrieben, wird der Text nur für den Moderator sichtbar, da die Veränderung nur client-seitig abläuft. Um den Untertitel für alle Personen, die die Gebärden-Animation geöffnet haben, anzuzeigen, werden Web Sockets verwendet. Dadurch wird eine Verbindung zwischen Client und Server hergestellt. Hierfür wurde ein kleiner Teil des Codes in der speech-to-text.js verändert:
```
if(!mobileRepeatBug) {
...
...
@@ -139,7 +149,7 @@ if(!mobileRepeatBug) {
}
```
<br>Die Transkription wird nun direkt in noteContent geschrieben, ohne die vorherige Transkription dazu zu fügen und der aktuell darzustellende Untertitel wird der Funktion _sendSubtitle()_ übergeben. Diese Funktion befindet sich in der _connect.js_ Datei und ist für die Kommunikation mit den Socket für die Darstellung des Untertitels zuständig:
<br>Die Transkription wird nun direkt in noteContent geschrieben, ohne die vorherige Transkription dazu zu fügen und der aktuell darzustellende Untertitel wird der Funktion sendSubtitle() übergeben. Diese Funktion befindet sich in der connect.js Datei und ist für die Kommunikation mit den Socket für die Darstellung des Untertitels zuständig:
```
function sendSubtitle(text){
...
...
@@ -147,7 +157,7 @@ function sendSubtitle(text){
}
```
<br>Um nun die Veränderung auch server-seitig durchzuführen, wird die _signaling_socket.on_ Funktion aufgerufen. Innerhalb dieser Funktion wird der Untertitel an die Funktion _writeSubtitle()_ übergeben:
<br>UUm nun die Veränderung auch server-seitig durchzuführen, wird die signaling_socket.on Funktion aufgerufen. Innerhalb dieser Funktion wird der Untertitel an die Funktion writeSubtitle() übergeben:
<br>Diese Funktion befindet sich in der _uiHelper.js_ und schreibt den Text in das p-Element mit der ID subtitleElement:
<br>Diese Funktion befindet sich in der uiHelper.js und schreibt den Text in das p-Element mit der ID subtitleElement:
```
function writeSubtitle(text){
...
...
@@ -163,7 +173,7 @@ function writeSubtitle(text){
}
```
<br>Zu diesem Zeitpunkt wäre der Text jedoch noch nicht sichtbar für alle. Zu der signaling_socket.on Funktion in der connect.js muss ebenfalls das Gegenstück in der _server.js_ implementiert werden. Dieser beinhaltet den Befehl _sendToHoleRoom()_, das die Anfrage des Clients für alle durchgeführt wird. Das bedeutet in diesem Fall, dass die Methode _writeSubtitle(text)_ für alle durchgeführt wird.
<br>Zu diesem Zeitpunkt wäre der Text jedoch noch nicht sichtbar für alle. Zu der signaling_socket.on Funktion in der connect.js muss ebenfalls das Gegenstück in der server.js implementiert werden. Dieser beinhaltet den Befehl sendToHoleRoom(), das die Anfrage des Clients für alle durchgeführt wird. Das bedeutet in diesem Fall, dass die Methode writeSubtitle(text) für alle durchgeführt wird.
<br>Somit ist der Untertitel nun für alle Nutzer sichtbar, die sich die Gebärde-Animation eingeblendet haben. Der Untertitel verändert sich nach jedem aufgenommen Satz, beziehungsweise wenn der Sprecher eine kurze Pause macht. Es kam diesbezüglich ebenfalls die Idee auf, das Gesprochene Wort für Wort zu transkribieren und diesen direkt auszugeben, jedoch kamen hier einige Probleme auf, wie beispielsweise das Markieren eines Satzendes oder die Inkompatibilität mit dem Blending der Animationen. Dies wäre ein möglicher Ansatz für weiterführende Arbeiten.
<h2>Umsetzung Gebärdensprache</h2>
Das erkannte Gesprochene soll nun mithilfe eines Gebärden-Avatars in dargestellt werden. Da, wie in Kapitel 2.2 beschrieben, eine Umsetzung einer flexiblen Übersetzung im Rahmen des Projektes nicht möglich war wurde die Darstellung konkreter Beispielsätze umgesetzt. Dafür wurde ein Set aus Sätzen und Wörtern ausgewählt, welches als besonders nützlich für Online-Konferenzen erachtet wurde. <br><br>
Das erkannte Gesprochene soll nun mithilfe eines Gebärden-Avatars dargestellt werden. Da, wie in Kapitel 2.2 beschrieben, eine Umsetzung einer flexiblen Übersetzung im Rahmen des Projektes nicht möglich war, wurde die Darstellung konkreter Beispielsätze umgesetzt. Dafür wurde ein Set aus Sätzen und Wörtern ausgewählt, welches als besonders nützlich für Online-Konferenzen erscheint. <br><br>
Diese Wörter und Sätze lauten wie folgt:
<ul>
...
...
@@ -192,9 +202,11 @@ Diese Wörter und Sätze lauten wie folgt:
<br>
Bevor die Sätze animiert werden konnten, wurde eine kompetente Übersetzung der Sätze in Gebärdensprache benötigt. Hierzu wurde ein studentische Leiter der Deutschen Gebärdensprachkurse der Pädagogischen Hochschule Heidelberg, Tim Eidam, zu Rat gezogen. Tim Eidam erstellte ein Video, in dem er die Sätze und Wörter gebärdet. <br>
Basierend auf diesem Video wurde dann ein Gebärden-Avatar in der Software Blender animiert. Hierzu kam zunächste der <ahref="https://cloud.blender.org/p/characters/5f04a68bb5f1a2612f7b29da">Open-Source Avatar “Rain”</a> zum Einsatz . Dieser ist speziell für Animationen entwickelt und verfügt über ein ausführliches Körper- und Gesichts-Rig. Aufgrund der hohen Detailtreue des 3D-Modell benötigt die Darstellung des Characters jedoch viel Kapazitäten. Dies führte bei Einbindung einfacher Testanimationen in den Accelerator zu Probleme, da das Modell teilweise nur langsam und falsch dargestellt werden konnte. Aufgrund dieser Schwierigkeiten wurde dann der frei verfügbare <ahref="https://www.mixamo.com/#/?page=1&type=Character">Avatar “Amy”</a> der Plattform Mixamo eingesetzt . Dieser umfasst weniger Flächen und kann somit besser in den Accelerator eingebunden werden. Für das Modell steht zunächst jedoch ausschließlich ein Körper-Rig zur Verfügung. Da für die korrekte Darstellung von Gebärden jedoch auch Mimik und Mundbewegungen animiert werden müssen, musste zusätzlich ein Gesichts-Rig erstellt werden. Hierzu wurden in Blender sogenannte Shape Keys erstellt. Dabei handelt es sich um Transformationen des 3D-Objektes, die nach Belieben prozentual angewandt werden können. Diese teilweise Anwendung der einzelnen Shape Keys kann über zugeordnete Bones geschehen. So können mithilfe des Gesichts-Rigs die verschiedenen Gesichtspartien, wie Augenbrauen, Kieferpartie, Wangen und der gesamte Mund animiert werden.<br>
Nachdem Amy vollständig mit einem Rig versehen war wurden anhand der Beispielvideos Animationen der geplanten Gebärden erstellt. Dabei wurde für jedes Wort eine einzelne Animation erstellt, welche als Aktion mit dem entsprechenden Namen gespeichert wurde. Diese Aktionen wurden anschließend in einem Blender-Dokument vereint und als eine alle Animationen umfassende GLB-Datei exportiert. Dieses Datei bildete die Vorbereitung für den gezielten Zugriff auf die Animationen mit Three.js und das Darstellen der passenden Sätze im Accelerator.
Basierend auf diesem Video wurde anschließend ein Gebärden-Avatar in der Software Blender animiert. Hierzu kam zunächst der Open Source Avatar “Rain” zum Einsatz . Dieser ist speziell für Animationen entwickelt und verfügt über ein ausführliches Körper- und Gesichts-Rig. Aufgrund der hohen Detailtreue des 3D-Modells benötigt die Darstellung des Characters jedoch viel Kapazitäten. Dies führte bei Einbindung einfacher Testanimationen in den Accelerator zu Problemen, da das Modell teilweise nur langsam und falsch dargestellt werden konnte. Aufgrund dieser Schwierigkeiten wurde dann der frei verfügbare Avatar “Amy” der Plattform Mixamo eingesetzt . Dieser umfasst weniger Flächen und kann somit besser in den Accelerator eingebunden werden. Für das Modell steht zunächst jedoch ausschließlich ein Körper-Rig zur Verfügung. Da für die korrekte Darstellung von Gebärden jedoch auch Mimik und Mundbewegungen animiert werden müssen, musste zusätzlich ein Gesichts-Rig erstellt werden. Hierzu wurden in Blender sogenannte Shape Keys erstellt. Dabei handelt es sich um Transformationen des 3D-Objektes, die nach Belieben prozentual angewandt werden können. Diese teilweise Anwendung der einzelnen Shape Keys kann über zugeordnete Bones geschehen. So können mithilfe des Gesichts-Rigs die verschiedenen Gesichtspartien animiert werden.<br>
Nachdem Amy vollständig mit einem Rig versehen war wurden anhand der Beispiel-Videos Animationen der geplanten Gebärden erstellt. Dabei wurde für jedes Wort eine einzelne Animation erstellt, welche als Aktion mit dem entsprechenden Namen gespeichert wurde. Diese Aktionen wurden anschließend in einem Blender-Dokument vereint und als eine alle Animationen umfassende GLB-Datei exportiert. Dieses Datei bildete die Vorbereitung für den gezielten Zugriff auf die Animationen mit Three.js und das Darstellen der passenden Sätze im Accelerator.<br>
Um sicher zu gehen, dass die erstellten Animationen der Gebärden auch verstanden werden, wurde über Instagram Kontakt mit einer DGS-Muttersprachlerin aufgenommen. Dieser erklärte sich dazu bereit, die Animationen auf ihre Richtigkeit und Verständlichkeit zu überprüfen. Hierzu wurden ihr alle Animationen als Video geschickt, ohne eine Erläuterung, welche Sätze damit dargestellt werden sollten. Dabei stellte sich heraus, dass die Gebärden richtig umgesetzt wurden, sowohl in der Mimik, als auch in der Gestik und die Muttersprachlerin alle Sätze richtig verstehen konnte. So wurde sichergestellt werden, dass die Animationen korrekt umgesetzt wurden.
<h2>ThreeJs</h2>
[ThreeJs](https://threejs.org/) ist ein eine JavaScript Bibliothek, mit der 3D animierte Computergrafiken durch WebGL in einem Browser erstellt und dargestellt werden können.
