Architecture “Rosalinda” (100% propriétaire)

Front (web)

Chat (texte + micro dictée)

Upload fichiers (drag&drop)

Projets (dossiers, tâches, historique)

“Ordinateur”/console live (logs)

Back (ton serveur)

rosalinda-core : orchestrateur (chat + outils + mémoire)

plugins : système de plugins (tools) exécutés en sandbox

files : stockage local (uploads)

jobs : file d’attente (images/vidéos) + logs + statut

models : connecteurs IA locaux

LLM local (Ollama ou llama.cpp ou vLLM)

Images (Stable Diffusion local)

Vidéo (FFmpeg + option modèles vidéo locaux si tu veux)

Option “sans API” la plus simple (recommandée)
✅ LLM local avec Ollama

Pas d’API payante, pas de clé, tout tourne chez toi.

Ton serveur parle à Ollama en local (HTTP local).

✅ Images en local

Stable Diffusion (AUTOMATIC1111 ou ComfyUI) sur ta machine/serveur.

Rosalinda appelle ton endpoint local.

✅ Vidéos

FFmpeg pour assembler (images + texte + audio).

Plus tard, tu peux brancher un modèle vidéo local si tu as un gros GPU.

Codes : Base “Rosalinda” (fonctionnelle) – sans clé API

Je te mets un socle Node.js (Nest/Express style simple) + plugin system + upload + jobs.
Tu peux le donner à ton développeur tel quel.

1) Structure projet
rosalinda/
server/
package.json
src/
index.ts
core/
agent.ts
memory.ts
tools.ts
plugins/
index.ts
project.create.ts
file.summarize.ts
routes/
chat.ts
files.ts
projects.ts
jobs.ts
services/
ollama.ts
ffmpeg.ts
storage/
uploads/.gitkeep
projects.json
jobs.json
web/
(ton front Next/React — tu as déjà la base)

2) Serveur : server/package.json
{
"name": "rosalinda-server",
"private": true,
"type": "module",
"scripts": {
"dev": "node --watch --loader ts-node/esm src/index.ts"
},
"dependencies": {
"express": "^4.19.2",
"multer": "^1.4.5-lts.1",
"zod": "^3.24.1"
},
"devDependencies": {
"ts-node": "^10.9.2",
"typescript": "^5.6.3"
}
}

3) Serveur principal : server/src/index.ts
import express from "express";
import { chatRouter } from "./routes/chat.js";
import { filesRouter } from "./routes/files.js";
import { projectsRouter } from "./routes/projects.js";
import { jobsRouter } from "./routes/jobs.js";

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

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

app.use("/api/chat", chatRouter);
app.use("/api/files", filesRouter);
app.use("/api/projects", projectsRouter);
app.use("/api/jobs", jobsRouter);

const port = process.env.PORT ? Number(process.env.PORT) : 3333;
app.listen(port, () => console.log(`Rosalinda server running on http://localhost:${port}`));

4) Orchestrateur IA (sans API) : server/src/core/agent.ts

Rosalinda = un agent qui :

lit le message

choisit des tools (plugins) si nécessaire

répond

import { runTools } from "./tools.js";
import { memoryAppend, memoryGet } from "./memory.js";
import { llmChat } from "../services/ollama.js";

export async function rosalindaRespond(input: {
projectId: string;
userText: string;
}) {
const { projectId, userText } = input;

const history = memoryGet(projectId);
memoryAppend(projectId, { role: "user", content: userText });

// 1) tenter outils (plugins)
const toolResult = await runTools({ projectId, userText });

// 2) prompt Rosalinda (identité + contexte)
const system = `
Tu es Rosalinda, l'IA privée du propriétaire.
Règles:
- Tu proposes des actions concrètes.
- Tu peux créer des projets, lancer des jobs, manipuler des fichiers via les tools.
- Tu réponds en français, clair, professionnel.
`;

const messages = [
{ role: "system", content: system },
...history.slice(-12),
...(toolResult ? [{ role: "assistant", content: `Résultat outil: ${toolResult}` }] : [])
];

// 3) réponse LLM local
const reply = await llmChat(messages);

memoryAppend(projectId, { role: "assistant", content: reply });

return { reply, toolResult };
}

5) Mémoire simple : server/src/core/memory.ts
type Msg = { role: "user" | "assistant" | "system"; content: string };

const mem = new Map<string, Msg[]>();

export function memoryGet(projectId: string): Msg[] {
return mem.get(projectId) ?? [];
}

export function memoryAppend(projectId: string, msg: Msg) {
const arr = mem.get(projectId) ?? [];
arr.push(msg);
mem.set(projectId, arr);
}

6) Tools + Plugins : server/src/core/tools.ts
import { plugins } from "../plugins/index.js";

export async function runTools(input: { projectId: string; userText: string }) {
// Routage simple: si le texte contient certains mots, déclenche plugin
const t = input.userText.toLowerCase();

if (t.includes("crée un projet") || t.includes("creer un projet")) {
return plugins.projectCreate.run({ projectId: input.projectId, text: input.userText });
}

if (t.includes("résume le fichier") || t.includes("resume le fichier")) {
return plugins.fileSummarize.run({ projectId: input.projectId, text: input.userText });
}

return null;
}

Plugins : server/src/plugins/index.ts
import { projectCreate } from "./project.create.js";
import { fileSummarize } from "./file.summarize.js";

export const plugins = {
projectCreate,
fileSummarize
};

Plugin “Créer projet” : server/src/plugins/project.create.ts
import { readProjects, writeProjects } from "../routes/projects.store.js";

export const projectCreate = {
name: "project.create",
async run(input: { projectId: string; text: string }) {
const name = input.text.split(":")[1]?.trim() || `Projet ${new Date().toISOString()}`;
const db = readProjects();
const id = "p_" + Math.random().toString(16).slice(2);
db.projects.push({ id, name, createdAt: Date.now() });
writeProjects(db);
return `Projet créé ✅ id=${id} name="${name}"`;
}
};

Plugin “Résumer fichier” : server/src/plugins/file.summarize.ts
import { llmChat } from "../services/ollama.js";

export const fileSummarize = {
name: "file.summarize",
async run(_input: { projectId: string; text: string }) {
// Ici tu peux aller lire un fichier uploadé et l’injecter au LLM local.
// Pour l’instant: exemple.
const reply = await llmChat([
{ role: "system", content: "Tu résumes un document de manière structurée." },
{ role: "user", content: "Résumé: ceci est un test de résumé." }
]);
return `Résumé (exemple) ✅\n${reply}`;
}
};

7) Route Chat : server/src/routes/chat.ts
import { Router } from "express";
import { z } from "zod";
import { rosalindaRespond } from "../core/agent.js";

export const chatRouter = Router();

chatRouter.post("/", async (req, res) => {
const body = z.object({
projectId: z.string().min(1),
text: z.string().min(1)
}).safeParse(req.body);

if (!body.success) return res.status(400).json({ ok: false, error: body.error.message });

const out = await rosalindaRespond({ projectId: body.data.projectId, userText: body.data.text });
res.json({ ok: true, reply: out.reply, toolResult: out.toolResult });
});

8) Upload fichiers : server/src/routes/files.ts
import { Router } from "express";
import multer from "multer";
import path from "path";
import fs from "fs";

export const filesRouter = Router();

const uploadDir = path.resolve("src/storage/uploads");
fs.mkdirSync(uploadDir, { recursive: true });

const storage = multer.diskStorage({
destination: (_req, _file, cb) => cb(null, uploadDir),
filename: (_req, file, cb) => cb(null, Date.now() + "_" + file.originalname)
});

const upload = multer({ storage });

filesRouter.post("/upload", upload.array("files", 10), (req, res) => {
const files = (req.files as Express.Multer.File[]) ?? [];
res.json({
ok: true,
files: files.map(f => ({ name: f.originalname, path: f.filename, size: f.size }))
});
});

9) Projets (stockage json simple) : server/src/routes/projects.store.ts
import fs from "fs";
import path from "path";

const dbPath = path.resolve("src/storage/projects.json");

export type ProjectDB = { projects: { id: string; name: string; createdAt: number }[] };

export function readProjects(): ProjectDB {
if (!fs.existsSync(dbPath)) return { projects: [] };
return JSON.parse(fs.readFileSync(dbPath, "utf-8"));
}

export function writeProjects(db: ProjectDB) {
fs.writeFileSync(dbPath, JSON.stringify(db, null, 2), "utf-8");
}

server/src/routes/projects.ts
import { Router } from "express";
import { readProjects } from "./projects.store.js";

export const projectsRouter = Router();

projectsRouter.get("/", (_req, res) => {
res.json({ ok: true, ...readProjects() });
});

10) LLM local (sans clé) : server/src/services/ollama.ts

Rosalinda utilise Ollama local : http://localhost:11434

type Msg = { role: "system" | "user" | "assistant"; content: string };

export async function llmChat(messages: Msg[]) {
const res = await fetch("http://localhost:11434/api/chat", {
method: "POST",
headers: { "Content-Type": "application/json" },
body: JSON.stringify({
model: "llama3.1", // tu peux changer selon ton modèle local
messages,
stream: false
})
});

if (!res.ok) {
const txt = await res.text().catch(() => "");
return `Rosalinda: erreur LLM local (${res.status}). ${txt}`;
}

const data: any = await res.json();
return data?.message?.content ?? "Rosalinda: (réponse vide)";
}

components/chat.js

@@ -76,22 +76,8 @@ display: block;
           gap: 0.5rem;
           align-items: center;
         }
-        .action-button {
-          background: none;
-          border: 1px solid #e2e8f0;
-          cursor: pointer;
-          color: #64748b;
-          padding: 0.5rem;
-          border-radius: 0.5rem;
-          display: flex;
-          align-items: center;
-          justify-content: center;
-          width: 36px;
-          height: 36px;
-        }
-        .action-button:hover {
-          background: #f1f5f9;
-          color: #1e40af;
+        .plus-button {
+          margin-right: 0;
         }
         .message-input {
           flex-grow: 1;
@@ -103,27 +89,30 @@ display: block;
         .message-input:focus {
           border-color: #93c5fd;
         }
+        .action-button {
+          background: none;
+          border: none;
+          cursor: pointer;
+          color: #64748b;
+          padding: 0.5rem;
+          border-radius: 0.5rem;
+        }
+        .action-button:hover {
+          background: #f1f5f9;
+          color: #1e40af;
+        }
         .send-button {
           background: #3b82f6;
           color: white;
           border: none;
           border-radius: 0.5rem;
-          padding: 0;
+          padding: 0 1rem;
           cursor: pointer;
-          width: 36px;
-          height: 36px;
-          display: flex;
-          align-items: center;
-          justify-content: center;
         }
         .send-button:hover {
           background: #2563eb;
         }
-        .mic-active.listening {
-          background: #3b82f6;
-          color: white;
-        }
-i {
+        i {
           width: 20px;
           height: 20px;
         }
@@ -180,39 +169,27 @@ i {
         *Langue : Français | Microphone activé*
       </div>
       <div class="conversation">
-        <div class="message">"Je suis ROSALINDA, votre IA dédiée, intégrée à DeepSite. Je travaille avec vous pour générer des vidéos, images et thèmes professionnels. Parlez-moi, joignez vos fichiers, je crée."</div>
+        <div class="message">"Je suis ROSALINDA, votre IA privée. Je fonctionne en local sans API externe, avec Ollama pour le texte, Stable Diffusion pour les images et FFmpeg pour les vidéos. Parlez-moi ou envoyez des fichiers pour commencer."</div>
       </div>
-        <div class="computer-screen">
-          <div class="screen-title">Voir l'ordinateur de Espace Codage</div>
-          <div class="logs-container">
-            <div class="log-line">Espace Codage • Démarrage...</div>
-            <div class="log-line">Chargement des services...</div>
-            <div class="log-line">Prêt ✅</div>
-          </div>
-        </div>
+<div class="logs-container">
+  <div class="log-line">Espace Codage • Démarrage...</div>
+  <div class="log-line">Chargement des services...</div>
+  <div class="log-line">Prêt ✅</div>
+</div>
+
 <div class="input-area">
-  <button class="action-button" title="Ajouter des fichiers" id="fileButton">
-    <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round">
-      <path d="M12 5v14M5 12h14"/>
-    </svg>
+  <button class="action-button plus-button" title="Ajouter des fichiers" id="fileButton">
+    <i data-feather="plus"></i>
   </button>
   <button class="action-button" title="Connecter des applications" id="connectButton">
-    <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round">
-      <path d="M9 7v5M15 7v5M7 12h10M10 12v4a4 4 0 0 0 4 4h1M6 7h12"/>
-    </svg>
+    <i data-feather="plug"></i>
   </button>
   <input type="text" class="message-input" placeholder="Envoyer un message à Espace Codage" id="messageInput">
   <button class="action-button mic-active" title="Saisie vocale" id="micButton">
-    <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
-      <path d="M12 14a3 3 0 0 0 3-3V7a3 3 0 0 0-6 0v4a3 3 0 0 0 3 3Z"/>
-      <path d="M19 11a7 7 0 0 1-14 0" stroke-linecap="round"/>
-      <path d="M12 18v3M8 21h8" stroke-linecap="round"/>
-    </svg>
+    <i data-feather="mic"></i>
   </button>
   <button class="send-button" title="Envoyer" id="sendButton">
-    <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
-      <path d="M5 12h14M13 6l6 6-6 6"/>
-    </svg>
+    <i data-feather="arrow-right"></i>
   </button>
   <input type="file" class="file-input" id="fileInput" multiple>
 </div>

components/file-upload.js

@@ -0,0 +1,163 @@
+class CustomFileUpload extends HTMLElement {
+  connectedCallback() {
+    this.attachShadow({ mode: 'open' });
+    this.shadowRoot.innerHTML = `
+      <style>
+        :host {
+          display: block;
+          position: fixed;
+          bottom: 80px;
+          left: 280px;
+          right: 40%;
+          background: white;
+          padding: 1rem;
+          border: 1px solid #e2e8f0;
+          border-radius: 0.5rem;
+          box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
+          z-index: 10;
+        }
+        .drop-area {
+          border: 2px dashed #cbd5e1;
+          border-radius: 0.5rem;
+          padding: 2rem;
+          text-align: center;
+          cursor: pointer;
+        }
+        .drop-area.highlight {
+          border-color: #3b82f6;
+          background-color: #f0f9ff;
+        }
+        .file-list {
+          margin-top: 1rem;
+          max-height: 200px;
+          overflow-y: auto;
+        }
+        .file-item {
+          display: flex;
+          align-items: center;
+          padding: 0.5rem;
+          border-bottom: 1px solid #e2e8f0;
+        }
+        .file-icon {
+          margin-right: 0.5rem;
+        }
+        .upload-button {
+          margin-top: 1rem;
+          background: #3b82f6;
+          color: white;
+          border: none;
+          border-radius: 0.5rem;
+          padding: 0.5rem 1rem;
+          cursor: pointer;
+        }
+        .upload-button:hover {
+          background: #2563eb;
+        }
+      </style>
+      <div class="drop-area" id="dropArea">
+        <i data-feather="upload-cloud"></i>
+        <p>Glissez-déposez vos fichiers ici ou cliquez pour sélectionner</p>
+        <input type="file" id="fileInput" multiple style="display: none;">
+        <div class="file-list" id="fileList"></div>
+        <button class="upload-button" id="uploadButton">Envoyer vers Rosalinda</button>
+      </div>
+    `;
+
+    const dropArea = this.shadowRoot.getElementById('dropArea');
+    const fileInput = this.shadowRoot.getElementById('fileInput');
+    const fileList = this.shadowRoot.getElementById('fileList');
+    const uploadButton = this.shadowRoot.getElementById('uploadButton');
+
+    let files = [];
+
+    dropArea.addEventListener('click', () => fileInput.click());
+    
+    fileInput.addEventListener('change', (e) => {
+      files = Array.from(e.target.files);
+      updateFileList();
+    });
+
+    ['dragenter', 'dragover', 'dragleave', 'drop'].forEach(eventName => {
+      dropArea.addEventListener(eventName, preventDefaults, false);
+    });
+
+    ['dragenter', 'dragover'].forEach(eventName => {
+      dropArea.addEventListener(eventName, highlight, false);
+    });
+
+    ['dragleave', 'drop'].forEach(eventName => {
+      dropArea.addEventListener(eventName, unhighlight, false);
+    });
+
+    dropArea.addEventListener('drop', handleDrop, false);
+
+    uploadButton.addEventListener('click', uploadFiles);
+
+    function preventDefaults(e) {
+      e.preventDefault();
+      e.stopPropagation();
+    }
+
+    function highlight() {
+      dropArea.classList.add('highlight');
+    }
+
+    function unhighlight() {
+      dropArea.classList.remove('highlight');
+    }
+
+    function handleDrop(e) {
+      const dt = e.dataTransfer;
+      files = Array.from(dt.files);
+      updateFileList();
+    }
+
+    function updateFileList() {
+      fileList.innerHTML = '';
+      files.forEach(file => {
+        const fileItem = document.createElement('div');
+        fileItem.className = 'file-item';
+        fileItem.innerHTML = `
+          <i data-feather="file" class="file-icon"></i>
+          <span>${file.name} (${formatFileSize(file.size)})</span>
+        `;
+        fileList.appendChild(fileItem);
+      });
+      feather.replace();
+    }
+
+    async function uploadFiles() {
+      if (files.length === 0) return;
+
+      const formData = new FormData();
+      files.forEach(file => formData.append('files', file));
+
+      try {
+        const response = await fetch('http://localhost:3333/api/files/upload', {
+          method: 'POST',
+          body: formData
+        });
+
+        const data = await response.json();
+        if (data.ok) {
+          alert(`${data.files.length} fichiers envoyés avec succès à Rosalinda`);
+          files = [];
+          updateFileList();
+        }
+      } catch (error) {
+        console.error('Error uploading files:', error);
+        alert('Erreur lors de l\'envoi des fichiers');
+      }
+    }
+
+    function formatFileSize(bytes) {
+      if (bytes === 0) return '0 Bytes';
+      const k = 1024;
+      const sizes = ['Bytes', 'KB', 'MB', 'GB'];
+      const i = Math.floor(Math.log(bytes) / Math.log(k));
+      return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i];
+    }
+  }
+}
+
+customElements.define('custom-file-upload', CustomFileUpload);

index.html

@@ -23,6 +23,7 @@
     <script src="components/sidebar.js"></script>
     <script src="components/chat.js"></script>
     <script src="components/code-preview.js"></script>
-    <script src="https://huggingface.co/deepsite/deepsite-badge.js"></script>
+    <script src="components/file-upload.js"></script>
+<script src="https://huggingface.co/deepsite/deepsite-badge.js"></script>
 </body>
 </html>

script.js

@@ -13,19 +13,24 @@ document.addEventListener('DOMContentLoaded', function() {
     const chat = document.querySelector('custom-chat');
     if (chat) {
         const shadowRoot = chat.shadowRoot;
-        // File picker
-        const fileButton = shadowRoot.getElementById('fileButton');
-        const fileInput = shadowRoot.getElementById('fileInput');
-        fileButton.addEventListener('click', () => fileInput.click());
-
-        // Connect apps
+    // File upload modal
+    const fileButton = shadowRoot.getElementById('fileButton');
+    const fileUpload = document.createElement('custom-file-upload');
+    fileButton.addEventListener('click', () => {
+      document.body.appendChild(fileUpload);
+      setTimeout(() => {
+        document.addEventListener('click', (e) => {
+          if (!fileUpload.contains(e.target) && e.target !== fileButton) {
+            fileUpload.remove();
+          }
+        }, { once: true });
+      }, 0);
+      feather.replace();
+    });
+// Connect apps
         const connectButton = shadowRoot.getElementById('connectButton');
         connectButton.addEventListener('click', () => {
-            const conversation = shadowRoot.querySelector('.conversation');
-            const message = document.createElement('div');
-            message.className = 'message';
-            message.textContent = 'Ouverture: connecter des applications...';
-            conversation.appendChild(message);
+            alert('Connecter des applications - Cette fonctionnalité sera implémentée bientôt');
         });
 
         // Microphone
@@ -39,14 +44,11 @@ document.addEventListener('DOMContentLoaded', function() {
                     stopSpeechRecognition();
                 }
             } else {
-                const conversation = shadowRoot.querySelector('.conversation');
-                const message = document.createElement('div');
-                message.className = 'message';
-                message.textContent = 'La reconnaissance vocale n\'est pas supportée par votre navigateur';
-                conversation.appendChild(message);
+                alert('La reconnaissance vocale n\'est pas supportée par votre navigateur');
             }
         });
-// Send message
+
+        // Send message
         const sendButton = shadowRoot.getElementById('sendButton');
         const messageInput = shadowRoot.getElementById('messageInput');
         sendButton.addEventListener('click', sendMessage);
@@ -95,12 +97,46 @@ document.addEventListener('DOMContentLoaded', function() {
             recognition.stop();
         }
     }
-
-    function sendMessage() {
+    async function sendMessage() {
         const message = messageInput.value.trim();
         if (message) {
-            // TODO: Implement actual message sending
-            console.log('Message sent:', message);
+            try {
+                const response = await fetch('http://localhost:3333/api/chat', {
+                    method: 'POST',
+                    headers: {
+                        'Content-Type': 'application/json'
+                    },
+                    body: JSON.stringify({
+                        projectId: 'default',
+                        text: message
+                    })
+                });
+                
+                const data = await response.json();
+                if (data.ok) {
+                    const conversation = shadowRoot.querySelector('.conversation');
+                    const userMessage = document.createElement('div');
+                    userMessage.className = 'message';
+                    userMessage.textContent = message;
+                    conversation.appendChild(userMessage);
+
+                    const aiMessage = document.createElement('div');
+                    aiMessage.className = 'message';
+                    aiMessage.textContent = data.reply;
+                    conversation.appendChild(aiMessage);
+
+                    if (data.toolResult) {
+                        const toolResult = document.createElement('div');
+                        toolResult.className = 'message tool-result';
+                        toolResult.textContent = data.toolResult;
+                        conversation.appendChild(toolResult);
+                    }
+
+                    conversation.scrollTop = conversation.scrollHeight;
+                }
+            } catch (error) {
+                console.error('Error sending message:', error);
+            }
             messageInput.value = '';
         }
     }