from constants import css 

import gradio as gr 


block = gr.Blocks(css=css)

with block:
    gr.HTML(
        """
            <div style="text-align: center; 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:5px">
                Evaluate Schedulers with StableDiffusionPipeline 🧨
                </h1>
              </div>
              <p style="margin-bottom: 10px; font-size: 94%; line-height: 23px;">
                This Space allows you to quantitatively compare <a href=https://huggingface.co/docs/diffusers/using-diffusers/schedulers>different noise schedulers</a> with a <a href=https://huggingface.co/docs/diffusers/api/pipelines/stable_diffusion/overview>`StableDiffusionPipeline`</a>.
                <br>One of the applications of this Space could be to evaluate different schedulers for a certain Stable Diffusion checkpoint<br> for a fixed number of inference steps.
              </p>
            </div>
        """
    )
    with gr.Group():
        # with gr.Box():
        #     with gr.Row(elem_id="prompt-container").style(mobile_collapse=False, equal_height=True):
        #         with gr.Column():
        #           gr.Text(max_lines=1, placeholder="a painting of a dog")
      gr.HTML(
        """
          <div class="acknowledgments">
          <p><h4>How it works?</h4>
      <ul>
        <li> The evaluator first sets a seed and then generates the initial noise which is passed as the initial latent to start the image generation process. It is done to ensure fair comparison.</li>
        <li>This initial latent is used every time the pipeline is run (with different schedulers).</li>
        <li>To quantify the quality of the generated images we use:</li>
        <ul>
            <li><a href=https://en.wikipedia.org/wiki/Inception_score>Inception Score</a></li>
            <li><a href=https://arxiv.org/abs/2104.08718>Clip Score</a></li>
          </ul>
      </ul></p>
        <p><h4>Notes</h4>
        <ul>
          <li>The default scheduler associated with the provided checkpoint is always used for reporting the scores.</li>
        <li>Increasing both the number of images per prompt and the number of inference steps could quickly build up the inference queue and thus
  resulting in slowdowns.</li>
        </ul>
        </p>
                </div>
          """
      )


block.launch()