Update app.py

app.py

@@ -9,14 +9,421 @@ import zipfile
 import random
 import requests
 import openai
-
 from PIL import Image
 from urllib.parse import quote
 
 import streamlit as st
 import streamlit.components.v1 as components
 
-# Example base snippet: your normal Mermaid code
+# 🏰 If you do model inference via huggingface_hub
+# from huggingface_hub import InferenceClient
+
+# =====================================================================================
+#  1) GLOBAL CONFIG & PLACEHOLDERS
+# =====================================================================================
+BASE_URL = "https://huggingface.co/spaces/awacke1/MermaidMarkdownDiagramEditor"
+
+PromptPrefix = "AI-Search: "
+PromptPrefix2 = "AI-Refine: "
+PromptPrefix3 = "AI-JS: "
+
+roleplaying_glossary = {
+    "Core Rulebooks": {
+        "Dungeons and Dragons": ["Player's Handbook", "Dungeon Master's Guide", "Monster Manual"],
+        "GURPS": ["Basic Set Characters", "Basic Set Campaigns"]
+    },
+    "Campaigns & Adventures": {
+        "Pathfinder": ["Rise of the Runelords", "Curse of the Crimson Throne"]
+    }
+}
+
+transhuman_glossary = {
+    "Neural Interfaces": ["Cortex Jack", "Mind-Machine Fusion"],
+    "Cybernetics": ["Robotic Limbs", "Augmented Eyes"],
+}
+
+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}"
+
+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")
+
+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
+# =====================================================================================
+@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)}",
+    }
+    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.
+    """
+    for category, term_list in transhuman_glossary.items():
+        for term in term_list:
+            if query.lower() in term.lower():
+                st.subheader(f"Found in {category}:")
+                st.write(term)
+                return True
+    image_path = f"images/{query}.png"
+    if os.path.exists(image_path):
+        st.image(image_path, caption=f"Image for {query}")
+        return True
+    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()."""
+    st.warning("Define a redirect or link without query params if you want to truly clear them.")
+
+
+# =====================================================================================
+#  3) FILE-HANDLING (MD files, etc.)
+# =====================================================================================
+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:
+            data = file.read()
+        b64 = base64.b64encode(data.encode()).decode()
+        file_name = os.path.basename(file_path)
+        ext = os.path.splitext(file_name)[1]
+        mime_map = {
+            '.txt': 'text/plain',
+            '.py': 'text/plain',
+            '.xlsx': 'text/plain',
+            '.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.
+    """
+    all_files = glob.glob("*.md")
+    # If you want to filter out short-named or special files:
+    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)
+
+    # Buttons for "Delete All" and "Download"
+    Files1, Files2 = st.sidebar.columns(2)
+    with Files1:
+        if st.button("🗑 Delete All"):
+            for file in all_files:
+                os.remove(file)
+            st.rerun()
+    with Files2:
+        if st.button("⬇️ Download"):
+            zip_file = create_zip_of_files(all_files)
+            st.sidebar.markdown(get_zip_download_link(zip_file), unsafe_allow_html=True)
+
+    file_contents = ''
+    file_name = ''
+    next_action = ''
+
+    # Each file row
+    for file in all_files:
+        col1, col2, col3, col4, col5 = st.sidebar.columns([1,6,1,1,1])
+        with col1:
+            if st.button("🌐", key="md_"+file):
+                file_contents = load_file(file)
+                file_name = file
+                next_action = 'md'
+                st.session_state['next_action'] = next_action
+        with col2:
+            st.markdown(get_table_download_link(file), unsafe_allow_html=True)
+        with col3:
+            if st.button("📂", key="open_"+file):
+                file_contents = load_file(file)
+                file_name = file
+                next_action = 'open'
+                st.session_state['lastfilename'] = file
+                st.session_state['filename'] = file
+                st.session_state['filetext'] = file_contents
+                st.session_state['next_action'] = next_action
+        with col4:
+            if st.button("▶️", key="read_"+file):
+                file_contents = load_file(file)
+                file_name = file
+                next_action = 'search'
+                st.session_state['next_action'] = next_action
+        with col5:
+            if st.button("🗑", key="delete_"+file):
+                os.remove(file)
+                st.rerun()
+
+    if file_contents:
+        if next_action == 'open':
+            open1, open2 = st.columns([0.8, 0.2])
+            with open1:
+                file_name_input = st.text_input('File Name:', file_name, key='file_name_input')
+                file_content_area = st.text_area('File Contents:', file_contents, height=300, key='file_content_area')
+
+                if st.button('💾 Save File'):
+                    with open(file_name_input, 'w', encoding='utf-8') as f:
+                        f.write(file_content_area)
+                    st.markdown(f'Saved {file_name_input} successfully.')
+
+        elif next_action == 'search':
+            file_content_area = st.text_area("File Contents:", file_contents, height=500)
+            user_prompt = PromptPrefix2 + file_contents
+            st.markdown(user_prompt)
+            if st.button('🔍Re-Code'):
+                search_arxiv(file_contents)
+
+        elif next_action == 'md':
+            st.markdown(file_contents)
+            SpeechSynthesis(file_contents)
+            if st.button("🔍Run"):
+                st.write("Running GPT logic placeholder...")
+
+# =====================================================================================
+#  4) 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."""
+    score_file = os.path.join(score_dir, f"{key}.json")
+    if os.path.exists(score_file):
+        with open(score_file, "r") as file:
+            score_data = json.load(file)
+    else:
+        score_data = {"clicks": 0, "score": 0}
+    score_data["clicks"] += increment
+    score_data["score"] += increment
+    with open(score_file, "w") as file:
+        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:
+            score_data = json.load(file)
+        return score_data["score"]
+    return 0
+
+def display_buttons_with_scores(num_columns_text):
+    """
+    Show glossary items as clickable buttons, each increments a 'score'.
+    """
+    game_emojis = {
+        "Dungeons and Dragons": "🐉",
+        "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": "🌍",
+    }
+
+    for category, games in roleplaying_glossary.items():
+        category_emoji = topic_emojis.get(category, "🔍")
+        st.markdown(f"## {category_emoji} {category}")
+        for game, terms in games.items():
+            game_emoji = game_emojis.get(game, "🎮")
+            for term in terms:
+                key = f"{category}_{game}_{term}".replace(' ', '_').lower()
+                score_val = load_score(key)
+                if st.button(f"{game_emoji} {category} {game} {term} {score_val}", key=key):
+                    newscore = update_score(key.replace('?', ''))
+                    st.markdown(f"Scored **{category} - {game} - {term}** -> {newscore}")
+
+# =====================================================================================
+#  5) IMAGES & VIDEOS
+# =====================================================================================
+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.")
+        return
+
+    image_files_sorted = sorted(image_files, key=lambda x: len(x.split('.')[0]))
+    cols = st.columns(num_columns)
+    col_index = 0
+
+    for image_file in image_files_sorted:
+        with cols[col_index % num_columns]:
+            try:
+                image = Image.open(image_file)
+                st.image(image, use_column_width=True)
+                k = image_file.split('.')[0]
+                display_glossary_entity(k)
+                image_text_input = st.text_input(f"Prompt for {image_file}", key=f"image_prompt_{image_file}")
+                if image_text_input:
+                    response = process_image(image_file, image_text_input)
+                    st.markdown(response)
+            except:
+                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.")
+        return
+
+    video_files_sorted = sorted(video_files, key=lambda x: len(x.split('.')[0]))
+    cols = st.columns(num_columns)
+    col_index = 0
+
+    for video_file in video_files_sorted:
+        with cols[col_index % num_columns]:
+            k = video_file.split('.')[0]
+            st.video(video_file, format='video/mp4', start_time=0)
+            display_glossary_entity(k)
+            video_text_input = st.text_input(f"Video Prompt for {video_file}", key=f"video_prompt_{video_file}")
+            if video_text_input:
+                try:
+                    seconds_per_frame = 10
+                    process_video(video_file, seconds_per_frame)
+                except ValueError:
+                    st.error("Invalid input for seconds per frame!")
+        col_index += 1
+
+# =====================================================================================
+#  6) MERMAID & PARTIAL SUBGRAPH LOGIC
+# =====================================================================================
+def generate_mermaid_html(mermaid_code: str) -> str:
+    """Embed mermaid_code in a minimal HTML snippet, centered."""
+    return f"""
+    <html>
+    <head>
+        <script src="https://cdn.jsdelivr.net/npm/mermaid/dist/mermaid.min.js"></script>
+        <style>
+            .centered-mermaid {{
+                display: flex;
+                justify-content: center;
+                margin: 20px auto;
+            }}
+            .mermaid {{
+                max-width: 800px;
+            }}
+        </style>
+    </head>
+    <body>
+        <div class="mermaid centered-mermaid">
+            {mermaid_code}
+        </div>
+        <script>
+            mermaid.initialize({{ startOnLoad: true }});
+        </script>
+    </body>
+    </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 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 url.startswith("http"):
+        return url
+    return f"{BASE_URL}{url}"
+
+# We'll keep the default mermaid that references /?q=...
 DEFAULT_MERMAID = r"""
 flowchart LR
     U((User 😎)) -- "Talk 🗣️" --> LLM[LLM Agent 🤖\nExtract Info]
@@ -33,17 +440,19 @@ flowchart LR
     click KG "/?q=Knowledge%20Graph%20Ontology+GAR+RAG" "Open Knowledge Graph" "_blank"
 """
 
+# ------------------------------------------------------------------------------------
+# 🍁 Parsing and building partial subgraphs from lines like "A -- Label --> B"
+#     We'll do BFS so we can gather multiple downstream levels if we want.
+# ------------------------------------------------------------------------------------
 def parse_mermaid_edges(mermaid_text: str):
     """
     🍿 parse_mermaid_edges:
-      - Find lines like `A -- "Label" --> B`.
-      - Return adjacency dict: edges[A] = [(label, B), ...].
+      - Find lines like: A -- "Label" --> B
+      - Return adjacency dict: edges[A] = [(label, B), ...]
     """
     adjacency = {}
-    # Regex to match lines like:  A -- "Label" --> B
+    # e.g. U((User 😎)) -- "Talk 🗣️" --> LLM[LLM Agent 🤖\nExtract Info]
     edge_pattern = re.compile(r'(\S+)\s*--\s*"([^"]*)"\s*-->\s*(\S+)')
-    
-    # We split the text into lines and search for edges
     for line in mermaid_text.split('\n'):
         match = edge_pattern.search(line.strip())
         if match:
@@ -51,132 +460,228 @@ def parse_mermaid_edges(mermaid_text: str):
             if nodeA not in adjacency:
                 adjacency[nodeA] = []
             adjacency[nodeA].append((label, nodeB))
-
     return adjacency
 
-def build_subgraph(adjacency, start_node):
+def bfs_subgraph(adjacency, start_node, depth=1):
     """
-    🍎 build_subgraph:
-      - BFS or DFS from start_node to gather edges.
-      - For simplicity, we only gather direct edges from this node.
-      - If you want a multi-level downstream search, do a BFS/DFS deeper.
+    🍎 bfs_subgraph:
+      - Gather edges up to 'depth' levels from start_node
+      - If depth=1, only direct edges from node
+      - If depth=2, child and grandchild, etc.
     """
-    sub_edges = []
-    # If start_node has no adjacency, return empty
-    if start_node not in adjacency:
-        return sub_edges
-    
-    # For each edge out of start_node, store it in sub_edges
-    for label, child in adjacency[start_node]:
-        sub_edges.append((start_node, label, child))
+    from collections import deque
+    visited = set()
+    queue = deque([(start_node, 0)])
+    edges = []
 
-    return sub_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:
-      - Given a list of edges in form (A, label, B),
-      - Return a smaller flowchart snippet that includes them.
+      - build a smaller flowchart snippet with edges from BFS
     """
-    # Start with the flowchart directive
     sub_mermaid = "flowchart LR\n"
-    sub_mermaid += f"    %% Subgraph for {start_node}\n"
-
-    # For each edge, build a line:   NodeA -- "Label" --> NodeB
+    sub_mermaid += f"    %% SearchResult Subgraph starting at {start_node}\n"
     for (A, label, B) in sub_edges:
-        # Potentially you can keep the original styles or shapes (like U((User 😎))).
-        # If your original code has shapes, you can store them in a dict so A-> "U((User 😎))" etc.
         sub_mermaid += f'    {A} -- "{label}" --> {B}\n'
-    
-    # Optionally add a comment to show the subgraph ends
-    sub_mermaid += f"    %% End of subgraph for {start_node}\n"
+    sub_mermaid += "    %% End of partial subgraph\n"
     return sub_mermaid
 
-def generate_mermaid_html(mermaid_code: str) -> str:
-    """Tiny function to embed Mermaid code in HTML with a CDN."""
-    return f"""
-    <html>
-    <head>
-        <script src="https://cdn.jsdelivr.net/npm/mermaid/dist/mermaid.min.js"></script>
-        <style>
-            .centered-mermaid {{
-                display: flex;
-                justify-content: center;
-                margin: 20px auto;
-            }}
-            .mermaid {{
-                max-width: 800px;
-            }}
-        </style>
-    </head>
-    <body>
-        <div class="mermaid centered-mermaid">
-            {mermaid_code}
-        </div>
-        <script>
-            mermaid.initialize({{ startOnLoad: true }});
-        </script>
-    </body>
-    </html>
-    """
 
+# =====================================================================================
+#  7) MAIN APP
+# =====================================================================================
 def main():
-    st.set_page_config(page_title="Partial Subgraph Demo", layout="wide")
-    st.title("Partial Mermaid Subgraph from a Clicked Node")
+    st.set_page_config(page_title="Mermaid + BFS Subgraph + Full Logic", layout="wide")
+
+    # 1) Query param parsing
+    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 ""
 
-    # 1) Show the main diagram
-    st.subheader("Full Diagram:")
-    full_html = generate_mermaid_html(DEFAULT_MERMAID)
-    components.html(full_html, height=400, scrolling=True)
+    # If 'action' param is present
+    if 'action' in query_params:
+        action_list = query_params['action']
+        if action_list:
+            action = action_list[0]
+            if action == 'show_message':
+                st.success("Showing a message because 'action=show_message' was found in the URL.")
+            elif action == 'clear':
+                clear_query_params()
 
-    # 2) Build adjacency from the original code
-    adjacency = parse_mermaid_edges(DEFAULT_MERMAID)
+    # If there's a 'query=' param, display content or image
+    if 'query' in query_params:
+        query_val = query_params['query'][0]
+        display_content_or_image(query_val)
 
-    # 3) See if user clicked a shape, e.g. ?q=LLM%20Agent%20Extract%20Info
-    query_params = st.query_params
-    clicked = (query_params.get('q') or [""])[0]  # If present
-
-    if clicked:
-        # The "clicked" node might contain spaces or special chars.
-        # We typically match the "nodeId" from the code. 
-        # But your code might have the real node name "LLM" or "RE", etc.
-        # If your node is "LLM" and the label is "LLM Agent Extract Info", 
-        # you might need to map them. 
-        # For simplicity, let's assume your node ID is the same as the label 
-        # after removing spaces. 
-        # Or if your original code uses node IDs like 'LLM' or 'U'.
-        # We'll show an example:
-
-        # We can guess your node ID might be "LLM" if the text includes "LLM".
-        # Let's try a simpler approach: you store an internal mapping 
-        # from node ID -> label. We'll do a brute force approach:
-        st.info(f"User clicked shape: {clicked}")
-
-        # Suppose we want to find the adjacency key that best matches the clicked string:
-        # This is a naive approach:
-        # We'll see if 'clicked' is a substring of the adjacency's node key.
+    # 2) Let user pick ?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")
+    new_lines = []
+    for line in lines:
+        if "click " in line and '"/?' in line:
+            # try to parse out the URL
+            parts = re.split(r'click\s+\S+\s+"([^"]+)"\s+"([^"]+)"\s+"([^"]+)"', line)
+            # For example:  parts might be  [prefix, '/?q=User%20😎', 'Open User 😎', '_blank', remainder?]
+            if len(parts) == 5:
+                # Reassemble with base URL + optional model param
+                old_url = parts[1]
+                tooltip = parts[2]
+                target = parts[3]
+                # 1) base
+                new_url = inject_base_url(old_url)
+                # 2) model param
+                new_url = append_model_param(new_url, model_selected)
+
+                new_line = f"{parts[0]}\"{new_url}\" \"{tooltip}\" \"{target}\"{parts[4]}"
+                new_lines.append(new_line)
+            else:
+                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"
+    #    We'll do BFS with depth=1 or 2 for demonstration:
+    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:
+        # This may require advanced logic if your IDs differ from labels.
+        # We'll do a naive approach: if q_or_query is substring of adjacency keys.
         possible_keys = []
         for nodeKey in adjacency.keys():
-            if clicked.lower().replace("%20", " ").replace("extract info", "") in nodeKey.lower():
+            # e.g. nodeKey might be: 'LLM[LLM Agent 🤖\nExtract Info]'
+            # we'll check if q_or_query is substring ignoring spaces
+            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)
-        # If we found one or more possible matches, take the first
+
         if possible_keys:
             chosen_node = possible_keys[0]
-            # Build subgraph from adjacency
-            sub_edges = build_subgraph(adjacency, chosen_node)
+            st.info(f"Chosen node for subgraph: {chosen_node}")
+            sub_edges = bfs_subgraph(adjacency, chosen_node, depth=1)
             if sub_edges:
                 sub_mermaid = create_subgraph_mermaid(sub_edges, chosen_node)
-
-                # Display top-centered subgraph
-                st.subheader(f"SearchResult Subgraph for Node: {chosen_node}")
-                partial_html = generate_mermaid_html(sub_mermaid)
-                components.html(partial_html, height=300, scrolling=False)
-            else:
-                st.warning(f"No outgoing edges from node '{chosen_node}'.")
+                partial_subgraph_html = generate_mermaid_html(sub_mermaid)
         else:
-            st.warning("No matching node found in adjacency for that query param.")
-    else:
-        st.info("No shape clicked, or no ?q= in the query parameters.")
+            st.warning("No adjacency node matched the query param's text. Subgraph is empty.")
+
+    # 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 + model=1 logic)")
+    diagram_html = generate_mermaid_html(final_mermaid)
+    components.html(diagram_html, height=400, scrolling=True)
+
+    # 7) Editor columns: Markdown & Mermaid
+    left_col, right_col = st.columns(2)
+
+    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"
+        markdown_text = st.text_area(
+            "Edit Markdown:",
+            value=st.session_state["markdown_text"],
+            height=300
+        )
+        st.session_state["markdown_text"] = markdown_text
+
+        # Buttons
+        colA, colB = st.columns(2)
+        with colA:
+            if st.button("🔄 Refresh Markdown"):
+                st.write("**Markdown** content refreshed! 🍿")
+        with colB:
+            if st.button("❌ Clear Markdown"):
+                st.session_state["markdown_text"] = ""
+                st.rerun()
+
+        st.markdown("---")
+        st.markdown("**Preview:**")
+        st.markdown(markdown_text)
+
+    with right_col:
+        st.subheader("Mermaid Side 🧜‍♂️")
+        if "current_mermaid" not in st.session_state:
+            st.session_state["current_mermaid"] = final_mermaid
+
+        # Let user see the final code we built
+        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"):
+                st.session_state["current_mermaid"] = mermaid_input
+                st.write("**Mermaid** diagram refreshed! 🌈")
+                st.rerun()
+        with colD:
+            if st.button("❌ Clear Mermaid"):
+                st.session_state["current_mermaid"] = ""
+                st.rerun()
+
+        st.markdown("---")
+        st.markdown("**Mermaid Source:**")
+        st.code(mermaid_input, language="python", line_numbers=True)
+
+    # 8) Show the 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
+    showExtendedTextInterface = False
+    if showExtendedTextInterface:
+        # e.g. 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
+    FileSidebar()
+
+    # 11) Random title at bottom
+    titles = [
+        "🧠🎭 Semantic Symphonies & Episodic Encores",
+        "🌌🎼 AI Rhythms of Memory Lane",
+        "🎭🎉 Cognitive Crescendos & Neural Harmonies",
+        "🧠🎺 Mnemonic Melodies & Synaptic Grooves",
+        "🎼🎸 Straight Outta Cognition",
+        "🥁🎻 Jazzy Jambalaya of AI Memories",
+        "🏰 Semantic Soul & Episodic Essence",
+        "🥁🎻 The Music Of AI's Mind"
+    ]
+    st.markdown(f"**{random.choice(titles)}**")
 
 
 if __name__ == "__main__":