Blame for index.html

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Photo Enhancer: clean up noisy, soft and compressed photos · MegaPotato AI upscaler (megapotato.app)</title>
  <meta name="description" content="Photo enhancer demo of the MegaPotato AI upscaler (megapotato.app). Restore detail in noisy, soft or compressed photos at the original size or 2× larger, and compare before and after side by side.">
  <meta name="referrer" content="strict-origin">
  <meta http-equiv="Content-Security-Policy" content="default-src 'self'; script-src 'self' https://challenges.cloudflare.com; frame-src https://challenges.cloudflare.com; connect-src 'self' https://demo-api.megapotato.app; img-src 'self' data: blob: https://demo-api.megapotato.app https://*.hf.co https://*.huggingface.co; style-src 'self' 'unsafe-inline'; font-src 'self' https://*.hf.co; base-uri 'none'; form-action 'none'; object-src 'none'">
  <meta name="color-scheme" content="light dark">
  <meta property="og:title" content="Photo Enhancer · MegaPotato AI upscaler (megapotato.app)">
  <meta property="og:description" content="Restore detail in noisy, soft or compressed photos. Same size, or 2× larger.">
  <link rel="preload" href="assets/fonts/mp-sans-regular.woff2" as="font" type="font/woff2" crossorigin>
  <link rel="preload" href="assets/fonts/mp-sans-bold.woff2" as="font" type="font/woff2" crossorigin>
  <script src="theme.js"></script>
  <link rel="stylesheet" href="style.css">
  <script type="module" src="ui.js"></script>
</head>
<body>
<div class="page">

  <header class="masthead">
    <div class="masthead-row">
      <h1>Photo Enhancer</h1>
      <a class="site" href="https://megapotato.app/?s=hf-photo-enhancer" target="_blank" rel="noopener">megapotato.app<span class="arrow" aria-hidden="true">↗</span></a>
    </div>
    <p class="lead">Restores detail in noisy, soft or compressed photos. Same size, or 2× larger. It works with what is in the photo instead of drawing new faces or text.</p>
    <p class="proof">In <a href="https://megapotato.app/blog/best-ai-image-upscalers-2026?s=hf-photo-enhancer#scoreboard" target="_blank" rel="noopener">our blind test of 18 AI upscalers</a> it turned none of 67 faces into a different person. Creative upscalers changed up to three in four.</p>
    <p class="brand">A demo of the <a href="https://megapotato.app/?s=hf-photo-enhancer" target="_blank" rel="noopener">MegaPotato AI upscaler</a> · megapotato.app</p>
  </header>

  <div id="notice" class="notice" role="status" hidden></div>

  <section class="bench" aria-label="Enhance your photo">
    <div class="bench-row">
      <div class="pick">
        <label id="drop" class="pick-button">
          <input id="file" type="file" accept="image/png,image/jpeg,image/webp">
          <span id="file-label">Choose photo</span>
        </label>
        <span class="pick-meta">
          <img id="drop-thumb" class="pick-thumb" alt="" hidden>
          <span id="file-meta" class="pick-text"><span class="note-mouse">or drop it anywhere on the page · </span>PNG, JPEG, WebP up to 50 MB</span>
        </span>
      </div>

      <fieldset class="seg" aria-label="Output size">
        <label class="seg-option"><input type="radio" name="mode" value="1" checked><span>Original size</span></label>
        <label class="seg-option"><input type="radio" name="mode" value="2"><span>2×</span></label>
      </fieldset>

      <button id="run" class="primary run" type="button" disabled>Enhance</button>

      <p id="quota" class="quota">Preview only · 2 free runs a day</p>
    </div>

    <div class="bench-line">
      <p id="plan" class="plan"></p>
      <div id="status" class="status" aria-live="polite" hidden></div>
    </div>
    <div id="turnstile" class="turnstile"></div>
  </section>

  <section id="viewer-wrap" class="viewer" data-inspect="false" aria-label="Before and after">
    <div class="viewer-head">
      <span id="before-label" class="label-before">Before</span>
      <div class="label-after">
        <span>After</span>
        <div class="zoom" role="group" aria-label="Zoom">
          <button type="button" data-zoom="fit" aria-pressed="true">Fit</button>
          <button type="button" data-zoom="1" aria-pressed="false">100%</button>
          <button type="button" data-zoom="2" aria-pressed="false">200%</button>
          <button id="inspect" class="inspect" type="button" aria-pressed="false">Inspect</button>
        </div>
      </div>
    </div>

    <div id="viewer" class="diptych">
      <figure class="pane" data-side="before">
        <div class="pane-frame"><img alt="Before" draggable="false"><p class="pane-empty" hidden>The original is not kept after a reload.</p></div>
      </figure>
      <figure class="pane" data-side="after">
        <div class="pane-frame"><img alt="After" draggable="false"></div>
      </figure>
      <div class="loading" hidden><span></span></div>
    </div>

    <div class="viewer-foot">
      <p id="caption" class="caption"></p>
      <p class="hint"><span class="note-mouse">Drag either frame to look around. Ctrl + scroll zooms, double-click shows 100%.</span><span class="note-touch">Tap Inspect to pan and pinch both frames together.</span></p>
    </div>
  </section>

  <section class="gallery" aria-label="Examples">
    <p class="gallery-head">Examples, real results</p>
    <ul id="examples" class="examples"></ul>
  </section>

  <footer class="colophon">
    <nav class="colophon-links" aria-label="More">
      <a href="https://megapotato.app/developers?s=hf-photo-enhancer" target="_blank" rel="noopener">API</a>
      <a href="https://megapotato.app/blog/best-ai-image-upscalers-2026?s=hf-photo-enhancer" target="_blank" rel="noopener">Benchmark</a>
      <a href="https://megapotato.app/pricing?s=hf-photo-enhancer" target="_blank" rel="noopener">Pricing</a>
    </nav>
    <details id="about" class="about">
      <summary>About this demo, your images and privacy</summary>
      <div class="about-body">
        <p>A free demo of the <a href="https://megapotato.app/?s=hf-photo-enhancer" target="_blank" rel="noopener">MegaPotato AI upscaler</a>. Your image goes to the MegaPotato API, is processed on MegaPotato's GPUs and comes back to this page. The model weights are not published. Through the API the same model enhances at the original size (<code>upscale=1</code>) or enlarges ×2, ×4 and ×8.</p>
        <h2 id="privacy">Your images and privacy</h2>
        <p>Images you enhance are sent through a small MegaPotato service on Cloudflare to the MegaPotato API and handled under its <a href="https://megapotato.app/privacy" target="_blank" rel="noopener">Privacy Policy</a> and <a href="https://megapotato.app/terms" target="_blank" rel="noopener">Terms</a>. Every image is reviewed automatically before processing, and images that may not meet our content rules are refused. The original is deleted once the run finishes and the result about an hour after the upload. The demo asks the Hugging Face page only whether you are logged in (not who you are) and counts runs per network address, stored only as a keyed hash; Cloudflare processes it to run the service and the Turnstile check that helps limit automated abuse. Results open only inside this demo page. Please upload only images you have the right to use.</p>
        <h2>Example images</h2>
        <ul id="credits" class="credits"></ul>
        <p>Demo code: MIT license. Font: MP Sans, a subset of Liberation Sans (SIL Open Font License, <a href="assets/fonts/OFL.txt">text</a>).</p>
      </div>
    </details>
  </footer>
</div>
<div id="dropzone" class="dropzone" aria-hidden="true"><span>Drop the photo to enhance it</span></div>
</body>
</html>