add the vizifile downloading

modules/htlm_webpage.py

@@ -1,7 +1,7 @@
 import streamlit as st
 import streamlit.components.v1 as components
 
-def display_bpmn_xml(bpmn_xml, is_mobile=False, screen_width=300):
+def display_bpmn_xml(bpmn_xml, vizi_file, is_mobile=False, screen_width=300):
 
     if is_mobile:
         html_template = f"""
@@ -29,7 +29,7 @@ def display_bpmn_xml(bpmn_xml, is_mobile=False, screen_width=300):
                     justify-content: flex-start;
                     gap: 10px;
                 }}
-                #save-button, #download-button {{
+                #save-button, #download-button, #download-vizi-button {{
                     background-color: #4CAF50;
                     color: white;
                     border: none;
@@ -45,6 +45,9 @@ def display_bpmn_xml(bpmn_xml, is_mobile=False, screen_width=300):
                 #download-button {{
                     background-color: #008CBA;
                 }}
+                #download-vizi-button {{
+                    background-color: #FFA500;
+                }}
                 #canvas-container {{
                     flex: 1;
                     position: relative;
@@ -65,6 +68,7 @@ def display_bpmn_xml(bpmn_xml, is_mobile=False, screen_width=300):
             <div id="button-container">
                 <button id="save-button">Save as BPMN</button>
                 <button id="download-button">Save as XML</button>
+                <button id="download-vizi-button">Save as Vizi</button>
             </div>
             <div id="canvas-container">
                 <div id="canvas"></div>
@@ -118,8 +122,24 @@ def display_bpmn_xml(bpmn_xml, is_mobile=False, screen_width=300):
                     }}
                 }}
 
+                async function downloadVizi() {{
+                    try {{
+                        const blob = new Blob([`{vizi_file}`], {{ type: 'text/plain' }});
+                        const url = URL.createObjectURL(blob);
+                        const a = document.createElement('a');
+                        a.href = url;
+                        a.download = 'vizi_file.pmw';
+                        document.body.appendChild(a);
+                        a.click();
+                        document.body.removeChild(a);
+                    }} catch (err) {{
+                        console.error('Error downloading Vizi file', err);
+                    }}
+                }}
+
                 document.getElementById('save-button').addEventListener('click', saveDiagram);
                 document.getElementById('download-button').addEventListener('click', downloadXML);
+                document.getElementById('download-vizi-button').addEventListener('click', downloadVizi);
 
                 // Ensure the canvas is focused to capture keyboard events
                 document.getElementById('canvas').focus();
@@ -171,7 +191,7 @@ def display_bpmn_xml(bpmn_xml, is_mobile=False, screen_width=300):
                     justify-content: flex-start;
                     gap: 10px;
                 }}
-                #save-button, #download-button, #download-png-button {{
+                #save-button, #download-button, #download-vizi-button {{
                     background-color: #4CAF50;
                     color: white;
                     border: none;
@@ -187,6 +207,9 @@ def display_bpmn_xml(bpmn_xml, is_mobile=False, screen_width=300):
                 #download-button {{
                     background-color: #008CBA;
                 }}
+                #download-vizi-button {{
+                    background-color: #FFA500;
+                }}
                 #canvas-container {{
                     flex: 1;
                     position: relative;
@@ -207,7 +230,7 @@ def display_bpmn_xml(bpmn_xml, is_mobile=False, screen_width=300):
             <div id="button-container">
                 <button id="save-button">Save as BPMN</button>
                 <button id="download-button">Save as XML</button>
-                <button id="download-png-button">Save as PNG</button>
+                <button id="download-vizi-button">Save as Vizi</button>
             </div>
             <div id="canvas-container">
                 <div id="canvas"></div>
@@ -261,24 +284,24 @@ def display_bpmn_xml(bpmn_xml, is_mobile=False, screen_width=300):
                     }}
                 }}
 
-                async function downloadPNG() {{
+                async function downloadVizi() {{
                     try {{
-                        const canvas = document.querySelector('#canvas canvas');
-                        const pngUrl = canvas.toDataURL('image/png');
-                        const link = document.createElement('a');
-                        link.href = pngUrl;
-                        link.download = 'diagram.png';
-                        document.body.appendChild(link);
-                        link.click();
-                        document.body.removeChild(link);
+                        const blob = new Blob([`{vizi_file}`], {{ type: 'text/plain' }});
+                        const url = URL.createObjectURL(blob);
+                        const a = document.createElement('a');
+                        a.href = url;
+                        a.download = 'vizi_file.pmw';
+                        document.body.appendChild(a);
+                        a.click();
+                        document.body.removeChild(a);
                     }} catch (err) {{
-                        console.error('Error downloading PNG', err);
+                        console.error('Error downloading Vizi file', err);
                     }}
                 }}
 
                 document.getElementById('save-button').addEventListener('click', saveDiagram);
                 document.getElementById('download-button').addEventListener('click', downloadXML);
-                document.getElementById('download-png-button').addEventListener('click', downloadPNG);
+                document.getElementById('download-vizi-button').addEventListener('click', downloadVizi);
 
                 document.getElementById('canvas').focus();
 
@@ -299,3 +322,4 @@ def display_bpmn_xml(bpmn_xml, is_mobile=False, screen_width=300):
         """
         
         components.html(html_template, height=1000, width=int(9/10*screen_width))
+

modules/streamlit_utils.py

@@ -25,6 +25,8 @@ from streamlit_cropper import st_cropper
 from streamlit_image_select import image_select
 from streamlit_js_eval import streamlit_js_eval
 
+from modules.toWizard import create_wizard_file
+
 
 
 
@@ -418,7 +420,9 @@ def display_bpmn_modeler(is_mobile, screen_width):
             st.session_state.prediction.copy(), st.session_state.text_mapping, 
             st.session_state.size_scale, st.session_state.scale
         )
-        display_bpmn_xml(st.session_state.bpmn_xml, is_mobile=is_mobile, screen_width=int(4/5 * screen_width))
+        st.session_state.vizi_file = create_wizard_file(st.session_state.prediction.copy(), st.session_state.text_mapping)
+        print(st.session_state.vizi_file)
+        display_bpmn_xml(st.session_state.bpmn_xml, st.session_state.vizi_file,  is_mobile=is_mobile, screen_width=int(4/5 * screen_width))
 
 def modeler_options(is_mobile):
     if not is_mobile:

toWizard.py → modules/toWizard.py

@@ -1,5 +1,6 @@
 import xml.etree.ElementTree as ET
-from utils import class_dict
+from modules.utils import class_dict
+from xml.dom import minidom
 
 def rescale(scale, boxes):
     for i in range(len(boxes)):
@@ -43,3 +44,103 @@ def create_BPMN_id(data):
             enum_pool += 1
 
     return data
+
+def check_end(val):
+    if val[1] is None:
+        return True
+    return False
+
+def connect(data, text_mapping, i):
+    target_idx = data['links'][i][1]  
+    current_id = data['BPMN_id'][i]
+    next_idx = data['links'][target_idx][1]
+    next_id = data['BPMN_id'][next_idx]
+    next_text = text_mapping[next_id]
+    current_text = text_mapping[current_id]
+
+    return current_text, next_text
+
+def check_start(val):
+    if val[0] is None:
+        return True
+    return False
+
+
+
+def create_wizard_file(data, text_mapping):
+    root = ET.Element('methodAndStyleWizard')
+    
+    modelName = ET.SubElement(root, 'modelName')
+    modelName.text = 'My Diagram'
+    
+    author = ET.SubElement(root, 'author')
+    author.text = 'Benjamin'
+    
+    # Add pools to the collaboration element
+    for idx, (pool_index, keep_elements) in enumerate(data['pool_dict'].items()):
+        pool_id = f'participant_{idx+1}'
+        pool = ET.SubElement(root, 'processName')
+        pool.text = text_mapping[pool_index]
+    
+    processDescription = ET.SubElement(root, 'processDescription')
+
+
+    for idx, Bpmn_id in enumerate(data['BPMN_id']):
+        # Start Event
+        element_type = Bpmn_id.split('_')[0]
+        if element_type == 'message':
+            eventType = 'Message'
+        elif element_type == 'event':
+            eventType = 'None'
+        if idx >= len(data['links']):
+            continue
+        if check_start(data['links'][idx]) and (element_type=='event' or element_type=='message'):
+            startEvent = ET.SubElement(root, 'startEvent', attrib={'name': text_mapping[Bpmn_id], 'eventType': eventType}) 
+    
+    requestMessage = ET.SubElement(root, 'requestMessage')
+    requester = ET.SubElement(root, 'requester')
+    
+    endEvents = ET.SubElement(root, 'endStates')
+    for idx, Bpmn_id in enumerate(data['BPMN_id']):
+        # End States
+        if idx >= len(data['links']):
+            continue
+        if check_end(data['links'][idx]) and Bpmn_id.split('_')[0] == 'event':
+            if text_mapping[Bpmn_id] == '':
+                text_mapping[Bpmn_id] = '(unnamed)'
+            ET.SubElement(endEvents, 'endState', attrib={'name': text_mapping[Bpmn_id], 'eventType': 'None', 'isRegular': 'False'})
+    
+    
+  
+    activities = ET.SubElement(root, 'activities')
+    
+    for idx, activity_name in enumerate(data['BPMN_id']):
+        if activity_name.startswith('task'):
+            target_text = ' FINISH'
+            activity = ET.SubElement(activities, 'activity', attrib={'name': text_mapping.get(activity_name, activity_name), 'performer': ''})
+            endStates = ET.SubElement(activity, 'endStates')
+            current_text, next_text = connect(data, text_mapping, idx)
+            ET.SubElement(endStates, 'endState', attrib={'name': next_text, 'isRegular': 'True'})
+            ET.SubElement(activity, 'subActivities')
+            ET.SubElement(activity, 'subActivityFlows')
+            ET.SubElement(activity, 'messageFlows')
+    
+    activityFlows = ET.SubElement(root, 'activityFlows')
+    i=0
+    for i, link in enumerate(data['links']):
+        if link[0] is None and link[1] is not None and (data['BPMN_id'][i].split('_')[0] == 'event' or data['BPMN_id'][i].split('_')[0] == 'message'):
+            current_text, next_text = connect(data, text_mapping, i)
+            ET.SubElement(activityFlows, 'activityFlow', attrib={'startEvent': current_text, 'endState': '---', 'target': next_text, 'isMerging': 'False', 'isPredefined': 'True'})
+            i+=1
+        if link[0] is not None and link[1] is not None and data['BPMN_id'][i].split('_')[0] == 'task':
+            current_text, next_text = connect(data, text_mapping, i)
+            ET.SubElement(activityFlows, 'activityFlow', attrib={'activity': current_text, 'endState': '---', 'target': next_text, 'isMerging': 'False', 'isPredefined': 'True'})
+            i+=1
+    
+    ET.SubElement(root, 'participants')
+    
+    # Pretty print the XML
+    xml_str = ET.tostring(root, encoding='utf-8', method='xml')
+    pretty_xml_str = minidom.parseString(xml_str).toprettyxml(indent="    ")
+    
+    return pretty_xml_str