Pada langkah sebelumnya, Anda telah mengembangkan agen AI
dan mendasarkannya dengan data referensi yang relevan. Di bagian
berikut, Anda akan menjawab pertanyaan penting tentang cara menyematkan
agen ini di dalam situs, sehingga memungkinkan interaksi real-time
dengan pengunjung.
Ada banyak cara untuk mengekspos agen Anda. Anda dapat mengekspornya
atau memublikasikannya secara langsung. Anda dapat menjelajahi dokumentasi untuk mengetahui kemungkinan opsi.
Di sudut kanan atas tab Dialogflow, klik Menu tambahan, lalu Publikasikan agen
Biarkan semua konfigurasi sebagai Default, lalu klik Enable unauthenticated API.
Catatan: Mengaktifkan API yang tidak diautentikasi
hanya untuk tujuan demo dan konfigurasi ini tidak direkomendasikan untuk
digunakan untuk beban kerja produksi. Jika Anda tertarik untuk
memublikasikan dengan aman, lihat dokumentasi ini.
Setelah mengklik, Anda akan melihat cuplikan kode CSS kecil:
Cukup salin cuplikan kode. Anda akan mengintegrasikan cuplikan kode ini ke situs nanti.
Untuk membuat situs, Anda akan menggunakan lingkungan Cloud Editor. Berikut adalah langkah-langkah untuk membuka Cloud Editor:
- Buka Konsol Google Cloud di tab lain.
- Klik tombol Aktifkan Cloud Shell di pojok kanan atas
- Klik tombol Open Editor.
Jika ada perintah untuk Memberi otorisasi pada Cloud Shell, klik Authorize untuk melanjutkan.
Di bagian berikut, Anda akan menggunakan Gemini Code Assist untuk membuat contoh aplikasi web flask python guna diintegrasikan dengan cuplikan Agen Anda.
Setelah Editor Cloud Shell terbuka, klik Gemini Code Assist dan login ke Project Google Cloud Anda. Jika Anda diminta untuk mengaktifkan API, klik Enable.
Setelah selesai, mari kita minta Gemini Code Assist untuk membuat
aplikasi flask dan mengintegrasikan cuplikan kode agen AI ke dalamnya.
Berikut adalah contoh perintah yang dapat Anda gunakan
Here is my Travel buddy Vertex AI agent builder agent publish code snippet,
<REPLACE IT WITH YOUR AI AGENT PUBLISH CODE SNIPPET>
can you create a sample flask app to use it
Catatan: Di sini kita telah meminta aplikasi flask
python. Jika Anda lebih memilih bahasa pemrograman atau framework lain,
jangan ragu untuk menggunakannya. Gemini Code Assist memiliki kemampuan
untuk membuat berbagai bahasa pemrograman. Lihat Bahasa, IDE, dan antarmuka yang didukung untuk mengetahui detail selengkapnya.
Anda akan melihat bahwa cuplikan kode yang disediakan sudah
terintegrasi dengan agen AI. Untuk menguji apakah kode yang diberikan
valid dan berfungsi seperti yang diinginkan, Anda dapat mengikuti
petunjuk yang diberikan oleh Gemini Code Assist tentang cara menjalankan
bagian kode respons output ini.
Contoh cuplikan kode Respons Output -
from flask import Flask, render_template_string
app = Flask(__name__)
# HTML template string with the provided Dialogflow Messenger code
html_template = """
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Travel Buddy Chatbot</title>
<link rel="stylesheet" href="https://www.gstatic.com/dialogflow-console/fast/df-messenger/prod/v1/themes/df-messenger-default.css">
<script src="https://www.gstatic.com/dialogflow-console/fast/df-messenger/prod/v1/df-messenger.js"></script>
<style>
df-messenger {
z-index: 999;
position: fixed;
--df-messenger-font-color: #000;
--df-messenger-font-family: Google Sans;
--df-messenger-chat-background: #f3f6fc;
--df-messenger-message-user-background: #d3e3fd;
--df-messenger-message-bot-background: #fff;
bottom: 16px;
right: 16px;
}
body {
font-family: sans-serif;
margin: 20px;
}
</style>
</head>
<body>
<h1>Welcome to Travel Buddy!</h1>
<p>Start chatting with our AI Travel buddy, in the bottom right corner.</p>
<df-messenger
project-id="<SAMPLE>"
agent-id="<SAMPLE>"
language-code="en"
max-query-length="-1">
<df-messenger-chat-bubble
chat-title="Travel Buddy">
</df-messenger-chat-bubble>
</df-messenger>
</body>
</html>
"""
@app.route("/")
def index():
"""Renders the HTML template with the Dialogflow Messenger."""
return render_template_string(html_template)
if __name__ == "__main__":
app.run(debug=True)
Sesuai dengan petunjuk yang diberikan
- Salin cuplikan kode aplikasi flask contoh yang diberikan,
- Buat file baru bernama app.py dan simpan file tersebut.
Pada langkah berikutnya, Anda akan diminta untuk menginstal flask
guna menjalankan cuplikan ini, yang tidak diperlukan untuk saat ini
karena cloud shell sudah menginstal semua utilitas yang biasa digunakan
secara default.
Simpan file (Ctrl + S atau CMD + S), lalu klik Open Terminal, tempat Anda akan menjalankan kode yang disediakan.
Di terminal, jalankan perintah berikut
python app.py
Catatan: Pastikan Anda berada di folder yang tepat, tempat file app.py berada
Aplikasi flask python akan berjalan di port 5000. Untuk melihat pratinjau aplikasi web ini, klik ikon Pratinjau Web di cloud shell. Kemudian, Anda dapat mengklik Change Port, input 5000, dan mengklik Change and Preview untuk menyimpannya.
Situs contoh akan muncul dan akan ada agen AI yang sudah tersedia. Cukup klik agen AI dan mulailah melakukan chat dengannya.
Jangan ragu untuk mengujinya dengan perintah yang berbeda. Anda juga
dapat meminta Gemini Code Assist untuk mempercantik situs Anda, atau
menambahkan lebih banyak data dasar ke agen AI dan membuatnya lebih
bermanfaat.
Setelah siap, sebagai langkah berikutnya, Anda dapat mencoba
menghosting agen AI ini di Google Cloud agar dapat diakses oleh siapa
saja, di mana saja. Sebagai pengingat codelab ini, Anda akan men-deploy
aplikasi flask contoh ini di Cloud Run sebagai penampung.
Catatan: Hal ini tidak hanya terbatas pada cloud run
(Jika Anda tidak tahu apa itu cloud run, Anda bahkan dapat
menanyakannya), Anda dapat meminta bantuan kode gemini untuk membantu
Anda men-deploynya di Google Cloud atau di mana saja dengan praktik
terbaik, hal ini juga dapat membantu Anda dengan bagian tersebut.
Kembali ke Terminal Cloud Shell dan tekan Ctrl + C untuk menghentikan proses. Klik Open Editor lagi dan minta Gemini Code Assist untuk membantu kita membuat penampung aplikasi dan men-deploy-nya di cloud run.
Can you help me deploy this sample flask app to cloud run service
Halaman ini memberikan beberapa petunjuk dan perintah yang harus
diikuti untuk menghosting aplikasi di layanan Cloud Run. Mari kita ikuti
petunjuknya
Berikut adalah contoh respons output
Langkah-langkah untuk Men-deploy ke Cloud Run
- Prasyarat:
- Akun Google Cloud: Anda memerlukan akun Google Cloud dengan penagihan diaktifkan.
- gcloud CLI: Menginstal dan melakukan inisialisasi
Google Cloud SDK (gcloud CLI) di komputer lokal Anda. Anda akan
menggunakannya untuk berinteraksi dengan Google Cloud dari terminal.
- Docker: Instal Docker di komputer lokal Anda. Cloud Run menggunakan Docker untuk memasukkan aplikasi Anda ke dalam container.
- Penyiapan Project: Pastikan Anda telah memilih project Google Cloud di gcloud CLI. Anda dapat memeriksa dengan
gcloud config list project dan menetapkannya dengan gcloud config set project YOUR_PROJECT_ID
Catatan: Karena kita melakukan seluruh aktivitas ini di cloud shell, tidak perlu menyiapkan project
- Buat **
requirements.txt****:**
- File ini mencantumkan semua paket Python yang diperlukan aplikasi Anda. Di direktori project Anda (tempat
main.py berada), buat file bernama requirements.txt dan tambahkan baris berikut
- Buat **
Dockerfile****:**
Dockerfile menentukan cara mem-build image Docker untuk aplikasi Anda. Buat file bernama Dockerfile (tanpa ekstensi) di direktori project Anda dan tambahkan konten berikut:
# Use an official Python runtime as a parent imageFROM python:3.9-slim-buster
# Set the working directory to /appWORKDIR /app
# Copy the current directory contents into the container at /app
COPY . /app
# Install any needed packages specified in requirements.txt
RUN pip install --no-cache-dir -r requirements.txt
# Make port 5000 available to the world outside this container
EXPOSE 5000
# Define environment variable
ENV NAME World
# Run app.py when the container launches
CMD ["python", ".py"]
- Mem-build Image Docker:
- Buka terminal, buka direktori project Anda, lalu jalankan:
gcloud builds submit –tag gcr.io/bgr-workshop-23rd/travel-buddy
- Men-deploy ke Cloud Run:
- Setelah image di-build dan diupload, deploy ke Cloud Run dengan perintah berikut:
gcloud run deploy travel-buddy --image gcr.io/bgr-workshop-23rd/travel-buddy --region us-central1
Setelah menyelesaikan langkah-langkah ini, Anda akan melihat aplikasi
dengan agen AI terintegrasi akan aktif untuk pengguna akhir.
Selamat dan selamat belajar.
6. Pembersihan
Agar tidak menimbulkan biaya pada akun Google Cloud Anda
untuk resource yang digunakan dalam codelab ini, ikuti langkah-langkah
berikut:
- Di konsol Google Cloud, buka halaman Manage resources.
- Dalam daftar project, pilih project yang ingin Anda hapus, lalu klik Delete.
- Pada dialog, ketik project ID, lalu klik Shut down untuk menghapus project.
- Atau, Anda dapat membuka Cloud Run di konsol, memilih layanan yang baru saja di-deploy, lalu menghapusnya.
