8000 Schedule benchmarks version started · JayAyAre/PyScript-vs-JavaScript@3139fe9 · GitHub
[go: up one dir, main page]
Skip to content

Commit 3139fe9

Browse files
JayAyAreJayAyAre
committed
Schedule benchmarks version started
1 parent 0a9479d commit 3139fe9

File tree

11 files changed

+508
-45
lines changed

11 files changed

+508
-45
lines changed

‎Astro-TFG/astro.config.mjs

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -7,4 +7,5 @@ export default defineConfig({
77
vite: {
88
plugins: [tailwindcss()],
99
},
10+
output: 'server', // Añadir esta línea para habilitar la renderización en el servidor
1011
});

‎Astro-TFG/public/scripts/4.1-calculos-matematicos/prueba-1/version-1/javascript/main.js

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -56,9 +56,10 @@ function multiplyMatrices(size) {
5656
let resultDiv = document.createElement("div");
5757
resultDiv.textContent = result;
5858
document.getElementById("javascript-output").appendChild(resultDiv);
59+
document.getElementById('loading-message').style.display = 'none';
5960
}
6061

61-
function runJSBenchmark() {
62+
window.runJSBenchmark = function () {
6263
clearCell("javascript-output");
6364
document.getElementById("javascript-output").textContent = ""
6465
multiplyMatrices(300);

‎Astro-TFG/public 6D40 /scripts/4.1-calculos-matematicos/prueba-1/version-1/python/main.py

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -47,3 +47,6 @@ def multiply_matrices(size):
4747
def run_py_benchmark(event):
4848
js.clearCell('pyscript-output')
4949
multiply_matrices(300)
50+
51+
52+
js.window.run_py_benchmark = run_py_benchmark

‎Astro-TFG/src/data/tests.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -61,7 +61,7 @@ export const tests = [
6161
],
6262
},
6363
{
64-
title: '2. Proceamiento de grandes volúmenes de datos',
64+
title: '2. Procesamiento de grandes volúmenes de datos',
6565
link: '4.2-procesamiento-datos',
6666
description:
6767
'Estas pruebas medirán la capacidad de cada tecnologia para manejar y procesar grandes cantidades de datos. Se analizarán diversos escenarios que involucren manipulación de estructuras de datos a gran escala, carga masiva de información y ejecución de algoritmos de procesamiento intensivo.',

‎Astro-TFG/src/layouts/BenchmarkLayout.astro

Lines changed: 0 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -88,24 +88,3 @@ const basePath = Astro.url.pathname.replace(/\/$/, '');
8888
<Footer />
8989
</body>
9090
</html>
91-
92-
<style>
93-
html {
94-
font-family:
95-
system-ui,
96-
-apple-system,
97-
BlinkMacSystemFont,
98-
'Segoe UI',
99-
Roboto,
100-
Oxygen,
101-
Ubuntu,
102-
Cantarell,
103-
'Open Sans',
104-
'Helvetica Neue',
105-
sans-serif;
106-
background: #13151a;
107-
background-size: 224px;
108-
color-scheme: dark light;
109-
font-size: 0.75rem;
110-
}
111-
</style>

‎Astro-TFG/src/layouts/IndexLayout.astro

Lines changed: 0 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -399,24 +399,3 @@ const { title } = Astro.props;
399399
<Footer />
400400
</body>
401401
</html>
402-
403-
<style>
404-
html {
405-
font-family:
406-
system-ui,
407-
-apple-system,
408-
BlinkMacSystemFont,
409-
'Segoe UI',
410-
Roboto,
411-
Oxygen,
412-
Ubuntu,
413-
Cantarell,
414-
'Open Sans',
415-
'Helvetica Neue',
416-
sans-serif;
417-
background: #13151a;
418-
background-size: 224px;
419-
color-scheme: dark light;
420-
font-size: 0.75rem;
421-
}
422-
</style>

‎Astro-TFG/src/layouts/VersionLayout.astro

Lines changed: 306 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,306 @@
1+
---
2+
import Header from '../components/schedule/BenchmarkHeader.astro';
3+
import Footer from '../components/schedule/Footer.astro';
4+
5+
const {
6+
benchmarkTitle,
7+
testTitle,
8+
versionTitle,
9+
versionDescription,
10+
jsPath,
11+
pyPath,
12+
} = Astro.props;
13+
---
14+
15+
<html lang="es">
16+
<head>
17+
<meta charset="UTF-8" />
18+
<meta name="viewport" content="width=device-width" />
19+
<title>{versionTitle} - {benchmarkTitle}</title>
20+
<link
21+
rel="stylesheet"
22+
href="https://pyscript.net/releases/2024.1.1/core.css"
23+
/>
24+
<script
25+
type="module"
26+
src="https://pyscript.net/releases/2024.1.1/core.js"></script>
27+
<script type="module" src={`${jsPath}main.js`} defer></script>
28+
<script type="py" src={`${pyPath}main.py`}></script>
29+
</head>
30+
<body
31+
class="min-h-screen bg-gray-900 text-white"
32+
data-js-path={jsPath}
33+
data-py-path={pyPath}
34+
>
35+
<Header
36+
title={testTitle}
37+
description={versionDescription || benchmarkTitle}
38+
/>
39+
<div
40+
id="pyscript-loader"
41+
class="fixed inset-0 z-50 flex flex-col items-center justify-center bg-gray-900 bg-opacity-90 text-white"
42+
>
43+
<div
44+
class="animate-spin rounded-full h-16 w-16 border-t-4 border-purple-500 border-opacity-50 mb-4"
45+
>
46+
</div>
47+
<p class="text-lg font-semibold">Cargando PyScript…</p>
48+
</div>
49+
<div
50+
id="loading-message"
51+
class="fixed inset-0 z-50 flex flex-col items-center justify-center bg-gray-900 bg-opacity-90 text-white"
52+
style="display: none;"
53+
>
54+
<div
55+
class="animate-spin rounded-full h-16 w-16 border-t-4 border-purple-500 border-opacity-70 mb-4"
56+
>
57+
</div>
58+
<p class="text-lg font-semibold">Procesando…</p>
59+
<p class="text-sm">
60+
Se mostraran los resultados una vez finalizada la ejecución.
61+
</p>
62+
</div>
63+
64+
<main
65+
class="mx-auto mt-14 max-w-7xl px-4 sm:px-6 lg:px-8 space-y-10 text-center"
66+
>
67+
<section class="space-y-6">
68+
<h2 class="text-2xl font-semibold text-purple-400">
69+
{versionTitle}
70+
</h2>
71+
72+
<div class="flex flex-wrap justify-center gap-4">
73+
<button
74+
onclick="runJSBenchmark()"
75+
class="rounded-lg bg-gray-800 px-4 py-2 transition-all focus:ring focus:ring-purple-400 hover:scale-105 hover:bg-gray-700 hover:text-purple-400 cursor-pointer"
76+
>
77+
Ejecutar JavaScript
78+
</button>
79+
<button
80+
onclick="runPy()"
81+
class="rounded-lg bg-gray-800 px-4 py-2 transition-all focus:ring focus:ring-purple-400 hover:scale-105 hover:bg-gray-700 hover:text-purple-400 cursor-pointer"
82+
>
83+
Ejecutar PyScript
84+
</button>
85+
<button
86+
onclick="runNodeBenchmark()"
87+
class="rounded-lg bg-gray-800 px-4 py-2 transition-all focus:ring focus:ring-purple-400 hover:scale-105 hover:bg-gray-700 hover:text-purple-400 cursor-pointer"
88+
>
89+
Ejecutar Node.js
90+
</button>
91+
<button
92+
onclick="runPyBackendBenchmark()"
93+
class="rounded-lg bg-gray-800 px-4 py-2 transition-all focus:ring focus:ring-purple-400 hover:scale-105 hover:bg-gray-700 hover:text-purple-400 cursor-pointer"
94+
>
95+
Ejecutar Backend Python
96+
</button>
97+
</div>
98+
</section>
99+
100+
<section>
101+
<h3 class="mb-4 text-lg font-semibold text-gray-300">
102+
Resultados
103+
</h3>
104+
<pre id="output" class="text-left text-md text-gray-200 my-8">
105+
</pre>
106+
<div class="overflow-x-auto">
107+
<table
108+
class="mx-auto w-full max-w-5xl table-auto border-collapse border border-gray-700 text-sm text-left"
109+
>
110+
<thead class="bg-gray-800 text-purple-300">
111+
<tr>
112+
<th class="border border-gray-700 px-4 py-2"
113+
>JavaScript</th
114+
>
115+
<th class="border border-gray-700 px-4 py-2"
116+
>PyScript</th
117+
>
118+
<th class="border border-gray-700 px-4 py-2"
119+
>Node.js</th
120+
>
121+
<th class="border border-gray-700 px-4 py-2"
122+
>Python Backend</th
123+
>
124+
</tr>
125+
</thead>
126+
<tbody class="text-gray-300">
127+
<tr>
128+
<td
129+
id="javascript-output"
130+
class="border border-gray-700 px-4 py-2"
131+
>Esperando...</td
132+
>
133+
<td
134+
id="pyscript-output"
135+
class="border border-gray-700 px-4 py-2"
136+
>Esperando...</td
137+
>
138+
<td
139+
id="nodeJs-output"
140+
class="border border-gray-700 px-4 py-2"
141+
>Esperando...</td
142+
>
143+
<td
144+
id="pythonBackend-output"
145+
class="border border-gray-700 px-4 py-2"
146+
>Esperando...</td
147+
>
148+
</tr>
149+
</tbody>
150+
</table>
151+
</div>
152+
</section>
153+
</main>
154+
<div
155+
class="relative bottom-0 left-0 right-0 lg:absolute flex justify-center"
156+
>
157+
<Footer />
158+
</div>
159+
</body>
160+
<script>
161+
let jsPath = document.body.dataset.jsPath;
162+
let pyPath = document.body.dataset.pyPath;
163+
164+
jsPath = jsPath?.concat('server.js');
165+
pyPath = pyPath?.concat('server.py');
166+
167+
let startTime = performance.now();
168+
document.addEventListener('py:ready', () => {
169+
document.getElementById('pyscript-loader')?.remove();
170+
let endTime = performance.now();
171+
let loadTime = endTime - startTime;
172+
173+
const loader = document.getElementById('pyscript-loader');
174+
if (loader) {
175+
loader.remove();
176+
}
177+
178+
const outputDiv = document.getElementById('output');
179+
if (!outputDiv) return;
180+
outputDiv.innerText += `PLT: ${loadTime.toFixed(2)} ms\n`;
181+
});
182+
183+
let startTimerWebAssembly: number = 0;
184+
function showExecutionLoader() {
185+
document.getElementById('loading-message').style.display = 'flex';
186+
}
187+
function hideExecutionLoader() {
188+
document.getElementById('loading-message').style.display = 'none';
189+
}
190+
191+
window.runPy = function () {
192+
showExecutionLoader();
193+
194+
requestAnimationFrame(() => {
195+
setTimeout(() => {
196+
if (window.run_py_benchmark) {
197+
startTimerWebAssembly = performance.now();
198+
window.run_py_benchmark(event);
199+
} else {
200+
console.error('run_py_benchmark no está definido');
201+
hideExecutionLoader();
202+
}
203+
}, 0);
204+
});
205+
};
206+
207+
window.endTimerWebAssembly = function () {
208+
const endTime = performance.now();
209+
const totalElapsedTime = endTime - startTimerWebAssembly;
210+
const resultDiv = document.createElement('div');
211+
resultDiv.textContent = `ET (Py + WA): ${totalElapsedTime.toFixed(2)} ms`;
212+
const pyscriptOutput = document.getElementById('pyscript-output');
213+
if (!pyscriptOutput) return;
214+
pyscriptOutput.appendChild(resultDiv);
215+
hideExecutionLoader();
216+
};
217+
218+
window.clearCell = function (elementId: string) {
219+
const element = document.getElementById(elementId);
220+
if (!element) return;
221+
element.textContent = '';
222+
};
223+
224+
// window.runPyBackendBenchmark = function () {
225+
// clearCell('pythonBackend-output');
226+
// fetch('http://localhost:5000/')
227+
// .then((response) => response.json())
228+
// .then((data) => {
229+
// const outputDiv = document.getElementById(
230+
// 'pythonBackend-output'
231+
// );
232+
233+
// if (!outputDiv) return;
234+
235+
// const timeDiv = document.createElement('div');
236+
// timeDiv.textContent = `ET: ${data.time} ms`;
237+
// outputDiv.appendChild(timeDiv);
238+
239+
// const cpuDiv = document.createElement('div');
240+
// cpuDiv.textContent = `CPU: ${data.cpu_usage} %`;
241+
// outputDiv.appendChild(cpuDiv);
242+
243+
// const memoryDiv = document.createElement('div');
244+
// memoryDiv.textContent = `RAM: ${data.memory_usage} MB`;
245+
// outputDiv.appendChild(memoryDiv);
246+
// })
247+
// .catch((error) => console.error('Error:', error));
248+
// };
249+
console.log('jsPath:', { jsPath });
250+
console.log('pyPath:', { pyPath });
251+
252+
window.runNodeBenchmark = function () {
253+
clearCell('nodeJs-output');
254+
const cleanedPath = encodeURIComponent(jsPath.replace(/^\/+/, ''));
255+
const url = `/api/run-backend?type=node&path=${cleanedPath}`;
256+
console.log('[Client] GET →', url);
257+
258+
fetch('http://localhost:4321/api/run-backend', {
259+
method: 'POST',
260+
headers: { 'Content-Type': 'application/json' },
261+
body: JSON.stringify({ name: 'Juan' }),
262+
})
263+
.then((response) => response.json())
264+
.then((data) => console.log(data.message))
265+
.catch((error) => console.error('Error:', error));
266+
// fetch(url)
267+
// .then((res) => {
268+
// if (!res.ok) {
269+
// // Si no es 2xx, parseamos el JSON de error
270+
// return res.json().then((err) => {
271+
// throw new Error(err.error || `HTTP ${res.status}`);
272+
// });
273+
// }
274+
// return res.json();
275+
// })
276+
// .then((data) => {
277+
// console.log('[Client] Response:', data);
278+
// document.getElementById('nodeJs-output').innerText =
279+
// `ET: ${data.time} ms\n\n${data.output}`;
280+
// })
281+
// .catch((err) => {
282+
// console.error('[Client] Fetch error:', err);
283+
// document.getElementById('nodeJs-output').innerText =
284+
// `Error: ${err.message}`;
285+
// });
286+
};
287+
288+
window.runPyBackendBenchmark = function () {
289+
const cleanedPath = pyPath.replace(/^\/+/, '');
290+
clearCell('pythonBackend-output');
291+
console.log(
292+
'URL generada:',
293+
`/api/run-backend?type=node&path=${cleanedPath}`
294+
);
295+
296+
fetch(`/api/run-backend?type=python&path=${cleanedPath}`)
297+
.then((res) => res.json())
298+
.then((data) => {
299+
const output = document.getElementById(
300+
'pythonBackend-output'
301+
);
302+
output.innerText = `ET: ${data.time} ms\n\n${data.output}`;
303+
});
304+
};
305+
</script>
306+
</html>

0 commit comments

Comments
 (0)
0