kasaframe 0.0.0-stage → 0.1.3

package/app/server/main.ts

@@ -0,0 +1,209 @@
+import { createReadStream, createWriteStream, existsSync, mkdirSync, readdirSync, statSync } from "node:fs";
+import { createServer, type IncomingMessage, type ServerResponse } from "node:http";
+import { basename, extname, join, normalize, resolve } from "node:path";
+import { pipeline } from "node:stream/promises";
+import { fileURLToPath } from "node:url";
+import { createServer as createVite } from "vite";
+import { dataDir, Engine, templatePreview } from "./engine.ts";
+
+// 작업실 = 이 엔진 서버(API + SSE) + 그 API 만 쓰는 웹 화면. Electron·컨테이너로 갈 때도 이 파일만 감싼다.
+
+const port = Number(process.env.KF_APP_PORT ?? 5150);
+const host = process.env.KF_APP_HOST ?? "127.0.0.1";
+const webRoot = fileURLToPath(new URL("../web/", import.meta.url));
+const uploads = join(dataDir, "uploads");
+// 곡 모음 — kf make 와 같은 자리(레포 music/, KF_MUSIC_DIR 이 있으면 그쪽)
+const musicDir = process.env.KF_MUSIC_DIR || fileURLToPath(new URL("../../music/", import.meta.url));
+mkdirSync(uploads, { recursive: true });
+
+const engine = new Engine();
+// 이 기계에서는 fs 이벤트 감시가 바뀐 파일을 못 알려 옛 모듈을 내줬다 — 작은 폴더라 훑기로 본다
+const vite = await createVite({ root: webRoot, configFile: false, logLevel: "warn", clearScreen: false, server: { middlewareMode: true, hmr: { port: port + 9 }, watch: { usePolling: true, interval: 1000 } }, appType: "spa" });
+
+const TYPES: Record<string, string> = { ".jpg": "image/jpeg", ".jpeg": "image/jpeg", ".webp": "image/webp", ".gif": "image/gif", ".svg": "image/svg+xml", ".webm": "video/webm", ".m4v": "video/mp4", ".mp4": "video/mp4", ".png": "image/png", ".json": "application/json", ".srt": "text/plain; charset=utf-8", ".vtt": "text/vtt", ".mov": "video/quicktime", ".mp3": "audio/mpeg", ".wav": "audio/wav" };
+const AUDIO = /\.(mp3|wav|m4a|aac|flac|ogg)$/i;
+const IMAGE = /\.(png|jpe?g|webp|gif|svg)$/i;
+const VIDEO = /\.(mp4|mov|webm|m4v)$/i;
+
+function send(res: ServerResponse, status: number, body: unknown): void {
+  res.writeHead(status, { "content-type": "application/json; charset=utf-8" });
+  res.end(JSON.stringify(body));
+}
+
+async function body<T>(req: IncomingMessage): Promise<T> {
+  const chunks: Buffer[] = [];
+  for await (const c of req) chunks.push(c as Buffer);
+  return (chunks.length ? JSON.parse(Buffer.concat(chunks).toString("utf8")) : {}) as T;
+}
+
+// 폰 사파리는 Range 를 못 받으면 영상을 안 튼다
+function serveFile(req: IncomingMessage, res: ServerResponse, file: string): void {
+  const size = statSync(file).size;
+  const type = TYPES[extname(file).toLowerCase()] ?? "application/octet-stream";
+  const range = req.headers.range?.match(/bytes=(\d*)-(\d*)/);
+  const disposition = new URL(req.url ?? "", "http://x").searchParams.has("download") ? { "content-disposition": `attachment; filename="${basename(file)}"` } : {};
+  if (range) {
+    const start = range[1] ? Number(range[1]) : 0;
+    const end = range[2] ? Math.min(Number(range[2]), size - 1) : size - 1;
+    res.writeHead(206, { "content-type": type, "content-range": `bytes ${start}-${end}/${size}`, "accept-ranges": "bytes", "content-length": end - start + 1, ...disposition });
+    createReadStream(file, { start, end }).pipe(res);
+    return;
+  }
+  res.writeHead(200, { "content-type": type, "content-length": size, "accept-ranges": "bytes", "cache-control": "no-store", ...disposition });
+  createReadStream(file).pipe(res);
+}
+
+function sse(req: IncomingMessage, res: ServerResponse, jobId?: string): void {
+  res.writeHead(200, { "content-type": "text/event-stream", "cache-control": "no-store", connection: "keep-alive" });
+  const write = (event: string, data: unknown) => res.write(`event: ${event}\ndata: ${JSON.stringify(data)}\n\n`);
+  if (jobId) {
+    write("state", engine.view(jobId));
+    for (const line of engine.logOf(jobId).slice(-200)) write("log", line);
+  }
+  const onState = (v: { id: string }) => (!jobId || v.id === jobId) && write("state", v);
+  const onLog = (id: string, line: string) => jobId === id && write("log", line);
+  engine.on("state", onState);
+  engine.on("log", onLog);
+  const ping = setInterval(() => res.write(": ping\n\n"), 15000);
+  req.on("close", () => {
+    clearInterval(ping);
+    engine.off("state", onState);
+    engine.off("log", onLog);
+  });
+}
+
+async function api(req: IncomingMessage, res: ServerResponse, path: string): Promise<void> {
+  const method = req.method ?? "GET";
+  const m = path.match(/^\/api\/jobs\/([\w-]+)(?:\/(.*))?$/);
+  if (path === "/api/templates") return send(res, 200, engine.templates());
+  const still = path.match(/^\/api\/templates\/([a-z]+)\/still\.png$/);
+  if (still) {
+    const f = templatePreview(still[1]);
+    return existsSync(f) ? serveFile(req, res, f) : send(res, 404, { error: "대표 그림이 없다 — node templates/_shared/previews.ts" });
+  }
+  if (path === "/api/plan" && method === "POST") {
+    const b = await body<{ request: string; purpose?: never; theme?: string }>(req);
+    // purpose: 틀 id 면 그 틀로, "auto" 거나 없으면 요청 글로 판별. theme: id 나 "auto"
+    return send(res, 200, await engine.plan(b.request ?? "", b.purpose, b.theme));
+  }
+  if (path === "/api/themes" && method === "GET") {
+    const q = new URL(req.url ?? "", "http://x").searchParams;
+    return send(res, 200, engine.themes({ all: q.get("all") === "1", purpose: q.get("purpose") ?? undefined, aspect: q.get("aspect") ?? undefined }));
+  }
+  if (path === "/api/themes/suggest" && method === "POST") {
+    const b = await body<{ request: string; purpose: never }>(req);
+    return send(res, 200, engine.suggest(b.request ?? "", b.purpose));
+  }
+  if (path === "/api/themes/new" && method === "POST") return send(res, 200, await engine.themeNew(await body(req)));
+  const themeAct = path.match(/^\/api\/themes\/([\w-]+)\/(review|approve)$/);
+  if (themeAct) {
+    const [, id, act] = themeAct;
+    if (act === "review") return send(res, method === "POST" ? 202 : 200, method === "POST" ? engine.themeReview(id) : engine.themeTask(id));
+    if (method === "POST") return send(res, 200, await engine.themeApprove(id));
+  }
+  const themeFile = path.match(/^\/api\/themes\/([\w-]+)\/(still|sample)$/);
+  if (themeFile) {
+    const f = engine.themeFile(themeFile[1], themeFile[2] as "still" | "sample");
+    return f && existsSync(f) ? serveFile(req, res, f) : send(res, 404, { error: "테마 견본이 없다" });
+  }
+  if (path === "/api/events") return sse(req, res);
+  if (path === "/api/jobs" && method === "GET") return send(res, 200, engine.list());
+  if (path === "/api/jobs" && method === "POST") {
+    const b = await body<Parameters<Engine["create"]>[0]>(req);
+    if (!b.request?.trim()) return send(res, 400, { error: "요청 글이 비었다" });
+    return send(res, 201, engine.view(engine.create(b).id));
+  }
+  if (path === "/api/jobs/attach" && method === "POST") {
+    const job = engine.attach(await body(req));
+    return send(res, 200, { id: job.id, url: `http://${req.headers.host}/?job=${job.id}` });
+  }
+  if (path === "/api/music") {
+    const lib = musicDir;
+    // url 은 미리 듣기(Range) — 올린 곡은 /api/uploads, 곡 모음은 /api/music/<파일>
+    const list = (dir: string | undefined, base: string) =>
+      dir && existsSync(dir) ? readdirSync(dir).filter((f) => AUDIO.test(f)).map((f) => ({ name: f.replace(/^[a-z0-9]+-(?=.)/, base === "uploads" ? "" : "$&"), path: join(dir, f), url: `/api/${base}/${encodeURIComponent(f)}` })) : [];
+    return send(res, 200, [...list(uploads, "uploads"), ...list(lib, "music")]);
+  }
+  const song = path.match(/^\/api\/music\/(.+)$/);
+  if (song && method === "GET") {
+    const f = join(musicDir, basename(decodeURIComponent(song[1])));
+    return f && existsSync(f) ? serveFile(req, res, f) : send(res, 404, { error: "곡이 없다" });
+  }
+  // 올린 그림·영상 — POST /api/jobs 의 assets 로 다시 보낸다
+  if (path === "/api/assets") {
+    const list = readdirSync(uploads).filter((f) => IMAGE.test(f) || VIDEO.test(f)).map((f) => ({
+      name: f.replace(/^[a-z0-9]+-/, ""),
+      path: join(uploads, f),
+      kind: IMAGE.test(f) ? "image" : "video",
+      size: statSync(join(uploads, f)).size,
+      url: `/api/uploads/${encodeURIComponent(f)}`,
+    }));
+    return send(res, 200, list);
+  }
+  const up = path.match(/^\/api\/uploads\/(.+)$/);
+  if (up && method === "GET") {
+    const f = join(uploads, basename(decodeURIComponent(up[1])));
+    return existsSync(f) ? serveFile(req, res, f) : send(res, 404, { error: "파일이 없다" });
+  }
+  if (path === "/api/upload" && method === "POST") {
+    const name = basename(new URL(req.url ?? "", "http://x").searchParams.get("name") ?? "upload.bin").replace(/[^\w.\-가-힣]/g, "_");
+    const file = join(uploads, `${Date.now().toString(36)}-${name}`);
+    await pipeline(req, createWriteStream(file));
+    return send(res, 201, { name, path: file });
+  }
+  if (!m) return send(res, 404, { error: "없는 길" });
+  const [, id, rest = ""] = m;
+  if (!rest && method === "GET") return send(res, 200, engine.view(id));
+  if (rest === "events") return sse(req, res, id);
+  if (rest === "log") return send(res, 200, engine.logOf(id));
+  if (rest === "progress" && method === "POST") {
+    engine.progress(id, await body(req));
+    return send(res, 200, { ok: true });
+  }
+  if (rest === "preview") return send(res, 200, { url: engine.previewFor(id) ?? null });
+  if (rest === "stop" && method === "POST") {
+    engine.stop(id);
+    return send(res, 200, { ok: true });
+  }
+  if (rest === "render" && method === "POST") return send(res, 200, engine.view(engine.rerender(id, await body<{ captions?: "on" | "off" }>(req)).id));
+  if (rest === "rewrite" && method === "POST") {
+    const b = await body<{ scenes: string[]; pattern?: Record<string, string>; seed?: Record<string, string> }>(req);
+    return send(res, 200, engine.view(engine.rewrite(id, b.scenes ?? [], { pattern: b.pattern, seed: b.seed }).id));
+  }
+  if (rest === "redo" && method === "POST") return send(res, 200, engine.view(engine.redo(id, (await body<{ scenes: string[] }>(req)).scenes ?? []).id));
+  const scene = rest.match(/^scenes\/([\w-]+)$/);
+  if (scene && method === "GET") return send(res, 200, engine.sceneDetail(id, scene[1]));
+  if (scene && method === "PATCH") return send(res, 200, engine.editScene(id, scene[1], await body(req)));
+  const sceneAsset = rest.match(/^scenes\/([\w-]+)\/asset$/);
+  if (sceneAsset && method === "PUT") return send(res, 200, engine.replaceAsset(id, sceneAsset[1], await body(req)));
+  const file = rest.match(/^files\/(.+)$/);
+  if (file && method === "GET") {
+    const dir = engine.view(id).dir;
+    const p = resolve(dir, normalize(decodeURIComponent(file[1])));
+    if (!p.startsWith(dir) || !existsSync(p) || statSync(p).isDirectory()) return send(res, 404, { error: "파일이 없다" });
+    return serveFile(req, res, p);
+  }
+  return send(res, 404, { error: "없는 길" });
+}
+
+const server = createServer(async (req, res) => {
+  const path = new URL(req.url ?? "/", "http://x").pathname;
+  if (!path.startsWith("/api/")) return vite.middlewares(req, res);
+  try {
+    await api(req, res, path);
+  } catch (e) {
+    const err = e as Error & { status?: number };
+    if (!res.headersSent) send(res, err.status ?? 500, { error: err.message });
+  }
+});
+
+server.listen(port, host, () => console.log(`작업실 http://${host === "0.0.0.0" ? "127.0.0.1" : host}:${port}/  (일 폴더 ${dataDir})`));
+
+const shutdown = async () => {
+  await engine.close();
+  await vite.close();
+  server.close();
+  process.exit(0);
+};
+process.on("SIGINT", shutdown);
+process.on("SIGTERM", shutdown);

package/app/web/env.d.ts

@@ -0,0 +1,2 @@
+// Vite 가 CSS 를 모듈로 가져온다
+declare module "*.css";

package/app/web/icons.ts

@@ -0,0 +1,31 @@
+// 선 굵기 하나(1.75)·둥근 끝으로 맞춘 24px 아이콘. 이모지 대신 쓴다.
+const PATHS = {
+  back: '<path d="M15 6l-6 6 6 6"/>',
+  next: '<path d="M9 6l6 6-6 6"/>',
+  arrow: '<path d="M5 12h14M13 6l6 6-6 6"/>',
+  upload: '<path d="M12 15V4M7 9l5-5 5 5"/><path d="M4 15v3a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-3"/>',
+  music: '<path d="M9 18V6l11-2v12"/><circle cx="6.5" cy="18" r="2.5"/><circle cx="17.5" cy="16" r="2.5"/>',
+  image: '<rect x="3.5" y="4.5" width="17" height="15" rx="2"/><circle cx="9" cy="10" r="1.75"/><path d="M20.5 15.5l-5-5-9 9"/>',
+  video: '<rect x="3" y="6" width="13" height="12" rx="2"/><path d="M16 10.5l5-3v9l-5-3z"/>',
+  play: '<path d="M8 5.5v13l10.5-6.5z" fill="currentColor" stroke="none"/>',
+  pause: '<path d="M7.5 5.5h3v13h-3zM13.5 5.5h3v13h-3z" fill="currentColor" stroke="none"/>',
+  close: '<path d="M6 6l12 12M18 6L6 18"/>',
+  check: '<path d="M5 12.5l4.5 4.5L19 7.5"/>',
+  download: '<path d="M12 4v11M7 10l5 5 5-5"/><path d="M4 18v1a1 1 0 0 0 1 1h14a1 1 0 0 0 1-1v-1"/>',
+  redo: '<path d="M20 11a8 8 0 1 0-2.3 5.6"/><path d="M20 4v7h-7"/>',
+  stop: '<rect x="6.5" y="6.5" width="11" height="11" rx="1.5" fill="currentColor" stroke="none"/>',
+  history: '<path d="M3.5 12a8.5 8.5 0 1 0 2.5-6"/><path d="M3.5 4.5V9H8"/><path d="M12 8v4.5l3 2"/>',
+  caption: '<rect x="3" y="5.5" width="18" height="13" rx="2"/><path d="M10 10.5a2 2 0 1 0 0 3M17 10.5a2 2 0 1 0 0 3"/>',
+  warn: '<path d="M12 4l9 16H3z"/><path d="M12 10v4M12 17v.5"/>',
+  edit: '<path d="M4 20h4L19 9l-4-4L4 16z"/><path d="M13.5 6.5l4 4"/>',
+  plus: '<path d="M12 5v14M5 12h14"/>',
+  copy: '<rect x="8.5" y="8.5" width="11" height="11" rx="2"/><path d="M15.5 8.5V6a1.5 1.5 0 0 0-1.5-1.5H6A1.5 1.5 0 0 0 4.5 6v8A1.5 1.5 0 0 0 6 15.5h2.5"/>',
+} as const;
+
+export type IconName = keyof typeof PATHS;
+
+export function icon(name: IconName, size = 18): SVGSVGElement {
+  const t = document.createElement("template");
+  t.innerHTML = `<svg viewBox="0 0 24 24" width="${size}" height="${size}" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">${PATHS[name]}</svg>`;
+  return t.content.firstChild as SVGSVGElement;
+}

package/app/web/index.html

@@ -0,0 +1,21 @@
+<!doctype html>
+<html lang="ko">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover" />
+    <meta name="theme-color" content="#0c0d10" />
+    <title>kasaframe 작업실</title>
+    <link rel="preconnect" href="https://cdn.jsdelivr.net" />
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable.min.css" />
+  </head>
+  <body>
+    <header class="top">
+      <a class="mark" href="/" aria-label="kasaframe 작업실 처음으로">kasaframe</a>
+      <nav class="rail" id="rail" aria-label="단계"></nav>
+      <button class="ghost jobs-btn" id="jobs-toggle" type="button" aria-expanded="false" aria-controls="jobs"></button>
+    </header>
+    <aside id="jobs" class="jobs" hidden aria-label="지난 작업"></aside>
+    <main id="view" class="view"></main>
+    <script type="module" src="./main.ts"></script>
+  </body>
+</html>