simonduerr commited on
Commit
1b1652a
1 Parent(s): 0212ccf

Upload folder using huggingface_hub

Browse files
.gitignore ADDED
@@ -0,0 +1,9 @@
 
 
 
 
 
 
 
 
 
 
1
+ .eggs/
2
+ dist/
3
+ *.pyc
4
+ __pycache__/
5
+ *.py[cod]
6
+ *$py.class
7
+ __tmp/*
8
+ *.pyi
9
+ node_modules
README.md CHANGED
@@ -1,17 +1,290 @@
1
 
2
- ---
3
- tags: [gradio-custom-component,gradio-template-Textbox]
4
- title: gradio_cofoldinginput V0.0.4
5
- colorFrom: blue
6
- colorTo: indigo
7
- sdk: docker
8
- pinned: false
9
- license: apache-2.0
10
- ---
11
 
 
12
 
13
- # Name: gradio_cofoldinginput
14
 
15
- Description: Component to enter protein and DNA sequences + small molecules for cofolding
 
 
16
 
17
- Install with: pip install gradio_cofoldinginput
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
 
2
+ # `gradio_cofoldinginput`
3
+ <a href="https://pypi.org/project/gradio_cofoldinginput/" target="_blank"><img alt="PyPI - Version" src="https://img.shields.io/pypi/v/gradio_cofoldinginput"></a>
 
 
 
 
 
 
 
4
 
5
+ Component to enter protein and DNA sequences + small molecules for cofolding
6
 
7
+ ## Installation
8
 
9
+ ```bash
10
+ pip install gradio_cofoldinginput
11
+ ```
12
 
13
+ ## Usage
14
+
15
+ ```python
16
+
17
+ import gradio as gr
18
+ from gradio_cofoldinginput import CofoldingInput
19
+
20
+ import json
21
+
22
+
23
+ def predict(input):
24
+ input = json.dumps(input)
25
+ return input
26
+
27
+ with gr.Blocks() as demo:
28
+ inp=CofoldingInput(label="Input")
29
+
30
+ # preinput = {"chains": [
31
+ # {
32
+ # "class": "DNA",
33
+ # "sequence": "ATGCGT",
34
+ # "chain": "A"
35
+ # }
36
+ # ], "covMods":[]
37
+ # }
38
+ # inp2=CofoldingInput(preinput, label="Input prefilled")
39
+ btn = gr.Button("Submit")
40
+ out = gr.HTML()
41
+
42
+ btn.click(predict, inputs=[inp], outputs=[out])
43
+
44
+ if __name__ == "__main__":
45
+ demo.launch()
46
+
47
+ ```
48
+
49
+ ## `CofoldingInput`
50
+
51
+ ### Initialization
52
+
53
+ <table>
54
+ <thead>
55
+ <tr>
56
+ <th align="left">name</th>
57
+ <th align="left" style="width: 25%;">type</th>
58
+ <th align="left">default</th>
59
+ <th align="left">description</th>
60
+ </tr>
61
+ </thead>
62
+ <tbody>
63
+ <tr>
64
+ <td align="left"><code>value</code></td>
65
+ <td align="left" style="width: 25%;">
66
+
67
+ ```python
68
+ dict | None
69
+ ```
70
+
71
+ </td>
72
+ <td align="left"><code>{"chains": [], "covMods": []}</code></td>
73
+ <td align="left">list of items.</td>
74
+ </tr>
75
+
76
+ <tr>
77
+ <td align="left"><code>label</code></td>
78
+ <td align="left" style="width: 25%;">
79
+
80
+ ```python
81
+ str | None
82
+ ```
83
+
84
+ </td>
85
+ <td align="left"><code>None</code></td>
86
+ <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>
87
+ </tr>
88
+
89
+ <tr>
90
+ <td align="left"><code>info</code></td>
91
+ <td align="left" style="width: 25%;">
92
+
93
+ ```python
94
+ str | None
95
+ ```
96
+
97
+ </td>
98
+ <td align="left"><code>None</code></td>
99
+ <td align="left">additional component description.</td>
100
+ </tr>
101
+
102
+ <tr>
103
+ <td align="left"><code>every</code></td>
104
+ <td align="left" style="width: 25%;">
105
+
106
+ ```python
107
+ float | None
108
+ ```
109
+
110
+ </td>
111
+ <td align="left"><code>None</code></td>
112
+ <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>
113
+ </tr>
114
+
115
+ <tr>
116
+ <td align="left"><code>show_label</code></td>
117
+ <td align="left" style="width: 25%;">
118
+
119
+ ```python
120
+ bool | None
121
+ ```
122
+
123
+ </td>
124
+ <td align="left"><code>None</code></td>
125
+ <td align="left">if True, will display label.</td>
126
+ </tr>
127
+
128
+ <tr>
129
+ <td align="left"><code>container</code></td>
130
+ <td align="left" style="width: 25%;">
131
+
132
+ ```python
133
+ bool
134
+ ```
135
+
136
+ </td>
137
+ <td align="left"><code>True</code></td>
138
+ <td align="left">If True, will place the component in a container - providing some extra padding around the border.</td>
139
+ </tr>
140
+
141
+ <tr>
142
+ <td align="left"><code>scale</code></td>
143
+ <td align="left" style="width: 25%;">
144
+
145
+ ```python
146
+ int | None
147
+ ```
148
+
149
+ </td>
150
+ <td align="left"><code>None</code></td>
151
+ <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>
152
+ </tr>
153
+
154
+ <tr>
155
+ <td align="left"><code>min_width</code></td>
156
+ <td align="left" style="width: 25%;">
157
+
158
+ ```python
159
+ int
160
+ ```
161
+
162
+ </td>
163
+ <td align="left"><code>160</code></td>
164
+ <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>
165
+ </tr>
166
+
167
+ <tr>
168
+ <td align="left"><code>interactive</code></td>
169
+ <td align="left" style="width: 25%;">
170
+
171
+ ```python
172
+ bool | None
173
+ ```
174
+
175
+ </td>
176
+ <td align="left"><code>None</code></td>
177
+ <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>
178
+ </tr>
179
+
180
+ <tr>
181
+ <td align="left"><code>visible</code></td>
182
+ <td align="left" style="width: 25%;">
183
+
184
+ ```python
185
+ bool
186
+ ```
187
+
188
+ </td>
189
+ <td align="left"><code>True</code></td>
190
+ <td align="left">If False, component will be hidden.</td>
191
+ </tr>
192
+
193
+ <tr>
194
+ <td align="left"><code>elem_id</code></td>
195
+ <td align="left" style="width: 25%;">
196
+
197
+ ```python
198
+ str | None
199
+ ```
200
+
201
+ </td>
202
+ <td align="left"><code>None</code></td>
203
+ <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>
204
+ </tr>
205
+
206
+ <tr>
207
+ <td align="left"><code>autofocus</code></td>
208
+ <td align="left" style="width: 25%;">
209
+
210
+ ```python
211
+ bool
212
+ ```
213
+
214
+ </td>
215
+ <td align="left"><code>False</code></td>
216
+ <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>
217
+ </tr>
218
+
219
+ <tr>
220
+ <td align="left"><code>autoscroll</code></td>
221
+ <td align="left" style="width: 25%;">
222
+
223
+ ```python
224
+ bool
225
+ ```
226
+
227
+ </td>
228
+ <td align="left"><code>True</code></td>
229
+ <td align="left">None</td>
230
+ </tr>
231
+
232
+ <tr>
233
+ <td align="left"><code>elem_classes</code></td>
234
+ <td align="left" style="width: 25%;">
235
+
236
+ ```python
237
+ list[str] | str | None
238
+ ```
239
+
240
+ </td>
241
+ <td align="left"><code>None</code></td>
242
+ <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>
243
+ </tr>
244
+
245
+ <tr>
246
+ <td align="left"><code>render</code></td>
247
+ <td align="left" style="width: 25%;">
248
+
249
+ ```python
250
+ bool
251
+ ```
252
+
253
+ </td>
254
+ <td align="left"><code>True</code></td>
255
+ <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>
256
+ </tr>
257
+ </tbody></table>
258
+
259
+
260
+ ### Events
261
+
262
+ | name | description |
263
+ |:-----|:------------|
264
+ | `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. |
265
+ | `input` | This listener is triggered when the user changes the value of the CofoldingInput. |
266
+ | `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 |
267
+ | `submit` | This listener is triggered when the user presses the Enter key while the CofoldingInput is focused. |
268
+ | `focus` | This listener is triggered when the CofoldingInput is focused. |
269
+ | `blur` | This listener is triggered when the CofoldingInput is unfocused/blurred. |
270
+
271
+
272
+
273
+ ### User function
274
+
275
+ 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).
276
+
277
+ - When used as an Input, the component only impacts the input signature of the user function.
278
+ - When used as an output, the component only impacts the return signature of the user function.
279
+
280
+ The code snippet below is accurate in cases where the component is used as both an input and an output.
281
+
282
+ - **As input:** Should return, expects a {str} returned from function and sets textarea value to it.
283
+
284
+ ```python
285
+ def predict(
286
+ value: Unknown
287
+ ) -> dict | None:
288
+ return value
289
+ ```
290
+
src/backend/gradio_cofoldinginput/templates/component/index.js CHANGED
The diff for this file is too large to render. See raw diff
 
src/backend/gradio_cofoldinginput/templates/component/style.css CHANGED
The diff for this file is too large to render. See raw diff
 
src/backend/gradio_cofoldinginput/templates/example/index.js CHANGED
@@ -1,113 +1,124 @@
1
  const {
2
  SvelteComponent: y,
3
  add_iframe_resize_listener: b,
4
- add_render_callback: v,
5
- append: m,
6
- attr: h,
7
- binding_callbacks: p,
8
- detach: w,
9
- element: z,
10
- init: k,
11
- insert: E,
12
- noop: c,
13
- safe_not_equal: S,
14
- set_data: q,
15
- text: C,
 
 
 
16
  toggle_class: r
17
- } = window.__gradio__svelte__internal, { onMount: M } = window.__gradio__svelte__internal;
18
- function P(t) {
19
- let e, n = (
20
  /*value*/
21
- (t[0] ? (
22
  /*value*/
23
- t[0]
24
  ) : "") + ""
25
- ), _, d;
26
  return {
27
  c() {
28
- e = z("div"), _ = C(n), h(e, "class", "svelte-84cxb8"), v(() => (
 
 
 
 
 
 
 
 
29
  /*div_elementresize_handler*/
30
- t[5].call(e)
31
  )), r(
32
  e,
33
  "table",
34
  /*type*/
35
- t[1] === "table"
36
  ), r(
37
  e,
38
  "gallery",
39
  /*type*/
40
- t[1] === "gallery"
41
  ), r(
42
  e,
43
  "selected",
44
  /*selected*/
45
- t[2]
46
  );
47
  },
48
- m(l, s) {
49
- E(l, e, s), m(e, _), d = b(
50
  e,
51
  /*div_elementresize_handler*/
52
- t[5].bind(e)
53
- ), t[6](e);
54
  },
55
- p(l, [s]) {
56
- s & /*value*/
57
- 1 && n !== (n = /*value*/
58
- (l[0] ? (
59
  /*value*/
60
- l[0]
61
- ) : "") + "") && q(_, n), s & /*type*/
62
  2 && r(
63
  e,
64
  "table",
65
  /*type*/
66
- l[1] === "table"
67
- ), s & /*type*/
68
  2 && r(
69
  e,
70
  "gallery",
71
  /*type*/
72
- l[1] === "gallery"
73
- ), s & /*selected*/
74
  4 && r(
75
  e,
76
  "selected",
77
  /*selected*/
78
- l[2]
79
  );
80
  },
81
- i: c,
82
- o: c,
83
- d(l) {
84
- l && w(e), d(), t[6](null);
85
  }
86
  };
87
  }
88
- function W(t, e, n) {
89
- let { value: _ } = e, { type: d } = e, { selected: l = !1 } = e, s, a;
90
- function f(i, u) {
91
- !i || !u || (a.style.setProperty("--local-text-width", `${u < 150 ? u : 200}px`), n(4, a.style.whiteSpace = "unset", a));
92
  }
93
- M(() => {
94
- f(a, s);
95
  });
96
- function o() {
97
- s = this.clientWidth, n(3, s);
98
  }
99
- function g(i) {
100
- p[i ? "unshift" : "push"](() => {
101
- a = i, n(4, a);
102
  });
103
  }
104
- return t.$$set = (i) => {
105
- "value" in i && n(0, _ = i.value), "type" in i && n(1, d = i.type), "selected" in i && n(2, l = i.selected);
106
- }, [_, d, l, s, a, o, g];
107
  }
108
  class j extends y {
109
  constructor(e) {
110
- super(), k(this, e, W, P, S, { value: 0, type: 1, selected: 2 });
111
  }
112
  }
113
  export {
 
1
  const {
2
  SvelteComponent: y,
3
  add_iframe_resize_listener: b,
4
+ add_render_callback: m,
5
+ append_hydration: v,
6
+ attr: w,
7
+ binding_callbacks: z,
8
+ children: k,
9
+ claim_element: p,
10
+ claim_text: E,
11
+ detach: o,
12
+ element: S,
13
+ init: q,
14
+ insert_hydration: C,
15
+ noop: u,
16
+ safe_not_equal: D,
17
+ set_data: I,
18
+ text: M,
19
  toggle_class: r
20
+ } = window.__gradio__svelte__internal, { onMount: P } = window.__gradio__svelte__internal;
21
+ function V(n) {
22
+ let e, i = (
23
  /*value*/
24
+ (n[0] ? (
25
  /*value*/
26
+ n[0]
27
  ) : "") + ""
28
+ ), a, d;
29
  return {
30
  c() {
31
+ e = S("div"), a = M(i), this.h();
32
+ },
33
+ l(t) {
34
+ e = p(t, "DIV", { class: !0 });
35
+ var l = k(e);
36
+ a = E(l, i), l.forEach(o), this.h();
37
+ },
38
+ h() {
39
+ w(e, "class", "svelte-84cxb8"), m(() => (
40
  /*div_elementresize_handler*/
41
+ n[5].call(e)
42
  )), r(
43
  e,
44
  "table",
45
  /*type*/
46
+ n[1] === "table"
47
  ), r(
48
  e,
49
  "gallery",
50
  /*type*/
51
+ n[1] === "gallery"
52
  ), r(
53
  e,
54
  "selected",
55
  /*selected*/
56
+ n[2]
57
  );
58
  },
59
+ m(t, l) {
60
+ C(t, e, l), v(e, a), d = b(
61
  e,
62
  /*div_elementresize_handler*/
63
+ n[5].bind(e)
64
+ ), n[6](e);
65
  },
66
+ p(t, [l]) {
67
+ l & /*value*/
68
+ 1 && i !== (i = /*value*/
69
+ (t[0] ? (
70
  /*value*/
71
+ t[0]
72
+ ) : "") + "") && I(a, i), l & /*type*/
73
  2 && r(
74
  e,
75
  "table",
76
  /*type*/
77
+ t[1] === "table"
78
+ ), l & /*type*/
79
  2 && r(
80
  e,
81
  "gallery",
82
  /*type*/
83
+ t[1] === "gallery"
84
+ ), l & /*selected*/
85
  4 && r(
86
  e,
87
  "selected",
88
  /*selected*/
89
+ t[2]
90
  );
91
  },
92
+ i: u,
93
+ o: u,
94
+ d(t) {
95
+ t && o(e), d(), n[6](null);
96
  }
97
  };
98
  }
99
+ function W(n, e, i) {
100
+ let { value: a } = e, { type: d } = e, { selected: t = !1 } = e, l, _;
101
+ function f(s, c) {
102
+ !s || !c || (_.style.setProperty("--local-text-width", `${c < 150 ? c : 200}px`), i(4, _.style.whiteSpace = "unset", _));
103
  }
104
+ P(() => {
105
+ f(_, l);
106
  });
107
+ function h() {
108
+ l = this.clientWidth, i(3, l);
109
  }
110
+ function g(s) {
111
+ z[s ? "unshift" : "push"](() => {
112
+ _ = s, i(4, _);
113
  });
114
  }
115
+ return n.$$set = (s) => {
116
+ "value" in s && i(0, a = s.value), "type" in s && i(1, d = s.type), "selected" in s && i(2, t = s.selected);
117
+ }, [a, d, t, l, _, h, g];
118
  }
119
  class j extends y {
120
  constructor(e) {
121
+ super(), q(this, e, W, V, D, { value: 0, type: 1, selected: 2 });
122
  }
123
  }
124
  export {
src/frontend/package-lock.json CHANGED
The diff for this file is too large to render. See raw diff
 
src/frontend/package.json CHANGED
@@ -9,15 +9,25 @@
9
  "main_changeset": true,
10
  "main": "Index.svelte",
11
  "exports": {
12
- ".": "./Index.svelte",
13
- "./example": "./Example.svelte",
 
 
 
 
14
  "./package.json": "./package.json"
15
  },
16
  "dependencies": {
17
- "@gradio/atoms": "0.5.3",
18
- "@gradio/icons": "0.3.3",
19
- "@gradio/statustracker": "0.4.8",
20
- "@gradio/utils": "0.3.0",
21
- "3dmol": "^2.1.0"
 
 
 
 
 
 
22
  }
23
  }
 
9
  "main_changeset": true,
10
  "main": "Index.svelte",
11
  "exports": {
12
+ ".": {
13
+ "gradio": "./Index.svelte"
14
+ },
15
+ "./example": {
16
+ "gradio": "./Example.svelte"
17
+ },
18
  "./package.json": "./package.json"
19
  },
20
  "dependencies": {
21
+ "@gradio/atoms": "0.11.0",
22
+ "@gradio/icons": "0.8.1",
23
+ "@gradio/preview": "^0.13.0",
24
+ "@gradio/statustracker": "0.9.4",
25
+ "@gradio/utils": "0.7.0",
26
+ "3dmol": "^2.4.0"
27
+ },
28
+ "devDependencies": {
29
+ "@tsconfig/svelte": "^5.0.4",
30
+ "svelte-preprocess": "^6.0.3",
31
+ "typescript": "^5.6.3"
32
  }
33
  }
src/frontend/tsconfig.json ADDED
@@ -0,0 +1,17 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ {
2
+ "compilerOptions": {
3
+ "target": "esnext",
4
+ "module": "esnext",
5
+ "verbatimModuleSyntax": true,
6
+ "strict": true,
7
+ "moduleResolution": "node",
8
+ "esModuleInterop": true,
9
+ "allowSyntheticDefaultImports": true,
10
+ "skipLibCheck": true,
11
+ "resolveJsonModule": true,
12
+ "types": ["svelte"],
13
+ "baseUrl": "."
14
+ },
15
+ "include": ["src/**/*", "*.svelte"],
16
+ "exclude": ["node_modules"]
17
+ }
src/pyproject.toml CHANGED
@@ -8,15 +8,15 @@ build-backend = "hatchling.build"
8
 
9
  [project]
10
  name = "gradio_cofoldinginput"
11
- version = "0.0.4"
12
  description = "Component to enter protein and DNA sequences + small molecules for cofolding"
13
  readme = "README.md"
14
  license = "MIT"
15
  requires-python = ">=3.8"
16
- authors = [{ name = "YOUR NAME", email = "YOUREMAIL@domain.com" }]
17
  keywords = ["gradio-custom-component", "gradio-template-Textbox"]
18
  # Add dependencies here
19
- dependencies = ["gradio>=4.0,<5.0"]
20
  classifiers = [
21
  'Development Status :: 3 - Alpha',
22
  'License :: OSI Approved :: Apache Software License',
 
8
 
9
  [project]
10
  name = "gradio_cofoldinginput"
11
+ version = "0.0.6"
12
  description = "Component to enter protein and DNA sequences + small molecules for cofolding"
13
  readme = "README.md"
14
  license = "MIT"
15
  requires-python = ">=3.8"
16
+ authors = [{ name = "Simon Dürr", email = "dev@simonduerr.eu" }]
17
  keywords = ["gradio-custom-component", "gradio-template-Textbox"]
18
  # Add dependencies here
19
+ dependencies = ["gradio>=4.0,<6.0"]
20
  classifiers = [
21
  'Development Status :: 3 - Alpha',
22
  'License :: OSI Approved :: Apache Software License',