# V1: ```python import streamlit as st def main(): st.set_page_config(page_title="Storytelling Mastery", page_icon="πŸ“š", layout="wide") st.title("🎭 The Art of Storytelling: Master Guide 🎭") # Define the storytelling points data structure storytelling_points = [ {"number": 1, "emoji": "🏠", "keyword": "location", "description": "Start by establishing a clear location to help listeners visualize the scene."}, {"number": 2, "emoji": "πŸƒ", "keyword": "actions", "description": "Describe specific actions to create momentum and pull listeners into the moment."}, {"number": 3, "emoji": "🧠", "keyword": "thoughts", "description": "Share raw, unfiltered thoughts instead of sanitized summaries to add authenticity."}, {"number": 4, "emoji": "😲", "keyword": "emotions", "description": "Show rather than tell your emotions through physical descriptions of feelings."}, {"number": 5, "emoji": "πŸ’¬", "keyword": "dialogue", "description": "Use exact dialogue to bring characters to life instead of summarizing conversations."}, {"number": 6, "emoji": "πŸ”", "keyword": "zoom", "description": "Zoom into specific moments rather than giving bird's-eye summaries of events."}, {"number": 7, "emoji": "🎬", "keyword": "transport", "description": "Transport your audience into the trenches of your story's crucial moments."}, {"number": 8, "emoji": "🏞️", "keyword": "detail", "description": "Avoid excessive detail in setting descriptionsβ€”listeners will fill in their own versions."}, {"number": 9, "emoji": "⏩", "keyword": "momentum", "description": "Create forward momentum by stating actions that move the story along."}, {"number": 10, "emoji": "πŸ‘οΈ", "keyword": "visual", "description": "Make your stories visual by showing emotions through physical manifestations."}, {"number": 11, "emoji": "πŸ‘‚", "keyword": "listen", "description": "Listen to great storytellers like John Krasinski to learn effective techniques."}, {"number": 12, "emoji": "πŸ—£οΈ", "keyword": "juicy", "description": "Keep dialogue juicy and conversational rather than formal or stilted."}, {"number": 13, "emoji": "🀸", "keyword": "simplify", "description": "Simplify your storytelling approachβ€”it doesn't need to be complicated."}, {"number": 14, "emoji": "🧩", "keyword": "essentials", "description": "Focus on the essentials that make stories compelling rather than unnecessary details."}, {"number": 15, "emoji": "🚢", "keyword": "walk", "description": "Walk listeners through your experience step by step rather than jumping around."}, {"number": 16, "emoji": "🌊", "keyword": "journey", "description": "Create an emotional journey that takes listeners through various feelings."}, {"number": 17, "emoji": "🎯", "keyword": "focused", "description": "Stay focused on the core elements that drive your narrative forward."}, {"number": 18, "emoji": "πŸ€”", "keyword": "neurotic", "description": "Share neurotic thoughts that reveal your humanity and create connection."}, {"number": 19, "emoji": "⚑", "keyword": "crucial", "description": "Capture those crucial moments that define the heart of your story."}, {"number": 20, "emoji": "🧠", "keyword": "master", "description": "Master these five key elements: location, action, thoughts, emotions, and dialogue."} ] # Define the quotes quotes = [ {"text": "Stories are a communal currency of humanity.", "author": "Tahir Shah, in Arabian Nights"}, {"text": "The universe is made of stories, not of atoms.", "author": "Muriel Rukeyser"}, {"text": "There is no greater agony than bearing an untold story inside you.", "author": "Maya Angelou"} ] # Create the outline st.markdown("## πŸ“š The Art of Storytelling: 20 Essential Techniques πŸ“š") st.markdown(f"> \"{quotes[0]['text']}\" β€” {quotes[0]['author']}") for point in storytelling_points: st.markdown(f"{point['number']}. {point['emoji']} Start by establishing a clear **{point['keyword']}** to help listeners visualize the scene.") st.markdown(f"> \"{quotes[1]['text']}\" β€” {quotes[1]['author']}") # Create tabs for different visualizations tab1, tab2, tab3 = st.tabs(["Vertical Flow", "Circular Layout", "Categorical Groups"]) with tab1: st.markdown("### Vertical Flow Diagram") mermaid_vertical = generate_vertical_diagram(storytelling_points) st.markdown(mermaid_vertical, unsafe_allow_html=True) with tab2: st.markdown("### Circular Storytelling Process") mermaid_circular = generate_circular_diagram(storytelling_points) st.markdown(mermaid_circular, unsafe_allow_html=True) with tab3: st.markdown("### Categorical Groups") mermaid_categories = generate_categorical_diagram(storytelling_points) st.markdown(mermaid_categories, unsafe_allow_html=True) # Interactive element selector st.markdown("## πŸ” Explore Individual Storytelling Elements") col1, col2 = st.columns([1, 3]) with col1: # Create options for the dropdown - combine emoji, number and keyword options = [f"{point['number']}. {point['emoji']} {point['keyword'].capitalize()}" for point in storytelling_points] selected_option = st.selectbox("Select an element to explore:", options) # Get the selected point number selected_number = int(selected_option.split('.')[0]) selected_point = next(point for point in storytelling_points if point['number'] == selected_number) with col2: st.markdown(f"### {selected_option}") st.markdown(f"**Description:** {selected_point['description']}") # Add examples based on the selected point examples = { 1: "'Two weeks ago, I'm sitting on my couch in my living room taking a deep breath...'", 2: "'I'm in my office. I open my laptop and start reading a message from my manager...'", 3: "Instead of saying 'I was excited', say 'I thought: ah, this will be so cool! Finally, I can see her after all that time.'", 4: "Instead of saying 'I was relieved', say 'In that moment, I leaned backward and let out this big sigh.'", 5: "Instead of saying 'My manager was very happy with my work', say 'In that moment, my manager looked at me and said: Wow, that was really the best presentation you've ever given.'", 6: "John Krasinski didn't just say 'I met a customs agent who was surprised about my wife.' He zoomed into the specific exchange of dialogue.", 7: "'The moment I walked through those doors, the music stopped, all eyes turned to me, and I could feel my heart pounding against my chest.'", 8: "Simply saying 'conference room' is better than listing every piece of furniture and decor.", 9: "Use active verbs like 'I grabbed my phone, texted her quickly, and rushed out the door' instead of static descriptions.", 10: "'He kept tapping his pen on the table and glancing up at the clock every few seconds' creates a clear image of anxiety.", 11: "Notice how comedians like John Krasinski use timing, facial expressions, and precise dialogue to enhance their stories.", 12: "Use 'Yeah, that's crazy!' instead of 'Yes, that's quite extraordinary.'", 13: "Cut out unnecessary backstory and context that doesn't serve the core narrative.", 14: "Focus on the surprise revelation, the key decision moment, or the unexpected twist.", 15: "Walk through events chronologically or in a way that builds tension effectively.", 16: "Start with anticipation, build to frustration, then release with relief or humor.", 17: "If a detail doesn't serve the story's purpose or emotional impact, leave it out.", 18: "'I thought: Oh no, everyone's going to think I'm an absolute fraud now!'", 19: "Sarah Willingham's story focused on the moment the lawyer realized his mistakeβ€”the color draining from his face.", 20: "A complete story incorporates all five elements to create an immersive experience." } st.markdown(f"**Example:** {examples[selected_number]}") # Five pillars section st.markdown("## 🧠 The Five Pillars of Storytelling") pillars = storytelling_points[:5] # First 5 points are the pillars cols = st.columns(5) for i, pillar in enumerate(pillars): with cols[i]: st.markdown(f"### {pillar['emoji']} {pillar['keyword'].capitalize()}") st.markdown(f"{pillar['description']}") st.markdown(f"> \"{quotes[2]['text']}\" β€” {quotes[2]['author']}") def generate_vertical_diagram(points): """Generate a vertical flow Mermaid diagram""" nodes = [] connections = [] styles = [] # Create nodes and connections for i, point in enumerate(points): node_id = point['number'] node_label = f"{node_id}. {point['emoji']} {point['keyword'].capitalize()}" nodes.append(f" {node_id}(\"{node_label}\")") # Add connection to next node (or back to first if last) if i < len(points) - 1: connections.append(f" {node_id} --> {points[i+1]['number']}") else: connections.append(f" {node_id} --> {points[0]['number']}") # Add style classes styles.extend([ " %% Style definitions", " classDef foundation fill:#ff9900,stroke:#333,stroke-width:2px,color:#000;", " classDef technique fill:#66cc99,stroke:#333,stroke-width:2px,color:#000;", " classDef learning fill:#6699cc,stroke:#333,stroke-width:2px,color:#000;", " classDef mastery fill:#cc6699,stroke:#333,stroke-width:2px,color:#000;", "", " %% Apply styles", " class 1,2,3,4,5 foundation;", " class 6,7,8,9,10 technique;", " class 11,12,13,14,15 learning;", " class 16,17,18,19,20 mastery;" ]) # Assemble diagram diagram = ["```mermaid", "graph TD"] diagram.extend(nodes) diagram.extend(connections) diagram.extend(styles) diagram.append("```") return "\n".join(diagram) def generate_circular_diagram(points): """Generate a circular flow Mermaid diagram""" # Calculate positions in a circle import math diagram = ["```mermaid", "graph TD"] # Create nodes in circular positions using subgraphs diagram.append(" %% Nodes") # Create all nodes first for point in points: node_id = point['number'] node_label = f"{node_id}. {point['emoji']} {point['keyword'].capitalize()}" diagram.append(f" {node_id}[\"{node_label}\"]") # Group nodes into four quarters diagram.extend([ " %% Connections - circular flow", " 1 --> 2 --> 3 --> 4 --> 5 --> 6 --> 7 --> 8 --> 9 --> 10", " 10 --> 11 --> 12 --> 13 --> 14 --> 15 --> 16 --> 17 --> 18 --> 19 --> 20", " 20 -.-> 1", "", " %% Style definitions", " classDef q1 fill:#ff9900,stroke:#333,stroke-width:2px,color:#000;", " classDef q2 fill:#66cc99,stroke:#333,stroke-width:2px,color:#000;", " classDef q3 fill:#6699cc,stroke:#333,stroke-width:2px,color:#000;", " classDef q4 fill:#cc6699,stroke:#333,stroke-width:2px,color:#000;", "", " %% Apply styles by quarters", " class 1,2,3,4,5 q1;", " class 6,7,8,9,10 q2;", " class 11,12,13,14,15 q3;", " class 16,17,18,19,20 q4;" ]) diagram.append("```") return "\n".join(diagram) def generate_categorical_diagram(points): """Generate a categorical Mermaid diagram with storytelling elements grouped by category""" diagram = ["```mermaid", "graph TB"] # Create category subgraphs diagram.extend([ " subgraph Foundation[\"πŸ›οΈ Foundation Elements\"]", " 1(\"`1. 🏠 Location`\")", " 2(\"`2. πŸƒ Action`\")", " 3(\"`3. 🧠 Thoughts`\")", " 4(\"`4. 😲 Emotions`\")", " 5(\"`5. πŸ’¬ Dialogue`\")", " end", "", " subgraph Techniques[\"πŸ”§ Storytelling Techniques\"]", " 6(\"`6. πŸ” Zoom In`\")", " 7(\"`7. 🎬 Transport`\")", " 8(\"`8. 🏞️ Simple Details`\")", " 9(\"`9. ⏩ Momentum`\")", " 10(\"`10. πŸ‘οΈ Visualization`\")", " end", "", " subgraph Development[\"πŸ“ˆ Story Development\"]", " 11(\"`11. πŸ‘‚ Study Masters`\")", " 12(\"`12. πŸ—£οΈ Natural Speech`\")", " 13(\"`13. 🀸 Simplify`\")", " 14(\"`14. 🧩 Core Elements`\")", " 15(\"`15. 🚢 Step by Step`\")", " end", "", " subgraph Mastery[\"πŸ† Storytelling Mastery\"]", " 16(\"`16. 🌊 Emotional Arc`\")", " 17(\"`17. 🎯 Stay Focused`\")", " 18(\"`18. πŸ€” Be Human`\")", " 19(\"`19. ⚑ Key Moments`\")", " 20(\"`20. 🧠 Five Pillars`\")", " end", "", " %% Connections between categories", " Foundation --> Techniques", " Techniques --> Development", " Development --> Mastery", " Mastery -.-> Foundation", ]) diagram.append("```") return "\n".join(diagram) if __name__ == "__main__": main() ``` import streamlit as st import streamlit.components.v1 as components import math def main(): st.set_page_config(page_title="Storytelling Mastery", page_icon="πŸ“š", layout="wide") st.title("🎭 The Art of Storytelling: Master Guide 🎭") # ----------------------------- # 1. The Storyteller's Song # ----------------------------- st.markdown("## 🎡 The Storyteller's Journey Song 🎡") st.markdown(""" **Verse 1 – Location** *I'm in a quiet town, where twilight meets the dawn,* *A simple street and weathered walls, where whispered dreams are drawn.* **Verse 2 – Actions** *I lace my worn-out sneakers, stepping into a new day’s light,* *I pedal through cobbled memories, heart racing with each flight.* **Verse 3 – Thoughts** *In every echo of my footsteps, a raw, unfiltered thought appears,* *I muse, β€œAm I chasing shadows, or the brilliance of my years?”* **Verse 4 – Emotions** *My eyes reflect a storm of joy and painβ€”a silent, candid art,* *A trembling smile, a furrowed brow, emotions painted on my heart.* **Verse 5 – Dialogue** *Then comes a gentle, piercing voice: β€œKeep moving, dare to feel;”* *Those words ignite the darkened skiesβ€”my destiny is real.* **Chorus** *Let each moment unfold its magic, in places, moves, and minds so bold,* *For every whispered thought and burst of feeling tells a story yet untold.* """) st.markdown("---") # ----------------------------- # 2. The Storytelling Points Outline # ----------------------------- storytelling_points = [ {"number": 1, "emoji": "🏠", "keyword": "location", "description": "Set a scene that sparks the imagination: a place that's simply stated but vividly felt."}, {"number": 2, "emoji": "πŸƒ", "keyword": "actions", "description": "Show the kinetic energyβ€”whether it’s walking, biking, or a spontaneous burst of movement."}, {"number": 3, "emoji": "🧠", "keyword": "thoughts", "description": "Reveal those raw, neurotic inner monologues that make you real and relatable."}, {"number": 4, "emoji": "😲", "keyword": "emotions", "description": "Let your body speak the language of your feelingsβ€”every twitch and tear is a story."}, {"number": 5, "emoji": "πŸ’¬", "keyword": "dialogue", "description": "Capture crisp, memorable dialogue that slices through the moment like lightning."}, # Additional points can be used for further storytelling techniques… ] # ----------------------------- # 3. Random Literary Wit – Ten Poetic Lines # ----------------------------- random_poetry = [ "πŸŒ… Location: Where the horizon kisses the edge of dreams. 🌌", "🚴 Action: Pedaling through the city's heartbeat, every turn a burst of rhythm. 🎢", "πŸ’­ Thoughts: Whispering secrets of a chaotic mind under a tranquil sky. πŸŒ’", "😊 Emotions: A smile that trembles like morning dew on a rose. 🌈", "πŸ—£ Dialogue: Words crackling like fire in the midnight hush. πŸ”₯", "🌲 Nature: The forest murmurs ancient tales to those who dare to listen. πŸƒ", "🌊 Waves: Dancing to the eternal hymn of the deep blue. 🐚", "🌟 Dreams: Starlight scattered over the canvas of restless nights. ✨", "πŸ”₯ Passion: A flame burning fierce in the silence of despair. ❀️", "πŸ‚ Reflection: Leaves falling like whispered memories in autumn’s embrace. πŸ•ŠοΈ" ] st.markdown("## ✨ Random Literary Wit") st.code("\n".join(random_poetry), language="python") # ----------------------------- # 4. Interactive Story Element Explorer (Vertical Flow and Tabs) # ----------------------------- st.markdown("## πŸ“š The Art of Storytelling: 5 Essential Elements") st.markdown("> \"The universe is made of stories, not of atoms.\" β€” Muriel Rukeyser") for point in storytelling_points: st.markdown(f"{point['number']}. {point['emoji']} **{point['keyword'].capitalize()}** - {point['description']}") # ----------------------------- # 5. Star Layout for the Five Pillars # ----------------------------- st.markdown("## ⭐ Five Pillars in a Star Layout ⭐") # Using absolute positioning in a relative container to arrange five points on a circle # Calculated using basic trigonometry (center = 200, radius = 150) star_html = """
🏠
Location
πŸƒ
Actions
🧠
Thoughts
😲
Emotions
πŸ’¬
Dialogue
""" components.html(star_html, height=450) # ----------------------------- # 6. Additional Interactive Elements (Tabs & Dropdown) # ----------------------------- tab1, tab2, tab3 = st.tabs(["Vertical Flow", "Circular Layout", "Categorical Groups"]) with tab1: st.markdown("### Vertical Flow Diagram") mermaid_vertical = generate_vertical_diagram(storytelling_points) st.markdown(mermaid_vertical, unsafe_allow_html=True) with tab2: st.markdown("### Circular Storytelling Process") mermaid_circular = generate_circular_diagram(storytelling_points) st.markdown(mermaid_circular, unsafe_allow_html=True) with tab3: st.markdown("### Categorical Groups") mermaid_categories = generate_categorical_diagram(storytelling_points) st.markdown(mermaid_categories, unsafe_allow_html=True) st.markdown("## πŸ” Explore Individual Storytelling Elements") col1, col2 = st.columns([1, 3]) with col1: options = [f"{point['number']}. {point['emoji']} {point['keyword'].capitalize()}" for point in storytelling_points] selected_option = st.selectbox("Select an element to explore:", options) selected_number = int(selected_option.split('.')[0]) selected_point = next(point for point in storytelling_points if point['number'] == selected_number) with col2: st.markdown(f"### {selected_option}") st.markdown(f"**Description:** {selected_point['description']}") examples = { 1: "'In the stillness of a small town, I take in the crisp air...'", 2: "'I lace up my sneakers and step boldly into the unknown, each stride a heartbeat.'", 3: "'I muse: What if these fleeting moments are the stitches of my very soul?'", 4: "'My eyes shimmer with unspoken stories, my face a canvas of turbulent joy.'", 5: "'Then, a voice cuts through the silence: β€˜Keep pushing, the dawn awaits!’'" } st.markdown(f"**Example:** {examples.get(selected_number, 'No example available.')}") st.markdown("> \"There is no greater agony than bearing an untold story inside you.\" β€” Maya Angelou") def generate_vertical_diagram(points): """Generate a vertical flow Mermaid diagram""" nodes = [] connections = [] styles = [] for i, point in enumerate(points): node_id = point['number'] node_label = f"{node_id}. {point['emoji']} {point['keyword'].capitalize()}" nodes.append(f" {node_id}(\"{node_label}\")") if i < len(points) - 1: connections.append(f" {node_id} --> {points[i+1]['number']}") else: connections.append(f" {node_id} --> {points[0]['number']}") styles.extend([ " %% Style definitions", " classDef foundation fill:#ff9900,stroke:#333,stroke-width:2px,color:#000;", " classDef technique fill:#66cc99,stroke:#333,stroke-width:2px,color:#000;", " classDef learning fill:#6699cc,stroke:#333,stroke-width:2px,color:#000;", " classDef mastery fill:#cc6699,stroke:#333,stroke-width:2px,color:#000;", " class 1,2,3,4,5 foundation;" ]) diagram = ["```mermaid", "graph TD"] diagram.extend(nodes) diagram.extend(connections) diagram.extend(styles) diagram.append("```") return "\n".join(diagram) def generate_circular_diagram(points): """Generate a circular flow Mermaid diagram""" diagram = ["```mermaid", "graph TD"] for point in points: node_id = point['number'] node_label = f"{node_id}. {point['emoji']} {point['keyword'].capitalize()}" diagram.append(f" {node_id}[\"{node_label}\"]") diagram.extend([ " 1 --> 2 --> 3 --> 4 --> 5 --> 1", " %% Style definitions", " classDef q1 fill:#ff9900,stroke:#333,stroke-width:2px,color:#000;", " class 1,2,3,4,5 q1;" ]) diagram.append("```") return "\n".join(diagram) def generate_categorical_diagram(points): """Generate a categorical Mermaid diagram grouping the storytelling elements""" diagram = ["```mermaid", "graph TB", " subgraph Foundation[\"Foundation Elements\"]", " 1(\"`1. 🏠 Location`\")", " 2(\"`2. πŸƒ Actions`\")", " 3(\"`3. 🧠 Thoughts`\")", " 4(\"`4. 😲 Emotions`\")", " 5(\"`5. πŸ’¬ Dialogue`\")", " end", "```"] return "\n".join(diagram) if __name__ == "__main__": main()