Upload 16 files

.env.local

@@ -0,0 +1 @@
+GEMINI_API_KEY=PLACEHOLDER_API_KEY

.gitignore

@@ -0,0 +1,24 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?

.vercelignore

@@ -0,0 +1,9 @@
+
+# Empêcher la détection de framework Flask
+pyproject.toml
+requirements.txt
+setup.py
+Pipfile
+Pipfile.lock
+.venv
+venv

App.tsx

@@ -0,0 +1,111 @@
+
+import React, { useState } from 'react';
+import Sidebar from './components/Sidebar';
+import PipelineStudio from './components/PipelineStudio';
+import ChallengeMode from './components/ChallengeMode';
+import CustomFunctionEditor from './components/CustomFunctionEditor';
+import CodeCorrector from './components/CodeCorrector';
+import { ViewState, NodeDefinition, Language, Challenge } from './types';
+import { CHALLENGES } from './constants';
+
+const App: React.FC = () => {
+  const [currentView, setCurrentView] = useState<ViewState>('STUDIO');
+  const [language, setLanguage] = useState<Language>('en');
+  const [customNodes, setCustomNodes] = useState<NodeDefinition[]>([]);
+  const [activeChallenge, setActiveChallenge] = useState<Challenge | null>(null);
+  const [userChallenges, setUserChallenges] = useState<Challenge[]>([]);
+  const [completedChallenges, setCompletedChallenges] = useState<Record<string, { date: string }>>({});
+
+  const handleCustomNodeCreated = (node: NodeDefinition) => {
+    setCustomNodes(prev => [...prev, node]);
+    setCurrentView('STUDIO'); 
+  };
+
+  const handleImportCommunityNode = (node: NodeDefinition) => {
+      // Clone the node to avoid reference issues
+      const importedNode = { ...node, id: `imported_${Date.now()}` };
+      setCustomNodes(prev => [...prev, importedNode]);
+  };
+
+  const handleEnterChallengeWorkspace = (challenge: Challenge) => {
+      setActiveChallenge(challenge);
+      setCurrentView('CHALLENGE_WORKSPACE');
+  };
+
+  const handleExitChallenge = () => {
+      setActiveChallenge(null);
+      setCurrentView('CHALLENGES');
+  };
+
+  const handleChallengeComplete = (challengeId: string) => {
+      setCompletedChallenges(prev => ({
+          ...prev,
+          [challengeId]: { date: new Date().toISOString() }
+      }));
+  };
+
+  const getChallengesWithStatus = () => {
+      return [...CHALLENGES, ...userChallenges].map(c => ({
+          ...c,
+          isCompleted: !!completedChallenges[c.id],
+          completionDate: completedChallenges[c.id]?.date || null
+      }));
+  };
+
+  const renderContent = () => {
+    switch (currentView) {
+      case 'STUDIO':
+        return <PipelineStudio 
+            customNodes={customNodes} 
+            language={language}
+            onImportCommunityNode={handleImportCommunityNode}
+        />;
+      case 'CHALLENGES':
+        return <ChallengeMode 
+            language={language} 
+            onEnterChallengeWorkspace={handleEnterChallengeWorkspace} 
+            userChallenges={getChallengesWithStatus().filter(c => c.isUserCreated)}
+            allChallengesWithStatus={getChallengesWithStatus()} // Pass full list with status
+            onSaveChallenge={(c) => setUserChallenges([...userChallenges, c])}
+        />;
+      case 'EDITOR':
+        return <CustomFunctionEditor onNodeCreated={handleCustomNodeCreated} language={language} />;
+      case 'CORRECTOR':
+        return <CodeCorrector language={language} />;
+      case 'CHALLENGE_WORKSPACE':
+        return (
+            <PipelineStudio 
+                key="challenge-workspace"
+                customNodes={[]} // No custom nodes in challenge mode
+                language={language}
+                activeChallenge={activeChallenge}
+                onExitChallenge={handleExitChallenge}
+                onChallengeComplete={handleChallengeComplete}
+            />
+        );
+      default:
+        return <PipelineStudio customNodes={customNodes} language={language} />;
+    }
+  };
+
+  return (
+    <div className="flex h-screen w-screen bg-slate-950 text-slate-100 font-sans selection:bg-cyan-500/30">
+      <Sidebar 
+        currentView={currentView === 'CHALLENGE_WORKSPACE' ? 'CHALLENGES' : currentView} 
+        onChangeView={(view) => {
+            if (currentView === 'CHALLENGE_WORKSPACE' && view !== 'CHALLENGES') {
+                setActiveChallenge(null);
+            }
+            setCurrentView(view);
+        }} 
+        language={language}
+        onToggleLanguage={() => setLanguage(l => l === 'en' ? 'fr' : 'en')}
+      />
+      <main className="flex-1 overflow-hidden relative">
+        {renderContent()}
+      </main>
+    </div>
+  );
+};
+
+export default App;

README.md

@@ -1,11 +1,22 @@
+
 ---
-title: PyVisionLab
-emoji: 🐢
-colorFrom: indigo
-colorTo: green
+title: Drag-and-Vision
+emoji: 👁️
+colorFrom: blue
+colorTo: indigo
 sdk: docker
+app_port: 7860
 pinned: false
-short_description: Drag and drop for computer vision
 ---
 
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
+# Drag-and-Vision
+
+Application d'analyse d'images interactive utilisant **Google Gemini 1.5 Flash** et déployée via Docker sur Hugging Face Spaces.
+
+### Configuration
+N'oubliez pas d'ajouter votre `GOOGLE_API_KEY` dans les **Settings > Variables and Secrets** de votre Hugging Face Space.
+
+### Utilisation locale
+1. `pip install -r requirements.txt`
+2. `export GOOGLE_API_KEY=votre_cle`
+3. `python app.py`

app.py

@@ -0,0 +1,49 @@
+
+import os
+from flask import Flask, render_template, request, jsonify
+import google.generativeai as genai
+from PIL import Image
+import io
+
+app = Flask(__name__)
+
+# Configuration de la sécurité via variable d'environnement
+api_key = os.environ.get("GOOGLE_API_KEY")
+if api_key:
+    genai.configure(api_key=api_key)
+else:
+    print("WARNING: GOOGLE_API_KEY not found in environment variables.")
+
+# Initialisation du modèle Gemini
+model = genai.GenerativeModel("gemini-1.5-flash")
+
+@app.route('/')
+def index():
+    return render_template('index.html')
+
+@app.route('/analyze', methods=['POST'])
+def analyze():
+    if 'image' not in request.files:
+        return jsonify({"error": "Aucune image reçue"}), 400
+    
+    file = request.files['image']
+    prompt = request.form.get('prompt', 'Analyse cette image en détail.')
+
+    try:
+        # Lecture et conversion de l'image pour PIL
+        img_bytes = file.read()
+        img = Image.open(io.BytesIO(img_bytes))
+        
+        # Appel à Gemini
+        response = model.generate_content([prompt, img])
+        
+        return jsonify({
+            "analysis": response.text,
+            "status": "success"
+        })
+    except Exception as e:
+        return jsonify({"error": str(e)}), 500
+
+if __name__ == '__main__':
+    # Écoute sur l'hôte et le port requis par Hugging Face
+    app.run(host='0.0.0.0', port=7860)

constants.ts

@@ -0,0 +1,472 @@
+
+import { Challenge, NodeDefinition, NodeType } from './types';
+
+export const TRANSLATIONS = {
+  en: {
+    studio: 'Pipeline Studio',
+    createNode: 'Create Node',
+    challenges: 'Challenges',
+    corrector: 'Code Optimizer',
+    settings: 'Settings',
+    library: 'Node Library',
+    export: 'Export Python',
+    exportFlask: 'Export Flask API',
+    zoomIn: 'Zoom In',
+    zoomOut: 'Zoom Out',
+    reset: 'Reset',
+    copy: 'Copy to Clipboard',
+    generated: 'Generated Python Script',
+    optimize: 'Optimizer',
+    optimizerSettings: 'Performance Settings',
+    resScale: 'Resolution Scale',
+    frameSkip: 'Frame Skip',
+    threading: 'Multi-threading',
+    cuda: 'CUDA Acceleration (if available)',
+    noNodes: 'No nodes available in',
+    dragStart: 'Drag nodes from the library to start building.',
+    back: 'Back',
+    start: 'Start Challenge',
+    replay: 'Replay Challenge',
+    locked: 'Locked',
+    consultAI: 'Consult AI',
+    aiHint: 'AI Hint',
+    objectives: 'Objectives',
+    workspace: 'Workspace',
+    openWorkspace: 'Open Workspace',
+    genNode: 'AI Node Generator',
+    descNode: 'Describe what you want, and we\'ll code the OpenCV logic for you.',
+    nodeName: 'Node Name',
+    nodeLogic: 'Description / Logic',
+    generateBtn: 'Generate & Add',
+    generating: 'Generating...',
+    customLib: 'Create one in the "Create Node" tab!',
+    dashboard: 'Dashboard', 
+    verify: 'Verify Solution',
+    verifying: 'Verifying...',
+    success: 'Challenge Completed!',
+    fail: 'Keep Trying',
+    filterDiff: 'Difficulty',
+    filterTheme: 'Theme',
+    all: 'All',
+    missionBrief: 'Mission Brief',
+    correctorTitle: 'Code Optimizer',
+    correctorDesc: 'Refactor, fix, and optimize your Computer Vision pipeline with Gemini Intelligence.',
+    pasteCode: 'Paste Python Code...',
+    analyzeBtn: 'Optimize Code',
+    analyzing: 'Optimizing...',
+    fixedCode: 'Optimized Code',
+    explanation: 'Optimization Report',
+    cppExport: 'C++ Export',
+    transpileBtn: 'Transpile to C++',
+    transpiling: 'Transpiling...',
+    community: 'Community',
+    import: 'Import Pipeline',
+    importDesc: 'Paste Python code to reverse-engineer it into a visual graph.',
+    importBtn: 'Import',
+    importing: 'Analyzing AST...',
+    creatorMode: 'Creator Mode',
+    createChallenge: 'Create Challenge',
+    challengeTitle: 'Challenge Title',
+    challengeDesc: 'Description',
+    challengeObjs: 'Objectives (one per line)',
+    saveChallenge: 'Save Challenge',
+    manualMode: 'Manual Code',
+    aiMode: 'AI Generator',
+    classTemplate: '# Write your Python class here',
+    apiConfig: 'API Node Configuration',
+    url: 'Endpoint URL',
+    method: 'Method',
+    headers: 'Headers',
+    addHeader: 'Add Header',
+    key: 'Key',
+    value: 'Value',
+    sendImage: 'Send Image (Base64)',
+    resize: 'Resize Width (px)',
+    asyncMode: 'Async Mode (Non-blocking)',
+    saveConfig: 'Save Configuration',
+    connectivity: 'Connectivity',
+    genai: 'GenAI / VLM',
+    optPreference: 'Optimization Preference',
+    quality: 'Max Quality (Accuracy)',
+    speed: 'Max FPS (Speed)',
+    balanced: 'Balanced (50/50)',
+    droidCamConfig: 'DroidCam Configuration',
+    ipAddress: 'IP Address',
+    port: 'Port',
+    droidCamHelp: 'Use the DroidCam app on your phone. Enter the IP/Port shown.',
+    onnxConfig: 'ONNX Model Configuration',
+    modelPath: 'Model File Path (.onnx)',
+    fullscreen: 'Fullscreen',
+    exitFullscreen: 'Exit Fullscreen',
+    logic: 'Logic Nodes',
+    logic_selector: 'Item Selector',
+    logic_math: 'Math Operator',
+    logic_dist: 'Measure Distance',
+    logic_check: 'Logic Check',
+    logic_counter: 'Event Counter',
+    logic_input_key: 'Input Key',
+    logic_output_key: 'Output Key',
+    logic_index: 'Item Index',
+    logic_threshold: 'Threshold',
+    logic_comparator: 'Comparator',
+    logic_op: 'Operation',
+  },
+  fr: {
+    studio: 'Studio Pipeline',
+    createNode: 'Créer un Node',
+    challenges: 'Défis',
+    corrector: 'Optimiseur de Code',
+    settings: 'Paramètres',
+    library: 'Bibliothèque',
+    export: 'Exporter Python',
+    exportFlask: 'Exporter API Flask',
+    zoomIn: 'Zoomer',
+    zoomOut: 'Dézoomer',
+    reset: 'Réinitialiser',
+    copy: 'Copier',
+    generated: 'Script Python Généré',
+    optimize: 'Optimiseur',
+    optimizerSettings: 'Paramètres de Performance',
+    resScale: 'Échelle de Résolution',
+    frameSkip: 'Saut d\'images',
+    threading: 'Multi-threading',
+    cuda: 'Accélération CUDA (si dispo)',
+    noNodes: 'Aucun node disponible dans',
+    dragStart: 'Glissez des nodes depuis la bibliothèque.',
+    back: 'Retour',
+    start: 'Lancer le défi',
+    replay: 'Rejouer le défi',
+    locked: 'Verrouillé',
+    consultAI: 'Consulter l\'IA',
+    aiHint: 'Indice IA',
+    objectives: 'Objectifs',
+    workspace: 'Espace de travail',
+    openWorkspace: 'Ouvrir l\'espace',
+    genNode: 'Générateur de Node IA',
+    descNode: 'Décrivez ce que vous voulez, nous codons la logique OpenCV.',
+    nodeName: 'Nom du Node',
+    nodeLogic: 'Description / Logic',
+    generateBtn: 'Générer et Ajouter',
+    generating: 'Génération...',
+    customLib: 'Créez-en un dans l\'onglet "Créer un Node" !',
+    dashboard: 'Tableau de bord',
+    verify: 'Vérifier la Solution',
+    verifying: 'Vérification...',
+    success: 'Défi Réussi !',
+    fail: 'Essayez encore',
+    filterDiff: 'Difficulté',
+    filterTheme: 'Thème',
+    all: 'Tous',
+    missionBrief: 'Ordre de Mission',
+    correctorTitle: 'Optimiseur de Code',
+    correctorDesc: 'Refactorisez, corrigez et optimisez votre pipeline avec l\'Intelligence Gemini.',
+    pasteCode: 'Collez le code Python...',
+    analyzeBtn: 'Optimiser le Code',
+    analyzing: 'Optimisation...',
+    fixedCode: 'Code Optimisé',
+    explanation: 'Rapport d\'Optimisation',
+    cppExport: 'Export C++',
+    transpileBtn: 'Convertir en C++',
+    transpiling: 'Conversion...',
+    community: 'Communauté',
+    import: 'Importer Pipeline',
+    importDesc: 'Collez du code Python pour le convertir en graphe visuel.',
+    importBtn: 'Importer',
+    importing: 'Analyse AST...',
+    creatorMode: 'Mode Créateur',
+    createChallenge: 'Créer un Défi',
+    challengeTitle: 'Titre du Défi',
+    challengeDesc: 'Description',
+    challengeObjs: 'Objectifs (un par ligne)',
+    saveChallenge: 'Sauvegarder le Défi',
+    manualMode: 'Code Manuel',
+    aiMode: 'Générateur IA',
+    classTemplate: '# Écrivez votre classe Python ici',
+    apiConfig: 'Configuration API',
+    url: 'URL Endpoint',
+    method: 'Méthode',
+    headers: 'En-têtes',
+    addHeader: 'Ajouter',
+    key: 'Clé',
+    value: 'Valeur',
+    sendImage: 'Envoyer Image (Base64)',
+    resize: 'Largeur Redim. (px)',
+    asyncMode: 'Mode Asynchrone (Non-bloquant)',
+    saveConfig: 'Sauvegarder',
+    connectivity: 'Connectivité',
+    genai: 'GenAI / VLM',
+    optPreference: 'Préférence d\'Optimisation',
+    quality: 'Qualité Max (Précision)',
+    speed: 'FPS Max (Vitesse)',
+    balanced: 'Équilibré (50/50)',
+    droidCamConfig: 'Configuration DroidCam',
+    ipAddress: 'Adresse IP',
+    port: 'Port',
+    droidCamHelp: 'Utilisez l\'app DroidCam sur votre téléphone. Entrez l\'IP/Port affiché.',
+    onnxConfig: 'Configuration Modèle ONNX',
+    modelPath: 'Chemin du fichier (.onnx)',
+    fullscreen: 'Plein Écran',
+    exitFullscreen: 'Quitter Plein Écran',
+    logic: 'Nodes Logiques',
+    logic_selector: 'Sélecteur d\'Élément',
+    logic_math: 'Opérateur Math',
+    logic_dist: 'Mesure Distance',
+    logic_check: 'Test Logique',
+    logic_counter: 'Compteur d\'Événements',
+    logic_input_key: 'Clé Entrée',
+    logic_output_key: 'Clé Sortie',
+    logic_index: 'Index Elément',
+    logic_threshold: 'Seuil',
+    logic_comparator: 'Comparateur',
+    logic_op: 'Opération',
+  }
+};
+
+export const AVAILABLE_NODES: NodeDefinition[] = [
+  // --- SOURCES ---
+  { 
+    id: 'src_webcam', 
+    name: 'Webcam Feed', 
+    name_fr: 'Flux Webcam',
+    type: NodeType.SOURCE, 
+    description: 'Capture from default camera', 
+    description_fr: 'Capture depuis la caméra par défaut',
+    category: 'input',
+    library: 'Core',
+    pythonClass: 'cv2.VideoCapture',
+    pythonTemplate: `
+# Setup
+cap = cv2.VideoCapture(0)
+# Process
+ret, {output} = cap.read()
+if not ret: break`,
+    requiredImports: ['cv2'],
+    inputs: 0,
+    outputs: 1
+  },
+  { 
+    id: 'src_droidcam', 
+    name: 'DroidCam', 
+    name_fr: 'DroidCam',
+    type: NodeType.SOURCE, 
+    description: 'Connect via IP/Wifi', 
+    description_fr: 'Connecter via IP/Wifi',
+    category: 'input',
+    library: 'Core',
+    pythonClass: 'cv2.VideoCapture',
+    pythonTemplate: `
+# Setup
+cap = cv2.VideoCapture("http://{ip}:{port}/video")
+# Process
+ret, {output} = cap.read()
+if not ret: break`,
+    requiredImports: ['cv2'],
+    inputs: 0,
+    outputs: 1
+  },
+
+  // --- LOGIC PACK ---
+  {
+    id: 'logic_selector',
+    name: 'Item Selector',
+    name_fr: 'Sélecteur d\'Élément',
+    type: NodeType.UTILITY,
+    description: 'Extract specific item from a list (e.g. Landmark 8)',
+    description_fr: 'Extraire un élément d\'une liste (ex: Landmark n°8)',
+    category: 'logic',
+    library: 'Logic',
+    pythonClass: 'ItemSelector',
+    pythonTemplate: `
+if '{inputKey}' in pipeline_data and pipeline_data['{inputKey}'] is not None:
+    try:
+        pipeline_data['{outputKey}'] = pipeline_data['{inputKey}'][{index}]
+    except:
+        pass
+{output} = {input}`,
+    inputs: 1,
+    outputs: 1
+  },
+  {
+    id: 'logic_dist',
+    name: 'Measure Distance',
+    name_fr: 'Mesure Distance',
+    type: NodeType.UTILITY,
+    description: 'Euclidean distance between two points',
+    description_fr: 'Distance Euclidienne entre deux points',
+    category: 'logic',
+    library: 'Logic',
+    pythonClass: 'MeasureDistance',
+    pythonTemplate: `
+if '{keyA}' in pipeline_data and '{keyB}' in pipeline_data:
+    pa = pipeline_data['{keyA}']
+    pb = pipeline_data['{keyB}']
+    if hasattr(pa, 'x') and hasattr(pb, 'x'): # MediaPipe Object
+        dist = np.linalg.norm(np.array([pa.x, pa.y]) - np.array([pb.x, pb.y]))
+    else: # Generic List/Array
+        dist = np.linalg.norm(np.array(pa[:2]) - np.array(pb[:2]))
+    pipeline_data['{outputKey}'] = dist
+{output} = {input}`,
+    inputs: 1,
+    outputs: 1
+  },
+  {
+    id: 'logic_math',
+    name: 'Math Operator',
+    name_fr: 'Opérateur Math',
+    type: NodeType.UTILITY,
+    description: 'Basic arithmetic on data packet values',
+    description_fr: 'Arithmétique de base sur les données',
+    category: 'logic',
+    library: 'Logic',
+    pythonClass: 'MathOperator',
+    pythonTemplate: `
+if '{keyA}' in pipeline_data and '{keyB}' in pipeline_data:
+    a, b = pipeline_data['{keyA}'], pipeline_data['{keyB}']
+    if '{op}' == 'add': res = a + b
+    elif '{op}' == 'sub': res = a - b
+    elif '{op}' == 'mul': res = a * b
+    elif '{op}' == 'div': res = a / b if b != 0 else 0
+    pipeline_data['{outputKey}'] = res
+{output} = {input}`,
+    inputs: 1,
+    outputs: 1
+  },
+  {
+    id: 'logic_check',
+    name: 'Logic Check',
+    name_fr: 'Test Logique',
+    type: NodeType.UTILITY,
+    description: 'Compare value against threshold',
+    description_fr: 'Comparer une valeur à un seuil',
+    category: 'logic',
+    library: 'Logic',
+    pythonClass: 'LogicCheck',
+    pythonTemplate: `
+if '{inputKey}' in pipeline_data:
+    val = pipeline_data['{inputKey}']
+    res = False
+    if '{comp}' == '>': res = val > {thresh}
+    elif '{comp}' == '<': res = val < {thresh}
+    elif '{comp}' == '==': res = val == {thresh}
+    elif '{comp}' == '!=': res = val != {thresh}
+    pipeline_data['{outputKey}'] = res
+{output} = {input}`,
+    inputs: 1,
+    outputs: 1
+  },
+  {
+    id: 'logic_counter',
+    name: 'Event Counter',
+    name_fr: 'Compteur d\'Événements',
+    type: NodeType.UTILITY,
+    description: 'Count transitions from False to True',
+    description_fr: 'Compte les passages de Faux à Vrai (front montant)',
+    category: 'logic',
+    library: 'Logic',
+    pythonClass: 'EventCounter',
+    pythonTemplate: `
+# Setup_{id}
+counter_{id} = 0
+last_state_{id} = False
+
+# Process
+if '{triggerKey}' in pipeline_data:
+    current = pipeline_data['{triggerKey}']
+    if current and not last_state_{id}:
+        counter_{id} += 1
+    last_state_{id} = current
+    pipeline_data['{outputKey}'] = counter_{id}
+    cv2.putText({output}, f"Count: {counter_{id}}", (50, 50), cv2.FONT_HERSHEY_SIMPLEX, 1, (0, 255, 0), 2)
+{output} = {input}`,
+    inputs: 1,
+    outputs: 1
+  },
+
+  // --- MEDIAPIPE ---
+  {
+    id: 'mp_hands',
+    name: 'Hand Tracking',
+    name_fr: 'Suivi des Mains',
+    type: NodeType.AI,
+    description: 'Detect hand landmarks with MediaPipe',
+    description_fr: 'Détecter les mains avec MediaPipe',
+    category: 'ai',
+    library: 'MediaPipe',
+    pythonClass: 'mp.solutions.hands',
+    pythonTemplate: `
+# Setup
+import mediapipe as mp
+mp_hands = mp.solutions.hands
+hands = mp_hands.Hands(static_image_mode=False, max_num_hands=2, min_detection_confidence=0.5)
+mp_draw = mp.solutions.drawing_utils
+
+# Process
+{output} = {input}.copy()
+results = hands.process(cv2.cvtColor({input}, cv2.COLOR_BGR2RGB))
+if results.multi_hand_landmarks:
+    pipeline_data['hand_landmarks'] = results.multi_hand_landmarks[0].landmark
+    for hand_lms in results.multi_hand_landmarks:
+        mp_draw.draw_landmarks({output}, hand_lms, mp_hands.HAND_CONNECTIONS)
+else:
+    pipeline_data['hand_landmarks'] = None`,
+    requiredImports: ['cv2', 'mediapipe as mp'],
+    inputs: 1,
+    outputs: 1
+  },
+
+  // --- OUTPUTS ---
+  { 
+    id: 'out_screen', 
+    name: 'Display Window', 
+    name_fr: 'Fenêtre Affichage',
+    type: NodeType.OUTPUT, 
+    description: 'Show result in a window', 
+    description_fr: 'Afficher dans une fenêtre',
+    category: 'output',
+    library: 'Core',
+    pythonClass: 'cv2.imshow',
+    pythonTemplate: `cv2.imshow("PyVision Output", {input})`,
+    requiredImports: ['cv2'],
+    inputs: 1,
+    outputs: 0
+  }
+];
+
+export const CHALLENGES: Challenge[] = [
+  {
+    id: 'ch_squats',
+    title: 'Squat Counter',
+    title_fr: 'Compteur de Squats',
+    difficulty: 'Medium',
+    theme: 'Tracking',
+    description: 'Use Pose Tracking and Logic nodes to count repetitions of squats.',
+    description_fr: 'Utilisez le suivi de pose et les nodes logiques pour compter les squats.',
+    objectives: ['Detect pose landmarks', 'Measure distance between hip and knee', 'Trigger counter when below threshold'],
+    objectives_fr: ['Détecter la pose', 'Mesurer distance hanche-genou', 'Incrémenter quand on descend'],
+    locked: false
+  }
+];
+
+export const MOCK_COMMUNITY_NODES: NodeDefinition[] = [
+  {
+    id: 'comm_yolo',
+    name: 'YOLOv8 Model',
+    name_fr: 'Modèle YOLOv8',
+    type: NodeType.AI,
+    description: 'Object detection using YOLOv8n',
+    description_fr: 'Détection d\'objets avec YOLOv8n',
+    category: 'ai',
+    library: 'Community',
+    pythonClass: 'YOLOv8Node',
+    pythonTemplate: `
+# Community Node: YOLOv8
+from ultralytics import YOLO
+model = YOLO('yolov8n.pt')
+results = model({input})
+{output} = results[0].plot()
+`,
+    requiredImports: ['cv2', 'ultralytics'],
+    inputs: 1,
+    outputs: 1
+  }
+];

index.html

@@ -0,0 +1,66 @@
+
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>PyVisionLab Studio - Computer Vision IDE</title>
+    <script src="https://cdn.tailwindcss.com"></script>
+    <script>
+      tailwind.config = {
+        theme: {
+          extend: {
+            colors: {
+              slate: {
+                850: '#1e293b',
+                900: '#0f172a',
+                950: '#020617',
+              }
+            },
+            fontFamily: {
+              mono: ['ui-monospace', 'SFMono-Regular', 'Menlo', 'Monaco', 'Consolas', "Liberation Mono", "Courier New", 'monospace'],
+            }
+          }
+        }
+      }
+    </script>
+    <style>
+      ::-webkit-scrollbar {
+        width: 8px;
+        height: 8px;
+      }
+      ::-webkit-scrollbar-track {
+        background: #0f172a; 
+      }
+      ::-webkit-scrollbar-thumb {
+        background: #334155; 
+        border-radius: 4px;
+      }
+      ::-webkit-scrollbar-thumb:hover {
+        background: #475569; 
+      }
+      body {
+        -webkit-font-smoothing: antialiased;
+        -moz-osx-font-smoothing: grayscale;
+      }
+    </style>
+  <script type="importmap">
+{
+  "imports": {
+    "react": "https://aistudiocdn.com/react@^19.2.0",
+    "react/": "https://aistudiocdn.com/react@^19.2.0/",
+    "react-dom/": "https://aistudiocdn.com/react-dom@^19.2.0/",
+    "@google/genai": "https://aistudiocdn.com/@google/genai@^1.30.0",
+    "lucide-react": "https://aistudiocdn.com/lucide-react@0.469.0",
+    "recharts": "https://aistudiocdn.com/recharts@^3.4.1"
+  }
+}
+</script>
+<link rel="stylesheet" href="/index.css">
+</head>
+  <body class="bg-slate-950 text-slate-100 antialiased overflow-hidden">
+    <div id="root" class="h-screen w-screen flex flex-col"></div>
+    <script type="module" src="index.tsx"></script>
+  <script type="module" src="/index.tsx"></script>
+</body>
+</html>

index.tsx

@@ -0,0 +1,15 @@
+import React from 'react';
+import ReactDOM from 'react-dom/client';
+import App from './App';
+
+const rootElement = document.getElementById('root');
+if (!rootElement) {
+  throw new Error("Could not find root element to mount to");
+}
+
+const root = ReactDOM.createRoot(rootElement);
+root.render(
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>
+);

metadata.json

@@ -0,0 +1,7 @@
+{
+  "name": "PyVisionLab Studio",
+  "description": "A visual interface for the PyVisionLab modular computer vision framework. Build pipelines, solve CV challenges, and write custom Python nodes with AI assistance.",
+  "requestFramePermissions": [
+    "camera"
+  ]
+}

package.json

@@ -0,0 +1,17 @@
+
+{
+  "name": "pyvisionlab-studio",
+  "version": "1.0.0",
+  "private": true,
+  "description": "PyVisionLab Studio - Visual Computer Vision IDE",
+  "dependencies": {
+    "react": "^19.2.0",
+    "react-dom": "^19.2.0",
+    "lucide-react": "^0.469.0",
+    "recharts": "^3.4.1",
+    "@google/genai": "^1.30.0"
+  },
+  "scripts": {
+    "build": "echo 'Deploying static files...'"
+  }
+}

requirements.txt

@@ -0,0 +1,5 @@
+
+flask
+google-generativeai
+pillow
+gunicorn

tsconfig.json

@@ -0,0 +1,29 @@
+{
+  "compilerOptions": {
+    "target": "ES2022",
+    "experimentalDecorators": true,
+    "useDefineForClassFields": false,
+    "module": "ESNext",
+    "lib": [
+      "ES2022",
+      "DOM",
+      "DOM.Iterable"
+    ],
+    "skipLibCheck": true,
+    "types": [
+      "node"
+    ],
+    "moduleResolution": "bundler",
+    "isolatedModules": true,
+    "moduleDetection": "force",
+    "allowJs": true,
+    "jsx": "react-jsx",
+    "paths": {
+      "@/*": [
+        "./*"
+      ]
+    },
+    "allowImportingTsExtensions": true,
+    "noEmit": true
+  }
+}

types.ts

@@ -0,0 +1,119 @@
+
+export enum NodeType {
+  SOURCE = 'SOURCE',
+  PROCESS = 'PROCESS',
+  AI = 'AI',
+  UTILITY = 'UTILITY',
+  OUTPUT = 'OUTPUT',
+  CUSTOM = 'CUSTOM'
+}
+
+export type Language = 'en' | 'fr';
+
+export interface NodeDefinition {
+  id: string;
+  name: string;
+  name_fr?: string;
+  type: NodeType;
+  description: string;
+  description_fr?: string;
+  category: 'input' | 'transform' | 'ai' | 'utility' | 'output' | 'custom' | 'logic';
+  library: 'Core' | 'OpenCV' | 'MediaPipe' | 'Custom' | 'Community' | 'Connectivity' | 'GenAI' | 'Logic';
+  pythonClass: string;
+  pythonTemplate: string;
+  requiredImports?: string[];
+  inputs: number;
+  outputs: number;
+}
+
+export interface Position {
+  x: number;
+  y: number;
+}
+
+export interface ApiConfig {
+  url: string;
+  method: 'GET' | 'POST' | 'PUT';
+  headers: { id: string; key: string; value: string; isSecret: boolean }[];
+  timeout: number;
+  sendImage: boolean;
+  imageResizeWidth?: number;
+  asyncMode: boolean;
+}
+
+export interface DroidCamConfig {
+  ip: string;
+  port: string;
+}
+
+export interface OnnxConfig {
+  modelPath: string;
+}
+
+export interface LogicConfig {
+  inputKey?: string;
+  inputKeyA?: string;
+  inputKeyB?: string;
+  index?: number;
+  operation?: 'add' | 'sub' | 'mul' | 'div' | 'dist';
+  comparator?: '>' | '<' | '==' | '!=';
+  threshold?: number;
+  outputKey: string;
+  triggerKey?: string;
+}
+
+export interface PipelineNode {
+  uuid: string;
+  defId: string;
+  position: Position;
+  params: {
+    apiConfig?: ApiConfig;
+    droidCam?: DroidCamConfig;
+    onnx?: OnnxConfig;
+    logic?: LogicConfig;
+    [key: string]: any;
+  };
+}
+
+export interface PipelineConnection {
+  id: string;
+  sourceNodeId: string;
+  targetNodeId: string;
+}
+
+export interface Challenge {
+  id: string;
+  title: string;
+  title_fr?: string;
+  difficulty: 'Easy' | 'Medium' | 'Hard' | 'Custom';
+  theme: 'Basic' | 'Tracking' | 'Segmentation' | 'Optimization' | 'Creative' | 'Community';
+  description: string;
+  description_fr?: string;
+  objectives: string[];
+  objectives_fr?: string[];
+  locked: boolean;
+  isUserCreated?: boolean;
+  isCompleted?: boolean;
+  completionDate?: string | null;
+}
+
+export interface OptimizerConfig {
+  resolutionScale: number;
+  frameSkip: number;
+  useThreading: boolean;
+  enableCuda: boolean;
+}
+
+export interface ValidationResult {
+  success: boolean;
+  message: string;
+  hint?: string;
+}
+
+export interface CppTranspilationResult {
+  cppCode: string;
+  cmakeCode: string;
+  explanation: string;
+}
+
+export type ViewState = 'STUDIO' | 'CHALLENGES' | 'EDITOR' | 'CHALLENGE_WORKSPACE' | 'CORRECTOR';

vercel.json

@@ -0,0 +1,10 @@
+
+{
+  "version": 2,
+  "rewrites": [
+    {
+      "source": "/(.*)",
+      "destination": "/api/index"
+    }
+  ]
+}

vite.config.ts

@@ -0,0 +1,23 @@
+import path from 'path';
+import { defineConfig, loadEnv } from 'vite';
+import react from '@vitejs/plugin-react';
+
+export default defineConfig(({ mode }) => {
+    const env = loadEnv(mode, '.', '');
+    return {
+      server: {
+        port: 3000,
+        host: '0.0.0.0',
+      },
+      plugins: [react()],
+      define: {
+        'process.env.API_KEY': JSON.stringify(env.GEMINI_API_KEY),
+        'process.env.GEMINI_API_KEY': JSON.stringify(env.GEMINI_API_KEY)
+      },
+      resolve: {
+        alias: {
+          '@': path.resolve(__dirname, '.'),
+        }
+      }
+    };
+});