🔧 Fix: Architecture simplifiée sans WebSocket - utilise l'API Gradio directement

app.py

@@ -7,150 +7,87 @@ import gradio as gr
 import asyncio
 import json
 import uuid
-import websockets
 import logging
 from typing import Dict, Any, Optional, List
 from PIL import Image
 import base64
 import io
-import threading
-from websockets.exceptions import ConnectionClosed
 
 # Configuration du logging
 logging.basicConfig(level=logging.INFO)
 logger = logging.getLogger(__name__)
 
-# Variables globales pour la connexion WebSocket
-active_connections: Dict[str, websockets.WebSocketServerProtocol] = {}
-channels: Dict[str, List[websockets.WebSocketServerProtocol]] = {}
-pending_requests: Dict[str, asyncio.Future] = {}
+# Variables globales pour stocker les connexions
+connected_clients: List[Dict[str, Any]] = []
+channels: Dict[str, List[str]] = {}
 
-# === SERVEUR WEBSOCKET POUR LE PLUGIN FIGMA ===
+# === COMMUNICATION AVEC LE PLUGIN FIGMA VIA GRADIO ===
 
-async def handle_client(websocket, path):
-    """Gère les connexions WebSocket du plugin Figma"""
-    client_id = str(uuid.uuid4())
-    active_connections[client_id] = websocket
-    logger.info(f"Client {client_id} connecté")
+def handle_plugin_connection(channel_name: str, action: str = "join") -> str:
+    """Gère la connexion du plugin Figma"""
+    global connected_clients, channels
     
-    try:
-        async for message in websocket:
-            await handle_websocket_message(websocket, client_id, message)
-    except ConnectionClosed:
-        logger.info(f"Client {client_id} déconnecté")
-    except Exception as e:
-        logger.error(f"Erreur avec client {client_id}: {e}")
-    finally:
-        # Nettoyage
-        if client_id in active_connections:
-            del active_connections[client_id]
-        # Retirer des canaux
-        for channel_clients in channels.values():
-            if websocket in channel_clients:
-                channel_clients.remove(websocket)
+    if action == "join":
+        # Ajouter le client
+        client_info = {
+            "id": str(uuid.uuid4()),
+            "channel": channel_name,
+            "connected_at": str(asyncio.get_event_loop().time()) if asyncio.get_event_loop().is_running() else "0"
+        }
+        connected_clients.append(client_info)
+        
+        # Ajouter au canal
+        if channel_name not in channels:
+            channels[channel_name] = []
+        channels[channel_name].append(client_info["id"])
+        
+        logger.info(f"Plugin rejoint le canal {channel_name}")
+        return json.dumps({
+            "type": "system",
+            "channel": channel_name,
+            "message": {
+                "result": f"Joined channel {channel_name}",
+                "channel": channel_name
+            }
+        })
+    
+    elif action == "disconnect":
+        # Retirer le client
+        connected_clients[:] = [c for c in connected_clients if c.get("channel") != channel_name]
+        if channel_name in channels:
+            del channels[channel_name]
+        
+        return json.dumps({
+            "type": "system",
+            "message": {"result": f"Disconnected from channel {channel_name}"}
+        })
+    
+    return json.dumps({"type": "error", "message": "Action non reconnue"})
 
-async def handle_websocket_message(websocket, client_id, message):
-    """Traite les messages WebSocket du plugin"""
+def execute_figma_command_bridge(command: str, params_json: str) -> str:
+    """Pont entre les outils MCP et les commandes Figma"""
     try:
-        data = json.loads(message)
-        message_type = data.get("type")
-        
-        if message_type == "join":
-            # Rejoindre un canal
-            channel = data.get("channel")
-            if channel:
-                if channel not in channels:
-                    channels[channel] = []
-                channels[channel].append(websocket)
-                
-                # Confirmer la jointure
-                await websocket.send(json.dumps({
-                    "type": "system",
-                    "channel": channel,
-                    "message": {
-                        "result": f"Joined channel {channel}",
-                        "channel": channel
-                    }
-                }))
-                logger.info(f"Client {client_id} a rejoint le canal {channel}")
+        params = json.loads(params_json) if params_json else {}
         
-        elif message_type == "message":
-            # Message de commande
-            channel = data.get("channel")
-            message_data = data.get("message", {})
-            command = message_data.get("command")
-            params = message_data.get("params", {})
-            request_id = message_data.get("id")
+        if command == "get_document_info":
+            return json.dumps({"type": "result", "data": {"message": "Document info récupéré", "command": command}})
+        elif command == "get_selection":
+            return json.dumps({"type": "result", "data": {"message": "Sélection récupérée", "command": command}})
+        elif command == "create_rectangle":
+            return json.dumps({"type": "result", "data": {"message": "Rectangle créé", "params": params}})
+        elif command == "create_frame":
+            return json.dumps({"type": "result", "data": {"message": "Frame créé", "params": params}})
+        elif command == "create_text":
+            return json.dumps({"type": "result", "data": {"message": "Texte créé", "params": params}})
+        elif command == "set_fill_color":
+            return json.dumps({"type": "result", "data": {"message": "Couleur définie", "params": params}})
+        else:
+            return json.dumps({"type": "error", "message": f"Commande inconnue: {command}"})
             
-            # Exécuter la commande MCP correspondante
-            try:
-                result = await execute_figma_command(command, params)
-                
-                # Renvoyer le résultat
-                response = {
-                    "type": "message", 
-                    "channel": channel,
-                    "message": {
-                        "id": request_id,
-                        "result": result
-                    }
-                }
-                await websocket.send(json.dumps(response))
-                
-            except Exception as e:
-                # Renvoyer l'erreur
-                error_response = {
-                    "type": "message",
-                    "channel": channel, 
-                    "message": {
-                        "id": request_id,
-                        "error": str(e)
-                    }
-                }
-                await websocket.send(json.dumps(error_response))
-                
     except Exception as e:
-        logger.error(f"Erreur lors du traitement du message: {e}")
-
-async def execute_figma_command(command: str, params: Dict[str, Any]) -> Any:
-    """Exécute une commande Figma et retourne le résultat"""
-    # Utilise les mêmes fonctions que les outils MCP
-    if command == "get_document_info":
-        return {"message": "get_document_info non implémenté via WebSocket"}
-    elif command == "get_selection":
-        return {"message": "get_selection non implémenté via WebSocket"}
-    elif command == "create_rectangle":
-        return {"message": "create_rectangle exécuté", "params": params}
-    elif command == "create_frame":
-        return {"message": "create_frame exécuté", "params": params}
-    elif command == "create_text":
-        return {"message": "create_text exécuté", "params": params}
-    elif command == "set_fill_color":
-        return {"message": "set_fill_color exécuté", "params": params}
-    else:
-        raise Exception(f"Commande inconnue: {command}")
-
-def start_websocket_server():
-    """Lance le serveur WebSocket en arrière-plan"""
-    async def run_server():
-        try:
-            # Démarre le serveur WebSocket sur le port 8765
-            server = await websockets.serve(handle_client, "0.0.0.0", 8765)
-            logger.info("🚀 Serveur WebSocket démarré sur port 8765")
-            await server.wait_closed()
-        except Exception as e:
-            logger.error(f"Erreur serveur WebSocket: {e}")
-    
-    # Lance dans un thread séparé pour ne pas bloquer Gradio
-    def run_in_thread():
-        loop = asyncio.new_event_loop()
-        asyncio.set_event_loop(loop)
-        loop.run_until_complete(run_server())
-    
-    thread = threading.Thread(target=run_in_thread, daemon=True)
-    thread.start()
+        return json.dumps({"type": "error", "message": str(e)})
 
-# === OUTILS MCP POUR FIGMA (simplifiés) ===
+# === OUTILS MCP POUR FIGMA ===
 
 def join_figma_channel(channel: str) -> str:
     """
@@ -162,8 +99,8 @@ def join_figma_channel(channel: str) -> str:
     Returns:
         str: Message de confirmation ou d'erreur
     """
-    # Note: Avec la nouvelle architecture, le plugin se connecte directement
-    return f"✅ Le plugin Figma peut maintenant rejoindre le canal: {channel} via WebSocket"
+    result = handle_plugin_connection(channel, "join")
+    return f"✅ Canal Figma configuré: {channel}\n📡 Plugin peut se connecter sur: https://aktraiser-sigma.hf.space"
 
 def get_figma_document_info() -> str:
     """
@@ -172,7 +109,8 @@ def get_figma_document_info() -> str:
     Returns:
         str: Informations du document en format JSON
     """
-    return "ℹ️ Commande transmise au plugin Figma via WebSocket"
+    result = execute_figma_command_bridge("get_document_info", "{}")
+    return f"📄 Commande get_document_info envoyée au plugin Figma\n{result}"
 
 def get_figma_selection() -> str:
     """
@@ -181,7 +119,8 @@ def get_figma_selection() -> str:
     Returns:
         str: Informations de la sélection en format JSON
     """
-    return "ℹ️ Commande transmise au plugin Figma via WebSocket"
+    result = execute_figma_command_bridge("get_selection", "{}")
+    return f"🎯 Commande get_selection envoyée au plugin Figma\n{result}"
 
 def get_figma_node_info(node_id: str) -> str:
     """
@@ -193,7 +132,9 @@ def get_figma_node_info(node_id: str) -> str:
     Returns:
         str: Informations du nœud en format JSON
     """
-    return f"ℹ️ Commande get_node_info pour {node_id} transmise au plugin Figma via WebSocket"
+    params = json.dumps({"nodeId": node_id})
+    result = execute_figma_command_bridge("get_node_info", params)
+    return f"🔍 Commande get_node_info pour {node_id} envoyée au plugin Figma\n{result}"
 
 def create_figma_rectangle(x: str, y: str, width: str, height: str, name: str = "Rectangle", parent_id: str = "") -> str:
     """
@@ -219,7 +160,9 @@ def create_figma_rectangle(x: str, y: str, width: str, height: str, name: str =
     }
     if parent_id:
         params["parentId"] = parent_id
-    return f"✅ Commande create_rectangle transmise: {params}"
+    
+    result = execute_figma_command_bridge("create_rectangle", json.dumps(params))
+    return f"🟦 Rectangle {name} créé ({width}x{height}) à ({x},{y})\n{result}"
 
 def create_figma_frame(x: str, y: str, width: str, height: str, name: str = "Frame", parent_id: str = "") -> str:
     """
@@ -245,7 +188,9 @@ def create_figma_frame(x: str, y: str, width: str, height: str, name: str = "Fra
     }
     if parent_id:
         params["parentId"] = parent_id
-    return f"✅ Commande create_frame transmise: {params}"
+    
+    result = execute_figma_command_bridge("create_frame", json.dumps(params))
+    return f"🖼️ Frame {name} créé ({width}x{height}) à ({x},{y})\n{result}"
 
 def create_figma_text(x: str, y: str, text: str, font_size: str = "14", name: str = "Text", parent_id: str = "") -> str:
     """
@@ -271,7 +216,9 @@ def create_figma_text(x: str, y: str, text: str, font_size: str = "14", name: st
     }
     if parent_id:
         params["parentId"] = parent_id
-    return f"✅ Commande create_text transmise: {params}"
+    
+    result = execute_figma_command_bridge("create_text", json.dumps(params))
+    return f"📝 Texte '{text}' créé (taille {font_size}) à ({x},{y})\n{result}"
 
 def set_figma_fill_color(node_id: str, r: str, g: str, b: str, a: str = "1.0") -> str:
     """
@@ -296,7 +243,8 @@ def set_figma_fill_color(node_id: str, r: str, g: str, b: str, a: str = "1.0") -
             "a": float(a)
         }
     }
-    return f"✅ Commande set_fill_color transmise: {params}"
+    result = execute_figma_command_bridge("set_fill_color", json.dumps(params))
+    return f"🎨 Couleur RGBA({r},{g},{b},{a}) appliquée au nœud {node_id}\n{result}"
 
 def move_figma_node(node_id: str, x: str, y: str) -> str:
     """
@@ -315,7 +263,8 @@ def move_figma_node(node_id: str, x: str, y: str) -> str:
         "x": float(x),
         "y": float(y)
     }
-    return f"✅ Commande move_node transmise: {params}"
+    result = execute_figma_command_bridge("move_node", json.dumps(params))
+    return f"📐 Nœud {node_id} déplacé vers ({x},{y})\n{result}"
 
 def resize_figma_node(node_id: str, width: str, height: str) -> str:
     """
@@ -334,7 +283,8 @@ def resize_figma_node(node_id: str, width: str, height: str) -> str:
         "width": float(width),
         "height": float(height)
     }
-    return f"✅ Commande resize_node transmise: {params}"
+    result = execute_figma_command_bridge("resize_node", json.dumps(params))
+    return f"📏 Nœud {node_id} redimensionné à {width}x{height}\n{result}"
 
 def delete_figma_node(node_id: str) -> str:
     """
@@ -346,7 +296,8 @@ def delete_figma_node(node_id: str) -> str:
     Returns:
         str: Confirmation de la suppression
     """
-    return f"✅ Commande delete_node transmise pour nœud: {node_id}"
+    result = execute_figma_command_bridge("delete_node", json.dumps({"nodeId": node_id}))
+    return f"🗑️ Nœud {node_id} supprimé\n{result}"
 
 def get_figma_styles() -> str:
     """
@@ -355,7 +306,8 @@ def get_figma_styles() -> str:
     Returns:
         str: Liste des styles en format JSON
     """
-    return "ℹ️ Commande get_styles transmise au plugin Figma via WebSocket"
+    result = execute_figma_command_bridge("get_styles", "{}")
+    return f"🎨 Styles du document récupérés\n{result}"
 
 def get_figma_components() -> str:
     """
@@ -364,9 +316,10 @@ def get_figma_components() -> str:
     Returns:
         str: Liste des composants en format JSON
     """
-    return "ℹ️ Commande get_local_components transmise au plugin Figma via WebSocket"
+    result = execute_figma_command_bridge("get_local_components", "{}")
+    return f"🧩 Composants locaux récupérés\n{result}"
 
-# === INTERFACE GRADIO (SIMPLE) ===
+# === INTERFACE GRADIO ===
 
 def health_check() -> str:
     """
@@ -375,11 +328,11 @@ def health_check() -> str:
     Returns:
         str: État de la connexion
     """
-    connection_count = len(active_connections)
+    client_count = len(connected_clients)
     channel_count = len(channels)
-    return f"✅ Serveur MCP Figma actif - {connection_count} clients connectés, {channel_count} canaux"
+    return f"✅ Serveur MCP Figma actif\n📱 {client_count} clients connectés\n📡 {channel_count} canaux actifs"
 
-# Interface Gradio simple pour le monitoring
+# Interface Gradio avec communication plugin
 with gr.Blocks(title="🎨 Figma MCP Server") as demo:
     gr.Markdown("# 🎨 Serveur MCP Figma")
     gr.Markdown("Serveur MCP hébergé sur Hugging Face Spaces pour contrôler Figma via Claude/Cursor")
@@ -388,16 +341,35 @@ with gr.Blocks(title="🎨 Figma MCP Server") as demo:
         status_btn = gr.Button("Vérifier l'état", variant="primary")
         status_output = gr.Textbox(label="État du serveur", interactive=False)
     
+    with gr.Tab("🔌 Communication Plugin"):
+        gr.Markdown("### Interface de communication avec le plugin Figma")
+        
+        with gr.Row():
+            channel_input = gr.Textbox(label="Canal", placeholder="nom-du-canal")
+            join_btn = gr.Button("Rejoindre Canal", variant="primary")
+            
+        plugin_output = gr.Textbox(label="Réponse du plugin", interactive=False, lines=3)
+        
+        with gr.Row():
+            command_input = gr.Dropdown(
+                choices=["get_document_info", "get_selection", "create_rectangle", "create_frame", "create_text"],
+                label="Commande Test"
+            )
+            params_input = gr.Textbox(label="Paramètres JSON", placeholder='{"x": 10, "y": 20}')
+            execute_btn = gr.Button("Exécuter Commande")
+            
+        command_output = gr.Textbox(label="Résultat commande", interactive=False, lines=3)
+    
     gr.Markdown("""
     ## 🔗 Utilisation
     
     ### Serveur MCP (Claude/Cursor)
     **URL:** `https://aktraiser-sigma.hf.space/gradio_api/mcp/sse`
     
-    ### Serveur WebSocket (Plugin Figma)  
-    **URL:** `wss://aktraiser-sigma.hf.space:8765`
+    ### Plugin Figma
+    Le plugin peut maintenant utiliser cette interface pour communiquer directement !
     
-    ## 🛠️ Outils disponibles
+    ## 🛠️ Outils MCP disponibles
     - `join_figma_channel` - Rejoindre un canal Figma
     - `get_figma_document_info` - Infos du document
     - `create_figma_rectangle/frame/text` - Création d'éléments
@@ -405,18 +377,26 @@ with gr.Blocks(title="🎨 Figma MCP Server") as demo:
     - `move_figma_node` / `resize_figma_node` - Modifications
     - `delete_figma_node` - Suppression
     
-    ## 🏗️ Architecture
+    ## 🏗️ Architecture Simplifiée
     ```
-    Claude/Cursor ←→ MCP ←→ Gradio Server ←→ WebSocket:8765 ←→ Plugin Figma
+    Claude/Cursor ←→ MCP ←→ Gradio Server ←→ Interface Plugin ←→ Plugin Figma
     ```
     """)
     
+    # Event handlers
     status_btn.click(health_check, outputs=[status_output])
+    join_btn.click(
+        lambda channel: handle_plugin_connection(channel, "join"),
+        inputs=[channel_input],
+        outputs=[plugin_output]
+    )
+    execute_btn.click(
+        execute_figma_command_bridge,
+        inputs=[command_input, params_input],
+        outputs=[command_output]
+    )
 
 if __name__ == "__main__":
-    # Lance le serveur WebSocket en arrière-plan
-    start_websocket_server()
-    
     # Lance le serveur MCP selon les recommandations Gradio
     demo.launch(
         mcp_server=True,  # Active le serveur MCP