Back
Version 1
5/18/2024
export const pyodideExample = () => {
const html = `
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>My Pyodide App</title>
<script type="text/javascript" src="https://cdn.jsdelivr.net/pyodide/v0.25.1/full/pyodide.js"></script>
</head>
<body>
<h1>Calculate the square of a number and visualize powers using Python in WebAssembly</h1>
<input type="number" id="number" placeholder="Enter a number">
<button id="calculate">Calculate</button>
<p id="result"></p>
<canvas id="plot"></canvas>
<script>
async function main() {
let pyodide = await loadPyodide();
await pyodide.loadPackage('matplotlib');
console.log('Pyodide is ready to use!');
// Load and run the Python code for visualization
pyodide.runPython(\`
import matplotlib.pyplot as plt
import io
import base64
def plot_powers(n):
x = list(range(1, n+1))
y_square = [i**2 for i in x]
y_cube = [i**3 for i in x]
plt.figure()
plt.plot(x, y_square, label='Square')
plt.plot(x, y_cube, label='Cube')
iamseeley-pyodidepowersvis.web.val.run
Updated: May 18, 2024