- DeepSite è uno spazio gratuito su Hugging Face disponibile all'indirizzo
huggingface.co/spaces/enricoros/deepsiteche trasforma un prompt testuale in un'applicazione web HTML completa e autosufficiente. - Nessuna installazione né account richiesti per provare il servizio: basta aprire l'URL, descrivere l'app desiderata, cliccare su Genera e ottenere un'anteprima in tempo reale nonché un file scaricabile in formato
.html. - L'output è un singolo file con CSS e JavaScript incorporati (inline); può essere ospitato su Hugging Face Spaces, GitHub Pages, Netlify o qualsiasi altro server statico.
- Duplica lo spazio e aggiungi il tuo token API di Hugging Face per evitare tempi di attesa in coda e scegliere il modello preferito.
Hugging Face DeepSite è un generatore di applicazioni web open source che funziona interamente nel browser. Descrivi l'app desiderata in linguaggio naturale e DeepSite invoca un modello linguistico di grandi dimensioni per produrre un singolo file autosufficiente — con CSS e JavaScript incorporati — eseguibile immediatamente in qualsiasi browser. Nessuno strumento di build, nessun framework, nessuna dipendenza da installare. Essendo completamente basato sul browser, funziona allo stesso modo su Windows, macOS e Linux. .html file — con CSS e JavaScript incorporati — che viene eseguito immediatamente in qualsiasi browser. Nessuno strumento di build, nessun framework, nessuna dipendenza da installare. È interamente basato sul browser, quindi utenti Windows, macOS e Linux seguono gli stessi passaggi.
Cosa genera DeepSite
Ogni output di DeepSite è un singolo file in formato.html . Le librerie esterne scelte dal modello — ad esempio Chart.js, Tailwind CSS tramite CDN o Alpine.js — vengono caricate da un collegamento CDN inserito nell'elemento <head>e non sono incluse nel file. Questo mantiene il file leggero e immediatamente portabile.
DeepSite è particolarmente adatto a:
- Calcolatrici interattive e convertitori di unità di misura
- Dashboard per la visualizzazione dati mediante Chart.js o librerie analoghe
- Semplici giochi per browser (canvas 2D, puzzle di parole)
- Prototipi di interfacce utente e mockup cliccabili
- Strumenti e utility monofunzionali
Non sostituisce applicazioni multi-file basate su React o Vue. Per progetti che richiedono un database, autenticazione o gestione complessa dello stato, l'output di DeepSite va considerato come uno scheletro iniziale, non come un prodotto finito.
Come usare DeepSite
- Apri lo spazio. Vai a
huggingface.co/spaces/enricoros/deepsite. Non è richiesto alcun accesso sull'istanza pubblica, anche se durante le ore di punta potresti dover attendere in coda. - Scrivi il tuo prompt. Nel campo del prompt, descrivi l'app in modo concreto. Invece di scrivere «una calcolatrice», specifica ad esempio «una calcolatrice per le mance con uno slider per la percentuale (10–30%), un campo per l'importo totale del conto e un output che mostri la suddivisione per persona». Maggiore è la specificità, migliore sarà la qualità del risultato.
- Seleziona un modello. Lo spazio mette a disposizione un menu a discesa per la scelta del modello. Le opzioni disponibili variano in base agli aggiornamenti effettuati dal manutentore; l'elenco corrente è visualizzato nell'interfaccia utente. Per un confronto classificato dei modelli sottostanti in termini di capacità di programmazione e costo, consulta la Classifica LLM.
- Clicca su Genera. Il modello trasmette in streaming il codice HTML nel pannello dell'editor sulla sinistra. Un'anteprima in tempo reale viene visualizzata nel pannello di destra.
- Affina il risultato con messaggi successivi. Usa l'area di input chat sotto l'anteprima per richiedere modifiche: «passa a uno sfondo scuro», «aggiungi un pulsante di reset», «usa un carattere più grande per il risultato». Il modello modifica il file esistente anziché rigenerarlo da zero.
- Scarica o distribuisci. Clicca Scarica HTML per salvare il file localmente oppure clicca su Distribuisci su Spaces per pubblicarlo come nuovo spazio su Hugging Face sotto il tuo account.
Comprensione dell'anteprima in tempo reale
Il pannello dell'anteprima esegue il rendering del tuo HTML all'interno di un iframe isolato (sandboxed). iframe. Alcune API del browser — come geolocalizzazione, fotocamera o scrittura negli appunti — potrebbero essere bloccate dalle politiche di sandbox degli iframe nell'ambiente Hugging Face. Se una funzionalità funziona nell'editor ma non nell'anteprima, scarica il file ed aprilo direttamente nel tuo browser per testarlo senza restrizioni di sandbox.
Distribuzione della tua app
Il Distribuisci su Spaces Il pulsante gestisce automaticamente l'intero flusso (richiede l'accesso a Hugging Face):
- Crea un nuovo spazio sotto il tuo account con l'SDK impostato su Statico — nessun server, solo hosting di file.
- Carica il tuo file
index.htmlcome unico file presente nello spazio. - Assegna un URL pubblico al seguente indirizzo:
huggingface.co/spaces/<il-tuo-username>/<nome-spazio>.
Gli spazi statici sono gratuiti. L'app diventa pubblicamente accessibile entro pochi secondi dalla distribuzione. Puoi inoltre ospitare il file ovunque sia possibile servire contenuti statici:
| Piattaforma | Come distribuire | Livello gratuito |
|---|---|---|
| Hugging Face Spaces (Statico) | Usa il pulsante Distribuisci integrato | Sì |
| GitHub Pages | Commit index.html a un repository, abilita Pages nelle Impostazioni | Sì |
| Netlify | Trascina e rilascia il file su netlify.com/drop | Sì |
| Vercel | Esegui vercel --prod da una directory contenente il file | Sì (si applicano limiti) |
| Qualsiasi server web | Copia nella root del documento e servilo come HTML statico | Variabile |
Duplicazione dello spazio per limiti di utilizzo più elevati
Lo Space pubblico è condiviso; nei periodi di maggiore carico potresti dover attendere in coda. Duplicandolo ottieni un'istanza privata eseguita sul tuo account Hugging Face, con la propria quota API.
- Accedi a Hugging Face.
- Apri
huggingface.co/spaces/enricoros/deepsite. - Fai clic sul menu a tre puntini (…) nell’angolo in alto a destra e seleziona Duplica questo Space.
- Scegli un nome e la visibilità (pubblico o privato), quindi fai clic su Duplica Space.
- Nelle impostazioni del tuo Space duplicato, aggiungi un segreto denominato
HF_TOKENche contenga un token API di Hugging Face con accesso all’Inference API. DeepSite utilizzerà questo token per tutte le chiamate ai modelli.
Se stai decidendo se affidarti allo Space pubblico gratuito oppure pagare per la tua quota di inferenza dedicata, il Calcolatore del punto di pareggio tra auto-hosting e utilizzo di API può quantificare la differenza di costo in base al volume previsto di generazioni.
Esecuzione locale di DeepSite
Il codice sorgente di DeepSite è un normale repository git ospitato su Hugging Face. Puoi clonarlo ed eseguirlo localmente contro un server di inferenza locale (Ollama, vLLM, llama.cpp con un endpoint compatibile con OpenAI).
git clone https://huggingface.co/spaces/enricoros/deepsite
cd deepsite
npm install
npm run devI nomi delle variabili d’ambiente per l’endpoint del modello possono cambiare tra le versioni; controlla il file README.md o qualsiasi file.env.example dopo aver effettuato il clone, invece di fare affidamento su un nome di variabile fisso. Per eseguire localmente un modello capace di generazione di codice, verifica innanzitutto se la tua GPU dispone di memoria sufficiente: i modelli focalizzati sul codice con 7B–34B parametri rappresentano l’intervallo pratico per la maggior parte dell’hardware consumer. Usa il Calcolatore VRAM per verificare che la tua GPU possa gestire il modello prescelto prima di scaricarlo.
Consigli sui prompt per ottenere risultati migliori
- Nomina esplicitamente gli elementi dell’interfaccia utente. «Un menu a discesa per la selezione della valuta» è più affidabile di «un modo per scegliere una valuta».
- Specifica lo stile visivo. «Modalità scura, layout basato su card, angoli arrotondati» orienta meglio la generazione del CSS. Senza indicazioni stilistiche, l’output varia notevolmente tra i diversi modelli.
- Indica le librerie che desideri utilizzare. «Usa Chart.js per il grafico a barre» è più affidabile che sperare che il modello scelga autonomamente una libreria adeguata.
- Mantieni l’ambito ridotto. Gli strumenti monofunzionali generano codice di qualità superiore. Le applicazioni multischermo producono codice sovrabbondante e più difficile da iterare, tutto in un singolo file.
- Affina con messaggi successivi. Una bozza iniziale migliorata da tre o quattro messaggi mirati produce generalmente risultati migliori rispetto a un unico prompt molto lungo.
Limiti
- L’output è limitato dalla lunghezza massima consentita dal modello. Applicazioni molto complesse potrebbero essere troncate a metà file; in tal caso, riduci l’ambito della richiesta.
- Nessuna persistenza della sessione: chiudendo la scheda del browser si perde l’intera conversazione. Scarica il file prima di chiudere.
- Le librerie dipendenti da CDN richiedono una connessione Internet per essere rese correttamente quando si apre il file localmente.
- Solo frontend: nessuna logica lato server, nessun database, nessuna autenticazione nell’output generato.
Domande frequenti
DeepSite è gratuito da usare?
Lo Space pubblico è gratuito, soggetto ai limiti di calcolo condivisi di Hugging Face. Anche la duplicazione dello Space è gratuita, ma le chiamate all’Inference API effettuate tramite il tuo account Hugging Face sono fatturate dopo aver esaurito la quota gratuita. I costi dipendono dal modello e sono tipicamente bassi per attività brevi di generazione di codice.
Quali modelli utilizza DeepSite?
L’elenco dei modelli è gestito dall’autore dello Space e cambia nel tempo; tra le versioni utilizzate figurano modelli della famiglia Llama, DeepSeek varianti Coder e modelli Qwen Coder. Controlla il menu a discesa nello Space attivo per visualizzare le opzioni disponibili — non fare affidamento su alcun elenco fisso riportato nella documentazione esterna.
Posso utilizzare commercialmente l’output di DeepSite?
Il codice generato non è soggetto a una licenza intrinseca: sei tu ad aver fornito il prompt e l’output è codice funzionale. Tuttavia, le librerie ospitate su CDN incluse dal modello (Chart.js, Tailwind, ecc.) sono soggette alle proprie licenze (tipicamente MIT o Apache 2.0). Verifica attentamente tutti gli import da CDN presenti nel file prima di un eventuale utilizzo commerciale.
Come si confronta DeepSite con altri generatori di codice AI?
La nicchia di DeepSite è quella di offrire un output zero-configurazione, in un singolo file, con anteprima istantanea direttamente nel browser. Strumenti come GitHub Copilot, Cursor e v0.dev offrono generazione di progetti multi-file più ricca, ma richiedono un IDE o un abbonamento a pagamento. DeepSite rappresenta il percorso più rapido dall’idea al prototipo condivisibile. Per una classifica dei modelli sottostanti in base a intelligenza e costo, consulta il Classifica LLM.
L’app generata non funziona nell’anteprima. Cosa devo fare?
Scarica prima il file e aprilo direttamente nel tuo browser — diversi API del browser sono bloccati all’interno dell’iframe sandboxed. Se il problema persiste anche in locale, invia un messaggio successivo che descriva con precisione l’anomalia riscontrata («il grafico non viene visualizzato», «il clic sul pulsante non ha alcun effetto»), anziché rigenerare il codice da zero. Se il file termina a metà tag o a metà script, l’output è stato troncato: semplifica l’ambito della richiesta oppure passa a un modello con un limite di output più elevato.
Posso auto-ospitare DeepSite con un modello privato o LLM locale?
Sì. Clona il repository, eseguilo localmente con npm run dev, e configura l’endpoint del modello in modo che punti a un server di inferenza locale. Un modello di generazione di codice con almeno 7 miliardi di parametri produce un output utilizzabile; modelli da 34 miliardi di parametri o superiori migliorano sensibilmente la qualità, ma richiedono molta più VRAM. Controlla il Calcolatore VRAM rispetto alle specifiche della tua GPU prima di scegliere la dimensione del modello.
