Chatbot v2.10 revelado: elevando a experiência do usuário com velocidade, escalabilidade e simplicidade aprimoradas

Atualização (2026): Este chatbot evoluiu para Sydney! Depois de muitas iterações — Flask para FastAPI, FAISS para Weaviate para Supabase pgvector — Sydney agora vive em /ask/ e usa Claude com respostas em streaming. Os padrões FastAPI abaixo foram um trampolim para onde estamos agora.

Pergunte à Sydney →

---

Post original de fevereiro de 2024 preservado abaixo para contexto.

Há duas semanas, compartilhei a novidade sobre meu chatbot v2, aproveitando o framework Langchain, com FAISS como vector store. Era uma história crua sobre como saí das areias movediças do código após meses de trabalho iterativo.

Embora a versão 2 fosse uma melhoria significativa em relação à versão 1, ela ainda tinha muitos problemas com os quais não estava satisfeito. O maior é provavelmente o desempenho; mais precisamente, é muito lenta :P Além disso, a interface frontend era muito complicada com muitas frases de introdução, então a caixa de chat fica muito abaixo na tela.

Este post vai destacar como a v2.10 aplica otimizações de desempenho direcionadas e melhorias de UX para desbloquear uma experiência conversacional mais fluida, rápida e capaz.

Transição para FastAPI: um salto em desempenho

A espinha dorsal do desempenho aprimorado da v2.10 está na nossa mudança para FastAPI. Esse moderno framework web não só acelera os tempos de resposta como também introduz uma arquitetura mais robusta e escalável.

Framework Flask da v2

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

O Flask nos serviu bem, fornecendo simplicidade e flexibilidade. No entanto, à medida que nossa base de usuários cresceu, a necessidade de uma solução mais performática ficou aparente.

Framework FastAPI da v2.1

# 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 melhora o desempenho por meio de suporte assíncrono.

Processamento assíncrono: conversas mais fluidas

Aproveitando os recursos assíncronos do FastAPI, a v2 introduz o tratamento de requisições sem bloqueio, permitindo interações do usuário mais fluidas e dinâmicas. Um exemplo está abaixo.

# 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

Melhorias na interface do usuário

O frontend da v2.10 foi redesenhado para melhorar o apelo visual e o engajamento do usuário. Com foco em acessibilidade e experiência do usuário, o novo design é mais simples e intuitivo.

Redução do conteúdo introdutório excessivo

Este bloco de texto agora se foi.

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

Este é o substituto

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

Visualmente, é assim que a mudança parece

Estilos adicionais para reduzir espaço em branco e melhorar o 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>

O estilo da caixa #conversation com uma altura especificada e controle de overflow é particularmente eficaz para manter uma interface de chat limpa e amigável.

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

Adicionar aria-live="polite" à div de conversa é uma adição cuidadosa para usuários de leitores de tela, permitindo que sejam informados sobre mudanças dinâmicas de conteúdo.

Auto-foco no campo de entrada

A adição de $('#user-query').focus(); no final dos callbacks de sucesso e erro do AJAX é um recurso amigável ao usuário, garantindo que o campo de entrada seja automaticamente focado após cada envio de mensagem, permitindo uma experiência de chat mais fluida.

Aproveitando o Langsmith para monitoramento de desempenho e observabilidade

Com esta versão 2.10, estou aproveitando o langsmith. A configuração é bem simples e a interface do dashboard é intuitiva o suficiente.

E sempre que percebo que uma determinada consulta está demorando muito, posso "clicar" nela e entender mais exatamente qual parte do processo é o problema.

O código de backend completo para a versão 2.1

Como de costume, compartilhei o código de backend completo no GitHub aqui. Está no mesmo repositório que a versão anterior do chatbot 2.0.

Convido você a testar o chatbot :D Pergunte qualquer coisa sobre o que escrevi nos últimos 16 anos.

Você já tentou construir um chatbot ou migrar entre frameworks? Adoraria ouvir que truques de desempenho funcionaram para você.

Abraços,

Chandler