DEV Community: DynamicApproach

MindMapper: Harnessing the Power of AI for Interactive Mindmaps

DynamicApproach — Mon, 05 Jun 2023 01:12:53 +0000

MindMapper: Harnessing the Power of AI for Interactive Mindmaps

For years, I've utilized mindmaps for various purposes - from understanding complex subjects during my studies to planning designs for different projects, and even preparing for exams. The ability to visualize topics and their interconnected subcategories has always helped me in efficiently organizing my ideas and thoughts. This, in turn, led to a question - what if we could automate this process, leveraging the power of AI? This question was the inspiration behind the Mindmapper project and this post will outline the basic process taken.

The AI Connection

The seed of the idea was sown during one of my sessions with OpenAI's ChatGPT. I realized how this AI, with its dynamic prompt responses, could potentially be used to create mindmaps on demand. With this realization, the concept of the Mindmapper was born.

From Concept to Reality

The Prompt Selection: The First Step

Finding the perfect prompt was a challenge. After multiple trials and fine-tuning with different prompts, I finally got the AI to provide output in a parsable format. This was a crucial step that paved the way for the automation of mindmap creation.

The Parser: Transforming the AI Output

With the correct prompt in hand, the next hurdle was to interpret the AI's output into a usable format. I decided to build a parser that would convert the AI's output markdown into JSON format. The reason behind choosing JSON was its compatibility with the "MarkmapJS" library, a tool capable of generating interactive SVG views.

The Tree Structure: Building the Mindmap

Once the JSON conversion was complete, I parsed it into a tree structure. Here, each line of the output became a node, with every node connected to a parent - the root node was formed from the first line of the output. Each subsequent line served as a child of the preceding line, establishing the structure of the mindmap.

The Final Touch: Generating and Displaying the Mindmap

With the tree structure ready, I employed MarkmapJS to generate the SVG view of the mindmap. This view was then beautifully rendered on the webpage, delivering an interactive and intuitive mindmap to the user.

Behind the Scenes: The Tech Stack and Implementation

The Mindmapper project was developed using a plethora of technologies and programming languages, including React, TypeScript, and OpenAIApi. The asynchronous handling of data retrieval and processing is specifically implemented for creating or enhancing an existing map. The application also incorporates functions for managing different states like loading and errors, and for modifying or appending to the existing markdown.

The mindmap generation is facilitated by the fetchAndAppendData and fetchData functions. They process the input data and generate a detailed mindmap. To make the mindmap as expansive and thorough as possible, the application utilizes the OpenAI API's capabilities to produce detailed completions. Other features include the ability to switch between APIs, clear the existing mindmap, and handle the submission of new map data.

Conclusion

The Mindmapper project exemplifies the fascinating intersection of AI and everyday utilities. It showcases how AI can automate and simplify our processes, leading to more efficient work and study routines. MindMapper.tsx, written in React and TypeScript, provides a compelling example of an interactive mind map application. Using modern JavaScript features like hooks and callback functions, it creates a user-friendly tool that is visually appealing and effective. Combined with the power of the OpenAI API, this project is a testament to the potential of AI in revolutionizing how we approach tasks like note-taking and studying - Creating maps that previous could have taken hours in mere minutes.

Next Steps

My future aim with the development of this project consists of a two way front. One in which shall focus on the development of an Android app in Compose, the other to enhance functionality of the current web app. The Android app will be an advanced implementation of the web app, with the ability to save and load maps from the device's storage. The web app will be enhanced with the ability to save and load maps from the browser's local storage, as well as the ability to export the map as a PNG or SVG file. Currently, this is a work in progress, and I hope to have a working prototype soon. Stay tuned for more updates!

My Tech Stack

DynamicApproach — Mon, 05 Jun 2023 01:12:12 +0000

My Tech Stack

In this post, I'll delve into the tech stack I use, discussing both the hardware and software that power my daily work and personal projects. I've found that this combination of tools and equipment greatly improves my productivity and enhances the quality of my output.

Hardware

Here's a list of my main hardware and why I chose each:

Keyboard (Tofu 65%, DZ65 RGB V3, Cherry MX Silent Red, GMK Mitolet Pulse): The mechanical nature of this keyboard provides excellent tactile feedback, increasing typing speed and reducing errors.
Mic (Rode Procaster): High-quality, professional-grade microphone perfect for crystal clear audio during team meetings and podcast recordings.
Audio (HD58x Jubilee / GoXLR Mini): The HD58x Jubilee delivers fantastic sound reproduction, while the GoXLR Mini is a powerful device for managing audio sources.
PC Specs:
- CPU (Ryzen 7 3800x): Powerful processor capable of handling demanding tasks like development and gaming.
- RAM (32gb 3600mhz): More than enough memory for running multiple applications and VMs simultaneously.
- Storage (2x 1tb nvme, 1tb ssd): Plenty of fast, reliable storage for all my files and projects.
- GPU (AMD 5700XT): Provides excellent graphical performance for gaming and multimedia tasks. Great value for money at 1440p.
- PSU (1000w): Provides stable and sufficient power supply for all my hardware.
Case (Cooler Master CSX edition 001 / 300): Sleek and spacious design allows for optimal component placement and cooling.
Monitor (MSI 32" 1440p 144hz, Samsung Odessey G9 49"): High-resolution, high-refresh rate monitors for a smooth and detailed visual experience. G9 is perfect for productivity.
Mouse (Logitech Superlight G Pro): Lightweight, accurate, and comfortable for long usage.
Peripherals (Elgato Streamdeck, Elgato Keylight x2): The Streamdeck offers customizable shortcut keys, while the Keylights provide professional-grade lighting for video calls or streams, really though, our lights just suck.
Servers (2x Dell R720): Reliable and powerful servers for hosting my home lab and various projects. The true power for when the Pis just don't cut it.
Side mount (Work MacBook Pro): A handy solution for conveniently integrating my work laptop into my setup.
Desk (Vivo Electric Standing Desk): A spacious, adjustable desk that allows me to work comfortably in both sitting and standing positions.

Cross-Platform Software

These are the apps and tools I regularly use across different platforms and why:

NPM (Node Package Manager): A must for managing JavaScript packages and dependencies.
JetBrains / VSCode: These integrated development environments (IDEs) are feature-rich and highly customizable, making coding more efficient and enjoyable.
Zsh: An interactive shell that improves upon Bash with features like advanced tab completion and shared command history.
Edge Dev: My browser of choice, chosen for its compatibility with modern web standards and integration with Microsoft services. Specifically, I use the Dev channel for the latest features and updates namely split tabs.
Teams and Discord: I use these platforms for team communication and chat; Teams for professional use and Discord for more informal and community-based interactions.
Docker Desktop: This tool allows for the development and deployment of containerized applications, ensuring consistency across environments.
GitHub Desktop: Makes Git operations easier, particularly for quickly resolving issues or performing routine tasks.
WakaTime: A valuable tool for tracking time spent on various projects, aiding in productivity analysis and project management. Waka helps me to balance my time between work and personal projects, and across personal projects.
Spaces/Jira: These tools help manage projects, tracking issues and coordinating team efforts effectively.
Python: A versatile scripting language used for a variety of tasks from automation to web development.
Java/Kotlin: I'm currently developing an Android app, for which Java and Kotlin is a primary language.
PHP: A server-side scripting language that's extensively used in my web development work.
TypeScript: A strongly-typed superset of JavaScript that I use to write safer and more reliable code for web development.
Proxmox: An open-source server virtualization management solution which I use in my home lab.
Rancher, k8s/k3s: These tools are used for managing Kubernetes in my home lab, an essential part of modern cloud and container management.
Synergy: This software allows me to seamlessly use one keyboard and mouse across multiple computers, improving my workflow when multitasking between devices. YOU SHOULD GET THIS
Atuin: This tool provides a beautifully styled history for zsh, making it easier to recall and repeat commands.YOU SHOULD GET THIS

Mac-Specific Tools

When I'm on my Mac, these are the tools I rely on:

Posthog: An open-source analytics platform that I use for tracking user interactions and performance on my web projects.
Fig: A command line tool that adds autocomplete functionality to my terminal, boosting productivity.
Alt-Tab: A utility that improves the default Alt+Tab behavior on macOS for smoother application switching.
Alfred: An improvement over Spotlight, adding more functionality and customization options for quickly finding files and launching applications.
Diskdiet: An effective tool for cleaning up my disk, helping to maintain optimal system performance.
Background Music: A useful utility for controlling my music right from the menu bar.
ASDF: A versatile version manager, letting me easily switch between different versions of various programming languages.
iTerm2: A superior terminal emulator with features like split panes and better search functionality.

Windows-Specific Tools

And on Windows, here's my go-to software:

WinZip: My tool of choice for managing zip files.
Winget / WingetUI: An application installer that helps quickly setup new Windows installations with all the necessary software.
Control Center/Streamdeck: Used for launching applications and managing various system settings.
WizTree: A disk cleanup tool that helps keep my system running optimally by freeing up storage space.
GoXLR: A digital audio mixer that provides advanced control over my audio sources and outputs.
WSL Ubuntu: The Windows Subsystem for Linux allows me to run a full-fledged Ubuntu terminal within Windows, facilitating cross-platform work.
Terminal (Windows): My preferred terminal on Windows, offering features like multiple tabs and customizable themes.
PowerToys: A set of utilities from Microsoft that enhances Windows functionality, like FancyZones for better window management.
PowerShell: A powerful scripting shell for automating tasks and managing system settings.

All these tools, each with its own strengths, combined together make my workflow smooth and efficient.

My Tech Tales: An Introduction

DynamicApproach — Mon, 05 Jun 2023 01:10:30 +0000

My Tech Tales: An Introduction

I'm Thomas Lloyd-Jones, a tech enthusiast, a problem solver, a pet parent, and now, a blogger. Born and raised in Leicester, UK, I relocated to New York State in 2009, bringing my passion for all things tech with me. It's this passion that's led me to start this blog, a platform where I can share my tech knowledge, interesting finds, and unique experiences with you all.

Professionally, I work for NYS ITS as an intern, where I do Drupal development, but my interests extend far beyond that. From programming to gaming, from running a home lab to playing with my two dogs, Sky and Midnight, and my cat, Luna, I have a wide array of hobbies that keep me busy, inspired, and constantly learning.

The path that led me to tech wasn't always straightforward. My journey began in an entirely different field - as a hairdresser. But, with a thirst for knowledge and a nudge from my supportive partner, I returned to university at 24 to study what I truly loved: technology. That period of transition fuels my unique perspective on tech and life - that it's never too late to chase what makes you tick.

Through this blog, I want to document my thoughts, share my adventures in tech, and hopefully inspire and teach you along the way. From programming tidbits to home lab setup, from reviewing my favorite gear to sharing my experience with various tools across multiple platforms, there's a lot we'll unpack here.

Speaking of gear, I take pride in my carefully chosen tech arsenal. From my Tofu 65% keyboard with a DZ65 RGB V3 PCB and Cherry MX Silent Red switches to my MSI 32" 1440p 144Hz monitor, I believe the right tools make all the difference. On the software front, I rely on a plethora of applications like Synergy, Docker Desktop, JetBrains, and more, across different platforms to enhance productivity and streamline my work.

This blog aims to be a melting pot of all these experiences and knowledge. Whether you're a tech novice or an expert developer, my hope is that you'll find something useful and interesting here. We'll delve deep into Python, Java, PHP, TypeScript, and more. We'll explore containerization with Docker, project management with Spaces, version control with GitHub, and virtualization with Proxmox. We'll even dip our toes into cross-platform apps and tools for Mac, Linux and Windows.

So, join me as we embark on this tech odyssey together. Your thoughts, feedback, and ideas are always welcome.

Stay tuned for more!

Note: All posts may be formatted by AI.