Einfache Frontends – DataGochx

Um einfach Frontends für ein Data Science Projekt zu erstellen gibt es verschiedene Möglichkeiten. In diesem Fall gehe ich davon aus, dass das Projekt so erstellt wurde, dass es per Rest-API ansprechbar ist. Wie das geht zeige ich hier. Dieses Projekt verwende ich auch als Basis für die folgenden Beispiele.

HTML & Javascript

Mit die einfachste Möglichkeit für ein Frontend ist eine HTML Seite die per Javascript die API anspricht.

In der HTML-Seite benötigt es lediglich ein Formular, in welches die Eingabedaten für eine neue Vorhersage eingegeben werden können. In diesem Fall hat das Modell nur einen Wert, daher kann man per Texteingabe mehrere Vorhersagen auf einmal berechnen lassen:

    <form id="prediction-form" onsubmit="predict(event)">
        <br><br>
        
        <label for="predvalues">Prediction Values (comma-separated):</label>
        <input type="text" id="predvalues" name="predvalues" placeholder="5,10,15">

        <br><br>

        <button type="submit" class="btn btn-primary">Predict</button>
    </form>

Um nun die API anzusprechen benötigt man darüber hinaus noch eine Funktion in Javascript

      function predict(event) {
        event.preventDefault(); // Verhindert das Standard-Formular-Submit-Verhalten

        // Werte aus dem Eingabefeld holen
        var predvalues = document.getElementById("predvalues").value;

        // Eingabe in ein Array umwandeln (komma-separiert)
        var values = predvalues.split(",").map((val) => parseFloat(val.trim()));

        // Datenstruktur erstellen, die von der API erwartet wird
        var data = {
          features: values.map((val) => [val]), // Werte in das erwartete Format bringen
        };

        // Anfrage an die Flask-API
        fetch("http://192.168.178.138:5000/predict", {
          method: "POST",
          headers: {
            "Content-Type": "application/json",
          },
          body: JSON.stringify(data),
        })
          .then((response) => response.json())
          .then((data) => {
            // Zugriff auf das "prediction"-Array in der Antwort
            var predictions = data.prediction;

            // Ausgabe vorbereiten
            var output = "";
            predictions.forEach(function (prediction) {
              output += `<p>${prediction}</p>`;
            });

            // Anzeige der Vorhersagen
            document.getElementById("prediction-list").innerHTML = output;
          })
          .catch((error) => {
            console.error("Error fetching prediction:", error);
          });
      }
    </script>

Lokales Testen in VSCode

Um dies nun lokal in VSCode zu testen benötigt man das Plugin LiveServer. Wichtig ist dabei, dass man in der Flask Rest-API die richtigen CORS Einstellungen getroffen hat.

Gradio

Mindestens genauso einfach wie mit HTML geht es mit Gradio. Der Vorteil ist insbesondere, dass man für Gradio keine HTML oder Javascript Kenntnisse benötigt sondern das Frontend direkt in Python erstellen kann:

import gradio as gr
import requests

# Funktion, um die Flask-API aufzurufen
def get_predictions(input_values):
    try:
        # Eingabe verarbeiten: Komma-separierte Werte in ein Array umwandeln
        values = [float(val.strip()) for val in input_values.split(",") if val.strip()]
        data = {
            "features": [[v] for v in values]  # Datenformat für die API
        }

        # API-Aufruf
        response = requests.post("http://127.0.0.1:5000/predict", json=data)
        response.raise_for_status()  # Fehler prüfen

        # API-Antwort verarbeiten
        predictions = response.json().get("prediction", [])
        return "\n".join([str(p) for p in predictions])
    except Exception as e:
        return f"Fehler: {str(e)}"

# Gradio-Interface erstellen
with gr.Blocks() as demo:
    gr.Markdown("# Prediction App mit Gradio")
    gr.Markdown("Geben Sie Werte ein, getrennt durch Kommas, z. B.: `5,10,15`")
    
    # Eingabefeld
    input_text = gr.Textbox(label="Eingabewerte (komma-separiert)")
    
    # Ausgabe
    output_text = gr.Textbox(label="Vorhersagen")

    # Button und Logik
    predict_button = gr.Button("Predict")
    predict_button.click(get_predictions, inputs=input_text, outputs=output_text)

# App starten
if __name__ == "__main__":
    demo.launch()

Streamlit

Die App lässt sich genauso gut auch in Streamlit erstellen. Dann sieht der Code so aus:

import streamlit as st
import requests

# Funktion, um die Flask-API aufzurufen
def get_predictions(input_values):
    try:
        # Eingabe verarbeiten: Komma-separierte Werte in ein Array umwandeln
        values = [float(val.strip()) for val in input_values.split(",") if val.strip()]
        data = {
            "features": [[v] for v in values]  # Datenformat für die API
        }

        # API-Aufruf
        response = requests.post("http://127.0.0.1:5000/predict", json=data)
        response.raise_for_status()  # Fehler prüfen

        # API-Antwort verarbeiten
        predictions = response.json().get("prediction", [])
        return predictions
    except Exception as e:
        return f"Fehler: {str(e)}"

# Streamlit App
st.title("Prediction App mit Streamlit")
st.write("Geben Sie Werte ein, getrennt durch Kommas, z. B.: `5,10,15`")

# Eingabefeld
input_text = st.text_input("Eingabewerte (komma-separiert)", "")

# Button und Logik
if st.button("Predict"):
    if input_text.strip():
        result = get_predictions(input_text)
        if isinstance(result, str):  # Falls ein Fehler auftritt
            st.error(result)
        else:
            st.success("Vorhersagen:")
            for i, pred in enumerate(result, start=1):
                st.write(f"Wert {i}: {pred}")
    else:
        st.warning("Bitte geben Sie Werte ein.")

Zum starten verwendet man folgenden Befehl

streamlit run app.py