Clarivue - Visual Knowledge Explorer

Understand Perplexity AI research visually via smart graphs, trees & timelines! Query/expand nodes for deep dives, beat context limits, organize LLM research. Stop reading, start seeing!

Comment

💡 Inspiration

The inspiration for Clarivue stems from a common challenge in the age of powerful AI: while AI, like Perplexity, can generate vast amounts of knowledge, these outputs are often dense blocks of text. This leads to information overload 😵 and can make it difficult and time-consuming to truly grasp the underlying connections and insights. We saw an opportunity to bridge this gap, especially for visual learners, researchers, and anyone who needs to quickly understand complex information. We wanted to transform the way users interact with AI-generated knowledge, making it more intuitive, engaging, and insightful ✨.

🚀 What it does

Clarivue is a Visual Knowledge Explorer that revolutionizes how users interact with AI-generated knowledge. It takes text responses, particularly from AI like Perplexity, and transforms them into interactive visualizations. Instead of sifting through long texts, users can:

  • 🕸️ Explore relationships and connections through interactive Concept Graphs.
  • 🌳 Understand hierarchical information with dynamic Tree structures.
  • 📅 Track events and developments using chronological Timelines.

Clarivue intelligently selects the best visualization type for a given query. Users can then interact with these visuals by clicking on nodes or elements to get more detailed information, ask follow-up questions in context, and progressively expand the visualization to uncover deeper insights. It's designed to make learning faster, research more efficient, and presentations more compelling 📊.

🛠️ How we built it

Clarivue is built with a multi-stage pipeline and a modern tech stack:

  1. 🧠 Query Classification: When a user inputs a query, our system uses Perplexity AI's sonar model to analyze the query and determine the most suitable visualization type (e.g., graph, tree, timeline).
  2. 🧬 Structured Data Generation: Based on the selected mode, we use Perplexity AI's sonar-reasoning-pro model with mode-specific prompts to transform the AI's textual response into structured data (nodes, edges, properties, chronological events, etc.) necessary for rendering the visualization.
  3. 🎨 Interactive Visualization: The structured data is then fed to the frontend to render an interactive visual using libraries like React Flow.
  4. 💬 Follow-up Interactions: Users can click on elements within the visualization to ask follow-up questions. These queries, along with the context of the selected element, are sent to sonar-reasoning-pro to provide detailed, context-aware answers.

Tech Stack:

  • Backend: Python FastAPI - serving the core logic and interacting with the Perplexity API.
  • Frontend: React TypeScript React Flow - for dynamic and interactive visualizations.
  • Database: SQLite - for session persistence.
  • AI: Perplexity AI (sonar and sonar-reasoning-pro) - for query understanding, data structuring, and Q&A.
  • Deployment: Docker Docker Compose - for easy setup.

🚧 Challenges we ran into

The most significant challenge was getting Large Language Models (LLMs) to consistently produce perfectly structured data suitable for direct use in visualizations 😥. LLMs are masters of natural language but can be finicky when strict JSON or other structured formats are required, especially for defining complex relationships like graph edges or tree hierarchies.

To overcome this, we implemented:

  • ✍️ Advanced Prompt Engineering: We developed highly specific prompts tailored for each visualization mode (graph, tree, timeline). These prompts included explicit instructions on the desired output structure, complete with examples.
  • 🔄 Iterative Refinement: We iteratively tested and refined these prompts based on the LLM's output, fine-tuning them to improve reliability.
  • 🛡️ Validation and Fallbacks (Conceptual): While not fully implemented due to time constraints, our design includes post-processing steps to validate the LLM's output and implement graceful fallbacks or request re-generation if the structure is incorrect. This was a key area of learning and development.

🎉 Accomplishments that we're proud of

  • ✨ First-of-its-Kind Integration (we believe!): Successfully creating a dynamic bridge between Perplexity AI's powerful generative capabilities and interactive, multi-format visualizations.
  • 🧠 Intelligent Visualization Routing: Developing a system that can automatically analyze a query and select an appropriate visualization type, enhancing the user experience.
  • 👆 Deep Interactivity: Enabling users to not just view, but actively explore knowledge by clicking on nodes/events for detailed information and asking contextual follow-up questions.
  • 🧩 Tackling the Structured Output Problem: Making significant headway in prompting LLMs to generate usable structured data for complex visualizations.
  • 🌍 Versatile Use Cases: Designing a tool that demonstrates clear value across diverse fields like research, education, business strategy, and personal knowledge management.
  • 🏆 Functional Prototype: Delivering a working application within the hackathon timeline that showcases the core vision of Clarivue.

🎓 What we learned

  • 🔑 Advanced Prompt Engineering is Key: The power of LLMs is massively amplified by skillful prompt design, especially for structured data tasks. It's an iterative art and science.
  • 🔗 The Nuances of LLM-to-Data Pipelines: Building reliable systems that translate natural language outputs into structured, machine-readable formats requires careful planning for validation and error handling.
  • 🤝 Frontend-Backend-AI Integration: We gained valuable experience in orchestrating a complex system involving a reactive frontend, a Python backend, and multiple calls to an external AI API.
  • 🖼️ Power of Visualization: Reaffirmed how transforming text into visuals can dramatically improve comprehension and engagement.
  • 💻 Specific Technologies: Deepened our knowledge of FastAPI, React Flow, and the practical application of Perplexity AI's API.
  • 🔄 Iterative Development: The hackathon environment underscored the importance of rapid prototyping and focusing on core features.

🚀 What's next for Clarivue - Visual Knowledge Explorer

Clarivue has a promising future with several exciting avenues for expansion:

  • ➕ Progressive Expansion: Implement the planned feature for graph and tree nodes to be progressively expandable.
  • 🗺️ More Visualization Types: Introduce new formats like mind maps, org charts, or simple charts/tables.
  • 🤖 Enhanced AI Reasoning: Further refine prompts for complex relationship inference.
  • 💾 User Accounts & Saved Visualizations: Allow users to save and share their explorations.
  • 🎨 Customization and Theming: Offer options to customize visualization appearance.
  • 🔗 Direct Data Source Integration: Allow users to connect their own data sources.
  • 🛡️ Improved Error Handling & Robustness: Strengthen data validation for LLM outputs.
  • ⚡ Performance Optimization: Continue to optimize rendering for large visualizations.
  • 👥 Collaborative Exploration: Allow multiple users to explore and annotate together.

We are excited about the potential of Clarivue to change how people interact with and understand AI-generated information, making knowledge more accessible and actionable! 🌟

Built With

Share this project:

Updates