jprdonnelly/pyscript
1
0
Fork 0
mirror of https://github.com/pyscript/pyscript.git synced 2025-12-19 18:27:29 -05:00
Code Issues Projects Releases Wiki Activity

More automatically generated formatter changes (#1254)

Browse Source 
Apparently some of these were accidentally lost when generating #1210...
This commit is contained in:
Hood Chatham
2023-03-06 16:06:30 +01:00
committed by GitHub
parent 08f34f748b
commit 22fd023635
76 changed files with 6311 additions and 5943 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
examples/altair.html
View File

@@ -3,7 +3,10 @@
<title>Altair</title>
<meta charset="utf-8" />
<link rel="icon" type="image/x-icon" href="./favicon.png" />
<link rel="stylesheet" href="https://pyscript.net/latest/pyscript.css" />
<link
rel="stylesheet"
href="https://pyscript.net/latest/pyscript.css"
/>
<link rel="stylesheet" href="./assets/css/examples.css" />
<script defer src="https://pyscript.net/latest/pyscript.js"></script>
</head>

5
examples/antigravity.html
View File

@@ -3,7 +3,10 @@
<title>Antigravity</title>
<meta charset="utf-8" />
<link rel="icon" type="image/x-icon" href="./favicon.png" />
<link rel="stylesheet" href="https://pyscript.net/latest/pyscript.css" />
<link
rel="stylesheet"
href="https://pyscript.net/latest/pyscript.css"
/>
<link rel="stylesheet" href="./assets/css/examples.css" />
<script defer src="https://pyscript.net/latest/pyscript.js"></script>
</head>

5
examples/await/await0.html
View File

@@ -4,7 +4,10 @@
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1" />
<title>Async Await BLOCKING LOOP Pyscript Twice</title>
<link rel="stylesheet" href="https://pyscript.net/latest/pyscript.css" />
<link
rel="stylesheet"
href="https://pyscript.net/latest/pyscript.css"
/>
<script defer src="https://pyscript.net/latest/pyscript.js"></script>
</head>
<body>

13
examples/await/await1.html
View File

@@ -4,13 +4,16 @@
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1" />
<title>Async Await BLOCKING LOOP Pyscript Twice</title>
<link rel="stylesheet" href="https://pyscript.net/latest/pyscript.css" />
<link
rel="stylesheet"
href="https://pyscript.net/latest/pyscript.css"
/>
<script defer src="https://pyscript.net/latest/pyscript.js"></script>
</head>
<body>
<div>
Pyscript - FIRST ASYNC WITH INVOKED LOOP BLOCKING AWAIT AT SAME LEVEL AS
LOOP Pyscript writing to console.log:
Pyscript - FIRST ASYNC WITH INVOKED LOOP BLOCKING AWAIT AT SAME
LEVEL AS LOOP Pyscript writing to console.log:
<py-script>
import js
import asyncio
@@ -24,8 +27,8 @@
</py-script>
</div>
<div>
Pyscript - SECOND ASYNC WITH INVOKED LOOP BLOCKING AWAIT AT SAME LEVEL AS
LOOP Pyscript writing to console.log:
Pyscript - SECOND ASYNC WITH INVOKED LOOP BLOCKING AWAIT AT SAME
LEVEL AS LOOP Pyscript writing to console.log:
<py-script>
import js
import asyncio

13
examples/await/await2.html
View File

@@ -4,13 +4,16 @@
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1" />
<title>Async Await BLOCKING LOOP Pyscript Twice</title>
<link rel="stylesheet" href="https://pyscript.net/latest/pyscript.css" />
<link
rel="stylesheet"
href="https://pyscript.net/latest/pyscript.css"
/>
<script defer src="https://pyscript.net/latest/pyscript.js"></script>
</head>
<body>
<div>
Pyscript - FIRST ASYNC WITH INVOKED LOOP BLOCKING AWAIT AT SAME LEVEL AS
LOOP Pyscript writing to console.log:
Pyscript - FIRST ASYNC WITH INVOKED LOOP BLOCKING AWAIT AT SAME
LEVEL AS LOOP Pyscript writing to console.log:
<py-script>
import js
import asyncio
@@ -24,8 +27,8 @@
</py-script>
</div>
<div>
Pyscript - SECOND ASYNC WITH TOP-LEVEL LOOP BLOCKING AWAIT AT SAME LEVEL
AS LOOP Pyscript writing to console.log:
Pyscript - SECOND ASYNC WITH TOP-LEVEL LOOP BLOCKING AWAIT AT SAME
LEVEL AS LOOP Pyscript writing to console.log:
<py-script>
import js
import asyncio

13
examples/await/await3.html
View File

@@ -4,13 +4,16 @@
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1" />
<title>Async Await NON-BLOCKING Pyscript Twice</title>
<link rel="stylesheet" href="https://pyscript.net/latest/pyscript.css" />
<link
rel="stylesheet"
href="https://pyscript.net/latest/pyscript.css"
/>
<script defer src="https://pyscript.net/latest/pyscript.js"></script>
</head>
<body>
<div>
Pyscript - FIRST ASYNC WITH NON-BLOCKING AWAIT AT ONE LEVEL LOWER THAN
LOOP Pyscript writing to console.log:
Pyscript - FIRST ASYNC WITH NON-BLOCKING AWAIT AT ONE LEVEL LOWER
THAN LOOP Pyscript writing to console.log:
<py-script>
import js
import asyncio
@@ -24,8 +27,8 @@
</py-script>
</div>
<div>
Pyscript - SECOND ASYNC WITH NON-BLOCKING AWAIT AT ONE LEVEL LOWER THAN
LOOP Pyscript writing to console.log:
Pyscript - SECOND ASYNC WITH NON-BLOCKING AWAIT AT ONE LEVEL LOWER
THAN LOOP Pyscript writing to console.log:
<py-script>
import js
import asyncio

13
examples/await/await4.html
View File

@@ -4,13 +4,16 @@
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1" />
<title>Async Await BLOCKING LOOP Pyscript Twice</title>
<link rel="stylesheet" href="https://pyscript.net/latest/pyscript.css" />
<link
rel="stylesheet"
href="https://pyscript.net/latest/pyscript.css"
/>
<script defer src="https://pyscript.net/latest/pyscript.js"></script>
</head>
<body>
<div>
Pyscript - FIRST ASYNC WITH TOP-LEVEL LOOP BLOCKING AWAIT AT SAME LEVEL AS
LOOP Pyscript writing to console.log:
Pyscript - FIRST ASYNC WITH TOP-LEVEL LOOP BLOCKING AWAIT AT SAME
LEVEL AS LOOP Pyscript writing to console.log:
<py-script>
import js
import asyncio
@@ -21,8 +24,8 @@
</py-script>
</div>
<div>
Pyscript - SECOND ASYNC WITH TOP-LEVEL LOOP BLOCKING AWAIT AT SAME LEVEL
AS LOOP Pyscript writing to console.log:
Pyscript - SECOND ASYNC WITH TOP-LEVEL LOOP BLOCKING AWAIT AT SAME
LEVEL AS LOOP Pyscript writing to console.log:
<py-script>
import js
import asyncio

5
examples/await/await5.html
View File

@@ -4,7 +4,10 @@
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1" />
<title>Async Await BLOCKING LOOP Pyscript Twice</title>
<link rel="stylesheet" href="https://pyscript.net/latest/pyscript.css" />
<link
rel="stylesheet"
href="https://pyscript.net/latest/pyscript.css"
/>
<script defer src="https://pyscript.net/latest/pyscript.js"></script>
</head>
<body>

9
examples/bokeh.html
View File

@@ -27,7 +27,10 @@
<script type="text/javascript">
Bokeh.set_log_level("info");
</script>
<link rel="stylesheet" href="https://pyscript.net/latest/pyscript.css" />
<link
rel="stylesheet"
href="https://pyscript.net/latest/pyscript.css"
/>
<script defer src="https://pyscript.net/latest/pyscript.js"></script>
<link rel="stylesheet" href="./assets/css/examples.css" />
@@ -38,7 +41,9 @@
<a href="/">
<img src="./logo.png" class="logo" />
</a>
<a class="title" href="" style="color: #f0ab3c">Bokeh Example</a>
<a class="title" href="" style="color: #f0ab3c"
>Bokeh Example</a
>
</div>
</nav>
<py-tutor>

9
examples/bokeh_interactive.html
View File

@@ -28,7 +28,10 @@
<script type="text/javascript">
Bokeh.set_log_level("info");
</script>
<link rel="stylesheet" href="https://pyscript.net/latest/pyscript.css" />
<link
rel="stylesheet"
href="https://pyscript.net/latest/pyscript.css"
/>
<script defer src="https://pyscript.net/latest/pyscript.js"></script>
</head>
@@ -38,7 +41,9 @@
<a href="/">
<img src="./logo.png" class="logo" />
</a>
<a class="title" href="" style="color: #f0ab3c">Bokeh Example</a>
<a class="title" href="" style="color: #f0ab3c"
>Bokeh Example</a
>
</div>
</nav>
<py-tutor>

16
examples/d3.html
View File

@@ -4,7 +4,10 @@
<meta charset="utf-8" />
<link rel="icon" type="image/x-icon" href="./favicon.png" />
<link rel="stylesheet" href="https://pyscript.net/latest/pyscript.css" />
<link
rel="stylesheet"
href="https://pyscript.net/latest/pyscript.css"
/>
<script defer src="https://pyscript.net/latest/pyscript.js"></script>
<link rel="stylesheet" href="./assets/css/examples.css" />
<script src="https://d3js.org/d3.v7.min.js"></script>
@@ -113,17 +116,18 @@
const text = svg
.append("text")
.style("fill", "white")
.attr("transform", `translate(${arc.centroid(d).join(",")})`)
.attr(
"transform",
`translate(${arc.centroid(d).join(",")})`,
)
.attr("text-anchor", "middle");
text
.append("tspan")
text.append("tspan")
.style("font-size", "24")
.attr("x", "0")
.text(d.data.name);
text
.append("tspan")
text.append("tspan")
.style("font-size", "18")
.attr("x", "0")
.attr("dy", "1.3em")

5
examples/folium.html
View File

@@ -3,7 +3,10 @@
<title>Folium</title>
<meta charset="utf-8" />
<link rel="icon" type="image/x-icon" href="./favicon.png" />
<link rel="stylesheet" href="https://pyscript.net/latest/pyscript.css" />
<link
rel="stylesheet"
href="https://pyscript.net/latest/pyscript.css"
/>
<script defer src="https://pyscript.net/latest/pyscript.js"></script>
<link rel="stylesheet" href="./assets/css/examples.css" />
</head>

5
examples/hello_world.html
View File

@@ -7,7 +7,10 @@
<title>PyScript Hello World</title>
<link rel="icon" type="image/png" href="favicon.png" />
<link rel="stylesheet" href="https://pyscript.net/latest/pyscript.css" />
<link
rel="stylesheet"
href="https://pyscript.net/latest/pyscript.css"
/>
<link rel="stylesheet" href="./assets/css/examples.css" />
<script defer src="https://pyscript.net/latest/pyscript.js"></script>
</head>

96
examples/index.html
View File

@@ -19,7 +19,10 @@
<a href="./hello_world.html" target="_blank">
<h2>Hello world</h2>
</a>
<p>A static demo of the <code>&lt;py-script&gt;</code> tag</p>
<p>
A static demo of the
<code>&lt;py-script&gt;</code> tag
</p>
</div>
</div>
@@ -28,7 +31,10 @@
<a href="./simple_clock.html" target="_blank">
<h2>Simple clock</h2>
</a>
<p>A dynamic demo of the <code>&lt;py-script&gt;</code> tag</p>
<p>
A dynamic demo of the
<code>&lt;py-script&gt;</code> tag
</p>
</div>
</div>
@@ -47,8 +53,8 @@
<h2>REPL2</h2>
</a>
<p>
A Python REPL (Read Eval Print Loop) with slightly better
formatting
A Python REPL (Read Eval Print Loop) with slightly
better formatting
</p>
</div>
</div>
@@ -67,7 +73,9 @@
<a href="./todo-pylist.html" target="_blank">
<h2>PyScript Native TODO App</h2>
</a>
<p>Simple TODO App using <code>&lt;py-list&gt;</code></p>
<p>
Simple TODO App using <code>&lt;py-list&gt;</code>
</p>
</div>
</div>
</div>
@@ -83,7 +91,9 @@
</a>
<p>
Demonstrates rendering a
<a href="https://matplotlib.org/" target="_blank">Matplotlib</a>
<a href="https://matplotlib.org/" target="_blank"
>Matplotlib</a
>
figure as output of the py-script tag
</p>
</div>
@@ -96,7 +106,11 @@
</a>
<p>
Demonstrates rendering a
<a href="https://altair-viz.github.io/" target="_blank">Altair</a>
<a
href="https://altair-viz.github.io/"
target="_blank"
>Altair</a
>
plot as output of the py-script tag
</p>
</div>
@@ -130,7 +144,8 @@
<h2>Simple d3 visualization</h2>
</a>
<p>
Minimal <a href="https://d3js.org/" target="_blank">D3</a>
Minimal
<a href="https://d3js.org/" target="_blank">D3</a>
demo demonstrating how to create a visualization
</p>
</div>
@@ -148,7 +163,8 @@
target="_blank"
>WebGL</a
>
scene would work in the <code>&lt;py-script&gt;</code> tag
scene would work in the
<code>&lt;py-script&gt;</code> tag
</p>
</div>
</div>
@@ -164,8 +180,11 @@
<h2>Simple Static Bokeh Plot</h2>
</a>
<p>
Minimal Bokeh demo demonstrating how to create a simple
<a href="https://bokeh.org/" target="_blank">Bokeh</a>
Minimal Bokeh demo demonstrating how to create a
simple
<a href="https://bokeh.org/" target="_blank"
>Bokeh</a
>
plot from code
</p>
</div>
@@ -180,9 +199,12 @@
</a>
<p>
Interactive demo using a
<a href="https://bokeh.org/" target="_blank">Bokeh</a>
slider widget to dynamically change a value in the page WARNING:
This examples takes a little longer to load. So be patient :)
<a href="https://bokeh.org/" target="_blank"
>Bokeh</a
>
slider widget to dynamically change a value in the
page WARNING: This examples takes a little longer to
load. So be patient :)
</p>
</div>
</div>
@@ -196,9 +218,11 @@
</a>
<p>
Interactive KMeans Chart using
<a href="https://panel.holoviz.org/" target="_blank">Panel</a>
WARNING: This examples takes a little longer to load. So be
patient :)
<a href="https://panel.holoviz.org/" target="_blank"
>Panel</a
>
WARNING: This examples takes a little longer to
load. So be patient :)
</p>
</div>
</div>
@@ -212,9 +236,11 @@
</a>
<p>
Interactive Streaming Table and Bokeh plot using
<a href="https://panel.holoviz.org/" target="_blank">Panel</a>
WARNING: This examples takes a little longer to load. So be
patient :)
<a href="https://panel.holoviz.org/" target="_blank"
>Panel</a
>
WARNING: This examples takes a little longer to
load. So be patient :)
</p>
</div>
</div>
@@ -228,9 +254,12 @@
</a>
<p>
Simple demo showing
<a href="https://panel.holoviz.org/" target="_blank">Panel</a>
widgets interacting with parts of the page WARNING: This examples
takes a little longer to load. So be patient :)
<a href="https://panel.holoviz.org/" target="_blank"
>Panel</a
>
widgets interacting with parts of the page WARNING:
This examples takes a little longer to load. So be
patient :)
</p>
</div>
</div>
@@ -243,11 +272,17 @@
</h2>
</a>
<p>
Interactive application exploring the NYC Taxi dataset using
<a href="https://panel.holoviz.org/" target="_blank">Panel</a> and
<a href="https://deck.gl/" target="_blank">DeckGL</a>
WARNING: This examples takes a little longer to load. So be
patient :)
Interactive application exploring the NYC Taxi
dataset using
<a href="https://panel.holoviz.org/" target="_blank"
>Panel</a
>
and
<a href="https://deck.gl/" target="_blank"
>DeckGL</a
>
WARNING: This examples takes a little longer to
load. So be patient :)
</p>
</div>
</div>
@@ -261,7 +296,10 @@
</a>
<p>
Visualization of Mandelbrot and Julia sets with
<a href="https://numpy.org/" target="_blank">Numpy</a> and
<a href="https://numpy.org/" target="_blank"
>Numpy</a
>
and
<a
href="https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API"
target="_blank"

5
examples/mario/js/block.js
View File

@@ -70,7 +70,10 @@
if (this.sprite === this.usedSprite) {
var x = this.pos[0] / 16,
y = this.pos[1] / 16;
level.statics[y][x] = new Mario.Floor(this.pos, this.usedSprite);
level.statics[y][x] = new Mario.Floor(
this.pos,
this.usedSprite,
);
delete level.blocks[y][x];
}
}

5
examples/mario/js/coin.js
View File

@@ -14,7 +14,10 @@
Coin.prototype.isPlayerCollided = function () {
//the first two elements of the hitbox array are an offset, so let's do this now.
var hpos1 = [this.pos[0] + this.hitbox[0], this.pos[1] + this.hitbox[1]];
var hpos1 = [
this.pos[0] + this.hitbox[0],
this.pos[1] + this.hitbox[1],
];
var hpos2 = [
player.pos[0] + player.hitbox[0],
player.pos[1] + player.hitbox[1],

5
examples/mario/js/fireball.js
View File

@@ -116,7 +116,10 @@
Fireball.prototype.isCollideWith = function (ent) {
//the first two elements of the hitbox array are an offset, so let's do this now.
var hpos1 = [this.pos[0] + this.hitbox[0], this.pos[1] + this.hitbox[1]];
var hpos1 = [
this.pos[0] + this.hitbox[0],
this.pos[1] + this.hitbox[1],
];
var hpos2 = [ent.pos[0] + ent.hitbox[0], ent.pos[1] + ent.hitbox[1]];
//if the hitboxes actually overlap

5
examples/mario/js/fireflower.js
View File

@@ -58,7 +58,10 @@
Fireflower.prototype.isPlayerCollided = function () {
//the first two elements of the hitbox array are an offset, so let's do this now.
var hpos1 = [this.pos[0] + this.hitbox[0], this.pos[1] + this.hitbox[1]];
var hpos1 = [
this.pos[0] + this.hitbox[0],
this.pos[1] + this.hitbox[1],
];
var hpos2 = [
player.pos[0] + player.hitbox[0],
player.pos[1] + player.hitbox[1],

8
examples/mario/js/flag.js
View File

@@ -40,6 +40,12 @@
};
Flag.prototype.render = function () {
level.flagpoleSprites[2].render(ctx, this.pos[0] - 8, this.pos[1], vX, vY);
level.flagpoleSprites[2].render(
ctx,
this.pos[0] - 8,
this.pos[1],
vX,
vY,
);
};
})();

14
examples/mario/js/floor.js
View File

@@ -40,8 +40,15 @@
} else {
//if the entity is over the block, it's basically floor
var center = hpos2[0] + ent.hitbox[2] / 2;
if (Math.abs(hpos2[1] + ent.hitbox[3] - hpos1[1]) <= ent.vel[1]) {
if (level.statics[this.pos[1] / 16 - 1][this.pos[0] / 16]) {
if (
Math.abs(hpos2[1] + ent.hitbox[3] - hpos1[1]) <=
ent.vel[1]
) {
if (
level.statics[this.pos[1] / 16 - 1][
this.pos[0] / 16
]
) {
return;
}
ent.vel[1] = 0;
@@ -51,7 +58,8 @@
ent.jumping = 0;
}
} else if (
Math.abs(hpos2[1] - hpos1[1] - this.hitbox[3]) > ent.vel[1] &&
Math.abs(hpos2[1] - hpos1[1] - this.hitbox[3]) >
ent.vel[1] &&
center + 2 >= hpos1[0] &&
center - 2 <= hpos1[0] + this.hitbox[2]
) {

12
examples/mario/js/game.js
View File

@@ -196,7 +196,11 @@ function render() {
//scenery gets drawn first to get layering right.
for (var i = 0; i < 15; i++) {
for (var j = Math.floor(vX / 16) - 1; j < Math.floor(vX / 16) + 20; j++) {
for (
var j = Math.floor(vX / 16) - 1;
j < Math.floor(vX / 16) + 20;
j++
) {
if (level.scenery[i][j]) {
renderEntity(level.scenery[i][j]);
}
@@ -218,7 +222,11 @@ function render() {
//then we draw every static object.
for (var i = 0; i < 15; i++) {
for (var j = Math.floor(vX / 16) - 1; j < Math.floor(vX / 16) + 20; j++) {
for (
var j = Math.floor(vX / 16) - 1;
j < Math.floor(vX / 16) + 20;
j++
) {
if (level.statics[i][j]) {
renderEntity(level.statics[i][j]);
}

5
examples/mario/js/goomba.js
View File

@@ -90,7 +90,10 @@
}
//the first two elements of the hitbox array are an offset, so let's do this now.
var hpos1 = [this.pos[0] + this.hitbox[0], this.pos[1] + this.hitbox[1]];
var hpos1 = [
this.pos[0] + this.hitbox[0],
this.pos[1] + this.hitbox[1],
];
var hpos2 = [ent.pos[0] + ent.hitbox[0], ent.pos[1] + ent.hitbox[1]];
//if the hitboxes actually overlap

5
examples/mario/js/koopa.js
View File

@@ -141,7 +141,10 @@
}
//the first two elements of the hitbox array are an offset, so let's do this now.
var hpos1 = [this.pos[0] + this.hitbox[0], this.pos[1] + this.hitbox[1]];
var hpos1 = [
this.pos[0] + this.hitbox[0],
this.pos[1] + this.hitbox[1],
];
var hpos2 = [ent.pos[0] + ent.hitbox[0], ent.pos[1] + ent.hitbox[1]];
//if the hitboxes actually overlap

43
examples/mario/js/levels/11.js
View File

@@ -10,9 +10,19 @@ var oneone = (Mario.oneone = function () {
invincibility: [144, 192, 240],
exit: 204,
floorSprite: new Mario.Sprite("sprites/tiles.png", [0, 0], [16, 16], 0),
cloudSprite: new Mario.Sprite("sprites/tiles.png", [0, 320], [48, 32], 0),
cloudSprite: new Mario.Sprite(
"sprites/tiles.png",
[0, 320],
[48, 32],
0,
),
wallSprite: new Mario.Sprite("sprites/tiles.png", [0, 16], [16, 16], 0),
brickSprite: new Mario.Sprite("sprites/tiles.png", [16, 0], [16, 16], 0),
brickSprite: new Mario.Sprite(
"sprites/tiles.png",
[16, 0],
[16, 16],
0,
),
brickBounceSprite: new Mario.Sprite(
"sprites/tiles.png",
[32, 0],
@@ -20,9 +30,20 @@ var oneone = (Mario.oneone = function () {
0,
),
rubbleSprite: function () {
return new Mario.Sprite("sprites/items.png", [64, 0], [8, 8], 3, [0, 1]);
return new Mario.Sprite(
"sprites/items.png",
[64, 0],
[8, 8],
3,
[0, 1],
);
},
ublockSprite: new Mario.Sprite("sprites/tiles.png", [48, 0], [16, 16], 0),
ublockSprite: new Mario.Sprite(
"sprites/tiles.png",
[48, 0],
[16, 16],
0,
),
superShroomSprite: new Mario.Sprite(
"sprites/items.png",
[0, 0],
@@ -69,7 +90,12 @@ var oneone = (Mario.oneone = function () {
),
pipeUpMid: new Mario.Sprite("sprites/tiles.png", [0, 144], [32, 16], 0),
pipeSideMid: new Mario.Sprite("sprites/tiles.png", [48, 128], [16, 32], 0),
pipeSideMid: new Mario.Sprite(
"sprites/tiles.png",
[48, 128],
[16, 32],
0,
),
pipeLeft: new Mario.Sprite("sprites/tiles.png", [32, 128], [16, 32], 0),
pipeTop: new Mario.Sprite("sprites/tiles.png", [0, 128], [32, 16], 0),
qblockSprite: new Mario.Sprite(
@@ -101,7 +127,12 @@ var oneone = (Mario.oneone = function () {
new Mario.Sprite("sprites/tiles.png", [144, 144], [16, 16], 0),
new Mario.Sprite("sprites/tiles.png", [160, 144], [16, 16], 0),
],
bushSprite: new Mario.Sprite("sprites/tiles.png", [176, 144], [48, 16], 0),
bushSprite: new Mario.Sprite(
"sprites/tiles.png",
[176, 144],
[48, 16],
0,
),
bushSprites: [
new Mario.Sprite("sprites/tiles.png", [176, 144], [16, 16], 0),
new Mario.Sprite("sprites/tiles.png", [192, 144], [16, 16], 0),

35
examples/mario/js/levels/11tunnel.js
View File

@@ -13,16 +13,36 @@ var oneonetunnel = (Mario.oneonetunnel = function () {
[0, 0, 0, 0, 1, 2, 1],
);
},
floorSprite: new Mario.Sprite("sprites/tiles.png", [0, 32], [16, 16], 0),
wallSprite: new Mario.Sprite("sprites/tiles.png", [32, 32], [16, 16], 0),
brickSprite: new Mario.Sprite("sprites/tiles.png", [16, 0], [16, 16], 0),
floorSprite: new Mario.Sprite(
"sprites/tiles.png",
[0, 32],
[16, 16],
0,
),
wallSprite: new Mario.Sprite(
"sprites/tiles.png",
[32, 32],
[16, 16],
0,
),
brickSprite: new Mario.Sprite(
"sprites/tiles.png",
[16, 0],
[16, 16],
0,
),
brickBounceSprite: new Mario.Sprite(
"sprites/tiles.png",
[32, 0],
[16, 16],
0,
),
ublockSprite: new Mario.Sprite("sprites/tiles.png", [48, 0], [16, 16], 0),
ublockSprite: new Mario.Sprite(
"sprites/tiles.png",
[48, 0],
[16, 16],
0,
),
pipeLMidSprite: new Mario.Sprite(
"sprites/tiles.png",
[0, 144],
@@ -48,7 +68,12 @@ var oneonetunnel = (Mario.oneonetunnel = function () {
0,
),
pipeUpMid: new Mario.Sprite("sprites/tiles.png", [0, 144], [32, 16], 0),
pipeSideMid: new Mario.Sprite("sprites/tiles.png", [48, 128], [16, 32], 0),
pipeSideMid: new Mario.Sprite(
"sprites/tiles.png",
[48, 128],
[16, 32],
0,
),
pipeLeft: new Mario.Sprite("sprites/tiles.png", [32, 128], [16, 32], 0),
pipeTop: new Mario.Sprite("sprites/tiles.png", [0, 128], [32, 16], 0),

89
examples/mario/js/levels/level.js
View File

@@ -59,13 +59,21 @@
Level.prototype.putFloor = function (start, end) {
for (var i = start; i < end; i++) {
this.statics[13][i] = new Mario.Floor([16 * i, 208], this.floorSprite);
this.statics[14][i] = new Mario.Floor([16 * i, 224], this.floorSprite);
this.statics[13][i] = new Mario.Floor(
[16 * i, 208],
this.floorSprite,
);
this.statics[14][i] = new Mario.Floor(
[16 * i, 224],
this.floorSprite,
);
}
};
Level.prototype.putGoomba = function (x, y) {
this.enemies.push(new Mario.Goomba([16 * x, 16 * y], this.goombaSprite()));
this.enemies.push(
new Mario.Goomba([16 * x, 16 * y], this.goombaSprite()),
);
};
Level.prototype.putKoopa = function (x, y) {
@@ -77,7 +85,10 @@
Level.prototype.putWall = function (x, y, height) {
//y is the bottom of the wall in this case.
for (var i = y - height; i < y; i++) {
this.statics[i][x] = new Mario.Floor([16 * x, 16 * i], this.wallSprite);
this.statics[i][x] = new Mario.Floor(
[16 * x, 16 * i],
this.wallSprite,
);
}
};
@@ -165,12 +176,18 @@
var px = x * 16,
py = y * 16;
this.scenery[y][x] = new Mario.Prop([px, py], this.hillSprites[0]);
this.scenery[y][x + 1] = new Mario.Prop([px + 16, py], this.hillSprites[3]);
this.scenery[y][x + 1] = new Mario.Prop(
[px + 16, py],
this.hillSprites[3],
);
this.scenery[y - 1][x + 1] = new Mario.Prop(
[px + 16, py - 16],
this.hillSprites[0],
);
this.scenery[y][x + 2] = new Mario.Prop([px + 32, py], this.hillSprites[4]);
this.scenery[y][x + 2] = new Mario.Prop(
[px + 32, py],
this.hillSprites[4],
);
this.scenery[y - 1][x + 2] = new Mario.Prop(
[px + 32, py - 16],
this.hillSprites[3],
@@ -179,12 +196,18 @@
[px + 32, py - 32],
this.hillSprites[1],
);
this.scenery[y][x + 3] = new Mario.Prop([px + 48, py], this.hillSprites[5]);
this.scenery[y][x + 3] = new Mario.Prop(
[px + 48, py],
this.hillSprites[5],
);
this.scenery[y - 1][x + 3] = new Mario.Prop(
[px + 48, py - 16],
this.hillSprites[2],
);
this.scenery[y][x + 4] = new Mario.Prop([px + 64, py], this.hillSprites[2]);
this.scenery[y][x + 4] = new Mario.Prop(
[px + 64, py],
this.hillSprites[2],
);
};
Level.prototype.putBush = function (x, y) {
@@ -195,31 +218,58 @@
px = x * 16;
py = y * 16;
this.scenery[y][x] = new Mario.Prop([px, py], this.bushSprites[0]);
this.scenery[y][x + 1] = new Mario.Prop([px + 16, py], this.bushSprites[1]);
this.scenery[y][x + 2] = new Mario.Prop([px + 32, py], this.bushSprites[1]);
this.scenery[y][x + 3] = new Mario.Prop([px + 48, py], this.bushSprites[1]);
this.scenery[y][x + 4] = new Mario.Prop([px + 64, py], this.bushSprites[2]);
this.scenery[y][x + 1] = new Mario.Prop(
[px + 16, py],
this.bushSprites[1],
);
this.scenery[y][x + 2] = new Mario.Prop(
[px + 32, py],
this.bushSprites[1],
);
this.scenery[y][x + 3] = new Mario.Prop(
[px + 48, py],
this.bushSprites[1],
);
this.scenery[y][x + 4] = new Mario.Prop(
[px + 64, py],
this.bushSprites[2],
);
};
Level.prototype.putTwoBush = function (x, y) {
px = x * 16;
py = y * 16;
this.scenery[y][x] = new Mario.Prop([px, py], this.bushSprites[0]);
this.scenery[y][x + 1] = new Mario.Prop([px + 16, py], this.bushSprites[1]);
this.scenery[y][x + 2] = new Mario.Prop([px + 32, py], this.bushSprites[1]);
this.scenery[y][x + 3] = new Mario.Prop([px + 48, py], this.bushSprites[2]);
this.scenery[y][x + 1] = new Mario.Prop(
[px + 16, py],
this.bushSprites[1],
);
this.scenery[y][x + 2] = new Mario.Prop(
[px + 32, py],
this.bushSprites[1],
);
this.scenery[y][x + 3] = new Mario.Prop(
[px + 48, py],
this.bushSprites[2],
);
};
Level.prototype.putSmallHill = function (x, y) {
var px = x * 16,
py = y * 16;
this.scenery[y][x] = new Mario.Prop([px, py], this.hillSprites[0]);
this.scenery[y][x + 1] = new Mario.Prop([px + 16, py], this.hillSprites[3]);
this.scenery[y][x + 1] = new Mario.Prop(
[px + 16, py],
this.hillSprites[3],
);
this.scenery[y - 1][x + 1] = new Mario.Prop(
[px + 16, py - 16],
this.hillSprites[1],
);
this.scenery[y][x + 2] = new Mario.Prop([px + 32, py], this.hillSprites[2]);
this.scenery[y][x + 2] = new Mario.Prop(
[px + 32, py],
this.hillSprites[2],
);
};
Level.prototype.putTwoCloud = function (x, y) {
@@ -289,7 +339,10 @@
this.flagpoleSprites[1],
);
}
this.scenery[2][x] = new Mario.Prop([16 * x, 32], this.flagpoleSprites[0]);
this.scenery[2][x] = new Mario.Prop(
[16 * x, 32],
this.flagpoleSprites[0],
);
this.items.push(new Mario.Flag(16 * x));
};
})();

5
examples/mario/js/mushroom.js
View File

@@ -99,7 +99,10 @@
//we have access to player everywhere, so let's just do this.
Mushroom.prototype.isPlayerCollided = function () {
//the first two elements of the hitbox array are an offset, so let's do this now.
var hpos1 = [this.pos[0] + this.hitbox[0], this.pos[1] + this.hitbox[1]];
var hpos1 = [
this.pos[0] + this.hitbox[0],
this.pos[1] + this.hitbox[1],
];
var hpos2 = [
player.pos[0] + player.hitbox[0],
player.pos[1] + player.hitbox[1],

10
examples/mario/js/pipe.js
View File

@@ -25,7 +25,8 @@
};
Pipe.prototype.checkPipe = function () {
if (this.destination === undefined || !input.isDown(this.direction)) return;
if (this.destination === undefined || !input.isDown(this.direction))
return;
var h = player.power === 0 ? 16 : 32;
var x = Math.floor(player.pos[0]);
@@ -119,7 +120,9 @@
) {
//if the entity is over the block, it's basically floor
var center = hpos2[0] + ent.hitbox[2] / 2;
if (Math.abs(hpos2[1] + ent.hitbox[3] - hpos1[1]) <= ent.vel[1]) {
if (
Math.abs(hpos2[1] + ent.hitbox[3] - hpos1[1]) <= ent.vel[1]
) {
ent.vel[1] = 0;
ent.pos[1] = hpos1[1] - ent.hitbox[3] - ent.hitbox[1];
ent.standing = true;
@@ -127,7 +130,8 @@
ent.jumping = 0;
}
} else if (
Math.abs(hpos2[1] - hpos1[1] - this.hitbox[3]) > ent.vel[1] &&
Math.abs(hpos2[1] - hpos1[1] - this.hitbox[3]) >
ent.vel[1] &&
center + 2 >= hpos1[0] &&
center - 2 <= hpos1[0] + this.hitbox[2]
) {

13
examples/mario/js/player.js
View File

@@ -19,7 +19,12 @@
Mario.Entity.call(this, {
pos: pos,
sprite: new Mario.Sprite("sprites/player.png", [80, 32], [16, 16], 0),
sprite: new Mario.Sprite(
"sprites/player.png",
[80, 32],
[16, 16],
0,
),
hitbox: [0, 0, 16, 16],
});
});
@@ -286,7 +291,8 @@
this.sprite.size = [0, 0];
this.vel = [0, 0];
window.setTimeout(function () {
player.sprite.size = player.power === 0 ? [16, 16] : [16, 32];
player.sprite.size =
player.power === 0 ? [16, 16] : [16, 32];
player.exiting = false;
player.noInput = false;
level.loader();
@@ -390,7 +396,8 @@
//otherwise, you get turned into small mario
sounds.pipe.play();
this.powering = [
0, 5, 1, 5, 2, 5, 1, 5, 2, 5, 1, 5, 2, 5, 1, 5, 2, 5, 1, 5, 2, 5, 3,
0, 5, 1, 5, 2, 5, 1, 5, 2, 5, 1, 5, 2, 5, 1, 5, 2, 5, 1, 5, 2,
5, 3,
];
this.shift = [0, 16, -16, 16];
this.sprite.pos = [160, 0];

8
examples/mario/js/rubble.js
View File

@@ -52,7 +52,13 @@
Rubble.prototype.render = function () {
for (var i = 0; i < 4; i++) {
if (this.sprites[i] === undefined) continue;
this.sprites[i].render(ctx, this.poss[i][0], this.poss[i][1], vX, vY);
this.sprites[i].render(
ctx,
this.poss[i][0],
this.poss[i][1],
vX,
vY,
);
}
};
})();

9
examples/mario/js/sprite.js
View File

@@ -1,7 +1,14 @@
(function () {
if (typeof Mario === "undefined") window.Mario = {};
var Sprite = (Mario.Sprite = function (img, pos, size, speed, frames, once) {
var Sprite = (Mario.Sprite = function (
img,
pos,
size,
speed,
frames,
once,
) {
this.pos = pos;
this.size = size;
this.speed = speed;

5
examples/mario/js/star.js
View File

@@ -97,7 +97,10 @@
//we have access to player everywhere, so let's just do this.
Star.prototype.isPlayerCollided = function () {
//the first two elements of the hitbox array are an offset, so let's do this now.
var hpos1 = [this.pos[0] + this.hitbox[0], this.pos[1] + this.hitbox[1]];
var hpos1 = [
this.pos[0] + this.hitbox[0],
this.pos[1] + this.hitbox[1],
];
var hpos2 = [
player.pos[0] + player.hitbox[0],
player.pos[1] + player.hitbox[1],

5
examples/matplotlib.html
View File

@@ -3,7 +3,10 @@
<title>Matplotlib</title>
<meta charset="utf-8" />
<link rel="icon" type="image/x-icon" href="./favicon.png" />
<link rel="stylesheet" href="https://pyscript.net/latest/pyscript.css" />
<link
rel="stylesheet"
href="https://pyscript.net/latest/pyscript.css"
/>
<script defer src="https://pyscript.net/latest/pyscript.js"></script>
<link rel="stylesheet" href="./assets/css/examples.css" />
</head>

8
examples/message_passing.html
View File

@@ -1,7 +1,10 @@
<html>
<head>
<link rel="icon" type="image/x-icon" href="./favicon.png" />
<link rel="stylesheet" href="https://pyscript.net/latest/pyscript.css" />
<link
rel="stylesheet"
href="https://pyscript.net/latest/pyscript.css"
/>
<script defer src="https://pyscript.net/latest/pyscript.js"></script>
<link rel="stylesheet" href="./assets/css/examples.css" />
@@ -52,7 +55,8 @@ print(f"message: {message}")
</py-script>
</pre>
<p>
Try out message passing below by doing any one of the following steps:
Try out message passing below by doing any one of the following
steps:
</p>
<pre><code>message @ adj_mat</code></pre>
<pre><code>message @ adj_mat @ adj_mat</code></pre>

142
examples/micrograd_ai.html
View File

@@ -6,7 +6,10 @@
<title>micrograd</title>
<link rel="stylesheet" href="https://pyscript.net/latest/pyscript.css" />
<link
rel="stylesheet"
href="https://pyscript.net/latest/pyscript.css"
/>
<script defer src="https://pyscript.net/latest/pyscript.js"></script>
<link
@@ -37,41 +40,45 @@
<div>
<p>
<a href="https://github.com/karpathy/micrograd">Micrograd</a> is a tiny
Autograd engine created by
<a href="https://twitter.com/karpathy">Andrej Karpathy</a>. This app
recreates the
<a href="https://github.com/karpathy/micrograd/blob/master/demo.ipynb"
<a href="https://github.com/karpathy/micrograd">Micrograd</a> is
a tiny Autograd engine created by
<a href="https://twitter.com/karpathy">Andrej Karpathy</a>. This
app recreates the
<a
href="https://github.com/karpathy/micrograd/blob/master/demo.ipynb"
>demo</a
>
he prepared for this package using pyscript to train a basic model,
written in Python, natively in the browser. <br />
he prepared for this package using pyscript to train a basic
model, written in Python, natively in the browser. <br />
</p>
</div>
<div>
<p>
You may run each Python REPL cell interactively by pressing (Shift +
Enter) or (Ctrl + Enter). You can also modify the code directly as you
wish. If you want to run all the code at once, not each cell
individually, you may instead click the 'Run All' button. Training the
model takes between 1-2 min if you decide to 'Run All' at once. 'Run
All' is your only option if you are running this on a mobile device
where you cannot press (Shift + Enter). After the model is trained, a
plot image should be displayed depicting the model's ability to classify
the data. <br />
You may run each Python REPL cell interactively by pressing
(Shift + Enter) or (Ctrl + Enter). You can also modify the code
directly as you wish. If you want to run all the code at once,
not each cell individually, you may instead click the 'Run All'
button. Training the model takes between 1-2 min if you decide
to 'Run All' at once. 'Run All' is your only option if you are
running this on a mobile device where you cannot press (Shift +
Enter). After the model is trained, a plot image should be
displayed depicting the model's ability to classify the data.
<br />
</p>
<p>
Currently the <code>&gt;</code> symbol is being imported incorrectly as
<code>&amp;gt;</code> into the REPL's. In this app the
<code>&gt;</code> symbol has been replaced with
<code>().__gt__()</code> so you can run the code without issue. Ex:
instead of <code>a &gt; b</code>, you will see
Currently the <code>&gt;</code> symbol is being imported
incorrectly as <code>&amp;gt;</code> into the REPL's. In this
app the <code>&gt;</code> symbol has been replaced with
<code>().__gt__()</code> so you can run the code without issue.
Ex: instead of <code>a &gt; b</code>, you will see
<code>(a).__gt__(b)</code> instead. <br />
</p>
<py-script>
import js; js.document.getElementById('python-status').innerHTML = 'Python is now ready. You may proceed.'
</py-script>
<div id="python-status">Python is currently starting. Please wait...</div>
<div id="python-status">
Python is currently starting. Please wait...
</div>
<button
id="run-all-button"
class="btn btn-primary"
@@ -91,8 +98,8 @@
import random import numpy as np import matplotlib.pyplot as plt </py-repl
><br />
<py-repl auto-generate="false">
from micrograd.engine import Value from micrograd.nn import Neuron, Layer,
MLP </py-repl
from micrograd.engine import Value from micrograd.nn import Neuron,
Layer, MLP </py-repl
><br />
<py-repl auto-generate="true">
np.random.seed(1337) random.seed(1337) </py-repl
@@ -100,17 +107,18 @@
<py-repl auto-generate="true">
#An adaptation of sklearn's make_moons function
https://scikit-learn.org/stable/modules/generated/sklearn.datasets.make_moons.html
def make_moons(n_samples=100, noise=None): n_samples_out, n_samples_in =
n_samples, n_samples outer_circ_x = np.cos(np.linspace(0, np.pi,
n_samples_out)) outer_circ_y = np.sin(np.linspace(0, np.pi,
n_samples_out)) inner_circ_x = 1 - np.cos(np.linspace(0, np.pi,
n_samples_in)) inner_circ_y = 1 - np.sin(np.linspace(0, np.pi,
n_samples_in)) - 0.5 X = np.vstack([np.append(outer_circ_x, inner_circ_x),
def make_moons(n_samples=100, noise=None): n_samples_out,
n_samples_in = n_samples, n_samples outer_circ_x =
np.cos(np.linspace(0, np.pi, n_samples_out)) outer_circ_y =
np.sin(np.linspace(0, np.pi, n_samples_out)) inner_circ_x = 1 -
np.cos(np.linspace(0, np.pi, n_samples_in)) inner_circ_y = 1 -
np.sin(np.linspace(0, np.pi, n_samples_in)) - 0.5 X =
np.vstack([np.append(outer_circ_x, inner_circ_x),
np.append(outer_circ_y, inner_circ_y)]).T y =
np.hstack([np.zeros(n_samples_out, dtype=np.intp), np.ones(n_samples_in,
dtype=np.intp)]) if noise is not None: X += np.random.normal(loc=0.0,
scale=noise, size=X.shape) return X, y X, y = make_moons(n_samples=100,
noise=0.1) </py-repl
np.hstack([np.zeros(n_samples_out, dtype=np.intp),
np.ones(n_samples_in, dtype=np.intp)]) if noise is not None: X +=
np.random.normal(loc=0.0, scale=noise, size=X.shape) return X, y X,
y = make_moons(n_samples=100, noise=0.1) </py-repl
><br />
<py-repl auto-generate="true">
y = y*2 - 1 # make y be -1 or 1 # visualize in 2D
@@ -125,13 +133,13 @@
<div>
Line 24 has been changed from: <br />
<code
>accuracy = [(yi &gt; 0) == (scorei.data &gt; 0) for yi, scorei in
zip(yb, scores)]</code
>accuracy = [(yi &gt; 0) == (scorei.data &gt; 0) for yi, scorei
in zip(yb, scores)]</code
><br />
to: <br />
<code
>accuracy = [((yi).__gt__(0)) == ((scorei.data).__gt__(0)) for yi,
scorei in zip(yb, scores)]</code
>accuracy = [((yi).__gt__(0)) == ((scorei.data).__gt__(0)) for
yi, scorei in zip(yb, scores)]</code
><br />
</div>
@@ -139,46 +147,48 @@
# loss function def loss(batch_size=None): # inline DataLoader :) if
batch_size is None: Xb, yb = X, y else: ri =
np.random.permutation(X.shape[0])[:batch_size] Xb, yb = X[ri], y[ri]
inputs = [list(map(Value, xrow)) for xrow in Xb] # forward the model to
get scores scores = list(map(model, inputs)) # svm "max-margin" loss
losses = [(1 + -yi*scorei).relu() for yi, scorei in zip(yb, scores)]
data_loss = sum(losses) * (1.0 / len(losses)) # L2 regularization alpha =
1e-4 reg_loss = alpha * sum((p*p for p in model.parameters())) total_loss
= data_loss + reg_loss # also get accuracy accuracy = [((yi).__gt__(0)) ==
((scorei.data).__gt__(0)) for yi, scorei in zip(yb, scores)] return
total_loss, sum(accuracy) / len(accuracy) total_loss, acc = loss()
print(total_loss, acc) </py-repl
inputs = [list(map(Value, xrow)) for xrow in Xb] # forward the model
to get scores scores = list(map(model, inputs)) # svm "max-margin"
loss losses = [(1 + -yi*scorei).relu() for yi, scorei in zip(yb,
scores)] data_loss = sum(losses) * (1.0 / len(losses)) # L2
regularization alpha = 1e-4 reg_loss = alpha * sum((p*p for p in
model.parameters())) total_loss = data_loss + reg_loss # also get
accuracy accuracy = [((yi).__gt__(0)) == ((scorei.data).__gt__(0))
for yi, scorei in zip(yb, scores)] return total_loss, sum(accuracy)
/ len(accuracy) total_loss, acc = loss() print(total_loss, acc) </py-repl
><br />
<py-repl auto-generate="true">
# optimization for k in range(20): #was 100. Accuracy can be further
improved w/ more epochs (to 100%). # forward total_loss, acc = loss() #
backward model.zero_grad() total_loss.backward() # update (sgd)
learning_rate = 1.0 - 0.9*k/100 for p in model.parameters(): p.data -=
learning_rate * p.grad if k % 1 == 0: print(f"step {k} loss
{total_loss.data}, accuracy {acc*100}%") </py-repl
improved w/ more epochs (to 100%). # forward total_loss, acc =
loss() # backward model.zero_grad() total_loss.backward() # update
(sgd) learning_rate = 1.0 - 0.9*k/100 for p in model.parameters():
p.data -= learning_rate * p.grad if k % 1 == 0: print(f"step {k}
loss {total_loss.data}, accuracy {acc*100}%") </py-repl
><br />
<div>
<p>
Please wait for the training loop above to complete. It will not print
out stats until it has completely finished. This typically takes 1-2
min. <br /><br />
Please wait for the training loop above to complete. It will not
print out stats until it has completely finished. This typically
takes 1-2 min. <br /><br />
Line 9 has been changed from: <br />
<code>Z = np.array([s.data &gt; 0 for s in scores])</code><br />
to: <br />
<code>Z = np.array([(s.data).__gt__(0) for s in scores])</code><br />
<code>Z = np.array([(s.data).__gt__(0) for s in scores])</code
><br />
</p>
</div>
<py-repl auto-generate="true">
h = 0.25 x_min, x_max = X[:, 0].min() - 1, X[:, 0].max() + 1 y_min, y_max
= X[:, 1].min() - 1, X[:, 1].max() + 1 xx, yy =
np.meshgrid(np.arange(x_min, x_max, h), np.arange(y_min, y_max, h)) Xmesh
= np.c_[xx.ravel(), yy.ravel()] inputs = [list(map(Value, xrow)) for xrow
in Xmesh] scores = list(map(model, inputs)) Z =
np.array([(s.data).__gt__(0) for s in scores]) Z = Z.reshape(xx.shape) fig
= plt.figure() plt.contourf(xx, yy, Z, cmap=plt.cm.Spectral, alpha=0.8)
plt.scatter(X[:, 0], X[:, 1], c=y, s=40, cmap=plt.cm.Spectral)
plt.xlim(xx.min(), xx.max()) plt.ylim(yy.min(), yy.max()) plt </py-repl
h = 0.25 x_min, x_max = X[:, 0].min() - 1, X[:, 0].max() + 1 y_min,
y_max = X[:, 1].min() - 1, X[:, 1].max() + 1 xx, yy =
np.meshgrid(np.arange(x_min, x_max, h), np.arange(y_min, y_max, h))
Xmesh = np.c_[xx.ravel(), yy.ravel()] inputs = [list(map(Value,
xrow)) for xrow in Xmesh] scores = list(map(model, inputs)) Z =
np.array([(s.data).__gt__(0) for s in scores]) Z =
Z.reshape(xx.shape) fig = plt.figure() plt.contourf(xx, yy, Z,
cmap=plt.cm.Spectral, alpha=0.8) plt.scatter(X[:, 0], X[:, 1], c=y,
s=40, cmap=plt.cm.Spectral) plt.xlim(xx.min(), xx.max())
plt.ylim(yy.min(), yy.max()) plt </py-repl
><br />
<py-repl auto-generate="true"> 1+1 </py-repl><br />
</body>

44
examples/numpy_canvas_fractals.html
View File

@@ -1,12 +1,15 @@
<html>
<head>
<title>
Visualization of Mandelbrot, Julia and Newton sets with NumPy and HTML5
canvas
Visualization of Mandelbrot, Julia and Newton sets with NumPy and
HTML5 canvas
</title>
<meta charset="utf-8" />
<link rel="icon" type="image/x-icon" href="./favicon.png" />
<link rel="stylesheet" href="https://pyscript.net/latest/pyscript.css" />
<link
rel="stylesheet"
href="https://pyscript.net/latest/pyscript.css"
/>
<script defer src="https://pyscript.net/latest/pyscript.js"></script>
<link rel="stylesheet" href="./assets/css/examples.css" />
<style>
@@ -44,7 +47,12 @@
</nav>
<section class="pyscript">
<div
style="display: flex; flex-direction: column; gap: 1em; width: 600px"
style="
display: flex;
flex-direction: column;
gap: 1em;
width: 600px;
"
>
<div id="mandelbrot">
<div style="text-align: center">Mandelbrot set</div>
@@ -62,14 +70,25 @@
</div>
<div id="newton">
<div style="text-align: center">Newton set</div>
<fieldset style="display: flex; flex-direction: row; gap: 1em">
<fieldset
style="display: flex; flex-direction: row; gap: 1em"
>
<div>
<span style="white-space: pre">p(z) = </span
><input id="poly" type="text" value="z**3 - 2*z + 2" />
><input
id="poly"
type="text"
value="z**3 - 2*z + 2"
/>
</div>
<div>
<span style="white-space: pre">a = </span
><input id="coef" type="text" value="1" style="width: 40px" />
><input
id="coef"
type="text"
value="1"
style="width: 40px"
/>
</div>
<div style="display: flex; flex-direction: row">
<span style="white-space: pre">x = [</span>
@@ -105,7 +124,9 @@
/>
<span style="white-space: pre">]</span>
</div>
<div style="display: flex; flex-direction: row; gap: 1em">
<div
style="display: flex; flex-direction: row; gap: 1em"
>
<div style="white-space: pre">
<input
type="radio"
@@ -117,7 +138,12 @@
convergence
</div>
<div style="white-space: pre">
<input type="radio" id="iter" name="type" value="iterations" />
<input
type="radio"
id="iter"
name="type"
value="iterations"
/>
iterations
</div>
</div>

18
examples/pandas.html
View File

@@ -5,7 +5,10 @@
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1" />
<link rel="icon" type="image/png" href="./favicon.png" />
<link rel="stylesheet" href="https://pyscript.net/latest/pyscript.css" />
<link
rel="stylesheet"
href="https://pyscript.net/latest/pyscript.css"
/>
<script defer src="https://pyscript.net/latest/pyscript.js"></script>
<link rel="stylesheet" href="./assets/css/examples.css" />
@@ -17,7 +20,12 @@
<a href="/">
<img src="./logo.png" class="logo" />
</a>
<a class="title" id="page-title" href="" style="color: #f0ab3c"></a>
<a
class="title"
id="page-title"
href=""
style="color: #f0ab3c"
></a>
</div>
</nav>
@@ -40,9 +48,9 @@
<div id="pandas-repl" hidden>
<h3>Python REPL</h3>
<py-repl id="pandas-repl-inner" output="pandas-output-inner">
# Hit SHIFT + ENTER to execute example code # Get all closed airports in
Great Britain df2 = df.query("type == 'closed' & iso_country == 'GB'")
df2
# Hit SHIFT + ENTER to execute example code # Get all closed
airports in Great Britain df2 = df.query("type == 'closed' &
iso_country == 'GB'") df2
</py-repl>
</div>

9
examples/panel.html
View File

@@ -19,7 +19,10 @@
type="text/javascript"
src="https://cdn.jsdelivr.net/npm/@holoviz/panel@0.14.1/dist/panel.min.js"
></script>
<link rel="stylesheet" href="https://pyscript.net/latest/pyscript.css" />
<link
rel="stylesheet"
href="https://pyscript.net/latest/pyscript.css"
/>
<script defer src="https://pyscript.net/latest/pyscript.js"></script>
<link rel="stylesheet" href="./assets/css/examples.css" />
</head>
@@ -29,7 +32,9 @@
<a href="/">
<img src="./logo.png" class="logo" />
</a>
<a class="title" href="" style="color: #f0ab3c">Panel Example</a>
<a class="title" href="" style="color: #f0ab3c"
>Panel Example</a
>
</div>
</nav>
<section class="pyscript">

5
examples/panel_deckgl.html
View File

@@ -92,7 +92,10 @@
padding: 0;
}
</style>
<link rel="stylesheet" href="https://pyscript.net/latest/pyscript.css" />
<link
rel="stylesheet"
href="https://pyscript.net/latest/pyscript.css"
/>
<script defer src="https://pyscript.net/latest/pyscript.js"></script>
<link rel="stylesheet" href="./assets/css/examples.css" />
</head>

5
examples/panel_kmeans.html
View File

@@ -84,7 +84,10 @@
<script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/js/bootstrap.bundle.min.js"></script>
<link rel="stylesheet" href="https://pyscript.net/latest/pyscript.css" />
<link
rel="stylesheet"
href="https://pyscript.net/latest/pyscript.css"
/>
<script defer src="https://pyscript.net/latest/pyscript.js"></script>
<link rel="stylesheet" href="./assets/css/examples.css" />
</head>

9
examples/panel_stream.html
View File

@@ -66,7 +66,10 @@
<script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/js/bootstrap.bundle.min.js"></script>
<link rel="stylesheet" href="https://pyscript.net/latest/pyscript.css" />
<link
rel="stylesheet"
href="https://pyscript.net/latest/pyscript.css"
/>
<script defer src="https://pyscript.net/latest/pyscript.js"></script>
<link rel="stylesheet" href="./assets/css/examples.css" />
</head>
@@ -77,7 +80,9 @@
<a href="/">
<img src="./logo.png" class="logo" />
</a>
<a class="title" href="" style="color: #f0ab3c">Panel Streaming Demo</a>
<a class="title" href="" style="color: #f0ab3c"
>Panel Streaming Demo</a
>
</div>
</nav>
<section class="pyscript">

9
examples/repl.html
View File

@@ -7,7 +7,10 @@
<title>REPL</title>
<link rel="icon" type="image/png" href="favicon.png" />
<link rel="stylesheet" href="https://pyscript.net/latest/pyscript.css" />
<link
rel="stylesheet"
href="https://pyscript.net/latest/pyscript.css"
/>
<script defer src="https://pyscript.net/latest/pyscript.js"></script>
<link rel="stylesheet" href="./assets/css/examples.css" />
</head>
@@ -18,7 +21,9 @@
<a href="/">
<img src="./logo.png" class="logo" />
</a>
<a class="title" href="" style="color: #f0ab3c">PyScript REPL</a>
<a class="title" href="" style="color: #f0ab3c"
>PyScript REPL</a
>
</div>
</nav>
<section class="pyscript">

5
examples/repl2.html
View File

@@ -7,7 +7,10 @@
<title>Custom REPL Example</title>
<link rel="icon" type="image/png" href="favicon.png" />
<link rel="stylesheet" href="https://pyscript.net/latest/pyscript.css" />
<link
rel="stylesheet"
href="https://pyscript.net/latest/pyscript.css"
/>
<link rel="stylesheet" href="repl.css" />
<link rel="stylesheet" href="./assets/css/examples.css" />
<script defer src="https://pyscript.net/latest/pyscript.js"></script>

15
examples/simple_bioinformatics_tool.html
View File

@@ -32,7 +32,9 @@
<a href="https://pyscript.net/" target="_blank"
><code>PyScript</code></a
>
in <strong>Bioinformatics/Computational Biology</strong> fields!
in
<strong>Bioinformatics/Computational Biology</strong>
fields!
</p>
</div>
</section>
@@ -59,7 +61,9 @@
<div class="control is-expanded">
<div class="select is-fullwidth">
<select name="operation" id="operation">
<option value="Reverse">Compute the reverse counterpart</option>
<option value="Reverse">
Compute the reverse counterpart
</option>
<option value="Complement">
Compute the complement counterpart
</option>
@@ -111,11 +115,14 @@
<br />
<a href="https://github.com/furkanmtorun">GitHub</a>
|
<a href="https://scholar.google.com/citations?user=d5ZyOZ4AAAAJ"
<a
href="https://scholar.google.com/citations?user=d5ZyOZ4AAAAJ"
>Google Scholar</a
>
| <a href="https://twitter.com/furkanmtorun">Twitter</a> |
<a href="https://www.linkedin.com/in/furkanmtorun/">LinkedIn</a>
<a href="https://www.linkedin.com/in/furkanmtorun/"
>LinkedIn</a
>
</p>
</div>
</footer>

9
examples/simple_clock.html
View File

@@ -7,7 +7,10 @@
<title>Simple Clock Demo</title>
<link rel="icon" type="image/png" href="favicon.png" />
<link rel="stylesheet" href="https://pyscript.net/latest/pyscript.css" />
<link
rel="stylesheet"
href="https://pyscript.net/latest/pyscript.css"
/>
<script defer src="https://pyscript.net/latest/pyscript.js"></script>
<link rel="stylesheet" href="./assets/css/examples.css" />
@@ -23,7 +26,9 @@
</div>
</nav>
<section class="pyscript">
<div class="font-mono">start time: <label id="outputDiv"></label></div>
<div class="font-mono">
start time: <label id="outputDiv"></label>
</div>
<div id="outputDiv2" class="font-mono"></div>
<div id="outputDiv3" class="font-mono"></div>

11
examples/todo-pylist.html
View File

@@ -6,7 +6,10 @@
<title>Todo App</title>
<link rel="icon" type="image/png" href="favicon.png" />
<link rel="stylesheet" href="https://pyscript.net/latest/pyscript.css" />
<link
rel="stylesheet"
href="https://pyscript.net/latest/pyscript.css"
/>
<script defer src="https://pyscript.net/latest/pyscript.js"></script>
<link rel="stylesheet" href="./assets/css/examples.css" />
@@ -71,7 +74,11 @@
</py-script>
<div class="py-box">
<input id="new-task-content" />
<button py-click="add_task()" id="new-task-btn" class="py-button">
<button
py-click="add_task()"
id="new-task-btn"
class="py-button"
>
Add Task!
</button>
</div>

11
examples/todo.html
View File

@@ -7,7 +7,10 @@
<title>Todo App</title>
<link rel="icon" type="image/png" href="favicon.png" />
<link rel="stylesheet" href="https://pyscript.net/latest/pyscript.css" />
<link
rel="stylesheet"
href="https://pyscript.net/latest/pyscript.css"
/>
<script defer src="https://pyscript.net/latest/pyscript.js"></script>
<link rel="stylesheet" href="./assets/css/examples.css" />
@@ -44,7 +47,11 @@
</h1>
</div>
<div>
<input id="new-task-content" class="py-input" type="text" />
<input
id="new-task-content"
class="py-input"
type="text"
/>
<button
id="new-task-btn"
class="py-button"

5
examples/toga/freedom.html
View File

@@ -11,7 +11,10 @@
<link rel="icon" type="image/png" href="/static/logo-32.png" />
<script defer src="https://pyscript.net/latest/pyscript.js"></script>
<link rel="stylesheet" href="https://pyscript.net/latest/pyscript.css" />
<link
rel="stylesheet"
href="https://pyscript.net/latest/pyscript.css"
/>
<link
rel="stylesheet"

5
examples/webgl/raycaster/index.html
View File

@@ -22,7 +22,10 @@
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/0.147.0/three.min.js"></script>
<script defer src="https://pyscript.net/latest/pyscript.js"></script>
<link rel="stylesheet" href="https://pyscript.net/latest/pyscript.css" />
<link
rel="stylesheet"
href="https://pyscript.net/latest/pyscript.css"
/>
<py-script>
from pyodide.ffi import create_proxy, to_js
from js import window