services:

comfyui:
image: ghcr.io/comfyanonymous/comfyui:latest
ports:
- "8188:8188"
volumes:
- ./comfyui:/workspace
restart: unless-stopped

rosalinda:
build: ./rosalinda-server
ports:
- "3001:3001"
environment:
- COMFY_URL=http://comfyui:8188
depends_on:
- comfyui
restart: unless-stopped
Ensuite : docker compose up -d

2) Serveur rosalinda-server (Node.js, API propre)
Crée rosalinda/rosalinda-server/package.json :

json
Copier le code
{
"name": "rosalinda-server",
"version": "1.0.0",
"type": "module",
"main": "server.js",
"scripts": { "start": "node server.js" },
"dependencies": {
"express": "^4.19.2",
"cors": "^2.8.5",
"node-fetch": "^3.3.2"
}
}
Crée rosalinda/rosalinda-server/Dockerfile :

dockerfile
Copier le code
FROM node:20-alpine
WORKDIR /app
COPY package.json ./
RUN npm install
COPY server.js ./
EXPOSE 3001
CMD ["npm","start"]
Crée rosalinda/rosalinda-server/server.js :

js
Copier le code
import express from "express";
import cors from "cors";
import fetch from "node-fetch";

const app = express();
app.use(cors());
app.use(express.json({ limit: "2mb" }));

const COMFY_URL = process.env.COMFY_URL || "http://127.0.0.1:8188";

/**
* Helpers ComfyUI
*/
async function comfyPrompt(workflow) {
const r = await fetch(`${COMFY_URL}/prompt`, {
method: "POST",
headers: { "Content-Type": "application/json" },
body: JSON.stringify({ prompt: workflow })
});
if (!r.ok) throw new Error(`ComfyUI /prompt error: ${r.status}`);
return r.json(); // { prompt_id: "..." }
}

async function comfyHistory(promptId) {
const r = await fetch(`${COMFY_URL}/history/${promptId}`);
if (!r.ok) throw new Error(`ComfyUI /history error: ${r.status}`);
return r.json();
}

function sleep(ms) { return new Promise(res => setTimeout(res, ms)); }

/**
* Attendre que ComfyUI finisse et récupérer une image (filename)
*/
async function waitForResultImage(promptId, timeoutMs = 180000) {
const t0 = Date.now();
while (Date.now() - t0 < timeoutMs) {
const h = await comfyHistory(promptId);
const item = h?.[promptId];
if (item?.outputs) {
// Cherche un output image
for (const nodeId of Object.keys(item.outputs)) {
const out = item.outputs[nodeId];
if (out?.images?.length) {
return out.images[0]; // {filename, subfolder, type}
}
}
}
await sleep(1200);
}
throw new Error("Timeout: génération image trop longue");
}

async function waitForResultVideo(promptId, timeoutMs = 360000) {
const t0 = Date.now();
while (Date.now() - t0 < timeoutMs) {
const h = await comfyHistory(promptId);
const item = h?.[promptId];
if (item?.outputs) {
// Cherche un output vidéo (souvent "gifs" ou "videos" selon workflow)
for (const nodeId of Object.keys(item.outputs)) {
const out = item.outputs[nodeId];
if (out?.gifs?.length) return out.gifs[0];
if (out?.videos?.length) return out.videos[0];
}
}
await sleep(1500);
}
throw new Error("Timeout: génération vidéo trop longue");
}

function comfyFileUrl(file) {
// ComfyUI : /view?filename=...&subfolder=...&type=output
const params = new URLSearchParams({
filename: file.filename,
subfolder: file.subfolder || "",
type: file.type || "output",
});
return `${COMFY_URL}/view?${params.toString()}`;
}

/**
* Workflows ultra simples (à remplacer par tes workflows ComfyUI)
* IMPORTANT: pour que ça marche, il faut un workflow valide dans ComfyUI.
* Ici on te met un "template" minimal : tu importes un workflow ComfyUI et tu remplaces ce JSON.
*/
function imageWorkflow(prompt, steps = 24) {
// 👉 Remplace ce JSON par TON workflow ComfyUI (export JSON)
// Astuce: dans ComfyUI -> Save (workflow) -> colle ici.
return {
"1": { "class_type": "CLIPTextEncode", "inputs": { "text": prompt, "clip": ["4", 1] } },
"2": { "class_type": "CLIPTextEncode", "inputs": { "text": "low quality, blurry", "clip": ["4", 1] } },
"3": { "class_type": "KSampler", "inputs": { "seed": 123, "steps": steps, "cfg": 7, "sampler_name": "euler", "scheduler": "normal", "denoise": 1, "model": ["4", 0], "positive": ["1", 0], "negative": ["2", 0], "latent_image": ["5", 0] } },
"4": { "class_type": "CheckpointLoaderSimple", "inputs": { "ckpt_name": "sdxl_base_1.0.safetensors" } },
"5": { "class_type": "EmptyLatentImage", "inputs": { "width": 1024, "height": 1024, "batch_size": 1 } },
"6": { "class_type": "VAEDecode", "inputs": { "samples": ["3", 0], "vae": ["4", 2] } },
"7": { "class_type": "SaveImage", "inputs": { "images": ["6", 0], "filename_prefix": "rosalinda_image" } }
};
}

function videoWorkflow(prompt) {
// 👉 Remplace par un workflow vidéo (SVD / AnimateDiff) exporté de ComfyUI
return {
// placeholder volontaire : tu colles ton workflow vidéo ici
};
}

/**
* API Rosalinda
*/
app.post("/api/image", async (req, res) => {
try {
const { prompt, steps } = req.body || {};
if (!prompt?.trim()) return res.status(400).json({ error: "prompt requis" });

const wf = imageWorkflow(prompt.trim(), Number(steps || 24));
const { prompt_id } = await comfyPrompt(wf);
const file = await waitForResultImage(prompt_id);

res.json({
ok: true,
name: "Rosalinda",
type: "image",
prompt_id,
url: comfyFileUrl(file)
});
} catch (e) {
res.status(500).json({ ok: false, error: e.message });
}
});

app.post("/api/video", async (req, res) => {
try {
const { prompt } = req.body || {};
if (!prompt?.trim()) return res.status(400).json({ error: "prompt requis" });

const wf = videoWorkflow(prompt.trim());
const { prompt_id } = await comfyPrompt(wf);
const file = await waitForResultVideo(prompt_id);

res.json({
ok: true,
name: "Rosalinda",
type: "video",
prompt_id,
url: comfyFileUrl(file)
});
} catch (e) {
res.status(500).json({ ok: false, error: e.message });
}
});

app.get("/health", (_req, res) => res.json({ ok: true, name: "Rosalinda" }));

app.listen(3001, () => console.log("✅ Rosalinda API on :3001"));
⚠️ Important : pour que l’image marche, ComfyUI doit avoir un modèle (ex: SDXL) et le workflow doit être valide.
👉 Le plus simple : tu ouvres ComfyUI, tu charges un workflow SDXL, tu fais Save (API format) et tu remplaces le JSON imageWorkflow().

3) Brancher dans ton interface (colonne 3 = preview image/vidéo)
Dans ton index.html, ta colonne 3 est vide. Ajoute juste un conteneur :

html
Copier le code
<aside class="right" id="colRight">
<div id="stage" style="padding:16px;"></div>
</aside>
Puis dans ton JS (dans ton app.js), ajoute :

js
Copier le code
const stage = document.getElementById("stage");

async function rosalindaGenerateImage(prompt) {
const r = await fetch("http://localhost:3001/api/image", {
method: "POST",
headers: {"Content-Type":"application/json"},
body: JSON.stringify({ prompt, steps: 24 })
});
const data = await r.json();
if (!data.ok) throw new Error(data.error || "Erreur Rosalinda");

stage.innerHTML = `
<div style="font-weight:800;margin-bottom:10px;">Rosalinda — Image</div>
<img src="${data.url}" style="width:100%;border-radius:14px;border:1px solid #1f2a44;" />
`;
}

async function rosalindaGenerateVideo(prompt) {
const r = await fetch("http://localhost:3001/api/video", {
method: "POST",
headers: {"Content-Type":"application/json"},
body: JSON.stringify({ prompt })
});
const data = await r.json();
if (!data.ok) throw new Error(data.error || "Erreur Rosalinda");

stage.innerHTML = `
<div style="font-weight:800;margin-bottom:10px;">Rosalinda — Vidéo</div>
<video src="${data.url}" controls style="width:100%;border-radius:14px;border:1px solid #1f2a44;"></video>
`;
}
Et quand tu cliques sur Générer, tu choisis automatiquement :

js
Copier le code
generateBtn.addEventListener("click", async () => {
const text = promptInput.value.trim();
if (!text) return;

// Exemple : si tu écris "image: ..." -> image
if (text.toLowerCase().startsWith("image:")) {
await rosalindaGenerateImage(text.slice(6).trim());
return;
}

// Exemple : si tu écris "video: ..." -> video
if (text.toLowerCase().startsWith("video:")) {
await rosalindaGenerateVideo(text.slice(6).trim());
return;
}

// sinon, garde ton générateur de code
codeOutput.textContent = fakeGenerate(text);
});

docker-compose.yml

@@ -0,0 +1,20 @@
+```yaml
+services:
+  comfyui:
+    image: ghcr.io/comfyanonymous/comfyui:latest
+    ports:
+      - "8188:8188"
+    volumes:
+      - ./comfyui:/workspace
+    restart: unless-stopped
+
+  rosalinda:
+    build: ./rosalinda-server
+    ports:
+      - "3001:3001"
+    environment:
+      - COMFY_URL=http://comfyui:8188
+    depends_on:
+      - comfyui
+    restart: unless-stopped
+```

index.html

@@ -88,12 +88,11 @@
         </div>
       </section>
     </main>
-
     <!-- COL 3 -->
     <aside id="colRight" class="border-l border-slate-800 bg-transparent p-4">
-      <!-- Colonne vide par défaut -->
+      <div id="stage" style="padding:16px;"></div>
     </aside>
-  </div>
+</div>
 
   <div id="toast" class="toast" hidden></div>
 

rosalinda-server/Dockerfile

@@ -0,0 +1,9 @@
+```dockerfile
+FROM node:20-alpine
+WORKDIR /app
+COPY package.json ./
+RUN npm install
+COPY server.js ./
+EXPOSE 3001
+CMD ["npm","start"]
+```

rosalinda-server/package.json

@@ -0,0 +1,16 @@
+```json
+{
+  "name": "rosalinda-server",
+  "version": "1.0.0",
+  "type": "module",
+  "main": "server.js",
+  "scripts": {
+    "start": "node server.js"
+  },
+  "dependencies": {
+    "express": "^4.19.2",
+    "cors": "^2.8.5",
+    "node-fetch": "^3.3.2"
+  }
+}
+```

rosalinda-server/server.js

@@ -0,0 +1,157 @@
+```js
+import express from "express";
+import cors from "cors";
+import fetch from "node-fetch";
+
+const app = express();
+app.use(cors());
+app.use(express.json({ limit: "2mb" }));
+
+const COMFY_URL = process.env.COMFY_URL || "http://127.0.0.1:8188";
+
+/**
+ * Helpers ComfyUI
+ */
+async function comfyPrompt(workflow) {
+  const r = await fetch(`${COMFY_URL}/prompt`, {
+    method: "POST",
+    headers: { "Content-Type": "application/json" },
+    body: JSON.stringify({ prompt: workflow })
+  });
+  if (!r.ok) throw new Error(`ComfyUI /prompt error: ${r.status}`);
+  return r.json(); // { prompt_id: "..." }
+}
+
+async function comfyHistory(promptId) {
+  const r = await fetch(`${COMFY_URL}/history/${promptId}`);
+  if (!r.ok) throw new Error(`ComfyUI /history error: ${r.status}`);
+  return r.json();
+}
+
+function sleep(ms) { return new Promise(res => setTimeout(res, ms)); }
+
+/**
+ * Attendre que ComfyUI finisse et récupérer une image (filename)
+ */
+async function waitForResultImage(promptId, timeoutMs = 180000) {
+  const t0 = Date.now();
+  while (Date.now() - t0 < timeoutMs) {
+    const h = await comfyHistory(promptId);
+    const item = h?.[promptId];
+    if (item?.outputs) {
+      // Cherche un output image
+      for (const nodeId of Object.keys(item.outputs)) {
+        const out = item.outputs[nodeId];
+        if (out?.images?.length) {
+          return out.images[0]; // {filename, subfolder, type}
+        }
+      }
+    }
+    await sleep(1200);
+  }
+  throw new Error("Timeout: génération image trop longue");
+}
+
+async function waitForResultVideo(promptId, timeoutMs = 360000) {
+  const t0 = Date.now();
+  while (Date.now() - t0 < timeoutMs) {
+    const h = await comfyHistory(promptId);
+    const item = h?.[promptId];
+    if (item?.outputs) {
+      // Cherche un output vidéo (souvent "gifs" ou "videos" selon workflow)
+      for (const nodeId of Object.keys(item.outputs)) {
+        const out = item.outputs[nodeId];
+        if (out?.gifs?.length) return out.gifs[0];
+        if (out?.videos?.length) return out.videos[0];
+      }
+    }
+    await sleep(1500);
+  }
+  throw new Error("Timeout: génération vidéo trop longue");
+}
+
+function comfyFileUrl(file) {
+  // ComfyUI : /view?filename=...&subfolder=...&type=output
+  const params = new URLSearchParams({
+    filename: file.filename,
+    subfolder: file.subfolder || "",
+    type: file.type || "output",
+  });
+  return `${COMFY_URL}/view?${params.toString()}`;
+}
+
+/**
+ * Workflows ultra simples (à remplacer par tes workflows ComfyUI)
+ * IMPORTANT: pour que ça marche, il faut un workflow valide dans ComfyUI.
+ * Ici on te met un "template" minimal : tu importes un workflow ComfyUI et tu remplaces ce JSON.
+ */
+function imageWorkflow(prompt, steps = 24) {
+  // 👉 Remplace ce JSON par TON workflow ComfyUI (export JSON)
+  // Astuce: dans ComfyUI -> Save (workflow) -> colle ici.
+  return {
+    "1": { "class_type": "CLIPTextEncode", "inputs": { "text": prompt, "clip": ["4", 1] } },
+    "2": { "class_type": "CLIPTextEncode", "inputs": { "text": "low quality, blurry", "clip": ["4", 1] } },
+    "3": { "class_type": "KSampler", "inputs": { "seed": 123, "steps": steps, "cfg": 7, "sampler_name": "euler", "scheduler": "normal", "denoise": 1, "model": ["4", 0], "positive": ["1", 0], "negative": ["2", 0], "latent_image": ["5", 0] } },
+    "4": { "class_type": "CheckpointLoaderSimple", "inputs": { "ckpt_name": "sdxl_base_1.0.safetensors" } },
+    "5": { "class_type": "EmptyLatentImage", "inputs": { "width": 1024, "height": 1024, "batch_size": 1 } },
+    "6": { "class_type": "VAEDecode", "inputs": { "samples": ["3", 0], "vae": ["4", 2] } },
+    "7": { "class_type": "SaveImage", "inputs": { "images": ["6", 0], "filename_prefix": "rosalinda_image" } }
+  };
+}
+
+function videoWorkflow(prompt) {
+  // 👉 Remplace par un workflow vidéo (SVD / AnimateDiff) exporté de ComfyUI
+  return {
+    // placeholder volontaire : tu colles ton workflow vidéo ici
+  };
+}
+
+/**
+ * API Rosalinda
+ */
+app.post("/api/image", async (req, res) => {
+  try {
+    const { prompt, steps } = req.body || {};
+    if (!prompt?.trim()) return res.status(400).json({ error: "prompt requis" });
+
+    const wf = imageWorkflow(prompt.trim(), Number(steps || 24));
+    const { prompt_id } = await comfyPrompt(wf);
+    const file = await waitForResultImage(prompt_id);
+
+    res.json({
+      ok: true,
+      name: "Rosalinda",
+      type: "image",
+      prompt_id,
+      url: comfyFileUrl(file)
+    });
+  } catch (e) {
+    res.status(500).json({ ok: false, error: e.message });
+  }
+});
+
+app.post("/api/video", async (req, res) => {
+  try {
+    const { prompt } = req.body || {};
+    if (!prompt?.trim()) return res.status(400).json({ error: "prompt requis" });
+
+    const wf = videoWorkflow(prompt.trim());
+    const { prompt_id } = await comfyPrompt(wf);
+    const file = await waitForResultVideo(prompt_id);
+
+    res.json({
+      ok: true,
+      name: "Rosalinda",
+      type: "video",
+      prompt_id,
+      url: comfyFileUrl(file)
+    });
+  } catch (e) {
+    res.status(500).json({ ok: false, error: e.message });
+  }
+});
+
+app.get("/health", (_req, res) => res.json({ ok: true, name: "Rosalinda" }));
+
+app.listen(3001, () => console.log("✅ Rosalinda API on :3001"));
+```

script.js

@@ -14,11 +14,11 @@ const micBtn = document.getElementById("micBtn");
 const codeOutput = document.getElementById("codeOutput");
 const copyBtn = document.getElementById("copyBtn");
 const clearBtn = document.getElementById("clearBtn");
-
 const colRight = document.getElementById("colRight");
 const appTitle = document.getElementById("appTitle");
 const appSubtitle = document.getElementById("appSubtitle");
 
+const stage = document.getElementById("stage");
 // ===== générateur de code (temporaire) =====
 function fakeGenerate(prompt){
   const p = (prompt || "").trim();
@@ -32,6 +32,36 @@ function main() {
 main();`;
 }
 
+// ===== Rosalinda helpers =====
+async function rosalindaGenerateImage(prompt) {
+  const r = await fetch("http://localhost:3001/api/image", {
+    method: "POST",
+    headers: {"Content-Type":"application/json"},
+    body: JSON.stringify({ prompt, steps: 24 })
+  });
+  const data = await r.json();
+  if (!data.ok) throw new Error(data.error || "Erreur Rosalinda");
+
+  stage.innerHTML = `
+    <div style="font-weight:800;margin-bottom:10px;">Rosalinda — Image</div>
+    <img src="${data.url}" style="width:100%;border-radius:14px;border:1px solid #1f2a44;" />
+  `;
+}
+
+async function rosalindaGenerateVideo(prompt) {
+  const r = await fetch("http://localhost:3001/api/video", {
+    method: "POST",
+    headers: {"Content-Type":"application/json"},
+    body: JSON.stringify({ prompt })
+  });
+  const data = await r.json();
+  if (!data.ok) throw new Error(data.error || "Erreur Rosalinda");
+
+  stage.innerHTML = `
+    <div style="font-weight:800;margin-bottom:10px;">Rosalinda — Vidéo</div>
+    <video src="${data.url}" controls style="width:100%;border-radius:14px;border:1px solid #1f2a44;"></video>
+  `;
+}
 // ===== moteur de consignes UI (simple et efficace) =====
 function isUiCommand(text){
   const t = (text||"").toLowerCase();
@@ -80,7 +110,6 @@ function applyUiCommand(text){
   toast("ℹ️ Consigne non reconnue");
   return false;
 }
-
 // ===== actions =====
 generateBtn.addEventListener("click", ()=>{
   const text = promptInput.value;
@@ -89,9 +118,26 @@ generateBtn.addEventListener("click", ()=>{
     if(applyUiCommand(text)) return;
   }
 
+  // Example: si tu écris "image: ..." -> image
+  if (text.toLowerCase().startsWith("image:")) {
+    rosalindaGenerateImage(text.slice(6).trim()).catch(err => {
+      console.error(err);
+      toast("❌ " + (err.message || "Erreur image"));
+    });
+    return;
+  }
+
+  // Example: si tu écris "video: ..." -> video
+  if (text.toLowerCase().startsWith("video:")) {
+    rosalindaGenerateVideo(text.slice(6).trim()).catch(err => {
+      console.error(err);
+      toast("❌ " + (err.message || "Erreur vidéo"));
+    });
+    return;
+  }
+
   codeOutput.textContent = fakeGenerate(text);
 });
-
 document.querySelectorAll(".chip").forEach(btn=>{
   btn.addEventListener("click", ()=>{
     const p = btn.dataset.prompt || "";