Update app.py

app.py

@@ -1,64 +1,76 @@
 import streamlit as st
 import pandas as pd
 import random
+import json
 
 # Set page configuration
 st.set_page_config(page_title="ChatGPT Prompt Generator", page_icon="🧠", layout="wide")
 
-# Custom CSS for horizontal button rows
+# Custom CSS for styling
 st.markdown("""
 <style>
     .main {background-color: #f8f9fa;}
-    .stButton button {
-        border-radius: 4px;
-        padding: 2px 4px;
-        font-size: 0.75em;
-        margin: 1px;
-        white-space: nowrap;
-    }
-    .stButton button:hover {background-color: #e9ecef;}
     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;
+        padding: 0.3rem;
+        font-size: 0.85em;
     }
-    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-row {
-        background-color: white;
-        border: 1px solid #e6e6e6;
-        border-radius: 4px;
-        padding: 5px;
-        margin-bottom: 5px;
-    }
-    .category-label {
+    h1, h2, h3 {margin-top: 0; margin-bottom: 0.2rem;}
+    p, div {margin-bottom: 0.1rem;}
+    .category-header {
         font-weight: bold;
-        font-size: 0.85rem;
+        font-size: 1rem;
+        margin-bottom: 0.2rem;
         color: #333;
-        margin-right: 5px;
-        margin-bottom: 3px;
-        display: block;
-    }
-    .horizontal-buttons {
-        display: flex;
-        flex-wrap: wrap;
-        gap: 2px;
-        align-items: center;
+        background-color: #f1f8ff;
+        padding: 3px 8px;
+        border-radius: 4px;
     }
     .prompt-display {
         background-color: #ffffff;
         border-radius: 4px;
-        padding: 8px;
+        padding: 12px;
         border: 1px solid #e9ecef;
-        min-height: 100px;
-        font-size: 0.8em;
+        min-height: 150px;
         white-space: pre-wrap;
     }
+    .st-emotion-cache-1nv1tyf {
+        font-size: 0.85rem;
+    }
+    .dataframe-container {
+        background-color: white;
+        border: 1px solid #e6e6e6;
+        border-radius: 4px;
+        padding: 8px;
+        margin-bottom: 8px;
+    }
+    .selected-item {
+        background-color: #007bff !important;
+        color: white !important;
+        font-weight: bold;
+        padding: 2px 6px;
+        border-radius: 4px;
+    }
+    .unselected-item {
+        background-color: #f8f9fa;
+        padding: 2px 6px;
+        border-radius: 4px;
+        cursor: pointer;
+    }
+    .unselected-item:hover {
+        background-color: #e9ecef;
+    }
+    table {
+        font-size: 0.85rem;
+    }
+    .clickable {
+        cursor: pointer;
+    }
 </style>
 """, unsafe_allow_html=True)
 
-# Initialize session state for selections
+# Initialize session state
 if 'selections' not in st.session_state:
     st.session_state.selections = {
         'role': None, 'tone': None, 'instruction': None, 'length': None,
@@ -66,7 +78,7 @@ if 'selections' not in st.session_state:
         'about': "", 'inclusion': "", 'exclusion': "", 'input_data': ""
     }
 
-# Data sets
+# Data sets with emoji and names
 data = {
     'roles': [
         {"name": "Professional", "emoji": "👔"}, {"name": "Expert", "emoji": "🧠"},
@@ -122,118 +134,174 @@ data = {
     ]
 }
 
-# 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)
+# Function to convert data to dataframe rows
+def create_dataframe_rows(items, cols=4):
+    # Calculate how many rows we need based on items and columns
+    num_rows = (len(items) + cols - 1) // cols
+    
+    # Create empty rows
+    rows = [["" for _ in range(cols)] for _ in range(num_rows)]
     
-    # Create buttons in streamlit (can't be created inside HTML)
+    # Fill in the values
     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"
+        row_idx = i // cols
+        col_idx = i % cols
+        rows[row_idx][col_idx] = f"{item['emoji']} {item['name']}"
+    
+    return rows
+
+# Function to handle cell click events
+def handle_selection(category, value):
+    # Extract the name without emoji
+    parts = value.split(' ', 1)
+    if len(parts) < 2:
+        return
+    
+    emoji = parts[0]
+    name = parts[1]
+    
+    # Find the item in the data
+    for item in data[f"{category}s"]:
+        if item['name'] == name:
+            st.session_state.selections[category] = item
+            return
+    
+    # If not found (shouldn't happen)
+    st.session_state.selections[category] = {"name": name, "emoji": emoji}
+
+# Function to create dataframe with click handler
+def create_dataframe_category(category, title, emoji_prefix):
+    # Create the dataframe content
+    df_rows = create_dataframe_rows(data[f"{category}s"], cols=4)
+    df = pd.DataFrame(df_rows)
+    
+    # Display the category header
+    st.markdown(f"<div class='category-header'>{emoji_prefix} {title}</div>", unsafe_allow_html=True)
+    
+    # Display in a container
+    st.markdown(f"<div class='dataframe-container'>", unsafe_allow_html=True)
+    
+    # Use an edited dataframe
+    edited_df = st.data_editor(
+        df,
+        key=f"df_{category}",
+        hide_index=True, 
+        column_config={
+            i: st.column_config.Column(
+                label=f"Option {i+1}",
+                width="small",
+            ) for i in range(df.shape[1])
+        },
+        disabled=True,
+        use_container_width=True,
+        on_click=lambda e: handle_selection(category, e.current)
+    )
+    
+    # Check if there's a selected value to highlight
+    if st.session_state.selections[category]:
+        selected_value = f"{st.session_state.selections[category]['emoji']} {st.session_state.selections[category]['name']}"
+        # Since we can't style specific cells in the dataframe editor, we can indicate the selection another way
+        selected_index = None
+        for i, row in df.iterrows():
+            for j, cell in enumerate(row):
+                if cell == selected_value:
+                    selected_index = (i, j)
+                    break
+            if selected_index:
+                break
         
-        if st.button(f"{item['emoji']} {item['name']}", key=key, 
-                  help=f"Select {item['name']}", 
-                  type=button_type):
-            st.session_state.selections[category_name.lower().replace(' ', '_')] = item
-            st.experimental_rerun()
+        if selected_index:
+            st.markdown(f"Selected: **{selected_value}**", unsafe_allow_html=True)
     
-    st.markdown('</div></div>', unsafe_allow_html=True)
+    st.markdown("</div>", unsafe_allow_html=True)
 
-# Minimal header
-st.markdown("<h2 style='text-align: center; font-size: 1.2rem;'>🧠 ChatGPT Prompt Generator</h2>", unsafe_allow_html=True)
+# Function to generate the final prompt
+def generate_prompt():
+    sel = st.session_state.selections
+    
+    # Check if all required fields are selected
+    if not all([sel['role'], sel['tone'], sel['instruction'], sel['length'], 
+               sel['content_type'], sel['audience'], sel['format'], sel['about']]):
+        return "Please select all required components and provide a topic."
+    
+    # Generate the prompt
+    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']}"
+    
+    return prompt
+
+# Header
+st.markdown("<h2 style='text-align: center; font-size: 1.3rem; margin-bottom: 1rem;'>🧠 ChatGPT Prompt Generator</h2>", unsafe_allow_html=True)
 
 # Main layout with two columns
-left_col, right_col = st.columns([3, 1])
+col1, col2 = st.columns([3, 1])
 
-with left_col:
-    # 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 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)
-    
-    # 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",
-        label_visibility="collapsed")
-    
-    # Two fields in one row
+with col1:
+    # Create dataframes for each category
+    create_dataframe_category("role", "Choose a Role", "👤")
+    create_dataframe_category("tone", "Select a Tone", "🎭")
+    create_dataframe_category("instruction", "Select an Instruction", "📝")
+    create_dataframe_category("length", "Select Length", "📏")
+    create_dataframe_category("content_type", "Select Content Type", "📄")
+    create_dataframe_category("audience", "Select Target Audience", "👥")
+    create_dataframe_category("format", "Select Format", "📋")
+    
+    # Text input fields
+    st.markdown("<div class='category-header'>📌 Additional Details</div>", unsafe_allow_html=True)
+    st.markdown("<div class='dataframe-container'>", unsafe_allow_html=True)
+    
+    st.session_state.selections['about'] = st.text_input("💬 Topic", 
+                                                       value=st.session_state.selections['about'], 
+                                                       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", 
-            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")
     
     with col2:
-        st.session_state.selections['exclusion'] = st.text_input("Exclude", 
-            value=st.session_state.selections['exclusion'], 
-            placeholder="What to exclude", 
-            label_visibility="collapsed")
-    
-    # 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)
-
-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']}."""
+        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="Enter any specific information to use",
+                                                          height=100)
+    
+    st.markdown("</div>", unsafe_allow_html=True)
 
-        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."
-    
-    # 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)
+with col2:
+    # Generate the prompt
+    prompt = generate_prompt()
+    
+    # Display the prompt
+    st.markdown("<div class='category-header'>🔮 Generated Prompt</div>", unsafe_allow_html=True)
+    st.markdown("<div class='dataframe-container'>", 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
-    col1, col2, col3 = st.columns(3)
-    with 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="")
     
-    with 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']:
@@ -242,21 +310,22 @@ It should be about {sel['about']}."""
                     st.session_state.selections[key] = None
             st.experimental_rerun()
     
-    with 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()
     
-    st.markdown('</div>', unsafe_allow_html=True)
+    st.markdown("</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)
+    # Sample prompts section
+    st.markdown("<div class='category-header'>📚 Examples</div>", unsafe_allow_html=True)
+    st.markdown("<div class='dataframe-container'>", unsafe_allow_html=True)
     
+    # Example 1
     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.
+    <div style="background-color: #e6f3ff; border: 1px solid #b8daff; border-radius: 4px; padding: 6px; margin-bottom: 6px; font-size: 0.8em;">
+        <b>👨‍🏫 Teaching</b><pre style="white-space: pre-wrap; font-size: 0.8em; margin: 3px 0px;">Act as a 👨‍🏫 Teacher, use 📚 Informative tone, Create a 📋 Guide for 🌱 Beginners.
 
 It should be about Git.
 Include practical examples.
@@ -264,9 +333,12 @@ Exclude advanced techniques.
 
 Return as 📝 Markdown.</pre>
     </div>
+    """, unsafe_allow_html=True)
     
-    <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.
+    # Example 2
+    st.markdown("""
+    <div style="background-color: #e6ffed; border: 1px solid #b8e6cc; border-radius: 4px; padding: 6px; margin-bottom: 6px; font-size: 0.8em;">
+        <b>💼 Business</b><pre style="white-space: pre-wrap; font-size: 0.8em; margin: 3px 0px;">Act as a 👔 Professional, use 🤝 Persuasive tone, Write a 📧 Email for 👩‍💼 Executives.
 
 It should be about a product launch.
 Include ROI metrics.
@@ -274,9 +346,12 @@ Exclude technical details.
 
 Return as 📄 Plain Text.</pre>
     </div>
+    """, unsafe_allow_html=True)
     
-    <div style="font-size: 0.7em; background-color: #f1f8ff; border-radius: 4px; padding: 4px; margin-top: 4px;">
-    <b>Structure:</b><br>
+    # Prompt structure guide
+    st.markdown("""
+    <div style="background-color: #f1f8ff; border-radius: 4px; padding: 6px; margin-top: 6px; font-size: 0.8em;">
+    <b>Prompt 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>
@@ -284,4 +359,4 @@ Return as 📄 Plain Text.</pre>
     </div>
     """, unsafe_allow_html=True)
     
-    st.markdown('</div>', unsafe_allow_html=True)
+    st.markdown("</div>", unsafe_allow_html=True)