File size: 3,814 Bytes
3f22414 e6167a7 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 | <!DOCTYPE html>
<html lang="en" data-theme="dark">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="color-scheme" content="dark">
<title>AI Tools</title>
<link rel="icon" type="image/svg+xml" href="assets/favicon.svg">
<link rel="icon" type="image/png" sizes="32x32" href="assets/favicon-32x32.png">
<link rel="apple-touch-icon" sizes="180x180" href="assets/favicon-180x180.png">
<link rel="stylesheet" href="vendor/picocss/pico.min.css">
<link rel="stylesheet" href="vendor/font-awesome/css/all.min.css">
<link rel="stylesheet" href="assets/shared.css">
</head>
<body>
<nav class="container-fluid">
<ul>
<li class="brand"><strong>up<img src="assets/favicon.svg" alt="" class="brand-icon">draft</strong></li>
</ul>
<ul>
<li><a href="#" data-feature="upscaler" aria-current="page">
<i class="fas fa-expand"></i> Upscaler
</a></li>
<li><a href="#" data-feature="bg-removal">
<i class="fas fa-eraser"></i> Background Removal
</a></li>
<li><a href="https://nickcelestin.com/applications/aitools/index.html" target="_blank" rel="noopener">
<i class="fas fa-arrow-up-right-from-square"></i> Full version
</a></li>
</ul>
</nav>
<main class="container-fluid">
<section id="feature-upscaler">
<upscaler-app></upscaler-app>
</section>
<section id="feature-bg-removal" style="display: none;">
<bg-removal-app></bg-removal-app>
</section>
</main>
<script src="vendor/idiomorph/idiomorph.min.js"></script>
<script src="vendor/onnxruntime-web/ort.all.min.js"></script>
<script type="importmap">
{
"imports": {
"lib/morph": "./lib/morph.js",
"lib/fetch-progress": "./lib/fetch-progress.js",
"lib/canvas": "./lib/canvas.js",
"lib/onnx-meta": "./lib/onnx-meta.js",
"lib/backend-events": "./lib/backend-events.js",
"lib/backend": "./lib/backend.js",
"components/image-drop-zone": "./components/image-drop-zone.js",
"components/status-bar": "./components/status-bar.js",
"components/compare-slider": "./components/compare-slider.js",
"components/image-cropper": "./components/image-cropper.js",
"components/view-mode-controls": "./components/view-mode-controls.js"
}
}
</script>
<script type="module">
import './features/upscaler/upscaler-app.js';
import './features/bg-removal/bg-removal-app.js';
function activateFeature(link) {
const feature = link.dataset.feature;
document.querySelectorAll('nav a[data-feature]').forEach(l => {
if (l === link) l.setAttribute('aria-current', 'page');
else l.removeAttribute('aria-current');
});
document.querySelectorAll('[id^="feature-"]').forEach(el => {
el.style.display = el.id === 'feature-' + feature ? '' : 'none';
});
localStorage.setItem('aitools_feature', feature);
}
document.querySelectorAll('nav a[data-feature]').forEach(link => {
link.addEventListener('click', (e) => {
e.preventDefault();
activateFeature(link);
});
});
const savedFeature = localStorage.getItem('aitools_feature');
const savedLink = savedFeature && document.querySelector(`nav a[data-feature="${savedFeature}"]`);
if (savedLink) activateFeature(savedLink);
</script>
</body>
</html>
|