code: def model_align_display(model1, model2, lines, middle_sep=150):
      render1 = complete_render_model_graph(model1)
      render2 = complete_render_model_graph(model2)
      shape1, shape2 = render1["shape"], render2["shape"]
      inner1, inner2 = render1["svg_inner"], render2["svg_inner"]
      W = max(shape1[0], shape2[0]) + 20
      H = shape1[1] + middle_sep + shape2[1] + 20
  
      paths = []
      for (name1, name2), weight in list(lines.items()):
          box1, box2 = get_box(render1, name1), get_box(render2, name2)
          start = [(box1[0][0] + box1[0][1]) / 2.0, shape1[1] + 15 + 10]
          end = [
              (box2[0][0] + box2[0][1]) / 2.0,
              shape1[1] + middle_sep - 10,
          ]
          d = "M %s C %s %s %s" % (
              p(start),
              p(start, dy=50),
              p(end, dy=-50),
              p(end),
          )
          style = (
              "stroke: hsla(20, %s%%, 70%%, %s%%); stroke-width: %spx; "
              % (100 * (0.5 + weight / 2.0), 100 * weight, 3 * weight)
          )
          info = (
              'data-tf-src="%s" data-tf-dest="%s" class="comparison-edge" '
              % (name1, name2)
          )
          path = '<path d="%s" style="%s" %s ></path>' % (
              d,
              style,
              info,
          )
          paths.append(path)
  
      svg = """
      <script src="https://d3js.org/d3.v5.min.js"></script>
      <style>
        .node, .background {
          fill: hsla(213, 80%%, 85%%,1);
        }
        .node:hover, .background:hover {
          fill: hsla(213, 60%%, 70%%, 1);
        }
        .background {
          opacity: 0.7;
        }
        .comparison-edge {
          fill: none;
          stroke-linecap: round;
          transition: opacity 0.2s;
        }
        .tooltip {
          position: absolute;
          background: #F8F8FA;
          padding: 6px;
          border-radius: 4px;
          transition: opacity 0.2s, left 0.2s, top 0.2s;
        }
      </style>
  
      <svg width=%s height=%s>
  
      <g transform="translate(0, 0)" id="compare-top" class="model">
        %s
      </g>
      <g>
        %s
      </g>
      <g transform="translate(0, %s)" id="compare-bottom" class="model">
        %s
      </g>
      </svg>
  
      <script>
      var edges = d3.selectAll(".comparison-edge");
  
      function hide_edges_top() {{
        console.log("test")
        var node = d3.select(this);
        var name = node.attr("data-tf-name") || node.attr("data-group-tf-name");
        edges.each(function(d) {
          var pres = d3.select(this);
          var src = pres.attr("data-tf-src");
          pres.style("opacity", (src == name)? 1.0 : 0.0)
        })
      }}
  
      function hide_edges_bottom() {{
        var node = d3.select(this);
        var name = node.attr("data-tf-name") || node.attr("data-group-tf-name");
        edges.each(function(d) {
          var pres = d3.select(this);
          var src = pres.attr("data-tf-dest");
          pres.style("opacity", (src == name)? 1.0 : 0.0)
        })
      }}
  
      d3.selectAll("#compare-top .node, #compare-top .background")
        .on("mouseover.edges", hide_edges_top)
        .on("mouseout.edges", () => edges.style("opacity", "1.0") );
  
      d3.selectAll("#compare-bottom .node, #compare-bottom .background")
        .on("mouseover.edges", hide_edges_bottom)
        .on("mouseout.edges", () => edges.style("opacity", "1.0") );
      </script>
      """ % (
          W,
          H,
          inner1,
          "\n".join(paths),
          shape1[1] + middle_sep,
          inner2,
      )
  
      _display_html(svg)
  
file_path: lucid/lucid/scratch/pretty_graphs/visualizations.py
imports: import numpy
  import tensorflow
  import json
  import lucid.modelzoo.vision_models
  from lucid.misc.io.showing import _image_url, _display_html
  from lucid.scratch.pretty_graphs.format_graph import complete_render_model_graph
  from lucid.misc.io import show, load
label_desc: Use image node_id 6 for calling a global function with example usage: model_align_display(model1, model2, lines, middle_sep) without return types