Changed button UI and system prompt.

README.md

@@ -9,7 +9,7 @@ python_version: '3.13'
 app_file: app.py
 pinned: false
 license: mit
-short_description: Code -> Flowchart. 📊
+short_description: Turn your Python code into an easy, readable Mermaid.js flowchart. 📊
 ---
 
 Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

app.py

@@ -53,7 +53,7 @@ def generate_flowchart(src_code: str) -> str:
     1. OUTPUT FORMAT: Output ONLY valid, raw Mermaid.js syntax.
     2. NO MARKDOWN FENCING: Do not wrap the output in ```mermaid or ``` blocks. Start directly with the Mermaid graph definition, for example: graph TD.
     3. NO PROSE: Do not include introductory text, explanations, or concluding remarks. If the code cannot be parsed, output an isolated error node.
-    4. NODE NAMING: Paraphrase conditions into plain words — never put raw code, operators, quotes, or parentheses inside labels (write Index in bounds?, not i < len(nums))
+    4. NODE NAMING: Paraphrase conditions into plain words — never put raw code, operators, quotes, parentheses, or square brackets/subscripts inside labels (write Index in bounds?, not i < len(nums); write Element is even?, not nums[i] % 2 == 0)
     </constraints>
 
     <banned_vocabulary>
@@ -134,6 +134,7 @@ index_html = """
         textarea { flex: 1; background: #111827; color: #34d399; border: 1px solid #374151; padding: 10px; font-family: monospace; resize: none; border-radius: 4px; }
         button { background: #059669; color: white; border: none; padding: 12px; margin-top: 10px; cursor: pointer; font-weight: bold; border-radius: 4px; }
         button:hover { background: #10b981; }
+        button:disabled { background: #374151; cursor: not-allowed; }
         #flowchart-target { flex: 1; background: #ffffff; padding: 10px; border-radius: 4px; overflow: auto; display: flex; justify-content: center; align-items: start; }
     </style>
 </head>
@@ -168,12 +169,17 @@ index_html = """
         document.getElementById('submit-btn').addEventListener('click', async () => {
             const codeValue = document.getElementById('code-input').value;
             const targetDiv = document.getElementById('flowchart-target');
-            
+            const submitBtn = document.getElementById('submit-btn');
+
             if (!codeValue.trim()) {
                 targetDiv.innerHTML = "<p style='color:red;'>Please input code first.</p>";
                 return;
             }
 
+            // Disable the button while a request is in flight so a slow CPU
+            // generation can't be double-fired into a concurrent request.
+            submitBtn.disabled = true;
+            submitBtn.textContent = "Generating...";
             targetDiv.innerHTML = "Generating diagram...";
 
             try {
@@ -184,9 +190,12 @@ index_html = """
                 // Inject the raw string into a clean layout block and re-trigger parsing
                 targetDiv.innerHTML = `<pre class="mermaid">${mermaidSyntax}</pre>`;
                 await mermaid.run();
-                
+
             } catch (error) {
                 targetDiv.innerHTML = `<p style='color:red;'>Error during generation: ${error.message}</p>`;
+            } finally {
+                submitBtn.disabled = false;
+                submitBtn.textContent = "Generate Flowchart";
             }
         });
     </script>