# Nutzung von KI zur Erkennung und Umwandlung von Sprache in Text

In diesem DVA Projekt beschäftigen wir uns mit der Nutzung von Künstlicher Intelligenz (KI) zur Erkennung und Umwandlung von Sprache in Text. Unser Ziel ist es, verschiedene Open Source Spracherkennungs-KIs zu testen und zu evaluieren, um eine passende für die Integration in eine Weboberfläche auszuwählen.
Besonders wichtig ist uns dabei, dass die Sprache in "Echtzeit" erkannt wird und die Worte während des Sprechens bereits angezeigt werden können.

## Einführung

Die Erkennung und Umwandlung von gesprochener Sprache in Text (Speech-to-Text bzw. STT), spielt eine wichtige Rolle in einer Vielzahl von Anwendungen. Mit Hilfe von KI-Technologien können sehr genaue und effiziente STT-Systeme entwickelt werden.

## Spracherkennung ohne KI Technologien

Die Spracherkennung ist seit langem ein Ziel in der Informatik, wobei die ersten Bemühungen bis in die 1950er und 1960er Jahre zurückreichen. Frühe Spracherkennungssysteme basierten auf Mustererkennung, wobei das System versuchte, die eingehende Audiosignalform mit voraufgezeichneten Vorlagen oder Mustern abzugleichen. Diese Systeme waren oft auf kleine Vokabulare beschränkt und erforderten eine umfangreiche Schulung für jeden einzelnen Sprecher.

In den 1970er und 1980er Jahren begannen Forscher, statistische Methoden für die Spracherkennung wie [Hidden Markov Modelle (HMM)](https://de.wikipedia.org/wiki/Spracherkennung#Hidden-Markov-Modelle) zu untersuchen. Diese Techniken zielten darauf ab, die statistischen Eigenschaften von Sprachsignalen zu modellieren und konnten größere Vokabulare effektiver handhaben. Diese Systeme hatten jedoch noch immer Probleme mit der Genauigkeit, insbesondere in lauten Umgebungen oder mit nicht-muttersprachlichen Sprechern.

## Entwicklung von Spracherkennungs KIs

Der Durchbruch für die Spracherkennung kam mit der Einführung des Deep Learning und der künstlichen neuronalen Netzwerke in den späten 2000er und frühen 2010er Jahren. Tiefe neuronale Netzwerke, insbesondere [rekurrente neuronale Netzwerke (RNNs)](https://de.wikipedia.org/wiki/Rekurrentes_neuronales_Netz) und [faltende neuronale Netzwerke (CNNs)](https://de.wikipedia.org/wiki/Convolutional_Neural_Network), erwiesen sich als höchst effektiv bei der Modellierung der komplexen Muster in Sprachdaten. Diese KI-basierten Systeme konnten direkt aus großen Datensätzen von Sprache und Transkripten lernen, ohne auf explizit programmierte Regeln oder Vorlagen angewiesen zu sein.

Diese Technologie war für die längste Zeit aufgrund der hohen Rechenleistung und der großen Datenmengen, die für das Training erforderlich waren, nur für große Unternehmen wie Google, Apple und Microsoft verfügbar.
In den letzten Jahren haben jedoch Fortschritte in der Hardware, insbesondere die Verfügbarkeit von GPUs und TPUs, sowie die Entwicklung von Open-Source-Bibliotheken wie [TensorFlow](https://github.com/tensorflow/tensorflow) und [PyTorch](https://github.com/pytorch/pytorch), die Entwicklung und Bereitstellung von KI-Modellen für Spracherkennung erheblich vereinfacht und für eine breitere Öffentlichkeit zugänglich gemacht.

## Realtime Spracherkennung und Implementierung in eine Weboberfläche

In modernen Anwendungen ist es häufig notwendig, Sprache mit möglichst geringer Latenz in Textdaten umzuwandeln.

### RealtimeSTT

RealtimeSTT nutzt zur Echtzeiterkennung von Sprache (GPU beschleunigt) ["faster whisper"](https://github.com/SYSTRAN/faster-whisper).
Faster Whisper ist eine verbesserte Version von OpenAI's whisper. Genauere Informationen hierzu: siehe vorheriges Kapitel

### Integration von STT in Weboberflächen

Häufig findet man in Frontends von Websiten und Apps die Möglichkeit, Eingaben per Stimme zu tätigen. Hierzu ist es notwendig oben genannte Echtzeit Spracherkennungssysteme in das Frontend einer Webanwendung einzubinden. Ein weit verbreitetes Framework für die Frontendentwicklung ist React.

React ist eine JavaScript-Bibliothek zur Entwicklung von Benutzeroberflächen für Webanwendungen. Es ermöglicht die Erstellung von interaktiven, dynamischen und wiederverwendbaren UI-Komponenten. React verwendet eine Komponenten-basierte Architektur und das sogenannte "Virtual DOM" für effizientes Rendering von Benutzeroberflächen.

Die Spracherkennung in unserem Website-Frontend basiert auf dem Einsatz moderner Webtechnologien und APIs, die es ermöglichen, Audiodaten über das Mikrofon des Benutzers aufzunehmen und in Text umzuwandeln. Die Haupttechnologien, die wir für die Spracherkennung nutzen, sind:

1. *Web Speech API*: Die [Web Speech API](https://developer.mozilla.org/en-US/docs/Web/API/SpeechRecognition) ist eine browserbasierte API, die es ermöglicht, Spracherkennung und Sprachsynthese in Webanwendungen zu integrieren. Sie bietet Funktionen zum Aufnehmen von Spracheingaben über das Mikrofon des Benutzers und zur Umwandlung dieser Eingaben in Text.

2. *React*: Für die Entwicklung des Frontends unserer Website verwenden wir [React](https://react.dev/), eine beliebte JavaScript-Bibliothek zur Entwicklung von Benutzeroberflächen. Durch die Verwendung von React kann die Spracherkennungsfunktionalität nahtlos in bestehende React-Komponenten integriert werden und der Zustand der Benutzeroberfläche gut verwaltet und erweitert werden.

3. *react-speech-recognition*: Um die Integration von Spracherkennung in React-Anwendungen zu erleichtern, verwenden wir die Bibliothek [react-speech-recognition](https://www.npmjs.com/package/react-speech-recognition). Diese Bibliothek stellt einen React-Hook bereit, useSpeechRecognition, der Komponenten Zugriff auf ein Transkript der Benutzer-Mikrofon-Spracheingabe gewährt.

4. *Polyfills*: Da die native Unterstützung für die Web Speech API in verschiedenen Browsern variieren kann, empfehlen wir die Verwendung von Polyfills. Polyfills erweitern die Funktionalität älterer Browser und ermöglichen die Nutzung moderner Web-APIs.

#### React Speech Recognition

Um Spracheingabe im React Frontend zu realisieren, wird der React Hook [React Speech Recognition](https://www.npmjs.com/package/react-speech-recognition) genutzt.
`useSpeechRecognition` ist ein React-Hook, das einer Komponente Zugriff auf eine Transkription von gesprochener Sprache gibt, die vom Mikrofon des Benutzers aufgenommen wurde.
`SpeechRecognition` verwaltet den globalen Zustand der Web Speech API und stellt Funktionen bereit, um das Mikrofon ein- und auszuschalten.

Es ist zu beachten, dass die Browserunterstützung für diese API derzeit begrenzt ist, wobei Chrome die beste Funktionalität bietet.
Generell werden folgende Browser unterstützt:

- Chrome (desktop): this is by far the smoothest experience
- Safari 14.1
- Microsoft Edge
- Chrome (Android)
- Android webview
- Samsung Internet

Die Integration der Spracherkennung in das Frontend unserer Website erfolgt in mehreren Schritten:

1. *Installation von react-speech-recognition*: Zunächst wird die Bibliothek react-speech-recognition über npm installiert, um Zugriff auf den useSpeechRecognition-Hook zu erhalten.

    `npm i react-speech-recognition`

2. *Verwendung des useSpeechRecognition-Hooks*: Innerhalb unserer React-Komponenten verwenden wir den useSpeechRecognition-Hook, um auf das Transkript von der Mikrofon-Spracheingabe des Benutzers zuzugreifen. Die Stimmerkennung wird zu Demozwecken direkt in der Datei "App.js" implementiert.

    ```js
    import SpeechRecognition, { useSpeechRecognition } from 'react-speech-recognition'
    ```

3. *Implementierung von Sprachbefehlen*: Wir definieren spezifische Sprachbefehle, die bestimmte Aktionen auf der Website auslösen sollen. Dazu nutzen wir die Möglichkeit, dem useSpeechRecognition-Hook eine Liste von Befehlen zu übergeben, die mit entsprechenden Callback-Funktionen verknüpft sind. Beispiele: Open Webpage oder Change Background Color

    ```js
    const commands = [
            {
                command: "open *",
                callback: (site) => {
                    window.open("https://" + site)
                }
            },
            {
                command: "change background color to *",
                callback: (color) => {
                    document.body.style.background = color;
                }
            }
        ]
    ```

Die Integration von Spracherkennung in das Frontend einer realen Webanwendung ermöglicht eine intuitive und benutzerfreundliche Interaktion mit der Website. Durch den Einsatz aktueller Webtechnologien wie der Web Speech API und React können wir eine reibungslose und effektive Spracherkennungsfunktionalität bereitstellen, die die Benutzererfahrung von Webanwendungen verbessern und die Zugänglichkeit einer Website erhöhen würde.

## Fazit

Die Nutzung von KI zur Erkennung und Umwandlung von Sprache in Text hat in den letzten Jahren erhebliche Fortschritte gemacht und ermöglicht die Entwicklung hochpräziser und effizienter STT-Systeme. Durch den Einsatz von Deep Learning und künstlichen neuronalen Netzwerken können wir komplexe Muster in Sprachdaten erkennen und in Text umwandeln.

Die Integration von Spracherkennung in Webanwendungen eröffnet neue Möglichkeiten für die Interaktion mit Benutzern und verbessert die Zugänglichkeit von Websites. Durch den Einsatz moderner Webtechnologien wie der Web Speech API und React können wir eine nahtlose und benutzerfreundliche Spracherkennungsfunktionalität bereitstellen, die die Benutzererfahrung von Webanwendungen nachhaltig verbessert.