Een multimodale AI-applicatie bouwen met Gemini 2.0 Pro

Gemini 2.0 Pro instellen

Op dit moment is Gemini 2.0 Pro alleen toegankelijk via Google AI Studio, waarvoor je moet inloggen met een Google-account. Volg deze stappen om te beginnen:

1. Log in op Google AI Studio

Bezoek de Google AI Studio website en log in met je Google-account. Na het inloggen word je doorgestuurd naar het dashboard van Google AI Studio.

2. Genereer een API-sleutel

• Zoek op het dashboard de knop “Get API Key” linksboven en klik erop.
• Klik vervolgens op de knop “Create API Key” om je eerste API-sleutel te genereren.

Bron: Google AI Studio 

3. Stel de omgevingsvariabele in

Maak een omgevingsvariabele met de naam GEMINI_API_KEY en ken daaraan de waarde toe van de API-sleutel die je zojuist hebt gegenereerd.

4. Installeer de vereiste Python-pakketten

Installeer de benodigde Python-pakketten door de volgende opdracht in je terminal uit te voeren:

pip install google-genai 
pip install gradio

Functies van Gemini 2.0 Pro testen

We gebruiken nu de Gemini Python-client om toegang te krijgen tot verschillende functies van het Gemini 2.0 Pro-model. Deze functies omvatten tekstbegrip, beeldverwerking, audio-analyse en documentbegrip. 

Daarnaast testen we de functie voor code-uitvoering, waarmee we code kunnen genereren en deze direct kunnen uitvoeren binnen de cloud Python-kernel.

1. Tekstgeneratie

We laden de API-sleutel uit de omgevingsvariabele en initialiseren de client ermee. Deze client fungeert als interface voor toegang tot verschillende modellen en functies.

Vervolgens geven we het model een vraag en genereren we een streamingantwoord. Dit betekent dat zodra tokens worden gegenereerd, ze stapsgewijs in de terminal worden weergegeven, wat realtime feedback biedt.

import os
from google import genai

API_KEY = os.environ.get("GEMINI_API_KEY")

client = genai.Client(api_key=API_KEY)

response = client.models.generate_content_stream(
    model="gemini-2.0-pro-exp-02-05",
    contents=["Explain how Stock Market works"])
for chunk in response:
    print(chunk.text, end="")

Het model genereerde een gedetailleerd en accuraat antwoord. 

The stock market is a complex system, but here's a breakdown of how it works in a simplified way, covering the key concepts:

**1. What are Stocks (Shares)?**

*   **Ownership:** Stocks, also called shares or equities, represent ownership in a company.  When you buy a stock, you're buying a tiny piece of that company.
*   **Claim on Assets and Earnings:** As a shareholder, you have a claim on the company's assets and earnings.  You're entitled to a portion of the company's profits (often distributed as dividends, though not always) and, in theory, a share of the company's value if it were to be liquidated.
*   **Voting Rights (Sometimes):**  Many stocks (but not all) come with voting rights, allowing you to have a say in certain company decisions (like electing the board of directors).

**2. Why Companies Issue Stock (Go Public)?**

2. Beeldbegrip

Voor beeldbegrip laden we de afbeelding met de Pillow-bibliotheek in Python en voegen deze toe aan het contents-argument. De contents bevatten vragen over de afbeelding samen met het afbeeldingsobject.

from google import genai
from google.genai import types

import PIL.Image

image = PIL.Image.open('image.png')

response = client.models.generate_content_stream(
    model="gemini-2.0-pro-exp-02-05",
    contents=["Explain the image", image])

for chunk in response:
    print(chunk.text, end="")

Het model heeft de afbeelding nauwkeurig begrepen en gaf ons zelfs kleine details. 

The image is a stylized, abstract graphic. It looks like a simplified diagram or node network, with a black background.

Here's a breakdown:

*   **Nodes:**  There are four circular nodes.  Each node is a different color:
    *   Light Blue (Top Left)
    *   Light Green (Bottom Left)
    *   White (Top Right)
    *    Red (Bottom Right)
*    **Node outline:** There is a thick outline around each of the circles.
*  **Shadow:** Each circle appears to be casting a white shadow.

3. Audiobegrip

Gemini 2.0 Pro kan audio direct begrijpen zonder deze naar tekst te converteren. Laad gewoon de audio en geef deze mee aan het content-argument samen met de bijbehorende vraag.

with open('audio.wav', 'rb') as f:
    audio_bytes = f.read()

response = client.models.generate_content_stream(
  model='gemini-2.0-pro-exp-02-05',
  contents=[
    'Describe this audio',
    types.Part.from_bytes(
      data=audio_bytes,
      mime_type='audio/wav',
    )
  ]
)

for chunk in response:
    print(chunk.text, end="")

Opnieuw geeft het een zeer nauwkeurige beschrijving van de audio. 

The audio appears to be a collection of short, spoken phrases or sentences. There is only one speaker, a male, and he seems to be reading or reciting these phrases, possibly as part of a list or exercise. The content focuses on food and related concepts like smell and temperature.

4. Documentbegrip

In plaats van Langchain of een ander RAG-framework te gebruiken, kunnen we documenten aan Gemini 2.0 Pro aanbieden, die het zal parsen en indexeren, zodat we er vragen over kunnen stellen. 

We hebben een pdf-bestand geladen en vragen gesteld op basis van de inhoud. Zo simpel is het.

from google import genai
from google.genai import types
import pathlib

prompt = "What the document is about"
response = client.models.generate_content_stream(
  model="gemini-2.0-pro-exp-02-05",
  contents=[
      types.Part.from_bytes(
        data=pathlib.Path('cv.pdf').read_bytes(),
        mime_type='application/pdf',
      ),
      prompt])

for chunk in response:
    print(chunk.text, end="")

Het resultaat is dat het perfect heeft beschreven waar dit document over gaat.

Based on the OCR output, the document is **Abid Ali Awan's Curriculum Vitae (CV) or resume**. It details his:

*   **Contact Information:** Name, address, email, and phone number.
*   **Work Experience:** A chronological list of his professional roles, including job titles, companies, locations, dates of employment, and brief descriptions of his responsibilities. This includes experience in data science, freelancing, research, media, and network engineering.
*   **Education:** His academic background, listing degrees earned, institutions attended, graduation dates, GPAs, and areas of specialization.
*    **Gap Year:** Explaining the time that have taken for medical/personal issues.
*   **Professional Skills:** A list of his technical and soft skills, categorized and rated

5. Codegeneratie en -uitvoering

Het meest opvallende aan de Gemini-API is dat je code kunt genereren en uitvoeren met dezelfde API. Dit betekent dat je code wordt gegenereerd en getest; als er een bug is, zal het model de bug oplossen en de code opnieuw uitvoeren totdat het juiste antwoord is gegenereerd.

We hebben Gemini 2.0 Pro een codeervraag gesteld en gevraagd om de code aan het einde uit te voeren. Als je naar het config-argument kijkt, zie je dat we de code-executiontool hebben toegevoegd om de code in de cloud uit te voeren.

from google import genai
from google.genai import types
from IPython.display import Markdown, HTML, Image, display

response = client.models.generate_content(
  model='gemini-2.0-pro-exp-02-05',
  contents="""
  Write a Python program to calculate the sum of the first 50 prime numbers. The program should:
   - Use a function to check if a number is prime.
   - Use another function to find and sum the first n prime numbers, where n is 50 in this case.
   - Ensure the code is efficient and readable.
   - Print the result clearly.
After writing the code, execute it to verify that the sum of the first 50 prime numbers is correct.
  """,
  config=types.GenerateContentConfig(
    tools=[types.Tool(
      code_execution=types.ToolCodeExecution
    )]
  )
)

def display_code_execution_result(response):
  for part in response.candidates[0].content.parts:
    if part.text is not None:
      display(Markdown(part.text))
    if part.executable_code is not None:
      code_html = f'<pre style="background-color: green;">{part.executable_code.code}</pre>' # Change code color
      display(HTML(code_html))
    if part.code_execution_result is not None:
      display(Markdown(part.code_execution_result.output))
    if part.inline_data is not None:
      display(Image(data=part.inline_data.data, format="png"))
    display(Markdown("---"))

display_code_execution_result(response)

Het model heeft de code gegenereerd maar kon deze niet uitvoeren. Daarna zijn de problemen verholpen, is de code opnieuw uitgevoerd en zijn de resultaten succesvol weergegeven. 

Een Gemini 2.0 Pro-applicatie bouwen

We bouwen nu een Gradio-webapp die alle eerder geteste functies integreert. Zo kan iedereen hem testen door bestanden te uploaden en vragen te stellen over afbeeldingen, audio, documenten en zelfs code uit te voeren. 

De code voor app.py is beschikbaar in de GitHub-repository Gemini-2-Pro-Chat. Je kunt die bekijken om te begrijpen hoe elke functie is geïmplementeerd.

Kort samengevat bevat de app:

• Multimodale invoerafhandeling: de chatbot kan tekst, afbeeldingen, audio en documenten verwerken.
• Dynamische responsgeneratie: er worden reacties gestreamd met de methode generate_content_stream van Google GenAI.
• Code-uitvoering: gebruikers kunnen code genereren en de chatbot vragen de code uit te voeren en resultaten te retourneren.
• Afbeeldings- en audioverwerking: afbeeldingen worden geschaald en geconverteerd naar base64 voor insluiting in HTML, terwijl audiobestanden worden gecodeerd en weergegeven met een audioplayer.
• Documentuploads: pdf-bestanden worden verwerkt en toegevoegd aan de conversatiegeschiedenis.

Zodra je de code uit de externe repository hebt gekopieerd naar je lokale project, kun je deze lokaal draaien.

python app.py

De Gemini 2.0 Pro-applicatie testen

We gaan nu de webapplicatie testen om te controleren of alles goed werkt. We lopen alle functies één voor één door via de gebruikersinterface van de webapp.

1. Typ je vraag en druk op de [Enter]-toets. De reactie begint te genereren en binnen enkele seconden heb je je antwoord.

2. Om een afbeelding te uploaden, klik je op de knop “Upload Images” en selecteer je het bestand uit de map. Stel daarna een vraag over de afbeelding en Gemini 2.0 Pro begint een nauwkeurig en zeer gedetailleerd antwoord te genereren.

3. Upload audio door op de knop “Upload Audio” te klikken en het audiobestand te selecteren. Stel daarna een vraag over de audio. Het model levert zeer nauwkeurige antwoorden. 

4. Je kunt ook documenten uploaden. Laad een pdf-bestand door op de knop “Upload Documents” te klikken en het bestand te selecteren. Stel vervolgens een vraag over het document.

5. Code-uitvoering werkt net even anders. Er is geen geschiedenis om conflicten te voorkomen, wat betekent dat je in dezelfde prompt moet vragen om de code te genereren en uit te voeren. 

We vroegen bijvoorbeeld om voorbeeld-Pythoncode te genereren en uit te voeren om een willekeurige afbeelding in PNG-formaat te maken, en drukten daarna op de knop “Run Code Execution”.

Binnen enkele seconden heeft het de code gegenereerd, uitgevoerd en de afbeeldingen in de chatbox weergegeven.

De functie voor code-uitvoering geeft ook een conclusie aan het einde.

De Gemini 2.0 Pro-app deployen

Laten we onze app naar de cloud deployen met Hugging Face Spaces. Ga naar Hugging Face Spaces en klik op de knop “+ New Space”. Vul de naam, beschrijving en licentie van de space in en selecteer als SDK Gradio.

Bron: Hugging Face

Na het aanmaken van de space ontvang je instructies om de repository te clonen:

git clone https://huggingface.co/spaces/kingabzpro/Gemini-2-Pro-Chat
cd Gemini-2-Pro-Chat

Maak in de lokale repository een bestand requirements.txt en voeg de volgende Python-dependency toe:

google-genai==1.0.0

Wijzig vervolgens het bestand README.md en voeg de volgende inhoud toe:

---
title: Gemini 2 Pro Chat
emoji: ♊💬
colorFrom: green
colorTo: pink
sdk: gradio
sdk_version: 5.15.0
app_file: app.py
pinned: false
license: mit
short_description: 'Image, Audio, and Document understanding + Code Execution. '
---

Voeg daarna het bestand app.py toe aan de repository. Stage de wijzigingen, commit ze en push de updates naar de externe repository:

git add .
git commit -m "deploying the app"   
git push 

Zodra je de commits hebt gepusht, zie je dat je space het Docker-image bouwt en de dependencies installeert.

Bron: Gemini 2 Pro Chat

Wanneer alles is afgerond, kun je een foutmelding tegenkomen. Maak je geen zorgen; dit heeft te maken met ontbrekende omgevingsvariabelen die we gaan toevoegen in de Spaces.

Bron: Gemini 2 Pro Chat

Ga naar de instellingen van je Space en scroll naar de sectie "Variables and Secrets". Maak een nieuw geheim aan door op de knop “New Secret” te klikken. Geef het de naam en jouw Gemini API-sleutel.

Bron: Gemini 2 Pro Chat

Nadat je het geheim hebt toegevoegd, start de space automatisch opnieuw en draait je app soepel, net zoals lokaal.

Bron: Gemini 2 Pro Chat

Conclusie

Het bouwen van een high-performance AI-applicatie is een stuk eenvoudiger geworden met de nieuwe Gemini 2.0 Pro API en de geavanceerde functies. In plaats van meerdere Python-pakketten te installeren om afbeeldingen, audio of documenten te verwerken, kun je deze inputs gewoon aan het API-endpoint doorgeven. Het model genereert binnen enkele seconden resultaten, waardoor het proces soepel en efficiënt verloopt.

Toegang tot Gemini 2.0 Pro is momenteel gratis maar beperkt tot 50 verzoeken per dag. Houd er echter rekening mee dat de API niet voor commerciële doeleinden mag worden gebruikt om het risico op opschorting van je account te vermijden.

In deze tutorial hebben we het geavanceerde Gemini 2.0 Pro-model en de functies ervan verkend. We hebben deze mogelijkheden getest in Jupyter Notebooks en geïntegreerd in een Gradio-applicatie. Tot slot hebben we de applicatie naar de cloud gedeployed, zodat deze toegankelijk is voor het publiek.

Wil je meer leren over het maken van AI-gedreven applicaties? Bekijk dan onze skill track Developing AI Applications om kennis te maken met de nieuwste AI-ontwikkeltools.