Concevoir une application web IA sans dépendance en 92 kilooctets

Le développement de logiciels interactifs implique souvent de lourds paquets JavaScript, des compilateurs complexes et de nombreuses dépendances tierces. Cependant, une application de mentorat en programmation par IA démontre qu'un client web réactif capable de diffuser du contenu en continu peut tenir dans un seul fichier HTML de 92 kilooctets, sans aucune étape de compilation, framework ou bibliothèque npm. Développée sur un appareil mobile bas de gamme, l'application repose entièrement sur les standards web et le traitement dorsal sans serveur.

Architecture front-end dans un fichier unique

L'application intègre l'ensemble de son interface utilisateur dans un seul fichier statique contenant environ 500 lignes de CSS, 200 lignes de structure HTML et 1 400 lignes de JavaScript pur. Elle propose l'authentification des comptes via Supabase, des thèmes sombre et clair, la compression d'images, le rendu markdown, le traitement d'entrées audio et l'exportation de conversations.

Au lieu d'intégrer des bibliothèques d'icônes tierces ou des frameworks CSS, le client utilise des jetons de conception natifs et des éléments SVG intégrés directement. Les mises à jour d'état évitent complètement les abstractions de DOM virtuel, s'appuyant à la place sur des fonctions JavaScript concises qui rafraîchissent directement les éléments spécifiques du document lorsque les données changent.

Workers sans serveur et flux natif

La diffusion de texte en temps réel à partir de modèles d'intelligence artificielle est généralement gérée par des bibliothèques côté client. Dans cette implémentation, le navigateur traite les réponses en continu à l'aide de requêtes d'extraction natives (fetch) combinées à un lecteur ReadableStream afin d'analyser les événements envoyés par le serveur.

L'intelligence dorsale réside dans un Worker Cloudflare sans serveur. Lorsqu'une invite est soumise, le worker vérifie le texte par rapport à un cadre constitutionnel composé de 11 règles pour filtrer les contenus toxiques, sélectionne un pipeline de modèles de langage approprié, extrait éventuellement des résultats web en direct à l'aide de la recherche Tavily et renvoie le résultat formaté en continu vers l'interface à fichier unique.

La performance par les contraintes du système

Le projet souligne comment le développement sous des contraintes matérielles physiques — en particulier la création sur un smartphone à faibles spécifications incapable d'exécuter des serveurs Node gourmands en mémoire — peut imposer des choix d'architecture sobres. L'utilisation des fonctionnalités standard du navigateur, telles que le stockage web natif, les objets blobs et les API de presse-papiers, permet au front-end de se charger en moins d'une seconde, même sur des connexions réseau lentes, offrant ainsi un modèle fonctionnel pour l'ingénierie logicielle à petit budget.

Illustration éditoriale générée par IA ; ce n’est pas une photographie documentaire.

Source: Iam 12 .I Built an AI Web App in a Single 92KB HTML File. No React. No Build Step. No Excuses.