Gebruikersinterfaces bouwen voor AI-toepassingen met Gradio in Python

De bruikbaarheid van de huidige AI-modellen neemt sterk af zonder toegankelijke gebruikersinterfaces. Met Gradio, een open-source Python web-UI-bibliotheek, kun je de kloof overbruggen tussen LLM's en niet-technische eindgebruikers. Het stelt je in staat om snel prototypes te maken voor je AI-projecten en de uitrol ervan naar een breder publiek te vereenvoudigen.

Deze tutorial is bedoeld voor machine learning engineers die meestal geen webontwikkelervaring hebben. We behandelen de basis en kernconcepten van Gradio, het bouwen van interfaces voor verschillende AI-modeltypen, geavanceerde functies voor UX en interactiviteit, en best practices voor deployen en delen.

Laten we beginnen.

Aan de slag met Gradio

Installatie

We beginnen met het aanmaken van een virtuele omgeving (bij voorkeur Conda):

$ conda create -n gradio_tutorial python=3.9 -y
$ conda activate gradio_tutorial

Vervolgens kun je met PIP Gradio en de afhankelijkheden installeren:

$ pip install gradio ipykernel

We hebben ook het pakket ipykernel geïnstalleerd, zodat we Gradio-interfaces direct in Jupyter-notebooks kunnen weergeven. Dit vereist dat je de aangemaakte virtuele omgeving als kernel toevoegt aan Jupyter Lab. Gebruik hiervoor het volgende commando:

$ ipython kernel install --user --name=gradio_tutorial
$ jupyter lab  # Start the lab

Hiermee kun je een notebook maken met een kernel waarin Gradio is geïnstalleerd. Ter controle importeer je het onder de standaardalias en print je de versie:

import gradio as gr
print(gr.__version__)
4.37.1

Basisconcepten en terminologie

We duiken in Gradio door de belangrijkste concepten en terminologie te leren met een “Hello World”-voorbeeld:

def greet(name):
   return f"Hello, {name}!"
demo = gr.Interface(
   fn=greet,
   inputs=['text'],
   outputs="text",
)
demo.launch()

Wanneer je bovenstaande code in een cel uitvoert, verschijnt er een kleine interactieve interface die een gepersonaliseerd welkomstbericht teruggeeft:

Gradio draait om een paar kernconcepten:

1. Interface: de kernklasse voor het maken van UI's.
2. Componenten: Invoer- en uitvoerelementen zoals tekstvakken, afbeeldingen en audio. Er zijn inmiddels meer dan 30 ingebouwde componenten.
3. Functies: Python-functies die de informatie uit invoercomponenten verwerken en resultaten teruggeven om met uitvoercomponenten te tonen.
4. Launch: De methode om je Gradio-app te starten.

Hierboven maakten we een greet-functie die een tekstinvoer aanneemt en ook tekst teruggeeft. Daarom zijn de invoer- en uitvoercomponenten als text opgegeven binnen de klasse Interface.

Tot slot roepen we de methode launch aan, die een lokale server start. Om de UI voor iedereen beschikbaar te maken, kun je de parameter share op True zetten. Dit start een SSH-tunnel en zet de Gradio-app uit op een publiek deelbare webpagina:

demo.launch(share=True)
Running on public URL: https://d638ed5f2ce0044296.gradio.live
This share link expires in 72 hours. For free permanent hosting and GPU upgrades, run gradio deploy from Terminal to deploy to Spaces (https://huggingface.co/spaces)

Gradio-componenten

Tijdens het bouwen van Gradio-apps ben je vooral bezig met verschillende componenten en hoe je die op de pagina plaatst. Laten we dus eens kijken wat je allemaal tot je beschikking hebt.

Invoer- en uitvoercomponenten

Gradio biedt een breed scala aan componenten voor het bouwen van interactieve interfaces. Deze componenten zijn grofweg onderverdeeld in twee categorieën: invoer en uitvoer.

Met invoercomponenten kunnen gebruikers data aanleveren aan de onderliggende verwerker (dit kan elke Python-functie zijn). Enkele veelvoorkomende inputs zijn:

• Textbox
• Image
• Audio
• Slider
• Dropdown

Hier is een dummy-interface die enkele van de bovenstaande componenten gebruikt:

def process_inputs(text, image, audio, number, option):
   # Process inputs and return results
   return f"Processed: {text}, {number}, {option}"
demo = gr.Interface(
   fn=process_inputs,
   inputs=[
       gr.Textbox(label="Enter text"),
       gr.Image(label="Upload image"),
       gr.Audio(label="Upload audio"),  # Uncomment this line to add audio input
       gr.Slider(0, 100, label="Choose a number"),
       gr.Dropdown(["Streamlit", "Taipy", "Gradio"], label="Select a UI library"),
   ],
   outputs="text",
)
demo.launch()

In dit voorbeeld vereist de functie process_inputs vijf parameters. Daarom maken we vijf invoercomponenten aan en geven die door aan inputs. Hoewel het aantal invoercomponenten idealiter overeenkomt met het aantal vereiste functieparameters, is dit geen harde eis. Stel voor parameters waarvoor geen gebruikersinvoer vanuit de UI nodig is standaardwaarden in om fouten en waarschuwingen te voorkomen.

Let op dat we een Textbox-klasse gebruiken om de invoercomponent te specificeren in plaats van een gewone string text zoals in het eerste voorbeeld. Het is altijd aan te raden om specifieke klassen te gebruiken voor invoer- en uitvoercomponenten om ze aanpasbaar te maken. Zo hebben alle componentklassen een handig attribuut label, terwijl Slider en Dropdown argumenten hebben om het bereik en de beschikbare opties te bepalen.

Veel invoercomponenten kun je ook als uitvoer gebruiken. Enkele veelvoorkomende scenario's:

• Label: Voor het tonen van tekst of classificatieresultaten
• Image: Voor het tonen van bewerkte of gegenereerde afbeeldingen
• Audio: Voor het afspelen van bewerkte of gegenereerde audio
• Plot: Voor het tonen van grafieken of diagrammen

Net als bij invoer moet het aantal uitvoercomponenten overeenkomen met het aantal teruggegeven waarden van de verwerkende functie.

Uiterlijk van componenten aanpassen

Gradio laat je het uiterlijk van je componenten aanpassen aan je behoeften. Hier is een voorbeeld met aangepaste tekstvakken:

demo = gr.Interface(
   fn=lambda x: int(x) ** 7,
   inputs=gr.Textbox(
       lines=5,
       placeholder="Enter any number...",
       label="Custom textbox",
       info="This is a customized textbox component to raise any number to the power of 7.",
   ),
   outputs=gr.Textbox(label="And the number is...", show_copy_button=True),
)
demo.launch()

In dit voorbeeld hebben we de Textbox-componenten aangepast door het aantal regels te specificeren, een placeholder en infotekst toe te voegen en een kopieerknop voor de uitvoer op te nemen.

Experimenteer met verschillende componenten en hun eigenschappen om interfaces te maken die het beste aansluiten bij de eisen van je AI-toepassing. Wil je weten welke eigenschappen je voor je component kunt wijzigen, raadpleeg dan de documentatie of, nog handiger, gebruik de operand ? in Jupyter Lab achter de klassenaam:

Interfaces bouwen voor LLM's

Laten we alles wat we geleerd hebben samenbrengen door twee echte tekst- en afbeeldingsgebaseerde interfaces te maken die worden aangestuurd door LLM's.

Eerst bouwen we een taalvertaler van Engels naar Turks, Spaans of Chinees:

import openai  # pip install openai
def translate_text(api_key, text, target_language):
  
   openai.api_key = api_key  # Set openai API key
  
   language_map = {
       "Turkish": "Turkish",
       "Spanish": "Spanish",
       "Chinese": "Chinese (Simplified)",
   }
   prompt = f"Translate the following English text to {language_map[target_language]}:\n\nEnglish: {text}\n\n{target_language} translation:"
   try:
       response = openai.chat.completions.create(
           model="gpt-4",
           messages=[
               {"role": "system", "content": "You are a professional translator."},
               {"role": "user", "content": prompt},
           ],
       )
       translation = response.choices[0].message.content.strip()
       return translation
   except Exception as e:
       return f"Error: {str(e)}"

We definiëren eerst een functie translate_text. In de body stellen we de OpenAI-API-sleutel in en maken we een talenmap. Vervolgens construeren we de prompt voor vertaling. Daarna sturen we binnen een try-except-blok een verzoek naar het ChatCompletion-endpoint met een systeemprompt. Uiteindelijk retourneren we de eerste keuze.

Nu kunnen we de interface bouwen:

iface = gr.Interface(
   fn=translate_text,
   inputs=[
       gr.Textbox(
           placeholder="Enter your OpenAI API key",
           type="password",
           label="OpenAI API Key",
       ),
       gr.Textbox(
           lines=4,
           placeholder="Enter English text to translate...",
           label="English Text",
       ),
       gr.Dropdown(choices=["Turkish", "Spanish", "Chinese"], label="Target Language"),
   ],
   outputs=gr.Textbox(label="Translation", show_copy_button=True),
   title="English to Turkish/Spanish/Chinese Translator",
   description="Translate English text to Turkish, Spanish, or Chinese using OpenAI's GPT-4 model. Enter your OpenAI API key, the text you want to translate, and select the target language.",
)
iface.launch(share=True)

De code is eenvoudig, net als bij eerdere interfaces, maar we introduceren een paar nieuwe eigenschappen:

• Het argument type van tekstvakken verandert het platte-tekstveld in een wachtwoordinvoer, waardoor de tekst verborgen blijft.
• De argumenten title en description van de klasse Interface voegen een H1-titel en een subtitel toe bovenaan de pagina, gecentreerd.

Hier is het resultaat:

Je vraagt je misschien af waarom we de API-sleutel van de gebruiker vragen in de app in plaats van die zelf te leveren. De reden heeft te maken met hoe Gradio UI's uitrolt.

Als we onze eigen API-sleutel als omgevingsvariabele zouden meegeven (wat gebruikelijk is), zou de publiek deelbare app-versie niet werken omdat die geen toegang heeft tot onze omgevingsvariabelen. In de sectie over deployment zien we hoe je dit oplost door onze apps naar HuggingFace Spaces te deployen.

Laten we nog een UI bouwen voor het genereren van afbeeldingen:

def generate_surrealist_art(api_key, prompt):
   surrealist_prompt = f"Create a surrealist artwork based on the following concept: {prompt}. The artwork should be dreamlike, with unexpected juxtapositions and a sense of the uncanny."
   client = OpenAI(api_key=api_key)
   response = client.images.generate(
       model="dall-e-3",
       prompt=surrealist_prompt,
       size="1024x1024",
   )
   image_url = response.data[0].url
   return image_url

We maken een functie met de naam generate_surrealist_art die een verzoek stuurt naar dall-e-3 en met een surrealistische prompt de URL van de gegenereerde afbeelding retourneert. Vervolgens voeden we deze functie opnieuw in een Interface-klasse:

iface = gr.Interface(
   fn=generate_surrealist_art,
   inputs=[
       gr.Textbox(
           placeholder="Enter your OpenAI API key",
           type="password",
           label="OpenAI API Key",
       ),
       gr.Textbox(
           lines=2,
           placeholder="Describe your surrealist concept...",
           label="Concept Description",
       ),
   ],
   outputs=gr.Image(value="str"),
   title="Surrealist Artwork Generator",
   description="Generate surrealist artwork based on your prompts using DALL-E. Enter your OpenAI API key and describe your concept.",
)
iface.launch(share=True)

We specificeren twee inputs voor de API-sleutel en het concept dat we in een surrealistische afbeelding willen vangen. Vervolgens maken we één uitvoercomponent voor de gegenereerde afbeelding met de klasse Image. Als je het argument value instelt op str, kan de component afbeeldingen van URL's downloaden en weergeven, precies wat we nodig hebben.

En hier is het resultaat:

Interfaces bouwen voor klassieke ML-modellen

Laten we nu een interface bouwen voor een klassiek tabulair regressiemodel. We gebruiken de Diamonds-dataset, beschikbaar in Seaborn.

Begin met het maken van een nieuwe werkmap en daarin een nieuw script met de naam app.py. Plak vervolgens de code uit deze GitHub gist die de data laadt, verwerkt met een Scikit-learn-Pipeline en een model RandomForestRegression traint.

De volgende stap is het maken van een verwerkingsfunctie die hetzelfde aantal inputs aanneemt als er features in de Diamonds-dataset zijn:

# Create the Gradio interface
def predict_price(carat, cut, color, clarity, depth, table, x, y, z):
  
   input_data = pd.DataFrame(
       {
           "carat": [carat],
           "cut": [cut],
           "color": [color],
           "clarity": [clarity],
           "depth": [depth],
           "table": [table],
           "x": [x],
           "y": [y],
           "z": [z],
       }
   )
  
   prediction = model.predict(input_data)[0]
   return f"Predicted Price: ${prediction:.2f}"

De functie zet die inputs om naar een DataFrame en geeft die door aan de methode .predict() van de getrainde modelpipeline. Uiteindelijk geeft hij een string terug met de voorspelde prijs.

Nu moet de klasse Interface overeenkomen met de signatuur van deze functie: negen invoercomponenten voor het verwerken van de features en één uitvoer voor het tonen van de voorspelde prijs:

iface = gr.Interface(
   fn=predict_price,
   inputs=[
       gr.Slider(
           minimum=diamonds["carat"].min(),
           maximum=diamonds["carat"].max(),
           label="Carat",
       ),
       gr.Dropdown(["Fair", "Good", "Very Good", "Premium", "Ideal"], label="Cut"),
       gr.Dropdown(["D", "E", "F", "G", "H", "I", "J"], label="Color"),
       gr.Dropdown(
           ["I1", "SI2", "SI1", "VS2", "VS1", "VVS2", "VVS1", "IF"], label="Clarity"
       ),
       gr.Slider(
           minimum=diamonds["depth"].min(),
           maximum=diamonds["depth"].max(),
           label="Depth",
       ),
       gr.Slider(
           minimum=diamonds["table"].min(),
           maximum=diamonds["table"].max(),
           label="Table",
       ),
       gr.Slider(minimum=diamonds["x"].min(), maximum=diamonds["x"].max(), label="X"),
       gr.Slider(minimum=diamonds["y"].min(), maximum=diamonds["y"].max(), label="Y"),
       gr.Slider(minimum=diamonds["z"].min(), maximum=diamonds["z"].max(), label="Z"),
   ],
   outputs="text",
   title="Diamond Price Predictor",
   description="Enter the characteristics of a diamond to predict its price.",
)
iface.launch(share=True)

Binnen de klasse maken we drie dropdowns voor de categorische features. De opties zijn ingevuld met de unieke categorieën in elke feature. We maken ook zes slidercomponenten om numerieke features te accepteren. De bereiken van de sliders worden bepaald door de minimum- en maximumwaarden van elke feature.

Het enige wat we nu nog hoeven te doen, is het script uitvoeren om de app te draaien en te deployen:

$ python app.py

Hier is het resultaat:

Voor best practices en optimalisatietips, ga door naar de sectie Best Practices hieronder.

Gradio-apps deployen

We hebben al gezien hoe eenvoudig het is om Gradio-apps te deployen door één argument in te schakelen. Nadeel is natuurlijk dat de demo's binnen 72 uur verlopen. De aanbevolen methode om Gradio te deployen is daarom via HuggingFace Spaces. HuggingFace nam Gradio in 2021 over, waardoor de integratie tussen beide platforms naadloos is.

Maak dus voor deze tutorial of toekomstige apps die je met Gradio maakt, een gratis account aan op huggingface.co en ga naar Settings > Tokens om een toegangstoken te genereren:

Het token wordt maar één keer getoond, dus sla het ergens veilig op.

Met dit token kun je zoveel Gradio-apps deployen als je wilt met permanente hosting op Spaces. Als voorbeeld deployen we het Diamond Prices Prediction-model uit de vorige sectie, en je zult zien dat dit verrassend eenvoudig is.

Alles wat je hoeft te doen is naar de map met het UI-script te gaan en in de terminal gradio deploy aan te roepen:

De terminal loodst je door het converteren van je script naar een werkende HuggingFace Space. Er wordt gevraagd naar zaken zoals:

• Het gegenereerde toegangstoken
• Titel van de Space: dit wordt onderdeel van de Space-URL na deployment
• De naam van het script met de Gradio-UI-code (standaard app.py)
• Hardware voor de Space; laat leeg om alleen CPU's te gebruiken (gratis)
• Eventuele omgevingsvariabelen die het script gebruikt (hier sla je API-sleutels en user secrets veilig op)
• Afhankelijkheden — voer ze één voor één in door op ENTER te drukken

En de terminal presenteert je een link naar de gedeployde Space. Zo ziet dat eruit:

Een ander groot voordeel van deze deploymethode is dat Gradio de demo automatisch omzet in een werkende REST API. De instructies om die te benaderen en aan te spreken staan altijd onderaan:

Zo heb je in één keer zowel permanente UI-hosting voor je applicatie voor niet-technische gebruikers als een REST API voor je collega's en ontwikkelaarsvrienden.

Voor meer opties voor deployment en delen, zoals het insluiten van demo's in webpagina's, Google-authenticatie toevoegen aan apps, enzovoort, bekijk de sectie “Sharing Your App” in de documentatie van Gradio.

Gradio best practices en tips

Door best practices te volgen bij het ontwikkelen van gebruikersinterfaces met Gradio verbeter je de gebruikerservaring en onderhoudbaarheid van je applicatie aanzienlijk. Enkele belangrijke aanbevelingen:

1. Gebruik scripts voor structuur en onderhoudbaarheid

Organiseer Gradio-toepassingen in Python-scripts voor betere versiecontrole, samenwerking en deployment.

2. Optimaliseer de ruimteverdeling voor componenten

Gebruik passende groottes en lay-outtools (bijv. gr.Column(), gr.Row()) voor een gebalanceerde, responsieve interface.

3. Geef uitgebreide informatie

Gebruik de attributen ‘info’ en ‘label’ om duidelijke instructies en context bij elke component te geven.

4. Ga efficiënt om met grote aantallen features

Gebruik bestandsinvoer (CSV, JSON) voor modellen met veel features om batchvoorspellingen mogelijk te maken en de interface te vereenvoudigen.

5. Beheer omgevingsvariabelen op de juiste manier

Gebruik python-dotenv voor lokale ontwikkeling en stel variabelen in Hugging Face Spaces in voor deployment.

6. Implementeer foutafhandeling en validatie

Valideer inputs, geef duidelijke foutmeldingen en gebruik try-except-blokken voor nette foutafhandeling.

7. Optimaliseer prestaties

Implementeer caching, lazy loading voor grote modellen en gebruik gr.LoadingStatus() voor langlopende taken.

8. Ontwerp met toegankelijkheid in gedachten

Zorg voor hoog contrast, voorzie afbeeldingen van alt-tekst en maak toetsenbordnavigatie mogelijk voor alle interactieve elementen.

9. Pas progressieve onthulling toe

Gebruik accordeons of tabbladen om complexe interfaces te organiseren en geavanceerde opties pas te tonen wanneer nodig.

10. Werk regelmatig bij en onderhoud

Houd afhankelijkheden up-to-date, monitor bugs en verbeter continu op basis van gebruikersfeedback.

11. Maak gebruik van HuggingFace-hulpmiddelen

Benut HuggingFace-tools en -resources voor een naadloze integratie met Gradio, waaronder modelrepositories en datasets.

12. Host grote modellen op HuggingFace Hub

Upload grote tabulaire modellen naar HuggingFace Hub en laad ze rechtstreeks in je Gradio-script om prestaties te verbeteren en lokale opslag te verminderen.

13. Gebruik HuggingFace-datasets

Upload grote datasets naar HuggingFace Hub en benader ze rechtstreeks in je Gradio-applicatie om databeheer te stroomlijnen en laadtijden te verbeteren.

Conclusie en verdiepende bronnen

In dit artikel leerden we de basis van het bouwen van gebruikersinterfaces voor AI-toepassingen met Gradio. We hebben slechts aan de oppervlakte gekrabd, want Gradio biedt nog veel meer functies voor complexe interfaces. Zo zorgt interface state ervoor dat je app outputs van de ene functieaanroep naar de andere onthoudt. Reactive interfaces veranderen de UI dynamisch zodra de gebruikersinvoer wijzigt. Met Blocks kun je apps bouwen met aangepaste lay-outs en ontwerpen.

Bekijk ook deze verwante bronnen voor meer inhoud:

• 10 Python-pakketten om aan je data science-stack toe te voegen
• 7 essentiële generatieve AI-tools voor opvallende AI-toepassingen
• 5 projecten die je kunt bouwen met Gen AI-modellen
• CI/CD voor Machine Learning-cursus