- DeepSite ist ein kostenloser Hugging Face Space unter
huggingface.co/spaces/enricoros/deepsiteder aus einer Textanfrage eine vollständige, eigenständige HTML-Web-Anwendung erzeugt. - Zum Ausprobieren ist weder eine Installation noch ein Benutzerkonto erforderlich – öffnen Sie einfach die URL, beschreiben Sie Ihre Anwendung, klicken Sie auf „Generieren“ und erhalten Sie eine Live-Vorschau sowie eine herunterladbare
.html-Datei. - Die Ausgabe ist eine einzelne Datei mit inline eingebettetem CSS und JavaScript; sie kann auf Hugging Face Spaces, GitHub Pages, Netlify oder jedem beliebigen statischen Server gehostet werden.
- Duplizieren Sie den Space und fügen Sie Ihr eigenes Hugging Face-API-Token hinzu, um Warteschlangenzeiten zu vermeiden und das bevorzugte Modell auszuwählen.
Hugging Face DeepSite ist ein quelloffener, browserbasierter Web-App-Generator. Beschreiben Sie die gewünschte Anwendung in einfacher Sprache, und DeepSite ruft ein großes Sprachmodell auf, um eine einzige, eigenständige .html -Datei zu erzeugen – mit inline eingebettetem CSS und JavaScript –, die sofort in jedem Browser ausgeführt werden kann. Es sind keine Build-Tools, kein Framework und keine zu installierenden Abhängigkeiten erforderlich. Da DeepSite vollständig im Browser läuft, folgen Nutzer von Windows, macOS und Linux denselben Schritten.
Was DeepSite generiert
Jede DeepSite-Ausgabe ist eine einzelne.html -Datei. Externe Bibliotheken, die das Modell einbinden möchte – z. B. Chart.js, Tailwind CSS über CDN oder Alpine.js – werden über einen CDN-Link im <head>-Element geladen, nicht gebündelt. Dadurch bleibt die Datei klein und sofort portabel.
DeepSite eignet sich besonders gut für:
- Interaktive Rechner und Umrechnungstools
- Datenvisualisierungs-Dashboards mit Chart.js oder ähnlichen Bibliotheken
- Einfache Browser-Spiele (2D-Canvas, Worträtsel)
- Prototypen von Benutzeroberflächen und anklickbare Mockups
- Einzelzweck-Tools und Hilfsprogramme
DeepSite ersetzt jedoch keine mehrdateibasierten React- oder Vue-Anwendungen. Projekte mit Datenbankanbindung, Authentifizierung oder komplexem State-Management sollten die DeepSite-Ausgabe lediglich als Startgerüst betrachten, nicht als fertiges Produkt.
So verwenden Sie DeepSite
- Öffnen Sie den Space. Gehe zu
huggingface.co/spaces/enricoros/deepsiteFür die öffentliche Instanz ist keine Anmeldung erforderlich, allerdings können Sie während Spitzenzeiten in eine Warteschlange gelangen. - Verfassen Sie Ihren Prompt. Geben Sie im Eingabefeld eine konkrete Beschreibung der gewünschten Anwendung an. Statt lediglich „ein Rechner“ zu schreiben, formulieren Sie beispielsweise: „Ein Trinkgeld-Rechner mit einem Schieberegler für den Prozentsatz (10–30 %), einem Feld für den Gesamtbetrag der Rechnung und einer Ausgabe für die Aufteilung pro Person.“ Je präziser die Beschreibung, desto besser die Ergebnisqualität.
- Wählen Sie ein Modell aus. Der Space bietet ein Dropdown-Menü zur Auswahl des Modells. Die verfügbaren Optionen ändern sich, sobald der Betreiber den Space aktualisiert; die aktuelle Liste wird in der Benutzeroberfläche angezeigt. Für einen vergleichenden Überblick der zugrundeliegenden Modelle nach Programmierfähigkeit und Kosten siehe die LLM-Leaderboard.
- Klicken Sie auf „Generieren“. Das Modell streamt den HTML-Code in das linke Editor-Fenster. Gleichzeitig wird eine Live-Vorschau in Echtzeit im rechten Fenster gerendert.
- Verbessern Sie das Ergebnis durch Folgeanfragen. Nutzen Sie das Chat-Eingabefeld unterhalb der Vorschau, um gezielt nachzubessern: „Wechsle zu einem dunklen Hintergrund“, „Füge einen Zurücksetzen-Button hinzu“, „Verwende eine größere Schriftgröße für das Ergebnis.“ Das Modell bearbeitet dabei die bestehende Datei, statt sie komplett neu zu generieren.
- Herunterladen oder bereitstellen. Klicken HTML herunterladen um die Datei lokal zu speichern, oder klicken Sie auf In Spaces bereitstellen , um sie als neuen Hugging Face Space unter Ihrem Konto zu veröffentlichen.
Verständnis der Live-Vorschau
Das Vorschaufeld rendert Ihr HTML innerhalb eines sandboxed iframe-Elements. Einige Browser-APIs – wie Geolocation, Kamera oder Clipboard-Schreibzugriff – können durch die Sandbox-Richtlinien der Hugging Face-Umgebung blockiert werden. Funktioniert eine Funktion im Editor, aber nicht in der Vorschau, laden Sie die Datei herunter und öffnen Sie sie direkt in Ihrem Browser, um sie ohne Sandbox zu testen.
Bereitstellung Ihrer Anwendung
Der In Spaces bereitstellen Die Schaltfläche übernimmt den gesamten Bereitstellungsprozess automatisch (Anmeldung bei Hugging Face erforderlich):
- Erstellt einen neuen Space unter Ihrem Konto mit dem SDK-Einstellungstyp Statisch – ohne Server, nur Datei-Hosting.
- Lädt Ihre
index.html-Datei als einzige Datei hoch. - Weist eine öffentliche URL zu unter
huggingface.co/spaces/<Ihr-Benutzername>/<Space-Name>.
Statische Spaces sind kostenlos. Die Anwendung ist innerhalb weniger Sekunden nach der Bereitstellung öffentlich zugänglich. Sie können die Datei zudem auf jedem beliebigen statischen Hosting-Dienst bereitstellen:
| Plattform | So stellen Sie bereit | Kostenlose Stufe |
|---|---|---|
| Hugging Face Spaces (statisch) | Verwenden Sie die integrierte Bereitstellungsschaltfläche | Ja |
| GitHub Pages | Commit index.html in ein Repository, aktivieren Sie Pages in den Einstellungen | Ja |
| Netlify | Ziehen Sie die Datei per Drag-and-Drop auf netlify.com/drop | Ja |
| Vercel | Ausführen vercel --prod aus einem Verzeichnis, das die Datei enthält | Ja (Einschränkungen gelten) |
| Jeder Webserver | Kopieren Sie die Datei in das Dokumenten-Stammverzeichnis und stellen Sie sie als statische HTML-Datei bereit | Je nach Modell |
Duplizierung des Spaces für höhere Ratenlimits
Der öffentliche Space ist gemeinsam genutzt; während starker Auslastung kann es zu Warteschlangen kommen. Durch Duplizierung erhalten Sie eine private Instanz, die auf Ihrem eigenen Hugging Face-Konto läuft und über ihr eigenes API-Kontingent verfügt.
- Melden Sie sich bei Hugging Face an.
- Öffnen
huggingface.co/spaces/enricoros/deepsite. - Klicken Sie im rechten oberen Eck auf das Dreipunkt-Menü (…) und wählen Sie Diesen Space duplizieren.
- Wählen Sie einen Namen und die Sichtbarkeit (öffentlich oder privat) und klicken Sie dann auf Space duplizieren.
- Fügen Sie in den Einstellungen Ihres duplizierten Spaces ein Geheimnis namens
HF_TOKENhinzu, das ein Hugging Face-API-Token mit Zugriff auf die Inference-API enthält. DeepSite verwendet dieses Token für alle Modellaufrufe.
Wenn Sie zwischen der Nutzung des kostenlosen öffentlichen Spaces und der Bezahlung eines eigenen Inference-Kontingents entscheiden müssen, kann der Selbsthosting- versus-API-Kosten-Grenzwert-Rechner die Kostenunterschiede anhand Ihres erwarteten Generierungsvolumens quantifizieren.
Lokaler Betrieb von DeepSite
Der Quellcode von DeepSite ist ein standardmäßiges Git-Repository, das auf Hugging Face gehostet wird. Sie können ihn klonen und lokal gegen einen lokalen Inferenzserver ausführen (z. B. Ollama, vLLM oder llama.cpp mit einer OpenAI-kompatiblen Schnittstelle).
git clone https://huggingface.co/spaces/enricoros/deepsite
cd deepsite
npm install
npm run devDie Namen der Umgebungsvariablen für den Modellendpunkt können sich zwischen Versionen ändern; prüfen Sie daher nach dem Klonen am besten die Datei README.md oder eine.env.example -Datei, statt sich auf einen festen Variablennamen zu verlassen. Um ein leistungsfähiges Code-Generierungsmodell lokal auszuführen, überprüfen Sie zunächst, ob Ihre GPU über ausreichend Speicher verfügt – codeorientierte Modelle mit 7B bis 34B Parametern liegen im praktischen Bereich für die meisten Consumer-Hardware. VRAM-Rechner Verwenden Sie den
Tipps für effektive Prompts
- Benennen Sie UI-Elemente explizit. ‚Ein Dropdown-Menü zur Währungsauswahl‘ ist zuverlässiger als ‚eine Möglichkeit, eine Währung auszuwählen‘.
- Geben Sie den visuellen Stil an. ‚Dark Mode, kartenbasiertes Layout, abgerundete Ecken‘ lenkt die CSS-Generierung. Ohne Stilhinweise variiert die Ausgabe stark zwischen verschiedenen Modellen.
- Nennen Sie die gewünschten Bibliotheken. ‚Verwenden Sie Chart.js für das Balkendiagramm‘ ist zuverlässiger, als darauf zu hoffen, dass das Modell eine geeignete Bibliothek auswählt.
- Halten Sie den Umfang klein. Einzweck-Tools generieren gut. Multiscreen-Anwendungen erzeugen oft aufgeblähten, schwerer iterierbaren Code in einer einzigen Datei.
- Verfeinern Sie die Ergebnisse mit Folgeanfragen. Ein Rohentwurf, der durch drei oder vier gezielte Nachrichten verfeinert wird, schlägt in der Regel einen einzigen umfangreichen Prompt.
Einschränkungen
- Die Ausgabe ist durch die maximale Ausgabelänge des Modells begrenzt. Sehr komplexe Anwendungen können mitten in einer Datei abgeschnitten werden; reduzieren Sie in diesem Fall den Umfang.
- Keine Sitzungspersistenz: Das Schließen des Browser-Tabs führt zum Verlust der Konversation. Laden Sie die Datei vor dem Schließen herunter.
- Bibliotheken, die von einem CDN abhängen, benötigen eine Internetverbindung, um beim lokalen Öffnen der Datei korrekt gerendert zu werden.
- Nur Frontend: Keine serverseitige Logik, keine Datenbank, keine Authentifizierung in der generierten Ausgabe.
Häufig gestellte Fragen
Ist DeepSite kostenlos nutzbar?
Der öffentliche Space ist kostenlos, unterliegt jedoch den gemeinsam genutzten Rechenkontingenten von Hugging Face. Auch das Duplizieren des Spaces ist kostenlos, doch Inference-API-Aufrufe über Ihr eigenes Hugging Face-Konto werden nach Ausschöpfung des kostenlosen Kontingents in Rechnung gestellt. Die Kosten sind modellabhängig und typischerweise gering für kurze Code-Generierungsaufgaben.
Welche Modelle verwendet DeepSite?
Die Modellliste wird vom Autor des Spaces gepflegt und ändert sich im Laufe der Zeit; bisher verwendete Versionen umfassten Modelle der Llama-Familie, DeepSeek Coder-Varianten sowie Qwen-Coder-Modelle. Überprüfen Sie im laufenden Space das Dropdown-Menü für die aktuellen Optionen – verlassen Sie sich nicht auf feste Listen in externer Dokumentation.
Darf ich DeepSite-Ausgaben kommerziell nutzen?
Der generierte Code selbst unterliegt keiner inhärenten Lizenz – Sie haben die Eingabeaufforderung bereitgestellt, und die Ausgabe besteht aus funktionalem Code. Allerdings unterliegen von Modellen eingebundene, CDN-basierte Bibliotheken (z. B. Chart.js, Tailwind usw.) eigenen Lizenzen (meist MIT oder Apache 2.0). Prüfen Sie sämtliche CDN-Importe in der Datei vor einer kommerziellen Nutzung.
Wie vergleicht sich DeepSite mit anderen KI-Code-Generatoren?
DeepSites Nische liegt in der Null-Setup-Erstellung einzelner Dateien mit sofortiger Vorschau im Browser. Tools wie GitHub Copilot, Cursor und v0.dev bieten umfangreichere Multi-Datei-Projektgenerierung, erfordern aber eine IDE oder ein kostenpflichtiges Abonnement. DeepSite ist der schnellste Weg von der Idee zum teilbaren Prototyp. Für eine Rangliste der zugrunde liegenden Modelle nach Intelligenz und Kosten siehe der LLM-Leaderboard.
Die generierte App funktioniert in der Vorschau nicht. Was soll ich tun?
Laden Sie die Datei zunächst herunter und öffnen Sie sie direkt im Browser – mehrere Browser-APIs sind innerhalb des sandboxed Iframes blockiert. Funktioniert sie auch lokal weiterhin nicht, senden Sie eine Folgenachricht mit einer konkreten Fehlerbeschreibung (z. B. ‚Das Diagramm wird nicht gerendert‘, ‚Der Button-Klick bewirkt nichts‘), anstatt von Grund auf neu zu generieren. Wenn die Datei mitten in einem Tag oder Skript endet, wurde die Ausgabe abgeschnitten – vereinfachen Sie den Umfang der Eingabeaufforderung oder wechseln Sie zu einem Modell mit höherer Ausgabelänge.
Kann ich DeepSite selbst hosten, etwa mit einer privaten oder lokales LLM?
Ja. Klonen Sie das Repository, führen Sie es lokal mit npm run dev, und konfigurieren Sie den Modellendpunkt so, dass er auf einen lokalen Inferenzserver zeigt. Ein Code-Generierungsmodell mit mindestens 7 Milliarden Parametern erzeugt brauchbare Ergebnisse; Modelle mit 34 Milliarden oder mehr Parametern verbessern die Qualität deutlich, erfordern aber wesentlich mehr VRAM. Prüfen Sie vor der Entscheidung für eine Modellgröße die VRAM-Rechner gegen Ihre GPU-Spezifikation.
