npm - omni-playground - Versions diffs - 0.1.0 - Mend

omni-playground 0.1.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (60) hide show

package/dist/web/assets/instrument-sans-latin-400-normal-D1W7dsQl.woff ADDED Viewed

Binary file

package/dist/web/assets/instrument-sans-latin-400-normal-DRC__1Mx.woff2 ADDED Viewed

Binary file

package/dist/web/assets/instrument-sans-latin-500-normal-Dk9ku72i.woff2 ADDED Viewed

Binary file

package/dist/web/assets/instrument-sans-latin-500-normal-Z6ESRlEs.woff ADDED Viewed

Binary file

package/dist/web/assets/instrument-sans-latin-600-normal-B7fBEWYG.woff2 ADDED Viewed

Binary file

package/dist/web/assets/instrument-sans-latin-600-normal-B9e8oLYv.woff ADDED Viewed

Binary file

package/dist/web/assets/instrument-sans-latin-ext-400-normal-Q_nF8v4l.woff2 ADDED Viewed

Binary file

package/dist/web/assets/instrument-sans-latin-ext-400-normal-r32jotim.woff ADDED Viewed

Binary file

package/dist/web/assets/instrument-sans-latin-ext-500-normal-CAxz3nsc.woff ADDED Viewed

Binary file

package/dist/web/assets/instrument-sans-latin-ext-500-normal-CTEe1bJa.woff2 ADDED Viewed

Binary file

package/dist/web/assets/instrument-sans-latin-ext-600-normal-BsaQcF38.woff2 ADDED Viewed

Binary file

package/dist/web/assets/instrument-sans-latin-ext-600-normal-DMks36a2.woff ADDED Viewed

Binary file

package/dist/web/index.html ADDED Viewed

@@ -0,0 +1,18 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta name="color-scheme" content="dark" />
+    <title>omni-playground</title>
+    <link
+      rel="icon"
+      href="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Ccircle cx='16' cy='16' r='13' fill='none' stroke='%23ffb224' stroke-width='3'/%3E%3Ccircle cx='16' cy='16' r='5' fill='%23ffb224'/%3E%3C/svg%3E"
+    />
+    <script type="module" crossorigin src="/assets/index-BtldC4pA.js"></script>
+    <link rel="stylesheet" crossorigin href="/assets/index-B56r5dOo.css">
+  </head>
+  <body>
+    <div id="root"></div>
+  </body>
+</html>

package/package.json ADDED Viewed

@@ -0,0 +1,61 @@
+{
+  "name": "omni-playground",
+  "version": "0.1.0",
+  "description": "A local web playground for multimodal generation — chat, text-to-image, image editing, video, realtime voice and streaming against vLLM-omni endpoints.",
+  "type": "module",
+  "license": "Apache-2.0",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/FayeSpica/omni-playground.git"
+  },
+  "homepage": "https://github.com/FayeSpica/omni-playground#readme",
+  "bugs": {
+    "url": "https://github.com/FayeSpica/omni-playground/issues"
+  },
+  "bin": {
+    "omni-playground": "bin/omni-playground.js"
+  },
+  "publishConfig": {
+    "registry": "https://registry.npmjs.org/"
+  },
+  "files": [
+    "bin",
+    "server",
+    "dist"
+  ],
+  "engines": {
+    "node": ">=18"
+  },
+  "scripts": {
+    "dev": "vite --config web/vite.config.ts",
+    "build": "tsc -p web/tsconfig.json --noEmit && vite build --config web/vite.config.ts",
+    "start": "node bin/omni-playground.js",
+    "prepublishOnly": "npm run build"
+  },
+  "keywords": [
+    "vllm",
+    "vllm-omni",
+    "multimodal",
+    "playground",
+    "text-to-image",
+    "image-to-video",
+    "realtime",
+    "text-to-speech",
+    "websocket",
+    "webui"
+  ],
+  "devDependencies": {
+    "@fontsource/bricolage-grotesque": "^5.2.10",
+    "@fontsource/ibm-plex-mono": "^5.2.7",
+    "@fontsource/instrument-sans": "^5.2.8",
+    "@types/node": "^26.1.0",
+    "@types/react": "^19.2.17",
+    "@types/react-dom": "^19.2.3",
+    "@vitejs/plugin-react": "^6.0.3",
+    "marked": "^18.0.5",
+    "react": "^19.2.7",
+    "react-dom": "^19.2.7",
+    "typescript": "^6.0.3",
+    "vite": "^8.1.3"
+  }
+}

package/server/gateway.d.ts ADDED Viewed

@@ -0,0 +1,10 @@
+import type { IncomingMessage, ServerResponse } from 'node:http'
+import type { Duplex } from 'node:stream'
+export interface Gateway {
+  handle(req: IncomingMessage, res: ServerResponse): boolean
+  handleUpgrade(req: IncomingMessage, socket: Duplex, head: Buffer): boolean
+  readonly target: string
+}
+export function createGateway(initialTarget: string): Gateway

package/server/gateway.js ADDED Viewed

@@ -0,0 +1,166 @@
+import http from 'node:http'
+import https from 'node:https'
+// Hop-by-hop headers must not be forwarded (RFC 7230 §6.1)
+const HOP_BY_HOP = new Set([
+  'connection',
+  'keep-alive',
+  'proxy-authenticate',
+  'proxy-authorization',
+  'te',
+  'trailer',
+  'transfer-encoding',
+  'upgrade',
+])
+/**
+ * API gateway shared by the packaged server and the vite dev server:
+ * proxies /api/* to the vLLM-omni target and serves /playground/config
+ * for reading/updating that target at runtime.
+ */
+export function createGateway(initialTarget) {
+  let targetUrl = new URL(initialTarget)
+  function proxy(req, res) {
+    const upstreamPath = req.url.replace(/^\/api/, '') || '/'
+    const isHttps = targetUrl.protocol === 'https:'
+    const headers = {}
+    for (const [k, v] of Object.entries(req.headers)) {
+      if (!HOP_BY_HOP.has(k) && k !== 'host') headers[k] = v
+    }
+    const upstream = (isHttps ? https : http).request(
+      {
+        hostname: targetUrl.hostname,
+        port: targetUrl.port || (isHttps ? 443 : 80),
+        path: upstreamPath,
+        method: req.method,
+        headers,
+      },
+      (upRes) => {
+        const resHeaders = {}
+        for (const [k, v] of Object.entries(upRes.headers)) {
+          if (!HOP_BY_HOP.has(k)) resHeaders[k] = v
+        }
+        res.writeHead(upRes.statusCode, resHeaders)
+        upRes.pipe(res)
+      }
+    )
+    upstream.on('error', (err) => {
+      if (!res.headersSent) {
+        res.writeHead(502, { 'content-type': 'application/json' })
+      }
+      res.end(
+        JSON.stringify({
+          error: 'upstream_unreachable',
+          message: `cannot reach ${targetUrl.origin}: ${err.message}`,
+        })
+      )
+    })
+    req.pipe(upstream)
+    // If the browser aborts (e.g. user cancels a stream), tear down upstream too
+    res.on('close', () => upstream.destroy())
+  }
+  // WebSocket / upgrade proxy — the omni realtime endpoints (/v1/realtime,
+  // /v1/realtime/video) speak WebSocket, which the plain HTTP proxy above can't
+  // carry. We forward the handshake with http.request and then tunnel the raw
+  // socket both ways; no frame parsing needed since we only relay bytes.
+  function proxyUpgrade(req, clientSocket, head) {
+    const upstreamPath = req.url.replace(/^\/api/, '') || '/'
+    const isHttps = targetUrl.protocol === 'https:'
+    // Keep connection/upgrade/sec-websocket-* headers intact — they carry the
+    // handshake — but point Host at the upstream.
+    const headers = {}
+    for (const [k, v] of Object.entries(req.headers)) {
+      if (k !== 'host') headers[k] = v
+    }
+    headers.host = targetUrl.host
+    const upstreamReq = (isHttps ? https : http).request({
+      hostname: targetUrl.hostname,
+      port: targetUrl.port || (isHttps ? 443 : 80),
+      path: upstreamPath,
+      method: req.method,
+      headers,
+    })
+    upstreamReq.on('upgrade', (upRes, upstreamSocket, upstreamHead) => {
+      const statusLine = `HTTP/1.1 ${upRes.statusCode} ${upRes.statusMessage}\r\n`
+      const resHeaders = Object.entries(upRes.headers)
+        .map(([k, v]) => `${k}: ${v}\r\n`)
+        .join('')
+      clientSocket.write(statusLine + resHeaders + '\r\n')
+      if (upstreamHead && upstreamHead.length) clientSocket.write(upstreamHead)
+      upstreamSocket.pipe(clientSocket)
+      clientSocket.pipe(upstreamSocket)
+      const teardown = () => {
+        upstreamSocket.destroy()
+        clientSocket.destroy()
+      }
+      upstreamSocket.on('error', teardown)
+      clientSocket.on('error', teardown)
+      upstreamSocket.on('close', () => clientSocket.destroy())
+      clientSocket.on('close', () => upstreamSocket.destroy())
+    })
+    upstreamReq.on('error', () => clientSocket.destroy())
+    // Non-101 upstream response (e.g. auth/404): relay it then close.
+    upstreamReq.on('response', (upRes) => {
+      const statusLine = `HTTP/1.1 ${upRes.statusCode} ${upRes.statusMessage}\r\n`
+      const resHeaders = Object.entries(upRes.headers)
+        .map(([k, v]) => `${k}: ${v}\r\n`)
+        .join('')
+      clientSocket.write(statusLine + resHeaders + '\r\n')
+      upRes.pipe(clientSocket)
+    })
+    if (head && head.length) upstreamReq.write(head)
+    upstreamReq.end()
+  }
+  function handleConfig(req, res) {
+    if (req.method === 'GET') {
+      res.writeHead(200, { 'content-type': 'application/json' })
+      return res.end(JSON.stringify({ target: targetUrl.origin }))
+    }
+    if (req.method === 'POST') {
+      let body = ''
+      req.on('data', (c) => (body += c))
+      req.on('end', () => {
+        try {
+          targetUrl = new URL(JSON.parse(body).target)
+          res.writeHead(200, { 'content-type': 'application/json' })
+          res.end(JSON.stringify({ target: targetUrl.origin }))
+        } catch {
+          res.writeHead(400, { 'content-type': 'application/json' })
+          res.end(JSON.stringify({ error: 'invalid_target' }))
+        }
+      })
+      return
+    }
+    res.writeHead(405)
+    res.end()
+  }
+  return {
+    /** Returns true if the request was an /api or /playground/config request and was handled. */
+    handle(req, res) {
+      if (req.url.startsWith('/api/')) {
+        proxy(req, res)
+        return true
+      }
+      if (req.url.startsWith('/playground/config')) {
+        handleConfig(req, res)
+        return true
+      }
+      return false
+    },
+    /** Returns true if the upgrade was an /api WebSocket request and was tunneled. */
+    handleUpgrade(req, socket, head) {
+      if (req.url.startsWith('/api/')) {
+        proxyUpgrade(req, socket, head)
+        return true
+      }
+      return false
+    },
+    get target() {
+      return targetUrl.origin
+    },
+  }
+}

package/server/index.js ADDED Viewed

@@ -0,0 +1,73 @@
+import http from 'node:http'
+import { createReadStream, existsSync, statSync } from 'node:fs'
+import { extname, join, normalize, resolve } from 'node:path'
+import { fileURLToPath } from 'node:url'
+import { createGateway } from './gateway.js'
+const WEB_ROOT = resolve(fileURLToPath(new URL('../dist/web', import.meta.url)))
+const MIME = {
+  '.html': 'text/html; charset=utf-8',
+  '.js': 'text/javascript; charset=utf-8',
+  '.css': 'text/css; charset=utf-8',
+  '.json': 'application/json; charset=utf-8',
+  '.svg': 'image/svg+xml',
+  '.png': 'image/png',
+  '.jpg': 'image/jpeg',
+  '.ico': 'image/x-icon',
+  '.woff': 'font/woff',
+  '.woff2': 'font/woff2',
+  '.webmanifest': 'application/manifest+json',
+}
+export function startServer({ target, port, host }) {
+  const gateway = createGateway(target)
+  function serveStatic(req, res) {
+    const pathname = decodeURIComponent(new URL(req.url, 'http://x').pathname)
+    let filePath = normalize(join(WEB_ROOT, pathname))
+    if (!filePath.startsWith(WEB_ROOT)) {
+      res.writeHead(403)
+      return res.end()
+    }
+    if (!existsSync(filePath) || statSync(filePath).isDirectory()) {
+      filePath = join(WEB_ROOT, 'index.html') // SPA fallback
+    }
+    if (!existsSync(filePath)) {
+      res.writeHead(404, { 'content-type': 'text/plain' })
+      return res.end(
+        'omni-playground: web assets not found. Run `npm run build` first (dist/web missing).'
+      )
+    }
+    const type = MIME[extname(filePath)] || 'application/octet-stream'
+    const cache = pathname.startsWith('/assets/')
+      ? 'public, max-age=31536000, immutable'
+      : 'no-cache'
+    res.writeHead(200, { 'content-type': type, 'cache-control': cache })
+    createReadStream(filePath).pipe(res)
+  }
+  const server = http.createServer((req, res) => {
+    if (gateway.handle(req, res)) return
+    if (req.method !== 'GET' && req.method !== 'HEAD') {
+      res.writeHead(405)
+      return res.end()
+    }
+    serveStatic(req, res)
+  })
+  // Tunnel WebSocket upgrades (e.g. /api/v1/realtime) through to the target.
+  server.on('upgrade', (req, socket, head) => {
+    if (!gateway.handleUpgrade(req, socket, head)) socket.destroy()
+  })
+  return new Promise((resolvePromise, reject) => {
+    server.on('error', reject)
+    server.listen(port, host, () => {
+      const url = `http://${host}:${port}`
+      console.log(`\n  ◉ omni-playground  ${url}`)
+      console.log(`    proxying /api → ${gateway.target}\n`)
+      resolvePromise({ server, url })
+    })
+  })
+}