Calcul formel et algorithmique interactifs

Bernard.Parisse@univ-grenoble-alpes.fr

2017

Avant un long discours, quelques exemples interactifs : un tracé de graphe, un tableau de variations, un programme en syntaxe Python. x^2+x-3

x^2+x-3

def second_deg(a,b,c):
    # local d
    d=b*b-4*a*c
    if d<0:
        return "pas de solution"
    return [(-b-sqrt(d))/(2*a),(-b+sqrt(d))/(2*a)]

onload

second_deg(1,1,1); second_deg(1,1,-1)

Résumé: Il existe de plus en plus de documents mathématiques sur le web, la plupart sont des documents PDF inertes, ce qui ne favorise pas une lecture active. On présente ici deux méthodes pour permettre au lecteur de modifier des calculs, des programmes, afficher un graphe et tester tout cela depuis son navigateur. La première méthode consiste à ajouter des liens vers une feuille de calcul de Xcas pour Firefox et est très simple à mettre en oeuvre pour l’auteur. La deuxième donne beaucoup plus de contrôle à l’auteur, elle nécessite de savoir taper en L^AT_EX. Plusieurs technologies sont utilisées : L^AT_EX, hevea[3] (compilateur vers HTML5) ou [1], itex2mml[2] (traducteur de formules vers MathML), le moteur de calcul formel Giac[4] et le compilateur emscripten[5] (C vers javascript).

Table des matières

1 Introduction
2 Xcas pour Firefox
3 Documents interactifs calcul formel et/ou algorithmique avec L^AT_EX
4 Développements futurs

Index

giaccmd, 3.4, 3.4
giaccmdbigmath, 3.4, 3.4
giaccmdmath, 3.4, 3.4
giachidden, 3.4
giacinput, 3.4, 3.4
giacinputbig, 3.4

giacinputbigmath, 3.4
giacinputmath, 3.4
giaclink, 3.4
giaconload, 3.4
giacprog, 3.4
giacslider, 3.4

1 Introduction

L^AT_EX est devenu depuis plus de deux décennies le standard de l’édition mathématique professionnelle papier. Par contre, on trouve un peu de tout pour les maths sur le web :

dans le monde de la recherche ce sont les documents PDF issus de L^AT_EX qui dominent, la qualité typographique est excellente, mais ces documents ne sont pas interactifs et moins intégrés au navigateur que des documents HTML. Des compilateurs de L^AT_EXvers HTML existent, mais ils offrent en général un rendu nettement moins joli que PDF car ils ne proposent pas par défaut une traduction en MathML.
dans le monde de l’enseignement, les auteurs ne connaissent pas forcément L^AT_EX les documents sont de moins bonne qualité typographique (en PDF ou en HTML mais rarement avec du MathML), ils ne sont en général pas interactifs, ou alors ils nécessitent l’utilisation de logiciels propriétaires.

Il y a une raison au mauvais rendu mathématique de nombreuses pages HTML : il existe bien un standard pour un rendu mathématique de qualité, c’est MathML, mais son support a été abandonné par Chrome et il n’a jamais été implémenté par Internet Explorer. Seuls Firefox et les navigateurs utilisant le même webkit supportent un rendu natif de MathML, sur les autres navigateurs il faut passer par une bibliothèque en javascript comme mathjax, ce qui ralentit considérablement l’affichage dès que le document atteint quelques dizaines de pages. Mais comme Firefox s’installe sur tout type d’appareil, cela ne me semble pas une raison valide pour s’interdire d’utiliser MathML. Ainsi Xcas pour Firefox utilise MathML, et nous utilisons le programme hevea qui permet en association avec itex2mml de traduire du L^AT_EX vers du HTML5+MathML.

Pour rendre une page interactive, la solution traditionnelle consiste à faire dialoguer le navigateur avec un serveur sur lequel peut tourner un logiciel de calcul ou de programmation. Ceci peut malheureusement nécessiter des ressources importantes coté serveur, et cela nécessite à tout moment un accès réseau. La solution que nous proposons ici repose sur des calculs faits entièrement en local par le navigateur. Le logiciel de calcul et programmation doit donc être écrit en javascript, le langage des navigateurs, ce qui est réalisé ici en compilant avec emscripten le code C++ du moteur de calcul formel Giac (celui du logiciel Xcas et de Geogebra) vers javascript. Ceci a été fait à l’origine pour répondre à la demande de Geogebra, cela sert maintenant à l’interface web de Xcas (Xcas pour Firefox) et également comme moteur de calcul et interpréteur de pages interactives crées à partir de L^AT_EXḊepuis quelques semaines, il est possible d’utiliser une syntaxe compatible avec le langage Python de base, ce qui devrait intéresser les enseignants de lycée pour l’algorithmique et pas uniquement pour le calcul formel.

Dans la section 2, nous expliquons comment un auteur peut publier une feuille de calcul ou un programme, ceci ne nécessite aucune connaissance de L^AT_EXLa section 3 explique comment créer un document L^AT_EX avec des champs de saisie qui seront exécutés par le moteur de calcul, elle nécessite de connaitre un peu L^AT_EX (des environements d’édition comme texmaker permettent de s’initier à L^AT_EX en une heure environ).

2 Xcas pour Firefox

Xcas pour Firefox est une interface de Xcas en cours de développement, utilisable depuis un navigateur compatible avec Firefox, donc depuis des matériels très divers: PC bien sur, mais aussi tablettes, voire smartphones (mais la taille d’écran d’un smartphone standard y rend l’usage un peu difficile). Il est conseillé d’utiliser Firefox, car les calculs sont plus rapides avec ce navigateur, grâce à la technologie asmjs qui permet au navigateur de traduire en code natif certaines portions du code javascript généré par le compilateur emscripten, le gain en vitesse est souvent supérieur à un facteur 5, tout cela sans aucune intervention de l’utilisateur.

Comme dans Xcas, on tape des lignes de commandes (au sens large, une commande peut être un programme ou une commande graphique), qui une fois exécutées apparaissent dans un historique, on peut alors les modifier. Il n’y a pas de menus, mais des boutons pour faire apparaitre des assistants, dans deux catégories math et prog.

On peut sauvegarder une feuille de calcul par l’intermédiaire des cookies du navigateur et les retrouver plus tard. On peut également partager une feuille de calcul par email en cliquant sur le lien email, le destinataire clique sur le lien dans le mail reçu et retrouve alors la feuille de calcul. On peut ainsi imaginer envoyer un début de programme ou une liste partielle de commandes de calcul formel envoyé par un enseignant à ses élèves, et réciproquement un élève peut renvoyer une feuille de calcul complétée pour évaluation. L’enseignant peut aussi utiliser le bouton Clone pour créer un lien ouvrant la feuille de calcul, lien qu’il peut insérer dans une de ses pages personnelles.

À noter : le menu math permet de créer un curseur, ce qui permet d’animer un graphique ou observer la dépendance d’un résultat en fonction d’un paramètre.

3 Documents interactifs calcul formel et/ou algorithmique avec L^AT_EX

3.1 Le point de vue du lecteur

Le lecteur ouvre le document HTML depuis son navigateur comme n’importe quel lien. Il dispose d’un tableau de bord en bas du document et d’une petite calculatrice, exactement comme sur la version HTML de cet article. Le tableau de bord permet d’accéder par un lien à la table des matières du document, à l’index. Il peut cloner une commande ou un programme qu’il vient d’exécuter dans Xcas pour Firefox, effacer l’hisorique de calcul, augmenter ou diminuer l’historique de calculs. Au milieu du tableu de bord se trouve la ligne de commande de la calculatrice, le bouton permettant d’exécuter le calcul, Le bouton Restart permet de réinitialiser la session de calcul, le bouton Exec. tout exécute tous les calculs de la feuille, ce qui peut être long.

Pour plus d’exemples, vous pouvez consulter le manuel algorithmique lycée de Xcas, mon cours de 2ième année de licence Courbes paramétrées et équations différentielles pour la physique, ou le manuel Algorithmes de Xcas

3.2 Consignes au rédacteur

3.3 Installation

Je conseille de travailler sous Linux, si vous travaillez sur Mac ou Windows, il est aujourd’hui facile d’installer un Linux dans une machine virtuelle avec Virtualbox. Il faut disposer d’une distribution latex, installer la dernière version d’hevea, installer hevea2mml et quelques fichiers supplémentaires, ce qui se fait depuis un Terminal par les commandes suivantes :

#! /bin/bash
wget https://www-fourier.ujf-grenoble.fr/~parisse/giac/giac.tex
wget https://www-fourier.ujf-grenoble.fr/~parisse/giac/giacfr.tex
wget https://www-fourier.ujf-grenoble.fr/~parisse/giac/giac.js
wget https://www-fourier.ujf-grenoble.fr/~parisse/giac/hevea.sty
wget https://www-fourier.ujf-grenoble.fr/~parisse/giac/mathjax.sty
wget http://hevea.inria.fr/distri/hevea-2.31.tar.gz
tar xvfz hevea-2.31.tar.gz
cd hevea-2.31
make
sudo make install
cd ..
wget https://www-fourier.ujf-grenoble.fr/~parisse/giac/heveatomml.tgz
tar xvfz heveatomml.tgz
cd heveatomml/src
make
sudo make install
cd ../..

3.4 Rédiger un document interactif

Ajoutez dans l’en-tête du document L^AT_EX (avant \begin{document}) :

\input{giacfr.tex}
\giacmathjax

Ajoutez juste après \begin{document} l’une des commandes :
\begin{giacjs}
\begin{giacjshere}
En fin de document, juste avant \end{document}, ajoutez \end{giacjs} ou \end{giacjshere}.

Avant toute \section, insérez les commandes
\tableofcontents
\printindex
pour que les boutons Table et Index du tableau de bord de la page HTML correspondent bien à la table des matières et à l’index.

Le reste du fichier est du L^AT_EX standard, mais il faut prendre quelques précautions :

Les références à des équations numérotées doivent être placées entre des parenthèses précédées par des backslash, par exemple \begin{equation} \label{eq_test} \frac{2}{x^2-1}=\frac{1}{x-1}-\frac{1}{x+1} \end{equation} D'apr\`es l'\'equation ($eq_test$) ... $\frac{2}{x^2-1}=\frac{1}{x-1}-\frac{1}{x+1} \qquad (1)$ D’après equation (1) ...
\mathbb{} doit être explicite, une commande comme \R où \R est défini par \newcommand{\R}{\mathbb{R}} ne fonctionnera pas.

Vous disposez de plusieurs commandes L^AT_EX pour générer des lignes de commandes interactives ou des programmes.

\giacinputmath{commandline} génère une ligne de commande en ligne que l’utilisateur peut modifier et exécuter, l’affichage de la réponse se fait en MathML (ou SVG pour les graphes 2-d).
Exemple : \giacinputmath{factor(x^10-1)}

factor(x^10-1)

Attention, si votre commande contient < ou >, vous devez les remplacer par < ou >, autrement ils seront interprétés comme des délimiteurs HTML. Vous pouvez aussi utiliser les environnements giacprog et giaconload expliqués ci-dessous.
Si la sortie est un graphe 2-d, ne sautez pas de ligne avec \\ après la commande, sinon la compilation en PDF provoquera des erreurs.
\giaccmdmath{command}{arguments} va afficher command dans un bouton après une ligne de commande contenant arguments, le lecteur pourra modifier les arguments mais pas la commande:
\giaccmdmath{factor}{x^4-1}

x^4-1
Ces commandes peuvnet prendre un argument de style HTML style optionnel, par exemple
\giacinputmath[style="width:200px;"]{factor(x^10-1)}

factor(x^10-1)

\giaccmdmath[style="font-size:x-large"]{factor}{x^4-1}

x^4-1
Il y a des commandes similaires pour une sortie hors-ligne \giacinputbigmath{} ou \giaccmdbigmath{}{}:
Par exemple \giacinputbigmath{factor(x^25-1)}

factor(x^25-1)

Exemple avec un argument de style optionnel
\giacinputbigmath[style="width:600px;height:20px;"]{factor(x^25-1)}

factor(x^25-1)

\giaccmdbigmath{factor}{x^25-1}

x^25-1

\giaccmdbigmath[style="width:600px;height:20px;"]{factor}{x^25-1}

x^25-1
Des commandes similaires avec une sortie texte (ou graphique) \giacinput and \giacinputbig et \giaccmd, exemple:
\giacinput{factor(x^4-1)} :
factor(x^4-1)

\giaccmd{print}{"Hello world"} :
"Hello world"

Avec argument de style optionnel
\giacinput[style="font-size:x-large"]{plot(1/x)}
plot(1/x)
\giaccmd[style="font-size:x-large"]{factor}{x^4-1}
x^4-1
L’environement giacprog sert pour des programmes ou des commandes sur plusieurs lignes
\begin{giacprog}...\end{giacprog}
Dans cet environement, on peut utiliser < et >. Le programme sera interprété lorsque l’utilisateur pressera le bouton ok. Ensuite, on peut modifier le programme et l’interpréter à nouveau.
Attention: Il ne faut pas utiliser giacprog dans un autre environement (comme itemize ou enumerate).
Si on veut que le programme soit interprété au chargement de la pgae HTML, il faut remplacer giacprog par giaconload:
\begin{giaconload}...\end{giaconload}
La commande \giacslider{idname}{min}{max}{step}{valeur}{commande} permet d’ajouter un curseur. Lorsque le lecteur modifie le curseur, la nouvelle valeur est stockée dans idname et commande (qui dépend en principe de idname) est exécutée. Exemple:
\giacslider{a}{-5}{5}{0.1}{0.5}{plot(sin(a*x))}

= plot(sin(a*x))
Not evaled
La commande \giachidden se comporte comme \giaccmd mais le style HTML5 par défaut est “hidden” jusqu’à ce que le bouton soit pressé.
La commande \giaclink ajoute un lien (dans la version HTML5, si on compile vers PDF/DVI rien n’est affiché). Ce lien ouvre un nouvel onglet. On peut indiquer en argument optionnel le texte du lien (par défaut c’est Tester en ligne). Notez que hevea.sty propose des commandes similaires (\ahref, \footahref, \ahrefurl) avec un affichage en PDF/DVI.
Exemple avec un lien vers Xcas pour Firefox contenant quelques calculs
\giaclink{http://www-fourier.ujf-grenoble.fr/\%7eparisse/xcasfr.html#+factor(x^4-1)&+a:=idn(3)&}
Tester en ligne

Vous pouvez vous inspirer des textes sources de documents HTML5 interactifs, par exemple ce source ou le cours sur les courbes et équations différentielles.

3.5 Compilation

Pour créer un fichier HTML5+MathML, tapez la commande
hevea2mml nom_fichier.tex
cela devrait générer nom_fichier.html que vous pouvez tester en tapant la commande firefox nom_fichier.html &.

3.6 Publication

Si le test est concluant, il vous suffit de recopier le fichier HTML sur votre espace web personnel. Si vous avez utilisé \begin{giacjshere}, vous devrez aussi mettre dans le même répertoire le fichier giac.js.

4 Développements futurs

Quelqu’un connaissant Javascript et L^AT_EX peut sans doute exploiter bien mieux les possibilités d’interaction, par exemple permettre la création de questionnaires avec auto-correction ou correction automatique.

On peut surement créer d’autres commandes et environnements, améliorer la calculatrice, etc.

Références

[1]: Yannick Chevallier. Hevea: LaTeX to HTML5 compiler, fork for MathJax support. https://github.com/YannickChevalier/hevea-mathjax, 2017.
[2]: Jacques Distler. LaTeX to MathML converter. golem.ph.utexas.edu/ distler/blog/itex2MML.html, 2016.
[3]: Luc Maranget. Hevea: LaTeX to HTML5 compiler (unstable version). http://hevea.inria.fr/distri/unstable/, 2017.
[4]: Bernard Parisse and Renée De Graeve. Giac/Xcas Computer Algebra System. www-fourier.ujf-grenoble.fr/ parisse/giac.html, 2017.
[5]: Alon Zakai. Emscripten: A C/C++ to Javascript compiler. kripken.github.io/emscripten-site/, 2017.