| <!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> |
|
|
