Chatbot v2.10 Diluncurkan: Meningkatkan Pengalaman Pengguna dengan Kecepatan, Skalabilitas, dan Kesederhanaan yang Lebih Baik

Update (2026): Chatbot ini berevolusi menjadi Sydney! Setelah banyak iterasi — Flask ke FastAPI, FAISS ke Weaviate ke Supabase pgvector — Sydney sekarang ada di /ask/ dan menggunakan Claude dengan streaming response. Pola FastAPI di bawah ini adalah batu loncatan menuju posisi kami sekarang.

Tanya Sydney →

---

Postingan asli dari Feb 2024 dipertahankan di bawah untuk konteks.

Dua minggu lalu, saya berbagi berita tentang chatbot v2 saya, memanfaatkan framework Langchain, dengan FAISS sebagai vector store. Itu adalah cerita mentah tentang bagaimana saya keluar dari pasir hisap coding setelah berbulan-bulan kerja iteratif.

Meskipun versi 2 adalah peningkatan signifikan dari versi 1, ia masih punya banyak masalah yang membuat saya tidak puas. Yang terbesar mungkin adalah performa; lebih tepatnya, terlalu lambat :P Juga, antarmuka front-end terlalu rumit dengan terlalu banyak kalimat pengantar sehingga kotak chat jauh di bawah layar.

Postingan ini akan menyoroti bagaimana v2.10 menerapkan optimisasi performa yang terarah dan peningkatan UX untuk membuka pengalaman percakapan yang lebih lancar, cepat, dan mumpuni.

Beralih ke FastAPI: Lompatan dalam Performa

Tulang punggung performa v2.10 yang ditingkatkan terletak pada perpindahan kami ke FastAPI. Framework web modern ini tidak hanya mempercepat waktu respons tetapi juga memperkenalkan arsitektur yang lebih kokoh dan skalabel.

v2 Framework Flask

# 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 melayani kami dengan baik, memberikan kesederhanaan dan fleksibilitas. Namun, seiring pertumbuhan basis pengguna kami, kebutuhan akan solusi yang lebih berperforma menjadi jelas.

v2.1 Framework FastAPI

# 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 meningkatkan performa melalui dukungan asynchronous.

Pemrosesan Asynchronous: Percakapan yang Lebih Lancar

Memanfaatkan fitur asynchronous FastAPI, v2 memperkenalkan penanganan request non-blocking, memungkinkan interaksi pengguna yang lebih lancar dan dinamis. Contohnya di bawah ini.

# 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

Peningkatan Antarmuka Pengguna

Front end v2.10 telah didesain ulang untuk meningkatkan daya tarik visual dan keterlibatan pengguna. Dengan fokus pada aksesibilitas dan pengalaman pengguna, desain baru ini lebih sederhana dan intuitif.

Pengurangan konten pengantar yang berlebihan

Blok teks ini sekarang hilang.

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

Ini penggantinya

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

Secara visual, begini perubahan tampilannya

Style tambahan untuk mengurangi white space dan memperbaiki layout

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

Styling kotak #conversation dengan height tertentu dan overflow control sangat efektif untuk menjaga antarmuka chat yang bersih dan ramah pengguna.

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

Menambahkan aria-live="polite" ke div conversation adalah tambahan yang penuh perhatian untuk pengguna screen reader, memungkinkan mereka diberitahu tentang perubahan konten dinamis.

Auto-focus pada Input Field

Penambahan $('#user-query').focus(); di akhir callback AJAX success dan error adalah fitur yang ramah pengguna, memastikan bahwa input field secara otomatis difokuskan setelah setiap pengiriman pesan, memungkinkan pengalaman chat yang lebih lancar.

Memanfaatkan Langsmith untuk monitoring performa dan observability

Dengan versi 2.10 ini, saya memanfaatkan langsmith. Setup-nya cukup mudah dan antarmuka dashboard-nya cukup intuitif.

Dan kapan pun saya melihat query tertentu terlalu lama, saya bisa "klik" dan memahami lebih detail bagian mana dari perjalanan yang jadi masalah.

Kode back-end lengkap untuk versi 2.1

Seperti biasa, saya membagikan kode back-end lengkap di GitHub di sini. Ini ada di repo yang sama dengan chatbot versi sebelumnya 2.0.

Saya mengajak kamu untuk mencoba chatbot ini :D Tanyakan apa saja tentang apa yang saya tulis selama 16 tahun terakhir.

Pernahkah kamu mencoba membangun chatbot atau bermigrasi antar framework? Saya ingin sekali mendengar trik performa apa yang berhasil untukmu.

Salam,

Chandler