Spaces:
Sleeping
Sleeping
V1:
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()