Upload 15 files

.gitattributes

@@ -33,3 +33,4 @@ saved_model/**/* filter=lfs diff=lfs merge=lfs -text
 *.zip filter=lfs diff=lfs merge=lfs -text
 *.zst filter=lfs diff=lfs merge=lfs -text
 *tfevents* filter=lfs diff=lfs merge=lfs -text
+static/assets/banner-bg.jpg filter=lfs diff=lfs merge=lfs -text

Dockerfile

@@ -0,0 +1,25 @@
+# Use official Python base image
+FROM python:3.11.8-slim
+
+# Set working directory
+WORKDIR /app
+
+# Copy dependency file
+COPY requirements.txt .
+
+# Install system dependencies and Python dependencies
+RUN pip install --no-cache-dir -r requirements.txt
+
+# Copy project files
+COPY . .
+
+# Expose port
+EXPOSE 7860
+
+# Set environment variables
+ENV FLASK_APP=app.py
+ENV FLASK_RUN_HOST=0.0.0.0
+ENV FLASK_RUN_PORT=7860
+
+# Run application
+CMD ["flask", "run"]

api_base.py

@@ -0,0 +1,291 @@
+"""
+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
+from openai import OpenAI
+from typing import Optional, Dict, Any, List
+from dataclasses import dataclass
+
+# Configure logging
+logging.basicConfig(
+    level=logging.INFO,
+    format='%(asctime)s - %(name)s - %(levelname)s - %(message)s'
+)
+logger = logging.getLogger(__name__)
+
+@dataclass
+class APIResponse:
+    """Standardized API response structure"""
+    text: str
+    raw_response: Any
+    usage: Dict[str, int]
+    model: str
+
+class APIError(Exception):
+    """Custom exception for API-related errors"""
+    def __init__(self, message: str, provider: str, status_code: Optional[int] = None):
+        self.message = message
+        self.provider = provider
+        self.status_code = status_code
+        super().__init__(f"{provider} API Error: {message} (Status: {status_code})")
+
+class BaseAPI(ABC):
+    """Abstract base class for API interactions"""
+    
+    def __init__(self, api_key: str, model: str):
+        self.api_key = api_key
+        self.model = model
+        self.provider_name = "base"  # Override in subclasses
+        
+    @abstractmethod
+    def generate_response(self, prompt: str, max_tokens: int = 1024, 
+                         prompt_format: Optional[str] = None) -> str:
+        """Generate a response using the API"""
+        pass
+
+    def _format_prompt(self, question: str, prompt_format: Optional[str] = None) -> str:
+        """Format the prompt using custom format if provided"""
+        if prompt_format:
+            return prompt_format.format(question=question)
+        
+        # Default format if none provided
+        return f"""Please answer the question using the following format, with each step clearly marked:
+
+Question: {question}
+
+Let's solve this step by step:
+<step number="1">
+[First step of reasoning]
+</step>
+<step number="2">
+[Second step of reasoning]
+</step>
+<step number="3">
+[Third step of reasoning]
+</step>
+... (add more steps as needed)
+<answer>
+[Final answer]
+</answer>
+
+Note:
+1. Each step must be wrapped in XML tags <step>
+2. Each step must have a number attribute
+3. The final answer must be wrapped in <answer> tags
+"""
+
+    def _handle_error(self, error: Exception, context: str = "") -> None:
+        """Standardized error handling"""
+        error_msg = f"{self.provider_name} API error in {context}: {str(error)}"
+        logger.error(error_msg)
+        raise APIError(str(error), self.provider_name)
+
+class AnthropicAPI(BaseAPI):
+    """Class to handle interactions with the Anthropic API"""
+    
+    def __init__(self, api_key: str, model: str = "claude-3-opus-20240229"):
+        super().__init__(api_key, model)
+        self.provider_name = "Anthropic"
+        self.base_url = "https://api.anthropic.com/v1/messages"
+        self.headers = {
+            "x-api-key": api_key,
+            "anthropic-version": "2023-06-01",
+            "content-type": "application/json"
+        }
+
+    def generate_response(self, prompt: str, max_tokens: int = 1024, 
+                         prompt_format: Optional[str] = None) -> str:
+        """Generate a response using the Anthropic API"""
+        try:
+            formatted_prompt = self._format_prompt(prompt, prompt_format)
+            data = {
+                "model": self.model,
+                "messages": [{"role": "user", "content": formatted_prompt}],
+                "max_tokens": max_tokens
+            }
+            
+            logger.info(f"Sending request to Anthropic API with model {self.model}")
+            response = requests.post(self.base_url, headers=self.headers, json=data)
+            response.raise_for_status()
+            
+            response_data = response.json()
+            return response_data["content"][0]["text"]
+            
+        except requests.exceptions.RequestException as e:
+            self._handle_error(e, "request")
+        except (KeyError, IndexError) as e:
+            self._handle_error(e, "response parsing")
+        except Exception as e:
+            self._handle_error(e, "unexpected")
+
+class OpenAIAPI(BaseAPI):
+    """Class to handle interactions with the OpenAI API"""
+    
+    def __init__(self, api_key: str, model: str = "gpt-4-turbo-preview"):
+        super().__init__(api_key, model)
+        self.provider_name = "OpenAI"
+        try:
+            self.client = OpenAI(api_key=api_key)
+        except Exception as e:
+            self._handle_error(e, "initialization")
+
+    def generate_response(self, prompt: str, max_tokens: int = 1024, 
+                         prompt_format: Optional[str] = None) -> str:
+        """Generate a response using the OpenAI API"""
+        try:
+            formatted_prompt = self._format_prompt(prompt, prompt_format)
+            
+            logger.info(f"Sending request to OpenAI 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
+            
+        except Exception as e:
+            self._handle_error(e, "request or response processing")
+
+class GeminiAPI(BaseAPI):
+    """Class to handle interactions with the Google Gemini API"""
+    
+    def __init__(self, api_key: str, model: str = "gemini-2.0-flash"):
+        super().__init__(api_key, model)
+        self.provider_name = "Gemini"
+        try:
+            from google import genai
+            self.client = genai.Client(api_key=api_key)
+        except Exception as e:
+            self._handle_error(e, "initialization")
+
+    def generate_response(self, prompt: str, max_tokens: int = 1024, 
+                         prompt_format: Optional[str] = None) -> str:
+        """Generate a response using the Gemini API"""
+        try:
+            from google.genai import types
+            formatted_prompt = self._format_prompt(prompt, prompt_format)
+            
+            logger.info(f"Sending request to Gemini API with model {self.model}")
+            response = self.client.models.generate_content(
+                model=self.model,
+                contents=[formatted_prompt],
+                config=types.GenerateContentConfig(
+                    max_output_tokens=max_tokens,
+                    temperature=0.7
+                )
+            )
+            
+            if not response.text:
+                raise APIError("Empty response from Gemini API", self.provider_name)
+                
+            return response.text
+            
+        except Exception as e:
+            self._handle_error(e, "request or response processing")
+
+class TogetherAPI(BaseAPI):
+    """Class to handle interactions with the Together AI API"""
+    
+    def __init__(self, api_key: str, model: str = "meta-llama/Meta-Llama-3.1-8B-Instruct-Turbo"):
+        super().__init__(api_key, model)
+        self.provider_name = "Together"
+        try:
+            from together import Together
+            self.client = Together(api_key=api_key)
+        except Exception as e:
+            self._handle_error(e, "initialization")
+
+    def generate_response(self, prompt: str, max_tokens: int = 1024, 
+                         prompt_format: Optional[str] = None) -> str:
+        """Generate a response using the Together AI API"""
+        try:
+            formatted_prompt = self._format_prompt(prompt, prompt_format)
+            
+            logger.info(f"Sending request to Together AI API with model {self.model}")
+            response = self.client.chat.completions.create(
+                model=self.model,
+                messages=[{"role": "user", "content": formatted_prompt}],
+                max_tokens=max_tokens
+            )
+            
+            # Robust response extraction
+            if hasattr(response, 'choices') and response.choices:
+                return response.choices[0].message.content
+            elif hasattr(response, 'text'):
+                return response.text
+            else:
+                # If response doesn't match expected structures
+                raise APIError("Unexpected response format from Together AI", self.provider_name)
+            
+        except Exception as e:
+            self._handle_error(e, "request or response processing")
+
+class APIFactory:
+    """Factory class for creating API instances"""
+    
+    _providers = {
+        "anthropic": {
+            "class": AnthropicAPI,
+            "default_model": "claude-3-opus-20240229"
+        },
+        "openai": {
+            "class": OpenAIAPI,
+            "default_model": "gpt-4-turbo-preview"
+        },
+        "google": {
+            "class": GeminiAPI,
+            "default_model": "gemini-2.0-flash"
+        },
+        "together": {
+            "class": TogetherAPI,
+            "default_model": "meta-llama/Meta-Llama-3.1-8B-Instruct-Turbo"
+        }
+    }
+    
+    @classmethod
+    def supported_providers(cls) -> List[str]:
+        """Get list of supported providers"""
+        return list(cls._providers.keys())
+    
+    @classmethod
+    def create_api(cls, provider: str, api_key: str, model: Optional[str] = None) -> BaseAPI:
+        """Factory method to create appropriate API instance"""
+        provider = provider.lower()
+        if provider not in cls._providers:
+            raise ValueError(f"Unsupported provider: {provider}. "
+                           f"Supported providers are: {', '.join(cls.supported_providers())}")
+        
+        provider_info = cls._providers[provider]
+        api_class = provider_info["class"]
+        model = model or provider_info["default_model"]
+        
+        logger.info(f"Creating API instance for provider: {provider}, model: {model}")
+        return api_class(api_key=api_key, model=model)
+
+def create_api(provider: str, api_key: str, model: Optional[str] = None) -> BaseAPI:
+    """Convenience function to create API instance"""
+    return APIFactory.create_api(provider, api_key, model)
+
+# Example usage:
+if __name__ == "__main__":
+    # Example with Anthropic
+    anthropic_api = create_api("anthropic", "your-api-key")
+    
+    # Example with OpenAI
+    openai_api = create_api("openai", "your-api-key", "gpt-4")
+    
+    # Example with Gemini
+    gemini_api = create_api("gemini", "your-api-key", "gemini-2.0-flash")
+    
+    # Example with Together AI
+    together_api = create_api("together", "your-api-key")
+    
+    # Get supported providers
+    providers = APIFactory.supported_providers()
+    print(f"Supported providers: {providers}")

api_keys.json

@@ -0,0 +1,6 @@
+{
+    "anthropic": "",
+    "openai": "",
+    "google": "",
+    "together": ""
+}

app.py

@@ -0,0 +1,272 @@
+from flask import Flask, render_template, request, jsonify
+from api_base import create_api  # New import for API factory
+from cot_reasoning import (
+    VisualizationConfig,
+    create_mermaid_diagram as create_cot_diagram,
+    parse_cot_response
+)
+from tot_reasoning import (
+    create_mermaid_diagram as create_tot_diagram,
+    parse_tot_response
+)
+from l2m_reasoning import (
+    create_mermaid_diagram as create_l2m_diagram,
+    parse_l2m_response
+)
+from selfconsistency_reasoning import (
+    create_mermaid_diagram as create_scr_diagram,
+    parse_scr_response
+)
+from selfrefine_reasoning import (
+    create_mermaid_diagram as create_srf_diagram,
+    parse_selfrefine_response
+)
+from bs_reasoning import (
+    create_mermaid_diagram as create_bs_diagram,
+    parse_bs_response
+)
+from configs import config
+import logging
+
+# Configure logging
+logging.basicConfig(
+    level=logging.INFO,
+    format='%(asctime)s - %(name)s - %(levelname)s - %(message)s'
+)
+logger = logging.getLogger(__name__)
+
+# Initialize Flask app
+app = Flask(__name__)
+
+@app.route('/')
+def index():
+    """Render the main page"""
+    return render_template('index.html')
+
+@app.route('/config')
+def get_config():
+    """Get initial configuration"""
+    return jsonify(config.get_initial_values())
+
+@app.route('/method-config/<method_id>')
+def get_method_config(method_id):
+    """Get configuration for specific method"""
+    method_config = config.get_method_config(method_id)
+    if method_config:
+        return jsonify(method_config)
+    return jsonify({"error": "Method not found"}), 404
+
+@app.route('/provider-api-key/<provider>')
+def get_provider_api_key(provider):
+    """Get default API key for specific provider"""
+    try:
+        api_key = config.general.get_default_api_key(provider)
+        return jsonify({
+            'success': True,
+            'api_key': api_key
+        })
+    except Exception as e:
+        logger.error(f"Error getting API key for provider {provider}: {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"""
+    try:
+        data = request.json
+        if not data:
+            return jsonify({'success': False, 'error': 'No data provided'}), 400
+
+        # Extract parameters
+        api_key = data.get('api_key')
+        provider = data.get('provider', 'anthropic')
+        model = data.get('model')
+        question = data.get('question')
+
+        if not all([api_key, model, question]):
+            return jsonify({'success': False, 'error': 'Missing required parameters'}), 400
+
+        # Create the selection prompt
+        methods = config.methods
+        prompt = f"""Given this question: "{question}"
+
+Please select the most appropriate reasoning method from the following options to solve it:
+
+{chr(10).join(f'- {method_id}: {config.name}' for method_id, config in methods.items())}
+
+Consider the characteristics of each method and the nature of the question.
+Output your selection in exactly this format:
+<selected_method>method_id</selected_method>
+where method_id is strictly one of: {', '.join(methods.keys())}.
+Do not use the method or words that are not in {', '.join(methods.keys())}."""
+
+        # Get model's selection
+        try:
+            api = create_api(provider, api_key, model)
+            response = api.generate_response(prompt, max_tokens=100)
+            
+            # Extract method ID using basic string parsing
+            import re
+            match = re.search(r'<selected_method>(\w+)</selected_method>', response)
+            if match and match.group(1) in methods:
+                selected_method = match.group(1)
+                return jsonify({
+                    'success': True,
+                    'selected_method': selected_method,
+                    'raw_response': response
+                })
+            else:
+                return jsonify({
+                    'success': False,
+                    'error': 'Invalid method selection in response'
+                }), 400
+                
+        except Exception as e:
+            return jsonify({
+                'success': False,
+                'error': f'API call failed: {str(e)}'
+            }), 500
+
+    except Exception as e:
+        logger.error(f"Error in method selection: {str(e)}")
+        return jsonify({
+            'success': False,
+            'error': str(e)
+        }), 500
+
+@app.route('/process', methods=['POST'])
+def process():
+    """Process the reasoning request"""
+    try:
+        # Get request data
+        data = request.json
+        if not data:
+            return jsonify({
+                'success': False,
+                'error': 'No data provided'
+            }), 400
+
+        # Extract parameters
+        api_key = data.get('api_key')
+        if not api_key:
+            return jsonify({
+                'success': False,
+                'error': 'API key is required'
+            }), 400
+
+        question = data.get('question')
+        if not question:
+            return jsonify({
+                'success': False,
+                'error': 'Question is required'
+            }), 400
+
+        # Get optional parameters with defaults
+        provider = data.get('provider', 'anthropic')  # New parameter for provider
+        model = data.get('model', config.general.available_models[0])
+        max_tokens = int(data.get('max_tokens', config.general.max_tokens))
+        prompt_format = data.get('prompt_format')
+        chars_per_line = int(data.get('chars_per_line', config.general.chars_per_line))
+        max_lines = int(data.get('max_lines', config.general.max_lines))
+        reasoning_method = data.get('reasoning_method', 'cot')
+        
+        # Initialize API with factory function
+        try:
+            api = create_api(provider, api_key, model)
+        except Exception as e:
+            return jsonify({
+                'success': False,
+                'error': f'Failed to initialize API: {str(e)}'
+            }), 400
+        
+        # Get model response
+        logger.info(f"Generating response for question using {provider} {model}")
+        try:
+            raw_response = api.generate_response(
+                question,
+                max_tokens=max_tokens,
+                prompt_format=prompt_format
+            )
+        except Exception as e:
+            return jsonify({
+                'success': False,
+                'error': f'API call failed: {str(e)}'
+            }), 500
+        
+        # Create visualization config
+        viz_config = VisualizationConfig(
+            max_chars_per_line=chars_per_line,
+            max_lines=max_lines
+        )
+        
+        # Generate visualization based on reasoning method
+        visualization = None
+        try:
+            if reasoning_method == 'cot':
+                result = parse_cot_response(raw_response, question)
+                visualization = create_cot_diagram(result, viz_config)
+            elif reasoning_method == 'tot':
+                result = parse_tot_response(raw_response, question)
+                visualization = create_tot_diagram(result, viz_config)
+            elif reasoning_method == 'l2m':
+                result = parse_l2m_response(raw_response, question)
+                visualization = create_l2m_diagram(result, viz_config)
+            elif reasoning_method == 'scr':
+                result = parse_scr_response(raw_response, question)
+                visualization = create_scr_diagram(result, viz_config)
+            elif reasoning_method == 'srf':
+                result = parse_selfrefine_response(raw_response, question)
+                visualization = create_srf_diagram(result, viz_config)
+            elif reasoning_method == 'bs':
+                result = parse_bs_response(raw_response, question)
+                visualization = create_bs_diagram(result, viz_config)
+                
+            logger.info("Successfully generated visualization")
+        except Exception as viz_error:
+            logger.error(f"Visualization generation failed: {str(viz_error)}")
+            # Continue without visualization
+        
+        # Return successful response
+        return jsonify({
+            'success': True,
+            'raw_output': raw_response,
+            'visualization': visualization
+        })
+        
+    except Exception as e:
+        # Log the error and return error response
+        logger.error(f"Error processing request: {str(e)}")
+        return jsonify({
+            'success': False,
+            'error': str(e)
+        }), 500
+
+@app.errorhandler(404)
+def not_found_error(error):
+    """Handle 404 errors"""
+    return jsonify({
+        'success': False,
+        'error': 'Resource not found'
+    }), 404
+
+@app.errorhandler(500)
+def internal_error(error):
+    """Handle 500 errors"""
+    return jsonify({
+        'success': False,
+        'error': 'Internal server error'
+    }), 500
+
+if __name__ == '__main__':
+    try:
+        # Run the application
+        app.run(
+            host='0.0.0.0',
+            port=5001,
+            debug=False  # Disable debug mode in production
+        )
+    except Exception as e:
+        logger.error(f"Failed to start application: {str(e)}")

bs_reasoning.py

@@ -0,0 +1,187 @@
+from dataclasses import dataclass
+from typing import List, Optional
+import re
+import textwrap
+from cot_reasoning import VisualizationConfig
+
+@dataclass
+class BSNode:
+    """Data class representing a node in the Beam Search tree"""
+    id: str
+    content: str
+    score: float
+    parent_id: Optional[str] = None
+    children: List['BSNode'] = None
+    is_best_path: bool = False
+    path_score: Optional[float] = None
+
+    def __post_init__(self):
+        if self.children is None:
+            self.children = []
+
+@dataclass
+class BSResponse:
+    """Data class representing a complete Beam Search response"""
+    question: str
+    root: BSNode
+    answer: Optional[str] = None
+    best_score: Optional[float] = None
+    result_nodes: List[BSNode] = None
+
+    def __post_init__(self):
+        if self.result_nodes is None:
+            self.result_nodes = []
+
+def parse_bs_response(response_text: str, question: str) -> BSResponse:
+    """Parse Beam Search response text to extract nodes and build the tree"""
+    # Parse nodes
+    node_pattern = r'<node id="([^"]+)"(?:\s+parent="([^"]+)")?\s*score="([^"]+)"(?:\s+path_score="([^"]+)")?\s*>\s*(.*?)\s*</node>'
+    nodes_dict = {}
+    result_nodes = []
+    
+    # First pass: create all nodes
+    for match in re.finditer(node_pattern, response_text, re.DOTALL):
+        node_id = match.group(1)
+        parent_id = match.group(2)
+        score = float(match.group(3))
+        path_score = float(match.group(4)) if match.group(4) else None
+        content = match.group(5).strip()
+        
+        node = BSNode(
+            id=node_id, 
+            content=content, 
+            score=score, 
+            parent_id=parent_id,
+            path_score=path_score
+        )
+        nodes_dict[node_id] = node
+        
+        # Collect result nodes
+        if node_id.startswith('result'):
+            result_nodes.append(node)
+
+    # Second pass: build tree relationships
+    root = None
+    for node in nodes_dict.values():
+        if node.parent_id is None:
+            root = node
+        else:
+            parent = nodes_dict.get(node.parent_id)
+            if parent:
+                parent.children.append(node)
+
+    # Parse answer if present
+    answer_pattern = r'<answer>\s*Best path \(path_score: ([^\)]+)\):\s*(.*?)\s*</answer>'
+    answer_match = re.search(answer_pattern, response_text, re.DOTALL)
+    answer = None
+    best_score = None
+    
+    if answer_match:
+        best_score = float(answer_match.group(1))
+        answer = answer_match.group(2).strip()
+        
+        # Mark the best path based on path_score
+        current_path_score = best_score
+        for node in nodes_dict.values():
+            if node.path_score and abs(node.path_score - current_path_score) < 1e-6:
+                # Mark all nodes in the path as best
+                current = node
+                while current:
+                    current.is_best_path = True
+                    current = nodes_dict.get(current.parent_id)
+
+    return BSResponse(
+        question=question, 
+        root=root, 
+        answer=answer, 
+        best_score=best_score,
+        result_nodes=result_nodes
+    )
+
+def create_mermaid_diagram(bs_response: BSResponse, config: VisualizationConfig) -> str:
+    """Convert Beam Search response to Mermaid diagram"""
+    diagram = ['<div class="mermaid">', 'graph TD']
+    
+    # Add question node
+    question_content = wrap_text(bs_response.question, config)
+    diagram.append(f'    Q["{question_content}"]')
+    
+    def add_node_and_children(node: BSNode, parent_id: Optional[str] = None):
+        # Format content to include scores
+        score_info = f"Score: {node.score:.2f}"
+        if node.path_score:
+            score_info += f"<br>Path Score: {node.path_score:.2f}"
+        node_content = f"{wrap_text(node.content, config)}<br>{score_info}"
+        
+        # Determine node style based on type and path
+        if node.id.startswith('result'):
+            node_style = 'result'
+            if node.is_best_path:
+                node_style = 'best_result'
+        else:
+            node_style = 'intermediate'
+            if node.is_best_path:
+                node_style = 'best_intermediate'
+        
+        # Add node
+        diagram.append(f'    {node.id}["{node_content}"]')
+        diagram.append(f'    class {node.id} {node_style};')
+        
+        # Add connection from parent
+        if parent_id:
+            diagram.append(f'    {parent_id} --> {node.id}')
+        
+        # Process children
+        for child in node.children:
+            add_node_and_children(child, node.id)
+    
+    # Build tree structure
+    if bs_response.root:
+        diagram.append(f'    Q --> {bs_response.root.id}')
+        add_node_and_children(bs_response.root)
+    
+    # Add final answer
+    if bs_response.answer:
+        answer_content = wrap_text(
+            f"Final Answer (Path Score: {bs_response.best_score:.2f}):<br>{bs_response.answer}",
+            config
+        )
+        diagram.append(f'    Answer["{answer_content}"]')
+        
+        # Connect all result nodes to the answer
+        for result_node in bs_response.result_nodes:
+            diagram.append(f'    {result_node.id} --> Answer')
+        
+        diagram.append('    class Answer final_answer;')
+    
+    # Add styles
+    diagram.extend([
+        '    classDef intermediate fill:#f9f9f9,stroke:#333,stroke-width:2px;',
+        '    classDef best_intermediate fill:#f9f9f9,stroke:#333,stroke-width:2px;',
+        '    classDef question fill:#e3f2fd,stroke:#1976d2,stroke-width:2px;',
+        '    classDef result fill:#f3f4f6,stroke:#4b5563,stroke-width:2px;',
+        '    classDef best_result fill:#bfdbfe,stroke:#3b82f6,stroke-width:2px;',
+        '    classDef final_answer fill:#d4edda,stroke:#28a745,stroke-width:2px;',
+        '    class Q question;',
+        '    linkStyle default stroke:#666,stroke-width:2px;'
+    ])
+    
+    diagram.append('</div>')
+    return '\n'.join(diagram)
+
+def wrap_text(text: str, config: VisualizationConfig) -> str:
+    """Wrap text to fit within box constraints"""
+    text = text.replace('\n', ' ').replace('"', "'")
+    wrapped_lines = textwrap.wrap(text, width=config.max_chars_per_line)
+    
+    if len(wrapped_lines) > config.max_lines:
+        # 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] + "...")
+    
+    return "<br>".join(wrapped_lines)

configs.py

@@ -0,0 +1,334 @@
+from dataclasses import dataclass, field
+from typing import Dict, Any, Optional, List
+import os
+import json
+import logging
+
+# Configure logging
+logging.basicConfig(
+    level=logging.INFO,
+    format='%(asctime)s - %(name)s - %(levelname)s - %(message)s'
+)
+logger = logging.getLogger(__name__)
+
+def load_api_keys_from_file(file_path: str = "api_keys.json") -> Dict[str, str]:
+    """Load API keys from a JSON file"""
+    try:
+        if os.path.exists(file_path):
+            with open(file_path, 'r') as f:
+                return json.load(f)
+        else:
+            logger.warning(f"API keys file {file_path} not found")
+            return {}
+    except Exception as e:
+        logger.error(f"Error loading API keys from {file_path}: {str(e)}")
+        return {}
+
+@dataclass
+class GeneralConfig:
+    """General configuration parameters that are method-independent"""
+    available_models: List[str] = field(default_factory=lambda: [
+        # Anthropic Models
+        "claude-3-haiku-20240307",
+        "claude-3-sonnet-20240229",
+        "claude-3-opus-20240229",
+        # OpenAI Models
+        "gpt-4-turbo-preview",
+        "gpt-4",
+        "gpt-3.5-turbo",
+        # Gemini Models
+        "gemini-2.0-flash",
+        # Together AI Models
+        #"meta-llama/Meta-Llama-3.1-8B-Instruct-Turbo",
+        "meta-llama/Llama-3.3-70B-Instruct-Turbo",
+        "meta-llama/Meta-Llama-3.1-405B-Instruct-Lite-Pro",
+        "deepseek-ai/DeepSeek-V3",
+        "mistralai/Mixtral-8x22B-Instruct-v0.1",
+        "Qwen/Qwen2.5-72B-Instruct-Turbo",
+        #"microsoft/WizardLM-2-8x22B",
+        #"databricks/dbrx-instruct",
+        #"nvidia/Llama-3.1-Nemotron-70B-Instruct-HF",
+
+    ])
+    model_providers: Dict[str, str] = field(default_factory=lambda: {
+        "claude-3-haiku-20240307": "anthropic",
+        "claude-3-sonnet-20240229": "anthropic",
+        "claude-3-opus-20240229": "anthropic",
+        "gpt-4-turbo-preview": "openai",
+        "gpt-4": "openai",
+        "gpt-3.5-turbo": "openai",
+        "gemini-2.0-flash": "google",
+        #"meta-llama/Meta-Llama-3.1-8B-Instruct-Turbo": "together",
+        "meta-llama/Llama-3.3-70B-Instruct-Turbo": "together",
+        "meta-llama/Meta-Llama-3.1-405B-Instruct-Lite-Pro": "together",
+        "deepseek-ai/DeepSeek-V3": "together",
+        "mistralai/Mixtral-8x22B-Instruct-v0.1": "together",
+        "Qwen/Qwen2.5-72B-Instruct-Turbo": "together",
+        #"microsoft/WizardLM-2-8x22B": "together",
+        #"databricks/dbrx-instruct": "together",
+        #"nvidia/Llama-3.1-Nemotron-70B-Instruct-HF": "together",
+
+    })
+    providers: List[str] = field(default_factory=lambda: ["anthropic", "openai", "google", "together"])
+    max_tokens: int = 2048
+    chars_per_line: int = 40
+    max_lines: int = 8
+    
+    def __post_init__(self):
+        """Load API keys after initialization"""
+        self.provider_api_keys = load_api_keys_from_file()
+
+    def get_default_api_key(self, provider: str) -> str:
+        """Get default API key for specific provider"""
+        return self.provider_api_keys.get(provider, "")
+
+@dataclass
+class ChainOfThoughtsConfig:
+    """Configuration specific to Chain of Thoughts method"""
+    name: str = "Chain of Thoughts"
+    prompt_format: str = '''Please answer the question using the following format by Chain-of-Thoughts, with each step clearly marked:
+
+Question: {question}
+
+Let's solve this step by step:
+<step number="1">
+[First step of reasoning]
+</step>
+... (add more steps as needed)
+<answer>
+[Final answer]
+</answer>'''
+    example_question: str = "Natalia sold clips to 48 of her friends in April, and then she sold half as many clips in May. How many clips did Natalia sell altogether in April and May?"
+
+@dataclass
+class TreeOfThoughtsConfig:
+    """Configuration specific to Tree of Thoughts method"""
+    name: str = "Tree of Thoughts"
+    prompt_format: str = '''Please answer the question using Tree of Thoughts reasoning. Consider multiple possible approaches and explore their consequences. Feel free to create as many branches and sub-branches as needed for thorough exploration. Use the following format:
+
+Question: {question}
+
+Let's explore different paths of reasoning:
+<node id="root">
+[Initial analysis of the problem]
+</node>
+
+[Add main approaches with unique IDs (approach1, approach2, etc.)]
+<node id="approach1" parent="root">
+[First main approach to solve the problem]
+</node>
+
+[For each approach, add as many sub-branches as needed using parent references]
+<node id="approach1.1" parent="approach1">
+[Exploration of a sub-path]
+</node>
+
+[Continue adding nodes and exploring paths as needed. You can create deeper levels by extending the ID pattern (e.g., approach1.1.1)]
+
+<answer>
+Based on exploring all paths:
+- [Explain which path(s) led to the best solution and why]
+- [State the final answer]
+</answer>'''
+    example_question: str = "Using the numbers 3, 3, 8, and 8, find a way to make exactly 24 using basic arithmetic operations (addition, subtraction, multiplication, division). Each number must be used exactly once, and you can use parentheses to control the order of operations."
+
+@dataclass
+class LeastToMostConfig:
+    """Configuration specific to Least-to-Most method"""
+    name: str = "Least to Most"
+    prompt_format: str = '''Please solve this question using the Least-to-Most approach. First break down the complex question into simpler sub-questions, then solve them in order from simplest to most complex.
+
+Question: {question}
+
+Let's solve this step by step:
+<step number="1">
+<question>[First sub-question - should be the simplest]</question>
+<reasoning>[Reasoning process for this sub-question]</reasoning>
+<answer>[Answer to this sub-question]</answer>
+</step>
+... (add more steps as needed)
+<final_answer>
+[Final answer that combines the insights from all steps]
+</final_answer>'''
+    example_question: str = "How to create a personal website?"
+
+@dataclass
+class SelfRefineConfig:
+    """Configuration specific to Self-Refine method"""
+    name: str = "Self-Refine"
+    prompt_format: str = '''Please solve this question step by step, then check your work and revise any mistakes. Use the following format:
+
+Question: {question}
+
+Let's solve this step by step:
+<step number="1">
+[First step of reasoning]
+</step>
+... (add more steps as needed)
+<answer>
+[Initial answer]
+</answer>
+
+Now, let's check our work:
+<revision_check>
+[Examine each step for errors or improvements]
+</revision_check>
+
+[If any revisions are needed, add revised steps:]
+<revised_step number="[new_step_number]" revises="[original_step_number]">
+[Corrected reasoning]
+</revised_step>
+... (add more revised steps if needed)
+
+[If the answer changes, add the revised answer:]
+<revised_answer>
+[Updated final answer]
+</revised_answer>'''
+    example_question: str = "Write a one sentence fiction and then improve it after refine."
+
+@dataclass
+class SelfConsistencyConfig:
+    """Configuration specific to Self-consistency method"""
+    name: str = "Self-consistency"
+    prompt_format: str = '''Please solve the question using multiple independent reasoning paths. Generate 3 different Chain-of-Thought solutions and provide the final answer based on majority voting.
+
+Question: {question}
+
+Path 1:
+<step number="1">
+[First step of reasoning]
+</step>
+... (add more steps as needed)
+<answer>
+[Path 1's answer]
+</answer>
+
+Path 2:
+... (repeat the same format for all 3 paths)
+
+Note: Each path should be independent and may arrive at different answers. The final answer will be determined by majority voting.'''
+    example_question: str = "How many r are there in strawberrrrrrrrry?"
+
+@dataclass
+class BeamSearchConfig:
+    """Configuration specific to Beam Search method"""
+    name: str = "Beam Search"
+    prompt_format: str = '''Please solve this question using Beam Search reasoning. For each step:
+1. Explore multiple paths fully regardless of intermediate scores
+2. Assign a score between 0 and 1 to each node based on how promising that step is
+3. Calculate path_score for each result by summing scores along the path from root to result
+4. The final choice will be based on the highest cumulative path score
+
+Question: {question}
+
+<node id="root" score="[score]">
+[Initial analysis - Break down the key aspects of the problem]
+</node>
+
+# First approach branch
+<node id="approach1" parent="root" score="[score]">
+[First approach - Outline the general strategy]
+</node>
+
+<node id="impl1.1" parent="approach1" score="[score]">
+[Implementation 1.1 - Detail the specific steps and methods]
+</node>
+
+<node id="result1.1" parent="impl1.1" score="[score]" path_score="[sum of scores from root to here]">
+[Result 1.1 - Describe concrete outcome and effectiveness]
+</node>
+
+<node id="impl1.2" parent="approach1" score="[score]">
+[Implementation 1.2 - Detail alternative steps and methods]
+</node>
+
+<node id="result1.2" parent="impl1.2" score="[score]" path_score="[sum of scores from root to here]">
+[Result 1.2 - Describe concrete outcome and effectiveness]
+</node>
+
+# Second approach branch
+<node id="approach2" parent="root" score="[score]">
+[Second approach - Outline an alternative general strategy]
+</node>
+
+<node id="impl2.1" parent="approach2" score="[score]">
+[Implementation 2.1 - Detail the specific steps and methods]
+</node>
+
+<node id="result2.1" parent="impl2.1" score="[score]" path_score="[sum of scores from root to here]">
+[Result 2.1 - Describe concrete outcome and effectiveness]
+</node>
+
+<node id="impl2.2" parent="approach2" score="[score]">
+[Implementation 2.2 - Detail alternative steps and methods]
+</node>
+
+<node id="result2.2" parent="impl2.2" score="[score]" path_score="[sum of scores from root to here]">
+[Result 2.2 - Describe concrete outcome and effectiveness]
+</node>
+
+<answer>
+Best path (path_score: [highest_path_score]):
+[Identify the path with the highest cumulative score]
+[Explain why this path is most effective]
+[Provide the final synthesized solution]
+</answer>'''
+    example_question: str = "Give me two suggestions for transitioning from a journalist to a book editor?"
+
+class ReasoningConfig:
+    """Main configuration class that manages both general and method-specific configs"""
+    def __init__(self):
+        self.general = GeneralConfig()
+        self.methods = {
+            "cot": ChainOfThoughtsConfig(),
+            "tot": TreeOfThoughtsConfig(),
+            "scr": SelfConsistencyConfig(),
+            "srf": SelfRefineConfig(),
+            "l2m": LeastToMostConfig(),
+            "bs": BeamSearchConfig(),
+        }
+    
+    def get_method_config(self, method_id: str) -> Optional[dict]:
+        """Get configuration for specific method"""
+        method = self.methods.get(method_id)
+        if method:
+            return {
+                "name": method.name,
+                "prompt_format": method.prompt_format,
+                "example_question": method.example_question
+            }
+        return None
+
+    def get_initial_values(self) -> dict:
+        """Get initial values for UI"""
+        return {
+            "general": {
+                "available_models": self.general.available_models,
+                "model_providers": self.general.model_providers,
+                "providers": self.general.providers,
+                "max_tokens": self.general.max_tokens,
+                "default_api_key": self.general.get_default_api_key(self.general.providers[0]),
+                "visualization": {
+                    "chars_per_line": self.general.chars_per_line,
+                    "max_lines": self.general.max_lines
+                }
+            },
+            "methods": {
+                method_id: {
+                    "name": config.name,
+                    "prompt_format": config.prompt_format,
+                    "example_question": config.example_question
+                }
+                for method_id, config in self.methods.items()
+            }
+        }
+    
+    def add_method(self, method_id: str, config: Any) -> None:
+        """Add a new reasoning method configuration"""
+        if method_id not in self.methods:
+            self.methods[method_id] = config
+        else:
+            raise ValueError(f"Method {method_id} already exists")
+
+# Create global config instance
+config = ReasoningConfig()

cot_reasoning.py

@@ -0,0 +1,193 @@
+import re
+import requests
+import textwrap
+from dataclasses import dataclass
+from typing import List, Optional
+
+@dataclass
+class CoTStep:
+    """Data class representing a single CoT step"""
+    number: int
+    content: str
+
+@dataclass
+class CoTResponse:
+    """Data class representing a complete CoT response"""
+    question: str
+    steps: List[CoTStep]
+    answer: Optional[str] = None
+
+@dataclass
+class VisualizationConfig:
+    """Configuration for CoT visualization"""
+    max_chars_per_line: int = 40
+    max_lines: int = 4
+    truncation_suffix: str = "..."
+
+class AnthropicAPI:
+    """Class to handle interactions with the Anthropic API"""
+    def __init__(self, api_key: str, model: str = "claude-3-opus-20240229"):
+        self.api_key = api_key
+        self.model = model
+        self.base_url = "https://api.anthropic.com/v1/messages"
+        self.headers = {
+            "x-api-key": api_key,
+            "anthropic-version": "2023-06-01",
+            "content-type": "application/json"
+        }
+
+    def generate_response(self, prompt: str, max_tokens: int = 1024, prompt_format: str = None) -> str:
+        """Generate a response using the Anthropic API"""
+        formatted_prompt = self._format_prompt(prompt, prompt_format) if prompt_format else prompt
+        data = {
+            "model": self.model,
+            "messages": [{"role": "user", "content": formatted_prompt}],
+            "max_tokens": max_tokens
+        }
+        
+        try:
+            response = requests.post(self.base_url, headers=self.headers, json=data)
+            response.raise_for_status()
+            return response.json()["content"][0]["text"]
+        except Exception as e:
+            raise Exception(f"API call failed: {str(e)}")
+
+    def _format_prompt(self, question: str, prompt_format: str = None) -> str:
+        """Format the prompt using custom format if provided"""
+        if prompt_format:
+            return prompt_format.format(question=question)
+        
+        # Default format if none provided
+        return f"""Please answer the question using the following format, with each step clearly marked:
+
+Question: {question}
+
+Let's solve this step by step:
+<step number="1">
+[First step of reasoning]
+</step>
+<step number="2">
+[Second step of reasoning]
+</step>
+<step number="3">
+[Third step of reasoning]
+</step>
+... (add more steps as needed)
+<answer>
+[Final answer]
+</answer>
+
+Note:
+1. Each step must be wrapped in XML tags <step>
+2. Each step must have a number attribute
+3. The final answer must be wrapped in <answer> tags
+"""
+
+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
+    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)
+    
+    # Join with <br> for HTML line breaks in Mermaid
+    return "<br>".join(wrapped_lines)
+
+def parse_cot_response(response_text: str, question: str) -> CoTResponse:
+    """
+    Parse CoT response text to extract steps and final answer.
+    
+    Args:
+        response_text: The raw response from the API
+        question: The original question
+    
+    Returns:
+        CoTResponse object containing question, steps, and answer
+    """
+    # Extract all steps
+    step_pattern = r'<step number="(\d+)">\s*(.*?)\s*</step>'
+    steps = []
+    for match in re.finditer(step_pattern, response_text, re.DOTALL):
+        number = int(match.group(1))
+        content = match.group(2).strip()
+        steps.append(CoTStep(number=number, content=content))
+    
+    # Extract answer
+    answer_pattern = r'<answer>\s*(.*?)\s*</answer>'
+    answer_match = re.search(answer_pattern, response_text, re.DOTALL)
+    answer = answer_match.group(1).strip() if answer_match else None
+    
+    # Sort steps by number
+    steps.sort(key=lambda x: x.number)
+    
+    return CoTResponse(question=question, steps=steps, answer=answer)
+
+def create_mermaid_diagram(cot_response: CoTResponse, config: VisualizationConfig) -> str:
+    """
+    Convert CoT steps to Mermaid diagram with improved text wrapping.
+    
+    Args:
+        cot_response: CoTResponse object containing the reasoning steps
+        config: VisualizationConfig for text formatting
+    
+    Returns:
+        Mermaid diagram markup as a string
+    """
+    diagram = ['<div class="mermaid">', 'graph TD']
+    
+    # Add question node
+    question_content = wrap_text(cot_response.question, config)
+    diagram.append(f'    Q["{question_content}"]')
+    
+    # Add steps with wrapped text and connect them
+    if cot_response.steps:
+        # Connect question to first step
+        diagram.append(f'    Q --> S{cot_response.steps[0].number}')
+        
+        # Add all steps
+        for i, step in enumerate(cot_response.steps):
+            content = wrap_text(step.content, config)
+            node_id = f'S{step.number}'
+            diagram.append(f'    {node_id}["{content}"]')
+            
+            # Connect steps sequentially
+            if i < len(cot_response.steps) - 1:
+                next_id = f'S{cot_response.steps[i + 1].number}'
+                diagram.append(f'    {node_id} --> {next_id}')
+    
+    # Add final answer node
+    if cot_response.answer:
+        answer = wrap_text(cot_response.answer, config)
+        diagram.append(f'    A["{answer}"]')
+        if cot_response.steps:
+            diagram.append(f'    S{cot_response.steps[-1].number} --> A')
+        else:
+            diagram.append('    Q --> A')
+    
+    # Add styles for better visualization
+    diagram.extend([
+        '    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;',
+        '    class Q question;',
+        '    class A answer;',
+        '    linkStyle default stroke:#666,stroke-width:2px;'
+    ])
+    
+    diagram.append('</div>')
+    return '\n'.join(diagram)

l2m_reasoning.py

@@ -0,0 +1,144 @@
+import re
+from dataclasses import dataclass
+from typing import List, Optional
+import textwrap
+
+@dataclass
+class L2MStep:
+    """Data class representing a single L2M step"""
+    number: int
+    question: str  # The sub-question for this step
+    reasoning: str  # The reasoning process
+    answer: str    # The answer to this sub-question
+
+@dataclass
+class L2MResponse:
+    """Data class representing a complete L2M response"""
+    main_question: str
+    steps: List[L2MStep]
+    final_answer: Optional[str] = None
+
+def parse_l2m_response(response_text: str, question: str) -> L2MResponse:
+    """
+    Parse L2M response text to extract steps and final answer.
+    
+    Args:
+        response_text: The raw response from the API
+        question: The original question
+    
+    Returns:
+        L2MResponse object containing main question, steps, and final answer
+    """
+    # Extract all steps
+    step_pattern = r'<step number="(\d+)">\s*<question>(.*?)</question>\s*<reasoning>(.*?)</reasoning>\s*<answer>(.*?)</answer>\s*</step>'
+    steps = []
+    
+    for match in re.finditer(step_pattern, response_text, re.DOTALL):
+        number = int(match.group(1))
+        sub_question = match.group(2).strip()
+        reasoning = match.group(3).strip()
+        answer = match.group(4).strip()
+        steps.append(L2MStep(
+            number=number,
+            question=sub_question,
+            reasoning=reasoning,
+            answer=answer
+        ))
+    
+    # Extract final answer
+    final_answer_pattern = r'<final_answer>\s*(.*?)\s*</final_answer>'
+    final_answer_match = re.search(final_answer_pattern, response_text, re.DOTALL)
+    final_answer = final_answer_match.group(1).strip() if final_answer_match else None
+    
+    # Sort steps by number
+    steps.sort(key=lambda x: x.number)
+    
+    return L2MResponse(main_question=question, steps=steps, final_answer=final_answer)
+
+def wrap_text(text: str, max_chars: int = 40, max_lines: int = 4) -> str:
+    """Wrap text to fit within box constraints with proper line breaks."""
+    text = text.replace('\n', ' ').replace('"', "'")
+    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] + "...")
+    
+    return "<br>".join(wrapped_lines)
+
+def create_mermaid_diagram(l2m_response: L2MResponse, config: 'VisualizationConfig') -> str:
+    """
+    Convert L2M steps to Mermaid diagram.
+    
+    Args:
+        l2m_response: L2MResponse object containing the reasoning steps
+        config: VisualizationConfig for text formatting
+    
+    Returns:
+        Mermaid diagram markup as a string
+    """
+    diagram = ['<div class="mermaid">', 'graph TD']
+    
+    # Add main question node
+    question_content = wrap_text(l2m_response.main_question, config.max_chars_per_line, config.max_lines)
+    diagram.append(f'    Q["{question_content}"]')
+    
+    # Add decomposition node
+    diagram.append(f'    D["Problem Decomposition"]')
+    diagram.append(f'    Q --> D')
+    
+    # Add all step nodes with sub-questions, reasoning, and answers
+    if l2m_response.steps:
+        # Connect decomposition to first step
+        diagram.append(f'    D --> S{l2m_response.steps[0].number}')
+        
+        for i, step in enumerate(l2m_response.steps):
+            # Create sub-question node
+            sq_content = wrap_text(f"Q{step.number}: {step.question}", config.max_chars_per_line, config.max_lines)
+            sq_id = f'S{step.number}'
+            diagram.append(f'    {sq_id}["{sq_content}"]')
+            
+            # Create reasoning node
+            r_content = wrap_text(step.reasoning, config.max_chars_per_line, config.max_lines)
+            r_id = f'R{step.number}'
+            diagram.append(f'    {r_id}["{r_content}"]')
+            
+            # Create answer node
+            a_content = wrap_text(f"A{step.number}: {step.answer}", config.max_chars_per_line, config.max_lines)
+            a_id = f'A{step.number}'
+            diagram.append(f'    {a_id}["{a_content}"]')
+            
+            # Connect the nodes
+            diagram.append(f'    {sq_id} --> {r_id}')
+            diagram.append(f'    {r_id} --> {a_id}')
+            
+            # Connect to next step if exists
+            if i < len(l2m_response.steps) - 1:
+                next_id = f'S{l2m_response.steps[i + 1].number}'
+                diagram.append(f'    {a_id} --> {next_id}')
+    
+    # Add final answer node if exists
+    if l2m_response.final_answer:
+        final_content = wrap_text(f"Final: {l2m_response.final_answer}", config.max_chars_per_line, config.max_lines)
+        diagram.append(f'    F["{final_content}"]')
+        if l2m_response.steps:
+            diagram.append(f'    A{l2m_response.steps[-1].number} --> F')
+        else:
+            diagram.append('    D --> F')
+    
+    # Add styles
+    diagram.extend([
+        '    classDef default fill:#f9f9f9,stroke:#333,stroke-width:2px;',
+        '    classDef question fill:#e3f2fd,stroke:#1976d2,stroke-width:2px;',
+        '    classDef reasoning fill:#f9f9f9,stroke:#333,stroke-width:2px;',
+        '    classDef answer fill:#d4edda,stroke:#28a745,stroke-width:2px;',
+        '    classDef decomp fill:#f3e5f5,stroke:#7b1fa2,stroke-width:2px;',
+        '    class Q,S1,S2,S3,S4,S5 question;',
+        '    class R1,R2,R3,R4,R5 reasoning;',
+        '    class A1,A2,A3,A4,A5,F answer;',
+        '    class D decomp;',
+        '    linkStyle default stroke:#666,stroke-width:2px;'
+    ])
+    
+    diagram.append('</div>')
+    return '\n'.join(diagram)

requirements.txt

@@ -0,0 +1,7 @@
+requests==2.31.0
+openai==1.63.2
+together==1.4.1
+flask==3.1.0
+google==3.0.0
+google-genai==1.2.0
+google-generativeai==0.8.4

selfconsistency_reasoning.py

@@ -0,0 +1,154 @@
+import re
+from dataclasses import dataclass
+from typing import List, Optional, Dict
+from collections import Counter
+from cot_reasoning import CoTStep, CoTResponse, VisualizationConfig, wrap_text
+
+@dataclass
+class SCRPath:
+    """Data class representing a single self-consistency reasoning path"""
+    path_id: int
+    steps: List[CoTStep]
+    answer: Optional[str] = None
+
+@dataclass
+class SCRResponse:
+    """Data class representing a complete self-consistency response"""
+    question: str
+    paths: List[SCRPath]
+    final_answer: Optional[str] = None
+    vote_counts: Optional[Dict[str, int]] = None
+
+def parse_scr_response(response_text: str, question: str, num_paths: int = 5) -> SCRResponse:
+    """
+    Parse self-consistency response text to extract multiple reasoning paths and answers.
+    
+    Args:
+        response_text: The raw response from the API containing multiple paths
+        question: The original question
+        num_paths: Expected number of reasoning paths
+    
+    Returns:
+        SCRResponse object containing all paths and aggregated answer
+    """
+    # Split the response into individual paths
+    path_pattern = r'Path\s+(\d+):(.*?)(?=Path\s+\d+:|$)'
+    path_matches = re.finditer(path_pattern, response_text, re.DOTALL)
+    
+    paths = []
+    answers = []
+    
+    for match in path_matches:
+        path_id = int(match.group(1))
+        path_content = match.group(2).strip()
+        
+        # Extract steps for this path
+        step_pattern = r'<step number="(\d+)">\s*(.*?)\s*</step>'
+        steps = []
+        for step_match in re.finditer(step_pattern, path_content, re.DOTALL):
+            number = int(step_match.group(1))
+            content = step_match.group(2).strip()
+            steps.append(CoTStep(number=number, content=content))
+        
+        # Extract answer for this path
+        answer_pattern = r'<answer>\s*(.*?)\s*</answer>'
+        answer_match = re.search(answer_pattern, path_content, re.DOTALL)
+        answer = answer_match.group(1).strip() if answer_match else None
+        
+        if answer:
+            answers.append(answer)
+        
+        # Sort steps by number
+        steps.sort(key=lambda x: x.number)
+        
+        paths.append(SCRPath(path_id=path_id, steps=steps, answer=answer))
+    
+    # Determine final answer through voting
+    vote_counts = Counter(answers)
+    final_answer = vote_counts.most_common(1)[0][0] if vote_counts else None
+    
+    return SCRResponse(
+        question=question,
+        paths=paths,
+        final_answer=final_answer,
+        vote_counts=dict(vote_counts)
+    )
+
+def create_mermaid_diagram(scr_response: SCRResponse, config: VisualizationConfig) -> str:
+    """
+    Convert self-consistency paths to Mermaid diagram.
+    
+    Args:
+        scr_response: SCRResponse object containing multiple reasoning paths
+        config: VisualizationConfig for text formatting
+    
+    Returns:
+        Mermaid diagram markup as a string
+    """
+    diagram = ['<div class="mermaid">', 'graph TD']
+    
+    # Add question node
+    question_content = wrap_text(scr_response.question, config)
+    diagram.append(f'    Q["{question_content}"]')
+    
+    # Process each path
+    for path in scr_response.paths:
+        path_id = f'P{path.path_id}'
+        
+        # Add path label
+        diagram.append(f'    {path_id}["Path {path.path_id}"]')
+        diagram.append(f'    Q --> {path_id}')
+        
+        # Add steps for this path
+        prev_node = path_id
+        for step in path.steps:
+            content = wrap_text(step.content, config)
+            node_id = f'P{path.path_id}S{step.number}'
+            diagram.append(f'    {node_id}["{content}"]')
+            diagram.append(f'    {prev_node} --> {node_id}')
+            prev_node = node_id
+        
+        # Add path answer
+        if path.answer:
+            answer_content = wrap_text(path.answer, config)
+            answer_id = f'A{path.path_id}'
+            diagram.append(f'    {answer_id}["{answer_content}"]')
+            diagram.append(f'    {prev_node} --> {answer_id}')
+    
+    # Add final answer with vote counts
+    if scr_response.final_answer and scr_response.vote_counts:
+        vote_info = [f"{ans}: {count} votes" for ans, count in scr_response.vote_counts.items()]
+        final_content = wrap_text(
+            f"Final Answer (by voting):\\n{scr_response.final_answer}\\n\\n" + 
+            "Vote Distribution:\\n" + "\\n".join(vote_info),
+            config
+        )
+        diagram.append(f'    F["{final_content}"]')
+        
+        # Connect all path answers to final answer
+        for path in scr_response.paths:
+            if path.answer:
+                diagram.append(f'    A{path.path_id} --> F')
+    
+    # Add styles
+    diagram.extend([
+        '    classDef default fill:#f9f9f9,stroke:#333,stroke-width:2px;',
+        '    classDef question fill:#e3f2fd,stroke:#1976d2,stroke-width:2px;',
+        '    classDef path fill:#fff3e0,stroke:#f57c00,stroke-width:2px;',
+        '    classDef answer fill:#d4edda,stroke:#28a745,stroke-width:2px;',
+        '    classDef final fill:#d4edda,stroke:#28a745,stroke-width:2px;',
+        '    class Q question;',
+        '    class F final;'
+    ])
+    
+    # Apply path style to all path nodes
+    for path in scr_response.paths:
+        diagram.append(f'    class P{path.path_id} path;')
+    
+    # Apply answer style to all answer nodes
+    for path in scr_response.paths:
+        if path.answer:
+            diagram.append(f'    class A{path.path_id} answer;')
+    
+    diagram.append('</div>')
+    return '\n'.join(diagram)

selfrefine_reasoning.py

@@ -0,0 +1,165 @@
+import re
+from dataclasses import dataclass
+from typing import List, Optional
+from cot_reasoning import VisualizationConfig, wrap_text
+
+@dataclass
+class SelfRefineStep:
+    """Data class representing a single step in self-refine reasoning"""
+    number: int
+    content: str
+    is_revised: bool = False
+    revision_of: Optional[int] = None
+
+@dataclass
+class SelfRefineResponse:
+    """Data class representing a complete self-refine response"""
+    question: str
+    steps: List[SelfRefineStep]
+    answer: Optional[str] = None
+    revision_check: Optional[str] = None
+    revised_answer: Optional[str] = None
+
+def parse_selfrefine_response(response_text: str, question: str) -> SelfRefineResponse:
+    """
+    Parse self-refine response text to extract steps, answers, and revisions.
+    
+    Args:
+        response_text: The raw response from the API
+        question: The original question
+    
+    Returns:
+        SelfRefineResponse object containing all components
+    """
+    # Extract initial steps
+    step_pattern = r'<step number="(\d+)">\s*(.*?)\s*</step>'
+    steps = []
+    for match in re.finditer(step_pattern, response_text, re.DOTALL):
+        number = int(match.group(1))
+        content = match.group(2).strip()
+        steps.append(SelfRefineStep(number=number, content=content))
+    
+    # Extract initial answer
+    answer_pattern = r'<answer>\s*(.*?)\s*</answer>'
+    answer_match = re.search(answer_pattern, response_text, re.DOTALL)
+    answer = answer_match.group(1).strip() if answer_match else None
+    
+    # Extract revision check
+    check_pattern = r'<revision_check>\s*(.*?)\s*</revision_check>'
+    check_match = re.search(check_pattern, response_text, re.DOTALL)
+    revision_check = check_match.group(1).strip() if check_match else None
+    
+    # Extract revised steps
+    revised_step_pattern = r'<revised_step number="(\d+)" revises="(\d+)">\s*(.*?)\s*</revised_step>'
+    for match in re.finditer(revised_step_pattern, response_text, re.DOTALL):
+        number = int(match.group(1))
+        revises = int(match.group(2))
+        content = match.group(3).strip()
+        steps.append(SelfRefineStep(
+            number=number,
+            content=content,
+            is_revised=True,
+            revision_of=revises
+        ))
+    
+    # Extract revised answer
+    revised_answer_pattern = r'<revised_answer>\s*(.*?)\s*</revised_answer>'
+    revised_answer_match = re.search(revised_answer_pattern, response_text, re.DOTALL)
+    revised_answer = revised_answer_match.group(1).strip() if revised_answer_match else None
+    
+    return SelfRefineResponse(
+        question=question,
+        steps=steps,
+        answer=answer,
+        revision_check=revision_check,
+        revised_answer=revised_answer
+    )
+
+def create_mermaid_diagram(sr_response: SelfRefineResponse, config: VisualizationConfig) -> str:
+    """
+    Create a Mermaid diagram for self-refine reasoning.
+    
+    Args:
+        sr_response: SelfRefineResponse object containing the reasoning steps
+        config: VisualizationConfig for text formatting
+    
+    Returns:
+        Mermaid diagram markup as a string
+    """
+    diagram = ['<div class="mermaid">', 'graph TD']
+    
+    # Add question node
+    question_content = wrap_text(sr_response.question, config)
+    diagram.append(f'    Q["{question_content}"]')
+    
+    # Track original and revised steps
+    original_steps = [s for s in sr_response.steps if not s.is_revised]
+    revised_steps = [s for s in sr_response.steps if s.is_revised]
+    
+    # Add original steps and connect them
+    prev_node = 'Q'
+    for step in original_steps:
+        node_id = f'S{step.number}'
+        content = wrap_text(step.content, config)
+        diagram.append(f'    {node_id}["{content}"]')
+        diagram.append(f'    {prev_node} --> {node_id}')
+        prev_node = node_id
+    
+    # Add initial answer if present
+    if sr_response.answer:
+        answer_content = wrap_text(sr_response.answer, config)
+        diagram.append(f'    A["{answer_content}"]')
+        diagram.append(f'    {prev_node} --> A')
+        prev_node = 'A'
+    
+    # Add revision check if present
+    if sr_response.revision_check:
+        check_content = wrap_text(sr_response.revision_check, config)
+        diagram.append(f'    RC["{check_content}"]')
+        diagram.append(f'    {prev_node} --> RC')
+    
+    # Add revised steps if any
+    if revised_steps:
+        # Process each revision step
+        for i, step in enumerate(revised_steps):
+            rev_node_id = f'R{step.number}'
+            content = wrap_text(step.content, config)
+            diagram.append(f'    {rev_node_id}["{content}"]')
+            
+            # Connect from the revision check to problematic step, then to revision
+            if step.revision_of:
+                orig_node = f'S{step.revision_of}'
+                # Add connection from revision check to problematic step
+                diagram.append(f'    RC --> {orig_node}')
+                # Add connection from problematic step to its revision
+                diagram.append(f'    {orig_node} --> {rev_node_id}')
+                
+                # Connect subsequent revised steps
+                if i < len(revised_steps) - 1:
+                    next_node = f'R{revised_steps[i + 1].number}'
+                    diagram.append(f'    {rev_node_id} --> {next_node}')
+    
+    # Add revised answer if present
+    if sr_response.revised_answer:
+        revised_content = wrap_text(sr_response.revised_answer, config)
+        diagram.append(f'    RA["{revised_content}"]')
+        last_node = f'R{revised_steps[-1].number}' if revised_steps else 'RC'
+        diagram.append(f'    {last_node} --> RA')
+    
+    # Add styles
+    diagram.extend([
+        '    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 revision fill:#fff3cd,stroke:#ffc107,stroke-width:2px;',
+        '    class Q question;',
+        '    class A,RA answer;',
+        '    class RC revision;'
+    ])
+    
+    # Style revision nodes
+    for step in revised_steps:
+        diagram.append(f'    class R{step.number} revision;')
+    
+    diagram.append('</div>')
+    return '\n'.join(diagram)

templates/index.html

@@ -0,0 +1,835 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <title>ReasonGraph</title>
+    <link rel="icon" href="static/assets/idea.png" type="image/x-icon">
+    <link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
+    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/mermaid.min.js"></script>
+    <style>
+        body {
+            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
+            margin: 0;
+            padding: 20px;
+            background-color: #f5f5f5;
+        }
+
+        .banner {
+            margin: 3px 20px;
+            border-radius: 8px;
+            background-image: url("{{ url_for('static', filename='assets/banner-bg.jpg') }}");
+            background-size: cover;
+            background-position: center;
+            box-shadow: 0 1px 3px rgba(0,0,0,0.1);
+            height: 280px;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            position: relative;
+        }
+
+        .banner::before {
+            content: '';
+            position: absolute;
+            top: 0;
+            left: 0;
+            right: 0;
+            bottom: 0;
+            background: rgba(0, 0, 0, 0.4);
+            border-radius: 8px;
+        }
+
+        .banner-content {
+            position: relative;
+            z-index: 1;
+            text-align: center;
+            display: flex;
+            flex-direction: column;
+            gap: 24px;
+            width: 100%;
+            max-width: 800px;
+            padding: 0 20px;
+        }
+
+        .banner h1 {
+            color: white;
+            font-size: 32px;
+            font-weight: 600;
+            margin: 0;
+            text-shadow: 0 2px 4px rgba(0,0,0,0.2);
+        }
+
+        .search-area {
+            display: flex;
+            flex-direction: column;
+            gap: 16px;
+            width: 100%;
+        }
+
+        .search-input-container {
+            position: relative;
+            width: 100%;
+        }
+
+        .search-input {
+            width: 100%;
+            padding: 12px;
+            border: 2px solid rgba(255, 255, 255, 0.2);
+            border-radius: 8px;
+            background: rgba(255, 255, 255, 0.9);
+            font-size: 16px;
+            resize: none;
+            outline: none;
+            transition: border-color 0.2s;
+        }
+
+        .search-input:focus {
+            border-color: rgba(255, 255, 255, 0.5);
+        }
+
+        .search-buttons {
+            display: flex;
+            gap: 10px;
+            justify-content: center;
+            align-items: center;
+            margin: 0 auto;
+            max-width: 800px;  /* Match search input max-width */
+            width: 100%;
+            padding: 0 20px;
+        }
+
+        .search-buttons .param-input {
+            width: 200px !important;  /* Override the default param-input width */
+            padding: 8px 16px;
+            background-color: rgba(255, 255, 255, 0.9);
+            border: none;
+            border-radius: 6px;
+            font-size: 14px;
+            font-weight: 500;
+            height: 35px;  /* Match button height */
+            flex: none;  /* Override flex property */
+        }
+
+        .search-buttons button {
+            width: auto;
+            min-width: 120px;
+            padding: 8px 16px;
+            background-color: rgba(37, 99, 235, 0.8);  /* Semi-transparent gray */
+            color: white;  /* White text */
+            border: none;
+            border-radius: 6px;
+            font-size: 14px;
+            font-weight: 500;
+            cursor: pointer;
+            transition: all 0.2s;
+            height: 35px;  /* Fixed height */
+            line-height: 1;  /* Ensure text vertical centering */
+        }
+
+        .search-buttons button:hover {
+            background-color: rgba(37, 99, 235, 0.9);  /* 鼠标悬停时变为深一点的蓝色 */
+            transform: translateY(-1px);
+        }
+
+        .links {
+            display: flex;
+            justify-content: center;
+            gap: 0;
+            white-space: nowrap;
+        }
+
+        .links a {
+            color: white;
+            text-decoration: none;
+            font-size: 16px;
+            opacity: 0.9;
+            transition: opacity 0.2s;
+        }
+
+        .links a:hover {
+            opacity: 1;
+            text-decoration: underline;
+        }
+
+        .container {
+            display: flex;
+            min-height: 100vh;
+            gap: 20px;
+            padding: 20px;
+        }
+
+        .column {
+            flex: 1;
+            background: white;
+            border-radius: 8px;
+            box-shadow: 0 1px 3px rgba(0,0,0,0.1);
+            padding: 20px;
+        }
+
+        h2 {
+            margin-top: 0;
+            margin-bottom: 20px;
+            color: #1f2937;
+            font-size: 18px;
+            font-weight: 600;
+        }
+
+        .param-group {
+            display: flex;
+            margin-bottom: 15px;
+            border: 1px solid #e5e7eb;
+            border-radius: 4px;
+            overflow: hidden;
+        }
+
+        .param-label {
+            width: 180px;
+            padding: 10px 15px;
+            background-color: #f8f9fa;
+            border-right: 1px solid #e5e7eb;
+            font-size: 14px;
+            line-height: 1.5;
+            color: #374151;
+        }
+
+        .param-input {
+            flex: 1;
+            padding: 10px 15px;
+            border: none;
+            font-size: 14px;
+            line-height: 1.5;
+            outline: none;
+            background: white;
+        }
+
+        select.param-input {
+            cursor: pointer;
+            padding-right: 30px;
+            appearance: none;
+            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='%236b7280' viewBox='0 0 16 16'%3E%3Cpath d='M8 10l4-4H4l4 4z'/%3E%3C/svg%3E");
+            background-repeat: no-repeat;
+            background-position: right 10px center;
+        }
+
+        textarea.param-input {
+            resize: vertical;
+            min-height: 80px;
+        }
+
+        .error-message {
+            color: #dc2626;
+            font-size: 14px;
+            margin-top: 5px;
+            display: none;
+            position: absolute;
+            bottom: -20px;
+            left: 0;
+            background: white;
+            padding: 2px 8px;
+            border-radius: 4px;
+            box-shadow: 0 1px 2px rgba(0,0,0,0.1);
+        }
+
+        .output-section {
+            margin-top: 20px;
+            padding: 0;
+            background: white;
+        }
+
+        .output-section h3 {
+            margin: 0 0 15px 0;
+            color: #1f2937;
+            font-size: 18px;
+            font-weight: 600;
+        }
+
+        .output-wrapper {
+            overflow: auto;
+            height: 100px;
+            min-height: 100px;
+            max-height: 1000px;
+            border: 1px solid #e5e7eb;
+            border-radius: 4px;
+            padding: 15px;
+            resize: vertical;
+            background-color: #f8f9fa;
+        }
+
+        #raw-output {
+            white-space: pre-wrap;
+            word-break: break-word;
+            margin: 0;
+            font-family: 'Menlo', 'Monaco', 'Courier New', monospace;
+            font-size: 13px;
+            line-height: 1.5;
+            color: #1f2937;
+        }
+
+        button:disabled {
+            background-color: #9ca3af;
+            cursor: not-allowed;
+        }
+
+        .zoom-controls {
+            display: flex;
+            align-items: center;
+            gap: 10px;
+            margin-bottom: 10px;
+        }
+
+        .zoom-button {
+            padding: 5px 10px;
+            background-color: #f3f4f6;
+            border: 1px solid #e5e7eb;
+            border-radius: 4px;
+            cursor: pointer;
+            font-size: 14px;
+            color: #374151;
+            width: auto;
+        }
+
+        .zoom-button:hover {
+            background-color: #e5e7eb;
+        }
+
+        .zoom-level {
+            font-size: 14px;
+            color: #374151;
+            min-width: 50px;
+            text-align: center;
+        }
+
+        #mermaid-container {
+            transform-origin: top left;  /* Changed from 'top center' */
+            transition: transform 0.2s ease;
+            width: 100%;
+            display: block;  /* Changed from 'flex' */
+            justify-content: flex-start;  /* Changed from 'center' */
+        }
+
+
+        .visualization-wrapper {
+            overflow: auto;
+            height: 370px;
+            min-height: 100px;
+            max-height: 1000px;
+            border: 1px solid #e5e7eb;
+            border-radius: 4px;
+            padding: 0;
+            resize: vertical;
+            background-color: #f8f9fa;
+        }
+
+        .mermaid {
+            padding: 0;
+            border-radius: 4px;
+        }
+
+        .has-visualization .placeholder-visualization {
+            display: none;
+        }
+    </style>
+</head>
+<body>
+    <div class="banner">
+        <div class="banner-content">
+            <h1>ReasonGraph: Visualisation of Reasoning Paths</h1>
+            <div class="search-area">
+                <div class="search-input-container">
+                    <textarea id="question" class="search-input" placeholder="Enter your question here..." rows="1"></textarea>
+                    <div class="error-message" id="question-error">Please enter a question</div>
+                </div>
+                <div class="search-buttons">
+                    <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>
+                </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>
+    </div>
+    
+    <div class="container">
+        <div class="column">
+            <h2>Reasoning Settings</h2>
+
+            <div class="param-group">
+                <div class="param-label">API Provider</div>
+                <select class="param-input" id="api-provider" onchange="handleProviderChange(this.value)">
+                    <!-- Populated dynamically -->
+                </select>
+            </div>
+
+            <div class="param-group">
+                <div class="param-label">Model</div>
+                <select class="param-input" id="model">
+                    <!-- Populated dynamically -->
+                </select>
+            </div>
+
+            <div class="param-group">
+                <div class="param-label">Max Tokens</div>
+                <input type="number" class="param-input" id="max-tokens">
+            </div>
+
+            <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">Please enter a valid API key</div>
+            </div>
+
+            <div class="param-group">
+                <div class="param-label">Custom Prompt Format</div>
+                <textarea class="param-input" id="prompt-format" rows="6"></textarea>
+            </div>
+            
+            <div class="output-section">
+                <h3>Raw Model Output</h3>
+                <div class="output-wrapper">
+                    <pre id="raw-output">Output will appear here...</pre>
+                </div>
+            </div>
+        </div>
+        
+        <div class="column">
+            <h2>Visualization Settings</h2>
+            
+            <div class="param-group">
+                <div class="param-label">Characters Per Line</div>
+                <input type="number" class="param-input" id="chars-per-line">
+            </div>
+
+            <div class="param-group">
+                <div class="param-label">Maximum Lines</div>
+                <input type="number" class="param-input" id="max-lines">
+            </div>
+            
+            <div class="output-section">
+                <h3>Visualization Results</h3>
+                <div class="zoom-controls">
+                    <button class="zoom-button" onclick="adjustZoom(-0.1)">-</button>
+                    <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>
+                </div>
+                <div class="visualization-wrapper">
+                    <div id="mermaid-container">
+                        <div id="mermaid-diagram"></div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <script>
+        // Initialize Mermaid
+        mermaid.initialize({ 
+            startOnLoad: true,
+            theme: 'default',
+            securityLevel: 'loose',
+            flowchart: {
+                curve: 'basis',
+                padding: 15
+            }
+        });
+
+        // Store current configuration
+        let currentConfig = null;
+
+        // Zoom control variables
+        let currentZoom = 1;
+        const MIN_ZOOM = 0.1;
+        const MAX_ZOOM = 5;
+
+        // Initialize zoom lock flag
+        window.isZoomLocked = false;
+
+        // 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;
+                } else {
+                    console.error('Failed to get API key:', result.error);
+                }
+            } catch (error) {
+                console.error('Error updating provider settings:', error);
+            }
+        }
+
+        // Load initial configuration
+        async function loadConfig() {
+            try {
+                const response = await fetch('/config');
+                currentConfig = await response.json();
+                
+                // Populate API providers
+                const providerSelect = document.getElementById('api-provider');
+                currentConfig.general.providers.forEach(provider => {
+                    const option = document.createElement('option');
+                    option.value = provider;
+                    option.textContent = provider.charAt(0).toUpperCase() + provider.slice(1);
+                    providerSelect.appendChild(option);
+                });
+
+                // Populate reasoning methods
+                const methodSelect = document.getElementById('reasoning-method');
+                Object.entries(currentConfig.methods).forEach(([id, methodConfig]) => {
+                    const option = document.createElement('option');
+                    option.value = id;
+                    option.textContent = methodConfig.name;
+                    methodSelect.appendChild(option);
+                });
+
+                // Initial provider setup
+                await handleProviderChange(currentConfig.general.providers[0]);
+
+                // Set other initial values
+                document.getElementById('max-tokens').value = currentConfig.general.max_tokens;
+                document.getElementById('chars-per-line').value = currentConfig.general.visualization.chars_per_line;
+                document.getElementById('max-lines').value = currentConfig.general.visualization.max_lines;
+                
+                // Set initial prompt format and example question
+                const defaultMethod = methodSelect.value;
+                const methodConfig = currentConfig.methods[defaultMethod];
+                updatePromptFormat(methodConfig.prompt_format);
+                updateExampleQuestion(methodConfig.example_question);
+            } catch (error) {
+                console.error('Failed to load configuration:', error);
+                showError('Failed to load configuration. Please refresh the page.');
+            }
+        }
+
+        // Update model list based on selected provider
+        function updateModelList() {
+            const provider = document.getElementById('api-provider').value;
+            const modelSelect = document.getElementById('model');
+            modelSelect.innerHTML = ''; // Clear current options
+            
+            const models = currentConfig.general.available_models;
+            const providers = currentConfig.general.model_providers;
+            
+            models.forEach(model => {
+                if (providers[model] === provider) {
+                    const option = document.createElement('option');
+                    option.value = model;
+                    option.textContent = model;
+                    modelSelect.appendChild(option);
+                }
+            });
+        }
+
+        // Update prompt format when method changes
+        document.getElementById('reasoning-method').addEventListener('change', async (event) => {
+            try {
+                const response = await fetch(`/method-config/${event.target.value}`);
+                const methodConfig = await response.json();
+                updatePromptFormat(methodConfig.prompt_format);
+                updateExampleQuestion(methodConfig.example_question);
+            } catch (error) {
+                console.error('Failed to load method configuration:', error);
+                showError('Failed to update method configuration.');
+            }
+        });
+
+        function updatePromptFormat(format) {
+            document.getElementById('prompt-format').value = format;
+        }
+
+        function updateExampleQuestion(question) {
+            document.getElementById('question').value = question;
+        }
+
+        function adjustZoom(delta) {
+            // Do nothing if zooming is locked
+            if (window.isZoomLocked) return;
+
+            const newZoom = Math.min(Math.max(currentZoom + delta, MIN_ZOOM), MAX_ZOOM);
+            if (newZoom !== currentZoom) {
+                currentZoom = newZoom;
+                applyZoom();
+            }
+        }
+
+        function resetZoom() {
+            // Do nothing if zooming is locked
+            if (window.isZoomLocked) return;
+
+            currentZoom = 1;
+            applyZoom();
+        }
+
+        function applyZoom() {
+            const container = document.getElementById('mermaid-container');
+            container.style.transform = `scale(${currentZoom})`;
+            
+            // Update zoom level display
+            const percentage = Math.round(currentZoom * 100);
+            document.getElementById('zoom-level').textContent = `${percentage}%`;
+        }
+
+        function lockVisualization() {
+            window.isZoomLocked = true;
+            const zoomButtons = document.querySelectorAll('.zoom-button');
+            zoomButtons.forEach(button => button.disabled = true);
+            document.querySelector('.visualization-wrapper').style.pointerEvents = 'none';
+        }
+
+        function unlockVisualization() {
+            window.isZoomLocked = false;
+            const zoomButtons = document.querySelectorAll('.zoom-button');
+            zoomButtons.forEach(button => button.disabled = false);
+            document.querySelector('.visualization-wrapper').style.pointerEvents = 'auto';
+        }
+
+        async function downloadDiagram() {
+            // Do nothing if zooming is locked
+            if (window.isZoomLocked) return;
+
+            const diagramContainer = document.getElementById('mermaid-diagram');
+            if (!diagramContainer || !diagramContainer.querySelector('svg')) {
+                alert('No diagram available to download');
+                return;
+            }
+
+            try {
+                // Get the SVG element
+                const svg = diagramContainer.querySelector('svg');
+                
+                // Create a copy of the SVG to modify
+                const svgCopy = svg.cloneNode(true);
+                
+                // Ensure the SVG has proper dimensions
+                const bbox = svg.getBBox();
+                svgCopy.setAttribute('width', bbox.width);
+                svgCopy.setAttribute('height', bbox.height);
+                svgCopy.setAttribute('viewBox', `${bbox.x} ${bbox.y} ${bbox.width} ${bbox.height}`);
+                
+                // Convert SVG to string
+                const serializer = new XMLSerializer();
+                const svgString = serializer.serializeToString(svgCopy);
+                
+                // Create blob and download link
+                const blob = new Blob([svgString], {type: 'image/svg+xml'});
+                const url = URL.createObjectURL(blob);
+                
+                // Create temporary link and trigger download
+                const link = document.createElement('a');
+                link.href = url;
+                link.download = 'reasoning_diagram.svg';
+                document.body.appendChild(link);
+                link.click();
+                
+                // Cleanup
+                document.body.removeChild(link);
+                URL.revokeObjectURL(url);
+            } catch (error) {
+                console.error('Error downloading diagram:', error);
+                alert('Failed to download diagram');
+            }
+        }
+
+        function validateInputs() {
+            const apiKey = document.getElementById('api-key').value.trim();
+            const question = document.getElementById('question').value.trim();
+            
+            let isValid = true;
+            
+            // Validate API Key
+            if (!apiKey) {
+                document.getElementById('api-key-error').style.display = 'block';
+                isValid = false;
+            } else {
+                document.getElementById('api-key-error').style.display = 'none';
+            }
+            
+            // Validate Question
+            if (!question) {
+                document.getElementById('question-error').style.display = 'block';
+                isValid = false;
+            } else {
+                document.getElementById('question-error').style.display = 'none';
+            }
+            
+            return isValid;
+        }
+
+        function showError(message) {
+            const rawOutput = document.getElementById('raw-output');
+            rawOutput.textContent = `Error: ${message}`;
+            rawOutput.style.color = '#dc2626';
+        }
+
+        // Process question
+        async function processQuestion(isMetaReasoning = false) {
+            if (!validateInputs()) {
+                return;
+            }
+
+            // Reset Zoom before processing question
+            resetZoom();
+            const processButton = document.getElementById('process-btn');
+            const metaButton = document.getElementById('meta-btn');
+            const rawOutput = document.getElementById('raw-output');
+            
+            processButton.disabled = true;
+            metaButton.disabled = true;
+            processButton.textContent = 'Processing...';
+            rawOutput.textContent = 'Loading...';
+            rawOutput.style.color = '#1f2937';
+            
+            // Lock visualization
+            lockVisualization();
+            
+            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: document.getElementById('reasoning-method').value,
+                chars_per_line: parseInt(document.getElementById('chars-per-line').value),
+                max_lines: parseInt(document.getElementById('max-lines').value)
+            };
+            
+            try {
+                const response = await fetch('/process', {
+                    method: 'POST',
+                    headers: {
+                        'Content-Type': 'application/json'
+                    },
+                    body: JSON.stringify(data)
+                });
+                
+                const result = await response.json();
+                
+                if (result.success) {
+                    rawOutput.textContent = result.raw_output;
+                    rawOutput.style.color = '#1f2937';
+                    
+                    if (result.visualization) {
+                        const container = document.getElementById('mermaid-diagram');
+                        container.innerHTML = result.visualization;
+                        document.getElementById('mermaid-container').classList.add('has-visualization');
+                        resetZoom();
+                        mermaid.init();
+                    }
+                } else {
+                    showError(result.error || 'Unknown error occurred');
+                }
+            } catch (error) {
+                showError('Failed to process request: ' + error.message);
+            } finally {
+                // Unlock visualization
+                unlockVisualization();
+                
+                processButton.disabled = false;
+                metaButton.disabled = false;
+                processButton.textContent = 'Start Reasoning';
+                if (isMetaReasoning) {
+                    metaButton.textContent = 'Meta Reasoning';
+                }
+            }
+        }
+
+        // Meta Reasoning function
+        async function metaReasoning() {
+            const metaButton = document.getElementById('meta-btn');
+            const rawOutput = document.getElementById('raw-output');
+            
+            try {
+                metaButton.disabled = true;
+                metaButton.textContent = 'Selecting Method...';
+                rawOutput.textContent = 'Analyzing question to select best method...';
+                
+                // Get current parameters
+                const data = {
+                    provider: document.getElementById('api-provider').value,
+                    api_key: document.getElementById('api-key').value,
+                    model: document.getElementById('model').value,
+                    question: document.getElementById('question').value
+                };
+                
+                // Call the method selection endpoint
+                const response = await fetch('/select-method', {
+                    method: 'POST',
+                    headers: {
+                        'Content-Type': 'application/json'
+                    },
+                    body: JSON.stringify(data)
+                });
+                
+                const result = await response.json();
+                
+                if (result.success) {
+                    // Set the selected method
+                    const methodSelect = document.getElementById('reasoning-method');
+                    methodSelect.value = result.selected_method;
+                    
+                    // Fetch and update the corresponding method configuration
+                    const methodResponse = await fetch(`/method-config/${result.selected_method}`);
+                    const methodConfig = await methodResponse.json();
+                    
+                    if (methodConfig) {
+                        // Update the prompt format
+                        updatePromptFormat(methodConfig.prompt_format);
+                        
+                        // Update example question if needed
+                        if (document.getElementById('question').value === '') {
+                            updateExampleQuestion(methodConfig.example_question);
+                        }
+                        
+                        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);
+                    } else {
+                        showError('Failed to load method configuration');
+                        metaButton.textContent = 'Meta Reasoning';
+                    }
+                } else {
+                    showError(result.error || 'Failed to select method');
+                    metaButton.textContent = 'Meta Reasoning';
+                }
+            } catch (error) {
+                console.error('Meta reasoning error:', error);
+                showError('Failed to execute meta reasoning');
+                metaButton.disabled = false;
+                metaButton.textContent = 'Meta Reasoning';
+            }
+        }
+
+        // Add event listener for mouse wheel zoom
+        document.querySelector('.visualization-wrapper').addEventListener('wheel', function(e) {
+            // Do nothing if zooming is locked
+            if (window.isZoomLocked) {
+                e.preventDefault();
+                return;
+            }
+
+            if (e.ctrlKey) {
+                e.preventDefault();  // Prevent default zoom
+                const delta = e.deltaY > 0 ? -0.1 : 0.1;
+                adjustZoom(delta);
+            }
+        });
+
+        // Load configuration when page loads
+        document.addEventListener('DOMContentLoaded', loadConfig);
+    </script>
+</body>
+</html>

tot_reasoning.py

@@ -0,0 +1,137 @@
+from dataclasses import dataclass
+from typing import List, Optional
+import re
+import textwrap
+from cot_reasoning import VisualizationConfig, AnthropicAPI
+
+@dataclass
+class ToTNode:
+    """Data class representing a node in the Tree of Thoughts"""
+    id: str
+    content: str
+    parent_id: Optional[str] = None
+    children: List['ToTNode'] = None
+    is_answer: bool = False
+
+    def __post_init__(self):
+        if self.children is None:
+            self.children = []
+
+@dataclass
+class ToTResponse:
+    """Data class representing a complete ToT response"""
+    question: str
+    root: ToTNode
+    answer: Optional[str] = None
+
+def parse_tot_response(response_text: str, question: str) -> ToTResponse:
+    """Parse ToT response text to extract nodes and build the tree"""
+    # Parse nodes
+    node_pattern = r'<node id="([^"]+)"(?:\s+parent="([^"]+)")?\s*>\s*(.*?)\s*</node>'
+    nodes_dict = {}
+    
+    # First pass: create all nodes
+    for match in re.finditer(node_pattern, response_text, re.DOTALL):
+        node_id = match.group(1)
+        parent_id = match.group(2)
+        content = match.group(3).strip()
+        
+        node = ToTNode(id=node_id, content=content, parent_id=parent_id)
+        nodes_dict[node_id] = node
+
+    # Second pass: build tree relationships
+    root = None
+    for node in nodes_dict.values():
+        if node.parent_id is None:
+            root = node
+        else:
+            parent = nodes_dict.get(node.parent_id)
+            if parent:
+                parent.children.append(node)
+
+    # Parse answer if present
+    answer_pattern = r'<answer>\s*(.*?)\s*</answer>'
+    answer_match = re.search(answer_pattern, response_text, re.DOTALL)
+    answer = answer_match.group(1).strip() if answer_match else None
+    
+    if answer:
+        # Mark the node leading to the answer
+        for node in nodes_dict.values():
+            if node.content.strip() in answer.strip():
+                node.is_answer = True
+
+    return ToTResponse(question=question, root=root, answer=answer)
+
+def create_mermaid_diagram(tot_response: ToTResponse, config: VisualizationConfig) -> str:
+    """Convert ToT response to Mermaid diagram"""
+    diagram = ['<div class="mermaid">', 'graph TD']
+    
+    # Add question node
+    question_content = wrap_text(tot_response.question, config)
+    diagram.append(f'    Q["{question_content}"]')
+    
+    # Track leaf nodes for connecting to answer
+    leaf_nodes = []
+    
+    def add_node_and_children(node: ToTNode, parent_id: Optional[str] = None):
+        content = wrap_text(node.content, config)
+        node_style = 'answer' if node.is_answer else 'default'
+        
+        # Add node
+        diagram.append(f'    {node.id}["{content}"]')
+        
+        # Add connection from parent
+        if parent_id:
+            diagram.append(f'    {parent_id} --> {node.id}')
+        
+        # Process children
+        if node.children:
+            for child in node.children:
+                add_node_and_children(child, node.id)
+        else:
+            # This is a leaf node
+            leaf_nodes.append(node.id)
+    
+    # Build tree structure
+    if tot_response.root:
+        diagram.append(f'    Q --> {tot_response.root.id}')
+        add_node_and_children(tot_response.root)
+    
+    # Add final answer node if answer exists
+    if tot_response.answer:
+        answer_content = wrap_text(tot_response.answer, config)
+        diagram.append(f'    Answer["{answer_content}"]')
+        # Connect all leaf nodes to the answer
+        for leaf_id in leaf_nodes:
+            diagram.append(f'    {leaf_id} --> Answer')
+        diagram.append('    class Answer final_answer;')
+    
+    # Add styles
+    diagram.extend([
+        '    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 final_answer fill:#d4edda,stroke:#28a745,stroke-width:2px;',
+        '    class Q question;',
+        '    linkStyle default stroke:#666,stroke-width:2px;'
+    ])
+    
+    diagram.append('</div>')
+    return '\n'.join(diagram)
+
+def wrap_text(text: str, config: VisualizationConfig) -> str:
+    """Wrap text to fit within box constraints"""
+    text = text.replace('\n', ' ').replace('"', "'")
+    wrapped_lines = textwrap.wrap(text, width=config.max_chars_per_line)
+    
+    if len(wrapped_lines) > config.max_lines:
+        # 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] + "...")
+    
+    return "<br>".join(wrapped_lines)