header.html

<div style="text-align: center; max-width: 650px; margin: 0 auto;">
  <div style="
        display: inline-flex;
        gap: 0.8rem;
        font-size: 1.75rem;
        justify-content: center;
        margin-bottom: 10px;
      ">
    <h1 style="font-weight: 900; align-items: center; margin-bottom: 7px; margin-top: 20px;">
      Paint by Example 🎨
    </h1>
  </div>
  <div>
    <p style="align-items: center; margin-bottom: 7px;">
      Paint by Example, upload a source image and draw a mask for what you want to replace with a example image. 
    </p>
    <p style="align-items: center; margin-bottom: 7px;">
      This demo currently only supports square source image. It will raise an error if the souce image is not square.
    </p>
  </div>
</div>