<!doctype html>
<html>
  <head>
    <title>rgthree's comfy: Workflow Link Fixer</title>
    <style>
      html, body {
      }
      html {
        font-size: 100%;
        overflow-y: scroll;
        -webkit-text-size-adjust: 100%;
        -ms-text-size-adjust: 100%;
        box-sizing: border-box
      }

      *, *:before, *:after {
        box-sizing: inherit
      }

      body {
        background: #222;
        font-family: Arial, sans-serif;
        font-size: calc(16 * 0.0625rem);
        font-weight: 400;
        margin: 0;
        color: #ffffff;
        padding-bottom: 64px;
        display: flex;
      }

      .box, figure, picture {
        display: flex;
        flex-direction: column;
        align-items: center;
      }

      .box {
        margin: 32px auto;
        max-width: 720px;
        padding: 16px 16px 32px;
        background: rgba(125,125,125,0.33);
        box-shadow: 0px 8px 10px rgba(0,0,0,0.85);
        border-radius: 8px;
      }
      h1 {
        margin-top: 0;
      }
      .box > * {
        text-align: center;
      }
      .box > p {
        margin: 0 0 .6em;
        text-align: left;
        line-height: 1.25;
      }

      picture > img {
        display: block;
        height: 256px;
        min-width: 256px;
        border: 10px dashed rgba(125,125,125,0.66);
        border-radius: 32px;
        object-fit: contain;
        pointer-events: none;

      }
      figcaption {
        opacity: 0.66;
        padding: 4px;
        font-size: calc(11 * 0.0625rem);
      }

      .-has-file picture > img {
        border-color: transparent;
        border-radius: 32px;
      }

      .output {
        margin: 8px 8px 32px;
        border-radius: 4px;
        border: 1px solid rgba(125,125,125,0.66);
        padding: 4px 8px;
        min-width: 80%;
      }

      .output:empty {
        display: none;
      }

      .btn-fix {
        display: none;
        cursor: pointer;
        font-size: calc(24 * 0.0625rem);
      }
      .-has-fixable-results .btn-fix {
        display: inline-block;
      }

    </style>
  </head>
  <body>

    <div class="box">
      <h1>rgthree's Workflow Link Fixer</h1>
      <p>Early versions of the reroute node would occasionally leave behind stale node-linking data in the graph, which could sometimes cause erratic workflow loading. This tool will look at the metadata and attempt to fix these errors.</p>
      <p>Drag and drop a comfy-generated image or workflow json into this window to check its serialized links and fix.</p>

      <figure>
        <picture>
          <img class="output-image" />
        </picture>
        <figcaption></figcaption>
      </figure>

      <div class="output"></div>

      <button class="btn-fix">Fix & Save new workflow</button>

    </div>

    <script type="module">
      import {LinkPage} from './link_page.js';
      new LinkPage();
    </script>
  </body>
</html>