streamlit-reasoning-visualizer 0.1.0

A Streamlit component to visualize LLM reasoning processes with collapsible thought sections and rich markdown/LaTeX rendering

Streamlit Reasoning Visualizer

A beautiful, interactive Streamlit component for visualizing LLM reasoning processes with collapsible thought sections and rich markdown/LaTeX rendering.

✨ Features

• 🧠 Collapsible Reasoning Section - Hide/show the model's chain-of-thought with smooth animations
• 📝 Rich Markdown Rendering - Full markdown support including code blocks, tables, and formatting
• 🔢 LaTeX Math Support - Beautiful equation rendering with KaTeX, including \boxed{} expressions
• 🏷️ Multi-format Tag Parsing - Supports various reasoning tag formats used by different LLMs
• 🎨 Modern UI - Clean, minimalist design with smooth animations using Framer Motion

📦 Installation

pip install streamlit-reasoning-visualizer

🚀 Quick Start

import streamlit as st
from reasoning_visualizer import visualizer

st.title("Reasoning Visualizer Demo")

# Sample response with reasoning tags
response = """<think>
Let me work through this step by step.
1. First, I need to understand the problem
2. Then, I'll apply the relevant formula
3. Finally, I'll calculate the result

Using the quadratic formula: $x = \\frac{-b \\pm \\sqrt{b^2-4ac}}{2a}$
</think>

The answer is **42**.

$$\\boxed{x = 42}$$
"""

visualizer(text=response)

🏷️ Supported Reasoning Tag Formats

The component automatically detects and parses these tag formats:

Format	Example
<think>	<think>reasoning...</think>
[THOUGHT]	[THOUGHT]reasoning...[/THOUGHT]
<reasoning>	<reasoning>reasoning...</reasoning>
<chain_of_thought>	<chain_of_thought>reasoning...</chain_of_thought>

If no tags are found, the entire text is displayed as the final answer.

📖 API Reference

visualizer(text, key=None)

Render the Reasoning Visualizer component.

Parameters:

Parameter	Type	Description
text	str	The raw text containing reasoning tags and the answer
key	str, optional	Unique key for multiple visualizer instances

Example with multiple visualizers:

visualizer(text=response1, key="viz1")
visualizer(text=response2, key="viz2")

🔧 Development

Prerequisites

• Python 3.8+
• Node.js 16+
• npm

Setup

1. Clone the repository:

git clone https://github.com/ketanmahandule/streamlit-reasoning-visualizer.git
cd streamlit-reasoning-visualizer

2. Install Python dependencies:

pip install -e ".[dev]"

3. Install frontend dependencies:

cd reasoning_visualizer/frontend
npm install

4. Start development mode:

In reasoning_visualizer/__init__.py, set _RELEASE = False, then:

# Terminal 1: Start the React dev server
cd reasoning_visualizer/frontend
npm start

# Terminal 2: Run the example app
streamlit run example.py

Building the Frontend

cd reasoning_visualizer/frontend
npm run build

Running Tests

pytest tests/ -v

🤝 Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

1. Fork the repository
2. Create your feature branch (git checkout -b feature/amazing-feature)
3. Commit your changes (git commit -m 'Add some amazing feature')
4. Push to the branch (git push origin feature/amazing-feature)
5. Open a Pull Request

📄 License

This project is licensed under the Apache License 2.0 - see the LICENSE file for details.

🙏 Acknowledgments

• Built with Streamlit
• Animations powered by Framer Motion
• Math rendering by KaTeX
• Icons from Lucide React