adjust transparency

gapp.py

@@ -126,7 +126,7 @@ h1 {
 """
 demo = gr.Blocks(css = css)
 with demo:
-    gr.Markdown("# 🌟 Process Dicovery 🌟")
+    gr.Markdown("# 🌟 Process Discovery 🌟")
     state = gr.State(value={})
     with gr.Row():
         upl_btn = gr.UploadButton(label="Upload", file_types = ['.csv'], file_count = "single")
@@ -160,18 +160,18 @@ with demo:
             pmchart = gr.Plot( label="Process Map")
             ve_btn.click( fn=get_process_map_variants, inputs = [ top_k_variant_selector, state], outputs=[ pmchart, state])
 
-        with gr.Tab('Process Explorer'):
-            pe_btn = gr.Button("Get Activities & Connections") 
-            with gr.Column():    
-                top_k_activity_selector = gr.Slider(0, 10, value=1, step=1, label="Activity", info="【pending】增減 Top Activity 數量（0: 全選）")
-                top_k_connection_selector = gr.Slider(0, 10, value=1, step=1, label="Connection", info="增減 Top Connection 數量（0: 全選）")
-            pmchart = gr.Plot( label="Process Map")
-            pe_btn.click( fn=get_process_map_activities_connections, inputs = [ top_k_activity_selector, top_k_connection_selector, state], outputs=[ pmchart, state])
-
-        with gr.Tab('Process Model'):
-            cc_btn = gr.Button("Get Process Model")
-            img = gr.Image( label="Process Model")
-            cc_btn.click( fn=get_process_map, inputs = [state], outputs=[ img, state])
+        # with gr.Tab('Process Explorer'):
+        #     pe_btn = gr.Button("Get Activities & Connections") 
+        #     with gr.Column():    
+        #         top_k_activity_selector = gr.Slider(0, 10, value=1, step=1, label="Activity", info="【pending】增減 Top Activity 數量（0: 全選）")
+        #         top_k_connection_selector = gr.Slider(0, 10, value=1, step=1, label="Connection", info="增減 Top Connection 數量（0: 全選）")
+        #     pmchart = gr.Plot( label="Process Map")
+        #     pe_btn.click( fn=get_process_map_activities_connections, inputs = [ top_k_activity_selector, top_k_connection_selector, state], outputs=[ pmchart, state])
+
+        # with gr.Tab('Process Model'):
+        #     cc_btn = gr.Button("Get Process Model")
+        #     img = gr.Image( label="Process Model")
+        #     cc_btn.click( fn=get_process_map, inputs = [state], outputs=[ img, state])
 
 
 if __name__ == "__main__":

japp.py

@@ -0,0 +1,43 @@
+import os
+
+import gradio as gr
+from dotenv import load_dotenv
+load_dotenv()
+
+
+html = '''
+<button id="my_btn" onclick="click_text()">Hello</button>
+'''
+
+# script = '''
+# function test(){
+#     let script = document.createElement('script');
+#     script.innerHTML = "function click_text(){alert('click')}";
+#     document.head.appendChild(script);   
+# }
+# '''
+script = '''
+import G6 from '@antv/g6';
+function click_text(){
+    const button = document.querySelector("#my_btn");
+    button.addEventListener("click", e => {
+        alert("Clicked")
+    })
+}
+'''
+
+
+demo = gr.Blocks(js = script)
+
+with demo:
+    gr.HTML(html)
+    # demo.load( js = script)
+    
+if __name__ == "__main__":
+    demo.launch( 
+        server_name="0.0.0.0",
+        server_port=int(os.environ.get("PORT")),
+        auth=( os.environ.get("USER_NAME"), os.environ.get("PASSWORD"))
+    )
+
+    # block.close()

model.py

@@ -154,7 +154,7 @@ def view_networkx( nx_graph, layout):
         mode='markers+text',
         hovertext = [n for n in nx_graph.nodes],
         textposition='top center',
-        marker=dict(size=5, color='LightSkyBlue', line=dict(width=2))
+        marker=dict(size=20, color='LightSkyBlue', line=dict(width=2),opacity=0.5)
     )
     
     # Create edge lines
@@ -188,8 +188,8 @@ def view_networkx( nx_graph, layout):
                 showarrow=True,
                 arrowhead=2,
                 arrowsize=1,
-                arrowwidth=2,
-                arrowcolor='Gray'
+                arrowwidth=5,  # 增加箭头的宽度
+                arrowcolor='rgba(128, 128, 128, 0.5)' 
             )
         )
     
@@ -212,5 +212,9 @@ def view_process_map( nx_graph, process_type: str = 'dfg', layout_type: str = 's
     """
     """
     layout = nx.nx_agraph.graphviz_layout( nx_graph, prog=layout_type)
+    # min_x, max_x = min([ node_loc[0] for node, node_loc in layout.items()]), max([ node_loc[0] for node, node_loc in layout.items()])
+    # min_y, max_y = min([ node_loc[1] for node, node_loc in layout.items()]), max([ node_loc[1] for node, node_loc in layout.items()])
+    # layout['#Start#'] = ( min_x, min_y)
+    # layout['#End#'] = (max_x, max_y)
     fig = view_networkx(nx_graph, layout)
     return fig