Files
Warlock-Studio-Universal/index.html
T
Iván Eduardo Chavez Ayub 1cbd90bf18 Update index.html
2025-11-07 05:02:32 -06:00

1104 lines
37 KiB
HTML
Raw Blame History

This file contains invisible Unicode characters
This file contains invisible Unicode characters that are indistinguishable to humans but may be processed differently by a computer. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
Dame una version mas profesional, funcional y estetica de esta pagina, hazla sumamente compleja interactiva y unica
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>Warlock-Studio — AI Upscale & Restoration Platform</title>
    <link rel="preconnect" href="https://fonts.googleapis.com" />
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
    <link
      href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;700&family=Oswald:wght@400;700&display=swap"
      rel="stylesheet"
    />
    <meta
      name="description"
      content="Warlock-Studio — High-performance unified platform for AI upscaling, restoration, denoising and frame interpolation."
    />
    <style>
      /* ============================================================
    WARLOCK-STUDIO — Banner Theme (Red, Gold, Silver)
    ============================================================ */
      /* === Color & Font Variables === */
      :root {
        --bg: #111111;
        --panel: #1c1c1c;
        --text: #e0e0e0; /* Silver from "Studio" */
        --muted: #a0a0a0;
        --gold: #ffd700; /* Gold from logo */
        --gold-light: #f0e68c;
        --red: #b31b1b; /* Red from "Warlock" */
        --silver: #d0d0d0; /* Silver from "Studio" */
        --border: rgba(255, 255, 255, 0.08);
        --shadow: 0 10px 35px rgba(0, 0, 0, 0.75);
        --glass: rgba(255, 255, 255, 0.02);
        --glow: 0 0 14px rgba(255, 215, 0, 0.25);
        --font-ui: "Roboto", system-ui, sans-serif;
        --font-headings: "Oswald", sans-serif;
        --max-width: 1200px;
      }
      /* === Global Reset === */
      * {
        box-sizing: border-box;
        margin: 0;
        padding: 0;
      }
      html {
        scroll-behavior: smooth;
      }
      body {
        background: var(--bg);
        color: var(--text);
        font-family: var(--font-ui);
        line-height: 1.65;
        -webkit-font-smoothing: antialiased;
        overflow-x: hidden;
      }
      /* === Header === */
      header.site-header {
        position: sticky;
        top: 0;
        z-index: 1000;
        background: rgba(17, 17, 17, 0.8); /* Darker bg */
        backdrop-filter: blur(8px);
        border-bottom: 1px solid var(--border);
      }
      .nav-inner {
        max-width: var(--max-width);
        margin: 0 auto;
        padding: 0.8rem 1rem;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 1rem;
      }
      .brand {
        display: flex;
        align-items: center;
        gap: 1rem;
        text-decoration: none;
      }
      .brand .title {
        font-family: var(--font-headings);
        letter-spacing: 1px;
        font-weight: 700;
        font-size: 1.5rem; /* Larger */
        text-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
        color: var(--red); /* "Warlock" color */
      }
      .brand .title span {
        color: var(--silver); /* "Studio" color */
      }
      /* === Navigation === */
      nav.primary-nav {
        display: flex;
        gap: 0.5rem;
      }
      nav.primary-nav a {
        color: var(--muted);
        font-family: var(--font-headings);
        font-weight: 400; /* Oswald 400 */
        font-size: 1rem;
        text-decoration: none;
        padding: 0.5rem 0.7rem;
        border-radius: 8px;
        transition: all 220ms ease;
        text-transform: uppercase;
      }
      nav.primary-nav a:hover {
        color: var(--gold);
        background: var(--glass);
        transform: translateY(-2px);
      }
      /* === Mobile Menu === */
      .hamburger {
        display: none;
        width: 42px;
        height: 42px;
        border-radius: 8px;
        background: var(--glass);
        border: 1px solid var(--border);
        align-items: center;
        justify-content: center;
        cursor: pointer;
      }
      .hamburger .bar {
        width: 20px;
        height: 2px;
        background: var(--gold);
        border-radius: 2px;
        position: relative;
      }
      .hamburger .bar::before,
      .hamburger .bar::after {
        content: "";
        position: absolute;
        width: 20px;
        height: 2px;
        left: 0;
        background: var(--gold);
        border-radius: 2px;
      }
      .hamburger .bar::before {
        top: -6px;
      }
      .hamburger .bar::after {
        top: 6px;
      }
      /* === Main Container === */
      .container {
        max-width: var(--max-width);
        margin: 0 auto;
        padding: 0 1rem;
        /* Global Centering */
        text-align: center;
      }
      /* === Hero Banner === */
      .hero {
        padding: 2rem 0;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 1.8rem;
        text-align: center;
      }
      .hero-banner {
        width: 100%;
        max-width: 1080px;
        border-radius: 14px;
        overflow: hidden;
        border: 1px solid var(--border);
        box-shadow: var(--shadow);
      }
      .hero-banner img {
        display: block;
        width: 100%;
        height: auto;
      }
      .hero-text {
        max-width: 800px;
      }
      .hero-text h1 {
        font-family: var(--font-headings);
        font-size: 2.8rem;
        letter-spacing: 0.8px;
        color: var(--red); /* "Warlock" */
      }
      .hero-text h1 span {
        color: var(--silver); /* "Studio" */
      }
      .hero-text p.lead {
        color: var(--text);
        font-size: 1.15rem;
        margin-top: 0.6rem;
      }
      .hero-text p.lead strong {
        color: var(--gold);
      }
      .hero-text p.lead a {
        color: var(--gold-light);
        text-decoration: none;
      }
      .hero-text p.lead a:hover {
        text-decoration: underline;
      }
      /* === Badges === */
      .badges {
        display: flex;
        flex-wrap: wrap;
        gap: 0.5rem;
        justify-content: center;
        margin-top: 1.5rem;
      }
      .badges img {
        transition: transform 200ms ease;
      }
      .badges img:hover {
        transform: scale(1.05);
      }
      /* === Content Sections === */
      section.content {
        padding: 3rem 0;
        border-bottom: 1px solid var(--border);
        /* Center content blocks */
        max-width: 900px;
        margin-left: auto;
        margin-right: auto;
      }
      section.content:last-of-type {
        border-bottom: none;
      }
      .content h2 {
        font-family: var(--font-headings);
        font-size: 2.2rem;
        color: var(--gold);
        margin-bottom: 0.5rem;
        text-transform: uppercase;
      }
      .content h3 {
        font-family: var(--font-headings);
        font-size: 1.5rem;
        color: var(--silver);
        margin-top: 1.5rem;
        margin-bottom: 0.5rem;
      }
      .content p,
      .content .muted {
        color: var(--muted);
        font-size: 1.05rem;
        margin-left: auto;
        margin-right: auto;
      }
      .content p a {
        color: var(--gold);
        text-decoration: none;
      }
      .content p a:hover {
        text-decoration: underline;
      }
      /* === Lists (Override Centering) === */
      .content ul,
      .content ol {
        margin-left: 1.5rem;
        padding-left: 0.5rem;
        margin-top: 1rem;
        text-align: left; /* Override */
      }
      .content li {
        margin-bottom: 0.5rem;
        color: var(--muted);
      }
      .content li strong {
        color: var(--text);
      }
      .clean-list {
        list-style: none;
        margin-left: 0;
        padding-left: 0;
      }
      .clean-list li {
        position: relative;
        padding-left: 1.7rem;
        margin-bottom: 0.8rem;
      }
      .clean-list li::before {
        content: "◈";
        position: absolute;
        left: 0;
        top: 0.05em;
        color: var(--gold);
        font-weight: 700;
        font-size: 1.1rem;
      }
      /* === Buttons === */
      .btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 0.6rem;
        padding: 0.7rem 1.3rem;
        border-radius: 10px;
        font-family: var(--font-headings);
        font-weight: 700;
        font-size: 1rem;
        text-decoration: none;
        transition: all 200ms ease;
        border: 1px solid transparent;
        cursor: pointer;
        text-transform: uppercase;
      }
      .btn.primary {
        background: var(--red);
        color: var(--text);
        border: 1px solid var(--red);
        box-shadow: 0 0 20px rgba(179, 27, 27, 0.25);
      }
      .btn.primary:hover {
        background: var(--gold);
        color: var(--bg);
        border-color: var(--gold);
        box-shadow: var(--glow);
        transform: translateY(-2px);
      }
      .btn.ghost {
        background: transparent;
        color: var(--silver);
        border: 1px solid var(--silver);
      }
      .btn.ghost:hover {
        color: var(--gold);
        border-color: var(--gold);
        background: var(--glass);
        transform: translateY(-2px);
      }
      .button-bar {
        display: flex;
        gap: 1rem;
        flex-wrap: wrap;
        margin-top: 1.5rem;
        align-items: center;
        justify-content: center; /* Center buttons */
      }
      .btn svg {
        opacity: 0.9;
      }
      /* === Download Area Specifics === */
      .download-links {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 1.5rem;
        margin-top: 1.5rem;
      }
      .download-links .badge-link img {
        max-width: 200px;
        transition: transform 200ms ease;
      }
      .download-links .badge-link:hover img {
        transform: scale(1.05);
      }
      /* === Image/Video Grids === */
      .grid-2 {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
        gap: 1.5rem;
        margin-top: 1.5rem;
      }
      .grid-2 img {
        width: 100%;
        border-radius: 10px;
        border: 1px solid var(--border);
        box-shadow: var(--shadow);
      }
      .media-container {
        display: flex;
        flex-direction: column;
        gap: 1.5rem;
        margin-top: 1.5rem;
        align-items: center;
      }
      .media-container video,
      .media-container img {
        max-width: 100%;
        width: 100%;
        max-width: 900px;
        border-radius: 10px;
        border: 1px solid var(--border);
        box-shadow: var(--shadow);
      }
      /* === Tables (Override Centering) === */
      .table-wrapper {
        overflow-x: auto;
        margin-top: 1.5rem;
        border: 1px solid var(--border);
        border-radius: 10px;
        background: var(--panel);
        box-shadow: 0 5px 20px rgba(0, 0, 0, 0.5);
        text-align: left; /* Override */
      }
      table {
        width: 100%;
        border-collapse: collapse;
      }
      table th,
      table td {
        padding: 0.9rem 1.1rem;
        border-bottom: 1px solid var(--border);
        vertical-align: top;
        font-size: 0.95rem;
      }
      table th {
        background: var(--glass);
        font-family: var(--font-headings);
        letter-spacing: 0.5px;
        font-weight: 700;
        color: var(--red); /* Red headers */
      }
      table tbody tr:last-child td {
        border-bottom: 0;
      }
      table tbody tr {
        transition: background 150ms ease;
      }
      table tbody tr:hover {
        background: rgba(255, 255, 255, 0.03);
      }
      table td {
        color: var(--muted);
      }
      table td strong {
        color: var(--text);
      }
      table td a {
        color: var(--muted);
        text-decoration: none;
      }
      table td a:hover {
        color: var(--gold);
        text-decoration: underline;
      }
      /* === Code (Override Centering) === */
      /* Special override for structure section */
      #structure {
        max-width: 1200px; /* Wider */
        text-align: left; /* Override */
      }
      #structure p {
        text-align: left; /* Override */
      }
      pre {
        background: var(--panel);
        border: 1px solid var(--border);
        border-radius: 10px;
        padding: 1.2rem;
        overflow-x: auto;
        font-family: "Courier New", Courier, monospace;
        font-size: 0.9rem;
        line-height: 1.5;
        margin-top: 1.5rem;
        box-shadow: inset 0 2px 8px rgba(0, 0, 0, 0.5);
        color: #b3cce6;
        text-align: left; /* Override */
      }
      pre code {
        font-family: inherit;
        text-align: left; /* Override */
      }
      /* === Footer === */
      footer.site-footer {
        border-top: 1px solid var(--border);
        margin-top: 3rem;
        padding: 2rem 1rem;
        color: var(--muted);
        font-size: 0.9rem;
      }
      footer .footer-inner {
        max-width: var(--max-width);
        margin: 0 auto;
        text-align: center;
      }
      footer a {
        color: var(--gold);
        text-decoration: none;
      }
      footer a:hover {
        text-decoration: underline;
      }
      /* === Responsive === */
      @media (max-width: 920px) {
        nav.primary-nav {
          display: none;
        }
        .hamburger {
          display: flex;
        }
        .hero-text h1 {
          font-size: 2.2rem;
        }
        .content h2 {
          font-size: 1.8rem;
        }
      }
      @media (max-width: 520px) {
        .hero-text h1 {
          font-size: 1.8rem;
        }
        .hero-text p.lead {
          font-size: 1rem;
        }
        .content p,
        .content .muted {
          font-size: 0.95rem;
        }
        .btn {
          width: 100%;
          justify-content: center;
        }
        .grid-2 {
          grid-template-columns: 1fr;
        }
        .brand .title {
          font-size: 1.2rem;
        }
      }
    </style>
  </head>
  <body>
    <header class="site-header" role="banner">
      <div class="nav-inner">
        <a href="#home" class="brand" aria-label="Warlock-Studio Home">
          <div class="title">Warlock<span>-Studio</span></div>
        </a>
        <nav class="primary-nav" aria-label="Primary navigation">
          <a href="#home">Home</a>
          <a href="#download">Download</a>
          <a href="#previews">Previews</a>
          <a href="#comparison">Comparison</a>
          <a href="#features">Features</a>
          <a href="#requirements">Requirements</a>
          <a href="#models">Models</a>
          <a href="#contribute">Contribute</a>
          <a href="#license">License</a>
        </nav>
        <button
          class="hamburger"
          aria-label="Open menu"
          onclick="toggleMobileMenu(event)"
        >
          <span class="bar"></span>
        </button>
      </div>
    </header>
    <main class="container">
      <section class="hero" id="home" aria-labelledby="hero-title">
        <div class="hero-banner">
          <img src="Assets/banner.png"/>
        </div>
<div class="button-bar" style="margin-top: 1.8rem">
      <a
        href="https://github.com/Ivan-Ayub97/Warlock-Studio"
        target="_blank"
        rel="noopener"
        class="btn primary"
      >
        <svg
          width="20"
          height="20"
          viewBox="0 0 24 24"
          fill="currentColor"
          xmlns="http://www.w3.org/2000/svg"
        >
          <path
            d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297 24 5.67 18.627.297 12 .297z"
          ></path>
        </svg>
        View on GitHub
      </a>
    </div>
    </div>
<div class="badges" aria-hidden="true">
  <!-- Badge de Build -->
  <a
    href="https://github.com/Ivan-Ayub97/Warlock-Studio/releases"
    target="_blank"
    rel="noopener"
  >
    <img
      src="https://img.shields.io/badge/Build-Stable_Release-0A192F?style=for-the-badge&logo=github&logoColor=FFD700"
      alt="Build Status"
    />
  </a>
  <!-- Badge de Versión -->
  <a
    href="https://github.com/Ivan-Ayub97/Warlock-Studio/releases/tag/4.2.1"
    target="_blank"
    rel="noopener"
  >
    <img
      src="https://img.shields.io/badge/Version-4.2.1-FF4500?style=for-the-badge&logo=git&logoColor=white"
      alt="Version"
    />
  </a>
  <!-- Badge de Licencia -->
  <a href="LICENSE" target="_blank" rel="noopener">
    <img
      src="https://img.shields.io/badge/License-MIT-6A0DAD?style=for-the-badge&logo=open-source-initiative&logoColor=white"
      alt="License"
    />
  </a>
  <!-- Badge de Descargas -->
  <a
    href="https://github.com/Ivan-Ayub97/Warlock-Studio/releases"
    target="_blank"
    rel="noopener"
  >
    <img
      src="https://img.shields.io/github/downloads/Ivan-Ayub97/Warlock-Studio/total?style=for-the-badge&color=FFD700&logo=download&logoColor=black"
      alt="Downloads"
    />
  </a>
  <!-- Badge de Plataforma -->
  <a href="#">
    <img
      src="https://img.shields.io/badge/Platform-Windows%2011-0078D6?style=for-the-badge&logo=windows11&logoColor=white"
      alt="Platform"
    />
  </a>
  <!-- Badge de Python -->
  <a href="https://www.python.org/" target="_blank" rel="noopener">
    <img
      src="https://img.shields.io/badge/Python-3.10+-3776AB?style=for-the-badge&logo=python&logoColor=FFD700"
      alt="Python"
    />
  </a>
  <!-- Badge de Issues (Nuevo) -->
  <a
    href="https://github.com/Ivan-Ayub97/Warlock-Studio/issues"
    target="_blank"
    rel="noopener"
  >
    <img
      src="https://img.shields.io/github/issues/Ivan-Ayub97/Warlock-Studio?style=for-the-badge&color=FF0303&logo=github&logoColor=white"
      alt="Issues"
    />
  </a>
  <!-- Badge de Last Commit (Nuevo) -->
  <a
    href="https://github.com/Ivan-Ayub97/Warlock-Studio/commits/main"
    target="_blank"
    rel="noopener"
  >
    <img
      src="https://img.shields.io/github/last-commit/Ivan-Ayub97/Warlock-Studio?style=for-the-badge&color=2E8B57&logo=git&logoColor=white"
      alt="Last Commit"
    />
  </a>
</div>
        <div class="hero-text">
          <p class="lead">
            Inspired by
            <a href="https://github.com/Djdefrag" target="_blank" rel="noopener"
              >Djdefrag</a
            >
            tools such as <strong>QualityScaler</strong> and
            <strong>FluidFrames</strong>, Warlock-Studio provides a unified,
            high-performance platform for
            <strong
              >upscaling, restoration, denoising, and frame
              interpolation</strong
            >.
          </p>
        </div>
      </section>
<section id="download" class="content" aria-labelledby="download-title">
  <h2 id="download-title">Download Installer</h2>
  <p class="muted">
    Installers and releases are published for Windows (64-bit).
  </p>
  <div class="download-links">
    <div
      style="
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: center;
        align-items: center;
        gap: 1.5rem;
      "
    >
      <div>
        <div
          class="sf-root"
          data-id="3880091"
          data-badge="oss-rising-star-black"
          data-metadata="achievement=oss-rising-star"
          style="width: 152px"
        >
<a
  href="https://sourceforge.net/projects/warlock-studio/"
  target="_blank"
  rel="noopener"
>
  <img
    src="rsc/oss-rising-star-black.svg"
    alt="Warlock-Studio on SourceForge"
    width="200"
    style="display:block; margin:auto; margin-bottom:10px;"
  />
</a>
      <a
        href="https://github.com/Ivan-Ayub97/Warlock-Studio/releases/download/v4.2.1/Warlock-Studio-v4.2.1-Setup.exe"
        target="_blank"
        rel="noopener"
        class="badge-link"
      >
        <img src="rsc/GitHub_Logo_WS.png" alt="Download from GitHub" />
      </a>
    </div>
  <div class="button-bar">
    <a
      href="https://github.com/Ivan-Ayub97/Warlock-Studio/releases/download/v4.2.1/Warlock-Studio_Manual.pdf"
      target="_blank"
      rel="noopener"
      class="btn ghost"
    >
      Download Manual (PDF)
    </a>
  </div>
</section>
      <section id="previews" class="content" aria-labelledby="previews-title">
        <h2 id="previews-title">Interface Previews</h2>
        <div class="grid-2">
          <img src="rsc/Capture.png" alt="Main interface preview" />
          <img src="rsc/CaptureCONSOLE.png" alt="Console preview" />
        </div>
      </section>
      <section
        id="comparison"
        class="content"
        aria-labelledby="comparison-title"
      >
        <h2 id="comparison-title">Quality Comparison</h2>
        <p class="muted">
          Side-by-side samples and short demo videos demonstrating restoration
          and upscaling results.
        </p>
<div class="media-container">
  <video controls>
    <source
      src="https://github.com/user-attachments/assets/c72f389d-827e-49b9-91b7-fd13e5b59f22"
      type="video/webm"
    />
    Your browser does not support the video tag.
  </video>
  <video controls>
    <source
      src="https://github.com/user-attachments/assets/6695cce2-f42f-4955-8b43-56ec6d7b0bd2"
      type="video/webm"
    />
    Your browser does not support the video tag.
  </video>
          <img src="rsc/image_comparison.png" alt="Still image comparison" />
        </div>
      </section>
      <section id="features" class="content" aria-labelledby="features-title">
        <h2 id="features-title">Key Features</h2>
        <ul class="clean-list">
          <li>
            <strong>AI Upscaling & Restoration</strong> Utilize
            <strong>Real-ESRGAN, BSRGAN, and IRCNN</strong> models for
            denoising, super-resolution, and detail recovery.
          </li>
          <li>
            <strong>Face Restoration (GFPGAN)</strong> Recover facial details
            from low-resolution or blurry images and video frames.
          </li>
          <li>
            <strong>Frame Interpolation (RIFE)</strong> Smooth motion or
            generate slow-motion content with
            <strong>2×, 4×, or 8× interpolation</strong>.
          </li>
          <li>
            <strong>Advanced Hardware Acceleration</strong> Intelligent
            provider selection prioritizes <strong>CUDA</strong>, falls back to
            <strong>DirectML</strong>, and finally <strong>CPU</strong> for
            maximum compatibility and performance.
          </li>
          <li>
            <strong>Batch Processing</strong> Process multiple media files
            simultaneously, saving time and effort.
          </li>
          <li>
            <strong>Custom Workflows</strong> Fine-grained control over
            models, resolution, output formats, and quality parameters.
          </li>
          <li>
            <strong>Open-Source & Extensible</strong> Fully MIT licensed, for
            contributors and developers.
          </li>
        </ul>
      </section>
      <section
        id="requirements"
        class="content"
        aria-labelledby="requirements-title"
      >
        <h2 id="requirements-title">System Requirements</h2>
        <ul class="clean-list">
          <li><strong>OS:</strong> Windows 11 or higher (64-bit)</li>
          <li><strong>RAM:</strong> 8GB+ recommended</li>
          <li>
            <strong>GPU:</strong> NVIDIA (for CUDA), AMD, or Intel GPU with
            up-to-date drivers recommended
          </li>
          <li>
            <strong>Storage:</strong> Sufficient free space for input and
            processed media
          </li>
        </ul>
      </section>
      <section id="models" class="content" aria-labelledby="models-title">
        <h2 id="models-title">Model Comparison</h2>
        <p class="muted">
          Common models bundled or supported by Warlock-Studio and their typical
          use cases.
        </p>
        <div class="table-wrapper">
          <table aria-label="Model Comparison">
            <thead>
              <tr>
                <th>Model File</th>
                <th>Use Case</th>
                <th>Speed</th>
                <th>Quality</th>
                <th>Notes</th>
              </tr>
            </thead>
            <tbody>
              <tr>
                <td><strong>GFPGANv1.4</strong></td>
                <td>Face restoration</td>
                <td>High</td>
                <td>High</td>
                <td>Optimal for portraits</td>
              </tr>
              <tr>
                <td><strong>BSRGANx2</strong></td>
                <td>2× upscale + denoising</td>
                <td>Medium</td>
                <td>Very High</td>
                <td>Suitable for lightly degraded media</td>
              </tr>
              <tr>
                <td><strong>BSRGANx4</strong></td>
                <td>4× upscale + denoising</td>
                <td>Low</td>
                <td>Very High</td>
                <td>For heavily degraded content</td>
              </tr>
              <tr>
                <td><strong>RIFE</strong></td>
                <td>Frame interpolation</td>
                <td>High</td>
                <td>High</td>
                <td>Smooth motion, slow-motion support</td>
              </tr>
              <tr>
                <td><strong>RIFE-Lite</strong></td>
                <td>Lightweight interpolation</td>
                <td>Very High</td>
                <td>Medium</td>
                <td>Faster, lower resource usage</td>
              </tr>
              <tr>
                <td><strong>RealESRGANx4</strong></td>
                <td>General 4× upscaling</td>
                <td>Medium</td>
                <td>High</td>
                <td>Balanced performance</td>
              </tr>
              <tr>
                <td><strong>RealESRNetx4</strong></td>
                <td>Subtle restoration</td>
                <td>Medium</td>
                <td>High</td>
                <td>Preserves natural image texture</td>
              </tr>
              <tr>
                <td><strong>RealSRx4_Anime</strong></td>
                <td>Anime / line-art enhancement</td>
                <td>Medium</td>
                <td>High</td>
                <td>Sharp edges for 2D art</td>
              </tr>
              <tr>
                <td><strong>IRCNN_L</strong></td>
                <td>Light denoising</td>
                <td>High</td>
                <td>Medium</td>
                <td>Mild artifact removal</td>
              </tr>
              <tr>
                <td><strong>IRCNN_M</strong></td>
                <td>Medium denoising</td>
                <td>High</td>
                <td>Medium</td>
                <td>Stronger artifact cleanup</td>
              </tr>
            </tbody>
          </table>
        </div>
      </section>
      <section
        id="contribute"
        class="content"
        aria-labelledby="contribute-title"
      >
        <h2 id="contribute-title">Contributions</h2>
        <p class="muted">We welcome contributions from the community:</p>
        <ol>
          <li><strong>Fork</strong> the repository on <strong>GitHub.</strong></li>
          <li><strong>Create a branch</strong> for your feature or bug fix.</li>
          <li>
            <strong>Submit a Pull Request</strong> with a detailed description
            and testing notes.
          </li>
        </ol>
        <p style="margin-top: 1.5rem">
          Contact:
          <a href="mailto:negroayub97@gmail.com">negroayub97@gmail.com</a>
        </p>
      </section>
      <section id="license" class="content" aria-labelledby="license-title">
        <h2 id="license-title">License & Technologies</h2>
        </p>
        <h3>Integrated Technologies & Licenses</h3>
        <div class="table-wrapper">
          <table aria-label="Integrated Technologies">
            <thead>
              <tr>
                <th>Technology</th>
                <th>License</th>
                <th>Author / Maintainer</th>
                <th>Source</th>
              </tr>
            </thead>
            <tbody>
              <tr>
                <td>QualityScaler</td>
                <td>MIT</td>
                <td>
                  <a href="https://github.com/Djdefrag" target="_blank"
                    >Djdefrag</a
                  >
                </td>
                <td>
                  <a
                    href="https://github.com/Djdefrag/QualityScaler"
                    target="_blank"
                    >GitHub</a
                  >
                </td>
              </tr>
              <tr>
                <td>FluidFrames</td>
                <td>MIT</td>
                <td>
                  <a href="https://github.com/Djdefrag" target="_blank"
                    >Djdefrag</a
                  >
                </td>
                <td>
                  <a
                    href="https://github.com/Djdefrag/FluidFrames"
                    target="_blank"
                    >GitHub</a
                  >
                </td>
              </tr>
              <tr>
                <td>Real-ESRGAN</td>
                <td>BSD 3-Clause / Apache</td>
                <td>Xintao Wang</td>
                <td>
                  <a
                    href="https://github.com/xinntao/Real-ESRGAN"
                    target="_blank"
                    >GitHub</a
                  >
                </td>
              </tr>
              <tr>
                <td>GFPGAN</td>
                <td>Apache 2.0</td>
                <td>TencentARC / Xintao Wang</td>
                <td>
                  <a href="https://github.com/TencentARC/GFPGAN" target="_blank"
                    >GitHub</a
                  >
                </td>
              </tr>
              <tr>
                <td>RIFE</td>
                <td>Apache 2.0</td>
                <td>hzwer</td>
                <td>
                  <a
                    href="https://github.com/megvii-research/ECCV2022-RIFE"
                    target="_blank"
                    >GitHub</a
                  >
                </td>
              </tr>
              <tr>
                <td>BSRGAN</td>
                <td>Apache 2.0</td>
                <td>Kai Zhang</td>
                <td>
                  <a href="https://github.com/cszn/BSRGAN" target="_blank"
                    >GitHub</a
                  >
                </td>
              </tr>
              <tr>
                <td>IRCNN</td>
                <td>BSD / Mixed</td>
                <td>Kai Zhang</td>
                <td>
                  <a href="https://github.com/cszn/IRCNN" target="_blank"
                    >GitHub</a
                  >
                </td>
              </tr>
              <tr>
                <td>ONNX Runtime</td>
                <td>MIT</td>
                <td>Microsoft</td>
                <td>
                  <a
                    href="https://github.com/microsoft/onnxruntime"
                    target="_blank"
                    >GitHub</a
                  >
                </td>
              </tr>
              <tr>
                <td>FFmpeg</td>
                <td>LGPL / GPL</td>
                <td>FFmpeg Team</