Visualizing Large Language Model Outputs with Mindmaps and ClojureScript

Introduction

In recent years, Large Language Models (LLMs) have revolutionized the field of natural language processing. These models can generate human-like text based on a given input, making them a valuable tool for various applications, including text analysis, sentiment analysis, and more. However, one major limitation of LLM outputs is their lack of visual representation. This makes it difficult to understand complex relationships between ideas or concepts.

To overcome this limitation, we can use mindmaps to visualize the output of LLMs. Mindmaps are a graphical representation of ideas, concepts, and relationships, making them an ideal tool for understanding complex information. In this blog post, we will explore how to integrate ClojureScript with LLM outputs using Markmap, a JavaScript library that allows us to convert Markdown text to mindmaps.

ClojureScript

Back in the early days of Pyjama, I created a quick demo on how to integrate Ollama and ClojureScript.

Sometimes we just wish the output from the LLM would be more graphical and a mindmap seems to be the perfect trick for that.

Markmap has easy support for turning markdown output to a mindmap.

Before the ClojureScript+Reagent code was something like:

[:div 
{:dangerouslySetInnerHTML 
  {:__html (js/marked.parse markdown-text)}}]

Adding a little bit of logic, we add a class to the rendered div, and we call the javascript library from the ClojureScript code directly:

(defn mindmap-view [markdown-text]
  (when (exists? (.-autoLoader js/markmap))
    (.renderAll (.-autoLoader js/markmap)))
  [:div {:class "markmap" 
         :dangerouslySetInnerHTML 
           {:__html markdown-text}}])


(defn markdown-view [markdown-text]
  (if (:mindmap @state)
    (mindmap-view markdown-text)
    [:div {:dangerouslySetInnerHTML 
             {:__html (js/marked.parse markdown-text)}}]))

In Action

A new button Map is added to the ClojureScript UI:

When pressing the Go button the LLM response is showing as before:

When pressing the Map button the LLM response is displayed as a mindmap.

This is the result of calling the markmap magic on the newly rendered markdown.

Conclusion

In this blog post, we explored how to integrate ClojureScript with LLM outputs using Markmap, a JavaScript library that allows us to convert Markdown text to mindmaps. We created a simple React-style interface in our ClojureScript application using Reagent, which includes buttons for rendering the LLM output as both Markdown and mindmaps. By leveraging the power of functional programming and concurrency, we can process large amounts of data quickly and efficiently.

Code on github.