Perjalanan 4 Minggu Saya: Dari Upgrade Frontend ke Perjuangan dan Terobosan Docker

Update (2026): Frontend WordPress dan deployment Docker yang dijelaskan di bawah ini sudah jadi sejarah kuno. Situs sekarang berjalan di Next.js, dan Sydney telah dibangun ulang dari nol dengan Supabase pgvector dan Claude. Masih coding, masih belajar.

Tanya Sydney →

---

Postingan asli dari Mar 2024 dipertahankan di bawah untuk konteks.

Saya belum mempublikasikan postingan apa pun selama 4 minggu terakhir. Kamu mungkin bertanya-tanya apa yang terjadi. Apakah saya malas dan berhenti belajar? Yah, agak sedikit, saya memang pergi berlibur dengan keluarga dan teman-teman selama satu akhir pekan.

Postingan hari ini akan singkat saja. Saya akan berbagi apa yang telah saya pelajari selama 4 minggu terakhir. Tapi siapa yang peduli? Memang benar tidak ada yang akan peduli jadi postingan ini terutama untuk saya menjaga catatan kemajuan saya dan saya rasa satu orang lagi (siapa pun kamu :D.)

TL;DR: "Just in time learning" itu nyata dan saya menjalaninya.

Front end yang diperbaiki

Kalau kamu datang ke situs saya beberapa bulan lalu, kamu akan melihat bahwa sekarang, situsnya terlihat berbeda, lebih modern, dan lebih mudah dinavigasi (semoga). Saya menggunakan Github Copilot dan ChatGPT4 untuk meminta mesin membantu memperbaiki tampilan situs. Hasilnya lebih dari 300 baris kode CSS, yang sebagian besar saya tidak tahu cara menulisnya. Ini cuplikannya:

/* Defining CSS variables for common values */
:root \{
    --main-font: 'Poppins', sans-serif; /* Main font for the website */
    --primary-color: #003366; /* Primary color for text */
    --accent-color: #4da6ff; /* Accent color for links and buttons */
    --background-color: #FAFAFA; /* Background color for the body and some elements */
    --text-color: #333333; /* Main text color */
    --hover-color: #4da6ff; /* Color for hover effects */
\}

/* Applying the main font and color to various elements */
body, button, input, select, textarea, h1, h2, h3, h4, h5, h6, .nav-menu, .nav-menu a, .widget-title, .page-numbers.current,
#primary-menu .menu-item a, #primary-menu .sub-menu .menu-item a, .site-title a, .primary-navigation a, .widgettitle, .simpletoc-title \{
    font-family: var(--main-font);
    color: var(--text-color);
\}

Juga ketika saya mengunjungi halaman chatbot, "tampilan dan nuansa"-nya mirip dengan sisa situs. "Kotak" untuk memasukkan pertanyaan ada di atas, above the fold dan kotak percakapan terus membesar seiring percakapan berlangsung. Saya tidak percaya saya tidak menyelesaikan ini lebih cepat. Dan maaf untuk semua yang mengunjungi halaman itu sebelumnya.

Sydney si chatbot punya vector store baru dan query translation yang diperbaiki

Seluruh proses dari mengekspor konten yang dipublikasikan dari Wordpress hingga pembersihan HTML, chunking, menghasilkan embedding, dan menyimpannya di vector store ternyata sangat mudah dan cepat begitu kamu sudah melakukannya beberapa kali.

Saya mengganti dengan vector store baru (masih menggunakan FAISS), dengan metodologi chunking yang berbeda (kali ini dengan ukuran chunk dan overlap yang sedikit lebih besar.)

Query pengguna ditransformasi menggunakan multi-query retriever dari Langchain. Saya menemukan jawaban chatbot menggunakan retriever ini lebih komprehensif dan bernuansa dibanding retriever sebelumnya.

# Set up vector store and llm
embeddings = OpenAIEmbeddings()
vectorstore = FAISS.load_local("faiss_index", embeddings)
llm = ChatOpenAI(model_name="gpt-3.5-turbo-0125", temperature=0)

# Set up retriever
retriever_from_llm = MultiQueryRetriever.from_llm(
    retriever=vectorstore.as_retriever(), llm=llm
)

Perjuangan mendorong Docker image ke GCP Artifact ternyata menjadi berkah

Karena alasan aneh, saya mulai kesulitan mendorong Docker Image ke GCP Artifact sekitar 1 bulan lalu. Saya mencoba banyak cara untuk menyelesaikannya tapi tidak bisa. Bulan-bulan sebelumnya sepenuhnya baik-baik saja.

Karena itu, saya dipaksa memikirkan cara lain untuk men-deploy aplikasi, yang tidak melibatkan mendorong image ke Artifact. Begitulah saya menemukan continuous deployment di GCP Cloud Run menggunakan repo di Github.

Entah bagaimana di waktu yang sama, saya menonton tutorial online dan mereka menggunakan poetry. Saya tidak tahu apa itu jadi saya bertanya ke chatGPT untuk menjelaskannya. Ternyata itu alat yang bagus untuk mengelola dependensi jadi sekarang saya menggunakannya :). Karena eksplorasi ini, saya juga belajar lebih banyak tentang menyiapkan virtual environment untuk setiap proyek, dan mulai menggunakannya untuk setiap proyek.

Jadi sekarang dengan menyiapkan virtual environment baru, menggunakan poetry untuk mengelola dependensi, dan memanfaatkan continuous deployment dari GCP Cloud Run, workflow saya jauh lebih lancar. Men-deploy update baru ke chatbot juga jauh lebih mudah dan cepat, setelah saya mengujinya secara menyeluruh di lokal.

Apa yang sedang saya kerjakan sekarang?

Saat ini, saya sedang mengerjakan membangun dan men-deploy research assistant menggunakan Langchain. Kode open-source dari Langchain dan GPT-Researcher (terima kasih keduanya!) cukup jelas dan saya bisa membuatnya berjalan secara lokal. Namun, men-deploy-nya untuk bekerja di lingkungan produksi ternyata cukup sulit, terutama bagian tentang content scraping. Khususnya, penggunaan CPU terlalu tinggi ketika saya menguji aplikasi di Docker Container secara lokal.

Saya juga punya beberapa ide tentang bagaimana meningkatkan pendekatan research assistant yang dibagikan oleh GPT-researcher dan Langchain tapi saya perlu mengerjakannya untuk mewujudkannya. Saya akan berbagi lebih banyak ketika sudah siap.

Pendapat kamu?

Setiap baris kode, setiap jam troubleshooting, dan setiap terobosan telah menjadi batu loncatan. Dan meskipun perjalanan ini milik saya, saya berharap ini memicu ide, memberikan wawasan, atau sekadar menghibur. Tantangan apa yang kamu hadapi dalam usaha teknologimu? Tulis cerita atau pertanyaanmu di bawah — mari kita navigasi perairan digital ini bersama.

Salam,

Chandler

P.S: kalau kamu sedang membangun aplikasi RAG, saya menemukan seri "RAG from scratch" dari Langchain sangat berguna.