app.py

import streamlit as st
import pandas as pd
import random

# Set page configuration
st.set_page_config(page_title="ChatGPT Prompt Generator", page_icon="🧠", layout="wide")

# Custom CSS for more compact layout
st.markdown("""
<style>
    .main {background-color: #f8f9fa;}
    .stButton button {
        border-radius: 6px;
        padding: 2px 5px;
        font-size: 0.8em;
        display: inline-flex;
        align-items: center;
        margin: 1px;
        min-height: 0px;
    }
    .stButton button:hover {background-color: #e9ecef;}
    div[data-testid="stVerticalBlock"] {gap: 0.5rem;}
    div[data-testid="stHorizontalBlock"] {gap: 0.5rem;}
    .stTextArea textarea, .stTextInput input {
        padding: 0.3rem;
        font-size: 0.8em;
        min-height: 0px;
    }
    div[data-testid="stForm"] {border-width: 0px; padding: 0rem 0rem;}
    .row-widget.stRadio > div {flex-direction: row;}
    .row-widget.stRadio > div > label {margin: 0px 0.2rem; padding: 0.2rem 0.5rem; font-size: 0.8em;}
    h1, h2, h3 {margin-top: 0; margin-bottom: 0.2rem;}
    h3 {font-size: 1.1rem;}
    p, div {margin-bottom: 0.2rem;}
    .grid-container {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 2px;
    }
    .grid-item {margin: 0px;}
    .section-header {
        font-weight: bold;
        font-size: 1rem;
        margin-bottom: 0.2rem;
        margin-top: 0.3rem;
    }
    .prompt-display {
        background-color: #ffffff;
        border-radius: 5px;
        padding: 10px;
        border: 1px solid #e9ecef;
        min-height: 120px;
        font-size: 0.85em;
        white-space: pre-wrap;
    }
    .sample-prompt {
        font-size: 0.8em;
        padding: 5px;
        border-radius: 5px;
        margin-bottom: 5px;
    }
    .emoji {font-size: 1.1em;}
</style>
""", unsafe_allow_html=True)

# Initialize session state for selections
if 'selections' not in st.session_state:
    st.session_state.selections = {
        'role': None, 'tone': None, 'instruction': None, 'length': None,
        'content_type': None, 'audience': None, 'format': None,
        'about': "", 'inclusion': "", 'exclusion': "", 'input_data': ""
    }

# Data sets
data = {
    '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": "Short", "emoji": "🩳"}, {"name": "Medium", "emoji": "📊"},
        {"name": "Long", "emoji": "📜"}, {"name": "Brief", "emoji": "💨"},
        {"name": "Detailed", "emoji": "🔎"}, {"name": "Comprehensive", "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": "👶"}
    ],
    '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": "💾"}
    ]
}

# Sample prompts
sample_prompts = [
    {"title": "👨‍🏫 Teaching", "color": "#e6f3ff", "border": "#b8daff", 
     "prompt": "Act as a 👨‍🏫 Teacher, use 📚 Informative tone, Create a 📋 Guide for 🌱 Beginners.\n\nIt should be about Git version control.\nInclude practical examples.\nExclude advanced techniques.\n\nReturn as 📝 Markdown."},
    {"title": "💼 Business", "color": "#e6ffed", "border": "#b8e6cc", 
     "prompt": "Act as a 👔 Professional, use 🤝 Persuasive tone, Write a 📧 Email for 👩‍💼 Executives.\n\nIt should be about a product launch.\nInclude ROI metrics.\nExclude technical details.\n\nReturn as 📄 Plain Text."}
]

# Function to create buttons for a category
def create_category_buttons(category_name, items, col_count=4):
    st.markdown(f"<div class='section-header'>{category_name}</div>", unsafe_allow_html=True)
    st.markdown("<div class='grid-container'>", unsafe_allow_html=True)
    
    for i, item in enumerate(items):
        key = f"{category_name.lower().replace(' ', '_')}_{i}"
        is_selected = st.session_state.selections.get(category_name.lower().replace(' ', '_')) == item
        button_type = "primary" if is_selected else "secondary"
        
        if st.button(f"{item['emoji']} {item['name']}", key=key, help=f"Select {item['name']}", 
                   type=button_type, use_container_width=False):
            st.session_state.selections[category_name.lower().replace(' ', '_')] = item
            st.experimental_rerun()
    
    st.markdown("</div>", unsafe_allow_html=True)

# Header (minimal)
st.markdown("<h2 style='text-align: center;'><span class='emoji'>🧠</span> ChatGPT Prompt Generator</h2>", unsafe_allow_html=True)

# Main layout with tabs
tab1, tab2 = st.tabs(["🔮 Generator", "📚 Examples"])

with tab1:
    left_col, right_col = st.columns([7, 3])
    
    with left_col:
        # Compact grid layout for all categories
        create_category_buttons("Role", data['roles'])
        create_category_buttons("Tone", data['tones'])
        create_category_buttons("Instruction", data['instructions'])
        create_category_buttons("Length", data['lengths'])
        create_category_buttons("Content Type", data['content_types'])
        create_category_buttons("Audience", data['audiences'])
        create_category_buttons("Format", data['formats'])
        
        # Text inputs in a more compact layout
        col1, col2 = st.columns(2)
        with col1:
            st.session_state.selections['about'] = st.text_input("💬 Topic", value=st.session_state.selections['about'], placeholder="Enter topic", label_visibility="collapsed")
            st.session_state.selections['inclusion'] = st.text_input("✅ Include", value=st.session_state.selections['inclusion'], placeholder="What to include", label_visibility="collapsed")
        
        with col2:
            st.session_state.selections['exclusion'] = st.text_input("❌ Exclude", value=st.session_state.selections['exclusion'], placeholder="What to exclude", label_visibility="collapsed")
            st.session_state.selections['input_data'] = st.text_input("📊 Data", value=st.session_state.selections['input_data'], placeholder="Input data", label_visibility="collapsed")
    
    with right_col:
        # Generate prompt based on selections
        is_complete = all([
            st.session_state.selections['role'], st.session_state.selections['tone'],
            st.session_state.selections['instruction'], st.session_state.selections['length'],
            st.session_state.selections['content_type'], st.session_state.selections['audience'],
            st.session_state.selections['format'], st.session_state.selections['about']
        ])
        
        prompt = ""
        if is_complete:
            sel = st.session_state.selections
            prompt = f"""Act as a {sel['role']['emoji']} {sel['role']['name']}, use {sel['tone']['emoji']} {sel['tone']['name']} tone, {sel['instruction']['emoji']} {sel['instruction']['name']} a {sel['length']['emoji']} {sel['length']['name']} {sel['content_type']['emoji']} {sel['content_type']['name']} for {sel['audience']['emoji']} {sel['audience']['name']}.

It should be about {sel['about']}."""

            if sel['inclusion']:
                prompt += f"\nInclude {sel['inclusion']}."
            
            if sel['exclusion']:
                prompt += f"\nExclude {sel['exclusion']}."
            
            prompt += f"\n\nReturn the output as {sel['format']['emoji']} {sel['format']['name']}."
            
            if sel['input_data']:
                prompt += f"\nUse the following information: {sel['input_data']}"
        else:
            prompt = "Select all required components and provide a topic."
        
        st.markdown("<div class='prompt-display'>", unsafe_allow_html=True)
        st.write(prompt)
        st.markdown("</div>", unsafe_allow_html=True)
        
        # Action buttons
        col1, col2 = st.columns(2)
        with col1:
            if st.button("📋 Copy", type="primary", use_container_width=True):
                st.code(prompt)  # This is just to show it was copied
        
        with col2:
            if st.button("🔄 Reset", type="secondary", use_container_width=True):
                for key in st.session_state.selections:
                    if key in ['about', 'inclusion', 'exclusion', 'input_data']:
                        st.session_state.selections[key] = ""
                    else:
                        st.session_state.selections[key] = None
                st.experimental_rerun()
        
        # Random generator button
        if st.button("🎲 Random Prompt", type="secondary", use_container_width=True):
            for category in ['role', 'tone', 'instruction', 'length', 'content_type', 'audience', 'format']:
                st.session_state.selections[category] = random.choice(data[category+'s'])
            st.experimental_rerun()
        
        # Quick guide
        st.markdown("""
        <div style="font-size: 0.75em; background-color: #f1f8ff; border-radius: 5px; padding: 5px; margin-top: 5px;">
        <b>Basic Structure:</b><br>
        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">AUDIENCE</span>].<br>
        It should be about [TOPIC].<br>
        Include [INCLUSION].<br>
        Exclude [EXCLUSION].<br>
        Return as [FORMAT].
        </div>
        """, unsafe_allow_html=True)

with tab2:
    # Display sample prompts in a compact layout
    for prompt in sample_prompts:
        st.markdown(f"""
        <div style="background-color: {prompt['color']}; border: 1px solid {prompt['border']}; border-radius: 5px; padding: 5px; margin-bottom: 5px; font-size: 0.8em;">
            <b>{prompt['title']}</b><pre style="white-space: pre-wrap; font-size: 0.85em; margin: 3px 0px;">{prompt['prompt']}</pre>
        </div>
        """, unsafe_allow_html=True)
    
    # Quick tips
    st.markdown("""
    <div style="background-color: #f8f9fa; border-radius: 5px; padding: 5px; margin-top: 5px; font-size: 0.8em;">
    <b>📌 Tips for Effective Prompts:</b>
    <ul style="margin: 0; padding-left: 15px;">
        <li>Be specific about your desired format and style</li>
        <li>Clearly define what to include and exclude</li>
        <li>Specify the target audience for better tailoring</li>
        <li>Use structured prompts for consistent results</li>
    </ul>
    </div>
    """, unsafe_allow_html=True)