Visuzlize text with Mindmap

main.py

import streamlit as st
import os
import pyperclip
from streamlit.components.v1 import html
from utils import scrape_text, mermaid_chart, run_models, summarise
from bs4 import BeautifulSoup

# UI
# Put the title in the center of the screen
st.markdown("<div style='text-align: center'><h1>Analyze Text with Mindmap✨</h1></div>", unsafe_allow_html=True)

st.write(
    "<div style='text-align: center'>By Choimirai School <a href='https://twitter.com/ChoimiraiHQ'>Follow us on Twitter</a></div>",
    unsafe_allow_html=True
)

st.write("<hr>", unsafe_allow_html=True)

data_image = "notredame.png"
st.image(
    data_image,
    caption="Mindmap from the article : https://newsela.com/read/notre-dame-iron-skeleton",
)

with st.expander("Quickstart Guide", expanded=False):
    st.subheader("How this app works")
    st.write(
        """
    1. Extracts text from any website using beautiful soup: 
        - https://beautiful-soup-4.readthedocs.io/en/latest/
    2. Generates an AI summary usng Cohere Summarise API: 
        - https://txt.cohere.com/summarize-beta/
    3. Generates Mermaid.js code using OpenAI's GPT-3.5-turbo:
        - https://openai.com/
        - https://mermaid.js.org/intro/n00b-gettingStarted.html?
    4. Displays the Mindmap using html component and this source: 
        - https://cdn.jsdelivr.net/npm/mermaid/dist/mermaid.min.js
    4. AI prompt designed by Sangmin Ahn
    """
    )

    st.write("""

    > Read the supporting article here: https://medium.com/@elle.neal_71064/mind-mapping-with-ai-an-accessible-approach-for-neurodiverse-learners-1a74767359ff""")
    st.markdown(
        "#### Start by adding a URL, try a news article or a short learning material"
    )

    st.write(
        """
    Try one of these examples or use your own:
    - News article: https://www.bbc.co.uk/news/world-us-canada-65625886
    - Learning Material: https://docs.cohere.com/docs/what-is-generative-ai
    - Research: https://blog.hootsuite.com/what-is-roblox/ 
    - Code documentation : https://python.langchain.com/en/latest/index.html#

    """
    )


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


txt_or_url = form.text_input(
    ":blue[Enter text or URL below:]",
    placeholder=" Paste any text or URL of your choice",
)

# Add a dropdown to select the model
model = form.selectbox(
    "Select the model you want to use",
    ("GPT-4", "Claude"),
)

# Add a submit button
if form.form_submit_button("Generate Text Summary & Mindmap✨", type="primary"):
    # check whether the txt_or_url starts with a URL
    # if it starts with a url scrape the text from the site. 
    # Otherwise, past the text to the "text" variable
    if txt_or_url.startswith("http"):
        text = scrape_text(txt_or_url)
    else:
        text = txt_or_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 Summary "):
        summary = summarise(text)
        st.write("### Text Summary")
        st.write(summary)

    with st.spinner("Generating Mindmap Code ✨"):
        out = run_models(input_text, model)

    mindmap_code = out["choices"][0]["message"]["content"][10:-3]
    pyperclip.copy(mindmap_code)  # Copy the html_code to clipboard
    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)