Hugging Face's logo

Spaces:
simonduerr
/
pdb2vector
Running

App Files Community
simonduerr commited on
Commit
77daddd
·
verified ·
1 Parent(s): 855e839

Update app.py

Browse files
Files changed (1) hide show
  1. app.py +139 -24
app.py CHANGED
@@ -15,35 +15,150 @@ def html_output(input_file):
15
 
16
  x = (
17
  """<!DOCTYPE html>
18
- <html>
19
- <head>
20
- <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
21
- <style>
22
- body{
23
- font-family:sans-serif
24
- }
25
- .mol-container {
26
- width: 100%;
27
- height: 600px;
28
- position: relative;
29
- }
30
- .mol-container select{
31
- background-image:None;
32
- }
33
- </style>
34
-
35
- </head>
36
- <body>
37
 
38
  """
39
  + svg
40
  + """
41
- <button id="copySvgBtn" style="padding:4px;border:1px solid gray;margin:3px">Copy SVG to Clipboard</button>
42
- <button id="copyPngBtn" style="padding:4px;border:1px solid gray;margin:3px">Copy PNG to Clipboard</button>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
43
 
44
- <!-- Buttons for Download -->
45
- <button id="downloadSvgBtn" style="padding:4px;border:1px solid gray;margin:3px">Download SVG</button>
46
- <button id="downloadPngBtn" style="padding:4px;border:1px solid gray;margin:3px">Download PNG</button>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
47
  <script type="text/javascript">
48
  function copySvgToClipboard() {
49
  const svgElement = document.getElementById('svgElement');
 
15
 
16
  x = (
17
  """<!DOCTYPE html>
18
+ <html lang="en">
19
+ <head>
20
+ <meta charset="UTF-8" />
21
+ <meta name="viewport" content="width=device-width, initial-scale=1.0" />
22
+ <title>Document</title>
23
+ <script src="https://cdn.tailwindcss.com"></script>
24
+ </head>
25
+ <body>
26
+
27
+ <div class="flex container mx-auto">
28
+ <div class="w-1/2">
29
+
30
+
31
+
 
 
 
 
 
32
 
33
  """
34
  + svg
35
  + """
36
+ </div>
37
+
38
+ <div class="w-1/2 space-y-4 justify-center items-center flex flex-col">
39
+ <div class="w-3/4">
40
+ <div
41
+ class="w-full flex space-x-2 items-center text-xl justify-center font-light mb-3"
42
+ >
43
+ <svg
44
+ xmlns="http://www.w3.org/2000/svg"
45
+ class="w-4 h-4"
46
+ viewBox="0 0 16 16"
47
+ >
48
+ <path
49
+ fill="currentColor"
50
+ fill-rule="evenodd"
51
+ d="M6.091 5.194q.2-.322.305-.694h3.208c.259.916.98 1.637 1.896 1.896v3.208A2.76 2.76 0 0 0 9.604 11.5H6.396A2.76 2.76 0 0 0 4.5 9.604V6.396a2.76 2.76 0 0 0 1.591-1.202M13 6.396v3.208q.372.106.694.305a2.75 2.75 0 0 1 .897 3.785A2.751 2.751 0 0 1 9.603 13H6.397q-.106.372-.305.694A2.75 2.75 0 1 1 3 9.604V6.396A2.751 2.751 0 1 1 6.396 3h3.208A2.751 2.751 0 1 1 13 6.396M3.75 2.5a1.25 1.25 0 1 1 0 2.5a1.25 1.25 0 0 1 0-2.5M5 12.25a1.25 1.25 0 1 0-2.5 0a1.25 1.25 0 0 0 2.5 0M12.25 11a1.25 1.25 0 1 1 0 2.5a1.25 1.25 0 0 1 0-2.5m1.25-7.25a1.25 1.25 0 1 0-2.5 0a1.25 1.25 0 0 0 2.5 0"
52
+ clip-rule="evenodd"
53
+ />
54
+ </svg>
55
+ <div>SVG</div>
56
+ </div>
57
+ <div class="w-full flex space-x-5">
58
+ <button
59
+ id="copySvgBtn"
60
+ class="flex items-center justify-center space-x-2 w-full p-3 border border-gray-300 rounded bg-gray-100"
61
+ >
62
+ <svg
63
+ xmlns="http://www.w3.org/2000/svg"
64
+ class="w-4 h-4"
65
+ viewBox="0 0 16 16"
66
+ >
67
+ <path
68
+ fill="currentColor"
69
+ fill-rule="evenodd"
70
+ d="M12 2.5H8A1.5 1.5 0 0 0 6.5 4v1H8a3 3 0 0 1 3 3v1.5h1A1.5 1.5 0 0 0 13.5 8V4A1.5 1.5 0 0 0 12 2.5M11 11h1a3 3 0 0 0 3-3V4a3 3 0 0 0-3-3H8a3 3 0 0 0-3 3v1H4a3 3 0 0 0-3 3v4a3 3 0 0 0 3 3h4a3 3 0 0 0 3-3zM4 6.5h4A1.5 1.5 0 0 1 9.5 8v4A1.5 1.5 0 0 1 8 13.5H4A1.5 1.5 0 0 1 2.5 12V8A1.5 1.5 0 0 1 4 6.5"
71
+ clip-rule="evenodd"
72
+ />
73
+ </svg>
74
+ <div>Copy*</div>
75
+ </button>
76
+ <button
77
+ id="downloadSvgBtn"
78
+ class="w-full flex items-center justify-center space-x-2 p-3 border border-gray-300 rounded bg-gray-100"
79
+ >
80
+ <svg
81
+ xmlns="http://www.w3.org/2000/svg"
82
+ class="h-4 w-4"
83
+ viewBox="0 0 16 16"
84
+ >
85
+ <path
86
+ fill="currentColor"
87
+ fill-rule="evenodd"
88
+ d="M6.5 6H4.029l3.499 4.276a.61.61 0 0 0 .944 0L11.971 6H9.5V2.75a.25.25 0 0 0-.25-.25h-2.5a.25.25 0 0 0-.25.25zm1.498 7.5H1.75a.75.75 0 0 0 0 1.5h12.5a.75.75 0 0 0 0-1.5zm0-1.5a2.11 2.11 0 0 1-1.631-.774L2.833 6.907A1.474 1.474 0 0 1 3.973 4.5H5V2.75C5 1.784 5.784 1 6.75 1h2.5c.966 0 1.75.784 1.75 1.75V4.5h1.026a1.474 1.474 0 0 1 1.14 2.407l-3.533 4.319c-.4.49-1 .774-1.632.774H8"
89
+ clip-rule="evenodd"
90
+ />
91
+ </svg>
92
+ <div>Download</div>
93
+ </button>
94
+ </div>
95
+
96
+ <div class="text-xs mt-3 text-center w-full">
97
+ *Only works in in Adobe Illustrator.
98
+ </div>
99
+
100
+ <div
101
+ class="flex space-x-2 items-center text-xl justify-center font-light mb-3 mt-10"
102
+ >
103
+ <svg
104
+ xmlns="http://www.w3.org/2000/svg"
105
+ class="w-4 h-4"
106
+ viewBox="0 0 16 16"
107
+ >
108
+ <path
109
+ fill="currentColor"
110
+ fill-rule="evenodd"
111
+ d="M11.5 3h-7A1.5 1.5 0 0 0 3 4.5v5.027l.962-.7a1.75 1.75 0 0 1 2.079.016l.928.696l2.368-2.03a1.75 1.75 0 0 1 2.325.043L13 8.787V4.5A1.5 1.5 0 0 0 11.5 3m3 7.498V4.5a3 3 0 0 0-3-3h-7a3 3 0 0 0-3 3v7a3 3 0 0 0 3 3h7a3 3 0 0 0 3-3zm-1.5.33l-2.355-2.174a.25.25 0 0 0-.332-.006L7.488 11.07l-.457.392l-.481-.361l-1.41-1.057a.25.25 0 0 0-.296-.002L3 11.381v.119A1.5 1.5 0 0 0 4.5 13h7a1.5 1.5 0 0 0 1.5-1.5zM7.5 6a1.5 1.5 0 1 1-3 0a1.5 1.5 0 0 1 3 0"
112
+ clip-rule="evenodd"
113
+ />
114
+ </svg>
115
+ <div>PNG</div>
116
+ </div>
117
 
118
+ <div class="flex space-x-5">
119
+ <!-- Buttons for Download -->
120
+ <button
121
+ id="copyPngBtn"
122
+ class="w-full flex items-center justify-center space-x-2 p-3 border border-gray-300 rounded bg-gray-100"
123
+ >
124
+ <svg
125
+ xmlns="http://www.w3.org/2000/svg"
126
+ class="w-4 h-4"
127
+ viewBox="0 0 16 16"
128
+ >
129
+ <path
130
+ fill="currentColor"
131
+ fill-rule="evenodd"
132
+ d="M12 2.5H8A1.5 1.5 0 0 0 6.5 4v1H8a3 3 0 0 1 3 3v1.5h1A1.5 1.5 0 0 0 13.5 8V4A1.5 1.5 0 0 0 12 2.5M11 11h1a3 3 0 0 0 3-3V4a3 3 0 0 0-3-3H8a3 3 0 0 0-3 3v1H4a3 3 0 0 0-3 3v4a3 3 0 0 0 3 3h4a3 3 0 0 0 3-3zM4 6.5h4A1.5 1.5 0 0 1 9.5 8v4A1.5 1.5 0 0 1 8 13.5H4A1.5 1.5 0 0 1 2.5 12V8A1.5 1.5 0 0 1 4 6.5"
133
+ clip-rule="evenodd"
134
+ />
135
+ </svg>
136
+ <div>Copy</div>
137
+ </button>
138
+ <button
139
+ id="downloadPngBtn"
140
+ class="w-full flex items-center justify-center space-x-2 p-3 border border-gray-300 rounded bg-gray-100"
141
+ >
142
+ <svg
143
+ xmlns="http://www.w3.org/2000/svg"
144
+ class="h-4 w-4"
145
+ viewBox="0 0 16 16"
146
+ >
147
+ <path
148
+ fill="currentColor"
149
+ fill-rule="evenodd"
150
+ d="M6.5 6H4.029l3.499 4.276a.61.61 0 0 0 .944 0L11.971 6H9.5V2.75a.25.25 0 0 0-.25-.25h-2.5a.25.25 0 0 0-.25.25zm1.498 7.5H1.75a.75.75 0 0 0 0 1.5h12.5a.75.75 0 0 0 0-1.5zm0-1.5a2.11 2.11 0 0 1-1.631-.774L2.833 6.907A1.474 1.474 0 0 1 3.973 4.5H5V2.75C5 1.784 5.784 1 6.75 1h2.5c.966 0 1.75.784 1.75 1.75V4.5h1.026a1.474 1.474 0 0 1 1.14 2.407l-3.533 4.319c-.4.49-1 .774-1.632.774H8"
151
+ clip-rule="evenodd"
152
+ />
153
+ </svg>
154
+ <div>Download</div>
155
+ </button>
156
+ </div>
157
+ </div>
158
+ </div>
159
+ </div>
160
+
161
+
162
  <script type="text/javascript">
163
  function copySvgToClipboard() {
164
  const svgElement = document.getElementById('svgElement');