app_header.html

<div style="text-align: center; max-width: 650px; margin: 0 auto;">
    <div
      style="
        display: inline-flex;
        align-items: center;
        gap: 0.8rem;
        font-size: 1.75rem;
      "
    >
      <svg
        width="0.65em"
        height="0.65em"
        viewBox="0 0 115 115"
        fill="none"
        xmlns="http://www.w3.org/2000/svg"
      >
        <rect width="23" height="23" fill="white"></rect>
        <rect y="69" width="23" height="23" fill="white"></rect>
        <rect x="23" width="23" height="23" fill="#AEAEAE"></rect>
        <rect x="23" y="69" width="23" height="23" fill="#AEAEAE"></rect>
        <rect x="46" width="23" height="23" fill="white"></rect>
        <rect x="46" y="69" width="23" height="23" fill="white"></rect>
        <rect x="69" width="23" height="23" fill="black"></rect>
        <rect x="69" y="69" width="23" height="23" fill="black"></rect>
        <rect x="92" width="23" height="23" fill="#D9D9D9"></rect>
        <rect x="92" y="69" width="23" height="23" fill="#AEAEAE"></rect>
        <rect x="115" y="46" width="23" height="23" fill="white"></rect>
        <rect x="115" y="115" width="23" height="23" fill="white"></rect>
        <rect x="115" y="69" width="23" height="23" fill="#D9D9D9"></rect>
        <rect x="92" y="46" width="23" height="23" fill="#AEAEAE"></rect>
        <rect x="92" y="115" width="23" height="23" fill="#AEAEAE"></rect>
        <rect x="92" y="69" width="23" height="23" fill="white"></rect>
        <rect x="69" y="46" width="23" height="23" fill="white"></rect>
        <rect x="69" y="115" width="23" height="23" fill="white"></rect>
        <rect x="69" y="69" width="23" height="23" fill="#D9D9D9"></rect>
        <rect x="46" y="46" width="23" height="23" fill="black"></rect>
        <rect x="46" y="115" width="23" height="23" fill="black"></rect>
        <rect x="46" y="69" width="23" height="23" fill="black"></rect>
        <rect x="23" y="46" width="23" height="23" fill="#D9D9D9"></rect>
        <rect x="23" y="115" width="23" height="23" fill="#AEAEAE"></rect>
        <rect x="23" y="69" width="23" height="23" fill="black"></rect>
      </svg>
      <h1 style="font-weight: 900; margin-bottom: 7px; margin-top: 7px">
        Stable Diffusion x Segmentation Masking 😷
      </h1>
    </div>
    <p style="margin-bottom: 10px; font-size: 94%">
      Stable Diffusion is a state of the art text-to-image model that generates
      images from text. Finetuning the model can make it suitable for inpainting
      when provided with a starting image, mask, and text prompt. 
    </p>
    <p style="margin-bottom: 10px; font-size: 94%">
      However, depending on how complex the area you want to mask is, creating
      the mask can be tedious. This demo incorporates a segmentation model to
      generate per-class masks for you, which can be combined to produce a final
      diffusion mask. 
    </p>
  </div>