Upload folder using huggingface_hub

.gitignore

@@ -0,0 +1,9 @@
+.eggs/
+dist/
+*.pyc
+__pycache__/
+*.py[cod]
+*$py.class
+__tmp/*
+*.pyi
+node_modules

README.md

@@ -1,17 +1,290 @@
 
----
-tags: [gradio-custom-component,gradio-template-Textbox]
-title: gradio_cofoldinginput V0.0.4
-colorFrom: blue
-colorTo: indigo
-sdk: docker
-pinned: false
-license: apache-2.0
----
+# `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>  
 
+Component to enter protein and DNA sequences + small molecules for cofolding
 
-# Name: gradio_cofoldinginput
+## Installation
 
-Description: Component to enter protein and DNA sequences + small molecules for cofolding
+```bash
+pip install gradio_cofoldinginput
+```
 
-Install with: pip install gradio_cofoldinginput
+## Usage
+
+```python
+
+import gradio as gr
+from gradio_cofoldinginput import CofoldingInput
+
+import json
+
+
+def predict(input):
+    input = json.dumps(input)
+    return input
+
+with gr.Blocks() as demo:
+    inp=CofoldingInput(label="Input")
+
+    # preinput =  {"chains": [
+    #     {
+    #         "class": "DNA",
+    #         "sequence": "ATGCGT",
+    #         "chain": "A"
+    #     }
+    # ], "covMods":[]
+    # }
+    # inp2=CofoldingInput(preinput, label="Input prefilled")
+    btn = gr.Button("Submit")
+    out = gr.HTML()
+
+    btn.click(predict, inputs=[inp], outputs=[out])
+
+if __name__ == "__main__":
+    demo.launch()
+
+```
+
+## `CofoldingInput`
+
+### Initialization
+
+<table>
+<thead>
+<tr>
+<th align="left">name</th>
+<th align="left" style="width: 25%;">type</th>
+<th align="left">default</th>
+<th align="left">description</th>
+</tr>
+</thead>
+<tbody>
+<tr>
+<td align="left"><code>value</code></td>
+<td align="left" style="width: 25%;">
+
+```python
+dict | None
+```
+
+</td>
+<td align="left"><code>{"chains": [], "covMods": []}</code></td>
+<td align="left">list of items.</td>
+</tr>
+
+<tr>
+<td align="left"><code>label</code></td>
+<td align="left" style="width: 25%;">
+
+```python
+str | None
+```
+
+</td>
+<td align="left"><code>None</code></td>
+<td align="left">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.</td>
+</tr>
+
+<tr>
+<td align="left"><code>info</code></td>
+<td align="left" style="width: 25%;">
+
+```python
+str | None
+```
+
+</td>
+<td align="left"><code>None</code></td>
+<td align="left">additional component description.</td>
+</tr>
+
+<tr>
+<td align="left"><code>every</code></td>
+<td align="left" style="width: 25%;">
+
+```python
+float | None
+```
+
+</td>
+<td align="left"><code>None</code></td>
+<td align="left">If `value` is a callable, run the function 'every' number of seconds while the client connection is open. Has no effect otherwise. The event can be accessed (e.g. to cancel it) via this component's .load_event attribute.</td>
+</tr>
+
+<tr>
+<td align="left"><code>show_label</code></td>
+<td align="left" style="width: 25%;">
+
+```python
+bool | None
+```
+
+</td>
+<td align="left"><code>None</code></td>
+<td align="left">if True, will display label.</td>
+</tr>
+
+<tr>
+<td align="left"><code>container</code></td>
+<td align="left" style="width: 25%;">
+
+```python
+bool
+```
+
+</td>
+<td align="left"><code>True</code></td>
+<td align="left">If True, will place the component in a container - providing some extra padding around the border.</td>
+</tr>
+
+<tr>
+<td align="left"><code>scale</code></td>
+<td align="left" style="width: 25%;">
+
+```python
+int | None
+```
+
+</td>
+<td align="left"><code>None</code></td>
+<td align="left">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.</td>
+</tr>
+
+<tr>
+<td align="left"><code>min_width</code></td>
+<td align="left" style="width: 25%;">
+
+```python
+int
+```
+
+</td>
+<td align="left"><code>160</code></td>
+<td align="left">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.</td>
+</tr>
+
+<tr>
+<td align="left"><code>interactive</code></td>
+<td align="left" style="width: 25%;">
+
+```python
+bool | None
+```
+
+</td>
+<td align="left"><code>None</code></td>
+<td align="left">if True, will be rendered as an editable textbox; if False, editing will be disabled. If not provided, this is inferred based on whether the component is used as an input or output.</td>
+</tr>
+
+<tr>
+<td align="left"><code>visible</code></td>
+<td align="left" style="width: 25%;">
+
+```python
+bool
+```
+
+</td>
+<td align="left"><code>True</code></td>
+<td align="left">If False, component will be hidden.</td>
+</tr>
+
+<tr>
+<td align="left"><code>elem_id</code></td>
+<td align="left" style="width: 25%;">
+
+```python
+str | None
+```
+
+</td>
+<td align="left"><code>None</code></td>
+<td align="left">An optional string that is assigned as the id of this component in the HTML DOM. Can be used for targeting CSS styles.</td>
+</tr>
+
+<tr>
+<td align="left"><code>autofocus</code></td>
+<td align="left" style="width: 25%;">
+
+```python
+bool
+```
+
+</td>
+<td align="left"><code>False</code></td>
+<td align="left">If True, will focus on the textbox when the page loads. Use this carefully, as it can cause usability issues for sighted and non-sighted users.</td>
+</tr>
+
+<tr>
+<td align="left"><code>autoscroll</code></td>
+<td align="left" style="width: 25%;">
+
+```python
+bool
+```
+
+</td>
+<td align="left"><code>True</code></td>
+<td align="left">None</td>
+</tr>
+
+<tr>
+<td align="left"><code>elem_classes</code></td>
+<td align="left" style="width: 25%;">
+
+```python
+list[str] | str | None
+```
+
+</td>
+<td align="left"><code>None</code></td>
+<td align="left">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.</td>
+</tr>
+
+<tr>
+<td align="left"><code>render</code></td>
+<td align="left" style="width: 25%;">
+
+```python
+bool
+```
+
+</td>
+<td align="left"><code>True</code></td>
+<td align="left">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.</td>
+</tr>
+</tbody></table>
+
+
+### Events
+
+| name | description |
+|:-----|:------------|
+| `change` | Triggered when the value of the CofoldingInput changes either because of user input (e.g. a user types in a textbox) OR because of a function update (e.g. an image receives a value from the output of an event trigger). See `.input()` for a listener that is only triggered by user input. |
+| `input` | This listener is triggered when the user changes the value of the CofoldingInput. |
+| `select` | Event listener for when the user selects or deselects the CofoldingInput. Uses event data gradio.SelectData to carry `value` referring to the label of the CofoldingInput, and `selected` to refer to state of the CofoldingInput. See EventData documentation on how to use this event data |
+| `submit` | This listener is triggered when the user presses the Enter key while the CofoldingInput is focused. |
+| `focus` | This listener is triggered when the CofoldingInput is focused. |
+| `blur` | This listener is triggered when the CofoldingInput is unfocused/blurred. |
+
+
+
+### User function
+
+The impact on the users predict function varies depending on whether the component is used as an input or output for an event (or both).
+
+- When used as an Input, the component only impacts the input signature of the user function.
+- When used as an output, the component only impacts the return signature of the user function.
+
+The code snippet below is accurate in cases where the component is used as both an input and an output.
+
+- **As input:** Should return, expects a {str} returned from function and sets textarea value to it.
+
+ ```python
+ def predict(
+     value: Unknown
+ ) -> dict | None:
+     return value
+ ```
+ 

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

@@ -1,113 +1,124 @@
 const {
   SvelteComponent: y,
   add_iframe_resize_listener: b,
-  add_render_callback: v,
-  append: m,
-  attr: h,
-  binding_callbacks: p,
-  detach: w,
-  element: z,
-  init: k,
-  insert: E,
-  noop: c,
-  safe_not_equal: S,
-  set_data: q,
-  text: C,
+  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: M } = window.__gradio__svelte__internal;
-function P(t) {
-  let e, n = (
+} = window.__gradio__svelte__internal, { onMount: P } = window.__gradio__svelte__internal;
+function V(n) {
+  let e, i = (
     /*value*/
-    (t[0] ? (
+    (n[0] ? (
       /*value*/
-      t[0]
+      n[0]
     ) : "") + ""
-  ), _, d;
+  ), a, d;
   return {
     c() {
-      e = z("div"), _ = C(n), h(e, "class", "svelte-84cxb8"), v(() => (
+      e = S("div"), a = M(i), this.h();
+    },
+    l(t) {
+      e = p(t, "DIV", { class: !0 });
+      var l = k(e);
+      a = E(l, i), l.forEach(o), this.h();
+    },
+    h() {
+      w(e, "class", "svelte-84cxb8"), m(() => (
         /*div_elementresize_handler*/
-        t[5].call(e)
+        n[5].call(e)
       )), r(
         e,
         "table",
         /*type*/
-        t[1] === "table"
+        n[1] === "table"
       ), r(
         e,
         "gallery",
         /*type*/
-        t[1] === "gallery"
+        n[1] === "gallery"
       ), r(
         e,
         "selected",
         /*selected*/
-        t[2]
+        n[2]
       );
     },
-    m(l, s) {
-      E(l, e, s), m(e, _), d = b(
+    m(t, l) {
+      C(t, e, l), v(e, a), d = b(
         e,
         /*div_elementresize_handler*/
-        t[5].bind(e)
-      ), t[6](e);
+        n[5].bind(e)
+      ), n[6](e);
     },
-    p(l, [s]) {
-      s & /*value*/
-      1 && n !== (n = /*value*/
-      (l[0] ? (
+    p(t, [l]) {
+      l & /*value*/
+      1 && i !== (i = /*value*/
+      (t[0] ? (
         /*value*/
-        l[0]
-      ) : "") + "") && q(_, n), s & /*type*/
+        t[0]
+      ) : "") + "") && I(a, i), l & /*type*/
       2 && r(
         e,
         "table",
         /*type*/
-        l[1] === "table"
-      ), s & /*type*/
+        t[1] === "table"
+      ), l & /*type*/
       2 && r(
         e,
         "gallery",
         /*type*/
-        l[1] === "gallery"
-      ), s & /*selected*/
+        t[1] === "gallery"
+      ), l & /*selected*/
       4 && r(
         e,
         "selected",
         /*selected*/
-        l[2]
+        t[2]
       );
     },
-    i: c,
-    o: c,
-    d(l) {
-      l && w(e), d(), t[6](null);
+    i: u,
+    o: u,
+    d(t) {
+      t && o(e), d(), n[6](null);
     }
   };
 }
-function W(t, e, n) {
-  let { value: _ } = e, { type: d } = e, { selected: l = !1 } = e, s, a;
-  function f(i, u) {
-    !i || !u || (a.style.setProperty("--local-text-width", `${u < 150 ? u : 200}px`), n(4, a.style.whiteSpace = "unset", a));
+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", _));
   }
-  M(() => {
-    f(a, s);
+  P(() => {
+    f(_, l);
   });
-  function o() {
-    s = this.clientWidth, n(3, s);
+  function h() {
+    l = this.clientWidth, i(3, l);
   }
-  function g(i) {
-    p[i ? "unshift" : "push"](() => {
-      a = i, n(4, a);
+  function g(s) {
+    z[s ? "unshift" : "push"](() => {
+      _ = s, i(4, _);
     });
   }
-  return t.$$set = (i) => {
-    "value" in i && n(0, _ = i.value), "type" in i && n(1, d = i.type), "selected" in i && n(2, l = i.selected);
-  }, [_, d, l, s, a, o, g];
+  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];
 }
 class j extends y {
   constructor(e) {
-    super(), k(this, e, W, P, S, { value: 0, type: 1, selected: 2 });
+    super(), q(this, e, W, V, D, { value: 0, type: 1, selected: 2 });
   }
 }
 export {

src/frontend/package.json

@@ -9,15 +9,25 @@
   "main_changeset": true,
   "main": "Index.svelte",
   "exports": {
-    ".": "./Index.svelte",
-    "./example": "./Example.svelte",
+    ".": {
+      "gradio": "./Index.svelte"
+    },
+    "./example": {
+      "gradio": "./Example.svelte"
+    },
     "./package.json": "./package.json"
   },
   "dependencies": {
-    "@gradio/atoms": "0.5.3",
-    "@gradio/icons": "0.3.3",
-    "@gradio/statustracker": "0.4.8",
-    "@gradio/utils": "0.3.0",
-    "3dmol": "^2.1.0"
+    "@gradio/atoms": "0.11.0",
+    "@gradio/icons": "0.8.1",
+    "@gradio/preview": "^0.13.0",
+    "@gradio/statustracker": "0.9.4",
+    "@gradio/utils": "0.7.0",
+    "3dmol": "^2.4.0"
+  },
+  "devDependencies": {
+    "@tsconfig/svelte": "^5.0.4",
+    "svelte-preprocess": "^6.0.3",
+    "typescript": "^5.6.3"
   }
 }

src/frontend/tsconfig.json

@@ -0,0 +1,17 @@
+{
+    "compilerOptions": {
+      "target": "esnext",
+      "module": "esnext",
+      "verbatimModuleSyntax": true,
+      "strict": true,
+      "moduleResolution": "node",
+      "esModuleInterop": true,
+      "allowSyntheticDefaultImports": true,
+      "skipLibCheck": true,
+      "resolveJsonModule": true,
+      "types": ["svelte"],
+      "baseUrl": "."
+    },
+    "include": ["src/**/*", "*.svelte"],
+    "exclude": ["node_modules"]
+}

src/pyproject.toml

@@ -8,15 +8,15 @@ build-backend = "hatchling.build"
 
 [project]
 name = "gradio_cofoldinginput"
-version = "0.0.4"
+version = "0.0.6"
 description = "Component to enter protein and DNA sequences + small molecules for cofolding"
 readme = "README.md"
 license = "MIT"
 requires-python = ">=3.8"
-authors = [{ name = "YOUR NAME", email = "YOUREMAIL@domain.com" }]
+authors = [{ name = "Simon Dürr", email = "dev@simonduerr.eu" }]
 keywords = ["gradio-custom-component", "gradio-template-Textbox"]
 # Add dependencies here
-dependencies = ["gradio>=4.0,<5.0"]
+dependencies = ["gradio>=4.0,<6.0"]
 classifiers = [
   'Development Status :: 3 - Alpha',
   'License :: OSI Approved :: Apache Software License',