VersionsBackup.md

# 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 = """
    <div style="position: relative; width: 400px; height: 400px; margin: auto; border: 1px dashed #aaa; border-radius: 50%;">
        <!-- Point 1: Location at angle 90° -->
        <div style="position: absolute; top: 50px; left: 200px; transform: translate(-50%, -50%); text-align: center;">
            <div style="font-size: 2em;">🏠</div>
            <div><b>Location</b></div>
        </div>
        <!-- Point 2: Actions at angle ~162° -->
        <div style="position: absolute; top: 154px; left: 57px; transform: translate(-50%, -50%); text-align: center;">
            <div style="font-size: 2em;">🏃</div>
            <div><b>Actions</b></div>
        </div>
        <!-- Point 3: Thoughts at angle ~234° -->
        <div style="position: absolute; top: 321px; left: 112px; transform: translate(-50%, -50%); text-align: center;">
            <div style="font-size: 2em;">🧠</div>
            <div><b>Thoughts</b></div>
        </div>
        <!-- Point 4: Emotions at angle ~306° -->
        <div style="position: absolute; top: 321px; left: 288px; transform: translate(-50%, -50%); text-align: center;">
            <div style="font-size: 2em;">😲</div>
            <div><b>Emotions</b></div>
        </div>
        <!-- Point 5: Dialogue at angle ~18° -->
        <div style="position: absolute; top: 154px; left: 343px; transform: translate(-50%, -50%); text-align: center;">
            <div style="font-size: 2em;">💬</div>
            <div><b>Dialogue</b></div>
        </div>
    </div>
    """
    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()