Bu makale, Veri Bilimi Blogathon.

PyScript.js'ye Giriş

kullanımını sağlayan bir ön uç çerçevedir. Python tarayıcıda. Emscripten, Pyodide, WASM ve diğer modern web teknolojileri kullanılarak geliştirilmiştir.

Tarayıcıda Python kullanılması Javascript'in yerini alabileceği anlamına gelmez. Ancak Python Geliştiricilerine, özellikle Makine Öğrenimi Mühendislerine daha fazla kolaylık ve esneklik sağlar.

PyScript Neler Sunar?

1. Programlar Python ve Javascript Nesneleri arasında iletişim kurabilir.
2. Barındırma için herhangi bir sunucu veya özel donanım gerektirmez.
3. Python ortamına gerekli dosyaları veya paketleri dahil edebiliriz.
4. Numpy ve Pandas gibi popüler python kitaplıklarının kullanımını destekler.
5. Geliştiricilere esneklik sağlar. Artık, düğmeler ve kapsayıcılar gibi mevcut UI bileşenleriyle python programlarını hızla oluşturabilirler.

Bu öğretici, PyScript kullanarak bir web GUI ile makine öğrenimi modelimizi nasıl oluşturabileceğimizi gösterir.

ünlü kullanacağız Araba Değerlendirme Veri Kümesi altı kategorik özelliğe dayalı olarak otomobilin durumunu tahmin etmek. Veri kümesini daha sonra tartışacağız, ancak önce pysscript.js kitaplığını kurmakla başlayın.

.Hadi başlayalım 😉

PyScript.js'yi Ayarlama

Bu bölüm HTML Şablonumuzu ayarlayacak ve pyscript.js kitaplığını içerecektir.

Burada VSCode kullanacağız, ancak herhangi bir IDE seçebilirsiniz.

1. Adlı bir dizin oluşturun Senaryo Tut.

$ mkdir PyscriptTut $ cd PyscriptTut

2. Bir HTML Şablonu Oluşturma

İçinde adında bir HTML şablonu oluşturun index.html

Bu şablonun içine, başlangıç ​​HTML kodunu yerleştirin ve Web Sayfasının Stilini Oluşturmak için Bootstrap CDN kullanılır.

PyScript Kurulumu

Kütüphaneyi makinemize kurmayacağız, kütüphaneyi doğrudan PyScript web sitesinden içe aktaracağız.

içine aşağıdaki kodu ekleyin HTML şablonunuzun bölümü.

Önemli Not

HTML Kodunu çalıştırmak için bir Yerel Sunucu kullanmanız gerekir. Aksi takdirde, bir python ortamında birkaç kitaplığı içe aktarırken sorunlarla karşılaşabilirsiniz.

İndex.html dosyasına çift tıklayarak web sayfasını açmaya çalışırsanız (bu dosya gibi::///home/../…/JavaScript/src/index.js), içeri aktarırken CORS Politikası hatası alabilirsiniz. ES6 modülleri aynı kaynak ilkesine tabi olduğundan kitaplıklar.

VSCode kullanıyorsanız, onun Canlı Sunucu Uzantı.

Veya terminalde aşağıdaki komutu yazarak bir python sunucusu da oluşturabilirsiniz.

$ python3 -m http.sunucu

HTML Sayfanıza o URL üzerinden erişebilirsiniz – http://127.0.0.1:8080/index.html

Basit kod

PyScript'in başarıyla içe aktarılıp aktarılmadığını kontrol etmek için bu örnek kodu deneyebilirsiniz.

print("Puscript öğreticisine hoş geldiniz") for i in range(1, 10): print(i) Bu, bir for döngüsü kullanarak 1'den 9'a kadar olan sayıları basan basit bir programdır.

Her şey yolunda giderse, çıktı şöyle görünür

Yaşasın 🎉, PyScript kitaplığımız şablonumuza başarıyla kuruldu.

GUI oluşturma

Bu bölüm, eğitim ve test için makine öğrenimi modelimizi kullanmak için bir web GUI oluşturacaktır.

Yukarıda belirtildiği gibi, özel stil oluşturmak için Bootstrap Kitaplığı kullanacağız. Ayrıca bazı yerlerde satır içi CSS kullandım.

1. Google Yazı Tipleri CDN'sini ekleyin

Aşağıdaki kodu HTML şablonunuzun bölümüne ekleyin. Bu ekleyecek Montserrat web sayfamıza yazı tipi.

2. Bazı CSS Yapılandırmaları

Aşağıdaki kodu şablonunuza ekleyin. Web sayfamızda düzgün kaydırmayı sağlayacak ve yukarıdaki yazı tipini uygulayacaktır.

    * { kenar boşluğu: 0; dolgu: 0; } html { kaydırma davranışı: pürüzsüz; } gövde { yazı tipi ailesi: 'Montserrat', sans-serif; }

3. Bootstrap Navbar Bileşeni Ekleme

Bir gezinme çubuğu uygulamak için bölüme bu kodu ekleyin.

4. Başlık İçeriği Ekleme

Bazı metinler ve resimler içeren küçük bir açılış sayfası oluşturacağız.

 Araba Değerlendirme Veri Kümesi Fiziksel niteliklerine göre bir otomobil satın alma veya almama seçimi. 

Bu bileşende kullanılan görüntünün Kaynağı bulunabilir okuyun.

5. Modeli Eğitecek Bileşen

Bu bileşende, kullanıcıların hangi sınıflandırıcıyı eğitmek istediklerini ve kaç testin bölüneceğini seçebilmeleri için bazı radyo düğmeleri ve giriş metinleri oluşturacağız.

Modelin Eğitimi

<input class=”form-check-input” type=”radio” name=”modelSelection” id=”rf_model”

değer=”rf” işaretlendi>

Rastgele Orman

Lojistik regresyon

MLP Sınıflandırıcı

Gradyan Arttırma

6. Uyarı Mesajları Bileşeni

Bu bileşen, uyarılar ve başarı mesajları için kullanılır.

7. Eğitim Sonuçlarını kontrol etmek için bileşen

Bunda eğitim sonrası seçilen modelin Doğruluk ve Ağırlıklı F1 Skorunu görebiliriz.

Eğitim Özeti

Seçilen Model:

Müsait değil

Test Bölmesi:

Müsait değil

Doğruluk Puanı:

Müsait değil

Ağırlıklı F1 Puanı:

Müsait değil

8. Araba Parametrelerini Seçme Bileşeni

Arabanın performansını kontrol etmek için altı parametreyi seçebiliriz.

Araba parametreleri Alış fiyatı Çok Yüksek (75lakh'ın üzerinde) Yüksek (yaklaşık 20lakh) Meduim (yaklaşık 2lakh) Düşük (2lakh'ın altında) Bakım Fiyatı Çok Yüksek (4-3 LPA veya üzeri) Yüksek (yaklaşık 15 LPA) Orta (yaklaşık 2 LPA) Düşük (yılda 10 binin altında) Numara.  kapıların 0 2 1 >=3 Numara. 

The Gönder modeli eğitene kadar devre dışı kalacaktır.

9. Sonucu Çıktı Alacak Bileşen

Bu bileşen, tahmin edilen değeri görüntüler.

10. Altbilgi (Opsiyonel)

Bu, web sayfamızın altbilgisidir

 ❤ ile PyScript.js kullanılarak yapılmıştır

GUI'miz şimdi oluşturuldu, ✌

Küçük Not

Bundan sonra makine öğrenme modelimizi eğiteceğiz. Python Ortamına kitaplıklar eklememiz gerekiyor

Gerekli tüm standart olmayan kitaplıkları içe aktarmak için HTML Şablonunun etiketine aşağıdaki kodu ekleyin.

    - pandalar - scikit-learn - numpy

HTML Şablonunun etiketinin içinde bir etiket oluşturun. Tüm python kodlarını bu py-script etiketinin içine yazacağız.

Kütüphaneleri İçe Aktarma

Öncelikle gerekli tüm kütüphaneleri içe aktaracağız.

Veri Kümesi Ön İşleme

Daha önce tartışıldığı gibi, UCI ML Repository'den Araba Değerlendirme Veri Kümesini kullanacağız.

Bundan veri setini indirebilirsiniz. Link.

Bu veri setinde Alış Fiyatı, Bakım Fiyatı, Kapı Sayısı, Kişi Sayısı, Bagaj Kapasitesi ve Güvenlik Nitelikleri olmak üzere altı kategorik özellik bulunmaktadır.

1. Alış Fiyatı – düşük, orta, yüksek, yüksek
2. Bakım Bedeli – düşük, orta, yüksek, yüksek
3. Kapı Sayısı – 2, 3, 4, daha fazla
4. Kişi Sayısı – 2, 4, daha fazla
5. Bagaj – küçük, orta, büyük
6. Güvenlik – düşük, orta, yüksek

Çıktı, unacc, acc, good, vgood olmak üzere dört sınıfa ayrılır.

Bunlar şöyledir:
1. unacc – Kabul edilmeyen
2. acc – Kabul edildi
3. iyi – İyi
4. vgood – Çok İyi

İşlevi üst örnek veri kümesi

def upSampling(data): sklearn.utils'ten import yeniden örnekleme # Çoğunluk Sınıfı Veri Çerçevesi df_majority = data[(data['score']==0)] sample_in_majority = data[data.score == 0].shape[0] # Azınlık Üç etiketin de Sınıf Veri Çerçevesi df_minority_1 = data[(data['score']==1)] df_minority_2 = data[(data['score']==2)] df_minority_3 = data[(data['score'] ==3)] # upsample minority classes df_minority_upsampled_1 = resample(df_minority_1, replace=True, n_samples= samples_in_majority, random_state=42) df_minority_upsampled_2 = resample(df_minority_2, replace=True, n_samples= samples_in_majority, random_state=42) df_minority_upsampled_3 = resample(df_minority_3 , replace=True, n_samples= sample_in_majority, random_state=42) # Çoğunluk sınıfını yukarı örneklenmiş azınlık sınıflarıyla birleştir df_upsampled = pd.concat([df_minority_upsampled_1, df_minority_upsampled_2, df_minority_upsampled_3, df_majority]) return df_upsampled

Girilen verileri okuma ve işlenmiş verileri döndürme işlevi.

def datasetPreProcessing(): # CSV dosyasının içeriğini okuma. csv_url_content = open_url("https://raw.githubusercontent.com/AryanIITJ/pyscriptTut/main/car.csv") data = pd.read_csv(csv_url_content) pyscript.write("headingText", "Veri Kümesinin Ön İşlenmesi.. .") # Bu, HTML DOM'ye mesaj göndermek için kullanılır. # Tüm boş değerlerin kaldırılması data.isna().sum() # Yinelenenlerin tümünün kaldırılması data.drop_duplicates() kolonlar = ['satın alma', 'bakım', 'kapılar', 'insanlar', 'bagaj', 'güvenlik ', 'score'] # Kategorik Veriyi Sayısal Veriye Dönüştürme data['buying'] = data['buying'].replace('low', 0) data['buying'] = data['buying'].replace ('med', 1) data['satın alma'] = data['satın alma'].replace('yüksek', 2) data['satın alma'] = veri['satın alma'].replace('vhigh', 3 ) veri['bakım'] = veri['bakım'].replace('düşük', 0) veri['bakım'] = veri['bakım'].replace('med', 1) veri['bakım' ] = veri['bakım'].replace('yüksek', 2) veri['bakım'] = veri['bakım'].replace('vhigh', 3) veri['kapılar'] = veri['kapılar '].replace('2', 0) veri['kapılar'] = veri['kapılar'].replace('3', 1) veri['kapılar'] = veri['kapılar'].replace(' 4', 2) veri['kapılar'] = veri['kapılar'].replace('5more', 3) veri['kişi'] = veri['kişi'].replace('2', 0) veri ['people'] = data['people'].replace('4', 1) data['people'] = data['people'].replace('more', 2) data['bagaj'] = veri['bagaj' ].replace('küçük', 0) veri['bagaj'] = veri['bagaj'].replace('med', 1) veri['bagaj'] = veri['bagaj'].replace('büyük ', 2) veri['güvenlik'] = veri['güvenlik'].replace('düşük', 0) veri['güvenlik'] = veri['güvenlik'].replace('med', 1) veri[ 'güvenlik'] = veri['güvenlik'].replace('yüksek', 2) veri['score'] = veri['score'].replace('unacc', 0) veri['score'] = veri ['score'].replace('acc', 1) data['score'] = data['score'].replace('good', 2) data['score'] = data['score']. replace('vgood', 3) upsampled_data = upSampling(veri) upsampled_data döndür

Yukarıdaki işlevleri daha ayrıntılı olarak anlayalım:

1. İlk olarak Pandas kütüphanesini kullanarak CSV Dosyasını okuduk.

2. Bu satır kafanız karışmış olabilir py script.write(“headingText”, “Veri Kümesinin Ön İşleme Alınması…”).

Bu kod, yukarıda oluşturduğumuz HTML DOM'deki iletiler bileşenini günceller.

Herhangi bir HTML Etiketine herhangi bir mesaj yazabilirsiniz.

py komut dosyası.write(, )

3. Ardından, boş değerleri ve kopyaları kaldırdık. Ama neyse ki, bu veri kümesi herhangi bir boş değer içermiyor.

4. Ayrıca tüm kategorik verileri sayısal verilere dönüştürdük.

5. Son olarak, veri setinin örneklemesini gerçekleştirdik.

Belirli bir sınıftaki örnek sayısının diğer sınıflara göre çok daha fazla olduğunu gözlemleyebilirsiniz. Modelimiz belirli bir sınıfa yönelik olacaktır çünkü diğer sınıflarda eğitmek için çok az veriye sahiptir.

Bu yüzden diğer sınıflardaki örnek sayısını artırmamız gerekiyor. Ayrıca Örnekleme olarak da adlandırılır.

adında ayrı bir fonksiyon yarattım. yukarıÖrnekleme bu verileri örnekleyecektir.

Şimdi tüm sınıflar için eşit sayıda örneğimiz var.

Modeli Eğitmek

Kullanıcı tarafından eğitim için hangi makine öğrenimi modelinin seçildiğini kontrol etme işlevi.

def model_selection(): selectedModel = document.querySelector('input[name="modelSelection"]:checked').value; eğer seçiliModel == "rf": document.getElementById("selectedModelContentBox").innerText = "Rastgele Orman Sınıflandırıcısı"; return RandomForestClassifier(n_estimators=100) elif selectedModel == "lr": document.getElementById("selectedModelContentBox").innerText = "Lojistik Regresyon"; return LogisticRegression() elif selectedModel == "gb": document.getElementById("selectedModelContentBox").innerText = "Gradient Boosting Classifier"; dönüş GradientBoostingClassifier(n_estimators=100, learning_rate=1.0, max_depth=1, random_state=0) else: document.getElementById("selectedModelContentBox").innerText = "MLP Sınıflandırıcı"; MLPClassifier() döndür

Modeli seçilen sınıflandırıcı üzerinde eğitme işlevi.

def sınıflandırıcı(model, X_train, X_test, y_train, y_test): clf = model clf.fit(X_train, y_train) y_pred = clf.predict(X_test) y_score = clf.fit(X_train, y_train) acc_score = doğruluk_score(y_test, y_) ) f1Score = f1_score(y_test, y_pred, ortalama='ağırlıklı') acc_score, model, f1Score döndür

Aşağıdaki işlev, kullanıcı tren düğmesine tıkladığında tetiklenir.

def trainModel(e=None): globaltrained_modelprocessed_data = datasetPreProcessing() # Test Bölmeyi kullanıcı tarafından bir girdi olarak alın test_split = float(document.getElementById("test_split").value)

    # Test bölümü 1'den büyük veya 0'dan küçükse bir hata atarız. test_split > 1 veya test_split < 0 ise: pyscript.write("headingText", "Test Bölmeyi 0 ile 1 arasında seçin") return document.getElementById("testSplitContentBox").innerText = test_split; X = işlenmiş_veri[['satın alma', 'bakım', 'kapılar', 'insanlar', 'bagaj', 'güvenlik']] y = işlenmiş_data['score'] # Veri Kümesini eğitim ve teste ayırma. X_train, X_test, y_train, y_test = train_test_split(X, y, test_size=test_split, random_state=42) # Aşağıdaki işlev, kullanıcı tarafından seçilen sınıflandırma modelini döndürür model = model_selection() pyscript.write("headingText", "Model Training Started...") acc_score, training_model, f1Score = classifier(model, X_train, X_test, y_train, y_test) pyscript.write("headingText", "Model Training Completed.") # Doğruluk ve f1-puanı değerinin yazılması DOM belgesi.getElementById("accuracyContentBox").innerText = f"{round(acc_score*100, 2)}%"; document.getElementById("f1ContentBox").innerText = f"{yuvarlak(f1Puan*100, 2)}%"; # Aşağıdaki kod, Model başarıyla eğitildiğinde Model Eğitim Düğmesini etkinleştirmek içindir. Document.getElementById("submitBtn").classList.remove("devre dışı"); document.getElementById("submitBtn").disabled = False; Document.getElementById("trainModelBtn").classList.remove("devre dışı"); document.getElementById("trainModelBtn").disabled = False; e: e.preventDefault() ise False döndürür

Yukarıdaki kodlar kendiliğinden açıklayıcıdır ve koda bazı yorumlar da ekledim.

Modeli Test Etme

Bu bölümde, modelimizi yukarıda tartıştığımız altı parametre üzerinde test edeceğiz.

Modeli test etme işlevi aşağıdadır.

def testModel(e=Yok): buy_price = int(document.getElementById("buying_price").value) maintanence_price = int(document.getElementById("maintanence_price").value) kapılar = int(document.getElementById("kapılar") .value) kişi = int(document.getElementById("persons").value) bagaj = int(document.getElementById("bagaj").value) güvenlik = int(document.getElementById("güvenlik").value) arr = np.array([satın alma_fiyatı, bakım_fiyatı, kapılar, kişiler, bagaj, güvenlik]).astype('float32') arr = np.expand_dims(dizi, eksen=0) sonuç = eğitimli_model.predict(dizi) koşul = "" ise sonuç[0] == 0: koşul = "Kabul edilmedi" elif sonucu[0] == 1: koşul = "Kabul edildi" elif sonucu[0] == 2: koşul = "İyi" başka: koşul = "Çok İyi" metin yazısı .write("resultText", f"Tahmini Değer: {condition}") eğer e: e.preventDefault() False döndürürse

İlk olarak, kullanıcıdan gelen girdiyi ve tahmin için modele giren feed'i alacağız. Son olarak, sonuçları çıkarıyoruz.

Makine öğrenimi modelimiz artık eğitilmiştir.

Son olarak, HTML Düğmelerine tıklayarak Python işlevlerini tetiklemek için aşağıdaki kodu ekleyin.

Document.getElementById("submitBtn").onclick = testModel document.getElementById("trainModelBtn").onclick = trainModel

PyScript.js ile ilgili sonuç

PyScript.js'den önce, istemci tarafında Python'u kullanmak için uygun bir aracımız yok. Django veya Flask gibi çerçeveler esas olarak arka uçta Python kullanabilir. Son yıllarda, Python nüfusunu son derece artırdı. Makine Öğrenimi, Yapay Zeka, Robotik vb. alanlarda kullanılmıştır.

Bu yazımızda bir makine öğrenme modelini tamamen HTML dilinde eğittik ve test ettik. Bazı hiper parametreleri ayarlayarak veya kullanarak en iyi parametreleri arayarak modelin doğruluğunu artırabilirsiniz. Izgara Arama Özgeçmişi or Rastgele Arama Özgeçmişi.

Bu makalenin ana odak noktası, yüksek doğrulukta bir sınıflandırma modeli elde etmek değil, PyScript.js kitaplığını kullanmaktır.

Bu PyScript.js öğreticisinin temel çıkarımları şunlardır:

1. İlk olarak, HTML şablonundaki pyscript.js kitaplığını içe aktardık ve temel bir python kodu çalıştırdık.

2. HTML DOM'da gerekli tüm bileşenleri oluşturduk.

3. Ayrıca, veri seti ön işlemesini gerçekleştirdik ve modeli kullanıcı seçimine göre eğittik.

4. Son olarak, kullanıcının girdisine göre modeli test etmek için kodu yazdık.

Bu makalede gösterilen medya Analytics Vidhya'ya ait değildir ve Yazarın takdirine bağlı olarak kullanılır.

İlgili bağlantılar