User Interface - MrJaimba/Projektseminar Wiki

Original URL: https://github.com/MrJaimba/Projektseminar/wiki/User-Interface
Ansprechpartner
Timo Steegmans

Für die Visualisierung des AWI-Tools wurde vom Projektteam das Framework "Streamlit" ausgewählt. Die Open Source Anwendung zeichnet sich gegenüber anderen Tools durch eine besonders einfache Handhabung aus, die die Entwicklung einer einfachen Web App in kurzer Zeit ermöglicht. "Streamlit" Apps weisen ein responsives Design auf, wodurch AWI auf allen Endgeräten verwendet werden kann. Bei der Erstellung einer Anwendung können zahlreiche Bibliotheken in Streamlit integriert werden. Kompatibel sind etwa Pandas, Numpy, Pickle, SQLite und viele Weitere. (Quelle: Streamlit)

Der Aufbau des AWI User Interface ist grundsätzlich in sechs Abschnitte unterteilt:

  1. Allgemein
  2. Eingabe
  3. Codierung und Zuordnung
  4. Modelle und Output
  5. Metadaten
  6. weitere Informationen

Allgemein

Grundlegende Einstellungen

Bevor die ersten Elemente in das User Interface eingebunden werden können, müssen zu Beginn allgemeine Einstellungen festgelegt werden. Im ersten Schritt werden alle notwendigen Bibliotheken (SQLite, Streamlit, Pandas, Numpy, Pickle) importiert. Auf dieser Grundlage wird im Anschluss eine Verbindung zur Datenbank über SQLite hergestellt. Anschließend müssen grundlegende Layout-Konfigurationen mit der Funktion st.set_page_config festgelegt werden. An dieser Stelle wird der Tab-Name, das Tab-Icon sowie das Seitenlayout bestimmt. Sollte eine Sidebar zum Einsatz kommen, kann diese hier standardmäßig ein- oder ausgeklappt werden.

Layout Elemente

Im nächsten Schritt bekommt das User Interface ein Headerbild, das sowohl das Universitätslogo als auch das AWI-Logo beinhaltet. Eingefügt wird dieses Element über die Funktion st.image. Über st.image lassen sich problemlos Bilder, Videos und Audio-Dateien hinzufügen, die nach Bedarf angepasst werden können.

Streamlit bietet neben einem einfachen Trennbalken aktuell keine Möglichkeit spezifische Trennelemente zu verwenden. Um dieses Problem zu umgehen, wurde ein individueller Abstandhalter entwickelt, der mit dem User-Interface Design einhergeht. So konnte eine optische Gliederung des User Interface ermöglicht und mehr Übersichtlichkeit geschaffen werden. Auch dieses Element wurde über die Funktion st.image eingebunden.

Informationsfeld

Um dem Nutzer den Einstieg in die Anwendung zu erleichtern, wurde ein Informationsfeld hinzugefügt, das Informationen zur Anwendung und seinen Funktionen bereitstellt. Die Inhalte des Feldes werden mithilfe der Funktion st.write abgebildet, welche zahlreiche Datentypen darstellen kann. Das Informationsfeld beinhaltet darüber hinaus ein Expander-Element. Dieses wurde über die Beta-Funktion st.beta_expander eingebunden und ermöglicht die Erweiterung des Informationsfeldes. Über einen Plus- und Minus-Button kann der Expander aus- und eingeklappt werden. So ist der Zugang zu weiteren Details gewährleistet, ohne die Übersichtlichkeit der Anwendung zu gefährden.


Eingabe

Die Eingabemaske stellt das Hauptelement des AWI User Interface dar. Über die Eingaben wird eine direkte Kommunikation zwischen dem Nutzer und den Machine Learning Modellen der Anwendung ermöglicht. Bei der Auswahl und Anordnung der Eingabeelemente stand eine intuitive Bedienbarkeit für den Nutzer im Vordergrund. Als Gestaltungsunterstützung wurden die Erkenntnisse der zuvor verfassten Projektarbeit zum User Interface Design herangezogen (vgl. User-Interface-Design-Prinzipien).

Die Eingabemasken des AWI User Interface teilen sich in drei Eingabebereiche, die unterschiedliche Input-Features beinhalten. Insgesamt kann der Nutzer 18 Spezifikationen vornehmen, um seine Immobilie zu beschreiben. Alle Felder sind zu Beginn mit einem individuellen Standardwert hinterlegt. Durch dieses Vorgehen ist ein Nutzer nicht gezwungen alle Eingaben zu hinterlegen, sondern kann die Felder nach Bedarf anpassen.

1. Eingabefeld:

Das erste Eingabefeld beinhaltet vier Input Features (Wohnfläche, Grundstücksfläche, Baujahr, Postleitzahl). Alle vier Input-Features dieses Eingabebereichs wurden mithilfe der Funktion st.number_input erstellt, welche eine Zahleneingabe erzeugt. Über die Tastatur des Endgeräts kann der Nutzer Zahlenwerte schnell und unkompliziert eingetragen. Die Eingaben können darüber hinaus auch über einen Plus- und Minus-Button angepasst werden. Die Navigations-Button sind im Streamlit-Element st.number_input bereits hinterlegt und müssen nicht angelegt werden.

Bei der Nutzung der st.number_input-Funktion muss der Titel des Eingabeelements sowie ein Standardwert hinterlegt werden. Bei Bedarf können weitere Spezifikationen, wie ein Minimal- und Maximalwert hinzugefügt werden.

Das Input-Feature PLZ weist gegenüber den anderen Input-Features dieses Bereichs eine Besonderheit auf. Bei der Eingabe einer Postleitzahl wird ein Abgleich mit hinterlegten Werten in der Datenbank durchgeführt. Sollte die eingegebene Postleitzahl nicht dem Bundesland Bayern angehören, erhält der Nutzer eine Fehlermeldung. Umgesetzt wurde das beschriebene Vorgehen über eine eine SQL-Query (pd.read_sql_query). Anbei wird die Umsetzung kurz skizziert:

with col2:
    plz = st.number_input('Wie lautet deine PLZ?', min_value=63739, max_value=97909, value=97070)
    if plz not in pd.read_sql_query('SELECT plz FROM Meta_Data_upd', con=db_connection)['plz'].to_list():
        st.error('Diese Postleitzahl befindet sich nicht in der Datenbank')
        raise StopException()

Für eine eingängige Darstellung wurden die Input-Features dieses Eingabebereichs auf zwei Spalten und zwei Zeilen aufgeteilt. Hierfür wurde auf die Funktionalitäten von Streamlit-Beta zurückgegriffen, die eine Spaltentrennung ermöglicht.

2. Eingabefeld:

Im zweiten Eingabefeld kann der Nutzer weitere Details eintragen. Dabei können folgende Input-Features angepasst werden:

Für eine bessere Übersicht wurden diese Input Features in einem Expander zusammengefasst.

Die Input-Felder dieses Bereichs wurden mit den Streamlit-Funktionen st.slider und st.selectbox erzeugt. st.slider erzeugt ein Slider-Element, das über einen Regler auf einen spezifischen Wert eingestellt werden kann. Ähnlich zur Funktion st.number_input muss bei diesem Element der Titel, der Minimal- und Maximalwert sowie ein Standardwert hinterlegt werden. Das Element st.selectbox lässt umfangreichere Eingaben zu. Es können zahlreiche Werte hinterlegt werden, die im User Interface aus einer Liste ausgewählt werden können.

Die Spaltentrennung aus Eingabefeld 1 wurde auch in Eingabefeld 2 verwendet.

3. Eingabefeld:

Das dritte Eingabefeld stellt eine Möglichkeit zur Anpassung weiterer Input Features bereit. Änderungen können an folgenden Features vorgenommen werden:

Alle Eingaben erfolgen mit der Funktion st.selectbox, welche in Eingabefeld 2 bereits erläutert wurde.


Codierung und Zuordnung

Target Encoding

Einige Input-Features besitzen nach der Festlegung in der Eingabemaske ein falsches Format, welches von den Machine Learning Modellen nicht verarbeitet werden kann. Hiervon betroffen sind alle kategorischen Variablen (Immobilienart, Heizungsart, Immobilienzustand, Energietyp, Energieeffizienzklasse). Aus diesem Grund muss die Immobilienart, die Heizungsart, der Immobilienzustand, der Energietyp sowie die Energieeffizienzklasse codiert werden. Mithilfe von Target-Encoding wird das Format der Eingabeparameter angepasst. Anbei ist das Vorgehen für das Beispiel der Immobilienart abgebildet (nähere Informationen zu diesem Vorgehen sind im Bereich Datenbearbeitung zu finden):

immobilienart_string = 'SELECT immobilienart_targetenc FROM Encoding_immobilienart WHERE immobilienart=\'' + immobilienart + '\''
immobilienart = np.float32(pd.read_sql_query(immobilienart_string, con=db_connection).iloc[0][0])

Zuordnung

Nach der Codierung erfolgt die Zuordnung der Eingaben. Hierbei werden die Input-Features des User Interface den jeweiligen Spalten in der Datenbank zugeteilt. Die Zuordnung wird nachfolgend anhand von vier Beispielen abgebildet:

data = {'plz': plz,
       'immobilienart': immobilienart,
              ...
       'grundstuecksflaeche': grundstuecksflaeche,
       'wohnflaeche': wohnflaeche}
features = pd.DataFrame(data, index=[0])

Wie in diesem Ausschnitt zu erkennen ist, werden alle 18 Eingaben des User Interface anschließend über die Funktion pd.DataFrame in eine neue "Datenzeile" geschrieben. Auf Basis dieser "Datenzeile" kann im späteren Verlauf ein Immobilienwert vorhergesagt werden. Vor der Immobilienbewertung muss die "Datenzeile" jedoch noch bearbeitet werden. Alle Variablen, die im User Interface nur zwischen "Ja" und "Nein" unterscheiden (boolesche Variablen), werden hier in die Zahlenwerte "0" und "1" überführt. Dieser Schritt ist notwendig, damit die Eingaben des User Interface interpretiert werden können. Betroffen sind die folgenden Input-Features:

Das Vorgehen wird an nachfolgendem Beispiel des Input-Features "Aufzug" verdeutlicht:

features = features.assign(aufzug=(features['aufzug'] == 'JA').astype(int))

Metadaten

Um eine Berechnung des Immobilienwertes zu ermöglichen, müssen die Eingaben des Interface in das Machine Learning Modell überführt werden können. Voraussetzung hierfür ist, dass die Input-Features in Anzahl und Aufbau mit den Features der Machine Learning Modelle identisch sind. Da die Modelle auch Metadaten verwenden, die auf Basis der PLZ bestimmt werden, müssen diese Metadaten entsprechend der PLZ auch Interface-seitig geladen werden. Das Laden der Informationen erfolgt über eine SQL-Query (pd.read_sql_query). Wie in diesem Abschnitt bereits erwähnt, müssen auch an dieser Stelle einige Variablen der geladenen Metadaten angepasst werden. Die boolesche Variable "Supermarkt_im_plz_gebiet" muss in "0" oder "1" überführt werden und die beiden Variablen "Grad der Verstädterung" und "sozioökonomische Lage" müssen mithilfe von Target-Encoding angepasst werden.

In einem letzten Schritt müssen die Spaltennamen angepasst werden, um eine Zuordnung der User Interface Daten zu den Spalten der Datenbank zu ermöglichen. Im Anschließend kann die Immobilienbewertung beginnen.

features.rename(columns={'immobilienart': 'immobilienart_targetenc', 'immobilienzustand': 'immobilienzustand_targetenc',
                                 'energietyp': 'energietyp_targetenc', 'energie_effizienzklasse': 'energie_effizienzklasse_targetenc',
                                 'heizung': 'heizung_targetenc', 'Grad_der_Verstädterung': 'Grad_der_Verstädterung_targetenc',
                                 'sozioökonomische_Lage': 'sozioökonomische_Lage_targetenc'}, inplace=True)

Modelle und Output

Nach der Eingabe und Überführung aller Informationen, kann der Nutzer die Wertermittlung seiner Immobilie starten. An diesem Punkt besteht die Möglichkeit über die Funktion st.selectbox ein Machine Learning Modell der Wahl für die Berechnung zu verwenden. Es besteht Auswahl zwischen folgenden Modellen (nähere Informationen im Abschnitt Machine Learning):

Hinter der Selectbox, die zur Auswahl der Modelle eingesetzt wird, befindet sich eine if-Schleife. Je nach Auswahl, wird das entsprechende Machine Learning Modell aus einer Pickle-Datei geladen. Dieses Vorgehen wurde ausgewählt, um bei der Nutzung des User Interface die Ladezeiten zu reduzieren. Die Modelle werden alle vorgeladen und in Form einer Pickle-Datei abgespeichert. Beim Aufrufen der entsprechenden Datei, wird das fertige Modell nur noch geladen, was mit erheblichen zeitlichen Einsparungen einhergeht.

Um eine bestmögliche Auswahl der Modelle zu gewährleisten, besteht die Möglichkeit, eine Übersicht der jeweiligen RMSE beziehungsweise R2 Werte aufzurufen. Diese sollen dem Nutzer als Hilfestellung bei der Auswahl der Modelle dienen. Aufgerufen werden die beiden Abbildungen über die st.image-Funktion.

Die Ergebnisse der Immobilienbewertung können über den Button Wertanalyse starten angezeigt werden. Durch Klicken auf den Button öffnet sich eine grüne Schaltfläche, die über die Funktion st.success erzeugt wird. Der Inhalt dieser Schaltfläche besteht aus einem kurzen Textfeld, sowie der formatierten Schätzung des Immobilienwerts.


Metadaten

Neben der reinen Ermittlung des Immobilienwertes, bietet AWI dem Nutzer weiterführende Informationen. Über einen Expander können weitere Felder ausgeklappt werden. Der Nutzer wird an dieser Stelle aufgefordert, seine Postleitzahl einzugeben. Wie zuvor bereits beschrieben, wird auch hier ein Abgleich mit der Datenbank vorgenommen, um Postleitzahlen außerhalb von Bayern identifizieren zu können. Auf Basis dieser Eingabe werden zahlreiche Metadaten über die Funktion pd.read_sql_query aus der Datenbank geladen. Diese beinhalten zum Beispiel Einwohnerzahlen, Durchschnittseinkommen, Arbeitslosenquote, sozioökonomische Lage und viele Weitere (Nähere Informationen und die zugeordneten Quellen zu den Metadaten sind im entsprechenden Abschnitt zu finden).

Die bereitgestellten Metadaten werden im User Interface in fünf Bereiche gegliedert. Neben den bereits genannten Informationen können nähere Details aus folgenden Bereichen aufgerufen werden:

Inhalte zu diesen Bereichen können über vier individuelle Button angezeigt werden, die mit der Funktion st.button erzeugt werden. Der Button wurde mit einer if-Funktion verknüpft, die nach Klicken weitere Informationen öffnet. Bei der Gliederung der Informationen wurde die bereits dargestellte Spaltenfunktion verwendet, um die Inhalte übersichtlich aufzubereiten. Abgebildet werden die Inhalte mit den Funktionen st.write und st.info. Der Unterschied dieser beiden Funktionen liegt in der Darstellung im User Interface. Die Funktion st.info stellt den Inhalt in einem vordefinierten blauen Informationskasten dar. Dieses Vorgehen dient einer besseren Gliederung der Inhalte im Interface.


Weitere Informationen

Einfluss der Features

Neben den geografischen Informationen stellt das AWI User Interface weitere Details bereit. Der Nutzer kann sich an dieser Stelle eine Übersicht der "wichtigsten Features" anzeigen lassen. Die Darstellungen der "wichtigsten Features" werden durch Ausklappen eines Expanders sichtbar. An dieser Stelle ist keine wiederholte Auswahl des gewünschten Machine Learning Modells notwendig, da sich die verwendete if-Funktion auf den String modell bezieht. Dieser wurde zuvor bereits über die Funktion st.selectbox vom Nutzer bestimmt. Hat sich der Nutzer bei der Immobilienwertbestimmung beispielsweise für das Random Forrest-Modell entschieden, werden ihm an dieser Stelle die zugehörigen Werte angezeigt. Für die Visualisierung werden die bekannten Funktionen st.image und st.write verwendet. Da der Voting Regressor eine Kombination der drei anderen Modelle ist, kann für dieses Modell keine Übersicht angezeigt werden.

Geographische Datenverteilung

Wie an andere Stelle bereits angesprochen, wurde für AWI eine Datenbasis genutzt, die auf Immobilien des Bundeslandes Bayern basiert. Dieser Ansatz wurde gewählt, um eine ausreichende Datenbasis gewährleisten zu können. Um eine genauere Übersicht der verwendeten Daten zu erhalten, besteht an dieser Stelle die Möglichkeit, die Daten auf einer Karte angezeigt zu bekommen. Da die Immobilien ausschließlich über die Postleitzahl lokalisiert werden konnten, wurden jeweils die Mittelpunkte aller bayerischer Postleitzahlen ermittelt und die entsprechenden Koordinaten (Längen- und Breitengrad) verwendet. Die Daten der Längen- und Breitengrade konnten über das Portal Launix heruntergeladen werden. In der Folge waren einige Anpassungen notwendig, um die Werte an die Anforderungen der Streamlit-Funktion st.map anzupassen. Die Längen- und Breitengrade wurden den Postleitzahlen zugewiesen und ebenfalls in der Datenbank abgespeichert. Im User Interface werden die Längen- und Breitengrade über die Funktion pd.read_sql_query aufgerufen. Visualisiert werden die Inhalte über die Funktion st.map. Durch Klicken auf den Button 'Geographische Verteilung der Inputdaten', wird eine Mapbox-Karte geladen, die alle verwendeten PLZ-Mittelpunkte anzeigen. Postleitzahlen, die besonders häufig im Datensatz vertreten sind, werden in dieser Ansicht dunkelrot abgebildet. Postleitzahlen die wiederum nur selten auftreten, werden hellrot dargestellt. Die Karte zeigt sehr anschaulich, in welchen Regionen Bayerns die Immobilien des Datensatzes zu verorten sind. Die Funktion bietet darüber hinaus hilfreiche Zoom und Navigationsmöglichkeiten.

Explorative Datenanalyse

Neben dem Button zur geographischen Übersicht, bietet das AWI Interface einen weiteren Button, der eine explorative Datenanalyse (EDA) startet. Nach dem bekannten Vorgehen zum Laden der Informationen aus der Datenbank, werden die Spalten "index" und "plz" gelöscht, da die Spalten in der EDA keinen Mehrwert bieten. Nachdem im nächsten Schritt die Spaltenanzahl des Profile Report festgelegt wurde, kann die EDA über die Funktion st_profile_report erzeugt werden. Die explorative Datenanalyse beinhaltet eine detaillierte Beschreibung aller 18 verwendeter Variablen. Aufgezeigt werden beispielhaft folgende Informationen: