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

1. Pengantar

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

Melalui codelab ini, Anda akan menggunakan pendekatan langkah demi langkah sebagai berikut:

1. Manfaatkan 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 gabungan di Firestore untuk mengaktifkan penelusuran Vektor.
5. Gunakan Penelusuran Vektor di Aplikasi Flask yang menggabungkan semuanya seperti yang ditunjukkan di bawah:

Yang akan Anda lakukan

• Buat Desain, Build, dan Deploy aplikasi web yang menggunakan Vector Search 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 Loader Dokumen Langchain untuk Firestore guna memuat data dari set data yang ditingkatkan dari Hugging Face ke Firestore beserta Vector Embedding
• Cara menggunakan Penyimpanan Vektor Langchain untuk Firestore guna 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 level (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 Aktifkan Cloud Shell di bagian atas konsol Google Cloud.

4. Setelah terhubung ke Cloud Shell, Anda akan memeriksa bahwa Anda sudah diautentikasi dan project 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. Tindakan ini mungkin memerlukan waktu beberapa menit, jadi harap bersabar.

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 ini:

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 referensikan di bagian codelab lainnya. Dengan asumsi bahwa Anda berada di Cloud Shell, berikan perintah berikut dari direktori utama:

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

Untuk meluncurkan editor, klik Buka Editor di toolbar jendela Cloud Shell. Klik panel menu di sudut kiri atas, lalu pilih File → Buka 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 digunakan. Klik file config.template.yaml dan Anda akan melihat konten seperti yang ditunjukkan di bawah ini:

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 Anda pilih saat membuat Project Google Cloud dan wilayah Database Firestore. Idealnya, kita ingin nilai location sama untuk Project Google Cloud dan Database Firestore, misalnya us-central1.

Untuk tujuan codelab ini, kita akan menggunakan nilai yang telah dikonfigurasi sebelumnya (kecuali tentu saja untuk project_id dan location, yang perlu Anda tetapkan sesuai konfigurasi Anda.

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

Langkah terakhir sekarang 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 untuk hal yang sama, yang kontennya ditampilkan 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 terkunci versi di requirements.txt. Singkatnya, kita perlu membuat lingkungan Python virtual dengan dependensi paket Python di requirements.txt untuk diinstal di lingkungan virtual. Untuk melakukannya, buka Command Palette (Ctrl+Shift+P) di IDE Cloud Shell 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 harus 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 untuk melanjutkan ke tugas menyiapkan database Firestore.

3. Menyiapkan Firestore

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

Inisialisasi Database Firestore

Buka halaman Firestore di konsol Cloud.

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

• Mode Firestore: Native.
• Lokasi: Gunakan setelan lokasi default.
• Untuk Aturan Keamanan, pilih 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 data sampel (dokumen) atau informasi pose Yoga, yang kemudian akan kita gunakan dalam aplikasi.

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

Dengan ini, bagian untuk menyiapkan 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 memulai dengan set data Hugging Face yang ada, lalu meningkatkannya dengan informasi tambahan.

Lihat Set Data Hugging Face untuk Pose Yoga. Perhatikan bahwa meskipun codelab ini menggunakan salah satu set data, Anda sebenarnya 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 membuat penyematan pada subset yang lebih kecil dari beberapa kumpulan data, sehingga Anda terbiasa dengan prosesnya.

Buka file data/yoga_poses.json di Cloud Shell Editor dan lihat daftar objek JSON, dengan setiap objek JSON mewakili postur 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 bagus bagi kita 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 kumpulan data JSON postur Yoga. Model ini akan mendapatkan deskripsi melalui panggilan ke model Gemini, tempat kami 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 dan 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. Fungsi ini memanggil fungsi generate_description yang membuat perintah, lalu memanggil class model Langchain VertexAI 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. Luncurkan jendela terminal baru (Ctrl+Shift+C) dan berikan perintah berikut:

python generate-descriptions.py

Jika Anda dimintai otorisasi, harap berikan otorisasi tersebut.

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

Contoh operasi yang sedang berlangsung ditampilkan di bawah ini:

Setelah ketiga data tersebut 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 penyematan.

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 terpenting, membuat Penyematan Vektor untuk setiap data. Embedding Vektor akan berguna nanti saat kita harus melakukan penelusuran kemiripan 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 Dokumen Langchain. 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 Vertex AI Embedding, dan detail koneksi Firestore (nama PROJECT_ID dan DATABASE). Tindakan ini akan membuat koleksi dan juga akan menghasilkan kolom embedding untuk setiap atribut.

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

... 

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. Luncurkan 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 pesan di bawah ini:

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

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

Klik database (default), tindakan ini 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 kami impor, Anda juga akan menemukan kolom embedding, yang merupakan kolom Vektor yang telah dibuat secara otomatis untuk Anda melalui class VertexAIEmbeddings Langchain yang kami gunakan, tempat kami menyediakan model Vertex AI Embedding text-embedding-004.

Setelah memiliki data yang diupload ke Database Firestore dengan penyematan yang sudah diterapkan, 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 dari 160 pose Yoga, yang file impor database-nya telah kita buat dan 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 berikut:

1. Buat bucket di project Anda dengan perintah gsutil yang diberikan di bawah. Ganti variabel <PROJECT_ID> dalam perintah di bawah dengan Project ID 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 bucket ini, sebelum dapat mengimpornya ke 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 ini:

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

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

Tindakan ini akan menyelesaikan pembuatan koleksi Firestore yang akan kita gunakan di 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 dilihat adalah fungsi penelusuran, yang ditampilkan di bawah. Pada tingkat tinggi, class ini membuat class penyematan yang akan digunakan untuk membuat penyematan untuk kueri pengguna. Kemudian, class ini menggunakan class FirestoreVectorStore untuk memanggil fungsi similarity_search-nya.

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 menjalankannya dengan beberapa contoh kueri, Anda harus membuat indeks komposit Firestore terlebih dahulu, yang diperlukan agar kueri penelusuran berhasil. Jika Anda menjalankan aplikasi tanpa membuat indeks, error yang menunjukkan bahwa Anda perlu 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 data yang ada di database. Setelah selesai, Anda dapat melihat indeks melalui perintah yang ditampilkan di bawah ini:

gcloud firestore indexes composite list

Anda akan melihat indeks yang baru saja dibuat 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 operasi ditampilkan di bawah ini:

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 berhasil melakukannya, sekarang kita telah memahami cara menggunakan Database Vektor Firestore untuk mengupload data, membuat penyematan, 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. Mulailah terlebih dahulu dengan file main.py yang berisi pengendali /search, yang mengambil perintah yang telah diteruskan dari file index.html HTML frontend. Tindakan ini kemudian akan memanggil metode penelusuran, yang melakukan penelusuran Kesamaan Vektor yang kita lihat di bagian sebelumnya.

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

Menjalankan aplikasi secara lokal

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

python main.py

Contoh eksekusi ditampilkan di bawah ini:

 * 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 siap dan berjalan, buka URL beranda aplikasi, dengan mengklik tombol Pratinjau Web yang ditampilkan di bawah:

Tindakan ini akan menampilkan file index.html yang ditayangkan seperti yang ditunjukkan di bawah ini:

Berikan contoh kueri (Contoh : Provide me some exercises for back pain relief) dan klik tombol Search. Tindakan ini akan mengambil beberapa rekomendasi dari database. Anda juga akan melihat tombol Play Audio, yang akan menghasilkan streaming 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-deploynya, 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 mungkin juga diminta untuk mengaktifkan Google Cloud API, berikan konfirmasi Anda untuk berbagai izin.

Proses deployment akan memerlukan waktu sekitar 5-7 menit, jadi harap bersabar.

Setelah berhasil di-deploy, output deployment akan memberikan URL layanan Cloud Run. URL tersebut akan memiliki format:

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

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

Anda juga dapat membuka Cloud Run dari konsol Google Cloud dan 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 kami).

Dengan demikian, pengembangan dan deployment aplikasi web perekomendasikan postur Yoga di Cloud Run telah selesai.

10. Selamat

Selamat, Anda telah berhasil mem-build aplikasi yang mengupload set data ke Firestore, membuat penyematan, 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