Codelab - Membuat aplikasi perekomendasikan Pose Yoga kontekstual dengan Firestore, Vector Search, Langchain, dan Gemini (versi Python)

1. Pengantar

Dalam codelab ini, Anda akan membuat aplikasi yang menggunakan penelusuran vektor untuk merekomendasikan pose Yoga.

Selama mengikuti codelab, Anda akan menggunakan pendekatan langkah demi langkah sebagai berikut:

1. Gunakan Set Data Hugging Face yang ada untuk pose Yoga (format JSON).
2. Tingkatkan kualitas set data dengan deskripsi kolom tambahan yang menggunakan Gemini untuk membuat deskripsi setiap pose.
3. Gunakan Langchain untuk membuat Dokumen, gunakan integrasi Langchain Firestore untuk membuat koleksi dan penyematan di Firestore.
4. Buat indeks komposit di Firestore untuk mengizinkan Penelusuran vektor.
5. Gunakan Penelusuran Vektor dalam Aplikasi Flask yang menggabungkan semuanya seperti yang ditunjukkan di bawah:

Yang akan Anda lakukan

• Mendesain, Membangun, dan Men-deploy aplikasi web yang menggunakan Penelusuran Vektor untuk merekomendasikan pose Yoga.

Yang akan Anda pelajari

• Cara menggunakan Gemini untuk membuat konten teks dan dalam konteks codelab ini, membuat deskripsi untuk pose yoga
• Cara menggunakan Langchain Document Loader for Firestore untuk memuat rekaman dari set data yang ditingkatkan dari Hugging Face ke Firestore bersama dengan Penyematan Vektor
• Cara menggunakan Langchain Vector Store for Firestore untuk menelusuri data berdasarkan kueri bahasa alami
• Cara menggunakan Google Cloud Text to Speech API untuk membuat konten Audio

Yang Anda butuhkan

• Browser web Chrome
• Akun Gmail
• Project Cloud dengan penagihan diaktifkan

Codelab ini, yang dirancang untuk developer dari semua tingkat keahlian (termasuk pemula), menggunakan Python dalam aplikasi contohnya. Namun, pengetahuan Python tidak diperlukan untuk memahami konsep yang disajikan.

2. Sebelum memulai

Membuat project

1. Di Konsol Google Cloud, di halaman pemilih project, pilih atau buat project Google Cloud.
2. Pastikan penagihan diaktifkan untuk project Cloud Anda. Pelajari cara memeriksa apakah penagihan telah diaktifkan pada suatu project .
3. Anda akan menggunakan Cloud Shell, lingkungan command line yang berjalan di Google Cloud yang telah dilengkapi dengan bq. Klik Activate Cloud Shell di bagian atas konsol Google Cloud.

4. Setelah terhubung ke Cloud Shell, Anda dapat memeriksa bahwa Anda sudah diautentikasi dan project sudah ditetapkan ke project ID Anda menggunakan perintah berikut:

gcloud auth list

5. Jalankan perintah berikut di Cloud Shell untuk mengonfirmasi bahwa perintah gcloud mengetahui project Anda.

gcloud config list project

6. Jika project Anda belum ditetapkan, gunakan perintah berikut untuk menetapkannya:

gcloud config set project <YOUR_PROJECT_ID>

7. Aktifkan API yang diperlukan melalui perintah yang ditampilkan di bawah. Proses ini mungkin memerlukan waktu beberapa menit, jadi bersabarlah.

gcloud services enable firestore.googleapis.com \
                       compute.googleapis.com \
                       cloudresourcemanager.googleapis.com \
                       servicenetworking.googleapis.com \
                       run.googleapis.com \
                       cloudbuild.googleapis.com \
                       cloudfunctions.googleapis.com \
                       aiplatform.googleapis.com \
                       texttospeech.googleapis.com

Setelah perintah berhasil dieksekusi, Anda akan melihat pesan yang mirip dengan yang ditampilkan di bawah:

Operation "operations/..." finished successfully.

Alternatif untuk perintah gcloud adalah melalui konsol dengan menelusuri setiap produk atau menggunakan link ini.

Jika ada API yang terlewat, Anda dapat mengaktifkannya kapan saja selama proses penerapan.

Baca dokumentasi untuk mempelajari perintah gcloud dan penggunaannya.

Meng-clone repositori dan menyiapkan setelan lingkungan

Langkah berikutnya adalah meng-clone repositori contoh yang akan kita rujuk di bagian codelab lainnya. Dengan asumsi Anda berada di Cloud Shell, berikan perintah berikut dari direktori utama Anda:

git clone https://github.com/rominirani/yoga-poses-recommender-python

Untuk meluncurkan editor, klik Open Editor di toolbar jendela Cloud Shell. Klik panel menu di pojok kiri atas, lalu pilih File → Open Folder seperti yang ditunjukkan di bawah:

Pilih folder yoga-poses-recommender-python dan Anda akan melihat folder terbuka dengan file berikut seperti yang ditunjukkan di bawah ini:

Sekarang kita perlu menyiapkan variabel lingkungan yang akan kita gunakan. Klik file config.template.yaml dan Anda akan melihat isinya seperti yang ditunjukkan di bawah:

project_id: your-project-id
location: us-central1
gemini_model_name: gemini-1.5-flash-002
embedding_model_name: text-embedding-004
image_generation_model_name: imagen-3.0-fast-generate-002
database: (default)
collection: poses
test_collection: test-poses
top_k: "3"

Perbarui nilai untuk project_id dan location sesuai dengan yang telah Anda pilih saat membuat Project Google Cloud dan wilayah Database Firestore. Idealnya, nilai location harus sama untuk Project Google Cloud dan Database Firestore, misalnya us-central1.

Untuk tujuan codelab ini, kita akan menggunakan nilai yang telah dikonfigurasi sebelumnya (kecuali project_id dan location, yang harus Anda tetapkan sesuai konfigurasi Anda).

Simpan file ini sebagai config.yaml di folder yang sama dengan file config.template.yaml.

Langkah terakhir adalah membuat lingkungan Python yang akan kita gunakan secara lokal dengan semua dependensi Python yang disiapkan untuk kita. Lihat file pyproject.toml yang berisi detail yang sama, yang isinya ditunjukkan di bawah:

dependencies = [
    "datasets>=3.2.0",
    "flask>=3.1.0",
    "google-cloud-aiplatform>=1.78.0",
    "google-cloud-texttospeech>=2.24.0",
    "langchain-community>=0.3.15",
    "langchain-core>=0.3.31",
    "langchain-google-community>=2.0.4",
    "langchain-google-firestore>=0.5.0",
    "langchain-google-vertexai>=2.0.7",
    "pydantic-settings>=2.7.1",
    "pyyaml>=6.0.2",
    "tenacity>=9.0.0",
]

Dependensi ini sudah dikunci versinya di requirements.txt. Singkatnya, kita perlu membuat lingkungan Python virtual dengan dependensi paket Python di requirements.txt yang akan diinstal di lingkungan virtual. Untuk melakukannya, buka Command Palette (Ctrl+Shift+P) di Cloud Shell IDE dan ketik Python: Create Environment. Ikuti beberapa langkah berikutnya untuk memilih file Virtual Environment(venv), Python 3.x interpreter, dan requirements.txt.

Setelah lingkungan dibuat, kita perlu mengaktifkan lingkungan yang dibuat dengan perintah berikut

source .venv/bin/activate

Anda akan melihat (.venv) di konsol. Misalnya, -> (.venv) yourusername@cloudshell:

Bagus! Sekarang kita siap melanjutkan ke tugas penyiapan database Firestore.

3. Menyiapkan Firestore

Cloud Firestore adalah database dokumen serverless yang terkelola sepenuhnya yang akan kita gunakan sebagai backend untuk data aplikasi kita. Data di Cloud Firestore disusun dalam koleksi dokumen.

Inisialisasi Database Firestore

Buka halaman Firestore di konsol Cloud.

Jika Anda belum pernah menginisialisasi database Firestore sebelumnya di project, buat database default dengan mengklik Create Database. Selama pembuatan database, gunakan nilai berikut:

• Mode Firestore: Native.
• Pilih Jenis Lokasi sebagai Region dan pilih lokasi us-central1 untuk wilayah.
• Untuk Aturan Keamanan, gunakan Test rules.
• Buat Database.

Di bagian berikutnya, kita akan menyiapkan dasar-dasar untuk membuat koleksi bernama poses di database Firestore default. Koleksi ini akan menyimpan sampel data (dokumen) atau informasi pose Yoga, yang kemudian akan kita gunakan dalam aplikasi.

Perhatikan bahwa ini adalah Firestore yang sama yang Anda kenal dan sukai jika Anda menggunakan Firebase. Bahkan, Anda dapat membuka instance database yang sama menggunakan Firebase console.

Dengan ini, bagian untuk penyiapan database Firestore telah selesai.

4. Menyiapkan set data pose Yoga

Tugas pertama kita adalah menyiapkan set data Pose Yoga yang akan kita gunakan untuk aplikasi. Kita akan mulai dengan set data Hugging Face yang ada, lalu menyempurnakannya dengan informasi tambahan.

Lihat Set Data Hugging Face untuk Pose Yoga. Perhatikan bahwa meskipun codelab ini menggunakan salah satu set data, Anda dapat menggunakan set data lain dan mengikuti teknik yang sama yang ditunjukkan untuk meningkatkan kualitas set data.

Jika membuka bagian Files and versions, kita bisa mendapatkan file data JSON untuk semua pose.

Kami telah mendownload yoga_poses.json dan memberikan file tersebut kepada Anda. File ini diberi nama yoga_poses_alldata.json dan ada di folder /data.

Kami akan mendemonstrasikan seluruh proses pembuatan deskripsi dan akhirnya pembuatan sematan pada subkumpulan kecil dari beberapa data, sehingga Anda terbiasa dengan prosesnya.

Buka file data/yoga_poses.json di Cloud Shell Editor dan lihat daftar objek JSON, di mana setiap objek JSON mewakili pose Yoga. Kita memiliki total 3 data dan contoh data ditampilkan di bawah:

{
   "name": "Big Toe Pose",
   "sanskrit_name": "Padangusthasana",
   "photo_url": "https://pocketyoga.com/assets/images/full/ForwardBendBigToe.png",
   "expertise_level": "Beginner",
   "pose_type": ["Standing", "Forward Bend"]
 }

Sekarang adalah kesempatan yang tepat bagi kami untuk memperkenalkan Gemini dan cara menggunakan model default itu sendiri untuk membuat kolom description untuknya.

Di Cloud Shell Editor, buka file generate-descriptions.py. Isi file ini ditampilkan di bawah:

import json
import time
import logging
import vertexai
from langchain_google_vertexai import VertexAI
from tenacity import retry, stop_after_attempt, wait_exponential
from settings import get_settings

settings = get_settings()
logging.basicConfig(
    level=logging.INFO, format="%(asctime)s - %(levelname)s - %(message)s"
)
# Initialize Vertex AI SDK
vertexai.init(project=settings.project_id, location=settings.location)
logging.info("Done Initializing Vertex AI SDK")


@retry(
    stop=stop_after_attempt(5),
    wait=wait_exponential(multiplier=1, min=4, max=10),
)
def generate_description(pose_name, sanskrit_name, expertise_level, pose_types):
    """Generates a description for a yoga pose using the Gemini API."""

    prompt = f"""
    Generate a concise description (max 50 words) for the yoga pose: {pose_name}
    Also known as: {sanskrit_name}
    Expertise Level: {expertise_level}
    Pose Type: {", ".join(pose_types)}

    Include key benefits and any important alignment cues.
    """
    try:
        model = VertexAI(model_name=settings.gemini_model_name, verbose=True)
        response = model.invoke(prompt)
        return response
    except Exception as e:
        logging.info(f"Error generating description for {pose_name}: {e}")
        return ""


def add_descriptions_to_json(input_file, output_file):
    """Loads JSON data, adds descriptions, and saves the updated data."""

    with open(input_file, "r") as f:
        yoga_poses = json.load(f)

    total_poses = len(yoga_poses)
    processed_count = 0

    for pose in yoga_poses:
        if pose["name"] != " Pose":
            start_time = time.time()  # Record start time
            pose["description"] = generate_description(
                pose["name"],
                pose["sanskrit_name"],
                pose["expertise_level"],
                pose["pose_type"],
            )
            end_time = time.time()  # Record end time

            processed_count += 1
            end_time = time.time()  # Record end time
            time_taken = end_time - start_time
            logging.info(
                f"Processed: {processed_count}/{total_poses} - {pose['name']} ({time_taken:.2f} seconds)"
            )

        else:
            pose["description"] = ""
            processed_count += 1
            logging.info(
                f"Processed: {processed_count}/{total_poses} - {pose['name']} ({time_taken:.2f} seconds)"
            )
        # Adding a delay to avoid rate limit
        time.sleep(30)

    with open(output_file, "w") as f:
        json.dump(yoga_poses, f, indent=2)


def main():
    # File paths
    input_file = "./data/yoga_poses.json"
    output_file = "./data/yoga_poses_with_descriptions.json"

    # Add descriptions and save the updated JSON
    add_descriptions_to_json(input_file, output_file)


if __name__ == "__main__":
    main()

Aplikasi ini akan menambahkan kolom description baru ke setiap rekaman JSON pose Yoga. Deskripsi akan diperoleh melalui panggilan ke model Gemini, tempat kita akan memberikan perintah yang diperlukan. Kolom ditambahkan ke file JSON dan file baru ditulis ke file data/yoga_poses_with_descriptions.json.

Mari kita bahas langkah-langkah utamanya:

1. Dalam fungsi main(), Anda akan menemukan bahwa fungsi tersebut memanggil fungsi add_descriptions_to_json dan menyediakan file input serta file output yang diharapkan.
2. Fungsi add_descriptions_to_json melakukan hal berikut untuk setiap data JSON, yaitu informasi postingan Yoga:
3. Fungsi ini mengekstrak pose_name, sanskrit_name, expertise_level, dan pose_types.
4. Kemudian, fungsi generate_description dipanggil untuk membuat perintah, lalu class model Langchain VertexAI dipanggil untuk mendapatkan teks respons.
5. Teks respons ini kemudian ditambahkan ke objek JSON.
6. Daftar objek JSON yang diperbarui kemudian ditulis ke file tujuan.

Mari kita jalankan aplikasi ini. Buka jendela terminal baru (Ctrl+Shift+C) dan berikan perintah berikut:

python generate-descriptions.py

Jika Anda diminta memberikan otorisasi, berikan otorisasi tersebut.

Anda akan melihat bahwa aplikasi mulai dieksekusi. Kami telah menambahkan penundaan 30 detik di antara data untuk menghindari kuota batas kecepatan yang mungkin ada di akun Google Cloud baru, jadi harap bersabar.

Contoh proses yang sedang berjalan ditampilkan di bawah ini:

Setelah ketiga rekaman ditingkatkan dengan panggilan Gemini, file data/yoga_poses_with_description.json akan dibuat. Anda dapat melihatnya.

Sekarang kita siap dengan file data dan langkah selanjutnya adalah memahami cara mengisi Database Firestore dengan file tersebut, beserta pembuatan sematan.

5. Mengimpor Data ke Firestore dan membuat Embedding Vektor

Kita memiliki file data/yoga_poses_with_description.json dan sekarang perlu mengisi Database Firestore dengan file tersebut dan yang penting, membuat Sematan Vektor untuk setiap catatan. Embedding Vektor akan berguna nanti saat kita harus melakukan penelusuran kesamaan pada embedding tersebut dengan kueri pengguna yang telah diberikan dalam bahasa alami.

Kita akan menggunakan komponen Langchain Firestore untuk menerapkan proses di atas.

Langkah-langkah untuk melakukannya adalah sebagai berikut:

1. Kita akan mengonversi daftar objek JSON menjadi daftar objek Langchain Document. Setiap dokumen akan memiliki dua atribut: page_content dan metadata. Objek metadata akan berisi seluruh objek JSON yang memiliki atribut seperti name, description, sanskrit_name, dll. page_content akan berupa teks string yang akan menjadi gabungan dari beberapa kolom.
2. Setelah memiliki daftar objek Document, kita akan menggunakan class Langchain FirestoreVectorStore dan khususnya metode from_documents dengan daftar dokumen ini, nama koleksi (kita menggunakan variabel TEST_COLLECTION yang mengarah ke test-poses), class Penyematan Vertex AI, dan detail koneksi Firestore (nama PROJECT_ID dan DATABASE). Tindakan ini akan membuat koleksi dan juga menghasilkan kolom embedding untuk setiap atribut.

Kode untuk import-data.py diberikan di bawah (bagian kode telah dipangkas agar lebih singkat):

... 

def create_langchain_documents(poses):
   """Creates a list of Langchain Documents from a list of poses."""
   documents = []
   for pose in poses:
       # Convert the pose to a string representation for page_content
       page_content = (
           f"name: {pose.get('name', '')}\n"
           f"description: {pose.get('description', '')}\n"
           f"sanskrit_name: {pose.get('sanskrit_name', '')}\n"
           f"expertise_level: {pose.get('expertise_level', 'N/A')}\n"
           f"pose_type: {pose.get('pose_type', 'N/A')}\n"
       ).strip()
       # The metadata will be the whole pose
       metadata = pose

       document = Document(page_content=page_content, metadata=metadata)
       documents.append(document)
   logging.info(f"Created {len(documents)} Langchain documents.")
   return documents

def main():
    all_poses = load_yoga_poses_data_from_local_file(
        "./data/yoga_poses_with_descriptions.json"
    )
    documents = create_langchain_documents(all_poses)
    logging.info(
        f"Successfully created langchain documents. Total documents: {len(documents)}"
    )

    embedding = VertexAIEmbeddings(
        model_name=settings.embedding_model_name,
        project=settings.project_id,
        location=settings.location,
    )

    client = firestore.Client(project=settings.project_id, database=settings.database)

    vector_store = FirestoreVectorStore.from_documents(
        client=client,
        collection=settings.test_collection,
        documents=documents,
        embedding=embedding,
    )
    logging.info("Added documents to the vector store.")


if __name__ == "__main__":
    main()

Mari kita jalankan aplikasi ini. Buka jendela terminal baru (Ctrl+Shift+C) dan berikan perintah berikut:

python import-data.py

Jika semuanya berjalan lancar, Anda akan melihat pesan yang mirip dengan yang di bawah ini:

2025-01-21 14:50:06,479 - INFO - Added documents to the vector store.

Untuk memeriksa apakah data telah berhasil dimasukkan dan penyematan telah dibuat, buka halaman Firestore di Konsol Cloud.

Klik database (default), yang akan menampilkan koleksi test-poses dan beberapa dokumen dalam koleksi tersebut. Setiap dokumen adalah satu pose Yoga.

Klik salah satu dokumen untuk menyelidiki kolom. Selain kolom yang kita impor, Anda juga akan menemukan kolom embedding, yang merupakan kolom Vektor yang telah dibuat secara otomatis untuk Anda melalui class VertexAIEmbeddings Langchain yang kita gunakan, yang di dalamnya kita menyediakan model Embedding Vertex AI text-embedding-004.

Setelah data diupload ke Database Firestore dengan embedding, kita dapat melanjutkan ke langkah berikutnya dan melihat cara melakukan Penelusuran Kemiripan Vektor di Firestore.

6. Mengimpor pose Yoga lengkap ke dalam koleksi Database Firestore

Sekarang kita akan membuat koleksi poses, yang merupakan daftar lengkap 160 pose Yoga, yang telah kita buatkan file impor databasenya yang dapat Anda impor secara langsung. Hal ini dilakukan untuk menghemat waktu di lab. Proses untuk membuat database yang berisi deskripsi dan penyematan sama dengan yang kita lihat di bagian sebelumnya.

Impor database dengan mengikuti langkah-langkah di bawah:

1. Buat bucket di project Anda dengan perintah gsutil yang diberikan di bawah. Ganti variabel <PROJECT_ID> dalam perintah di bawah dengan ID Project Google Cloud Anda.

gsutil mb -l us-central1 gs://<PROJECT_ID>-my-bucket

2. Setelah bucket dibuat, kita perlu menyalin ekspor database yang telah kita siapkan ke dalam bucket ini, sebelum kita dapat mengimpornya ke dalam database Firebase. Gunakan perintah yang diberikan di bawah:

gsutil cp -r gs://yoga-database-firestore-export-bucket/2025-01-27T05:11:02_62615  gs://<PROJECT_ID>-my-bucket

Setelah memiliki data yang akan diimpor, kita dapat melanjutkan ke langkah terakhir untuk mengimpor data ke database Firebase (default) yang telah kita buat.

3. Gunakan perintah gcloud yang diberikan di bawah:

gcloud firestore import gs://<PROJECT_ID>-my-bucket/2025-01-27T05:11:02_62615

Impor akan memerlukan waktu beberapa detik dan setelah siap, Anda dapat memvalidasi database dan koleksi Firestore dengan membuka https://console.cloud.google.com/firestore/databases, memilih database default dan koleksi poses seperti yang ditunjukkan di bawah:

Tindakan ini menyelesaikan pembuatan koleksi Firestore yang akan kita gunakan dalam aplikasi.

7. Melakukan Penelusuran Kemiripan Vektor di Firestore

Untuk melakukan penelusuran Kemiripan Vektor, kita akan mengambil kueri dari pengguna. Contoh kueri ini adalah "Suggest me some exercises to relieve back pain".

Lihat file search-data.py. Fungsi utama yang perlu diperhatikan adalah fungsi penelusuran, yang ditampilkan di bawah. Secara umum, kode ini membuat class embedding yang akan digunakan untuk membuat embedding untuk kueri pengguna. Kemudian, class FirestoreVectorStore digunakan untuk memanggil fungsi similarity_search.

def search(query: str):
    """Executes Firestore Vector Similarity Search"""
    embedding = VertexAIEmbeddings(
        model_name=settings.embedding_model_name,
        project=settings.project_id,
        location=settings.location,
    )

    client = firestore.Client(project=settings.project_id, database=settings.database)

    vector_store = FirestoreVectorStore(
        client=client, collection=settings.collection, embedding_service=embedding
    )

    logging.info(f"Now executing query: {query}")
    results: list[Document] = vector_store.similarity_search(
        query=query, k=int(settings.top_k), include_metadata=True
    )
    for result in results:
        print(result.page_content)

Sebelum menjalankan ini dengan beberapa contoh kueri, Anda harus membuat indeks komposit Firestore terlebih dahulu, yang diperlukan agar kueri penelusuran Anda berhasil. Jika Anda menjalankan aplikasi tanpa membuat indeks, error yang menunjukkan bahwa Anda harus membuat indeks terlebih dahulu akan ditampilkan dengan perintah untuk membuat indeks terlebih dahulu.

Perintah gcloud untuk membuat indeks gabungan ditampilkan di bawah:

gcloud firestore indexes composite create --project=<YOUR_PROJECT_ID> --collection-group=poses --query-scope=COLLECTION --field-config=vector-config='{"dimension":"768","flat": "{}"}',field-path=embedding

Indeks akan memerlukan waktu beberapa menit untuk selesai karena ada lebih dari 150 catatan yang ada dalam database. Setelah selesai, Anda dapat melihat indeks melalui perintah yang ditampilkan di bawah:

gcloud firestore indexes composite list

Anda akan melihat indeks yang baru saja Anda buat dalam daftar.

Coba perintah berikut sekarang:

python search-data.py --prompt "Recommend me some exercises for back pain relief"

Anda akan mendapatkan beberapa rekomendasi. Contoh eksekusi ditampilkan di bawah:

2025-01-21 15:48:51,282 - INFO - Now executing query: Recommend me some exercises for back pain relief
name: Supine Spinal Twist Pose
description: A gentle supine twist (Supta Matsyendrasana), great for beginners.  Releases spinal tension, improves digestion, and calms the nervous system.  Keep shoulders flat on the floor and lengthen the spine.

sanskrit_name: Supta Matsyendrasana
expertise_level: Beginner
pose_type: ['Supine', 'Twist']
name: Cow Pose
description: Cow Pose (Bitilasana) is a gentle backbend, stretching the chest, shoulders, and abdomen.  Maintain a neutral spine, lengthen the tailbone, and avoid hyperextension.  Benefits include improved posture and stress relief.

sanskrit_name: Bitilasana
expertise_level: Beginner
pose_type: ['Arm Leg Support', 'Back Bend']
name: Locust I Pose
description: Locust Pose I (Shalabhasana A) strengthens the back, glutes, and shoulders.  Lie prone, lift chest and legs simultaneously, engaging back muscles.  Keep hips grounded and gaze slightly forward.

sanskrit_name: Shalabhasana A
expertise_level: Intermediate
pose_type: ['Prone', 'Back Bend']

Setelah ini berfungsi, kita telah memahami cara mengoperasikan Database Vektor Firestore untuk mengupload data, membuat embedding, dan melakukan Penelusuran Kemiripan Vektor. Sekarang kita dapat membuat aplikasi web yang akan mengintegrasikan penelusuran vektor ke frontend web.

8. Aplikasi Web

Aplikasi web Python Flask tersedia dalam file main.py dan file HTML frontend ada di templates/index.html.

Sebaiknya Anda melihat kedua file tersebut. Mulai dengan file main.py yang berisi handler /search, yang mengambil perintah yang telah diteruskan dari file index.html HTML front-end. Kemudian, metode penelusuran dipanggil, yang melakukan penelusuran Kesamaan Vektor yang kita lihat di bagian sebelumnya.

Respons kemudian dikirim kembali ke index.html dengan daftar rekomendasi. Kemudian, index.html menampilkan rekomendasi sebagai kartu yang berbeda.

Jalankan aplikasi secara lokal

Buka jendela terminal baru (Ctrl+Shift+C) atau jendela terminal yang ada, lalu berikan perintah berikut:

python main.py

Contoh eksekusi ditampilkan di bawah:

 * Serving Flask app 'main'
 * Debug mode: on
2025-01-21 16:02:37,473 - INFO - WARNING: This is a development server. Do not use it in a production deployment. Use a production WSGI server instead.
 * Running on all addresses (0.0.0.0)
 * Running on http://127.0.0.1:8080
 * Running on http://10.88.0.4:8080
2025-01-21 16:02:37,473 - INFO - Press CTRL+C to quit
2025-01-21 16:02:37,474 - INFO -  * Restarting with stat
2025-01-21 16:02:41,462 - WARNING -  * Debugger is active!
2025-01-21 16:02:41,484 - INFO -  * Debugger PIN: 440-653-555

Setelah berjalan dan beroperasi, buka URL beranda aplikasi dengan mengklik tombol Web Preview yang ditampilkan di bawah:

File index.html yang ditayangkan akan ditampilkan seperti yang ditunjukkan di bawah ini:

Berikan contoh kueri (Contoh : Provide me some exercises for back pain relief), lalu klik tombol Search. Tindakan ini akan mengambil beberapa rekomendasi dari database. Anda juga akan melihat tombol Play Audio, yang akan membuat aliran audio berdasarkan deskripsi, yang dapat Anda dengar secara langsung.

9. (Opsional) Men-deploy ke Google Cloud Run

Langkah terakhir kita adalah men-deploy aplikasi ini ke Google Cloud Run. Perintah deployment ditampilkan di bawah. Pastikan sebelum men-deploy-nya, Anda mengganti nilai untuk variabel (<<YOUR_PROJECT_ID>>) dengan nilai yang spesifik untuk project Anda. Ini adalah nilai yang dapat Anda ambil dari file config.yaml.

gcloud run deploy yogaposes --source . \
  --port=8080 \
  --allow-unauthenticated \
  --region=us-central1 \
  --platform=managed  \
  --project=<<YOUR_PROJECT_ID>> \
  --env-vars-file=config.yaml

Jalankan perintah di atas dari folder root aplikasi. Anda juga dapat diminta untuk mengaktifkan Google Cloud API dan memberikan konfirmasi untuk berbagai izin. Jika demikian, lakukanlah.

Proses deployment akan memerlukan waktu sekitar 5-7 menit hingga selesai, jadi bersabarlah.

Setelah berhasil di-deploy, output deployment akan memberikan URL layanan Cloud Run. Formatnya adalah:

Service URL: https://yogaposes-<<UNIQUEID>.us-central1.run.app

Buka URL publik tersebut dan Anda akan melihat aplikasi web yang sama telah di-deploy dan berjalan dengan sukses.

Anda juga dapat membuka Cloud Run dari konsol Google Cloud dan Anda akan melihat daftar layanan di Cloud Run. Layanan yogaposes harus menjadi salah satu layanan (jika bukan satu-satunya) yang tercantum di sana.

Anda dapat melihat detail layanan seperti URL, konfigurasi, log, dan lainnya dengan mengklik nama layanan tertentu (yogaposes dalam kasus ini).

Dengan demikian, pengembangan dan deployment aplikasi web pemberi rekomendasi pose Yoga di Cloud Run telah selesai.

10. Selamat

Selamat, Anda telah berhasil membuat aplikasi yang mengupload set data ke Firestore, membuat embedding, dan melakukan Penelusuran Kemiripan Vektor berdasarkan kueri pengguna.

Dokumen referensi

• Firestore
• Firestore - Menelusuri dengan Embedding Vektor
• Mengelola Indeks di Firestore
• Cloud Run
• Langchain Document Loader untuk Firestore
• Langchain Vector Store untuk Firestore