Transformer un tableur Excel en calculatrice web avec Claude

Le point de départ

En juillet 2026, la Direction numérique du groupe SNCF, Resilio et Wavestone ont publié Impact’IA : un guide méthodologique et une calculatrice sous forme de tableur, en open source (licence CC BY-NC-SA 4.0, dépôt GitHub (nouvel onglet)). Le tableur estime l’électricité, le carbone et l’eau d’un usage d’IA générative, à partir du modèle, du volume de tokens et du pays où tournent les serveurs.

Un tableur, c’est précis mais peu partageable. Je voulais une page qu’on ouvre sans rien installer, qui réponde à une question simple : combien coûte une requête, pour mon usage réel.

La stack

• Claude, en artefact sur claude.ai (abonnement Max) pour le portage : je lui ai donné le tableur et il a produit une page HTML autonome.
• HTML, CSS et JavaScript sans dépendance : un seul fichier, aucun framework, aucun appel réseau pour calculer.
• vibe.nfrancois.fr (Next.js sur Vercel) pour l’héberger, avec le socle graphique commun du site.
• Claude Code et Playwright pour les corrections et les vérifications sur mobile.

Les étapes

Porter l’onglet « Calcul »

Le cœur du tableur tient dans l’onglet « Calcul ». L’artefact l’a traduit en une fonction JavaScript, impactIA, qui reprend les mêmes constantes et les mêmes formules. Les entrées restent mensuelles comme dans le tableur (onglet « Données », mode Production), puis passent à l’année.

Le calcul enchaîne six postes : l’inférence (la réponse du modèle), le RAG et l’embedding, le front applicatif, l’entraînement alloué au prorata des tokens de sortie, la recherche et les entraînements de test (comptés quatre fois l’entraînement final), et le stockage. Un extrait de la partie inférence :

// --- Inference: answering the requests
const mem = 1.2*PT*(16/8);
const nMin = Math.ceil((mem/80)*10 - 1e-9)/10;
let nGPU = 1; while (nGPU < nMin) nGPU *= 2;
const ePerTok = Tout>0 ? E_A*Math.exp(E_B*BATCH)*PA + E_G : 0;   // Wh/token
const eGPU = (Tout*ePerTok/1000)*nGPU;

Le nombre de GPU découle de la mémoire nécessaire au modèle, l’énergie par token d’une loi exponentielle fonction du nombre de paramètres actifs. Les 38 modèles de la méthode sont repris avec leurs paramètres : taille, paramètres actifs, PUE et WUE du fournisseur, débit en tokens par seconde, date de sortie, pays.

Ajouter ce que le tableur ne fait pas

Trois ajouts, sans toucher aux formules ni aux facteurs d’émission :

1. La saisie par requête plutôt qu’en volumes mensuels, plus parlante pour un usage concret.
2. Des exemples pour démarrer : un chatbot d’office de tourisme (5 000 requêtes par mois), la rédaction de fiches d’offres (2 000), un assistant pour une équipe de dix (4 400).
3. La comparaison des 38 modèles sur une échelle logarithmique, avec le détail de la note par poste.

Avec l’exemple du chatbot et GPT-4o mini, la page affiche 11,9 mg de CO₂e, 101 mWh et 1,71 mL d’eau par requête, soit 713 g de CO₂e, 6,07 kWh et 103 L sur un an.

L’intégrer au site

La page est restée un fichier HTML autonome, posé dans public/impact-ia/index.html. Une règle de réécriture la sert à une adresse propre :

async rewrites() {
  return [{ source: '/impact-ia', destination: '/impact-ia/index.html' }];
},

Elle charge ensuite le socle commun du site (/kit/vibe.css et /kit/theme.js) : polices, barre de navigation, pied de page, thème clair et sombre. Elle garde ses propres couleurs de données : électricité en jaune, carbone en ardoise, eau en bleu.

Ce qui a coincé

L’artefact fonctionnait bien sur claude.ai. Une fois en ligne et sur mobile, trois défauts sont apparus.

• Des champs qui débordaient du panneau. Le volet « Affiner » est un élément details. Dans Chromium, son contenu passe par le pseudo-élément ::details-content, qui coupe l’héritage de box-sizing. Les champs repassaient en content-box et dépassaient de leur cadre. Correctif : ::details-content { box-sizing: inherit }, et border-box explicite sur les champs.
• Un défilement horizontal sur mobile. Une grille en 1fr laisse un enfant trop large pousser la colonne. Il a fallu grid-template-columns: minmax(0, 1fr) et une version compacte du tableau de comparaison.
• Une échelle mal dimensionnée. L’échelle logarithmique était dessinée pour une largeur fixe. Elle est maintenant tracée à la largeur réelle de son bloc.

Chaque correctif a été vérifié dans Chromium avec Playwright, sur ordinateur (1440 px) et sur mobile (390 px), en contrôlant que la page ne défile pas horizontalement.

Temps et coûts

• Le portage a été fait dans un artefact Claude, avec mon abonnement Max, sans coût supplémentaire.
• L’intégration au site date du 11 octobre, les correctifs mobiles et le passage au socle commun du 12 octobre.
• La page ne fait aucun appel à une API : son fonctionnement ne coûte rien.

À retenir

• Un tableur open source bien documenté se porte en page web sans réinterpréter la méthode. La règle « formules, modèles et facteurs inchangés » rend le résultat vérifiable.
• Un artefact qui marche sur claude.ai n’est pas encore une page publiable. Le test sur un vrai téléphone fait apparaître des défauts invisibles sur ordinateur.
• La licence compte : l’adaptation reste sous CC BY-NC-SA 4.0, avec les sources et les modifications écrites en bas de page.