Développer une application IA dans un seul fichier HTML

Peut-on construire une application IA dans un seul fichier HTML ? ChatJPT prouve que oui. Le fichier compte environ 19 000 lignes et pèse un peu plus d’un mégaoctet. Il contient tout : l’interface, les styles, la logique et les traductions. Pourtant, il dialogue avec 16 fournisseurs d’IA, génère des images, des vidéos et des voix. Voici comment il est construit.

Pourquoi une application IA dans un seul fichier HTML ?

Un seul fichier, c’est d’abord une installation qui n’en est pas une. Vous le téléchargez, vous l’ouvrez dans Chrome, Edge, Firefox ou Safari, et c’est tout. Il n’y a ni dépendances à installer, ni compilation, ni serveur à lancer.

Ce choix a aussi un effet sur le développement. Chaque modification se vérifie en rechargeant la page. De plus, la distribution est triviale : une version égale un fichier, dont le nom porte le numéro, comme ChatJPT_1_35_2.html. Ce rythme explique en partie l’histoire de ChatJPT et ses 47 versions en cinq mois.

JavaScript pur, sans framework

Le fichier suit une organisation stable : en-tête et styles CSS, puis l’interface, puis un seul script principal. Il n’y a ni React, ni Vue, ni outil de compilation. Des fonctions JavaScript classiques gèrent chaque étape : l’envoi, le streaming de la réponse, le rendu, la persistance.

Les fonctions des fournisseurs sont décrites dans des tables de configuration plutôt que dans du code éparpillé. Par exemple, une table liste les modèles d’image de chaque fournisseur. L’interface lit cette table : si un fournisseur y figure, l’onglet Image s’active tout seul. Ajouter un modèle revient donc souvent à ajouter une ligne.

Les couleurs passent par des variables CSS, ce qui permet le thème clair et le thème sombre. Enfin, chaque texte visible existe en trois langues : français, anglais et espagnol.

Appeler les API directement depuis le navigateur

Une application IA dans un seul fichier HTML n’a pas de serveur. Le navigateur appelle donc directement l’API de chaque fournisseur. Cette contrainte a une conséquence majeure : le CORS.

En effet, un navigateur refuse par défaut qu’une page lise la réponse d’un autre domaine, sauf si ce domaine l’autorise. Ce mécanisme est expliqué sur MDN. Avant d’intégrer un fournisseur, ChatJPT passe donc un test : une vraie requête depuis Chrome, avec le fichier ouvert en local. Si le fournisseur bloque, il n’est pas intégré.

Ce test a déjà écarté plusieurs services. Par exemple, l’API directe de Z.ai bloque le navigateur ; ses modèles GLM passent donc par Alibaba, qui l’autorise. De même, la vidéo d’Alibaba n’est proposée que dans les régions où le suivi des tâches est ouvert au navigateur.

Une sécurité stricte

Afficher du texte produit par une IA est risqué : une réponse pourrait contenir du code malveillant. ChatJPT applique donc plusieurs protections :

• Assainissement : chaque réponse est transformée en HTML puis nettoyée par DOMPurify avant d’être affichée.
• Intégrité des bibliothèques : les trois bibliothèques externes (DOMPurify, PDF.js, highlight.js) sont chargées avec une empreinte de vérification. Si le fichier reçu ne correspond pas, il est refusé.
• Aperçu isolé : quand l’IA génère une page web, l’aperçu s’ouvre dans un cadre isolé, sans accès au stockage de l’application. Vos clés restent hors de portée.
• Clés chiffrées : les clés API sont chiffrées dans le stockage du navigateur. Ce chiffrement empêche une lecture directe ; il ne remplace pas la protection de votre ordinateur.

Streaming et formats différents

Chaque fournisseur a son propre format de réponse. Pourtant, l’affichage doit rester le même : le texte qui s’écrit en direct, le bloc de réflexion repliable, les sources, les graphiques. ChatJPT résout ce problème avec une fonction d’appel par famille d’API et un lecteur de flux qui traduit chaque format vers une forme commune. Ensuite, une seule fonction de rendu prend le relais.

Beaucoup de fournisseurs suivent le format d’OpenAI. Pour eux, une ligne dans une table suffit à déclarer l’adresse de l’API ; le reste est générique.

Tester sans serveur

Le projet n’a pas de chaîne de compilation. Les vérifications se font donc dans un vrai navigateur. Des scénarios automatisés simulent les réponses des fournisseurs pour vérifier l’interface ; ensuite, chaque fonction est testée avec une vraie clé. Chaque nouvelle version vérifie aussi les trois langues et les deux thèmes.

Développé avec l’IA

ChatJPT est développé avec l’aide d’un assistant de programmation, Claude Code. Le développeur décide des fonctions, valide chaque choix et teste en conditions réelles ; l’assistant écrit et vérifie le code. Cette méthode rejoint le mode Vibe Coder de ChatJPT, pensé pour aider les débutants à créer sans savoir programmer.

En résumé

Une application IA dans un seul fichier HTML impose des règles : pas de serveur, des fournisseurs ouverts au navigateur, une sécurité sans compromis. En échange, elle reste légère et transparente. Ces choix ne sont pas seulement techniques ; ils découlent de la philosophie de ChatJPT.