Update app.py

app.py

@@ -134,84 +134,26 @@ data = {
     ]
 }
 
-# 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)]
-    
-    # Fill in the values
-    for i, item in enumerate(items):
-        row_idx = i // cols
-        col_idx = i % cols
-        rows[row_idx][col_idx] = f"{item['emoji']} {item['name']}"
-    
-    return rows
+# Function to handle selection
+def handle_selection(category, item):
+    st.session_state.selections[category] = item
 
-# 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
+# Function to create category selection with buttons
 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)
+    st.markdown("<div class='dataframe-container'>", 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 selected_index:
-            st.markdown(f"Selected: **{selected_value}**", unsafe_allow_html=True)
+    # Create 4 columns for layout
+    cols = st.columns(4)
+    for i, item in enumerate(data[f"{category}s"]):
+        col = cols[i % 4]
+        label = f"{item['emoji']} {item['name']}"
+        is_selected = st.session_state.selections[category] == item
+        with col:
+            if st.button(label, key=f"{category}_{i}", 
+                        type="primary" if is_selected else "secondary",
+                        use_container_width=True):
+                handle_selection(category, item)
     
     st.markdown("</div>", unsafe_allow_html=True)
 
@@ -219,12 +161,10 @@ def create_dataframe_category(category, title, emoji_prefix):
 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']}."""
@@ -249,7 +189,6 @@ st.markdown("<h2 style='text-align: center; font-size: 1.3rem; margin-bottom: 1r
 col1, col2 = st.columns([3, 1])
 
 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", "📝")
@@ -258,7 +197,6 @@ with col1:
     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)
     
@@ -285,17 +223,14 @@ with col1:
     st.markdown("</div>", 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)
     
-    # Action buttons
     btn1, btn2, btn3 = st.columns(3)
     with btn1:
         if st.button("📋 Copy", type="primary", use_container_width=True):
@@ -308,21 +243,19 @@ with col2:
                     st.session_state.selections[key] = ""
                 else:
                     st.session_state.selections[key] = None
-            st.experimental_rerun()
+            st.rerun()  # Updated from st.experimental_rerun() to st.rerun() for newer Streamlit versions
     
     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.rerun()
     
     st.markdown("</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: 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.
@@ -335,7 +268,6 @@ Return as 📝 Markdown.</pre>
     </div>
     """, unsafe_allow_html=True)
     
-    # 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.
@@ -348,7 +280,6 @@ Return as 📄 Plain Text.</pre>
     </div>
     """, unsafe_allow_html=True)
     
-    # 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>