Chatbot v2.10 enthüllt: Besseres Nutzererlebnis durch höhere Geschwindigkeit, Skalierbarkeit und Einfachheit

Update (2026): Dieser Chatbot hat sich zu Sydney entwickelt! Nach vielen Iterationen — von Flask zu FastAPI, von FAISS zu Weaviate zu Supabase pgvector — lebt Sydney jetzt unter /ask/ und nutzt Claude mit Streaming-Antworten. Die FastAPI-Muster unten waren ein Sprungbrett zu dem, wo wir jetzt sind.

Sydney fragen →

---

Originalpost von Feb 2024 unten zur Nachvollziehbarkeit erhalten.

Vor zwei Wochen teilte ich die Neuigkeiten über meinen Chatbot v2, der das Langchain-Framework mit FAISS als Vektor-Store nutzt. Es war eine ehrliche Geschichte darüber, wie ich mich nach monatelanger iterativer Arbeit aus dem Coding-Treibsand befreit habe.

Obwohl Version 2 eine deutliche Verbesserung gegenüber Version 1 war, hatte sie noch viele Probleme, mit denen ich nicht zufrieden bin. Das größte ist wahrscheinlich die Performance; genauer gesagt, ist sie zu langsam :P Außerdem war die Frontend-Oberfläche zu kompliziert mit zu vielen Einleitungssätzen, sodass das Chat-Eingabefeld deutlich weiter unten auf dem Bildschirm ist.

Dieser Beitrag hebt hervor, wie 2.10 gezielte Performance-Optimierungen und UX-Verbesserungen anwendet, um ein flüssigeres, schnelleres und leistungsfähigeres Gesprächserlebnis zu ermöglichen.

Wechsel zu FastAPI: Ein Leistungssprung

Das Rückgrat der verbesserten Performance von v2.10 liegt in unserem Wechsel zu FastAPI. Dieses moderne Web-Framework beschleunigt nicht nur die Antwortzeiten, sondern führt auch eine robustere und skalierbarere Architektur ein.

v2 Flask-Framework

# Initialize Flask app and Langchain agent
app = Flask(__name__)
CORS(app, resources=\{r"/query_blog": {"origins": "https://www.chandlernguyen.com"\}})
app.debug = False
limiter = Limiter(app=app, key_func=get_remote_address)

Flask hat uns gut gedient und Einfachheit und Flexibilität geboten. Als jedoch unsere Nutzerbasis wuchs, wurde der Bedarf an einer leistungsfähigeren Lösung deutlich.

v2.1 FastAPI-Framework

# FastAPI with advanced CORS and async support
# Initialize FastAPI app
app = FastAPI()

# Configure CORS for production, allowing only your frontend domain
origins = ["https://www.chandlernguyen.com"]

app.add_middleware(
    CORSMiddleware,
    allow_origins=origins,
    # allow_origins=["*"],
    allow_credentials=True,
    allow_methods=["POST"],
    allow_headers=["Content-Type"],
)

FastAPI verbessert die Performance durch asynchrone Unterstützung.

Asynchrone Verarbeitung: Flüssigere Gespräche

Durch Nutzung der asynchronen Funktionen von FastAPI führt v2 nicht-blockierende Request-Verarbeitung ein, was flüssigere und dynamischere Benutzerinteraktionen ermöglicht. Ein Beispiel ist unten.

# Function to check content with OpenAI Moderation API (sensitive keys are loaded from environment variables)
async def is_flagged_by_moderation(content: str) -> bool:
    openai_api_key = os.getenv('OPENAI_API_KEY')
    if not openai_api_key:
        logging.error("OPENAI_API_KEY not set in environment variables")
        raise HTTPException(status_code=500, detail="Server configuration error")

    headers = \{"Authorization": f"Bearer {openai_api_key\}"}
    data = \{"input": content\}

    async with httpx.AsyncClient() as client:
        response = await client.post("https://api.openai.com/v1/moderations", json=data, headers=headers)

    if response.status_code == 200:
        response_json = response.json()
        return any(result.get("flagged", False) for result in response_json.get("results", []))
    else:
        logging.error(f"Moderation API error: {response.status_code} - {response.text}")
        return False

Verbesserungen der Benutzeroberfläche

Das Frontend von v2.10 wurde neu gestaltet, um den visuellen Reiz und das Nutzerengagement zu verbessern. Mit Fokus auf Barrierefreiheit und Nutzererlebnis ist das neue Design einfacher und intuitiver.

Reduzierung exzessiver Einleitungsinhalte

Dieser Textblock ist jetzt verschwunden.

<div class="container mt-5">
  <h2 style="color: #454545; text-align: center;">Welcome to My Expat Life in America Chatbot!</h2>
  <h3 style="margin-top: 15px; text-align: center;">
    Get Answers to Your Questions on Living, Working, and Thriving in the US
  </h3>
  <h4 style="margin-top: 10px; text-align: center;">Ask about:</h4>
  <ul style="list-style: none; text-align: center; color: #333;">
    <li>Adapting to American Culture & Lifestyle</li>
    <li>Navigating US Personal Finance & Banking</li>
    <li>Tips for Relocation and Settling In</li>
    <li>Understanding Healthcare and Insurance</li>
    <li>Getting Around - Driving and Transportation</li>
    <li>Education Opportunities and Resources</li>
    <li>Professional Development and Networking</li>
  </ul>
  <h5 style="margin-top: 10px; color: grey; text-align: center;">
    I'm here to provide helpful info and insights on the expat experience. What would you like to know?
  </h5>
  <h6 style="margin-top: 5px; color: grey; text-align: center;">
    Go ahead, ask me anything! I'll do my best to give a thoughtful response <span style="font-weight: bold; color: #007bff;">in a few seconds.</span>
  </h6>

Das ist der Ersatz

<h2 style="color: #454545; text-align: center;">Welcome to Chandler's Expat Life Chatbot!</h2>
    <p style="text-align: center; margin-bottom: 20px;">Ask me anything about expat life in the US, from culture to finance.</p>

Visuell sieht die Änderung so aus

Zusätzliche Styles zur Reduzierung von Leerzeichen und Verbesserung des Layouts

<style>
        /* Additional styles to reduce white space and improve layout */
        body, html \{
            height: 100%;
            margin: 0;
            display: flex;
            flex-direction: column;
        \}
        .container \{
            flex-grow: 1;
            display: flex;
            flex-direction: column;
            justify-content: center; /* Center vertically in the available space */
        \}
        #conversation \{
            height: 300px; /* Adjust based on your preference */
            overflow-y: auto;
            border: 1px solid #ccc; /* Add border to conversation box */
            padding: 10px;
            border-radius: 5px; /* Optional: round corners */
        \}
    </style>

Das #conversation-Box-Styling mit einer festgelegten Höhe und Overflow-Kontrolle ist besonders effektiv, um eine saubere und benutzerfreundliche Chat-Oberfläche zu erhalten.

<!-- Area to display the conversation -->
    <div id="conversation" aria-live="polite" class="mb-5" style="height: 300px; overflow-y: auto;"></div>

Das Hinzufügen von aria-live="polite" zum conversation div ist eine durchdachte Ergänzung für Screenreader-Nutzer, die es ihnen ermöglicht, über dynamische Inhaltsänderungen informiert zu werden.

Auto-Fokus auf Eingabefeld

Das Hinzufügen von $('#user-query').focus(); am Ende der AJAX-Erfolgs- und -Fehler-Callbacks ist eine nutzerfreundliche Funktion, die sicherstellt, dass das Eingabefeld nach jeder Nachrichtenübermittlung automatisch fokussiert wird, was ein flüssigeres Chat-Erlebnis ermöglicht.

Nutzung von Langsmith für Performance-Monitoring und Observability

Mit dieser Version 2.10 nutze ich Langsmith. Das Setup ist recht einfach und die Dashboard-Oberfläche ist intuitiv genug.

Und wann immer ich bemerke, dass eine bestimmte Anfrage zu lange dauert, kann ich darauf „klicken" und genauer verstehen, welcher Teil der Journey das Problem ist.

Der vollständige Backend-Code für Version 2.1

Wie üblich habe ich den vollständigen Backend-Code auf GitHub hier geteilt. Er befindet sich in demselben Repo wie der vorherige Chatbot 2.0.

Ich lade dich ein, den Chatbot auszuprobieren :D Frag ihn alles über das, was ich in den letzten 16 Jahren geschrieben habe.

Hast du jemals versucht, einen Chatbot zu bauen oder zwischen Frameworks zu migrieren? Ich würde gerne hören, welche Performance-Tricks bei dir funktioniert haben.

Viele Grüße,

Chandler