8000 Test 4.4/1: PyScript workers · JayAyAre/PyScript-vs-JavaScript@80eb358 · GitHub
[go: up one dir, main page]
Skip to content

Commit 80eb358

Browse files
JayAyAreJayAyAre
committed
Test 4.4/1: PyScript workers
1 parent 755fd15 commit 80eb358

File tree

22 files changed

+881
-323
lines changed

22 files changed

+881
-323
lines changed

‎4.3-carga-graficos-complejos/prueba-1/index.html

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,6 @@
77

88
<link rel="stylesheet" href="https://pyscript.net/releases/2024.5.2/core.css">
99
<script type="module" src="https://pyscript.net/releases/2024.5.2/core.js"></script>
10-
<script src="https://cdn.jsdelivr.net/npm/danfojs@1.2.0/lib/bundle.min.js"></script>
1110
<script src="javascript/main.js" defer></script>
1211
<script>
1312
document.addEventListener('py:ready', () => {

‎4.3-carga-graficos-complejos/prueba-1/javascript/main.js

Lines changed: 63 additions & 56 deletions
Original file line numberDiff line numberDiff line change
@@ -19,89 +19,96 @@ function initializeWorker() {
1919
});
2020
}
2121

22+
async function measureMemoryUsage(duration = 500, interval = 50) {
23+
// Muestra el uso de memoria repetidamente durante 'duration' milisegundos
24+
const memoryUsages = [];
25+
const start = performance.now();
26+
return new Promise((resolve) => {
27+
const timer = setInterval(() => {
28+
if (performance.memory) {
29+
// Guardamos el uso actual en bytes
30+
memoryUsages.push(performance.memory.usedJSHeapSize);
31+
}
32+
if (performance.now() - start >= duration) {
33+
clearInterval(timer);
34+
// Tomamos el máximo y lo convertimos a MB
35+
const maxUsage = Math.max(...memoryUsages);
36+
resolve(maxUsage / (1024 * 1024));
37+
}
38+
}, interval);
39+
});
40+
}
41+
2242
async function runJSBenchmark() {
2343
try {
24-
startJsTimer();
25-
const overallStart = performance.now();
44+
startJSTimer();
45+
const startWorkerTime = performance.now();
2646

27-
const initStart = performance.now();
28-
await initializeWorker();
29-
const workerTime = performance.now() - initStart;
30-
31-
const numExecutions = parseInt(
32-
document.querySelector("#num-executions-javascript").value
33-
);
47+
if (!worker) {
48+
worker = new Worker("./javascript/worker.js");
49+
await setupWorker();
50+
}
3451

35-
const resultsList = [];
52+
const workerTime = performance.now() - startWorkerTime;
3653

3754
clearCell("javascript");
3855
clearGraphContainer("graph-container-js");
3956

40-
for (let i = 0; i < numExecutions; i++) {
41-
const id = `graph-${Date.now()}-${i}`;
42-
const result = await new Promise((resolve) => {
43-
pendingPromises.set(id, resolve);
44-
worker.postMessage({ id, size: 100_000, draw: true });
45-
});
46-
resultsList.push(result);
47-
}
57+
const numSeries = parseInt(
58+
document.getElementById("num-series-js").value
59+
);
60+
const numPoints = parseInt(
61+
document.getElementById("num-points-js").value
62+
);
4863

49-
const totalElapsed = performance.now() - overallStart;
64+
// Enviar el mensaje al worker
65+
const id = `graph-${Date.now()}`;
66+
// Obtenemos el resultado del worker
67+
const result = await new Promise((resolve) => {
68+
pendingPromises.set(id, resolve);
69+
worker.postMessage({ id, size: 100_000, draw: true });
70+
});
5071

51-
// Mostrar el gráfico de la última ejecución
52-
const lastResult = resultsList[resultsList.length - 1];
53-
if (lastResult.image_base64) {
54-
displayPlotJs(lastResult.image_base64< 10000 /span>);
55-
}
72+
// Esperar 500ms y medir el uso máximo de memoria durante ese período
73+
const measuredMemory = await measureMemoryUsage(500, 50);
5674

57-
// Calcular promedios
58-
const accumulated = {
59-
data_gen_time: 0,
60-
render_time: 0,
61-
memory: 0,
62-
total_time: 0,
63-
};
75+
// Añadimos el uso de memoria medido a result
76+
result.memory = measuredMemory;
6477

65-
for (const result of resultsList) {
66-
accumulated.data_gen_time += result.data_gen_time;
67-
accumulated.render_time += result.render_time;
68-
accumulated.memory += result.memory;
69-
accumulated.total_time += result.total_time;
70-
}
78+
stopJSTimer();
7179

72-
const averaged = {
73-
data_gen_time: accumulated.data_gen_time / numExecutions,
74-
render_time: accumulated.render_time / numExecutions,
75-
memory: accumulated.memory / numExecutions,
76-
total_time: accumulated.total_time / numExecutions,
77-
};
80+
// Si existe la imagen, la mostramos
81+
if (result.image_base64) {
82+
displayPlotJs(result.image_base64);
83+
}
7884

79-
// Mostrar resultados
85+
// Actualizamos la UI en un solo contenedor (javascript-output) con cada métrica en su propio div
8086
const outputContainer = document.getElementById("javascript-output");
8187
if (outputContainer) {
88+
outputContainer.innerHTML = "";
8289
const metrics = [
8390
`Worker Time: ${workerTime.toFixed(2)} ms`,
84-
`Data Generation: ${averaged.data_gen_time.toFixed(2)} ms`,
85-
`Rendering: ${averaged.render_time.toFixed(2)} ms`,
86-
`Memory: ${averaged.memory.toFixed(2)} MB`,
87-
`Average per Execution: ${averaged.total_time.toFixed(2)} ms`,
91+
`Data Generation: ${result.data_gen_time.toFixed(2)} ms`,
92+
`Rendering: ${result.render_time.toFixed(2)} ms`,
93+
`Memory: ${result.memory.toFixed(2)} MB`,
8894
];
89-
90-
for (const text of metrics) {
95+
metrics.forEach((text) => {
9196
const div = document.createElement("div");
9297
div.textContent = text;
9398
outputContainer.appendChild(div);
94-
}
99+
});
95100

96-
const totalContainer = document.getElementById("javascript-exact");
101+
const exactContainer = document.getElementById("javascript-exact");
102+
exactContainer.innerHTML = "";
97103
const totalDiv = document.createElement("div");
98-
totalDiv.textContent = `TOTAL TIME: ${totalElapsed.toFixed(2)} ms`;
99-
totalContainer.appendChild(totalDiv);
104+
totalDiv.textContent = `TOTAL TIME: ${result.total_time.toFixed(
105+
2
106+
)} ms`;
107+
exactContainer.appendChild(totalDiv);
100108
}
101-
102-
stopJsTimer();
103109
} catch (error) {
104110
console.error("Worker error:", error);
111+
displayJSText("javascript-output", `Worker Error: ${error}`);
105112
}
106113
}
107114

‎4.3-carga-graficos-complejos/prueba-2/cert.pem

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
-----BEGIN CERTIFICATE-----
2+
MIIEUDCCArigAwIBAgIRALHjxOpB87xIKO6dno8ymUwwDQYJKoZIhvcNAQELBQAw
3+
gYsxHjAcBgNVBAoTFW1rY2VydCBkZXZlbG9wbWVudCBDQTEwMC4GA1UECwwnREVT
4+
S1RPUC03RjBLOU9QXFVzdWFyaW9AREVTS1RPUC03RjBLOU9QMTcwNQYDVQQDDC5t
5+
a2NlcnQgREVTS1RPUC03RjBLOU9QXFVzdWFyaW9AREVTS1RPUC03RjBLOU9QMB4X
6+
DTI1MDQxNDEzMzkxMVoXDTI3MDcxNDEzMzkxMVowWzEnMCUGA1UEChMebWtjZXJ0
7+
IGRldmVsb3BtZW50IGNlcnRpZmljYXRlMTAwLgYDVQQLDCdERVNLVE9QLTdGMEs5
8+
T1BcVXN1YXJpb0BERVNLVE9QLTdGMEs5T1AwggEiMA0GCSqGSIb3DQEBAQUAA4IB
9+
DwAwggEKAoIBAQCs5PV6KTlqbjpCXjb5Qp+DiwDSlPq7f1l6zxxpyxPPi+6fscJ2
10+
aU48tO5U2hQNIIL2i7GLli9AyA5ptgmDfZv9oeaYCg5UzQh3nrVOX7aeIolf3+Mv
11+
lFswqgRhkd88w5rgapsxatUUiAihPzrNsen8ld+AzOgTxMm/VvEcLhYMHI13sX7G
12+
hp/w2XwAfKlICf4Xs6upwPGJ4MtXOEMyVDR0Hlq+OjuADVwz3nesOnmZdQ6gRT9N
13+
Xe/eHgW/Sk57QQ2Pp10jxNV1wUfnJgQWIflyWJkX6DUEH/hs3gNgYFQHHF1i5CMk
14+
FMMxO3UlRekR12AuWO7A/rq/lwdG7Dv8EzAbAgMBAAGjXjBcMA4GA1UdDwEB/wQE
15+
AwIFoDATBgNVHSUEDDAKBggrBgEFBQcDATAfBgNVHSMEGDAWgBSjmJNGnZVcRXgx
16+
lxs+mELYX2k9hDAUBgNVHREEDTALgglsb2NhbGhvc3QwDQYJKoZIhvcNAQELBQAD
17+
ggGBAC7lG/n2vTMT16KfmiuelQ3XOrLDRJRzQuPiteV+bOtKAqjKANzd/qdaJyWM
18+
UBf2kPiqmo64pW/93eo5d6BxTEerrX3eG6Yh1Fd1i/ABYIBGhIg4VGmaEFNJVEKi
19+
8tRDqwCenj5f6nwNM87RtWIzyVz8A7ePego943XuTneRFCQ/zM+Y0BGk2M8zsF52
20+
IroKoTficb3uVNHXEVUpwRprS11xcwkUr8/ssegBr998q2SOiN7BfHJRuIF0N2H3
21+
gNzdD5K8bvpt2Kbr/XmfQ/2sL8k+jlxvGMdzpyPtwPPqbsu2vg4Ad74/iYLiZn0q
22+
gVK5Qw4qRTAPdGkr5wtGanE80IRnJjiZqUiawzaFZBJLVhMC3us+nEzr6DQDnGFq
23+
ZJ9ImQGa726Z2McHCeB+3EyN98VJHRW33lq305f03lXlX5yEoaf/skZJNqf+2ZGD
24+
jW4vaYIUaXMAGNCwXZXAuZsWPVUFnR/R5LFhEXf7xjJ55VCm+p9ZkJ44TDMSfMk4
25+
wThy4Q==
26+
-----END CERTIFICATE-----

‎4.3-carga-graficos-complejos/prueba-2/index.html

Lines changed: 26 additions & 38 deletions
Original file line numberDiff line numberDiff line change
@@ -38,12 +38,11 @@
3838
pyStartTime = performance.now();
3939
const timerElement = document.getElementById("py-timer-display");
4040

41-
// Usar requestAnimationFrame para máxima fluidez
4241
function updateTimer() {
4342
if (!pyTimer) return;
4443

4544
const elapsedMs = performance.now() - pyStartTime;
46-
const elapsed = (elapsedMs / 1000).toFixed(3); // 3 decimales
45+
const elapsed = (elapsedMs / 1000).toFixed(3);
4746
timerElement.textContent = `PyScript Timer: ${elapsed} s`;
4847

4948
pyTimer = requestAnimationFrame(updateTimer);
@@ -57,7 +56,6 @@
5756
cancelAnimationFrame(pyTimer);
5857
pyTimer = null;
5958

60-
// Última actualización para precisión absoluta
6159
const elapsedMs = performance.now() - pyStartTime;
6260
const elapsed = (elapsedMs / 1000).toFixed(3);
6361
document.getElementById("py-timer-display").textContent = `PyScript Timer: ${elapsed} s`;
@@ -111,14 +109,12 @@
111109
}
112110
}
113111
</script>
114-
115112
<script>
116-
// Variables de medición interactividad
117113
let relayoutEvents = 0;
118114
let fpsMeasurements = [];
119115
let fpsInterval = null;
120116

121-
function startFPSMeasurement(duration = 3000) {
117+
function startFPSMeasurement(duration = 3000, id) {
122118
let start = performance.now();
123119
let frames = 0;
124120
fpsMeasurements = [];
@@ -128,71 +124,64 @@
128124
let now = performance.now();
129125
fpsMeasurements.push(1000 / (now - start));
130126
start = now;
131-
if (now - pyStartTime < duration) {
132-
requestAnimationFrame(measure);
127+
if (now - pyStartTime < duration) {
128+
requestAnimationFrame(measure);
133129
} else {
134-
const avgFPS = fpsMeasurements.reduce((a, b) => a + b, 0) / fpsMeasurements.length;
135-
console.log("Average FPS during interaction:", avgFPS.toFixed(2));
136-
document.getElementById("pyscript-output").innerHTML += `<div>Average FPS: ${avgFPS.toFixed(2)}</div>`;
130+
const avgFPS = fpsMeasurements.reduce((a, b) => a + b, 0) / fpsMeasurements.length;
131+
document.getElementById(id).innerHTML += `<div>Average FPS: ${avgFPS.toFixed(2)}</div>`;
137132
}
138133
}
139134
requestAnimationFrame(measure);
140135
}
141136

142-
function attachRelayoutListener(container) {
143-
container.on('plotly_relayout', function() {
144-
startFPSMeasurement(3000);
145-
relayoutEvents++;
146-
console.log("plotly_relayout event count:", relayoutEvents);
147-
});
137+
function attachRelayoutListener(id,id_output) {
138+
const container = document.getElementById(id);
139+
container.on('plotly_relayout', function() {
140+
startFPSMeasurement(3000, id_output);
141+
relayoutEvents++;
142+
});
148143
}
149144

150145
function clearGraphContainer(id) {
151146
const container = document.getElementById(id);
152-
// Limpieza más agresiva para Plotly
153147
if (container.data) Plotly.purge(container);
154148
container.innerHTML = "";
155149
}
156150

157-
function displayPlotPy(graph_json) {
158-
const container = document.getElementById("graph-container-py");
159-
160-
// Limpiar completamente antes de renderizar
161-
clearGraphContainer("graph-container-py");
162-
163-
// Resetear mediciones
164-
fpsMeasurements = [];
165-
relayoutEvents = 0;
166-
167-
const parsed = JSON.parse(graph_json);
168-
Plotly.newPlot(container, parsed.data, parsed.layout).then(() => {
169-
attachRelayoutListener(container);
170-
});
151+
function estimateMemoryUsedByData(numSeries, numPoints) {
152+
const totalBytes = numSeries * numPoints * 8;
153+
const memoryMB = (totalBytes / 1024 / 1024).toFixed(2);
154+
return memoryMB;
171155
}
156+
172157
</script>
173158
<body>
174159
<script type="py" src="python/main.py" config="json/pyscript-main.json"></script>
175-
<h1>Generation of time series graphs (Plotly.py/Canva)</h1>
160+
<h1>Generation of time series graphs (Plotly.py/Plotly.js)</h1>
176161

177162
<h2 id="js-timer-display">JS Timer: 0.00 s</h2>
178-
<h2 id="py-timer-display">PyScriptTimer: 0.00 s</h2>
163+
<h2 id="py-timer-display">PyScript Timer: 0.00 s</h2>
164+
165+
<label for="num-series">N° Series:</label>
166+
<input type="number" id="num-series-js" value="5" min="1" max="100">
167+
<label for="num-points">N° Puntos:</label>
168+
<input type="number" id="num-points-js" value="10000" min="1000" step="1000">
179169

180-
<label for="num-executions">Repeticiones:</label>
181-
<input type="number" id="num-executions-javascript" value="1" min="1">
182170
<button id="run-button-js" onclick="runJSBenchmark()">Run in JavaScript</button>
183171

184172

185173
<label for="num-series">N° Series:</label>
186174
<input type="number" id="num-series-py" value="5" min="1" max="100">
187175
<label for="num-points">N° Puntos:</label>
188176
<input type="number" id="num-points-py" value="10000" min="1000" step="1000">
189-
<button id="run-button-py" onclick="startPyTimer()" py-click="js_run_py_benchmark">
177+
<button id="run-button-py" onclick="startPyTimer()" py-click="launch_worker">
190178
Run in PyScript (Loading...)</button>
191179

192180
<pre id="output"></pre>
193181
<div id="graph-containers" style="display: flex; flex-direction: row;">
194182
<div id="graph-container-js"></div>
195183
<div id="graph-container-py"></div>
184+
<div id="graph-container-py"></div>
196185
</div>
197186

198187
<table id="metrics-container">
@@ -216,7 +205,6 @@ <h2 id="py-timer-display">PyScriptTimer: 0.00 s</h2>
216205
</tr>
217206
</tbody>
218207
</table>
219-
<div id="chart1" style="width:100%;height:100%;"></div>
220208

221209
</body>
222210
</html>

0 commit comments

Comments
 (0)
0