Update README.md

README.md

@@ -199,4 +199,297 @@ This updated code reflects your requirements by:
 Changing the graph to "Knowledge Graph".
 Displaying each situation once in the graph, with attempts as child nodes.
 Matching the Journey Preview format you provided.
-Providing a clear visualization of the player's journey with multiple trees for unique situations.
+Providing a clear visualization of the player's journey with multiple trees for unique situations.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+---
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+Example of AIPP:
+
+
+Journey Preview aggregates the history correctly.  Your Journey does not.  I want the creation of the knowledge graph to be much more detail with every action and outcome shown in the graph.  Currently it will only show the first one.  Use this as a test case which should create 5 different nodes each showing the full story and then use connectors to join them all to eachother as a mind map.     🌳 Journey Preview
+💤 ('The Eternal Catnap',)
+Attempt 2: 🏃 Showcase Agility: ❌ Failure You tripped over your own paws! 🐾 Attempt 3: 🏃 Showcase Agility: ❌ Failure The enemy was too clever for your plan. 🧠 Attempt 3: 🪄 Create a Distraction: ✅ Success ⭐ Victory is sweet, just like a bowl of fresh milk! 🥛  For the demo - I want a graph very similar to Markdown Node demo below:     import streamlit as st
+from streamlit_flow import streamlit_flow
+from streamlit_flow.elements import StreamlitFlowNode, StreamlitFlowEdge
+from streamlit_flow.layouts import RadialLayout
+
+
+st.set_page_config(page_title="Markdown Node - Streamlit Flow", layout="wide")
+
+st.title("Markdown Node Demo")
+st.markdown("""The `StreamlitFlowNode` takes as input `content` within its `data` attribute which can either be plaintext, markdown or HTML.
+This can be made to show a variety of content within the node. Below is an example of a node with markdown content.""")
+
+nodes = [StreamlitFlowNode("main", (0, 0), {'content':"# Markdown Support in Nodes"}, 'input', 'bottom', width=400),
+        StreamlitFlowNode("text", (0, 0), {'content': 
+"""### Text
+Can support markdown text styles: **bold**, *italic* and `code`"""}, 'output', 'bottom', 'top'),
+
+        StreamlitFlowNode("code", (0, 0), {'content': 
+"""### Code Block 
+```python
+print('Hello World')
+```"""},'output', 'bottom', 'top'),
+
+        StreamlitFlowNode("list", (0, 0), {'content':
+"""### List
+1. Ordered
+2. And
+- Unordered
+- Lists
+"""}, 'output', 'bottom', 'top'),
+
+        StreamlitFlowNode("math", (0, 0), {'content':
+"""### Math
+$\\sum_{i=1}^{n} i = \\frac{n(n+1)}{2}$
+"""}, 'output', 'bottom', 'top'),
+
+        StreamlitFlowNode("github", (0, 0), {'content': '## Github Flavor Support'}, 'default', 'top', 'bottom'),
+
+        StreamlitFlowNode("strikethrough", (0, 0), {'content':
+"""
+### ~Strike through~
+"""}, 'output', 'bottom', 'top'),
+
+        StreamlitFlowNode("table", (0, 0), {'content':
+"""### Table
+
+| a | b  |  c |  d  |
+| - | :- | -: | :-: |
+| 1 | 2 | 3 | 4 |
+| 5 | 6 | 7 | 8 |
+
+"""}, 'output', 'top', 'right', width=160),
+
+        StreamlitFlowNode("tasks", (0, 0), {'content':
+"""## Tasklist
+
+* [ ] to do
+* [x] done
+"""}, 'output', 'top', 'bottom'),
+
+        StreamlitFlowNode("html", (0, 0), {'content':
+"""## Raw HTML"""}, 'default', 'top', 'bottom', width=200),
+    
+        StreamlitFlowNode("link", (0, 0), {'content':
+"""### Link
+<a href="https://github.com/dkapur17/streamlit-flow" target="_blank">Streamlit Flow</a>"""}, 'output', 'top', 'bottom'),
+
+        StreamlitFlowNode("expander", (0, 0), {'content':
+"""### Expander
+<details>
+<summary>Click to expand</summary>
+
+This is hidden content
+</details>
+"""}, 'output', 'top', 'bottom'),
+
+        StreamlitFlowNode("image",(0, 0), {'content':
+"""### Image
+<img src="https://raw.githubusercontent.com/dkapur17/streamlit-flow/master/assets/streamlit-flow-logo.svg" alt="Streamlit Flow Logo" width="100">
+"""}, 'output', 'top', 'bottom', width=120),
+
+        StreamlitFlowNode("video", (0, 0), {'content':
+"""### Video
+<video width="256" controls>
+        <source src="https://github.com/dkapur17/streamlit-flow/raw/master/assets/FastBuild.mp4" type="video/mp4">
+</video>
+
+"""}, 'output', 'bottom', 'top', width=300)]
+
+edges = [StreamlitFlowEdge("main-text", "main", "text", animated=True),
+        StreamlitFlowEdge("main-code", "main", "code", animated=True),
+        StreamlitFlowEdge("main-list", "main", "list", animated=True),
+        StreamlitFlowEdge("main-math", "main", "math", animated=True),
+        StreamlitFlowEdge("main-github", "main", "github", animated=True),
+        StreamlitFlowEdge("github-strikethrough", "github", "strikethrough", animated=True),
+        StreamlitFlowEdge("github-table", "github", "table", animated=True),
+        StreamlitFlowEdge("github-tasks", "github", "tasks", animated=True),
+        StreamlitFlowEdge("main-html", "main", "html", animated=True),
+        StreamlitFlowEdge("html-link", "html", "link", animated=True),
+        StreamlitFlowEdge("html-expander", "html", "expander", animated=True),
+        StreamlitFlowEdge("html-image", "html", "image", animated=True),
+        StreamlitFlowEdge("html-video", "html", "video", animated=True)]
+
+streamlit_flow('markdown_node_flow', nodes, edges, layout=RadialLayout(), fit_view=True, height=1000)
+
+
+st.divider()
+
+with st.expander("Spolier"):
+        st.code("""
+from streamlit_flow import streamlit_flow
+from streamlit_flow.elements import StreamlitFlowNode, StreamlitFlowEdge
+from streamlit_flow.layouts import RadialLayout
+        
+nodes = [StreamlitFlowNode("main", (0, 0), {'content':"# Markdown Support in Nodes"}, 'input', 'bottom', width=400),
+        StreamlitFlowNode("text", (0, 0), {'content': 
+\"""### Text
+Can support markdown text styles: **bold**, *italic* and `code`\"""}, 'output', 'bottom', 'top'),
+
+        StreamlitFlowNode("code", (0, 0), {'content': 
+\"""### Code Block 
+```python
+print('Hello World')
+```\"""},'output', 'bottom', 'top'),
+
+        StreamlitFlowNode("list", (0, 0), {'content':
+\"""### List
+1. Ordered
+2. And
+- Unordered
+- Lists
+\"""}, 'output', 'bottom', 'top'),
+
+        StreamlitFlowNode("math", (0, 0), {'content':
+\"""### Math
+$\\sum_{i=1}^{n} i = \\frac{n(n+1)}{2}$
+\"""}, 'output', 'bottom', 'top'),
+
+        StreamlitFlowNode("github", (0, 0), {'content': '## Github Flavor Support'}, 'default', 'top', 'bottom'),
+
+        StreamlitFlowNode("strikethrough", (0, 0), {'content':
+\"""
+### ~Strike through~
+\"""}, 'output', 'bottom', 'top'),
+
+        StreamlitFlowNode("table", (0, 0), {'content':
+\"""### Table
+
+| a | b  |  c |  d  |
+| - | :- | -: | :-: |
+| 1 | 2 | 3 | 4 |
+| 5 | 6 | 7 | 8 |
+
+\"""}, 'output', 'top', 'right', width=160),
+
+        StreamlitFlowNode("tasks", (0, 0), {'content':
+\"""## Tasklist
+
+* [ ] to do
+* [x] done
+\"""}, 'output', 'top', 'bottom'),
+
+        StreamlitFlowNode("html", (0, 0), {'content':
+\"""## Raw HTML\"""}, 'default', 'top', 'bottom', width=200),
+
+        StreamlitFlowNode("link", (0, 0), {'content':
+\"""### Link
+<a href="https://github.com/dkapur17/streamlit-flow" target="_blank">Streamlit Flow</a>\"""}, 'output', 'top', 'bottom'),
+
+        StreamlitFlowNode("expander", (0, 0), {'content':
+\"""### Expander
+<details>
+<summary>Click to expand</summary>
+
+This is hidden content
+</details>
+\"""}, 'output', 'top', 'bottom'),
+
+        StreamlitFlowNode("image",(0, 0), {'content':
+\"""### Image
+<img src="https://raw.githubusercontent.com/dkapur17/streamlit-flow/master/assets/streamlit-flow-logo.svg" alt="Streamlit Flow Logo" width="100">
+\"""}, 'output', 'top', 'bottom', width=120),
+
+        StreamlitFlowNode("video", (0, 0), {'content':
+\"""### Video
+<video width="256" controls>
+        <source src="https://github.com/dkapur17/streamlit-flow/raw/master/assets/FastBuild.mp4" type="video/mp4">
+</video>
+
+\"""}, 'output', 'bottom', 'top', width=300)]
+
+edges = [StreamlitFlowEdge("main-text", "main", "text", animated=True),
+        StreamlitFlowEdge("main-code", "main", "code", animated=True),
+        StreamlitFlowEdge("main-list", "main", "list", animated=True),
+        StreamlitFlowEdge("main-math", "main", "math", animated=True),
+        StreamlitFlowEdge("main-github", "main", "github", animated=True),
+        StreamlitFlowEdge("github-strikethrough", "github", "strikethrough", animated=True),
+        StreamlitFlowEdge("github-table", "github", "table", animated=True),
+        StreamlitFlowEdge("github-tasks", "github", "tasks", animated=True),
+        StreamlitFlowEdge("main-html", "main", "html", animated=True),
+        StreamlitFlowEdge("html-link", "html", "link", animated=True),
+        StreamlitFlowEdge("html-expander", "html", "expander", animated=True),
+        StreamlitFlowEdge("html-image", "html", "image", animated=True),
+        StreamlitFlowEdge("html-video", "html", "video", animated=True)]
+
+
+streamlit_flow('example_flow', 
+                nodes, 
+                edges, 
+                layout=RadialLayout(), 
+                fit_view=True, 
+                height=1000)
+""")      Also add this atop of the code so I can always be in wide mode.   # 1. Configuration
+Site_Name = '🦁CatRider🐈'
+title="🦁CatRider🐈by👤Aaron Wacker"
+helpURL='https://huggingface.co/awacke1'
+bugURL='https://huggingface.co/spaces/awacke1'
+icons='🦁'
+
+useConfig=True
+if useConfig: # Component code - useConfig=False should allow it to work if re-evaluating UI elements due to code modify
+    st.set_page_config(
+        page_title=title,
+        page_icon=icons,
+        layout="wide",
+        #initial_sidebar_state="expanded",
+        initial_sidebar_state="auto",
+        menu_items={
+            'Get Help': helpURL,
+            'Report a bug': bugURL,
+            'About': title
+        }
+    )
+
+👑 ('The Royal Tournament',)
+Attempt 2: 🏃‍♀️ Sprint Away: ❌ Failure The cat gods were not in your favor today. 🙀 Attempt 2: 🦁 Show Bravery: ✅ Success ⭐⭐ You’ve earned the title of Cat Commander! 🏅 Attempt 2: 🧠 Be Resourceful: ❌ Failure The challenge was too great this time. Better luck next time! 🍀
+
+👽 ('The Feline Invasion',)
+Attempt 1: 🏃 Showcase Agility: ✅ Success ⭐⭐⭐ You’ve earned the title of Cat Commander! 🏅
+
+🌕 ('The Feline Moon Mission',)
+Attempt 1: 🧠 Be Resourceful: ✅ Success ⭐⭐⭐⭐ Your strategy was flawless, and the victory is yours! 🎖️
+
+🚪 ('The Great Feline Escape',)
+Attempt 1: 🧠 Be Resourceful: ✅ Success ⭐⭐⭐⭐⭐ All the other cats are jealous of your agility! 🏃‍♂️
+
+🌳 Your Journey (Knowledge Graph)