Background / Overview

Inspired by chatbots’ edit function (ChatGPT, Perplexity, Claude, etc. ubiquitous)

When input is edited, the previous output is overwritten. Though it is saved in the cloud, it required fetching to be reviewed, and it makes the conversation impossible to visualize.

An indication of the second of 2 outputs, with arrows to switch between.

Concept / Intention

Reimagine a visually captivating map that’s easy to explore and follow. Each thought seamlessly connects to the next, allowing your train of thought to wander naturally, as if caught in a stream of consciousness dialogue with the chatbot. At any point in the back-and-forth, you can pause, revisit, or branch off in new directions, making the entire experience fluid, intuitive, and richly interactive.

Interface Design

The interface is designed to be clean and minimal, with soft, light borders that guide the eye without overwhelming it. Simple, harmonious colors create a calm atmosphere, while idle prompts gently invite interaction, keeping the experience alive even in moments of pause. Every function is direct and purposeful, reducing friction and allowing users to focus entirely on their journey. The design draws heavily from the language of directional flowcharts, where pathways are clear, choices are intuitive, and customization offers a sense of personal agency within the elegant system.

Key Features

The interface allows users to dive into individual exchanges through a focused Conversation mode, while seamlessly shifting between views with smooth transitions. In Chart mode, specific exchanges can be selected and explored, with intuitive zooming controls that make navigating complex layouts effortless. A built-in minimap provides a constant overview, ensuring users never lose their place, while a quick reset function brings everything back to center if zooming becomes disorienting. From any individual card, users can branch off into new threads or drag connections freely, with overlapping paths softly blending through subtle opacity shifts — all designed to keep the experience fluid, dynamic, and entirely in the user’s control.

User Experience Diagram (Chart Mode)

The user journey begins with a Set Goal function and then the conversation thread thereon afterwards is focused around the centralized topic. The goal the user sets can be as abstract or detailed as they wish.

Each exchange is meant to be a back-and-forth of a conversation in a chatbot thread. Think of it as a singular interaction. A singular Input Output pair.

Tools / Mediums

P5.js for prototyping layout and visual interactivity

Final coded with html + python + css

Custom Arrow Rendering

Custom Flowchart Positioning

Powered by Openai API

Dynamic Prompt Injection with Saved User Goal

Idle Prompting

Toggleable Chart vs Content Modes

Problems & Challenges

Rendering

• Issue with rendering exchanges in Conversation mode

• Issue with rendering cards in Chart mode 

• Issues with rendering arrows / connectors in Chart mode

• Issues with branching / rendering branched cards in Chart mode

• Issues with card limits in rendering in Chart mode

Aesthetic Notes

• Still wish to improve overall aesthetic

• Want to add more functions and navigation capabilities

Artist’s Note

I have trained the chatbot on the entirety of the text The 48 Laws of Power by Robert Greene in order to comment on the satirical, and later asynchronous aspects of overly-goal oriented or ego guided individuals. (It also is why I structured the chatbot with a “Set goal” function a the home page.

The 48 Laws of Power coincides with the key themes of direction and stepwise graduation in the layouts of the flowchart