Added more images

.vscode/ltex.dictionary.de-AT.txt

@@ -51,3 +51,7 @@ ReportGenerators
 Lookup
 EntityFramework-Bibliothek
 Prototypbibliothek
+Catmull-Rom
+Hermite
+Hermite-Interpolation
+Nearest-Neighbor

chapters/c30_konzept/algorithmen/preprocessing.tex

@@ -12,47 +12,30 @@ Die folgenden Preprocessing-Schritte basieren auf der empfohlenen Vorgehensweise
 
 Bei Resampling wird die Bildauflösung durch "Neuabtastung" verändert. Um die für Tesseract optimale \mcite{tessdoc} Mindestauflösung von 300 dpi zu gewährleisten, muss das Eingangsbild, sofern es die Mindestauflösung unterschreitet, zunächst entsprechend vergrößert werden.
 
-Da Tesseract auf klare und scharfe Kontraste angewiesen ist, um Text korrekt zu identifizieren, eignen sich nicht alle von ImageMagick zur Verfügung gestellten Skalierungsmethoden für die Weiterverarbeitung. Besonders beim Hochskalieren neigen einige Filter dazu, Unschärfen und Artefakte zu erzeugen, die die Genauigkeit der Texterkennung negativ beeinflussen können. [TODO: Beispielbild für Bilineare Skalierung oder nearest-neighbor hier einfügen]. Unter den verschiedenen Resampling-Filtern, die ImageMagick bereitstellt, haben sich insbesondere die Bikubische Interpolation und das Lanczos-Verfahren als für die Texterkennung mit Tesseract geeignet erwiesen \mcite{todo}:
-
-\subsubsubsection{Bikubische Interpolation}
-\label{algorithmen_bicubic_interpolation}
-
-Die Bikubische Interpolation stellt eine Erweiterung der Kubischen Spline Interpolation dar. Für die Berechnung des Ergebniswertes eines Pixels werden bei diesem Verfahren sowohl Pixel aus der ersten, als auch aus der zweiten Nachbarschaft berücksichtigt, wodurch -- zu lasten der Laufzeitperformanz -- eine hohe Detailtreue erhalten werden kann. Mithilfe von Streuparametern kann beeinflusst werden, wie stark die Übergänge zwischen einzelnen Pixeln geglättet werden \bzw wie scharf die Kanten im berechneten Ergebnisbild sind. Abhängig von der Qualität der Ausgangsdaten können Skalierungsartefakte dadurch weitestgehend vermieden werden.
+Da Tesseract auf klare und scharfe Kontraste angewiesen ist, um Text korrekt zu identifizieren, eignen sich nicht alle von ImageMagick zur Verfügung gestellten Skalierungsmethoden für die Weiterverarbeitung. Wie in Abbildung \ref{fig:algorithmen_resampling_vergleich} zu sehen, neigen einige Filter besonders beim Hochskalieren dazu, Unschärfen oder Artefakte zu erzeugen, die die Genauigkeit der Texterkennung negativ beeinflussen können.
 
 \begin{figure}[ht]
-  \begin{minipage}{0.49\textwidth}
-    \fbox{\includegraphics[width=\textwidth]{include/screenshots/command-processing_screentypes_controlgroup_005.png}}
-  \end{minipage}
-  \hspace{0.1\textwidth}
-  \begin{minipage}{0.49\textwidth}
-    \fbox{\includegraphics[width=\textwidth]{\detokenize{include/results/ThresholdProcessor(40\%).00.command-processing_screentypes_controlgroup_005.png}}}
-  \end{minipage}
-  \caption{Anwendung der Bikubischen Interpolation auf einen Beispielscreenshot. Die Übergänge zwischen den Pixeln werden geglättet und die Texte wirken leicht verschwommen.}
-  % TODO Vergleichsbilder.
-  \label{algorithmen_bicubic_interpolation_vergleich}
+  \centering
+  \subcaptionbox
+    {Original}
+    {\fbox{\includegraphics[width=0.15\textwidth]{include/resampling/source.png}}}
+  \hspace{0.005\textwidth}
+  \subcaptionbox
+    {Nearest-Neighbor}
+    {\fbox{\includegraphics[width=0.24\textwidth]{include/resampling/Nearest.png}}}
+  \hspace{0.005\textwidth}
+  \subcaptionbox
+    {Hermite}
+    {\fbox{\includegraphics[width=0.24\textwidth]{include/resampling/Hermite.png}}}
+  \hspace{0.005\textwidth}
+  \subcaptionbox
+    {Lanczos}
+    {\fbox{\includegraphics[width=0.24\textwidth]{include/resampling/Lanczos.png}}}
+  \caption{Ein Vergleich unterschiedlicher Resampling-Filter. Bei Anwendung des Lanczos-Filters bleiben Details und Konturen vergleichsweise gut erhalten und der Text ist gut lesbar.}
+  \label{fig:algorithmen_resampling_vergleich}
 \end{figure}
 
-Bei Verwendung der Bikubischen Interpolation als Resampling-Algorithmus fällt auf, dass Bilder und Grafiken durch die Glättung für das menschliche Auge ansprechender wirken. Tesseract jedoch profitiert stark von klaren Texten und hohen Kontrasten, weswegen diese Art des Resamplings keine ideale Basis für die nächsten Preprocessingschritte bildet.
-
-\subsubsubsection{Lanczos Filterung}
-\label{algorithmen_lanczos}
-
-Das Lanczos-Verfahren erlaubt es, Bilder beim Resampling präzise zu rekonstruieren. Es verwendet eine Fensterfunktion, basierend auf dem nichtnormierten Sinus Cardinalis, auch bekannt als Samplingfunktion \(sinc(x)\) und erzeugt im Gegensatz zur \hyperref[algorithmen_bicubic_interpolation]{Bikubischen Interpolation} weniger stark geglättete Ergebnisse, dafür sind diese jedoch meist schärfer. Durch die Verwendung der aufwändigen Samplingfunktion ist Resampling nach der Lanczos-Methode vergleichsweise rechenintensiv.
-
-\begin{figure}[ht]
-  \begin{minipage}{0.49\textwidth}
-    \fbox{\includegraphics[width=\textwidth]{include/screenshots/command-processing_screentypes_controlgroup_005.png}}
-  \end{minipage}
-  \hspace{0.1\textwidth}
-  \begin{minipage}{0.49\textwidth}
-    \fbox{\includegraphics[width=\textwidth]{\detokenize{include/results/ThresholdProcessor(40\%).00.command-processing_screentypes_controlgroup_005.png}}}
-  \end{minipage}
-  \caption{Anwendung des Lanczos Filters auf einen Beispielscreenshot. Details und Konturen bleiben verhältnismäßig gut erhalten.}
-  % TODO Vergleichsbilder
-  \label{algorithmen_lanczos_vergleich}
-\end{figure}
-
-Aufgrund der höheren Bildschärfe und den dadurch deutlich klareren Texten fällt die Wahl des Skalierungsverfahrens für die weiteren Schritte auf die Lanczos-Methode.
+Nach einigen Tests hat sich gezeigt, dass Bilder, die mittels des Spline-Verfahrens oder der Hermite-Interpolation skaliert wurden, natürlich für das menschliche Auge ansprechender wirken. Tesseract jedoch profitiert stark von klaren Texten und hohen Kontrasten, weswegen diese Art des Resamplings keine ideale Basis für das Preprocessing bietet. Deswegen wird für die weiteren Schritte die Interpolation nach Lanczos für das Resampling verwendet. 
 
 \subsubsection{Rahmen}
 \label{algorithmen_rahmen}
@@ -61,7 +44,7 @@ Befindet sich Text zu nah am Rand des Bildes, kommt es vor, dass dieser nicht ri
 
 \begin{figure}[ht]
   \centering
-  \fbox{\includegraphics[width=.7\textwidth]{include/bsp_rahmen_groß.png}}
+  \fbox{\includegraphics[width=.4\textwidth]{include/bsp_rahmen_groß.png}}
   \caption{Ein im Verhältnis zur Bildgröße zu großer einfärbiger Rahmen}
   \label{}
 \end{figure}
@@ -81,26 +64,20 @@ Ein häufig für die Bildsegmentierung genutztes Verfahren ist die feste Schwell
 Das fixe Thresholding benötigt durch seine Simplizität einen relativ geringen Berechnungsaufwand und weist daher eine hohe Performance auf. Allerdings ergibt es sich oft, dass die eigentlich bunten grafischen Elemente der Benutzeroberfläche aufgrund ihrer Helligkeit über dem Schwellenwert liegen. Dadurch werden sie, genau wie der Text, als Vordergrund wahrgenommen und die gesamte Fläche wird einfärbig. Somit kann jeglicher Text innerhalb dieser Fläche nicht vom Texterkennungssystem erkannt werden und die Qualität und Menge der erkannten Textdaten wird stark reduziert.
 
 \begin{figure}[ht]
-  \begin{minipage}{0.49\textwidth}
-    \fbox{\includegraphics[width=\textwidth]{include/screenshots/zrs_ZAMS_windrose_002.png}}
-  \end{minipage}
-  \hspace{0.1\textwidth}
-  \begin{minipage}{0.49\textwidth}
-    \fbox{\includegraphics[width=\textwidth]{\detokenize{include/results/ThresholdProcessor(60\%).00.zrs_ZAMS_windrose_002.png}}}
-  \end{minipage}
-  \caption{Anwendung des festen Schwellenwertverfahrens auf einen Beispielscreenshot. Bei einem passenden Schwellenwert und nur geringfügig verschiedenen Farbflächen ist der Textinhalt gut vom Hintergrund abgrenzbar. Der Schwellenwert beträgt 60\%.}
+  \centering
+  \fbox{\includegraphics[width=0.49\textwidth]{include/screenshots/zrs_ZAMS_windrose_002.png}}
+  \hfill
+  \fbox{\includegraphics[width=0.49\textwidth]{\detokenize{include/results/ThresholdProcessor(60\%).00.zrs_ZAMS_windrose_002.png}}}
+  \caption{Anwendung des festen Schwellenwertverfahrens auf einen Beispielscreenshot. Bei einem passenden Schwellenwert und nur geringfügig verschiedenen Farbflächen ist der Textinhalt gut vom Hintergrund abgrenzbar. Der Schwellenwert  im gezeigten Bild beträgt 60 \%.}
   \label{thresholding_fixed_vergleich_gut}
 \end{figure}
 
 \begin{figure}[ht]
-  \begin{minipage}{0.49\textwidth}
-    \fbox{\includegraphics[width=\textwidth]{include/screenshots/command-processing_screentypes_controlgroup_005.png}}
-  \end{minipage}
-  \hspace{0.1\textwidth}
-  \begin{minipage}{0.49\textwidth}
-    \fbox{\includegraphics[width=\textwidth]{\detokenize{include/results/ThresholdProcessor(80\%).00.editor_startpage_project-exist_001}}}
-  \end{minipage}
-  \caption{Anwendung des festen Schwellenwertverfahrens auf einen Beispielscreenshot. Bei einem falsch gewählten Schwellenwert oder komplexen UI-Elementstrukturen ist der Text nicht erkennbar. Der Schwellenwert beträgt 80\%.}
+  \centering
+  \fbox{\includegraphics[width=0.49\textwidth]{include/screenshots/editor_startpage_project-exist_001.png}}
+  \hfill
+  \fbox{\includegraphics[width=0.49\textwidth]{\detokenize{include/results/ThresholdProcessor(80\%).00.editor_startpage_project-exist_001}}}
+  \caption{Anwendung des festen Schwellenwertverfahrens auf einen Beispielscreenshot. Bei einem falsch gewählten Schwellenwert oder komplexen UI-Elementstrukturen ist der Text nicht erkennbar. Der Schwellenwert im gezeigten Bild beträgt 80 \%.}
   \label{thresholding_fixed_vergleich_schlecht}
 \end{figure}
 
@@ -110,25 +87,20 @@ Das fixe Thresholding benötigt durch seine Simplizität einen relativ geringen
 Die adaptive Schwellenwertmethode gehört zu den halbautomatischen Schwellenwertalgorithmen. Bei diesem Verfahren wird der Schwellenwert auf Basis der lokalen Eigenschaften eines Bildbereichs angepasst, der durch die sogenannte "Blockgröße" definiert wird. Innerhalb eines Blocks wird schließlich dynamisch ein fixer Schwellenwert ermittelt. Dadurch können im Gegensatz zur \hyperref[thresholding_fixed]{festen Schwellenwertmethode} verschiedenfarbige Texte auf Hintergründen unterschiedlicher Helligkeit besser abgegrenzt werden und die Menge an erkanntem Text wird erhöht.
 
 \begin{figure}[ht]
-  \begin{minipage}{0.49\textwidth}
-    \fbox{\includegraphics[width=\textwidth]{include/screenshots/zrs_REPORTS_EfficencyClass_009.png}}
-  \end{minipage}
-  \hspace{0.1\textwidth}
-  \begin{minipage}{0.49\textwidth}
-    \fbox{\includegraphics[width=\textwidth]{\detokenize{include/results/ThresholdAdaptiveProcessor(20_20).00.zrs_REPORTS_EfficencyClass_009.png}}}
-  \end{minipage}
+  \centering
+  \fbox{\includegraphics[width=0.49\textwidth]{include/screenshots/zrs_REPORTS_EfficencyClass_009.png}}
+  \hfill
+  \fbox{\includegraphics[width=0.49\textwidth]{\detokenize{include/results/ThresholdAdaptiveProcessor(20_20).00.zrs_REPORTS_EfficencyClass_009.png}}}
+  
   \caption{Anwendung der adaptiven Schwellenwertmethode auf einen Beispielscreenshot. Die Blockgröße ist gut an den Bildinhalt angepasst und alle Details bleiben erhalten. Dieses Verfahren punktet hier besonders bei den Farbigen "Energy Labels", deren Textinhalte sonst mittels keinem anderen Verfahren komplett erkannt wurden.}
   \label{thresholding_adaptive_vergleich_gut}
 \end{figure}
 
 \begin{figure}[ht]
-  \begin{minipage}{0.49\textwidth}
-    \fbox{\includegraphics[width=\textwidth]{include/screenshots/zrs_ZAMS_OLEDB-server_001.png}}
-  \end{minipage}
-  \hspace{0.1\textwidth}
-  \begin{minipage}{0.49\textwidth}
-    \fbox{\includegraphics[width=\textwidth]{\detokenize{include/results/ThresholdAdaptiveProcessor(04_04).00.zrs_ZAMS_OLEDB-server_001.png}}}
-  \end{minipage}
+  \centering
+  \fbox{\includegraphics[width=0.49\textwidth]{include/screenshots/zrs_ZAMS_OLEDB-server_001.png}}
+  \hfill
+  \fbox{\includegraphics[width=0.49\textwidth]{\detokenize{include/results/ThresholdAdaptiveProcessor(04_04).00.zrs_ZAMS_OLEDB-server_001.png}}}
   \caption{Anwendung der adaptiven Schwellenwertmethode auf einen Beispielscreenshot. Die bei unangepasster Blockgröße entstehenden Artefakte schränken die Funktionsweise des Texterkennungssystems deutlich ein.}
   \label{thresholding_adaptive_vergleich_schlecht}
 \end{figure}
@@ -139,25 +111,19 @@ Die adaptive Schwellenwertmethode gehört zu den halbautomatischen Schwellenwert
 Das Dreiecks-Schwellenwertverfahren verwendet das Histogramm eines Bildes, um einen globalen Schwellenwert zu ermitteln. Innerhalb des Histogramms wird eine Linie vom Höchstwert (\engl{Peak}) zum Minimum gezeichnet und ermittelt die Normale mit der maximalen Länge. Dieses Verfahren erzielt die besten Ergebnisse, wenn die zu extrahierenden Elemente Intensitätswerte aufweisen, die an der Basis des ermittelten Peaks liegen. Für Screenshots von UI-Elementen mit komplexer Struktur und farblich stark variierenden Komponenten ist es eher nicht geeignet.
 
 \begin{figure}[ht]
-  \begin{minipage}{0.49\textwidth}
-    \fbox{\includegraphics[width=\textwidth]{include/screenshots/historian_assistent_001.png}}
-  \end{minipage}
-  \hspace{0.1\textwidth}
-  \begin{minipage}{0.49\textwidth}
-    \fbox{\includegraphics[width=\textwidth]{\detokenize{include/results/AutoThresholdProcessor(Triangle).00.historian_assistent_001.png}}}
-  \end{minipage}
+  \centering
+  \fbox{\includegraphics[width=0.49\textwidth]{include/screenshots/historian_assistent_001.png}}
+  \hfill
+  \fbox{\includegraphics[width=0.49\textwidth]{\detokenize{include/results/AutoThresholdProcessor(Triangle).00.historian_assistent_001.png}}}
   \caption{Anwendung der Dreiecks-Schwellenwertmethode auf einen Beispielscreenshot. Gleichen sich die Inhalte farblich, werden einige Details extrahiert. Durch kleinste Farbvariationen im Bild weicht der Schwellenwert jedoch vom Optimum ab und die Texte sind nur schwer zu erkennen.}
   \label{thresholding_triangle_vergleich_gut}
 \end{figure}
 
 \begin{figure}[ht]
-  \begin{minipage}{0.49\textwidth}
-    \fbox{\includegraphics[width=\textwidth]{include/screenshots/driver_brpvi_offlineimport_004.png}}
-  \end{minipage}
-  \hspace{0.1\textwidth}
-  \begin{minipage}{0.49\textwidth}
-    \fbox{\includegraphics[width=\textwidth]{\detokenize{include/results/AutoThresholdProcessor(Triangle).00.driver_brpvi_offlineimport_004.png}}}
-  \end{minipage}
+  \centering
+  \fbox{\includegraphics[width=0.49\textwidth]{include/screenshots/driver_brpvi_offlineimport_004.png}}
+  \hfill
+  \fbox{\includegraphics[width=0.49\textwidth]{\detokenize{include/results/AutoThresholdProcessor(Triangle).00.driver_brpvi_offlineimport_004.png}}}
   \caption{Anwendung der Dreiecks-Schwellenwertmethode auf einen Beispielscreenshot. Bereits bei mäßiger Variation der Helligkeit verschwinden die ersten Details.}
   \label{thresholding_triangle_vergleich_schlecht}
 \end{figure}
@@ -165,29 +131,32 @@ Das Dreiecks-Schwellenwertverfahren verwendet das Histogramm eines Bildes, um ei
 \subsubsubsection{Schwellenwertmethode nach Otsu}
 \label{thresholding_otsu}
 
-Bei dem Schwellenwertverfahren nach Otsu wird der globale Schwellenwert für ein Bild anhand des jeweiligen Histogramms ermittelt. Aufgrund dieser Eigenschaften funktioniert das Verfahren am besten, wenn das Histogramm des Bildes eine bimodale Verteilung aufweist, also zwei klare Spitzen hat. % TODO Beispielbild eines optimalen histogramms.
+Bei dem Schwellenwertverfahren nach Otsu wird der globale Schwellenwert für ein Bild anhand des jeweiligen Histogramms ermittelt. Aufgrund dieser Eigenschaften funktioniert das Verfahren am besten, wenn das Histogramm des Bildes eine bimodale Verteilung aufweist, also zwei klare Spitzen hat.
+
+
+\begin{figure}[ht]
+  \centering
+  \fbox{\includegraphics[width=0.49\textwidth]{include/images_external/Bimodal-histogram.png}}
+  \caption{Beispiel eines bimodalen Histogramms \mcite{bimodal-histogram}}
+  \label{bimodal_histogram}
+\end{figure}
+
 Enthält ein Bild jedoch starkes Hintergrundrauschen, funktioniert die Schwellenwertermittlung nur unzuverlässig. Weist es lokale Helligkeitsunterschiede auf, wie es bei grafischen Oberflächen mit ihren unterschiedlich eingefärbten Oberflächensektionen oft der Fall ist, entstehen Dank der Bestimmung eines einzelnen globalen Wertes für das gesamte Bild ähnliche Probleme wie bei der \hyperref[thresholding_fixed]{fixen Schwellenwertmethode}.
 
 \begin{figure}[ht]
-  \begin{minipage}{0.49\textwidth}
-    \fbox{\includegraphics[width=\textwidth]{include/screenshots/runtime_function_create_002.png}}
-  \end{minipage}
-  \hspace{0.1\textwidth}
-  \begin{minipage}{0.49\textwidth}
-    \fbox{\includegraphics[width=\textwidth]{\detokenize{include/results/AutoThresholdProcessor(OTSU).00.runtime_function_create_002.png}}}
-  \end{minipage}
+  \centering
+  \fbox{\includegraphics[width=0.49\textwidth]{include/screenshots/runtime_function_create_002.png}}
+  \hfill
+  \fbox{\includegraphics[width=0.49\textwidth]{\detokenize{include/results/AutoThresholdProcessor(OTSU).00.runtime_function_create_002.png}}}
   \caption{Anwendung der Schwellenwertmethode nach Otsu auf einen Beispielscreenshot. Wird ein passender Schwellenwert ermittelt, lässt sich der Text gut vom Hintergrund trennen.}
   \label{thresholding_otsu_vergleich_gut}
 \end{figure}
 
 \begin{figure}[ht]
-  \begin{minipage}{0.49\textwidth}
-    \fbox{\includegraphics[width=\textwidth]{include/screenshots/editor_windows_position_006.png}}
-  \end{minipage}
-  \hspace{0.1\textwidth}
-  \begin{minipage}{0.49\textwidth}
-    \fbox{\includegraphics[width=\textwidth]{\detokenize{include/results/AutoThresholdProcessor(OTSU).00.editor_windows_position_006.png}}}
-  \end{minipage}
+  \centering
+  \fbox{\includegraphics[width=0.49\textwidth]{include/screenshots/editor_windows_position_006.png}}
+  \hfill
+  \fbox{\includegraphics[width=0.49\textwidth]{\detokenize{include/results/AutoThresholdProcessor(OTSU).00.editor_windows_position_006.png}}}
   \caption{Anwendung der Schwellenwertmethode nach Otsu auf einen Beispielscreenshot. Bei komplexen Strukturen im User-Interface gehen aufgrund des globalen Schwellenwerts Details verloren.}
   \label{thresholding_otsu_vergleich_schlecht}
 \end{figure}
@@ -202,25 +171,19 @@ Die Schwellenwertmethode nach Kapur, Sahoo und Wong zielt darauf ab, einen Schwe
 Dieses Schwellenwertverfahren liefert gute Ergebnisse bei Bildern mit starker Varianz der Vorder- und Hintergrundkontraste \bzw einer breiten Helligkeitsverteilung. 
 
 \begin{figure}[ht]
-  \begin{minipage}{0.49\textwidth}
-    \fbox{\includegraphics[width=\textwidth]{include/screenshots/editor_startpage_project-exist_001.png}}
-  \end{minipage}
-  \hspace{0.1\textwidth}
-  \begin{minipage}{0.49\textwidth}
-    \fbox{\includegraphics[width=\textwidth]{\detokenize{include/results/AutoThresholdProcessor(Kapur).00.editor_startpage_project-exist_001.png}}}
-  \end{minipage}
+  \centering
+  \fbox{\includegraphics[width=0.49\textwidth]{include/screenshots/editor_startpage_project-exist_001.png}}
+  \hfill
+  \fbox{\includegraphics[width=0.49\textwidth]{\detokenize{include/results/AutoThresholdProcessor(Kapur).00.editor_startpage_project-exist_001.png}}}
   \caption{Anwendung der Schwellenwertmethode nach Kapur auf einen Beispielscreenshot. Trotz der vielen verwendeten Farben wird der Inhalt gut dargestellt.}
   \label{thresholding_kapur_vergleich_gut}
 \end{figure}
 
 \begin{figure}[ht]
-  \begin{minipage}{0.49\textwidth}
-    \fbox{\includegraphics[width=\textwidth]{include/screenshots/worldview_zoom_steps_001.png}}
-  \end{minipage}
-  \hspace{0.1\textwidth}
-  \begin{minipage}{0.49\textwidth}
-    \fbox{\includegraphics[width=\textwidth]{\detokenize{include/results/AutoThresholdProcessor(Kapur).00.worldview_zoom_steps_001.png}}}
-  \end{minipage}
+  \centering
+  \fbox{\includegraphics[width=0.49\textwidth]{include/screenshots/worldview_zoom_steps_001.png}}
+  \hfill
+  \fbox{\includegraphics[width=0.49\textwidth]{\detokenize{include/results/AutoThresholdProcessor(Kapur).00.worldview_zoom_steps_001.png}}}
   \caption{Anwendung der Schwellenwertmethode nach Kapur auf einen Beispielscreenshot. Trotz der eigentlich einfach erscheinenden Oberfläche erzeugt das Verfahren Artefakte, die die Texterkennung deutlich erschweren.}
   \label{thresholding_kapur_vergleich_schlecht}
 \end{figure}

main.tex

@@ -11,12 +11,15 @@
 
 %%%-----------------------------------------------------------------------------
 
+\usepackage{float}
 \usepackage{xcolor}
+\usepackage{wrapfig}
 \usepackage{outlines}
 \usepackage{booktabs}
 \usepackage{tabularx}
 \usepackage{listings} 
 \usepackage{graphicx}
+\usepackage{subcaption}
 \usepackage[parfill]{parskip}
 
 \usepackage{nameref}
@@ -24,6 +27,8 @@
 
 %%%-----------------------------------------------------------------------------
 
+\captionsetup[subfigure]{labelformat=empty}
+
 \setcounter{tocdepth}{2}
 \setcounter{secnumdepth}{3}
 
@@ -36,9 +41,9 @@
 
 \newcommand{\subsubsubsection}[1]{%
     \stepcounter{subsubsubsection}%
-    \par\addvspace{2pt}%
+    \par\addvspace{8pt}%
     \noindent{\sffamily\underline{#1}}\par
-    \nopagebreak\addvspace{4pt}%
+    \nopagebreak\addvspace{8pt}%
 }
 
 % \newcommand{\subsubsubsection}[1]{%

references.bib

@@ -319,3 +319,10 @@
 	number       = 3,
 	pages        = {177--186}
 }
+@image{bimodal-histogram,
+ author  = "Wikimedia Commons",
+ title   = "Example of a histogram exhibiting bimodalty",
+ year    = "2014",
+ urldate = {2023-06-12},
+ url     = "https://commons.wikimedia.org/wiki/File:Bimodal-histogram.png",
+}