Spaces:
Running
Running
| <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> | |