Upload folder using huggingface_hub

README.md

@@ -36,12 +36,13 @@ reps =    [
       "model": 0,
       "chain": "",
       "resname": "",
-      "style": "stick",
-      "color": "whiteCarbon",
-      "residue_range": "",
+      "style": "cartoon",
+      "color": "hydrophobicity",
+      # "residue_range": "",
       "around": 0,
       "byres": False,
-      "visible": False
+      # "visible": False,
+      # "opacity": 0.5
     }
   ]
 
@@ -52,11 +53,19 @@ def predict(x):
     print(x.name)
     return x
 
+# def update_color(mol, color):
+#     reps[0]['color'] = color
+#     print(reps)
+#     return Molecule3D(mol, reps=reps)
+
 with gr.Blocks() as demo:
     gr.Markdown("# Molecule3D")
+    # color_choices = ['redCarbon', 'greenCarbon', 'orangeCarbon', 'blackCarbon', 'blueCarbon', 'grayCarbon', 'cyanCarbon']
+
     inp = Molecule3D(label="Molecule3D", reps=reps)
+    # cdr_color = gr.Dropdown(choices=color_choices, label="CDR color", value='redCarbon')
     out = Molecule3D(label="Output", reps=reps)
-
+    # cdr_color.change(update_color, inputs=[inp,cdr_color], outputs=out)
     btn = gr.Button("Predict")
     gr.Markdown(""" 
     You can configure the default rendering of the molecule by adding a list of representations
@@ -68,7 +77,8 @@ with gr.Blocks() as demo:
           "color": "whiteCarbon",
           "residue_range": "",
           "around": 0,
-          "byres": False,
+          "opacity":1
+          
         },
         {
           "model": 0,

app.py

@@ -11,12 +11,13 @@ reps =    [
       "model": 0,
       "chain": "",
       "resname": "",
-      "style": "stick",
-      "color": "whiteCarbon",
-      "residue_range": "",
+      "style": "cartoon",
+      "color": "hydrophobicity",
+      # "residue_range": "",
       "around": 0,
       "byres": False,
-      "visible": False
+      # "visible": False,
+      # "opacity": 0.5
     }
   ]
 
@@ -27,11 +28,19 @@ def predict(x):
     print(x.name)
     return x
 
+# def update_color(mol, color):
+#     reps[0]['color'] = color
+#     print(reps)
+#     return Molecule3D(mol, reps=reps)
+
 with gr.Blocks() as demo:
     gr.Markdown("# Molecule3D")
+    # color_choices = ['redCarbon', 'greenCarbon', 'orangeCarbon', 'blackCarbon', 'blueCarbon', 'grayCarbon', 'cyanCarbon']
+
     inp = Molecule3D(label="Molecule3D", reps=reps)
+    # cdr_color = gr.Dropdown(choices=color_choices, label="CDR color", value='redCarbon')
     out = Molecule3D(label="Output", reps=reps)
-
+    # cdr_color.change(update_color, inputs=[inp,cdr_color], outputs=out)
     btn = gr.Button("Predict")
     gr.Markdown(""" 
     You can configure the default rendering of the molecule by adding a list of representations
@@ -43,7 +52,8 @@ with gr.Blocks() as demo:
           "color": "whiteCarbon",
           "residue_range": "",
           "around": 0,
-          "byres": False,
+          "opacity":1
+          
         },
         {
           "model": 0,

space.py

@@ -51,12 +51,13 @@ reps =    [
       "model": 0,
       "chain": "",
       "resname": "",
-      "style": "stick",
-      "color": "whiteCarbon",
-      "residue_range": "",
+      "style": "cartoon",
+      "color": "hydrophobicity",
+      # "residue_range": "",
       "around": 0,
       "byres": False,
-      "visible": False
+      # "visible": False,
+      # "opacity": 0.5
     }
   ]
 
@@ -67,11 +68,19 @@ def predict(x):
     print(x.name)
     return x
 
+# def update_color(mol, color):
+#     reps[0]['color'] = color
+#     print(reps)
+#     return Molecule3D(mol, reps=reps)
+
 with gr.Blocks() as demo:
     gr.Markdown("# Molecule3D")
+    # color_choices = ['redCarbon', 'greenCarbon', 'orangeCarbon', 'blackCarbon', 'blueCarbon', 'grayCarbon', 'cyanCarbon']
+
     inp = Molecule3D(label="Molecule3D", reps=reps)
+    # cdr_color = gr.Dropdown(choices=color_choices, label="CDR color", value='redCarbon')
     out = Molecule3D(label="Output", reps=reps)
-
+    # cdr_color.change(update_color, inputs=[inp,cdr_color], outputs=out)
     btn = gr.Button("Predict")
     gr.Markdown(\"\"\" 
     You can configure the default rendering of the molecule by adding a list of representations
@@ -83,7 +92,8 @@ with gr.Blocks() as demo:
           "color": "whiteCarbon",
           "residue_range": "",
           "around": 0,
-          "byres": False,
+          "opacity":1
+          
         },
         {
           "model": 0,

src/README.md

@@ -36,12 +36,13 @@ reps =    [
       "model": 0,
       "chain": "",
       "resname": "",
-      "style": "stick",
-      "color": "whiteCarbon",
-      "residue_range": "",
+      "style": "cartoon",
+      "color": "hydrophobicity",
+      # "residue_range": "",
       "around": 0,
       "byres": False,
-      "visible": False
+      # "visible": False,
+      # "opacity": 0.5
     }
   ]
 
@@ -52,11 +53,19 @@ def predict(x):
     print(x.name)
     return x
 
+# def update_color(mol, color):
+#     reps[0]['color'] = color
+#     print(reps)
+#     return Molecule3D(mol, reps=reps)
+
 with gr.Blocks() as demo:
     gr.Markdown("# Molecule3D")
+    # color_choices = ['redCarbon', 'greenCarbon', 'orangeCarbon', 'blackCarbon', 'blueCarbon', 'grayCarbon', 'cyanCarbon']
+
     inp = Molecule3D(label="Molecule3D", reps=reps)
+    # cdr_color = gr.Dropdown(choices=color_choices, label="CDR color", value='redCarbon')
     out = Molecule3D(label="Output", reps=reps)
-
+    # cdr_color.change(update_color, inputs=[inp,cdr_color], outputs=out)
     btn = gr.Button("Predict")
     gr.Markdown(""" 
     You can configure the default rendering of the molecule by adding a list of representations
@@ -68,7 +77,8 @@ with gr.Blocks() as demo:
           "color": "whiteCarbon",
           "residue_range": "",
           "around": 0,
-          "byres": False,
+          "opacity":1
+          
         },
         {
           "model": 0,

src/demo/app.py

@@ -11,12 +11,13 @@ reps =    [
       "model": 0,
       "chain": "",
       "resname": "",
-      "style": "stick",
-      "color": "whiteCarbon",
-      "residue_range": "",
+      "style": "cartoon",
+      "color": "hydrophobicity",
+      # "residue_range": "",
       "around": 0,
       "byres": False,
-      "visible": False
+      # "visible": False,
+      # "opacity": 0.5
     }
   ]
 
@@ -27,11 +28,19 @@ def predict(x):
     print(x.name)
     return x
 
+# def update_color(mol, color):
+#     reps[0]['color'] = color
+#     print(reps)
+#     return Molecule3D(mol, reps=reps)
+
 with gr.Blocks() as demo:
     gr.Markdown("# Molecule3D")
+    # color_choices = ['redCarbon', 'greenCarbon', 'orangeCarbon', 'blackCarbon', 'blueCarbon', 'grayCarbon', 'cyanCarbon']
+
     inp = Molecule3D(label="Molecule3D", reps=reps)
+    # cdr_color = gr.Dropdown(choices=color_choices, label="CDR color", value='redCarbon')
     out = Molecule3D(label="Output", reps=reps)
-
+    # cdr_color.change(update_color, inputs=[inp,cdr_color], outputs=out)
     btn = gr.Button("Predict")
     gr.Markdown(""" 
     You can configure the default rendering of the molecule by adding a list of representations
@@ -43,7 +52,8 @@ with gr.Blocks() as demo:
           "color": "whiteCarbon",
           "residue_range": "",
           "around": 0,
-          "byres": False,
+          "opacity":1
+          
         },
         {
           "model": 0,

src/demo/space.py

@@ -51,12 +51,13 @@ reps =    [
       "model": 0,
       "chain": "",
       "resname": "",
-      "style": "stick",
-      "color": "whiteCarbon",
-      "residue_range": "",
+      "style": "cartoon",
+      "color": "hydrophobicity",
+      # "residue_range": "",
       "around": 0,
       "byres": False,
-      "visible": False
+      # "visible": False,
+      # "opacity": 0.5
     }
   ]
 
@@ -67,11 +68,19 @@ def predict(x):
     print(x.name)
     return x
 
+# def update_color(mol, color):
+#     reps[0]['color'] = color
+#     print(reps)
+#     return Molecule3D(mol, reps=reps)
+
 with gr.Blocks() as demo:
     gr.Markdown("# Molecule3D")
+    # color_choices = ['redCarbon', 'greenCarbon', 'orangeCarbon', 'blackCarbon', 'blueCarbon', 'grayCarbon', 'cyanCarbon']
+
     inp = Molecule3D(label="Molecule3D", reps=reps)
+    # cdr_color = gr.Dropdown(choices=color_choices, label="CDR color", value='redCarbon')
     out = Molecule3D(label="Output", reps=reps)
-
+    # cdr_color.change(update_color, inputs=[inp,cdr_color], outputs=out)
     btn = gr.Button("Predict")
     gr.Markdown(\"\"\" 
     You can configure the default rendering of the molecule by adding a list of representations
@@ -83,7 +92,8 @@ with gr.Blocks() as demo:
           "color": "whiteCarbon",
           "residue_range": "",
           "around": 0,
-          "byres": False,
+          "opacity":1
+          
         },
         {
           "model": 0,

src/frontend/Index.svelte

@@ -62,6 +62,17 @@
     retrieveContent(value);
   }
 
+  $: if (JSON.stringify(reps) !== JSON.stringify(reps)) {
+    gradio.dispatch("change");
+    old_value = value;
+
+    // console.log("reps changed");
+    // console.log(reps);
+
+    moldata = null;
+    retrieveContent(value);
+  }
+
   let dragging = false;
   let pending_upload = false;
 
@@ -102,6 +113,10 @@
         "spectrum",
       ],
     },
+    opacity: {
+      type: Number,
+      default: 1,
+    },
     residue_range: {
       type: String,
       default: "",

src/frontend/shared/MolecularViewer.svelte

@@ -2,7 +2,7 @@
   import * as mol from "3dmol/build/3Dmol.js";
   let TDmol = mol;
 
-  import { onMount, onDestroy } from "svelte";
+  import { onMount, onDestroy, beforeUpdate } from "svelte";
 
   let viewer;
   export let confidenceLabel = null;
@@ -70,6 +70,7 @@
       around: 0,
       byres: false,
       visible: true,
+      opacity: 1,
     });
     representations = representations;
   }
@@ -94,6 +95,69 @@
       return "Blue";
     }
   };
+
+  let colorHydrophobicity = function (atom) {
+    let kyte_doolittle = {
+      ILE: 4.5,
+      VAL: 4.2,
+      LEU: 3.8,
+      PHE: 2.8,
+      CYS: 2.5,
+      MET: 1.9,
+      ALA: 1.8,
+      GLY: -0.4,
+      THR: -0.7,
+      SER: -0.8,
+      TRP: -0.9,
+      TYR: -1.3,
+      PRO: -1.6,
+      HIS: -3.2,
+      GLU: -3.5,
+      GLN: -3.5,
+      ASP: -3.5,
+      ASN: -3.5,
+      LYS: -3.9,
+      ARG: -4.5,
+    };
+    if (atom.resn in kyte_doolittle) {
+      const value = kyte_doolittle[atom.resn];
+      const min = -4.5;
+      const max = 4.5;
+
+      // Normalize the value to a range of 0 to 1
+      const normalized = (value - min) / (max - min);
+
+      // Interpolate colors between DarkCyan, White, and DarkGoldenRod
+      const interpolateColor = (start, end, factor) => {
+        const startRGB = parseInt(start.slice(1), 16);
+        const endRGB = parseInt(end.slice(1), 16);
+
+        const r = Math.round(
+          ((endRGB >> 16) - (startRGB >> 16)) * factor + (startRGB >> 16)
+        );
+        const g = Math.round(
+          (((endRGB >> 8) & 0xff) - ((startRGB >> 8) & 0xff)) * factor +
+            ((startRGB >> 8) & 0xff)
+        );
+        const b = Math.round(
+          ((endRGB & 0xff) - (startRGB & 0xff)) * factor + (startRGB & 0xff)
+        );
+
+        return `#${((1 << 24) + (r << 16) + (g << 8) + b).toString(16).slice(1)}`;
+      };
+
+      if (normalized <= 0.5) {
+        // Interpolate between DarkCyan and White
+        return interpolateColor("#008B8B", "#FFFFFF", normalized * 2);
+      } else {
+        // Interpolate between White and DarkGoldenRod
+        return interpolateColor("#FFFFFF", "#B8860B", (normalized - 0.5) * 2);
+      }
+    } else {
+      return "#FFFFFF"; // White
+    }
+  };
+
   let view;
 
   function resetZoom(rep) {
@@ -125,11 +189,16 @@
 
         if (rep.color === "alphafold") {
           colorObj = { colorfunc: colorAlpha };
+        } else if (rep.color === "hydrophobicity") {
+          colorObj = { colorfunc: colorHydrophobicity };
         } else if (rep.color == "spectrum") {
           colorObj = { color: "spectrum" };
         } else {
           colorObj = { colorscheme: rep.color };
         }
+
+        colorObj.opacity = rep.opacity;
+
         let selObj = { model: rep.model };
         if (rep.chain !== "") {
           selObj.chain = rep.chain;
@@ -151,7 +220,6 @@
         }
 
         if (rep.style === "surface") {
-          colorObj.opacity = 0.8;
           view.addSurface(TDmol.SurfaceType.VDW, colorObj, selObj);
         } else {
           try {
@@ -197,7 +265,6 @@
       }
     });
     representations = uniqueReps;
-    console.log(moldata);
     if (moldata.length > 0) {
       moldata.forEach((element) => {
         if (element.asFrames) {
@@ -217,6 +284,9 @@
       if (rep.color === "alphafold") {
         anyColorAlphaFold = true;
       }
+      if (rep.color === "hydrophobicity") {
+        anyColorHydrophobic = true;
+      }
     });
 
     if (labelHover) {
@@ -259,6 +329,11 @@
     }
   });
 
+  beforeUpdate(() => {
+    console.log("beforeUpdate");
+    console.log(representations);
+  });
+
   $: applyStyles(representations);
   let hasFrames = false;
   $: {
@@ -279,6 +354,16 @@
       }
     });
   }
+
+  let anyColorHydrophobic = false;
+  $: {
+    anyColorHydrophobic = false;
+    representations.forEach((rep) => {
+      if (rep.color === "hydrophobicity") {
+        anyColorHydrophobic = true;
+      }
+    });
+  }
   function toggleAnimation() {
     console.log(view.isAnimated());
     if (isAnimated) {
@@ -422,6 +507,36 @@
         </div>
       {/if}
 
+      {#if anyColorHydrophobic}
+        <div class="absolute bottom-0 left-0 z-50 p-2 mb-2 w-full bg-white">
+          <div class="flex text-sm items-center space-x-2 justify-center">
+            <div class="flex space-x-1 py-1 items-center">
+              <a
+                class="cursor-pointer"
+                href="https://pubmed.ncbi.nlm.nih.gov/7108955/"
+                >Kyte & Doolittle hydrophobicity scale:</a
+              >
+            </div>
+            <div class="flex space-x-1 py-1 items-center">
+              <span class="w-4 h-4" style="background-color: #B8860B;"
+                >&nbsp;</span
+              ><span class="legendlabel">Hydrophobic</span>
+            </div>
+            <div class="flex space-x-1 py-1 items-center">
+              <span
+                class="w-4 h-4 border border-gray-300"
+                style="background-color: white">&nbsp;</span
+              ><span class="legendlabel">Neutral</span>
+            </div>
+            <div class="flex space-x-1 py-1 items-center">
+              <span class="w-4 h-4" style="background-color: darkcyan;"
+                >&nbsp;</span
+              ><span class="legendlabel">Hydrophilic</span>
+            </div>
+          </div>
+        </div>
+      {/if}
+
       {#if hasFrames}
         <div
           class="absolute z-50 bottom-0 right-0 mr-2 flex divide-x border border-gray-200 mb-2 rounded items-center justify-center"
@@ -794,6 +909,24 @@
                         <option value="sphere">Sphere</option>
                       </select>
                     </div>
+                    <div
+                      class="flex p-1 items-center text-gray-700 space-x-1 text-sm"
+                    >
+                      <div class="">Opacity</div>
+                      <input
+                        id="around"
+                        type="range"
+                        value={rep.opacity}
+                        min="0"
+                        max="1"
+                        step="0.1"
+                        on:change={(event) => {
+                          rep.opacity = event.target.value;
+                        }}
+                        class="h-2 w-full bg-gray-200 rounded-lg appearance-none cursor-pointer dark:bg-gray-700"
+                      />
+                      <input type="text" bind:value={rep.opacity} class="w-8" />
+                    </div>
                     <div
                       class="flex p-1 items-center text-gray-700 space-x-1 text-sm"
                     >
@@ -813,6 +946,7 @@
                       <input type="text" bind:value={rep.around} class="w-8" />
                       <div>Å</div>
                     </div>
+
                     <div
                       class="flex p-1 items-center text-gray-700 space-x-1 text-sm"
                     >
@@ -903,6 +1037,14 @@
                       >
                         AlphaFold
                       </button>
+                      <button
+                        class={rep.color === "hydrophobicity"
+                          ? "rounded-lg p-1 border border-gray-400 cursor-pointer bg-gray-200"
+                          : "rounded-lg p-1 border border-gray-200 cursor-pointer bg-white"}
+                        on:click={() => (rep.color = "hydrophobicity")}
+                      >
+                        Hydrophobicity
+                      </button>
                       <button
                         class={rep.color === "default"
                           ? "rounded-lg p-1 border border-gray-400 cursor-pointer bg-gray-200"
@@ -919,6 +1061,8 @@
                       >
                         Jmol
                       </button>
+                    </div>
+                    <div class="flex space-x-2 py-2 text-sm">
                       <button
                         class={rep.color === "chain"
                           ? "rounded-lg p-1 border border-gray-400 cursor-pointer bg-gray-200"

src/pyproject.toml

@@ -8,7 +8,7 @@ build-backend = "hatchling.build"
 
 [project]
 name = "gradio_molecule3d"
-version = "0.0.6"
+version = "0.0.7"
 description = "Python library for easily interacting with trained machine learning models"
 readme = "README.md"
 license = "Apache-2.0"