Upload folder using huggingface_hub

README.md

@@ -31,20 +31,42 @@ def predict(input):
     return input
 
 with gr.Blocks() as demo:
+    jobname = gr.Textbox(label="Job Name")
     inp=CofoldingInput(label="Input")
 
-    # preinput =  {"chains": [
-    #     {
-    #         "class": "DNA",
-    #         "sequence": "ATGCGT",
-    #         "chain": "A"
-    #     }
-    # ], "covMods":[]
-    # }
+    preinput =  {"chains": [
+        {
+            "class": "DNA",
+            "sequence": "ATGCGT",
+            "chain": "A"
+        },
+        {
+            "class": "protein",
+            "sequence": "AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA",
+            "chain": "B"
+        },
+        {
+            "class": "ligand",
+            "name": "ZN",
+            "smiles": "",
+            "sdf": "",
+            "chain": "C"
+        },
+        {
+            "class": "ligand",
+            "smiles": "CCCCCCCCCCCCCCCCCCCC",
+            "name": "",
+            "sdf": "",
+            "chain": "D"
+        }
+    ], "covMods":[]
+    }
     # inp2=CofoldingInput(preinput, label="Input prefilled")
     btn = gr.Button("Submit")
     out = gr.HTML()
 
+    gr.Examples([["test",preinput]], inputs=[jobname,inp])
+
     btn.click(predict, inputs=[inp], outputs=[out])
 
 if __name__ == "__main__":
@@ -292,4 +314,5 @@ The code snippet below is accurate in cases where the component is used as both
      value: Unknown
  ) -> dict | None:
      return value
- ```
+ ```
+ 

app.py

@@ -10,21 +10,43 @@ def predict(input):
     return input
 
 with gr.Blocks() as demo:
+    jobname = gr.Textbox(label="Job Name")
     inp=CofoldingInput(label="Input")
 
-    # preinput =  {"chains": [
-    #     {
-    #         "class": "DNA",
-    #         "sequence": "ATGCGT",
-    #         "chain": "A"
-    #     }
-    # ], "covMods":[]
-    # }
+    preinput =  {"chains": [
+        {
+            "class": "DNA",
+            "sequence": "ATGCGT",
+            "chain": "A"
+        },
+        {
+            "class": "protein",
+            "sequence": "AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA",
+            "chain": "B"
+        },
+        {
+            "class": "ligand",
+            "name": "ZN",
+            "smiles": "",
+            "sdf": "",
+            "chain": "C"
+        },
+        {
+            "class": "ligand",
+            "smiles": "CCCCCCCCCCCCCCCCCCCC",
+            "name": "",
+            "sdf": "",
+            "chain": "D"
+        }
+    ], "covMods":[]
+    }
     # inp2=CofoldingInput(preinput, label="Input prefilled")
     btn = gr.Button("Submit")
     out = gr.HTML()
 
+    gr.Examples([["test",preinput]], inputs=[jobname,inp])
+
     btn.click(predict, inputs=[inp], outputs=[out])
 
 if __name__ == "__main__":
-    demo.launch(ssr_mode=False)
+    demo.launch()

space.py

@@ -50,20 +50,42 @@ def predict(input):
     return input
 
 with gr.Blocks() as demo:
+    jobname = gr.Textbox(label="Job Name")
     inp=CofoldingInput(label="Input")
 
-    # preinput =  {"chains": [
-    #     {
-    #         "class": "DNA",
-    #         "sequence": "ATGCGT",
-    #         "chain": "A"
-    #     }
-    # ], "covMods":[]
-    # }
+    preinput =  {"chains": [
+        {
+            "class": "DNA",
+            "sequence": "ATGCGT",
+            "chain": "A"
+        },
+        {
+            "class": "protein",
+            "sequence": "AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA",
+            "chain": "B"
+        },
+        {
+            "class": "ligand",
+            "name": "ZN",
+            "smiles": "",
+            "sdf": "",
+            "chain": "C"
+        },
+        {
+            "class": "ligand",
+            "smiles": "CCCCCCCCCCCCCCCCCCCC",
+            "name": "",
+            "sdf": "",
+            "chain": "D"
+        }
+    ], "covMods":[]
+    }
     # inp2=CofoldingInput(preinput, label="Input prefilled")
     btn = gr.Button("Submit")
     out = gr.HTML()
 
+    gr.Examples([["test",preinput]], inputs=[jobname,inp])
+
     btn.click(predict, inputs=[inp], outputs=[out])
 
 if __name__ == "__main__":
@@ -148,4 +170,4 @@ def predict(
 
 """)
 
-demo.launch(ssr_mode=False)
+demo.launch()

src/README.md

@@ -1,3 +1,9 @@
+---
+license: mit
+title: Cofolding Input
+sdk: gradio
+colorFrom: red
+---
 
 # `gradio_cofoldinginput`
 <a href="https://pypi.org/project/gradio_cofoldinginput/" target="_blank"><img alt="PyPI - Version" src="https://img.shields.io/pypi/v/gradio_cofoldinginput"></a>  
@@ -25,20 +31,42 @@ def predict(input):
     return input
 
 with gr.Blocks() as demo:
+    jobname = gr.Textbox(label="Job Name")
     inp=CofoldingInput(label="Input")
 
-    # preinput =  {"chains": [
-    #     {
-    #         "class": "DNA",
-    #         "sequence": "ATGCGT",
-    #         "chain": "A"
-    #     }
-    # ], "covMods":[]
-    # }
+    preinput =  {"chains": [
+        {
+            "class": "DNA",
+            "sequence": "ATGCGT",
+            "chain": "A"
+        },
+        {
+            "class": "protein",
+            "sequence": "AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA",
+            "chain": "B"
+        },
+        {
+            "class": "ligand",
+            "name": "ZN",
+            "smiles": "",
+            "sdf": "",
+            "chain": "C"
+        },
+        {
+            "class": "ligand",
+            "smiles": "CCCCCCCCCCCCCCCCCCCC",
+            "name": "",
+            "sdf": "",
+            "chain": "D"
+        }
+    ], "covMods":[]
+    }
     # inp2=CofoldingInput(preinput, label="Input prefilled")
     btn = gr.Button("Submit")
     out = gr.HTML()
 
+    gr.Examples([["test",preinput]], inputs=[jobname,inp])
+
     btn.click(predict, inputs=[inp], outputs=[out])
 
 if __name__ == "__main__":

src/backend/gradio_cofoldinginput/templates/example/index.js

@@ -1,126 +1,429 @@
 const {
-  SvelteComponent: y,
-  add_iframe_resize_listener: b,
-  add_render_callback: m,
-  append_hydration: v,
-  attr: w,
-  binding_callbacks: z,
-  children: k,
-  claim_element: p,
-  claim_text: E,
-  detach: o,
-  element: S,
-  init: q,
-  insert_hydration: C,
-  noop: u,
-  safe_not_equal: D,
-  set_data: I,
-  text: M,
-  toggle_class: r
-} = window.__gradio__svelte__internal, { onMount: P } = window.__gradio__svelte__internal;
-function V(n) {
-  let e, i = (
+  SvelteComponent: P,
+  add_iframe_resize_listener: W,
+  add_render_callback: j,
+  append_hydration: d,
+  attr: A,
+  binding_callbacks: F,
+  children: E,
+  claim_element: g,
+  claim_space: D,
+  claim_text: b,
+  destroy_each: G,
+  detach: u,
+  element: k,
+  empty: z,
+  ensure_array_like: V,
+  get_svelte_dataset: J,
+  init: K,
+  insert_hydration: m,
+  noop: R,
+  safe_not_equal: O,
+  set_data: w,
+  space: S,
+  text: p,
+  toggle_class: M
+} = window.__gradio__svelte__internal, { onMount: Q } = window.__gradio__svelte__internal;
+function q(a, e, n) {
+  const i = a.slice();
+  return i[8] = e[n], i;
+}
+function C(a) {
+  let e, n, i, l, t, s = (
     /*value*/
-    (n[0] ? (
+    a[0].covMods.length + ""
+  ), f, c;
+  function _(r, L) {
+    return (
       /*value*/
-      n[0]
-    ) : "") + ""
-  ), a, d;
+      r[0].chains.length > 1 ? Y : X
+    );
+  }
+  let y = _(a), o = y(a), I = V(
+    /*value*/
+    a[0].chains
+  ), v = [];
+  for (let r = 0; r < I.length; r += 1)
+    v[r] = U(q(a, I, r));
+  return {
+    c() {
+      o.c(), e = S(), n = k("ul");
+      for (let r = 0; r < v.length; r += 1)
+        v[r].c();
+      i = S(), l = k("ul"), t = k("li"), f = p(s), c = p(" covalent modifications");
+    },
+    l(r) {
+      o.l(r), e = D(r), n = g(r, "UL", {});
+      var L = E(n);
+      for (let B = 0; B < v.length; B += 1)
+        v[B].l(L);
+      L.forEach(u), i = D(r), l = g(r, "UL", {});
+      var h = E(l);
+      t = g(h, "LI", {});
+      var N = E(t);
+      f = b(N, s), c = b(N, " covalent modifications"), N.forEach(u), h.forEach(u);
+    },
+    m(r, L) {
+      o.m(r, L), m(r, e, L), m(r, n, L);
+      for (let h = 0; h < v.length; h += 1)
+        v[h] && v[h].m(n, null);
+      m(r, i, L), m(r, l, L), d(l, t), d(t, f), d(t, c);
+    },
+    p(r, L) {
+      if (y === (y = _(r)) && o ? o.p(r, L) : (o.d(1), o = y(r), o && (o.c(), o.m(e.parentNode, e))), L & /*value, undefined*/
+      1) {
+        I = V(
+          /*value*/
+          r[0].chains
+        );
+        let h;
+        for (h = 0; h < I.length; h += 1) {
+          const N = q(r, I, h);
+          v[h] ? v[h].p(N, L) : (v[h] = U(N), v[h].c(), v[h].m(n, null));
+        }
+        for (; h < v.length; h += 1)
+          v[h].d(1);
+        v.length = I.length;
+      }
+      L & /*value*/
+      1 && s !== (s = /*value*/
+      r[0].covMods.length + "") && w(f, s);
+    },
+    d(r) {
+      r && (u(e), u(n), u(i), u(l)), o.d(r), G(v, r);
+    }
+  };
+}
+function X(a) {
+  let e, n, i = (
+    /*value*/
+    a[0].chains.length + ""
+  ), l, t, s;
+  return {
+    c() {
+      e = k("b"), n = p("Input composed of "), l = p(i), t = p(" chain "), s = k("br");
+    },
+    l(f) {
+      e = g(f, "B", {});
+      var c = E(e);
+      n = b(c, "Input composed of "), l = b(c, i), t = b(c, " chain "), c.forEach(u), s = g(f, "BR", {});
+    },
+    m(f, c) {
+      m(f, e, c), d(e, n), d(e, l), d(e, t), m(f, s, c);
+    },
+    p(f, c) {
+      c & /*value*/
+      1 && i !== (i = /*value*/
+      f[0].chains.length + "") && w(l, i);
+    },
+    d(f) {
+      f && (u(e), u(s));
+    }
+  };
+}
+function Y(a) {
+  let e, n, i = (
+    /*value*/
+    a[0].chains.length + ""
+  ), l, t, s, f;
+  return {
+    c() {
+      e = k("b"), n = p("Input composed of "), l = p(i), t = p(" chains"), s = S(), f = k("br");
+    },
+    l(c) {
+      e = g(c, "B", {});
+      var _ = E(e);
+      n = b(_, "Input composed of "), l = b(_, i), t = b(_, " chains"), _.forEach(u), s = D(c), f = g(c, "BR", {});
+    },
+    m(c, _) {
+      m(c, e, _), d(e, n), d(e, l), d(e, t), m(c, s, _), m(c, f, _);
+    },
+    p(c, _) {
+      _ & /*value*/
+      1 && i !== (i = /*value*/
+      c[0].chains.length + "") && w(l, i);
+    },
+    d(c) {
+      c && (u(e), u(s), u(f));
+    }
+  };
+}
+function H(a) {
+  let e, n, i = (
+    /*val*/
+    a[8].class + ""
+  ), l, t, s = (
+    /*val*/
+    a[8].sequence.length + ""
+  ), f, c;
   return {
     c() {
-      e = S("div"), a = M(i), this.h();
+      e = k("li"), n = k("div"), l = p(i), t = S(), f = p(s), c = p(" residues"), this.h();
+    },
+    l(_) {
+      e = g(_, "LI", {});
+      var y = E(e);
+      n = g(y, "DIV", { class: !0 });
+      var o = E(n);
+      l = b(o, i), t = D(o), f = b(o, s), c = b(o, " residues"), o.forEach(u), y.forEach(u), this.h();
+    },
+    h() {
+      A(n, "class", "svelte-1r1gryw");
+    },
+    m(_, y) {
+      m(_, e, y), d(e, n), d(n, l), d(n, t), d(n, f), d(n, c);
+    },
+    p(_, y) {
+      y & /*value*/
+      1 && i !== (i = /*val*/
+      _[8].class + "") && w(l, i), y & /*value*/
+      1 && s !== (s = /*val*/
+      _[8].sequence.length + "") && w(f, s);
+    },
+    d(_) {
+      _ && u(e);
+    }
+  };
+}
+function T(a) {
+  let e;
+  function n(t, s) {
+    return (
+      /*val*/
+      t[8].name != null ? $ : (
+        /*val*/
+        t[8].smiles != null ? x : Z
+      )
+    );
+  }
+  let i = n(a), l = i(a);
+  return {
+    c() {
+      l.c(), e = z();
     },
     l(t) {
-      e = p(t, "DIV", { class: !0 });
-      var l = k(e);
-      a = E(l, i), l.forEach(o), this.h();
+      l.l(t), e = z();
+    },
+    m(t, s) {
+      l.m(t, s), m(t, e, s);
+    },
+    p(t, s) {
+      i === (i = n(t)) && l ? l.p(t, s) : (l.d(1), l = i(t), l && (l.c(), l.m(e.parentNode, e)));
+    },
+    d(t) {
+      t && u(e), l.d(t);
+    }
+  };
+}
+function Z(a) {
+  let e, n = '<div class="svelte-1r1gryw">Ligand</div>';
+  return {
+    c() {
+      e = k("li"), e.innerHTML = n;
+    },
+    l(i) {
+      e = g(i, "LI", { "data-svelte-h": !0 }), J(e) !== "svelte-z73xb2" && (e.innerHTML = n);
+    },
+    m(i, l) {
+      m(i, e, l);
+    },
+    p: R,
+    d(i) {
+      i && u(e);
+    }
+  };
+}
+function x(a) {
+  let e, n, i, l = (
+    /*val*/
+    a[8].smiles.length + ""
+  ), t, s;
+  return {
+    c() {
+      e = k("li"), n = k("div"), i = p("Ligand SMILES with "), t = p(l), s = p(" atoms"), this.h();
+    },
+    l(f) {
+      e = g(f, "LI", {});
+      var c = E(e);
+      n = g(c, "DIV", { class: !0 });
+      var _ = E(n);
+      i = b(_, "Ligand SMILES with "), t = b(_, l), s = b(_, " atoms"), _.forEach(u), c.forEach(u), this.h();
+    },
+    h() {
+      A(n, "class", "svelte-1r1gryw");
+    },
+    m(f, c) {
+      m(f, e, c), d(e, n), d(n, i), d(n, t), d(n, s);
+    },
+    p(f, c) {
+      c & /*value*/
+      1 && l !== (l = /*val*/
+      f[8].smiles.length + "") && w(t, l);
+    },
+    d(f) {
+      f && u(e);
+    }
+  };
+}
+function $(a) {
+  let e, n, i, l = (
+    /*val*/
+    a[8].name + ""
+  ), t;
+  return {
+    c() {
+      e = k("li"), n = k("div"), i = p("Ligand "), t = p(l), this.h();
+    },
+    l(s) {
+      e = g(s, "LI", {});
+      var f = E(e);
+      n = g(f, "DIV", { class: !0 });
+      var c = E(n);
+      i = b(c, "Ligand "), t = b(c, l), c.forEach(u), f.forEach(u), this.h();
     },
     h() {
-      w(e, "class", "svelte-84cxb8"), m(() => (
+      A(n, "class", "svelte-1r1gryw");
+    },
+    m(s, f) {
+      m(s, e, f), d(e, n), d(n, i), d(n, t);
+    },
+    p(s, f) {
+      f & /*value*/
+      1 && l !== (l = /*val*/
+      s[8].name + "") && w(t, l);
+    },
+    d(s) {
+      s && u(e);
+    }
+  };
+}
+function U(a) {
+  let e = ["protein", "DNA", "RNA"].includes(
+    /*val*/
+    a[8].class
+  ), n, i, l = e && H(a), t = (
+    /*val*/
+    a[8].class == "ligand" && T(a)
+  );
+  return {
+    c() {
+      l && l.c(), n = S(), t && t.c(), i = z();
+    },
+    l(s) {
+      l && l.l(s), n = D(s), t && t.l(s), i = z();
+    },
+    m(s, f) {
+      l && l.m(s, f), m(s, n, f), t && t.m(s, f), m(s, i, f);
+    },
+    p(s, f) {
+      f & /*value*/
+      1 && (e = ["protein", "DNA", "RNA"].includes(
+        /*val*/
+        s[8].class
+      )), e ? l ? l.p(s, f) : (l = H(s), l.c(), l.m(n.parentNode, n)) : l && (l.d(1), l = null), /*val*/
+      s[8].class == "ligand" ? t ? t.p(s, f) : (t = T(s), t.c(), t.m(i.parentNode, i)) : t && (t.d(1), t = null);
+    },
+    d(s) {
+      s && (u(n), u(i)), l && l.d(s), t && t.d(s);
+    }
+  };
+}
+function ee(a) {
+  let e, n, i = (
+    /*value*/
+    a[0] && C(a)
+  );
+  return {
+    c() {
+      e = k("div"), i && i.c(), this.h();
+    },
+    l(l) {
+      e = g(l, "DIV", { class: !0 });
+      var t = E(e);
+      i && i.l(t), t.forEach(u), this.h();
+    },
+    h() {
+      A(e, "class", "svelte-1r1gryw"), j(() => (
         /*div_elementresize_handler*/
-        n[5].call(e)
-      )), r(
+        a[5].call(e)
+      )), M(
         e,
         "table",
         /*type*/
-        n[1] === "table"
-      ), r(
+        a[1] === "table"
+      ), M(
         e,
         "gallery",
         /*type*/
-        n[1] === "gallery"
-      ), r(
+        a[1] === "gallery"
+      ), M(
         e,
         "selected",
         /*selected*/
-        n[2]
+        a[2]
       );
     },
-    m(t, l) {
-      C(t, e, l), v(e, a), d = b(
+    m(l, t) {
+      m(l, e, t), i && i.m(e, null), n = W(
         e,
         /*div_elementresize_handler*/
-        n[5].bind(e)
-      ), n[6](e);
+        a[5].bind(e)
+      ), a[6](e);
     },
-    p(t, [l]) {
-      l & /*value*/
-      1 && i !== (i = /*value*/
-      (t[0] ? (
-        /*value*/
-        t[0]
-      ) : "") + "") && I(a, i), l & /*type*/
-      2 && r(
+    p(l, [t]) {
+      /*value*/
+      l[0] ? i ? i.p(l, t) : (i = C(l), i.c(), i.m(e, null)) : i && (i.d(1), i = null), t & /*type*/
+      2 && M(
         e,
         "table",
         /*type*/
-        t[1] === "table"
-      ), l & /*type*/
-      2 && r(
+        l[1] === "table"
+      ), t & /*type*/
+      2 && M(
         e,
         "gallery",
         /*type*/
-        t[1] === "gallery"
-      ), l & /*selected*/
-      4 && r(
+        l[1] === "gallery"
+      ), t & /*selected*/
+      4 && M(
         e,
         "selected",
         /*selected*/
-        t[2]
+        l[2]
       );
     },
-    i: u,
-    o: u,
-    d(t) {
-      t && o(e), d(), n[6](null);
+    i: R,
+    o: R,
+    d(l) {
+      l && u(e), i && i.d(), n(), a[6](null);
     }
   };
 }
-function W(n, e, i) {
-  let { value: a } = e, { type: d } = e, { selected: t = !1 } = e, l, _;
-  function f(s, c) {
-    !s || !c || (_.style.setProperty("--local-text-width", `${c < 150 ? c : 200}px`), i(4, _.style.whiteSpace = "unset", _));
+function le(a, e, n) {
+  let { value: i } = e, { type: l } = e, { selected: t = !1 } = e, s, f;
+  function c(o, I) {
+    !o || !I || (f.style.setProperty("--local-text-width", `${I < 150 ? I : 200}px`), n(4, f.style.whiteSpace = "unset", f));
   }
-  P(() => {
-    f(_, l);
+  Q(() => {
+    c(f, s);
   });
-  function h() {
-    l = this.clientWidth, i(3, l);
+  function _() {
+    s = this.clientWidth, n(3, s);
   }
-  function g(s) {
-    z[s ? "unshift" : "push"](() => {
-      _ = s, i(4, _);
+  function y(o) {
+    F[o ? "unshift" : "push"](() => {
+      f = o, n(4, f);
     });
   }
-  return n.$$set = (s) => {
-    "value" in s && i(0, a = s.value), "type" in s && i(1, d = s.type), "selected" in s && i(2, t = s.selected);
-  }, [a, d, t, l, _, h, g];
+  return a.$$set = (o) => {
+    "value" in o && n(0, i = o.value), "type" in o && n(1, l = o.type), "selected" in o && n(2, t = o.selected);
+  }, [i, l, t, s, f, _, y];
 }
-class j extends y {
+class te extends P {
   constructor(e) {
-    super(), q(this, e, W, V, D, { value: 0, type: 1, selected: 2 });
+    super(), K(this, e, le, ee, O, { value: 0, type: 1, selected: 2 });
   }
 }
 export {
-  j as default
+  te as default
 };

src/backend/gradio_cofoldinginput/templates/example/style.css

@@ -1 +1 @@
-.gallery.svelte-84cxb8{padding:var(--size-1) var(--size-2)}div.svelte-84cxb8{overflow:hidden;min-width:var(--local-text-width);white-space:nowrap}
+.gallery.svelte-1r1gryw{padding:var(--size-1) var(--size-2)}div.svelte-1r1gryw{overflow:hidden;min-width:var(--local-text-width);white-space:nowrap}

src/demo/app.py

@@ -10,20 +10,42 @@ def predict(input):
     return input
 
 with gr.Blocks() as demo:
+    jobname = gr.Textbox(label="Job Name")
     inp=CofoldingInput(label="Input")
 
-    # preinput =  {"chains": [
-    #     {
-    #         "class": "DNA",
-    #         "sequence": "ATGCGT",
-    #         "chain": "A"
-    #     }
-    # ], "covMods":[]
-    # }
+    preinput =  {"chains": [
+        {
+            "class": "DNA",
+            "sequence": "ATGCGT",
+            "chain": "A"
+        },
+        {
+            "class": "protein",
+            "sequence": "AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA",
+            "chain": "B"
+        },
+        {
+            "class": "ligand",
+            "name": "ZN",
+            "smiles": "",
+            "sdf": "",
+            "chain": "C"
+        },
+        {
+            "class": "ligand",
+            "smiles": "CCCCCCCCCCCCCCCCCCCC",
+            "name": "",
+            "sdf": "",
+            "chain": "D"
+        }
+    ], "covMods":[]
+    }
     # inp2=CofoldingInput(preinput, label="Input prefilled")
     btn = gr.Button("Submit")
     out = gr.HTML()
 
+    gr.Examples([["test",preinput]], inputs=[jobname,inp])
+
     btn.click(predict, inputs=[inp], outputs=[out])
 
 if __name__ == "__main__":

src/demo/space.py

@@ -50,20 +50,42 @@ def predict(input):
     return input
 
 with gr.Blocks() as demo:
+    jobname = gr.Textbox(label="Job Name")
     inp=CofoldingInput(label="Input")
 
-    # preinput =  {"chains": [
-    #     {
-    #         "class": "DNA",
-    #         "sequence": "ATGCGT",
-    #         "chain": "A"
-    #     }
-    # ], "covMods":[]
-    # }
+    preinput =  {"chains": [
+        {
+            "class": "DNA",
+            "sequence": "ATGCGT",
+            "chain": "A"
+        },
+        {
+            "class": "protein",
+            "sequence": "AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA",
+            "chain": "B"
+        },
+        {
+            "class": "ligand",
+            "name": "ZN",
+            "smiles": "",
+            "sdf": "",
+            "chain": "C"
+        },
+        {
+            "class": "ligand",
+            "smiles": "CCCCCCCCCCCCCCCCCCCC",
+            "name": "",
+            "sdf": "",
+            "chain": "D"
+        }
+    ], "covMods":[]
+    }
     # inp2=CofoldingInput(preinput, label="Input prefilled")
     btn = gr.Button("Submit")
     out = gr.HTML()
 
+    gr.Examples([["test",preinput]], inputs=[jobname,inp])
+
     btn.click(predict, inputs=[inp], outputs=[out])
 
 if __name__ == "__main__":

src/frontend/Example.svelte

@@ -1,46 +1,74 @@
 <script lang="ts">
-	import { onMount } from "svelte";
-
-	export let value: string | null;
-	export let type: "gallery" | "table";
-	export let selected = false;
-
-	let size: number;
-	let el: HTMLDivElement;
-
-	function set_styles(element: HTMLElement, el_width: number): void {
-		if (!element || !el_width) return;
-		el.style.setProperty(
-			"--local-text-width",
-			`${el_width < 150 ? el_width : 200}px`
-		);
-		el.style.whiteSpace = "unset";
-	}
-
-	onMount(() => {
-		set_styles(el, size);
-	});
+  import { onMount } from "svelte";
+
+  export let value: string | null;
+  export let type: "gallery" | "table";
+  export let selected = false;
+
+  let size: number;
+  let el: HTMLDivElement;
+
+  function set_styles(element: HTMLElement, el_width: number): void {
+    if (!element || !el_width) return;
+    el.style.setProperty(
+      "--local-text-width",
+      `${el_width < 150 ? el_width : 200}px`
+    );
+    el.style.whiteSpace = "unset";
+  }
+
+  onMount(() => {
+    set_styles(el, size);
+  });
 </script>
 
 <div
-	bind:clientWidth={size}
-	bind:this={el}
-	class:table={type === "table"}
-	class:gallery={type === "gallery"}
-	class:selected
+  bind:clientWidth={size}
+  bind:this={el}
+  class:table={type === "table"}
+  class:gallery={type === "gallery"}
+  class:selected
 >
-	{value ? value : ""}
+  <!-- {value ? value : ""} -->
+  <!-- {JSON.stringify(value)} -->
+  {#if value}
+    {#if value["chains"].length > 1}
+      <b>Input composed of {value["chains"].length} chains </b> <br />
+    {:else}
+      <b>Input composed of {value["chains"].length} chain </b><br />
+    {/if}
+    <ul>
+      {#each value["chains"] as val}
+        {#if ["protein", "DNA", "RNA"].includes(val["class"])}
+          <li><div>{val["class"]} {val["sequence"].length} residues</div></li>
+        {/if}
+        {#if val["class"] == "ligand"}
+          {#if val["name"] != undefined}
+            <li><div>Ligand {val["name"]}</div></li>
+          {:else if val["smiles"] != undefined}
+            <li><div>Ligand SMILES with {val["smiles"].length} atoms</div></li>
+          {:else}
+            <li><div>Ligand</div></li>
+          {/if}
+        {/if}
+      {/each}
+    </ul>
+
+    <ul>
+      <li>{value["covMods"].length} covalent modifications</li>
+    </ul>
+  {/if}
 </div>
 
 <style>
-	.gallery {
-		padding: var(--size-1) var(--size-2);
-	}
+  .gallery {
+    padding: var(--size-1) var(--size-2);
+  }
 
-	div {
-		overflow: hidden;
-		min-width: var(--local-text-width);
+  div {
+    overflow: hidden;
+    min-width: var(--local-text-width);
 
-		white-space: nowrap;
-	}
+    white-space: nowrap;
+  }
 </style>

src/frontend/Index.svelte

@@ -52,6 +52,18 @@
   }
 
   onMount(() => {});
+
+  $: console.log(value);
+
+  // let id = 0;
+  // trigger reload of values
+  // when the value is changed
+  // // let old_value = value;
+  // $: if (JSON.stringify(old_value) !== JSON.stringify(value)) {
+  //   // gradio.dispatch("change");
+  //   old_value = value;
+  //   // id += 1;
+  // }
 </script>
 
 <Block

src/frontend/shared/Molecule.svelte

@@ -2,7 +2,10 @@
   import { createEventDispatcher, afterUpdate } from "svelte";
 
   const dispatch = createEventDispatcher();
-  import Dmol from "3dmol";
+  import * as mol from "3dmol/build/3Dmol.js";
+  let Dmol = mol;
+
+  console.log(Dmol);
 
   // export let whichCovMod = 0;
 
@@ -711,7 +714,7 @@ Constrain images and videos to the parent width and preserve their intrinsic asp
     --tw-contain-size:  ;
     --tw-contain-layout:  ;
     --tw-contain-paint:  ;
-    --tw-contain-style:                                         
+    --tw-contain-style:                                            
 ;
   }
 
@@ -766,7 +769,7 @@ Constrain images and videos to the parent width and preserve their intrinsic asp
     --tw-contain-size:  ;
     --tw-contain-layout:  ;
     --tw-contain-paint:  ;
-    --tw-contain-style:                                         
+    --tw-contain-style:                                            
 ;
   }
 

src/frontend/shared/SequenceInput.svelte

@@ -358,6 +358,14 @@
     covMods = value["covMods"];
     // vals = value["chains"];
   });
+
+  // for each change of value, update vals and covMods
+  let old_value = value;
+  $: if (JSON.stringify(old_value) !== JSON.stringify(value)) {
+    vals = value["chains"];
+    covMods = value["covMods"];
+    old_value = value;
+  }
 </script>
 
 {#if vals != undefined}

src/pyproject.toml

@@ -8,7 +8,7 @@ build-backend = "hatchling.build"
 
 [project]
 name = "gradio_cofoldinginput"
-version = "0.0.6"
+version = "0.0.7"
 description = "Component to enter protein and DNA sequences + small molecules for cofolding"
 readme = "README.md"
 license = "MIT"