Meine 4-wöchige Reise: Vom Frontend-Upgrade zu Docker-Kämpfen und Durchbrüchen

Update (2026): Das WordPress-Frontend und das Docker-Deployment, die unten beschrieben werden, sind längst Geschichte. Die Website läuft jetzt auf Next.js, und Sydney wurde von Grund auf neu aufgebaut mit Supabase pgvector und Claude. Noch immer am Coden, noch immer am Lernen.

Sydney fragen →

---

Originalpost von März 2024 unten zur Nachvollziehbarkeit erhalten.

Ich habe in den letzten 4 Wochen keine Beiträge veröffentlicht. Du fragst dich vielleicht, was passiert ist. Bin ich faul geworden und habe aufgehört zu lernen? Na ja, irgendwie, ich war an einem Wochenende mit meiner Familie und anderen Freunden auf einem Ausflug.

Der heutige Beitrag wird ein kurzer sein. Ich werde teilen, was ich in den letzten 4 Wochen gelernt habe. Wen interessiert das? Nun, es stimmt, dass es niemanden interessieren wird, also ist dieser Beitrag hauptsächlich für mich, um meinen Fortschritt festzuhalten, und ich schätze, für eine weitere Person (wer auch immer du bist :D.)

TL;DR: „Just-in-time-Lernen" ist real und ich lebe es.

Verbessertes Frontend

Wenn du vor ein paar Monaten auf meine Website gekommen bist, würdest du jetzt feststellen, dass die Website anders aussieht, moderner und einfacher zu navigieren (ich hoffe). Ich verwendete Github Copilot und ChatGPT4, um die Maschine zu bitten, das Aussehen und die Handhabung der Website zu verbessern. Das Ergebnis sind mehr als 300 Zeilen CSS-Code, von denen die meisten ich nicht weiß, wie man sie schreibt. Hier ist ein kurzer Einblick:

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

Außerdem hat die Chatbot-Seite jetzt dasselbe „Aussehen und Gefühl" wie der Rest der Website. Das Eingabefeld für deine Frage ist direkt oben, im sichtbaren Bereich, und das Konversationsfeld wächst mit dem Gespräch. Ich konnte nicht glauben, dass ich das nicht früher erledigt hatte. Und tut mir leid an alle, die diese Seite vorher besucht haben.

Sydney der Chatbot hat einen neuen Vektor-Store und verbesserte Query-Übersetzung

Der gesamte Prozess vom Exportieren veröffentlichter Inhalte aus Wordpress über HTML-Bereinigung, Chunking, Embedding-Generierung bis hin zur Speicherung in einem Vektor-Store ist überraschend einfach und schnell, sobald man es ein paar Mal gemacht hat.

Ich habe einen neuen Vektor-Store eingewechselt (weiterhin FAISS), mit einer anderen Chunking-Methodik (diesmal mit einer etwas höheren Chunk-Größe und Überlappung).

Die Benutzeranfrage wird mit dem Multi-Query-Retriever von Langchain transformiert. Ich habe festgestellt, dass die Chatbot-Antworten mit diesem Retriever umfassender und nuancierter sind als mit dem vorherigen 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
)

Der Kampf mit dem Pushen von Docker-Images zu GCP Artifact entpuppte sich als Segen

Aus irgendeinem seltsamen Grund hatte ich vor etwa einem Monat Probleme damit, Docker-Images zu GCP Artifact zu pushen. Ich versuchte viele Wege, es zu lösen, konnte aber nicht. Die Monate davor waren völlig problemlos.

Dadurch wurde ich gezwungen, einen anderen Weg zur Bereitstellung der App zu finden, einen, der nicht das Pushen des Images zu Artifact beinhaltet. So bin ich auf Continuous Deployment auf GCP Cloud Run mit dem Repo auf Github gestoßen.

Irgendwie habe ich zur gleichen Zeit ein Online-Tutorial gesehen, und sie verwendeten poetry. Ich hatte keine Ahnung, was das war, also fragte ich chatGPT, es mir zu erklären. Es stellte sich heraus, dass es ein großartiges Tool zur Verwaltung von Abhängigkeiten ist, also nutze ich es jetzt :). Durch diese Erkundung lernte ich auch mehr über das Einrichten einer virtuellen Umgebung für jedes Projekt und begann, es für jedes einzelne Projekt zu verwenden.

Also mit dem Einrichten einer neuen virtuellen Umgebung, der Nutzung von poetry zur Verwaltung von Abhängigkeiten und der Nutzung von Continuous Deployment von GCP Cloud Run ist mein Workflow jetzt viel flüssiger. Das Bereitstellen eines neuen Updates für den Chatbot ist ebenfalls viel einfacher und schneller, sobald ich es gründlich lokal getestet habe.

Woran arbeite ich jetzt?

Derzeit arbeite ich am Aufbau und der Bereitstellung eines Research Assistant mit Langchain. Der Open-Source-Code von Langchain und GPT-Researcher (Danke an beide!) ist klar genug und ich kann ihn lokal zum Laufen bringen. Das Bereitstellen für eine Produktionsumgebung erweist sich jedoch als ziemlich schwierig, besonders der Teil des Content-Scrapings. Konkret ist die CPU-Auslastung viel zu hoch, wenn ich die Anwendung lokal im Docker-Container teste.

Ich habe auch ein paar Ideen, wie ich den von GPT-Researcher und Langchain geteilten Research-Assistant-Ansatz verbessern kann, aber ich muss daran arbeiten, sie zum Leben zu erwecken. Ich werde mehr teilen, wenn sie bereit sind.

Deine Gedanken?

Jede Codezeile, jede Fehlerbehebungsstunde und jeder Durchbruch war ein Sprungbrett. Und obwohl diese Reise meine ist, hoffe ich, dass sie Ideen anregt, Einsichten bietet oder einfach unterhält. Welchen Herausforderungen bist du bei deinen technischen Unternehmungen begegnet? Schreib deine Geschichten oder Fragen unten — lass uns gemeinsam durch diese digitalen Gewässer navigieren.

Viele Grüße,

Chandler

P.S: Wenn du eine RAG-Anwendung baust, finde ich die „RAG from scratch"-Serie von Langchain super nützlich.