- DeepSite est un espace Hugging Face gratuit disponible à l'adresse
huggingface.co/spaces/enricoros/deepsiteet qui transforme une simple invite textuelle en une application web HTML complète et autonome. - Aucune installation ni aucun compte requis pour essayer — ouvrez simplement l’URL, décrivez votre application, cliquez sur « Générer », puis obtenez un aperçu en temps réel et un fichier téléchargeable au format
.html. - Le résultat est un fichier unique intégrant le code CSS et JavaScript en ligne ; vous pouvez l’héberger sur Hugging Face Spaces, GitHub Pages, Netlify ou tout autre serveur statique.
- Dupliquez l’espace et ajoutez-y votre propre jeton d’API Hugging Face afin d’éviter les files d’attente et de choisir librement le modèle souhaité.
Hugging Face DeepSite est un générateur d’applications web open source fonctionnant entièrement dans le navigateur. Décrivez l’application que vous souhaitez créer en langage naturel, et DeepSite interroge un grand modèle linguistique pour produire un seul fichier autonome — avec le CSS et le JavaScript intégrés — exécutable immédiatement dans n’importe quel navigateur. Aucun outil de compilation, aucun framework ni aucune dépendance à installer. Le processus est entièrement basé sur le navigateur, ce qui signifie que les utilisateurs Windows, macOS et Linux suivent exactement les mêmes étapes. .html fichier — CSS et JavaScript intégrés — qui s'exécute immédiatement dans n'importe quel navigateur. Aucun outil de compilation, aucun framework, aucune dépendance à installer. Il est entièrement basé sur le navigateur, aussi bien les utilisateurs Windows, macOS que Linux suivent les mêmes étapes.
Ce que génère DeepSite
Chaque sortie générée par DeepSite est un seul fichier.html . Les bibliothèques externes sélectionnées par le modèle — comme Chart.js, Tailwind CSS via CDN ou Alpine.js — sont chargées depuis un lien CDN placé dans la balise <head>et non intégrées (bundled). Cela permet de garder le fichier léger et immédiatement portable.
DeepSite convient particulièrement aux cas suivants :
- Calculatrices interactives et convertisseurs d’unités
- Tableaux de bord de visualisation de données utilisant Chart.js ou des solutions similaires
- Jeux simples dans le navigateur (canvas 2D, jeux de mots)
- Maquettes d’interfaces utilisateur interactives et cliquables
- Outils et utilitaires à usage unique
Il ne constitue pas un remplacement aux applications multi-fichiers React ou Vue. Pour les projets nécessitant une base de données, une authentification ou une gestion d’état complexe, il convient de considérer la sortie de DeepSite comme une ébauche initiale, et non comme un produit finalisé.
Comment utiliser DeepSite
- Ouvrez l’espace. Aller à
huggingface.co/spaces/enricoros/deepsite. Aucune connexion n’est requise sur l’instance publique, bien qu’une file d’attente puisse s’appliquer pendant les périodes de forte demande. - Rédigez votre invite. Dans le champ d’invite, décrivez concrètement l’application souhaitée. Plutôt que « une calculatrice », écrivez plutôt « une calculatrice de pourboire dotée d’un curseur réglable entre 10 % et 30 %, d’un champ pour saisir le montant total de l’addition et d’un affichage du montant à verser par personne ». La précision améliore significativement la qualité du résultat.
- Sélectionnez un modèle. L’espace propose une liste déroulante de modèles. Les options disponibles varient selon les mises à jour effectuées par le mainteneur ; la liste actuelle est affichée directement dans l’interface utilisateur. Pour une comparaison hiérarchisée des modèles sous-jacents en termes de capacité de programmation et de coût, consultez la section Classement des grands modèles linguistiques (LLM).
- Cliquez sur « Générer ». Le modèle transmet progressivement le code HTML vers le volet d’édition situé à gauche. Un aperçu en temps réel s’affiche simultanément dans le volet droit.
- Affinez le résultat à l’aide de messages complémentaires. Utilisez la zone de chat située sous l’aperçu pour demander des ajustements : « passez à un fond sombre », « ajoutez un bouton de réinitialisation », « augmentez la taille de la police pour le résultat affiché ». Le modèle modifie alors le fichier existant plutôt que de le régénérer entièrement.
- Téléchargez ou déployez. Cliquez Télécharger le HTML pour enregistrer le fichier localement, ou cliquez sur Déployer sur Spaces pour le publier comme nouvel espace Hugging Face sous votre compte.
Comprendre l’aperçu en temps réel
Le volet d’aperçu affiche votre HTML à l’intérieur d’un cadre isolé ( iframe) sécurisé. Certaines API navigateur — géolocalisation, accès à la caméra, écriture dans le presse-papiers — peuvent être bloquées par les politiques de sécurité sandbox propres aux iframes 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 afin de tester sans contrainte sandbox.
Déployer votre application
Le Déployer sur Spaces Le bouton « Déployer » gère automatiquement l’ensemble du flux (connexion requise à Hugging Face) :
- Crée un nouvel espace sous votre compte, configuré avec le SDK « Statique » — sans serveur, uniquement hébergement de fichiers.
- Téléverse votre fichier
index.htmlcomme seul élément. - 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 bénéficier de 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.
- Connectez-vous à Hugging Face.
- Ouvrir
huggingface.co/spaces/enricoros/deepsite. - Cliquez sur le menu à trois points (…) dans le coin supérieur droit, puis sélectionnez Dupliquer cet espace.
- Choisissez un nom et une visibilité (publique ou privée), puis cliquez sur Dupliquer l’espace.
- Dans les paramètres de votre espace dupliqué, ajoutez un secret nommé
HF_TOKENcontenant 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 Calculateur de seuil de rentabilité entre hébergement local et utilisation d’une 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 devLes 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 Calculateur de VRAM pour confirmer que votre GPU peut gérer le modèle cible avant de le télécharger.
Conseils pour rédiger des invites efficaces
- 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 Calculateur de VRAM par rapport aux spécifications de votre GPU avant de choisir définitivement une taille de modèle.
