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()