Ang Aking 4-na-Linggong Journey: Mula sa Frontend Upgrades hanggang Docker Struggles at Breakthroughs

Update (2026): Ang WordPress frontend at Docker deployment na inilalarawan sa ibaba ay sinaunang kasaysayan na. Ang site ay tumatakbo na ngayon sa Next.js, at si Sydney ay binuo mula sa simula gamit ang Supabase pgvector at Claude. Patuloy na nagco-code, patuloy na natututo.

Kausapin si Sydney →

---

Orihinal na post mula Mar 2024 na napreserba sa ibaba para sa context.

Hindi ako nag-publish ng kahit anong post sa nakalipas na 4 na linggo. Baka iniisip mo kung ano ang nangyari. Naging tamad ba ako at tumigil sa pag-aaral? Well medyo, pumunta kami sa isang trip kasama ang pamilya ko at ibang kaibigan sa isang weekend.

Ang post ngayon ay magiging maikli lang. Ibabahagi ko kung ano ang natutunan ko sa nakalipas na 4 na linggo. Pero sino ang may pake? Well, totoo na walang mag-ca-care kaya ang post na ito ay pangunahing para sa akin para masubaybayan ang progress ko at siguro isa pang tao (sinuman ka man :D.)

TL;DR: Ang "Just in time learning" ay totoo at nararanasan ko ito.

Napabuting front end

Kung pumunta ka sa site ko ilang buwan na ang nakakaraan, mapapansin mo na ngayon, iba na ang itsura ng site, mas moderno, at mas madaling i-navigate (sana). Ginamit ko ang Github Copilot at ChatGPT4 para hingin sa makina na tulungan akong i-improve ang look and feel ng site. Ang resulta ay mahigit 300 lines ng CSS codes, na karamihan hindi ko alam kung paano isulat. Ito ang sneak peek:

/* 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);
\}

Gayundin kapag binisita ko ang chatbot page, ang "look and feel" ay katulad ng natitirang parte ng site. Ang "box" para i-enter ang tanong mo ay nandyan na sa itaas, above the fold at ang conversation box ay patuloy na luma-expand habang luma-expand ang usapan. Hindi ko makapaniwala na hindi ko ito nagawa nang mas maaga. At pasensya na sa lahat ng bumisita sa page na iyon dati.

Si Sydney ang chatbot ay may bagong vector store at improved query translation

Ang buong proseso mula sa pag-export ng published content mula sa Wordpress hanggang HTML clean-up, chunking, pag-generate ng embeddings, at pag-store nito sa vector store ay nakakagulat na madali at mabilis kapag nagawa mo na ito ng ilang beses.

Pinalitan ko ng bagong vector store (gumagamit pa rin ng FAISS), na may ibang chunking methodology (ngayon na may medyo mas malaking chunk size at overlap.)

Ang query ng user ay tina-transform gamit ang multi-query retriever mula sa Langchain. Nakita ko na ang sagot ng chatbot gamit ang retriever na ito ay mas comprehensive at nuanced kaysa sa dating retriever.

# 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
)

Ang pakikibaka sa pag-push ng Docker image sa GCP Artifact ay naging biyaya pala

Sa kakaibang dahilan, nagsimula akong magkaroon ng problema sa pag-push ng Docker Image sa GCP Artifact mga isang buwan na ang nakakaraan. Marami akong sinubukang paraan para resolbahin ito pero hindi ko magawa. Ang mga buwan hanggang sa puntong iyon ay ganap na okay.

Dahil doon, napilitan akong mag-isip ng ibang paraan para i-deploy ang app, isang paraan na hindi kasangkot ang pag-push ng image sa Artifact. Doon ko natuklasan ang continuous deployment sa GCP Cloud Run gamit ang repo sa Github.

Sa kung paanong paraan, sa parehong panahon, nanood ako ng online tutorial at ginamit nila ang poetry. Wala akong idea kung ano ito kaya tinanong ko si chatGPT na ipaliwanag ito sa akin. Ito pala ay isang magandang tool para i-manage ang dependencies kaya ginagamit ko na ito ngayon :). Dahil sa exploration na ito, natutunan ko rin ang higit pa tungkol sa pag-setup ng virtual environment para sa bawat project, at nagsimula na akong gamitin ito sa bawat proyekto.

Kaya ngayon na may pag-setup ng bagong virtual environment, paggamit ng poetry para i-manage ang dependencies, at paggamit ng continuous deployment mula sa GCP Cloud Run, mas maayos na ang workflow ko. Ang pag-deploy ng bagong update sa chatbot ay mas madali at mas mabilis din, kapag na-test ko ito nang maigi locally.

Ano ang ginagawa ko ngayon?

Sa ngayon, gumagawa ako ng research assistant gamit ang Langchain. Ang open-source code mula sa Langchain at GPT-Researcher (salamat sa inyong dalawa!) ay sapat na malinaw at nagagawa ko itong gumana locally. Gayunpaman, ang pag-deploy nito para gumana sa production environment ay medyo mahirap, lalo na ang parte tungkol sa content scraping. Partikular, ang CPU usage ay masyado nang mataas kapag tine-test ko ang application sa Docker Container locally.

Mayroon din akong ilang ideya kung paano i-improve ang research assistant approach na ibinahagi ng GPT-researcher at Langchain pero kailangan kong pagsikapan sila para maisakatuparan. Ibabahagi ko kapag handa na.

Mga saloobin mo?

Bawat linya ng code, bawat oras ng troubleshooting, at bawat breakthrough ay isang stepping stone. At habang ang journey na ito ay sa akin, sana mag-spark ito ng mga ideya, mag-offer ng insights, o simpleng maging entertaining. Anong mga hamon ang naranasan mo sa iyong tech endeavors? I-drop ang mga kwento o tanong mo sa ibaba – mag-navigate tayong magkasama sa mga digital waters na ito.

Maraming salamat,

Chandler

P.S: kung gumagawa ka ng RAG application, napaka-useful ng "RAG from scratch" series mula sa Langchain.