Hugging Face DeepSite : générateur d'applications Web simple et alimenté par l'IA

Hugging Face DeepSite est un générateur d'applications web open-source basé sur le navigateur. Décrivez l'application que vous souhaitez en texte brut, et DeepSite appelle un grand modèle de langage pour produire un fichier unique autonome .html fichier — CSS et JavaScript en ligne — qui s'exécute immédiatement dans n'importe quel navigateur. Aucun outil de build, aucun framework, aucune dépendance à installer. Il est entièrement basé sur le navigateur, donc les utilisateurs de Windows, macOS et Linux suivent les mêmes étapes.

Ce que DeepSite génère

Chaque sortie DeepSite est un.html fichier. Les bibliothèques externes que le modèle choisit d'inclure — Chart.js, Tailwind CSS via CDN, Alpine.js — sont chargées à partir d'un lien CDN dans la <head>, et non intégrées. Cela maintient le fichier petit et immédiatement portable.

DeepSite est bien adapté pour :

• Les calculatrices interactives et les convertisseurs d'unités
• Les tableaux de bord de visualisation de données utilisant Chart.js ou similaire
• Les jeux de navigateur simples (canvas 2D, mots croisés)
• Les maquettes d'interface utilisateur et les prototypes cliquables
• Les outils et utilitaires à usage unique

Ce n'est pas un remplacement pour les applications React ou Vue multi-fichiers. Les projets qui ont besoin d'une base de données, d'une authentification ou d'une gestion d'état complexe doivent traiter la sortie DeepSite comme un échafaudage de démarrage, non comme un produit fini.

Comment utiliser DeepSite

1. Ouvrez l'espace. Aller à huggingface.co/spaces/enricoros/deepsite. Aucune connexion n'est requise sur l'instance publique, bien que vous puissiez entrer dans une file d'attente pendant les heures de pointe.
2. Écrivez votre requête. Dans le champ de requête, décrivez l'application concrètement. Au lieu de « une calculatrice », écrivez « une calculatrice de pourboire avec un curseur pour le pourcentage (10–30 %), un champ pour le total de la facture et une sortie de partage par personne ». La spécificité améliore la qualité.
3. Sélectionnez un modèle. L'espace expose une liste déroulante de modèles. Les options varient au fur et à mesure que le mainteneur met à jour l'espace ; la liste actuelle est affichée dans l'interface utilisateur. Pour une comparaison classée des modèles sous-jacents par capacité de codage et coût, consultez le Classement des grands modèles linguistiques (LLM).
4. Cliquez sur Générer. Le modèle diffuse du HTML dans le volet de l'éditeur à gauche. Un aperçu en direct s'affiche dans le volet de droite en temps réel.
5. Itérez avec des messages de suivi. Utilisez l'entrée de chat sous l'aperçu pour affiner : « passer à un arrière-plan sombre », « ajouter un bouton de réinitialisation », « utiliser une police plus grande pour le résultat ». Le modèle modifie le fichier existant plutôt que de le régénérer de zéro.
6. Téléchargez ou déployez. Cliquer Télécharger le HTML pour enregistrer le fichier localement, ou cliquez sur Déployer vers Spaces pour le publier en tant que nouvel espace Hugging Face sous votre compte.

Comprendre l'aperçu en direct

Le volet d'aperçu affiche votre HTML dans une iframeen sandbox. Certaines API de navigateur — géolocalisation, caméra, écriture dans le presse-papiers — peuvent être bloquées par les politiques de sandbox iframe dans l'environnement Hugging Face. Si une fonctionnalité fonctionne dans l'éditeur mais pas dans l'aperçu, téléchargez le fichier et ouvrez-le directement dans votre navigateur pour tester sans la sandbox.

Déployer votre application

Le Déployer vers Spaces le bouton gère automatiquement le flux complet (vous devez être connecté à Hugging Face) :

1. Crée un nouvel espace sous votre compte avec le SDK défini sur Static » — sans serveur, uniquement hébergement de fichiers.
2. Téléverse votre fichier index.html comme seul élément.
3. Attribue une URL publique au format huggingface.co/spaces/<votre-nom-d-utilisateur>/<nom-de-l-espace>.

Les espaces statiques sont gratuits. L’application devient accessible publiquement en quelques secondes après déploiement. Vous pouvez également héberger ce fichier sur n’importe quelle plateforme capable de servir du contenu statique :

Plateforme	Comment déployer	Niveau gratuit
Hugging Face Spaces (statique)	Utilisez le bouton « Déployer » intégré	Oui
GitHub Pages	Validation index.html dans un dépôt, activez Pages dans les paramètres	Oui
Netlify	Glissez-déposez le fichier sur netlify.com/drop	Oui
Vercel	Exécuter vercel --prod à partir d’un répertoire contenant le fichier	Oui (des limites s’appliquent)
N’importe quel serveur web	Copiez-le dans le répertoire racine du site et servez-le comme HTML statique	Variable

Dupliquer l'espace pour des limites de débit plus élevées

L’espace public est partagé ; durant les périodes de forte activité, vous risquez d’être mis en file d’attente. Le dupliquer vous fournit une instance privée fonctionnant sur votre propre compte Hugging Face, avec son propre quota d’appels à l’API.

1. Connectez-vous à Hugging Face.
2. Ouvrir huggingface.co/spaces/enricoros/deepsite.
3. Cliquez sur le menu à trois points (…) dans le coin supérieur droit, puis sélectionnez Dupliquer cet espace.
4. Choisissez un nom et une visibilité (publique ou privée), puis cliquez sur Dupliquer l’espace.
5. Dans les paramètres de votre espace dupliqué, ajoutez un secret nommé HF_TOKEN contenant un jeton d’API Hugging Face doté d’un accès à l’API d’inférence. DeepSite utilisera ce jeton pour tous les appels aux modèles.

Si vous hésitez entre utiliser l’espace public gratuit ou payer pour votre propre quota d’inférence, le Calculatrice du seuil de rentabilité auto-hébergement vs API permet de quantifier la différence de coût selon le volume attendu de génération.

Exécuter DeepSite localement

Le code source de DeepSite est un dépôt git standard hébergé sur Hugging Face. Vous pouvez le cloner et l’exécuter localement contre un serveur d’inférence local (Ollama, vLLM, llama.cpp avec un point de terminaison compatible OpenAI).

git clone https://huggingface.co/spaces/enricoros/deepsite
cd deepsite
npm install
npm run dev

Les noms des variables d’environnement pour le point de terminaison du modèle peuvent changer entre versions ; consultez le fichier README.md ou tout autre fichier.env.example après le clonage, plutôt que de compter sur un nom de variable fixe. Pour exécuter localement un modèle performant de génération de code, vérifiez d’abord si votre GPU dispose de suffisamment de mémoire — les modèles axés sur le code, allant de 7 à 34 milliards de paramètres, constituent la fourchette pratique pour la plupart des matériels grand public. Utilisez le calculatrice VRAM pour confirmer que votre GPU peut gérer le modèle cible avant de le télécharger.

Conseils de requête pour une meilleure sortie

• Nommez explicitement les éléments de l’interface utilisateur. « Une liste déroulante pour la sélection de la devise » est plus fiable que « un moyen de choisir une devise ».
• Précisez le style visuel. « Mode sombre, disposition en cartes, coins arrondis » oriente mieux la génération du CSS. En l’absence d’indications stylistiques, les sorties varient fortement d’un modèle à l’autre.
• Nommez les bibliothèques souhaitées. « Utilisez Chart.js pour le diagramme en barres » est plus fiable que d’espérer que le modèle choisisse une bibliothèque appropriée.
• Limitez la portée. Les outils mono-fonction génèrent du code de meilleure qualité. Les applications multi-écrans produisent du code volumineux et plus difficile à itérer, regroupé dans un seul fichier.
• Affinez par messages complémentaires. Une ébauche approximative affinée par trois ou quatre messages ciblés donne généralement de meilleurs résultats qu’un seul prompt très long.

Limitations

• La sortie est limitée par la longueur maximale autorisée par le modèle. Des applications très complexes peuvent être tronquées en milieu de fichier ; réduisez la portée si cela se produit.
• Aucune persistance de session : fermer l’onglet du navigateur entraîne la perte de la conversation. Téléchargez le fichier avant de fermer l’onglet.
• Les bibliothèques dépendantes d’un CDN nécessitent une connexion Internet pour s’afficher correctement lors de l’ouverture locale du fichier.
• Front-end uniquement : aucune logique côté serveur, aucune base de données, aucune authentification dans la sortie générée.

Questions fréquemment posées

DeepSite est-il gratuit à utiliser ?

L’espace public est gratuit, sous réserve des quotas partagés de calcul de Hugging Face. La duplication de l’espace est également gratuite, mais les appels à l’API d’inférence effectués via votre propre compte Hugging Face sont facturés après dépassement du forfait gratuit. Les coûts dépendent du modèle utilisé et restent généralement faibles pour des tâches courtes de génération de code.

Quels modèles DeepSite utilise-t-il ?

La liste des modèles est maintenue par l’auteur de l’espace et évolue dans le temps ; elle a notamment inclus des modèles de la famille Llama, DeepSeek des variantes Coder et des modèles Qwen Coder. Consultez la liste déroulante de l’espace en direct pour connaître les options actuelles — ne vous fiez pas à une liste figée dans une documentation externe.

Puis-je utiliser commercialement la sortie de DeepSite ?

Le code généré lui-même n’est soumis à aucune licence particulière — vous avez fourni la demande, et la sortie est un code fonctionnel. Toutefois, les bibliothèques hébergées sur un CDN incluses par le modèle (Chart.js, Tailwind, etc.) sont soumises à leurs propres licences (généralement MIT ou Apache 2.0). Vérifiez soigneusement les importations depuis un CDN dans le fichier avant toute utilisation commerciale.

Comment DeepSite se compare-t-il aux autres générateurs de code IA ?

La spécificité de DeepSite réside dans sa simplicité d’utilisation immédiate, sa sortie mono-fichier et son aperçu instantané dans le navigateur. D’autres outils comme GitHub Copilot, Cursor ou v0.dev offrent une génération de projets multi-fichiers plus riche, mais exigent un IDE ou un abonnement payant. DeepSite constitue le chemin le plus rapide pour passer d’une idée à un prototype partageable. Pour une comparaison classée des modèles sous-jacents selon leur intelligence et leur coût, consultez le Classement des grands modèles linguistiques (LLM).

L’application générée ne fonctionne pas dans l’aperçu. Que dois-je faire ?

Téléchargez d’abord le fichier et ouvrez-le directement dans votre navigateur — plusieurs API navigateur sont bloquées à l’intérieur de l’iframe sandboxée. Si le problème persiste localement, envoyez plutôt un message complémentaire décrivant précisément le dysfonctionnement (« le graphique ne s’affiche pas », « le clic sur le bouton ne déclenche rien ») plutôt que de régénérer entièrement le code. Si le fichier se termine au milieu d’une balise ou d’un script, la sortie a été tronquée — simplifiez la portée de la demande ou passez à un modèle disposant d’une limite de sortie plus élevée.

Puis-je auto-héberger DeepSite avec un modèle privé ou LLM local?

Oui. Clonez le dépôt, exécutez-le localement avec npm run dev, puis configurez le point de terminaison du modèle pour qu’il pointe vers un serveur d’inférence local. Un modèle de génération de code comportant au moins 7 milliards de paramètres produit une sortie exploitable ; les modèles de 34 milliards de paramètres ou plus améliorent sensiblement la qualité, mais exigent beaucoup plus de VRAM. Vérifiez le calculatrice VRAM par rapport aux spécifications de votre GPU avant de choisir définitivement une taille de modèle.