Hugging Face's logo

Spaces:
ELCA-SA
/
sketch-to-BPMN
Running

App Files Community
BenjiELCA commited on
Commit
bb42123
·
1 Parent(s): 7029382

mobile friendly

Browse files
Files changed (2) hide show
  1. app.py +2 -5
  2. modules/htlm_webpage.py +284 -142
app.py CHANGED
@@ -23,8 +23,7 @@ from streamlit_image_comparison import image_comparison
23
  from streamlit_cropper import st_cropper
24
  from streamlit_drawable_canvas import st_canvas
25
  from streamlit_image_select import image_select
26
-
27
- from streamlit_javascript import st_javascript
28
 
29
 
30
  def get_memory_usage():
@@ -275,9 +274,7 @@ def perform_inference(model_object, model_arrow, image, score_threshold,is_mobil
275
  def get_image(uploaded_file):
276
  return Image.open(uploaded_file).convert('RGB')
277
 
278
-
279
- import streamlit as st
280
- from streamlit_js_eval import streamlit_js_eval
281
 
282
  def main():
283
  st.set_page_config(layout="wide")
 
23
  from streamlit_cropper import st_cropper
24
  from streamlit_drawable_canvas import st_canvas
25
  from streamlit_image_select import image_select
26
+ from streamlit_js_eval import streamlit_js_eval
 
27
 
28
 
29
  def get_memory_usage():
 
274
  def get_image(uploaded_file):
275
  return Image.open(uploaded_file).convert('RGB')
276
 
277
+
 
 
278
 
279
  def main():
280
  st.set_page_config(layout="wide")
modules/htlm_webpage.py CHANGED
@@ -1,145 +1,287 @@
1
  import streamlit as st
2
  import streamlit.components.v1 as components
3
 
4
- def display_bpmn_xml(bpmn_xml):
5
- html_template = f"""
6
- <!DOCTYPE html>
7
- <html>
8
- <head>
9
- <meta charset="UTF-8">
10
- <title>BPMN Modeler</title>
11
- <link rel="stylesheet" href="https://unpkg.com/bpmn-js/dist/assets/diagram-js.css">
12
- <link rel="stylesheet" href="https://unpkg.com/bpmn-js/dist/assets/bpmn-font/css/bpmn-embedded.css">
13
- <script src="https://unpkg.com/bpmn-js/dist/bpmn-modeler.development.js"></script>
14
- <style>
15
- html, body {{
16
- height: 100%;
17
- padding: 0;
18
- margin: 0;
19
- font-family: Arial, sans-serif;
20
- display: flex;
21
- flex-direction: column;
22
- overflow: hidden;
23
- }}
24
- #button-container {{
25
- padding: 10px;
26
- background-color: #ffffff;
27
- border-bottom: 1px solid #ddd;
28
- display: flex;
29
- justify-content: flex-start;
30
- gap: 10px;
31
- }}
32
- #save-button, #download-button {{
33
- background-color: #4CAF50;
34
- color: white;
35
- border: none;
36
- padding: 10px 20px;
37
- text-align: center;
38
- text-decoration: none;
39
- display: inline-block;
40
- font-size: 16px;
41
- margin: 4px 2px;
42
- cursor: pointer;
43
- border-radius: 8px;
44
- }}
45
- #download-button {{
46
- background-color: #008CBA;
47
- }}
48
- #canvas-container {{
49
- flex: 1;
50
- position: relative;
51
- background-color: #FBFBFB;
52
- overflow: hidden; /* Prevent scrolling */
53
- display: flex;
54
- justify-content: center;
55
- align-items: center;
56
- }}
57
- #canvas {{
58
- height: 100%;
59
- width: 100%;
60
- position: relative;
61
- }}
62
- </style>
63
- </head>
64
- <body>
65
- <div id="button-container">
66
- <button id="save-button">Save as BPMN</button>
67
- <button id="download-button">Save as XML</button>
68
- <button id="save-button">Save as Method&Style (not available now)</button>
69
- </div>
70
- <div id="canvas-container">
71
- <div id="canvas"></div>
72
- </div>
73
- <script>
74
- var bpmnModeler = new BpmnJS({{
75
- container: '#canvas'
76
- }});
77
-
78
- async function openDiagram(bpmnXML) {{
79
- try {{
80
- await bpmnModeler.importXML(bpmnXML);
81
- bpmnModeler.get('canvas').zoom('fit-viewport');
82
- bpmnModeler.get('canvas').zoom(0.8); // Adjust this value for zooming out
83
- }} catch (err) {{
84
- console.error('Error rendering BPMN diagram', err);
85
- }}
86
- }}
87
-
88
- async function saveDiagram() {{
89
- try {{
90
- const result = await bpmnModeler.saveXML({{ format: true }});
91
- const xml = result.xml;
92
- const blob = new Blob([xml], {{ type: 'text/xml' }});
93
- const url = URL.createObjectURL(blob);
94
- const a = document.createElement('a');
95
- a.href = url;
96
- a.download = 'diagram.bpmn';
97
- document.body.appendChild(a);
98
- a.click();
99
- document.body.removeChild(a);
100
- }} catch (err) {{
101
- console.error('Error saving BPMN diagram', err);
102
- }}
103
- }}
104
-
105
- async function downloadXML() {{
106
- try {{
107
- const result = await bpmnModeler.saveXML({{ format: true }});
108
- const xml = result.xml;
109
- const blob = new Blob([xml], {{ type: 'text/xml' }});
110
- const url = URL.createObjectURL(blob);
111
- const a = document.createElement('a');
112
- a.href = url;
113
- a.download = 'diagram.xml';
114
- document.body.appendChild(a);
115
- a.click();
116
- document.body.removeChild(a);
117
- }} catch (err) {{
118
- console.error('Error downloading XML', err);
119
- }}
120
- }}
121
-
122
- document.getElementById('save-button').addEventListener('click', saveDiagram);
123
- document.getElementById('download-button').addEventListener('click', downloadXML);
124
-
125
- // Ensure the canvas is focused to capture keyboard events
126
- document.getElementById('canvas').focus();
127
-
128
- // Add event listeners for keyboard shortcuts
129
- document.addEventListener('keydown', function(event) {{
130
- if (event.ctrlKey && event.key === 'z') {{
131
- bpmnModeler.get('commandStack').undo();
132
- }} else if (event.key === 'Delete' || event.key === 'Backspace') {{
133
- bpmnModeler.get('selection').get().forEach(function(element) {{
134
- bpmnModeler.get('modeling').removeElements([element]);
135
- }});
136
- }}
137
- }});
138
-
139
- openDiagram(`{bpmn_xml}`);
140
- </script>
141
- </body>
142
- </html>
143
- """
144
-
145
- components.html(html_template, height=1000, width=1500)
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
  import streamlit as st
2
  import streamlit.components.v1 as components
3
 
4
+ def display_bpmn_xml(bpmn_xml, is_mobile=False):
5
+
6
+ if is_mobile:
7
+ html_template = f"""
8
+ <!DOCTYPE html>
9
+ <html>
10
+ <head>
11
+ <meta charset="UTF-8">
12
+ <title>BPMN Modeler</title>
13
+ <script src="https://unpkg.com/bpmn-js/dist/bpmn-modeler.development.js"></script>
14
+ <style>
15
+ html, body {{
16
+ height: 100%;
17
+ padding: 0;
18
+ margin: 0;
19
+ font-family: Arial, sans-serif;
20
+ display: flex;
21
+ flex-direction: column;
22
+ overflow: hidden;
23
+ }}
24
+ #button-container {{
25
+ padding: 10px;
26
+ background-color: #ffffff;
27
+ border-bottom: 1px solid #ddd;
28
+ display: flex;
29
+ justify-content: flex-start;
30
+ gap: 10px;
31
+ }}
32
+ #save-button, #download-button {{
33
+ background-color: #4CAF50;
34
+ color: white;
35
+ border: none;
36
+ padding: 10px 20px;
37
+ text-align: center;
38
+ text-decoration: none;
39
+ display: inline-block;
40
+ font-size: 16px;
41
+ margin: 4px 2px;
42
+ cursor: pointer;
43
+ border-radius: 8px;
44
+ }}
45
+ #download-button {{
46
+ background-color: #008CBA;
47
+ }}
48
+ #canvas-container {{
49
+ flex: 1;
50
+ position: relative;
51
+ background-color: #FBFBFB;
52
+ overflow: hidden; /* Prevent scrolling */
53
+ display: flex;
54
+ justify-content: center;
55
+ align-items: center;
56
+ }}
57
+ #canvas {{
58
+ height: 100%;
59
+ width: 100%;
60
+ position: relative;
61
+ }}
62
+ </style>
63
+ </head>
64
+ <body>
65
+ <div id="button-container">
66
+ <button id="save-button">Save as BPMN</button>
67
+ <button id="download-button">Save as XML</button>
68
+ <button id="save-button">Save as Method&Style (not available now)</button>
69
+ </div>
70
+ <div id="canvas-container">
71
+ <div id="canvas"></div>
72
+ </div>
73
+ <script>
74
+ var bpmnModeler = new BpmnJS({{
75
+ container: '#canvas'
76
+ }});
77
+
78
+ async function openDiagram(bpmnXML) {{
79
+ try {{
80
+ await bpmnModeler.importXML(bpmnXML);
81
+ bpmnModeler.get('canvas').zoom('fit-viewport', 'auto');
82
+ bpmnModeler.get('canvas').zoom(0.2); // Adjust this value for zooming out
83
+ }} catch (err) {{
84
+ console.error('Error rendering BPMN diagram', err);
85
+ }}
86
+ }}
87
+
88
+ async function saveDiagram() {{
89
+ try {{
90
+ const result = await bpmnModeler.saveXML({{ format: true }});
91
+ const xml = result.xml;
92
+ const blob = new Blob([xml], {{ type: 'text/xml' }});
93
+ const url = URL.createObjectURL(blob);
94
+ const a = document.createElement('a');
95
+ a.href = url;
96
+ a.download = 'diagram.bpmn';
97
+ document.body.appendChild(a);
98
+ a.click();
99
+ document.body.removeChild(a);
100
+ }} catch (err) {{
101
+ console.error('Error saving BPMN diagram', err);
102
+ }}
103
+ }}
104
+
105
+ async function downloadXML() {{
106
+ try {{
107
+ const result = await bpmnModeler.saveXML({{ format: true }});
108
+ const xml = result.xml;
109
+ const blob = new Blob([xml], {{ type: 'text/xml' }});
110
+ const url = URL.createObjectURL(blob);
111
+ const a = document.createElement('a');
112
+ a.href = url;
113
+ a.download = 'diagram.xml';
114
+ document.body.appendChild(a);
115
+ a.click();
116
+ document.body.removeChild(a);
117
+ }} catch (err) {{
118
+ console.error('Error downloading XML', err);
119
+ }}
120
+ }}
121
+
122
+ document.getElementById('save-button').addEventListener('click', saveDiagram);
123
+ document.getElementById('download-button').addEventListener('click', downloadXML);
124
+
125
+ // Ensure the canvas is focused to capture keyboard events
126
+ document.getElementById('canvas').focus();
127
+
128
+ // Add event listeners for keyboard shortcuts
129
+ document.addEventListener('keydown', function(event) {{
130
+ if (event.ctrlKey && event.key === 'z') {{
131
+ bpmnModeler.get('commandStack').undo();
132
+ }} else if (event.key === 'Delete' || event.key === 'Backspace') {{
133
+ bpmnModeler.get('selection').get().forEach(function(element) {{
134
+ bpmnModeler.get('modeling').removeElements([element]);
135
+ }});
136
+ }}
137
+ }});
138
+
139
+ openDiagram(`{bpmn_xml}`);
140
+ </script>
141
+ </body>
142
+ </html>
143
+ """
144
+
145
+ components.html(html_template, height=300, width=300)
146
+ else:
147
+ html_template = f"""
148
+ <!DOCTYPE html>
149
+ <html>
150
+ <head>
151
+ <meta charset="UTF-8">
152
+ <title>BPMN Modeler</title>
153
+ <link rel="stylesheet" href="https://unpkg.com/bpmn-js/dist/assets/diagram-js.css">
154
+ <link rel="stylesheet" href="https://unpkg.com/bpmn-js/dist/assets/bpmn-font/css/bpmn-embedded.css">
155
+ <script src="https://unpkg.com/bpmn-js/dist/bpmn-modeler.development.js"></script>
156
+ <style>
157
+ html, body {{
158
+ height: 100%;
159
+ padding: 0;
160
+ margin: 0;
161
+ font-family: Arial, sans-serif;
162
+ display: flex;
163
+ flex-direction: column;
164
+ overflow: hidden;
165
+ }}
166
+ #button-container {{
167
+ padding: 10px;
168
+ background-color: #ffffff;
169
+ border-bottom: 1px solid #ddd;
170
+ display: flex;
171
+ justify-content: flex-start;
172
+ gap: 10px;
173
+ }}
174
+ #save-button, #download-button {{
175
+ background-color: #4CAF50;
176
+ color: white;
177
+ border: none;
178
+ padding: 10px 20px;
179
+ text-align: center;
180
+ text-decoration: none;
181
+ display: inline-block;
182
+ font-size: 16px;
183
+ margin: 4px 2px;
184
+ cursor: pointer;
185
+ border-radius: 8px;
186
+ }}
187
+ #download-button {{
188
+ background-color: #008CBA;
189
+ }}
190
+ #canvas-container {{
191
+ flex: 1;
192
+ position: relative;
193
+ background-color: #FBFBFB;
194
+ overflow: hidden; /* Prevent scrolling */
195
+ display: flex;
196
+ justify-content: center;
197
+ align-items: center;
198
+ }}
199
+ #canvas {{
200
+ height: 100%;
201
+ width: 100%;
202
+ position: relative;
203
+ }}
204
+ </style>
205
+ </head>
206
+ <body>
207
+ <div id="button-container">
208
+ <button id="save-button">Save as BPMN</button>
209
+ <button id="download-button">Save as XML</button>
210
+ <button id="save-button">Save as Method&Style (not available now)</button>
211
+ </div>
212
+ <div id="canvas-container">
213
+ <div id="canvas"></div>
214
+ </div>
215
+ <script>
216
+ var bpmnModeler = new BpmnJS({{
217
+ container: '#canvas'
218
+ }});
219
+
220
+ async function openDiagram(bpmnXML) {{
221
+ try {{
222
+ await bpmnModeler.importXML(bpmnXML);
223
+ bpmnModeler.get('canvas').zoom('fit-viewport', 'auto');
224
+ bpmnModeler.get('canvas').zoom(0.8); // Adjust this value for zooming out
225
+ }} catch (err) {{
226
+ console.error('Error rendering BPMN diagram', err);
227
+ }}
228
+ }}
229
+
230
+ async function saveDiagram() {{
231
+ try {{
232
+ const result = await bpmnModeler.saveXML({{ format: true }});
233
+ const xml = result.xml;
234
+ const blob = new Blob([xml], {{ type: 'text/xml' }});
235
+ const url = URL.createObjectURL(blob);
236
+ const a = document.createElement('a');
237
+ a.href = url;
238
+ a.download = 'diagram.bpmn';
239
+ document.body.appendChild(a);
240
+ a.click();
241
+ document.body.removeChild(a);
242
+ }} catch (err) {{
243
+ console.error('Error saving BPMN diagram', err);
244
+ }}
245
+ }}
246
+
247
+ async function downloadXML() {{
248
+ try {{
249
+ const result = await bpmnModeler.saveXML({{ format: true }});
250
+ const xml = result.xml;
251
+ const blob = new Blob([xml], {{ type: 'text/xml' }});
252
+ const url = URL.createObjectURL(blob);
253
+ const a = document.createElement('a');
254
+ a.href = url;
255
+ a.download = 'diagram.xml';
256
+ document.body.appendChild(a);
257
+ a.click();
258
+ document.body.removeChild(a);
259
+ }} catch (err) {{
260
+ console.error('Error downloading XML', err);
261
+ }}
262
+ }}
263
+
264
+ document.getElementById('save-button').addEventListener('click', saveDiagram);
265
+ document.getElementById('download-button').addEventListener('click', downloadXML);
266
+
267
+ // Ensure the canvas is focused to capture keyboard events
268
+ document.getElementById('canvas').focus();
269
+
270
+ // Add event listeners for keyboard shortcuts
271
+ document.addEventListener('keydown', function(event) {{
272
+ if (event.ctrlKey && event.key === 'z') {{
273
+ bpmnModeler.get('commandStack').undo();
274
+ }} else if (event.key === 'Delete' || event.key === 'Backspace') {{
275
+ bpmnModeler.get('selection').get().forEach(function(element) {{
276
+ bpmnModeler.get('modeling').removeElements([element]);
277
+ }});
278
+ }}
279
+ }});
280
+
281
+ openDiagram(`{bpmn_xml}`);
282
+ </script>
283
+ </body>
284
+ </html>
285
+ """
286
+
287
+ components.html(html_template, height=1000, width=1500)