Spaces:

portraitart
/

interface-utilisateur

Running

App Files Files Community

portraitart commited on Jul 22, 2025

Commit

ec7f7d0

verified ·

1 Parent(s): 593aab0

Interface Utilisateur "Conçois un prototype Figma responsive incluant : 1. Page d'accueil avec mécanisme de soumission en 3 étapes guidées 2. Dashboard de contribution avec score d'impact en temps réel 3. Visualiseur de graphe de connaissances interactif (D3.js intégré) 4. Système de notifications push WebSocket 5. Centre de conformité RGPD intégré (préférences linguistiques, droit à l'oubli) Exporte le code frontend correspondant en React 18 avec Tailwind CSS et composants shadcn/ui." - Initial Deployment

Browse files

Files changed (2) hide show

README.md +6 -4
index.html +1228 -19

README.md CHANGED Viewed

@@ -1,10 +1,12 @@
 ---
-title: Interface Utilisateur
-emoji: 📈
 colorFrom: gray
-colorTo: yellow
 sdk: static
 pinned: false
 ---
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

 ---
+title: interface-utilisateur
+emoji: 🐳
 colorFrom: gray
+colorTo: green
 sdk: static
 pinned: false
+tags:
+  - deepsite
 ---
+Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

index.html CHANGED Viewed

@@ -1,19 +1,1228 @@
-<!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
-</html>

+import { useEffect, useRef, useState } from 'react';
+export function useWebSocket(url: string) {
+  const [lastMessage, setLastMessage] = useState<any>(null);
+  const ws = useRef<WebSocket | null>(null);
+  useEffect(() => {
+    ws.current = new WebSocket(url);
+    ws.current.onmessage = (event) => setLastMessage(JSON.parse(event.data));
+    return () => ws.current?.close();
+  }, [url]);
+  const send = (payload: any) => ws.current?.send(JSON.stringify(payload));
+  return { lastMessage, send };
+}
+import React from 'react';
+import { Button } from '@/components/ui/button';
+import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
+import { Switch } from '@/components/ui/switch';
+import { Label } from '@/components/ui/label';
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
+export default function RGPDPage() {
+  const deleteAccount = async () => {
+    if (confirm('Droits à l’oubli : êtes-vous sûr ? Cette action est irréversible.')) {
+      await fetch('/api/delete-account', { method: 'DELETE' });
+      window.location.href = '/';
+    }
+  };
+  return (
+    <div className="p-6 max-w-3xl mx-auto space-y-6">
+      <Card>
+        <CardHeader>
+          <CardTitle>Préférences linguistiques</CardTitle>
+        </CardHeader>
+        <CardContent>
+          <Label>Langue</Label>
+          <Select defaultValue="fr">
+            <SelectTrigger className="w-full">
+              <SelectValue />
+            </SelectTrigger>
+            <SelectContent>
+              <SelectItem value="fr">Français</SelectItem>
+              <SelectItem value="en">English</SelectItem>
+            </SelectContent>
+          </Select>
+        </CardContent>
+      </Card>
+      <Card>
+        <CardHeader>
+          <CardTitle>Notifications push</CardTitle>
+        </CardHeader>
+        <CardContent className="flex items-center justify-between">
+          <Label htmlFor="push-switch">Recevoir les notifications</Label>
+          <Switch id="push-switch" />
+        </CardContent>
+      </Card>
+      <Card>
+        <CardHeader>
+          <CardTitle>Droit à l’oubli</CardTitle>
+        </CardHeader>
+        <CardContent>
+          <p className="text-sm text-gray-600 mb-4">
+            Vous pouvez demander la suppression définitive de toutes vos données.
+          </p>
+          <Button variant="destructive" onClick={deleteAccount}>
+            Supprimer mon compte
+          </Button>
+        </CardContent>
+      </Card>
+    </div>
+  );
+}
+import React, { useRef, useEffect } from 'react';
+import * as d3 from 'd3';
+import { Card } from '@/components/ui/card';
+const data = {
+  nodes: [
+    { id: 'user:1', label: 'Alice' },
+    { id: 'contrib:42', label: 'Contribution #42' },
+    { id: 'tag:ai', label: 'IA' }
+  ],
+  links: [
+    { source: 'user:1', target: 'contrib:42' },
+    { source: 'contrib:42', target: 'tag:ai' }
+  ]
+};
+export default function GraphViewerPage() {
+  const ref = useRef<SVGSVGElement>(null);
+  useEffect(() => {
+    if (!ref.current) return;
+    const svg = d3.select(ref.current);
+    svg.selectAll('*').remove();
+    const width = 600;
+    const height = 400;
+    const simulation = d3.forceSimulation(data.nodes as any)
+      .force('link', d3.forceLink(data.links).id((d: any) => d.id))
+      .force('charge', d3.forceManyBody().strength(-200))
+      .force('center', d3.forceCenter(width / 2, height / 2));
+    const link = svg.append('g')
+      .selectAll('line')
+      .data(data.links)
+      .enter()
+      .append('line')
+      .attr('stroke', '#999');
+    const node = svg.append('g')
+      .selectAll('circle')
+      .data(data.nodes)
+      .enter()
+      .append('circle')
+      .attr('r', 10)
+      .attr('fill', '#69b3a2')
+      .call(d3.drag<any, any>()
+        .on('start', (event, d: any) => {
+          if (!event.active) simulation.alphaTarget(0.3).restart();
+          d.fx = d.x;
+          d.fy = d.y;
+        })
+        .on('drag', (event, d: any) => {
+          d.fx = event.x;
+          d.fy = event.y;
+        })
+        .on('end', (event, d: any) => {
+          if (!event.active) simulation.alphaTarget(0);
+          d.fx = null;
+          d.fy = null;
+        }));
+    const label = svg.append('g')
+      .selectAll('text')
+      .data(data.nodes)
+      .enter()
+      .append('text')
+      .text((d: any) => d.label)
+      .attr('font-size', 12)
+      .attr('dx', 12)
+      .attr('dy', 4);
+    simulation.on('tick', () => {
+      link
+        .attr('x1', (d: any) => d.source.x)
+        .attr('y1', (d: any) => d.source.y)
+        .attr('x2', (d: any) => d.target.x)
+        .attr('y2', (d: any) => d.target.y);
+      node
+        .attr('cx', (d: any) => d.x)
+        .attr('cy', (d: any) => d.y);
+      label
+        .attr('x', (d: any) => d.x)
+        .attr('y', (d: any) => d.y);
+    });
+  }, []);
+  return (
+    <div className="p-6">
+      <Card>
+        <svg ref={ref} width="100%" height="400" className="border rounded" />
+      </Card>
+    </div>
+  );
+}
+import React, { useEffect, useState } from 'react';
+import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
+import { Badge } from '@/components/ui/badge';
+import { useWebSocket } from '@/components/useWebSocket';
+export default function DashboardPage() {
+  const [score, setScore] = useState(0);
+  const { lastMessage } = useWebSocket('wss://api.example.com/notifs');
+  useEffect(() => {
+    fetch('/api/score').then(r => r.json()).then(d => setScore(d.score));
+  }, []);
+  useEffect(() => {
+    if (lastMessage?.type === 'SCORE_UPDATE') setScore(lastMessage.payload);
+  }, [lastMessage]);
+  return (
+    <div className="p-6 grid gap-6 md:grid-cols-2">
+      <Card>
+        <CardHeader>
+          <CardTitle>Score d'impact</CardTitle>
+        </CardHeader>
+        <CardContent>
+          <div className="text-4xl font-bold">{score}</div>
+          <Badge variant="outline" className="mt-2">
+            {score > 50 ? 'Excellent' : 'À améliorer'}
+          </Badge>
+        </CardContent>
+      </Card>
+      <Card>
+        <CardHeader>
+          <CardTitle>Notifications</CardTitle>
+        </CardHeader>
+        <CardContent>
+          {lastMessage ? (
+            <p>
+              {lastMessage.type}: {JSON.stringify(lastMessage.payload)}
+            </p>
+          ) : (
+            <p className="text-sm text-gray-500">Aucune nouvelle notification.</p>
+          )}
+        </CardContent>
+      </Card>
+    </div>
+  );
+}
+import React, { useState } from 'react';
+import { Button } from '@/components/ui/button';
+import { Progress } from '@/components/ui/progress';
+import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
+import { Input } from '@/components/ui/input';
+import { Textarea } from '@/components/ui/textarea';
+import { Label } from '@/components/ui/label';
+import { useWebSocket } from '@/components/useWebSocket';
+const steps = ['Type de contribution', 'Contenu', 'Résumé & envoi'];
+export default function HomePage() {
+  const [step, setStep] = useState(0);
+  const [data, setData] = useState({ type: 'text', content: '', metadata: '' });
+  const { send } = useWebSocket('wss://api.example.com/notifs');
+  const next = () => setStep(s => s + 1);
+  const prev = () => setStep(s => s - 1);
+  const submit = () => {
+    fetch('/api/submit-data', {
+      method: 'POST',
+      body: JSON.stringify(data),
+      headers: { 'Content-Type': 'application/json' }
+    }).then(() => send({ type: 'NEW_CONTRIBUTION' }));
+  };
+  return (
+    <div className="p-6 max-w-2xl mx-auto">
+      <Progress value={((step + 1) / steps.length) * 100} className="mb-6" />
+      <Card>
+        <CardHeader>
+          <CardTitle>{steps[step]}</CardTitle>
+        </CardHeader>
+        <CardContent>
+          {step === 0 && (
+            <>
+              <Label>Type</Label>
+              <select
+                className="w-full mt-2"
+                value={data.type}
+                onChange={e => setData({ ...data, type: e.target.value })}
+              >
+                <option value="text">Texte</option>
+                <option value="image">Image</option>
+                <option value="document">Document</option>
+              </select>
+            </>
+          )}
+          {step === 1 && (
+            <>
+              <Label>Contenu</Label>
+              <Textarea
+                className="mt-2"
+                rows={6}
+                value={data.content}
+                onChange={e => setData({ ...data, content: e.target.value })}
+              />
+            </>
+          )}
+          {step === 2 && (
+            <>
+              <h3 className="font-bold mb-2">Résumé</h3>
+              <p className="text-sm text-gray-600">Type: {data.type}</p>
+              <p className="text-sm text-gray-600">Contenu: {data.content.slice(0, 60)}...</p>
+            </>
+          )}
+          <div className="flex justify-between mt-6">
+            <Button variant="outline" disabled={step === 0} onClick={prev}>
+              Précédent
+            </Button>
+            {step < steps.length - 1 ? (
+              <Button onClick={next}>Suivant</Button>
+            ) : (
+              <Button onClick={submit}>Soumettre</Button>
+            )}
+          </div>
+        </CardContent>
+      </Card>
+    </div>
+  );
+}
+<!DOCTYPE html>
+<html lang="fr">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Architecture Système - Plateforme IA</title>
+    <script src="https://cdn.tailwindcss.com"></script>
+    <script src="https://cdn.jsdelivr.net/npm/mermaid@10/dist/mermaid.min.js"></script>
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/themes/prism-dark.min.css">
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/prism.min.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/components/prism-yaml.min.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/components/prism-json.min.js"></script>
+    <style>
+        .gradient-bg {
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+        }
+        .glass-effect {
+            background: rgba(255, 255, 255, 0.1);
+            backdrop-filter: blur(10px);
+            border: 1px solid rgba(255, 255, 255, 0.2);
+        }
+        .code-block {
+            background: #1a1a1a;
+            border-radius: 12px;
+            overflow-x: auto;
+        }
+        .mermaid-container {
+            display: flex;
+            justify-content: center;
+            min-height: 500px;
+            max-height: 800px;
+            background: #ffffff;
+            border: 2px solid #e5e7eb;
+            border-radius: 12px;
+            padding: 30px;
+            margin: 20px 0;
+            box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
+            position: relative;
+            overflow: hidden;
+        }
+        .mermaid-container .mermaid {
+            width: 100%;
+            max-width: 100%;
+            height: 100%;
+            cursor: grab;
+            transition: transform 0.3s ease;
+            transform-origin: center center;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            touch-action: none;
+            -webkit-user-select: none;
+            -moz-user-select: none;
+            -ms-user-select: none;
+            user-select: none;
+        }
+        .mermaid-container .mermaid svg {
+            max-width: 100%;
+            height: 100%;
+            display: block;
+            margin: 0 auto;
+        }
+        .mermaid-container .mermaid:active {
+            cursor: grabbing;
+        }
+        .mermaid-container.zoomed .mermaid {
+            height: 100%;
+            width: 100%;
+            cursor: grab;
+        }
+        .mermaid-controls {
+            position: absolute;
+            top: 15px;
+            right: 15px;
+            display: flex;
+            gap: 10px;
+            z-index: 20;
+            background: rgba(0, 0, 0, 0.8);
+            padding: 8px;
+            border-radius: 8px;
+            backdrop-filter: blur(10px);
+        }
+        .mermaid-control-btn {
+            background: rgba(255, 255, 255, 0.9);
+            border: none;
+            border-radius: 6px;
+            padding: 10px;
+            cursor: pointer;
+            transition: all 0.2s ease;
+            color: #374151;
+            font-size: 14px;
+            min-width: 36px;
+            height: 36px;
+            text-align: center;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+        }
+        .mermaid-control-btn:hover {
+            background: #ffffff;
+            transform: translateY(-1px);
+            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+        }
+        .mermaid-control-btn:active {
+            transform: translateY(0);
+        }
+        /* Responsive adjustments for mermaid controls */
+        @media (max-width: 1024px) {
+            .mermaid-control-btn:not(.reset-zoom) {
+                display: none;
+            }
+            .mermaid-controls {
+                top: auto;
+                bottom: 15px;
+                right: 15px;
+            }
+        }
+        /* Prevent horizontal overflow on small screens */
+        @media (max-width: 768px) {
+            .mermaid-container {
+                overflow-x: auto;
+            }
+        }
+        .tech-card {
+            transition: transform 0.3s ease, box-shadow 0.3s ease;
+        }
+        .tech-card:hover {
+            transform: translateY(-5px);
+            box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
+        }
+        .pulse {
+            animation: pulse 2s infinite;
+        }
+        @keyframes pulse {
+            0% { opacity: 1; }
+            50% { opacity: 0.5; }
+            100% { opacity: 1; }
+        }
+        .section-divider {
+            height: 2px;
+            background: linear-gradient(90deg, transparent, #667eea, transparent);
+            margin: 40px 0;
+        }
+    </style>
+</head>
+<body class="bg-gradient-to-br from-slate-50 to-slate-100 min-h-screen">
+    <nav class="gradient-bg text-white p-4 shadow-lg">
+        <div class="container mx-auto flex justify-between items-center">
+            <h1 class="text-2xl font-bold">Architecture Système IA</h1>
+            <div class="flex space-x-4">
+                <button onclick="scrollToSection('overview')" class="hover:opacity-80 transition-opacity">Vue d'ensemble</button>
+                <button onclick="scrollToSection('microservices')" class="hover:opacity-80 transition-opacity">Microservices</button>
+                <button onclick="scrollToSection('kubernetes')" class="hover:opacity-80 transition-opacity">Kubernetes</button>
+                <button onclick="scrollToSection('api')" class="hover:opacity-80 transition-opacity">API REST</button>
+            </div>
+        </div>
+    </nav>
+    <main class="container mx-auto p-6 max-w-7xl">
+        <!-- Vue d'ensemble -->
+        <section id="overview" class="mb-12">
+            <div class="text-center mb-8">
+                <h2 class="text-4xl font-bold text-gray-800 mb-4">Architecture Technique Complète</h2>
+                <p class="text-xl text-gray-600">Plateforme IA avec microservices Node.js/Next.js</p>
+            </div>
+            <!-- Diagramme d'architecture -->
+            <div class="bg-white rounded-2xl shadow-xl p-8 mb-8">
+                <h3 class="text-2xl font-bold text-gray-800 mb-6 text-center">Vue d'ensemble de l'architecture</h3>
+                <div class="mermaid-container" id="mermaid-container-1">
+                    <div class="mermaid-controls">
+                        <button class="mermaid-control-btn zoom-in" title="Zoom avant">🔍+</button>
+                        <button class="mermaid-control-btn zoom-out" title="Zoom arrière">🔍-</button>
+                        <button class="mermaid-control-btn reset-zoom" title="Réinitialiser">⌂</button>
+                        <button class="mermaid-control-btn fullscreen" title="Plein écran">⛶</button>
+                    </div>
+                    <div class="mermaid" id="architecture-diagram">
+                        graph TB
+                            subgraph "Client Layer"
+                                UI[Next.js Frontend]
+                                Mobile[Mobile Apps]
+                            end
+                            subgraph "API Gateway"
+                                GW[NGINX Gateway]
+                                Auth[Auth Service]
+                            end
+                            subgraph "Microservices"
+                                MS1[User Service]
+                                MS2[Contribution Service]
+                                MS3[AI Processing Service]
+                                MS4[Notification Service]
+                                MS5[Analytics Service]
+                            end
+                            subgraph "Data Layer"
+                                PG[(PostgreSQL + pgvector)]
+                                Redis[(Redis Cache)]
+                                RMQ[RabbitMQ]
+                                S3[S3 Storage]
+                            end
+                            subgraph "AI Services"
+                                HF[Hugging Face API]
+                                Embeddings[Embedding Service]
+                                Model[ML Models]
+                            end
+                            subgraph "Kubernetes"
+                                K8s[Kubernetes Cluster]
+                                HPA[HPA Autoscaler]
+                                Ingress[Ingress Controller]
+                            end
+                            UI --> GW
+                            Mobile --> GW
+                            GW --> Auth
+                            Auth --> MS1
+                            Auth --> MS2
+                            Auth --> MS3
+                            Auth --> MS4
+                            Auth --> MS5
+                            MS1 --> PG
+                            MS2 --> PG
+                            MS2 --> RMQ
+                            MS3 --> PG
+                            MS3 --> HF
+                            MS3 --> Redis
+                            MS4 --> Redis
+                            MS5 --> PG
+                            MS5 --> S3
+                            Embeddings --> Model
+                    </div>
+                </div>
+            </div>
+            <!-- Technologies -->
+            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
+                <div class="tech-card bg-white rounded-xl shadow-lg p-6">
+                    <div class="text-4xl mb-4">🚀</div>
+                    <h4 class="text-xl font-bold text-gray-800 mb-2">Backend Microservices</h4>
+                    <p class="text-gray-600">NestJS avec architecture modulaire, TypeScript, et patterns CQRS</p>
+                </div>
+                <div class="tech-card bg-white rounded-xl shadow-lg p-6">
+                    <div class="text-4xl mb-4">🧠</div>
+                    <h4 class="text-xl font-bold text-gray-800 mb-2">IA & Embeddings</h4>
+                    <p class="text-gray-600">Hugging Face integration avec sentence-transformers/all-mpnet-base-v2</p>
+                </div>
+                <div class="tech-card bg-white rounded-xl shadow-lg p-6">
+                    <div class="text-4xl mb-4">🔒</div>
+                    <h4 class="text-xl font-bold text-gray-800 mb-2">Sécurité</h4>
+                    <p class="text-gray-600">JWT OAuth2.0 + AES-256 encryption pour les données sensibles</p>
+                </div>
+            </div>
+        </section>
+        <div class="section-divider"></div>
+        <!-- Microservices -->
+        <section id="microservices" class="mb-12">
+            <h2 class="text-3xl font-bold text-gray-800 mb-8">Architecture Microservices</h2>
+            <div class="grid grid-cols-1 lg:grid-cols-2 gap-8">
+                <div class="bg-white rounded-xl shadow-xl p-6">
+                    <h3 class="text-xl font-bold text-gray-800 mb-4">Structure des Services</h3>
+                    <pre class="code-block"><code class="language-yaml"># docker-compose.yml
+version: '3.8'
+services:
+  user-service:
+    build: ./services/user
+    ports:
+      - "3001:3000"
+    environment:
+      - POSTGRES_URL=postgresql://...
+      - REDIS_URL=redis://redis:6379
+  contribution-service:
+    build: ./services/contribution
+    ports:
+      - "3002:3000"
+    depends_on:
+      - rabbitmq
+      - postgres
+  ai-service:
+    build: ./services/ai
+    ports:
+      - "3003:3000"
+    environment:
+      - HUGGING_FACE_API_KEY=${HF_API_KEY}
+    volumes:
+      - ./models:/app/models</code></pre>
+                </div>
+                <div class="bg-white rounded-xl shadow-xl p-6">
+                    <h3 class="text-xl font-bold text-gray-800 mb-4">Configuration NestJS</h3>
+                    <pre class="code-block"><code class="language-typescript">// app.module.ts
+import { Module } from '@nestjs/common';
+import { TypeOrmModule } from '@nestjs/typeorm';
+import { RedisModule } from './redis/redis.module';
+import { RabbitMQModule } from '@golevelup/nestjs-rabbitmq';
+@Module({
+  imports: [
+    TypeOrmModule.forRoot({
+      type: 'postgres',
+      url: process.env.DATABASE_URL,
+      entities: [__dirname + '/**/*.entity{.ts,.js}'],
+      synchronize: true,
+    }),
+    RedisModule.forRoot({
+      host: process.env.REDIS_HOST,
+      port: process.env.REDIS_PORT,
+    }),
+    RabbitMQModule.forRoot(RabbitMQModule, {
+      exchanges: [
+        {
+          name: 'contributions',
+          type: 'topic',
+        },
+      ],
+    }),
+  ],
+})
+export class AppModule {}</code></pre>
+                </div>
+            </div>
+        </section>
+        <div class="section-divider"></div>
+        <!-- Kubernetes -->
+        <section id="kubernetes" class="mb-12">
+            <h2 class="text-3xl font-bold text-gray-800 mb-8">Déploiement Kubernetes</h2>
+            <div class="bg-white rounded-2xl shadow-xl p-8">
+                <h3 class="text-2xl font-bold text-gray-800 mb-6">Configuration Kubernetes avec Auto-scaling</h3>
+                <!-- Diagramme K8s -->
+                <div class="mermaid-container" id="mermaid-container-2">
+                    <div class="mermaid-controls">
+                        <button class="mermaid-control-btn zoom-in" title="Zoom avant">🔍+</button>
+                        <button class="mermaid-control-btn zoom-out" title="Zoom arrière">🔍-</button>
+                        <button class="mermaid-control-btn reset-zoom" title="Réinitialiser">⌂</button>
+                        <button class="mermaid-control-btn fullscreen" title="Plein écran">⛶</button>
+                    </div>
+                    <div class="mermaid" id="kubernetes-diagram">
+                        graph TD
+                            subgraph "Kubernetes Cluster"
+                                subgraph "Namespace: ai-platform"
+                                    subgraph "Deployment: user-service"
+                                        US1[Pod: user-service-1]
+                                        US2[Pod: user-service-2]
+                                        US3[Pod: user-service-3]
+                                    end
+                                    subgraph "Deployment: ai-service"
+                                        AIS1[Pod: ai-service-1]
+                                        AIS2[Pod: ai-service-2]
+                                    end
+                                    subgraph "HPA"
+                                        HPA1[HPA: user-service]
+                                        HPA2[HPA: ai-service]
+                                    end
+                                    subgraph "Services"
+                                        SVC1[Service: user-service]
+                                        SVC2[Service: ai-service]
+                                        ING[Ingress: api-gateway]
+                                    end
+                                    subgraph "PVC"
+                                        PVC1[PVC: postgres-data]
+                                        PVC2[PVC: redis-data]
+                                    end
+                                end
+                                subgraph "Monitoring"
+                                    PROM[Prometheus]
+                                    GRAF[Grafana]
+                                end
+                            end
+                            HPA1 -.-> US1
+                            HPA1 -.-> US2
+                            HPA1 -.-> US3
+                            HPA2 -.-> AIS1
+                            HPA2 -.-> AIS2
+                    </div>
+                </div>
+                <div class="grid grid-cols-1 lg:grid-cols-2 gap-8 mt-8">
+                    <div>
+                        <h4 class="text-lg font-bold text-gray-800 mb-4">HPA Configuration</h4>
+                        <pre class="code-block"><code class="language-yaml">apiVersion: autoscaling/v2
+kind: HorizontalPodAutoscaler
+metadata:
+  name: ai-service-hpa
+spec:
+  scaleTargetRef:
+    apiVersion: apps/v1
+    kind: Deployment
+    name: ai-service
+  minReplicas: 2
+  maxReplicas: 10
+  metrics:
+  - type: Resource
+    resource:
+      name: cpu
+      target:
+        type: Utilization
+        averageUtilization: 70
+  - type: Resource
+    resource:
+      name: memory
+      target:
+        type: Utilization
+        averageUtilization: 80</code></pre>
+                    </div>
+                    <div>
+                        <h4 class="text-lg font-bold text-gray-800 mb-4">Deployment avec pgvector</h4>
+                        <pre class="code-block"><code class="language-yaml">apiVersion: apps/v1
+kind: Deployment
+metadata:
+  name: postgres-pgvector
+spec:
+  replicas: 1
+  selector:
+    matchLabels:
+      app: postgres
+  template:
+    spec:
+      containers:
+      - name: postgres
+        image: ankane/pgvector:v0.5.0
+        env:
+        - name: POSTGRES_DB
+          value: "ai_platform"
+        - name: POSTGRES_USER
+          valueFrom:
+            secretKeyRef:
+              name: postgres-secret
+              key: username
+        volumeMounts:
+        - name: postgres-storage
+          mountPath: /var/lib/postgresql/data
+      volumes:
+      - name: postgres-storage
+        persistentVolumeClaim:
+          claimName: postgres-pvc</code></pre>
+                    </div>
+                </div>
+            </div>
+        </section>
+        <div class="section-divider"></div>
+        <!-- API REST -->
+        <section id="api" class="mb-12">
+            <h2 class="text-3xl font-bold text-gray-800 mb-8">Spécifications API RESTful</h2>
+            <div class="grid grid-cols-1 lg:grid-cols-2 gap-8">
+                <div class="bg-white rounded-xl shadow-xl p-6">
+                    <h3 class="text-xl font-bold text-gray-800 mb-4">POST /submit-data</h3>
+                    <pre class="code-block"><code class="language-json">{
+  "openapi": "3.0.0",
+  "paths": {
+    "/submit-data": {
+      "post": {
+        "summary": "Soumettre des données pour traitement IA",
+        "security": [{"bearerAuth": []}],
+        "requestBody": {
+          "required": true,
+          "content": {
+            "application/json": {
+              "schema": {
+                "type": "object",
+                "required": ["type", "content"],
+                "properties": {
+                  "type": {
+                    "type": "string",
+                    "enum": ["text", "image", "document"]
+                  },
+                  "content": {
+                    "type": "string"
+                  },
+                  "metadata": {
+                    "type": "object",
+                    "additionalProperties": true
+                  }
+                }
+              }
+            }
+          }
+        },
+        "responses": {
+          "202": {
+            "description": "Données acceptées pour traitement",
+            "content": {
+              "application/json": {
+                "schema": {
+                  "type": "object",
+                  "properties": {
+                    "jobId": {
+                      "type": "string",
+                      "format": "uuid"
+                    },
+                    "status": {
+                      "type": "string",
+                      "enum": ["queued", "processing"]
+                    }
+                  }
+                }
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+}</code></pre>
+                </div>
+                <div class="bg-white rounded-xl shadow-xl p-6">
+                    <h3 class="text-xl font-bold text-gray-800 mb-4">GET /fetch-results</h3>
+                    <pre class="code-block"><code class="language-json">{
+  "openapi": "3.0.0",
+  "paths": {
+    "/fetch-results": {
+      "get": {
+        "summary": "Récupérer les résultats du traitement IA",
+        "security": [{"bearerAuth": []}],
+        "parameters": [
+          {
+            "name": "jobId",
+            "in": "query",
+            "required": true,
+            "schema": {
+              "type": "string",
+              "format": "uuid"
+            }
+          }
+        ],
+        "responses": {
+          "200": {
+            "description": "Résultats du traitement",
+            "content": {
+              "application/json": {
+                "schema": {
+                  "type": "object",
+                  "properties": {
+                    "jobId": {
+                      "type": "string",
+                      "format": "uuid"
+                    },
+                    "status": {
+                      "type": "string",
+                      "enum": ["pending", "completed", "failed"]
+                    },
+                    "result": {
+                      "type": "object",
+                      "properties": {
+                        "embeddings": {
+                          "type": "array",
+                          "items": {
+                            "type": "number"
+                          }
+                        },
+                        "classification": {
+                          "type": "string"
+                        },
+                        "confidence": {
+                          "type": "number",
+                          "minimum": 0,
+                          "maximum": 1
+                        }
+                      }
+                    }
+                  }
+                }
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+}</code></pre>
+                </div>
+            </div>
+            <!-- Exemple de requête -->
+            <div class="mt-8 bg-white rounded-xl shadow-xl p-6">
+                <h3 class="text-xl font-bold text-gray-800 mb-4">Exemple d'utilisation</h3>
+                <pre class="code-block"><code class="language-javascript">// Client JavaScript
+const submitData = async (content) => {
+  const response = await fetch('https://api.ai-platform.com/submit-data', {
+    method: 'POST',
+    headers: {
+      'Authorization': `Bearer ${token}`,
+      'Content-Type': 'application/json'
+    },
+    body: JSON.stringify({
+      type: 'text',
+      content: content,
+      metadata: { source: 'web' }
+    })
+  });
+  const { jobId } = await response.json();
+  // Poll for results
+  const checkResults = setInterval(async () => {
+    const result = await fetch(`/fetch-results?jobId=${jobId}`, {
+      headers: { 'Authorization': `Bearer ${token}` }
+    });
+    const data = await result.json();
+    if (data.status === 'completed') {
+      clearInterval(checkResults);
+      console.log('Résultats:', data.result);
+    }
+  }, 1000);
+};</code></pre>
+            </div>
+        </section>
+    </main>
+    <footer class="bg-gray-800 text-white py-8 mt-12">
+        <div class="container mx-auto px-6 text-center">
+            <p>&copy; 2024 Architecture Système IA - Tous droits réservés</p>
+        </div>
+    </footer>
+    <script>
+        // Initialize Mermaid
+        mermaid.initialize({
+            startOnLoad: true,
+            theme: 'default',
+            flowchart: {
+                useMaxWidth: false,
+                htmlLabels: true
+            }
+        });
+        // Initialize Mermaid Controls for zoom and pan
+        function initializeMermaidControls() {
+            const containers = document.querySelectorAll('.mermaid-container');
+            containers.forEach(container => {
+            const mermaidElement = container.querySelector('.mermaid');
+            let scale = 1;
+            let isDragging = false;
+            let startX, startY, translateX = 0, translateY = 0;
+            // 触摸相关状态
+            let isTouch = false;
+            let touchStartTime = 0;
+            let initialDistance = 0;
+            let initialScale = 1;
+            let isPinching = false;
+            // Zoom controls
+            const zoomInBtn = container.querySelector('.zoom-in');
+            const zoomOutBtn = container.querySelector('.zoom-out');
+            const resetBtn = container.querySelector('.reset-zoom');
+            const fullscreenBtn = container.querySelector('.fullscreen');
+            function updateTransform() {
+                mermaidElement.style.transform = `translate(${translateX}px, ${translateY}px) scale(${scale})`;
+                if (scale > 1) {
+                container.classList.add('zoomed');
+                } else {
+                container.classList.remove('zoomed');
+                }
+                mermaidElement.style.cursor = isDragging ? 'grabbing' : 'grab';
+            }
+            if (zoomInBtn) {
+                zoomInBtn.addEventListener('click', () => {
+                scale = Math.min(scale * 1.25, 4);
+                updateTransform();
+                });
+            }
+            if (zoomOutBtn) {
+                zoomOutBtn.addEventListener('click', () => {
+                scale = Math.max(scale / 1.25, 0.3);
+                if (scale <= 1) {
+                    translateX = 0;
+                    translateY = 0;
+                }
+                updateTransform();
+                });
+            }
+            if (resetBtn) {
+                resetBtn.addEventListener('click', () => {
+                scale = 1;
+                translateX = 0;
+                translateY = 0;
+                updateTransform();
+                });
+            }
+            if (fullscreenBtn) {
+                fullscreenBtn.addEventListener('click', () => {
+                if (container.requestFullscreen) {
+                    container.requestFullscreen();
+                } else if (container.webkitRequestFullscreen) {
+                    container.webkitRequestFullscreen();
+                } else if (container.msRequestFullscreen) {
+                    container.msRequestFullscreen();
+                }
+                });
+            }
+            // Mouse Events
+            mermaidElement.addEventListener('mousedown', (e) => {
+                if (isTouch) return; // 如果是触摸设备，忽略鼠标事件
+                isDragging = true;
+                startX = e.clientX - translateX;
+                startY = e.clientY - translateY;
+                mermaidElement.style.cursor = 'grabbing';
+                updateTransform();
+                e.preventDefault();
+            });
+            document.addEventListener('mousemove', (e) => {
+                if (isDragging && !isTouch) {
+                translateX = e.clientX - startX;
+                translateY = e.clientY - startY;
+                updateTransform();
+                }
+            });
+            document.addEventListener('mouseup', () => {
+                if (isDragging && !isTouch) {
+                isDragging = false;
+                mermaidElement.style.cursor = 'grab';
+                updateTransform();
+                }
+            });
+            document.addEventListener('mouseleave', () => {
+                if (isDragging && !isTouch) {
+                isDragging = false;
+                mermaidElement.style.cursor = 'grab';
+                updateTransform();
+                }
+            });
+            // 获取两点之间的距离
+            function getTouchDistance(touch1, touch2) {
+                return Math.hypot(
+                touch2.clientX - touch1.clientX,
+                touch2.clientY - touch1.clientY
+                );
+            }
+            // Touch Events - 触摸事件处理
+            mermaidElement.addEventListener('touchstart', (e) => {
+                isTouch = true;
+                touchStartTime = Date.now();
+                if (e.touches.length === 1) {
+                // 单指拖动
+                isPinching = false;
+                isDragging = true;
+                const touch = e.touches[0];
+                startX = touch.clientX - translateX;
+                startY = touch.clientY - translateY;
+                } else if (e.touches.length === 2) {
+                // 双指缩放
+                isPinching = true;
+                isDragging = false;
+                const touch1 = e.touches[0];
+                const touch2 = e.touches[1];
+                initialDistance = getTouchDistance(touch1, touch2);
+                initialScale = scale;
+                }
+                e.preventDefault();
+            }, { passive: false });
+            mermaidElement.addEventListener('touchmove', (e) => {
+                if (e.touches.length === 1 && isDragging && !isPinching) {
+                // 单指拖动
+                const touch = e.touches[0];
+                translateX = touch.clientX - startX;
+                translateY = touch.clientY - startY;
+                updateTransform();
+                } else if (e.touches.length === 2 && isPinching) {
+                // 双指缩放
+                const touch1 = e.touches[0];
+                const touch2 = e.touches[1];
+                const currentDistance = getTouchDistance(touch1, touch2);
+                const newScale = Math.min(Math.max(
+                    initialScale * (currentDistance / initialDistance),
+                    0.3
+                ), 4);
+                scale = newScale;
+                updateTransform();
+                }
+                e.preventDefault();
+            }, { passive: false });
+            mermaidElement.addEventListener('touchend', (e) => {
+                // 重置状态
+                isDragging = false;
+                isPinching = false;
+                // 延迟重置isTouch，避免鼠标事件立即触发
+                setTimeout(() => {
+                isTouch = false;
+                }, 100);
+                updateTransform();
+                e.preventDefault();
+            });
+            mermaidElement.addEventListener('touchcancel', (e) => {
+                isDragging = false;
+                isPinching = false;
+                isTouch = false;
+                updateTransform();
+                e.preventDefault();
+            });
+            // Enhanced wheel zoom with better center point handling
+            container.addEventListener('wheel', (e) => {
+                e.preventDefault();
+                const rect = container.getBoundingClientRect();
+                const centerX = rect.width / 2;
+                const centerY = rect.height / 2;
+                const delta = e.deltaY > 0 ? 0.9 : 1.1;
+                const newScale = Math.min(Math.max(scale * delta, 0.3), 4);
+                // Adjust translation to zoom towards center
+                if (newScale !== scale) {
+                const scaleDiff = newScale / scale;
+                translateX = translateX * scaleDiff;
+                translateY = translateY * scaleDiff;
+                scale = newScale;
+                if (scale <= 1) {
+                    translateX = 0;
+                    translateY = 0;
+                }
+                updateTransform();
+                }
+            });
+            // Initialize display
+            updateTransform();
+            });
+        }
+        // Scroll to section
+        function scrollToSection(sectionId) {
+            document.getElementById(sectionId).scrollIntoView({
+                behavior: 'smooth'
+            });
+        }
+        // Add pulse effect to cards
+        document.querySelectorAll('.tech-card').forEach(card => {
+            card.addEventListener('mouseenter', () => {
+                card.classList.add('pulse');
+            });
+            card.addEventListener('mouseleave', () => {
+                card.classList.remove('pulse');
+            });
+        });
+        // Initialize Prism
+        document.addEventListener('DOMContentLoaded', () => {
+            Prism.highlightAll();
+        });
+        // Ensure Mermaid is rendered after DOM is loaded
+        document.addEventListener('DOMContentLoaded', () => {
+            setTimeout(() => {
+                initializeMermaidControls();
+            }, 1000);
+        });
+    </script>
+<p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=portraitart/interface-utilisateur" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
+</html>