Upload 16 files

api_base.py

@@ -1,3 +1,9 @@
+"""
+Base API module for handling different API providers.
+This module provides a unified interface for interacting with various API providers
+like Anthropic, OpenAI, Google Gemini and Together AI.
+"""
+
 from abc import ABC, abstractmethod
 import logging
 import requests
@@ -246,7 +252,15 @@ class DeepSeekAPI(BaseAPI):
                 max_tokens=max_tokens
             )
             
-            return response.choices[0].message.content
+            # Check if this is the reasoning model response
+            if self.model == "deepseek-reasoner" and hasattr(response.choices[0].message, "reasoning_content"):
+                # Include both reasoning and answer
+                reasoning = response.choices[0].message.reasoning_content
+                answer = response.choices[0].message.content
+                return f"Reasoning:\n{reasoning}\n\nAnswer:\n{answer}"
+            else:
+                # Regular model response
+                return response.choices[0].message.content
             
         except Exception as e:
             self._handle_error(e, "request or response processing")
@@ -272,15 +286,49 @@ class QwenAPI(BaseAPI):
             formatted_prompt = self._format_prompt(prompt, prompt_format)
             
             logger.info(f"Sending request to Qwen API with model {self.model}")
-            response = self.client.chat.completions.create(
-                model=self.model,
-                messages=[
-                    {"role": "user", "content": formatted_prompt}
-                ],
-                max_tokens=max_tokens
-            )
             
-            return response.choices[0].message.content
+            # Check if this is the reasoning model (qwq-plus)
+            if self.model == "qwq-plus":
+                # For qwq-plus model, we need to use streaming
+                reasoning_content = ""
+                answer_content = ""
+                is_answering = False
+                
+                response = self.client.chat.completions.create(
+                    model=self.model,
+                    messages=[
+                        {"role": "user", "content": formatted_prompt}
+                    ],
+                    max_tokens=max_tokens,
+                    stream=True  # qwq-plus only supports streaming output
+                )
+                
+                for chunk in response:
+                    if not chunk.choices:
+                        continue
+                    
+                    delta = chunk.choices[0].delta
+                    # Collect reasoning process
+                    if hasattr(delta, 'reasoning_content') and delta.reasoning_content is not None:
+                        reasoning_content += delta.reasoning_content
+                    # Collect answer content
+                    elif hasattr(delta, 'content') and delta.content is not None:
+                        answer_content += delta.content
+                        is_answering = True
+                
+                # Return combined reasoning and answer
+                return f"Reasoning:\n{reasoning_content}\n\nAnswer:\n{answer_content}"
+            else:
+                # Regular model response (non-streaming)
+                response = self.client.chat.completions.create(
+                    model=self.model,
+                    messages=[
+                        {"role": "user", "content": formatted_prompt}
+                    ],
+                    max_tokens=max_tokens
+                )
+                
+                return response.choices[0].message.content
             
         except Exception as e:
             self._handle_error(e, "request or response processing")

app.py

@@ -1,5 +1,9 @@
 from flask import Flask, render_template, request, jsonify
 from api_base import create_api  # New import for API factory
+from plain_text_reasoning import (
+    create_mermaid_diagram as create_plain_diagram,
+    parse_plain_text_response
+)
 from cot_reasoning import (
     VisualizationConfig,
     create_mermaid_diagram as create_cot_diagram,
@@ -82,6 +86,41 @@ def get_provider_api_key(provider):
             'error': str(e)
         }), 500
 
+@app.route('/save-api-key', methods=['POST'])
+def save_api_key():
+    """Save API key for a provider in memory only (no file storage)"""
+    try:
+        data = request.json
+        if not data:
+            return jsonify({
+                'success': False,
+                'error': 'No data provided'
+            }), 400
+
+        provider = data.get('provider')
+        api_key = data.get('api_key')
+
+        if not provider or not api_key:
+            return jsonify({
+                'success': False,
+                'error': 'Provider and API key are required'
+            }), 400
+
+        # Update API key in config (this updates the in-memory API keys only)
+        config.general.provider_api_keys[provider] = api_key
+        logger.info(f"Saved API key for provider: {provider} (in memory only)")
+
+        return jsonify({
+            'success': True
+        })
+        
+    except Exception as e:
+        logger.error(f"Error saving API key: {str(e)}")
+        return jsonify({
+            'success': False,
+            'error': str(e)
+        }), 500
+
 @app.route('/select-method', methods=['POST'])
 def select_method():
     """Let the model select the most appropriate reasoning method"""
@@ -233,6 +272,9 @@ def process():
             elif reasoning_method == 'bs':
                 result = parse_bs_response(raw_response, question)
                 visualization = create_bs_diagram(result, viz_config)
+            elif reasoning_method == 'plain':
+                parse_plain_text_response(raw_response, question)
+                visualization = None
                 
             logger.info("Successfully generated visualization")
         except Exception as viz_error:

configs.py

@@ -49,6 +49,7 @@ class GeneralConfig:
         "gemini-1.5-flash",
         "gemini-1.5-flash-8b",
         "gemini-1.5-pro",
+        "gemini-2.0-flash-thinking-exp", 
         # Together AI Models
         "meta-llama/Llama-3.3-70B-Instruct-Turbo",
         #"meta-llama/Llama-3.2-3B-Instruct-Turbo", 
@@ -75,6 +76,7 @@ class GeneralConfig:
         #"nvidia/Llama-3.1-Nemotron-70B-Instruct-HF",
         # DeepSeek Models
         "deepseek-chat",
+        "deepseek-reasoner",
         # Qwen Models
         "qwen-max",
         "qwen-max-latest",
@@ -85,6 +87,7 @@ class GeneralConfig:
         "qwen-turbo",
         "qwen-turbo-latest",
         "qwen-turbo-2024-11-01",
+        "qwq-plus",
         #"qwen2.5-14b-instruct-1m",
         #"qwen2.5-7b-instruct-1m",
         "qwen2.5-72b-instruct",
@@ -114,6 +117,7 @@ class GeneralConfig:
         "gemini-1.5-flash": "google",
         "gemini-1.5-flash-8b": "google",
         "gemini-1.5-pro": "google",
+        "gemini-2.0-flash-thinking-exp": "google", 
         "meta-llama/Llama-3.3-70B-Instruct-Turbo": "together",
         #"meta-llama/Llama-3.2-3B-Instruct-Turbo": "together", 
         "meta-llama/Meta-Llama-3.1-405B-Instruct-Lite-Pro": "together",
@@ -138,6 +142,7 @@ class GeneralConfig:
         #"databricks/dbrx-instruct": "together",
         #"nvidia/Llama-3.1-Nemotron-70B-Instruct-HF": "together",
         "deepseek-chat": "deepseek",
+        "deepseek-reasoner": "deepseek",
         "qwen-max": "qwen",
         "qwen-max-latest": "qwen",
         "qwen-max-2025-01-25": "qwen",
@@ -147,6 +152,7 @@ class GeneralConfig:
         "qwen-turbo": "qwen",
         "qwen-turbo-latest": "qwen",
         "qwen-turbo-2024-11-01": "qwen",
+        "qwq-plus": "qwen",
         #"qwen2.5-14b-instruct-1m": "qwen",
         #"qwen2.5-7b-instruct-1m": "qwen",
         "qwen2.5-72b-instruct": "qwen",
@@ -169,6 +175,13 @@ class GeneralConfig:
         """Get default API key for specific provider"""
         return self.provider_api_keys.get(provider, "")
 
+@dataclass
+class PlainTextConfig:
+    """Configuration specific to Plain Text method (no visualization)"""
+    name: str = "Plain Text"
+    prompt_format: str = '''{question}'''
+    example_question: str = "Who are you?"
+
 @dataclass
 class ChainOfThoughtsConfig:
     """Configuration specific to Chain of Thoughts method"""
@@ -373,6 +386,7 @@ class ReasoningConfig:
             "srf": SelfRefineConfig(),
             "l2m": LeastToMostConfig(),
             "bs": BeamSearchConfig(),
+            "plain": PlainTextConfig(),
         }
     
     def get_method_config(self, method_id: str) -> Optional[dict]:

cot_reasoning.py

@@ -84,28 +84,20 @@ Note:
 """
 
 def wrap_text(text: str, config: VisualizationConfig) -> str:
-    """
-    Wrap text to fit within box constraints with proper line breaks.
-    
-    Args:
-        text: The text to wrap
-        config: VisualizationConfig containing formatting parameters
-    
-    Returns:
-        Wrapped text with line breaks
-    """
-    # Clean the text first
+    """Wrap text to fit within box constraints"""
     text = text.replace('\n', ' ').replace('"', "'")
-    
-    # Wrap the text into lines
     wrapped_lines = textwrap.wrap(text, width=config.max_chars_per_line)
     
-    # Limit number of lines and add truncation if necessary
     if len(wrapped_lines) > config.max_lines:
-        wrapped_lines = wrapped_lines[:config.max_lines-1]
-        wrapped_lines.append(wrapped_lines[-1][:config.max_chars_per_line-3] + config.truncation_suffix)
+        # Option 1: Simply truncate and add ellipsis to the last line
+        wrapped_lines = wrapped_lines[:config.max_lines]
+        wrapped_lines[-1] = wrapped_lines[-1][:config.max_chars_per_line-3] + "..."
+        
+        # Option 2 (alternative): Include part of the next line to show continuity
+        # original_next_line = wrapped_lines[config.max_lines] if len(wrapped_lines) > config.max_lines else ""
+        # wrapped_lines = wrapped_lines[:config.max_lines-1]
+        # wrapped_lines.append(original_next_line[:config.max_chars_per_line-3] + "...")
     
-    # Join with <br> for HTML line breaks in Mermaid
     return "<br>".join(wrapped_lines)
 
 def parse_cot_response(response_text: str, question: str) -> CoTResponse:

l2m_reasoning.py

@@ -61,8 +61,8 @@ def wrap_text(text: str, max_chars: int = 40, max_lines: int = 4) -> str:
     wrapped_lines = textwrap.wrap(text, width=max_chars)
     
     if len(wrapped_lines) > max_lines:
-        wrapped_lines = wrapped_lines[:max_lines-1]
-        wrapped_lines.append(wrapped_lines[-1][:max_chars-3] + "...")
+        wrapped_lines = wrapped_lines[:max_lines]
+        wrapped_lines[-1] = wrapped_lines[-1][:max_chars-3] + "..."
     
     return "<br>".join(wrapped_lines)
 

plain_text_reasoning.py

@@ -0,0 +1,30 @@
+"""
+Module for handling plain text reasoning without visualization.
+This allows users to see the raw model output.
+"""
+
+def parse_plain_text_response(response_text: str, question: str) -> str:
+    """
+    Simply pass through the raw model response without any parsing.
+    
+    Args:
+        response_text: The raw response from the API
+        question: The original question
+    
+    Returns:
+        The unmodified response text
+    """
+    return response_text
+
+def create_mermaid_diagram(raw_text: str, config=None) -> None:
+    """
+    No diagram creation for plain text mode.
+    
+    Args:
+        raw_text: The raw response text
+        config: Visualization configuration (not used)
+    
+    Returns:
+        None as no visualization is needed
+    """
+    return None

templates/index.html

@@ -135,6 +135,7 @@
             justify-content: center;
             gap: 0;
             white-space: nowrap;
+            margin-top: 30px; /* Added space to move links lower */
         }
 
         .links a {
@@ -149,6 +150,11 @@
             opacity: 1;
             text-decoration: underline;
         }
+        
+        .link-separator {
+            color: white;
+            opacity: 0.9;
+        }
 
         .container {
             display: flex;
@@ -296,6 +302,13 @@
             background-color: #e5e7eb;
         }
 
+        .zoom-button:disabled {
+            background-color: #9ca3af;
+            cursor: not-allowed;
+            color: white;
+            border-color: #9ca3af;
+        }
+
         .zoom-level {
             font-size: 14px;
             color: #374151;
@@ -324,6 +337,80 @@
             background-color: #f8f9fa;
         }
 
+        .tooltip {
+            position: relative;
+            display: inline-block;
+        }
+
+        .tooltip .tooltiptext {
+            visibility: hidden;
+            width: 220px;
+            background-color: #555;
+            color: #fff;
+            text-align: center;
+            border-radius: 6px;
+            padding: 5px;
+            position: absolute;
+            z-index: 1;
+            top: 125%;
+            left: 50%;
+            margin-left: -110px;
+            opacity: 0;
+            transition: opacity 0.1s;
+        }
+
+        .tooltip .tooltiptext::after {
+            content: "";
+            position: absolute;
+            bottom: 100%;
+            left: 50%;
+            margin-left: -5px;
+            border-width: 5px;
+            border-style: solid;
+            border-color: transparent transparent #555 transparent;
+        }
+
+        .tooltip:hover .tooltiptext {
+            visibility: visible;
+            opacity: 1;
+        }
+        
+        /* New tooltip-top class for tooltips that appear above elements */
+        .tooltip-top .tooltiptext {
+            bottom: 125%; /* Position above instead of below */
+            top: auto; /* Override the default top value */
+        }
+
+        .tooltip-top .tooltiptext::after {
+            top: 100%; /* Arrow at the bottom rather than top */
+            bottom: auto; /* Override the default bottom value */
+            border-color: #555 transparent transparent transparent; /* Arrow pointing down */
+        }
+
+        .tooltip-wrap .tooltiptext {
+            width: 440px;
+            margin-left: -110px;
+            white-space: normal;
+            font-size: 14px;
+        }
+
+        .lang-tooltip .tooltiptext {
+            width: 440px;
+            margin-left: 0;
+            transform: translateX(-50%);
+            font-size: 14px;
+            white-space: normal;
+            font-weight: normal;
+        }
+
+        .english-tooltip .tooltiptext {
+            left: 40%;
+        }
+    
+        .chinese-tooltip .tooltiptext {
+            left: 50%;
+        }
+
         .mermaid {
             padding: 0;
             border-radius: 4px;
@@ -337,7 +424,7 @@
 <body>
     <div class="banner">
         <div class="banner-content">
-            <h1>ReasonGraph: Visualisation of Reasoning Paths</h1>
+            <h1>ReasonGraph</h1>
             <div class="search-area">
                 <div class="search-input-container">
                     <textarea id="question" class="search-input" placeholder="Enter your question here..." rows="1"></textarea>
@@ -347,15 +434,24 @@
                     <select class="param-input" id="reasoning-method">
                         <!-- Populated dynamically -->
                     </select>
-                    <button onclick="metaReasoning()" id="meta-btn">Meta Reasoning</button>
-                    <button onclick="processQuestion()" id="process-btn">Start Reasoning</button>
+                    <button onclick="metaReasoning()" id="meta-btn" class="tooltip">Meta Reasoning
+                        <span class="tooltiptext">Use reasoning method self-selected by the model</span>
+                    </button>
+                    <button onclick="processQuestion()" id="process-btn" class="tooltip">Start Reasoning
+                        <span class="tooltiptext">Normal reasoning by selected method and model</span>
+                    </button>
+                    <button onclick="longReasoning()" id="long-btn" class="tooltip">Long Reasoning
+                        <span class="tooltiptext">Only supported by deepseek-reasoner and qwq-plus models; Please insert Claude's API key for long reasoning visualization</span>
+                    </button>
                 </div>
             </div>
             <div class="links">
                 <a href="https://github.com/ZongqianLi/ReasonGraph"><u>Github</u> |&nbsp</a><a href="https://arxiv.org/abs/2503.03979"><u>Paper</u> |&nbsp</a><a href="mailto:[email protected]"><u>Email</u></a>
-            </div>
-            <div class="links">
-                <a href="./index.html"><u>English</u> |&nbsp</a><a href="./index_cn.html"><u>��文</u></a>
+                <span class="link-separator"> |&nbsp|&nbsp</span><a href="./index.html" class="tooltip tooltip-top lang-tooltip english-tooltip"><u>English</u> /&nbsp
+                    <span class="tooltiptext">Switch to English version; To get responses in other languages, ask in that language and say "please answer in this language"</span>
+                </a><a href="./index_cn.html" class="tooltip tooltip-top lang-tooltip chinese-tooltip"><u>中文</u>
+                    <span class="tooltiptext">切换到中文版；如果想使模型输出中文，只需用中文提问，同时输入"请使用中文回答"</span>
+                </a>
             </div>
         </div>
     </div>
@@ -422,7 +518,8 @@
                     <div class="zoom-level" id="zoom-level">100%</div>
                     <button class="zoom-button" onclick="adjustZoom(0.1)">+</button>
                     <button class="zoom-button" onclick="resetZoom()">Reset</button>
-                    <button class="zoom-button" onclick="downloadDiagram()">Download</button>
+                    <button class="zoom-button" onclick="downloadDiagram()">Download Flow Chart</button>
+                    <button class="zoom-button" onclick="downloadMermaidCode()">Download Code</button>
                 </div>
                 <div class="visualization-wrapper">
                     <div id="mermaid-container">
@@ -456,20 +553,42 @@
         // Initialize zoom lock flag
         window.isZoomLocked = false;
 
+        // Save raw output for long reasoning
+        let currentRawOutput = "";
+        
+        // Store user-entered API keys
+        let userApiKeys = {};
+
+        function updateButtonTextPreserveTooltip(button, text) {
+            for (let i = 0; i < button.childNodes.length; i++) {
+                if (button.childNodes[i].nodeType === Node.TEXT_NODE) {
+                    button.childNodes[i].nodeValue = text;
+                    return;
+                }
+            }
+            
+            button.prepend(document.createTextNode(text));
+        }
+
         // Handle API Provider change
         async function handleProviderChange(provider) {
             try {
                 // Update model list
                 updateModelList();
                 
-                // Get and update API key
-                const response = await fetch(`/provider-api-key/${provider}`);
-                const result = await response.json();
-                
-                if (result.success) {
-                    document.getElementById('api-key').value = result.api_key;
+                // Check if we have a user-entered API key for this provider
+                if (userApiKeys[provider]) {
+                    document.getElementById('api-key').value = userApiKeys[provider];
                 } else {
-                    console.error('Failed to get API key:', result.error);
+                    // Get the default API key only if user hasn't entered one
+                    const response = await fetch(`/provider-api-key/${provider}`);
+                    const result = await response.json();
+                    
+                    if (result.success) {
+                        document.getElementById('api-key').value = result.api_key;
+                    } else {
+                        console.error('Failed to get API key:', result.error);
+                    }
                 }
             } catch (error) {
                 console.error('Error updating provider settings:', error);
@@ -513,6 +632,17 @@
                 const methodConfig = currentConfig.methods[defaultMethod];
                 updatePromptFormat(methodConfig.prompt_format);
                 updateExampleQuestion(methodConfig.example_question);
+                
+                // Add event listener for API key changes
+                document.getElementById('api-key').addEventListener('change', function() {
+                    const provider = document.getElementById('api-provider').value;
+                    const apiKey = this.value.trim();
+                    
+                    if (apiKey) {
+                        // Save in local memory
+                        userApiKeys[provider] = apiKey;
+                    }
+                });
             } catch (error) {
                 console.error('Failed to load configuration:', error);
                 showError('Failed to load configuration. Please refresh the page.');
@@ -648,6 +778,90 @@
             }
         }
 
+        // Function to download the Mermaid code
+        async function downloadMermaidCode() {
+            // Do nothing if zooming is locked
+            if (window.isZoomLocked) return;
+
+            try {
+                // First, check if we have stored code from the last visualization
+                let mermaidCode = lastMermaidCode;
+                
+                // If no stored code, try to extract it
+                if (!mermaidCode) {
+                    const diagramContainer = document.getElementById('mermaid-diagram');
+                    if (!diagramContainer) {
+                        alert('No diagram available to download code');
+                        return;
+                    }
+                    
+                    // Try to find the mermaid element with the code
+                    const mermaidElement = diagramContainer.querySelector('.mermaid');
+                    
+                    if (mermaidElement) {
+                        // Get the text content which contains the Mermaid code
+                        mermaidCode = mermaidElement.getAttribute('data-processed') === 'true' 
+                            ? mermaidElement.dataset.graph 
+                            : mermaidElement.textContent;
+                    }
+                    
+                    // Fallback: If we can't get the code directly, try to extract from raw output
+                    if (!mermaidCode && currentRawOutput) {
+                        mermaidCode = extractMermaidCode(currentRawOutput);
+                    }
+                    
+                    if (!mermaidCode) {
+                        // Another fallback: try to extract from svg data
+                        const svg = diagramContainer.querySelector('svg');
+                        if (svg) {
+                            const svgData = svg.outerHTML;
+                            // Look for mermaid data embedded in the SVG
+                            const match = svgData.match(/data-mermaid="(.*?)"/);
+                            if (match && match[1]) {
+                                mermaidCode = decodeURIComponent(match[1]);
+                            }
+                        }
+                    }
+                }
+                
+                if (!mermaidCode) {
+                    // If we still don't have the code, try to generate a basic flowchart from the SVG
+                    const diagramContainer = document.getElementById('mermaid-diagram');
+                    const svg = diagramContainer && diagramContainer.querySelector('svg');
+                    
+                    if (svg) {
+                        // Try to reconstruct Mermaid code from SVG elements
+                        mermaidCode = "flowchart TD\n";
+                        mermaidCode += "    A[\"This is an auto-generated approximation of the flowchart.\"]\n";
+                        mermaidCode += "    B[\"The original Mermaid code could not be extracted.\"]\n";
+                        mermaidCode += "    A --> B\n";
+                        mermaidCode += "    classDef default fill:#f9f9f9,stroke:#333,stroke-width:2px;";
+                    } else {
+                        alert('Unable to extract or generate Mermaid code');
+                        return;
+                    }
+                }
+
+                // Create blob and download link
+                const blob = new Blob([mermaidCode], {type: 'text/plain'});
+                const url = URL.createObjectURL(blob);
+                
+                // Create temporary link and trigger download
+                const link = document.createElement('a');
+                link.href = url;
+                link.download = 'reasoning_diagram_code.txt';
+                document.body.appendChild(link);
+                link.click();
+                
+                // Cleanup
+                document.body.removeChild(link);
+                URL.revokeObjectURL(url);
+            } catch (error) {
+                console.error('Error downloading Mermaid code:', error);
+                alert('Failed to download Mermaid code: ' + error.message);
+            }
+        }
+
         function validateInputs() {
             const apiKey = document.getElementById('api-key').value.trim();
             const question = document.getElementById('question').value.trim();
@@ -689,11 +903,13 @@
             resetZoom();
             const processButton = document.getElementById('process-btn');
             const metaButton = document.getElementById('meta-btn');
+            const longButton = document.getElementById('long-btn');
             const rawOutput = document.getElementById('raw-output');
             
             processButton.disabled = true;
             metaButton.disabled = true;
-            processButton.textContent = 'Processing...';
+            longButton.disabled = true;
+            updateButtonTextPreserveTooltip(processButton, 'Processing...');
             rawOutput.textContent = 'Loading...';
             rawOutput.style.color = '#1f2937';
             
@@ -727,7 +943,18 @@
                     rawOutput.textContent = result.raw_output;
                     rawOutput.style.color = '#1f2937';
                     
+                    // Save the raw output for potential long reasoning
+                    currentRawOutput = result.raw_output;
+                    
                     if (result.visualization) {
+                        // Store the raw visualization code before rendering
+                        if (result.visualization.includes('class="mermaid"')) {
+                            const codeMatch = result.visualization.match(/<div class="mermaid">([\s\S]*?)<\/div>/);
+                            if (codeMatch && codeMatch[1]) {
+                                lastMermaidCode = codeMatch[1].trim();
+                            }
+                        }
+                        
                         const container = document.getElementById('mermaid-diagram');
                         container.innerHTML = result.visualization;
                         document.getElementById('mermaid-container').classList.add('has-visualization');
@@ -745,13 +972,302 @@
                 
                 processButton.disabled = false;
                 metaButton.disabled = false;
-                processButton.textContent = 'Start Reasoning';
+                longButton.disabled = false;
+                updateButtonTextPreserveTooltip(processButton, 'Start Reasoning');
                 if (isMetaReasoning) {
-                    metaButton.textContent = 'Meta Reasoning';
+                    updateButtonTextPreserveTooltip(metaButton, 'Meta Reasoning');
+                }
+            }
+        }
+
+        // Long Reasoning function
+        async function longReasoning() {
+            if (!validateInputs()) {
+                return;
+            }
+
+            // Disable all buttons during processing
+            const processButton = document.getElementById('process-btn');
+            const metaButton = document.getElementById('meta-btn');
+            const longButton = document.getElementById('long-btn');
+            const rawOutput = document.getElementById('raw-output');
+    
+            processButton.disabled = true;
+            metaButton.disabled = true;
+            longButton.disabled = true;
+            updateButtonTextPreserveTooltip(longButton, 'Processing...');
+            rawOutput.textContent = 'Switching to Plain Text mode and generating initial response...';
+            rawOutput.style.color = '#1f2937';
+    
+            // Lock visualization
+            lockVisualization();
+    
+            try {
+                // 1. Switch to Plain Text reasoning method
+                const methodSelect = document.getElementById('reasoning-method');
+                const originalMethod = methodSelect.value; // Save original method
+                methodSelect.value = 'plain';
+        
+                // Get and update the prompt format for Plain Text
+                const methodResponse = await fetch('/method-config/plain');
+                const methodConfig = await methodResponse.json();
+                if (methodConfig) {
+                    updatePromptFormat(methodConfig.prompt_format);
                 }
+        
+                // 2. Process with Plain Text to get initial output
+                const data = {
+                    provider: document.getElementById('api-provider').value,
+                    api_key: document.getElementById('api-key').value,
+                    model: document.getElementById('model').value,
+                    max_tokens: parseInt(document.getElementById('max-tokens').value),
+                    question: document.getElementById('question').value,
+                    prompt_format: document.getElementById('prompt-format').value,
+                    reasoning_method: 'plain',
+                    chars_per_line: parseInt(document.getElementById('chars-per-line').value),
+                    max_lines: parseInt(document.getElementById('max-lines').value)
+                };
+        
+                rawOutput.textContent = 'Generating initial output...';
+        
+                // Call the process endpoint
+                const response = await fetch('/process', {
+                    method: 'POST',
+                    headers: {
+                        'Content-Type': 'application/json'
+                    },
+                    body: JSON.stringify(data)
+                });
+        
+                const result = await response.json();
+        
+                if (result.success) {
+                    // Save the raw output for long reasoning
+                    currentRawOutput = result.raw_output;
+            
+                    // Display the plain text output in the Raw Output area
+                    rawOutput.textContent = result.raw_output;
+                    rawOutput.style.color = '#1f2937';
+            
+                    // Reset Zoom and visualization at the beginning - force zoom to 100%
+                    currentZoom = 1; // Force zoom level to 100%
+                    applyZoom(); // Apply the zoom reset
+                    const container = document.getElementById('mermaid-diagram');
+                    container.innerHTML = '';
+                    document.getElementById('zoom-level').textContent = '100%';
+            
+                    // 3. Now proceed with the long reasoning process using Anthropic
+                    const question = document.getElementById('question').value;
+            
+                    // Prepare the long reasoning prompt
+                    const longReasoningPrompt = `Please transform the following original reasoning process into a structured flowchart:
+
+'''
+${question}
+${currentRawOutput}
+'''
+
+Requirements:
+0. Create a visually balanced and aesthetically pleasing diagram
+
+1. Structure each node as: [Step Name]: [Concise Summary of Reasoning]
+   - Keep node text simple and enclose in double quotes inside brackets like: A["Step Name: Reasoning"]
+   - Example: A["Problem Framing: Define the question"]
+
+2. Support multiple reasoning structures: 
+   - Linear reasoning: Sequential steps leading directly to a conclusion
+   - Tree reasoning: Branching paths exploring multiple possibilities
+   - Reflective reasoning: Loops that revisit and refine earlier conclusions
+   - Not limited to the structures above
+
+3. Flowchart syntax guidance: 
+   - Start with: flowchart TD
+   - Node definition: letter["text content"]
+   - Connection definition: A --> B
+   - Conditional branch: A -->|condition| B
+
+4. When analyzing the reasoning: 
+   - Preserve the logical structure of the original reasoning
+   - Identify implicit steps that connect explicit reasoning
+   - Highlight areas where reflection led to revised conclusions
+   - Maintain proper causal relationships between nodes
+   - When showing alternative methods or different solution attempts, use a tree-like structure with branches to clearly visualize parallel thinking paths
+
+5. Include these specific style classes in your Mermaid flowchart:
+   - classDef default fill:#f9f9f9,stroke:#333,stroke-width:2px;
+   - classDef question fill:#e3f2fd,stroke:#1976d2,stroke-width:2px;
+   - classDef answer fill:#d4edda,stroke:#28a745,stroke-width:2px;
+   - classDef refinement fill:#fff3cd,stroke:#ffc107,stroke-width:2px;
+   - classDef aha fill:#ffcccb,stroke:#d9534f,stroke-width:2px;
+   
+6. Apply styling to specific node types:
+   - The first node (starting point) should use class "question"
+   - The final conclusion/answer node and any significant intermediate results should use class "answer"
+   - Any sub-questions or question refinements should also use class "question"
+   - Nodes that involve refinement, reflection, revision, or error correction should use class "refinement". Ensure each refinement node has both incoming arrows from preceding steps and outgoing arrows to subsequent steps, maintaining the full flow of the reasoning process while also creating proper feedback loops.
+   - Nodes that represent key insights, breakthrough moments, or "aha moments" should use class "aha"
+
+7. Important:
+   - When applying class styles to nodes, do NOT use the ":::" syntax. Instead, define classes separately with classDef statements and then apply them using "class NodeName ClassName" syntax. For example, use "class A question" rather than "A:::question".
+   - Ensure all nodes are connected in a single unified flowchart. There should be no disconnected components or floating nodes. Every node must have at least one connection to another node in the diagram.
+   - Use special node styles (refinement and aha) sparingly and only when truly justified by the content. A node should only be classified as "refinement" if it explicitly revises a previous conclusion, and as "aha" only for genuine breakthrough moments that fundamentally change the direction of reasoning.
+   - Try to capture all significant steps from the original text. Do not oversimplify or omit important reasoning steps even if the input is lengthy.
+   - Do not use Python-style comments in the Mermaid code.
+
+Please visualize the thinking steps from the original reasoning process as a proper Mermaid flowchart.`;
+
+                    // Use Anthropic for the flowchart generation
+                    // Get the appropriate API key for Anthropic
+                    let anthropicApiKey = userApiKeys["anthropic"];
+                    if (!anthropicApiKey) {
+                        // If no user-entered key exists for Anthropic, try to get the default
+                        try {
+                            const keyResponse = await fetch('/provider-api-key/anthropic');
+                            const keyResult = await keyResponse.json();
+                            if (keyResult.success) {
+                                anthropicApiKey = keyResult.api_key;
+                            } else {
+                                throw new Error('No API key available for Anthropic');
+                            }
+                        } catch (error) {
+                            console.error('Error fetching Anthropic API key:', error);
+                            alert('Unable to get Anthropic API key for flowchart generation');
+                            return;
+                        }
+                    }
+                    
+                    const longData = {
+                        provider: "anthropic",
+                        api_key: anthropicApiKey,
+                        model: "claude-3-7-sonnet-20250219", // Use Claude for visualization
+                        max_tokens: parseInt(document.getElementById('max-tokens').value),
+                        question: longReasoningPrompt,
+                        prompt_format: "",
+                        reasoning_method: "cot",
+                        chars_per_line: parseInt(document.getElementById('chars-per-line').value),
+                        max_lines: parseInt(document.getElementById('max-lines').value)
+                    };
+            
+                    // Keep showing the plain text result while generating the flowchart
+                    // Don't update rawOutput.textContent here
+            
+                    const longResponse = await fetch('/process', {
+                        method: 'POST',
+                        headers: {
+                            'Content-Type': 'application/json'
+                        },
+                        body: JSON.stringify(longData)
+                    });
+            
+                    const longResult = await longResponse.json();
+            
+                    if (longResult.success) {
+                        // Keep displaying the original plain text output
+                        // We don't overwrite rawOutput.textContent here to preserve the plain text output
+                
+                        // Extract Mermaid diagram code from the response
+                        const mermaidCode = extractMermaidCode(longResult.raw_output);
+                
+                        if (mermaidCode) {
+                            // Store the code before rendering
+                            lastMermaidCode = mermaidCode;
+                            
+                            // Render the Mermaid diagram
+                            const container = document.getElementById('mermaid-diagram');
+                            container.innerHTML = '<div class="mermaid">' + mermaidCode + '</div>';
+                    
+                            // Initialize Mermaid
+                            mermaid.initialize({ 
+                                startOnLoad: true,
+                                theme: 'default',
+                                securityLevel: 'loose',
+                                flowchart: {
+                                    curve: 'basis',
+                                    padding: 15
+                                }
+                            });
+                    
+                            // Force rendering
+                            mermaid.init(undefined, '.mermaid');
+                    
+                            // Add visualization class
+                            document.getElementById('mermaid-container').classList.add('has-visualization');
+                    
+                            // Reset zoom
+                            resetZoom();
+                        } else if (longResult.visualization) {
+                            // Fall back to any visualization
+                            const container = document.getElementById('mermaid-diagram');
+                            container.innerHTML = longResult.visualization;
+                            document.getElementById('mermaid-container').classList.add('has-visualization');
+                            resetZoom();
+                            mermaid.init();
+                        }
+                    } else {
+                        // If visualization fails, show error without overwriting raw output
+                        const errorMsg = longResult.error || 'Unknown error during flowchart generation';
+                        console.error(errorMsg);
+                        alert('Visualization error: ' + errorMsg);
+                    }
+                } else {
+                    // Use standard error function since we don't have valid output to preserve
+                    showError(result.error || 'Unknown error during initial processing');
+                }
+        
+                // Don't restore the original method - keep it on Plain Text
+                // This way the user stays in Plain Text mode after the operation
+        
+                // Optional: Update the prompt format for Plain Text if needed
+                const plainTextResponse = await fetch('/method-config/plain');
+                const plainTextConfig = await plainTextResponse.json();
+                if (plainTextConfig) {
+                    updatePromptFormat(plainTextConfig.prompt_format);
+                }
+        
+            } catch (error) {
+                console.error('Long reasoning error:', error);
+                // Only use showError if we don't already have plain text output to preserve
+                if (!currentRawOutput) {
+                    showError('Failed to process long reasoning request: ' + error.message);
+                } else {
+                    alert('Error in visualization: ' + error.message);
+                }
+            } finally {
+                // Unlock visualization
+                unlockVisualization();
+        
+                // Re-enable all buttons
+                processButton.disabled = false;
+                metaButton.disabled = false;
+                longButton.disabled = false;
+                updateButtonTextPreserveTooltip(longButton, 'Long Reasoning');
             }
         }
 
+        // Helper function to extract Mermaid code from response
+        function extractMermaidCode(text) {
+            // Look for code blocks with Mermaid content
+            const mermaidRegex = /```(?:mermaid)?\s*(flowchart[\s\S]*?)```/i;
+            const match = text.match(mermaidRegex);
+            
+            if (match && match[1]) {
+                return match[1].trim();
+            }
+            
+            // If no code block, look for just the flowchart content
+            const flowchartRegex = /(flowchart[\s\S]*?)(?:\n\n|$)/i;
+            const flowchartMatch = text.match(flowchartRegex);
+            
+            if (flowchartMatch && flowchartMatch[1]) {
+                return flowchartMatch[1].trim();
+            }
+            
+            return null;
+        }
+        
+        // Global variable to store the last mermaid visualization code
+        let lastMermaidCode = "";
+
         // Meta Reasoning function
         async function metaReasoning() {
             const metaButton = document.getElementById('meta-btn');
@@ -759,7 +1275,7 @@
             
             try {
                 metaButton.disabled = true;
-                metaButton.textContent = 'Selecting Method...';
+                updateButtonTextPreserveTooltip(metaButton, 'Selecting Method...');
                 rawOutput.textContent = 'Analyzing question to select best method...';
                 
                 // Get current parameters
@@ -802,22 +1318,34 @@
                         console.log(`Selected reasoning method: ${methodConfig.name}`);
                         
                         // Update button to show method was selected
-                        metaButton.textContent = 'Method Selected';
-                        // Process the question with the selected method
-                        await processQuestion(true);
+                        updateButtonTextPreserveTooltip(metaButton, 'Method Selected');
+                        
+                        try {
+                            // Process the question with the selected method
+                            await processQuestion(true);
+                        } catch (processError) {
+                            console.error('Error processing with selected method:', processError);
+                            showError('Failed to process with selected method: ' + processError.message);
+                            
+                            // Make sure to re-enable the button on error
+                            metaButton.disabled = false;
+                            updateButtonTextPreserveTooltip(metaButton, 'Meta Reasoning');
+                        }
                     } else {
                         showError('Failed to load method configuration');
-                        metaButton.textContent = 'Meta Reasoning';
+                        metaButton.disabled = false;
+                        updateButtonTextPreserveTooltip(metaButton, 'Meta Reasoning');
                     }
                 } else {
                     showError(result.error || 'Failed to select method');
-                    metaButton.textContent = 'Meta Reasoning';
+                    metaButton.disabled = false;
+                    updateButtonTextPreserveTooltip(metaButton, 'Meta Reasoning');
                 }
             } catch (error) {
                 console.error('Meta reasoning error:', error);
                 showError('Failed to execute meta reasoning');
                 metaButton.disabled = false;
-                metaButton.textContent = 'Meta Reasoning';
+                updateButtonTextPreserveTooltip(metaButton, 'Meta Reasoning');
             }
         }
 
@@ -838,6 +1366,87 @@
 
         // Load configuration when page loads
         document.addEventListener('DOMContentLoaded', loadConfig);
+        
+        /**
+         * Process Mermaid node text with character and line limits
+         * @param {string} mermaidCode - Original Mermaid code
+         * @param {number} maxCharsPerLine - Maximum characters per line
+         * @param {number} maxLines - Maximum number of lines per node
+         * @param {string} truncationSuffix - Suffix for truncated text
+         * @returns {string} Processed Mermaid code
+         */
+        function processMermaidNodeText(mermaidCode, maxCharsPerLine, maxLines, truncationSuffix = "...") {
+            // Node definition regex: matches patterns like A["text content"] with capture groups
+            const nodeRegex = /([A-Za-z0-9_]+)\s*\[\s*"([^"]+)"\s*\]/g;
+            
+            // Process each node's text content
+            return mermaidCode.replace(nodeRegex, (match, nodeId, text) => {
+                // Clean text by replacing existing <br> tags and newlines with spaces
+                const cleanText = text.replace(/<br>/g, ' ').replace(/\n/g, ' ');
+                
+                // Text wrapping function similar to Python's textwrap.wrap
+                function wrapText(text, width) {
+                    const words = text.split(' ');
+                    const lines = [];
+                    let currentLine = '';
+                    
+                    for (const word of words) {
+                        if (currentLine.length + word.length + (currentLine ? 1 : 0) <= width) {
+                            currentLine += (currentLine ? ' ' : '') + word;
+                        } else {
+                            lines.push(currentLine);
+                            currentLine = word;
+                        }
+                    }
+                    
+                    if (currentLine) {
+                        lines.push(currentLine);
+                    }
+                    
+                    return lines;
+                }
+                
+                // Wrap text according to max chars per line
+                let wrappedLines = wrapText(cleanText, maxCharsPerLine);
+                
+                // Limit number of lines and add truncation indicator if needed
+                if (wrappedLines.length > maxLines) {
+                    wrappedLines = wrappedLines.slice(0, maxLines);
+                    const lastLine = wrappedLines[wrappedLines.length - 1];
+                    if (lastLine.length > maxCharsPerLine - truncationSuffix.length) {
+                        wrappedLines[wrappedLines.length - 1] = 
+                            lastLine.substring(0, maxCharsPerLine - truncationSuffix.length) + truncationSuffix;
+                    } else {
+                        wrappedLines[wrappedLines.length - 1] = lastLine + truncationSuffix;
+                    }
+                }
+                
+                // Join lines with <br> for Mermaid formatting
+                const processedText = wrappedLines.join('<br>');
+                
+                // Return the node with processed text
+                return `${nodeId}["${processedText}"]`;
+            });
+        }
+
+        // Override extractMermaidCode to apply text processing for Long Reasoning
+        const originalExtractMermaidCode = extractMermaidCode;
+        
+        extractMermaidCode = function(text) {
+            // Call the original function to extract the code
+            const mermaidCode = originalExtractMermaidCode(text);
+            
+            if (mermaidCode) {
+                // Get character and line limits from UI
+                const maxCharsPerLine = parseInt(document.getElementById('chars-per-line').value) || 40;
+                const maxLines = parseInt(document.getElementById('max-lines').value) || 4;
+                
+                // Apply text processing to enforce character and line limits
+                return processMermaidNodeText(mermaidCode, maxCharsPerLine, maxLines);
+            }
+            
+            return mermaidCode;
+        };
     </script>
 </body>
 </html>

templates/index_cn.html

@@ -135,6 +135,7 @@
             justify-content: center;
             gap: 0;
             white-space: nowrap;
+            margin-top: 30px; /* Added space to move links lower */
         }
 
         .links a {
@@ -149,6 +150,11 @@
             opacity: 1;
             text-decoration: underline;
         }
+        
+        .link-separator {
+            color: white;
+            opacity: 0.9;
+        }
 
         .container {
             display: flex;
@@ -296,6 +302,13 @@
             background-color: #e5e7eb;
         }
 
+        .zoom-button:disabled {
+            background-color: #9ca3af;
+            cursor: not-allowed;
+            color: white;
+            border-color: #9ca3af;
+        }
+
         .zoom-level {
             font-size: 14px;
             color: #374151;
@@ -324,6 +337,80 @@
             background-color: #f8f9fa;
         }
 
+        .tooltip {
+            position: relative;
+            display: inline-block;
+        }
+
+        .tooltip .tooltiptext {
+            visibility: hidden;
+            width: 220px;
+            background-color: #555;
+            color: #fff;
+            text-align: center;
+            border-radius: 6px;
+            padding: 5px;
+            position: absolute;
+            z-index: 1;
+            top: 125%;
+            left: 50%;
+            margin-left: -110px;
+            opacity: 0;
+            transition: opacity 0.1s;
+        }
+
+        .tooltip .tooltiptext::after {
+            content: "";
+            position: absolute;
+            bottom: 100%;
+            left: 50%;
+            margin-left: -5px;
+            border-width: 5px;
+            border-style: solid;
+            border-color: transparent transparent #555 transparent;
+        }
+
+        .tooltip:hover .tooltiptext {
+            visibility: visible;
+            opacity: 1;
+        }
+        
+        /* New tooltip-top class for tooltips that appear above elements */
+        .tooltip-top .tooltiptext {
+            bottom: 125%; /* Position above instead of below */
+            top: auto; /* Override the default top value */
+        }
+
+        .tooltip-top .tooltiptext::after {
+            top: 100%; /* Arrow at the bottom rather than top */
+            bottom: auto; /* Override the default bottom value */
+            border-color: #555 transparent transparent transparent; /* Arrow pointing down */
+        }
+
+        .tooltip-wrap .tooltiptext {
+            width: 440px;
+            margin-left: -110px;
+            white-space: normal;
+            font-size: 14px;
+        }
+
+        .lang-tooltip .tooltiptext {
+            width: 440px;
+            margin-left: 0;
+            transform: translateX(-50%);
+            font-size: 14px;
+            white-space: normal;
+            font-weight: normal;
+        }
+
+        .english-tooltip .tooltiptext {
+            left: 40%;
+        }
+    
+        .chinese-tooltip .tooltiptext {
+            left: 50%;
+        }
+
         .mermaid {
             padding: 0;
             border-radius: 4px;
@@ -337,7 +424,7 @@
 <body>
     <div class="banner">
         <div class="banner-content">
-            <h1>ReasonGraph: Visualisation of Reasoning Paths</h1>
+            <h1>ReasonGraph</h1>
             <div class="search-area">
                 <div class="search-input-container">
                     <textarea id="question" class="search-input" placeholder="在此输入您的问题..." rows="1"></textarea>
@@ -347,15 +434,24 @@
                     <select class="param-input" id="reasoning-method">
                         <!-- Populated dynamically -->
                     </select>
-                    <button onclick="metaReasoning()" id="meta-btn">元推理</button>
-                    <button onclick="processQuestion()" id="process-btn">开始推理</button>
+                    <button onclick="metaReasoning()" id="meta-btn" class="tooltip">元推理
+                        <span class="tooltiptext">使用模型自行选择的推理方法</span>
+                    </button>
+                    <button onclick="processQuestion()" id="process-btn" class="tooltip">开始推理
+                        <span class="tooltiptext">使用选定方法和模型进行推理</span>
+                    </button>
+                    <button onclick="longReasoning()" id="long-btn" class="tooltip">长推理
+                        <span class="tooltiptext">仅由deepseek-reasoner和qwq-plus模型支持；请输入Claude的API Key以进行长推理可视化</span>
+                    </button>
                 </div>
             </div>
             <div class="links">
-                <a href="https://github.com/ZongqianLi/ReasonGraph"><u>Github</u> |&nbsp</a><a href="https://arxiv.org/abs/2503.03979"><u>论文</u> |&nbsp</a><a href="mailto:[email protected]"><u>邮箱</u></a>
-            </div>
-            <div class="links">
-                <a href="./index.html"><u>English</u> |&nbsp</a><a href="./index_cn.html"><u>中文</u></a>
+                <a href="https://github.com/ZongqianLi/ReasonGraph"><u>Github</u> |&nbsp</a><a href="https://arxiv.org/abs/2503.03979"><u>论文</u> |&nbsp</a><a href="mailto:[email protected]"><u>Email</u></a>
+                <span class="link-separator"> |&nbsp|&nbsp</span><a href="./index.html" class="tooltip tooltip-top lang-tooltip english-tooltip"><u>English</u> /&nbsp
+                    <span class="tooltiptext">Switch to English version; To get responses in other languages, ask in that language and say "please answer in this language"</span>
+                </a><a href="./index_cn.html" class="tooltip tooltip-top lang-tooltip chinese-tooltip"><u>中文</u>
+                    <span class="tooltiptext">切换到中文版；如果想使模型输出中文，只需用中文提问，同时输入"请使用中文回答"</span>
+                </a>
             </div>
         </div>
     </div>
@@ -386,7 +482,7 @@
             <div class="param-group">
                 <div class="param-label">API Key</div>
                 <input type="password" class="param-input" id="api-key">
-                <div class="error-message" id="api-key-error">请输入有效的API密钥</div>
+                <div class="error-message" id="api-key-error">请输入有效的API Key</div>
             </div>
 
             <div class="param-group">
@@ -395,7 +491,7 @@
             </div>
             
             <div class="output-section">
-                <h3>模型原始输出</h3>
+                <h3>原始模型输出</h3>
                 <div class="output-wrapper">
                     <pre id="raw-output">输出将显示在这里...</pre>
                 </div>
@@ -422,7 +518,8 @@
                     <div class="zoom-level" id="zoom-level">100%</div>
                     <button class="zoom-button" onclick="adjustZoom(0.1)">+</button>
                     <button class="zoom-button" onclick="resetZoom()">重置</button>
-                    <button class="zoom-button" onclick="downloadDiagram()">下载</button>
+                    <button class="zoom-button" onclick="downloadDiagram()">下载流程图</button>
+                    <button class="zoom-button" onclick="downloadMermaidCode()">下载代码</button>
                 </div>
                 <div class="visualization-wrapper">
                     <div id="mermaid-container">
@@ -456,20 +553,42 @@
         // Initialize zoom lock flag
         window.isZoomLocked = false;
 
+        // Save raw output for long reasoning
+        let currentRawOutput = "";
+        
+        // Store user-entered API keys
+        let userApiKeys = {};
+
+        function updateButtonTextPreserveTooltip(button, text) {
+            for (let i = 0; i < button.childNodes.length; i++) {
+                if (button.childNodes[i].nodeType === Node.TEXT_NODE) {
+                    button.childNodes[i].nodeValue = text;
+                    return;
+                }
+            }
+            
+            button.prepend(document.createTextNode(text));
+        }
+
         // Handle API Provider change
         async function handleProviderChange(provider) {
             try {
                 // Update model list
                 updateModelList();
                 
-                // Get and update API key
-                const response = await fetch(`/provider-api-key/${provider}`);
-                const result = await response.json();
-                
-                if (result.success) {
-                    document.getElementById('api-key').value = result.api_key;
+                // Check if we have a user-entered API key for this provider
+                if (userApiKeys[provider]) {
+                    document.getElementById('api-key').value = userApiKeys[provider];
                 } else {
-                    console.error('Failed to get API key:', result.error);
+                    // Get the default API key only if user hasn't entered one
+                    const response = await fetch(`/provider-api-key/${provider}`);
+                    const result = await response.json();
+                    
+                    if (result.success) {
+                        document.getElementById('api-key').value = result.api_key;
+                    } else {
+                        console.error('Failed to get API key:', result.error);
+                    }
                 }
             } catch (error) {
                 console.error('Error updating provider settings:', error);
@@ -513,9 +632,20 @@
                 const methodConfig = currentConfig.methods[defaultMethod];
                 updatePromptFormat(methodConfig.prompt_format);
                 updateExampleQuestion(methodConfig.example_question);
+                
+                // Add event listener for API key changes
+                document.getElementById('api-key').addEventListener('change', function() {
+                    const provider = document.getElementById('api-provider').value;
+                    const apiKey = this.value.trim();
+                    
+                    if (apiKey) {
+                        // Save in local memory
+                        userApiKeys[provider] = apiKey;
+                    }
+                });
             } catch (error) {
                 console.error('Failed to load configuration:', error);
-                showError('Failed to load configuration. Please refresh the page.');
+                showError('加载配置失败。请刷新页面。');
             }
         }
 
@@ -547,7 +677,7 @@
                 updateExampleQuestion(methodConfig.example_question);
             } catch (error) {
                 console.error('Failed to load method configuration:', error);
-                showError('Failed to update method configuration.');
+                showError('更新方法配置失败。');
             }
         });
 
@@ -607,7 +737,7 @@
 
             const diagramContainer = document.getElementById('mermaid-diagram');
             if (!diagramContainer || !diagramContainer.querySelector('svg')) {
-                alert('没有可供下载的图表');
+                alert('没有可下载的图表');
                 return;
             }
 
@@ -648,6 +778,90 @@
             }
         }
 
+        // Function to download the Mermaid code
+        async function downloadMermaidCode() {
+            // Do nothing if zooming is locked
+            if (window.isZoomLocked) return;
+
+            try {
+                // First, check if we have stored code from the last visualization
+                let mermaidCode = lastMermaidCode;
+                
+                // If no stored code, try to extract it
+                if (!mermaidCode) {
+                    const diagramContainer = document.getElementById('mermaid-diagram');
+                    if (!diagramContainer) {
+                        alert('没有可下载代码的图表');
+                        return;
+                    }
+                    
+                    // Try to find the mermaid element with the code
+                    const mermaidElement = diagramContainer.querySelector('.mermaid');
+                    
+                    if (mermaidElement) {
+                        // Get the text content which contains the Mermaid code
+                        mermaidCode = mermaidElement.getAttribute('data-processed') === 'true' 
+                            ? mermaidElement.dataset.graph 
+                            : mermaidElement.textContent;
+                    }
+                    
+                    // Fallback: If we can't get the code directly, try to extract from raw output
+                    if (!mermaidCode && currentRawOutput) {
+                        mermaidCode = extractMermaidCode(currentRawOutput);
+                    }
+                    
+                    if (!mermaidCode) {
+                        // Another fallback: try to extract from svg data
+                        const svg = diagramContainer.querySelector('svg');
+                        if (svg) {
+                            const svgData = svg.outerHTML;
+                            // Look for mermaid data embedded in the SVG
+                            const match = svgData.match(/data-mermaid="(.*?)"/);
+                            if (match && match[1]) {
+                                mermaidCode = decodeURIComponent(match[1]);
+                            }
+                        }
+                    }
+                }
+                
+                if (!mermaidCode) {
+                    // If we still don't have the code, try to generate a basic flowchart from the SVG
+                    const diagramContainer = document.getElementById('mermaid-diagram');
+                    const svg = diagramContainer && diagramContainer.querySelector('svg');
+                    
+                    if (svg) {
+                        // Try to reconstruct Mermaid code from SVG elements
+                        mermaidCode = "flowchart TD\n";
+                        mermaidCode += "    A[\"This is an auto-generated approximation of the flowchart.\"]\n";
+                        mermaidCode += "    B[\"The original Mermaid code could not be extracted.\"]\n";
+                        mermaidCode += "    A --> B\n";
+                        mermaidCode += "    classDef default fill:#f9f9f9,stroke:#333,stroke-width:2px;";
+                    } else {
+                        alert('Unable to extract or generate Mermaid code');
+                        return;
+                    }
+                }
+
+                // Create blob and download link
+                const blob = new Blob([mermaidCode], {type: 'text/plain'});
+                const url = URL.createObjectURL(blob);
+                
+                // Create temporary link and trigger download
+                const link = document.createElement('a');
+                link.href = url;
+                link.download = 'reasoning_diagram_code.txt';
+                document.body.appendChild(link);
+                link.click();
+                
+                // Cleanup
+                document.body.removeChild(link);
+                URL.revokeObjectURL(url);
+            } catch (error) {
+                console.error('Error downloading Mermaid code:', error);
+                alert('下载Mermaid代码失败: ' + error.message);
+            }
+        }
+
         function validateInputs() {
             const apiKey = document.getElementById('api-key').value.trim();
             const question = document.getElementById('question').value.trim();
@@ -689,11 +903,13 @@
             resetZoom();
             const processButton = document.getElementById('process-btn');
             const metaButton = document.getElementById('meta-btn');
+            const longButton = document.getElementById('long-btn');
             const rawOutput = document.getElementById('raw-output');
             
             processButton.disabled = true;
             metaButton.disabled = true;
-            processButton.textContent = '处理中...';
+            longButton.disabled = true;
+            updateButtonTextPreserveTooltip(processButton, '处理中...');
             rawOutput.textContent = '加载中...';
             rawOutput.style.color = '#1f2937';
             
@@ -727,7 +943,18 @@
                     rawOutput.textContent = result.raw_output;
                     rawOutput.style.color = '#1f2937';
                     
+                    // Save the raw output for potential long reasoning
+                    currentRawOutput = result.raw_output;
+                    
                     if (result.visualization) {
+                        // Store the raw visualization code before rendering
+                        if (result.visualization.includes('class="mermaid"')) {
+                            const codeMatch = result.visualization.match(/<div class="mermaid">([\s\S]*?)<\/div>/);
+                            if (codeMatch && codeMatch[1]) {
+                                lastMermaidCode = codeMatch[1].trim();
+                            }
+                        }
+                        
                         const container = document.getElementById('mermaid-diagram');
                         container.innerHTML = result.visualization;
                         document.getElementById('mermaid-container').classList.add('has-visualization');
@@ -745,13 +972,302 @@
                 
                 processButton.disabled = false;
                 metaButton.disabled = false;
-                processButton.textContent = '开始推理';
+                longButton.disabled = false;
+                updateButtonTextPreserveTooltip(processButton, '开始推理');
                 if (isMetaReasoning) {
-                    metaButton.textContent = '元推理';
+                    updateButtonTextPreserveTooltip(metaButton, '元推理');
+                }
+            }
+        }
+
+        // Long Reasoning function
+        async function longReasoning() {
+            if (!validateInputs()) {
+                return;
+            }
+
+            // Disable all buttons during processing
+            const processButton = document.getElementById('process-btn');
+            const metaButton = document.getElementById('meta-btn');
+            const longButton = document.getElementById('long-btn');
+            const rawOutput = document.getElementById('raw-output');
+    
+            processButton.disabled = true;
+            metaButton.disabled = true;
+            longButton.disabled = true;
+            updateButtonTextPreserveTooltip(longButton, '处理中...');
+            rawOutput.textContent = '切换到纯文本模式并生成初始输出...';
+            rawOutput.style.color = '#1f2937';
+    
+            // Lock visualization
+            lockVisualization();
+    
+            try {
+                // 1. Switch to Plain Text reasoning method
+                const methodSelect = document.getElementById('reasoning-method');
+                const originalMethod = methodSelect.value; // Save original method
+                methodSelect.value = 'plain';
+        
+                // Get and update the prompt format for Plain Text
+                const methodResponse = await fetch('/method-config/plain');
+                const methodConfig = await methodResponse.json();
+                if (methodConfig) {
+                    updatePromptFormat(methodConfig.prompt_format);
                 }
+        
+                // 2. Process with Plain Text to get initial output
+                const data = {
+                    provider: document.getElementById('api-provider').value,
+                    api_key: document.getElementById('api-key').value,
+                    model: document.getElementById('model').value,
+                    max_tokens: parseInt(document.getElementById('max-tokens').value),
+                    question: document.getElementById('question').value,
+                    prompt_format: document.getElementById('prompt-format').value,
+                    reasoning_method: 'plain',
+                    chars_per_line: parseInt(document.getElementById('chars-per-line').value),
+                    max_lines: parseInt(document.getElementById('max-lines').value)
+                };
+        
+                rawOutput.textContent = '生成初始输出...';
+        
+                // Call the process endpoint
+                const response = await fetch('/process', {
+                    method: 'POST',
+                    headers: {
+                        'Content-Type': 'application/json'
+                    },
+                    body: JSON.stringify(data)
+                });
+        
+                const result = await response.json();
+        
+                if (result.success) {
+                    // Save the raw output for long reasoning
+                    currentRawOutput = result.raw_output;
+            
+                    // Display the plain text output in the Raw Output area
+                    rawOutput.textContent = result.raw_output;
+                    rawOutput.style.color = '#1f2937';
+            
+                    // Reset Zoom and visualization at the beginning - force zoom to 100%
+                    currentZoom = 1; // Force zoom level to 100%
+                    applyZoom(); // Apply the zoom reset
+                    const container = document.getElementById('mermaid-diagram');
+                    container.innerHTML = '';
+                    document.getElementById('zoom-level').textContent = '100%';
+            
+                    // 3. Now proceed with the long reasoning process using Anthropic
+                    const question = document.getElementById('question').value;
+            
+                    // Prepare the long reasoning prompt
+                    const longReasoningPrompt = `Please transform the following original reasoning process into a structured flowchart:
+
+'''
+${question}
+${currentRawOutput}
+'''
+
+Requirements:
+0. Create a visually balanced and aesthetically pleasing diagram
+
+1. Structure each node as: [Step Name]: [Concise Summary of Reasoning]
+   - Keep node text simple and enclose in double quotes inside brackets like: A["Step Name: Reasoning"]
+   - Example: A["Problem Framing: Define the question"]
+
+2. Support multiple reasoning structures: 
+   - Linear reasoning: Sequential steps leading directly to a conclusion
+   - Tree reasoning: Branching paths exploring multiple possibilities
+   - Reflective reasoning: Loops that revisit and refine earlier conclusions
+   - Not limited to the structures above
+
+3. Flowchart syntax guidance: 
+   - Start with: flowchart TD
+   - Node definition: letter["text content"]
+   - Connection definition: A --> B
+   - Conditional branch: A -->|condition| B
+
+4. When analyzing the reasoning: 
+   - Preserve the logical structure of the original reasoning
+   - Identify implicit steps that connect explicit reasoning
+   - Highlight areas where reflection led to revised conclusions
+   - Maintain proper causal relationships between nodes
+   - When showing alternative methods or different solution attempts, use a tree-like structure with branches to clearly visualize parallel thinking paths
+
+5. Include these specific style classes in your Mermaid flowchart:
+   - classDef default fill:#f9f9f9,stroke:#333,stroke-width:2px;
+   - classDef question fill:#e3f2fd,stroke:#1976d2,stroke-width:2px;
+   - classDef answer fill:#d4edda,stroke:#28a745,stroke-width:2px;
+   - classDef refinement fill:#fff3cd,stroke:#ffc107,stroke-width:2px;
+   - classDef aha fill:#ffcccb,stroke:#d9534f,stroke-width:2px;
+   
+6. Apply styling to specific node types:
+   - The first node (starting point) should use class "question"
+   - The final conclusion/answer node and any significant intermediate results should use class "answer"
+   - Any sub-questions or question refinements should also use class "question"
+   - Nodes that involve refinement, reflection, revision, or error correction should use class "refinement". Ensure each refinement node has both incoming arrows from preceding steps and outgoing arrows to subsequent steps, maintaining the full flow of the reasoning process while also creating proper feedback loops.
+   - Nodes that represent key insights, breakthrough moments, or "aha moments" should use class "aha"
+
+7. Important:
+   - When applying class styles to nodes, do NOT use the ":::" syntax. Instead, define classes separately with classDef statements and then apply them using "class NodeName ClassName" syntax. For example, use "class A question" rather than "A:::question".
+   - Ensure all nodes are connected in a single unified flowchart. There should be no disconnected components or floating nodes. Every node must have at least one connection to another node in the diagram.
+   - Use special node styles (refinement and aha) sparingly and only when truly justified by the content. A node should only be classified as "refinement" if it explicitly revises a previous conclusion, and as "aha" only for genuine breakthrough moments that fundamentally change the direction of reasoning.
+   - Try to capture all significant steps from the original text. Do not oversimplify or omit important reasoning steps even if the input is lengthy.
+   - Do not use Python-style comments in the Mermaid code.
+
+Please visualize the thinking steps from the original reasoning process as a proper Mermaid flowchart.`;
+
+                    // Use Anthropic for the flowchart generation
+                    // Get the appropriate API key for Anthropic
+                    let anthropicApiKey = userApiKeys["anthropic"];
+                    if (!anthropicApiKey) {
+                        // If no user-entered key exists for Anthropic, try to get the default
+                        try {
+                            const keyResponse = await fetch('/provider-api-key/anthropic');
+                            const keyResult = await keyResponse.json();
+                            if (keyResult.success) {
+                                anthropicApiKey = keyResult.api_key;
+                            } else {
+                                throw new Error('无法获取Anthropic的API Key');
+                            }
+                        } catch (error) {
+                            console.error('Error fetching Anthropic API key:', error);
+                            alert('无法获取Anthropic的API Key用于流程图生成');
+                            return;
+                        }
+                    }
+                    
+                    const longData = {
+                        provider: "anthropic",
+                        api_key: anthropicApiKey,
+                        model: "claude-3-7-sonnet-20250219", // Use Claude for visualization
+                        max_tokens: parseInt(document.getElementById('max-tokens').value),
+                        question: longReasoningPrompt,
+                        prompt_format: "",
+                        reasoning_method: "cot",
+                        chars_per_line: parseInt(document.getElementById('chars-per-line').value),
+                        max_lines: parseInt(document.getElementById('max-lines').value)
+                    };
+            
+                    // Keep showing the plain text result while generating the flowchart
+                    // Don't update rawOutput.textContent here
+            
+                    const longResponse = await fetch('/process', {
+                        method: 'POST',
+                        headers: {
+                            'Content-Type': 'application/json'
+                        },
+                        body: JSON.stringify(longData)
+                    });
+            
+                    const longResult = await longResponse.json();
+            
+                    if (longResult.success) {
+                        // Keep displaying the original plain text output
+                        // We don't overwrite rawOutput.textContent here to preserve the plain text output
+                
+                        // Extract Mermaid diagram code from the response
+                        const mermaidCode = extractMermaidCode(longResult.raw_output);
+                
+                        if (mermaidCode) {
+                            // Store the code before rendering
+                            lastMermaidCode = mermaidCode;
+                            
+                            // Render the Mermaid diagram
+                            const container = document.getElementById('mermaid-diagram');
+                            container.innerHTML = '<div class="mermaid">' + mermaidCode + '</div>';
+                    
+                            // Initialize Mermaid
+                            mermaid.initialize({ 
+                                startOnLoad: true,
+                                theme: 'default',
+                                securityLevel: 'loose',
+                                flowchart: {
+                                    curve: 'basis',
+                                    padding: 15
+                                }
+                            });
+                    
+                            // Force rendering
+                            mermaid.init(undefined, '.mermaid');
+                    
+                            // Add visualization class
+                            document.getElementById('mermaid-container').classList.add('has-visualization');
+                    
+                            // Reset zoom
+                            resetZoom();
+                        } else if (longResult.visualization) {
+                            // Fall back to any visualization
+                            const container = document.getElementById('mermaid-diagram');
+                            container.innerHTML = longResult.visualization;
+                            document.getElementById('mermaid-container').classList.add('has-visualization');
+                            resetZoom();
+                            mermaid.init();
+                        }
+                    } else {
+                        // If visualization fails, show error without overwriting raw output
+                        const errorMsg = longResult.error || '流程图生成过程中发生未知错误';
+                        console.error(errorMsg);
+                        alert('可视化错误: ' + errorMsg);
+                    }
+                } else {
+                    // Use standard error function since we don't have valid output to preserve
+                    showError(result.error || '初始处理过程中发生未知错误');
+                }
+        
+                // Don't restore the original method - keep it on Plain Text
+                // This way the user stays in Plain Text mode after the operation
+        
+                // Optional: Update the prompt format for Plain Text if needed
+                const plainTextResponse = await fetch('/method-config/plain');
+                const plainTextConfig = await plainTextResponse.json();
+                if (plainTextConfig) {
+                    updatePromptFormat(plainTextConfig.prompt_format);
+                }
+        
+            } catch (error) {
+                console.error('Long reasoning error:', error);
+                // Only use showError if we don't already have plain text output to preserve
+                if (!currentRawOutput) {
+                    showError('处理长推理请求失败: ' + error.message);
+                } else {
+                    alert('可视化错误: ' + error.message);
+                }
+            } finally {
+                // Unlock visualization
+                unlockVisualization();
+        
+                // Re-enable all buttons
+                processButton.disabled = false;
+                metaButton.disabled = false;
+                longButton.disabled = false;
+                updateButtonTextPreserveTooltip(longButton, '长推理');
             }
         }
 
+        // Helper function to extract Mermaid code from response
+        function extractMermaidCode(text) {
+            // Look for code blocks with Mermaid content
+            const mermaidRegex = /```(?:mermaid)?\s*(flowchart[\s\S]*?)```/i;
+            const match = text.match(mermaidRegex);
+            
+            if (match && match[1]) {
+                return match[1].trim();
+            }
+            
+            // If no code block, look for just the flowchart content
+            const flowchartRegex = /(flowchart[\s\S]*?)(?:\n\n|$)/i;
+            const flowchartMatch = text.match(flowchartRegex);
+            
+            if (flowchartMatch && flowchartMatch[1]) {
+                return flowchartMatch[1].trim();
+            }
+            
+            return null;
+        }
+        
+        // Global variable to store the last mermaid visualization code
+        let lastMermaidCode = "";
+
         // Meta Reasoning function
         async function metaReasoning() {
             const metaButton = document.getElementById('meta-btn');
@@ -759,8 +1275,8 @@
             
             try {
                 metaButton.disabled = true;
-                metaButton.textContent = '选择方法中...';
-                rawOutput.textContent = '正在分析问题以选择最佳方法...';
+                updateButtonTextPreserveTooltip(metaButton, '选择方法中...');
+                rawOutput.textContent = '分析问题以选择最佳方法...';
                 
                 // Get current parameters
                 const data = {
@@ -799,25 +1315,37 @@
                             updateExampleQuestion(methodConfig.example_question);
                         }
                         
-                        console.log(`Selected reasoning method: ${methodConfig.name}`);
+                        console.log(`选择的推理方法: ${methodConfig.name}`);
                         
                         // Update button to show method was selected
-                        metaButton.textContent = '方法已选择';
-                        // Process the question with the selected method
-                        await processQuestion(true);
+                        updateButtonTextPreserveTooltip(metaButton, '已选择方法');
+                        
+                        try {
+                            // Process the question with the selected method
+                            await processQuestion(true);
+                        } catch (processError) {
+                            console.error('Error processing with selected method:', processError);
+                            showError('使用所选方法处理失败: ' + processError.message);
+                            
+                            // Make sure to re-enable the button on error
+                            metaButton.disabled = false;
+                            updateButtonTextPreserveTooltip(metaButton, '元推理');
+                        }
                     } else {
                         showError('加载方法配置失败');
-                        metaButton.textContent = '元推理';
+                        metaButton.disabled = false;
+                        updateButtonTextPreserveTooltip(metaButton, '元推理');
                     }
                 } else {
                     showError(result.error || '选择方法失败');
-                    metaButton.textContent = '元推理';
+                    metaButton.disabled = false;
+                    updateButtonTextPreserveTooltip(metaButton, '元推理');
                 }
             } catch (error) {
                 console.error('Meta reasoning error:', error);
                 showError('执行元推理失败');
                 metaButton.disabled = false;
-                metaButton.textContent = '元推理';
+                updateButtonTextPreserveTooltip(metaButton, '元推理');
             }
         }
 
@@ -838,6 +1366,87 @@
 
         // Load configuration when page loads
         document.addEventListener('DOMContentLoaded', loadConfig);
+        
+        /**
+         * Process Mermaid node text with character and line limits
+         * @param {string} mermaidCode - Original Mermaid code
+         * @param {number} maxCharsPerLine - Maximum characters per line
+         * @param {number} maxLines - Maximum number of lines per node
+         * @param {string} truncationSuffix - Suffix for truncated text
+         * @returns {string} Processed Mermaid code
+         */
+        function processMermaidNodeText(mermaidCode, maxCharsPerLine, maxLines, truncationSuffix = "...") {
+            // Node definition regex: matches patterns like A["text content"] with capture groups
+            const nodeRegex = /([A-Za-z0-9_]+)\s*\[\s*"([^"]+)"\s*\]/g;
+            
+            // Process each node's text content
+            return mermaidCode.replace(nodeRegex, (match, nodeId, text) => {
+                // Clean text by replacing existing <br> tags and newlines with spaces
+                const cleanText = text.replace(/<br>/g, ' ').replace(/\n/g, ' ');
+                
+                // Text wrapping function similar to Python's textwrap.wrap
+                function wrapText(text, width) {
+                    const words = text.split(' ');
+                    const lines = [];
+                    let currentLine = '';
+                    
+                    for (const word of words) {
+                        if (currentLine.length + word.length + (currentLine ? 1 : 0) <= width) {
+                            currentLine += (currentLine ? ' ' : '') + word;
+                        } else {
+                            lines.push(currentLine);
+                            currentLine = word;
+                        }
+                    }
+                    
+                    if (currentLine) {
+                        lines.push(currentLine);
+                    }
+                    
+                    return lines;
+                }
+                
+                // Wrap text according to max chars per line
+                let wrappedLines = wrapText(cleanText, maxCharsPerLine);
+                
+                // Limit number of lines and add truncation indicator if needed
+                if (wrappedLines.length > maxLines) {
+                    wrappedLines = wrappedLines.slice(0, maxLines);
+                    const lastLine = wrappedLines[wrappedLines.length - 1];
+                    if (lastLine.length > maxCharsPerLine - truncationSuffix.length) {
+                        wrappedLines[wrappedLines.length - 1] = 
+                            lastLine.substring(0, maxCharsPerLine - truncationSuffix.length) + truncationSuffix;
+                    } else {
+                        wrappedLines[wrappedLines.length - 1] = lastLine + truncationSuffix;
+                    }
+                }
+                
+                // Join lines with <br> for Mermaid formatting
+                const processedText = wrappedLines.join('<br>');
+                
+                // Return the node with processed text
+                return `${nodeId}["${processedText}"]`;
+            });
+        }
+
+        // Override extractMermaidCode to apply text processing for Long Reasoning
+        const originalExtractMermaidCode = extractMermaidCode;
+        
+        extractMermaidCode = function(text) {
+            // Call the original function to extract the code
+            const mermaidCode = originalExtractMermaidCode(text);
+            
+            if (mermaidCode) {
+                // Get character and line limits from UI
+                const maxCharsPerLine = parseInt(document.getElementById('chars-per-line').value) || 40;
+                const maxLines = parseInt(document.getElementById('max-lines').value) || 4;
+                
+                // Apply text processing to enforce character and line limits
+                return processMermaidNodeText(mermaidCode, maxCharsPerLine, maxLines);
+            }
+            
+            return mermaidCode;
+        };
     </script>
 </body>
 </html>