Denna artikel publicerades som en del av Data Science Blogathon.

Introduktion på PyScript.js

Det är ett front-end-ramverk som möjliggör användning av Python i webbläsaren. Den är utvecklad med Emscripten, Pyodide, WASM och andra moderna webbteknologier.

Att använda Python i webbläsaren betyder inte att det kan ersätta Javascript. Men det ger mer bekvämlighet och flexibilitet för Python-utvecklarna, särskilt maskininlärningsingenjörer.

Vad erbjuder PyScript?

1. Program kan kommunicera mellan Python- och Javascript-objekt.
2. Det kräver inga servrar eller dedikerad hårdvara för hosting.
3. Vi kan inkludera alla nödvändiga filer eller paket i python-miljön.
4. Det stöder användningen av populära pythonbibliotek som Numpy och Pandas.
5. Det ger flexibilitet till utvecklarna. Nu kan de snabbt bygga sina python-program med de befintliga UI-komponenterna som knappar och behållare.

Den här handledningen visar hur vi kan skapa vår maskininlärningsmodell med ett webbgränssnitt med PyScript.

Vi kommer att använda den berömda Datauppsättning för bilutvärdering att förutsäga bilens tillstånd baserat på de sex kategoriska egenskaperna. Vi kommer att diskutera datamängden senare men börja först med att ställa in pysscript.js-biblioteket

.Låt oss komma igång, 😉

Konfigurera PyScript.js

Det här avsnittet kommer att ställa in vår HTML-mall och inkluderar biblioteket pyscript.js.

Vi kommer att använda VSCode här, men du kan välja vilken IDE som helst.

1. Skapa en katalog som heter som PyscriptTut.

$ mkdir PyscriptTut $ cd PyscriptTut

2. Skapa en HTML-mall

Skapa en HTML-mall inuti den med namnet index.html

Inuti den här mallen, placera start-HTML-koden och Bootstrap CDN används för att styla webbsidan

PyScript installation

Vi kommer inte att installera biblioteket på vår maskin, vi kommer att importera biblioteket direkt från PyScript-webbplatsen.

Lägg till koden nedan i avsnittet i din HTML-mall.

Viktigt

Du måste använda en lokal server för att köra HTML-koden. Annars kan du få problem med att importera flera bibliotek i en python-miljö.

Om du försöker öppna webbsidan genom att dubbelklicka på filen index.html (som denna file:///home/../…/JavaScript/src/index.js), kan du få ett felmeddelande om CORS-policy vid import biblioteken, eftersom ES6-modulerna omfattas av samma ursprungspolicy.

Om du använder VSCode kan du använda dess Live server Förlängning.

Eller så kan du också skapa en python-server som skriver kommandot nedan i terminalen

$ python3 -m http.server

Du kan komma åt din HTML-sida på den webbadressen – http://127.0.0.1:8080/index.html

Exempelkod

Du kan prova den här exempelkoden för att kontrollera om PyScript har importerats eller inte.

print("Välkommen till handledning för puskript") för i in range(1, 10): print(i) Detta är ett enkelt program som skriver ut numret från 1 till 9 med en for-loop.

Om allt går bra ser resultatet ut så

Hurra 🎉, vårt PyScript-bibliotek har installerats framgångsrikt i vår mall.

Skapar GUI

Det här avsnittet kommer att skapa ett webbgränssnitt för att använda vår maskininlärningsmodell för utbildning och testning.

Som nämnts ovan kommer vi att använda Bootstrap Library för att skapa anpassad styling. Jag har också använt inline CSS på vissa ställen.

1. Lägg till Google Fonts CDN

Lägg till koden nedan i avsnittet av din HTML-mall. Detta kommer att lägga till montserrat teckensnitt till vår webbsida.

2. Viss CSS-konfiguration

Lägg till koden nedan i din mall. Det kommer att möjliggöra smidig rullning på vår webbsida och tillämpa ovanstående teckensnitt.

    * { marginal: 0; stoppning: 0; } html { rullningsbeteende: jämn; } body { font-family: 'Montserrat', sans-serif; }

3. Lägga till Bootstrap Navbar-komponent

Lägg till den här koden i avsnittet för att tillämpa ett navigeringsfält.

4. Lägga till rubrikinnehåll

Vi kommer att skapa en liten landningssida med lite texter och bilder.

 Datauppsättning för bilutvärdering Ett val att köpa eller inte köpa en bil baserat på dess fysiska kvalifikationer. 

Källan till bilden som används i den här komponenten kan hittas här..

5. Komponent för att träna modellen

I den här komponenten kommer vi att skapa några radioknappar och inmatningstexter, så att användare kan välja vilken klassificerare de vill träna och hur många tester delas upp.

Utbildning av modell

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

värde=”rf” markerad>

Slumpmässig skog

Logistisk återgång

MLP-klassificerare

Gradientförstärkning

6. Komponent för varningsmeddelanden

Den här komponenten används för varningar och framgångsmeddelanden.

7. Komponent för kontroll av träningsresultaten

I detta kan vi se noggrannheten och viktade F1-poängen för den valda modellen efter träning.

Träningssammanfattning

Vald modell:

Ej tillgänglig

Testdelning:

Ej tillgänglig

Noggrannhetspoäng:

Ej tillgänglig

Viktad F1-poäng:

Ej tillgänglig

8. Komponent för val av bilparametrar

Vi kan välja de sex parametrarna för att kontrollera bilens prestanda.

Bilparametrar Köppris Mycket hög (över 75 lakh) Hög (cirka 20lakh) Meduim (cirka 2 lakh) Låg (under 2 lakh) Underhållspris Mycket hög (4-3 LPA eller högre) Hög (cirka 15 LPA) Meduim (cirka 2 LPA) Låg (under 10k per år) Nej.  av dörrar 0 2 1 >=3 Nej. 

Smakämnen Skicka kommer att förbli inaktiverad tills du tränar modellen.

9. Komponent för att mata ut resultatet

Den här komponenten visar det förutsagda värdet.

10. Sidfot (valfritt)

Detta är sidfoten till vår webbsida

 Tillverkad med ❤ med PyScript.js

Vårt GUI är nu skapat, ✌

Liten anmärkning

Från och med nu kommer vi att träna vår maskininlärningsmodell. Vi måste lägga till bibliotek i Python-miljön

Lägg till koden nedan i taggen för HTML-mallen för att importera alla nödvändiga icke-standardbibliotek.

    - pandor - scikit-learn - numpy

Skapa en tagg inuti taggen för HTML-mallen. Vi kommer att skriva alla python-koder inuti den py-script-taggen.

Importerar bibliotek

Först kommer vi att importera alla nödvändiga bibliotek

Dataset förbearbetning

Som diskuterats tidigare kommer vi att använda Car Evaluation Dataset från UCI ML Repository.

Du kan ladda ner datamängden från den länk.

Denna datauppsättning innehåller sex kategoriska funktioner, som är inköpspris, underhållspris, antal dörrar, antal personer, bagagekapacitet och säkerhetskvalifikationer

1. Inköpspris – låg, medel, hög, hög
2. Underhållspris – låg, medel, hög, hög
3. Antal dörrar – 2, 3, 4, fler
4. Antal personer – 2, 4, fler
5. Bagage – litet, medelstort, stort
6. Säkerhet – låg, medel, hög

Utgången klassificeras i fyra klasser, nämligen unacc, acc, good, vgood

Dessa är följande:
1. unacc – Ej accepterat
2. acc – Godkänd
3. bra – Bra
4. vgood – Mycket bra

Funktion till Uppprov datamängden

def upSampling(data): från sklearn.utils importera omsampling # Majority Class Dataframe df_majority = data[(data['score']==0)] samples_in_majority = data[data.score == 0].shape[0] # Minoritet Klassdataram för alla tre etiketterna 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= samples_in_majority, random_state=42) # Kombinera majoritetsklass med upsamplade minoritetsklasser df_upsampled = pd.concat([df_minority_upsampled_1, df_minority_upsampled_2, df_minority_upsampled_3,_ups_minority_ups) return

Funktion för att läsa indata och returnera bearbetade data.

def datasetPreProcessing(): # Läser innehållet i CSV-filen. csv_url_content = open_url("https://raw.githubusercontent.com/AryanIITJ/pyscriptTut/main/car.csv") data = pd.read_csv(csv_url_content) pyscript.write("headingText", "Förbearbetar datamängden. ."") # Detta används för att skicka meddelanden till HTML DOM. # Ta bort alla nullvärden data.isna().sum() # Ta bort alla dubbletter data.drop_duplicates() coloumns = ['köper', 'underhåll', 'dörrar', 'människor', 'bagage', 'säkerhet ', 'score'] # Konvertera kategorisk data till numerisk datadata['köpa'] = data['köpa'].replace('low', 0) data['köpa'] = data['köpa'].ersätta ('med', 1) data['köpa'] = data['köpa'].replace('high', 2) data['köpa'] = data['köpa'].replace('vhigh', 3 ) data['maint'] = data['maint'].replace('low', 0) data['maint'] = data['maint'].replace('med', 1) data['maint' ] = data['maint'].replace('high', 2) data['maint'] = data['maint'].replace('vhigh', 3) data['doors'] = data['doors' '].replace('2', 0) data['doors'] = data['doors'].replace('3', 1) data['doors'] = data['doors'].replace(' 4', 2) data['doors'] = data['doors'].replace('5more', 3) data['people'] = data['people'].replace('2', 0) data ['people'] = data['people'].replace('4', 1) data['people'] = data['people'].replace('more', 2) data['lgaage'] = data['bagage' ].replace('small', 0) data['lgaage'] = data['lgaage'].replace('med', 1) data['lgaage'] = data['lgaage'].replace('big ', 2) data['safety'] = data['safety'].replace('low', 0) data['safety'] = data['safety'].replace('med', 1) data[ 'safety'] = data['safety'].replace('high', 2) data['score'] = data['score'].replace('unacc', 0) data['score'] = data ['score'].replace('acc', 1) data['score'] = data['score'].replace('good', 2) data['score'] = data['score']. replace('vgood', 3) upsampled_data = upSampling(data) returnera upsampled_data

Låt oss förstå dessa funktioner ovan mer i detalj:

1. För det första har vi läst CSV-filen med hjälp av Pandas bibliotek.

2. Du kan bli förvirrad av den här raden py script.write(“headingText”, “Förbearbetar datamängden...”).

Den här koden uppdaterar meddelandekomponenten i HTML DOM som vi har skapat ovan.

Du kan skriva vilket meddelande som helst i vilken HTML-tag som helst

py script.write(, )

3. Sedan har vi tagit bort nollvärdena och dubbletterna. Men som tur är innehåller denna datauppsättning inga nollvärden.

4. Vidare har vi omvandlat alla kategoriska data till numeriska data.

5. Slutligen har vi utfört uppsampling av datasetet.

Du kan observera att antalet prover i en viss klass är mycket fler än i de andra klasserna. Vår modell kommer att vara partisk mot en specifik klass eftersom den har väldigt lite data att träna på andra klasser.

Så vi måste öka antalet prover i andra klasser. Det kallas också för Upsampling.

Jag har skapat en separat funktion som heter upSampling som kommer att sampla upp data.

Nu har vi lika många prover för alla klasser.

Träna modellen

Funktion för att kontrollera vilken maskininlärningsmodell som valts av användaren för utbildning.

def model_selection(): selectedModel = document.querySelector('input[name="modelSelection"]:checked').value; if selectedModel == "rf": document.getElementById("selectedModelContentBox").innerText = "Random Forest Classifier"; return RandomForestClassifier(n_estimators=100) elif selectedModel == "lr": document.getElementById("selectedModelContentBox").innerText = "Logistisk regression"; return LogisticRegression() elif selectedModel == "gb": document.getElementById("selectedModelContentBox").innerText = "Gradient Boosting Classifier"; return GradientBoostingClassifier(n_estimators=100, learning_rate=1.0, max_depth=1, random_state=0) else: document.getElementById("selectedModelContentBox").innerText = "MLP Classifier"; returnera MLPClassifier()

Funktion för att träna modellen på den valda klassificeraren.

def classifier(modell, X_train, X_test, y_train, y_test): clf = modell clf.fit(X_train, y_train) y_pred = clf.predict(X_test) y_score = clf.fit(X_train, y_train) acc_score = accuracy_scorey(y_test, y_pred ) f1Score = f1_score(y_test, y_pred, average='weighted') return acc_score, model, f1Score

Funktionen nedan utlöses när användaren klickar på tågknappen.

def trainModel(e=None): global trained_model processed_data = datasetPreProcessing() # Ta testdelningen som en indata av användaren test_split = float(document.getElementById("test_split").value)

    # Om testdelningen är större än 1 eller mindre än 0 kommer vi att skicka ett fel. om test_split > 1 eller test_split < 0: pyscript.write("headingText", "Välj testdelning mellan 0 till 1") returnera document.getElementById("testSplitContentBox").innerText = test_split; X = processed_data[['köpa', 'underhåll', 'dörrar', 'människor', 'bagage', 'säkerhet']] y = processed_data['poäng'] # Dela upp datamängden i träning och testning. X_train, X_test, y_train, y_test = train_test_split(X, y, test_size=test_split, random_state=42) # Funktionen nedan kan returnera klassificeringsmodellen som valts av användarmodellen = model_selection() pyscript.write("headingText", "Model Training Startade...") acc_score, trained_model, f1Score = classifier(model, X_train, X_test, y_train, y_test) pyscript.write("headingText", "Model Training Completed.") # Skriver värdet av noggrannhet och f1-poäng till DOM-dokumentet.getElementById("accuracyContentBox").innerText = f"{round(acc_score*100, 2)}%"; document.getElementById("f1ContentBox").innerText = f"{round(f1Score*100, 2)}%"; # Koden nedan är för att aktivera modellträningsknappen när modellen har tränats framgångsrikt. document.getElementById("submitBtn").classList.remove("disabled"); document.getElementById("submitBtn").disabled = Falskt; document.getElementById("trainModelBtn").classList.remove("disabled"); document.getElementById("trainModelBtn").disabled = Falskt; if e: e.preventDefault() returnerar False

Ovanstående koder är självförklarande, och jag har även lagt till några kommentarer till koden.

Testa modellen

I det här avsnittet kommer vi att testa vår modell på de sex parametrar som vi har diskuterat ovan.

Nedan finns funktionen för att testa modellen.

def testModel(e=None): buying_price = int(document.getElementById("buying_price").value) maintanence_price = int(document.getElementById("maintanence_price").value) doors = int(document.getElementById("doors") .value) personer = int(document.getElementById("personer").value) bagage = int(document.getElementById("luggage").value) säkerhet = int(document.getElementById("säkerhet").värde) arr = np.array([köppris, underhållspris, dörrar, personer, bagage, säkerhet]).astype('float32') arr = np.expand_dims(arr, axis=0) result = trained_model.predict(arr) condition = "" if resultat[0] == 0: skick = "Ej accepterat" elif resultat[0] == 1: skick = "Accepterat" elif resultat[0] == 2: skick = "Bra" else: condition = "Mycket bra" skrift .write("resultText", f"Predicted Value: {condition}") if e: e.preventDefault() returnerar False

Först kommer vi att ta input från användaren och flödet som input till modellen för förutsägelse. Sedan lägger vi äntligen ut resultaten.

Vår maskininlärningsmodell är nu utbildad.

Lägg slutligen till koden nedan för att aktivera Python-funktionerna genom att klicka på HTML-knapparna.

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

Slutsats om PyScript.js

Innan PyScript.js har vi inget lämpligt verktyg för att använda Python på klientsidan. Ramar som Django eller Flask kan huvudsakligen använda Python på backend. Under de senaste åren har Python ökat sin befolkning enormt. Det har använts inom maskininlärning, artificiell intelligens, robotik, etc.

I den här artikeln har vi tränat och testat en maskininlärningsmodell helt i HTML-språk. Du kan öka modellens noggrannhet genom att justera några hyperparametrar eller söka efter de bästa parametrarna med Rutnätssökning CV or Randomized Search CV.

Huvudfokus i den här artikeln är att använda PyScript.js-biblioteket, inte att uppnå en klassificeringsmodell med hög noggrannhet.

De viktigaste aspekterna av denna PyScript.js-handledning är:

1. För det första har vi importerat pyscript.js-biblioteket i HTML-mallen och kört en grundläggande python-kod.

2. Vi har skapat alla nödvändiga komponenter i HTML DOM.

3. Vidare har vi utfört förbearbetning av dataset och tränat modellen enligt användarval.

4. Slutligen har vi skrivit koden för att testa modellen baserat på användarens input.

Medierna som visas i den här artikeln ägs inte av Analytics Vidhya och används efter författarens gottfinnande.

Relaterad