Zephyrnet-Logo

Erstellen Sie erstaunliche Data Science-Projekte mit PyScript.js

Datum:

Dieser Artikel wurde als Teil des veröffentlicht Data-Science-Blogathon.

Einführung in PyScript.js

Es ist ein Front-End-Framework, das die Verwendung von ermöglicht Python im Browser. Es wird mit Emscripten, Pyodide, WASM und anderen modernen Webtechnologien entwickelt.

Die Verwendung von Python im Browser bedeutet nicht, dass es Javascript ersetzen kann. Aber es bietet den Python-Entwicklern, insbesondere den Ingenieuren für maschinelles Lernen, mehr Komfort und Flexibilität.

Welche PyScript-Angebote?

1. Programme können zwischen Python- und Javascript-Objekten kommunizieren.
2. Es sind keine Server oder dedizierte Hardware für das Hosting erforderlich.
3. Wir können alle erforderlichen Dateien oder Pakete in die Python-Umgebung aufnehmen.
4. Es unterstützt die Verwendung beliebter Python-Bibliotheken wie Numpy und Pandas.
5. Es bietet den Entwicklern Flexibilität. Jetzt können sie ihre Python-Programme schnell mit den vorhandenen UI-Komponenten wie Schaltflächen und Containern erstellen.

Dieses Tutorial zeigt Ihnen, wie wir unser maschinelles Lernmodell mit einer Web-GUI mit PyScript erstellen können.

Wir werden das berühmte verwenden Fahrzeugbewertungsdatensatz um den Zustand des Autos basierend auf den sechs kategorialen Merkmalen vorherzusagen. Wir werden den Datensatz später besprechen, aber beginnen Sie zunächst mit der Einrichtung der pysscript.js-Bibliothek

.Fangen wir an, 😉

Einrichten von PyScript.js

Dieser Abschnitt richtet unsere HTML-Vorlage ein und enthält die pyscript.js-Bibliothek.

Wir werden hier VSCode verwenden, aber Sie können eine beliebige IDE auswählen.

1. Erstellen Sie ein Verzeichnis namens as PyskriptTut.

$ mkdir PyscriptTut $ cd PyscriptTut

2. Erstellen einer HTML-Vorlage

Erstellen Sie darin eine HTML-Vorlage mit dem Namen index.html

Platzieren Sie in dieser Vorlage den Starter-HTML-Code und Bootstrap CDN wird zum Gestalten der Webseite verwendet

PyScript-Installation

Wir werden die Bibliothek nicht auf unserem Computer installieren, wir werden die Bibliothek direkt von der PyScript-Website importieren.

Fügen Sie den folgenden Code in die Abschnitt Ihrer HTML-Vorlage.

Wichtiger Hinweis

Sie müssen einen lokalen Server verwenden, um den HTML-Code auszuführen. Andernfalls können Probleme beim Importieren mehrerer Bibliotheken in einer Python-Umgebung auftreten.

Wenn Sie versuchen, die Webseite durch Doppelklicken auf die Datei index.html (wie diese Datei:///home/../…/JavaScript/src/index.js) zu öffnen, erhalten Sie beim Importieren möglicherweise einen Fehler der CORS-Richtlinie die Bibliotheken, da die ES6-Module der Same-Origin-Policy unterliegen.

Wenn Sie VSCode verwenden, können Sie dessen verwenden Live-Server Erweiterung.

Oder Sie können auch einen Python-Server erstellen, indem Sie den folgenden Befehl im Terminal schreiben

$ python3 -m http.server

Sie können über diese URL auf Ihre HTML-Seite zugreifen – http://127.0.0.1:8080/index.html

Beispielcode

Sie können diesen Beispielcode ausprobieren, um zu überprüfen, ob das PyScript erfolgreich importiert wurde oder nicht.

print("Willkommen beim Puscript-Tutorial") für i in range(1, 10): print(i) Dies ist ein einfaches Programm, das die Zahl von 1 bis 9 mithilfe einer for-Schleife ausgibt.

Wenn alles gut geht, sieht die Ausgabe so aus

Hurra 🎉, unsere PyScript-Bibliothek ist erfolgreich in unserem Template installiert.

GUI erstellen

In diesem Abschnitt wird eine Web-GUI erstellt, um unser maschinelles Lernmodell für Schulungen und Tests zu verwenden.

Wie oben erwähnt, verwenden wir die Bootstrap-Bibliothek zum Erstellen benutzerdefinierter Stile. An einigen Stellen habe ich auch Inline-CSS verwendet.

1. Google Fonts-CDN hinzufügen

Fügen Sie den folgenden Code in den Abschnitt Ihrer HTML-Vorlage ein. Dies wird hinzugefügt Montserrat Schriftart auf unserer Webseite.

2. Etwas CSS-Konfiguration

Fügen Sie Ihrer Vorlage den folgenden Code hinzu. Es ermöglicht reibungsloses Scrollen auf unserer Webseite und wendet die obige Schriftart an.

    * {Rand: 0; Polsterung: 0; } html { Scroll-Verhalten: glatt; } body { Schriftfamilie: 'Montserrat', serifenlos; }

3. Hinzufügen der Bootstrap Navbar-Komponente

Fügen Sie diesen Code im Abschnitt hinzu, um eine Navigationsleiste anzuwenden.

<button class=“navbar-toggler“ type=“button“ data-toggle=“collapse“ data-target=“#navbarSupportedContent“

aria-controls=“navbarSupportedContent“ aria-expanded=“false“ aria-label=“Toggle navigation“>

4. Hinzufügen von Überschrifteninhalten

Wir werden eine kleine Zielseite mit einigen Texten und Bildern erstellen.

 Fahrzeugbewertungsdatensatz Eine Entscheidung, ein Auto zu kaufen oder nicht zu kaufen, basierend auf seinen körperlichen Qualifikationen. 

Die Quelle des in dieser Komponente verwendeten Bildes kann gefunden werden hier.

5. Komponente zum Trainieren des Modells

In dieser Komponente erstellen wir einige Optionsfelder und Eingabetexte, damit Benutzer auswählen können, welchen Klassifikator sie trainieren möchten und wie viele Tests aufgeteilt werden.

Ausbildung des Modells

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

value="rf" geprüft>

Zufälliger Wald

Logistische Regression

MLP-Klassifikator

Gradientenverstärkung

Antworten Sie zwischen 0 und 1.


Gradientenverstärkung
Quelle – Autor

6. Komponente für Warnmeldungen

Diese Komponente wird für Alerts und Erfolgsmeldungen verwendet.


    

7. Komponente zur Überprüfung der Trainingsergebnisse

Darin können wir die Genauigkeit und den gewichteten F1-Score des ausgewählten Modells nach dem Training sehen.

Trainingszusammenfassung

Ausgewähltes Modell:

Nicht verfügbar

Testaufteilung:

Nicht verfügbar

Genauigkeitsbewertung:

Nicht verfügbar

Gewichtete F1-Punktzahl:

Nicht verfügbar


8. Komponente zum Auswählen von Fahrzeugparametern

Wir können die sechs Parameter auswählen, um die Leistung des Autos zu überprüfen.

Fahrzeugparameter Kaufpreis Sehr hoch (über 75 Lakh) Hoch (ca. 20 Lakh) Meduim (ca. 2 Lakh) Niedrig (unter 2 Lakh) Wartungspreis Sehr hoch (4-3 LPA oder höher) Hoch (ca. 15 LPA) Mittel (ca. 2 LPA) Niedrig (unter 10 pro Jahr) Nein.  von Türen 0 2 1 >=3 Nein. 
Komponente zur Auswahl von Fahrzeugparametern

Das Absenden bleibt deaktiviert, bis Sie das Modell trainieren.

9. Komponente zur Ausgabe des Ergebnisses

Diese Komponente zeigt den vorhergesagten Wert an.


    

10. Fußzeile (optional)

Dies ist die Fußzeile unserer Webseite

 Erstellt mit ❤ unter Verwendung von PyScript.js

Unsere GUI ist jetzt erstellt, ✌

Kleine Anmerkung

Ab jetzt trainieren wir unser Machine-Learning-Modell. Wir müssen Bibliotheken in der Python-Umgebung hinzufügen

Fügen Sie den folgenden Code in das Tag der HTML-Vorlage ein, um alle erforderlichen nicht standardmäßigen Bibliotheken zu importieren.

    - pandas - scikit-lernen - numpy

Erstellen Sie ein Tag innerhalb des Tags der HTML-Vorlage. Wir werden alle Python-Codes in dieses py-script-Tag schreiben.

Bibliotheken importieren

Zuerst werden wir alle notwendigen Bibliotheken importieren

Pandas als pd importieren

Gurke importieren

aus sklearn.model_selection import train_test_split, GridSearchCV

aus sklearn.linear_model import LogisticRegression

aus sklearn.ensemble import RandomForestClassifier, GradientBoostingClassifier

aus sklearn.neural_network MLPClassifier importieren

aus sklearn.metrics import precision_score, f1_score

von pyodide.http importiere open_url

numpy als np importieren


Datensatzvorverarbeitung

Wie bereits erwähnt, verwenden wir den Car Evaluation Dataset aus dem UCI ML Repository.

Dort können Sie den Datensatz herunterladen Link.

Dieser Datensatz enthält sechs kategoriale Merkmale: Kaufpreis, Wartungspreis, Anzahl der Türen, Anzahl der Personen, Gepäckkapazität und Sicherheitsqualifikationen

1. Kaufpreis – niedrig, mittel, hoch, hoch
2. Wartungspreis – niedrig, mittel, hoch, hoch
3. Anzahl der Türen – 2, 3, 4, mehr
4. Anzahl der Personen – 2, 4, mehr
5. Gepäck – klein, mittel, groß
6. Sicherheit – niedrig, mittel, hoch

Die Ausgabe wird in vier Klassen eingeteilt, nämlich unacc, acc, good, vgood

Dies sind wie folgt:
1. unacc – Nicht akzeptiert
2. gem – Akzeptiert
3. gut – Gut
4. vgut – Sehr gut

Funktion zu Upsampling der Datensatz

def upSampling(data): from sklearn.utils import resample # Majority Class Dataframe df_majority = data[(data['score']==0)] Samples_in_majority = data[data.score == 0].shape[0] # Minority Class Dataframe aller drei Labels df_minority_1 = data[(data['score']==1)] df_minority_2 = data[( data['score']==2)] df_minority_3 = data[(data['score']==3)] # upsample Minderheitsklassen 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) # Kombiniere Mehrheitsklasse mit hochgetasteten Minderheitsklassen df_upsampled = pd.concat([df_minority_upsampled_1, df_minor ity_upsampled_2, df_minority_upsampled_3, df_majority]) geben df_upsampled zurück

Funktion zum Lesen von Eingabedaten und Zurückgeben verarbeiteter Daten.

def datasetPreProcessing(): # Lesen des Inhalts der CSV-Datei. csv_url_content = open_url("https://raw.githubusercontent.com/AryanIITJ/pyscriptTut/main/car.csv") data = pd.read_csv(csv_url_content) pyscript.write("headingText", "Pre-Processing the Dataset.. .") # Dies wird verwendet, um Nachrichten an das HTML-DOM zu senden. # Alle Nullwerte entfernen data.isna().sum() # Alle Duplikate entfernen data.drop_duplicates() columns = ['buying', 'maint', 'doors', 'people', 'gepäck', 'safety ', 'score'] # Konvertieren von kategorialen Daten in numerische Daten data['buying'] = data['buying'].replace('low', 0) data['buying'] = data['buying'].replace ('med', 1) data['buying'] = data['buying'].replace('high', 2) data['buying'] = data['buying'].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 ['Personen'] = Daten['Personen'].Ersetzen('4', 1) Daten['Personen'] = Daten['Personen'].Ersetzen('Mehr', 2) Daten['Gepäck'] = data['Gepäck' ].replace('klein', 0) data['gepäck'] = data['gepäck'].replace('med', 1) data['gepäck'] = data['gepäck'].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) gibt upsampled_data zurück

Lassen Sie uns diese obigen Funktionen genauer verstehen:

1. Zuerst haben wir die CSV-Datei mit der Pandas-Bibliothek gelesen.

2. Diese Zeile könnte Sie verwirren py script.write("headingText", "Datensatz vorverarbeiten…").

Dieser Code aktualisiert die Nachrichtenkomponente im HTML-DOM, das wir oben erstellt haben.

Sie können jede Nachricht in jedes HTML-Tag schreiben

py script.write(, )

3. Dann haben wir die Nullwerte und die Duplikate entfernt. Aber zum Glück enthält dieser Datensatz keine Nullwerte.

4. Außerdem haben wir alle kategorialen Daten in numerische Daten umgewandelt.

5. Schließlich haben wir ein Upsampling des Datensatzes durchgeführt.

Lassen Sie uns diese obigen Funktionen genauer verstehen:
Quelle – Autor

Sie können beobachten, dass die Anzahl der Proben in einer bestimmten Klasse weitaus größer ist als in den anderen Klassen. Unser Modell ist auf eine bestimmte Klasse ausgerichtet, da es nur sehr wenige Daten zum Trainieren in anderen Klassen enthält.

Daher müssen wir die Anzahl der Proben in anderen Klassen erhöhen. Es wird auch Upsampling genannt.

Ich habe eine separate Funktion namens erstellt nach obenSampling Dadurch werden die Daten hochgerechnet.

Lassen Sie uns diese obigen Funktionen genauer verstehen:
Quelle – Autor

Jetzt haben wir eine gleiche Anzahl von Beispielen für alle Klassen.

Das Modell trainieren

Funktion zur Überprüfung, welches Machine-Learning-Modell vom Benutzer für das Training ausgewählt wird.

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 = "Logistische 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"; MLPClassifier() zurückgeben

Funktion zum Trainieren des Modells auf dem ausgewählten Klassifikator.

def classifier(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 = precision_score(y_test, y_pred ) f1Score = f1_score(y_test, y_pred, average='weighted') return acc_score, model, f1Score

Die folgende Funktion wird ausgelöst, wenn der Benutzer auf die Zugschaltfläche klickt.

def trainModel(e=None): global trainiertes_modell processing_data = datasetPreProcessing() # Testsplit als Eingabe des Benutzers übernehmen test_split = float(document.getElementById("test_split").value)
    # Wenn die Testaufteilung größer als 1 oder kleiner als 0 ist, geben wir einen Fehler aus. wenn test_split > 1 oder test_split < 0: pyscript.write("headingText", "Choose Test Split between 0 to 1") return document.getElementById("testSplitContentBox").innerText = test_split; X = verarbeitete_Daten[['Kauf', 'Wartung', 'Türen', 'Menschen', 'Gepäck', 'Sicherheit']] y = verarbeitete_Daten['Punktzahl'] # Aufteilen des Datensatzes in Training und Testen. X_train, script.write("headingText", "Model Training Completed.") # Den Wert der Genauigkeit und des f42-Scores in das DOM schreiben document.getElementById("accuracyContentBox").innerText = f"{round(acc_score*1, 1)}%"; document.getElementById("f100ContentBox").innerText = f"{round(f2Score*1, 1)}%"; # Der folgende Code dient dazu, die Schaltfläche „Modelltraining“ zu aktivieren, wenn das Modell erfolgreich trainiert wurde. document.getElementById("submitBtn").classList.remove("disabled"); document.getElementById("submitBtn").disabled = False; document.getElementById("trainModelBtn").classList.remove("disabled"); document.getElementById("trainModelBtn").disabled = False; wenn e: e.preventDefault() gibt False zurück

Die obigen Codes sind selbsterklärend, und ich habe dem Code auch einige Kommentare hinzugefügt.

Modell testen

In diesem Abschnitt testen wir unser Modell anhand der sechs Parameter, die wir oben besprochen haben.

Unten ist die Funktion zum Testen des Modells.

def testModel(e=None): buy_price = int(document.getElementById("buying_price").value) maintanence_price = int(document.getElementById("maintanence_price").value) doors = int(document.getElementById("doors") .Wert) Personen = int(document.getElementById("Personen").Wert) Gepäck = int(document.getElementById("Gepäck").Wert) Sicherheit = int(document.getElementById("Sicherheit").Wert) arr = np.array([Einkaufspreis, Wartungspreis, Türen, Personen, Gepäck, Sicherheit]).astype('float32') arr = np.expand_dims(arr, axis=0) result = trained_model.predict(arr) condition = "" if result[0] == 0: condition = "Unaccepted" elif result[0] == 1: condition = "Accepted" elif result[0] == 2: condition = "Good" else: condition = "Sehr gut" pyscript .write("resultText", f"Predicted Value: {condition}") if e: e.preventDefault() gibt False zurück

Erstens nehmen wir die Eingabe des Benutzers und den Feed, der diese Eingabe in das Modell zur Vorhersage eingibt. Dann schließlich geben wir die Ergebnisse aus.

Unser maschinelles Lernmodell ist jetzt trainiert.

Fügen Sie schließlich den folgenden Code hinzu, um die Python-Funktionen auszulösen, indem Sie auf die HTML-Schaltflächen klicken.

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

Fazit zu PyScript.js

Vor PyScript.js haben wir kein geeignetes Tool, um Python auf der Clientseite zu verwenden. Frameworks wie Django oder Flask können hauptsächlich Python im Backend verwenden. In den letzten Jahren hat Python seine Population enorm vergrößert. Es wurde in maschinellem Lernen, künstlicher Intelligenz, Robotik usw. verwendet.

In diesem Artikel haben wir ein maschinelles Lernmodell vollständig in HTML-Sprache trainiert und getestet. Sie können die Genauigkeit des Modells erhöhen, indem Sie einige Hyperparameter optimieren oder mithilfe von nach den besten Parametern suchen Grid Search-Lebenslauf or Randomisierter Such-Lebenslauf.

Der Hauptfokus dieses Artikels liegt auf der Verwendung der PyScript.js-Bibliothek, nicht auf dem Erreichen eines hochgenauen Klassifizierungsmodells.

Die wichtigsten Erkenntnisse aus diesem PyScript.js-Tutorial sind:

1. Zuerst haben wir die pyscript.js-Bibliothek in die HTML-Vorlage importiert und einen grundlegenden Python-Code ausgeführt.

2. Wir haben alle erforderlichen Komponenten im HTML-DOM erstellt.

3. Darüber hinaus haben wir eine Datensatzvorverarbeitung durchgeführt und das Modell gemäß der Benutzerauswahl trainiert.

4. Schließlich haben wir den Code geschrieben, um das Modell basierend auf den Eingaben des Benutzers zu testen.

Die in diesem Artikel gezeigten Medien sind nicht Eigentum von Analytics Vidhya und werden nach Ermessen des Autors verwendet.

spot_img

Neueste Intelligenz

spot_img