agora-ai/README.md
Muyue 31cd84186f Refactor: UI redesign with new glasmorphism layout and auto-rounds
- Remove all emojis from UI elements
- Redesign with two-column layout: timeline sidebar + content
- Implement automatic rounds without manual button
- Add persistent timeline panel with progress tracking
- Implement true convergence (all agents must agree)
- Add TimelinePanel component with progress bar
- Update styling with improved glasmorphism effects
- Clean up mentions of external tools
2025-10-18 22:38:46 +02:00

202 lines
6.4 KiB
Markdown

# Project Agora
## Description
Project Agora est une plateforme web permettant à plusieurs intelligences artificielles de **collaborer** pour concevoir une architecture logicielle complète à partir d'une **description de projet** et optionnellement d'une **documentation contexte**.
L'objectif est de produire :
- Une **architecture logicielle complète**, incluant :
- Une **hiérarchie de fichiers** structurée pour le projet
- Une **spécification détaillée** du contenu attendu pour chaque fichier (sans implémentation de code, uniquement une description fonctionnelle et technique)
- Un **raisonnement justifié** pour chaque choix technique.
- Des **diagrammes explicatifs** (Mermaid).
- Une **synthèse finale cohérente** prête à être utilisée comme base de développement.
Aucune génération de code direct n'est effectuée : seules des **explications, réflexions et structures** sont produites.
---
## Objectif
Reproduire une **table ronde d'IA spécialistes**, chaque agent IA représentant un rôle spécifique :
- Lead Architect (Architecte logiciel)
- Backend Engineer (Développeur backend)
- Frontend Engineer (Développeur frontend)
- UI Designer (Designer UI/UX)
- DevOps Engineer (Ingénieur DevOps)
- Product Manager (Chef de projet)
- Security Specialist (Spécialiste sécurité)
L'aspect le plus crucial de ces IA réside dans leur capacité à **collaborer itérativement** pour améliorer collectivement la spécification architecturale jusqu'à convergence naturelle (quand plus aucune amélioration n'est proposée).
---
## Exemple d'utilisation
L'utilisateur entre ceci dans l'interface :
> « Je souhaite faire une application de calculatrice scientifique responsive web. »
Le système demande alors à plusieurs IA leur point de vue sur :
- Le langage ou framework le plus adapté
- L'organisation du projet (folders, modules)
- Les fichiers essentiels
- Les interactions front/back éventuelles
- Le design minimal (UI/UX conceptuel)
Elles discutent pour converger vers un consensus, puis produisent une **fiche conceptuelle du projet** au format structuré (JSON + affichage visuel + diagrammes Mermaid).
---
## Architecture technique
### Stack principal
- **Frontend**: Vue.js 3 + Vite
- **Backend**: Node.js + Express
- **AI Layer**: Multi-agent système avec Mistral API
- **Storage**: SQLite + JSON backup
- **Diagrammes**: Mermaid.js
### Architecture globale
```mermaid
graph TD
A[Frontend: Vue.js 3] -->|User Prompt| B[Backend: Node.js]
B -->|Orchestration| C[AI Layer: Mistral Agents]
C -->|Debate Data| D[Storage: SQLite/JSON]
C -->|Diagram Specs| E[Mermaid Engine]
E -->|SVG/Render| A
D -->|History| A
```
---
## Fonctionnalités
### Conception Collaborative par IA
- **7 agents spécialisés** : Architecte, Backend Engineer, Frontend Engineer, UI Designer, DevOps Engineer, Product Manager, Security Specialist
- **Création itérative** : Lead Architect crée le document initial
- **Tours de table** : Chaque agent revoit et propose des améliorations
- **Document évolutif** : Amélioration progressive à chaque passage
- **Convergence naturelle** : Arrêt automatique quand tous les agents sont satisfaits
- **Traçabilité complète** : Historique de toutes les modifications
- **Format Markdown** : Output toujours en Markdown (.md)
- **Context files** : Support d'upload de fichiers MD/TXT en entrée (optionnel)
- **Network monitoring** : Indicateur temps réel de latence et qualité réseau
### Système multi-agents IA
- **Intégration Mistral AI** pour génération de réponses intelligentes et contextuelles
- **System prompts spécialisés** pour chaque rôle d'agent
- **Contexte intelligent** : Les agents voient l'historique et le document actuel
### Interface et visualisation
- **Saisie de prompt** décrivant le projet souhaité
- **Upload optionnel** de fichiers contexte (MD/TXT)
- **Visualisation en temps réel** des modifications via WebSocket
- **Timeline d'évolution** du document avec historique complet
- **Affichage interactif** du document Markdown final
- **Indicateurs de progression** et statuts du session
### Architecture et stockage
- **API REST** pour gestion des sessions collaboratives
- **WebSocket** pour streaming temps réel des modifications d'agents
- **Base SQLite** pour persistance des sessions, versions et historique complet
- **Versioning intelligent** : Chaque modification crée une version avec métadonnées (agent, raison, round)
---
## Démarrage rapide
### Prérequis
- Node.js 18+
- Clé API Mistral AI ([obtenir ici](https://console.mistral.ai/))
### Installation
**1. Backend**
```bash
cd backend
npm install
cp .env.example .env
# Éditer .env et ajouter votre MISTRAL_API_KEY
npm start
```
**2. Frontend**
```bash
cd frontend
npm install
npm run dev
```
**3. Accéder à l'application**
- Frontend: http://localhost:5173
- Backend API: http://localhost:3000
- WebSocket: ws://localhost:3000
---
## Flux Utilisateur
```mermaid
sequenceDiagram
participant User
participant Backend
participant Agents
User->>Backend: Project description + optional context file
Backend->>Agents: Lead Architect creates initial document
Agents-->>Backend: Document v1
Backend->>Agents: Round 1: Review and improve
Agents-->>Backend: Updates proposed
Backend->>Agents: Round 2-N: Review updated document
Agents-->>Backend: More updates OR no changes
Backend-->>User: Final Markdown document + history
```
---
## Utilisation
### Étapes
1. **Décrire le projet** : Entrez une description détaillée
2. **Ajouter un contexte** (optionnel) : Upload un fichier MD ou TXT
3. **Sélectionner** : Nombre d'agents (3, 5, ou 7)
4. **Lancer** : Start Design Session
5. **Suivre** :
- Visualisez le document en temps réel
- Consultez la timeline
- Lancez les tours avec "Next Review Round"
6. **Résultat** : Document Markdown téléchargeable
### Exemple
Entrée:
```
Plateforme gestion projets temps réel, équipes distribuées,
gestion tâches, communication, partage fichiers, 10K+ users
```
Processus:
- Round 1: Lead Architect - Architecture générale
- Round 2: Backend - APIs et base de données
- Round 3: Frontend - Structure UI
- Round 4: UI Designer - Guidelines UX
- Round 5: DevOps - Infrastructure
- Round 6: Product Manager - Besoins métier
- Round 7: Security - Mesures sécurité
Sortie: Spécification architecturale Markdown complète
---
## Licence
MIT License — Open-source