diff --git a/docs/index.html b/docs/index.html
new file mode 100644
index 0000000..518eb5e
--- /dev/null
+++ b/docs/index.html
@@ -0,0 +1,1249 @@
+<!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" alt="Warlock-Studio banner" />
+        </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"
+            >Warlock-Studio</a
+          >
+        </div>
+        <script
+          src="https://sourceforge.net/badge/dim/3880091/oss-rising-star-black"
+          defer
+        ></script>
+      </div>
+
+      <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</td>
+                <td>
+                  <a href="https://ffmpeg.org" target="_blank">Official Site</a>
+                </td>
+              </tr>
+              <tr>
+                <td>ExifTool</td>
+                <td>Artistic License</td>
+                <td>Phil Harvey</td>
+                <td>
+                  <a href="https://exiftool.org/" target="_blank"
+                    >Official Site</a
+                  >
+                </td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+      </section>
+    </main>
+
+    <footer class="site-footer" role="contentinfo">
+      <div class="footer-inner">
+<footer class="footer">
+  <p>© 2025 <strong>Iván Eduardo Chavez Ayub</strong> — Licensed under the <a href="https://opensource.org/licenses/MIT" target="_blank" rel="noopener noreferrer">MIT License</a>.</p>
+  <p class="muted">Additional terms and attributions can be found in <code>NOTICE.md</code>.</p>
+</footer>
+
+          Hosted on
+          <a href="https://pages.github.com/" target="_blank" rel="noopener"
+            >GitHub Pages</a
+          >.
+        </p>
+      </div>
+    </footer>
+
+    <script>
+      function toggleMobileMenu(e) {
+        const existingOverlay = document.getElementById("mobile-nav-overlay");
+        if (existingOverlay) {
+          existingOverlay.remove();
+          return;
+        }
+
+        const overlay = document.createElement("div");
+        overlay.id = "mobile-nav-overlay";
+        overlay.style.position = "fixed";
+        overlay.style.top = "70px"; // Height of header
+        overlay.style.left = "0";
+        overlay.style.right = "0";
+        overlay.style.bottom = "0";
+        overlay.style.background =
+          "linear-gradient(180deg, rgba(17,17,17,0.9), rgba(17,17,17,0.98))";
+        overlay.style.zIndex = 1400;
+        overlay.style.padding = "1.5rem";
+        overlay.style.overflowY = "auto";
+        overlay.style.backdropFilter = "blur(6px)";
+        overlay.style.animation = "fadeIn 300ms ease";
+
+        const list = document.createElement("div");
+        list.style.display = "flex";
+        list.style.flexDirection = "column";
+        list.style.gap = "0.6rem";
+        list.style.maxWidth = "420px";
+        list.style.margin = "0 auto";
+
+        const createLink = (txt, href) => {
+          const a = document.createElement("a");
+          a.href = href;
+          a.textContent = txt;
+          a.style.display = "block";
+          a.style.padding = "12px 18px";
+          a.style.borderRadius = "10px";
+          a.style.background = "rgba(255,255,255,0.02)";
+          a.style.border = "1px solid var(--border)";
+          a.style.color = "#e6eef6";
+          a.style.textDecoration = "none";
+          a.style.fontFamily = "var(--font-headings)";
+          a.style.fontWeight = "700";
+          a.style.fontSize = "1.1rem";
+          a.style.textTransform = "uppercase";
+          a.style.textAlign = "center";
+          a.addEventListener("click", () => {
+            setTimeout(() => {
+              if (document.body.contains(overlay)) {
+                document.body.removeChild(overlay);
+              }
+            }, 150);
+          });
+          return a;
+        };
+
+        // --- UPDATED LINKS (English) ---
+        list.appendChild(createLink("Home", "#home"));
+        list.appendChild(createLink("Download", "#download"));
+        list.appendChild(createLink("Previews", "#previews"));
+        list.appendChild(createLink("Comparison", "#comparison"));
+        list.appendChild(createLink("Features", "#features"));
+        list.appendChild(createLink("Requirements", "#requirements"));
+        list.appendChild(createLink("Models", "#models"));
+        list.appendChild(createLink("Structure", "#structure"));
+        list.appendChild(createLink("Contribute", "#contribute"));
+        list.appendChild(createLink("License", "#license"));
+
+        overlay.appendChild(list);
+
+        overlay.addEventListener("click", (ev) => {
+          if (ev.target === overlay) document.body.removeChild(overlay);
+        });
+
+        document.body.appendChild(overlay);
+
+        if (!document.getElementById("mobile-nav-styles")) {
+          const styleSheet = document.createElement("style");
+          styleSheet.id = "mobile-nav-styles";
+          styleSheet.innerText = `
+            @keyframes fadeIn {
+              from { opacity: 0; transform: translateY(-10px); }
+              to { opacity: 1; transform: translateY(0); }
+            }
+          `;
+          document.head.appendChild(styleSheet);
+        }
+      }
+
+      // smooth in-view animation
+      const io = new IntersectionObserver(
+        (entries) => {
+          entries.forEach((e) => {
+            if (e.isIntersecting) {
+              e.target.style.transform = "translateY(0)";
+              e.target.style.opacity = "1";
+              e.target.style.transition = "all 600ms cubic-bezier(.2,.9,.3,1)";
+              io.unobserve(e.target);
+            }
+          });
+        },
+        { threshold: 0.05 }
+      );
+
+      document
+        .querySelectorAll("section.content, section.hero")
+        .forEach((s) => {
+          s.style.transform = "translateY(15px)";
+          s.style.opacity = "0";
+          io.observe(s);
+        });
+    </script>
+  </body>
+</html>

Model File	Use Case	Speed	Quality	Notes
GFPGANv1.4	Face restoration	High	High	Optimal for portraits
BSRGANx2	2× upscale + denoising	Medium	Very High	Suitable for lightly degraded media
BSRGANx4	4× upscale + denoising	Low	Very High	For heavily degraded content
RIFE	Frame interpolation	High	High	Smooth motion, slow-motion support
RIFE-Lite	Lightweight interpolation	Very High	Medium	Faster, lower resource usage
RealESRGANx4	General 4× upscaling	Medium	High	Balanced performance
RealESRNetx4	Subtle restoration	Medium	High	Preserves natural image texture
RealSRx4_Anime	Anime / line-art enhancement	Medium	High	Sharp edges for 2D art
IRCNN_L	Light denoising	High	Medium	Mild artifact removal
IRCNN_M	Medium denoising	High	Medium	Stronger artifact cleanup
Technology	License	Author / Maintainer	Source
QualityScaler	MIT	+ Djdefrag +	+ GitHub +
FluidFrames	MIT	+ Djdefrag +	+ GitHub +
Real-ESRGAN	BSD 3-Clause / Apache	Xintao Wang	+ GitHub +
GFPGAN	Apache 2.0	TencentARC / Xintao Wang	+ GitHub +
RIFE	Apache 2.0	hzwer	+ GitHub +
BSRGAN	Apache 2.0	Kai Zhang	+ GitHub +
IRCNN	BSD / Mixed	Kai Zhang	+ GitHub +
ONNX Runtime	MIT	Microsoft	+ GitHub +
FFmpeg	LGPL / GPL	FFmpeg Team	+ Official Site +
ExifTool	Artistic License	Phil Harvey	+ Official Site +