Page de test et page de mesure du moteur WebAssembly
web/ : le moteur tourne dans un Web Worker (module ES) ; la page de test donne le meilleur coup d'une position et son temps de calcul ; la page de mesure chronomètre les positions de référence, mesure la taille téléchargée et la mémoire, compare aux seuils de l'étape 0b et produit un rapport à copier. make bench fait la même mesure sous Node, make deploy-web sert les pages sur le réseau local. Guide de test pour le Fairphone 4 dans docs/guide-test-etape-0.md. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
This commit is contained in:
Pierre MARTIN
co-authored by
Claude Opus 5.5
Claude Opus 5.5
parent
b0030521d8
commit
120367e6d3
@@ -41,6 +41,14 @@ Les contenus pédagogiques (leçons, textes) sont sous licence CC BY-SA 4.0.
|
||||
**Python 3** (licence PSF, compatible GPL), qui exécute le comparateur
|
||||
`tests/reference/compare.py`, et **jq** (licence MIT), qui lit les JSON
|
||||
dans `tests/test_reference.sh`. Aucun des deux n'est utilisé sur le PC.
|
||||
Le serveur HTTP de Python sert aussi la page de test (`make deploy-web`).
|
||||
- **Emscripten** (licence MIT et University of Illinois/NCSA), image Docker
|
||||
`emscripten/emsdk:3.1.64`, compile le moteur en WebAssembly
|
||||
(`make engine-wasm`). Le code JavaScript qu'il génère
|
||||
(`build/wasm/engine.mjs`) et sa bibliothèque C (musl, licence MIT) sont
|
||||
inclus dans le moteur WebAssembly, licences compatibles GPLv3. L'image
|
||||
fournit aussi **Node.js** (MIT), qui rejoue la suite de contrat sur le
|
||||
moteur WebAssembly et lance `make bench`.
|
||||
|
||||
## Remerciements
|
||||
|
||||
|
||||
@@ -76,8 +76,10 @@ deploy: ## Installe l'application sur le téléphone (pas encore disponible)
|
||||
@echo "Page de test du moteur WebAssembly : make deploy-web"
|
||||
@exit 1
|
||||
|
||||
# Sert web/ à la racine et build/wasm/ sous /wasm/, en lecture seule, avec le
|
||||
# serveur HTTP de Python (types MIME corrects, dont application/wasm).
|
||||
# Sert web/ à la racine et build/wasm/ sous /wasm/ avec le serveur HTTP de
|
||||
# Python (types MIME corrects, dont application/wasm). Les deux dossiers sont
|
||||
# montés en lecture seule puis copiés dans le conteneur au démarrage : relancer
|
||||
# après une modification.
|
||||
# L'adresse affichée est celle du PC sur l'interface de sa route par défaut,
|
||||
# c'est-à-dire sur le réseau local (Wi-Fi ou câble).
|
||||
deploy-web: engine-wasm ## Sert la page de test WebAssembly sur le réseau local (Ctrl+C pour arrêter)
|
||||
@@ -86,8 +88,9 @@ deploy-web: engine-wasm ## Sert la page de test WebAssembly sur le réseau local
|
||||
echo "Page de mesure : http://$${ip:-ADRESSE-DU-PC}:$(WEB_PORT)/bench.html"; \
|
||||
echo "À ouvrir depuis le téléphone, sur le même Wi-Fi. Ctrl+C pour arrêter."
|
||||
@docker run --rm --init -p $(WEB_PORT):8080 \
|
||||
-v "$(CURDIR)/web:/site:ro" -v "$(CURDIR)/build/wasm:/site/wasm:ro" \
|
||||
$(BUILD_C_IMAGE) python3 -m http.server 8080 --directory /site
|
||||
-v "$(CURDIR)/web:/web:ro" -v "$(CURDIR)/build/wasm:/wasm:ro" $(BUILD_C_IMAGE) \
|
||||
sh -c 'cp -r /web /tmp/site && cp -r /wasm /tmp/site/wasm \
|
||||
&& exec python3 -m http.server 8080 --directory /tmp/site'
|
||||
|
||||
clean: ## Supprime les artefacts de build (garde les images Docker)
|
||||
rm -rf $(BUILD_DIR)
|
||||
|
||||
@@ -0,0 +1,83 @@
|
||||
# Guide de test : le moteur sur le Fairphone 4 (étape 0b)
|
||||
|
||||
Document temporaire de l'étape 0 : il sera supprimé avec `docs/etape-0.md`.
|
||||
|
||||
Le but : ouvrir sur le téléphone une page web où le moteur de backgammon
|
||||
calcule, puis lancer une mesure et coller son rapport dans la conversation.
|
||||
Comptez un quart d'heure.
|
||||
|
||||
## 1. Préparer le PC
|
||||
|
||||
1. Ouvrez un terminal dans le dossier du projet (`~/Code/ustagammon`).
|
||||
2. Si ce n'est pas déjà fait, tapez `make setup` puis Entrée. Cela prépare les
|
||||
outils. La première fois, c'est long ; ensuite, c'est immédiat.
|
||||
3. Le PC et le téléphone doivent être sur **le même Wi-Fi** (la même box).
|
||||
|
||||
## 2. Lancer la page
|
||||
|
||||
1. Tapez `make deploy-web` puis Entrée.
|
||||
2. La première fois, le moteur se compile : quelques minutes.
|
||||
3. Le terminal affiche deux adresses, par exemple :
|
||||
|
||||
```
|
||||
Page de test : http://192.168.1.21:8080/
|
||||
Page de mesure : http://192.168.1.21:8080/bench.html
|
||||
```
|
||||
|
||||
Vos chiffres peuvent être différents : notez ceux de votre écran.
|
||||
4. Laissez ce terminal ouvert pendant tout le test. Pour arrêter la page à la
|
||||
fin : Ctrl+C dans le terminal.
|
||||
|
||||
## 3. Essayer un meilleur coup
|
||||
|
||||
1. Sur le Fairphone, ouvrez le navigateur (Chrome ou Firefox).
|
||||
2. Tapez l'adresse de la **page de test** dans la barre d'adresse, exactement
|
||||
comme affichée (avec `http://` et `:8080`).
|
||||
3. Attendez le message « Moteur prêt, chargé en … ms ».
|
||||
4. Dans « Exemple », choisissez une position, par exemple « middlegame-1 ».
|
||||
5. Dans « Niveau », choisissez « fort (2 plis) ».
|
||||
6. Touchez « Meilleur coup ».
|
||||
7. La page affiche le coup conseillé et le **temps de calcul**. Notez ce temps
|
||||
si vous voulez, il sera aussi dans le rapport.
|
||||
|
||||
## 4. Lancer la mesure
|
||||
|
||||
1. En bas de la page, touchez « Page de mesure » (ou tapez l'adresse de la
|
||||
page de mesure).
|
||||
2. Touchez « Lancer la mesure ».
|
||||
3. Attendez « Mesure terminée » : de une à quelques minutes. Pendant ce temps,
|
||||
gardez l'écran allumé et la page ouverte, sans changer d'application.
|
||||
4. Un tableau résume les résultats : « OK » si le seuil est respecté,
|
||||
« dépassé » sinon.
|
||||
|
||||
## 5. Envoyer le rapport
|
||||
|
||||
1. Touchez « Copier les résultats ».
|
||||
2. Si la page dit « Rapport copié », c'est bon.
|
||||
3. Sinon, le texte du rapport est sélectionné : faites un appui long dessus,
|
||||
puis « Copier ».
|
||||
4. Collez le rapport dans la conversation avec Claude Code (sur le téléphone,
|
||||
ou envoyez-le vous sur le PC).
|
||||
|
||||
Si vous en avez le temps, refaites la mesure une deuxième fois (rechargez la
|
||||
page de mesure) et collez aussi ce second rapport : cela montre si les temps
|
||||
sont stables.
|
||||
|
||||
## Si la page ne s'ouvre pas
|
||||
|
||||
- **Vérifiez l'adresse** : `http://` (et non `https://`), les chiffres exacts,
|
||||
et `:8080` à la fin.
|
||||
- **Vérifiez le Wi-Fi** : le téléphone doit être sur le même réseau que le PC,
|
||||
pas sur la 4G ni sur un Wi-Fi invité.
|
||||
- **Vérifiez que la page tourne** : sur le PC, ouvrez
|
||||
`http://localhost:8080/` dans un navigateur. Si elle ne s'ouvre pas non
|
||||
plus, relancez `make deploy-web` et lisez le message d'erreur.
|
||||
- **Le pare-feu du PC** peut bloquer le téléphone. S'il est actif
|
||||
(`sudo ufw status` affiche « Status: active »), autorisez le port le temps
|
||||
du test : `sudo ufw allow 8080/tcp`, puis à la fin `sudo ufw delete allow
|
||||
8080/tcp`.
|
||||
- **« Le moteur n'a pas pu se charger »** : notez le message exact et
|
||||
collez-le dans la conversation. Essayez aussi l'autre navigateur (Chrome ou
|
||||
Firefox), à jour.
|
||||
- **Le port 8080 est déjà pris** : un autre programme l'utilise. Lancez
|
||||
`make deploy-web WEB_PORT=8081` et utilisez `:8081` dans l'adresse.
|
||||
@@ -0,0 +1,44 @@
|
||||
// bench.mjs -- la mesure de la page bench.html, sous Node, sur le PC
|
||||
// (`make bench`). Premier ordre de grandeur seulement : le chiffre qui compte
|
||||
// est celui du téléphone.
|
||||
//
|
||||
// Copyright (C) 2026 les auteurs d'Ustagammon.
|
||||
// Licence : GPLv3 ou ultérieure (voir LICENSE).
|
||||
|
||||
import { readFileSync } from "node:fs";
|
||||
import os from "node:os";
|
||||
import { fileURLToPath } from "node:url";
|
||||
import { gzipSync } from "node:zlib";
|
||||
import createEngineModule from "../build/wasm/engine.mjs";
|
||||
import { DOWNLOADED_FILES, formatReport, measureTimes } from "../web/benchmark.mjs";
|
||||
import { commands, loadEngine } from "../web/engine-wasm.mjs";
|
||||
|
||||
const root = new URL("../", import.meta.url);
|
||||
const wasmDir = fileURLToPath(new URL("build/wasm/", root));
|
||||
|
||||
// Les fichiers du site : web/, et build/wasm/ servi sous wasm/.
|
||||
function sitePath(name) {
|
||||
const path = name.startsWith("wasm/") ? "build/" + name : "web/" + name;
|
||||
return fileURLToPath(new URL(path, root));
|
||||
}
|
||||
|
||||
const files = DOWNLOADED_FILES.map((name) => {
|
||||
const content = readFileSync(sitePath(name));
|
||||
return { name, bytes: content.length, gzipBytes: gzipSync(content).length };
|
||||
});
|
||||
|
||||
const start = performance.now();
|
||||
const engine = await loadEngine(createEngineModule, wasmDir);
|
||||
const loadMs = performance.now() - start;
|
||||
|
||||
const { positions } = JSON.parse(readFileSync(sitePath("wasm/positions.json"), "utf8"));
|
||||
const times = await measureTimes({
|
||||
bestMove: (...args) => engine.run(commands.bestMove(...args)),
|
||||
cubeDecision: (...args) => engine.run(commands.cubeDecision(...args)),
|
||||
}, positions, (done, total) => process.stderr.write("\r " + done + "/" + total + " calculs"));
|
||||
process.stderr.write("\n");
|
||||
|
||||
const environment = "Node " + process.version + ", " + os.cpus()[0].model + " (PC de développement)";
|
||||
process.stdout.write(formatReport({
|
||||
environment, files, loadMs, memoryBytes: engine.memoryBytes(), times,
|
||||
}));
|
||||
@@ -0,0 +1,97 @@
|
||||
// bench-page.mjs -- page de mesure (bench.html) : chronomètre le moteur
|
||||
// dans un Web Worker et produit le rapport à copier.
|
||||
//
|
||||
// Copyright (C) 2026 les auteurs d'Ustagammon.
|
||||
// Licence : GPLv3 ou ultérieure (voir LICENSE).
|
||||
|
||||
import { DOWNLOADED_FILES, DOWNLOAD_LIMIT_BYTES, formatReport, measureTimes, summarize }
|
||||
from "./benchmark.mjs";
|
||||
import { startEngine } from "./engine-client.mjs";
|
||||
|
||||
const $ = (id) => document.getElementById(id);
|
||||
|
||||
// Taille d'un fichier du site, brute et compressée gzip (comme le ferait un
|
||||
// serveur qui compresse ses réponses).
|
||||
async function fileSize(name) {
|
||||
const blob = await (await fetch(name, { cache: "no-store" })).blob();
|
||||
const gzipped = blob.stream().pipeThrough(new CompressionStream("gzip"));
|
||||
const gzipBytes = (await new Response(gzipped).arrayBuffer()).byteLength;
|
||||
return { name, bytes: blob.size, gzipBytes };
|
||||
}
|
||||
|
||||
function addRow(cells) {
|
||||
const row = $("table").insertRow();
|
||||
for (const text of cells) {
|
||||
row.insertCell().textContent = text;
|
||||
}
|
||||
}
|
||||
|
||||
async function measure() {
|
||||
$("start").disabled = true;
|
||||
$("results").hidden = true;
|
||||
$("table").replaceChildren();
|
||||
|
||||
$("status").textContent = "Chargement du moteur…";
|
||||
const start = performance.now();
|
||||
const engine = startEngine();
|
||||
await engine.ready;
|
||||
const loadMs = performance.now() - start;
|
||||
|
||||
const { positions } = await (await fetch("wasm/positions.json")).json();
|
||||
let memoryBytes = 0;
|
||||
const times = await measureTimes({
|
||||
bestMove: (...args) => engine.bestMove(...args).then(keepMemory),
|
||||
cubeDecision: (...args) => engine.cubeDecision(...args).then(keepMemory),
|
||||
}, positions, (done, total) => {
|
||||
$("status").textContent = "Calcul " + done + " sur " + total + "…";
|
||||
});
|
||||
function keepMemory(answer) {
|
||||
memoryBytes = answer.memoryBytes;
|
||||
return answer;
|
||||
}
|
||||
|
||||
$("status").textContent = "Mesure de la taille à télécharger…";
|
||||
const files = await Promise.all(DOWNLOADED_FILES.map(fileSize));
|
||||
|
||||
for (const s of summarize(times)) {
|
||||
addRow([s.label, Math.round(s.medianMs) + " ms", Math.round(s.maxMs) + " ms",
|
||||
s.limitMs + " ms", s.ok ? "OK" : "dépassé"]);
|
||||
}
|
||||
const gzipTotal = files.reduce((sum, f) => sum + f.gzipBytes, 0);
|
||||
addRow(["Taille compressée", "", (gzipTotal / 1e6).toFixed(1).replace(".", ",") + " Mo",
|
||||
DOWNLOAD_LIMIT_BYTES / 1e6 + " Mo", gzipTotal < DOWNLOAD_LIMIT_BYTES ? "OK" : "dépassé"]);
|
||||
|
||||
$("report").value = formatReport({
|
||||
environment: navigator.userAgent, files, loadMs, memoryBytes, times,
|
||||
});
|
||||
$("results").hidden = false;
|
||||
$("status").textContent = "Mesure terminée.";
|
||||
}
|
||||
|
||||
// Copie dans le presse-papiers. L'API moderne n'existe que sur les pages
|
||||
// sécurisées (https ou localhost) : sur le réseau local en http, on
|
||||
// sélectionne le texte et on utilise l'ancienne commande de copie.
|
||||
async function copyReport() {
|
||||
try {
|
||||
if (navigator.clipboard) {
|
||||
await navigator.clipboard.writeText($("report").value);
|
||||
} else {
|
||||
$("report").select();
|
||||
if (!document.execCommand("copy")) {
|
||||
throw new Error();
|
||||
}
|
||||
}
|
||||
$("copy-status").textContent = "Rapport copié : collez-le dans la conversation.";
|
||||
} catch {
|
||||
$("report").select();
|
||||
$("copy-status").textContent = "Copie impossible : le texte est sélectionné, "
|
||||
+ "copiez-le à la main (appui long, puis Copier).";
|
||||
}
|
||||
}
|
||||
|
||||
$("start").onclick = () => measure().catch((error) => {
|
||||
$("status").textContent = "La mesure a échoué : " + error.message;
|
||||
$("status").classList.add("error");
|
||||
$("start").disabled = false;
|
||||
});
|
||||
$("copy").onclick = copyReport;
|
||||
@@ -0,0 +1,35 @@
|
||||
<!doctype html>
|
||||
<html lang="fr">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>Ustagammon : mesure du moteur</title>
|
||||
<link rel="stylesheet" href="style.css">
|
||||
<script type="module" src="bench-page.mjs"></script>
|
||||
</head>
|
||||
<body>
|
||||
<main>
|
||||
<h1>Mesure du moteur</h1>
|
||||
<p>Cette page chronomètre le moteur sur les positions de référence : meilleur coup
|
||||
aux niveaux rapide et fort, décision de videau au niveau fort. Elle mesure aussi
|
||||
la taille à télécharger et la mémoire utilisée. Comptez une à quelques minutes ;
|
||||
gardez l'écran allumé et la page au premier plan.</p>
|
||||
<button id="start" type="button">Lancer la mesure</button>
|
||||
<p id="status" class="status"></p>
|
||||
|
||||
<section id="results" hidden>
|
||||
<h2>Résultats</h2>
|
||||
<table>
|
||||
<thead><tr><th>Mesure</th><th>Médiane</th><th>Maximum</th><th>Seuil</th><th></th></tr></thead>
|
||||
<tbody id="table"></tbody>
|
||||
</table>
|
||||
<h2>Rapport</h2>
|
||||
<button id="copy" type="button">Copier les résultats</button>
|
||||
<p id="copy-status" class="status"></p>
|
||||
<textarea id="report" readonly></textarea>
|
||||
</section>
|
||||
|
||||
<p><a href="./">Page de test</a></p>
|
||||
</main>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,138 @@
|
||||
// benchmark.mjs -- mesure du moteur WebAssembly, partagée par la page de
|
||||
// mesure (bench.html, dans le navigateur) et `make bench` (sous Node).
|
||||
//
|
||||
// Copyright (C) 2026 les auteurs d'Ustagammon.
|
||||
// Licence : GPLv3 ou ultérieure (voir LICENSE).
|
||||
//
|
||||
// Sur les positions de référence (tests/reference/positions.json) : temps du
|
||||
// meilleur coup à 0 et 2 plis pour les positions avec dés, temps de la
|
||||
// décision de videau à 2 plis pour les autres. Le rapport compare aux seuils
|
||||
// de l'étape 0b (docs/etape-0.md).
|
||||
|
||||
// Seuils de l'étape 0b. Un temps respecte son seuil si son maximum, sur
|
||||
// toutes les positions, est en dessous (la médiane est donnée en plus).
|
||||
export const TIME_THRESHOLDS = [
|
||||
{ key: "move0", label: "Meilleur coup, 0 pli", limitMs: 300 },
|
||||
{ key: "move2", label: "Meilleur coup, 2 plis", limitMs: 3000 },
|
||||
{ key: "cube2", label: "Décision de videau, 2 plis", limitMs: 3000 },
|
||||
];
|
||||
|
||||
// Taille totale à télécharger, compressée : moins de 40 Mo.
|
||||
export const DOWNLOAD_LIMIT_BYTES = 40e6;
|
||||
|
||||
// Fichiers téléchargés pour faire tourner le moteur dans la page, chemins
|
||||
// relatifs à la racine du site (web/ ; wasm/ est build/wasm/).
|
||||
export const DOWNLOADED_FILES = [
|
||||
"index.html",
|
||||
"style.css",
|
||||
"page.mjs",
|
||||
"engine-client.mjs",
|
||||
"engine-worker.mjs",
|
||||
"engine-wasm.mjs",
|
||||
"wasm/engine.mjs",
|
||||
"wasm/engine.wasm",
|
||||
"wasm/engine.data",
|
||||
];
|
||||
|
||||
// engine : objet avec bestMove(positionId, matchId, dice, ply) et
|
||||
// cubeDecision(positionId, matchId, ply), qui renvoient (ou promettent)
|
||||
// { result, ms }.
|
||||
// positions : le tableau « positions » de positions.json.
|
||||
// onProgress(done, total) : appelé après chaque calcul.
|
||||
// Renvoie, pour chaque clé de TIME_THRESHOLDS, la liste des
|
||||
// { id, ms } mesurés.
|
||||
export async function measureTimes(engine, positions, onProgress = () => {}) {
|
||||
const tasks = [];
|
||||
for (const p of positions) {
|
||||
if (p.type === "move") {
|
||||
tasks.push(["move0", p, () => engine.bestMove(p.position_id, p.match_id, p.dice, 0)]);
|
||||
tasks.push(["move2", p, () => engine.bestMove(p.position_id, p.match_id, p.dice, 2)]);
|
||||
} else {
|
||||
tasks.push(["cube2", p, () => engine.cubeDecision(p.position_id, p.match_id, 2)]);
|
||||
}
|
||||
}
|
||||
|
||||
const times = Object.fromEntries(TIME_THRESHOLDS.map((t) => [t.key, []]));
|
||||
for (const [i, [key, position, compute]] of tasks.entries()) {
|
||||
const { ms } = await compute();
|
||||
times[key].push({ id: position.id, ms });
|
||||
onProgress(i + 1, tasks.length);
|
||||
}
|
||||
return times;
|
||||
}
|
||||
|
||||
function median(values) {
|
||||
const sorted = [...values].sort((a, b) => a - b);
|
||||
const middle = Math.floor(sorted.length / 2);
|
||||
return sorted.length % 2 ? sorted[middle] : (sorted[middle - 1] + sorted[middle]) / 2;
|
||||
}
|
||||
|
||||
// Nombres à la française : virgule décimale.
|
||||
function decimal(value, digits) {
|
||||
return value.toFixed(digits).replace(".", ",");
|
||||
}
|
||||
|
||||
function megabytes(bytes) {
|
||||
return decimal(bytes / 1e6, 1) + " Mo";
|
||||
}
|
||||
|
||||
function verdict(ok) {
|
||||
return ok ? "OK" : "DÉPASSÉ";
|
||||
}
|
||||
|
||||
// Résumé d'une série de temps : { count, medianMs, maxMs, maxId, ok }.
|
||||
export function summarize(times) {
|
||||
return TIME_THRESHOLDS.map((threshold) => {
|
||||
const list = times[threshold.key];
|
||||
const worst = list.reduce((a, b) => (b.ms > a.ms ? b : a));
|
||||
return {
|
||||
...threshold,
|
||||
count: list.length,
|
||||
medianMs: median(list.map((t) => t.ms)),
|
||||
maxMs: worst.ms,
|
||||
maxId: worst.id,
|
||||
ok: worst.ms < threshold.limitMs,
|
||||
};
|
||||
});
|
||||
}
|
||||
|
||||
// Rapport texte, à coller dans la conversation.
|
||||
// environment : description de l'appareil (navigateur ou Node) ;
|
||||
// files : [{ name, bytes, gzipBytes }] ; loadMs : chargement du moteur ;
|
||||
// memoryBytes : mémoire WebAssembly après la mesure ; times : measureTimes.
|
||||
export function formatReport({ environment, files, loadMs, memoryBytes, times }) {
|
||||
const total = files.reduce((sum, f) => sum + f.bytes, 0);
|
||||
const totalGzip = files.reduce((sum, f) => sum + f.gzipBytes, 0);
|
||||
const sizeOk = totalGzip < DOWNLOAD_LIMIT_BYTES;
|
||||
const summary = summarize(times);
|
||||
const allOk = sizeOk && summary.every((s) => s.ok);
|
||||
|
||||
const lines = [
|
||||
"Ustagammon : mesure du moteur WebAssembly (étape 0b)",
|
||||
"Date : " + new Date().toISOString(),
|
||||
"Environnement : " + environment,
|
||||
"",
|
||||
"Chargement du moteur : " + Math.round(loadMs) + " ms",
|
||||
"Mémoire WebAssembly après la mesure : " + megabytes(memoryBytes),
|
||||
"Taille téléchargée : " + megabytes(total) + " non compressée, "
|
||||
+ megabytes(totalGzip) + " compressée gzip ; seuil "
|
||||
+ megabytes(DOWNLOAD_LIMIT_BYTES) + " compressée : " + verdict(sizeOk),
|
||||
"",
|
||||
];
|
||||
for (const s of summary) {
|
||||
lines.push(s.label + " (" + s.count + " positions) : médiane "
|
||||
+ decimal(s.medianMs, 1) + " ms, maximum " + decimal(s.maxMs, 1) + " ms ("
|
||||
+ s.maxId + ") ; seuil " + s.limitMs + " ms : " + verdict(s.ok));
|
||||
}
|
||||
lines.push("", "Bilan : " + (allOk ? "tous les seuils sont respectés."
|
||||
: "au moins un seuil est dépassé."), "", "Détail des fichiers :");
|
||||
for (const f of files) {
|
||||
lines.push(" " + f.name + " : " + f.bytes + " octets, " + f.gzipBytes + " compressé gzip");
|
||||
}
|
||||
lines.push("", "Détail des temps (ms) :");
|
||||
for (const s of summary) {
|
||||
lines.push(" " + s.label + " : " + times[s.key]
|
||||
.map((t) => t.id + " " + Math.round(t.ms)).join(", "));
|
||||
}
|
||||
return lines.join("\n") + "\n";
|
||||
}
|
||||
@@ -0,0 +1,65 @@
|
||||
// engine-client.mjs -- le moteur vu depuis la page : démarre le Web Worker
|
||||
// (engine-worker.mjs) et lui envoie les commandes.
|
||||
//
|
||||
// Copyright (C) 2026 les auteurs d'Ustagammon.
|
||||
// Licence : GPLv3 ou ultérieure (voir LICENSE).
|
||||
//
|
||||
// Toutes les fonctions renvoient une promesse de { result, ms, memoryBytes } :
|
||||
// result est l'objet JSON d'engine-cli, ms le temps de calcul mesuré dans le
|
||||
// Worker. La promesse est rejetée si le moteur signale une erreur.
|
||||
|
||||
import { commands } from "./engine-wasm.mjs";
|
||||
|
||||
export function startEngine() {
|
||||
const worker = new Worker(new URL("engine-worker.mjs", import.meta.url), { type: "module" });
|
||||
const pending = new Map();
|
||||
let nextId = 1;
|
||||
let resolveReady, rejectReady;
|
||||
const ready = new Promise((resolve, reject) => {
|
||||
resolveReady = resolve;
|
||||
rejectReady = reject;
|
||||
});
|
||||
|
||||
worker.onmessage = (event) => {
|
||||
const message = event.data;
|
||||
if (message.type === "ready") {
|
||||
resolveReady(message);
|
||||
} else if (message.type === "failed") {
|
||||
rejectReady(new Error(message.message));
|
||||
} else {
|
||||
const { resolve, reject } = pending.get(message.id);
|
||||
pending.delete(message.id);
|
||||
if (message.error) {
|
||||
reject(new Error(message.error));
|
||||
} else {
|
||||
resolve(message);
|
||||
}
|
||||
}
|
||||
};
|
||||
// Erreur au chargement du Worker lui-même (fichier absent, navigateur
|
||||
// trop ancien pour les Workers en module ES…).
|
||||
worker.onerror = (event) => {
|
||||
rejectReady(new Error(event.message || "le Web Worker du moteur n'a pas démarré"));
|
||||
};
|
||||
|
||||
function run(args) {
|
||||
const id = nextId++;
|
||||
return new Promise((resolve, reject) => {
|
||||
pending.set(id, { resolve, reject });
|
||||
worker.postMessage({ id, args: args.map(String) });
|
||||
});
|
||||
}
|
||||
|
||||
return {
|
||||
// Promesse de { loadMs, memoryBytes } une fois le moteur chargé.
|
||||
ready,
|
||||
bestMove: (positionId, matchId, dice, ply) =>
|
||||
run(commands.bestMove(positionId, matchId, dice, ply)),
|
||||
cubeDecision: (positionId, matchId, ply) =>
|
||||
run(commands.cubeDecision(positionId, matchId, ply)),
|
||||
evaluate: (positionId, matchId, ply) =>
|
||||
run(commands.evaluate(positionId, matchId, ply)),
|
||||
reference: (positionId, matchId, dice, ply) =>
|
||||
run(commands.reference(positionId, matchId, dice, ply)),
|
||||
};
|
||||
}
|
||||
@@ -0,0 +1,38 @@
|
||||
// engine-worker.mjs -- Web Worker qui fait tourner le moteur WebAssembly.
|
||||
//
|
||||
// Copyright (C) 2026 les auteurs d'Ustagammon.
|
||||
// Licence : GPLv3 ou ultérieure (voir LICENSE).
|
||||
//
|
||||
// Le moteur calcule ici, jamais sur le fil d'affichage de la page. Messages :
|
||||
// - envoyé une fois au chargement : { type: "ready", loadMs, memoryBytes }
|
||||
// ou { type: "failed", message } ;
|
||||
// - reçu : { id, args }, les arguments d'une commande engine-cli ;
|
||||
// - répondu : { id, result, ms, memoryBytes } ou { id, error }.
|
||||
// Les commandes sont traitées une à une, dans l'ordre d'arrivée.
|
||||
|
||||
import createEngineModule from "./wasm/engine.mjs";
|
||||
import { loadEngine } from "./engine-wasm.mjs";
|
||||
|
||||
const start = performance.now();
|
||||
const wasmDir = new URL("wasm/", import.meta.url).href;
|
||||
const ready = loadEngine(createEngineModule, wasmDir);
|
||||
|
||||
ready.then(
|
||||
(engine) => postMessage({
|
||||
type: "ready",
|
||||
loadMs: performance.now() - start,
|
||||
memoryBytes: engine.memoryBytes(),
|
||||
}),
|
||||
(error) => postMessage({ type: "failed", message: String(error.message || error) }),
|
||||
);
|
||||
|
||||
onmessage = async (event) => {
|
||||
const { id, args } = event.data;
|
||||
try {
|
||||
const engine = await ready;
|
||||
const { result, ms } = engine.run(args);
|
||||
postMessage({ id, result, ms, memoryBytes: engine.memoryBytes() });
|
||||
} catch (error) {
|
||||
postMessage({ id, error: String(error.message || error) });
|
||||
}
|
||||
};
|
||||
@@ -0,0 +1,48 @@
|
||||
<!doctype html>
|
||||
<html lang="fr">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>Ustagammon : test du moteur</title>
|
||||
<link rel="stylesheet" href="style.css">
|
||||
<script type="module" src="page.mjs"></script>
|
||||
</head>
|
||||
<body>
|
||||
<main>
|
||||
<h1>Test du moteur</h1>
|
||||
<p>Le moteur GNU Backgammon, compilé en WebAssembly, calcule dans le navigateur.</p>
|
||||
<p id="status" class="status">Chargement du moteur…</p>
|
||||
|
||||
<form id="form">
|
||||
<label>Exemple
|
||||
<select id="example"><option value="">(choisir une position de référence)</option></select>
|
||||
</label>
|
||||
<label>Position ID
|
||||
<input id="position-id" required autocomplete="off" spellcheck="false" value="4HPwATDgc/ABMA">
|
||||
</label>
|
||||
<label>Match ID
|
||||
<input id="match-id" required autocomplete="off" spellcheck="false" value="cIkFAAAAAAAA">
|
||||
</label>
|
||||
<div class="row">
|
||||
<label>Dé 1 <input id="die1" type="number" min="1" max="6" required value="3"></label>
|
||||
<label>Dé 2 <input id="die2" type="number" min="1" max="6" required value="1"></label>
|
||||
<label>Niveau
|
||||
<select id="ply">
|
||||
<option value="0">rapide (0 pli)</option>
|
||||
<option value="2">fort (2 plis)</option>
|
||||
</select>
|
||||
</label>
|
||||
</div>
|
||||
<button id="best-move" type="submit" disabled>Meilleur coup</button>
|
||||
</form>
|
||||
|
||||
<section id="result" class="result" hidden>
|
||||
<p>Meilleur coup : <strong id="move"></strong></p>
|
||||
<p id="details"></p>
|
||||
<p>Temps de calcul : <strong id="time"></strong></p>
|
||||
</section>
|
||||
|
||||
<p><a href="bench.html">Page de mesure</a></p>
|
||||
</main>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,71 @@
|
||||
// page.mjs -- page de test du moteur (index.html) : meilleur coup d'une
|
||||
// position, avec son temps de calcul.
|
||||
//
|
||||
// Copyright (C) 2026 les auteurs d'Ustagammon.
|
||||
// Licence : GPLv3 ou ultérieure (voir LICENSE).
|
||||
|
||||
import { startEngine } from "./engine-client.mjs";
|
||||
|
||||
const $ = (id) => document.getElementById(id);
|
||||
const engine = startEngine();
|
||||
|
||||
engine.ready.then(
|
||||
({ loadMs }) => {
|
||||
$("status").textContent = "Moteur prêt, chargé en " + Math.round(loadMs) + " ms.";
|
||||
$("best-move").disabled = false;
|
||||
},
|
||||
(error) => {
|
||||
$("status").textContent = "Le moteur n'a pas pu se charger : " + error.message;
|
||||
$("status").classList.add("error");
|
||||
},
|
||||
);
|
||||
|
||||
// Exemples : les positions de référence avec des dés.
|
||||
fetch("wasm/positions.json")
|
||||
.then((response) => response.json())
|
||||
.then(({ positions }) => {
|
||||
for (const p of positions.filter((p) => p.type === "move")) {
|
||||
const option = new Option(p.id + " : " + p.description, p.id);
|
||||
option.position = p;
|
||||
$("example").add(option);
|
||||
}
|
||||
})
|
||||
.catch(() => {}); // la page reste utilisable sans les exemples
|
||||
|
||||
$("example").onchange = () => {
|
||||
const p = $("example").selectedOptions[0].position;
|
||||
if (p) {
|
||||
$("position-id").value = p.position_id;
|
||||
$("match-id").value = p.match_id;
|
||||
[$("die1").value, $("die2").value] = p.dice;
|
||||
}
|
||||
};
|
||||
|
||||
function showResult(move, details, time) {
|
||||
$("move").textContent = move;
|
||||
$("details").textContent = details;
|
||||
$("time").textContent = time;
|
||||
$("result").hidden = false;
|
||||
}
|
||||
|
||||
$("form").onsubmit = async (event) => {
|
||||
event.preventDefault();
|
||||
$("best-move").disabled = true;
|
||||
$("result").hidden = true;
|
||||
try {
|
||||
const { result, ms } = await engine.bestMove($("position-id").value.trim(),
|
||||
$("match-id").value.trim(), [$("die1").value, $("die2").value], $("ply").value);
|
||||
const best = result.best_move;
|
||||
if (best) {
|
||||
showResult(best.move, "Équité " + best.equity.toFixed(3).replace(".", ",")
|
||||
+ ", chances de gain " + (100 * best.probabilities.win).toFixed(1).replace(".", ",")
|
||||
+ " %, évalué à " + best.ply + " pli(s).", Math.round(ms) + " ms");
|
||||
} else {
|
||||
showResult("aucun coup possible", "", Math.round(ms) + " ms");
|
||||
}
|
||||
} catch (error) {
|
||||
showResult("erreur", error.message, "");
|
||||
} finally {
|
||||
$("best-move").disabled = false;
|
||||
}
|
||||
};
|
||||
+113
@@ -0,0 +1,113 @@
|
||||
/* Pages de test du moteur : mise en forme minimale, lisible sur téléphone. */
|
||||
|
||||
:root {
|
||||
--text: #1d1d1b;
|
||||
--background: #fbfaf7;
|
||||
--muted: #5f5e5a;
|
||||
--accent: #1f5c4a;
|
||||
--error: #a3261b;
|
||||
--border: #cfccc4;
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
:root {
|
||||
--text: #ecebe6;
|
||||
--background: #1b1c1a;
|
||||
--muted: #a9a8a2;
|
||||
--accent: #7cc4a8;
|
||||
--error: #f08a7e;
|
||||
--border: #4a4a46;
|
||||
}
|
||||
}
|
||||
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
font: 17px/1.5 system-ui, sans-serif;
|
||||
color: var(--text);
|
||||
background: var(--background);
|
||||
}
|
||||
|
||||
main {
|
||||
max-width: 40rem;
|
||||
margin: 0 auto;
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
|
||||
label {
|
||||
display: block;
|
||||
margin-bottom: 0.75rem;
|
||||
}
|
||||
|
||||
input,
|
||||
select,
|
||||
button,
|
||||
textarea {
|
||||
display: block;
|
||||
width: 100%;
|
||||
margin-top: 0.25rem;
|
||||
padding: 0.5rem;
|
||||
font: inherit;
|
||||
color: inherit;
|
||||
background: transparent;
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 6px;
|
||||
}
|
||||
|
||||
.row {
|
||||
display: flex;
|
||||
gap: 0.75rem;
|
||||
}
|
||||
|
||||
.row label {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
button {
|
||||
margin: 0.5rem 0 1rem;
|
||||
font-weight: 600;
|
||||
color: var(--background);
|
||||
background: var(--accent);
|
||||
border-color: var(--accent);
|
||||
}
|
||||
|
||||
button:disabled {
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
textarea {
|
||||
height: 16rem;
|
||||
font: 13px/1.4 monospace;
|
||||
}
|
||||
|
||||
table {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
}
|
||||
|
||||
th,
|
||||
td {
|
||||
padding: 0.25rem;
|
||||
text-align: left;
|
||||
border-bottom: 1px solid var(--border);
|
||||
}
|
||||
|
||||
.status {
|
||||
color: var(--muted);
|
||||
}
|
||||
|
||||
.error {
|
||||
color: var(--error);
|
||||
}
|
||||
|
||||
.result {
|
||||
padding: 0.5rem 1rem;
|
||||
border-left: 4px solid var(--accent);
|
||||
}
|
||||
Reference in New Issue
Block a user