mulmoclaude 0.1.0

package/server/api/routes/html.ts

@@ -0,0 +1,101 @@
+import { Router, Request, Response } from "express";
+import { readCurrentHtml, writeCurrentHtml } from "../../utils/files/html-io.js";
+import { getGeminiClient, isGeminiAvailable } from "../../utils/gemini.js";
+import { errorMessage } from "../../utils/errors.js";
+import { API_ROUTES } from "../../../src/config/apiRoutes.js";
+
+const router = Router();
+
+async function callGemini(prompt: string): Promise<string> {
+  const ai = getGeminiClient();
+  const response = await ai.models.generateContent({
+    model: "gemini-2.0-flash",
+    contents: [{ text: prompt }],
+  });
+  const text = response.candidates?.[0]?.content?.parts?.[0]?.text ?? "";
+  // Strip markdown code fences if present
+  return text
+    .replace(/^```html\n?/, "")
+    .replace(/^```\n?/, "")
+    .replace(/\n?```$/, "")
+    .trim();
+}
+
+interface HtmlPromptBody {
+  prompt: string;
+}
+
+interface HtmlSuccessResponse {
+  message: string;
+  instructions?: string;
+  title?: string;
+  data?: { html: string; type: string };
+  updating?: boolean;
+}
+
+interface HtmlErrorResponse {
+  message: string;
+}
+
+type HtmlResponse = HtmlSuccessResponse | HtmlErrorResponse;
+
+router.post(API_ROUTES.html.generate, async (req: Request<object, unknown, HtmlPromptBody>, res: Response<HtmlResponse>) => {
+  const { prompt } = req.body;
+  if (!prompt) {
+    res.status(400).json({ message: "prompt is required" });
+    return;
+  }
+  if (!isGeminiAvailable()) {
+    res.status(500).json({ message: "GEMINI_API_KEY is not set" });
+    return;
+  }
+  try {
+    const fullPrompt = `Generate a complete, standalone HTML page based on this description: ${prompt}\n\nRequirements:\n- Self-contained with all CSS and JS inline\n- Use Tailwind CSS via CDN if needed\n- Return only the HTML code, no explanation`;
+    const html = await callGemini(fullPrompt);
+
+    await writeCurrentHtml(html);
+    res.json({
+      message: "HTML generation succeeded",
+      instructions: "Acknowledge that the HTML was generated and has been presented to the user.",
+      title: prompt.slice(0, 50),
+      data: { html, type: "tailwind" },
+    });
+  } catch (err) {
+    res.status(500).json({ message: errorMessage(err) });
+  }
+});
+
+router.post(API_ROUTES.html.edit, async (req: Request<object, unknown, HtmlPromptBody>, res: Response<HtmlResponse>) => {
+  const { prompt } = req.body;
+  if (!prompt) {
+    res.status(400).json({ message: "prompt is required" });
+    return;
+  }
+  if (!isGeminiAvailable()) {
+    res.status(500).json({ message: "GEMINI_API_KEY is not set" });
+    return;
+  }
+  try {
+    const existingHtml = await readCurrentHtml();
+    if (!existingHtml?.trim()) {
+      res.status(400).json({
+        message: "No HTML page has been generated yet. Use generateHtml first.",
+      });
+      return;
+    }
+    const fullPrompt = `Modify the following HTML page based on this instruction: ${prompt}\n\nExisting HTML:\n${existingHtml}\n\nRequirements:\n- Return only the complete modified HTML, no explanation`;
+    const html = await callGemini(fullPrompt);
+    await writeCurrentHtml(html);
+    res.json({
+      message: "HTML editing succeeded",
+      instructions: "Acknowledge that the HTML was modified and has been presented to the user.",
+      title: prompt.slice(0, 50),
+      data: { html, type: "tailwind" },
+      updating: true,
+    });
+  } catch (err) {
+    res.status(500).json({ message: errorMessage(err) });
+  }
+});
+
+export default router;

package/server/api/routes/image.ts

@@ -0,0 +1,169 @@
+import { Router, Request, Response } from "express";
+import { getOptionalStringQuery } from "../../utils/request.js";
+import { getSessionImageData } from "../../events/session-store/index.js";
+import { generateGeminiImageContent, generateGeminiImageFromPrompt } from "../../utils/gemini.js";
+import { errorMessage } from "../../utils/errors.js";
+import { badRequest, serverError } from "../../utils/httpError.js";
+import { saveImage, overwriteImage, loadImageBase64, stripDataUri, isImagePath } from "../../utils/files/image-store.js";
+import { API_ROUTES } from "../../../src/config/apiRoutes.js";
+
+const router = Router();
+
+// ── Shared response helpers ──────────────────────────────────────
+
+interface ImageSuccessResponse {
+  message: string;
+  instructions?: string;
+  title?: string;
+  data?: { imageData: string; prompt: string };
+}
+
+interface ImageErrorResponse {
+  success: false;
+  message: string;
+}
+
+type ImageResponse = ImageSuccessResponse | ImageErrorResponse;
+
+// Shared save-and-respond for /generate-image and /edit-image. The
+// only difference between the two routes is how they obtain the raw
+// imageData from Gemini — once that's done, the "save to disk and
+// build the JSON response" step is identical.
+async function respondWithImage(
+  res: Response<ImageResponse>,
+  imageData: string | undefined,
+  fallbackMessage: string | undefined,
+  prompt: string,
+  kind: "generation" | "edit",
+): Promise<void> {
+  if (!imageData) {
+    res.json({ message: fallbackMessage ?? "no image data in response" });
+    return;
+  }
+  const imagePath = await saveImage(imageData);
+  const label = kind === "generation" ? "Generated" : "Edited";
+  res.json({
+    message: `image ${kind} succeeded`,
+    instructions: `Acknowledge that the image was ${kind === "generation" ? "generated" : "edited"} and has been presented to the user.`,
+    title: `${label} Image`,
+    data: { imageData: imagePath, prompt },
+  });
+}
+
+// ── Canvas image storage routes ──────────────────────────────────
+
+interface CanvasImageBody {
+  imageData: string;
+}
+
+interface CanvasImageResponse {
+  path: string;
+}
+
+interface CanvasImageError {
+  error: string;
+}
+
+async function saveCanvasImage(
+  res: Response<CanvasImageResponse | CanvasImageError>,
+  base64: string,
+  writeFn: (b64: string) => Promise<string>,
+): Promise<void> {
+  try {
+    const imagePath = await writeFn(base64);
+    res.json({ path: imagePath });
+  } catch (err) {
+    serverError(res, errorMessage(err));
+  }
+}
+
+// ── Routes ───────────────────────────────────────────────────────
+
+interface GenerateImageBody {
+  prompt: string;
+  model?: string;
+}
+
+router.post(API_ROUTES.image.generate, async (req: Request<object, unknown, GenerateImageBody>, res: Response<ImageResponse>) => {
+  const { prompt, model } = req.body;
+  if (!prompt) {
+    res.status(400).json({ success: false, message: "prompt is required" });
+    return;
+  }
+  try {
+    const { imageData, message } = await generateGeminiImageFromPrompt(prompt, model);
+    await respondWithImage(res, imageData, message, prompt, "generation");
+  } catch (err) {
+    res.status(500).json({ success: false, message: errorMessage(err) });
+  }
+});
+
+interface EditImageBody {
+  prompt: string;
+}
+
+router.post(API_ROUTES.image.edit, async (req: Request<object, unknown, EditImageBody>, res: Response<ImageResponse>) => {
+  const { prompt } = req.body;
+  const session = getOptionalStringQuery(req, "session");
+  if (!prompt) {
+    res.status(400).json({ success: false, message: "prompt is required" });
+    return;
+  }
+  const currentImageData = session ? getSessionImageData(session) : undefined;
+  if (!currentImageData) {
+    res.status(400).json({
+      success: false,
+      message: "No image is selected. Please click an image in the sidebar first, then ask me to edit it.",
+    });
+    return;
+  }
+  try {
+    // Resolve input image to raw base64 — supports both file paths and legacy data URIs
+    const base64Data = isImagePath(currentImageData) ? await loadImageBase64(currentImageData) : stripDataUri(currentImageData);
+    // /edit-image deliberately omits `config` (no aspectRatio) so
+    // Gemini preserves the input image's dimensions.
+    const { imageData, message } = await generateGeminiImageContent([
+      {
+        parts: [{ inlineData: { mimeType: "image/png", data: base64Data } }, { text: prompt }],
+      },
+    ]);
+    await respondWithImage(res, imageData, message, prompt, "edit");
+  } catch (err) {
+    res.status(500).json({ success: false, message: errorMessage(err) });
+  }
+});
+
+// Canvas image persistence — POST creates a new file, PUT overwrites.
+
+router.post(API_ROUTES.image.upload, async (req: Request<object, unknown, CanvasImageBody>, res: Response<CanvasImageResponse | CanvasImageError>) => {
+  const { imageData } = req.body;
+  if (!imageData) {
+    badRequest(res, "imageData is required");
+    return;
+  }
+  const base64 = stripDataUri(imageData);
+  await saveCanvasImage(res, base64, async (b64) => saveImage(b64));
+});
+
+router.put(
+  API_ROUTES.image.update,
+  async (req: Request<{ filename: string }, unknown, CanvasImageBody>, res: Response<CanvasImageResponse | CanvasImageError>) => {
+    const relativePath = `images/${req.params.filename}`;
+    const { imageData } = req.body;
+    if (!imageData || !relativePath) {
+      badRequest(res, "imageData and path are required");
+      return;
+    }
+    if (!isImagePath(relativePath)) {
+      badRequest(res, "invalid image path");
+      return;
+    }
+    const base64 = stripDataUri(imageData);
+    await saveCanvasImage(res, base64, async (b64) => {
+      await overwriteImage(relativePath, b64);
+      return relativePath;
+    });
+  },
+);
+
+export default router;