Update app.py

app.py

@@ -5,61 +5,61 @@ import random
 # Set page configuration
 st.set_page_config(page_title="ChatGPT Prompt Generator", page_icon="🧠", layout="wide")
 
-# Custom CSS for more compact layout
+# Custom CSS for ultra-compact layout with wide columns
 st.markdown("""
 <style>
     .main {background-color: #f8f9fa;}
     .stButton button {
-        border-radius: 6px;
-        padding: 2px 5px;
-        font-size: 0.8em;
+        border-radius: 4px;
+        padding: 1px 3px;
+        font-size: 0.7em;
         display: inline-flex;
         align-items: center;
         margin: 1px;
         min-height: 0px;
+        white-space: nowrap;
     }
     .stButton button:hover {background-color: #e9ecef;}
-    div[data-testid="stVerticalBlock"] {gap: 0.5rem;}
-    div[data-testid="stHorizontalBlock"] {gap: 0.5rem;}
+    div[data-testid="stVerticalBlock"] {gap: 0.3rem;}
+    div[data-testid="stHorizontalBlock"] {gap: 0.3rem;}
     .stTextArea textarea, .stTextInput input {
-        padding: 0.3rem;
-        font-size: 0.8em;
+        padding: 0.2rem;
+        font-size: 0.7em;
         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 {
+    .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(4, 1fr);
+        grid-template-columns: repeat(10, 1fr);
         gap: 2px;
     }
-    .grid-item {margin: 0px;}
     .section-header {
         font-weight: bold;
-        font-size: 1rem;
-        margin-bottom: 0.2rem;
-        margin-top: 0.3rem;
+        font-size: 0.9rem;
+        margin-bottom: 0.1rem;
+        margin-top: 0.2rem;
+        color: #333;
     }
     .prompt-display {
         background-color: #ffffff;
-        border-radius: 5px;
-        padding: 10px;
+        border-radius: 4px;
+        padding: 8px;
         border: 1px solid #e9ecef;
-        min-height: 120px;
-        font-size: 0.85em;
+        min-height: 100px;
+        font-size: 0.8em;
         white-space: pre-wrap;
     }
     .sample-prompt {
-        font-size: 0.8em;
-        padding: 5px;
-        border-radius: 5px;
-        margin-bottom: 5px;
+        font-size: 0.7em;
+        padding: 3px;
+        border-radius: 4px;
+        margin-bottom: 3px;
     }
-    .emoji {font-size: 1.1em;}
+    .emoji {font-size: 0.9em;}
 </style>
 """, unsafe_allow_html=True)
 
@@ -81,7 +81,9 @@ 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": "Therapist", "emoji": "🧐"}, {"name": "Detective", "emoji": "🔍"},
+        {"name": "Journalist", "emoji": "📰"}, {"name": "Scientist", "emoji": "🔬"},
+        {"name": "Chef", "emoji": "👨‍🍳"}, {"name": "Artist", "emoji": "🎨"}
     ],
     'tones': [
         {"name": "Informative", "emoji": "ℹ️"}, {"name": "Inspirational", "emoji": "✨"},
@@ -89,7 +91,9 @@ 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": "Enthusiastic", "emoji": "🤩"}, {"name": "Thoughtful", "emoji": "💭"},
+        {"name": "Sarcastic", "emoji": "😏"}, {"name": "Motivated", "emoji": "💪"},
+        {"name": "Critical", "emoji": "🧐"}, {"name": "Optimistic", "emoji": "😃"}
     ],
     'instructions': [
         {"name": "Create", "emoji": "🔨"}, {"name": "Suggest", "emoji": "💡"},
@@ -97,10 +101,13 @@ 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": "Evaluate", "emoji": "⭐"}, {"name": "List", "emoji": "📋"},
+        {"name": "Draft", "emoji": "📃"}, {"name": "Review", "emoji": "👁️"},
+        {"name": "Generate", "emoji": "⚙️"}, {"name": "Plan", "emoji": "🗓️"}
     ],
     'lengths': [
-        {"name": "300 Words", "emoji": "📝"}, {"name": "500 Words", "emoji": "📄"},
+        {"name": "100 Words", "emoji": "📎"}, {"name": "300 Words", "emoji": "📝"}, 
+        {"name": "500 Words", "emoji": "📄"}, {"name": "1000 Words", "emoji": "📃"},
         {"name": "Short", "emoji": "🩳"}, {"name": "Medium", "emoji": "📊"},
         {"name": "Long", "emoji": "📜"}, {"name": "Brief", "emoji": "💨"},
         {"name": "Detailed", "emoji": "🔎"}, {"name": "Comprehensive", "emoji": "📚"}
@@ -111,34 +118,31 @@ 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": "Plan", "emoji": "📆"}, {"name": "Script", "emoji": "🎬"},
+        {"name": "Outline", "emoji": "📑"}, {"name": "Letter", "emoji": "✉️"},
+        {"name": "Presentation", "emoji": "🎯"}, {"name": "Analysis", "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": "Developers", "emoji": "💻"}, {"name": "Children", "emoji": "👶"},
+        {"name": "Executives", "emoji": "👩‍💼"}, {"name": "Seniors", "emoji": "👵"},
+        {"name": "Teachers", "emoji": "👩‍🏫"}, {"name": "Parents", "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": "PDF", "emoji": "📑"}, {"name": "Python", "emoji": "🐍"},
+        {"name": "JavaScript", "emoji": "📜"}, {"name": "SQL", "emoji": "💾"},
+        {"name": "CSV", "emoji": "📊"}, {"name": "XML", "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):
+# 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='grid-container'>", unsafe_allow_html=True)
+    st.markdown("<div class='wide-grid-container'>", unsafe_allow_html=True)
     
     for i, item in enumerate(items):
         key = f"{category_name.lower().replace(' ', '_')}_{i}"
@@ -146,125 +150,155 @@ def create_category_buttons(category_name, items, col_count=4):
         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):
+                   type=button_type, use_container_width=True):
             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)
+# 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 with tabs
-tab1, tab2 = st.tabs(["🔮 Generator", "📚 Examples"])
+# Main layout - Two rows with many columns
+row1, row2 = st.columns([7, 3])
 
-with tab1:
-    left_col, right_col = st.columns([7, 3])
+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 col2:
+        create_wide_grid_buttons("Length", data['lengths'])
+        create_wide_grid_buttons("Content Type", data['content_types'])
+        create_wide_grid_buttons("Audience", data['audiences'])
+    
+    # Format and text fields in a more compact layout
+    format_col, inputs_col = st.columns([2, 8])
     
-    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 format_col:
+        create_wide_grid_buttons("Format", data['formats'])
+    
+    with inputs_col:
+        text_col1, text_col2, text_col3, text_col4 = st.columns(4)
         
-        # 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 text_col1:
+            st.session_state.selections['about'] = st.text_input("💬 Topic", 
+                value=st.session_state.selections['about'], 
+                placeholder="Enter topic", 
+                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']
-        ])
+        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")
         
-        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']}.
+        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", 
+                value=st.session_state.selections['input_data'], 
+                placeholder="Input data", 
+                label_visibility="collapsed")
+
+with row2:
+    # 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."
+        if sel['inclusion']:
+            prompt += f"\nInclude {sel['inclusion']}."
         
-        st.markdown("<div class='prompt-display'>", unsafe_allow_html=True)
-        st.write(prompt)
-        st.markdown("</div>", unsafe_allow_html=True)
+        if sel['exclusion']:
+            prompt += f"\nExclude {sel['exclusion']}."
         
-        # 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
+        prompt += f"\n\nReturn the output as {sel['format']['emoji']} {sel['format']['name']}."
         
-        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):
+        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 in a row
+    button_col1, button_col2, button_col3 = st.columns(3)
+    with button_col1:
+        if st.button("📋 Copy", type="primary", use_container_width=True):
+            st.code(prompt, language="")  # This is just to show it was copied
+    
+    with button_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()
+            
+    with button_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'])
             st.experimental_rerun()
-        
-        # Quick guide
+    
+    # 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)
+    
+    with sample_col1:
         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 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.
+Include practical examples.
+Exclude advanced techniques.
+
+Return as 📝 Markdown.</pre>
         </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.
+
+It should be about a product launch.
+Include ROI metrics.
+Exclude technical details.
 
-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>
+Return as 📄 Plain Text.</pre>
         </div>
         """, unsafe_allow_html=True)
     
-    # Quick tips
+    # Quick guide
     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 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>
+    It should be about [TOPIC].<br>
+    Include [INCLUSION]. Exclude [EXCLUSION].<br>
+    Return as [FORMAT].
     </div>
     """, unsafe_allow_html=True)