- DeepSite is a free Hugging Face Space at
huggingface.co/spaces/enricoros/deepsitethat turns a text prompt into a complete, self-contained HTML web app. - No installation, no account required to try — open the URL, describe your app, click Generate, get a live preview and a downloadable
.htmlfile. - The output is a single file with inline CSS and JavaScript; host it on Hugging Face Spaces, GitHub Pages, Netlify, or any static server.
- Duplicate the Space and add your own Hugging Face API token to avoid queue times and pick your preferred model.
Hugging Face DeepSite is an open-source, browser-based web app generator. Describe the app you want in plain text, and DeepSite calls a large language model to produce a single self-contained .html file — CSS and JavaScript inlined — that runs immediately in any browser. No build tools, no framework, no dependencies to install. It is entirely browser-based, so Windows, macOS, and Linux users follow the same steps.
What DeepSite Generates
Every DeepSite output is one.html file. External libraries the model chooses to include — Chart.js, Tailwind CSS via CDN, Alpine.js — are loaded from a CDN link in the <head>, not bundled. This keeps the file small and immediately portable.
DeepSite is well-suited for:
- Interactive calculators and unit converters
- Data visualisation dashboards using Chart.js or similar
- Simple browser games (2D canvas, word puzzles)
- Prototype UIs and clickable mockups
- Single-purpose tools and utilities
It is not a replacement for multi-file React or Vue applications. Projects that need a database, authentication, or complex state management should treat DeepSite output as a starting scaffold, not a finished product.
How to Use DeepSite
- Open the Space. انتقل إلى
huggingface.co/spaces/enricoros/deepsite. No login is required on the public instance, though you may enter a queue during peak hours. - Write your prompt. In the prompt field, describe the app concretely. Instead of “a calculator,” write “a tip calculator with a slider for percentage (10–30%), a field for bill total, and a per-person split output.” Specificity drives quality.
- Select a model. The Space exposes a model dropdown. Options vary as the maintainer updates the Space; the current list is shown in the UI. For a ranked comparison of the underlying models by coding capability and cost, see the لوحة تصنيف النماذج اللغوية الكبيرة (LLM).
- Click Generate. The model streams HTML into the editor pane on the left. A live preview renders in the right pane in real time.
- Iterate with follow-up messages. Use the chat input below the preview to refine: “switch to a dark background,” “add a reset button,” “use larger font for the result.” The model edits the existing file rather than regenerating from scratch.
- Download or deploy. انقر Download HTML to save the file locally, or click Deploy to Spaces to publish it as a new Hugging Face Space under your account.
Understanding the Live Preview
The preview panel renders your HTML inside a sandboxed iframe. Some browser APIs — geolocation, camera, clipboard write — may be blocked by iframe sandbox policies in the Hugging Face environment. If a feature works in the editor but not the preview, download the file and open it directly in your browser to test without the sandbox.
Deploying Your App
الـ Deploy to Spaces button handles the full flow automatically (requires you to be logged in to Hugging Face):
- Creates a new Space under your account with the SDK set to Static — no server, just file hosting.
- Uploads your
index.htmlas the sole file. - Assigns a public URL at
huggingface.co/spaces/<your-username>/<space-name>.
Static Spaces are free. The app is publicly accessible within seconds of deployment. You can also host the file anywhere that serves static content:
| المنصة | How to deploy | الطبقة المجانية |
|---|---|---|
| Hugging Face Spaces (Static) | Use the built-in Deploy button | نعم |
| GitHub Pages | Commit index.html to a repo, enable Pages in Settings | نعم |
| Netlify | Drag-and-drop the file at netlify.com/drop | نعم |
| Vercel | تشغيل vercel --prod from a directory containing the file | Yes (limits apply) |
| Any web server | Copy to document root, serve as static HTML | متفاوتة |
Duplicating the Space for Higher Rate Limits
The public Space is shared; during busy periods you may queue. Duplicating it gives you a private instance running on your own Hugging Face account with its own API quota.
- Log in to Hugging Face.
- افتح
huggingface.co/spaces/enricoros/deepsite. - Click the three-dot menu (…) in the top-right corner and select Duplicate this Space.
- Choose a name and visibility (public or private), then click Duplicate Space.
- In your duplicated Space’s settings, add a secret named
HF_TOKENcontaining a Hugging Face API token with Inference API access. DeepSite will use this token for all model calls.
If you are deciding between relying on the free public Space and paying for your own inference quota, the حاسبة نقطة التعادل بين الاستضافة المحلية وواجهة برمجة التطبيقات (API) can quantify the cost difference based on your expected generation volume.
Running DeepSite Locally
DeepSite’s source is a standard git repository hosted on Hugging Face. You can clone and run it locally against a local inference server (Ollama, vLLM, llama.cpp with an OpenAI-compatible endpoint).
git clone https://huggingface.co/spaces/enricoros/deepsite
cd deepsite
npm install
npm run devEnvironment variable names for the model endpoint may change between versions; check the Space’s README.md or any.env.example file after cloning rather than relying on a fixed variable name. To run a capable code-generation model locally, check whether your GPU has enough memory first — code-focused models at 7B–34B parameters are the practical range for most consumer hardware. Use the حاسبة الذاكرة VRAM to confirm your GPU can handle your target model before downloading it.
Prompt Tips for Better Output
- Name UI elements explicitly. “A dropdown for currency selection” is more reliable than “a way to pick a currency.”
- Specify the visual style. “Dark mode, card-based layout, rounded corners” steers the CSS. Without style hints, output varies widely between models.
- Name the libraries you want. “Use Chart.js for the bar chart” is more reliable than hoping the model picks an appropriate library.
- Keep scope small. Single-purpose tools generate well. Multi-screen applications produce bloated, harder-to-iterate code in a single file.
- Refine with follow-ups. A rough draft refined by three or four targeted messages usually beats one giant prompt.
القيود
- Output is bounded by the model’s maximum output length. Very complex apps may be truncated mid-file; reduce scope if this happens.
- No session persistence: closing the browser tab loses the conversation. Download the file before closing.
- CDN-dependent libraries require an internet connection to render correctly when opening the file locally.
- Front-end only: no server-side logic, no database, no authentication in the generated output.
الأسئلة الشائعة
Is DeepSite free to use?
The public Space is free subject to Hugging Face’s shared compute quotas. Duplicating the Space is also free, but inference API calls against your own Hugging Face account are billed after the free tier. Costs are model-dependent and typically low for short code-generation tasks.
What models does DeepSite use?
The model list is maintained by the Space author and changes over time; versions have included Llama-family models, DeepSeek Coder variants, and Qwen Coder models. Check the dropdown in the live Space for the current options — do not rely on any fixed list in external documentation.
Can I use DeepSite output commercially?
The generated code itself carries no inherent license — you supplied the prompt and the output is functional code. However, CDN-hosted libraries included by the model (Chart.js, Tailwind, etc.) carry their own licenses (typically MIT or Apache 2.0). Audit any CDN imports in the file before commercial use.
How does DeepSite compare to other AI code generators?
DeepSite’s niche is zero-setup, single-file output with an instant browser preview. Tools like GitHub Copilot, Cursor, and v0.dev offer richer multi-file project generation but require an IDE or paid subscription. DeepSite is the fastest path from idea to shareable prototype. For a ranked view of the underlying models by intelligence and cost, see the لوحة تصنيف النماذج اللغوية الكبيرة (LLM).
The generated app is broken in the preview. What should I do?
Download the file and open it directly in your browser first — several browser APIs are blocked inside the sandboxed iframe. If it is still broken locally, send a follow-up message describing the specific issue (“the chart does not render,” “the button click does nothing”) rather than regenerating from scratch. If the file ends mid-tag or mid-script, the output was truncated — simplify the prompt scope or switch to a model with a higher output limit.
Can I self-host DeepSite with a private or نموذج لغوي محلي (LLM)?
Yes. Clone the repository, run it locally with npm run dev, and configure the model endpoint to point at a local inference server. A code-generation model with at least 7B parameters produces usable output; 34B+ models improve quality substantially but demand significantly more VRAM. Check the حاسبة الذاكرة VRAM against your GPU spec before committing to a model size.
