jeffemmett
/
rspace-online
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Merge branch 'dev'

This commit is contained in:
Jeff Emmett 2026-03-25 16:51:40 -07:00
parent 038e9030db c046acf9ce
commit 07c07eff5c
4 changed files with 198 additions and 40 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
lib/index.ts
View File

@ -49,6 +49,7 @@ export * from "./folk-blender";
export * from "./folk-drawfast";
export * from "./folk-freecad";
export * from "./folk-kicad";
export * from "./folk-design-agent";
// Advanced Shapes
export * from "./folk-video-chat";

180
modules/rdesign/mod.ts
View File

@ -500,19 +500,179 @@ function renderDesignApp(space: string, novncUrl: string): string {
}
function renderDesignLanding(): string {
return `<div style="max-width:640px;margin:0 auto;padding:3rem 1rem;text-align:center">
<div style="font-size:3rem;margin-bottom:1rem">&#x1f3af;</div>
<h2 style="font-size:1.5rem;margin-bottom:0.75rem;background:linear-gradient(135deg,#7c3aed,#a78bfa);-webkit-background-clip:text;-webkit-text-fill-color:transparent">rDesign</h2>
<p style="color:#94a3b8;margin-bottom:1rem;line-height:1.6">AI-powered DTP workspace. Describe what you want and the design agent builds it in Scribus — posters, flyers, brochures, and print-ready documents.</p>
<p style="color:#64748b;font-size:0.85rem;margin-bottom:2rem">Text in, design out. No mouse interaction needed.</p>
<a href="?" class="rapp-nav__btn--app-toggle" style="display:inline-block;padding:10px 24px;font-size:0.9rem">Open rDesign</a>
</div>`;
return `
<!-- Hero -->
<div class="rl-hero">
<span class="rl-tagline">rDesign</span>
<h1 class="rl-heading" style="background:linear-gradient(135deg,#7c3aed,#a78bfa);-webkit-background-clip:text;background-clip:text">(You)rDesign, text in &mdash; design out.</h1>
<p class="rl-subtitle" style="background:linear-gradient(135deg,#7c3aed,#a78bfa);-webkit-background-clip:text;background-clip:text">AI-Powered Desktop Publishing with Scribus</p>
<p class="rl-subtext">
Describe what you want and the design agent builds it &mdash; posters, flyers, brochures, zines, and print-ready documents.
No mouse interaction needed. Powered by Gemini tool-calling and Scribus under the hood.
</p>
<div class="rl-cta-row">
<a href="https://demo.rspace.online/rdesign" class="rl-cta-primary">Open rDesign</a>
<a href="#how-it-works" class="rl-cta-secondary">How It Works</a>
</div>
</div>
<!-- What It Handles -->
<section class="rl-section">
<div class="rl-container">
<h2 class="rl-heading" style="text-align:center">What rDesign Handles</h2>
<div class="rl-grid-3">
<div class="rl-card rl-card--center">
<div class="rl-icon-box">&#128196;</div>
<h3>Posters &amp; Flyers</h3>
<p>Describe your event, campaign, or announcement and get a print-ready poster with proper typography, layout, and image placement.</p>
</div>
<div class="rl-card rl-card--center">
<div class="rl-icon-box">&#128218;</div>
<h3>Brochures &amp; Zines</h3>
<p>Multi-page layouts with text flow, columns, and image frames. Perfect for newsletters, pamphlets, and small publications.</p>
</div>
<div class="rl-card rl-card--center">
<div class="rl-icon-box">&#127912;</div>
<h3>Brand Assets</h3>
<p>Business cards, letterheads, social media graphics. Consistent typography and color from a single design brief.</p>
</div>
</div>
</div>
</section>
<!-- How It Works -->
<section class="rl-section rl-section--alt" id="how-it-works">
<div class="rl-container">
<h2 class="rl-heading" style="text-align:center">How It Works</h2>
<div class="rl-grid-4" style="display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:1.5rem">
<div class="rl-step">
<div class="rl-step__num">1</div>
<h3>Describe</h3>
<p>Write a natural-language brief &mdash; &ldquo;A3 poster for a jazz night, deep blue background, gold accents, vintage feel.&rdquo;</p>
</div>
<div class="rl-step">
<div class="rl-step__num">2</div>
<h3>Agent Plans</h3>
<p>The AI agent decomposes your brief into Scribus operations: document size, text frames, image placement, colors, and fonts.</p>
</div>
<div class="rl-step">
<div class="rl-step__num">3</div>
<h3>Live Preview</h3>
<p>Watch the design take shape in real time. Each tool call updates the SVG preview so you see progress as it happens.</p>
</div>
<div class="rl-step">
<div class="rl-step__num">4</div>
<h3>Export</h3>
<p>Open the finished document in Scribus for fine-tuning, or export directly as PDF for print.</p>
</div>
</div>
</div>
</section>
<!-- Capabilities -->
<section class="rl-section">
<div class="rl-container">
<h2 class="rl-heading" style="text-align:center">Design Agent Capabilities</h2>
<div class="rl-grid-3">
<div class="rl-card rl-card--center">
<div class="rl-icon-box">&#128462;</div>
<h3>Text Frames</h3>
<p>Add and position text with control over font, size, color, alignment, and line spacing. The agent handles typography best practices.</p>
</div>
<div class="rl-card rl-card--center">
<div class="rl-icon-box">&#128444;</div>
<h3>Image Frames</h3>
<p>Place images from URLs or generate them inline with AI. Automatic scaling and positioning within the layout.</p>
</div>
<div class="rl-card rl-card--center">
<div class="rl-icon-box">&#9632;</div>
<h3>Shapes &amp; Backgrounds</h3>
<p>Rectangles, ellipses, decorative elements, and full-page backgrounds. Set colors, borders, and opacity per element.</p>
</div>
</div>
<div style="display:flex;flex-wrap:wrap;gap:0.5rem;justify-content:center;margin-top:1.5rem">
<span class="rl-badge" style="background:rgba(124,58,237,0.15);color:#a78bfa">A4/A3/Letter/Custom</span>
<span class="rl-badge" style="background:rgba(124,58,237,0.15);color:#a78bfa">PDF Export</span>
<span class="rl-badge" style="background:rgba(124,58,237,0.15);color:#a78bfa">AI Image Generation</span>
<span class="rl-badge" style="background:rgba(124,58,237,0.15);color:#a78bfa">Multi-page</span>
<span class="rl-badge" style="background:rgba(124,58,237,0.15);color:#a78bfa">Print-ready</span>
</div>
</div>
</section>
<!-- Built on Open Source -->
<section class="rl-section rl-section--alt">
<div class="rl-container">
<h2 class="rl-heading" style="text-align:center">Built on Open Source</h2>
<p class="rl-subtext" style="text-align:center">The tools that power rDesign.</p>
<div class="rl-grid-4" style="display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:1.5rem">
<div class="rl-card rl-card--center">
<h3>Scribus</h3>
<p>Professional desktop publishing &mdash; the open-source alternative to InDesign. Runs headless in Docker via Xvfb + noVNC.</p>
</div>
<div class="rl-card rl-card--center">
<h3>Gemini</h3>
<p>Google&rsquo;s multimodal AI with native tool-calling. Powers the design agent&rsquo;s planning and execution loop.</p>
</div>
<div class="rl-card rl-card--center">
<h3>noVNC</h3>
<p>Browser-based VNC client for direct Scribus access. Open the full desktop when you need pixel-perfect manual edits.</p>
</div>
<div class="rl-card rl-card--center">
<h3>Hono</h3>
<p>Ultra-fast API framework powering the bridge between the design agent and Scribus.</p>
</div>
</div>
</div>
</section>
<!-- Your Data, Protected -->
<section class="rl-section">
<div class="rl-container" style="text-align:center">
<h2 class="rl-heading">Your Designs, Protected</h2>
<p class="rl-subtext">All processing happens on your server &mdash; designs never leave your infrastructure.</p>
<div class="rl-grid-3">
<div class="rl-card rl-card--center">
<div class="rl-icon-box">&#127968;</div>
<h3>Self-Hosted</h3>
<p>Scribus runs in a Docker container on your own server. No cloud DTP service, no vendor lock-in.</p>
</div>
<div class="rl-card rl-card--center">
<div class="rl-icon-box">&#128190;</div>
<h3>Persistent Storage</h3>
<p>Design files are stored in a Docker volume and persist across container restarts and updates.</p>
</div>
<div class="rl-card rl-card--center">
<div class="rl-icon-box">&#128295;</div>
<h3>Full Source Access</h3>
<p>Open the .sla file in Scribus anytime. Native format, no proprietary lock-in. Export to PDF, SVG, or PNG.</p>
</div>
</div>
</div>
</section>
<!-- CTA -->
<section class="rl-section rl-section--alt">
<div class="rl-container" style="text-align:center">
<h2 class="rl-heading">(You)rDesign, text in &mdash; design out.</h2>
<p class="rl-subtext">Describe it and the agent builds it. Try the demo or create a space to get started.</p>
<div class="rl-cta-row">
<a href="https://demo.rspace.online/rdesign" class="rl-cta-primary">Open rDesign</a>
<a href="/create-space" class="rl-cta-secondary">Create a Space</a>
</div>
</div>
</section>
<div class="rl-back">
<a href="/">&larr; Back to rSpace</a>
</div>
`;
}
export const designModule: RSpaceModule = {
id: "rdesign",
name: "rDesign",
icon: "\u{1f3af}",
icon: "🎨",
description: "AI-powered DTP workspace — text in, design out",
scoping: { defaultScope: 'global', userConfigurable: false },
publicWrite: true,
@ -523,7 +683,7 @@ export const designModule: RSpaceModule = {
],
acceptsFeeds: ["data", "resource"],
outputPaths: [
{ path: "designs", name: "Designs", icon: "\u{1f3af}", description: "Design files and layouts" },
{ path: "templates", name: "Templates", icon: "\u{1f4d0}", description: "Reusable design templates" },
{ path: "designs", name: "Designs", icon: "🎨", description: "Design files and layouts" },
{ path: "templates", name: "Templates", icon: "📐", description: "Reusable design templates" },
],
};

52
server/index.ts
View File

@ -1556,52 +1556,44 @@ const RUNPOD_API_KEY = process.env.RUNPOD_API_KEY || "";
app.get("/api/blender-gen/health", async (c) => {
const issues: string[] = [];
const warnings: string[] = [];
const OLLAMA_URL = process.env.OLLAMA_URL || "http://localhost:11434";
try {
const res = await fetch(`${OLLAMA_URL}/api/tags`, { signal: AbortSignal.timeout(3000) });
if (!res.ok) issues.push("Ollama not responding");
} catch {
issues.push("Ollama unreachable");
}
if (!GEMINI_API_KEY) issues.push("GEMINI_API_KEY not configured");
if (!RUNPOD_API_KEY) warnings.push("RunPod not configured — script-only mode");
return c.json({ available: issues.length === 0, issues, warnings });
});
app.post("/api/blender-gen", async (c) => {
if (!GEMINI_API_KEY) return c.json({ error: "GEMINI_API_KEY not configured" }, 503);
const { prompt } = await c.req.json();
if (!prompt) return c.json({ error: "prompt required" }, 400);
// Step 1: Generate Blender Python script via LLM
const OLLAMA_URL = process.env.OLLAMA_URL || "http://localhost:11434";
// Step 1: Generate Blender Python script via Gemini Flash
let script = "";
try {
const llmRes = await fetch(`${OLLAMA_URL}/api/generate`, {
method: "POST",
headers: { "Content-Type": "application/json" },
body: JSON.stringify({
model: process.env.OLLAMA_MODEL || "qwen2.5-coder:7b",
prompt: `Generate a Blender Python script that creates: ${prompt}\n\nThe script should:\n- Import bpy\n- Clear the default scene\n- Create the described objects with materials\n- Set up basic lighting and camera\n- Render to /tmp/render.png at 1024x1024\n\nOnly output the Python code, no explanations.`,
stream: false,
}),
});
const { GoogleGenerativeAI } = await import("@google/generative-ai");
const genAI = new GoogleGenerativeAI(GEMINI_API_KEY);
const model = genAI.getGenerativeModel({ model: "gemini-2.0-flash" });
const result = await model.generateContent(`Generate a Blender Python script that creates: ${prompt}
if (llmRes.ok) {
const llmData = await llmRes.json();
script = llmData.response || "";
// Extract code block if wrapped in markdown
const codeMatch = script.match(/```(?:python)?\n([\s\S]*?)```/);
if (codeMatch) script = codeMatch[1].trim();
} else {
const errText = await llmRes.text().catch(() => "");
console.error(`[blender-gen] Ollama ${llmRes.status}: ${errText}`);
}
The script should:
- Import bpy
- Clear the default scene (delete all default objects)
- Create the described objects with materials and colors
- Set up basic lighting (sun + area light) and camera positioned to frame the scene
- Render to /tmp/render.png at 1024x1024
Output ONLY the Python code, no explanations or comments outside the code.`);
const text = result.response.text();
const codeMatch = text.match(/```(?:python)?\n([\s\S]*?)```/);
script = codeMatch ? codeMatch[1].trim() : text.trim();
} catch (e) {
console.error("[blender-gen] LLM error:", e);
console.error("[blender-gen] Gemini error:", e);
}
if (!script) {
return c.json({ error: "Failed to generate Blender script — is Ollama running?" }, 502);
return c.json({ error: "Failed to generate Blender script" }, 502);
}
// Step 2: Execute on RunPod (headless Blender) — optional

5
website/canvas.html
View File

@ -2076,6 +2076,7 @@
<button id="new-drawfast" title="Drawfast">✏️ Drawfast</button>
<button id="new-freecad" title="FreeCAD">📐 FreeCAD</button>
<button id="new-kicad" title="KiCAD PCB">🔌 KiCAD</button>
<button id="new-scribus" title="Scribus DTP" data-requires-module="rdesign">🎨 Scribus</button>
<button id="embed-swag" title="Embed rSwag" data-requires-module="rswag">🎨 rSwag</button>
<button id="embed-pubs" title="Embed rPubs" data-requires-module="rpubs">📖 rPubs</button>
</div>
@ -2460,6 +2461,7 @@
FolkDrawfast,
FolkFreeCAD,
FolkKiCAD,
FolkDesignAgent,
FolkCanvas,
FolkRApp,
FolkFeed,
@ -2707,6 +2709,7 @@
FolkDrawfast.define();
FolkFreeCAD.define();
FolkKiCAD.define();
FolkDesignAgent.define();
FolkCanvas.define();
FolkRApp.define();
FolkFeed.define();
@ -2753,6 +2756,7 @@
shapeRegistry.register("folk-drawfast", FolkDrawfast);
shapeRegistry.register("folk-freecad", FolkFreeCAD);
shapeRegistry.register("folk-kicad", FolkKiCAD);
shapeRegistry.register("folk-design-agent", FolkDesignAgent);
shapeRegistry.register("folk-canvas", FolkCanvas);
shapeRegistry.register("folk-rapp", FolkRApp);
shapeRegistry.register("folk-feed", FolkFeed);
@ -4464,6 +4468,7 @@ Use real coordinates, YYYY-MM-DD dates, ISO currency codes. Ask clarifying quest
document.getElementById("new-drawfast").addEventListener("click", () => setPendingTool("folk-drawfast"));
document.getElementById("new-freecad").addEventListener("click", () => setPendingTool("folk-freecad"));
document.getElementById("new-kicad").addEventListener("click", () => setPendingTool("folk-kicad"));
document.getElementById("new-scribus").addEventListener("click", () => setPendingTool("folk-design-agent"));
document.getElementById("new-tx-builder").addEventListener("click", () => setPendingTool("folk-transaction-builder"));
document.getElementById("new-google-item").addEventListener("click", () => {
setPendingTool("folk-google-item", { service: "drive", title: "New Google Item" });