Kurs
Python ile LLM'lere Giriş
3 sa
37K
Günümüzün yapay zekâ modelleri, erişilebilir kullanıcı arayüzleri olmadan büyük ölçüde işlevselliğini yitirir. Açık kaynaklı bir Python web UI kütüphanesi olan Gradio sayesinde, LLM’lerle teknik olmayan son kullanıcılar arasındaki bu boşluğu kapatabilirsiniz. Gradio, yapay zekâ projeleriniz için hızlı prototipler oluşturmanıza ve bunları geniş bir kitleye kolayca sunmanıza olanak tanır.
Bu eğitim, genellikle web geliştirme deneyimi olmayan makine öğrenmesi mühendislerine yöneliktir. Gradio’nun temelleri ve çekirdek kavramlarını, farklı YZ modeli türleri için arayüz oluşturmayı, UX ve etkileşim için gelişmiş özellikleri ve dağıtım ile paylaşımın en iyi uygulamalarını kapsar.
Hadi başlayalım.
Gradio’ya Başlarken
Kurulum
Bir sanal ortam oluşturarak başlayacağız (tercihen Conda):
$ conda create -n gradio_tutorial python=3.9 -y
$ conda activate gradio_tutorialArdından, PIP kullanarak Gradio’yu ve bağımlılıklarını kurabilirsiniz:
$ pip install gradio ipykernelGradio arayüzlerini doğrudan Jupyter defterlerinde görüntüleyebilmek için ipykernel paketini de kurduk. Bu işlem, oluşturduğunuz sanal ortamı Jupyter Lab’e bir çekirdek olarak eklemenizi gerektirir. Bunu yapmak için komut şu şekildedir:
$ ipython kernel install --user --name=gradio_tutorial
$ jupyter lab # Start the labBu sayede, Gradio’nun kurulu olduğu bir çekirdeğe sahip bir defter oluşturabilirsiniz. Doğrulamak için, standart takma adıyla içe aktarın ve sürümünü yazdırın:
import gradio as gr
print(gr.__version__)
4.37.1Temel kavramlar ve terminoloji
Gradio’ya, temel kavramlarını ve terminolojisini bir “Merhaba Dünya” örneği üzerinden öğrenerek dalacağız:
def greet(name):
return f"Hello, {name}!"
demo = gr.Interface(
fn=greet,
inputs=['text'],
outputs="text",
)
demo.launch()Yukarıdaki kodu bir hücrede çalıştırdığınızda, özel bir selamlama mesajı döndüren küçük bir etkileşimli arayüz elde edersiniz:
Gradio birkaç temel kavram etrafında şekillenir:
- Interface: UI’ler oluşturmak için çekirdek sınıf.
- Bileşenler: Metin kutuları, görseller ve sesler gibi giriş ve çıkış öğeleri. Şu anda 30’dan fazla yerleşik bileşen bulunmaktadır.
- Fonksiyonlar: Giriş bileşenlerinden gelen bilgiyi işleyen ve çıktı bileşenleriyle görüntülenecek sonuçları döndüren Python fonksiyonları.
- Launch: Gradio uygulamanızı başlatan yöntem.
Yukarıda, metin alan bir ve metin döndüren bir greet fonksiyonu oluşturduk. Bu nedenle, giriş ve çıkış bileşenleri Interface sınıfı içinde text olarak belirtildi.
Son olarak, yerel bir sunucu başlatan launch metodunu çağırıyoruz. UI’ı herkesin erişimine açmak için share parametresini True olarak ayarlayabilirsiniz. Bu, bir SSH tüneli başlatır ve Gradio uygulamasını herkese açık olarak paylaşılabilir bir web sayfasına dağıtır:
demo.launch(share=True)
Running on public URL: https://d638ed5f2ce0044296.gradio.live
This share link expires in 72 hours. For free permanent hosting and GPU upgrades, run gradio deploy from Terminal to deploy to Spaces (https://huggingface.co/spaces)Gradio Bileşenleri
Gradio uygulamaları geliştirirken zamanınızın çoğunu farklı bileşenlerle uğraşarak ve bunları sayfada nasıl konumlandıracağınızı düşünerek geçirirsiniz. Bu yüzden, elinizde neler olduğuna yakından bakalım.
Girdi ve çıktı bileşenleri
Gradio, etkileşimli arayüzler oluşturmak için geniş bir bileşen yelpazesi sunar. Bu bileşenler genel olarak iki kategoriye ayrılır: girdi ve çıktı.
Girdi bileşenleri, kullanıcıların alttaki işlemciye (bu herhangi bir Python fonksiyonu olabilir) veri sağlamasına olanak tanır. Sık kullanılan girdiler şunlardır:
- Textbox
- Image
- Audio
- Slider
- Dropdown
Yukarıdaki bileşenlerin bazılarını kullanan örnek bir arayüz:
def process_inputs(text, image, audio, number, option):
# Process inputs and return results
return f"Processed: {text}, {number}, {option}"
demo = gr.Interface(
fn=process_inputs,
inputs=[
gr.Textbox(label="Enter text"),
gr.Image(label="Upload image"),
gr.Audio(label="Upload audio"), # Uncomment this line to add audio input
gr.Slider(0, 100, label="Choose a number"),
gr.Dropdown(["Streamlit", "Taipy", "Gradio"], label="Select a UI library"),
],
outputs="text",
)
demo.launch()Bu örnekte, process_inputs fonksiyonu beş parametre gerektiriyor. Bu nedenle beş girdi bileşeni oluşturup bunları inputs’a geçiriyoruz. Girdi bileşenlerinin sayısının, fonksiyonun beklediği parametre sayısıyla eşleşmesi gerekse de bu katı bir kural değildir. Hata ve uyarılardan kaçınmak için, UI’dan kullanıcı girişi gerektirmeyen parametreler için varsayılan değerler belirleyin.
İlk örnekte olduğu gibi düz bir text dizgesi yerine girdi bileşenini belirtmek için bir Textbox sınıfı kullandığımıza dikkat edin. Girdi ve çıktı bileşenlerini özelleştirilebilir kılmak için her zaman özel sınıflar kullanmanız önerilir. Örneğin, tüm bileşen sınıflarında kullanışlı bir label özelliği bulunur; ayrıca Slider ve Dropdown bileşenleri de aralık ve mevcut seçenekleri belirlemek için argümanlara sahiptir.
Birçok girdi bileşeni, çıktı göstermek için de kullanılabilir. Yaygın senaryolardan bazıları şunlardır:
- Label: Metin veya sınıflandırma sonuçlarını göstermek için
- Image: İşlenmiş veya üretilmiş görselleri göstermek için
- Audio: İşlenmiş veya üretilmiş sesleri çalmak için
- Plot: Grafik veya çizelgeleri göstermek için
Girdilerde olduğu gibi, çıktı bileşenlerinin sayısı da işleme fonksiyonundan dönen değerlerin sayısıyla eşleşmelidir.
Bileşen görünümünü özelleştirme
Gradio, bileşenlerinizin görünümünü ihtiyaçlarınıza göre özelleştirmenize olanak tanır. İşte özelleştirilmiş metin kutuları kullanan bir örnek:
demo = gr.Interface(
fn=lambda x: int(x) ** 7,
inputs=gr.Textbox(
lines=5,
placeholder="Enter any number...",
label="Custom textbox",
info="This is a customized textbox component to raise any number to the power of 7.",
),
outputs=gr.Textbox(label="And the number is...", show_copy_button=True),
)
demo.launch()
Bu örnekte, satır sayısını belirleyerek, yer tutucu ve bilgi metni ekleyerek ve çıktı için kopyalama düğmesi dahil ederek Textbox bileşenlerini özelleştirdik.
YZ uygulamanızın gereksinimlerine en uygun arayüzleri oluşturmak için farklı bileşenler ve özellikleriyle denemeler yapın. Bir bileşeniniz için hangi özellikleri değiştirebileceğinizi öğrenmek isterseniz belgelerine bakabilir veya daha iyisi, Jupyter Lab’de sınıf adının ardından ? operatörünü kullanabilirsiniz:
LLM’ler İçin Arayüzler Oluşturma
Öğrendiklerimizi bir araya getirerek, LLM’ler tarafından güçlendirilen gerçek dünyadan iki metin ve görsel tabanlı arayüz oluşturalım.
Önce, İngilizce’den Türkçe, İspanyolca veya Çince’ye çeviri yapan bir dil çevirici inşa edeceğiz:
import openai # pip install openai
def translate_text(api_key, text, target_language):
openai.api_key = api_key # Set openai API key
language_map = {
"Turkish": "Turkish",
"Spanish": "Spanish",
"Chinese": "Chinese (Simplified)",
}
prompt = f"Translate the following English text to {language_map[target_language]}:\n\nEnglish: {text}\n\n{target_language} translation:"
try:
response = openai.chat.completions.create(
model="gpt-4",
messages=[
{"role": "system", "content": "You are a professional translator."},
{"role": "user", "content": prompt},
],
)
translation = response.choices[0].message.content.strip()
return translation
except Exception as e:
return f"Error: {str(e)}"Öncelikle bir translate_text fonksiyonu tanımlıyoruz. Gövdesinde OpenAI API anahtarını ayarlayıp bir dil eşlem haritası oluşturuyoruz. Ardından çeviri istemini kurguluyoruz. Sonrasında bir try-except bloğu içinde, sistem istemiyle birlikte ChatCompletion uç noktasına bir istek gönderiyoruz. En sonunda da ilk seçeneği döndürüyoruz.
Şimdi arayüzü oluşturabiliriz:
iface = gr.Interface(
fn=translate_text,
inputs=[
gr.Textbox(
placeholder="Enter your OpenAI API key",
type="password",
label="OpenAI API Key",
),
gr.Textbox(
lines=4,
placeholder="Enter English text to translate...",
label="English Text",
),
gr.Dropdown(choices=["Turkish", "Spanish", "Chinese"], label="Target Language"),
],
outputs=gr.Textbox(label="Translation", show_copy_button=True),
title="English to Turkish/Spanish/Chinese Translator",
description="Translate English text to Turkish, Spanish, or Chinese using OpenAI's GPT-4 model. Enter your OpenAI API key, the text you want to translate, and select the target language.",
)
iface.launch(share=True)Kod, önceki arayüzlerinki gibi basit; ancak birkaç yeni özellik tanıtıyoruz:
- Metin kutularının type argümanı, düz metin giriş alanını metni gizleyen bir parola girişine çevirir.
- Interface sınıfının title ve description argümanları, sayfanın üst orta kısmına bir H1 başlığı ve alt başlık ekler.
Sonuç şöyle görünür:
Neden kullanıcının API anahtarını uygulamanın bir parçası olarak istediğimizi, bunu bizim sağlamadığımızı merak ediyor olabilirsiniz. Bunun nedeni, Gradio’nun UI’ları nasıl dağıttığıyla ilgilidir.
Kendi API anahtarımızı bir ortam değişkeni olarak (ki bu standart pratiktir) sağlasaydık, herkese açık paylaşılan uygulama sürümü ortam değişkenlerimize erişemeyeceği için çalışmayacaktı. Dağıtım bölümünde, uygulamalarımızı HuggingFace Spaces’e dağıtarak bunu nasıl düzelteceğimizi göreceğiz.
Şimdi, görsel üretimi için başka bir UI oluşturalım:
def generate_surrealist_art(api_key, prompt):
surrealist_prompt = f"Create a surrealist artwork based on the following concept: {prompt}. The artwork should be dreamlike, with unexpected juxtapositions and a sense of the uncanny."
client = OpenAI(api_key=api_key)
response = client.images.generate(
model="dall-e-3",
prompt=surrealist_prompt,
size="1024x1024",
)
image_url = response.data[0].url
return image_urlBir sürrealist istem kullanarak dall-e-3’e istek gönderen ve üretilen görselin URL’sini döndüren generate_surrealist_art adlı bir fonksiyon oluşturuyoruz. Ardından bu fonksiyonu yeniden bir Interface sınıfına besleyeceğiz:
iface = gr.Interface(
fn=generate_surrealist_art,
inputs=[
gr.Textbox(
placeholder="Enter your OpenAI API key",
type="password",
label="OpenAI API Key",
),
gr.Textbox(
lines=2,
placeholder="Describe your surrealist concept...",
label="Concept Description",
),
],
outputs=gr.Image(value="str"),
title="Surrealist Artwork Generator",
description="Generate surrealist artwork based on your prompts using DALL-E. Enter your OpenAI API key and describe your concept.",
)
iface.launch(share=True)API anahtarı ve sürrealist görselde yakalamak istediğimiz konsept için iki girdi belirtiyoruz. Ardından, oluşturulan görsel için Image sınıfıyla bir çıktı bileşeni oluşturuyoruz. value argümanını str olarak ayarlarsanız, bileşen URL’lerden görsel indirip görüntüleyebilir; bu da tam olarak ihtiyacımız olan şey.
Ve sonuç şöyle:
Klasik ML Modelleri İçin Arayüzler Oluşturma
Şimdi, klasik bir tablo tipi regresyon modeli için bir arayüz oluşturalım. Seaborn’da bulunan Diamonds veri setini kullanacağız.
Yeni bir çalışma dizini ve içinde app.py adlı yeni bir betik oluşturarak başlayın. Ardından, veriyi yükleyen, Scikit-learn Pipeline kullanarak işleyen ve bir RandomForestRegression modeli eğiten bu GitHub gist’inden kodu yapıştırın.
Sonraki adım, Diamonds veri setindeki özellik sayısıyla aynı sayıda girdiyi kabul eden bir işleme fonksiyonu oluşturmaktır:
# Create the Gradio interface
def predict_price(carat, cut, color, clarity, depth, table, x, y, z):
input_data = pd.DataFrame(
{
"carat": [carat],
"cut": [cut],
"color": [color],
"clarity": [clarity],
"depth": [depth],
"table": [table],
"x": [x],
"y": [y],
"z": [z],
}
)
prediction = model.predict(input_data)[0]
return f"Predicted Price: ${prediction:.2f}"Fonksiyon, bu girdileri bir DataFrame’e dönüştürerek eğitilmiş model hattının .predict() metoduna iletir. En sonunda tahmin edilen fiyatı içeren bir dizge döndürür.
Artık Interface sınıfının bu fonksiyonun imzasıyla eşleşmesi gerekiyor: özellikleri işlemek için dokuz girdi bileşeni ve tahmin edilen fiyatı göstermek için bir çıktı:
iface = gr.Interface(
fn=predict_price,
inputs=[
gr.Slider(
minimum=diamonds["carat"].min(),
maximum=diamonds["carat"].max(),
label="Carat",
),
gr.Dropdown(["Fair", "Good", "Very Good", "Premium", "Ideal"], label="Cut"),
gr.Dropdown(["D", "E", "F", "G", "H", "I", "J"], label="Color"),
gr.Dropdown(
["I1", "SI2", "SI1", "VS2", "VS1", "VVS2", "VVS1", "IF"], label="Clarity"
),
gr.Slider(
minimum=diamonds["depth"].min(),
maximum=diamonds["depth"].max(),
label="Depth",
),
gr.Slider(
minimum=diamonds["table"].min(),
maximum=diamonds["table"].max(),
label="Table",
),
gr.Slider(minimum=diamonds["x"].min(), maximum=diamonds["x"].max(), label="X"),
gr.Slider(minimum=diamonds["y"].min(), maximum=diamonds["y"].max(), label="Y"),
gr.Slider(minimum=diamonds["z"].min(), maximum=diamonds["z"].max(), label="Z"),
],
outputs="text",
title="Diamond Price Predictor",
description="Enter the characteristics of a diamond to predict its price.",
)
iface.launch(share=True)Sınıf içinde, kategorik özellikler için üç açılır liste oluşturuyoruz. Seçenekler, her bir özellikteki benzersiz kategorilerle doldurulur. Ayrıca sayısal özellikleri almak için altı adet kaydırıcı bileşeni oluşturuyoruz. Kaydırıcıların aralıkları, her bir özelliğin minimum ve maksimum değerleriyle belirlenir.
Artık tek yapmanız gereken, betiği çalıştırarak uygulamayı çalıştırmak ve dağıtmaktır:
$ python app.pySonuç şöyle görünüyor:
En iyi uygulamalar ve optimizasyon ipuçları için aşağıdaki En İyi Uygulamalar bölümüne geçin.
Gradio Uygulamalarını Dağıtma
Tek bir argümanı etkinleştirerek Gradio uygulamalarını dağıtmanın ne kadar kolay olduğunu zaten gördük. Elbette bu yöntemin dezavantajı, demoların 72 saat içinde süresinin dolmasıdır. Bu nedenle Gradio’yu dağıtmanın önerilen yolu HuggingFace Spaces üzerinden yapmaktır. HuggingFace, 2021’de Gradio’yu satın aldı ve iki platform arasındaki entegrasyonu sorunsuz hâle getirdi.
Dolayısıyla, bu eğitim veya Gradio ile oluşturacağınız gelecekteki uygulamalar için huggingface.co’ya ücretsiz bir hesapla kaydolun ve erişim belirteci oluşturmak için Settings > Tokens bölümüne gidin:
Belirteç yalnızca bir kez görüntülenir; bu nedenle güvenli bir yerde sakladığınızdan emin olun.
Bu belirteçle, Spaces üzerinde kalıcı barındırma ile dilediğiniz kadar Gradio uygulaması dağıtabilirsiniz. Örnek olarak, önceki bölümdeki Elmas Fiyat Tahmini modelini dağıtacağız; ne kadar kolay olduğunu göreceksiniz.
Tek yapmanız gereken, UI betiğinin bulunduğu dizine gidip terminalde gradio deploy komutunu çalıştırmaktır:
Terminal, betiğinizi çalışan bir HuggingFace Space’e dönüştürme sürecinde sizi yönlendirir. Şu ayrıntıları sorar:
- Oluşturduğunuz erişim belirteci
- Space başlığı: bu, dağıtımdan sonra Space URL’sinin bir parçası olacaktır
- Gradio UI kodunu içeren betiğin adı (varsayılan app.py)
- Space’in donanımı; yalnızca CPU kullanmak için boş bırakın (ücretsiz)
- Betikte kullanılan ortam değişkenleri (API anahtarlarını ve kullanıcı sırlarını güvenle saklayacağınız yer burası)
- Bağımlılıklar — ENTER’a basarak tek tek girin
Ve terminal size dağıtılmış Space bağlantısını sunar. Şöyle görünür:
Bu dağıtım yönteminin bir diğer güzel yanı, Gradio’nun demoyu otomatik olarak çalışan bir REST API’ye dönüştürmesidir. Ona erişme ve sorgulama talimatları her zaman en altta yer alır:
Böylece tek seferde, teknik olmayan kullanıcılar için uygulamanızın kalıcı UI barındırmasını ve meslektaşlarınız ile geliştirici arkadaşlarınız için bir REST API’yi elde etmiş olursunuz.
Web sayfalarına demoları gömmek, uygulamalara Google kimlik doğrulaması eklemek gibi daha fazla dağıtım ve paylaşım seçeneği için Gradio dokümantasyonundaki “Uygulamanızı Paylaşma” bölümünü ziyaret edin.
Gradio En İyi Uygulamalar ve İpuçları
Gradio ile kullanıcı arayüzleri geliştirirken en iyi uygulamaları takip etmek, kullanıcı deneyimini ve uygulamanızın sürdürülebilirliğini önemli ölçüde iyileştirebilir. İşte bazı temel öneriler:
1. Organizasyon ve sürdürülebilirlik için betikleri kullanın
Gradio uygulamalarını sürüm kontrolü, iş birliği ve dağıtım için Python betiklerinde düzenleyin.
2. Bileşenler için alan tahsisini optimize edin
Dengeli ve duyarlı bir arayüz için uygun boyutlandırma ve yerleşim araçlarını (ör. gr.Column(), gr.Row()) kullanın.
3. Kapsamlı bilgi sağlayın
Her bileşen için net talimat ve bağlam vermek üzere ‘info’ ve ‘label’ özniteliklerini kullanın.
4. Büyük özellik kümelerini verimli yönetin
Birçok özelliği olan modeller için dosya girdilerini (CSV, JSON) kullanarak toplu tahminleri etkinleştirin ve arayüzü sadeleştirin.
5. Ortam değişkenlerini doğru yönetin
Yerel geliştirme için python-dotenv kullanın; dağıtımda ise Hugging Face Spaces üzerinde değişkenleri ayarlayın.
6. Hata yakalama ve doğrulama uygulayın
Girdileri doğrulayın, anlaşılır hata mesajları sağlayın ve zarif hata yönetimi için try-except blokları kullanın.
7. Performansı optimize edin
Önbellekleme uygulayın, büyük modeller için tembel yükleme (lazy loading) kullanın ve uzun süren görevlerde gr.LoadingStatus()’tan yararlanın.
8. Erişilebilirlik için tasarlayın
Yüksek kontrast sağlayın, görseller için alternatif metin ekleyin ve tüm etkileşimli öğeler için klavye ile gezinmeyi etkinleştirin.
9. Aşamalı açıklama (progressive disclosure) uygulayın
Gelişmiş seçenekleri gerektiğinde ortaya çıkaracak şekilde karmaşık arayüzleri düzenlemek için akordeonlar veya sekmeler kullanın.
10. Düzenli güncelleyin ve bakım yapın
Bağımlılıkları güncel tutun, hataları izleyin ve kullanıcı geri bildirimlerine göre sürekli iyileştirme yapın.
11. HuggingFace kaynaklarından yararlanın
Model depoları ve veri kümeleri dâhil olmak üzere Gradio ile kusursuz entegrasyon için HuggingFace araç ve kaynaklarını kullanın.
12. Büyük modelleri HuggingFace Hub’da barındırın
Büyük tablo tipi modeller için HuggingFace Hub’a yükleyin ve performansı artırmak ve yerel depolama gereksinimlerini azaltmak üzere Gradio betiğinizde doğrudan yükleyin.
13. HuggingFace veri kümelerinden yararlanın
Büyük veri kümeleri için HuggingFace Hub’a yükleyin ve veri yönetimini kolaylaştırmak, yükleme sürelerini iyileştirmek için Gradio uygulamanızda doğrudan erişin.
Sonuç ve Ek Kaynaklar
Bu yazıda, Gradio kullanarak yapay zekâ uygulamaları için kullanıcı arayüzleri oluşturmanın temelini öğrendik. Gradio, karmaşık arayüzler kurmak için çok daha fazla özellik sunduğundan yalnızca yüzeyi hafifçe araladık. Örneğin, interface state uygulamanızın bir fonksiyon çağrısından diğerine çıktıları hatırlamasını sağlar. Reactive interfaces, kullanıcı girdisi değişir değişmez UI’ı dinamik olarak değiştirir. Blocks ile özel yerleşimlere ve tasarımlara sahip uygulamalar oluşturabilirsiniz.
Benzer şekilde, daha fazla içerik için şu ilgili kaynaklara göz atın:
Konular
