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