Minha jornada de 4 semanas: de upgrades de frontend às lutas e avanços com Docker

Atualização (2026): O frontend WordPress e o deployment com Docker descritos abaixo são história antiga. O site agora roda em Next.js, e Sydney foi reconstruído do zero com Supabase pgvector e Claude. Ainda programando, ainda aprendendo.

Pergunte à Sydney →

---

Post original de março de 2024 preservado abaixo para contexto.

Não publiquei nenhum post nas últimas 4 semanas. Você deve estar se perguntando o que aconteceu. Fiquei preguiçoso e parei de aprender? Bem, mais ou menos — fiz uma viagem com minha família e outros amigos num fim de semana.

O post de hoje vai ser curto. Vou compartilhar o que aprendi nas últimas 4 semanas. Mas quem se importa? Bem, é verdade que ninguém vai se importar, então este post é principalmente para mim acompanhar meu progresso e acho que para mais uma pessoa (seja lá quem você for :D).

TL;DR: "Aprendizado just in time" é real e estou vivendo isso.

Frontend melhorado

Se você veio ao meu site alguns meses atrás, vai notar que agora o site parece diferente, mais moderno e mais fácil de navegar (espero). Usei o Github Copilot e o ChatGPT4 para pedir à máquina que ajudasse a melhorar a aparência e a sensação do site. O resultado são mais de 300 linhas de código CSS, a maioria das quais não sei como escrever. Aqui está uma prévia:

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

Além disso, quando visito a página do chatbot, a "aparência e sensação" é similar ao resto do site. A "caixa" para digitar sua pergunta está bem ali, acima da dobra, e a caixa de conversa continua se expandindo conforme a conversa se expande. Não consigo acreditar que não fiz isso antes. E desculpem a todos que visitaram essa página antes.

Sydney, o chatbot, tem um novo vector store e tradução de consulta melhorada

Todo o processo de exportar conteúdo publicado do Wordpress para HTML, limpar o HTML, fazer chunking, gerar embeddings e armazená-los em um vector store é surpreendentemente fácil e rápido depois que você já fez algumas vezes.

Troquei por um novo vector store (ainda usando FAISS), com uma metodologia de chunking diferente (desta vez com um tamanho de chunk e sobreposição um pouco maiores).

A consulta do usuário é transformada usando o multi-query retriever do Langchain. Achei que as respostas do chatbot usando este retriever são mais abrangentes e nuançadas do que o retriever anterior.

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

A luta para enviar a imagem Docker para o GCP Artifact acabou sendo uma bênção

Por alguma razão estranha, comecei a ter problemas para enviar a imagem Docker para o GCP Artifact há cerca de 1 mês. Tentei muitas formas de resolver, mas não consegui. Os meses anteriores estavam completamente bem.

Por causa disso, fui forçado a pensar em outra forma de fazer o deploy do app, uma que não envolvesse enviar a imagem para o Artifact. Foi assim que descobri o deployment contínuo no GCP Cloud Run usando o repositório no Github.

De alguma forma, ao mesmo tempo, assisti a um tutorial online e eles usaram poetry. Não tinha ideia do que era, então pedi ao chatGPT para me explicar. Acabou sendo uma ótima ferramenta para gerenciar dependências, então agora estou usando :). Por causa dessa exploração, aprendi mais sobre configurar um ambiente virtual para cada projeto também, e comecei a usá-lo para cada projeto.

Então agora, com a configuração de um novo ambiente virtual, usando poetry para gerenciar dependências e aproveitando o deployment contínuo do GCP Cloud Run, meu fluxo de trabalho é muito mais tranquilo. Fazer o deploy de uma nova atualização no chatbot também é muito mais fácil e rápido, uma vez que o testo completamente localmente.

No que estou trabalhando agora?

Agora, estou trabalhando na construção e implantação de um assistente de pesquisa usando Langchain. O código aberto do Langchain e do GPT-Researcher (obrigado a ambos!) é claro o suficiente e consigo fazer funcionar localmente. No entanto, fazer o deploy para funcionar em ambiente de produção acaba sendo bastante difícil, especialmente a parte de scraping de conteúdo. Especificamente, o uso de CPU é muito alto quando testo o aplicativo no Docker Container localmente.

Também tenho algumas ideias sobre como melhorar a abordagem de assistente de pesquisa compartilhada pelo GPT-researcher e Langchain, mas preciso trabalhar nelas para concretizá-las. Compartilharei mais quando estiverem prontas.

Seus pensamentos?

Cada linha de código, cada hora de solução de problemas e cada avanço foi um trampolim. E embora esta jornada seja minha, espero que desperte ideias, ofereça insights ou simplesmente entretenha. Que desafios você enfrentou em suas empreitadas tecnológicas? Deixe suas histórias ou perguntas abaixo — vamos navegar juntos por essas águas digitais.

Abraços,

Chandler

P.S: se você está construindo um aplicativo RAG, acho a série "RAG from scratch" do Langchain super útil.