Upload 24 files

gradio_molecule3d/backend/gradio_molecule3d/molecule3d.py

@@ -0,0 +1,357 @@
+"""gr.File() component"""
+
+from __future__ import annotations
+
+import tempfile
+import warnings
+from pathlib import Path
+from typing import TYPE_CHECKING, Any, Callable, Literal, Sequence
+
+import gradio_client.utils as client_utils
+from gradio_client import handle_file
+
+import gradio as gr
+from gradio import processing_utils
+from gradio.components.base import Component
+from gradio.data_classes import FileData, ListFiles
+from gradio.events import Events
+from gradio.utils import NamedString
+import ase.io
+import numpy as np
+
+if TYPE_CHECKING:
+    from gradio.components import Timer
+
+
+def write_proteindatabank(fileobj, images, write_arrays=True):
+    """Write images to PDB-file.
+    From ASE, but edited to not use the upper-case element symbols.
+    """
+    rot_t = None
+    if hasattr(images, 'get_positions'):
+        images = [images]
+
+    #     1234567 123 6789012345678901   89   67   456789012345678901234567 890
+    format = ('ATOM  %5d %4s %4s %4d    %8.3f%8.3f%8.3f%6.2f%6.2f'
+              '          %2s  \n')
+
+    # RasMol complains if the atom index exceeds 100000. There might
+    # be a limit of 5 digit numbers in this field.
+    MAXNUM = 100000
+
+    symbols = images[0].get_chemical_symbols()
+    natoms = len(symbols)
+
+    for n, atoms in enumerate(images):
+        if atoms.get_pbc().any():
+            currentcell = atoms.get_cell()
+            cellpar = currentcell.cellpar()
+            _, rot_t = currentcell.standard_form()
+            # ignoring Z-value, using P1 since we have all atoms defined
+            # explicitly
+            cellformat = 'CRYST1%9.3f%9.3f%9.3f%7.2f%7.2f%7.2f P 1\n'
+            fileobj.write(cellformat % (cellpar[0], cellpar[1], cellpar[2],
+                                        cellpar[3], cellpar[4], cellpar[5]))
+        fileobj.write('MODEL     ' + str(n + 1) + '\n')
+        p = atoms.get_positions()
+        if rot_t is not None:
+            p = p.dot(rot_t.T)
+        occupancy = np.ones(len(atoms))
+        bfactor = np.zeros(len(atoms))
+        residuenames = ['MOL '] * len(atoms)
+        residuenumbers = np.ones(len(atoms))
+        names = atoms.get_chemical_symbols()
+        if write_arrays:
+            if 'occupancy' in atoms.arrays:
+                occupancy = atoms.get_array('occupancy')
+            if 'bfactor' in atoms.arrays:
+                bfactor = atoms.get_array('bfactor')
+            if 'residuenames' in atoms.arrays:
+                residuenames = atoms.get_array('residuenames')
+            if 'residuenumbers' in atoms.arrays:
+                residuenumbers = atoms.get_array('residuenumbers')
+            if 'atomtypes' in atoms.arrays:
+                names = atoms.get_array('atomtypes')
+        for a in range(natoms):
+            x, y, z = p[a]
+            occ = occupancy[a]
+            bf = bfactor[a]
+            resname = residuenames[a].ljust(4)
+            resseq = residuenumbers[a]
+            name = names[a]
+            fileobj.write(format % ((a + 1) % MAXNUM, name, resname, resseq,
+                                    x, y, z, occ, bf, symbols[a]))
+        fileobj.write('ENDMDL\n')
+
+def find_minimum_repeats(atoms, min_length):
+    """
+    Find the minimum number of repeats in each unit cell direction
+    to meet at least `min_length` angstroms.
+    Parameters:
+        atoms (ase.Atoms): The ASE Atoms object.
+        min_length (float): The minimum length required in each direction.
+    Returns:
+        tuple: A tuple of integers representing the number of repeats
+               in the x, y, and z directions.
+    """
+    cell_lengths = atoms.get_cell().lengths()  # Get the lengths of the unit cell
+    repeats = [max(1, int(np.ceil(min_length / length))) for length in cell_lengths]
+    return tuple(repeats)
+
+def convert_file_to_pdb(file_path: str | Path, gradio_cache: str | Path) -> str:
+    # Read the file using ASE, and convert even if it's pdb to make sure all elements go lower case
+
+    try:
+        structures = ase.io.read(file_path, ':')
+    except Exception as e:
+        # Bad upload structure, no need to visualize
+        raise gr.Error(f'Error parsing file with ase: {str(e)}')
+
+    if all(structures[0].pbc):
+        # find the minimum number of repeats in each unit cell direction to meet at least 20 angstroms
+        repeats = find_minimum_repeats(structures[0], min_length=15.0)
+
+    structures = [s.repeat(repeats) if all(s.pbc) else s for s in structures]
+
+    # Create a temporary PDB file
+    with tempfile.NamedTemporaryFile(
+        delete=False, dir=gradio_cache, suffix=".pdb", mode='w',
+    ) as temp_pdb_file:
+        write_proteindatabank(temp_pdb_file, structures)
+    file_name = temp_pdb_file.name
+    return file_name
+   
+
+class Molecule3D(Component):
+    """
+    Creates a file component that allows uploading one or more generic files (when used as an input) or displaying generic files or URLs for download (as output).
+    Demo: zip_files, zip_to_json
+    """
+
+    EVENTS = [Events.change, Events.select, Events.clear, Events.upload, Events.delete]
+
+    def __init__(
+        self,
+        value: str | list[str] | Callable | None = None,
+        reps: Any | None = [],
+        config: Any | None = {
+    "backgroundColor": "white",
+    "orthographic": False,
+    "disableFog": False,
+  },
+        confidenceLabel: str | None = "pLDDT",
+        *,
+        file_count: Literal["single", "multiple", "directory"] = "single",
+        file_types: list[str] | None = None,
+        type: Literal["filepath", "binary"] = "filepath",
+        label: str | None = None,
+        every: Timer | float | None = None,
+        inputs: Component | Sequence[Component] | set[Component] | None = None,
+        show_label: bool | None = None,
+        container: bool = True,
+        scale: int | None = None,
+        min_width: int = 160,
+        height: int | float | None = None,
+        interactive: bool | None = None,
+        visible: bool = True,
+        elem_id: str | None = None,
+        elem_classes: list[str] | str | None = None,
+        render: bool = True,
+        key: int | str | None = None,
+        showviewer: bool = True      
+    ):
+        """
+        Parameters:
+            value: Default file(s) to display, given as a str file path or URL, or a list of str file paths / URLs. If callable, the function will be called whenever the app loads to set the initial value of the component.
+            file_count: if single, allows user to upload one file. If "multiple", user uploads multiple files. If "directory", user uploads all files in selected directory. Return type will be list for each file in case of "multiple" or "directory".
+            file_types: List of file extensions or types of files to be uploaded (e.g. ['image', '.json', '.mp4']). "file" allows any file to be uploaded, "image" allows only image files to be uploaded, "audio" allows only audio files to be uploaded, "video" allows only video files to be uploaded, "text" allows only text files to be uploaded.
+            representations: list of representation objects
+            config: dictionary of config options
+            confidenceLabel: label for confidence values stored in the bfactor column of a pdb file
+            type: Type of value to be returned by component. "file" returns a temporary file object with the same base name as the uploaded file, whose full path can be retrieved by file_obj.name, "binary" returns an bytes object.
+            label: The label for this component. Appears above the component and is also used as the header if there are a table of examples for this component. If None and used in a `gr.Interface`, the label will be the name of the parameter this component is assigned to.
+            every: Continously calls `value` to recalculate it if `value` is a function (has no effect otherwise). Can provide a Timer whose tick resets `value`, or a float that provides the regular interval for the reset Timer.
+            inputs: Components that are used as inputs to calculate `value` if `value` is a function (has no effect otherwise). `value` is recalculated any time the inputs change.
+            show_label: if True, will display label.
+            container: If True, will place the component in a container - providing some extra padding around the border.
+            scale: relative size compared to adjacent Components. For example if Components A and B are in a Row, and A has scale=2, and B has scale=1, A will be twice as wide as B. Should be an integer. scale applies in Rows, and to top-level Components in Blocks where fill_height=True.
+            min_width: minimum pixel width, will wrap if not sufficient screen space to satisfy this value. If a certain scale value results in this Component being narrower than min_width, the min_width parameter will be respected first.
+            height: The maximum height of the file component, specified in pixels if a number is passed, or in CSS units if a string is passed. If more files are uploaded than can fit in the height, a scrollbar will appear.
+            interactive: if True, will allow users to upload a file; if False, can only be used to display files. If not provided, this is inferred based on whether the component is used as an input or output.
+            visible: If False, component will be hidden.
+            elem_id: An optional string that is assigned as the id of this component in the HTML DOM. Can be used for targeting CSS styles.
+            elem_classes: An optional list of strings that are assigned as the classes of this component in the HTML DOM. Can be used for targeting CSS styles.
+            render: If False, component will not render be rendered in the Blocks context. Should be used if the intention is to assign event listeners now but render the component later.
+            key: if assigned, will be used to assume identity across a re-render. Components that have the same key across a re-render will have their value preserved.
+            showviewer: If True, will display the 3Dmol.js viewer. If False, will not display the 3Dmol.js viewer.
+        """
+        file_count_valid_types = ["single", "multiple", "directory"]
+        self.file_count = file_count
+
+        if self.file_count not in file_count_valid_types:
+            raise ValueError(
+                f"Parameter file_count must be one of them: {file_count_valid_types}"
+            )
+        elif self.file_count in ["multiple", "directory"]:
+            self.data_model = ListFiles
+        else:
+            self.data_model = FileData
+        self.file_types = file_types
+        if file_types is not None and not isinstance(file_types, list):
+            raise ValueError(
+                f"Parameter file_types must be a list. Received {file_types.__class__.__name__}"
+            )
+        valid_types = [
+            "filepath",
+            "binary",
+        ]
+        if type not in valid_types:
+            raise ValueError(
+                f"Invalid value for parameter `type`: {type}. Please choose from one of: {valid_types}"
+            )
+        if file_count == "directory" and file_types is not None:
+            warnings.warn(
+                "The `file_types` parameter is ignored when `file_count` is 'directory'."
+            )
+        super().__init__(
+            label=label,
+            every=every,
+            inputs=inputs,
+            show_label=show_label,
+            container=container,
+            scale=scale,
+            min_width=min_width,
+            interactive=interactive,
+            visible=visible,
+            elem_id=elem_id,
+            elem_classes=elem_classes,
+            render=render,
+            key=key,
+            value=value,
+        )
+        self.type = type
+        self.height = height
+        self.reps = reps
+        self.config = config
+        self.confidenceLabel = confidenceLabel
+        self.showviewer = showviewer
+
+    def _process_single_file(self, f: FileData) -> NamedString | bytes:
+        file_name = f.path
+        
+        file_name = convert_file_to_pdb(file_name, self.GRADIO_CACHE)
+
+        if self.type == "filepath":
+            return NamedString(file_name)
+        elif self.type == "binary":
+            with open(file_name, "rb") as file_data:
+                return file_data.read()
+        else:
+            raise ValueError(
+                "Unknown type: "
+                + str(type)
+                + ". Please choose from: 'filepath', 'binary'."
+            )
+
+    def preprocess(
+        self, payload: ListFiles | FileData | None
+    ) -> bytes | str | list[bytes] | list[str] | None:
+        """
+        Parameters:
+            payload: molecule3d information as a FileData object, or a list of FileData objects.
+        Returns:
+            Passes the file as a `str` or `bytes` object, or a list of `str` or list of `bytes` objects, depending on `type` and `file_count`.
+        """
+        if payload is None:
+            return None
+
+        if self.file_count == "single":
+            if isinstance(payload, ListFiles):
+                return self._process_single_file(payload[0])
+            return self._process_single_file(payload)
+        if isinstance(payload, ListFiles):
+            return [self._process_single_file(f) for f in payload]  # type: ignore
+        return [self._process_single_file(payload)]  # type: ignore
+
+    def _download_files(self, value: str | list[str]) -> str | list[str]:
+        downloaded_files = []
+        if isinstance(value, list):
+            for file in value:
+                if client_utils.is_http_url_like(file):
+                    downloaded_file = processing_utils.save_url_to_cache(
+                        file, self.GRADIO_CACHE
+                    )
+                    downloaded_files.append(downloaded_file)
+                else:
+                    downloaded_files.append(file)
+            return downloaded_files
+        if client_utils.is_http_url_like(value):
+            downloaded_file = processing_utils.save_url_to_cache(
+                value, self.GRADIO_CACHE
+            )
+            return downloaded_file
+        else:
+            return value
+
+    def postprocess(self, value: str | list[str] | None) -> ListFiles | FileData | None:
+        """
+        Parameters:
+            value: Expects a `str` filepath or URL, or a `list[str]` of filepaths/URLs.
+        Returns:
+            molecule3d information as a FileData object, or a list of FileData objects.
+        """
+        if value is None:
+            return None
+        value = self._download_files(value)
+
+        
+        if isinstance(value, list):
+            value = [convert_file_to_pdb(str(path), self.GRADIO_CACHE) for path in value]
+            return ListFiles(
+                root=[
+                    FileData(
+                        path=file,
+                        orig_name=Path(file).name,
+                        size=Path(file).stat().st_size,
+                    )
+                    for file in value
+                ]
+            )
+        else:
+            value = convert_file_to_pdb(str(value), self.GRADIO_CACHE)
+            if value is not None:
+                return FileData(
+                    path=value,
+                    orig_name=Path(value).name,
+                    size=Path(value).stat().st_size,
+                )
+            else:
+                return None
+
+    def process_example(self, value: str | list | None) -> str:
+        if value is None:
+            return ""
+        elif isinstance(value, list):
+            return ", ".join([Path(file).name for file in value])
+        else:
+            return Path(value).name
+
+    def example_payload(self) -> Any:
+        if self.file_count == "single":
+            return handle_file(
+                "https://files.rcsb.org/view/1PGA.pdb"
+            )
+        else:
+            return [
+                handle_file(
+                    "https://files.rcsb.org/view/1PGA.pdb"
+                )
+            ]
+
+    def example_value(self) -> Any:
+        if self.file_count == "single":
+            return "https://files.rcsb.org/view/1PGA.pdb"
+        else:
+            return [
+                "https://files.rcsb.org/view/1PGA.pdb"
+            ]

gradio_molecule3d/demo/app.py

@@ -0,0 +1,71 @@
+import gradio as gr
+from gradio_molecule3d import Molecule3D
+
+
+example = Molecule3D().example_value()
+
+
+reps =    [
+    {
+      "model": 0,
+      "chain": "",
+      "resname": "",
+      "style": "cartoon",
+      "color": "hydrophobicity",
+      # "residue_range": "",
+      "around": 0,
+      "byres": False,
+      # "visible": False,
+      # "opacity": 0.5
+    }
+  ]
+
+
+
+def predict(x):
+    print("predict function", 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
+    <pre>
+        reps =    [
+        {
+          "model": 0,
+          "style": "cartoon",
+          "color": "whiteCarbon",
+          "residue_range": "",
+          "around": 0,
+          "opacity":1
+          
+        },
+        {
+          "model": 0,
+          "chain": "A",
+          "resname": "HIS",
+          "style": "stick",
+          "color": "red"
+        }
+      ]
+    </pre>
+    """)
+    btn.click(predict, inputs=inp, outputs=out)
+
+
+if __name__ == "__main__":
+    demo.launch()

gradio_molecule3d/demo/css.css

@@ -0,0 +1,157 @@
+html {
+	font-family: Inter;
+	font-size: 16px;
+	font-weight: 400;
+	line-height: 1.5;
+	-webkit-text-size-adjust: 100%;
+	background: #fff;
+	color: #323232;
+	-webkit-font-smoothing: antialiased;
+	-moz-osx-font-smoothing: grayscale;
+	text-rendering: optimizeLegibility;
+}
+
+:root {
+	--space: 1;
+	--vspace: calc(var(--space) * 1rem);
+	--vspace-0: calc(3 * var(--space) * 1rem);
+	--vspace-1: calc(2 * var(--space) * 1rem);
+	--vspace-2: calc(1.5 * var(--space) * 1rem);
+	--vspace-3: calc(0.5 * var(--space) * 1rem);
+}
+
+.app {
+	max-width: 748px !important;
+}
+
+.prose p {
+	margin: var(--vspace) 0;
+	line-height: var(--vspace * 2);
+	font-size: 1rem;
+}
+
+code {
+	font-family: "Inconsolata", sans-serif;
+	font-size: 16px;
+}
+
+h1,
+h1 code {
+	font-weight: 400;
+	line-height: calc(2.5 / var(--space) * var(--vspace));
+}
+
+h1 code {
+	background: none;
+	border: none;
+	letter-spacing: 0.05em;
+	padding-bottom: 5px;
+	position: relative;
+	padding: 0;
+}
+
+h2 {
+	margin: var(--vspace-1) 0 var(--vspace-2) 0;
+	line-height: 1em;
+}
+
+h3,
+h3 code {
+	margin: var(--vspace-1) 0 var(--vspace-2) 0;
+	line-height: 1em;
+}
+
+h4,
+h5,
+h6 {
+	margin: var(--vspace-3) 0 var(--vspace-3) 0;
+	line-height: var(--vspace);
+}
+
+.bigtitle,
+h1,
+h1 code {
+	font-size: calc(8px * 4.5);
+	word-break: break-word;
+}
+
+.title,
+h2,
+h2 code {
+	font-size: calc(8px * 3.375);
+	font-weight: lighter;
+	word-break: break-word;
+	border: none;
+	background: none;
+}
+
+.subheading1,
+h3,
+h3 code {
+	font-size: calc(8px * 1.8);
+	font-weight: 600;
+	border: none;
+	background: none;
+	letter-spacing: 0.1em;
+	text-transform: uppercase;
+}
+
+h2 code {
+	padding: 0;
+	position: relative;
+	letter-spacing: 0.05em;
+}
+
+blockquote {
+	font-size: calc(8px * 1.1667);
+	font-style: italic;
+	line-height: calc(1.1667 * var(--vspace));
+	margin: var(--vspace-2) var(--vspace-2);
+}
+
+.subheading2,
+h4 {
+	font-size: calc(8px * 1.4292);
+	text-transform: uppercase;
+	font-weight: 600;
+}
+
+.subheading3,
+h5 {
+	font-size: calc(8px * 1.2917);
+	line-height: calc(1.2917 * var(--vspace));
+
+	font-weight: lighter;
+	text-transform: uppercase;
+	letter-spacing: 0.15em;
+}
+
+h6 {
+	font-size: calc(8px * 1.1667);
+	font-size: 1.1667em;
+	font-weight: normal;
+	font-style: italic;
+	font-family: "le-monde-livre-classic-byol", serif !important;
+	letter-spacing: 0px !important;
+}
+
+#start .md > *:first-child {
+	margin-top: 0;
+}
+
+h2 + h3 {
+	margin-top: 0;
+}
+
+.md hr {
+	border: none;
+	border-top: 1px solid var(--block-border-color);
+	margin: var(--vspace-2) 0 var(--vspace-2) 0;
+}
+.prose ul {
+	margin: var(--vspace-2) 0 var(--vspace-1) 0;
+}
+
+.gap {
+	gap: 0;
+}

gradio_molecule3d/frontend/Example.svelte

@@ -0,0 +1,30 @@
+<script lang="ts">
+	import type { FileData } from "@gradio/client";
+
+	export let value: FileData | null;
+	export let type: "gallery" | "table";
+	export let selected = false;
+</script>
+
+<div
+	class:table={type === "table"}
+	class:gallery={type === "gallery"}
+	class:selected
+>
+	{value ? (Array.isArray(value) ? value.join(", ") : value) : ""}
+</div>
+
+<style>
+	div {
+		overflow: hidden;
+		text-overflow: ellipsis;
+		white-space: nowrap;
+	}
+	.gallery {
+		display: flex;
+		align-items: center;
+		cursor: pointer;
+		padding: var(--size-1) var(--size-2);
+		text-align: left;
+	}
+</style>

gradio_molecule3d/frontend/Index.svelte

@@ -0,0 +1,326 @@
+<svelte:options accessors={true} />
+
+<script context="module" lang="ts">
+  export { default as FilePreview } from "./shared/FilePreview.svelte";
+  export { default as BaseFileUpload } from "./shared/FileUpload.svelte";
+  export { default as BaseFile } from "./shared/File.svelte";
+  export { default as BaseExample } from "./Example.svelte";
+</script>
+
+<script lang="ts">
+  import "./style.css";
+  import type { Gradio, SelectData } from "@gradio/utils";
+  import File from "./shared/File.svelte";
+  import FileUpload from "./shared/FileUpload.svelte";
+  import type { FileData } from "@gradio/client";
+  import { Block, UploadText } from "@gradio/atoms";
+  import { StatusTracker } from "@gradio/statustracker";
+  import type { LoadingStatus } from "@gradio/statustracker";
+  export let elem_id = "";
+  export let elem_classes: string[] = [];
+  export let visible = true;
+  export let value: null | FileData | FileData[];
+  export let interactive: boolean;
+  export let root: string;
+  export let label: string;
+  export let show_label: boolean;
+  export let height: number | undefined = undefined;
+  //Molecule3D specific arguments
+  export let reps: any = [];
+  export let config: any = {};
+  export let confidenceLabel: string = "";
+  export let showviewer: boolean = true;
+  export let _selectable = false;
+  export let loading_status: LoadingStatus;
+  export let container = true;
+  export let scale: number | null = null;
+  export let min_width: number | undefined = undefined;
+  export let gradio: Gradio<{
+    change: never;
+    error: string;
+    upload: never;
+    clear: never;
+    select: SelectData;
+    clear_status: LoadingStatus;
+    delete: FileData;
+  }>;
+  export let file_count: "single" | "multiple" | "directory";
+  export let file_types: string[] = ["file"];
+  let old_value = value;
+  $: if (JSON.stringify(old_value) !== JSON.stringify(value)) {
+    gradio.dispatch("change");
+    old_value = value;
+    moldata = null;
+    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;
+  let keys_for_reps = {
+    model: {
+      type: Number,
+      default: 0,
+    },
+    chain: {
+      type: String,
+      default: "",
+    },
+    resname: {
+      type: String,
+      default: "",
+    },
+    style: {
+      type: String,
+      default: "cartoon",
+      choices: ["cartoon", "stick", "sphere", "surface"],
+    },
+    color: {
+      type: String,
+      default: "whiteCarbon",
+      choices: [
+        "whiteCarbon",
+        "orangeCarbon",
+        "redCarbon",
+        "blackCarbon",
+        "blueCarbon",
+        "grayCarbon",
+        "greenCarbon",
+        "cyanCarbon",
+        "alphafold",
+        "default",
+        "Jmol",
+        "chain",
+        "spectrum",
+      ],
+    },
+    opacity: {
+      type: Number,
+      default: 1,
+    },
+    residue_range: {
+      type: String,
+      default: "",
+    },
+    around: {
+      type: Number,
+      default: 0,
+    },
+    byres: {
+      type: Boolean,
+      default: false,
+    },
+    visible: {
+      type: Boolean,
+      default: true,
+    },
+  };
+  let moldata = null;
+  let allowed_extensions = ["pdb", "sdf", "mol2", "pdb1", "cif", "traj", "xyz"];
+  async function fetchFileContent(url) {
+    const response = await fetch(url);
+    const content = await response.text();
+    return content;
+  }
+  let promise = null;
+  let errors = [];
+  async function retrieveContent(value) {
+    if (value == null) {
+      return [];
+    } else if (Array.isArray(value)) {
+      let tempMoldata = [];
+      // get file extension
+      for (const element of value) {
+        let ext = element.orig_name.split(".").pop();
+        if (!allowed_extensions.includes(ext)) {
+          errors.push(
+            `Invalid file extension for ${
+              element.orig_name
+            }. Expected one of ${allowed_extensions.join(", ")}, got ${ext}`
+          );
+          moldata = null;
+          continue;
+        }
+        tempMoldata.push({
+          data: await fetchFileContent(element.url),
+          name: element.orig_name,
+          format: ext,
+          asFrames: false,
+        });
+      }
+      moldata = tempMoldata;
+    } else if (typeof value === "object" && value !== null) {
+      let ext = value.orig_name.split(".").pop();
+      if (!allowed_extensions.includes(ext)) {
+        errors.push(
+          `Invalid file extension for ${
+            value.orig_name
+          }. Expected one of ${allowed_extensions.join(", ")}, got ${ext}`
+        );
+        moldata = null;
+      } else {
+        let t = await fetchFileContent(value.url);
+        let ext = value.orig_name.split(".").pop();
+        if (ext === "pdb1") {
+          ext = "pdb";
+        }
+        moldata = [
+          { data: t, name: value.orig_name, format: ext, asFrames: false },
+        ];
+      }
+    } else {
+      moldata = null;
+    }
+    // value is object
+  }
+  // go through each rep, do a type check and add missing keys to the rep
+  let lenMoldata = 0;
+  $: lenMoldata = moldata ? moldata.length : 0;
+  let representations = [];
+  //first add all missing keys
+  $: {
+    reps.forEach((rep) => {
+      for (const [key, value] of Object.entries(keys_for_reps)) {
+        if (rep[key] === undefined) {
+          rep[key] = value["default"];
+        }
+        if (rep[key].constructor != value["type"]) {
+          errors.push(
+            `Invalid type for ${key} in reps. Expected ${
+              value["type"]
+            }, got ${typeof rep[key]}`
+          );
+        }
+      }
+    });
+    // then check if model does exist and add to representations
+    reps.forEach((rep) => {
+      if (rep["model"] <= lenMoldata) {
+        representations.push(rep);
+      }
+    });
+  }
+  $: promise = retrieveContent(value);
+</script>
+
+<Block
+  {visible}
+  variant={value ? "solid" : "dashed"}
+  border_mode={dragging ? "focus" : "base"}
+  padding={false}
+  {elem_id}
+  {elem_classes}
+  {container}
+  {scale}
+  {min_width}
+  allow_overflow={false}
+>
+  <StatusTracker
+    autoscroll={gradio.autoscroll}
+    i18n={gradio.i18n}
+    {...loading_status}
+    status={pending_upload
+      ? "generating"
+      : loading_status?.status || "complete"}
+    on:clear_status={() => gradio.dispatch("clear_status", loading_status)}
+  />
+  {#if !interactive}
+    <File
+      on:select={({ detail }) => gradio.dispatch("select", detail)}
+      selectable={_selectable}
+      {value}
+      {label}
+      {show_label}
+      {height}
+      {representations}
+      {config}
+      {confidenceLabel}
+      {moldata}
+      {errors}
+      i18n={gradio.i18n}
+      molviewer={showviewer}
+    />
+  {:else}
+    <FileUpload
+      upload={gradio.client.upload}
+      stream_handler={gradio.client.stream}
+      {label}
+      {show_label}
+      {value}
+      {file_count}
+      {file_types}
+      selectable={_selectable}
+      {root}
+      {height}
+      {representations}
+      {config}
+      {confidenceLabel}
+      {moldata}
+      molviewer={showviewer}
+      max_file_size={gradio.max_file_size}
+      on:change={({ detail }) => {
+        value = detail;
+      }}
+      on:drag={({ detail }) => (dragging = detail)}
+      on:clear={() => gradio.dispatch("clear")}
+      on:select={({ detail }) => gradio.dispatch("select", detail)}
+      on:notfound={() =>
+        gradio.dispatch(
+          "error",
+          "identifier not found in database, check spelling"
+        )}
+      on:upload={() => gradio.dispatch("upload")}
+      on:error={({ detail }) => {
+        loading_status = loading_status || {};
+        loading_status.status = "error";
+        gradio.dispatch("error", detail);
+      }}
+      on:delete={({ detail }) => {
+        gradio.dispatch("delete", detail);
+      }}
+      i18n={gradio.i18n}
+    >
+      <UploadText i18n={gradio.i18n} type="file" />
+    </FileUpload>
+  {/if}
+
+  {#if errors.length > 0 && value !== null}
+    <div
+      class="flex m-2 p-4 mb-4 text-sm text-red-800 rounded-lg bg-red-50 dark:bg-gray-800 dark:text-red-400"
+      role="alert"
+    >
+      <svg
+        class="flex-shrink-0 inline w-4 h-4 mr-3 mt-[2px]"
+        xmlns="http://www.w3.org/2000/svg"
+        fill="none"
+        viewBox="0 0 24 24"
+        stroke-width="1.5"
+        stroke="currentColor"
+      >
+        <path
+          stroke-linecap="round"
+          stroke-linejoin="round"
+          d="M12 9v3.75m-9.303 3.376c-.866 1.5.217 3.374 1.948 3.374h14.71c1.73 0 2.813-1.874 1.948-3.374L13.949 3.378c-.866-1.5-3.032-1.5-3.898 0L2.697 16.126zM12 15.75h.007v.008H12v-.008z"
+        />
+      </svg>
+
+      <span class="sr-only">Error in the representations</span>
+      <div>
+        <span class="font-medium"
+          >Couldn't display Molecule. Fix the following problems:</span
+        >
+        <ul class="mt-1.5 ml-4 list-disc list-inside">
+          {#each errors as error}
+            <li>{error}</li>
+          {/each}
+        </ul>
+      </div>
+    </div>
+  {/if}
+</Block>

gradio_molecule3d/frontend/gradio.config.js

@@ -0,0 +1,11 @@
+import tailwindcss from "@tailwindcss/vite";
+
+export default {
+  plugins: [tailwindcss()],
+  svelte: {
+    preprocess: [],
+  },
+  build: {
+    target: "modules",
+  },
+};

gradio_molecule3d/frontend/package.json

@@ -0,0 +1,36 @@
+{
+  "name": "gradio_molecule3d",
+  "version": "0.9.2",
+  "description": "Gradio UI packages",
+  "type": "module",
+  "author": "",
+  "license": "ISC",
+  "private": false,
+  "dependencies": {
+    "@gradio/atoms": "^0.9.0",
+    "@gradio/client": "^1.6.0",
+    "@gradio/icons": "^0.8.0",
+    "@gradio/markdown": "^0.10.1",
+    "@gradio/statustracker": "^0.8.1",
+    "@gradio/upload": "^0.13.1",
+    "@gradio/utils": "^0.7.0",
+    "@gradio/wasm": "^0.14.1",
+    "@tailwindcss/vite": "^4.0.0-alpha.30",
+    "3dmol": "^2.4.0",
+    "tailwindcss": "^4.0.0-alpha.30"
+  },
+  "devDependencies": {
+    "@gradio/preview": "0.12.0"
+  },
+  "main": "./Index.svelte",
+  "main_changeset": true,
+  "exports": {
+    ".": {
+      "gradio": "./Index.svelte"
+    },
+    "./example": {
+      "gradio": "./Example.svelte"
+    },
+    "./package.json": "./package.json"
+  }
+}

gradio_molecule3d/frontend/shared/Example.svelte

@@ -0,0 +1,30 @@
+<script lang="ts">
+	import type { FileData } from "@gradio/client";
+
+	export let value: FileData | null;
+	export let type: "gallery" | "table";
+	export let selected = false;
+</script>
+
+<div
+	class:table={type === "table"}
+	class:gallery={type === "gallery"}
+	class:selected
+>
+	{value ? (Array.isArray(value) ? value.join(", ") : value) : ""}
+</div>
+
+<style>
+	div {
+		overflow: hidden;
+		text-overflow: ellipsis;
+		white-space: nowrap;
+	}
+	.gallery {
+		display: flex;
+		align-items: center;
+		cursor: pointer;
+		padding: var(--size-1) var(--size-2);
+		text-align: left;
+	}
+</style>

gradio_molecule3d/frontend/shared/Index.svelte

@@ -0,0 +1,326 @@
+<svelte:options accessors={true} />
+
+<script context="module" lang="ts">
+  export { default as FilePreview } from "./shared/FilePreview.svelte";
+  export { default as BaseFileUpload } from "./shared/FileUpload.svelte";
+  export { default as BaseFile } from "./shared/File.svelte";
+  export { default as BaseExample } from "./Example.svelte";
+</script>
+
+<script lang="ts">
+  import "./style.css";
+  import type { Gradio, SelectData } from "@gradio/utils";
+  import File from "./shared/File.svelte";
+  import FileUpload from "./shared/FileUpload.svelte";
+  import type { FileData } from "@gradio/client";
+  import { Block, UploadText } from "@gradio/atoms";
+  import { StatusTracker } from "@gradio/statustracker";
+  import type { LoadingStatus } from "@gradio/statustracker";
+  export let elem_id = "";
+  export let elem_classes: string[] = [];
+  export let visible = true;
+  export let value: null | FileData | FileData[];
+  export let interactive: boolean;
+  export let root: string;
+  export let label: string;
+  export let show_label: boolean;
+  export let height: number | undefined = undefined;
+  //Molecule3D specific arguments
+  export let reps: any = [];
+  export let config: any = {};
+  export let confidenceLabel: string = "";
+  export let showviewer: boolean = true;
+  export let _selectable = false;
+  export let loading_status: LoadingStatus;
+  export let container = true;
+  export let scale: number | null = null;
+  export let min_width: number | undefined = undefined;
+  export let gradio: Gradio<{
+    change: never;
+    error: string;
+    upload: never;
+    clear: never;
+    select: SelectData;
+    clear_status: LoadingStatus;
+    delete: FileData;
+  }>;
+  export let file_count: "single" | "multiple" | "directory";
+  export let file_types: string[] = ["file"];
+  let old_value = value;
+  $: if (JSON.stringify(old_value) !== JSON.stringify(value)) {
+    gradio.dispatch("change");
+    old_value = value;
+    moldata = null;
+    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;
+  let keys_for_reps = {
+    model: {
+      type: Number,
+      default: 0,
+    },
+    chain: {
+      type: String,
+      default: "",
+    },
+    resname: {
+      type: String,
+      default: "",
+    },
+    style: {
+      type: String,
+      default: "cartoon",
+      choices: ["cartoon", "stick", "sphere", "surface"],
+    },
+    color: {
+      type: String,
+      default: "whiteCarbon",
+      choices: [
+        "whiteCarbon",
+        "orangeCarbon",
+        "redCarbon",
+        "blackCarbon",
+        "blueCarbon",
+        "grayCarbon",
+        "greenCarbon",
+        "cyanCarbon",
+        "alphafold",
+        "default",
+        "Jmol",
+        "chain",
+        "spectrum",
+      ],
+    },
+    opacity: {
+      type: Number,
+      default: 1,
+    },
+    residue_range: {
+      type: String,
+      default: "",
+    },
+    around: {
+      type: Number,
+      default: 0,
+    },
+    byres: {
+      type: Boolean,
+      default: false,
+    },
+    visible: {
+      type: Boolean,
+      default: true,
+    },
+  };
+  let moldata = null;
+  let allowed_extensions = ["pdb", "sdf", "mol2", "pdb1", "cif", "traj", "xyz"];
+  async function fetchFileContent(url) {
+    const response = await fetch(url);
+    const content = await response.text();
+    return content;
+  }
+  let promise = null;
+  let errors = [];
+  async function retrieveContent(value) {
+    if (value == null) {
+      return [];
+    } else if (Array.isArray(value)) {
+      let tempMoldata = [];
+      // get file extension
+      for (const element of value) {
+        let ext = element.orig_name.split(".").pop();
+        if (!allowed_extensions.includes(ext)) {
+          errors.push(
+            `Invalid file extension for ${
+              element.orig_name
+            }. Expected one of ${allowed_extensions.join(", ")}, got ${ext}`
+          );
+          moldata = null;
+          continue;
+        }
+        tempMoldata.push({
+          data: await fetchFileContent(element.url),
+          name: element.orig_name,
+          format: ext,
+          asFrames: false,
+        });
+      }
+      moldata = tempMoldata;
+    } else if (typeof value === "object" && value !== null) {
+      let ext = value.orig_name.split(".").pop();
+      if (!allowed_extensions.includes(ext)) {
+        errors.push(
+          `Invalid file extension for ${
+            value.orig_name
+          }. Expected one of ${allowed_extensions.join(", ")}, got ${ext}`
+        );
+        moldata = null;
+      } else {
+        let t = await fetchFileContent(value.url);
+        let ext = value.orig_name.split(".").pop();
+        if (ext === "pdb1") {
+          ext = "pdb";
+        }
+        moldata = [
+          { data: t, name: value.orig_name, format: ext, asFrames: false },
+        ];
+      }
+    } else {
+      moldata = null;
+    }
+    // value is object
+  }
+  // go through each rep, do a type check and add missing keys to the rep
+  let lenMoldata = 0;
+  $: lenMoldata = moldata ? moldata.length : 0;
+  let representations = [];
+  //first add all missing keys
+  $: {
+    reps.forEach((rep) => {
+      for (const [key, value] of Object.entries(keys_for_reps)) {
+        if (rep[key] === undefined) {
+          rep[key] = value["default"];
+        }
+        if (rep[key].constructor != value["type"]) {
+          errors.push(
+            `Invalid type for ${key} in reps. Expected ${
+              value["type"]
+            }, got ${typeof rep[key]}`
+          );
+        }
+      }
+    });
+    // then check if model does exist and add to representations
+    reps.forEach((rep) => {
+      if (rep["model"] <= lenMoldata) {
+        representations.push(rep);
+      }
+    });
+  }
+  $: promise = retrieveContent(value);
+</script>
+
+<Block
+  {visible}
+  variant={value ? "solid" : "dashed"}
+  border_mode={dragging ? "focus" : "base"}
+  padding={false}
+  {elem_id}
+  {elem_classes}
+  {container}
+  {scale}
+  {min_width}
+  allow_overflow={false}
+>
+  <StatusTracker
+    autoscroll={gradio.autoscroll}
+    i18n={gradio.i18n}
+    {...loading_status}
+    status={pending_upload
+      ? "generating"
+      : loading_status?.status || "complete"}
+    on:clear_status={() => gradio.dispatch("clear_status", loading_status)}
+  />
+  {#if !interactive}
+    <File
+      on:select={({ detail }) => gradio.dispatch("select", detail)}
+      selectable={_selectable}
+      {value}
+      {label}
+      {show_label}
+      {height}
+      {representations}
+      {config}
+      {confidenceLabel}
+      {moldata}
+      {errors}
+      i18n={gradio.i18n}
+      molviewer={showviewer}
+    />
+  {:else}
+    <FileUpload
+      upload={gradio.client.upload}
+      stream_handler={gradio.client.stream}
+      {label}
+      {show_label}
+      {value}
+      {file_count}
+      {file_types}
+      selectable={_selectable}
+      {root}
+      {height}
+      {representations}
+      {config}
+      {confidenceLabel}
+      {moldata}
+      molviewer={showviewer}
+      max_file_size={gradio.max_file_size}
+      on:change={({ detail }) => {
+        value = detail;
+      }}
+      on:drag={({ detail }) => (dragging = detail)}
+      on:clear={() => gradio.dispatch("clear")}
+      on:select={({ detail }) => gradio.dispatch("select", detail)}
+      on:notfound={() =>
+        gradio.dispatch(
+          "error",
+          "identifier not found in database, check spelling"
+        )}
+      on:upload={() => gradio.dispatch("upload")}
+      on:error={({ detail }) => {
+        loading_status = loading_status || {};
+        loading_status.status = "error";
+        gradio.dispatch("error", detail);
+      }}
+      on:delete={({ detail }) => {
+        gradio.dispatch("delete", detail);
+      }}
+      i18n={gradio.i18n}
+    >
+      <UploadText i18n={gradio.i18n} type="file" />
+    </FileUpload>
+  {/if}
+
+  {#if errors.length > 0 && value !== null}
+    <div
+      class="flex m-2 p-4 mb-4 text-sm text-red-800 rounded-lg bg-red-50 dark:bg-gray-800 dark:text-red-400"
+      role="alert"
+    >
+      <svg
+        class="flex-shrink-0 inline w-4 h-4 mr-3 mt-[2px]"
+        xmlns="http://www.w3.org/2000/svg"
+        fill="none"
+        viewBox="0 0 24 24"
+        stroke-width="1.5"
+        stroke="currentColor"
+      >
+        <path
+          stroke-linecap="round"
+          stroke-linejoin="round"
+          d="M12 9v3.75m-9.303 3.376c-.866 1.5.217 3.374 1.948 3.374h14.71c1.73 0 2.813-1.874 1.948-3.374L13.949 3.378c-.866-1.5-3.032-1.5-3.898 0L2.697 16.126zM12 15.75h.007v.008H12v-.008z"
+        />
+      </svg>
+
+      <span class="sr-only">Error in the representations</span>
+      <div>
+        <span class="font-medium"
+          >Couldn't display Molecule. Fix the following problems:</span
+        >
+        <ul class="mt-1.5 ml-4 list-disc list-inside">
+          {#each errors as error}
+            <li>{error}</li>
+          {/each}
+        </ul>
+      </div>
+    </div>
+  {/if}
+</Block>

gradio_molecule3d/frontend/shared/gradio.config.js

@@ -0,0 +1,11 @@
+import tailwindcss from "@tailwindcss/vite";
+
+export default {
+  plugins: [tailwindcss()],
+  svelte: {
+    preprocess: [],
+  },
+  build: {
+    target: "modules",
+  },
+};

gradio_molecule3d/frontend/shared/package.json

@@ -0,0 +1,36 @@
+{
+  "name": "gradio_molecule3d",
+  "version": "0.9.2",
+  "description": "Gradio UI packages",
+  "type": "module",
+  "author": "",
+  "license": "ISC",
+  "private": false,
+  "dependencies": {
+    "@gradio/atoms": "^0.9.0",
+    "@gradio/client": "^1.6.0",
+    "@gradio/icons": "^0.8.0",
+    "@gradio/markdown": "^0.10.1",
+    "@gradio/statustracker": "^0.8.1",
+    "@gradio/upload": "^0.13.1",
+    "@gradio/utils": "^0.7.0",
+    "@gradio/wasm": "^0.14.1",
+    "@tailwindcss/vite": "^4.0.0-alpha.30",
+    "3dmol": "^2.4.0",
+    "tailwindcss": "^4.0.0-alpha.30"
+  },
+  "devDependencies": {
+    "@gradio/preview": "0.12.0"
+  },
+  "main": "./Index.svelte",
+  "main_changeset": true,
+  "exports": {
+    ".": {
+      "gradio": "./Index.svelte"
+    },
+    "./example": {
+      "gradio": "./Example.svelte"
+    },
+    "./package.json": "./package.json"
+  }
+}

gradio_molecule3d/frontend/shared/style.css

@@ -0,0 +1 @@
+@import "tailwindcss";

gradio_molecule3d/frontend/style.css

@@ -0,0 +1 @@
+@import "tailwindcss";

gradio_molecule3d/package.json

@@ -0,0 +1,5 @@
+{
+  "devDependencies": {
+    "@gradio/preview": "^0.13.0"
+  }
+}

gradio_molecule3d/pyproject.toml

@@ -0,0 +1,50 @@
+[build-system]
+requires = [
+  "hatchling",
+  "hatch-requirements-txt",
+  "hatch-fancy-pypi-readme>=22.5.0",
+]
+build-backend = "hatchling.build"
+
+[project]
+name = "gradio_molecule3d"
+version = "0.0.7"
+description = "Python library for easily interacting with trained machine learning models"
+readme = "README.md"
+license = "Apache-2.0"
+requires-python = ">=3.8"
+authors = [{ name = "YOUR NAME", email = "YOUREMAIL@domain.com" }]
+keywords = [
+  "machine learning",
+  "reproducibility",
+  "visualization",
+  "gradio",
+  "gradio custom component",
+  "gradio-template-File",
+  "protein"
+]
+# Add dependencies here
+dependencies = ["gradio>=4.0,<6.0"]
+classifiers = [
+  'Development Status :: 3 - Alpha',
+  'Operating System :: OS Independent',
+  'Programming Language :: Python :: 3',
+  'Programming Language :: Python :: 3 :: Only',
+  'Programming Language :: Python :: 3.8',
+  'Programming Language :: Python :: 3.9',
+  'Programming Language :: Python :: 3.10',
+  'Programming Language :: Python :: 3.11',
+  'Topic :: Scientific/Engineering',
+  'Topic :: Scientific/Engineering :: Artificial Intelligence',
+  'Topic :: Scientific/Engineering :: Visualization',
+]
+
+
+[project.optional-dependencies]
+dev = ["build", "twine"]
+
+[tool.hatch.build]
+artifacts = ["/backend/gradio_molecule3d/templates", "*.pyi", "/Users/zulissi/micromamba/envs/gradio/lib/python3.12/site-packages/gradio_molecule3d/templates", "/private/home/zulissi/conda_envs/fairchem_020625/lib/python3.12/site-packages/gradio_molecule3d/templates"]
+
+[tool.hatch.build.targets.wheel]
+packages = ["/backend/gradio_molecule3d"]