최 호민

최 호민

1653275929

자바스크립트 종말각?! HTML에서 파이썬 실행하는 PyScript 등장!

자바스크립트 종말각?! HTML에서 파이썬 실행하는 PyScript 등장!

End of JavaScript? Run Python with HTML

요즘 완젼 난리난 '파이스크립트' PyScript 10분 설명!
잘가~ 자바스크립트~ 이때까지 고마웠고. 다신 보지말자 (!?!?)
 

#pyscript #anaconda #python #javascript #html
 

What is GEEK

Buddha Community

자바스크립트 종말각?! HTML에서 파이썬 실행하는 PyScript 등장!
최 호민

최 호민

1653275929

자바스크립트 종말각?! HTML에서 파이썬 실행하는 PyScript 등장!

자바스크립트 종말각?! HTML에서 파이썬 실행하는 PyScript 등장!

End of JavaScript? Run Python with HTML

요즘 완젼 난리난 '파이스크립트' PyScript 10분 설명!
잘가~ 자바스크립트~ 이때까지 고마웠고. 다신 보지말자 (!?!?)
 

#pyscript #anaconda #python #javascript #html
 

Connor Mills

Connor Mills

1652079172

What is PyScript? And Why Pyscript is Amazing

What is PyScript? And Why Pyscript is Amazing

In this video, we will see why Pyscript is amazing, simple as that. The fact that you can execute Python on your HTML pages is very powerful and definitely worth a detailed upload.

Timeline of the video:
00:00 - 01:35 - Why use PyScript
01:36 - 10:36 - Use Pyscript in your projects (i.e Flask)
10:37 - 15:21 - Capture output of Pyscript to an HTML element (i.e matplotlib graph)
15:22 - 17:52 - Write Python in the browser itself and execute it


PyScript

PyScript is a framework that allows users to create rich Python applications in the browser using HTML’s interface. PyScript aims to give users a first-class programming language that has consistent styling rules, is more expressive, and is easier to learn.

What is PyScript? Well, here are some of the core components:

  • Python in the browser: Enable drop-in content, external file hosting (made possible by the Pyodide project, thank you!), and application hosting without the reliance on server-side configuration
  • Python ecosystem: Run many popular packages of Python and the scientific stack (such as numpy, pandas, scikit-learn, and more)
  • Python with JavaScript: Bi-directional communication between Python and Javascript objects and namespaces
  • Environment management: Allow users to define what packages and files to include for the page code to run
  • Visual application development: Use readily available curated UI components, such as buttons, containers, text boxes, and more
  • Flexible framework: A flexible framework that can be leveraged to create and share new pluggable and extensible components directly in Python

All that to say… PyScript is just HTML, only a bit (okay, maybe a lot) more powerful, thanks to the rich and accessible ecosystem of Python libraries.


What is PyScript

PyScript is a Pythonic alternative to Scratch, JSFiddle or other "easy to use" programming frameworks, making the web a friendly, hackable, place where anyone can author interesting and interactive applications.

Longer Version

PyScript is a meta project that aims to combine multiple open technologies to create a framework for users to use Python (and other languages) to create sophisticated applications in the browser. It highly integrates with the way the DOM works in the browser and allows users to add logic, in Python, in a way that feels natural to web as well as Python developers.

Try PyScript

To try PyScript, import the appropriate pyscript files to your html page with:

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

At that point, you can then use PyScript components in your html page. PyScript currently implements the following elements:

  • <py-script>: that can be used to define python code that is executable within the web page. The element itself is not rendered to the page and only used to add logic
  • <py-repl>: creates a REPL component that is rendered to the page as a code editor and allows users to write code that can be executed

Check out the pyscriptjs/examples folder for more examples on how to use it, all you need to do is open them in Chrome.

How to Contribute

To contribute:

  • clone the repo git clone https://github.com/pyscript/pyscript
  • cd into the main project folder with cd pyscriptjs
  • install the dependencies with npm install - make sure to use nodejs version >= 16
  • run npm run dev to build and run the dev server. This will also watch for changes and rebuild when a file is saved

Resources

Notes

  • This is an extremely experimental project, so expect things to break!
  • PyScript has been only tested on Chrome, at the moment.

Governance

The PyScript organization governance is documented in a separate repository.

Download Details: 
Author: pyscript
Source Code: https://github.com/pyscript/pyscript 
License: Apache-2.0 License
#python #html 

#pyscript #python #html

 

PyScript – A Python Frontend Framework | How to Use PyScript

In this tutorial, you'll learn what PyScript is all about and how to use it in HTML files to run Python code on the browser. You also learn about the various operations/functionalities you can do with PyScript.

Python has grown in popularity immensely in recent years. It has a wide range of applications, from its most popular use in Artificial Intelligence, to Data Science, Robotics, and Scripting.

In the web development field, Python is used mainly on the backend with frameworks such as Django and Flask.

Before now, Python didn't have much support on the front-end side like other languages such as JavaScript. But thankfully, Python developers have built some libraries (such as Brython) to support their favourite language on the web.

And this year, during the PyCon 2022 conference, Anaconda announced a framework named PyScript that allows you to use Python on the web using standard HTML.

Prerequisites

You'll need the following tools and knowledge to code along with this article:

  • A text editor or IDE of your choice.
  • Knowledge of Python.
  • Knowledge of HTML.
  • A browser (Google Chrome is the recommended browser for PyScript).

What is PyScript?

Image from PyScript's website.

Source: PyScript official website

PyScript is a Python front-end framework that enables users to construct Python programs using an HTML interface in the browser.

It was developed using the power of Emscripten, Pyodide, WASM, and other modern web technologies to provide the following abilities in line with its goals:

  • To provide a simplistic and clean API.
  • To provide a system of pluggable and extensible components.
  • To support and extend standard HTML to read opinionated and dependable custom components in order to reach the mission “Programming for the 99%.”

An image showing what PyScript is built on.

Source: Anaconda Blog

In the last couple of decades, Python and advanced UI languages like modern HTML, CSS, and JavaScript have not worked in collaboration. Python lacked a simple mechanism to create appealing UIs for simply packaging and deploying apps, while current HTML, CSS, and JavaScript can have a steep learning curve.

Allowing Python to utilize HTML, CSS, and JavaScript conventions solves not only those two problems but also those related to web application development, packaging, distribution, and deployment.

PyScript isn't meant to take the role of JavaScript in the browser, though – rather, it's meant to give Python developers, particularly data scientists, more flexibility and power.

Why PyScript?

PyScript gives you a programming language with consistent styling conventions, more expressiveness, and ease of learning by providing the following:

  • Support on the browser: PyScript enables support for Python and hosting without the need for servers or configuration.
  • Interoperability: Programs can communicate bi-directionally between Python and JavaScript objects and namespaces.
  • Ecosystem support: PyScript allows the use of popular Python packages such as Pandas, NumPy, and many more.
  • Framework flexibility: PyScript is a flexible framework that developers can build on to create extensible components directly in Python easily.
  • Environment Management: PyScript allows developers to define the files and packages to include in their page code to run.
  • UI Development: With PyScript, developers can easily build with available UI components such as buttons and containers, and many more.

How to Get Started with PyScript

PyScript is fairly easy and straightforward to learn. To get started, you can either follow the instructions on the website or download the .zip file.

In this article, we'll be using and learning how to use PyScript via the website. You can do this by linking the components in your HTML file. Let’s print our first “Hello World” with PyScript.

Create an HTML file

To begin, you'll need to create an HTML file to display text on your browser using the text editor/IDE of your choice.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Title: PyScript</title>
</head>
<body>

</body>
</html>

Link PyScript

After creating the HTML file, we'll need to link PyScript in your HTML file to have access to the PyScript interface. This will be placed in the <head> tag.

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

Print to browser

Now that you've linked PyScript to the HTML file, you can print your “Hello World”.

You can do this with the <py-script> tag. The <py-script> tag allows you to run multi-line Python programs and have them printed on the browser page. Place the tag in between the <body> tags.

<body> <py-script> print("Hello, World!") </py-script> </body>

The full code for the HTML file is below:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Title: PyScript</title>
</head>
<body>
	<py-script> print("Hello, World!") </py-script>
</body>
</html>

On your browser, you should see this:

Image of the "Hello, World" on browser.

Tip: If you're using the VSCode editor, you can use the Live Server add-on in VSCode to reload the page as you update the HTML file.

More Operations with PyScript

There are more operations you can perform with the PyScript framework. Let's look at some of them now.

Attach labels to labeled elements

While using PyScript, you might want to pass variables from your Python code to HTML. You can do this with the write method from the pyscript module within the <pyscript> tag. Using the id attribute , you get to pass strings displayed as regular text.

The write method accepts two variables: the id value and the variable that will be provided.

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

  <body>
    <b><p>Today is <u><label id='today'></label></u></p></b>
    <py-script>
import datetime as dt
pyscript.write('today', dt.date.today().strftime('%A %B %d, %Y'))
    </py-script>
  </body>
</html>

And the output becomes:

Image showing the output of a date.

Run REPL in the browser

PyScript provides an interface for running Python code in browsers.

To be able to do this, PyScript uses the <py-repl> tag. The <py-repl> tag adds a REPL component to the page, which acts as a code editor and allows you to write executable code inline.

<html>
  <head>
    <link rel="stylesheet" href="https://pyscript.net/alpha/pyscript.css" />
    <script defer src="https://pyscript.net/alpha/pyscript.js"></script>
  </head>
  <py-repl id="my-repl" auto-generate=true> </py-repl>
</html>

Trying it out in browser (preferably Chrome), you should get this:

Python's REPL in browser.

Import Files, Modules, and Libraries

One of the functions PyScript provides is flexibility. In PyScript you can import local files, inbuilt modules, or third-party libraries. This process uses the <py-env> tag. This tag is for declaring the dependencies needed.

For local Python files on your system, you can place the code in a .py file and the paths to local modules are provided in the paths: key in the <py-env> tag.

Let’s create a Python file example.py to contain some functions:

from random import randint

def add_two_numbers(x, y):
    return x + y

def generate_random_number():
    x = randint(0, 10)
    return x

Then the Python file will be imported into the HTML with the <py-env> tag. You should place this tag in the the <head> tag, above the <body> tag.

<html>
    <head>
      <link rel="stylesheet" href="https://pyscript.net/alpha/pyscript.css" />
      <script defer src="https://pyscript.net/alpha/pyscript.js"></script>
      <py-env>
        - paths:
          - /example.py
      </py-env>
    </head>

  <body>
    <h1>Let's print random numbers</h1>
    <b>Doe's lucky number is <label id="lucky"></label></b>
    <py-script>
      from example import generate_random_number
      pyscript.write('lucky', generate_random_number())
    </py-script>
  </body>
</html>

This will return:

Printing out random numbers with Python.

For third-party libraries that are not part of the standard library, PyScript supports them.

<html>
    <head>
      <link rel="stylesheet" href="https://pyscript.net/alpha/pyscript.css" />
      <script defer src="https://pyscript.net/alpha/pyscript.js"></script>
      <py-env>
            - numpy
            - requests
      </py-env>
    </head>

  <body>
    <py-script>
	import numpy as np
	import requests
    </py-script>
  </body>
</html>

Configure metadata

You can set and configure general metadata about your PyScript application in YAML format using the <py config> tag. You can use this tag in this format:

<py-config>
  - autoclose_loader: false
  - runtimes:
    -
      src: "https://cdn.jsdelivr.net/pyodide/v0.20.0/full/pyodide.js"
      name: pyodide-0.20
      lang: python
</py-config>

These are the optional values that the <py-config> tag provides. They include:

  • autoclose_loader (boolean): If this is set to false, PyScript will not close the loading splash screen.
  • name (string): Name of the user application.
  • version (string): Version of the user application.
  • runtimes (List of Runtimes): List of runtime configurations which would have the following fields: src, name, and lang.

Conclusion

In this article, you learned what PyScript is all about and how to use it in HTML files to run Python code on the browser. You also learned about the various operations/functionalities you can do with PyScript.

With PyScript, it’s easier to run and perform Python operations on the web, as this wasn’t easy before. This is a great tool for anyone who's looking forward to using Python on the web.

PyScript is still in its early stages and under heavy development. It is still in its alpha stage and faces known issues like the load time which can affect usability (some other operations can’t be shown at the time of this writing due to performance issues). So you shouldn't use it in production yet as there will likely be a lot of breaking changes.

References

Original article source at https://www.freecodecamp.org

#pyscript #python

Billy Chandler

Billy Chandler

1653921972

PyScript - Python In The Browser | Will PyScript Replace JavaScript?

Python In The Browser! PyScript First Look

In this video, we will look at the brand new PyScript framework, which uses Web Assembly and Pyodide to write Python and use Python Packages right in our HTML. And no, it will NOT replace JavaScript.

Timestamps:
0:00 - Intro
1:45 - How it works
4:18 - Getting Started
5:17 - Disable formatOnSave
6:06 - Writing Python in HTML
6:37 - Mixing JavaScript
7:02 - Targeting DOM elements
8:15 - REPL
8:54 - Math module
9:18 - Env & 3rd party packages
11:10 - Using a separate .py file
13:16 - Handling events
14:45 - Shuffle array
16:04 - Using Element()
18:00 - Using multiple files
20:22 - Wrap up

🐍 PyScript Website & Examples:
https://pyscript.net 
https://github.com/pyscript/pyscript/tree/main/examples 

#pyscript #python #javascript #html 

최 호민

최 호민

1653646200

PyScript – Python 프론트엔드 프레임워크 | 사용 방법 PyScript

이 튜토리얼에서는 PyScript가 무엇인지, HTML 파일에서 이를 사용하여 브라우저에서 Python 코드를 실행하는 방법을 배우게 됩니다. 또한 PyScript로 할 수 있는 다양한 작업/기능에 대해서도 배웁니다.

Python은 최근 몇 년 동안 엄청난 인기를 얻었습니다. 인공 지능에서 가장 널리 사용되는 것부터 데이터 과학, 로봇 공학 및 스크립팅에 이르기까지 광범위한 응용 프로그램이 있습니다.

웹 개발 분야에서 Python은 Django, Flask와 같은 프레임워크와 함께 백엔드에서 주로 사용됩니다.

지금까지 Python은 JavaScript와 같은 다른 언어와 같이 프론트 엔드 측면에서 많은 지원이 없었습니다. 그러나 고맙게도 Python 개발자는 웹에서 선호하는 언어를 지원하기 위해 일부 라이브러리(예: Brython )를 구축했습니다.

그리고 올해 PyCon 2022 컨퍼런스 에서 Anaconda는 표준 HTML을 사용하여 웹에서 Python을 사용할 수 있게 해주는 PyScript라는 프레임워크를 발표했습니다.

전제 조건

이 문서와 함께 코딩하려면 다음 도구와 지식이 필요합니다.

  • 원하는 텍스트 편집기 또는 IDE.
  • 파이썬 지식.
  • HTML에 대한 지식.
  • 브라우저(Google Chrome은 PyScript에 권장되는 브라우저입니다).

파이스크립트란?

PyScript의 웹사이트에서 가져온 이미지.

출처: PyScript 공식 웹사이트

PyScript는 사용자가 브라우저에서 HTML 인터페이스를 사용하여 Python 프로그램을 구성할 수 있도록 하는 Python 프론트 엔드 프레임워크입니다.

Emscripten , Pyodide , WASM 및 기타 최신 웹 기술 의 힘을 사용하여 개발 되어 목표에 따라 다음 기능을 제공합니다.

  • 간단하고 깔끔한 API를 제공합니다.
  • 플러그 가능하고 확장 가능한 구성 요소 시스템을 제공합니다.
  • "99%를 위한 프로그래밍"이라는 미션을 달성하기 위해 표준 HTML을 지원하고 확장하여 독단적이고 신뢰할 수 있는 사용자 지정 구성 요소를 읽습니다.

PyScript가 구축된 내용을 보여주는 이미지입니다.

출처: 아나콘다 블로그

지난 수십 년 동안 Python과 최신 HTML, CSS 및 JavaScript와 같은 고급 UI 언어는 공동 작업을 수행하지 않았습니다. Python에는 단순히 앱을 패키징하고 배포하기 위한 매력적인 UI를 만드는 간단한 메커니즘이 없었지만 현재 HTML, CSS 및 JavaScript는 학습 곡선이 가파르게 될 수 있습니다.

Python이 HTML, CSS 및 JavaScript 규칙을 사용하도록 허용하면 이 두 가지 문제뿐만 아니라 웹 애플리케이션 개발, 패키징, 배포 및 배포와 관련된 문제도 해결됩니다.

PyScript는 브라우저에서 JavaScript의 역할을 수행하기 위한 것이 아니라 Python 개발자, 특히 데이터 과학자에게 더 많은 유연성과 기능을 제공하기 위한 것입니다.

왜 파이스크립트인가?

PyScript는 다음을 제공하여 일관된 스타일 지정 규칙, 더 많은 표현력 및 학습 용이성을 갖춘 프로그래밍 언어를 제공합니다.

  • 브라우저 지원: PyScript를 사용하면 서버나 구성 없이 Python 및 호스팅을 지원할 수 있습니다.
  • 상호 운용성: 프로그램은 Python과 JavaScript 개체 및 네임스페이스 간에 양방향으로 통신할 수 있습니다.
  • 생태계 지원: PyScript를 사용하면 Pandas, NumPy 등과 같은 인기 있는 Python 패키지를 사용할 수 있습니다.
  • 프레임워크 유연성: PyScript는 개발자가 Python에서 직접 쉽게 확장 가능한 구성 요소를 만들기 위해 구축할 수 있는 유연한 프레임워크입니다.
  • 환경 관리: PyScript를 사용하면 개발자가 실행할 페이지 코드에 포함할 파일과 패키지를 정의할 수 있습니다.
  • UI 개발: PyScript를 사용하면 개발자는 버튼 및 컨테이너 등과 같은 사용 가능한 UI 구성 요소를 사용하여 쉽게 빌드할 수 있습니다.

PyScript를 시작하는 방법

PyScript는 배우기 매우 쉽고 간단합니다. 시작하려면 웹사이트 의 지침을 따르거나 .zip 파일 을 다운로드하세요 .

이 기사에서는 웹 사이트 를 통해 PyScript를 사용하고 사용하는 방법을 배웁니다 . HTML 파일의 구성 요소를 연결하여 이를 수행할 수 있습니다. PyScript를 사용하여 첫 번째 "Hello World"를 인쇄해 보겠습니다.

HTML 파일 만들기

시작하려면 선택한 텍스트 편집기/IDE를 사용하여 브라우저에 텍스트를 표시할 HTML 파일을 만들어야 합니다.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Title: PyScript</title>
</head>
<body>

</body>
</html>

파이스크립트 링크

HTML 파일을 만든 후 PyScript 인터페이스에 액세스할 수 있도록 HTML 파일에 PyScript를 연결해야 합니다. 이것은 <head>태그에 배치됩니다.

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

브라우저로 인쇄

이제 PyScript를 HTML 파일에 연결했으므로 "Hello World"를 인쇄할 수 있습니다.

<py-script>태그 를 사용하여 이 작업을 수행할 수 있습니다 . 태그를 사용하면 여러 줄 의 <py-script>Python 프로그램을 실행하고 브라우저 페이지에 인쇄할 수 있습니다. 태그 사이에 <body>태그를 넣습니다.

<body> <py-script> print("Hello, World!") </py-script> </body>

HTML 파일의 전체 코드는 다음과 같습니다.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Title: PyScript</title>
</head>
<body>
	<py-script> print("Hello, World!") </py-script>
</body>
</html>

브라우저에 다음이 표시되어야 합니다.

브라우저의 "Hello, World" 이미지.

팁: VSCode 편집기를 사용하는 경우 HTML 파일을 업데이트할 때 VSCode 의 라이브 서버 추가 기능을 사용하여 페이지를 다시 로드할 수 있습니다.

PyScript로 더 많은 작업

PyScript 프레임워크로 수행할 수 있는 작업이 더 있습니다. 이제 몇 가지를 살펴보겠습니다.

레이블이 지정된 요소에 레이블 부착

PyScript를 사용하는 동안 Python 코드에서 HTML로 변수를 전달할 수 있습니다. 태그 내 모듈 의 write메서드를 사용하여 이 작업을 수행할 수 있습니다 . 속성을 사용하면 일반 텍스트로 표시되는 문자열을 전달할 수 있습니다.pyscript<pyscript>id

write 메소드는 id값과 제공될 변수의 두 가지 변수를 허용합니다.

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

  <body>
    <b><p>Today is <u><label id='today'></label></u></p></b>
    <py-script>
import datetime as dt
pyscript.write('today', dt.date.today().strftime('%A %B %d, %Y'))
    </py-script>
  </body>
</html>

출력은 다음과 같습니다.

날짜 출력을 보여주는 이미지.

브라우저에서 REPL 실행

PyScript는 브라우저에서 Python 코드를 실행하기 위한 인터페이스를 제공합니다.

이를 수행하기 위해 PyScript는 <py-repl>태그를 사용합니다. 태그 는 <py-repl>페이지에 REPL 구성 요소를 추가하여 코드 편집기 역할을 하고 실행 가능한 코드를 인라인으로 작성할 수 있도록 합니다.

<html>
  <head>
    <link rel="stylesheet" href="https://pyscript.net/alpha/pyscript.css" />
    <script defer src="https://pyscript.net/alpha/pyscript.js"></script>
  </head>
  <py-repl id="my-repl" auto-generate=true> </py-repl>
</html>

브라우저(Chrome 권장)에서 시도해 보면 다음과 같은 결과를 얻을 수 있습니다.

브라우저에서 Python의 REPL.

파일, 모듈 및 라이브러리 가져오기

PyScript가 제공하는 기능 중 하나는 유연성입니다. PyScript에서 로컬 파일, 내장 모듈 또는 타사 라이브러리를 가져올 수 있습니다. 이 프로세스는 <py-env>태그를 사용합니다. 이 태그는 필요한 종속성을 선언하기 위한 것입니다.

시스템의 로컬 Python 파일의 경우 파일에 코드를 배치할 수 있으며 로컬 모듈에 대한 경로는 태그 .py의 경로: 키에 제공됩니다 .<py-env>

example.py몇 가지 함수를 포함 하는 Python 파일을 만들어 보겠습니다 .

from random import randint

def add_two_numbers(x, y):
    return x + y

def generate_random_number():
    x = randint(0, 10)
    return x

<py-env>그런 다음 Python 파일을 태그 가 있는 HTML로 가져옵니다 . 이 태그는 <head>태그 위의 태그에 배치해야 합니다 <body>.

<html>
    <head>
      <link rel="stylesheet" href="https://pyscript.net/alpha/pyscript.css" />
      <script defer src="https://pyscript.net/alpha/pyscript.js"></script>
      <py-env>
        - paths:
          - /example.py
      </py-env>
    </head>

  <body>
    <h1>Let's print random numbers</h1>
    <b>Doe's lucky number is <label id="lucky"></label></b>
    <py-script>
      from example import generate_random_number
      pyscript.write('lucky', generate_random_number())
    </py-script>
  </body>
</html>

그러면 다음이 반환됩니다.

Python으로 난수 출력하기.

표준 라이브러리의 일부가 아닌 타사 라이브러리의 경우 PyScript는 이를 지원합니다.

<html>
    <head>
      <link rel="stylesheet" href="https://pyscript.net/alpha/pyscript.css" />
      <script defer src="https://pyscript.net/alpha/pyscript.js"></script>
      <py-env>
            - numpy
            - requests
      </py-env>
    </head>

  <body>
    <py-script>
	import numpy as np
	import requests
    </py-script>
  </body>
</html>

메타데이터 구성

<py config>태그 를 사용하여 YAML 형식의 PyScript 애플리케이션에 대한 일반 메타데이터를 설정하고 구성할 수 있습니다 . 이 태그는 다음 형식으로 사용할 수 있습니다.

<py-config>
  - autoclose_loader: false
  - runtimes:
    -
      src: "https://cdn.jsdelivr.net/pyodide/v0.20.0/full/pyodide.js"
      name: pyodide-0.20
      lang: python
</py-config>

<py-config>태그가 제공 하는 선택적 값입니다 . 여기에는 다음이 포함됩니다.

  • autoclose_loader(부울): false로 설정하면 PyScript는 로딩 시작 화면을 닫지 않습니다.
  • name(문자열): 사용자 애플리케이션의 이름입니다.
  • version (string): 사용자 애플리케이션의 버전.
  • 런타임(런타임 목록) : src, 이름 및 lang 필드가 있는 런타임 구성 목록입니다.

결론

이 기사에서는 PyScript가 무엇인지, HTML 파일에서 이를 사용하여 브라우저에서 Python 코드를 실행하는 방법을 배웠습니다. 또한 PyScript로 할 수 있는 다양한 작업/기능에 대해서도 배웠습니다.

PyScript를 사용하면 웹에서 Python 작업을 더 쉽게 실행하고 수행할 수 있습니다. 이전에는 쉽지 않았기 때문입니다. 이것은 웹에서 Python을 사용하고자 하는 모든 사람에게 훌륭한 도구입니다.

PyScript는 아직 초기 단계에 있으며 많은 개발이 진행 중입니다. 아직 알파 단계이며 사용성에 영향을 줄 수 있는 로드 시간과 같은 알려진 문제에 직면해 있습니다(성능 문제로 인해 이 글을 쓰는 시점에서 일부 다른 작업을 표시할 수 없음). 따라서 많은 주요 변경 사항이 있을 수 있으므로 아직 프로덕션에서 사용해서는 안 됩니다.

참고문헌

https://www.freecodecamp.org 의 원본 ​​기사 출처

#pyscript #python