Membangun Aplikasi AI Multimodal dengan Gemini 2.0 Pro

Menyiapkan Gemini 2.0 Pro

Saat ini, Gemini 2.0 Pro hanya dapat diakses melalui Google AI Studio, yang mengharuskan Anda masuk dengan akun Google. Untuk memulai, ikuti langkah-langkah berikut:

1. Masuk ke Google AI Studio

Kunjungi situs Google AI Studio dan masuk menggunakan kredensial akun Google Anda. Setelah masuk, Anda akan diarahkan ke dasbor Google AI Studio.

2. Buat kunci API

• Di dasbor, temukan dan klik tombol “Get API Key” di pojok kiri atas.
• Selanjutnya, klik tombol “Create API Key” untuk membuat kunci API pertama Anda.

Sumber: Google AI Studio 

3. Atur variabel lingkungan

Buat variabel lingkungan bernama GEMINI_API_KEY dan isi dengan nilai kunci API yang baru saja Anda buat.

4. Instal paket Python yang diperlukan

Instal paket Python yang diperlukan dengan menjalankan perintah berikut di terminal Anda:

pip install google-genai 
pip install gradio

Menguji Fitur Gemini 2.0 Pro

Sekarang, kita akan menggunakan klien Python Gemini untuk mengakses berbagai fitur model Gemini 2.0 Pro. Fitur-fitur ini mencakup pemahaman teks, pemrosesan gambar, analisis audio, dan pemahaman dokumen.

Selain itu, kita akan menguji fitur eksekusi kode, yang memungkinkan kita menghasilkan kode dan mengeksekusinya langsung di kernel Python cloud.

1. Generasi teks

Kita akan memuat kunci API dari variabel lingkungan dan menginisialisasi klien dengan kunci tersebut. Klien ini akan menjadi antarmuka untuk mengakses berbagai model dan fitur.

Selanjutnya, kita akan memberikan pertanyaan kepada model dan menghasilkan respons streaming. Artinya, begitu token dihasilkan, ia akan ditampilkan secara bertahap di terminal, memberikan umpan balik waktu nyata.

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="")

Model menghasilkan respons yang detail dan akurat.

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. Pemahaman gambar

Untuk pemahaman gambar, kita akan memuat gambar menggunakan pustaka Pillow di Python dan menambahkannya ke argumen contents. contents akan menyertakan pertanyaan tentang gambar beserta objek gambar tersebut.

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="")

Model memahami gambar dengan akurat dan bahkan memberikan detail-detail kecil.

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. Pemahaman audio

Gemini 2.0 Pro dapat memahami audio secara langsung tanpa mengonversinya ke teks. Cukup muat audio dan berikan ke argumen content bersama pertanyaan yang relevan.

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="")

Sekali lagi, ia memberikan deskripsi audio yang sangat akurat.

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. Pemahaman dokumen

Alih-alih menggunakan Langchain atau kerangka kerja RAG mana pun, kita dapat memberikan dokumen kepada Gemini 2.0 Pro, yang akan diparse dan diindeks, sehingga kita bisa mulai mengajukan pertanyaan tentangnya.

Kita memuat file PDF dan mengajukan pertanyaan berdasarkan isinya. Sesederhana itu.

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="")

Hasilnya, ia menjelaskan dengan sempurna tentang apa isi dokumen ini.

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. Generasi dan eksekusi kode

Bagian paling menonjol dari API Gemini adalah Anda dapat menghasilkan kode dan mengeksekusinya menggunakan API yang sama. Artinya, kode Anda akan dihasilkan dan diuji; jika ada bug, model akan memperbaikinya dan menjalankan ulang kode hingga respons yang benar dihasilkan.

Kita mengajukan pertanyaan pengodean kepada Gemini 2.0 Pro dan meminta untuk mengeksekusi kode di akhir. Jika Anda melihat argumen config, Anda akan melihat bahwa kita menyertakan tool eksekusi kode untuk menjalankan kode di cloud.

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)

Model menghasilkan kode tetapi gagal menjalankannya. Kemudian, ia memperbaiki masalahnya, menjalankan ulang kode, dan berhasil menampilkan hasilnya.

Membangun Aplikasi Gemini 2.0 Pro

Sekarang kita akan membangun aplikasi web Gradio yang mengintegrasikan semua fitur yang telah kita uji sebelumnya. Ini akan memungkinkan siapa pun untuk mengujinya dengan mengunggah file dan mengajukan pertanyaan tentang gambar, audio, dokumen, bahkan mengeksekusi kode.

Kode untuk app.py tersedia di repositori GitHub Gemini-2-Pro-Chat. Anda dapat meninjaunya untuk memahami bagaimana setiap fitur diimplementasikan.

Secara singkat, aplikasi ini berisi:

• Penanganan input multimodal: Chatbot dapat memproses teks, gambar, audio, dan dokumen.
• Generasi respons dinamis: Ia melakukan streaming respons menggunakan metode generate_content_stream dari Google GenAI.
• Eksekusi kode: Pengguna dapat menghasilkan kode, lalu meminta chatbot mengeksekusi kode dan mengembalikan hasilnya.
• Pemrosesan gambar dan audio: Gambar diubah ukurannya dan dikonversi ke base64 untuk disematkan di HTML, sedangkan file audio dikodekan dan ditampilkan dengan pemutar audio.
• Unggah dokumen: File PDF diproses dan ditambahkan ke riwayat percakapan.

Setelah Anda menyalin kode dari repositori jarak jauh ke proyek lokal, Anda dapat menjalankannya secara lokal.

python app.py

Menguji Aplikasi Gemini 2.0 Pro

Sekarang kita akan menguji aplikasi web untuk memastikan semuanya berfungsi dengan baik. Kita akan menelusuri semua fitur satu per satu menggunakan antarmuka pengguna aplikasi web.

1. Ketik pertanyaan Anda dan tekan tombol [Enter]. Respons akan mulai dihasilkan, dan Anda akan mendapatkan jawaban dalam beberapa detik saja.

2. Untuk mengunggah gambar, klik tombol “Upload Images” dan pilih file dari direktori. Lalu, ajukan pertanyaan tentang gambar tersebut, dan Gemini 2.0 Pro akan mulai menghasilkan respons yang akurat dan sangat detail.

3. Unggah audio dengan mengklik tombol “Upload Audio” dan memilih file audio. Setelah itu, ajukan pertanyaan tentang audio tersebut. Model akan menghasilkan jawaban yang sangat akurat.

4. Anda juga dapat mengunggah dokumen. Muat file PDF dengan mengklik tombol “Upload Documents” dan memilih file. Lalu, ajukan pertanyaan tentang dokumen tersebut.

5. Eksekusi kode sedikit berbeda. Ia tidak memiliki riwayat untuk menghindari konflik, artinya Anda perlu memintanya menghasilkan kode dan mengeksekusinya dalam satu prompt yang sama.

Sebagai contoh, kami memintanya menghasilkan dan mengeksekusi kode Python contoh untuk membuat gambar acak dalam format PNG, lalu kami menekan tombol “Run Code Execution”.

Dalam hitungan detik, ia menghasilkan kode, menjalankannya, dan menampilkan gambar di kotak chat.

Fitur eksekusi kode juga memberikan kesimpulan di akhir.

Mendeploy Aplikasi Gemini 2.0 Pro

Mari deploy aplikasi kita ke cloud menggunakan Hugging Face Spaces. Kunjungi Hugging Face Spaces dan klik tombol “+ New Space”. Masukkan nama, deskripsi, dan lisensi untuk space, serta pilih SDK Gradio.

Sumber: Hugging Face

Setelah membuat space, Anda akan menerima instruksi cara mengkloning repositori:

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

Di dalam repositori lokal, buat file requirements.txt dan tambahkan dependensi Python berikut:

google-genai==1.0.0

Selanjutnya, ubah file README.md untuk menyertakan konten berikut:

---
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. '
---

Lalu, tambahkan file app.py ke repositori. Stage perubahan, commit, dan push pembaruan ke repositori jarak jauh:

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

Setelah Anda melakukan push commit, Anda akan melihat space Anda membangun image Docker dan memasang dependensi.

Sumber: Gemini 2 Pro Chat

Setelah semuanya selesai, Anda mungkin menemui pesan galat. Jangan khawatir; ini terkait variabel lingkungan yang belum ada dan akan kita tambahkan di Spaces.

Sumber: Gemini 2 Pro Chat

Buka pengaturan Space Anda dan gulir ke bagian "Variables and Secrets". Buat secret baru dengan mengklik tombol “New Secret”. Berikan nama dan masukkan kunci API Gemini Anda.

Sumber: Gemini 2 Pro Chat

Setelah Anda menambahkan secret, space akan otomatis dimulai ulang, dan aplikasi Anda akan berjalan lancar, seperti saat dijalankan secara lokal.

Sumber: Gemini 2 Pro Chat

Kesimpulan

Membangun aplikasi AI berkinerja tinggi menjadi jauh lebih mudah dengan API Gemini 2.0 Pro yang baru dan fitur-fiturnya yang canggih. Alih-alih memasang banyak paket Python untuk memproses gambar, audio, atau dokumen, Anda cukup memberikan input tersebut ke endpoint API. Model akan menghasilkan hasil dalam hitungan detik, sehingga prosesnya mulus dan efisien.

Saat ini, akses ke Gemini 2.0 Pro gratis tetapi dibatasi hingga 50 permintaan per hari. Namun, penting untuk dicatat bahwa API tidak boleh digunakan untuk tujuan komersial guna menghindari risiko penangguhan akun.

Dalam tutorial ini, kita mengeksplorasi model mutakhir Gemini 2.0 Pro dan fiturnya. Kita menguji kemampuan ini di Jupyter Notebook dan mengintegrasikannya ke dalam aplikasi Gradio. Terakhir, kita melakukan deployment aplikasi ke cloud, sehingga dapat diakses publik.

Jika Anda ingin mempelajari lebih lanjut tentang membuat aplikasi berbasis AI, lihat jalur keterampilan kami tentang Developing AI Applications untuk mempelajari beberapa alat pengembang AI terbaru.