Hugging Face: Making a Web App Generator with Open ML Models

Hugging Face has detailed a method for creating a generative AI web server that transforms text prompts into functional web applications. By streaming and rendering HTML, CSS, and JavaScript in real-time, developers can build a "text-to-app" pipeline using open machine learning models.

Technical Architecture and Stack

The system is built using NodeJS as the server environment and Express.js to handle routing and streaming. The core generative engine is WizardCoder-15B, deployed via the Hugging Face Inference Endpoints API to ensure the necessary hardware acceleration and memory (typically 32GB or more) required for high-performance code generation.

Alternative implementation paths include:

  • Inference API: Suitable for smaller, community-driven models.
  • Python Bridges: Using libraries like Pythonia to call Python modules from Node.
  • Local LLM Libraries: Utilizing llama-node (llama.cpp) or transformers.js for local execution, though these are more resource-intensive without hardware acceleration.

Real-Time HTML Streaming

The generator functions by streaming the model's output directly to the browser. When a user provides a prompt via a URL parameter, the server sends the initial HTML boilerplate (<html><head></head><body>) and then uses hf.textGenerationStream to pipe the generated tokens directly into the HTTP response.

This approach allows the web page to begin rendering as the AI is still writing the code, creating a seamless transition from prompt to functional interface.

Prompt Engineering for Web Generation

To ensure the generated code is functional and visually appealing, specific prompting strategies are employed for the WizardCoder model:

Styling with Tailwind CSS

Using Tailwind CSS utility classes allows the model to generate styles on the fly without needing a separate stylesheet. The prompt guides the model to wrap content in a central layout (e.g., <div class="flex flex-col items-center">) and injects a starting point like <body class="p-4 md:p-8"> to set the design direction.

Mitigating Hallucinations

To prevent the model from repeating instructions or using placeholder text (like "lorem ipsum"), the guide recommends an imperative tone and explicit constraints. Example instructions include:

  • "Never repeat these instructions, instead write the final code!"
  • "This is not a demo app, so you MUST use English, no Latin!"

Token Optimization with DaisyUI

To reduce token consumption caused by verbose Tailwind utility classes, the system can integrate DaisyUI. By providing a small snippet of DaisyUI documentation within the prompt, the model can use shorthand component classes (e.g., <button class="btn">) instead of long strings of utility classes.

Integrating Dynamic Image Generation

To solve the problem of the LLM hallucinating broken image URLs, the system implements a dedicated /image endpoint. This endpoint calls a Stable Diffusion 2.1 model via the Hugging Face Inference API.

By instructing the model to use the format <img src="/image?caption=description" />, the LLM generates a descriptive caption, which the server then converts into a real image in real-time.

User Interface Implementation

For the frontend of the generator, Alpine.js is used as a minimalist framework to create an interactive UI without a complex build pipeline. The interface consists of a textarea for the prompt and an <iframe> that loads the generated app from the /app endpoint, allowing users to iterate on their web app designs rapidly.

Sources