How to Build your Application
This app was built and deployed using Databutton. Databutton is an AI-powered workspace designed to facilitate the creation and sharing of data apps. It allows users to build and distribute AI and data applications by leveraging the entire Python ecosystem directly from their browser. Its user-friendly design makes it easy to turn ideas into functional applications, making it an efficient tool for both beginners and professionals​​.

Databutton has been a helpful tool in managing my ADHD during application development:

Structured Workflow: Its organized user interface reduces distractions, enhancing focus.
Speedy Prototyping: Rapid deployment keeps momentum, reducing interest loss.
Visual Interface: Aids visual learners, common in ADHD, to grasp complex concepts.
Accessible Learning: Intuitive design and clear documentation simplify skill acquisition.
Interactive Experience: Engaging, hands-on approach enhances interest and motivation.
Easy Collaboration: Facilitates teamwork and feedback, alleviating feelings of isolation.
In essence, Databutton’s features address ADHD challenges, making app development more engaging and productive.

Join The Writer's Circle event
Within a few clicks, I was able to deploy my application to the world!

Adding the Code
1. Import necessary modules:
The application starts by importing the necessary Python modules: requests, BeautifulSoup, databutton, openai, cohere, and streamlit.

import databutton as db
import requests
from bs4 import BeautifulSoup
import openai
import cohere
import streamlit as st
2. Scrape text from a webpage:
The scrape_text function sends a GET request to a provided URL and retrieves the text content of the webpage using BeautifulSoup. It returns the text if the GET request is successful, or a failure message otherwise.

def scrape_text(url):
    # Send a GET request to the URL
    response = requests.get(url)

    # If the GET request is successful, the status code will be 200
    if response.status_code == 200:
        # Get the content of the response
        page_content = response.content

        # Create a BeautifulSoup object and specify the parser
        soup = BeautifulSoup(page_content, "html.parser")

        # Get the text of the soup object
        text = soup.get_text()

        # Return the text
        return text
    else:
        return "Failed to scrape the website"
3. Create Mermaid.js chart:
The mermaid_chart function generates the HTML for the Mermaid.js diagram. This function takes the Mermaid.js code (representing the mindmap) as an input and returns the HTML code that can be used to display the mindmap.

def mermaid_chart(mindmap_code):
    html_code = f"""
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css">
    <div class="mermaid">{mindmap_code}</div>
    <script src="https://cdn.jsdelivr.net/npm/mermaid/dist/mermaid.min.js"></script>
    <script>mermaid.initialize({{startOnLoad:true}});</script>
    """
    return html_code
Example Mermaid.js code

Mermaid is a JavaScript based diagramming and charting tool that uses Markdown-inspired text definitions and a renderer to create and modify complex diagrams. The main purpose of Mermaid is to help documentation catch up with development.

mindmap
  root(Cofinder)  
    (Introduction)  
      ::icon(fa fa-info-circle)  
      (Designed to help the Cohere Community find relevant content)  
      (Users can ask natural language questions)  
      (Semantic search tool that brings together information from multiple sources)  
    (Repository Contents)  
      ::icon(fa fa-folder-open)  
      (cohere_text_preprocessing.csv)  
      (preprocessing.ipynb)  
      (main.py)  
      (cohere_text_final.csv)  
      (search_index.ann)  
    (Five Steps to Building the Application)  
      ::icon(fa fa-list-ol)  
      (Data Sources)  
        (Pre-processing the article text into chunks)  
      (Embeddings & Search Index)  
        (Use co.embed to obtain a vector representation of data)  
        (Store embeddings in a vector database)  
      (Front End)  
        (Streamlit for user interaction)  
      (Search)  
        (Use co.embed to get vector representation of user query)  
        (Use nearest neighbours to return relevant content)  
      (Answer)  
        (Use co.generate to answer the query given the context from the search results and the question)  
    (Streamlit Application)  
      ::icon(fa fa-desktop)  
      (Load libraries, data and search index)  
      (Add functions to generate embeddings to search the Annoy index for the user’s query)  
      (Generate an answer from the context)  
      (Add Streamlit search input and button to run functions)
4. Set up OpenAI API:
The application then sets up the OpenAI API by specifying the API type, base URL, version, and key.

def run_models(input_text):
    # Note: content is hidden due to length of text, you can add user and assistant roles
    response = openai.ChatCompletion.create(
        engine="GPT35turbo",
        messages=[
            {
                "role": "system",
                "content": "You are generating a mindmap for someone who has ADHD...",
            },
            {"role": "user", "content": input_text},
        ],
        temperature=0.2,
        max_tokens=400,
        top_p=0.95,
        frequency_penalty=0,
        presence_penalty=0,
        stop=None,
    )

    return response
5. Run GPT-3 model:
The run_models function creates a completion using OpenAI's GPT-3 model. It takes the scraped text as input and generates a mindmap in the form of Mermaid.js code.

6. Summarize text:
The summarise function uses the Cohere summarise API to generate a summary of the input text. Here's the code for this function:

def summarise(input_text):
    co = cohere.Client(
        db.secrets.get("COHERE_API_KEY")
    )
    response = co.summarize(
        text=input_text,
        length="long",
        format="paragraph",
        model="summarize-xlarge",
        additional_command="What are th
7. Build UI with Databutton:
The application uses Databutton to create the user interface (UI) where the user can input a URL. The application then scrapes the text from the webpage at that URL, generates a summary, generates Mermaid.js code for a mindmap, and displays the mindmap.

import databutton as db
import streamlit as st
from streamlit.components.v1 import html
from utils import scrape_text, mermaid_chart, run_models, summarise

# UI
st.title("AI Generated Mermaid.js Mindmap")

# Creating a form for both caching and clean input box on run
form = st.form("Form to run", clear_on_submit=True)

url = form.text_input("Enter your URL below:", placeholder="Paste any URL of your choice")

if form.form_submit_button("Generate Mermaid Mindmap Visual"):
    text = scrape_text(url)
    input_text = "Generate a Mermaid.js mindmap only using the text below:\n" + text
    with st.expander("See full article"):
        st.write(text)
    with st.spinner("Generating Cohere AI Summary "):
        summary = summarise(text)
        st.write("### Cohere AI Generated Summary")
        st.write(summary)

    with st.spinner("Generating Mermaid Code"):
        out = run_models(input_text)

    mindmap_code = out["choices"][0]["message"]["content"][10:-3]
    with st.expander("See OpenAI Generated Mermaid Code"):
        st.code(mindmap_code)

    # Use the html function to display the Mermaid.js diagram
    html(mermaid_chart(mindmap_code), width=1500, height=1500)
8. User Input:
The user enters a URL in the form provided in the Streamlit UI. Once the URL is submitted, the application scrapes the text from the webpage, generates a summary using Cohere API, and generates a Mermaid.js mindmap using OpenAI’s GPT-3 model. The summary and the mindmap are then displayed in the UI.

Conclusion
In conclusion, leveraging AI-generated mind maps and visual aids through NeuroMermaid AI and Databutton offers an accessible approach to support neurodiverse readers and learners.

By scraping text from websites, generating summaries, and creating mind maps, individuals with ADHD and other neurodiverse conditions can enhance their learning experience. This combination of AI and visual tools helps overcome feelings of overwhelm and promotes better understanding.

The goal is to celebrate neurodiversity, raise awareness of ADHD, and provide inclusive learning solutions. Expanding the application to incorporate various text sources and visualizations will further enrich the learning process for neurodiverse individuals, making learning more engaging and effective.

Embracing technology and empathy enables the creation of an inclusive learning environment for individuals with diverse learning needs.

Please let me know if you found this useful or would like to talk more about the development of the application to support either yourself or others and connect with me on LinkedIn.