Bergische Universität Wuppertal

Fakultät für Elektrotechnik, Informationstechnik und Medientechnik

Lehrstuhl für Automatisierungstechnik / Informatik

Schriftliche Zusammenfassung des Themas:

Die Erkennung von handgeschriebenen Zahlen und deren

Verarbeitung in Echtzeit für Betriebssystem Android

Vorgelegte von:

Mehrnaz Hashemi
Donya Moharrami Olfat
Amirhossein Sadeghi Pirzaman

Studiengang:

Master Elektrotechnik

Lehrkraft:

M.Sc. Dena Zaiss

M.Sc. Dimitrios Savvidis

Sommersemester 2022

0
Inhaltverzeichnis

Einleitung ...................................................................................................................... 3
Kapitel 1: Grundlagen.................................................................................................. 4
1-1 Künstliche Intelligenz ............................................................................................... 4
1-2 Maschinelles Lernen ...................................................................................................... 4
1-2-1 Die Arten vom maschinellen Lernen ..................................................................................... 4
1-3 Deep Learning ................................................................................................................ 5
1-4 Neuronales Netzwerk (NN) ........................................................................................... 5
1-4-1 Aktivierungsfunktion ............................................................................................................. 6
1-4-2 Kernel Initializers ................................................................................................................... 6
1-4-3 Optimierungsalgorithmen ..................................................................................................... 6
1-5 Convolutional Neural Network (CNN) ........................................................................ 7
1-5-1 Convolutional Layer ............................................................................................................... 7
1-5-2 Pooling layer .......................................................................................................................... 9
1-5-3 Fully connected layer............................................................................................................. 9
1-6 MNIST-Datenbank ........................................................................................................ 9
1-7 Programmbibliotheken ............................................................................................... 10
1-7-1 TensorFlow und Keras ......................................................................................................... 10
1-7-2 OpenCV ................................................................................................................................ 11
1-8 App Entwicklung ......................................................................................................... 11
1-8-1 Native App Entwicklung ....................................................................................................... 11
1-8-2 Cross Plattform App Entwicklung ........................................................................................ 12
1-8-3 Xamarin................................................................................................................................ 12
1-8-4 React Native......................................................................................................................... 12
Kapitel 2: Entwurfsphase .......................................................................................... 13
2-1 Entwurf von Backend .................................................................................................. 13
2-2 Entwurf von Frontend ................................................................................................. 14
2-3 Kombinieren des CNN-Modells mit der App ............................................................ 14
Kapitel 3: Implementierungsphase – Backend ........................................................ 15
3-1 Modul Dataset Loader ................................................................................................. 15
3-1-1 Import der Bibliotheken ...................................................................................................... 15
3-1-2 Laden des MNIST-Datensatzes ............................................................................................ 15
3-1-3 Datenverarbeitung / Reshaping .......................................................................................... 16
3-1-4 One Hot Encoding ................................................................................................................ 16

1
 3-1-5 Normalize............................................................................................................................. 16
3-2 Modul RecognitionModel ............................................................................................ 17
3-2-1 Import der Bibliotheken ...................................................................................................... 17
3-2-2 Definition des CNN-Modells ................................................................................................ 17
3-2-3 Erstellen des Modells........................................................................................................... 19
3-3 Modul Image Prediction .............................................................................................. 19
3-4 Modul Main .................................................................................................................. 19
Kapitel 4: Implementierungsphase – Frontend ....................................................... 21
4-1 Import der Bibliotheken und Module ........................................................................ 21
4-1-1 React Native-Bibliothek ....................................................................................................... 21
4-1-2 Tensorflow.js ....................................................................................................................... 22
4-1-3 Manipulation der Bilder in React Native Expo..................................................................... 22
4-1-4 Modul expo-camera ............................................................................................................ 22
4-1-5 Import des Moduls DigitRecognitionMoudle ...................................................................... 22
4-1-6 FileSystem ............................................................................................................................ 23
4-2 State und Variable ....................................................................................................... 23
4-3 Ladung des Tensorflow-Modells in state.model........................................................ 23
4-4 Camera Funktion ......................................................................................................... 24
4-5 Aufnahme und Größenänderung des Bildes ............................................................. 24
4-6 Native OpenCV-Bibliothek ......................................................................................... 24
4-6-1 Erstellen des Moduls DigitRecognationModule .................................................................. 25
4-7 Vorhersage der Ziffern ................................................................................................ 27
4-8 Kalkulation und Rechnung ......................................................................................... 28
4-9 Design der Applikation ................................................................................................ 28
Kapitel 5: Testphase ................................................................................................... 30
Zusammenfassung und Fazit ..................................................................................... 32
Referenzen ................................................................................................................... 33

2
Einleitung

Motivation:
Künstliche Intelligenz, maschinelles Lernen, tiefes Lernen und neuronale Netzwerke sind
Begriffe, die im Technologiezeitalter integriert werden und haben sich in den letzten Jahren rasant
schnell entwickelt. Künstliche Intelligenz beeinflusst das Leben und die Arbeit der Menschen.
Machine Vision versetzt die Maschinen in die Lage, die Welt so zu sehen, wie Menschen sie sehen
können. Im Laufe der Zeit wurde die Fortschritte im Bereich Computer Vision durch tiefes Lernen
entwickelt, die in erster Linie auf einem speziellen Algorithmus namens Convolutional Neural
Nets basiert sind. Die Erkennung von menschlicher Handschrift ist eine dringende Technologie,
die in verschiedenen Bereichen zum Ansatz kommt.
Der folgende Bericht dokumentiert ein maschinelles Lernens Projekt, das sich dem Thema “die
Erkennung von handgeschriebenen Zahlen und deren Verarbeitung in Echtzeit” gewidmet hat.
Zunächst ist zu erwähnen, dass hierbei es insbesondere um eine Applikation geht, die für das
Betriebssystem Android geschrieben ist. Diese App muss die in eine Reihe handgeschriebenen
Zahlen scannen, erkennen und in Echtzeit bearbeiten z.B. die Summe ausgeben.
Ablauf der Arbeit:
Der vorliegende Bericht gliedert sich in fünf Teilen:
Der erste Arbeitsschritt bestand in einer Grundlagenrecherche, um die Anforderungen für Projekt,
die es für ein maschinelles Lernens Projekt relevant sind, zu identifizieren. Der nächste Aspekt
betrifft die Entwurfsphase. in der die Frage aufwirft, wie das Ergebnis erreicht wird und was
benötigt wird. Hier teilt sich im Entwurf von Backend und Frontend, sowie die Kombination von
denen. Die Kapitel3 und 4 beleuchten die Implementierungsphase. Kapitel 3 beschäftigt sich mit
dem Backend (Logik), was in Python geschrieben ist. Hierbei wird im Bereich des maschinellen
Lernens bzw. des tiefen Lernens von der MNIST-Datenbank bis zur Vorhersage der Zahlen
mittels des Convolutional Neural Network-Modells erläutert. Kapitel 4 erläutert das Frontend
(UI), was in JavaScript geschrieben ist. Zunächst ist zu erwähnen, dass hierbei React Native, das
ein JavaScript-Framework ist, verwendet wird, um Crossplatform-App für Android zu erstellen.
React Native stellt die Möglichkeiten wie TensorFlow-Bibliothek usw. zur Verfügung, die hierbei
die Entwicklung der Crossplatform-App leichter machen. Das letzte Kapitel kümmert sich um die
Testphase, in der die App durch verschiedene Android-Geräte getestet wird.
Ein Fazit und ein kurzer Ausblick aufs CNN-Modell und App schließen die Arbeit ab.

3
Kapitel 1: Grundlagen

1-1 Künstliche Intelligenz

Künstliche Intelligenz oder Artificial Intelligence (AI) ist ein Teil der Informatik. Maschinelles
Lernen, tiefes Lernen und neuronale Netzwerke sind alle Teilfelder von der künstlichen
Intelligenz, die sich um Computer, die Probleme eigenständig lösen zu können, kümmert. Mit
künstlicher Intelligenz ist eine Menge von Algorithmen gemeint, die versucht, die menschliche
Intelligenz zu imitieren [1].

1-2 Maschinelles Lernen

Maschinelles Lernen beschreibt den Bereich der künstlichen Intelligenz, bei dem Computer
selbstständig Entscheidungen treffen können. Maschinelles Lernen konzentriert sich darauf, die
Daten und die Algorithmen zu verwenden, um zu imitieren, auf welche Weise Menschen lernen.
Bei maschinellem Lernen liegt der Schwerpunkt darauf, dass die Computer etwas mit Hilfe von
den entsprechenden Daten selbst herausfinden und lernen und sich selber verbessern, um eine
Vorhersage für die Zukunft zu erstellen. [1]

1-2-1 Die Arten vom maschinellen Lernen

Maschinelles Lernen besteht aus unterschiedlichen Arten der Lernmodelle wie Supervised
Learning, Unsupervised Learning, Semi-Supervised Learning und Reinforcement Learning. Hier
wird nur Supervised Machine Learning kurz betrachtet. Beim Supervised Learning wird ein
vorbereiteter Trainingsdatensatz benutzt. Das Lernziel ist somit bereits bekannt. Die Erkennung
der Muster ist die Aufgabe der Algorithmen. Es gibt zwei Anwendungsfelder für Supervised
Learning. [2]
Klassifikation: Dabei sollen die Algorithmen diskrete Vorhersagen treffen können zum Beispiel
ob eine E-Mail Spam ist oder nicht. [2]
Regression: Dabei sollen die Algorithmen numerische Vorhersagen treffen können zum Beispiel
Wettervorhersage. [2]

4
Dieses Projekt kümmert sich um ein Supervised Machine Learning Problem, da es ein
vorbereiteter Trainingsdatensatz (MNIST) verwendet wird und auch das Lernziel eine bekannte
Zahl von 0 bis 9 ist. Es ist ein Multi-label Klassifikationsproblem, da die Algorithmen diskrete
Vorhersagen treffen müssen. Maschinelles Lernen kann als eine approximative Darstellung von
Funktionen beschreiben werden. Es wird Algorithmen des Supervised Learning verwendet, um
diese Funktion zu approximieren. Deep Learning bzw. Neuronale Netze sind eine Lösung für
einen supervised-Algorithmus des maschinellen Lernens.

1-3 Deep Learning

Beim Deep Learning werden sowohl viele Schichten (Layer) als auch riesige Mengen komplexer
und unterschiedlicher Daten umfasst, deswegen wird es als “Deep oder Tief” bezeichnet. Je größer
die Datenmenge ist, desto besser ist die Leistung oder die Performance. Im Vergleich zum
traditionellen maschinellen müssen beim tiefen Lernen keine Merkmalsextraktion aus Daten
durchgeführt werden, da die Machine eigenständig die Merkmale (Feature) lernen kann. Für die
approximative Darstellung von Funktionen kann Deep Learning einfache Funktionen
kombinieren, dadurch komplexe Funktionen erstellt werden. [3]
 𝐹  =  {𝑓(𝑋) = 𝑊3 𝑔(𝑊2 𝑔(𝑊1 𝑋))∀𝑊𝑖 }
Die obige Formel beschreibt die Funktion 𝑓(𝑥) Hypothesis Space, die durch die Kombination
der einfachen nichtlinearen Funktion 𝑔 wie ReLU, tanh usw. aufgebaut wird. 𝑊 bezeichnet
sich auf Weight oder Gewichte. Die Gewichte ermöglichen das Lernen in einem Netzwerk.
Die Aufgabe des tiefen Lernen-Algorithmus ist es, die Gewichte zu finden, somit müssen die
Begriffe Neuronales Netz und Convolutional Neural Netz betrachtet werden. [4]

1-4 Neuronales Netzwerk (NN)

Ein künstliches neuronales Netzwerk ist den Neuronen in einem biologischen Gehirn
nachempfunden. Neuronen sind im menschlichen Gehirn die Nervenzellen, die mit anderen
Nervenzellen verbunden sind und elektrische Signale weiterleiten. Künstliche neuronale Netze
funktionieren ähnlich. Hier ist ein Neuron eine mathematische Formel oder ein nichtlinearer
Term, die Eingaben verarbeitet. Jeder Knote oder jedes künstliche Neuron sind mit einem anderen
verbunden und haben ein zugeordnetes Gewicht und Schwelle. Das neuronale Netzwerk muss mit

5
einigen Gewichten beginnen und diese dann iterativ auf bessere Werte aktualisieren. Wie kann
man die Gewichte zu Beginn des Trainings initialisieren? [1]

1-4-1 Aktivierungsfunktion
Die Aktivierungsfunktion (Activation Function) beim Entwurf eines neuronalen Netzes spielt eine
große Rolle. Nachdem dieser Funktionen in den versteckten Schichten hinzugefügt werden, kann
das Modell lernen. Es gibt drei Schichten, die ein Netz umfasst:

1- Eingabeschichten: Diese Schichten sammeln die Eingabe für den Rechenprozess. [5]
2- Versteckte Schichten: Sie sammeln die Eingaben der anderen Schichten und erzeugen
Ausgaben für die anderen Schichten. [5]
3- Ausgabeschichten: Die Ausgabeschichten können das Ergebnis voraussagen. [5]

Die Aktivierungsfunktion kann als Übertragungsfunktion bezeichnet werden und kann auch
nichtlinear sein. Eine hilfreiche Aktivierungsfunktion heißt Rectified Linear Activation Function.
ReLU ist eine nichtlineare Funktion oder eine stückweise lineare Funktion, die die Eingabe direkt
ausgibt, wenn sie positiv ist, andernfalls gibt sie Null aus. Sie ist die am häufigste verwendete
Aktivierungsfunktion in neuronalen Netzwerken, insbesondere in Convolutional Neural
Networks. [5]

1-4-2 Kernel Initializers

Kernel Initializers kommen zum Einsatz, um die Gewichte eines neuronalen Netzes zu
initialisieren. Der Begriff Kernel Initializers steht für die statistische Verteilung oder Funktion,
die für die Initialisierung der Gewichte verwendet werden soll. Zur Initialisierung der Gewichte
können die Normalverteilung (normal distribution), Gleichverteilung (uniform distribution), 0-
Initializer oder 1- Initializer eingesetzt werden. [5]

1-4-3 Optimierungsalgorithmen
Loss-Funktion zeigt, wie schlecht das Modell funktioniert. Diese Funktion kann zum Trainieren
des Modells eingesetzt werden. Im Wesentlichen muss den Verlust (Loss) minimiert werden.
Optimierer sind die Algorithmen, mit denen die Gewichte und learning rate geändert werden, um
die Verluste zu verringern. Es gibt verschiedene Arten von Optimierern wie Gradient Descent,
Stochastic Gradient Descent (SGD), SGD mit momentum usw. [6]

6
1-5 Convolutional Neural Network (CNN)
Convolutional Neural Network (CNN), zu Deutsch “faltendes neuronales Netzwerk“, wird durch
die meisten neuronalen Netze verwendet. Das CNN-Netzwerk ist eine der beliebtesten Methoden
zur Objekterkennung wie zum Beispiel die Bildklassifizierung. Die Eingabe des CNN-Netzwerks
ist ein Bild. Das Netzwerk nimmt das Foto und gibt die Wahrscheinlichkeit der unterschiedlichen
Klassen aus. Wenn das Objekt im Bild vorhanden ist, ist seine Ausgabewahrscheinlichkeit hoch,
andernfalls ist die Ausgabewahrscheinlichkeit der restlichen Klassen entweder vernachlässigbar
oder niedrig. Convolutional Neural Network enthalten drei Hauptschichten, die nachfolgend kurz
erklärt werden. [1]

1-5-1 Convolutional Layer

Convolutional Layer lassen einige Komponenten wie Eingabedaten, Filter oder Kernel und
Feature-Map nutzen.

Abbildung 1- Faltung (Convolution) zwischen einem Eingabebild und einem Kernel [7]

1- Eingabedaten: Die Eingabedaten können ein farbiges Foto sein, das aus einer
Pixelmatrix entsteht. Diese Pixelmatrix hat drei Dimensionen (Höhe, Breite und Tiefe),
die RGB in einem Bild entsprechen. [7]
2- Filter: Der Filter oder Kernel ist tatsächlich ein Convolution Matrix, der über das
Eingangsbild übergegeben wird. Die Filtergröße ist typischerweise eine 3x3-Matrix. Der
Filter wird dann auf einen Bereich des Bildes angewendet und zwischen den
Eingabepixeln und dem Filter wird ein Skalarprodukt berechnet. Dieses Skalarprodukt

7
 wird dann in ein Ausgangsarray also zweidimensionales Array eingespeist. Danach
verschiebt sich der Filter um einen Schritt und wiederholt den Vorgang, bis der Filter sich
über das gesamte Bild bewegt [01]. In der Abbildung filtert ein 3x3 convolution Matrix
ein 9x9 Eingangsmatrix. Das Ergebnis ist ein 7x7 Ausgangsmatrix. [7]

Abbildung 2 - Eingang Shape: (1, 9, 9) - Ausgang Shape: (1, 7, 7) K: (3, 3) - P: (0, 0) - S: (1, 1) [7]

3- Feature-Map: Die Ausgabe, die sich von Skalarprodukten aus der Eingabe und dem
Filter ausgibt, wird als Feature-Map, oder convolved feature bekannt. Es gibt drei
Parameter, die die Größe der Ausgabe beeinflussen. Diese müssen vor dem Beginn des
CNN-Modell-Trainings eingestellt werden und beinhalten: [1]
▫ Anzahl der Filter: sie wirkt sich auf die Tiefe der Ausgabe aus. Beispielsweise würden
drei unterschiedliche Filter drei verschiedene Feature-Maps ergeben, wodurch eine Tiefe von
drei entsteht. [1]
▫ Stride: Es ist die Anzahl der Pixel, die der Filter über die Eingabematrix bewegt. Die Filter
bewegen sich standardmäßig von links nach rechts, von oben nach unten und verschieben sie
Pixel für Pixel. Diese Verschiebung kann aber auch geändert werden. Bei einer Schrittweite
(Stride) von (1, 3) wird der Filter z. B. horizontal von 3 auf 3 und vertikal von 1 auf 1
verschoben. [1]
▫ Zero-Padding: Es wird normalerweise verwendet, wenn der Filter nicht zum
Eingangsbild passt. Dabei werden alle Pixel auf null gesetzt, die außerhalb der Eingabematrix
liegen, wodurch die Ausgabe größer oder gleich wird. [1]

Um Nichtlinearität ins Modell eingeführt zu werden, wendet ein CNN-Modell nach jeder
Faltungsoperation eine nichtlineare Transformation wie ReLU auf Feature-Map an. [1]

8
1-5-2 Pooling layer
Pooling layer führt dazu, die Anzahl der Parameter in der Eingabe zu reduzieren. Es gibt zwei
Hauptarten dafür.
1- Maximales Pooling: Wenn sich der Filter über die Eingabe bewegt, wählt er der Pixel
mit dem maximalen Wert aus. Der gewählte maximale Wert wird an das Ausgabearray
gesendet. [1]
2- Durchschnittliches Pooling: Während sich der Filter über die Eingabe bewegt,
berechnet er den Durchschnittswert, um ihn an das Ausgabearray zu senden. [1]

1-5-3 Fully connected layer

Fully Connected Layer in einem neuronalen Netzwerk bedeutet, dass alle Eingaben einer Schicht
mit jeder Aktivierungsfunktion der nächsten Schicht verbunden sind. Während Convolution Layer
und Pooling Layer verwenden ReLu, nutzen Fully Connected Layer in der Regel eine Softmax-
Aktivierungsfunktion, um Eingaben zu klassifizieren und eine Wahrscheinlichkeit von 0 bis 1 zu
erzeugen. [1]
Hierbei ist die Aufgabe “die Erkennung von handgeschriebenen Ziffern”. Wie bereits erwähnt,
geht es um ein Bildklassifizierungsproblem. Die Eingabe des NNs ist ein Bild (28 x 28), deswegen
wird ein CNN-Modell betrachtet. Um das Neural Netzwerk zu trainieren und zu überprüfen, ob
das neurale Netzwerk die richtige Antwort geliefert hat oder nicht, wird die MNIST-Datenbank
verwendet.

1-6 MNIST-Datenbank

Die MNIST-Datenbank ist eine riesige Datenbank und wird normalerweise zur Vorbereitung
verschiedener Bildverarbeitungssysteme im Bereich des maschinellen Lernens genutzt. Das
MNIST-Problem ist ein Bildklassifizierungsproblem. Das Ziel des Problems ist es, ein gegebenes
Bild einer handgeschriebenen Ziffer als eine ganze Zahl von 0 bis 9 zu klassifizieren. Es handelt
sich also um ein Bildklassifizierungsproblem mit mehreren Klassen. MNIST stellt insgesamt
70.000 handschriftlichen Zahlenbildern zur Verfügung, wobei der Trainingsdatensatz 60.000
Beispielen umfasst, um das neurale Netzwerk zu trainieren, und der Testdatensatz 10.000
Beispielen sich feststellen lässt, wie gut ein Algorithmus funktioniert. Jedes Foto hat ein Label.
9
Das Lable heißt die Ziffer, die das handgeschriebene Zeichen darstellen soll, beispielweise eine 7
oder eine 3. Das ist die Antwort, die das CNN geben soll, nachdem es die Lernphase
abgeschlossen hat. Ein Zahlenbild besteht aus (28 x 28). [8]

Abbildung 3 - Beispiel von der MNIST-Datenbank [9]

Im Folgenden werden die wichtigen Bibliotheken sowie die Plattformen und die Frameworks
erwähnt, die bei der Programmierung verwendet werden.

1-7 Programmbibliotheken

1-7-1 TensorFlow und Keras

TensorFlow ist ein beliebtes Framework zur Programmierung von den Algorithmen des
maschinellen. Das auf C++ basierendes Framework bietet vielfältige Einsatzmöglichkeiten im
Bereich der neuronalen Netzwerke und Modelle des Deep Learnings an. Das Framework ist unter
einer Open-Source-Lizenz zur Verwendung der Spracherkennung oder Bildverarbeitung
veröffentlicht. Google entwickelte diese Software für den internen Gebrauch wie die Google-
Spracherkennung, die Google-Suche, Google Mail, Google Translate und Google Maps usw. [9]

10
Keras- lässt ein High Level API verwenden und ist zusammen mit den ML -Frameworks wie
TensorFlow einsetzbar. Diese Schnittstelle befasst sich um eine Open-Source-Bibliothek, die in
Python geschrieben ist. Ziel dieser Bibliothek ist es, die schnelle Implementierung neuronaler
Netzwerke für Anwendungen des Deep Learnings zu ermöglichen. [10]

1-7-2 OpenCV
Open Source Computer Vision-Bibliothek oder kurz OpenCV ist unter einer Open-Source-
Softwarebibliothek zum Computer Vision und maschinelles Lernen veröffentlicht. OpenCV ist
nativ in C++ geschrieben. Es konzentriert sich hauptsächlich auf Bildverarbeitung,
Videoaufnahme und -analyse. [11]

In diesem Projekt wird die OpenCV-Bibliothek von Grund auf neu erstellen, anstatt die offiziellen
Bibliotheken von OpenCV zu verwenden.

1-8 App Entwicklung

In den letzten Jahren hat sich einiges in der Welt der Apps geändert. Während es früher für jede
Plattform eigentlich nur native Apps gab, ist die Auswahl für Entwickler heute etwas größer und
sie können sich für drei unterschiedliche App-Typen wie Cross-Plattform Apps, Web Apps und
Hybrid Apps entscheiden. [11]
Eine mobile Applikation ist eine Software-Applikation, die speziell für die Verwendung auf
einem mobilen Gerät beziehungsweise mobile Betriebssysteme bezeichnet. Bei mobilen Apps
wird zwischen nativen Apps und Cross-Plattform-Apps unterschieden. [12]

1-8-1 Native App Entwicklung

Native Apps können nur auf einem bestimmten Betriebssystem entweder iOS oder Android
funktionieren. Google, der Hersteller von Android, stellt die Sprache Android Studio für
Entwicklung von Android-Apps zur Verfügung. Diese unterstützt zwei Programmiersprachen:
Java und Kotlin. Apple, der verantwortliche Hersteller von iOS, bietet für die Entwicklung von
iOS-Apps zwei passende Programmiersprachen Objective-C und Swift an. [12]

11
1-8-2 Cross Plattform App Entwicklung

Die Cross Plattform Apps, die plattformunabhängig sind, können sowohl für Betriebssystem iOS
als auch für Android erstellt werden. Die meisten Apps sollen nicht nur auf Android, sondern auch
auf iOS verfügbar sein. Es gibt unterschiedliche Frameworks wie React Native und Xamarin zur
Verfügung. Im Vergleich zu nativen Apps sind Cross Plattform Apps ein schnellerer und
günstigerer Weg, um das Ziel der mobilen Entwicklung zu erreichen. [12]

1-8-3 Xamarin
Bei Xamarin handelt es sich um eine Open-Source-Plattform für das Erstellen moderner Apps für
iOS, Android und Windows mit .NET. Mit den Komponenten Xamarin.iOS und
Xamarin.Android ist es möglich, native Apps für iOS, Android und Windows in C# entweder mit
Xamarin Studio oder Visual Studio zu entwickeln. [12]

1-8-4 React Native

React Native ist ein Open-Source-Framework, das von Facebook entwickelt wurde. Zurzeit ist
React Native eine führende Lösung, um iOS- und Android-Apps für den Einsatz ans Licht zu
bringen. Zum Erstellen einer React Native App müssen Entwickler in JavaScript und React
programmieren. Die beliebten Applikationen wie Instagram, Facebook und Skyp wurden mit
diesem JavaScript-Framework entwickelt. [13]

12
Kapitel 2: Entwurfsphase

Das folgende Kapitel geht von der Frage aus, was das Ziel des Projekts ist und wie es erreicht
wird. Das letztendliche Ziel ist es, eine Applikation für Betriebssysteme Android zu entwerfen,
die die handgeschriebene Ziffer erkennen und in Echtzeit bearbeiten kann.
Um das letztendliche Ziel zu erreichen, sollte zunächst ein Convolutional Neural Netz erstellt und
trainiert werden und Zweitens soll die App für das Betriebssystem Android anhand von einem
JavaScript-Framework sogenannte React Native entwickelt werden. Schließlich sollten das CNN-
Modell und die App kombiniert werden.

2-1 Entwurf von Backend

Menschliches Gehirn kann einfach eine handgeschriebene Ziffer erkennen. Wie kann die Machine
dies erreichen? Wie ein Kind lernt, kann eine Machine genauso lernen. Das Kind schaut die Fotos
von den Katzen und Hunden in seinem Buch an. Es wird informiert, wie eine Katze aussieht und
welche Eigenschaften stellen einen Hund dar. Dann kann es lernen und trainieren, ob die Bilder
einen Hund oder eine Katze zeigen. Danach wenn das Kind ein neues Buch bekommt, kann es die
neuen Bilder richtig erkennen und klassifizieren. Tatsächlich wird eine unbekannte Zielfunktion
in seinem Gehirn erstellt. Wenn das Kind ein Foto sieht, wird das Foto in seinem Gehirn
verarbeitet und danach kann es die richtige Entscheidung treffen. Durch den gleichen Weg kann
eine Machine lernen und eigenständig Entscheidungen treffen.
Dieses Teampraktikum geht es darum, dass die Machine die Fotos von handgeschriebenen Ziffern
richtig klassifizieren kann. Das heißt, die Machine (hier ein Handy) muss erstmal Beispiel Fotos
von handgeschriebenen Ziffern bekommen, um zu lernen und zu trainieren. Danach kann sie neue
handschriftliche Zahlen, die sie nicht schon gesehen hatte, auch richtig klassifizieren und
erkennen. Als Beispielfotos von schriftlichen Ziffern benutzt die Machine die MNIST-Datenbank.
Zum Lernen und Trainieren wird ein CNN-Modell angepasst, danach kann die Machine das
richtige Ergebnis ausgeben.

13
2-2 Entwurf von Frontend

Wie kann eine Mobile App für das Betriebssystem Android entwickelt werden? Die vorliegende
Arbeit befasst sich außerdem mit einer Cross-Plattform App für das Betriebssystem Android. Hier
betrachtet man ein Cross Plattform App, die auf React Nativ eingesetzt ist. An dieser Stelle muss
man besonders betonen, dass OpenCV auf React Nativ nicht einsetzbar ist, obwohl React Native
ein JavaScript-Framework ist. React Native kann nicht alle Bibliotheken von JavaScript
verwenden, weil einige nur für Web-Anwendungen erstellt wurden. Aus diesem Grund wird eine
native OpenCV-Bibliothek erstellt.
Command Line Interface CLI ist ein Werkzeug, die zur Kommunikation mit dem Computer im
Einsatz kommt. React-Native verfügt über zwei CLIs mit Namen Expo-CLI und React Native-
CLI. Zur Entwicklung von React Native Apps bietet Expo-CLI, die hier eingesetzt wird, viele
vorteilhafte Einstellungen an wie z.B. die Änderungen in der Echtzeit gesehen werden. [14]
Hierbei wird Node.js verwendet. Node.js ist eine Open-Source-JavaScript Environment oder
Umgebung, damit JavaScript code ohne Browser ausgeführt werden können. [15]

2-3 Kombinieren des CNN-Modells mit der App

Das trainierte CNN-Modell kann in React Nativ aufgerufen werden, wenn es in ein JSON-File
umgewandelt wird. Das JSON-File wird von der TensorFlow-Bibliothek durchgeführt.
Da React Native ein komponentenbasiertes (component-based) JS-Framework ist, wird eine
Komponente als DigitRecognationModule definiert, die in Java geschrieben ist. Diese
Komponente wird in React Native importiert.

14
Kapitel 3: Implementierungsphase – Backend

Hierbei wird erleuchtet, wie ein Deep Learning Modell beziehungsweise ein Convolutional
Neural Network (CNN) Modell zur Erkennung der hangeschrieben Zahlen in Python unter Einsatz
von der Keras-Deep-Learning-Bibliothek, TensorFlow und OpenCV erstellt und trainiert werden
kann.
Das Backend besteht aus vier Hauptmodule, die als DatasetLoader, RecognitionModel,
ImagePrediction und Main benannt werden.

3-1 Modul Dataset Loader

3-1-1 Import der Bibliotheken

Zuerst werden die folgenden Python-Bibliotheken importiert, um das neuronale Netzwerk

aufzubauen und das Modell zu trainieren.
1- Matplotlib: Zum Visualisieren des neuronalen Netzwerkmodells.
2- Tensorflow.keras.datasets: Zum Laden des MNIST-Datensatzes.
3- Tensorflow.keras.utils.to_categorical: Zum Umwandeln eines Klassenvektors
(integres) in eine binäre Klassenmatrix.

3-1-2 Laden des MNIST-Datensatzes

Zuerst wird eine sogenannte load_mnist_dataset() Funktion definiert. Das Laden der Train- und
Testdaten in Variablen wird durch Aufrufen der Funktion mnist.load_data() erfolgt. Also durch
diese Funktion werden Traindaten, ihre Bezeichnungen und auch die Testdaten und ihre
Bezeichnungen gezeigt. Der MNIST-Datensatz besteht aus Train- und Testeingabe (X) und
Ausgaben (Lable) (Y). Die Eingänge sind Abtastungen von den Zahlenbildern (28 x 28) während
der Ausgänge den numerischen Wert enthalten, den jeder Eingang darstellt.

15
Im nächsten Schritt muss der Datensatz so gestaltet werden, dass das Modell ihn verstehen kann.
Das bedeutet, dass der Datensatz analysiert, vorverarbeitet und modelliert werden muss.

3-1-3 Datenverarbeitung / Reshaping

Die Zahlenbilder sind Graustufenbilder mit Pixelwerten im Bereich von 0 bis 255. Außerdem
haben diese Bilder eine Dimension von (28 x 28). Die Dimension der Traindaten ist (28, 28,
60000), da es 60000 Trainsmuster mit jeweils (28 x 28) Dimensionen gibt. Dementsprechend
haben die Testdaten eine Form von (28, 28, 10000), da es 10000 Testproben gibt. Es gibt auch
insgesamt zehn Ausgabeklassen, die von 0 bis 9 sind. Daher können die Zifferbilder nicht direkt
in das Modell eingespeichert werden. Um die Bilder für neuronales Netzwerk vorbreiten zu
können, müssen jedes Bild (28 x 28) der Train- und Testdaten konvertiert werden. Also das CNN-
Modell erfordert eine weitere Dimension (28, 28, 1).

3-1-4 One Hot Encoding

Wie schon erwähnt wurde, sind die Ausgabeklassen für neuronales Netzwerk numerische Ziffern
im Bereich von (0-9). Die Algorithmen für maschinelles Lernen können nicht direkt mit
nummerischen Nummern arbeiten. Um dieses Problem zu lösen, wird eine sogenannte Methode
‚One-Hot-Encoding‘ verwendet. Dabei werden die numerische Ziffer in einem Zeilenvektor
dargestellt. Es bedeutet, dass man eine boolesche Spalte für jede Ausgabeklasse bildet. Also eine
Tabelle mit 10 Spalten, da es 10 Ziffern gibt. Für jede Stichprobe (nummerische Ziffer) kann nur
eine dieser Spalten den Wert 1 annehmen und alle andere Spalten 0 sind. Zum Beispiel zeigt diese
Hot-Encoding-Vektor [0 0 0 1 0 0 0 0 0 0] eine Bezeichnung von 3. Man kann die numerische
Ziffer als One-Hot-Codierung mit Hilfe der Methode to_categorical() darstellen. [16]

3-1-5 Normalize
Zuerst wird eine Funktion namens normalized_pixels(train, test) definiert. Wie erwähnt, sind
die Zahlenbilder Graustufenbilder mit Pixelwerten im Bereich von 0 bis 255. Die Pixelwerte
müssen vom Int8- Datentyp zum Float32-Datentyp (floating point) gewechselt werden, um in der
gesamten Lösung eine einheitliche Darstellung zu haben. Dieses Ziel kann anhand von der

16
Funktion .astype() erreicht werden. Die Pixelwerte (floating point) müssen neu skaliert werden,
um die Recheneffizienz zu verbessern und die Standards einzuhalten. Hierbei müssen die
Pixelwerte (floating point) durch 255.0 geteilt werden, um die Werte im Bereich von 0 bis 1 zu
normalisieren.

3-2 Modul RecognitionModel

3-2-1 Import der Bibliotheken

Zunächst werden alle erforderlichen Module importiert, die zum Trainieren des Modells
erforderlich sind.

3-2-2 Definition des CNN-Modells

Nachfolgend wird die Netzwerkarchitektur für ein CNN-Modell zusammengefasst. Hier wird eine
Funktion für das CNN-Modell mit den Begriffen wie Sequential, Convulation2D, Max-Pooling,
usw. definiert.
Als erstens wird die Funktion define_model() erstellt.
1- Sequential: In Keras kann man einfach Schichte (layer) stapeln, um die gewünschte
Schichte eine nach der anderen zu hinzufügen. Der in diesem Projekt verwendete
Klassifikator ist e in sequentielles Modell mit einem 32-layer-CNN.
2- Convolution2D: Das ist die erste verborgene Schicht. Hier wird ein Model mit 32
Schichten und einem Filter oder Kernel (3x3) erstellt. Die Activation-Funktion ist ReLU
und als Initializer wird he_uniform verwendet. Die Klasse HeUniform ist ein
Varianzskalierungsinitialisierer. HE-Initializer ist mit der ReLU-Aktivierungsfunktion in
Verwendung. Hier gibt sich nur ein Ausgangskanal (28x28) aus. [17]

17
 3- Max-Pooling2D: Als nächstes definieren wir eine Pooling-layer, die MaxPooling2D
heißt. Es ist mit einer Poolgröße von 2×2 konfiguriert.
4- Genauigkeit: Das Netzwerk nimmt eine Eingabe und gibt die Wahrscheinlichkeit der
unterschiedlichen Klassen aus.
5- One-dimensional Array:
▫ Flatten: Zum Konvertieren eines mehrdimensionalen Arrays in ein eindimensionales
Array oder zum Erstellen eines eindimensionalen Arrays kommt die Methode Flatten zum
Einsatz. [18]
▫ Dense: In Dense Layer erhält jedes Neuron Input von allen Neuronen, die in der
vorherigen Schicht liegen. [19]

In den obigen Codes kommt als nächstes eine Schichte, die die 2D-Matrixdaten in einen Vektor
umwandelt. Als nächstes kommt eine vollständig verbundene Schicht mit 100 Neuronen und die
verwendete Aktivierungsfunktion ist Relu. Schließlich hat die Ausgabeschicht 10 Neuronen für
die 10 Klassen und eine Softmax-Aktivierungsfunktion, um wahrscheinlichkeitsähnliche
Vorhersagen für jede Klasse auszugeben.

6- Compile Modell: Keras stellt eine Methode zur Verfügung, um das Modell zu kompilieren
[20]. Die wichtigsten Argumente sind die folgenden:
▫ Optimierer: hier wird SGD mit momentum verwendet. SGD mit momentum ist eine
stochastische Optimierungsmethode, die dem regulären Stochastic Gradient Descent einen
Momentum-Term hinzufügt. Hierbei ist learning rate gleich 0.01. [20]
▫ Loss-Funktion: Sie wird verwendet, um den Fehler im Lernprozess zu finden. Keras
bietet eine Loss-Funktion im Loss-Modul wie categorical_crossentropy an. [20]
▫ Metrics: Es kommt zum Einsatz, um die Leistung des Modells zu bewerten. Keras lässt
Metrics als Modul wie accuracy nutzen. [20]

18
3-2-3 Erstellen des Modells

Hier wird eine Funktion Namens create_model definiert, damit das Modell erstellt werden kann.

3-3 Modul Image Prediction

Hier wurde eine Funktion zum Laden der Eingabefoto definiert, in der das Foto in graustufen
umgewandelt und die Farbe invertiert wird. Die Bildgrößen werden als (28 x 28) angepasst und
sie werden in Array umgewandelt. Das Bild wird in ein einziges Sample mit 1 Kanal umgeformt
und Pixeldata wird vorbreitet.
Um das Modell zu laden und das Label vorherzusagen, wird eine andere Funktion benannt als
predict_image_with_name definiert.

3-4 Modul Main

In diesem Modul werden die andere drei Hauptmodule DatasetLoader, RecognitionModel und
ImagePrediction aufgerufen und durchgeführt, um MNIST-Datenbank zu laden und zu trainieren,
CNN-Modell zu erstellen und die schriftliche Ziffer zu erkennen.

Die Funktion load_mnist_dataset() des Moduls DatasetLoader wird aufgerufen. Beim

Ausführen des Codes wird die MNIST-Datenbank in den Speicher geladen und einige
Beispielbilder vom Traindata werden gezeigt.
Die Pixelwerte in Bildern müssen skaliert werden, bevor sie als die Eingabe des CNN-Modells
zum Lernen bereitgestellt werden. Anschließend wird die Form der Trainings- und Testdatensätze
angegeben. Die normalisierte Pixeldaten werden vorbreitet.

Hierbei wird das Modell definiert und gespeichert.

19
Das Netzwerk nimmt das Foto, was vorhersagen werden soll, als die Eingabe und kann die
Ausgabe drucken. Hier soll z. B. ein Foto Namens ‘6.png’ vorhergesagt werden und die erkannte
Ziffer wird bei ‘Predicted Number is: ’ gezeigt.

Hierbei wird ein CNN-Modell erstellt und trainiert, um schriftliche Ziffer erkennen zu können.

20
Kapitel 4: Implementierungsphase – Frontend

An dieser Stelle wird Frontend implementiert, um eine App für das Betriebssystem Android zu
entwickeln. Wie in dem ersten Kapital erwähnt wurde, kommt ein JavaScript-Framework namens
React Native zur Verwendung.
Die Applikation besteht aus den nachstehenden Teilen.

4-1 Import der Bibliotheken und Module

4-1-1 React Native-Bibliothek

Zuerst werden aus der React Native-Bibliothek die Kernkomponenten aufgerufen, um die Struktur
der Applikation zu erstellen. Diese Komponenten werden in der gesamten App verwendet und
werden je nach Bedarf wie unten importiert.
1- Stylesheet: Das Stylesheet dient dem Styling. [21]
2- TouchableOpacity: In React Native wird TouchableOpacity verwendet, um eine
Komponente klickbar oder berührbar zu machen und eine Schaltfläche (Button) konstruiert
zu werden. [22]
3- TouchableHighlight: Diese Komponente ist eine Hülle (Wrapper), die dafür sorgt, dass
Views richtig auf Berührungen reagieren. Wenn es nach unten gedrückt wird, wird die
Opazität (opacity) von View verringert, wodurch der berührte Bereich des Bildschirms
angezeigt wird. [22]
4- Text: Text definiert den Titel der Schaltfläche (Button) und das Styling wird durch Stylesheet
vorgenommen. [21]
5- View: Views reagieren auf Berührungen. [21]
6- Dimension: Es ist die Standard-API, mit der die Breite und Höhe des Bildschirms oder des
App-Fensters berechnet wird. Dimensionen können sich ändern (z. B. aufgrund von
Gerätedrehungen). Es ist wichtig, die Bildschirmdimensionen mitberücksichtigt werden,
damit der Inhalt von der App richtig angepasst werden kann. [21]

21
4-1-2 Tensorflow.js
TensorFlow.js ist eine Bibliothek für maschinelles Lernen in JavaScript. tfjs-react-native bietet
einen TensorFlow.js Plattformadapter für React Native. Die Funktion BundleResourceIO ist im
Einsatz, um das Modell vom Dateisystem wie z. B. einem lokalen Mobilgerät zu laden. [23]
Der vorliegende Code wird nicht nur zum Trainieren, sondern auch zum Einsatz des Machine-
Learning-Modells genutzt.

4-1-3 Manipulation der Bilder in React Native Expo

Expo hat ein npm-Paket, das zum Verkleinern oder zum Komprimieren von Bildern Verwendung
finden kann. Innerhalb von expo gibt es einen expoimage-manipulator, den zum Komprimieren
der Bildgröße und auch für andere Manipulationen wie spiegeln, drehen, zuschneiden usw.
benutzt werden kann. Um Bilder zu manipulieren, wird das Paket expo-image-manipulator
verwendet. Das Paket exportiert eine sogenannte manipulateAsync Komponente, die überall im
Projekt platziert werden kann. expo-image-manipulator bietet eine API zum Ändern von Bildern,
die im lokalen Dateisystem gespeichert sind, an. [22]

4-1-4 Modul expo-camera

Modul expo-camera wird importiert, damit der Benutzer auf die Gerätekamera zugreifen kann.
Expo-Camara kann den Benutzer diese Möglichkeit geben. Die bezeichnete Camera-
Komponente wird aus dem Modul expo-Camera exportiert.
Hierbei wenn ein Foto aus der Ferne aufgenommen wird, könnte es zu einem möglichen Fehler
führen. Da die Bilder von der MNIST-Datenbank klein (28 x 28) sind, dann gibt es zusätzliche
Pixel dabei. Um diese möglichen Fehler zu beheben, dann wird einen quadratischen Bereich in
der Kamera definiert, indem das Modell ein ideales Foto als Eingabe bekommen kann. [24]

4-1-5 Import des Moduls DigitRecognitionMoudle

Hierbei wird das Modul DigitRecognitionMoudle aus der nativen OpenCV-Bibliothek importiert.

22
Dieses Modul wird im Abschnitt 4-6-1 genauer beschreibt.

4-1-6 FileSystem
Expo-file-system ermöglicht den Zugriff auf ein Dateisystem, das lokal auf dem Gerät gespeichert
ist.

4-2 State und Variable

State ist eine Komponente und wird für die Daten verwendet, die sich ändern müssen. Das
bedeutet, dass der Zustand in Zukunft aktualisiert werden kann. Es wird folgende Variablen
definiert, die in der Backendphase erstellt werden wie Model, Predictions, Capturesnumber,
Calculatednumber und Operationscommand.

Es sollte auch nicht unerwähnt bleiben, dass mit Hilfe vom React Nativ-Framework die
Komponenten als Class definiert werden können.

4-3 Ladung des Tensorflow-Modells in state.model

An diese Stelle werden das Backend und das Frontend kombiniert.

Component-Didmount ist eine Biult-in-Fnktion. Das wird aufgerufen, nachdem eine Komponente
gemount wurde. Nach dem Aufruf der Didmount-Komponente wird das Tensorflow-Modell in
der state.model-Variable durch tf.loadLayersModel geladen. Das CNN-Modell, was in Python
als H5-Format-Datei erstellt wird, muss so verändern, dass sie in Tensorflow geöffnet und
bearbeitet werden kann. Aus diesem Grund muss die H5-Format-Datei in JSON-Format
umgewandelt werden. Es sollte kurz erklärt werden, dass ein H5-Format eine Hierarchical Data
Format (HDF) ist. Es wird verwendet, um große Datenmengen in Form von mehrdimensionalen
Arrays zu speichern.

23
Async/wait: async kann nur vor einer Funktion hier LoadModel platziert werden. Eine Funktion
gibt immer ein Versprechen (promise) zurück. Der await-Operator darf nur innerhalb eines
Async-Blocks verwendet werden. Der await-Operator wird verwendet, um JavaScript auf ein
Promise zu warten. Dabei ist zu beachten, dass es nur den Async-Funktionsblock warten lässt und
nicht die gesamte Programmausführung.

4-4 Camera Funktion

In dem letzten Schritt wird das Modell durch die Funktion tf.loadLayersModel geladen. In dieser
Phase wird die Camera Bibliothek durch Expo-Camera importiert, um Benutzer den Zugriff auf
die Kamera zu haben. Es gibt zwei Bedingungen:
▫ Wenn Benutzer einen Zugriff hat ("granted")
▫ Wenn es keinen Zugriff gibt ("Access denied")

Es dauert, bis der Benutzer den Zugriff auf die Kamera erlaubt, deswegen wird async/await
benutzt, um parallel die anderen Aufgaben wie takepicture, render usw. ausgeführt werden.

4-5 Aufnahme und Größenänderung des Bildes

Erstens wird beim Druck auf die Taste ein Bild mittels des Befehls takePictureAsync()
aufgenommen. Zweitens wird die Größe des Bildes unter Einsatz vom Befehl manipulateAsync
auf (1000 x 1400) geändert. ManipulateAsync lässt zwei Argumente nutzen. Das erste Argument
ist der Pfad des Bilds (photo path) und das zweite Argument ist die Breite und die Höhe.

Nachdem Größenänderung des Bildes wird die Bilddatei in die Status Variable: CapturedPhoto
eingesetzt. Um das Bild aus dem lokalen Speicher zu lesen, kommt
FileSystem.readAsStringAsync zur Verwendung. Es wird als ein String- oder Array- Objekt mit
base64-encoding type gelesen.

4-6 Native OpenCV-Bibliothek

In diesem Schritt ist es nötig, dass das Bild vom Base64-Format in JSON-Objekt umgewandelt
wird. Unter diesen Umständen wird OpenCV aufgerufen, damit das JSON-Objekt erstellt wird.

24
Das JSON-Object enthält ein Array mit den Pixelwerten. Wie schon erwähnt wurde, ist hier die
OpenCV-Bibliothek als eine Native Bibliothek geschrieben. Dafür wird eine sogenannte
DigitRecognationModule als ein natives Modul in Java definiert.

4-6-1 Erstellen des Moduls DigitRecognationModule

In diesem Absatz wird ein Android Native Modul definiert.
1- Einrichten: Der erste Schritt besteht darin, die Java-Datei zu erstellen. Diese Java-Datei
enthält die native Modul-Java-Klasse (Class). [11]
2- Erstellen des benutzerdefinierten nativen Modul-Files: Die erste Code-Linie definiert
der Name der Applikation, die hier als rtcalculator benannt wird. [11]

Hierbei werden der benötigten Module wie android, com.facebook.react, org.json sowie
org.opencv, java.io und java.util importiert. Um die Länge des Berichtes zu vermeiden, wurden
die entsprechenden Codes Fotos nicht hinzugefügt. Des Weiteren die native Modul-Java-Klasse
erweitert die Klasse ReactContextBaseJavaModule. Für Android werden native Java-Module
als Klassen geschrieben, die ReactContextBaseJavaModule erweitern und die von JavaScript
benötigten Funktionen implementieren. Schließlich wird ein Modul-Class mit Namen
DigitRecognationModule definiert. [11]

3- Der Name des Moduls: Um ein Name für nativen Java-Module in Android dargestellt wird,
kommt die Methode getName() zur Verwendung. Diese Methode gibt den Namen des Moduls
als String zurück. Im folgenden Code gibt getName() DigitRecognationModule zurück. Das
heißt, auf natives Modul kann dann in JavaScript über diesen Namen zugriffen werden. [11]

25
4- Exportieren einer nativen Methode nach JavaScript: Als Nächstes wird dem nativen
Modul eine Methode namens detectDigitRect hinzugefugt. Diese Methode kann in JavaScript
aufgerufen werden. Alle nativen Modulmethoden, die von JavaScript aufgerufen werden
sollen, müssen mit @ReactMethod kommentiert werden. Native Module unterstützen ein
Argument namens Callback, das benutzt wird, um Daten von Java an JavaScript für Methoden
zu übergeben. Mit dem Befahl OpenCVLoader.initDebug() wird geprüft, ob die OpenCv-
Bibliothek verfügbar ist oder nicht. Das Format vom Originalbild wird in ein anderes Format
als Base64 in Bitmap umgewandelt. Dann wird Bitmap in Grayscale umgewandelt. Nach der
Definition des Moduls DigitRecognationModule wird das Bild in eine OpenCV-Matrix
namens Mat umgewandelt. Zum Invertieren seiner Farbe kommt den Befahl InvertColor()
zum Einsatz. Der Befahl scaleBitmap() wird zur Änderung der Bildgröße auf die
Modellgröße (28 x28) verwendet. Das Bild muss in Pixelarray normalisiert und in JSON
konvertiert werden, um an React Native gesendet zu werden. [11]

5- Aufruf der drei wichtigen Funktionen:

▫ Blurring: Blurring auch Smoothing genannt, ist eine einfache und häufig verwendete
Bildverarbeitungsoperation. Um eine Blurring-Operation durchzuführen, wird normalweise
ein linearer Filter wie Normalized-Box-Filter auf der Bild angewendet. Bei diesem Filter ist
jedes Ausgangspixel der Mittelwert seiner Kernel-Nachbarn. Die Bibliothek OpenCV bietet
die Funktion blur() an, um mit diesem Filter eine Glättung durchzuführen. Hierbei um die
glatten Kanten der Ziffer zu erhalten, wird diese Funktion benutzt. [11]
▫ Thresholding: Um ein besonderer Bereich von einem Foto getrennt werden kann, müssen
die Pixel von diesem Bereich vom Rest zu unterscheiden. Um diese Pixel vom Rest zu
unterscheiden, wird einen Vergleich der Intensitätswerte jedes Pixels mit einem
Schwellenwert durchgeführt. Sobald die wichtigen Pixel richtig getrennt werden, bekommen
diese Pixel einen bestimmten Wert, um sie zu identifizieren. Wenn der Pixelwert kleiner als
der Schwellenwert ist, wird er auf 0 gesetzt, andernfalls wird er auf einen Maximalwert oder
einen beliebigen Wert eingesetzt. Zu diesem Zweck kommt die OpenCV-Funktion
cv::threshold zur Verwendung. Dabei wenn der Pixelwert bei mehr als 110 liegt, wird er in
255 konvertiert. [11]
▫ Dilating: Die Dilatation ist eine der Arten von morphologischen Operationen.
Morphologische Operationen sind eine Reihe von Operationen, die Bilder entsprechend eines
Kernels bearbeiten. Bei dieser Operation wird ein Bild A mit einem Kernel (B) gefaltet, der

26
 eine beliebige Form oder Größe (Quadrat oder ein Kreis) haben kann. Dieses Kernel hat einen
Ankerpunkt, der sein Zentrum bezeichnet und wird über das Bild gelegt, um die maximalen
Pixelwerte zu berechnen. Nach der Berechnung wird das Bild durch den Ankerpunkt in der
Mitte ersetzt. Bei diesem Verfahren werden die Bereiche der hellen Regionen immer größer,
so dass die Bildgröße zunimmt. Z. B. nimmt die Größe eines Objekts in einem weißen oder
hellen Farbton zu, während die Größe eines Objekts in einem schwarzen oder dunklen Farbton
abnimmt. [11]

Abbildung 4 – Dilatation vom Buchstaben j [11]

Im Projektverlauf wurde darauf geachtet, wenn das Eingabefoto eine dünne Ziffer darstellt, wird
keine richtige Vorhersage getroffen. Aus diesem Grund wird die Dilatation eines Bildes mit der
Methode dilate() der Klasse imgproc durchgeführt, um das Rauschen und Unvollkommenheiten
entfernt werden zu können, damit die Ziffer sich verdicken kann und sie wird richtig vorhersagt.

In diesem Schritt wird ein Pixel mit den Koordinaten X, Y ausgewählt. Die Eingabefotos gehören
zum RGB-Farbraum. Im vorliegenden Fall liegen die Pixelwerte von R, G und B gleich. Da das
Ziel ist, ein schwarzweißes Bild zu bekommen, dann die rote Farbe werden aus den Pixeln
erhalten und ihre Werte werden zwischen 0.01 und 1 eingesetzt.

Hierbei wird mit den Java-Codes DigitRecognationModule als ein natives Modul zum Bearbeiten
des Bilds erstellt.

4-7 Vorhersage der Ziffern

Nach der Größe Änderung wird prepareForPrediction aufgerufen, um ImagePixelArray darin

eingesetzt zu werden. Es kommt die OpenCV-Funktion tensor4d() zur Verwendung, um einen
neuen 4-Dimensionalen Tensor mit den Parametern Value, Shape und Datatype zu erstellen. Nach

27
diesem Prozess kann die Ziffer vorhergesagt werden. Für den Rendering-Teil bedient sich die
Methode renderPrediction.

4-8 Kalkulation und Rechnung

Nach der Vorhersage der Ziffern muss Ziffern miteinander gerechnet werden, deswegen werden
die Ziffern, die schon erkennt geworden sind, in der Calcultationsfunktion eingesetzt, um
auszurechnen. Danach wird die erkannte Ziffer in Status-Variable eingesetzt und dem Benutzer
gezeigt.

4-9 Design der Applikation

Schließlich wird die App-Umgebung programmiert. Z. B. welche Farbe verwendet werden oder
wie die Taste aussehen sollen. Im Folgenden wird die Cods gezeigt. In der Abbildung-5 wird der
Zugriff der Kamera und das Design der Applikation dargestellt.

Abbildung 5 - Der Kamera-Zugriff und die App-Umgebung

28
 ▫ Nummer 1: zeigt den quadratischen Bereich. Die Ziffer, die gescannt werden soll, muss
in diesem Bereich liegen.
▫ Nummer 2: enthält Rechnenmethode (+, -, *, /)
▫ Nummer 3: zeigt das letztendliche Ergebnis.
▫ Nummer 4: zeigt die vorhersagte Ziffer.
▫ Nummer 5: zeigt, welche Rechnenmethode ausgewählt wird, da die Farbe nicht mehr
weiß, sondern hellgrau ist.
▫ Nummer 6: ist die Taste, damit man Foto scannen kann.

Im nächsten Kapitel wird die App getestet.

29
Kapitel 5: Testphase
In diesem Schritt wurde die App auf verschiedene Android- Gräte und Versionen getestet.
Nachdem die App installiert wird und der Zugriff auf die Kamera zugelassen wird, kann der
Anwender schriftliche Ziffer scannen.

Abbildung 6 - Die Funktion der Applikation

30
Zuerst wird die erkannte Ziffer gezeigt. Falls der Anwender eine rechnenmethode auswählt und
die nächste Ziffer scannt, gibt die App das Ergebnis aus
In den obigen Fotos wird diese Rechnung durchgeführt:
▫ 6*7 = 42
▫ 42- 5= 37
▫ 37+1=38
Bei der Testphase ist klar geworden, dass falls die App keine richtige Ziffer erkennen kann, dann
gibt einfach eine Randomziffer aus. In dem Foto wird erwartet, dass letztendlich Ergebnis 38
wäre, da 38 – 0 = 38. Während die App keine richtige Vorhersage getroffen hätte. Also statt die
Ziffer 0 wurde einen 9 erkannt. Es gibt verschiedene Gründe für diesen Fehler wie schwache
Datenverarbeitungsleistung des Geräts, schlechtes Licht, Aufnahmequalität des Fotos durch
Anwender (zu nah, zu weit oder Zittern der Hand). Es ist auch eine begrenzte Anzahl von
Testdaten (10000) Zur Verfügung, die einen Fehler zur Folge haben kann. Die App funktioniert
in vielen Fällen einwandfrei, da die App vor allem eine hohe Genauigkeit leisten kann

Abbildung 7 - Die Erkennung einer Randomziffer

31
Zusammenfassung und Fazit

In diesem Bericht wird die Methode zum Aufbau tiefer Netzwerke für Bildverarbeitungszwecke
vorgestellt. Maschinelles Sehen oder "Computer Vision" ist ein aktives und sich entwickelndes
Feld im Bereich der künstlichen Intelligenz. Dieses Feld entwickelt sich mit großer
Geschwindigkeit und durch umfangreiche Forschung, die täglich veröffentlicht wird, und bietet
die Menschen ständig neue Möglichkeiten, die zuvor mit Computern und künstlicher Intelligenz
nicht möglich waren. Convolutional Neural Networks (CNN) sind heute die treibende Kraft hinter
jedem Fortschritt in der Computer-Vision-Forschung. Man sollte nur diese Faltungsobjekte in
verschiedenen Schichten zu stapeln und eine Art Pool zu verwenden und schließlich Softmax zu
benutzen, um Computer-Vision-Technologie zu erreichen.

Während die Nutzung von Mobiltelefonen zunimmt, haben sich viele Unternehmen der App-
Entwicklung zugewandt. In diesem Artikel wird kurz erklärt, was die Entwicklung mobiler Apps
ist, was die verschiedenen Methoden der Entwicklung mobiler Apps sind und schließlich, was der
Entwicklungsprozess umfasst. Um mobile Anwendungen zu entwickeln, die den Benutzern gut
gefallen, ist es sehr wichtig, die Entwicklungsmethoden zu kennen und über ausreichende
Kenntnisse zu verfügen, um die beste Methode und das am besten geeigneten Tool für die
Erstellung der Anwendung auszuwählen.

32
Referenzen

[1] 01. [Online]. Available: IBM Cloud Learn Hub | IBM.

[2] 02. [Online]. Available: https://datasolut.com/was-ist-machine-learning/.

[3] 03. [Online]. Available: https://news.microsoft.com/de-de/microsoft-erklaert-was-ist-deep-learning-

definition-funktionen-von-dl/.

[4] 04. [Online]. Available: https://www.geeksforgeeks.org/ml-understanding-hypothesis/.

[5] 05. [Online]. Available: https://teksands.ai/blog/kernel-initializers.

[6] 06. [Online]. Available: Optimization Algorithms in Neural Networks - KDnuggets.

[7] 07. [Online]. Available: Conv2d: Finally Understand What Happens in the Forward Pass | by ⭐Axel
Thevenot | Towards Data Science.

[8] T. Rashid und F. Langenau, Neuronale Netze selbst programmieren: ein verständlicher Einstieg mit
Python, Heidelberg: O'Reilly Verlag, 2017.

[9] 09. [Online]. Available: Towards Data Science .

[10] 10. [Online]. Available: https://www.bigdata-insider.de/was-ist-tensorflow-a-684272/ .

[11] 11. [Online]. Available: https://opencv.org/.

[12] 12. [Online]. Available: https://bmu-verlag.de/app-programmiersprache/.

[13] 13. [Online]. Available: https://www.tenmedia.de/de/glossar/react-native.

[14] 14. [Online]. Available: https://www.venturedive.com/blog/expo-cli-vs-react-native-cli/.

[15] 15. [Online]. Available: https://nodejs.org/ .

[16] 16. [Online]. Available: ML | One Hot Encoding to treat Categorical data parameters - GeeksforGeeks.

[17] 17. [Online]. Available: https://keras.io/api/layers/convolution_layers/convolution2d/.

[18] 18. [Online]. Available: Keras Flatten | What is keras flatten? | How to use keras flatten? (educba.com).

[19] 19. [Online]. Available: Dense Layer in Tensorflow (opengenus.org) .

[20] 20. [Online]. Available: Keras - Model Compilation (tutorialspoint.com) .

[21] 22. [Online]. Available: https://reactnativemaster.com/react-native-dimensions-usage/ .

[22] 21. [Online]. Available: https://www.tutorialandexample.com/touchableopacity-in-react-native .

[23] 23. [Online]. Available: https://js.tensorflow.org/api_react_native/0.3.0/#bundleResourceIO.

[24] 24. [Online]. Available: Camera - Expo Documentation .

33
34