Add autocomplete for chemical names with 100+ common chemicals, shows top 10 matches from 1st character

app.py

@@ -6,6 +6,32 @@ import cirpy
 
 # RDKit API with multiple endpoints
 
+# Common chemical names for autocomplete
+COMMON_CHEMICALS = [
+    "acetaldehyde", "acetic acid", "acetone", "acetonitrile", "acetylsalicylic acid",
+    "adenine", "alanine", "ammonia", "amphetamine", "aniline", "anthracene", "arginine",
+    "aspirin", "atrazine", "azulene",
+    "benzaldehyde", "benzene", "benzoic acid", "benzophenone", "biphenyl", "butane", "butanol",
+    "caffeine", "camphor", "capsaicin", "carbazole", "carbon dioxide", "carbon monoxide",
+    "catechol", "cellulose", "chlorobenzene", "chloroform", "cholesterol", "citric acid",
+    "cocaine", "codeine", "cortisol", "coumarin", "cresol", "cumene", "cyanide", "cyclohexane",
+    "cysteine", "cytosine",
+    "decane", "dextrose", "diazepam", "dichloromethane", "diethyl ether", "dimethylformamide",
+    "dimethyl sulfoxide", "dioxane", "dopamine", "ethane", "ethanol", "ethyl acetate",
+    "ethylbenzene", "ethylene", "ethylene glycol",
+    "formaldehyde", "formic acid", "fructose", "furan", "galactose", "glucose", "glutamic acid",
+    "glutamine", "glycerol", "glycine", "guanine", "heptane", "hexane", "histidine", "hydrazine",
+    "hydrogen peroxide", "hydroquinone", "ibuprofen", "imidazole", "indole", "isobutane",
+    "isoleucine", "isopropanol", "lactose", "leucine", "limonene", "lysine", "maltose", "menthol",
+    "methane", "methanol", "methionine", "methyl acetate", "methylamine", "morphine", "naphthalene",
+    "nicotine", "nitrobenzene", "octane", "paracetamol", "pentane", "phenol", "phenylalanine",
+    "phthalic acid", "proline", "propane", "propanol", "pyridine", "pyrimidine", "pyrrole",
+    "pyruvic acid", "quinoline", "resorcinol", "ribose", "salicylic acid", "serine", "serotonin",
+    "styrene", "sucrose", "terephthalic acid", "testosterone", "tetrahydrofuran", "thiophene",
+    "threonine", "thymine", "toluene", "tryptophan", "tyrosine", "uracil", "urea", "valine",
+    "vanillin", "vinyl chloride", "water", "xylene", "xylose"
+]
+
 
 def _mol_from_smiles(smiles: str):
     mol = Chem.MolFromSmiles(smiles)
@@ -342,15 +368,108 @@ 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="e.g., aspirin, caffeine, benzene"),
+    inputs=gr.Textbox(
+        label="Chemical Name", 
+        placeholder="Start typing... (e.g., asp, caf, ben)",
+        info="Type at least 1 character to see suggestions"
+    ),
     outputs=gr.Textbox(label="SMILES"),
     api_name="name_to_smiles",
-    description="Convert a chemical name to SMILES notation.",
-    examples=[["aspirin"], ["caffeine"], ["benzene"], ["ethanol"]],
+    description="Convert a chemical name to SMILES notation. Start typing to see autocomplete suggestions!",
+    examples=[["aspirin"], ["caffeine"], ["benzene"], ["ethanol"], ["glucose"]],
 )
 
+# Create Blocks interface for molecule viewer with autocomplete
+with gr.Blocks() as molecule_3d_block:
+    gr.Markdown("## 🔬 3D Molecule Viewer with Electron Orbitals")
+    gr.Markdown("Enter a chemical name to view its 2D and 3D structure. Toggle orbitals to see s, p, and d orbital shapes!")
+    
+    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"
+            )
+            orbital_checkbox = gr.Checkbox(
+                label="Show Electron Orbitals (s, p, d shapes)",
+                value=False,
+                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")
+    
+    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],
+        outputs=[html_output, plot_output, gr.Textbox(visible=False)],
+        api_name="name_to_molecule"
+    )
+    
+    # Examples
+    gr.Examples(
+        examples=[
+            ["benzene", False],
+            ["benzene", True],
+            ["water", True],
+            ["aspirin", False],
+            ["caffeine", True],
+            ["glucose", False],
+            ["dopamine", True]
+        ],
+        inputs=[chem_name_input, orbital_checkbox],
+        outputs=[html_output, plot_output],
+        fn=name_to_3d_molecule,
+        cache_examples=False
+    )
+
 mw_interface = gr.Interface(
     fn=molecular_weight,
     inputs=gr.Textbox(label="SMILES"),
@@ -375,33 +494,9 @@ tpsa_interface = gr.Interface(
     description="Calculate the topological polar surface area (TPSA).",
 )
 
-molecule_3d_interface = gr.Interface(
-    fn=name_to_3d_molecule,
-    inputs=[
-        gr.Textbox(label="Chemical Name", placeholder="e.g., benzene, aspirin, caffeine, glucose"),
-        gr.Checkbox(label="Show Electron Orbitals (s, p, d shapes)", value=False, info="Toggle to see s-orbitals (spheres), p-orbitals (dumbbells), and d-orbitals (cloverleaf) around atoms")
-    ],
-    outputs=[
-        gr.HTML(label="2D Structure"),
-        gr.Plot(label="3D Interactive Molecule Viewer - Rotate and Zoom!"),
-        gr.Textbox(label="3D SDF Content (Optional - for external viewers)", lines=10, max_lines=20, visible=False)
-    ],
-    api_name="name_to_molecule",
-    description="🔬 View 2D structure and interactive 3D molecule with atom labels. Click and drag to rotate, scroll to zoom! ✨ Enable 'Show Electron Orbitals' to see s-orbitals (spheres), p-orbitals (dumbbells), and d-orbitals (cloverleaf shapes).",
-    cache_examples=False,
-    examples=[
-        ["benzene", False], 
-        ["benzene", True],
-        ["water", True],
-        ["aspirin", False], 
-        ["caffeine", True], 
-        ["glucose", False]
-    ],
-)
-
 
 demo = gr.TabbedInterface(
-    [name_interface, molecule_3d_interface, smiles_interface, mw_interface, logp_interface, tpsa_interface],
+    [name_interface, molecule_3d_block, smiles_interface, mw_interface, logp_interface, tpsa_interface],
     [
         "Name to SMILES",
         "Molecule Viewer",