Seit einiger Zeit bin ich auf der Suche nach Frameworks, die sich für Prototypen eignen. Oder um es philosophischer auszudrücken: Ich versuche, die Distanz zwischen einer Idee und einem Produkt zu verkürzen. Je kürzer die Zeit zwischen Konzept und einer sichtbaren Umsetzung ist, desto leichter ist es, Gedanken mit anderen zu teilen.

Jahrelang habe ich mit Django und Flask gearbeitet, doch anstatt mich auf meine eigentliche Idee zu konzentrieren, habe ich viel zu viel Zeit darauf verwendet, jedes Mal ein interaktives Interface für meine Nutzer in HTML zu erstellen. Deshalb war Streamlit eine Offenbarung für mich: Es war endlich ein Framework, das sich darauf konzentrierte, Daten und Modelle mit minimalem Code in eine nutzbare Oberfläche zu verwandeln.

Doch meine Reise endete nicht bei Streamlit. Vor allem in AI-Projekten wird immer öfter Gradio zur Entwicklung einer Oberfläche verwendet und das hat meine Neugierde geweckt.

Ich habe Gradio zum ersten Mal verwendet, als ich für einen Kunden einen Chatbot entwickelte. Das Ziel war es, dass Nutzer direkt Fragen stellen konnten, um ihre Word-Dokumente und gespeicherten Daten zu durchsuchen. Ich wusste, dass sich Streamlit für schnelle Prototypen eignet, aber Gradio bietet eine native Chatbot-Schnittstelle und dies vereinfachte die Entwicklung enorm.

In diesem Artikel vergleiche ich beide Frameworks und zeige, wann welches Tool am besten geeignet ist.

Coding: Wer macht es einfacher?

Als ich das erste Mal mit Streamlit gearbeitet habe, war ich sofort begeistert. Man schreibt einfach den Code, und das Interface entsteht automatisch. Es rendert den Code genau so, wie er geschrieben ist – ohne zusätzlichen Aufwand für Struktur oder Steuerung. Streamlit ist dabei wie eine Welle, die von oben nach unten alles direkt ausführt und anordnet.

Wenn man st.sidebar schreibt, taucht sofort eine Sidebar auf. Ein Button? Einfach st.button(). Und wenn dieser Button eine Aktion ausführen soll, nutzt man eine einfache Kontrollstruktur.

🔍 Beispiel: Button in Streamlit

import streamlit as st

st.title("Streamlit Beispiel")
st.sidebar.write("Hier ist eine Sidebar!")

button = st.button("Klick mich!")

if button:
    # Ob der Button geklickt wurde, kann einfach über ein if geprüft werden.
    st.write("Button wurde geklickt!")

# Diese Zeile wird unter dem Button aber auch unter dem durch den geklickten 
# Button eingefügten Text angezeigt.
st.write("Das ist ein normaler Text.")

Das ist genau das, was Streamlit ausmacht: Minimalistischer Code mit direkter Wirkung.

Dieser Streamlit-Code kann direkt über den start-command von streamlit gestartet werden:

streamlit run app.py

🔍 Beispiel: Button in Gradio

Doch als ich mit Gradio arbeitete, wurde schnell klar, dass hier eine andere Philosophie verfolgt wird. Während Streamlit einfach alles nacheinander rendert, zwingt Gradio einen dazu, das Interface bewusst zu strukturieren.

Gradio funktioniert nach dem „Vorbereiten, Planen, Verbinden“-Prinzip. Die Komponenten werden wie in Streamlit von oben nach unten definiert - eine Interaktion wird aber über Funktionen definiert und mit einer Output-Komponente verbunden.

import gradio as gr

# hier wird die Funktion definiert, die aufgerufen wird, wenn der Button geklickt wird
def button_clicked():
    return "Button wurde geklickt!"


# hier wird das Interface definiert
with gr.Blocks() as app:
    # hier wird der Button definiert
    button = gr.Button("Klick mich!")
    
    # hier wird der Text ausgegeben
    output = gr.Textbox()

    # hier wird der Button mit der Funktion "button_clicked" verknüpft
    # das Ergebnis der Funktion wird über "outputs" in die Komponente "output" geleitet
    button.click(button_clicked, outputs=output)

# hier wird die App gestartet
app.launch()

Dieser Gradio-Code kann wie ein normales Python-File direkt ausgeführt werden:

python app.py

Multi-User-Nutzung: Wo stehen Gradio und Streamlit?

In diesem Punkt muss ich leider sagen, dass beide Frameworks in meinen Tests nicht wirklich überzeugen konnten. Natürlich ist mein Hauptziel, eine Demo zu erstellen und sie mit meinen Kunden oder Studierenden zu teilen. In diesem Kontext sind die Einschränkungen nicht so dramatisch. Doch wer Gradio oder Streamlit für eine echte Multi-User-Anwendung nutzen möchte, sollte sich der Grenzen bewusst sein.

Beide Frameworks laufen standardmäßig synchron, das bedeutet, dass alle Nutzeranfragen in einer einzigen Server-Session verarbeitet werden. Dadurch kann es zu Verzögerungen kommen, wenn mehrere Nutzer gleichzeitig das System anfragen. Gradio und Streamlit blockieren keine Anfragen, aber sie werden nacheinander bearbeitet, was bei hoher Last dazu führen kann, dass Nutzer warten müssen oder – je nach Implementierung – eine vorherige Session überschrieben wird.

Das bedeutet nicht, dass Multi-User-Betrieb unmöglich ist, aber es erfordert zusätzliche Konfiguration.

• Streamlit kann mit Streamlit Serverless oder einem externen FastAPI-Backend skaliert werden.
• Gradio kann durch Gradio State Handling oder mit FastAPI/Flask als Middleware stabiler gemacht werden.

Trotzdem sind beide Frameworks nicht primär für hochskalierte Anwendungen gedacht, sondern eher für Prototyping, Data Science Dashboards oder AI-Demos.

Wer eine Anwendung benötigt, die wirklich für parallele Nutzeranfragen optimiert ist, sollte sich Dash ansehen. Dash erfordert mehr Arbeit in der Erstellung von Oberflächen - es ist aber dafür auch mächtiger. Für hohe Skalierung in Produktionsumgebungen werden oft Gunicorn mit mehreren Flask-Workern oder Celery + Redis als Task-Queue eingesetzt, um Hintergrundaufgaben besser zu verteilen.

Machine Learning und Input-Verarbeitung: Wo glänzt Gradio wirklich?

Hier beginnt Gradio wirklich seine Stärken zu zeigen. Es wurde von Grund auf für Machine Learning (ML) entwickelt und bietet damit eine Umgebung, die Streamlit in dieser Kategorie klar übertrifft. Besonders für Data Scientists ist Gradio ein echter Gamechanger, denn es bietet eine viel größere Vielfalt an Input-Optionen als Streamlit.

Streamlit ist minimalistisch und sehr einfach zu bedienen, aber bei den Eingabeoptionen stößt es schnell an seine Grenzen. Im Grunde genommen kann man dort hauptsächlich Text, Zahlen oder Dateien hochladen. Natürlich kann man Workarounds mit anderen Bibliotheken erstellen, aber Gradio bietet out-of-the-box-Lösungen, die direkt funktionieren.

Beispiel: Bildverarbeitung mit Gradio vs. Streamlit

Angenommen, wir möchten ein Bild hochladen und es direkt in einem Modell verarbeiten, um es beispielsweise zu klassifizieren oder zu bearbeiten.

Mit Streamlit muss man das Bild zuerst hochladen, dann die Datei in das gewünschte Format konvertieren und anschließend weiterverarbeiten:

from PIL import Image, ImageOps, ImageFilter
import streamlit as st

def apply_filter(image):
    # Weitere filter können hier definiert werden

    # Anwendung eines gray-scale-filters
    return ImageOps.grayscale(image)
    
st.markdown(
    """
    # Einfache Bildbearbeitungs-Demo zur Anwendung eines Grayscale-Filters
    """
)

# Definition eines generischen File-Uploads
uploaded_file = st.file_uploader("Bild hochladen", type=["jpg", "jpeg", "png"])

if uploaded_file:
    # Das hochgeladene File wird als Bild geladen
    image = Image.open(uploaded_file)

    # Anzeigen des hochgeladenen Bildes
    st.image(image, caption="Hochgeladenes Bild")

    if st.button("Filter anwenden"):
        # Der Filter wird angewendet 
        filtered_image = apply_filter(image)

        # Das Ergebnis wird angezeigt
        st.image(filtered_image, caption="Gefiltertes Bild")

Hier müssen wir uns selbst um die Verarbeitung des Bildes kümmern, was den Workflow unterbricht.

Mit Gradio ist das einfacher, denn Gradio unterstützt direkt verschiedene Eingabetypen wie Bilder, Audio oder Videos. Man kann ein Bild einfach als Input definieren, und Gradio übernimmt die Konvertierung selbst:

import gradio as gr

def apply_filter(image):
    # Weitere filter können hier definiert werden
    
    # Anwendung eines Gray-Scale-filters
    return image.convert("L")
    
with gr.Blocks() as app:
    gr.Markdown(
        """
        # Einfache Bildbearbeitungs-Demo zur Anwendung eines Grayscale-Filters
        """
    )

    # Filtersektion
    with gr.Row(equal_height=True): # equal_height: Gleiche Höhe für Spalten
        with gr.Column(scale=1):
            gr.Markdown("### Bildbearbeitung - Input")

            # Definition eines expliziten Bild-Inputs
            image_input = gr.Image(type="pil", label="Bild hochladen", scale=4)

            apply_button = gr.Button("Filter anwenden")
        
        with gr.Column(scale=1):

            gr.Markdown("### Output")
            # Das Ergebnis der Bildverarbeitung wird hier angezeigt
            image_output = gr.Image(type="pil", label="Bearbeitetes Bild", scale=4)

        # Verknüpfung des Buttons mit der Filter-Funktion.
        apply_button.click(
            apply_filter,
            inputs=[image_input, filter_selector],
            outputs=image_output
        )

# Hier wird die App gestartet
app.launch()

Hier wird das Bild direkt in ein PIL-Objekt umgewandelt, ohne dass man sich selbst um das Parsing kümmern muss. Das spart Zeit und ist wieder ein Thema, um das man sich nicht selbst kümmern muss.

Noch ein Beispiel: Audio-Input

Streamlit kann keine Audiodateien direkt als Input verwenden – man muss das hochgeladene Audio erst als Datei speichern und dann weiterverarbeiten. Gradio hingegen erlaubt es, Audiodateien direkt als Waveform oder NumPy-Array zu verarbeiten:

import gradio as gr

def process_audio(audio):
    return audio

gr.Interface(
    fn=process_audio,
    inputs=gr.Audio(type="numpy"),  # Audio-Datei direkt als NumPy-Array
    outputs="audio"
).launch()

Dieses Widget erlaubt nicht nur den Upload einer Audio-Datei, sondern auch die direkte Aufnahme über ein Mikrofon. Die hochgeladene Audio-Datei kann auch direkt abgespielt werden. All diese Funktionen stecken in dieser einfachen Gradio-Komponente!

Das macht Gradio besonders attraktiv für Machine-Learning-Modelle, die Audio- oder Bildverarbeitung benötigen. Hugging Face bietet ein ausführlicheres Beispiel zur Nutzung von Gradio und die Audio-Komponente, um eine automatische Audio-Transkription mittels AI-Modell zu implementieren: huggingface-nlp-course-chapter-9.

Visualisierungen: Streamlit oder Gradio?

📊 Visualisierungen sind in beiden Frameworks möglich – aber mit unterschiedlichen Schwerpunkten.

👑 Streamlit: Perfekt für Dashboards und interaktive Datenanalysen

Streamlit wurde ursprünglich für Data Science und datengetriebene Anwendungen entwickelt. Das zeigt sich besonders in seiner starken Integration mit Plotly, Matplotlib, Seaborn und Altair.

Aber das Wichtigste: Streamlit ist nicht nur für statische Visualisierungen da! Es bietet zahlreiche interaktive Widgets wie st.slider(), st.button() oder st.selectbox(), die einfach verknüpft werden können, um Plots schnell interaktiv werden zu lassen.

🔍 Ein Beispiel für ein interaktives Dashboard mit Streamlit:

In diesem Beispiel wird ein Barchart erstellt. Die Werte können über einen Slider skaliert werden. Bei jeder Veränderung des Sliders wird der Plot automatisch aktualisiert. Das ist zwar nicht das relevanteste Beispiel, aber es ist schön kompakt, um das Prinzip zu verdeutlichen.

import streamlit as st
import pandas as pd
import matplotlib.pyplot as plt

# Dummy-Daten
df = pd.DataFrame({"Kategorie": ["A", "B", "C"], "Werte": [10, 20, 15]})

# Slider für dynamische Skalierung
scale = st.slider("Skalierung", 1, 10, 5)

# Matplotlib Plot
# Da der scale direkt als parameter angegeben wird, wird der Plot bei jeder Änderung aktualisiert
fig, ax = plt.subplots()
ax.bar(df["Kategorie"], df["Werte"] * scale)

# Plot in streamlit rendern
st.pyplot(fig)

Die Erstellung von Visualisierungen ist in Gradio etwas komplexer. Es ist wieder eine Funktion (plot) notwendig, um den Slider und den Plot zu verbinden. Das ist bei größeren Apps ein Vorteil und erleichtert die Strukturierung - bei kleineren Projekten bleibt Streamlit aber im Vorteil.

import gradio as gr
import pandas as pd
import matplotlib.pyplot as plt

# Dummy-Daten
df = pd.DataFrame({"Kategorie": ["A", "B", "C"], "Werte": [10, 20, 15]})

def plot(scale):
    # Erstellung des Matplotlib Plots
    fig, ax = plt.subplots()

    # Setzen der Werte und Anwendung des eingestellen Scale-Werts
    ax.bar(df["Kategorie"], df["Werte"] * scale)
    return fig

with gr.Blocks() as app:
    scale = gr.Slider(minimum=1, maximum=10, value=5, label="Skalierung")
    plot_output = gr.Plot()

    scale.change(fn=plot, inputs=scale, outputs=plot_output)

app.launch()

Mehr zu Gradio und Streamlit findest du in meinem Vergleichsrepository auf GitHub: Python-Dashboard-Frameworks---Educational-Repository

Chatbot-Integration: Gradio vs. Streamlit – Was ist besser?

Jetzt kommen wir zum eigentlichen Grund, warum ich diesen Artikel schreibe. Ich hatte kürzlich ein Projekt für einen Kunden, bei dem ich eine Plattform erstellen wollte, mit der Nutzer nicht nur nach Informationen in Dokumenten suchen, sondern auch gezielt Fragen zum Inhalt der Dokumente stellen können.

Ich brauchte also eine Benutzeroberfläche für einen Chatbot. Natürlich wusste ich, dass sich ein Chatbot mit Streamlit umsetzen lässt, aber die Templates waren nicht ideal. Dann stieß ich auf Gradio – und es stellte sich als genau das heraus, wonach ich gesucht hatte.

Chatbot mit Gradio

Mit Gradio wird das Erstellen eines Chatbots sehr einfach, denn die ChatInterface-Funktion bietet eine vorgefertigte Lösung, die fast wie die ChatGPT-Oberfläche aussieht. Alles, was man tun muss, ist, eine Antwort-Funktion zu definieren, die die Unterhaltung verarbeitet.

🔍 Ein einfaches Beispiel für einen Chatbot mit Gradio:

---

import gradio as gr

def chat_response(message, history):
    # Code zur Generierung der antwort des assistenten wird hier eingefügt
    return "Dies ist eine Testantwort."

chatbot = gr.ChatInterface(
    fn=chat_response,
    type="messages",
    chatbot=gr.Chatbot(placeholder="Enter a question ...", type="messages")
)

chatbot.launch()

Vorteile von Gradio:

• Fertige Chat-UI: Sieht professionell aus, ohne dass man selbst ein Design bauen muss.

• Speichert Nachrichtenverlauf automatisch: Kein manuelles Session-Handling erforderlich.

• Einfache Trigger-Mechanismen: Jede Nachricht wird direkt an die Antwort-Funktion weitergegeben.

Chatbot mit Streamlit

Streamlit bietet seit einiger Zeit auch eingebaute Chat-Komponenten. Allerdings muss man hier den Nachrichtenverlauf selbst verwalten und sicherstellen, dass der Bot die Konversation nachvollziehen kann.

🔍 Ein einfaches Beispiel für einen Chatbot mit Streamlit:

import streamlit as st

# Nachrichtenverlauf speichern
if "messages" not in st.session_state:
    st.session_state.messages = []

# Nachrichtenverlauf anzeigen
for message in st.session_state.messages:
    with st.chat_message(message["role"]):
        st.write(message["content"])


def process_prompt(prompt):    
    # Die Nachricht des Users wird gerendert
    with st.chat_message("user"):
        st.write(prompt)

    # Code zur Generierung der antwort des assistenten wird hier eingefügt

    # Die Antwort des Bots wird gerendert
    with st.chat_message("assistant"):
        st.write("Dies ist eine Testantwort.")  

    # Die Antwort des Bots wird an die Nachrichten-History angehängt.
    st.session_state.messages.append({"role": "assistant", "content": "Dies ist eine Testantwort."})
    
# Nutzereingabe verarbeiten
if prompt := st.chat_input("Frage stellen..."):
    
    # Die User-Eingabe wird an die Nachrichten-History angehängt.
    st.session_state.messages.append({"role": "user", "content": prompt})

    process_prompt(prompt)

Der obige Streamlit-Code ist deutlich komplizierter als die Gradio-Implementierung. Es ist zwar möglich einen Chatbot in Streamlit umzusetzen - wenn es aber nur darum geht, ist Gradio deutlich einfacher.

Nachteile von Streamlit:

• Manuelles Nachrichten-Handling nötig: Jede Nachricht muss gespeichert und geladen werden.

• Kein fertiges Chat-UI: Man muss selbst gestalten, wo welche Elemente erscheinen.

Community & Ökosystem – Wer bietet mehr Unterstützung?

Eine Technologie kann noch so gut sein – wenn es keine Community gibt, die einem hilft, fühlt man sich schnell allein gelassen. Sowohl Gradio als auch Streamlit haben eine aktive Community, aber die Unterschiede sind spürbar.

👑 Streamlit hat eine große und etablierte Community. Kein Wunder – es ist länger auf dem Markt, hat mehr Tutorials, ein offizielles Community-Forum und eine direkte Integration mit Streamlit Cloud, wo man Apps mit einem Klick deployen kann. Man findet fast für jedes Problem eine Lösung, und die meisten Data-Science-Teams haben Streamlit zumindest einmal ausprobiert.

🖥️ Gradio wächst rasant – vor allem im Bereich Machine Learning. Seit Hugging Face Gradio übernommen hat, boomt das Ökosystem. Besonders in der ML- und KI-Szene wird Gradio immer mehr zum Standard. Viele große Open-Source-Modelle (Stable Diffusion, BLOOM, LLaMA) nutzen Gradio als Schnittstelle, was bedeutet, dass immer mehr Entwickler darauf setzen.

Kurz & knapp: Wann welches Tool?

Feature	👑 Streamlit	🖥️ Gradio
Daten-Visualisierung	Perfekt für Dashboards	Unterstützt, aber weniger im Fokus
Interaktive Widgets	Viele Optionen (st.slider(), st.button())	Speziell für ML-Inputs optimiert
Machine Learning	Manuell integrierbar	Von Haus aus ML-optimiert
Einsatzbereich	Dashboards, Business-Apps	KI-Demos, Bild- & Text-Modelle

---