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.
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.
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.
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.
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.