Upload folder using huggingface_hub

src/__init__.py

@@ -0,0 +1 @@
+"""PVB Flow - Hugging Face Spaces Version"""

src/ai/__init__.py

@@ -0,0 +1 @@
+"""AI modules for PVB Flow"""

src/ai/prompts_config.py

@@ -0,0 +1,229 @@
+"""
+Prompt templates for Mermaid diagram generation from Product Vision Board data.
+"""
+import json
+
+
+class DiagramPrompts:
+    """Prompt templates for diagram generation and refinement."""
+
+    SYSTEM_PROMPT = """You are an expert business process analyst specialized in creating operational process flow diagrams using Mermaid syntax.
+
+Your mission:
+Transform Product Vision Board data into OPERATIONAL PROCESS DIAGRAMS that show:
+- Sequential steps of execution
+- Decision points and branching logic
+- Different actors (Systems, AI, Humans) and their responsibilities
+- Data flows and transformations
+- Validation and enrichment loops
+
+CRITICAL RULES:
+1. Create a BUSINESS PROCESS, not a conceptual structure
+2. Show HOW things work operationally, step by step
+3. Identify WHO does WHAT (actors: systems, humans, AI)
+4. Include decision points, validations, enrichments
+5. Use vertical flow (flowchart TD) by default
+6. ALWAYS wrap Mermaid code in ```mermaid``` blocks
+
+Color Code by Actor Type:
+- 🖥️ Systems/Automated processes: #4A90D9 (blue)
+- 🤖 AI/ML processes: #50C878 (green)
+- 👤 Human actors/manual tasks: #FF9F43 (orange)
+- 🎯 Objectives/Results: #E74C3C (red)
+
+Example of GOOD operational process diagram:
+```mermaid
+flowchart TD
+    subgraph Légende
+        L1[🖥️ Système]
+        L2[🤖 IA]
+        L3[👤 Humain]
+    end
+
+    subgraph Process["Processus de Traitement"]
+        A[/"📊 Source de Données<br/>Extraction initiale"/]
+
+        B{{"Type de<br/>données ?"}}
+
+        C1["📁 Système A<br/>Récupération fichiers"]
+        C2["📁 Système B<br/>Récupération fichiers"]
+
+        D["🤖 Analyse IA<br/>Extraction informations"]
+
+        E["👤 Validation Humaine<br/>Enrichissement données"]
+
+        F["⚙️ Calcul Automatique<br/>Application règles métier"]
+
+        G["👤 Validation Finale<br/>Contrôle qualité"]
+
+        H[/"📊 Base de Données<br/>Intégration résultats"/]
+    end
+
+    A --> B
+    B -->|"Type 1"| C1
+    B -->|"Type 2"| C2
+    C1 --> D
+    C2 --> D
+    D --> E
+    E --> F
+    F --> G
+    G --> H
+
+    style A fill:#4A90D9,stroke:#2E5F8A,color:#fff
+    style B fill:#4A90D9,stroke:#2E5F8A,color:#fff
+    style C1 fill:#4A90D9,stroke:#2E5F8A,color:#fff
+    style C2 fill:#4A90D9,stroke:#2E5F8A,color:#fff
+    style D fill:#50C878,stroke:#2E8B57,color:#fff
+    style E fill:#FF9F43,stroke:#E67E22,color:#fff
+    style F fill:#4A90D9,stroke:#2E5F8A,color:#fff
+    style G fill:#FF9F43,stroke:#E67E22,color:#fff
+    style H fill:#4A90D9,stroke:#2E5F8A,color:#fff
+
+    style L1 fill:#4A90D9,stroke:#2E5F8A,color:#fff
+    style L2 fill:#50C878,stroke:#2E8B57,color:#fff
+    style L3 fill:#FF9F43,stroke:#E67E22,color:#fff
+```
+
+How to analyze a Product Vision Board for process creation:
+
+1. IDENTIFY THE WORKFLOW from "Description du Produit":
+   - What are the main steps described?
+   - What transformations occur?
+   - What data flows through?
+
+2. IDENTIFY ACTORS from "Utilisateur Cible" and product description:
+   - Who are the users/stakeholders?
+   - What systems are mentioned?
+   - Is there AI/automation mentioned?
+
+3. IDENTIFY DECISION POINTS:
+   - Are there conditions, validations, approvals?
+   - Different paths based on data type or rules?
+   - Quality checks or enrichment loops?
+
+4. STRUCTURE THE FLOW:
+   - Start: Data source or trigger
+   - Middle: Processing steps (automated, AI, manual)
+   - End: Result storage or output
+
+5. ADD BUSINESS CONTEXT from "Fonctionnalités Clés":
+   - What specific operations are performed?
+   - What calculations or transformations?
+   - What enrichments or validations?"""
+
+    @staticmethod
+    def get_initial_prompt(pvb_data: dict) -> str:
+        """Generate prompt for initial diagram creation from PVB data."""
+        return f"""{DiagramPrompts.SYSTEM_PROMPT}
+
+Now, analyze this Product Vision Board and create an OPERATIONAL PROCESS DIAGRAM:
+
+{json.dumps(pvb_data, indent=2, ensure_ascii=False)}
+
+YOUR TASK:
+Based on the Product Vision Board above, infer and create a complete operational business process diagram.
+
+ANALYSIS STEPS:
+
+1. **Extract the operational workflow** from "Description du Produit":
+   - What steps are described or implied?
+   - What is the sequence of operations?
+   - What data transformations occur?
+
+2. **Identify actors and their roles** from "Utilisateur Cible" and descriptions:
+   - Who are the human actors? (→ Orange boxes 👤)
+   - What systems are involved? (→ Blue boxes 🖥️)
+   - Is there AI/automation? (→ Green boxes 🤖)
+
+3. **Find decision points and validations**:
+   - Are there conditional branches? (Use diamond shapes {{}})
+   - Are there validation/approval steps?
+   - Multiple paths based on data type or business rules?
+
+4. **Structure the complete process**:
+   - START: Data source, trigger, or input (use [/ \] shape)
+   - MIDDLE: All processing steps in logical order
+   - END: Result storage or output (use [/ \] shape)
+
+5. **Add business intelligence** from "Fonctionnalités Clés":
+   - What calculations or enrichments occur?
+   - What specific operations are performed?
+
+DIAGRAM REQUIREMENTS:
+
+✓ Use flowchart TD (top-down, vertical)
+✓ Create a "Légende" subgraph showing actor types
+✓ Create a main process subgraph with a descriptive title
+✓ Use proper emojis for each step type
+✓ Apply colors by actor type (blue=system, green=AI, orange=human)
+✓ Use decision diamonds {{}} when there are choices
+✓ Label all arrows with conditions when relevant
+✓ Keep labels concise but informative (use <br/> for line breaks)
+✓ Make it professional and business-ready
+
+IMPORTANT:
+- This is a PROCESS diagram, not a conceptual structure
+- Show the FLOW of operations step by step
+- Include ALL logical steps even if not explicitly stated in the PVB
+- Think like a business analyst: what would the real operational process look like?
+
+Respond with ONLY the Mermaid diagram in ```mermaid``` code blocks. No additional explanation."""
+
+    @staticmethod
+    def get_refinement_prompt(pvb_data: dict, current_diagram: str, user_feedback: str) -> str:
+        """Generate prompt for diagram refinement based on user feedback."""
+        return f"""You are refining an operational business process diagram.
+
+CURRENT DIAGRAM:
+```mermaid
+{current_diagram}
+```
+
+ORIGINAL PRODUCT VISION BOARD:
+{json.dumps(pvb_data, indent=2, ensure_ascii=False)}
+
+USER REQUEST: "{user_feedback}"
+
+YOUR TASK:
+Modify the diagram according to the user's request while maintaining process logic and professional quality.
+
+REFINEMENT GUIDELINES:
+
+**Layout modifications:**
+- "plus vertical" / "more vertical" → Ensure flowchart TD, arrange nodes top-to-bottom
+- "plus horizontal" / "horizontal" → Change to flowchart LR
+- "plus compact" / "compact" → Reduce spacing, group related items in subgraphs
+- "plus aéré" / "spread out" → Add more intermediate steps
+
+**Visual enhancements:**
+- "plus de couleurs" / "add colors" → Ensure ALL nodes have colors based on actor type
+- "ajouter des icônes" / "add icons" → Add relevant emojis to each step
+- "plus gros" / "bigger" → Add more line breaks (<br/>) in labels
+- "légende" / "legend" → Add or enhance the "Légende" subgraph
+
+**Content modifications:**
+- "plus de détails" / "more detail" → Add intermediate steps, split complex steps
+- "simplifier" / "simplify" → Combine related steps, remove redundancy
+- "ajouter X" / "add X" → Insert new step(s) in logical position
+- "supprimer Y" / "remove Y" → Remove specified element(s)
+
+**Process logic modifications:**
+- "ajouter décision" / "add decision" → Add decision diamond {{}} with branches
+- "ajouter validation" / "add validation" → Add human validation step (orange)
+- "séparer les acteurs" / "separate actors" → Use subgraphs or swimlanes
+- "ajouter boucle" / "add loop" → Add feedback/retry arrows
+
+IMPORTANT RULES:
+✓ Maintain the operational process logic
+✓ Keep actor color coding (blue=system, green=AI, orange=human)
+✓ Preserve the sequential flow unless asked to change it
+✓ Keep labels clear and professional
+✓ Ensure valid Mermaid syntax
+✓ Include Légende subgraph if not present
+
+Respond with ONLY the updated Mermaid diagram in ```mermaid``` code blocks. No explanation."""
+
+    @staticmethod
+    def get_chat_message(text: str) -> str:
+        """Format a regular chat message (not diagram-related)."""
+        return text

src/ai/qwen_zerogpu_analyzer.py

@@ -0,0 +1,106 @@
+"""
+Qwen model with ZeroGPU support for Hugging Face Spaces.
+Uses transformers with @spaces.GPU decorator.
+"""
+import torch
+from typing import List, Dict
+from transformers import AutoTokenizer, AutoModelForCausalLM
+import spaces
+
+
+class QwenZeroGPUAnalyzer:
+    """
+    Qwen3 model analyzer with ZeroGPU support.
+    Uses Qwen3-4B-Instruct for diagram generation.
+    """
+
+    def __init__(
+        self,
+        model_name: str = "Qwen/Qwen3-4B-Instruct"
+    ):
+        """
+        Initialize the Qwen ZeroGPU analyzer.
+
+        Args:
+            model_name: HuggingFace model ID
+        """
+        self.model_name = model_name
+        self.model = None
+        self.tokenizer = None
+
+        print(f"✓ Qwen ZeroGPU analyzer initialized (model will load on first inference)")
+        print(f"  Model: {self.model_name}")
+
+    def _load_model(self):
+        """Load model and tokenizer (called on first inference)."""
+        if self.model is not None:
+            return
+
+        print(f"Loading model: {self.model_name}...")
+
+        # Load tokenizer
+        self.tokenizer = AutoTokenizer.from_pretrained(
+            self.model_name,
+            trust_remote_code=True
+        )
+
+        # Load model (will be moved to GPU by @spaces.GPU decorator)
+        self.model = AutoModelForCausalLM.from_pretrained(
+            self.model_name,
+            torch_dtype=torch.bfloat16,
+            device_map="auto",
+            trust_remote_code=True
+        )
+
+        print(f"✓ Model loaded: {self.model_name}")
+
+    @spaces.GPU(duration=60)  # ZeroGPU decorator - max 60 seconds
+    def generate_response(self, conversation: List[Dict[str, str]], max_tokens: int = 4000) -> str:
+        """
+        Generate response from conversation history using ZeroGPU.
+
+        Args:
+            conversation: List of conversation messages with 'role' and 'content'
+            max_tokens: Maximum tokens to generate
+
+        Returns:
+            Generated response text
+        """
+        # Load model on first call
+        if self.model is None:
+            self._load_model()
+
+        # Apply chat template
+        prompt = self.tokenizer.apply_chat_template(
+            conversation,
+            tokenize=False,
+            add_generation_prompt=True
+        )
+
+        # Tokenize
+        inputs = self.tokenizer(prompt, return_tensors="pt")
+        inputs = {k: v.to(self.model.device) for k, v in inputs.items()}
+
+        # Generate with ZeroGPU
+        with torch.no_grad():
+            outputs = self.model.generate(
+                **inputs,
+                max_new_tokens=max_tokens,
+                temperature=0.2,  # Low temperature for consistent diagrams
+                do_sample=False,  # Greedy decoding for deterministic output
+                pad_token_id=self.tokenizer.eos_token_id
+            )
+
+        # Decode response (skip input tokens)
+        input_length = inputs["input_ids"].shape[1]
+        response = self.tokenizer.decode(
+            outputs[0][input_length:],
+            skip_special_tokens=True
+        )
+
+        return response.strip()
+
+    def cleanup_model(self):
+        """Cleanup (managed by ZeroGPU)."""
+        # ZeroGPU handles cleanup automatically
+        pass

src/core/__init__.py

@@ -0,0 +1 @@
+"""Core modules for PVB Flow"""

src/core/mermaid_encoder.py

@@ -0,0 +1,80 @@
+"""
+Encode Mermaid diagrams for Mermaid Live Editor URLs.
+
+Format: JSON state with zlib compression + base64url encoding.
+Based on: Claude Desktop MCP implementation for Mermaid Live Editor.
+"""
+import zlib
+import base64
+import json
+
+
+def encode_mermaid_for_url(mermaid_code: str) -> str:
+    """
+    Encode Mermaid diagram code for Mermaid Live Editor URL.
+
+    Uses the official Mermaid Live Editor format:
+    1. Wrap code in JSON state object
+    2. Compress with zlib.compress (level 9, WITH header)
+    3. Base64url encode (+ → -, / → _, remove =)
+
+    Based on Claude Desktop MCP implementation for Mermaid Live Editor.
+
+    Args:
+        mermaid_code: Raw Mermaid diagram code
+
+    Returns:
+        Base64URL encoded string suitable for URL fragment
+    """
+    if not mermaid_code or not mermaid_code.strip():
+        return ""
+
+    # Create state object as per Mermaid Live Editor format
+    state = {
+        "code": mermaid_code,
+        "mermaid": {
+            "theme": "default"
+        },
+        "autoSync": True,
+        "updateDiagram": True
+    }
+
+    # Convert to JSON string
+    state_json = json.dumps(state)
+
+    # Encode to bytes
+    state_bytes = state_json.encode('utf-8')
+
+    # Compress using zlib.compress() with header (level 9, maximum compression)
+    # This matches the Claude Desktop MCP implementation
+    compressed = zlib.compress(state_bytes, level=9)
+
+    # Base64url encode (URL-safe variant)
+    # urlsafe_b64encode automatically does: + → -, / → _
+    encoded = base64.urlsafe_b64encode(compressed).decode('utf-8')
+
+    # Remove trailing = padding
+    base64url = encoded.rstrip('=')
+
+    return base64url
+
+
+def generate_mermaid_chart_url(mermaid_code: str) -> str:
+    """
+    Generate a complete Mermaid Live Editor URL.
+
+    Args:
+        mermaid_code: Raw Mermaid diagram code
+
+    Returns:
+        Full URL to Mermaid Live Editor with encoded diagram
+    """
+    if not mermaid_code or not mermaid_code.strip():
+        return ""
+
+    encoded = encode_mermaid_for_url(mermaid_code)
+
+    # Use Mermaid Live Editor (official editor that works with pako encoding)
+    url = f"https://mermaid.live/edit#pako:{encoded}"
+
+    return url

src/core/mermaid_extractor.py

@@ -0,0 +1,118 @@
+"""
+Utilities for extracting and validating Mermaid diagrams from LLM responses.
+"""
+import re
+from typing import Tuple, Optional
+
+
+class MermaidExtractor:
+    """Extracts and validates Mermaid code from text."""
+
+    @staticmethod
+    def extract_mermaid_code(llm_response: str) -> Tuple[Optional[str], bool]:
+        """
+        Extract Mermaid code from LLM response.
+
+        Args:
+            llm_response: Full response from the LLM
+
+        Returns:
+            Tuple of (mermaid_code, is_valid)
+        """
+        # Pattern to match ```mermaid ... ```
+        pattern = r'```mermaid\n(.*?)\n```'
+        match = re.search(pattern, llm_response, re.DOTALL)
+
+        if match:
+            code = match.group(1).strip()
+            is_valid, _ = MermaidExtractor.validate_mermaid_syntax(code)
+            return code, is_valid
+
+        return None, False
+
+    @staticmethod
+    def validate_mermaid_syntax(code: str) -> Tuple[bool, str]:
+        """
+        Basic Mermaid syntax validation.
+
+        Args:
+            code: Mermaid diagram code
+
+        Returns:
+            Tuple of (is_valid, error_message)
+        """
+        if not code or not code.strip():
+            return False, "Empty Mermaid code"
+
+        # Check for diagram type declaration
+        diagram_types = ['flowchart', 'graph', 'sequenceDiagram', 'classDiagram',
+                        'stateDiagram', 'erDiagram', 'gantt', 'pie']
+
+        has_diagram_type = any(dtype in code for dtype in diagram_types)
+        if not has_diagram_type:
+            return False, "Missing diagram type declaration (flowchart, graph, etc.)"
+
+        # Check for connections (common syntax)
+        connection_patterns = ['-->', '->', '---', '-.->', '==>','-.->']
+        has_connections = any(conn in code for conn in connection_patterns)
+
+        if not has_connections:
+            return False, "No connections found in diagram"
+
+        # Check for at least one node definition
+        # Nodes are typically: ID[Label] or ID(Label) or ID{Label}
+        node_pattern = r'[A-Z]\d*[\[\(\{]'
+        if not re.search(node_pattern, code):
+            return False, "No nodes defined in diagram"
+
+        return True, "Valid Mermaid syntax"
+
+    @staticmethod
+    def format_for_display(mermaid_code: str, assistant_text: str = None) -> str:
+        """
+        Format Mermaid code for Gradio display.
+        Gradio v6 automatically renders Mermaid in chatbot.
+
+        Args:
+            mermaid_code: The Mermaid diagram code
+            assistant_text: Optional explanatory text from the assistant
+
+        Returns:
+            Formatted string with Mermaid code block
+        """
+        response = ""
+        if assistant_text:
+            response += assistant_text + "\n\n"
+        response += f"```mermaid\n{mermaid_code}\n```"
+        return response
+
+    @staticmethod
+    def extract_all_mermaid_blocks(text: str) -> list[str]:
+        """
+        Extract all Mermaid code blocks from text (if multiple exist).
+
+        Args:
+            text: Text potentially containing multiple Mermaid blocks
+
+        Returns:
+            List of Mermaid code strings
+        """
+        pattern = r'```mermaid\n(.*?)\n```'
+        matches = re.findall(pattern, text, re.DOTALL)
+        return [match.strip() for match in matches]
+
+
+# Convenience functions
+def extract_mermaid_code(llm_response: str) -> Tuple[Optional[str], bool]:
+    """Shorthand for MermaidExtractor.extract_mermaid_code()"""
+    return MermaidExtractor.extract_mermaid_code(llm_response)
+
+
+def validate_mermaid_syntax(code: str) -> Tuple[bool, str]:
+    """Shorthand for MermaidExtractor.validate_mermaid_syntax()"""
+    return MermaidExtractor.validate_mermaid_syntax(code)
+
+
+def format_for_display(mermaid_code: str, assistant_text: str = None) -> str:
+    """Shorthand for MermaidExtractor.format_for_display()"""
+    return MermaidExtractor.format_for_display(mermaid_code, assistant_text)

src/ui/__init__.py

@@ -0,0 +1 @@
+"""UI modules for PVB Flow"""

src/ui/spaces_interface.py

@@ -0,0 +1,304 @@
+"""
+Gradio v6 interface for Hugging Face Spaces.
+Uses Mistral API for diagram generation.
+"""
+import gradio as gr
+import os
+from typing import Tuple, List, Dict
+from ..ai.qwen_zerogpu_analyzer import QwenZeroGPUAnalyzer
+from ..ai.prompts_config import DiagramPrompts
+from ..utils.json_validator import validate_pvb_json
+from ..core.mermaid_extractor import extract_mermaid_code
+from ..core.mermaid_encoder import generate_mermaid_chart_url
+
+
+def create_spaces_interface():
+    """
+    Create Gradio interface for Hugging Face Spaces.
+
+    Returns:
+        Gradio Blocks demo
+    """
+
+    # Initialize Qwen ZeroGPU analyzer
+    try:
+        analyzer = QwenZeroGPUAnalyzer()
+        print("✅ Qwen ZeroGPU analyzer initialized")
+    except Exception as e:
+        print(f"⚠️ Warning: Could not initialize Qwen analyzer: {e}")
+        analyzer = None
+
+    def handle_message(
+        user_input: str,
+        conversation: List[Dict[str, str]],
+        current_diagram: str,
+        pvb_data: Dict
+    ) -> Tuple[List[Dict[str, str]], str, List[Dict], str, Dict, str]:
+        """Handle user message and generate response."""
+
+        if not analyzer:
+            error_msg = "❌ Model not initialized. Please check the Space logs."
+            conversation.append({"role": "user", "content": user_input})
+            conversation.append({"role": "assistant", "content": error_msg})
+            diagram_preview = f"```mermaid\n{current_diagram}\n```" if current_diagram else "Model not initialized"
+            return conversation, diagram_preview, conversation, current_diagram, pvb_data, ""
+
+        if not user_input or not user_input.strip():
+            diagram_preview = f"```mermaid\n{current_diagram}\n```" if current_diagram else "Diagram will appear here..."
+            return conversation, diagram_preview, conversation, current_diagram, pvb_data, ""
+
+        # Check if this is initial PVB input or refinement
+        if not pvb_data:
+            # Try to parse as PVB JSON
+            is_valid, parsed_pvb, error = validate_pvb_json(user_input)
+
+            if is_valid:
+                # Valid PVB JSON - generate initial diagram
+                pvb_data = parsed_pvb
+                prompt = DiagramPrompts.get_initial_prompt(pvb_data)
+                display_message = "Here's my Product Vision Board. Please generate a Mermaid diagram."
+            else:
+                # Not valid PVB JSON, treat as regular message
+                prompt = user_input
+                display_message = user_input
+        else:
+            # Refinement request
+            prompt = DiagramPrompts.get_refinement_prompt(pvb_data, current_diagram, user_input)
+            display_message = user_input
+
+        # Add display message to conversation
+        conversation.append({"role": "user", "content": display_message})
+
+        try:
+            # Create LLM conversation with the actual prompt
+            llm_conversation = conversation[:-1]  # All messages except the last one
+            llm_conversation.append({"role": "user", "content": prompt})
+
+            # Generate response with Qwen ZeroGPU
+            response = analyzer.generate_response(llm_conversation)
+
+            # Extract Mermaid code from response
+            mermaid_code, is_valid = extract_mermaid_code(response)
+
+            if is_valid and mermaid_code:
+                current_diagram = mermaid_code
+
+            # Format diagram preview
+            diagram_preview = f"```mermaid\n{current_diagram}\n```" if current_diagram else "No diagram yet..."
+
+            # For chat display: show only text without the Mermaid code block
+            import re
+            chat_response = re.sub(r'```mermaid\n.*?\n```', '', response, flags=re.DOTALL).strip()
+
+            if not chat_response:
+                chat_response = "Diagramme généré avec succès ! Consultez le panneau de droite pour visualiser le résultat."
+
+            conversation.append({"role": "assistant", "content": chat_response})
+
+        except Exception as e:
+            error_message = f"Error generating response: {str(e)}"
+            conversation.append({"role": "assistant", "content": error_message})
+            diagram_preview = f"```mermaid\n{current_diagram}\n```" if current_diagram else "Error occurred"
+
+        return (
+            conversation,
+            diagram_preview,
+            conversation,
+            current_diagram,
+            pvb_data,
+            ""
+        )
+
+    def handle_clear() -> Tuple[List, str, List, str, Dict, str]:
+        """Clear all conversation and state."""
+        return (
+            [],
+            "Diagram will appear here...",
+            [],
+            "",
+            {},
+            ""
+        )
+
+    def handle_generate_link(diagram_preview: str) -> str:
+        """Generate Mermaid Live Editor link."""
+        import time
+        import hashlib
+        import re
+
+        timestamp = time.strftime("%Y-%m-%d %H:%M:%S")
+
+        # Extract Mermaid code from preview
+        mermaid_pattern = r'```mermaid\n(.*?)\n```'
+        match = re.search(mermaid_pattern, diagram_preview, re.DOTALL)
+
+        if not match:
+            return "⚠️ **Pas de diagramme à partager.** Veuillez d'abord générer un diagramme."
+
+        current_diagram = match.group(1).strip()
+
+        if not current_diagram or not current_diagram.strip():
+            return "⚠️ **Pas de diagramme à partager.** Veuillez d'abord générer un diagramme."
+
+        # Generate hash for verification
+        diagram_hash = hashlib.md5(current_diagram.encode()).hexdigest()[:8]
+
+        url = generate_mermaid_chart_url(current_diagram)
+
+        if url:
+            first_line = current_diagram.split('\n')[0] if current_diagram else 'N/A'
+
+            return f"""### 🔗 Lien Mermaid Live Editor
+
+**Généré à:** {timestamp} | **Hash:** `{diagram_hash}`
+**Diagramme:** `{first_line}` ({len(current_diagram)} caractères)
+
+[**👉 Cliquez ici pour ouvrir votre diagramme dans Mermaid Live Editor**]({url})
+
+Ou copiez le lien ci-dessous :
+```
+{url}
+```
+
+**Ce que vous pouvez faire sur Mermaid Live Editor :**
+- ✏️ Éditer le diagramme en temps réel
+- 📥 Exporter en PNG, SVG, ou PDF
+- 🔗 Partager avec votre équipe
+- 💾 Télécharger le code ou l'image
+"""
+        else:
+            return "❌ **Erreur lors de la génération du lien.** Veuillez réessayer."
+
+    # Build Gradio interface
+    with gr.Blocks(title="Product Vision Board → Mermaid Diagram") as demo:
+        # Header
+        gr.Markdown(
+            """
+            # 📊 Product Vision Board → Mermaid Diagram Generator
+            **Transform your Product Vision Board into professional Mermaid flowcharts**
+            """
+        )
+
+        # Instructions
+        with gr.Accordion("📖 How to use", open=False):
+            gr.Markdown(
+                """
+                ### Getting Started
+
+                1. **Paste your Product Vision Board JSON** in the chat input (see example below)
+                2. **Wait for the diagram** to be generated
+                3. **Refine the diagram** by chatting (e.g., "make it more vertical", "add more colors", "simplify")
+
+                ### Example Product Vision Board JSON
+                ```json
+                {
+                  "1. Utilisateur Cible": [
+                    "Passionnés de cuisine amateur",
+                    "Professionnels de la restauration"
+                  ],
+                  "2. Description du Produit": [
+                    "Application de gestion de recettes avec suggestions personnalisées",
+                    "Planification automatique des repas de la semaine"
+                  ],
+                  "3. Fonctionnalités Clés": [
+                    "Recherche de recettes par ingrédients disponibles",
+                    "Génération automatique de liste de courses",
+                    "Suggestions basées sur les préférences alimentaires"
+                  ],
+                  "4. Enjeux et Indicateurs": [
+                    "Réduire le gaspillage alimentaire de 30%",
+                    "Atteindre 100 000 utilisateurs actifs en 6 mois"
+                  ],
+                  "Summary": "Simplifier la planification des repas et réduire le gaspillage alimentaire"
+                }
+                ```
+
+                ### Tips
+                - The chatbot will auto-render Mermaid diagrams
+                - You can request layout changes (vertical/horizontal)
+                - Ask for visual enhancements (colors, icons, subgraphs)
+                - Iterate until you're happy with the result!
+                """
+            )
+
+        # Main content: Two-column layout
+        with gr.Row():
+            # LEFT COLUMN: Chatbot
+            with gr.Column(scale=1):
+                chatbot = gr.Chatbot(
+                    value=[],
+                    height=650,
+                    label="Conversation"
+                )
+
+                # Input area
+                msg_input = gr.Textbox(
+                    placeholder="Paste your Product Vision Board JSON or ask for diagram refinements...",
+                    lines=5,
+                    show_label=False,
+                    max_lines=10
+                )
+
+                # Action buttons
+                with gr.Row():
+                    send_btn = gr.Button("📤 Send", variant="primary")
+                    clear_btn = gr.Button("🗑️ Clear", variant="secondary")
+
+            # RIGHT COLUMN: Diagram Preview
+            with gr.Column(scale=1):
+                gr.Markdown("### 📈 Diagram Preview")
+                diagram_preview = gr.Markdown(
+                    value="*Paste your Product Vision Board JSON to generate a diagram...*",
+                    height=500
+                )
+
+                # Diagram actions
+                with gr.Row():
+                    open_chart_btn = gr.Button("🔗 Generate Mermaid Live Link", variant="primary")
+
+                # URL display area
+                mermaid_url_display = gr.Markdown(
+                    value="",
+                    label="Mermaid Live Editor Link"
+                )
+
+                gr.Markdown("*Click the button to generate a shareable link. Then click the link to open in Mermaid Live Editor!*")
+
+        # State management
+        conversation_state = gr.State([])
+        diagram_state = gr.State("")
+        pvb_state = gr.State({})
+
+        # Event handlers
+        send_btn.click(
+            fn=handle_message,
+            inputs=[msg_input, conversation_state, diagram_state, pvb_state],
+            outputs=[chatbot, diagram_preview, conversation_state, diagram_state, pvb_state, msg_input]
+        )
+
+        msg_input.submit(
+            fn=handle_message,
+            inputs=[msg_input, conversation_state, diagram_state, pvb_state],
+            outputs=[chatbot, diagram_preview, conversation_state, diagram_state, pvb_state, msg_input]
+        )
+
+        clear_btn.click(
+            fn=handle_clear,
+            outputs=[chatbot, diagram_preview, conversation_state, diagram_state, pvb_state, mermaid_url_display]
+        )
+
+        open_chart_btn.click(
+            fn=handle_generate_link,
+            inputs=[diagram_preview],
+            outputs=[mermaid_url_display]
+        )
+
+        # Footer
+        gr.Markdown(
+            """
+            ---
+            Made with ❤️ using [Gradio v6](https://gradio.app) • Powered by Qwen3-4B-Instruct with ZeroGPU
+            """
+        )
+
+    return demo

src/utils/__init__.py

@@ -0,0 +1 @@
+"""Utility modules for PVB Flow"""

src/utils/json_validator.py

@@ -0,0 +1,112 @@
+"""
+JSON validation utilities for Product Vision Board data.
+"""
+import json
+from typing import Tuple, Dict, Optional
+
+
+class PVBValidator:
+    """Validates and parses Product Vision Board JSON data."""
+
+    # Expected sections in a Product Vision Board
+    EXPECTED_SECTIONS = [
+        "1. Utilisateur Cible",
+        "2. Description du Produit",
+        "3. Fonctionnalités Clés",
+        "4. Enjeux et Indicateurs"
+    ]
+
+    @staticmethod
+    def validate_pvb_json(user_input: str) -> Tuple[bool, Optional[Dict], Optional[str]]:
+        """
+        Validate if the user input is valid Product Vision Board JSON.
+
+        Args:
+            user_input: String that might be JSON
+
+        Returns:
+            Tuple of (is_valid, parsed_data, error_message)
+        """
+        # Try to parse as JSON
+        try:
+            data = json.loads(user_input)
+        except json.JSONDecodeError as e:
+            return False, None, f"Invalid JSON format: {str(e)}"
+
+        # Check if it's a dictionary
+        if not isinstance(data, dict):
+            return False, None, "JSON must be an object/dictionary, not an array or primitive"
+
+        # Check for at least some expected sections
+        found_sections = [section for section in PVBValidator.EXPECTED_SECTIONS if section in data]
+
+        if len(found_sections) == 0:
+            # Not a PVB, might be a regular JSON
+            return False, None, "No Product Vision Board sections found"
+
+        # Validate that sections contain lists
+        for section in found_sections:
+            if not isinstance(data[section], list):
+                return False, None, f"Section '{section}' must be a list"
+
+        # Valid PVB JSON
+        return True, data, None
+
+    @staticmethod
+    def is_pvb_like(user_input: str) -> bool:
+        """
+        Quick check if input looks like PVB JSON (without full validation).
+
+        Args:
+            user_input: User input string
+
+        Returns:
+            True if it looks like PVB JSON
+        """
+        # Check if it starts with { and contains at least one expected section
+        if not user_input.strip().startswith("{"):
+            return False
+
+        for section in PVBValidator.EXPECTED_SECTIONS:
+            if section in user_input:
+                return True
+
+        return False
+
+    @staticmethod
+    def extract_summary(pvb_data: Dict) -> str:
+        """
+        Extract or generate a summary from PVB data.
+
+        Args:
+            pvb_data: Parsed PVB dictionary
+
+        Returns:
+            Summary string
+        """
+        if "Summary" in pvb_data:
+            return pvb_data["Summary"]
+
+        # Generate basic summary from sections
+        summary_parts = []
+        if "1. Utilisateur Cible" in pvb_data:
+            users = pvb_data["1. Utilisateur Cible"]
+            summary_parts.append(f"Target users: {', '.join(users)}")
+
+        if "4. Enjeux et Indicateurs" in pvb_data:
+            objectives = pvb_data["4. Enjeux et Indicateurs"]
+            if objectives:
+                summary_parts.append(f"Key objective: {objectives[0]}")
+
+        return " | ".join(summary_parts) if summary_parts else "Product Vision Board"
+
+
+# Convenience functions
+def validate_pvb_json(user_input: str) -> Tuple[bool, Optional[Dict], Optional[str]]:
+    """Shorthand for PVBValidator.validate_pvb_json()"""
+    return PVBValidator.validate_pvb_json(user_input)
+
+
+def is_pvb_like(user_input: str) -> bool:
+    """Shorthand for PVBValidator.is_pvb_like()"""
+    return PVBValidator.is_pvb_like(user_input)