Update app.py

app.py

@@ -15,18 +15,20 @@ from urllib.parse import quote
 import streamlit as st
 import streamlit.components.v1 as components
 
-# 🏰 If you do model inference via huggingface_hub
-# from huggingface_hub import InferenceClient
+# If you do model inference via huggingface_hub:
+from huggingface_hub import InferenceClient
 
-# =====================================================================================
-#  1) GLOBAL CONFIG & PLACEHOLDERS
-# =====================================================================================
+# ----------------------------
+# Configurable BASE_URL
+# ----------------------------
 BASE_URL = "https://huggingface.co/spaces/awacke1/MermaidMarkdownDiagramEditor"
 
+# Example placeholders for prompt prefixes
 PromptPrefix = "AI-Search: "
 PromptPrefix2 = "AI-Refine: "
 PromptPrefix3 = "AI-JS: "
 
+# Example roleplaying glossary
 roleplaying_glossary = {
     "Core Rulebooks": {
         "Dungeons and Dragons": ["Player's Handbook", "Dungeon Master's Guide", "Monster Manual"],
@@ -37,75 +39,61 @@ roleplaying_glossary = {
     }
 }
 
+# Example transhuman glossary
 transhuman_glossary = {
     "Neural Interfaces": ["Cortex Jack", "Mind-Machine Fusion"],
     "Cybernetics": ["Robotic Limbs", "Augmented Eyes"],
 }
 
-
+# Simple function stubs
 def process_text(text):
-    """🕵️ process_text: detective style—prints lines to Streamlit for debugging."""
     st.write(f"process_text called with: {text}")
 
-
 def search_arxiv(text):
-    """🔭 search_arxiv: pretend to search ArXiv, just prints debug for now."""
     st.write(f"search_arxiv called with: {text}")
 
-
 def SpeechSynthesis(text):
-    """🗣 SpeechSynthesis: read lines out loud? Here, we log them for demonstration."""
     st.write(f"SpeechSynthesis called with: {text}")
 
-
 def process_image(image_file, prompt):
-    """📷 process_image: imagine an AI pipeline for images, here we just log."""
-    return f"[process_image placeholder] {image_file} => {prompt}"
-
+    return f"[process_image placeholder] Processing {image_file} with prompt: {prompt}"
 
 def process_video(video_file, seconds_per_frame):
-    """🎞 process_video: placeholder for video tasks, logs to Streamlit."""
-    st.write(f"[process_video placeholder] {video_file}, {seconds_per_frame} sec/frame")
-
+    st.write(f"[process_video placeholder] Video: {video_file}, seconds/frame: {seconds_per_frame}")
 
+# Stub if you have a Hugging Face endpoint
 API_URL = "https://huggingface-inference-endpoint-placeholder"
 API_KEY = "hf_XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX"
 
-
 @st.cache_resource
 def InferenceLLM(prompt):
-    """🔮 InferenceLLM: a stub returning a mock response for 'prompt'."""
     return f"[InferenceLLM placeholder response to prompt: {prompt}]"
 
-
-# =====================================================================================
-#  2) GLOSSARY & FILE UTILITY
-# =====================================================================================
+# ------------------------------------------
+# Glossary & File Utility
+# ------------------------------------------
 @st.cache_resource
 def display_glossary_entity(k):
     """
     Creates multiple link emojis for a single entity.
-    Each link might point to /?q=..., /?q=<prefix>..., or external sites.
     """
     search_urls = {
-        "🚀🌌ArXiv":   lambda x: f"/?q={quote(x)}",
-        "🃏Analyst":  lambda x: f"/?q={quote(x)}-{quote(PromptPrefix)}",
-        "📚PyCoder":  lambda x: f"/?q={quote(x)}-{quote(PromptPrefix2)}",
-        "🔬JSCoder":  lambda x: f"/?q={quote(x)}-{quote(PromptPrefix3)}",
-        "📖":         lambda x: f"https://en.wikipedia.org/wiki/{quote(x)}",
-        "🔍":         lambda x: f"https://www.google.com/search?q={quote(x)}",
-        "🔎":         lambda x: f"https://www.bing.com/search?q={quote(x)}",
-        "🎥":         lambda x: f"https://www.youtube.com/results?search_query={quote(x)}",
-        "🐦":         lambda x: f"https://twitter.com/search?q={quote(x)}",
+        "🚀🌌ArXiv": lambda x: f"/?q={quote(x)}",
+        "🃏Analyst": lambda x: f"/?q={quote(x)}-{quote(PromptPrefix)}",
+        "📚PyCoder": lambda x: f"/?q={quote(x)}-{quote(PromptPrefix2)}",
+        "🔬JSCoder": lambda x: f"/?q={quote(x)}-{quote(PromptPrefix3)}",
+        "📖": lambda x: f"https://en.wikipedia.org/wiki/{quote(x)}",
+        "🔍": lambda x: f"https://www.google.com/search?q={quote(x)}",
+        "🔎": lambda x: f"https://www.bing.com/search?q={quote(x)}",
+        "🎥": lambda x: f"https://www.youtube.com/results?search_query={quote(x)}",
+        "🐦": lambda x: f"https://twitter.com/search?q={quote(x)}",
     }
     links_md = ' '.join([f"[{emoji}]({url(k)})" for emoji, url in search_urls.items()])
     st.markdown(f"**{k}** <small>{links_md}</small>", unsafe_allow_html=True)
 
-
 def display_content_or_image(query):
     """
-    If 'query' is in transhuman_glossary or there's an image matching 'images/<query>.png',
-    we show it. Otherwise warn.
+    If a query matches something in transhuman_glossary or a local image, show it.
     """
     for category, term_list in transhuman_glossary.items():
         for term in term_list:
@@ -120,47 +108,41 @@ def display_content_or_image(query):
     st.warning("No matching content or image found.")
     return False
 
-
 def clear_query_params():
-    """For fully clearing, you'd do a redirect or st.experimental_set_query_params()."""
+    """
+    For clearing URL params, you'd typically use a new link or st.experimental_set_query_params().
+    Here, we just warn the user. 
+    """
     st.warning("Define a redirect or link without query params if you want to truly clear them.")
 
-
-# =====================================================================================
-#  3) FILE-HANDLING (MD files, etc.)
-# =====================================================================================
+# -----------------------
+# File Handling
+# -----------------------
 def load_file(file_path):
-    """Load file contents as UTF-8 text, or return empty on error."""
     try:
         with open(file_path, "r", encoding='utf-8') as f:
             return f.read()
     except:
         return ""
 
-
 @st.cache_resource
 def create_zip_of_files(files):
-    """Combine multiple local files into a single .zip for user to download."""
     zip_name = "Arxiv-Paper-Search-QA-RAG-Streamlit-Gradio-AP.zip"
     with zipfile.ZipFile(zip_name, 'w') as zipf:
         for file in files:
             zipf.write(file)
     return zip_name
 
-
 @st.cache_resource
 def get_zip_download_link(zip_file):
-    """Return an <a> link to download the given zip_file (base64-encoded)."""
     with open(zip_file, 'rb') as f:
         data = f.read()
     b64 = base64.b64encode(data).decode()
     return f'<a href="data:application/zip;base64,{b64}" download="{zip_file}">Download All</a>'
 
-
 def get_table_download_link(file_path):
     """
     Creates a download link for a single file from your snippet.
-    Encodes it as base64 data.
     """
     try:
         with open(file_path, 'r', encoding='utf-8') as file:
@@ -169,31 +151,28 @@ def get_table_download_link(file_path):
         file_name = os.path.basename(file_path)
         ext = os.path.splitext(file_name)[1]
         mime_map = {
-            '.txt':  'text/plain',
-            '.py':   'text/plain',
+            '.txt': 'text/plain',
+            '.py': 'text/plain',
             '.xlsx': 'text/plain',
-            '.csv':  'text/plain',
-            '.htm':  'text/html',
-            '.md':   'text/markdown',
-            '.wav':  'audio/wav'
+            '.csv': 'text/plain',
+            '.htm': 'text/html',
+            '.md': 'text/markdown',
+            '.wav': 'audio/wav'
         }
         mime_type = mime_map.get(ext, 'application/octet-stream')
         return f'<a href="data:{mime_type};base64,{b64}" target="_blank" download="{file_name}">{file_name}</a>'
     except:
         return ''
 
-
 def get_file_size(file_path):
-    """Get file size in bytes."""
     return os.path.getsize(file_path)
 
-
 def FileSidebar():
     """
-    Renders .md files in the sidebar with open/view/run/delete logic.
+    Renders .md files, providing open/view/delete/run logic in the sidebar.
     """
     all_files = glob.glob("*.md")
-    # If you want to filter out short-named or special files:
+    # Exclude short-named or special files if needed
     all_files = [f for f in all_files if len(os.path.splitext(f)[0]) >= 5]
     all_files.sort(key=lambda x: (os.path.splitext(x)[1], x), reverse=True)
 
@@ -242,6 +221,7 @@ def FileSidebar():
                 os.remove(file)
                 st.rerun()
 
+    # If we loaded a file
     if file_contents:
         if next_action == 'open':
             open1, open2 = st.columns([0.8, 0.2])
@@ -267,20 +247,19 @@ def FileSidebar():
             if st.button("🔍Run"):
                 st.write("Running GPT logic placeholder...")
 
-
-# =====================================================================================
-#  4) SCORING / GLOSSARIES
-# =====================================================================================
+# ---------------------------
+# Scoring / Glossaries
+# ---------------------------
 score_dir = "scores"
 os.makedirs(score_dir, exist_ok=True)
 
-
 def generate_key(label, header, idx):
     return f"{header}_{label}_{idx}_key"
 
-
 def update_score(key, increment=1):
-    """Increment the 'score' for a glossary item in JSON storage."""
+    """
+    Track a 'score' for each glossary item or term, saved in JSON per key.
+    """
     score_file = os.path.join(score_dir, f"{key}.json")
     if os.path.exists(score_file):
         with open(score_file, "r") as file:
@@ -293,9 +272,7 @@ def update_score(key, increment=1):
         json.dump(score_data, file)
     return score_data["score"]
 
-
 def load_score(key):
-    """Load the stored score from .json if it exists, else 0."""
     file_path = os.path.join(score_dir, f"{key}.json")
     if os.path.exists(file_path):
         with open(file_path, "r") as file:
@@ -303,31 +280,30 @@ def load_score(key):
         return score_data["score"]
     return 0
 
-
 def display_buttons_with_scores(num_columns_text):
     """
-    Show glossary items as clickable buttons, each increments a 'score'.
+    Show glossary items as clickable buttons that increment a 'score'.
     """
     game_emojis = {
         "Dungeons and Dragons": "🐉",
-        "Call of Cthulhu":       "🐙",
-        "GURPS":                 "🎲",
-        "Pathfinder":            "🗺️",
-        "Kindred of the East":   "🌅",
-        "Changeling":            "🍃",
+        "Call of Cthulhu": "🐙",
+        "GURPS": "🎲",
+        "Pathfinder": "🗺️",
+        "Kindred of the East": "🌅",
+        "Changeling": "🍃",
     }
     topic_emojis = {
-        "Core Rulebooks":            "📚",
-        "Maps & Settings":           "🗺️",
-        "Game Mechanics & Tools":    "⚙️",
-        "Monsters & Adversaries":    "👹",
-        "Campaigns & Adventures":    "📜",
-        "Creatives & Assets":        "🎨",
-        "Game Master Resources":     "🛠️",
-        "Lore & Background":         "📖",
-        "Character Development":     "🧍",
-        "Homebrew Content":          "🔧",
-        "General Topics":            "🌍",
+        "Core Rulebooks": "📚",
+        "Maps & Settings": "🗺️",
+        "Game Mechanics & Tools": "⚙️",
+        "Monsters & Adversaries": "👹",
+        "Campaigns & Adventures": "📜",
+        "Creatives & Assets": "🎨",
+        "Game Master Resources": "🛠️",
+        "Lore & Background": "📖",
+        "Character Development": "🧍",
+        "Homebrew Content": "🔧",
+        "General Topics": "🌍",
     }
 
     for category, games in roleplaying_glossary.items():
@@ -342,12 +318,10 @@ def display_buttons_with_scores(num_columns_text):
                     newscore = update_score(key.replace('?', ''))
                     st.markdown(f"Scored **{category} - {game} - {term}** -> {newscore}")
 
-
-# =====================================================================================
-#  5) IMAGES & VIDEOS
-# =====================================================================================
+# -------------------------------
+# Image & Video
+# -------------------------------
 def display_images_and_wikipedia_summaries(num_columns=4):
-    """Display .png images in a grid, referencing the name as a 'keyword'."""
     image_files = [f for f in os.listdir('.') if f.endswith('.png')]
     if not image_files:
         st.write("No PNG images found in the current directory.")
@@ -372,9 +346,7 @@ def display_images_and_wikipedia_summaries(num_columns=4):
                 st.write(f"Could not open {image_file}")
         col_index += 1
 
-
 def display_videos_and_links(num_columns=4):
-    """Displays all .mp4/.webm in a grid, plus text input for prompts."""
     video_files = [f for f in os.listdir('.') if f.endswith(('.mp4', '.webm'))]
     if not video_files:
         st.write("No MP4 or WEBM videos found in the current directory.")
@@ -398,12 +370,13 @@ def display_videos_and_links(num_columns=4):
                     st.error("Invalid input for seconds per frame!")
         col_index += 1
 
-
-# =====================================================================================
-#  6) MERMAID & PARTIAL SUBGRAPH LOGIC
-# =====================================================================================
+# --------------------------------
+# MERMAID DIAGRAM
+# --------------------------------
 def generate_mermaid_html(mermaid_code: str) -> str:
-    """Embed mermaid_code in a minimal HTML snippet, centered."""
+    """
+    Returns HTML that centers the Mermaid diagram, loading from a CDN.
+    """
     return f"""
     <html>
     <head>
@@ -430,114 +403,57 @@ def generate_mermaid_html(mermaid_code: str) -> str:
     </html>
     """
 
-
 def append_model_param(url: str, model_selected: bool) -> str:
-    """If user selects 'model=1', we append &model=1 or ?model=1 if not present."""
+    """
+    If user checks 'Append ?model=1', we append &model=1 or ?model=1 if not present.
+    """
     if not model_selected:
         return url
     delimiter = "&" if "?" in url else "?"
     return f"{url}{delimiter}model=1"
 
-
 def inject_base_url(url: str) -> str:
-    """If link doesn't start with 'http', prepend BASE_URL so it's absolute."""
+    """
+    If a link does not start with http, prepend your BASE_URL
+    so it becomes an absolute link to huggingface.co/spaces/...
+    """
     if url.startswith("http"):
         return url
     return f"{BASE_URL}{url}"
 
-
 # Our default diagram, containing the "click" lines with /?q=...
-DEFAULT_MERMAID = r"""
+DEFAULT_MERMAID = """
 flowchart LR
-    U((User 😎)) -- "Talk 🗣️" --> LLM[LLM Agent 🤖\nExtract Info]
-    click U "/?q=User%20😎" "Open 'User 😎'" "_blank"
-    click LLM "/?q=LLM%20Agent%20Extract%20Info" "Open LLM" "_blank"
+    U((User 😎)) -- "Talk 🗣️" --> LLM[LLM Agent 🤖\\nExtract Info]
+    click U "/?q=User%20😎" _self
+    click LLM "/?q=LLM%20Agent%20Extract%20Info" _blank
 
-    LLM -- "Query 🔍" --> HS[Hybrid Search 🔎\nVector+NER+Lexical]
-    click HS "/?q=Hybrid%20Search%20Vector+NER+Lexical" "Open HS" "_blank"
+    LLM -- "Query 🔍" --> HS[Hybrid Search 🔎\\nVector+NER+Lexical]
+    click HS "/?q=Hybrid%20Search%20Vector+NER+Lexical" _blank
 
-    HS -- "Reason 🤔" --> RE[Reasoning Engine 🛠️\nNeuralNetwork+Medical]
-    click RE "/?q=Reasoning%20Engine%20NeuralNetwork+Medical" "Open RE" "_blank"
+    HS -- "Reason 🤔" --> RE[Reasoning Engine 🛠️\\nNeuralNetwork+Medical]
+    click RE "/?q=Reasoning%20Engine%20NeuralNetwork+Medical" _blank
 
-    RE -- "Link 📡" --> KG((Knowledge Graph 📚\nOntology+GAR+RAG))
-    click KG "/?q=Knowledge%20Graph%20Ontology+GAR+RAG" "Open KG" "_blank"
+    RE -- "Link 📡" --> KG((Knowledge Graph 📚\\nOntology+GAR+RAG))
+    click KG "/?q=Knowledge%20Graph%20Ontology+GAR+RAG" _blank
 """
 
-
-# BFS subgraph: we parse lines like A -- "Label" --> B
-def parse_mermaid_edges(mermaid_text: str):
-    """
-    🍿 parse_mermaid_edges:
-      - Find lines like: A -- "Label" --> B
-      - Return adjacency dict: edges[A] = [(label, B), ...]
-    """
-    adjacency = {}
-    # e.g. U((User 😎)) -- "Talk 🗣️" --> LLM[LLM Agent 🤖\nExtract Info]
-    edge_pattern = re.compile(r'(\S+)\s*--\s*"([^"]*)"\s*-->\s*(\S+)')
-    for line in mermaid_text.split('\n'):
-        match = edge_pattern.search(line.strip())
-        if match:
-            nodeA, label, nodeB = match.groups()
-            if nodeA not in adjacency:
-                adjacency[nodeA] = []
-            adjacency[nodeA].append((label, nodeB))
-    return adjacency
-
-
-def bfs_subgraph(adjacency, start_node, depth=1):
-    """
-    🍎 bfs_subgraph:
-      - Gather edges up to 'depth' levels from start_node
-      - If depth=1, only direct edges from node
-    """
-    from collections import deque
-    visited = set()
-    queue = deque([(start_node, 0)])
-    edges = []
-
-    while queue:
-        current, lvl = queue.popleft()
-        if current in visited:
-            continue
-        visited.add(current)
-
-        if current in adjacency and lvl < depth:
-            for (label, child) in adjacency[current]:
-                edges.append((current, label, child))
-                queue.append((child, lvl + 1))
-
-    return edges
-
-
-def create_subgraph_mermaid(sub_edges, start_node):
-    """
-    🍄 create_subgraph_mermaid:
-      - build a smaller flowchart snippet with edges from BFS
-    """
-    sub_mermaid = "flowchart LR\n"
-    sub_mermaid += f"    %% Subgraph for {start_node}\n"
-    if not sub_edges:
-        sub_mermaid += f"    {start_node}\n"
-        sub_mermaid += "    %% End of partial subgraph\n"
-        return sub_mermaid
-    for (A, label, B) in sub_edges:
-        sub_mermaid += f'    {A} -- "{label}" --> {B}\n'
-    sub_mermaid += "    %% End of partial subgraph\n"
-    return sub_mermaid
-
-
-# =====================================================================================
-#  7) MAIN APP
-# =====================================================================================
 def main():
-    st.set_page_config(page_title="Mermaid + BFS Subgraph + Full Logic", layout="wide")
+    st.set_page_config(page_title="Mermaid + Clickable Links with Base URL", layout="wide")
 
-    # 1) Query param parsing
+    # ---------------------------------------------
+    # Query Param Parsing (non-experimental)
+    # ---------------------------------------------
     query_params = st.query_params
     query_list = (query_params.get('q') or query_params.get('query') or [''])
-    q_or_query = query_list[0].strip() if len(query_list) > 0 else ""
-
-    # If 'action' param is present
+    q_or_query = query_list[0] if query_list else ''
+    if q_or_query.strip():
+        # If there's a q= or query= param, do some processing
+        search_payload = PromptPrefix + q_or_query
+        st.markdown(search_payload)
+        process_text(search_payload)
+
+    # If an 'action' param is present
     if 'action' in query_params:
         action_list = query_params['action']
         if action_list:
@@ -547,92 +463,69 @@ def main():
             elif action == 'clear':
                 clear_query_params()
 
-    # If there's a 'query=' param, display content or image
+    # If a 'query' param is present, show content or image
     if 'query' in query_params:
         query_val = query_params['query'][0]
         display_content_or_image(query_val)
 
-    # 2) Let user pick ?model=1
+    # ---------------------------------------------
+    # Let user pick if we want ?model=1
+    # ---------------------------------------------
     st.sidebar.write("## Diagram Link Settings")
     model_selected = st.sidebar.checkbox("Append ?model=1 to each link?")
 
-    # 3) We'll parse adjacency from DEFAULT_MERMAID, then do the injection for base URL
-    #    and possible model param. We'll store the final mermaid code in session.
-    lines = DEFAULT_MERMAID.strip().split("\n")
+    # ---------------------------------------------
+    # Rebuild the clickable lines in the Mermaid code
+    # ---------------------------------------------
+    base_diagram = DEFAULT_MERMAID
+    lines = base_diagram.strip().split("\n")
     new_lines = []
+
     for line in lines:
+        # We look for lines like: click SOMENODE "/?q=Something" _self
         if "click " in line and '"/?' in line:
-            # Try to parse out the URL via a simpler pattern
-            # e.g. click U "/?q=User%20😎" "Open 'User 😎'" "_blank"
-            # We'll do a quick re.split capturing 4 groups
-            # Example: [prefix, '/?q=User%20😎', "Open 'User 😎'", '_blank', remainder?]
-            pattern = r'(click\s+\S+\s+)"([^"]+)"\s+"([^"]+)"\s+"([^"]+)"'
-            match = re.match(pattern, line.strip())
-            if match:
-                prefix_part = match.group(1)   # e.g. "click U "
-                old_url     = match.group(2)  # e.g. /?q=User%20😎
-                tooltip     = match.group(3)  # e.g. Open 'User 😎'
-                target      = match.group(4)  # e.g. _blank
-
-                # 1) base
+            # Try to extract the URL part
+            parts = re.split(r'click\s+\S+\s+"([^"]+)"\s+("_self")', line)
+            if len(parts) == 4:
+                # Example:
+                # parts[0] -> 'click LLM '
+                # parts[1] -> '/?q=LLM%20Agent%20Extract%20Info'
+                # parts[2] -> ' _self'
+                # parts[3] -> '' or trailing
+                old_url = parts[1]
+                # 1) Prepend base if needed
                 new_url = inject_base_url(old_url)
-                # 2) model param
+                # 2) Possibly add &model=1
                 new_url = append_model_param(new_url, model_selected)
 
-                new_line = f'{prefix_part}"{new_url}" "{tooltip}" "{target}"'
+                # Recombine
+                new_line = f"{parts[0]}\"{new_url}\" {parts[2]}"
                 new_lines.append(new_line)
             else:
+                # If we can't parse it, keep it as is
                 new_lines.append(line)
         else:
             new_lines.append(line)
 
-    final_mermaid = "\n".join(new_lines)
-    adjacency = parse_mermaid_edges(final_mermaid)
-
-    # 4) If user clicked a shape => we show a partial subgraph as "SearchResult"
-    partial_subgraph_html = ""
-    if q_or_query:
-        st.info(f"process_text called with: {PromptPrefix}{q_or_query}")
-
-        # Attempt to find a node whose ID or label includes q_or_query:
-        # We'll do a naive approach: if q_or_query is substring ignoring spaces
-        possible_keys = []
-        for nodeKey in adjacency.keys():
-            # e.g. nodeKey might be 'U((User 😎))'
-            simplified_key = nodeKey.replace("\\n", " ").replace("[", "").replace("]", "").lower()
-            simplified_query = q_or_query.lower().replace("%20", " ")
-            if simplified_query in simplified_key:
-                possible_keys.append(nodeKey)
-
-        chosen_node = None
-        if possible_keys:
-            chosen_node = possible_keys[0]
-        else:
-            st.warning("No adjacency node matched the query param's text. Subgraph is empty.")
-
-        if chosen_node:
-            sub_edges = bfs_subgraph(adjacency, chosen_node, depth=1)
-            sub_mermaid = create_subgraph_mermaid(sub_edges, chosen_node)
-            partial_subgraph_html = generate_mermaid_html(sub_mermaid)
-
-    # 5) Show partial subgraph top-center if we have any
-    if partial_subgraph_html:
-        st.subheader("SearchResult Subgraph")
-        components.html(partial_subgraph_html, height=300, scrolling=False)
-
-    # 6) Render the top-centered *full* diagram
-    st.title("Full Mermaid Diagram (with Base URL + BFS partial subgraphs)")
+    mermaid_code = "\n".join(new_lines)
 
-    diagram_html = generate_mermaid_html(final_mermaid)
+    # ---------------------------------------------
+    # Render the top-centered Mermaid diagram
+    # ---------------------------------------------
+    st.sidebar.markdown("Mermaid Diagram with Base URL Injection")
+    diagram_html = generate_mermaid_html(mermaid_code)
     components.html(diagram_html, height=400, scrolling=True)
 
-    # 7) Editor columns: Markdown & Mermaid
+    # ---------------------------------------------
+    # Two-column interface: Markdown & Mermaid
+    # ---------------------------------------------
     left_col, right_col = st.columns(2)
 
+    # --- Left: Markdown Editor
     with left_col:
         st.subheader("Markdown Side 📝")
         if "markdown_text" not in st.session_state:
-            st.session_state["markdown_text"] = "## Hello!\nYou can type some *Markdown* here.\n"
+            st.session_state["markdown_text"] = "## Hello!\nType some *Markdown* here.\n"
         markdown_text = st.text_area(
             "Edit Markdown:",
             value=st.session_state["markdown_text"],
@@ -640,7 +533,6 @@ def main():
         )
         st.session_state["markdown_text"] = markdown_text
 
-        # Buttons
         colA, colB = st.columns(2)
         with colA:
             if st.button("🔄 Refresh Markdown"):
@@ -654,16 +546,20 @@ def main():
         st.markdown("**Preview:**")
         st.markdown(markdown_text)
 
+    # --- Right: Mermaid Editor
     with right_col:
         st.subheader("Mermaid Side 🧜‍♂️")
+
+        # We store the final code in session state, so user can edit
         if "current_mermaid" not in st.session_state:
-            st.session_state["current_mermaid"] = final_mermaid
+            st.session_state["current_mermaid"] = mermaid_code
 
         mermaid_input = st.text_area(
             "Edit Mermaid Code:",
             value=st.session_state["current_mermaid"],
             height=300
         )
+
         colC, colD = st.columns(2)
         with colC:
             if st.button("🎨 Refresh Diagram"):
@@ -679,27 +575,35 @@ def main():
         st.markdown("**Mermaid Source:**")
         st.code(mermaid_input, language="python", line_numbers=True)
 
-    # 8) Show the galleries
+    # ---------------------------------------------
+    # Media Galleries
+    # ---------------------------------------------
     st.markdown("---")
     st.header("Media Galleries")
+
     num_columns_images = st.slider("Choose Number of Image Columns", 1, 15, 5, key="num_columns_images")
     display_images_and_wikipedia_summaries(num_columns_images)
 
     num_columns_video = st.slider("Choose Number of Video Columns", 1, 15, 5, key="num_columns_video")
     display_videos_and_links(num_columns_video)
 
-    # 9) Possibly show extended text interface
+    # (Optionally) Extended text interface
     showExtendedTextInterface = False
     if showExtendedTextInterface:
-        # e.g. display_glossary_grid(roleplaying_glossary)
+        # For example:
+        # display_glossary_grid(roleplaying_glossary)
         # num_columns_text = st.slider("Choose Number of Text Columns", 1, 15, 4)
         # display_buttons_with_scores(num_columns_text)
         pass
 
-    # 10) Render the file sidebar
+    # ---------------------------------------------
+    # File Sidebar
+    # ---------------------------------------------
     FileSidebar()
 
-    # 11) Random title at bottom
+    # ---------------------------------------------
+    # Random Title at the bottom
+    # ---------------------------------------------
     titles = [
         "🧠🎭 Semantic Symphonies & Episodic Encores",
         "🌌🎼 AI Rhythms of Memory Lane",