browser-runtime-example.html

<!doctype html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>Renderify Runtime Browser Example</title>
    <style>
      :root {
        --bg: #f5f7fb;
        --panel: #ffffff;
        --text: #132238;
        --muted: #4f6075;
        --line: #d9e0ea;
        --primary: #0f766e;
        --primary-hover: #0b5b55;
      }

      * {
        box-sizing: border-box;
      }

      body {
        margin: 0;
        font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI",
          sans-serif;
        color: var(--text);
        background: radial-gradient(circle at 10% 20%, #dff6f3 0%, var(--bg) 42%);
      }

      .page {
        max-width: 1120px;
        margin: 0 auto;
        padding: 20px;
      }

      h1 {
        margin: 0 0 8px;
        font-size: 24px;
      }

      .hint {
        margin: 0 0 16px;
        color: var(--muted);
      }

      .grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 14px;
      }

      .panel {
        background: var(--panel);
        border: 1px solid var(--line);
        border-radius: 12px;
        padding: 14px;
        min-height: 160px;
      }

      .panel h2 {
        margin: 0 0 10px;
        font-size: 16px;
      }

      textarea {
        width: 100%;
        min-height: 86px;
        resize: vertical;
        border: 1px solid var(--line);
        border-radius: 8px;
        padding: 10px;
        font: inherit;
      }

      .actions {
        margin-top: 10px;
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
      }

      button {
        border: 1px solid var(--primary);
        background: var(--primary);
        color: #fff;
        border-radius: 8px;
        padding: 8px 12px;
        font-weight: 600;
        cursor: pointer;
      }

      button:hover {
        background: var(--primary-hover);
        border-color: var(--primary-hover);
      }

      button:disabled {
        opacity: 0.45;
        cursor: not-allowed;
      }

      .secondary {
        color: var(--text);
        background: #fff;
        border-color: var(--line);
      }

      .secondary:hover {
        background: #f2f6fc;
        border-color: #c5d2e4;
      }

      .status {
        margin-top: 8px;
        color: var(--muted);
        font-size: 13px;
      }

      .result {
        border: 1px dashed #bdd4ca;
        border-radius: 8px;
        padding: 10px;
        min-height: 70px;
        background: #fbfffe;
      }

      pre {
        margin: 0;
        max-height: 280px;
        overflow: auto;
        background: #0d1b2b;
        color: #d5e8ff;
        border-radius: 8px;
        padding: 10px;
        font-size: 12px;
      }

      @media (max-width: 920px) {
        .grid {
          grid-template-columns: 1fr;
        }
      }
    </style>
  </head>
  <body>
    <div class="page">
      <h1>Renderify Runtime Browser Example</h1>
      <p class="hint">
        This page does not rely on a bundler and uses the local UMD bundle directly.
        It includes a minimal demo LLM (for local demo use only).
      </p>

      <div class="grid">
        <section class="panel">
          <h2>Prompt</h2>
          <textarea id="promptInput"
            >Generate a runtime dashboard section</textarea
          >
          <div class="actions">
            <button type="button" id="renderPromptButton">Render Prompt</button>
            <button type="button" id="streamPromptButton" class="secondary">
              Stream Prompt
            </button>
            <button type="button" id="clearButton" class="secondary">Clear</button>
          </div>
          <div id="status" class="status">Booting Renderify runtime...</div>
        </section>

        <section class="panel">
          <h2>Rendered HTML</h2>
          <div id="renderResult" class="result"></div>
        </section>

        <section class="panel">
          <h2>Runtime Plan</h2>
          <pre id="planJson">{}</pre>
        </section>

        <section class="panel">
          <h2>Streaming Chunks</h2>
          <pre id="streamJson">[]</pre>
        </section>
      </div>
    </div>

    <script type="importmap">
      {
        "imports": {
          "@renderify/ir": "../../packages/ir/dist/ir.mjs",
          "@renderify/runtime": "../../packages/runtime/dist/runtime.mjs",
          "@renderify/security": "../../packages/security/dist/security.mjs",
          "es-module-lexer": "../../packages/ir/node_modules/es-module-lexer/dist/lexer.js",
          "preact": "../../node_modules/preact/dist/preact.module.js",
          "preact/hooks": "../../node_modules/preact/hooks/dist/hooks.module.js"
        }
      }
    </script>

    <script type="module">
      import {
        DefaultRuntimeManager,
        JspmModuleLoader,
      } from "@renderify/runtime";
      import * as RenderifyCore from "../../packages/core/dist/core.mjs";

      (async () => {
        const statusEl = document.getElementById("status");
        const promptInput = document.getElementById("promptInput");
        const renderButton = document.getElementById("renderPromptButton");
        const streamButton = document.getElementById("streamPromptButton");
        const clearButton = document.getElementById("clearButton");
        const renderResultEl = document.getElementById("renderResult");
        const planJsonEl = document.getElementById("planJson");
        const streamJsonEl = document.getElementById("streamJson");

        let app;

        function setBusy(busy) {
          renderButton.disabled = busy;
          streamButton.disabled = busy;
          clearButton.disabled = busy;
        }

        function setStatus(text) {
          statusEl.textContent = text;
        }

        function toJson(value) {
          return JSON.stringify(value ?? {}, null, 2);
        }

        function getErrorMessage(error) {
          return error?.message ? error.message : String(error);
        }

        class DemoLLM {
          configure() {}
          setPromptTemplate() {}
          getPromptTemplate() {
            return undefined;
          }
          async generateResponse(req) {
            return {
              text: `Dashboard demo for: ${req.prompt}`,
              model: "demo-llm",
            };
          }
          async generateStructuredResponse(req) {
            return {
              text: JSON.stringify({
                id: "browser_demo_plan",
                version: 1,
                capabilities: { domWrite: true },
                root: {
                  type: "element",
                  tag: "section",
                  children: [
                    {
                      type: "element",
                      tag: "h2",
                      children: [{ type: "text", value: req.prompt }],
                    },
                    {
                      type: "element",
                      tag: "p",
                      children: [{ type: "text", value: "Runtime render ready." }],
                    },
                  ],
                },
              }),
              valid: true,
              model: "demo-llm",
            };
          }
        }

        try {
          app = RenderifyCore.createRenderifyApp({
            config: new RenderifyCore.DefaultRenderifyConfig(),
            context: new RenderifyCore.DefaultContextManager(),
            llm: new DemoLLM(),
            codegen: new RenderifyCore.DefaultCodeGenerator(),
            runtime: new DefaultRuntimeManager({
              moduleLoader: new JspmModuleLoader(),
            }),
            security: new RenderifyCore.DefaultSecurityChecker(),
            performance: new RenderifyCore.DefaultPerformanceOptimizer(),
            ui: new RenderifyCore.DefaultUIRenderer(),
            customization: new RenderifyCore.DefaultCustomizationEngine(),
          });

          await app.start();
          setStatus("Renderify runtime ready.");
        } catch (error) {
          setStatus(`Boot failed: ${getErrorMessage(error)}`);
          setBusy(true);
          return;
        }

        renderButton.addEventListener("click", async () => {
          const prompt = promptInput.value.trim();
          if (!prompt) {
            setStatus("Prompt cannot be empty.");
            return;
          }

          setBusy(true);
          setStatus("Rendering prompt...");

          try {
            const result = await app.renderPrompt(prompt);
            renderResultEl.innerHTML = result.html;
            planJsonEl.textContent = toJson(result.plan);
            streamJsonEl.textContent = "[]";
            setStatus(
              `Rendered. planId=${result.plan.id} version=${result.plan.version}`,
            );
          } catch (error) {
            setStatus(`Render failed: ${getErrorMessage(error)}`);
          } finally {
            setBusy(false);
          }
        });

        streamButton.addEventListener("click", async () => {
          const prompt = promptInput.value.trim();
          if (!prompt) {
            setStatus("Prompt cannot be empty.");
            return;
          }

          setBusy(true);
          setStatus("Streaming prompt...");
          const chunks = [];

          try {
            for await (const chunk of app.renderPromptStream(prompt, {
              previewEveryChunks: 1,
            })) {
              chunks.push({
                type: chunk.type,
                planId: chunk.planId ?? null,
                llmTextLength: String(chunk.llmText ?? "").length,
              });

              if (chunk.html) {
                renderResultEl.innerHTML = chunk.html;
              }
              if (chunk.type === "final" && chunk.final) {
                planJsonEl.textContent = toJson(chunk.final.plan);
              }
            }

            streamJsonEl.textContent = toJson(chunks);
            setStatus("Stream complete.");
          } catch (error) {
            setStatus(`Stream failed: ${getErrorMessage(error)}`);
          } finally {
            setBusy(false);
          }
        });

        clearButton.addEventListener("click", () => {
          renderResultEl.innerHTML = "";
          planJsonEl.textContent = "{}";
          streamJsonEl.textContent = "[]";
          setStatus("Cleared.");
          setBusy(false);
        });

        window.addEventListener("beforeunload", () => {
          if (app && typeof app.stop === "function") {
            app.stop().catch(() => {});
          }
        });
      })();
    </script>
  </body>
</html>