Python wird häufig für Datenanalysen, maschinelles Lernen, Web Scraping und vieles mehr verwendet. Aber wussten Sie, dass Sie Python-Code auch in HTML ausführen können, um Webanwendungen zu erstellen?

PyScript macht es möglich und ermöglicht es Ihnen, Python-Code in einem Browser auszuführen. Erfahren Sie anhand mehrerer PyScript-HTML-Beispiele, wie Sie Matplotlib-Visualisierungen zu einer Webseite hinzufügen.

Was ist PyScript?

PyScript ist ein Open-Source-Webframework, das lässt Sie Python im Webbrowser ausführen. Es integriert die HTML-Schnittstelle und die Leistungsfähigkeit von Pyodide, WASM und modernen Webtechnologien. PyScript befindet sich derzeit in der Entwicklungsphase, hat aber bereits einige spannende Funktionen. Potenziell könnte es zu einem Werkzeug werden, um leistungsstarke Webanwendungen zu erstellen.

Der in diesem Projekt verwendete Code ist in a GitHub-Repository und steht Ihnen unter der MIT-Lizenz kostenlos zur Verfügung. Wenn Sie sich eine Live-Version dieses Projekts ansehen möchten, können Sie sich die ansehen Liniendiagramm und Balkendiagramm Demos.

instagram viewer

HTML-Boilerplate einrichten

Bevor Sie PyScript verwenden, müssen Sie die Dinge einrichten. Erstellen Sie eine neue HTML-Datei und richten Sie die HTML-Boilerplate ein. Die meisten moderne IDEs bieten die Funktionalität zum automatischen Erstellen von Boilerplates. Sie müssen nur tippen Dok oder html und drücken Sie die Eingabetaste. Sie können auch die folgende Vorlage verwenden, um loszulegen:

<!DOCTYPE html>
<html>
<Kopf>
<Metazeichensatz="utf-8">
<meta http-equiv="X-UA-kompatibel" Inhalt="IE=Rand">
<Titel></title>
<metaname="Bezeichnung" Inhalt="">
<metaname="Ansichtsfenster" Inhalt="width=Gerätebreite, initial-scale=1">
</head>
<Karosserie>

</body>
</html>

Fügen Sie PyScript zu HTML hinzu: "Hello, World!" Verwendung von PyScript

Sie können PyScript in Ihrer HTML-Datei verwenden, indem Sie es entweder herunterladen oder sein CDN in Ihrem HTML-Kopf verlinken. Fügen Sie Folgendes in der hinzu Abschnitt Ihrer HTML-Datei:

<link rel="Stylesheet" href="https://pyscript.net/alpha/pyscript.css" />
<script defer src="https://pyscript.net/alpha/pyscript.js"></script>

Das ist alles, was Sie tun müssen, um PyScript einzurichten.

Um zu überprüfen, ob PyScript erfolgreich integriert wurde, fügen Sie die folgende Codezeile in die Sektion:

<Karosserie>
<py-Skript>drucken("Hallo Welt!")</py-script>
</body>

Öffnen Sie die HTML-Datei in einem beliebigen Webbrowser und Sie werden sehen Hallo Welt! dort gedruckt.

Laden Sie die Matplotlib-Bibliothek

Sie müssen die verwenden -Tags zum Importieren von Python-Modulen. Laden Sie die matplotlib Modul im Abschnitt Ihrer HTML-Datei mit dem folgenden Snippet:

<py-env>
- matplotlib
</py-env>

Zeigen Sie ein Liniendiagramm im Browser mit PyScript an

Ein... kreieren mit einem Ich würde. Du wirst die brauchen Ich würde um es mit dem zu verwenden Ausgang Attribut der Schild.

<div-id="matplotlib-Liniendiagramm"></div>

Sie müssen den Python-Code in die schreiben Schild. Oben zuweisen Ich würde zum Ausgang Attribut der Schild.

<py-script-Ausgabe="matplotlib-Liniendiagramm">
# Python-Code
</py-script>

Sie können jetzt den Python-Code schreiben, um ein Liniendiagramm zu erstellen:

<Karosserie>
<div-id="matplotlib-Liniendiagramm"></div>
<py-script-Ausgabe="matplotlib-Liniendiagramm">
# Python-Code

# Importieren der Matplotlib-Bibliothek
importieren matplotlib.pyplot wie plt
fig, ax = plt.subplots()
# x-Achse
x = ["Python", "C++", "JavaScript", "Golang"]
# y-Achse
y = [10, 5, 9, 7]
plt.plot (x, y, marker='Ö', Linienstil='-', Farbe='b')
# Benennen des x-Labels
plt.xlabel('Sprache')
# Benennen des y-Labels
plt.ylabel('Punktzahl')
# Benennung des Titels der Handlung
plt.title('Sprache vs. Punktzahl')
Feige
</py-script>
</body>

Sie erhalten die folgende Abbildung gerendert, wenn Sie die HTML-Datei im Webbrowser öffnen:

Zeigen Sie mit PyScript ein Balkendiagramm im Browser an

Mit dem folgenden Python-Snippet können Sie im Browser ein Balkendiagramm erstellen:

<Karosserie>
<div-id="Matplotlib-Leiste"></div>
<py-script-Ausgabe="Matplotlib-Leiste">
# Python-Code

# Importieren der Matplotlib-Bibliothek
importieren matplotlib.pyplot wie plt
fig, ax = plt.subplots()
# x-Achse
x = ["Python", "C++", "JavaScript", "Golang"]
# y-Achse
y = [10, 5, 9, 7]
plt.Bar(x, j)
# Benennen des x-Labels
plt.xlabel('Sprache')
# Benennen des y-Labels
plt.ylabel('Punktzahl')
# Benennung des Titels der Handlung
plt.title('Sprache vs. Punktzahl')
Feige
</py-script>
</body>

Dieser Code erzeugt die folgende Ausgabe:

Welche Zukunft hat PyScript?

Mit PyScript- und Python-Bibliotheken wie Matplotlib, Bokeh, Seaborn usw. können Sie leistungsstarke Dashboards und Diagramme in HTML erstellen. Sie sollten jedoch wahrscheinlich davon absehen, es in der Produktion zu verwenden, da es sich in der intensiven Entwicklung befindet. Die Software hat derzeit mehrere Probleme, einschließlich Ladezeit und Benutzerfreundlichkeit. In Zukunft könnte PyScript Tore öffnen, um Python-Operationen im Web reibungsloser auszuführen und auszuführen.

Einer der Hauptgründe für die Entwicklung von PyScript bestand darin, Data Scientists bei der Visualisierung von Daten im Web zu unterstützen. Wenn Sie ein Datenwissenschaftler sind, können Sie die Leistungsfähigkeit von PyScript nutzen, indem Sie es mit Datenwissenschaftsbibliotheken wie Pandas und NumPy kombinieren.