File size: 11,474 Bytes
c9a6a77 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 214 215 216 217 218 219 220 221 222 223 224 225 226 227 228 229 230 231 232 233 234 235 236 237 238 239 240 241 242 243 244 245 246 247 248 249 250 251 252 253 254 255 256 257 258 259 260 261 262 263 264 265 266 267 268 269 270 271 272 273 274 275 276 277 278 279 280 281 282 283 284 285 286 287 288 289 290 291 292 293 294 295 296 297 298 299 300 301 302 303 304 305 |
"""
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
|