Replace dataframe with HTML table including 'Fix with AI' button in first column

app.py

@@ -253,11 +253,56 @@ with gr.Blocks(title="Organic Reactions Search") as demo:
 
     with gr.Tab("View All Reactions (Table)"):
         gr.Markdown("Browse all 828 reactions in a tabular format.")
-        # Prepare data for table display
-        table_data = df[['corrected_name', 'general_reactants', 'reactants_smiles', 'general_reagents', 'reagents_smiles', 'general_products', 'products_smiles']].copy()
-        table_data['description'] = df['description'].str[:100] + '...'  # Truncate description
-        table_data.columns = ['Reaction Name', 'Reactants', 'Reactants SMILES', 'Reagents', 'Reagents SMILES', 'Products', 'Products SMILES', 'Description (truncated)']
-        table_output = gr.Dataframe(value=table_data, label="All Reactions", interactive=False)
+        
+        # Create HTML table with buttons
+        def create_reactions_table():
+            html = """
+            <table style="width:100%; border-collapse: collapse;">
+                <thead>
+                    <tr style="background-color: #f2f2f2;">
+                        <th style="border: 1px solid #ddd; padding: 8px;">Action</th>
+                        <th style="border: 1px solid #ddd; padding: 8px;">Reaction Name</th>
+                        <th style="border: 1px solid #ddd; padding: 8px;">Reactants</th>
+                        <th style="border: 1px solid #ddd; padding: 8px;">Reactants SMILES</th>
+                        <th style="border: 1px solid #ddd; padding: 8px;">Reagents</th>
+                        <th style="border: 1px solid #ddd; padding: 8px;">Reagents SMILES</th>
+                        <th style="border: 1px solid #ddd; padding: 8px;">Products</th>
+                        <th style="border: 1px solid #ddd; padding: 8px;">Products SMILES</th>
+                        <th style="border: 1px solid #ddd; padding: 8px;">Description</th>
+                    </tr>
+                </thead>
+                <tbody>
+            """
+            
+            for idx, row in df.iterrows():
+                reaction_name = row['corrected_name']
+                reactants = row['general_reactants'] if pd.notna(row['general_reactants']) else 'N/A'
+                reactants_smiles = ', '.join([s for s in row['reactants_smiles'] if s is not None]) if row['reactants_smiles'] else 'N/A'
+                reagents = row['general_reagents'] if pd.notna(row['general_reagents']) else 'N/A'
+                reagents_smiles = ', '.join([s for s in row['reagents_smiles'] if s is not None]) if row['reagents_smiles'] else 'N/A'
+                products = row['general_products'] if pd.notna(row['general_products']) else 'N/A'
+                products_smiles = ', '.join([s for s in row['products_smiles'] if s is not None]) if row['products_smiles'] else 'N/A'
+                description = row['description'][:100] + '...' if len(row['description']) > 100 else row['description']
+                
+                html += f"""
+                    <tr>
+                        <td style="border: 1px solid #ddd; padding: 8px;"><button onclick="alert('Fix with AI functionality for {reaction_name} would be implemented here')">Fix with AI</button></td>
+                        <td style="border: 1px solid #ddd; padding: 8px;">{reaction_name}</td>
+                        <td style="border: 1px solid #ddd; padding: 8px;">{reactants}</td>
+                        <td style="border: 1px solid #ddd; padding: 8px; font-family: monospace; font-size: 12px;">{reactants_smiles}</td>
+                        <td style="border: 1px solid #ddd; padding: 8px;">{reagents}</td>
+                        <td style="border: 1px solid #ddd; padding: 8px; font-family: monospace; font-size: 12px;">{reagents_smiles}</td>
+                        <td style="border: 1px solid #ddd; padding: 8px;">{products}</td>
+                        <td style="border: 1px solid #ddd; padding: 8px; font-family: monospace; font-size: 12px;">{products_smiles}</td>
+                        <td style="border: 1px solid #ddd; padding: 8px;">{description}</td>
+                    </tr>
+                """
+            
+            html += "</tbody></table>"
+            return html
+        
+        table_html = create_reactions_table()
+        table_output = gr.HTML(value=table_html, label="All Reactions Database")
         gr.Markdown("""
         ## API Endpoints