README.md

metadata

title: CatRider
emoji: 🐱🏍️🌟
colorFrom: indigo
colorTo: green
sdk: streamlit
sdk_version: 1.38.0
app_file: app.py
pinned: false
license: mit

Explanation of Updates: Renamed the Graph Function and Title:

Renamed the function create_heterogeneous_graph to create_knowledge_graph to match your request. Changed the display title from "Your Journey (Heterogeneous Graph)" to "Your Journey (Knowledge Graph)". Adjusted the function calls in the main application to reflect the new function name. Modified the Graph Structure in create_knowledge_graph:

Situation Nodes:

Each unique situation is represented by a single node. Created a node for each situation only once by checking if the situation node ID is already in node_ids. Attempt Nodes:

For each action (attempt), created a child node under the corresponding situation node. The attempt node includes the action, outcome, conclusion, and stars reflecting the score. Edges:

Created an edge from the situation node to each attempt node. This results in a tree structure under each situation node showing all attempts. python Copy code def create_knowledge_graph(history_df): nodes = [] edges = [] node_ids = {} for index, row in history_df.iterrows(): situation_node_id = f"situation_{row['situation_id']}" action_node_id = f"action_{index}"

    # Situation node
    if situation_node_id not in node_ids:
        situation_node = StreamlitFlowNode(
            situation_node_id,
            pos=(0, 0),
            data={'content': f"{row['situation_emoji']} {row['situation_name']}"},
            type='default',
            shape='ellipse'
        )
        nodes.append(situation_node)
        node_ids[situation_node_id] = situation_node_id

    # Attempt node (action and outcome)
    outcome_content = '✅ Success' if row['outcome'] else '❌ Failure'
    stars = '⭐' * int(row['score'])
    attempt_node = StreamlitFlowNode(
        action_node_id,
        pos=(0, 0),
        data={'content': f"{row['action_emoji']} {row['action_name']} ({outcome_content})\n{row['conclusion']}\n{stars}"},
        type='default',
        shape='rectangle'
    )
    nodes.append(attempt_node)

    # Edge from situation to attempt
    edges.append(StreamlitFlowEdge(
        id=f"edge_{situation_node_id}_{action_node_id}",
        source=situation_node_id,
        target=action_node_id,
        animated=True
    ))

return nodes, edges

Updated the Markdown Preview in create_markdown_preview:

Modified the markdown structure to group attempts under each unique situation, regardless of the attempt number. The output now matches the format you provided, showing multiple attempts per situation. python Copy code def create_markdown_preview(history_df): markdown = "## 🌳 Journey Preview\n\n" grouped = history_df.groupby(['situation_name'], sort=False)

for situation_name, group in grouped:
    markdown += f"### {group.iloc[0]['situation_emoji']} **{situation_name}**\n"
    for _, row in group.iterrows():
        outcome_str = '✅ Success' if row['outcome'] else '❌ Failure'
        stars = '⭐' * int(row['score'])
        markdown += f"- Attempt {row['attempt']}: {row['action_emoji']} **{row['action_name']}**: {outcome_str} {stars}\n"
        markdown += f"  - {row['conclusion']}\n"
    markdown += "\n"
return markdown

Ensured the Graph Reflects the Journey Preview:

The graph now displays each unique situation once, with all attempts as child nodes. This results in multiple trees, one for each situation, matching the three trees in your example. Adjusted the Main Function to Reflect Changes:

Updated the function calls to use create_knowledge_graph instead of create_heterogeneous_graph. Changed the display title accordingly. python Copy code

Integration point for both functions

if not game_state['history_df'].empty: # 📝 Display Markdown Preview st.markdown(create_markdown_preview(game_state['history_df']))

# 🌳 Display Knowledge Journey Graph
st.markdown("## 🌳 Your Journey (Knowledge Graph)")
nodes, edges = create_knowledge_graph(game_state['history_df'])
try:
    streamlit_flow('cat_rider_flow',
                   nodes,
                   edges,
                   layout=TreeLayout(direction='down'),
                   fit_view=True,
                   height=600)
except Exception as e:
    st.error(f"An error occurred while rendering the journey graph: {str(e)}")
    st.markdown("Please try refreshing the page if the graph doesn't appear.")

How It Now Works: Graph Structure:

Each unique situation is a node in the graph. All attempts (actions taken) under a situation are child nodes connected to the situation node. Both failures and successes are displayed as child nodes. This creates a tree structure for each situation, reflecting the multiple attempts. Journey Preview:

The markdown preview shows the situations, with attempts listed under each. Attempts include the action taken, outcome, score (stars), and conclusion. The format matches the example you provided. Multiple Trees:

If the player encounters multiple unique situations, the graph will display multiple trees. Each tree represents a situation with its attempts. This provides a clear visual of the player's journey through different scenarios. Example Output: Assuming the player has the following history:

The Great Feline Escape:

Attempt 1: Negotiate – Failure Attempt 2: Sprint Away – Success The Royal Tournament:

Attempt 1: Sprint Away – Success Attempt 2: Show Bravery – Failure Attempt 3: Negotiate – Success The Great Cheese Heist:

Attempt 1: Develop a Strategy – Success The graph will have three situation nodes:

The Great Feline Escape

Child Nodes: Negotiate (Failure) Sprint Away (Success) The Royal Tournament

Child Nodes: Sprint Away (Success) Show Bravery (Failure) Negotiate (Success) The Great Cheese Heist

Child Nodes: Develop a Strategy (Success) Running the Updated Code: Ensure Required Libraries Are Installed:

bash Copy code pip install streamlit pandas plotly streamlit-flow Save the Code:

Save the updated code into a file, e.g., cat_rider_game.py.

Run the Streamlit App:

bash Copy code streamlit run cat_rider_game.py Play the Game:

Choose your Cat Rider and Riding Gear. Engage in adventures and make decisions. View the updated Journey Preview and Knowledge Graph after each action. Save and download your game histories via the sidebar. Note: If you encounter any issues with the streamlit-flow library, ensure it is correctly installed and compatible with your environment. The code assumes that the StreamlitFlowNode and StreamlitFlowEdge classes accept the parameters as specified. If not, you may need to adjust the parameter names according to the library's documentation. Conclusion: 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.

---

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

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)