Update app.py

app.py

@@ -43,8 +43,81 @@ st.set_page_config(
     }
 )
 
-PromptPrefix = 'Create a markdown outline and table with appropriate emojis for body map which define the definition parts, function, conditions of the topic of '
-PromptPrefix2 = 'Create a streamlit python user app.  Show full code listing.  Create a UI implementing each feature using variables, reusable functions with parameters, and data driven app with python libraries and streamlit components for Javascript and HTML5. Use appropriate emojis for labels to summarize and list parts, function, conditions for topic: '
+#PromptPrefix = 'Create a markdown outline and table with appropriate emojis for body map which define the definition parts, function, conditions of the topic of '
+#PromptPrefix2 = 'Create a streamlit python user app.  Show full code listing.  Create a UI implementing each feature using variables, reusable functions with parameters, and data driven app with python libraries and streamlit components for Javascript and HTML5. Use appropriate emojis for labels to summarize and list parts, function, conditions for topic: '
+
+# Prompts for App, for App Product, and App Product Code
+PromptPrefix = 'Create a body and brain health, medical, biological and knowledge outline featuring insights for medical and pharmacy professionals with streamlit markdown outlines and tables with appropriate emojis for methodical step by step rules defining the game play rules.  Use story structure architect rules to plan, structure and write three dramatic situations to include in the word game rules matching the theme for topic of '
+PromptPrefix2 = 'Create a streamlit python app with full code listing to create a UI implementing the plans, structure, situations and tables as python functions creating a body and brain health, medical, biological and knowledge outline featuring insights for medical and pharmacy professionals using streamlit to create user interface elements like emoji buttons, sliders, drop downs, and data interfaces like dataframes to show tables, session_state to track inventory, character advancement and experience, locations, file_uploader to allow the user to add images which are saved and referenced shown in gallery, camera_input to take character picture, on_change = function callbacks with continual running plots that change when you change data or click a button, randomness and word and letter rolls using emojis and st.markdown, st.expander for groupings and clusters of things, st.columns and other UI controls in streamlit as a game. Create inline data tables and list dictionaries for entities implemented as variables for the word game rule entities and stats.  Design it as a fun data driven game app and show full python code listing for this ruleset and thematic story plot line: '
+PromptPrefix3 = 'Create a HTML5 aframe and javascript app using appropriate libraries to create a body and brain health, medical, biological and knowledge outline  featuring insights for medical and pharmacy professionals with advanced libraries like aframe to render 3d scenes creating moving entities that stay within a bounding box but show text and animation in 3d for inventory, components and story entities.  Show full code listing.  Add a list of new random entities say 3 of a few different types to any list appropriately and use emojis to make things easier and fun to read.  Use appropriate emojis in labels.  Create the UI to implement storytelling in the style of a dungeon master, with features using three emoji appropriate text plot twists and recurring interesting funny fascinating and complex almost poetic named characters with genius traits and file IO, randomness, ten point choice lists, math distribution tradeoffs, witty humorous dilemnas with emoji , rewards, variables, reusable functions with parameters, and data driven app with python libraries and streamlit components for Javascript and HTML5. Use appropriate emojis for labels to summarize and list parts, function, conditions for topic:'
+
+
+
+# Function to display the entire glossary in a grid format with links
+def display_glossary_grid(roleplaying_glossary):
+    search_urls = {
+        "📖": lambda k: f"https://en.wikipedia.org/wiki/{quote(k)}",
+        "🔍": lambda k: f"https://www.google.com/search?q={quote(k)}",
+        "▶️": lambda k: f"https://www.youtube.com/results?search_query={quote(k)}",
+        "🔎": lambda k: f"https://www.bing.com/search?q={quote(k)}",
+        "🐦": lambda k: f"https://twitter.com/search?q={quote(k)}",
+        "🎲": lambda k: f"https://huggingface.co/spaces/awacke1/WordGameAI?q={quote(k)}",  # this url plus query!
+        "🃏": lambda k: f"https://huggingface.co/spaces/awacke1/WordGameAI?q={quote(PromptPrefix)}{quote(k)}",  # this url plus query!
+        "📚": lambda k: f"https://huggingface.co/spaces/awacke1/WordGameAI?q={quote(PromptPrefix2)}{quote(k)}",  # this url plus query!
+        "📚": lambda k: f"https://huggingface.co/spaces/awacke1/WordGameAI?q={quote(PromptPrefix3)}{quote(k)}",  # this url plus query!
+    }
+
+    for category, details in roleplaying_glossary.items():
+        st.write(f"### {category}")
+        cols = st.columns(len(details))  # Create dynamic columns based on the number of games
+        for idx, (game, terms) in enumerate(details.items()):
+            with cols[idx]:
+                st.markdown(f"#### {game}")
+                for term in terms:
+                    links_md = ' '.join([f"[{emoji}]({url(term)})" for emoji, url in search_urls.items()])
+                    st.markdown(f"{term} {links_md}", unsafe_allow_html=True)
+
+def display_glossary_entity(k):
+    search_urls = {
+        "📖": lambda k: f"https://en.wikipedia.org/wiki/{quote(k)}",
+        "🔍": lambda k: f"https://www.google.com/search?q={quote(k)}",
+        "▶️": lambda k: f"https://www.youtube.com/results?search_query={quote(k)}",
+        "🔎": lambda k: f"https://www.bing.com/search?q={quote(k)}",
+        "🐦": lambda k: f"https://twitter.com/search?q={quote(k)}",
+        "🎲": lambda k: f"https://huggingface.co/spaces/awacke1/WordGameAI?q={quote(k)}",  # this url plus query!
+        "🃏": lambda k: f"https://huggingface.co/spaces/awacke1/WordGameAI?q={quote(PromptPrefix)}{quote(k)}",  # this url plus query!
+        "📚": lambda k: f"https://huggingface.co/spaces/awacke1/WordGameAI?q={quote(PromptPrefix2)}{quote(k)}",  # this url plus query!
+        "📚": lambda k: f"https://huggingface.co/spaces/awacke1/WordGameAI?q={quote(PromptPrefix3)}{quote(k)}",  # this url plus query!
+    }
+    links_md = ' '.join([f"[{emoji}]({url(k)})" for emoji, url in search_urls.items()])
+    st.markdown(f"{k} {links_md}", unsafe_allow_html=True)
+
+
+
+
+# Function to display the entire glossary in a grid format with links
+def display_glossary_grid_old(body_map_data):
+    search_urls = {
+        "📖": lambda k: f"https://en.wikipedia.org/wiki/{quote(k)}",
+        "🔍": lambda k: f"https://www.google.com/search?q={quote(k)}",
+        "▶️": lambda k: f"https://www.youtube.com/results?search_query={quote(k)}",
+        "🔎": lambda k: f"https://www.bing.com/search?q={quote(k)}",
+        "🎲": lambda k: f"https://huggingface.co/spaces/awacke1/AI-ChatGPT-CPT-Body-Map-Cost?q={quote(k)}",  # this url plus query!
+        
+    }
+
+    for category, details in body_map_data.items():
+        st.write(f"### {category}")
+        cols = st.columns(len(details))  # Create dynamic columns based on the number of games
+        for idx, (game, terms) in enumerate(details.items()):
+            with cols[idx]:
+                st.markdown(f"#### {game}")
+                for term in terms:
+                    links_md = ' '.join([f"[{emoji}]({url(term)})" for emoji, url in search_urls.items()])
+                    st.markdown(f"{term} {links_md}", unsafe_allow_html=True)
+
+
+
 
 st.markdown('''### 🧠💪 BodyMapAI''')
 with st.expander("Help / About 📚", expanded=False):
@@ -256,28 +329,6 @@ def display_glossary(glossary, area):
                 st.write(f"{idx}. {term}")
 
 
-# Function to display the entire glossary in a grid format with links
-def display_glossary_grid(body_map_data):
-    search_urls = {
-        "📖": lambda k: f"https://en.wikipedia.org/wiki/{quote(k)}",
-        "🔍": lambda k: f"https://www.google.com/search?q={quote(k)}",
-        "▶️": lambda k: f"https://www.youtube.com/results?search_query={quote(k)}",
-        "🔎": lambda k: f"https://www.bing.com/search?q={quote(k)}",
-        "🎲": lambda k: f"https://huggingface.co/spaces/awacke1/AI-ChatGPT-CPT-Body-Map-Cost?q={quote(k)}",  # this url plus query!
-        
-    }
-
-    for category, details in body_map_data.items():
-        st.write(f"### {category}")
-        cols = st.columns(len(details))  # Create dynamic columns based on the number of games
-        for idx, (game, terms) in enumerate(details.items()):
-            with cols[idx]:
-                st.markdown(f"#### {game}")
-                for term in terms:
-                    links_md = ' '.join([f"[{emoji}]({url(term)})" for emoji, url in search_urls.items()])
-                    st.markdown(f"{term} {links_md}", unsafe_allow_html=True)
-
-
 game_emojis = {
     "Dungeons and Dragons": "🐉",
     "Call of Cthulhu": "🐙",
@@ -321,61 +372,50 @@ def display_buttons_with_scores():
                     response = search_glossary(query_prefix + query_body)
 
 
-def fetch_wikipedia_summary(keyword):
-    # Placeholder function for fetching Wikipedia summaries
-    # In a real app, you might use requests to fetch from the Wikipedia API
-    return f"Summary for {keyword}. For more information, visit Wikipedia."
-
-def create_search_url_youtube(keyword):
-    base_url = "https://www.youtube.com/results?search_query="
-    return base_url + keyword.replace(' ', '+')
 
-def create_search_url_bing(keyword):
-    base_url = "https://www.bing.com/search?q="
-    return base_url + keyword.replace(' ', '+')
-
-def create_search_url_wikipedia(keyword):
-    base_url = "https://www.wikipedia.org/search-redirect.php?family=wikipedia&language=en&search="
-    return base_url + keyword.replace(' ', '+')
+@st.cache_resource
+def display_videos_and_links():
+    video_files = [f for f in os.listdir('.') if f.endswith('.mp4')]
+    if not video_files:
+        st.write("No MP4 videos found in the current directory.")
+        return
+    
+    video_files_sorted = sorted(video_files, key=lambda x: len(x.split('.')[0]))
 
-def create_search_url_google(keyword):
-    base_url = "https://www.google.com/search?q="
-    return base_url + keyword.replace(' ', '+')
+    cols = st.columns(2)  # Define 2 columns outside the loop
+    col_index = 0  # Initialize column index
 
-def create_search_url_ai(keyword):
-    base_url = "https://huggingface.co/spaces/awacke1/MixableBodyMapConditionAI?q="
-    return base_url + keyword.replace(' ', '+')
+    for video_file in video_files_sorted:
+        with cols[col_index % 2]:  # Use modulo 2 to alternate between the first and second column
+            # Embedding video with autoplay and loop using HTML
+            #video_html = ("""<video width="100%" loop autoplay>   <source src="{video_file}" type="video/mp4">Your browser does not support the video tag.</video>""")
+            #st.markdown(video_html, unsafe_allow_html=True)
+            k = video_file.split('.')[0]  # Assumes keyword is the file name without extension
+            st.video(video_file, format='video/mp4', start_time=0)
+            display_glossary_entity(k)  
+        col_index += 1  # Increment column index to place the next video in the next column
 
+@st.cache_resource
 def display_images_and_wikipedia_summaries():
-    st.markdown('### Body Map Condition AI 🃏🚀📚')
-    
     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
-    
-    for image_file in image_files:
-        image = Image.open(image_file)
-        st.image(image, caption=image_file, use_column_width=True)
-        
-        keyword = image_file.split('.')[0]  # Assumes keyword is the file name without extension
-        
-        # Display Wikipedia and Google search links
-        wikipedia_url = create_search_url_wikipedia(keyword)
-        google_url = create_search_url_google(keyword)
-        youtube_url = create_search_url_youtube(keyword)
-        bing_url = create_search_url_bing(keyword)
-        ai_url = create_search_url_ai(keyword)
-        
-        
-        links_md = f"""
-        [Wikipedia]({wikipedia_url}) | 
-        [Google]({google_url}) | 
-        [YouTube]({youtube_url}) | 
-        [Bing]({bing_url}) | 
-        [AI]({ai_url})
-        """
-        st.markdown(links_md)
+    image_files_sorted = sorted(image_files, key=lambda x: len(x.split('.')[0]))
+    grid_sizes = [len(f.split('.')[0]) for f in image_files_sorted]
+    col_sizes = ['small' if size <= 4 else 'medium' if size <= 8 else 'large' for size in grid_sizes]
+    num_columns_map = {"small": 4, "medium": 3, "large": 2}
+    current_grid_size = 0
+    for image_file, col_size in zip(image_files_sorted, col_sizes):
+        if current_grid_size != num_columns_map[col_size]:
+            cols = st.columns(num_columns_map[col_size])
+            current_grid_size = num_columns_map[col_size]
+            col_index = 0
+            with cols[col_index % current_grid_size]:
+                image = Image.open(image_file)
+                st.image(image, caption=image_file, use_column_width=True)
+                k = image_file.split('.')[0]  # Assumes keyword is the file name without extension
+                display_glossary_entity(k)
 
 
 def get_all_query_params(key):
@@ -1131,27 +1171,22 @@ def main():
     
     try:
         query_params = st.query_params
-        #query = (query_params.get('q') or query_params.get('query') or [''])[0]
         query = (query_params.get('q') or query_params.get('query') or [''])
         st.markdown('# Running query: ' + query)
         if query: search_glossary(query)
     except:
-        st.markdown('No glossary lookup')
+        st.markdown(' ')
+
+    st.title("🎲🗺️ Body Map Conditions")
+    #st.markdown("## Explore the body with a body scan map which fosters self knowledge about the body.🌠")
+    #st.title("Body Map Glossary 🎲")
 
     # Display the glossary grid
+    display_videos_and_links()   # Video Jump Grid
     display_images_and_wikipedia_summaries()
-    st.title("Body Map Glossary 🎲")
     display_glossary_grid(roleplaying_glossary)
-    st.title("🎲🗺️ Body Map Conditions")
-    st.markdown("## Explore the body with a body scan map which fosters self knowledge about the body.🌠")
-    
     display_buttons_with_scores()
     
-    
-    # Assuming the roleplaying_glossary and other setup code remains the same
-    #st.write("Current Query Parameters:", st.query_params)
-    #st.markdown("### Query Parameters - These Deep Link Map to Remixable Methods, Navigate or Trigger Functionalities")
-    
     # Example: Using query parameters to navigate or trigger functionalities
     if 'action' in st.query_params:
         action = st.query_params()['action'][0]  # Get the first (or only) 'action' parameter