app.py

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)]
        })