Create app.py

app.py

@@ -0,0 +1,601 @@
+import streamlit as st
+import pandas as pd
+from streamlit_option_menu import option_menu
+import random
+
+# Set page configuration
+st.set_page_config(
+    page_title="ChatGPT Prompt Generator",
+    page_icon="🧠",
+    layout="wide",
+    initial_sidebar_state="expanded"
+)
+
+# Custom CSS
+st.markdown("""
+<style>
+    .main {
+        background-color: #f8f9fa;
+    }
+    .stButton button {
+        border-radius: 10px;
+        padding: 5px 10px;
+        font-weight: 500;
+        display: flex;
+        align-items: center;
+        justify-content: flex-start;
+        width: 100%;
+        text-align: left;
+    }
+    .stButton button:hover {
+        background-color: #e9ecef;
+    }
+    .selected-button {
+        background-color: #4e8df5 !important;
+        color: white !important;
+    }
+    .stTextArea textarea {
+        border-radius: 10px;
+        border: 1px solid #ced4da;
+    }
+    .stTextInput input {
+        border-radius: 10px;
+        border: 1px solid #ced4da;
+    }
+    .css-18e3th9 {
+        padding-top: 1rem;
+    }
+    .css-1d391kg {
+        padding: 1rem;
+    }
+    .section-title {
+        font-size: 20px;
+        font-weight: 600;
+        margin-bottom: 10px;
+        color: #333;
+    }
+    .highlight-box {
+        background-color: #f1f8ff;
+        border-radius: 10px;
+        padding: 15px;
+        border: 1px solid #c2e0ff;
+    }
+    .emoji-large {
+        font-size: 24px;
+    }
+    .prompt-display {
+        background-color: #ffffff;
+        border-radius: 10px;
+        padding: 20px;
+        border: 1px solid #e9ecef;
+        min-height: 200px;
+        white-space: pre-wrap;
+    }
+    .sample-prompt {
+        background-color: #f8f9fa;
+        border-radius: 10px;
+        padding: 15px;
+        border: 1px solid #e9ecef;
+        margin-bottom: 10px;
+    }
+    .category-container {
+        max-height: 200px;
+        overflow-y: auto;
+        padding-right: 10px;
+        margin-bottom: 20px;
+    }
+    .button-container {
+        display: flex;
+        flex-wrap: wrap;
+        gap: 5px;
+    }
+</style>
+""", unsafe_allow_html=True)
+
+# Initialize session state
+if 'selected_role' not in st.session_state:
+    st.session_state.selected_role = None
+if 'selected_tone' not in st.session_state:
+    st.session_state.selected_tone = None
+if 'selected_instruction' not in st.session_state:
+    st.session_state.selected_instruction = None
+if 'selected_length' not in st.session_state:
+    st.session_state.selected_length = None
+if 'selected_content_type' not in st.session_state:
+    st.session_state.selected_content_type = None
+if 'selected_audience' not in st.session_state:
+    st.session_state.selected_audience = None
+if 'selected_format' not in st.session_state:
+    st.session_state.selected_format = None
+if 'about' not in st.session_state:
+    st.session_state.about = ""
+if 'inclusion' not in st.session_state:
+    st.session_state.inclusion = ""
+if 'exclusion' not in st.session_state:
+    st.session_state.exclusion = ""
+if 'input_data' not in st.session_state:
+    st.session_state.input_data = ""
+
+# Data sets
+roles = [
+    {"name": "Professional", "emoji": "👔"},
+    {"name": "Expert", "emoji": "🧠"},
+    {"name": "Friend", "emoji": "🤝"},
+    {"name": "Copywriter", "emoji": "✍️"},
+    {"name": "Creative Writer", "emoji": "🖋️"},
+    {"name": "Sales Coach", "emoji": "💼"},
+    {"name": "Marketing Coach", "emoji": "📊"},
+    {"name": "Tech Consultant", "emoji": "💻"},
+    {"name": "Life Coach", "emoji": "🧘"},
+    {"name": "Data Analyst", "emoji": "📈"},
+    {"name": "Influencer", "emoji": "📱"},
+    {"name": "Language Tutor", "emoji": "🗣️"},
+    {"name": "Fitness Trainer", "emoji": "💪"},
+    {"name": "Teacher", "emoji": "👨‍🏫"},
+    {"name": "Therapist", "emoji": "🧐"},
+    {"name": "Detective", "emoji": "🔍"}
+]
+
+tones = [
+    {"name": "Informative", "emoji": "ℹ️"},
+    {"name": "Inspirational", "emoji": "✨"},
+    {"name": "Humorous", "emoji": "😄"},
+    {"name": "Friendly", "emoji": "😊"},
+    {"name": "Professional", "emoji": "👔"},
+    {"name": "Casual", "emoji": "👋"},
+    {"name": "Persuasive", "emoji": "🤝"},
+    {"name": "Encouraging", "emoji": "🙌"},
+    {"name": "Empathetic", "emoji": "🤗"},
+    {"name": "Serious", "emoji": "😐"},
+    {"name": "Enthusiastic", "emoji": "🤩"},
+    {"name": "Thoughtful", "emoji": "💭"}
+]
+
+instructions = [
+    {"name": "Create", "emoji": "🔨"},
+    {"name": "Suggest", "emoji": "💡"},
+    {"name": "Write", "emoji": "✍️"},
+    {"name": "Compose", "emoji": "📝"},
+    {"name": "Analyze", "emoji": "🔍"},
+    {"name": "Explain", "emoji": "📚"},
+    {"name": "Describe", "emoji": "🔎"},
+    {"name": "Summarize", "emoji": "📋"},
+    {"name": "Compare", "emoji": "⚖️"},
+    {"name": "Outline", "emoji": "📋"},
+    {"name": "Evaluate", "emoji": "⭐"},
+    {"name": "List", "emoji": "📋"}
+]
+
+lengths = [
+    {"name": "300 Words", "emoji": "📝"},
+    {"name": "500 Words", "emoji": "📄"},
+    {"name": "1000 Words", "emoji": "📃"},
+    {"name": "5 Paragraphs", "emoji": "📋"},
+    {"name": "10 Lines", "emoji": "📏"},
+    {"name": "Short", "emoji": "🩳"},
+    {"name": "Medium", "emoji": "📊"},
+    {"name": "Long", "emoji": "📜"},
+    {"name": "Brief", "emoji": "💨"},
+    {"name": "Detailed", "emoji": "🔎"},
+    {"name": "Comprehensive", "emoji": "📚"},
+    {"name": "Concise", "emoji": "✂️"}
+]
+
+content_types = [
+    {"name": "Article", "emoji": "📰"},
+    {"name": "Blog post", "emoji": "📝"},
+    {"name": "Guide", "emoji": "📚"},
+    {"name": "Email", "emoji": "📧"},
+    {"name": "Summary", "emoji": "📋"},
+    {"name": "Story", "emoji": "📖"},
+    {"name": "Essay", "emoji": "📄"},
+    {"name": "Review", "emoji": "⭐"},
+    {"name": "Tutorial", "emoji": "👨‍🏫"},
+    {"name": "Report", "emoji": "📊"},
+    {"name": "Plan", "emoji": "📆"},
+    {"name": "Script", "emoji": "🎬"}
+]
+
+audiences = [
+    {"name": "Beginners", "emoji": "🌱"},
+    {"name": "Experts", "emoji": "🧠"},
+    {"name": "Students", "emoji": "🎓"},
+    {"name": "Professionals", "emoji": "👔"},
+    {"name": "Business Owners", "emoji": "💼"},
+    {"name": "General Public", "emoji": "👥"},
+    {"name": "Developers", "emoji": "💻"},
+    {"name": "Children", "emoji": "👶"},
+    {"name": "Teachers", "emoji": "👩‍🏫"},
+    {"name": "Executives", "emoji": "👩‍💼"},
+    {"name": "Researchers", "emoji": "🔬"},
+    {"name": "Gamers", "emoji": "🎮"}
+]
+
+formats = [
+    {"name": "Markdown", "emoji": "📝"},
+    {"name": "HTML", "emoji": "🌐"},
+    {"name": "Plain Text", "emoji": "📄"},
+    {"name": "JSON", "emoji": "🔄"},
+    {"name": "PDF", "emoji": "📑"},
+    {"name": "Python Code", "emoji": "🐍"},
+    {"name": "JavaScript", "emoji": "📜"},
+    {"name": "SQL Query", "emoji": "💾"},
+    {"name": "LaTeX", "emoji": "📝"},
+    {"name": "Presentation", "emoji": "📊"},
+    {"name": "SVG", "emoji": "🖼️"},
+    {"name": "CSV", "emoji": "📊"}
+]
+
+# Sample prompts
+sample_prompts = [
+    {
+        "title": "👨‍🏫 Teaching Example",
+        "color": "#e6f3ff",
+        "border": "#b8daff",
+        "prompt": """Act as a 👨‍🏫 Teacher, use 📚 Informative tone, Create a 📋 Comprehensive Guide for 🌱 Beginners.
+
+It should be about Git version control.
+Include practical examples and best practices.
+Exclude advanced techniques for now.
+
+Return the output as 📝 Markdown."""
+    },
+    {
+        "title": "💼 Business Example",
+        "color": "#e6ffed",
+        "border": "#b8e6cc",
+        "prompt": """Act as a 👔 Professional, use 🤝 Persuasive tone, Write a 📧 Email for 👩‍💼 Executives.
+
+It should be about a new product launch.
+Include key benefits and ROI metrics.
+Exclude technical specifications.
+
+Return the output as 📄 Plain Text."""
+    },
+    {
+        "title": "💻 Technical Example",
+        "color": "#f2e6ff",
+        "border": "#d9b8ff",
+        "prompt": """Act as a 💻 Tech Consultant, use ℹ️ Informative tone, Explain a 📚 Tutorial for 💻 Developers.
+
+It should be about React hooks.
+Include real-world use cases.
+Exclude class components.
+
+Return the output as 📜 JavaScript."""
+    },
+    {
+        "title": "📖 Creative Example",
+        "color": "#fff8e6",
+        "border": "#ffe0b8",
+        "prompt": """Act as a 🖋️ Creative Writer, use 😄 Humorous tone, Compose a 📖 Story for 👶 Children.
+
+It should be about a friendly dragon.
+Include a moral lesson about friendship.
+Exclude scary elements.
+
+Return the output as 📝 Markdown."""
+    }
+]
+
+# Header
+st.markdown("<h1 style='text-align: center; color: #1e3a8a;'><span class='emoji-large'>🧠</span> ChatGPT Prompt Generator</h1>", unsafe_allow_html=True)
+st.markdown("<p style='text-align: center; margin-bottom: 30px;'>Based on Gyula Rabai's ChatGPT Cheat Sheet</p>", unsafe_allow_html=True)
+
+# Main layout
+tab1, tab2, tab3 = st.tabs(["🔮 Generate Prompt", "📚 Examples", "ℹ️ About"])
+
+with tab1:
+    col1, col2 = st.columns([5, 3])
+    
+    with col1:
+        st.markdown("<p class='section-title'>⚙️ Select Prompt Components</p>", unsafe_allow_html=True)
+        
+        # Create columns for categories
+        row1_col1, row1_col2 = st.columns(2)
+        
+        with row1_col1:
+            st.markdown("### 👤 Choose a Role")
+            st.markdown("<div class='category-container'>", unsafe_allow_html=True)
+            st.markdown("<div class='button-container'>", unsafe_allow_html=True)
+            
+            for i, role in enumerate(roles):
+                role_key = f"role_{i}"
+                if st.button(f"{role['emoji']} {role['name']}", key=role_key, 
+                            help=f"Select {role['name']} as your role",
+                            use_container_width=True,
+                            type="secondary" if st.session_state.selected_role != role else "primary"):
+                    st.session_state.selected_role = role
+            
+            st.markdown("</div></div>", unsafe_allow_html=True)
+        
+        with row1_col2:
+            st.markdown("### 🎭 Select a Tone")
+            st.markdown("<div class='category-container'>", unsafe_allow_html=True)
+            st.markdown("<div class='button-container'>", unsafe_allow_html=True)
+            
+            for i, tone in enumerate(tones):
+                tone_key = f"tone_{i}"
+                if st.button(f"{tone['emoji']} {tone['name']}", key=tone_key,
+                            help=f"Select {tone['name']} tone",
+                            use_container_width=True,
+                            type="secondary" if st.session_state.selected_tone != tone else "primary"):
+                    st.session_state.selected_tone = tone
+            
+            st.markdown("</div></div>", unsafe_allow_html=True)
+        
+        row2_col1, row2_col2 = st.columns(2)
+        
+        with row2_col1:
+            st.markdown("### 📝 Select an Instruction")
+            st.markdown("<div class='category-container'>", unsafe_allow_html=True)
+            st.markdown("<div class='button-container'>", unsafe_allow_html=True)
+            
+            for i, instruction in enumerate(instructions):
+                instruction_key = f"instruction_{i}"
+                if st.button(f"{instruction['emoji']} {instruction['name']}", key=instruction_key,
+                            help=f"Select {instruction['name']} as your instruction",
+                            use_container_width=True,
+                            type="secondary" if st.session_state.selected_instruction != instruction else "primary"):
+                    st.session_state.selected_instruction = instruction
+            
+            st.markdown("</div></div>", unsafe_allow_html=True)
+        
+        with row2_col2:
+            st.markdown("### 📏 Select Length")
+            st.markdown("<div class='category-container'>", unsafe_allow_html=True)
+            st.markdown("<div class='button-container'>", unsafe_allow_html=True)
+            
+            for i, length in enumerate(lengths):
+                length_key = f"length_{i}"
+                if st.button(f"{length['emoji']} {length['name']}", key=length_key,
+                            help=f"Select {length['name']} as your length",
+                            use_container_width=True,
+                            type="secondary" if st.session_state.selected_length != length else "primary"):
+                    st.session_state.selected_length = length
+            
+            st.markdown("</div></div>", unsafe_allow_html=True)
+        
+        row3_col1, row3_col2 = st.columns(2)
+        
+        with row3_col1:
+            st.markdown("### 📄 Select Content Type")
+            st.markdown("<div class='category-container'>", unsafe_allow_html=True)
+            st.markdown("<div class='button-container'>", unsafe_allow_html=True)
+            
+            for i, content_type in enumerate(content_types):
+                content_type_key = f"content_type_{i}"
+                if st.button(f"{content_type['emoji']} {content_type['name']}", key=content_type_key,
+                            help=f"Select {content_type['name']} as your content type",
+                            use_container_width=True,
+                            type="secondary" if st.session_state.selected_content_type != content_type else "primary"):
+                    st.session_state.selected_content_type = content_type
+            
+            st.markdown("</div></div>", unsafe_allow_html=True)
+        
+        with row3_col2:
+            st.markdown("### 👥 Select Target Audience")
+            st.markdown("<div class='category-container'>", unsafe_allow_html=True)
+            st.markdown("<div class='button-container'>", unsafe_allow_html=True)
+            
+            for i, audience in enumerate(audiences):
+                audience_key = f"audience_{i}"
+                if st.button(f"{audience['emoji']} {audience['name']}", key=audience_key,
+                            help=f"Select {audience['name']} as your target audience",
+                            use_container_width=True,
+                            type="secondary" if st.session_state.selected_audience != audience else "primary"):
+                    st.session_state.selected_audience = audience
+            
+            st.markdown("</div></div>", unsafe_allow_html=True)
+        
+        row4_col1, row4_col2 = st.columns(2)
+        
+        with row4_col1:
+            st.markdown("### 📋 Select Format")
+            st.markdown("<div class='category-container'>", unsafe_allow_html=True)
+            st.markdown("<div class='button-container'>", unsafe_allow_html=True)
+            
+            for i, format_item in enumerate(formats):
+                format_key = f"format_{i}"
+                if st.button(f"{format_item['emoji']} {format_item['name']}", key=format_key,
+                            help=f"Select {format_item['name']} as your format",
+                            use_container_width=True,
+                            type="secondary" if st.session_state.selected_format != format_item else "primary"):
+                    st.session_state.selected_format = format_item
+            
+            st.markdown("</div></div>", unsafe_allow_html=True)
+        
+        with row4_col2:
+            st.markdown("### 📌 Additional Details")
+            
+            st.text_input("💬 Topic (About)", key="about_input", 
+                        placeholder="Enter what the content should be about", 
+                        value=st.session_state.about,
+                        on_change=lambda: setattr(st.session_state, 'about', st.session_state.about_input))
+            
+            st.text_input("✅ Include", key="inclusion_input", 
+                        placeholder="What to include in the content", 
+                        value=st.session_state.inclusion,
+                        on_change=lambda: setattr(st.session_state, 'inclusion', st.session_state.inclusion_input))
+            
+            st.text_input("❌ Exclude", key="exclusion_input", 
+                        placeholder="What to exclude from the content", 
+                        value=st.session_state.exclusion,
+                        on_change=lambda: setattr(st.session_state, 'exclusion', st.session_state.exclusion_input))
+            
+            st.text_area("📊 Input Data", key="input_data_input", 
+                        placeholder="Enter any specific information to use", 
+                        value=st.session_state.input_data,
+                        on_change=lambda: setattr(st.session_state, 'input_data', st.session_state.input_data_input))
+    
+    with col2:
+        st.markdown("<p class='section-title'>🔮 Generated Prompt</p>", unsafe_allow_html=True)
+        
+        # Generate the prompt based on selections
+        prompt = ""
+        if (st.session_state.selected_role and st.session_state.selected_tone and 
+            st.session_state.selected_instruction and st.session_state.selected_length and 
+            st.session_state.selected_content_type and st.session_state.selected_audience and 
+            st.session_state.selected_format and st.session_state.about):
+            
+            prompt = f"""Act as a {st.session_state.selected_role['emoji']} {st.session_state.selected_role['name']}, use {st.session_state.selected_tone['emoji']} {st.session_state.selected_tone['name']} tone, {st.session_state.selected_instruction['emoji']} {st.session_state.selected_instruction['name']} a {st.session_state.selected_length['emoji']} {st.session_state.selected_length['name']} {st.session_state.selected_content_type['emoji']} {st.session_state.selected_content_type['name']} for {st.session_state.selected_audience['emoji']} {st.session_state.selected_audience['name']}.
+
+It should be about {st.session_state.about}."""
+            
+            if st.session_state.inclusion:
+                prompt += f"\nInclude {st.session_state.inclusion}."
+            
+            if st.session_state.exclusion:
+                prompt += f"\nExclude {st.session_state.exclusion}."
+            
+            prompt += f"\n\nReturn the output as {st.session_state.selected_format['emoji']} {st.session_state.selected_format['name']}."
+            
+            if st.session_state.input_data:
+                prompt += f"\nUse the following information: {st.session_state.input_data}"
+        else:
+            prompt = "Please select all required options and provide a topic to generate a prompt."
+        
+        st.markdown("<div class='prompt-display'>", unsafe_allow_html=True)
+        st.write(prompt)
+        st.markdown("</div>", unsafe_allow_html=True)
+        
+        if prompt != "Please select all required options and provide a topic to generate a prompt.":
+            # Copy button
+            if st.button("📋 Copy Prompt", type="primary", use_container_width=True):
+                st.toast("Prompt copied to clipboard! 🎉", icon="✅")
+            
+            # Reset button
+            if st.button("🔄 Reset Fields", type="secondary", use_container_width=True):
+                st.session_state.selected_role = None
+                st.session_state.selected_tone = None
+                st.session_state.selected_instruction = None
+                st.session_state.selected_length = None
+                st.session_state.selected_content_type = None
+                st.session_state.selected_audience = None
+                st.session_state.selected_format = None
+                st.session_state.about = ""
+                st.session_state.inclusion = ""
+                st.session_state.exclusion = ""
+                st.session_state.input_data = ""
+                st.experimental_rerun()
+        
+        # Random prompt generator
+        st.markdown("<br>", unsafe_allow_html=True)
+        st.markdown("<p class='section-title'>🎲 Need inspiration?</p>", unsafe_allow_html=True)
+        
+        if st.button("🎲 Generate Random Prompt", type="secondary", use_container_width=True):
+            st.session_state.selected_role = random.choice(roles)
+            st.session_state.selected_tone = random.choice(tones)
+            st.session_state.selected_instruction = random.choice(instructions)
+            st.session_state.selected_length = random.choice(lengths)
+            st.session_state.selected_content_type = random.choice(content_types)
+            st.session_state.selected_audience = random.choice(audiences)
+            st.session_state.selected_format = random.choice(formats)
+            st.experimental_rerun()
+        
+        # Prompt structure guide
+        st.markdown("<br>", unsafe_allow_html=True)
+        st.markdown("<p class='section-title'>📚 Prompt Structure Guide</p>", unsafe_allow_html=True)
+        
+        st.markdown("""
+        <div class="highlight-box">
+            <p><strong>Basic Structure:</strong></p>
+            <p>Act as [<span style="color: blue;">ROLE</span>], use [<span style="color: green;">TONE</span>] tone, [<span style="color: red;">INSTRUCTION</span>] a [<span style="color: purple;">LENGTH</span>] [<span style="color: orange;">CONTENT TYPE</span>] for [<span style="color: pink;">TARGET AUDIENCE</span>].</p>
+            <p>It should be about [<span style="color: gray;">TOPIC</span>].</p>
+            <p>Include [<span style="color: green;">INCLUSION</span>].</p>
+            <p>Exclude [<span style="color: red;">EXCLUSION</span>].</p>
+            <p>Return the output as [<span style="color: blue;">FORMAT</span>].</p>
+            <p>Use the following information: [<span style="color: purple;">INPUT DATA</span>]</p>
+        </div>
+        """, unsafe_allow_html=True)
+
+with tab2:
+    st.markdown("<p class='section-title'>📚 Sample Prompts</p>", unsafe_allow_html=True)
+    
+    # Display sample prompts in a 2x2 grid
+    col1, col2 = st.columns(2)
+    
+    with col1:
+        # First sample
+        st.markdown(f"""
+        <div style="background-color: {sample_prompts[0]['color']}; border: 1px solid {sample_prompts[0]['border']}; border-radius: 10px; padding: 15px; margin-bottom: 20px;">
+            <h3>{sample_prompts[0]['title']}</h3>
+            <pre style="white-space: pre-wrap; font-family: 'Courier New', monospace; font-size: 14px;">{sample_prompts[0]['prompt']}</pre>
+            </div>
+        """, unsafe_allow_html=True)
+        
+        # Third sample
+        st.markdown(f"""
+        <div style="background-color: {sample_prompts[2]['color']}; border: 1px solid {sample_prompts[2]['border']}; border-radius: 10px; padding: 15px;">
+            <h3>{sample_prompts[2]['title']}</h3>
+            <pre style="white-space: pre-wrap; font-family: 'Courier New', monospace; font-size: 14px;">{sample_prompts[2]['prompt']}</pre>
+        </div>
+        """, unsafe_allow_html=True)
+    
+    with col2:
+        # Second sample
+        st.markdown(f"""
+        <div style="background-color: {sample_prompts[1]['color']}; border: 1px solid {sample_prompts[1]['border']}; border-radius: 10px; padding: 15px; margin-bottom: 20px;">
+            <h3>{sample_prompts[1]['title']}</h3>
+            <pre style="white-space: pre-wrap; font-family: 'Courier New', monospace; font-size: 14px;">{sample_prompts[1]['prompt']}</pre>
+        </div>
+        """, unsafe_allow_html=True)
+        
+        # Fourth sample
+        st.markdown(f"""
+        <div style="background-color: {sample_prompts[3]['color']}; border: 1px solid {sample_prompts[3]['border']}; border-radius: 10px; padding: 15px;">
+            <h3>{sample_prompts[3]['title']}</h3>
+            <pre style="white-space: pre-wrap; font-family: 'Courier New', monospace; font-size: 14px;">{sample_prompts[3]['prompt']}</pre>
+        </div>
+        """, unsafe_allow_html=True)
+
+with tab3:
+    st.markdown("<p class='section-title'>ℹ️ About This App</p>", unsafe_allow_html=True)
+    
+    st.markdown("""
+    <div class="highlight-box">
+        <h3>🧠 Gyula Rabai's ChatGPT Cheat Sheet</h3>
+        <p>This app is based on Gyula Rabai's excellent ChatGPT Cheat Sheet, which provides a structured approach to creating effective prompts for ChatGPT.</p>
+        
+        <h4>How to Use This App:</h4>
+        <ol>
+            <li>Select components from each category (Role, Tone, Instruction, etc.)</li>
+            <li>Fill in the required fields (Topic, Include, Exclude, etc.)</li>
+            <li>View your generated prompt in real-time</li>
+            <li>Copy the prompt to use with ChatGPT</li>
+        </ol>
+        
+        <h4>Benefits of Structured Prompts:</h4>
+        <ul>
+            <li>More precise and relevant responses</li>
+            <li>Better control over the AI's output format and style</li>
+            <li>Consistent results across different queries</li>
+            <li>Time-saving by reducing back-and-forth with the AI</li>
+        </ul>
+        
+        <p>Original cheat sheet created by Gyula Rabai. More resources at <a href="https://szakai-server.com" target="_blank">szakai-server.com</a></p>
+    </div>
+    """, unsafe_allow_html=True)
+    
+    st.markdown("<br>", unsafe_allow_html=True)
+    st.markdown("<p class='section-title'>📈 Prompt Components Statistics</p>", unsafe_allow_html=True)
+    
+    # Generate some stats
+    stats_col1, stats_col2 = st.columns(2)
+    
+    with stats_col1:
+        # Create a bar chart for roles distribution
+        roles_df = pd.DataFrame({
+            'Category': [r['name'] for r in roles[:8]],
+            'Count': [random.randint(5, 100) for _ in range(8)]
+        })
+        
+        st.subheader("Most Popular Roles")
+        st.bar_chart(roles_df.set_index('Category'))
+    
+    with stats_col2:
+        # Create a bar chart for content types distribution
+        content_df = pd.DataFrame({
+            'Category': [c['name'] for c in content_types[:8]],
+            'Count': [random.randint(5, 100) for _ in range(8)]
+        })