Fix autocomplete: use filterable Dropdown instead of Textbox for native autocomplete support

app.py

@@ -368,26 +368,16 @@ smiles_interface = gr.Interface(
     description="Convert an input SMILES string to its canonical form.",
 )
 
-# Function to get autocomplete suggestions
-def get_suggestions(text):
-    """Return top 10 matching chemical names"""
-    if not text or len(text) < 1:
-        return COMMON_CHEMICALS[:10]
-    
-    text_lower = text.lower()
-    matches = [chem for chem in COMMON_CHEMICALS if chem.lower().startswith(text_lower)]
-    return matches[:10] if matches else COMMON_CHEMICALS[:10]
-
 name_interface = gr.Interface(
     fn=name_to_smiles,
     inputs=gr.Textbox(
         label="Chemical Name", 
-        placeholder="Start typing... (e.g., asp, caf, ben)",
-        info="Type at least 1 character to see suggestions"
+        placeholder="Enter chemical name (e.g., aspirin, caffeine, benzene)",
+        info="Enter the full chemical name"
     ),
     outputs=gr.Textbox(label="SMILES"),
     api_name="name_to_smiles",
-    description="Convert a chemical name to SMILES notation. Start typing to see autocomplete suggestions!",
+    description="Convert a chemical name to SMILES notation.",
     examples=[["aspirin"], ["caffeine"], ["benzene"], ["ethanol"], ["glucose"]],
 )
 
@@ -398,11 +388,15 @@ with gr.Blocks() as molecule_3d_block:
     
     with gr.Row():
         with gr.Column():
-            chem_name_input = gr.Textbox(
-                label="Chemical Name",
-                placeholder="Start typing... (e.g., benzene, aspirin, water)",
-                info="Type 1+ characters to see suggestions",
-                elem_id="chem_name"
+            # Use Dropdown with allow_custom_value for autocomplete
+            chem_name_input = gr.Dropdown(
+                choices=COMMON_CHEMICALS,
+                label="Chemical Name - Type to Search",
+                info="Start typing to filter from 100+ chemicals",
+                allow_custom_value=True,
+                value=None,
+                interactive=True,
+                filterable=True
             )
             orbital_checkbox = gr.Checkbox(
                 label="Show Electron Orbitals (s, p, d shapes)",
@@ -410,14 +404,6 @@ with gr.Blocks() as molecule_3d_block:
                 info="Toggle to see s-orbitals (spheres), p-orbitals (dumbbells), and d-orbitals (cloverleaf) around atoms"
             )
             submit_btn = gr.Button("Generate 3D Molecule", variant="primary")
-            
-            # Autocomplete dropdown
-            suggestions_dropdown = gr.Dropdown(
-                choices=COMMON_CHEMICALS[:10],
-                label="Quick Select (or type above)",
-                interactive=True,
-                allow_custom_value=True
-            )
     
     with gr.Row():
         html_output = gr.HTML(label="2D Structure")
@@ -425,27 +411,6 @@ with gr.Blocks() as molecule_3d_block:
     with gr.Row():
         plot_output = gr.Plot(label="3D Interactive Molecule Viewer - Rotate and Zoom!")
     
-    # Update suggestions as user types
-    def update_suggestions(text):
-        suggestions = get_suggestions(text)
-        return gr.Dropdown(choices=suggestions)
-    
-    # Update text input when dropdown selection changes
-    def update_from_dropdown(selected):
-        return selected
-    
-    chem_name_input.change(
-        fn=update_suggestions,
-        inputs=[chem_name_input],
-        outputs=[suggestions_dropdown]
-    )
-    
-    suggestions_dropdown.change(
-        fn=update_from_dropdown,
-        inputs=[suggestions_dropdown],
-        outputs=[chem_name_input]
-    )
-    
     submit_btn.click(
         fn=name_to_3d_molecule,
         inputs=[chem_name_input, orbital_checkbox],