- DeepSite é um espaço gratuito do Hugging Face em
huggingface.co/spaces/enricoros/deepsiteque transforma um prompt de texto em um aplicativo web HTML completo e autossuficiente. - Nenhuma instalação nem conta necessária para testar — basta abrir a URL, descrever seu aplicativo, clicar em Gerar e obter uma pré-visualização em tempo real e um arquivo
.htmlpara download. - A saída é um único arquivo com CSS e JavaScript embutidos; você pode hospedá-lo no Hugging Face Spaces, GitHub Pages, Netlify ou qualquer servidor estático.
- Duplicar o espaço e adicionar seu próprio token de API do Hugging Face permite evitar filas de espera e escolher o modelo preferido.
O Hugging Face DeepSite é um gerador de aplicativos web de código aberto, executado inteiramente no navegador. Descreva o aplicativo desejado em texto simples, e o DeepSite invoca um modelo de linguagem grande para gerar um único arquivo autossuficiente — com CSS e JavaScript embutidos — que é executado imediatamente em qualquer navegador. Sem ferramentas de build, sem frameworks e sem dependências para instalar. Como funciona totalmente no navegador, usuários do Windows, macOS e Linux seguem exatamente os mesmos passos. .html arquivo
O que o DeepSite Gera
Cada saída do DeepSite é um único.html arquivo. Bibliotecas externas escolhidas pelo modelo — como Chart.js, Tailwind CSS via CDN ou Alpine.js — são carregadas por meio de um link CDN na tag <head>e não são incorporadas (bundled). Isso mantém o arquivo pequeno e prontamente portátil.
O DeepSite é especialmente adequado para:
- Calculadoras interativas e conversores de unidades
- Painéis de visualização de dados usando Chart.js ou tecnologias semelhantes
- Jogos simples para navegador (canvas 2D, quebra-cabeças de palavras)
- Protótipos de interfaces de usuário e maquetes clicáveis
- Ferramentas e utilitários de propósito único
Não é uma substituição para aplicações multiarquivo em React ou Vue. Projetos que exigem banco de dados, autenticação ou gerenciamento complexo de estado devem tratar a saída do DeepSite como um esqueleto inicial, não como um produto final.
Como Usar o DeepSite
- Abra o espaço. Ir para
huggingface.co/spaces/enricoros/deepsite. Nenhum login é necessário na instância pública, embora você possa entrar em uma fila durante horários de pico. - Escreva seu prompt. No campo de prompt, descreva o aplicativo de forma concreta. Em vez de dizer apenas “uma calculadora”, escreva algo como “uma calculadora de gorjetas com um controle deslizante para a porcentagem (10–30%), um campo para o valor total da conta e uma saída mostrando o valor por pessoa”. Maior especificidade resulta em melhor qualidade.
- Selecione um modelo. O espaço exibe um menu suspenso para seleção de modelo. As opções variam conforme o mantenedor atualiza o espaço; a lista atual é exibida na interface do usuário. Para uma comparação classificada dos modelos subjacentes quanto à capacidade de programação e custo, consulte a Ranking de LLMs.
- Clique em Gerar. O modelo transmite o HTML em tempo real para o painel do editor à esquerda. Uma pré-visualização em tempo real é renderizada no painel à direita.
- Itere com mensagens complementares. Use a caixa de entrada de chat abaixo da pré-visualização para refinar o resultado: “mudar para fundo escuro”, “adicionar um botão de reinicialização”, “usar fonte maior para o resultado”. O modelo edita o arquivo existente, em vez de regenerá-lo do zero.
- Baixe ou implante. Clique Baixar HTML para salvar o arquivo localmente ou clique em Implantar no Spaces para publicá-lo como um novo espaço do Hugging Face sob sua conta.
Entendendo a Pré-visualização em Tempo Real
O painel de pré-visualização renderiza seu HTML dentro de um iframe isolado (sandboxed). iframe. Algumas APIs do navegador — como geolocalização, câmera e gravação na área de transferência — podem ser bloqueadas pelas políticas de sandbox do iframe no ambiente do Hugging Face. Se um recurso funcionar no editor, mas não na pré-visualização, baixe o arquivo e abra-o diretamente no seu navegador para testá-lo sem restrições de sandbox.
Implantando Seu Aplicativo
O Implantar no Spaces O botão lida automaticamente com todo o fluxo (exige que você esteja conectado ao Hugging Face):
- Cria um novo espaço sob sua conta com o SDK configurado como Estático — sem servidor, apenas hospedagem de arquivos.
- Envia seu arquivo
index.htmlcomo único arquivo. - Atribui uma URL pública em
huggingface.co/spaces/<seu-nome-de-usuário>/<nome-do-espaco>.
Espaços Estáticos são gratuitos. O aplicativo fica acessível publicamente em segundos após a implantação. Você também pode hospedar o arquivo em qualquer serviço que sirva conteúdo estático:
| Plataforma | Como implantar | Versão gratuita |
|---|---|---|
| Hugging Face Spaces (Estático) | Use o botão de implantação integrado | Sim |
| GitHub Pages | Commit index.html a um repositório e habilite o Pages nas Configurações | Sim |
| Netlify | Arraste e solte o arquivo em netlify.com/drop | Sim |
| Vercel | Executar vercel --prod a partir de um diretório que contenha o arquivo | Sim (valem limites) |
| Qualquer servidor web | Copie para a raiz do documento e sirva como HTML estático | Varia |
Duplicando o Espaço para Limites de Taxa Mais Altos
O Space público é compartilhado; em períodos de alta demanda, você pode entrar em fila. Duplicá-lo lhe dá uma instância privada executada na sua própria conta do Hugging Face, com sua própria cota de API.
- Faça login no Hugging Face.
- Abra
huggingface.co/spaces/enricoros/deepsite. - Clique no menu de três pontos (…) no canto superior direito e selecione Duplicar este Space.
- Escolha um nome e a visibilidade (público ou privado), depois clique em Duplicar Space.
- Nas configurações do seu Space duplicado, adicione um segredo chamado
HF_TOKENcontendo um token da API do Hugging Face com acesso à API de Inferência. O DeepSite usará esse token para todas as chamadas aos modelos.
Se você estiver decidindo entre confiar no Space público gratuito ou pagar por sua própria cota de inferência, a calculadora de ponto de equilíbrio entre hospedagem local e uso de API calculadora de custos pode quantificar a diferença de custo com base no volume esperado de gerações.
Executando o DeepSite Localmente
O código-fonte do DeepSite é um repositório git padrão hospedado no Hugging Face. Você pode cloná-lo e executá-lo localmente contra um servidor de inferência local (Ollama, vLLM, llama.cpp com um endpoint compatível com OpenAI).
git clone https://huggingface.co/spaces/enricoros/deepsite
cd deepsite
npm install
npm run devOs nomes das variáveis de ambiente para o endpoint do modelo podem mudar entre versões; verifique o README.md ou qualquer arquivo.env.example após clonar, em vez de confiar em um nome de variável fixo. Para executar localmente um modelo capaz de geração de código, verifique primeiro se sua GPU possui memória suficiente — modelos voltados para código com 7B–34B de parâmetros representam a faixa prática para a maioria dos hardwares consumidores. Use a Calculadora de VRAM calculadora de VRAM para confirmar se sua GPU suporta o modelo desejado antes de baixá-lo.
Dicas de Prompt para Melhor Resultado
- Nomeie explicitamente os elementos da interface do usuário. ‘Um menu suspenso para seleção de moeda’ é mais confiável do que ‘uma maneira de escolher uma moeda’.
- Especifique o estilo visual. ‘Modo escuro, layout baseado em cartões, cantos arredondados’ orienta melhor a geração de CSS. Sem dicas de estilo, a saída varia amplamente entre modelos.
- Nomeie as bibliotecas que deseja utilizar. ‘Use Chart.js para o gráfico de barras’ é mais confiável do que esperar que o modelo escolha uma biblioteca adequada.
- Mantenha o escopo pequeno. Ferramentas de propósito único geram resultados melhores. Aplicações multi-tela produzem código excessivamente volumoso e mais difícil de iterar, tudo em um único arquivo.
- Refine com mensagens subsequentes. Um rascunho inicial refinado por três ou quatro mensagens direcionadas geralmente supera um prompt gigantesco.
Limitações
- A saída é limitada pelo comprimento máximo de saída do modelo. Aplicações muito complexas podem ser truncadas no meio de um arquivo; reduza o escopo caso isso ocorra.
- Não há persistência de sessão: fechar a guia do navegador perde toda a conversa. Faça o download do arquivo antes de fechá-la.
- Bibliotecas dependentes de CDN exigem conexão à internet para renderizar corretamente ao abrir o arquivo localmente.
- Apenas front-end: sem lógica no lado do servidor, sem banco de dados e sem autenticação na saída gerada.
Perguntas frequentes
O DeepSite é gratuito para uso?
O Space público é gratuito, sujeito às cotas compartilhadas de computação do Hugging Face. Duplicar o Space também é gratuito, mas as chamadas à API de inferência contra sua própria conta do Hugging Face são cobradas após o limite gratuito. Os custos dependem do modelo e costumam ser baixos para tarefas curtas de geração de código.
Quais modelos o DeepSite utiliza?
A lista de modelos é mantida pelo autor do Space e muda ao longo do tempo; versões anteriores incluíram modelos da família Llama, DeepSeek variantes Coder e modelos Qwen Coder. Verifique o menu suspenso no Space em execução para ver as opções atuais — não confie em nenhuma lista fixa em documentação externa.
Posso usar a saída do DeepSite comercialmente?
O código gerado em si não possui licença inerente — você forneceu o prompt e a saída é código funcional. No entanto, bibliotecas hospedadas em CDN incluídas pelo modelo (Chart.js, Tailwind etc.) possuem suas próprias licenças (geralmente MIT ou Apache 2.0). Revise quaisquer importações de CDN no arquivo antes de usá-lo comercialmente.
Como o DeepSite se compara a outros geradores de código por IA?
O nicho do DeepSite é a geração zero-configuração de um único arquivo com pré-visualização instantânea no navegador. Ferramentas como GitHub Copilot, Cursor e v0.dev oferecem geração de projetos multi-arquivo mais rica, mas exigem um IDE ou assinatura paga. O DeepSite é o caminho mais rápido da ideia até um protótipo compartilhável. Para uma comparação classificada dos modelos subjacentes quanto à inteligência e custo, consulte a Ranking de LLMs.
O aplicativo gerado apresenta falhas na pré-visualização. O que devo fazer?
Baixe o arquivo e abra-o diretamente no seu navegador primeiro — diversos APIs do navegador são bloqueados dentro do iframe sandbox. Se ainda estiver com falhas localmente, envie uma mensagem subsequente descrevendo o problema específico (‘o gráfico não é renderizado’, ‘o clique no botão não faz nada’), em vez de regenerar do zero. Se o arquivo terminar no meio de uma tag ou de um script, a saída foi truncada — simplifique o escopo do prompt ou mude para um modelo com limite maior de saída.
Posso auto-hospedar o DeepSite com um modelo privado ou LLM local?
Sim. Clone o repositório, execute-o localmente com npm run dev, e configure o endpoint do modelo para apontar para um servidor de inferência local. Um modelo de geração de código com pelo menos 7B de parâmetros produz saídas utilizáveis; modelos de 34B+ melhoram significativamente a qualidade, mas exigem muito mais VRAM. Consulte a Calculadora de VRAM calculadora de VRAM comparando-a com as especificações da sua GPU antes de escolher um tamanho de modelo.
