+ Page ${page.pageNumber} of ${total} — ${this.#escapeHtml(page.title)}
+ ${page.hashtags?.length ? `${page.hashtags.map(t => this.#escapeHtml(t)).join(" ")}` : ""}
+
+ ${sectionsHtml}
+
@@ -323,7 +329,7 @@ export class FolkPrompt extends FolkShape {
// Model select
this.#modelSelect?.addEventListener("change", () => {
- this.#model = this.#modelSelect?.value || "gemini-1.5-flash";
+ this.#model = this.#modelSelect?.value || "gemini-flash";
});
// Clear button
diff --git a/lib/folk-zine-gen.ts b/lib/folk-zine-gen.ts
new file mode 100644
index 0000000..5c433d7
--- /dev/null
+++ b/lib/folk-zine-gen.ts
@@ -0,0 +1,909 @@
+import { FolkShape } from "./folk-shape";
+import { css, html } from "./tags";
+
+const styles = css`
+ :host {
+ background: white;
+ border-radius: 8px;
+ box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+ min-width: 480px;
+ min-height: 560px;
+ }
+
+ .header {
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ padding: 8px 12px;
+ background: linear-gradient(135deg, #f59e0b, #ef4444);
+ color: white;
+ border-radius: 8px 8px 0 0;
+ font-size: 12px;
+ font-weight: 600;
+ cursor: move;
+ }
+
+ .header-title {
+ display: flex;
+ align-items: center;
+ gap: 6px;
+ }
+
+ .header-actions {
+ display: flex;
+ gap: 4px;
+ }
+
+ .header-actions button {
+ background: transparent;
+ border: none;
+ color: white;
+ cursor: pointer;
+ padding: 2px 6px;
+ border-radius: 4px;
+ font-size: 14px;
+ }
+
+ .header-actions button:hover {
+ background: rgba(255, 255, 255, 0.2);
+ }
+
+ .content {
+ display: flex;
+ flex-direction: column;
+ height: calc(100% - 36px);
+ overflow: hidden;
+ }
+
+ /* ── Phase: Ideation ── */
+ .ideation {
+ padding: 16px;
+ display: flex;
+ flex-direction: column;
+ gap: 12px;
+ }
+
+ .ideation h3 {
+ margin: 0;
+ font-size: 14px;
+ color: #1e293b;
+ }
+
+ .topic-input {
+ width: 100%;
+ padding: 10px 12px;
+ border: 2px solid #e2e8f0;
+ border-radius: 8px;
+ font-size: 13px;
+ resize: none;
+ outline: none;
+ font-family: inherit;
+ }
+
+ .topic-input:focus {
+ border-color: #f59e0b;
+ }
+
+ .options-row {
+ display: flex;
+ gap: 8px;
+ }
+
+ select {
+ padding: 6px 10px;
+ border: 2px solid #e2e8f0;
+ border-radius: 6px;
+ font-size: 12px;
+ background: white;
+ cursor: pointer;
+ flex: 1;
+ }
+
+ .generate-btn {
+ padding: 10px 20px;
+ background: linear-gradient(135deg, #f59e0b, #ef4444);
+ color: white;
+ border: none;
+ border-radius: 8px;
+ font-size: 13px;
+ font-weight: 600;
+ cursor: pointer;
+ transition: opacity 0.2s;
+ }
+
+ .generate-btn:hover { opacity: 0.9; }
+ .generate-btn:disabled { opacity: 0.5; cursor: not-allowed; }
+
+ /* ── Phase: Drafts / Feedback ── */
+ .pages-view {
+ flex: 1;
+ display: flex;
+ flex-direction: column;
+ overflow: hidden;
+ }
+
+ .page-nav {
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ padding: 8px 12px;
+ border-bottom: 1px solid #e2e8f0;
+ font-size: 12px;
+ color: #64748b;
+ }
+
+ .page-nav button {
+ padding: 4px 10px;
+ border: 1px solid #e2e8f0;
+ border-radius: 4px;
+ background: white;
+ cursor: pointer;
+ font-size: 12px;
+ }
+
+ .page-nav button:hover { background: #f1f5f9; }
+ .page-nav button:disabled { opacity: 0.3; cursor: not-allowed; }
+
+ .page-dots {
+ display: flex;
+ gap: 4px;
+ }
+
+ .page-dot {
+ width: 8px;
+ height: 8px;
+ border-radius: 50%;
+ background: #cbd5e1;
+ cursor: pointer;
+ border: none;
+ padding: 0;
+ }
+
+ .page-dot.active { background: #f59e0b; }
+ .page-dot.generated { background: #22c55e; }
+ .page-dot.generating { background: #f59e0b; animation: pulse 1s infinite; }
+
+ @keyframes pulse {
+ 0%, 100% { opacity: 1; }
+ 50% { opacity: 0.4; }
+ }
+
+ .page-content {
+ flex: 1;
+ overflow-y: auto;
+ padding: 12px;
+ }
+
+ /* ── Section rendering ── */
+ .section {
+ position: relative;
+ margin-bottom: 12px;
+ border: 1px solid #e2e8f0;
+ border-radius: 8px;
+ overflow: hidden;
+ transition: border-color 0.2s;
+ }
+
+ .section:hover {
+ border-color: #f59e0b;
+ }
+
+ .section-header {
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ padding: 4px 8px;
+ background: #f8fafc;
+ border-bottom: 1px solid #e2e8f0;
+ font-size: 10px;
+ color: #94a3b8;
+ text-transform: uppercase;
+ letter-spacing: 0.5px;
+ }
+
+ .section-actions {
+ display: flex;
+ gap: 2px;
+ }
+
+ .section-actions button {
+ padding: 2px 6px;
+ border: none;
+ background: transparent;
+ cursor: pointer;
+ font-size: 11px;
+ border-radius: 3px;
+ color: #64748b;
+ }
+
+ .section-actions button:hover {
+ background: #e2e8f0;
+ color: #1e293b;
+ }
+
+ .section-body {
+ padding: 8px 10px;
+ }
+
+ .section-text {
+ width: 100%;
+ border: none;
+ outline: none;
+ font-family: inherit;
+ font-size: 13px;
+ line-height: 1.5;
+ color: #1e293b;
+ background: transparent;
+ resize: none;
+ min-height: 24px;
+ overflow: hidden;
+ }
+
+ .section-text.headline {
+ font-size: 18px;
+ font-weight: 700;
+ }
+
+ .section-text.subhead {
+ font-size: 14px;
+ font-weight: 500;
+ color: #475569;
+ }
+
+ .section-text.pullquote {
+ font-style: italic;
+ border-left: 3px solid #f59e0b;
+ padding-left: 10px;
+ color: #64748b;
+ }
+
+ .section-image {
+ width: 100%;
+ border-radius: 4px;
+ display: block;
+ }
+
+ .section-image-placeholder {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ height: 120px;
+ background: #f1f5f9;
+ border-radius: 4px;
+ color: #94a3b8;
+ font-size: 12px;
+ }
+
+ /* ── Feedback input ── */
+ .feedback-row {
+ display: flex;
+ gap: 6px;
+ padding: 4px 8px 8px;
+ background: #fffbeb;
+ border-top: 1px solid #fde68a;
+ }
+
+ .feedback-input {
+ flex: 1;
+ padding: 6px 8px;
+ border: 1px solid #fde68a;
+ border-radius: 4px;
+ font-size: 11px;
+ outline: none;
+ font-family: inherit;
+ }
+
+ .feedback-input:focus { border-color: #f59e0b; }
+
+ .feedback-btn {
+ padding: 6px 10px;
+ background: #f59e0b;
+ color: white;
+ border: none;
+ border-radius: 4px;
+ font-size: 11px;
+ cursor: pointer;
+ white-space: nowrap;
+ }
+
+ .feedback-btn:disabled { opacity: 0.5; cursor: not-allowed; }
+
+ /* ── Bottom bar ── */
+ .bottom-bar {
+ padding: 8px 12px;
+ border-top: 1px solid #e2e8f0;
+ display: flex;
+ gap: 8px;
+ justify-content: space-between;
+ align-items: center;
+ }
+
+ .status {
+ font-size: 11px;
+ color: #64748b;
+ }
+
+ /* ── Loading ── */
+ .loading {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: center;
+ padding: 24px;
+ gap: 12px;
+ flex: 1;
+ }
+
+ .spinner {
+ width: 32px;
+ height: 32px;
+ border: 3px solid #e2e8f0;
+ border-top-color: #f59e0b;
+ border-radius: 50%;
+ animation: spin 1s linear infinite;
+ }
+
+ @keyframes spin {
+ to { transform: rotate(360deg); }
+ }
+
+ .error {
+ color: #ef4444;
+ padding: 12px;
+ background: #fef2f2;
+ border-radius: 6px;
+ font-size: 13px;
+ margin: 12px;
+ }
+
+ .placeholder {
+ flex: 1;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: center;
+ color: #94a3b8;
+ text-align: center;
+ gap: 8px;
+ padding: 24px;
+ }
+
+ .placeholder-icon {
+ font-size: 48px;
+ opacity: 0.5;
+ }
+
+ /* ── Progress bar ── */
+ .progress-bar {
+ height: 3px;
+ background: #e2e8f0;
+ border-radius: 2px;
+ overflow: hidden;
+ }
+
+ .progress-fill {
+ height: 100%;
+ background: linear-gradient(90deg, #f59e0b, #ef4444);
+ transition: width 0.5s ease;
+ }
+`;
+
+// ── Types ──
+
+interface ZineSection {
+ id: string;
+ type: "text" | "image";
+ content?: string;
+ imagePrompt?: string;
+ imageUrl?: string;
+}
+
+interface ZinePage {
+ pageNumber: number;
+ type: "cover" | "content" | "cta";
+ title: string;
+ sections: ZineSection[];
+ hashtags: string[];
+}
+
+type ZinePhase = "ideation" | "generating" | "editing" | "complete";
+
+declare global {
+ interface HTMLElementTagNameMap {
+ "folk-zine-gen": FolkZineGen;
+ }
+}
+
+export class FolkZineGen extends FolkShape {
+ static override tagName = "folk-zine-gen";
+
+ static {
+ const sheet = new CSSStyleSheet();
+ const parentRules = Array.from(FolkShape.styles.cssRules)
+ .map((r) => r.cssText)
+ .join("\n");
+ const childRules = Array.from(styles.cssRules)
+ .map((r) => r.cssText)
+ .join("\n");
+ sheet.replaceSync(`${parentRules}\n${childRules}`);
+ this.styles = sheet;
+ }
+
+ #phase: ZinePhase = "ideation";
+ #pages: ZinePage[] = [];
+ #currentPage = 0;
+ #isLoading = false;
+ #error: string | null = null;
+ #style = "punk-zine";
+ #tone = "informative";
+ #topic = "";
+ #generatingPage = 0; // 0 = not generating
+ #regeneratingSection: string | null = null;
+
+ // DOM refs
+ #contentEl: HTMLElement | null = null;
+
+ override createRenderRoot() {
+ const root = super.createRenderRoot();
+
+ const wrapper = document.createElement("div");
+ wrapper.innerHTML = html`
+ ) {
+ // Auto-resize
+ const autoResize = () => {
+ textarea.style.height = "auto";
+ textarea.style.height = textarea.scrollHeight + "px";
+ };
+ autoResize();
+ textarea.addEventListener("input", () => {
+ autoResize();
+ const sectionId = textarea.dataset.sectionId;
+ if (sectionId) {
+ const section = page.sections.find(s => s.id === sectionId);
+ if (section) section.content = textarea.value;
+ }
+ });
+ textarea.addEventListener("pointerdown", (e) => e.stopPropagation());
+ }
+
+ // Regenerate section buttons — show feedback row
+ for (const btn of this.#contentEl.querySelectorAll(".regen-section-btn") as NodeListOf) {
+ btn.addEventListener("click", (e) => {
+ e.stopPropagation();
+ const sectionId = btn.dataset.sectionId!;
+ const feedbackRow = this.#contentEl!.querySelector(`[data-feedback-for="${sectionId}"]`) as HTMLElement;
+ if (feedbackRow) {
+ const isVisible = feedbackRow.style.display !== "none";
+ // Hide all feedback rows first
+ for (const row of this.#contentEl!.querySelectorAll(".feedback-row") as NodeListOf) {
+ row.style.display = "none";
+ }
+ feedbackRow.style.display = isVisible ? "none" : "flex";
+ if (!isVisible) {
+ const input = feedbackRow.querySelector(".feedback-input") as HTMLInputElement;
+ input?.focus();
+ }
+ }
+ });
+ }
+
+ // Feedback submit buttons
+ for (const btn of this.#contentEl.querySelectorAll(".feedback-btn") as NodeListOf) {
+ btn.addEventListener("click", (e) => {
+ e.stopPropagation();
+ const sectionId = btn.dataset.sectionId!;
+ const input = this.#contentEl!.querySelector(`.feedback-input[data-section-id="${sectionId}"]`) as HTMLInputElement;
+ const feedback = input?.value.trim() || "";
+ this.#regenerateSection(sectionId, feedback);
+ });
+ }
+
+ // Feedback input enter key
+ for (const input of this.#contentEl.querySelectorAll(".feedback-input") as NodeListOf) {
+ input.addEventListener("keydown", (e) => {
+ if (e.key === "Enter") {
+ e.preventDefault();
+ const sectionId = input.dataset.sectionId!;
+ this.#regenerateSection(sectionId, input.value.trim());
+ }
+ });
+ input.addEventListener("pointerdown", (e) => e.stopPropagation());
+ }
+
+ // Download button
+ this.#contentEl.querySelector(".bottom-bar .generate-btn")?.addEventListener("click", (e) => {
+ e.stopPropagation();
+ this.#downloadZine();
+ });
+ }
+
+ async #regenerateSection(sectionId: string, feedback: string) {
+ const page = this.#pages[this.#currentPage];
+ const section = page?.sections.find(s => s.id === sectionId);
+ if (!section) return;
+
+ this.#regeneratingSection = sectionId;
+ this.#error = null;
+ this.#render();
+
+ try {
+ const res = await fetch("/api/zine/regenerate-section", {
+ method: "POST",
+ headers: { "Content-Type": "application/json" },
+ body: JSON.stringify({
+ section,
+ pageTitle: page.title,
+ style: this.#style,
+ tone: this.#tone,
+ feedback,
+ }),
+ });
+
+ if (!res.ok) throw new Error(`Regeneration failed: ${res.statusText}`);
+ const data = await res.json();
+
+ if (data.type === "text" && data.content) {
+ section.content = data.content;
+ } else if (data.type === "image" && data.url) {
+ section.imageUrl = data.url;
+ }
+ } catch (e: any) {
+ this.#error = e.message;
+ } finally {
+ this.#regeneratingSection = null;
+ this.#render();
+ }
+ }
+
+ #downloadZine() {
+ // Create a simple HTML document with all pages for printing
+ const pagesHtml = this.#pages.map(page => {
+ const sectionsHtml = page.sections.map(s => {
+ if (s.type === "text") {
+ const tag = s.id === "headline" ? "h1" : s.id === "subhead" ? "h2" : s.id === "pullquote" ? "blockquote" : "p";
+ return `<${tag}>${this.#escapeHtml(s.content || "")}`;
+ }
+ if (s.type === "image" && s.imageUrl) {
+ return `})
`;
+ }
+ return "";
+ }).join("\n");
+
+ return `MycroZine: ${this.#escapeHtml(this.#topic)}
+
+${pagesHtml}`;
+
+ const blob = new Blob([doc], { type: "text/html" });
+ const url = URL.createObjectURL(blob);
+ const a = document.createElement("a");
+ a.href = url;
+ a.download = `mycrozine-${Date.now()}.html`;
+ a.click();
+ URL.revokeObjectURL(url);
+ }
+
+ #escapeHtml(text: string): string {
+ const div = document.createElement("div");
+ div.textContent = text;
+ return div.innerHTML;
+ }
+
+ override toJSON() {
+ return {
+ ...super.toJSON(),
+ type: "folk-zine-gen",
+ phase: this.#phase,
+ topic: this.#topic,
+ style: this.#style,
+ tone: this.#tone,
+ pages: this.#pages,
+ currentPage: this.#currentPage,
+ };
+ }
+}
diff --git a/lib/index.ts b/lib/index.ts
index f56c0c8..2ac5d62 100644
--- a/lib/index.ts
+++ b/lib/index.ts
@@ -37,6 +37,7 @@ export * from "./folk-map";
export * from "./folk-image-gen";
export * from "./folk-video-gen";
export * from "./folk-prompt";
+export * from "./folk-zine-gen";
export * from "./folk-transcription";
// Creative Tools Shapes
diff --git a/package.json b/package.json
index 3b7b8f3..bb1cbb3 100644
--- a/package.json
+++ b/package.json
@@ -16,6 +16,8 @@
"@automerge/automerge": "^2.2.8",
"@aws-sdk/client-s3": "^3.700.0",
"@encryptid/sdk": "file:../encryptid-sdk",
+ "@google/genai": "^1.43.0",
+ "@google/generative-ai": "^0.24.1",
"@lit/reactive-element": "^2.0.4",
"@noble/curves": "^1.8.0",
"@noble/hashes": "^1.7.0",
diff --git a/server/index.ts b/server/index.ts
index 7293711..732fe96 100644
--- a/server/index.ts
+++ b/server/index.ts
@@ -136,6 +136,21 @@ app.get("/.well-known/webauthn", (c) => {
);
});
+// ── Serve generated files from /data/files/generated/ ──
+app.get("/data/files/generated/:filename", async (c) => {
+ const filename = c.req.param("filename");
+ if (!filename || filename.includes("..") || filename.includes("/")) {
+ return c.json({ error: "Invalid filename" }, 400);
+ }
+ const dir = resolve(process.env.FILES_DIR || "./data/files", "generated");
+ const filePath = resolve(dir, filename);
+ const file = Bun.file(filePath);
+ if (!(await file.exists())) return c.notFound();
+ const ext = filename.split(".").pop() || "";
+ const mimeMap: Record = { png: "image/png", jpg: "image/jpeg", jpeg: "image/jpeg", webp: "image/webp" };
+ return new Response(file, { headers: { "Content-Type": mimeMap[ext] || "application/octet-stream", "Cache-Control": "public, max-age=86400" } });
+});
+
// ── Space registry API ──
app.route("/api/spaces", spaces);
@@ -500,6 +515,7 @@ app.post("/api/x402-test", async (c) => {
// ── Creative tools API endpoints ──
const FAL_KEY = process.env.FAL_KEY || "";
+const GEMINI_API_KEY = process.env.GEMINI_API_KEY || "";
// Image generation via fal.ai Flux Pro
app.post("/api/image-gen", async (c) => {
@@ -762,6 +778,349 @@ app.post("/api/freecad/:action", async (c) => {
}
});
+// ── Multi-provider prompt endpoint ──
+const GEMINI_MODELS: Record = {
+ "gemini-flash": "gemini-2.0-flash-exp",
+ "gemini-pro": "gemini-1.5-pro",
+};
+const OLLAMA_MODELS: Record = {
+ "llama3.2": "llama3.2:3b",
+ "llama3.1": "llama3.1:8b",
+ "qwen2.5-coder": "qwen2.5-coder:7b",
+ "mistral-small": "mistral-small:24b",
+};
+
+app.post("/api/prompt", async (c) => {
+ const { messages, model = "gemini-flash" } = await c.req.json();
+ if (!messages?.length) return c.json({ error: "messages required" }, 400);
+
+ // Determine provider
+ if (GEMINI_MODELS[model]) {
+ if (!GEMINI_API_KEY) return c.json({ error: "GEMINI_API_KEY not configured" }, 503);
+
+ const { GoogleGenerativeAI } = await import("@google/generative-ai");
+ const genAI = new GoogleGenerativeAI(GEMINI_API_KEY);
+ const geminiModel = genAI.getGenerativeModel({ model: GEMINI_MODELS[model] });
+
+ // Convert chat messages to Gemini contents format
+ const contents = messages.map((m: { role: string; content: string }) => ({
+ role: m.role === "assistant" ? "model" : "user",
+ parts: [{ text: m.content }],
+ }));
+
+ try {
+ const result = await geminiModel.generateContent({ contents });
+ const text = result.response.text();
+ return c.json({ content: text });
+ } catch (e: any) {
+ console.error("[prompt] Gemini error:", e.message);
+ return c.json({ error: "Gemini request failed" }, 502);
+ }
+ }
+
+ if (OLLAMA_MODELS[model]) {
+ try {
+ const ollamaRes = await fetch(`${OLLAMA_URL}/api/chat`, {
+ method: "POST",
+ headers: { "Content-Type": "application/json" },
+ body: JSON.stringify({
+ model: OLLAMA_MODELS[model],
+ messages: messages.map((m: { role: string; content: string }) => ({
+ role: m.role,
+ content: m.content,
+ })),
+ stream: false,
+ }),
+ });
+
+ if (!ollamaRes.ok) {
+ const err = await ollamaRes.text();
+ console.error("[prompt] Ollama error:", err);
+ return c.json({ error: "Ollama request failed" }, 502);
+ }
+
+ const data = await ollamaRes.json();
+ return c.json({ content: data.message?.content || "" });
+ } catch (e: any) {
+ console.error("[prompt] Ollama unreachable:", e.message);
+ return c.json({ error: "Ollama unreachable" }, 503);
+ }
+ }
+
+ return c.json({ error: `Unknown model: ${model}` }, 400);
+});
+
+// ── Gemini image generation ──
+app.post("/api/gemini/image", async (c) => {
+ if (!GEMINI_API_KEY) return c.json({ error: "GEMINI_API_KEY not configured" }, 503);
+
+ const { prompt, style, aspect_ratio } = await c.req.json();
+ if (!prompt) return c.json({ error: "prompt required" }, 400);
+
+ const styleHints: Record = {
+ photorealistic: "photorealistic, high detail, natural lighting, ",
+ illustration: "digital illustration, clean lines, vibrant colors, ",
+ painting: "oil painting style, brushstrokes visible, painterly, ",
+ sketch: "pencil sketch, hand-drawn, line art, ",
+ "punk-zine": "punk zine aesthetic, xerox texture, high contrast, DIY, rough edges, ",
+ collage: "cut-and-paste collage, mixed media, layered paper textures, ",
+ vintage: "vintage aesthetic, retro colors, aged paper texture, ",
+ minimalist: "minimalist design, simple shapes, limited color palette, ",
+ };
+ const enhancedPrompt = (styleHints[style] || "") + prompt;
+
+ const { GoogleGenAI } = await import("@google/genai");
+ const ai = new GoogleGenAI({ apiKey: GEMINI_API_KEY });
+
+ const models = ["gemini-2.0-flash-exp", "imagen-3.0-generate-002"];
+ for (const modelName of models) {
+ try {
+ if (modelName.startsWith("gemini")) {
+ const result = await ai.models.generateContent({
+ model: modelName,
+ contents: enhancedPrompt,
+ config: { responseModalities: ["Text", "Image"] },
+ });
+
+ const parts = result.candidates?.[0]?.content?.parts || [];
+ for (const part of parts) {
+ if ((part as any).inlineData) {
+ const { data: b64, mimeType } = (part as any).inlineData;
+ const ext = mimeType?.includes("png") ? "png" : "jpg";
+ const filename = `gemini-${Date.now()}.${ext}`;
+ const dir = resolve(process.env.FILES_DIR || "./data/files", "generated");
+ await Bun.write(resolve(dir, filename), Buffer.from(b64, "base64"));
+ const url = `/data/files/generated/${filename}`;
+ return c.json({ url, image_url: url });
+ }
+ }
+ } else {
+ // Imagen API
+ const result = await ai.models.generateImages({
+ model: modelName,
+ prompt: enhancedPrompt,
+ config: {
+ numberOfImages: 1,
+ aspectRatio: aspect_ratio || "3:4",
+ },
+ });
+ const img = (result as any).generatedImages?.[0];
+ if (img?.image?.imageBytes) {
+ const filename = `imagen-${Date.now()}.png`;
+ const dir = resolve(process.env.FILES_DIR || "./data/files", "generated");
+ await Bun.write(resolve(dir, filename), Buffer.from(img.image.imageBytes, "base64"));
+ const url = `/data/files/generated/${filename}`;
+ return c.json({ url, image_url: url });
+ }
+ }
+ } catch (e: any) {
+ console.error(`[gemini/image] ${modelName} error:`, e.message);
+ continue;
+ }
+ }
+
+ return c.json({ error: "All Gemini image models failed" }, 502);
+});
+
+// ── Zine generation endpoints ──
+
+const ZINE_STYLES: Record = {
+ "punk-zine": "Xerox texture, high contrast B&W, DIY collage, hand-drawn typography",
+ mycelial: "Organic networks, spore patterns, earth tones, fungal textures, interconnected webs",
+ minimal: "Clean lines, white space, modern sans-serif, subtle gradients",
+ collage: "Layered imagery, mixed media textures, vintage photographs",
+ retro: "1970s aesthetic, earth tones, groovy typography, halftone patterns",
+ academic: "Diagram-heavy, annotated illustrations, infographic elements",
+};
+
+const ZINE_TONES: Record = {
+ rebellious: "Defiant, anti-establishment, punk energy",
+ regenerative: "Hopeful, nature-inspired, healing, systems-thinking",
+ playful: "Fun, whimsical, approachable",
+ informative: "Educational, clear, accessible",
+ poetic: "Lyrical, metaphorical, evocative",
+};
+
+app.post("/api/zine/outline", async (c) => {
+ if (!GEMINI_API_KEY) return c.json({ error: "GEMINI_API_KEY not configured" }, 503);
+
+ const { topic, style = "punk-zine", tone = "informative", pageCount = 8 } = await c.req.json();
+ if (!topic) return c.json({ error: "topic required" }, 400);
+
+ const { GoogleGenerativeAI } = await import("@google/generative-ai");
+ const genAI = new GoogleGenerativeAI(GEMINI_API_KEY);
+ const model = genAI.getGenerativeModel({ model: "gemini-1.5-pro" });
+
+ const systemPrompt = `You are a zine designer creating a ${pageCount}-page MycroZine.
+Style: ${ZINE_STYLES[style] || style}
+Tone: ${ZINE_TONES[tone] || tone}
+
+Create a structured outline for a zine about: "${topic}"
+
+Each page has sections that will be generated independently. Return ONLY valid JSON (no markdown fences):
+{
+ "pages": [
+ {
+ "pageNumber": 1,
+ "type": "cover",
+ "title": "...",
+ "sections": [
+ { "id": "headline", "type": "text", "content": "Main headline text" },
+ { "id": "subhead", "type": "text", "content": "Subtitle or tagline" },
+ { "id": "hero", "type": "image", "imagePrompt": "Detailed image description for cover art" }
+ ],
+ "hashtags": ["#tag1"]
+ },
+ {
+ "pageNumber": 2,
+ "type": "content",
+ "title": "...",
+ "sections": [
+ { "id": "heading", "type": "text", "content": "Section heading" },
+ { "id": "body", "type": "text", "content": "Main body text (2-3 paragraphs)" },
+ { "id": "pullquote", "type": "text", "content": "A punchy pull quote" },
+ { "id": "visual", "type": "image", "imagePrompt": "Detailed description for page illustration" }
+ ],
+ "hashtags": ["#tag"]
+ }
+ ]
+}
+
+Rules:
+- Page 1 is always "cover" type with headline, subhead, hero image
+- Pages 2-${pageCount - 1} are "content" with heading, body, pullquote, visual
+- Page ${pageCount} is "cta" (call-to-action) with heading, body, action, visual
+- Each image prompt should be highly specific, matching the ${style} style
+- Text content should match the ${tone} tone
+- Make body text substantive (2-3 short paragraphs each)`;
+
+ try {
+ const result = await model.generateContent(systemPrompt);
+ const text = result.response.text();
+ // Parse JSON (strip markdown fences if present)
+ const jsonStr = text.replace(/```json\n?/g, "").replace(/```\n?/g, "").trim();
+ const outline = JSON.parse(jsonStr);
+ return c.json(outline);
+ } catch (e: any) {
+ console.error("[zine/outline] error:", e.message);
+ return c.json({ error: "Failed to generate outline" }, 502);
+ }
+});
+
+app.post("/api/zine/page", async (c) => {
+ if (!GEMINI_API_KEY) return c.json({ error: "GEMINI_API_KEY not configured" }, 503);
+
+ const { outline, style = "punk-zine", tone = "informative" } = await c.req.json();
+ if (!outline?.pageNumber) return c.json({ error: "outline required with pageNumber" }, 400);
+
+ // Find all image sections and generate them
+ const imageSections = (outline.sections || []).filter((s: any) => s.type === "image");
+ const generatedImages: Record = {};
+
+ const { GoogleGenAI } = await import("@google/genai");
+ const ai = new GoogleGenAI({ apiKey: GEMINI_API_KEY });
+
+ for (const section of imageSections) {
+ const styleDesc = ZINE_STYLES[style] || style;
+ const toneDesc = ZINE_TONES[tone] || tone;
+ const enhancedPrompt = `${styleDesc} style, ${toneDesc} mood. ${section.imagePrompt}. For a zine page about "${outline.title}".`;
+
+ try {
+ const result = await ai.models.generateContent({
+ model: "gemini-2.0-flash-exp",
+ contents: enhancedPrompt,
+ config: { responseModalities: ["Text", "Image"] },
+ });
+
+ const parts = result.candidates?.[0]?.content?.parts || [];
+ for (const part of parts) {
+ if ((part as any).inlineData) {
+ const { data: b64, mimeType } = (part as any).inlineData;
+ const ext = mimeType?.includes("png") ? "png" : "jpg";
+ const filename = `zine-p${outline.pageNumber}-${section.id}-${Date.now()}.${ext}`;
+ const dir = resolve(process.env.FILES_DIR || "./data/files", "generated");
+ await Bun.write(resolve(dir, filename), Buffer.from(b64, "base64"));
+ generatedImages[section.id] = `/data/files/generated/${filename}`;
+ break;
+ }
+ }
+ } catch (e: any) {
+ console.error(`[zine/page] Image gen failed for ${section.id}:`, e.message);
+ }
+ }
+
+ return c.json({
+ pageNumber: outline.pageNumber,
+ images: generatedImages,
+ outline,
+ });
+});
+
+app.post("/api/zine/regenerate-section", async (c) => {
+ if (!GEMINI_API_KEY) return c.json({ error: "GEMINI_API_KEY not configured" }, 503);
+
+ const { section, pageTitle, style = "punk-zine", tone = "informative", feedback = "" } = await c.req.json();
+ if (!section?.id) return c.json({ error: "section with id required" }, 400);
+
+ if (section.type === "image") {
+ // Regenerate image with feedback
+ const { GoogleGenAI } = await import("@google/genai");
+ const ai = new GoogleGenAI({ apiKey: GEMINI_API_KEY });
+
+ const styleDesc = ZINE_STYLES[style] || style;
+ const toneDesc = ZINE_TONES[tone] || tone;
+ const enhancedPrompt = `${styleDesc} style, ${toneDesc} mood. ${section.imagePrompt}. For a zine page about "${pageTitle}".${feedback ? ` User feedback: ${feedback}` : ""}`;
+
+ try {
+ const result = await ai.models.generateContent({
+ model: "gemini-2.0-flash-exp",
+ contents: enhancedPrompt,
+ config: { responseModalities: ["Text", "Image"] },
+ });
+
+ const parts = result.candidates?.[0]?.content?.parts || [];
+ for (const part of parts) {
+ if ((part as any).inlineData) {
+ const { data: b64, mimeType } = (part as any).inlineData;
+ const ext = mimeType?.includes("png") ? "png" : "jpg";
+ const filename = `zine-regen-${section.id}-${Date.now()}.${ext}`;
+ const dir = resolve(process.env.FILES_DIR || "./data/files", "generated");
+ await Bun.write(resolve(dir, filename), Buffer.from(b64, "base64"));
+ return c.json({ sectionId: section.id, type: "image", url: `/data/files/generated/${filename}` });
+ }
+ }
+ return c.json({ error: "No image generated" }, 502);
+ } catch (e: any) {
+ console.error("[zine/regenerate-section] image error:", e.message);
+ return c.json({ error: "Image regeneration failed" }, 502);
+ }
+ }
+
+ if (section.type === "text") {
+ // Regenerate text via Gemini
+ const { GoogleGenerativeAI } = await import("@google/generative-ai");
+ const genAI = new GoogleGenerativeAI(GEMINI_API_KEY);
+ const model = genAI.getGenerativeModel({ model: "gemini-2.0-flash-exp" });
+
+ const toneDesc = ZINE_TONES[tone] || tone;
+ const prompt = `Rewrite this zine text section. Section type: "${section.id}". Page title: "${pageTitle}". Tone: ${toneDesc}.
+Current text: "${section.content}"
+${feedback ? `User feedback: ${feedback}` : "Make it punchier and more engaging."}
+
+Return ONLY the new text, no quotes or explanation.`;
+
+ try {
+ const result = await model.generateContent(prompt);
+ return c.json({ sectionId: section.id, type: "text", content: result.response.text().trim() });
+ } catch (e: any) {
+ console.error("[zine/regenerate-section] text error:", e.message);
+ return c.json({ error: "Text regeneration failed" }, 502);
+ }
+ }
+
+ return c.json({ error: `Unknown section type: ${section.type}` }, 400);
+});
+
// ── Auto-provision personal space ──
app.post("/api/spaces/auto-provision", async (c) => {
const token = extractToken(c.req.raw.headers);
@@ -1735,6 +2094,10 @@ const server = Bun.serve({
}
})();
+// Ensure generated files directory exists
+import { mkdirSync } from "node:fs";
+try { mkdirSync(resolve(process.env.FILES_DIR || "./data/files", "generated"), { recursive: true }); } catch {}
+
ensureDemoCommunity().then(() => console.log("[Demo] Demo community ready")).catch((e) => console.error("[Demo] Failed:", e));
loadAllDocs(syncServer)
.then(() => ensureTemplateSeeding())
diff --git a/website/canvas.html b/website/canvas.html
index 61e3c8d..f1b27db 100644
--- a/website/canvas.html
+++ b/website/canvas.html
@@ -1356,6 +1356,7 @@
folk-image-gen,
folk-video-gen,
folk-prompt,
+ folk-zine-gen,
folk-transcription,
folk-video-chat,
folk-obs-note,
@@ -1376,31 +1377,32 @@
folk-drawfast,
folk-freecad,
folk-kicad,
+ folk-zine-gen,
folk-rapp {
position: absolute;
}
.connect-mode :is(folk-markdown, folk-wrapper, folk-slide, folk-chat,
folk-google-item, folk-piano, folk-embed, folk-calendar, folk-map,
- folk-image-gen, folk-video-gen, folk-prompt, folk-transcription,
+ folk-image-gen, folk-video-gen, folk-prompt, folk-zine-gen, folk-transcription,
folk-video-chat, folk-obs-note, folk-workflow-block,
folk-itinerary, folk-destination, folk-budget, folk-packing-list,
folk-booking, folk-token-mint, folk-token-ledger,
folk-choice-vote, folk-choice-rank, folk-choice-spider,
folk-social-post, folk-splat, folk-blender, folk-drawfast,
- folk-freecad, folk-kicad, folk-rapp) {
+ folk-freecad, folk-kicad, folk-zine-gen, folk-rapp) {
cursor: crosshair;
}
.connect-mode :is(folk-markdown, folk-wrapper, folk-slide, folk-chat,
folk-google-item, folk-piano, folk-embed, folk-calendar, folk-map,
- folk-image-gen, folk-video-gen, folk-prompt, folk-transcription,
+ folk-image-gen, folk-video-gen, folk-prompt, folk-zine-gen, folk-transcription,
folk-video-chat, folk-obs-note, folk-workflow-block,
folk-itinerary, folk-destination, folk-budget, folk-packing-list,
folk-booking, folk-token-mint, folk-token-ledger,
folk-choice-vote, folk-choice-rank, folk-choice-spider,
folk-social-post, folk-splat, folk-blender, folk-drawfast,
- folk-freecad, folk-kicad, folk-rapp):hover {
+ folk-freecad, folk-kicad, folk-zine-gen, folk-rapp):hover {
outline: 2px dashed #3b82f6;
outline-offset: 4px;
}
@@ -1790,6 +1792,7 @@
+
+ 📰
+ Zine Generator
+
+
+
+ `;
+
+ const slot = root.querySelector("slot");
+ const containerDiv = slot?.parentElement as HTMLElement;
+ if (containerDiv) {
+ containerDiv.replaceWith(wrapper);
+ }
+
+ this.#contentEl = wrapper.querySelector(".content");
+ const resetBtn = wrapper.querySelector(".reset-btn") as HTMLButtonElement;
+ const closeBtn = wrapper.querySelector(".close-btn") as HTMLButtonElement;
+
+ resetBtn.addEventListener("click", (e) => {
+ e.stopPropagation();
+ this.#reset();
+ });
+
+ closeBtn.addEventListener("click", (e) => {
+ e.stopPropagation();
+ this.dispatchEvent(new CustomEvent("close"));
+ });
+
+ this.#render();
+ return root;
+ }
+
+ #reset() {
+ this.#phase = "ideation";
+ this.#pages = [];
+ this.#currentPage = 0;
+ this.#isLoading = false;
+ this.#error = null;
+ this.#generatingPage = 0;
+ this.#regeneratingSection = null;
+ this.#render();
+ }
+
+ #render() {
+ if (!this.#contentEl) return;
+
+ switch (this.#phase) {
+ case "ideation":
+ this.#renderIdeation();
+ break;
+ case "generating":
+ this.#renderGenerating();
+ break;
+ case "editing":
+ case "complete":
+ this.#renderEditing();
+ break;
+ }
+ }
+
+ // ── Ideation Phase ──
+
+ #renderIdeation() {
+ if (!this.#contentEl) return;
+ this.#contentEl.innerHTML = `
+
+
+
+
+
+
+ `;
+
+ const topicInput = this.#contentEl.querySelector(".topic-input") as HTMLTextAreaElement;
+ const styleSelect = this.#contentEl.querySelector(".style-select") as HTMLSelectElement;
+ const toneSelect = this.#contentEl.querySelector(".tone-select") as HTMLSelectElement;
+ const genBtn = this.#contentEl.querySelector(".generate-btn") as HTMLButtonElement;
+
+ topicInput?.addEventListener("input", () => { this.#topic = topicInput.value; });
+ topicInput?.addEventListener("pointerdown", (e) => e.stopPropagation());
+ styleSelect?.addEventListener("change", () => { this.#style = styleSelect.value; });
+ toneSelect?.addEventListener("change", () => { this.#tone = toneSelect.value; });
+ genBtn?.addEventListener("click", (e) => {
+ e.stopPropagation();
+ this.#generateOutline();
+ });
+ }
+
+ async #generateOutline() {
+ if (!this.#topic.trim() || this.#isLoading) return;
+
+ this.#isLoading = true;
+ this.#error = null;
+ this.#render();
+
+ try {
+ const res = await fetch("/api/zine/outline", {
+ method: "POST",
+ headers: { "Content-Type": "application/json" },
+ body: JSON.stringify({
+ topic: this.#topic,
+ style: this.#style,
+ tone: this.#tone,
+ }),
+ });
+
+ if (!res.ok) throw new Error(`Outline generation failed: ${res.statusText}`);
+ const data = await res.json();
+ this.#pages = data.pages || [];
+ this.#currentPage = 0;
+ this.#phase = "generating";
+ this.#isLoading = false;
+ this.#render();
+
+ // Start generating page images sequentially
+ await this.#generateAllPages();
+ } catch (e: any) {
+ this.#error = e.message;
+ this.#isLoading = false;
+ this.#render();
+ }
+ }
+
+ // ── Generating Phase ──
+
+ #renderGenerating() {
+ if (!this.#contentEl) return;
+ const total = this.#pages.length;
+ const progress = this.#generatingPage > 0 ? ((this.#generatingPage - 1) / total) * 100 : 0;
+
+ this.#contentEl.innerHTML = `
+ Create a MycroZine
+ + + + ${this.#error ? `${this.#escapeHtml(this.#error)}
` : ""}
+
+
+ Generating page ${this.#generatingPage} of ${total}...
+
+ ${this.#pages[this.#generatingPage - 1]?.title || ""}
+
+ `;
+ }
+
+ async #generateAllPages() {
+ for (let i = 0; i < this.#pages.length; i++) {
+ this.#generatingPage = i + 1;
+ this.#render();
+
+ try {
+ const res = await fetch("/api/zine/page", {
+ method: "POST",
+ headers: { "Content-Type": "application/json" },
+ body: JSON.stringify({
+ outline: this.#pages[i],
+ style: this.#style,
+ tone: this.#tone,
+ }),
+ });
+
+ if (res.ok) {
+ const data = await res.json();
+ // Update image URLs in sections
+ if (data.images) {
+ for (const section of this.#pages[i].sections) {
+ if (section.type === "image" && data.images[section.id]) {
+ section.imageUrl = data.images[section.id];
+ }
+ }
+ }
+ }
+ } catch (e: any) {
+ console.error(`[zine-gen] Page ${i + 1} generation failed:`, e.message);
+ }
+ }
+
+ this.#generatingPage = 0;
+ this.#phase = "editing";
+ this.#render();
+ }
+
+ // ── Editing Phase (with editable text + per-section regeneration) ──
+
+ #renderEditing() {
+ if (!this.#contentEl) return;
+ const page = this.#pages[this.#currentPage];
+ if (!page) return;
+
+ const total = this.#pages.length;
+ const dots = this.#pages.map((p, i) => {
+ const cls = i === this.#currentPage ? "active" : (p.sections.some(s => s.type === "image" && s.imageUrl) ? "generated" : "");
+ return ``;
+ }).join("");
+
+ let sectionsHtml = "";
+ for (const section of page.sections) {
+ const isRegenerating = this.#regeneratingSection === section.id;
+ const sectionLabel = section.id.replace(/([A-Z])/g, " $1").replace(/^./, (s) => s.toUpperCase());
+
+ sectionsHtml += ``;
+ sectionsHtml += `
`;
+ }
+
+ this.#contentEl.innerHTML = `
+
+ ${this.#escapeHtml(sectionLabel)}
+
`;
+
+ if (section.type === "text") {
+ const textClass = section.id === "headline" ? "headline" :
+ section.id === "subhead" ? "subhead" :
+ section.id === "pullquote" ? "pullquote" : "";
+ sectionsHtml += `
+
+
+
+
+
`;
+ } else if (section.type === "image") {
+ sectionsHtml += ``;
+ if (section.imageUrl) {
+ sectionsHtml += `})
`;
+ } else {
+ sectionsHtml += `
`;
+ }
+
+ // Feedback row for regeneration
+ sectionsHtml += ``;
+
+ sectionsHtml += `${isRegenerating ? '' : "No image yet — click ↻ to generate"}
`;
+ }
+ sectionsHtml += `
+
+
+ ${dots}
+
+
+
+
+ ${this.#error ? `${this.#escapeHtml(this.#error)}
` : ""}
+ `;
+
+ // ── Wire up event listeners ──
+
+ // Page navigation
+ this.#contentEl.querySelector(".prev-btn")?.addEventListener("click", (e) => {
+ e.stopPropagation();
+ if (this.#currentPage > 0) { this.#currentPage--; this.#render(); }
+ });
+ this.#contentEl.querySelector(".next-btn")?.addEventListener("click", (e) => {
+ e.stopPropagation();
+ if (this.#currentPage < this.#pages.length - 1) { this.#currentPage++; this.#render(); }
+ });
+
+ // Page dots
+ for (const dot of this.#contentEl.querySelectorAll(".page-dot")) {
+ dot.addEventListener("click", (e) => {
+ e.stopPropagation();
+ this.#currentPage = parseInt((dot as HTMLElement).dataset.page || "0");
+ this.#render();
+ });
+ }
+
+ // Editable text areas — auto-resize and save
+ for (const textarea of this.#contentEl.querySelectorAll(".section-text") as NodeListOf
+ ${sectionsHtml}
+
`;
+ }).join("\n");
+
+ const doc = `
+${page.hashtags?.join(" ") || ""}
+