Update app.py

app.py

@@ -5,44 +5,47 @@ import random
 # Set page configuration
 st.set_page_config(page_title="ChatGPT Prompt Generator", page_icon="🧠", layout="wide")
 
-# Custom CSS for ultra-compact layout with wide columns
+# Custom CSS for compact buttons in grouped containers
 st.markdown("""
 <style>
     .main {background-color: #f8f9fa;}
     .stButton button {
         border-radius: 4px;
-        padding: 1px 3px;
-        font-size: 0.7em;
-        display: inline-flex;
-        align-items: center;
-        margin: 1px;
+        padding: 2px 4px;
+        font-size: 0.75em;
         min-height: 0px;
-        white-space: nowrap;
+        margin: 1px;
+        display: inline-block;
     }
     .stButton button:hover {background-color: #e9ecef;}
     div[data-testid="stVerticalBlock"] {gap: 0.3rem;}
     div[data-testid="stHorizontalBlock"] {gap: 0.3rem;}
     .stTextArea textarea, .stTextInput input {
         padding: 0.2rem;
-        font-size: 0.7em;
+        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.1rem; padding: 0.1rem 0.3rem; font-size: 0.7em;}
     h1, h2, h3 {margin-top: 0; margin-bottom: 0.1rem; font-size: 0.9rem;}
     p, div {margin-bottom: 0.1rem; font-size: 0.8rem;}
-    .wide-grid-container {
-        display: grid;
-        grid-template-columns: repeat(10, 1fr);
-        gap: 2px;
+    .category-container {
+        background-color: white;
+        border: 1px solid #e6e6e6;
+        border-radius: 4px;
+        padding: 5px;
+        margin-bottom: 5px;
     }
     .section-header {
         font-weight: bold;
         font-size: 0.9rem;
         margin-bottom: 0.1rem;
-        margin-top: 0.2rem;
         color: #333;
+        border-bottom: 1px solid #eee;
+        padding-bottom: 3px;
+    }
+    .button-flex-container {
+        display: flex;
+        flex-wrap: wrap;
+        gap: 2px;
     }
     .prompt-display {
         background-color: #ffffff;
@@ -60,6 +63,9 @@ st.markdown("""
         margin-bottom: 3px;
     }
     .emoji {font-size: 0.9em;}
+    .btn-group {
+        margin-bottom: 0px;
+    }
 </style>
 """, unsafe_allow_html=True)
 
@@ -81,9 +87,7 @@ data = {
         {"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": "🔍"},
-        {"name": "Journalist", "emoji": "📰"}, {"name": "Scientist", "emoji": "🔬"},
-        {"name": "Chef", "emoji": "👨‍🍳"}, {"name": "Artist", "emoji": "🎨"}
+        {"name": "Therapist", "emoji": "🧐"}, {"name": "Detective", "emoji": "🔍"}
     ],
     'tones': [
         {"name": "Informative", "emoji": "ℹ️"}, {"name": "Inspirational", "emoji": "✨"},
@@ -91,9 +95,7 @@ data = {
         {"name": "Professional", "emoji": "👔"}, {"name": "Casual", "emoji": "👋"},
         {"name": "Persuasive", "emoji": "🤝"}, {"name": "Encouraging", "emoji": "🙌"},
         {"name": "Empathetic", "emoji": "🤗"}, {"name": "Serious", "emoji": "😐"},
-        {"name": "Enthusiastic", "emoji": "🤩"}, {"name": "Thoughtful", "emoji": "💭"},
-        {"name": "Sarcastic", "emoji": "😏"}, {"name": "Motivated", "emoji": "💪"},
-        {"name": "Critical", "emoji": "🧐"}, {"name": "Optimistic", "emoji": "😃"}
+        {"name": "Enthusiastic", "emoji": "🤩"}, {"name": "Thoughtful", "emoji": "💭"}
     ],
     'instructions': [
         {"name": "Create", "emoji": "🔨"}, {"name": "Suggest", "emoji": "💡"},
@@ -101,13 +103,10 @@ data = {
         {"name": "Analyze", "emoji": "🔍"}, {"name": "Explain", "emoji": "📚"},
         {"name": "Describe", "emoji": "🔎"}, {"name": "Summarize", "emoji": "📋"},
         {"name": "Compare", "emoji": "⚖️"}, {"name": "Outline", "emoji": "📋"},
-        {"name": "Evaluate", "emoji": "⭐"}, {"name": "List", "emoji": "📋"},
-        {"name": "Draft", "emoji": "📃"}, {"name": "Review", "emoji": "👁️"},
-        {"name": "Generate", "emoji": "⚙️"}, {"name": "Plan", "emoji": "🗓️"}
+        {"name": "Evaluate", "emoji": "⭐"}, {"name": "List", "emoji": "📋"}
     ],
     'lengths': [
-        {"name": "100 Words", "emoji": "📎"}, {"name": "300 Words", "emoji": "📝"}, 
-        {"name": "500 Words", "emoji": "📄"}, {"name": "1000 Words", "emoji": "📃"},
+        {"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": "📚"}
@@ -118,98 +117,103 @@ data = {
         {"name": "Summary", "emoji": "📋"}, {"name": "Story", "emoji": "📖"},
         {"name": "Essay", "emoji": "📄"}, {"name": "Review", "emoji": "⭐"},
         {"name": "Tutorial", "emoji": "👨‍🏫"}, {"name": "Report", "emoji": "📊"},
-        {"name": "Plan", "emoji": "📆"}, {"name": "Script", "emoji": "🎬"},
-        {"name": "Outline", "emoji": "📑"}, {"name": "Letter", "emoji": "✉️"},
-        {"name": "Presentation", "emoji": "🎯"}, {"name": "Analysis", "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": "Executives", "emoji": "👩‍💼"}, {"name": "Seniors", "emoji": "👵"},
-        {"name": "Teachers", "emoji": "👩‍🏫"}, {"name": "Parents", "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", "emoji": "🐍"},
-        {"name": "JavaScript", "emoji": "📜"}, {"name": "SQL", "emoji": "💾"},
-        {"name": "CSV", "emoji": "📊"}, {"name": "XML", "emoji": "📓"}
+        {"name": "PDF", "emoji": "📑"}, {"name": "Python Code", "emoji": "🐍"},
+        {"name": "JavaScript", "emoji": "📜"}, {"name": "SQL Query", "emoji": "💾"}
     ]
 }
 
-# Function to create buttons for a category in a wide grid
-def create_wide_grid_buttons(category_name, items):
-    st.markdown(f"<div class='section-header'>{category_name}</div>", unsafe_allow_html=True)
-    st.markdown("<div class='wide-grid-container'>", unsafe_allow_html=True)
+# Function to create buttons for a category using HTML/CSS flexbox
+def create_category_container(category_name, items, emoji_prefix=""):
+    st.markdown(f"""
+    <div class="category-container">
+        <div class="section-header">{emoji_prefix} {category_name}</div>
+        <div class="button-flex-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=True):
+        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)
+    st.markdown("</div></div>", unsafe_allow_html=True)
 
 # Minimal header
 st.markdown("<h2 style='text-align: center; font-size: 1.2rem;'><span class='emoji'>🧠</span> ChatGPT Prompt Generator</h2>", unsafe_allow_html=True)
 
-# Main layout - Two rows with many columns
-row1, row2 = st.columns([7, 3])
+# Main layout with two columns
+left_col, right_col = st.columns([3, 1])
 
-with row1:
-    # First set of categories
-    col1, col2 = st.columns(2)
-    
-    with col1:
-        create_wide_grid_buttons("Role", data['roles'])
-        create_wide_grid_buttons("Tone", data['tones'])
-        create_wide_grid_buttons("Instruction", data['instructions'])
+with left_col:
+    # First row of categories in 3 columns
+    row1_col1, row1_col2, row1_col3 = st.columns(3)
     
-    with col2:
-        create_wide_grid_buttons("Length", data['lengths'])
-        create_wide_grid_buttons("Content Type", data['content_types'])
-        create_wide_grid_buttons("Audience", data['audiences'])
+    with row1_col1:
+        create_category_container("Role", data['roles'], "👤")
+        create_category_container("Instruction", data['instructions'], "📝")
     
-    # Format and text fields in a more compact layout
-    format_col, inputs_col = st.columns([2, 8])
+    with row1_col2:
+        create_category_container("Tone", data['tones'], "🎭")
+        create_category_container("Length", data['lengths'], "📏")
     
-    with format_col:
-        create_wide_grid_buttons("Format", data['formats'])
+    with row1_col3:
+        create_category_container("Content Type", data['content_types'], "📄")
+        create_category_container("Audience", data['audiences'], "👥")
     
-    with inputs_col:
-        text_col1, text_col2, text_col3, text_col4 = st.columns(4)
+    # Second row for Format and Text inputs
+    row2 = st.container()
+    with row2:
+        row2_col1, row2_col2 = st.columns([1, 3])
         
-        with text_col1:
+        with row2_col1:
+            create_category_container("Format", data['formats'], "📋")
+        
+        with row2_col2:
+            # Use a container for text inputs
+            st.markdown('<div class="category-container">', unsafe_allow_html=True)
+            st.markdown('<div class="section-header">📌 Details</div>', unsafe_allow_html=True)
+            
+            # Create text inputs
             st.session_state.selections['about'] = st.text_input("💬 Topic", 
                 value=st.session_state.selections['about'], 
-                placeholder="Enter topic", 
-                label_visibility="collapsed")
-        
-        with text_col2:
-            st.session_state.selections['inclusion'] = st.text_input("✅ Include", 
-                value=st.session_state.selections['inclusion'], 
-                placeholder="What to include", 
-                label_visibility="collapsed")
-        
-        with text_col3:
-            st.session_state.selections['exclusion'] = st.text_input("❌ Exclude", 
-                value=st.session_state.selections['exclusion'], 
-                placeholder="What to exclude", 
-                label_visibility="collapsed")
-        
-        with text_col4:
-            st.session_state.selections['input_data'] = st.text_input("📊 Data", 
+                placeholder="Enter what the content should be about")
+            
+            col1, col2 = st.columns(2)
+            with col1:
+                st.session_state.selections['inclusion'] = st.text_input("✅ Include", 
+                    value=st.session_state.selections['inclusion'], 
+                    placeholder="What to include in the content")
+            
+            with col2:
+                st.session_state.selections['exclusion'] = st.text_input("❌ Exclude", 
+                    value=st.session_state.selections['exclusion'], 
+                    placeholder="What to exclude from the content")
+            
+            st.session_state.selections['input_data'] = st.text_area("📊 Input Data", 
                 value=st.session_state.selections['input_data'], 
-                placeholder="Input data", 
-                label_visibility="collapsed")
+                placeholder="Enter any specific information to use",
+                height=60)
+            
+            st.markdown('</div>', unsafe_allow_html=True)
 
-with row2:
+with right_col:
     # Generate prompt based on selections
     is_complete = all([
         st.session_state.selections['role'], st.session_state.selections['tone'],
@@ -238,17 +242,19 @@ It should be about {sel['about']}."""
     else:
         prompt = "Select all required components and provide a topic."
     
-    st.markdown("<div class='prompt-display'>", unsafe_allow_html=True)
+    st.markdown('<div class="category-container">', unsafe_allow_html=True)
+    st.markdown('<div class="section-header">🔮 Generated Prompt</div>', unsafe_allow_html=True)
+    st.markdown('<div class="prompt-display">', unsafe_allow_html=True)
     st.write(prompt)
-    st.markdown("</div>", unsafe_allow_html=True)
+    st.markdown('</div>', unsafe_allow_html=True)
     
-    # Action buttons in a row
-    button_col1, button_col2, button_col3 = st.columns(3)
-    with button_col1:
+    # Action buttons
+    btn1, btn2, btn3 = st.columns(3)
+    with btn1:
         if st.button("📋 Copy", type="primary", use_container_width=True):
-            st.code(prompt, language="")  # This is just to show it was copied
+            st.code(prompt, language="")
     
-    with button_col2:
+    with btn2:
         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']:
@@ -256,49 +262,52 @@ It should be about {sel['about']}."""
                 else:
                     st.session_state.selections[key] = None
             st.experimental_rerun()
-            
-    with button_col3:
+    
+    with btn3:
         if st.button("🎲 Random", 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()
     
-    # Sample prompts in 2 columns 
-    st.markdown("<div class='section-header' style='font-size: 0.8rem;'>📚 Examples</div>", unsafe_allow_html=True)
-    sample_col1, sample_col2 = st.columns(2)
+    st.markdown('</div>', unsafe_allow_html=True)
+    
+    # Sample prompts
+    st.markdown('<div class="category-container">', unsafe_allow_html=True)
+    st.markdown('<div class="section-header">📚 Examples</div>', unsafe_allow_html=True)
     
-    with sample_col1:
-        st.markdown("""
-        <div style="background-color: #e6f3ff; border: 1px solid #b8daff; border-radius: 4px; padding: 4px; margin-bottom: 4px; font-size: 0.7em;">
-            <b>👨‍🏫 Teaching</b><pre style="white-space: pre-wrap; font-size: 0.75em; margin: 2px 0px;">Act as a 👨‍🏫 Teacher, use 📚 Informative tone, Create a 📋 Guide for 🌱 Beginners.
+    st.markdown("""
+    <div style="background-color: #e6f3ff; border: 1px solid #b8daff; border-radius: 4px; padding: 4px; margin-bottom: 4px; font-size: 0.7em;">
+        <b>👨‍🏫 Teaching</b><pre style="white-space: pre-wrap; font-size: 0.75em; margin: 2px 0px;">Act as a 👨‍🏫 Teacher, use 📚 Informative tone, Create a 📋 Guide for 🌱 Beginners.
 
-It should be about Git version control.
+It should be about Git.
 Include practical examples.
 Exclude advanced techniques.
 
 Return as 📝 Markdown.</pre>
-        </div>
-        """, unsafe_allow_html=True)
+    </div>
+    """, unsafe_allow_html=True)
     
-    with sample_col2:
-        st.markdown("""
-        <div style="background-color: #e6ffed; border: 1px solid #b8e6cc; border-radius: 4px; padding: 4px; margin-bottom: 4px; font-size: 0.7em;">
-            <b>💼 Business</b><pre style="white-space: pre-wrap; font-size: 0.75em; margin: 2px 0px;">Act as a 👔 Professional, use 🤝 Persuasive tone, Write a 📧 Email for 👩‍💼 Executives.
+    st.markdown("""
+    <div style="background-color: #e6ffed; border: 1px solid #b8e6cc; border-radius: 4px; padding: 4px; margin-bottom: 4px; font-size: 0.7em;">
+        <b>💼 Business</b><pre style="white-space: pre-wrap; font-size: 0.75em; margin: 2px 0px;">Act as a 👔 Professional, use 🤝 Persuasive tone, Write a 📧 Email for 👩‍💼 Executives.
 
 It should be about a product launch.
 Include ROI metrics.
 Exclude technical details.
 
 Return as 📄 Plain Text.</pre>
-        </div>
-        """, unsafe_allow_html=True)
+    </div>
+    """, unsafe_allow_html=True)
     
-    # Quick guide
+    # Structure guide
     st.markdown("""
     <div style="font-size: 0.7em; background-color: #f1f8ff; border-radius: 4px; padding: 4px; margin-top: 4px;">
-    <b>Structure:</b> 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>
+    <b>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]. Exclude [EXCLUSION].<br>
     Return as [FORMAT].
     </div>
-    """, unsafe_allow_html=True)
+    """, unsafe_allow_html=True)
+    
+    st.markdown('</div>', unsafe_allow_html=True)