I made a website where you can type in a textbox and press a submit button, and the website will output a simplified version. The problem I am having is that there is a long delay before the first calculation. It takes
- 800 ms to load Pyodide
- 100 ms to load SymPy
- 3700 ms to load first import of Sympy
- A negligible amount of time to load subsequent imports
- A negligible amount of time to simplify 1+1 and define the symbol x
- 600 ms to simplify x+x
- A negligible amount of time to do subsequent simplifications
I’m wondering if there is anything I can do to speed up loading “Pyodide”, The first import of SymPy, and the first non-trivial simplification of SymPy. As it is now, it takes about 5 seconds before the first simplification is completed which I would like to avoid.
At https://live.sympy.org/ there is a similar website and it does the initial setup faster despite being online instead of a local server. This makes me believe that it is possible to run things faster.
I’ve looked at CortexEngine, Algebrite, nerdamer, and math.js as alternatives to SymPy, but none of them were able to simplify expressions like sin(2x)-2sin(x)cos(x) (which should be 0). Only SymPy was able to do this.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>SymPyJS LaTeX Example</title>
<!-- Prefetch Pyodide and SymPy packages -->
<link rel="prefetch" href="https://cdn.jsdelivr.net/pyodide/v0.18.1/full/pyodide.js">
<link rel="prefetch" href="https://cdn.jsdelivr.net/pyodide/v0.18.1/full/pyodide.asm.wasm">
<script src="https://cdn.jsdelivr.net/pyodide/v0.18.1/full/pyodide.js"></script>
<script>
// Preload Pyodide and SymPy as soon as the script loads
let pyodideReadyPromise = (async () => {
console.time("Pyodide loading");
let pyodide = await loadPyodide({
indexURL: "https://cdn.jsdelivr.net/pyodide/v0.18.1/full/"
});
console.timeEnd("Pyodide loading");
console.time("SymPy loading");
await pyodide.loadPackage("sympy");
console.timeEnd("SymPy loading");
// Perform a combined import immediately after loading packages
console.time("Importing SymPy modules");
await pyodide.runPythonAsync(`
from sympy import symbols, simplify
`);
console.timeEnd("Importing SymPy modules");
// Perform a warm-up calculation
console.time("Warm-up calculation Part 1");
await pyodide.runPythonAsync(`
simplify(1+1)
x = symbols('x')
`);
console.timeEnd("Warm-up calculation Part 1");
console.time("Warm-up calculation Part 2");
await pyodide.runPythonAsync(`
simplify(x+x)
`);
console.timeEnd("Warm-up calculation Part 2");
console.time("Warm-up calculation Part 3");
await pyodide.runPythonAsync(`
y = symbols('y')
simplify(y**2-y*(y-1))
`);
console.timeEnd("Warm-up calculation Part 3");
return pyodide;
})();
document.addEventListener('DOMContentLoaded', () => {
document.getElementById('expressionForm').addEventListener('submit', async function(event) {
event.preventDefault();
let latexExpression = document.getElementById('expression').value;
let pyodide = await pyodideReadyPromise;
console.time("eqLoading");
try {
let simplifiedExpr = await pyodide.runPythonAsync(`
expr = simplify('${latexExpression}')
str(expr)
`);
document.getElementById('result').textContent = simplifiedExpr;
console.timeEnd("eqLoading");
} catch (e) {
document.getElementById('result').textContent = 'Error: ' + e.message;
}
});
});
</script>
</head>
<body>
<h1>SymPyJS LaTeX Example</h1>
<form id="expressionForm">
<label for="expression">Enter a LaTeX expression:</label>
<input type="text" id="expression" name="expression">
<button type="submit">Simplify</button>
</form>
<p>Simplified Result: <span id="result"></span></p>
</body>
</html>