Chatbot v2.10 ra mắt: Nâng cao trải nghiệm người dùng với tốc độ, khả năng mở rộng và sự đơn giản

Cập nhật (2026): Chatbot này đã phát triển thành Sydney! Sau nhiều lần lặp lại — Flask sang FastAPI, FAISS sang Weaviate sang Supabase pgvector — Sydney giờ sống tại /ask/ và sử dụng Claude với streaming responses. Các pattern FastAPI bên dưới là bước đệm đến nơi chúng tôi đang ở hiện tại.

Hỏi Sydney →

---

Bài viết gốc từ tháng 2 năm 2024 được giữ nguyên bên dưới cho bối cảnh.

Hai tuần trước, tôi chia sẻ tin về chatbot v2 của mình, sử dụng framework Langchain, với FAISS làm vector store. Đó là câu chuyện thô về cách tôi thoát khỏi vũng lầy lập trình sau nhiều tháng làm việc lặp đi lặp lại.

Trong khi phiên bản 2 là cải thiện đáng kể từ phiên bản 1, nó vẫn có nhiều vấn đề tôi không hài lòng. Lớn nhất có lẽ là hiệu năng; chính xác hơn, nó quá chậm :P Ngoài ra, giao diện front-end quá phức tạp với quá nhiều câu giới thiệu nên ô chat nằm rất thấp trên màn hình.

Bài viết này sẽ nêu bật cách 2.10 áp dụng tối ưu hóa hiệu năng có mục tiêu và cải thiện UX để mở khóa trải nghiệm hội thoại mượt mà, nhanh hơn và khả năng tốt hơn.

Chuyển sang FastAPI: Bước nhảy về hiệu năng

Xương sống hiệu năng nâng cao của v2.10 nằm ở việc chuyển sang FastAPI. Framework web hiện đại này không chỉ tăng tốc thời gian phản hồi mà còn giới thiệu kiến trúc mạnh mẽ và mở rộng hơn.

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 phục vụ tốt, mang lại sự đơn giản và linh hoạt. Tuy nhiên, khi lượng người dùng tăng, nhu cầu về giải pháp hiệu năng hơn trở nên rõ ràng.

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 nâng cao hiệu năng thông qua hỗ trợ bất đồng bộ.

Xử lý bất đồng bộ: Hội thoại mượt mà hơn

Tận dụng tính năng bất đồng bộ của FastAPI, v2 giới thiệu xử lý request không chặn, cho phép tương tác người dùng mượt mà và năng động hơn. Ví dụ bên dưới.

# 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

Cải thiện giao diện người dùng

Front end của v2.10 đã được thiết kế lại để nâng cao tính thẩm mỹ và sự tương tác. Với trọng tâm vào accessibility và trải nghiệm người dùng, thiết kế mới đơn giản và trực quan hơn.

Giảm nội dung giới thiệu thừa

Đoạn text này giờ đã được bỏ.

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

Đây là phần thay thế

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

Về mặt hình ảnh, thay đổi trông như thế này

Style bổ sung để giảm white space và cải thiện 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 ô #conversation với chiều cao cố định và kiểm soát overflow đặc biệt hiệu quả để duy trì giao diện chat sạch sẽ và thân thiện.

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

Thêm aria-live="polite" vào div conversation là bổ sung chu đáo cho người dùng screen reader, cho phép họ được thông báo về thay đổi nội dung động.

Auto-focus vào ô nhập liệu

Việc thêm $('#user-query').focus(); ở cuối các callback success và error của AJAX là tính năng thân thiện, đảm bảo ô nhập liệu tự động được focus sau mỗi lần gửi tin nhắn, cho trải nghiệm chat mượt mà hơn.

Tận dụng Langsmith cho monitoring hiệu năng và observability

Với phiên bản 2.10 này, tôi đang tận dụng langsmith. Thiết lập khá dễ và giao diện dashboard đủ trực quan.

Và khi nào tôi nhận thấy một query nào đó mất quá lâu, tôi có thể "click" vào nó và hiểu chính xác phần nào của hành trình là vấn đề.

Code back-end hoàn chỉnh cho phiên bản 2.1

Như thường lệ, tôi chia sẻ code back-end hoàn chỉnh trên GitHub ở đây. Nó nằm trong cùng repo với phiên bản chatbot 2.0 trước đó.

Tôi mời bạn dùng thử chatbot :D Hỏi nó bất cứ điều gì về những gì tôi đã viết trong 16 năm qua.

Bạn đã bao giờ thử xây chatbot hoặc migrate giữa các framework chưa? Tôi rất muốn nghe những mẹo hiệu năng nào đã hiệu quả với bạn.

Thân mến,

Chandler