Update app.py

app.py

@@ -1,601 +1,270 @@
 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"
-)
+st.set_page_config(page_title="ChatGPT Prompt Generator", page_icon="🧠", layout="wide")
 
-# Custom CSS
+# Custom CSS for more compact layout
 st.markdown("""
 <style>
-    .main {
-        background-color: #f8f9fa;
-    }
+    .main {background-color: #f8f9fa;}
     .stButton button {
-        border-radius: 10px;
-        padding: 5px 10px;
-        font-weight: 500;
-        display: flex;
+        border-radius: 6px;
+        padding: 2px 5px;
+        font-size: 0.8em;
+        display: inline-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;
+        margin: 1px;
+        min-height: 0px;
     }
-    .css-1d391kg {
-        padding: 1rem;
+    .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;
     }
-    .section-title {
-        font-size: 20px;
-        font-weight: 600;
-        margin-bottom: 10px;
-        color: #333;
+    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;
     }
-    .highlight-box {
-        background-color: #f1f8ff;
-        border-radius: 10px;
-        padding: 15px;
-        border: 1px solid #c2e0ff;
-    }
-    .emoji-large {
-        font-size: 24px;
+    .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: 10px;
-        padding: 20px;
+        border-radius: 5px;
+        padding: 10px;
         border: 1px solid #e9ecef;
-        min-height: 200px;
+        min-height: 120px;
+        font-size: 0.85em;
         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;
+        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
-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 = ""
+# 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
-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": "📊"}
-]
+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 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."""
-    }
+    {"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."}
 ]
 
-# 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)
+# 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
-tab1, tab2, tab3 = st.tabs(["🔮 Generate Prompt", "📚 Examples", "ℹ️ About"])
+# Main layout with tabs
+tab1, tab2 = st.tabs(["🔮 Generator", "📚 Examples"])
 
 with tab1:
-    col1, col2 = st.columns([5, 3])
+    left_col, right_col = st.columns([7, 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 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'])
         
-        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)
+        # 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 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.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 col2:
-        st.markdown("<p class='section-title'>🔮 Generated Prompt</p>", unsafe_allow_html=True)
+    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']
+        ])
         
-        # 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']}.
+        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 {st.session_state.about}."""
-            
-            if st.session_state.inclusion:
-                prompt += f"\nInclude {st.session_state.inclusion}."
+It should be about {sel['about']}."""
+
+            if sel['inclusion']:
+                prompt += f"\nInclude {sel['inclusion']}."
             
-            if st.session_state.exclusion:
-                prompt += f"\nExclude {st.session_state.exclusion}."
+            if sel['exclusion']:
+                prompt += f"\nExclude {sel['exclusion']}."
             
-            prompt += f"\n\nReturn the output as {st.session_state.selected_format['emoji']} {st.session_state.selected_format['name']}."
+            prompt += f"\n\nReturn the output as {sel['format']['emoji']} {sel['format']['name']}."
             
-            if st.session_state.input_data:
-                prompt += f"\nUse the following information: {st.session_state.input_data}"
+            if sel['input_data']:
+                prompt += f"\nUse the following information: {sel['input_data']}"
         else:
-            prompt = "Please select all required options and provide a topic to generate a prompt."
+            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)
         
-        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()
+        # 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
         
-        # Random prompt generator
-        st.markdown("<br>", unsafe_allow_html=True)
-        st.markdown("<p class='section-title'>🎲 Need inspiration?</p>", unsafe_allow_html=True)
+        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()
         
-        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)
+        # 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()
         
-        # Prompt structure guide
-        st.markdown("<br>", unsafe_allow_html=True)
-        st.markdown("<p class='section-title'>📚 Prompt Structure Guide</p>", unsafe_allow_html=True)
-        
+        # Quick guide
         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 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:
-    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
+    # Display sample prompts in a compact layout
+    for prompt in sample_prompts:
         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 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)
     
-    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)
-    
+    # Quick tips
     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 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)
-    
-    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)]
-        })
+    """, unsafe_allow_html=True)