Update app.py

app.py

@@ -5,7 +5,7 @@ import random
 # Set page configuration
 st.set_page_config(page_title="ChatGPT Prompt Generator", page_icon="🧠", layout="wide")
 
-# Custom CSS for compact buttons in grouped containers
+# Custom CSS for horizontal button rows
 st.markdown("""
 <style>
     .main {background-color: #f8f9fa;}
@@ -13,39 +13,38 @@ st.markdown("""
         border-radius: 4px;
         padding: 2px 4px;
         font-size: 0.75em;
-        min-height: 0px;
         margin: 1px;
-        display: inline-block;
+        white-space: nowrap;
     }
     .stButton button:hover {background-color: #e9ecef;}
-    div[data-testid="stVerticalBlock"] {gap: 0.3rem;}
+    div[data-testid="stVerticalBlock"] {gap: 0.2rem;}
     div[data-testid="stHorizontalBlock"] {gap: 0.3rem;}
     .stTextArea textarea, .stTextInput input {
         padding: 0.2rem;
         font-size: 0.8em;
-        min-height: 0px;
     }
     h1, h2, h3 {margin-top: 0; margin-bottom: 0.1rem; font-size: 0.9rem;}
     p, div {margin-bottom: 0.1rem; font-size: 0.8rem;}
-    .category-container {
+    .category-row {
         background-color: white;
         border: 1px solid #e6e6e6;
         border-radius: 4px;
         padding: 5px;
         margin-bottom: 5px;
     }
-    .section-header {
+    .category-label {
         font-weight: bold;
-        font-size: 0.9rem;
-        margin-bottom: 0.1rem;
+        font-size: 0.85rem;
         color: #333;
-        border-bottom: 1px solid #eee;
-        padding-bottom: 3px;
+        margin-right: 5px;
+        margin-bottom: 3px;
+        display: block;
     }
-    .button-flex-container {
+    .horizontal-buttons {
         display: flex;
         flex-wrap: wrap;
         gap: 2px;
+        align-items: center;
     }
     .prompt-display {
         background-color: #ffffff;
@@ -56,16 +55,6 @@ st.markdown("""
         font-size: 0.8em;
         white-space: pre-wrap;
     }
-    .sample-prompt {
-        font-size: 0.7em;
-        padding: 3px;
-        border-radius: 4px;
-        margin-bottom: 3px;
-    }
-    .emoji {font-size: 0.9em;}
-    .btn-group {
-        margin-bottom: 0px;
-    }
 </style>
 """, unsafe_allow_html=True)
 
@@ -133,14 +122,13 @@ data = {
     ]
 }
 
-# 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)
+# Function to create a row of buttons for a category
+def create_horizontal_button_row(category_name, items, emoji_prefix=""):
+    st.markdown(f'<div class="category-row">', unsafe_allow_html=True)
+    st.markdown(f'<div class="category-label">{emoji_prefix} {category_name}:</div>', unsafe_allow_html=True)
+    st.markdown('<div class="horizontal-buttons">', unsafe_allow_html=True)
     
+    # Create buttons in streamlit (can't be created inside HTML)
     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
@@ -148,49 +136,57 @@ def create_category_container(category_name, items, emoji_prefix=""):
         
         if st.button(f"{item['emoji']} {item['name']}", key=key, 
                   help=f"Select {item['name']}", 
-                  type=button_type, 
-                  use_container_width=False):
+                  type=button_type):
             st.session_state.selections[category_name.lower().replace(' ', '_')] = item
             st.experimental_rerun()
     
-    st.markdown("</div></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)
+st.markdown("<h2 style='text-align: center; font-size: 1.2rem;'>🧠 ChatGPT Prompt Generator</h2>", unsafe_allow_html=True)
 
-# Main layout with columns - only one level
+# Main layout with two columns
 left_col, right_col = st.columns([3, 1])
 
 with left_col:
-    # Add all categories in separate containers without nesting columns
-    create_category_container("Role", data['roles'], "👤")
-    create_category_container("Tone", data['tones'], "🎭")
-    create_category_container("Instruction", data['instructions'], "📝")
-    create_category_container("Length", data['lengths'], "📏")
-    create_category_container("Content Type", data['content_types'], "📄")
-    create_category_container("Audience", data['audiences'], "👥")
-    create_category_container("Format", data['formats'], "📋")
+    # Create a horizontal row of buttons for each category
+    create_horizontal_button_row("Role", data['roles'], "👤")
+    create_horizontal_button_row("Tone", data['tones'], "🎭")
+    create_horizontal_button_row("Instruction", data['instructions'], "📝")
+    create_horizontal_button_row("Length", data['lengths'], "📏")
+    create_horizontal_button_row("Content Type", data['content_types'], "📄")
+    create_horizontal_button_row("Audience", data['audiences'], "👥")
+    create_horizontal_button_row("Format", data['formats'], "📋")
     
-    # Add text inputs directly (no columns)
-    st.markdown('<div class="category-container">', unsafe_allow_html=True)
-    st.markdown('<div class="section-header">📌 Details</div>', unsafe_allow_html=True)
+    # Add text inputs in a row container
+    st.markdown('<div class="category-row">', unsafe_allow_html=True)
+    st.markdown('<div class="category-label">📌 Details:</div>', unsafe_allow_html=True)
     
-    # Create text inputs
-    st.session_state.selections['about'] = st.text_input("💬 Topic", 
+    # Topic input
+    st.session_state.selections['about'] = st.text_input("Topic", 
         value=st.session_state.selections['about'], 
-        placeholder="Enter what the content should be about")
+        placeholder="Enter what the content should be about",
+        label_visibility="collapsed")
     
-    st.session_state.selections['inclusion'] = st.text_input("✅ Include", 
-        value=st.session_state.selections['inclusion'], 
-        placeholder="What to include in the content")
+    # Two fields in one row
+    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", 
+            label_visibility="collapsed")
     
-    st.session_state.selections['exclusion'] = st.text_input("❌ Exclude", 
-        value=st.session_state.selections['exclusion'], 
-        placeholder="What to exclude from the content")
+    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_area("📊 Input Data", 
+    # Input data
+    st.session_state.selections['input_data'] = st.text_area("Input Data", 
         value=st.session_state.selections['input_data'], 
         placeholder="Enter any specific information to use",
+        label_visibility="collapsed",
         height=60)
     
     st.markdown('</div>', unsafe_allow_html=True)
@@ -224,19 +220,20 @@ It should be about {sel['about']}."""
     else:
         prompt = "Select all required components and provide a topic."
     
-    st.markdown('<div class="category-container">', unsafe_allow_html=True)
-    st.markdown('<div class="section-header">🔮 Generated Prompt</div>', unsafe_allow_html=True)
+    # Display the generated prompt
+    st.markdown('<div class="category-row">', unsafe_allow_html=True)
+    st.markdown('<div class="category-label">🔮 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)
     
-    # Action buttons - use one set of columns at top level
-    btn1, btn2, btn3 = st.columns(3)
-    with btn1:
+    # Action buttons in a row
+    col1, col2, col3 = st.columns(3)
+    with col1:
         if st.button("📋 Copy", type="primary", use_container_width=True):
             st.code(prompt, language="")
     
-    with btn2:
+    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']:
@@ -245,7 +242,7 @@ It should be about {sel['about']}."""
                     st.session_state.selections[key] = None
             st.experimental_rerun()
     
-    with btn3:
+    with col3:
         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'])
@@ -253,9 +250,9 @@ It should be about {sel['about']}."""
     
     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)
+    # Sample prompts and structure guide
+    st.markdown('<div class="category-row">', unsafe_allow_html=True)
+    st.markdown('<div class="category-label">📚 Examples:</div>', unsafe_allow_html=True)
     
     st.markdown("""
     <div style="background-color: #e6f3ff; border: 1px solid #b8daff; border-radius: 4px; padding: 4px; margin-bottom: 4px; font-size: 0.7em;">
@@ -267,9 +264,7 @@ Exclude advanced techniques.
 
 Return as 📝 Markdown.</pre>
     </div>
-    """, unsafe_allow_html=True)
     
-    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.
 
@@ -279,10 +274,7 @@ Exclude technical details.
 
 Return as 📄 Plain Text.</pre>
     </div>
-    """, unsafe_allow_html=True)
     
-    # Structure guide
-    st.markdown("""
     <div style="font-size: 0.7em; background-color: #f1f8ff; border-radius: 4px; padding: 4px; margin-top: 4px;">
     <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>