add a chatclient for test

doc/common_mistakes.md

@@ -6,4 +6,5 @@
 - For audio input, send base64 on `input_audio.data` with `format: "mp3"` or `"wav"`, or send `input_audio.url` and let the proxy download and convert it to mp3.
 - Streamed chat completions are passed through directly, so proxy-hosted media URLs are only added on non-stream responses.
 - Proxy-hosted media files are stored in memory and expire after `MEDIA_TTL_SECONDS`.
+- The demo UI in `public/chatclient/` assumes the proxy is available on the same origin unless you change the endpoint field manually.
 - Keep modules small and focused; this project follows the principle of simple modules with clear responsibility.

doc/overview.md

@@ -3,7 +3,7 @@
 ## Current Status
 
 - Project type: Node.js OpenAI-compatible chat completions proxy.
-- Status: working baseline implemented and verified.
+- Status: working baseline implemented and verified, with a browser demo client in `public/chatclient/`.
 - Verified with `npm test`, `npm run build`, and a live `GET /v1/health` startup check.
 - Build output folder: `C:\Users\a\AppData\Local\Temp\oapix-build`
 
@@ -16,6 +16,7 @@
 - Exposes audio output base64 as a temporary proxy URL on non-stream responses.
 - Exposes image data URLs returned by compatible upstreams as temporary proxy URLs on non-stream responses.
 - Exposes `GET /v1/media/:mediaId` for temporary media retrieval and `GET /v1/health` for health checks.
+- Serves a landing page from `/` and an interactive demo chat client from `/chatclient/`.
 
 ## Runtime Notes
 
@@ -23,6 +24,7 @@
 - Media files are stored in memory and expire after `MEDIA_TTL_SECONDS`.
 - Stream responses are passed through directly and do not get extra proxy media URLs added.
 - The build script writes a bundled server file and deployment manifest files into the temp build folder.
+- Static frontend files are served directly from `public/` with a service worker for cached HTML, CSS, and JS.
 
 ## Project Structure
 
@@ -38,6 +40,18 @@ oapix/
 │  ├─ overview.md              # Current project status and structure
 │  ├─ update.md                # Latest finished-task summary
 │  └─ updates.md               # Historical task log, newest first
+├─ public/
+│  ├─ app.js                   # Landing-page script and service-worker registration
+│  ├─ index.html               # Basic usage page and API example
+│  ├─ styles.css               # Landing-page styles
+│  ├─ sw-register.js           # Shared service-worker registration helper
+│  ├─ sw.js                    # Offline cache and timed refresh logic
+│  └─ chatclient/
+│     ├─ app.js                # Browser chat client controller
+│     ├─ index.html            # Chat UI
+│     ├─ media.js              # Attachment and file/base64 helpers
+│     ├─ render.js             # Response rendering and toast UI helpers
+│     └─ styles.css            # Chat UI styles
 ├─ scripts/
 │  └─ build.mjs                # Temp-folder build output script
 ├─ src/

public/app.js

@@ -0,0 +1,3 @@
+import { registerServiceWorker } from "/sw-register.js";
+
+registerServiceWorker();

public/chatclient/app.js

@@ -0,0 +1,115 @@
+import { registerServiceWorker } from "/sw-register.js";
+import { buildAttachmentPart } from "/chatclient/media.js";
+import { renderResponse, setStatus, showError } from "/chatclient/render.js";
+
+const form = document.querySelector("#chat-form");
+const endpointInput = document.querySelector("#endpoint");
+const attachmentTypeInput = document.querySelector("#attachment-type");
+const fileInput = document.querySelector("#attachment-file");
+const statusLine = document.querySelector("#status-line");
+const submitButton = document.querySelector("#submit-button");
+const rawJson = document.querySelector("#raw-json");
+const messageList = document.querySelector("#message-list");
+const errorToast = document.querySelector("#error-toast");
+
+registerServiceWorker();
+endpointInput.value = `${window.location.origin}/v1/chat/completions`;
+updateAttachmentFields();
+attachmentTypeInput.addEventListener("change", updateAttachmentFields);
+form.addEventListener("submit", handleSubmit);
+
+function updateAttachmentFields() {
+  const value = attachmentTypeInput.value;
+  for (const field of document.querySelectorAll(".attachment-field")) {
+    const kinds = field.dataset.kind.split(" ");
+    field.hidden = !kinds.includes(value);
+  }
+
+  fileInput.accept = value.startsWith("image") ? "image/*" : value.startsWith("audio") ? "audio/*" : "";
+}
+
+async function handleSubmit(event) {
+  event.preventDefault();
+  submitButton.disabled = true;
+  setStatus(statusLine, "Sending request...");
+
+  try {
+    const payload = await buildPayload(new FormData(form));
+    const response = await fetch(endpointInput.value, {
+      method: "POST",
+      headers: { "content-type": "application/json" },
+      body: JSON.stringify(payload)
+    });
+
+    const data = await readResponseBody(response);
+    rawJson.textContent = JSON.stringify(data, null, 2);
+
+    if (!response.ok) {
+      throw new Error(data?.error?.message ?? `HTTP ${response.status}`);
+    }
+
+    renderResponse(messageList, payload, data);
+    setStatus(statusLine, "Response received.", true);
+  } catch (error) {
+    setStatus(statusLine, "Request failed.");
+    showError(errorToast, error.message);
+  } finally {
+    submitButton.disabled = false;
+  }
+}
+
+async function buildPayload(formData) {
+  const attachmentType = formData.get("attachmentType");
+  const userText = String(formData.get("userText") || "").trim();
+  const systemPrompt = String(formData.get("systemPrompt") || "").trim();
+  const content = [];
+
+  if (userText) {
+    content.push({ type: "text", text: userText });
+  }
+
+  if (attachmentType !== "none") {
+    content.push(await buildAttachmentPart(attachmentType, formData));
+  }
+
+  if (content.length === 0) {
+    throw new Error("Add a user message or attachment before sending.");
+  }
+
+  const payload = {
+    model: String(formData.get("model") || "").trim(),
+    messages: []
+  };
+
+  if (systemPrompt) {
+    payload.messages.push({ role: "system", content: systemPrompt });
+  }
+
+  payload.messages.push({ role: "user", content });
+
+  if (formData.get("audioOutput")) {
+    payload.audio = {
+      voice: String(formData.get("voice") || "alloy"),
+      format: "mp3"
+    };
+  }
+
+  return payload;
+}
+
+async function readResponseBody(response) {
+  const text = await response.text();
+  if (!text) {
+    return {};
+  }
+
+  try {
+    return JSON.parse(text);
+  } catch (_error) {
+    return {
+      error: {
+        message: text
+      }
+    };
+  }
+}

public/chatclient/index.html

@@ -0,0 +1,126 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>oapix chat client</title>
+    <link rel="stylesheet" href="/chatclient/styles.css">
+    <script type="module" src="/chatclient/app.js"></script>
+  </head>
+  <body>
+    <main class="chat-shell">
+      <section class="side-panel">
+        <a class="back-link" href="/">Back</a>
+        <p class="eyebrow">Demo Client</p>
+        <h1>Test the proxy from your browser.</h1>
+        <p class="panel-copy">
+          Send text plus one optional image or audio attachment. The client supports URL, file, and
+          raw base64 inputs, then renders assistant text, audio, images, and raw JSON.
+        </p>
+
+        <form id="chat-form" class="composer-card">
+          <label>
+            <span>Endpoint</span>
+            <input id="endpoint" name="endpoint" type="url">
+          </label>
+
+          <div class="inline-grid">
+            <label>
+              <span>Model</span>
+              <input id="model" name="model" type="text" value="gpt-4.1-mini" required>
+            </label>
+
+            <label>
+              <span>Attachment</span>
+              <select id="attachment-type" name="attachmentType">
+                <option value="none">None</option>
+                <option value="image-url">Image URL</option>
+                <option value="image-file">Image File</option>
+                <option value="image-base64">Image Base64</option>
+                <option value="audio-url">Audio URL</option>
+                <option value="audio-file">Audio File</option>
+                <option value="audio-base64">Audio Base64</option>
+              </select>
+            </label>
+          </div>
+
+          <label>
+            <span>System Prompt</span>
+            <textarea id="system-prompt" name="systemPrompt" rows="3" placeholder="Optional system message"></textarea>
+          </label>
+
+          <label>
+            <span>User Message</span>
+            <textarea id="user-text" name="userText" rows="5" placeholder="Write the user message here"></textarea>
+          </label>
+
+          <section id="attachment-panel" class="attachment-panel">
+            <label class="attachment-field" data-kind="image-url audio-url">
+              <span>Attachment URL</span>
+              <input id="attachment-url" name="attachmentUrl" type="url" placeholder="https://example.com/file">
+            </label>
+
+            <label class="attachment-field" data-kind="image-file audio-file">
+              <span>Attachment File</span>
+              <input id="attachment-file" name="attachmentFile" type="file">
+            </label>
+
+            <label class="attachment-field" data-kind="image-base64 audio-base64">
+              <span>Attachment Base64</span>
+              <textarea id="attachment-base64" name="attachmentBase64" rows="5" placeholder="Paste raw base64 or a data URL"></textarea>
+            </label>
+          </section>
+
+          <div class="inline-grid">
+            <label class="toggle-card">
+              <span>Audio Output</span>
+              <input id="audio-output" name="audioOutput" type="checkbox" checked>
+            </label>
+
+            <label>
+              <span>Voice</span>
+              <select id="voice" name="voice">
+                <option value="alloy">alloy</option>
+                <option value="ash">ash</option>
+                <option value="ballad">ballad</option>
+                <option value="coral">coral</option>
+                <option value="sage">sage</option>
+                <option value="verse">verse</option>
+              </select>
+            </label>
+          </div>
+
+          <button id="submit-button" class="submit-button" type="submit">Send Request</button>
+          <p id="status-line" class="status-line">Ready.</p>
+        </form>
+      </section>
+
+      <section class="output-panel">
+        <article id="result-card" class="result-card">
+          <div class="result-head">
+            <div>
+              <p class="eyebrow">Assistant Output</p>
+              <h2>Response</h2>
+            </div>
+          </div>
+
+          <div id="message-list" class="message-list">
+            <p class="empty-state">Run a request to see assistant output here.</p>
+          </div>
+        </article>
+
+        <article class="json-card">
+          <div class="result-head">
+            <div>
+              <p class="eyebrow">Debug</p>
+              <h2>Raw JSON</h2>
+            </div>
+          </div>
+          <pre id="raw-json" class="json-output">{}</pre>
+        </article>
+      </section>
+    </main>
+
+    <button id="error-toast" class="error-toast" type="button" hidden></button>
+  </body>
+</html>

public/chatclient/media.js

@@ -0,0 +1,88 @@
+export async function buildAttachmentPart(attachmentType, formData) {
+  if (attachmentType === "image-url") {
+    const url = String(formData.get("attachmentUrl") || "").trim();
+    requireValue(url, "Enter an image URL.");
+    return { type: "image_url", image_url: { url } };
+  }
+
+  if (attachmentType === "image-base64") {
+    const url = String(formData.get("attachmentBase64") || "").trim();
+    requireValue(url, "Paste image base64 or a data URL.");
+    return { type: "image_url", image_url: { url } };
+  }
+
+  if (attachmentType === "audio-url") {
+    const url = String(formData.get("attachmentUrl") || "").trim();
+    requireValue(url, "Enter an audio URL.");
+    return { type: "input_audio", input_audio: { url } };
+  }
+
+  if (attachmentType === "audio-base64") {
+    const value = String(formData.get("attachmentBase64") || "").trim();
+    requireValue(value, "Paste audio base64 or a data URL.");
+    const { data, format } = parseAudioBase64(value);
+    return { type: "input_audio", input_audio: { data, format } };
+  }
+
+  const file = formData.get("attachmentFile");
+  if (!(file instanceof File) || file.size === 0) {
+    throw new Error("Select a file for the chosen attachment type.");
+  }
+
+  if (attachmentType === "image-file") {
+    return { type: "image_url", image_url: { url: await readFileAsDataUrl(file) } };
+  }
+
+  if (attachmentType === "audio-file") {
+    return {
+      type: "input_audio",
+      input_audio: {
+        data: await readFileAsBase64(file),
+        format: inferAudioFormat(file)
+      }
+    };
+  }
+
+  throw new Error(`Unsupported attachment type: ${attachmentType}`);
+}
+
+function parseAudioBase64(value) {
+  const match = value.match(/^data:audio\/(mpeg|mp3|wav);base64,(.+)$/i);
+  if (match) {
+    return {
+      format: match[1].toLowerCase() === "wav" ? "wav" : "mp3",
+      data: match[2]
+    };
+  }
+
+  return { format: "mp3", data: value };
+}
+
+function inferAudioFormat(file) {
+  const name = file.name.toLowerCase();
+  if (file.type === "audio/wav" || name.endsWith(".wav")) {
+    return "wav";
+  }
+
+  return "mp3";
+}
+
+function readFileAsDataUrl(file) {
+  return new Promise((resolve, reject) => {
+    const reader = new FileReader();
+    reader.onload = () => resolve(String(reader.result));
+    reader.onerror = () => reject(new Error("Failed to read the selected file."));
+    reader.readAsDataURL(file);
+  });
+}
+
+async function readFileAsBase64(file) {
+  const dataUrl = await readFileAsDataUrl(file);
+  return dataUrl.split(",")[1] || "";
+}
+
+function requireValue(value, message) {
+  if (!value) {
+    throw new Error(message);
+  }
+}

public/chatclient/render.js

@@ -0,0 +1,101 @@
+export function renderResponse(messageList, requestPayload, responseBody) {
+  const assistant = responseBody?.choices?.[0]?.message ?? {};
+  const text = extractAssistantText(assistant);
+  const imageUrl = extractAssistantImage(assistant);
+  const audioUrl = assistant?.audio?.url || null;
+
+  messageList.innerHTML = "";
+  messageList.appendChild(renderCard(
+    "Request",
+    requestPayload.messages.at(-1)?.content?.[0]?.text || "Attachment-only request."
+  ));
+  messageList.appendChild(renderCard("Assistant", text || "No assistant text returned."));
+
+  if (imageUrl) {
+    const imageCard = renderCard("Image", imageUrl);
+    imageCard.appendChild(Object.assign(document.createElement("img"), {
+      src: imageUrl,
+      alt: "assistant output"
+    }));
+    messageList.appendChild(imageCard);
+  }
+
+  if (audioUrl) {
+    const audioCard = renderCard("Audio", audioUrl);
+    const audio = document.createElement("audio");
+    audio.controls = true;
+    audio.src = audioUrl;
+    audioCard.appendChild(audio);
+    messageList.appendChild(audioCard);
+  }
+}
+
+export function setStatus(statusLine, message, isOk = false) {
+  statusLine.textContent = message;
+  statusLine.classList.toggle("status-ok", isOk);
+}
+
+export function showError(errorToast, message) {
+  const code = `ERR-${Date.now().toString(36).toUpperCase()}`;
+  errorToast.hidden = false;
+  errorToast.textContent = `${message} Click to copy ${code}.`;
+  errorToast.onclick = async () => {
+    try {
+      await navigator.clipboard.writeText(code);
+      errorToast.textContent = `Copied ${code}.`;
+    } catch (_error) {
+      errorToast.textContent = `Copy failed. Error code: ${code}`;
+    }
+  };
+
+  window.clearTimeout(showError.timer);
+  showError.timer = window.setTimeout(() => {
+    errorToast.hidden = true;
+  }, 10000);
+}
+
+showError.timer = 0;
+
+function extractAssistantText(message) {
+  if (typeof message.content === "string") {
+    return message.content;
+  }
+
+  if (!Array.isArray(message.content)) {
+    return "";
+  }
+
+  return message.content
+    .map((part) => part.text || part.output_text || "")
+    .filter(Boolean)
+    .join("\n\n");
+}
+
+function extractAssistantImage(message) {
+  if (!Array.isArray(message.content)) {
+    return null;
+  }
+
+  for (const part of message.content) {
+    const value = part?.image_url?.proxy_url || part?.image_url?.url;
+    if (value) {
+      return value;
+    }
+  }
+
+  return null;
+}
+
+function renderCard(title, body) {
+  const card = document.createElement("article");
+  card.className = "message-card";
+  card.innerHTML = `<strong>${escapeHtml(title)}</strong><p>${escapeHtml(body)}</p>`;
+  return card;
+}
+
+function escapeHtml(value) {
+  return String(value)
+    .replaceAll("&", "&amp;")
+    .replaceAll("<", "&lt;")
+    .replaceAll(">", "&gt;");
+}

public/chatclient/styles.css

@@ -0,0 +1,303 @@
+:root {
+  color-scheme: light;
+  --bg: #f3ebdf;
+  --surface: rgba(255, 250, 244, 0.82);
+  --surface-strong: rgba(255, 250, 244, 0.94);
+  --ink: #1e1712;
+  --muted: #69584c;
+  --line: rgba(61, 45, 31, 0.12);
+  --accent: #c2410c;
+  --accent-deep: #9a3412;
+  --success: #166534;
+  --shadow: 0 24px 50px rgba(61, 45, 31, 0.15);
+}
+
+* {
+  box-sizing: border-box;
+}
+
+body {
+  margin: 0;
+  min-height: 100vh;
+  font-family: "Space Grotesk", "Segoe UI", sans-serif;
+  color: var(--ink);
+  background:
+    radial-gradient(circle at top left, rgba(194, 65, 12, 0.14), transparent 32%),
+    radial-gradient(circle at bottom right, rgba(22, 101, 52, 0.13), transparent 30%),
+    linear-gradient(155deg, #f7f1e8, #eadfce 60%, #e3d5c1);
+}
+
+.chat-shell {
+  display: grid;
+  grid-template-columns: minmax(320px, 420px) minmax(0, 1fr);
+  gap: 20px;
+  width: min(1320px, calc(100% - 28px));
+  margin: 0 auto;
+  padding: 18px 0 28px;
+}
+
+.side-panel,
+.result-card,
+.json-card {
+  background: var(--surface);
+  border: 1px solid var(--line);
+  border-radius: 28px;
+  box-shadow: var(--shadow);
+  backdrop-filter: blur(12px);
+}
+
+.side-panel {
+  padding: 24px;
+}
+
+.output-panel {
+  display: grid;
+  grid-template-rows: minmax(0, 1fr) 320px;
+  gap: 20px;
+  min-height: calc(100vh - 46px);
+}
+
+.result-card,
+.json-card {
+  padding: 24px;
+  overflow: hidden;
+}
+
+.back-link {
+  display: inline-flex;
+  align-items: center;
+  min-height: 40px;
+  padding: 0 14px;
+  border-radius: 999px;
+  color: var(--ink);
+  text-decoration: none;
+  border: 1px solid var(--line);
+  background: rgba(255, 255, 255, 0.7);
+}
+
+.eyebrow {
+  margin: 18px 0 8px;
+  font-size: 0.78rem;
+  text-transform: uppercase;
+  letter-spacing: 0.22em;
+  color: var(--accent-deep);
+}
+
+h1,
+h2 {
+  margin: 0;
+  font-family: "Avenir Next", "Space Grotesk", sans-serif;
+}
+
+h1 {
+  font-size: clamp(2rem, 4vw, 3.4rem);
+  line-height: 0.95;
+  max-width: 10ch;
+}
+
+.panel-copy,
+.status-line,
+.message-card p,
+.empty-state {
+  color: var(--muted);
+  line-height: 1.55;
+}
+
+.composer-card {
+  display: grid;
+  gap: 14px;
+  margin-top: 24px;
+}
+
+label,
+.toggle-card {
+  display: grid;
+  gap: 8px;
+}
+
+label span,
+.toggle-card span {
+  font-size: 0.85rem;
+  text-transform: uppercase;
+  letter-spacing: 0.08em;
+  color: var(--muted);
+}
+
+input,
+textarea,
+select,
+.submit-button {
+  width: 100%;
+  border: 1px solid var(--line);
+  border-radius: 18px;
+  font: inherit;
+}
+
+input,
+textarea,
+select {
+  padding: 14px 16px;
+  color: var(--ink);
+  background: var(--surface-strong);
+}
+
+textarea {
+  resize: vertical;
+}
+
+.inline-grid {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 12px;
+}
+
+.attachment-panel {
+  display: grid;
+  gap: 12px;
+  padding: 14px;
+  border-radius: 22px;
+  background: rgba(255, 255, 255, 0.45);
+  border: 1px solid var(--line);
+}
+
+.attachment-field[hidden] {
+  display: none;
+}
+
+.toggle-card {
+  align-items: center;
+  grid-template-columns: 1fr auto;
+  min-height: 58px;
+  padding: 0 16px;
+  border: 1px solid var(--line);
+  border-radius: 18px;
+  background: var(--surface-strong);
+}
+
+.toggle-card input {
+  width: 24px;
+  height: 24px;
+}
+
+.submit-button {
+  min-height: 52px;
+  border: 0;
+  color: #fff;
+  background: linear-gradient(135deg, var(--accent), var(--accent-deep));
+  cursor: pointer;
+  transition: transform 160ms ease, opacity 160ms ease;
+}
+
+.submit-button:disabled {
+  opacity: 0.65;
+  cursor: progress;
+}
+
+.submit-button:hover:not(:disabled) {
+  transform: translateY(-1px);
+}
+
+.status-line {
+  margin: 0;
+}
+
+.result-head {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: 18px;
+}
+
+.message-list {
+  display: grid;
+  gap: 14px;
+  max-height: 100%;
+  overflow: auto;
+  padding-right: 6px;
+}
+
+.message-card {
+  padding: 18px;
+  border-radius: 22px;
+  border: 1px solid var(--line);
+  background: rgba(255, 255, 255, 0.58);
+}
+
+.message-card strong {
+  display: inline-block;
+  margin-bottom: 8px;
+}
+
+.message-card img {
+  width: 100%;
+  max-height: 320px;
+  object-fit: cover;
+  border-radius: 16px;
+  margin-top: 12px;
+}
+
+.message-card audio {
+  width: 100%;
+  margin-top: 12px;
+}
+
+.json-output {
+  height: calc(100% - 60px);
+  overflow: auto;
+  margin: 0;
+  padding: 18px;
+  border-radius: 20px;
+  background: #171411;
+  color: #f9f4ed;
+  font-family: "IBM Plex Mono", Consolas, monospace;
+  font-size: 0.92rem;
+}
+
+.error-toast {
+  position: fixed;
+  right: 16px;
+  bottom: 16px;
+  max-width: min(420px, calc(100% - 32px));
+  padding: 14px 16px;
+  border: 0;
+  border-radius: 16px;
+  color: #fff;
+  background: rgba(127, 29, 29, 0.96);
+  box-shadow: var(--shadow);
+  text-align: left;
+  cursor: pointer;
+}
+
+.status-ok {
+  color: var(--success);
+}
+
+@media (max-width: 980px) {
+  .chat-shell {
+    grid-template-columns: 1fr;
+  }
+
+  .output-panel {
+    min-height: auto;
+    grid-template-rows: auto 280px;
+  }
+}
+
+@media (max-width: 640px) {
+  .chat-shell {
+    width: min(100% - 14px, 100%);
+    padding-top: 8px;
+    gap: 14px;
+  }
+
+  .side-panel,
+  .result-card,
+  .json-card {
+    padding: 18px;
+    border-radius: 22px;
+  }
+
+  .inline-grid {
+    grid-template-columns: 1fr;
+  }
+}

public/index.html

@@ -0,0 +1,70 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>oapix</title>
+    <link rel="stylesheet" href="/styles.css">
+    <script type="module" src="/app.js"></script>
+  </head>
+  <body>
+    <main class="landing-shell">
+      <section class="hero-card">
+        <p class="eyebrow">OpenAI-Compatible Proxy</p>
+        <h1>Send text, images, and audio through one proxy endpoint.</h1>
+        <p class="hero-copy">
+          `oapix` forwards chat completions to your configured upstream, accepts image and audio inputs,
+          converts audio URLs to mp3, and exposes media output as temporary URLs.
+        </p>
+        <div class="hero-actions">
+          <a class="primary-link" href="/chatclient/">Open Chat Client</a>
+          <a class="secondary-link" href="/v1/health">Health Check</a>
+        </div>
+      </section>
+
+      <section class="info-grid">
+        <article class="info-card">
+          <h2>Endpoint</h2>
+          <code>POST /v1/chat/completions</code>
+          <p>Use the proxy exactly like a chat completions API, then add multimodal content parts as needed.</p>
+        </article>
+
+        <article class="info-card">
+          <h2>Image Input</h2>
+          <p>Provide `image_url.url` as an `https` URL, a data URL, or raw base64.</p>
+        </article>
+
+        <article class="info-card">
+          <h2>Audio Input</h2>
+          <p>Provide `input_audio.data` plus `format`, or use `input_audio.url` and let the proxy convert it.</p>
+        </article>
+      </section>
+
+      <section class="code-card">
+        <div class="section-head">
+          <p class="eyebrow">Quick Start</p>
+          <h2>Example request</h2>
+        </div>
+        <pre><code>{
+  "model": "gpt-4.1-mini",
+  "messages": [
+    {
+      "role": "user",
+      "content": [
+        { "type": "text", "text": "Describe this image." },
+        {
+          "type": "image_url",
+          "image_url": { "url": "https://example.com/photo.jpg" }
+        }
+      ]
+    }
+  ],
+  "audio": {
+    "voice": "alloy",
+    "format": "mp3"
+  }
+}</code></pre>
+      </section>
+    </main>
+  </body>
+</html>

public/styles.css

@@ -0,0 +1,149 @@
+:root {
+  color-scheme: light;
+  --bg: #f4efe6;
+  --paper: rgba(255, 252, 247, 0.82);
+  --ink: #1f1a16;
+  --muted: #66584a;
+  --line: rgba(72, 52, 35, 0.15);
+  --accent: #0f766e;
+  --accent-strong: #155e75;
+  --shadow: 0 24px 60px rgba(48, 31, 12, 0.16);
+}
+
+* {
+  box-sizing: border-box;
+}
+
+body {
+  margin: 0;
+  min-height: 100vh;
+  font-family: "Space Grotesk", "Segoe UI", sans-serif;
+  color: var(--ink);
+  background:
+    radial-gradient(circle at top left, rgba(15, 118, 110, 0.18), transparent 34%),
+    radial-gradient(circle at right, rgba(20, 83, 45, 0.12), transparent 28%),
+    linear-gradient(160deg, #f8f3eb, #efe7d8 60%, #e7ddcb);
+}
+
+.landing-shell {
+  width: min(1080px, calc(100% - 32px));
+  margin: 0 auto;
+  padding: 48px 0 64px;
+}
+
+.hero-card,
+.info-card,
+.code-card {
+  background: var(--paper);
+  border: 1px solid var(--line);
+  border-radius: 28px;
+  box-shadow: var(--shadow);
+  backdrop-filter: blur(12px);
+}
+
+.hero-card {
+  padding: 40px;
+}
+
+.hero-card h1,
+.section-head h2,
+.info-card h2 {
+  margin: 0 0 16px;
+  font-family: "Avenir Next", "Space Grotesk", sans-serif;
+}
+
+.hero-card h1 {
+  max-width: 12ch;
+  font-size: clamp(2.4rem, 5vw, 4.6rem);
+  line-height: 0.95;
+}
+
+.hero-copy,
+.info-card p {
+  color: var(--muted);
+  line-height: 1.6;
+}
+
+.eyebrow {
+  margin: 0 0 10px;
+  font-size: 0.78rem;
+  letter-spacing: 0.22em;
+  text-transform: uppercase;
+  color: var(--accent-strong);
+}
+
+.hero-actions {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 12px;
+  margin-top: 28px;
+}
+
+.primary-link,
+.secondary-link {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-height: 46px;
+  padding: 0 18px;
+  border-radius: 999px;
+  text-decoration: none;
+}
+
+.primary-link {
+  color: #fff;
+  background: linear-gradient(135deg, var(--accent), var(--accent-strong));
+}
+
+.secondary-link {
+  color: var(--ink);
+  border: 1px solid var(--line);
+  background: rgba(255, 255, 255, 0.65);
+}
+
+.info-grid {
+  display: grid;
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+  gap: 18px;
+  margin: 22px 0;
+}
+
+.info-card,
+.code-card {
+  padding: 24px;
+}
+
+code,
+pre {
+  font-family: "IBM Plex Mono", Consolas, monospace;
+}
+
+pre {
+  margin: 0;
+  overflow: auto;
+  padding: 20px;
+  border-radius: 20px;
+  background: #171411;
+  color: #f9f4ed;
+}
+
+@media (max-width: 840px) {
+  .landing-shell {
+    width: min(100% - 20px, 680px);
+    padding-top: 20px;
+  }
+
+  .hero-card,
+  .info-card,
+  .code-card {
+    border-radius: 22px;
+  }
+
+  .hero-card {
+    padding: 28px 22px;
+  }
+
+  .info-grid {
+    grid-template-columns: 1fr;
+  }
+}

public/sw-register.js

@@ -0,0 +1,15 @@
+export async function registerServiceWorker() {
+  if (!("serviceWorker" in navigator)) {
+    return;
+  }
+
+  try {
+    const registration = await navigator.serviceWorker.register("/sw.js");
+    window.setTimeout(() => {
+      const worker = registration.active ?? registration.waiting ?? registration.installing;
+      worker?.postMessage({ type: "refresh-static-cache" });
+    }, 10000);
+  } catch (error) {
+    console.error("service worker registration failed", error);
+  }
+}

public/sw.js

@@ -0,0 +1,66 @@
+const CACHE_NAME = "oapix-static-v2";
+const STATIC_ASSETS = [
+  "/",
+  "/styles.css",
+  "/app.js",
+  "/sw-register.js",
+  "/chatclient/",
+  "/chatclient/media.js",
+  "/chatclient/render.js",
+  "/chatclient/styles.css",
+  "/chatclient/app.js"
+];
+
+self.addEventListener("install", (event) => {
+  event.waitUntil(caches.open(CACHE_NAME).then((cache) => cache.addAll(STATIC_ASSETS)));
+  self.skipWaiting();
+});
+
+self.addEventListener("activate", (event) => {
+  event.waitUntil(
+    caches.keys().then((keys) => Promise.all(
+      keys.filter((key) => key !== CACHE_NAME).map((key) => caches.delete(key))
+    ))
+  );
+  self.clients.claim();
+});
+
+self.addEventListener("message", (event) => {
+  if (event.data?.type !== "refresh-static-cache") {
+    return;
+  }
+
+  event.waitUntil(caches.open(CACHE_NAME).then((cache) => Promise.all(
+    STATIC_ASSETS.map(async (asset) => {
+      const response = await fetch(asset, { cache: "no-store" });
+      if (response.ok) {
+        await cache.put(asset, response.clone());
+      }
+    })
+  )));
+});
+
+self.addEventListener("fetch", (event) => {
+  const request = event.request;
+  const url = new URL(request.url);
+  if (request.method !== "GET" || url.origin !== self.location.origin) {
+    return;
+  }
+
+  if (!["document", "script", "style"].includes(request.destination)) {
+    return;
+  }
+
+  event.respondWith((async () => {
+    const cache = await caches.open(CACHE_NAME);
+    const cached = await cache.match(request);
+    const networkPromise = fetch(request).then(async (response) => {
+      if (response.ok) {
+        await cache.put(request, response.clone());
+      }
+      return response;
+    }).catch(() => cached);
+
+    return cached ?? networkPromise;
+  })());
+});

scripts/build.mjs

@@ -21,5 +21,6 @@ await build({
 await fs.copyFile("package.json", path.join(outputDir, "package.json"));
 await fs.copyFile("package-lock.json", path.join(outputDir, "package-lock.json")).catch(() => {});
 await fs.copyFile(".env.example", path.join(outputDir, ".env.example"));
+await fs.cp("public", path.join(outputDir, "public"), { recursive: true });
 
 console.log(outputDir);

src/app.js

@@ -1,9 +1,11 @@
+import path from "node:path";
 import express from "express";
 import { createApiRouter } from "./routes/apiRouter.js";
 import { HttpError } from "./utils/httpError.js";
 
 export function createApp({
   jsonLimit,
+  publicDir,
   chatController,
   mediaController
 }) {
@@ -11,6 +13,20 @@ export function createApp({
 
   app.disable("x-powered-by");
   app.use(express.json({ limit: jsonLimit }));
+  app.get("/", (_req, res) => {
+    res.sendFile(path.join(publicDir, "index.html"));
+  });
+  app.get(["/chatclient", "/chatclient/"], (_req, res) => {
+    res.sendFile(path.join(publicDir, "chatclient", "index.html"));
+  });
+  app.get(["/chat", "/chat/"], (_req, res) => {
+    res.redirect(302, "/chatclient/");
+  });
+  app.use(express.static(publicDir, {
+    extensions: ["html"],
+    index: false,
+    redirect: false
+  }));
 
   app.use("/v1", createApiRouter({ chatController, mediaController }));
 

src/server.js

@@ -1,3 +1,4 @@
+import { fileURLToPath } from "node:url";
 import { loadConfig, validateConfig } from "./config.js";
 import { createApp } from "./app.js";
 import { InMemoryMediaStore } from "./services/mediaStore.js";
@@ -10,6 +11,7 @@ import { createMediaController } from "./controllers/mediaController.js";
 
 const config = loadConfig();
 validateConfig(config);
+const publicDir = fileURLToPath(new URL("../public", import.meta.url));
 
 const mediaStore = new InMemoryMediaStore({ ttlSeconds: config.mediaTtlSeconds });
 const audioConversionService = createAudioConversionService({
@@ -36,6 +38,7 @@ const mediaController = createMediaController({ mediaStore });
 
 const app = createApp({
   jsonLimit: config.jsonLimit,
+  publicDir,
   chatController,
   mediaController
 });