Chainlit: Uygulamalı Örneklerle Bir Rehber

Chainlit Nedir?

Chainlit, yapay zekâ sohbet botları, araçlar ve LLM iş akışları için ön yüzler oluşturmanıza yardımcı olur. Ön uç karmaşıklığını soyutlar, Python mantığına odaklanmanızı sağlar ve butonlar, kaydırıcılar, dosya yükleme desteği ekleme veya hatta model context protocol (MCP) ile araçlara bağlanma desteği sunar.

Chainlit şu durumlar için idealdir:

• LLM tabanlı uygulamaların prototiplenmesi
• Dahili araçlar oluşturma
• Eğitici demolar geliştirme
• Modellerinizi harici araçlara veya API'lere bağlama

Chainlit Bileşenleri

Her Chainlit uygulaması birkaç temel özellikle inşa edilir:

1. Sohbet yaşam döngüsü kancaları: Bunlar, sohbetin farklı aşamalarında neler olacağını kontrol etmenizi sağlar. Örneğin:
• @cl.on_chat_start bir sohbet başladığında çalışır.
• @cl.on_message kullanıcı bir mesaj gönderdiğinde çalışır.
• @cl.on_chat_end sohbet sona erdiğinde çalışır.
2. UI eylemleri: Chainlit, cl.Action ile butonlar eklemenize ve @cl.action_callback ile bunları işlemenize olanak tanır. Bunlar, kullanıcı metin girdisine gerek duymadan temiz, etkileşimli arayüzler oluşturmak için idealdir.
3. Mesaj akışı: Token akışını destekleyen LLM'lerle, stream=True kullanarak yanıtları gerçek zamanlı akıtabilir, uygulamanızı daha dinamik ve tepkisel hissettirebilirsiniz.
4. config.toml ile yapılandırma: Bu dosya; sohbet kalıcılığı, dosya yükleme, tema özelleştirme ve kullanılabilirlik iyileştirmeleri gibi özellikleri Python kodunuzu değiştirmeden etkinleştirmenizi sağlar.

Her kavramı tam olarak nasıl çalıştığını ve Chainlit uygulamalarınıza nasıl entegre edeceğinizi görebilmeniz için uygulamalı bir kod örneğiyle açıklayacağım. İlk adımla başlayalım.

Önkoşullar

Python 3.8+ kurulu olduğundan emin olun, ardından pip kullanarak Chainlit'i yükleyin. Ollama demosu için Langchain de kullanacağız; bu nedenle onu da yüklediğinizden emin olun. Terminalde şu komutu çalıştırın:

pip install chainlit langchain langchain-community

Örneklerle Chainlit Temellerini Anlama

Bu bölümde, her projeye temel olacak Chainlit'in yapı taşlarını ele alacağız.

Sohbet yaşam döngüsü kancaları

Bir kullanıcı Chainlit uygulamanıza bağlandığında bir sohbet oturumu oluşturulur. Chainlit tarafından sağlanan dekoratörleri kullanarak bu oturumun farklı aşamalarına erişebilirsiniz. Bunlar şunları içerir:

@cl.on_chat_start ile geliştirme

Bu kanca, yeni bir sohbet oturumu başladığında çalışır. Kullanıcıyı selamlamak, bir karşılama mesajı göstermek veya oturum durumunu başlatmak için kullanabilirsiniz.

import chainlit as cl
@cl.on_chat_start
def on_chat_start():
    print("A new chat session has started!")

@cl.on_message ile geliştirme

Bu mesaj kancası, kullanıcı yeni bir mesaj gönderdiğinde çalışır. Bunu kullanıcı girdisini işlemek, bir LLM çağırmak veya bir yanıt döndürmek için kullanırız.

import chainlit as cl
@cl.on_message
async def on_message(msg: cl.Message):
    print("The user sent:", msg.content)
    await cl.Message(content=f"You said: {msg.content}").send()

@cl.on_stop ile geliştirme

on_stop kancası, devam eden bir görev sırasında kullanıcı durdur düğmesine (⏹) tıkladığında çalışır. Uzun süren işlemleri iptal etmek veya yarım kalan oturumları temizlemek için kullanılır.

import chainlit as cl
import asyncio
@cl.on_chat_start
async def start():
    await cl.Message("Type anything and I'll pretend to work on it.").send()
@cl.on_message
async def on_message(msg: cl.Message):
    await cl.Message("Working on it... you can press Stop").send()
    try:
        # Simulate a long task
        await asyncio.sleep(10)
        await cl.Message("Task complete!").send()
    except asyncio.CancelledError:
        print("Task was interrupted!")
        # This is optional, just logs in the server
        raise
@cl.on_stop
async def on_stop():
    print("The user clicked Stop!")

Kullanıcı bir mesaj gönderdiğinde, Chainlit asyncio.sleep(10) ile bir görevi simüle eder. Kullanıcı durdur düğmesine (⏹) tıklarsa görev iptal edilir ve kesintiyi günlüğe kaydetmek için @cl.on_stop tetiklenir.

@cl.on_chat_end ile geliştirme

Bu kanca, oturum sona erdiğinde tetiklenir—kullanıcı yenilediğinde, sekmeyi kapattığında veya yeni bir oturum başlattığında. Genellikle bağlantı kesilmelerini günlüğe kaydetmek veya durumu saklamak için kullanılır.

import chainlit as cl
@cl.on_chat_start
async def on_chat_start():
    await cl.Message("Welcome! Feel free to leave anytime").send()
@cl.on_chat_end
async def on_chat_end():
    print("The user disconnected!")

Localhost açıldığında onunla çalışabilirsiniz. Localhost sekmesini veya penceresini kapattığınızda, terminalde aşağıdakiler görüntülenir:

UI eylemleri (butonlar)

Chainlit, sohbet botu arayüzünüze doğrudan etkileşimli butonlar eklemenizi sağlar. Her buton bir eylem olarak tanımlanır ve bir Python geri çağırma işlevine bağlanır. Butonları, actions argümanını kullanarak bir Message'ın parçası olarak gönderirsiniz:

import chainlit as cl
@cl.on_chat_start
async def start():
    actions = [
        cl.Action(
            name="hello",
            label="👋 Say Hello",
            icon="smile",
            payload={"value": "hi"}
        )
    ]
    await cl.Message("Click a button!", actions=actions).send()

Bir buton tıklamasını şu şekilde işleyebilirsiniz:

@cl.action_callback("hello")
async def on_hello(action: cl.Action):
    await cl.Message("Hello there! 👋").send()

@cl.action_callback("hello") dekoratörü, Chainlit'e adı "hello" olan bir butondaki tıklamaları dinlemesini söyler. Tıklandığında, sohbet arayüzünde kullanıcıya dostça bir mesaj gönderir.

İpucu: Sunucuya geri göndermek istediğiniz herhangi bir veriyi payload ile özelleştirebilirsiniz.

Mesaj akışı 

Chainlit, LLM yanıtlarının gerçek zamanlı akışını destekler. Bu, içerikleri oluşturuldukça kullanıcıya kademeli olarak gönderebileceğiniz anlamına gelir.

@cl.on_message
async def on_message(message: cl.Message):
    await cl.Message(content="Thinking...").send()
    async for chunk in llm.astream(message.content):
        await cl.Message(content=chunk, author="LLM", stream=True).send()

Bunu şöyle parçalayalım:

• İlk olarak, uygulamanın çalıştığını kullanıcıya göstermek için anında bir "Thinking..." mesajı görüntüler.
• Ardından, kullanıcının mesajını akış uyumlu bir LLM'ye gönderir.
• Model çıktı ürettikçe, her parçayı (chunk) gerçek zamanlı olarak arayüze geri akıtır.
• stream=True parametresi, tam yanıt beklemek yerine her parçanın kademeli olarak görünmesini sağlar.

Not: Bu, akışı destekleyen modellerle en iyi sonucu verir.

Chainlit yapılandırması (config.toml)

Sohbet kalıcılığı, dosya yüklemeleri, tema oluşturma ve daha fazlası gibi güçlü özellikleri etkinleştirmek için config.toml dosyasını kullanarak Chainlit uygulamanızı özelleştirebilirsiniz. Bu dosya proje dizininizin kökünde (.chainlit klasörü altında) bulunur ve kodu değiştirmeden çalışma zamanı davranışını ayarlamanıza olanak tanır.

Kalıcılık

Bu parametre, Chainlit'in sohbet geçmişini ve oturum durumunu kalıcı hale getirmesine olanak tanır. @cl.on_chat_resume kancasını etkinleştirir ve kullanıcıların bağlantıyı kesip daha sonra geri dönebileceği uygulamalar için idealdir.

[persistence]
enabled = true

Dosya yükleme

Bu ayar, kullanıcıların sohbet arayüzünde dosya yüklemesine izin verir. Güvenliği ve performansı sağlamak için izin verilen dosya türlerini ve dosya boyutlarını kısıtlayabilirsiniz.

[features.spontaneous_file_upload]
enabled = true
accept = ["*/*"] 
max_files = 5
max_size_mb = 500

İşte Chainlit tarafından kabul edilen birkaç dosya türü örneği.

# 1. Belirli dosya türleri için:
    # accept = ["image/jpeg", "image/png", "application/pdf"]
# 2. Belirli bir türdeki tüm dosyalar için:
    #    accept = ["image/*", "audio/*", "video/*"]
# 3. Belirli dosya uzantıları için:
    #    accept = { "application/octet-stream" = [".xyz", ".pdb"] }

Bu sayede yüklemeleri güvenlik, performans veya alan-özel kullanım senaryolarına göre uyarlayabilirsiniz.

UI özelleştirme

Bu özelleştirme, UI parametresi altında asistan adını değiştirir ve işlem adımı adım mantık veya hata ayıklama için yararlı olan Chain of Thought (CoT) işleme modunda etkinleştirir.

[UI]
name = "Assistant"
cot = "full"

Kullanılabilirlik iyileştirmeleri

Bunlar, yeni mesajların otomatik olarak görünür alana kaydırılması ve mesaj düzenlemeye izin verilmesiyle kullanıcı deneyimini geliştirir.

[features]
user_message_autoscroll = true
edit_message = true

Yukarıdaki kullanılabilirlik ayarları, kullanıcıya arayüz içinde otomatik kaydırma ve mesaj düzenleme özelliklerini etkinleştirme imkânı tanır.

Proje: Beni Şaşırt Botu (LLM Yok)

Artık Chainlit'in temel bileşenlerini bildiğimize göre, butonlar kullanarak önceden tanımlı eğlenceli bilgiler veya geliştirici motivasyon mesajları gösteren basit bir arayüz tabanlı uygulama oluşturalım.

import chainlit as cl
import random
FUN_FACTS = [
    "💡 Did you know? Chainlit supports file uploads and custom themes!",
    "💡 You can add buttons, sliders, and images directly in your chatbot UI!",
    "💡 Chainlit supports real-time tool execution with LangChain and LLMs!",
    "💡 You can customize the look of your chatbot with just a CSS file!",
    "💡 Chainlit lets you connect to tools using Model Context Protocol (MCP)!"
]
SUPRISES = [
    "🎉 Surprise! You're doing great!",
    "🚀 Keep it up, you're making awesome progress!",
    "🌟 Fun fact: Someone out there just smiled because of you. Why not make it two?",
    "👏 Bravo! You just unlocked +10 imaginary developer XP!",
    "💪 Remember: Even bugs fear your debugging skills!"
]
@cl.on_chat_start
async def start():
    actions = [
        cl.Action(
            name="surprise_button",
            label="🎁 Surprise Me",
            icon="gift",
            payload={"value": "surprise"}
        ),
        cl.Action(
            name="fact_button",
            label="💡 Did You Know?",
            icon="lightbulb",
            payload={"value": "fact"}
        )
    ]
    await cl.Message(content="Choose an action:", actions=actions).send()
@cl.action_callback("surprise_button")
async def on_surprise(action: cl.Action):
    suprise = random.choice(SUPRISES)
    await cl.Message(content=suprise).send()
@cl.action_callback("fact_button")
async def on_fact(action: cl.Action):
    fact = random.choice(FUN_FACTS)
    await cl.Message(content=fact).send()

Yukarıdaki kod, Chainlit ile ilgili ilginç ipuçları için “FUN_FACTS” ve motivasyon mesajları için “SUPRISES” olmak üzere iki liste tanımlar.

• Yeni bir sohbet başladığında iki buton görüntülenir: "Surprise Me" ve "Did You Know?"—cl.Action. ' kullanılarak
• "Surprise Me" tıklanınca @cl.action_callback("surprise_button") tetiklenir ve rastgele bir sürpriz mesajı gönderir.
• "Did You Know?" tıklanınca @cl.action_callback("fact_button")` tetiklenir ve rastgele bir eğlenceli bilgi gönderir.

Bu, LLM gerektirmeyen ve Chainlit eylemleri ile geri çağırmaların nasıl çalıştığını öğrenmek için ideal olan buton tabanlı basit bir etkileşimli sohbet botu oluşturur.

Bu uygulamayı çalıştırmak için terminalde şu komutu çalıştırmanız yeterlidir:

chainlit run main.py

Arayüzde olguları veya eğlenceli mesajları tetikleyen etkileşimli butonlar göreceksiniz!

Proje: Ollama ile Güçlendirilen Beni Şaşırt Botu

Şimdi bu süreci otomatikleştirelim ve sürpriz ile bilgi mesajlarını Ollama üzerinden yerel bir LLM kullanarak üretelim.

import chainlit as cl
from langchain_community.llms import Ollama
import random
llm = Ollama(model="mistral", temperature=0.7)  # Use any lightweight local model
# Reusable action buttons
def get_action_buttons():
    return [
        cl.Action(
            name="surprise_button",
            label="🎁 Surprise Me",
            icon="gift",
            payload={"value": "surprise"}
        ),
        cl.Action(
            name="fact_button",
            label="💡 Did You Know?",
            icon="lightbulb",
            payload={"value": "fact"}
        )
    ]

@cl.on_chat_start
async def start():
    await cl.Message(content="Choose an action below to see something fun:").send()
    await cl.Message(content="", actions=get_action_buttons()).send()
@cl.action_callback("surprise_button")
async def on_surprise(action: cl.Action):
    prompt = "Give a short, uplifting surprise message to a developer. Make it fun."
    try:
        surprise = llm.invoke(prompt).strip()
    except Exception:
        surprise = "🎉 Surprise! You're doing great!"
    await cl.Message(content=surprise).send()
    await cl.Message(content="", actions=get_action_buttons()).send()  
@cl.action_callback("fact_button")
async def on_fact(action: cl.Action):
    prompt = "Give a fun and helpful fact about LLMs or Chainlit."
    try:
        fact = llm.invoke(prompt).strip()
    except Exception:
        fact = "💡 Did you know? You can add sliders and buttons to Chainlit with just a few lines of code!"
    await cl.Message(content=fact).send()
    await cl.Message(content="", actions=get_action_buttons()).send()  

Bu Chainlit uygulaması, kullanıcı etkileşimlerine dayalı olarak yanıtları dinamik olarak üretmek için (Mistral modeliyle Ollama üzerinden) yerel bir LLM entegre eder.

• Yeniden kullanılabilir bir get_action_buttons() işlevi aracılığıyla “Surprise Me” ve “Did You Know?” olmak üzere iki cl.Action butonu tanımlar.
• Sohbet başlatıldığında (@cl.on_chat_start) bu etkileşimli butonlarla bir mesaj gönderir.
• Kullanıcı “Surprise Me” butonuna tıkladığında, @cl.action_callback işleyicisi geliştiriciye yönelik kısa ve motive edici bir mesaj istemini LLM'ye gönderir. Yanıt .strip() işleviyle temizlenir ve sohbete geri gönderilir.
• Benzer şekilde, “Did You Know?” tıklandığında Chainlit veya LLM'ler hakkında bilgilendirici bir gerçek isteyen bir istemle LLM çağrılır.
• LLM başarısız olursa, geri dönüş olarak statik yanıtlar döndürülür.
• Her etkileşimden sonra, konuşma döngüsünü sürdürmek için butonlar yeniden gönderilir.

Bu, Chainlit UI'ını LLM tabanlı içerik üretimiyle birleştirmenin nasıl yapılacağını gösterir ve yerel yapay zekâ destekli sohbet uygulamaları için modüler ve genişletilebilir bir temel sunar.

Terminalde şu komutları çalıştırın:

ollama run mistral
chainlit run main.py

Artık otomatik mesajlar üreten canlı, yerel bir yapay zekâ asistanınız var.

Sonuç

Chainlit; sohbet tabanlı araç prototipleme, asistanlar oluşturma ve gerçek zamanlı LLM çıktıları entegre etme konusunda—JavaScript'e dokunmadan—güçlü bir potansiyele sahiptir. Gelişmiş kullanım senaryoları için Chainlit Cookbook'a göz atın.

Yeni yapay zekâ araçlarıyla öğreniminizi genişletmek için şu bloglara göz atın:

• OpenAI'nin Codex'i: 3 Uygulamalı Örnekle Bir Rehber
• Haystack AI Eğitimi: Otonom İş Akışları Oluşturma
• n8n: Uygulamalı Örneklerle Bir Rehber