uparasha/GraphVisualUI
0
1 2import time3import re4import pandas as pd5import numpy as np6import torch7import torch.nn.functional as F8import graphviz as graphviz9import pydeck as pdk10import streamlit as st11 12from transformers import AutoTokenizer, AutoModel13from tokenizers import Tokenizer, AddedToken14from st_click_detector import click_detector15 16# Define selection options and sort alphabetically17 18st.graphviz_chart(''' 19graph G {20 fontname="Helvetica,Arial,sans-serif"21 node [fontname="Helvetica,Arial,sans-serif"]22 edge [fontname="Helvetica,Arial,sans-serif"]23 layout=fdp24 e25 subgraph clusterA {26 a -- b;27 subgraph clusterC {28 C -- D;29 }30 }31 subgraph clusterB {32 d -- f33 }34 d -- D35 e -- clusterB36 clusterC -- clusterB37}38''')39 40st.graphviz_chart(''' 41graph Transparency {42 layout=neato43 start=11 // empiric value to set orientation44 bgcolor="#0000ff11"45 node [shape=circle width=2.22 label="" style=filled]46 5 [color="#0000ff80"]47 6 [color="#ee00ee80"]48 1 [color="#ff000080"]49 2 [color="#eeee0080"]50 3 [color="#00ff0080"]51 4 [color="#00eeee80"]52 1 -- 2 -- 3 -- 4 -- 5 -- 6 -- 153 }54''')55 56st.graphviz_chart('''57digraph UML_Class_diagram {58 fontname="Helvetica,Arial,sans-serif"59 node [fontname="Helvetica,Arial,sans-serif"]60 edge [fontname="Helvetica,Arial,sans-serif"]61 labelloc="t"62 label="UML Class diagram demo"63 graph [splines=false]64 node [shape=record style=filled fillcolor=gray95]65 edge [arrowhead=vee style=dashed]66 Client -> Interface1 [xlabel=dependency]67 Client -> Interface268 edge [dir=back arrowtail=empty style=""]69 Interface1 -> Class1 [xlabel=inheritance]70 Interface2 -> Class1 [dir=none]71 Interface2 [label="" xlabel="Simple\ninterface" shape=circle]72 Interface1[label = <{<b>«interface» I/O</b> | + property<br align="left"/>...<br align="left"/>|+ method<br align="left"/>...<br align="left"/>}>]73 Class1[label = <{<b>I/O class</b> | + property<br align="left"/>...<br align="left"/>|+ method<br align="left"/>...<br align="left"/>}>]74 edge [dir=back arrowtail=empty style=dashed]75 Class1 -> System_1 [xlabel=implementation]76 System_1 [label = <{<b>System</b> | + property<br align="left"/>...<br align="left"/>|+ method<br align="left"/>...<br align="left"/>}>]77 "Shared resource" [label = <{<b>Shared resource</b> | + property<br align="left"/>...<br align="left"/>|+ method<br align="left"/>...<br align="left"/>}>]78 edge [dir=back arrowtail=diamond]79 "System_1" -> Subsystem_1 [xlabel="composition"]80 Subsystem_1[label = <{<b>Subsystem 1</b> | + property<br align="left"/>...<br align="left"/>|+ method<br align="left"/>...<br align="left"/>}>]81 Subsystem_2[label = <{<b>Subsystem 2</b> | + property<br align="left"/>...<br align="left"/>|+ method<br align="left"/>...<br align="left"/>}>]82 Subsystem_3[label = <{<b>Subsystem 3</b> | + property<br align="left"/>...<br align="left"/>|+ method<br align="left"/>...<br align="left"/>}>]83 "System_1" -> Subsystem_284 "System_1" -> Subsystem_385 edge [xdir=back arrowtail=odiamond]86 Subsystem_1 -> "Shared resource" [xlabel=aggregation]87 {Subsystem_2 Subsystem_3 } -> "Shared resource"88}89''')90 91 92 93st.graphviz_chart('''94digraph G {95 fontname="Helvetica,Arial,sans-serif"96 node [fontname="Helvetica,Arial,sans-serif"]97 edge [fontname="Helvetica,Arial,sans-serif"]98 subgraph cluster_1 {99 node [ style=filled,shape="box",fillcolor="antiquewhite:aquamarine" ]n5;100 node [ shape="ellipse",fillcolor="bisque4:blue2" ]n4;101 node [ shape="circle",fillcolor="cadetblue1:chocolate1" ]n3;102 node [ shape="diamond",fillcolor="crimson:cyan4" ]n2;103 node [ shape="triangle",fillcolor="deepskyblue2:firebrick" ]n1;104 node [ shape="pentagon",fillcolor="gray24:gray88" ]n0;105 label = "X11 Colors";106 }107 subgraph cluster_2 {108 node [ style=filled,shape="box",fillcolor="bisque:brown" ]n11;109 node [ shape="ellipse",fillcolor="green:darkorchid" ]n10;110 node [ shape="circle",fillcolor="deepskyblue:gold" ]n9;111 node [ shape="diamond",fillcolor="lightseagreen:orangered" ]n8;112 node [ shape="triangle",fillcolor="turquoise:salmon" ]n7;113 node [ shape="pentagon",fillcolor="snow:black" ]n6;114 label = "SVG Colors";115 }116 subgraph cluster_3 {117 node [ style=filled,shape="box",fillcolor="/accent3/1:/accent3/3" ]n17;118 node [ shape="ellipse",fillcolor="/accent4/1:/accent4/4" ]n16;119 node [ shape="circle",fillcolor="/accent5/1:/accent5/5" ]n15;120 node [ shape="diamond",fillcolor="/accent6/1:/accent6/6" ]n14;121 node [ shape="triangle",fillcolor="/accent7/1:/accent7/7" ]n13;122 node [ shape="pentagon",fillcolor="/accent8/1:/accent8/8" ]n12;123 label = "Brewer - accent";124 }125 subgraph cluster_4 {126 node [ style=filled,shape="box",fillcolor="/blues3/1:/blues3/2" ]n23;127 node [ shape="ellipse",fillcolor="/blues4/1:/blues4/3" ]n22;128 node [ shape="circle",fillcolor="/blues5/1:/blues5/4" ]n21;129 node [ shape="diamond",fillcolor="/blues6/1:/blues6/5" ]n20;130 node [ shape="triangle",fillcolor="/blues7/1:/blues7/6" ]n19;131 node [ shape="pentagon",fillcolor="/blues8/1:/blues8/7" ]n18;132 label = "Brewer - blues";133 }134n3 -> n9 -> n15 -> n21;135}136''')137 138st.graphviz_chart('''139digraph G {bgcolor="#0000FF44:#FF000044" gradientangle=90140 fontname="Helvetica,Arial,sans-serif"141 node [fontname="Helvetica,Arial,sans-serif"]142 edge [fontname="Helvetica,Arial,sans-serif"]143 subgraph cluster_0 {144 style=filled;145 color=lightgrey;146 fillcolor="darkgray:gold";147 gradientangle=0148 node [fillcolor="yellow:green" style=filled gradientangle=270] a0;149 node [fillcolor="lightgreen:red"] a1;150 node [fillcolor="lightskyblue:darkcyan"] a2;151 node [fillcolor="cyan:lightslateblue"] a3;152 a0 -> a1 -> a2 -> a3;153 label = "process #1";154 }155 subgraph cluster_1 {156 node [fillcolor="yellow:magenta" 157 style=filled gradientangle=270] b0;158 node [fillcolor="violet:darkcyan"] b1;159 node [fillcolor="peachpuff:red"] b2;160 node [fillcolor="mediumpurple:purple"] b3;161 b0 -> b1 -> b2 -> b3;162 label = "process #2";163 color=blue164 fillcolor="darkgray:gold";165 gradientangle=0166 style=filled;167 }168 start -> a0;169 start -> b0;170 a1 -> b3;171 b2 -> a3;172 a3 -> a0;173 a3 -> end;174 b3 -> end;175 start [shape=Mdiamond ,176 fillcolor="pink:red",177 gradientangle=90,178 style=radial];179 end [shape=Msquare,180 fillcolor="lightyellow:orange",181 style=radial,182 gradientangle=90];183}184''')185 186st.graphviz_chart('''187graph Color_wheel {188 graph [189 layout = neato190 label = "Color wheel, 33 colors.\nNeato layout"191 labelloc = b192 fontname = "Helvetica,Arial,sans-serif"193 start = regular194 normalize = 0195 ]196 node [197 shape = circle198 style = filled199 color = "#00000088"200 fontname = "Helvetica,Arial,sans-serif"201 ]202 edge [203 len = 2.7204 color = "#00000088"205 fontname = "Helvetica,Arial,sans-serif"206 ]207 subgraph Dark {208 node [fontcolor = white width = 1.4]209 center [width = 1 style = invis shape = point]210 center -- darkred [label = "0°/360°"]211 darkred [fillcolor = darkred]212 brown [fillcolor = brown]213 brown -- center [label = "30°"]214 olive [fillcolor = olive]215 olive -- center [label = "60°"]216 darkolivegreen [fillcolor = darkolivegreen fontsize = 10]217 darkolivegreen -- center [label = "90°"]218 darkgreen [fillcolor = darkgreen]219 darkgreen -- center [label = "120°"]220 "dark hue 0.416" [color = ".416 1 .6" fontcolor = white]221 "dark hue 0.416" -- center [label = "150°"]222 darkcyan [fillcolor = darkcyan]223 darkcyan -- center [label = "180°"]224 "dark hue 0.583" [color = ".583 1 .6" fontcolor = white]225 "dark hue 0.583" -- center [label = "210°"]226 darkblue [fillcolor = darkblue]227 darkblue -- center [label = "240°"]228 "dark hue 0.750" [color = ".750 1 .6"]229 "dark hue 0.750" -- center [label = "270°"]230 darkmagenta [fillcolor = darkmagenta]231 darkmagenta -- center [label = "300°"]232 "dark hue 0.916" [color = ".916 1 .6"]233 "dark hue 0.916" -- center [label = "330°"]234 }235 subgraph Tue {236 node [width = 1.3]237 "hue 0.083" -- brown238 "hue 0.083" [color = ".083 1 1"]239 "hue 0.125" [color = ".125 1 1"]240 "hue 0.166" -- olive241 "hue 0.166" [color = ".166 1 1"]242 "hue 0.208" [color = ".208 1 1"]243 "hue 0.250" -- darkolivegreen244 "hue 0.250" [color = ".250 1 1"]245 "hue 0.291" [color = ".291 1 1"]246 "hue 0.333" -- darkgreen247 "hue 0.333" [color = ".333 1 1"]248 "hue 0.375" [color = ".375 1 1"]249 "hue 0.416" -- "dark hue 0.416"250 "hue 0.416" [color = ".416 1 1"]251 "hue 0.458" [color = ".458 1 1"]252 "hue 0.500" -- darkcyan253 "hue 0.500" [color = ".500 1 1"]254 "hue 0.541" [color = ".541 1 1"]255 node [fontcolor = white]256 "hue 0.000" [color = ".000 1 1"]257 "hue 0.000" -- darkred258 "hue 0.041" [color = ".041 1 1"]259 "hue 0.583" -- "dark hue 0.583"260 "hue 0.583" [color = ".583 1 1"]261 "hue 0.625" [color = ".625 1 1"]262 "hue 0.666" -- darkblue263 "hue 0.666" [color = ".666 1 1"]264 "hue 0.708" [color = ".708 1 1"]265 "hue 0.750" -- "dark hue 0.750"266 "hue 0.750" [color = ".750 1 1"]267 "hue 0.791" [color = ".791 1 1"]268 "hue 0.833" -- darkmagenta269 "hue 0.833" [color = ".833 1 1"]270 "hue 0.875" [color = ".875 1 1"]271 "hue 0.916" -- "dark hue 0.916"272 "hue 0.916" [color = ".916 1 1"]273 "hue 0.958" [color = ".958 1 1"]274 edge [len = 1]275 "hue 0.000" -- "hue 0.041" -- "hue 0.083" -- "hue 0.125" -- "hue 0.166" -- "hue 0.208"276 "hue 0.208" -- "hue 0.250" -- "hue 0.291" -- "hue 0.333" -- "hue 0.375" -- "hue 0.416"277 "hue 0.416" -- "hue 0.458" -- "hue 0.500" --"hue 0.541" -- "hue 0.583" -- "hue 0.625"278 "hue 0.625" -- "hue 0.666" -- "hue 0.708" -- "hue 0.750" -- "hue 0.791" -- "hue 0.833"279 "hue 0.833" -- "hue 0.875" -- "hue 0.916" -- "hue 0.958" -- "hue 0.000"280 }281 subgraph Main_colors {282 node [width = 2 fontsize = 20]283 red [fillcolor = red fontcolor = white]284 orangered [fillcolor = orangered]285 orange [fillcolor = orange]286 gold [fillcolor = gold]287 yellow [fillcolor = yellow]288 yellowgreen [fillcolor = yellowgreen]289 deeppink [fillcolor = deeppink fontcolor = white]290 fuchsia [label = "fuchsia\nmagenta" fillcolor = fuchsia fontcolor = white]291 purple [fillcolor = purple fontcolor = white]292 blue [fillcolor = blue fontcolor = white]293 cornflowerblue [fillcolor = cornflowerblue]294 deepskyblue [fillcolor = deepskyblue]295 aqua [fillcolor = aqua label = "aqua\ncyan"]296 springgreen [fillcolor = springgreen]297 green [fillcolor = green]298 purple -- fuchsia -- deeppink -- red299 cornflowerblue -- blue -- purple300 cornflowerblue -- deepskyblue -- aqua [len = 1.7]301 aqua -- springgreen -- green -- yellowgreen -- yellow302 yellow -- gold -- orange -- orangered -- red [len = 1.6]303 orange -- "hue 0.083"304 deeppink -- "hue 0.916"305 deeppink -- "hue 0.875"306 red -- "hue 0.000"307 yellowgreen -- "hue 0.250"308 blue -- "hue 0.666"309 yellow -- "hue 0.166"310 gold -- "hue 0.125"311 green -- "hue 0.333"312 springgreen -- "hue 0.416"313 aqua -- "hue 0.500"314 cornflowerblue -- "hue 0.583"315 deepskyblue -- "hue 0.541"316 purple -- "hue 0.791"317 purple -- "hue 0.750"318 fuchsia -- "hue 0.833"319 }320 subgraph Light_colors {321 node [width = 2 fontsize = 20]322 node [shape = circle width = 1.8]323 edge [len = 2.1]324 pink [fillcolor = pink]325 pink -- red326 lightyellow [fillcolor = lightyellow]327 lightyellow -- yellow328 mediumpurple [fillcolor = mediumpurple]329 mediumpurple -- purple330 violet [fillcolor = violet]331 violet -- fuchsia332 hotpink [fillcolor = hotpink]333 hotpink -- deeppink334 "light hue 0.250" [color = ".250 .2 1"]335 "light hue 0.250" -- yellowgreen336 lightcyan [fillcolor = lightcyan]337 lightcyan -- aqua338 lightslateblue [fillcolor = lightslateblue]339 lightslateblue -- blue340 lightgreen [fillcolor = lightgreen]341 lightgreen -- green342 lightskyblue [fillcolor = lightskyblue]343 lightskyblue -- deepskyblue344 peachpuff [fillcolor = peachpuff]345 peachpuff -- orange346 "light hue 0.416" [color = ".416 .2 1"]347 "light hue 0.416" -- springgreen348 }349 subgraph Tints {350 node [width = 1]351 edge [len = 2.4]352 "hue 0 tint" -- pink353 "hue 0 tint" [color = "0 .1 1"]354 "hue 0.041 tint" [color = ".041 .1 1"]355 "hue 0.083 tint" -- peachpuff356 "hue 0.083 tint" [color = ".083 .1 1"]357 "hue 0.125 tint" [color = ".125 .1 1"]358 "hue 0.166 tint" -- lightyellow359 "hue 0.166 tint" [color = ".166 .1 1"]360 "hue 0.208 tint" [color = ".208 .1 1"]361 "hue 0.250 tint" -- "light hue 0.250"362 "hue 0.250 tint" [color = ".250 .1 1"]363 "hue 0.291 tint" [color = ".291 .1 1"]364 "hue 0.333 tint" -- lightgreen365 "hue 0.333 tint" [color = ".333 .1 1"]366 "hue 0.375 tint" [color = ".375 .1 1"]367 "hue 0.416 tint" -- "light hue 0.416"368 "hue 0.416 tint" [color = ".416 .1 1"]369 "hue 0.458 tint" [color = ".458 .1 1"]370 "hue 0.5 tint" -- lightcyan371 "hue 0.5 tint" [color = ".5 .1 1"]372 "hue 0.541 tint" -- lightskyblue373 "hue 0.541 tint" [color = ".541 .1 1"]374 "hue 0.583 tint" [color = ".583 .1 1"]375 "hue 0.625 tint" [color = ".625 .1 1"]376 "hue 0.666 tint" -- lightslateblue377 "hue 0.666 tint" [color = ".666 .1 1"]378 "hue 0.708 tint" [color = ".708 .1 1"]379 "hue 0.750 tint" -- mediumpurple380 "hue 0.750 tint" [color = ".750 .1 1"]381 "hue 0.791 tint" [color = ".791 .1 1"]382 "hue 0.833 tint" -- violet383 "hue 0.833 tint" [color = ".833 .1 1"]384 "hue 0.875 tint" [color = ".875 .1 1"]385 "hue 0.916 tint" -- hotpink386 "hue 0.916 tint" [color = ".916 .1 1"]387 "hue 0.958 tint" [color = ".958 .1 1"]388 edge [len = 2]389 "hue 0 tint" -- "hue 0.041 tint" -- "hue 0.083 tint" -- "hue 0.125 tint" -- "hue 0.166 tint" -- "hue 0.208 tint"390 "hue 0.208 tint" -- "hue 0.250 tint" -- "hue 0.291 tint" -- "hue 0.333 tint" -- "hue 0.375 tint" -- "hue 0.416 tint"391 "hue 0.416 tint" -- "hue 0.458 tint" -- "hue 0.5 tint" --"hue 0.541 tint" -- "hue 0.583 tint" -- "hue 0.625 tint"392 "hue 0.625 tint" -- "hue 0.666 tint" -- "hue 0.708 tint" -- "hue 0.750 tint" -- "hue 0.791 tint" -- "hue 0.833 tint"393 "hue 0.833 tint" -- "hue 0.875 tint" -- "hue 0.916 tint" -- "hue 0.958 tint" -- "hue 0 tint"394 }395 }396''')