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