Files
Warlock-Studio-Universal/index.html
T
Iván Eduardo Chavez Ayub 17bb620edc Update index.html
2025-11-04 11:10:31 -06:00

1257 lines
38 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters
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.
<!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</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>