use sveltekit

Akatuoro · Apr 23, 2024 · b4d501b · b4d501b
1 parent 07e241c
commit b4d501b
Show file tree

Hide file tree

Showing 19 changed files with 217 additions and 199 deletions.
diff --git a/.github/workflows/gh-pages.yml b/.github/workflows/gh-pages.yml
@@ -0,0 +1,51 @@
+# Simple workflow for deploying static content to GitHub Pages
+name: Deploy static content to Pages
+
+on:
+  # Runs on pushes targeting the default branch
+  push:
+    branches: ['main', 'master']
+
+  # Allows you to run this workflow manually from the Actions tab
+  workflow_dispatch:
+
+# Sets the GITHUB_TOKEN permissions to allow deployment to GitHub Pages
+permissions:
+  contents: read
+  pages: write
+  id-token: write
+
+# Allow one concurrent deployment
+concurrency:
+  group: 'pages'
+  cancel-in-progress: true
+
+jobs:
+  # Single deploy job since we're just deploying
+  deploy:
+    environment:
+      name: github-pages
+      url: ${{ steps.deployment.outputs.page_url }}
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+      - name: Set up Node
+        uses: actions/setup-node@v4
+        with:
+          node-version: 20
+          cache: 'npm'
+      - name: Install dependencies
+        run: npm ci
+      - name: Build
+        run: npm run build
+      - name: Setup Pages
+        uses: actions/configure-pages@v4
+      - name: Upload artifact
+        uses: actions/upload-pages-artifact@v3
+        with:
+          # Upload dist folder
+          path: './dist'
+      - name: Deploy to GitHub Pages
+        id: deployment
+        uses: actions/deploy-pages@v4
diff --git a/.github/workflows/manual.yml b/.github/workflows/manual.yml
diff --git a/.gitignore b/.gitignore
@@ -1,3 +1,14 @@
+.DS_Store
+node_modules
+/build
+/.svelte-kit
+/package
+.env
+.env.*
+!.env.example
+vite.config.js.timestamp-*
+vite.config.ts.timestamp-*
+
 celeba/
 __pycache__
 *.png

diff --git a/.npmrc b/.npmrc
@@ -0,0 +1 @@
+engine-strict=true
diff --git a/jsconfig.json b/jsconfig.json
@@ -0,0 +1,19 @@
+{
+	"extends": "./.svelte-kit/tsconfig.json",
+	"compilerOptions": {
+		"allowJs": true,
+		"checkJs": true,
+		"esModuleInterop": true,
+		"forceConsistentCasingInFileNames": true,
+		"resolveJsonModule": true,
+		"skipLibCheck": true,
+		"sourceMap": true,
+		"strict": true,
+		"moduleResolution": "bundler"
+	}
+	// Path aliases are handled by https://kit.svelte.dev/docs/configuration#alias
+	// except $lib which is handled by https://kit.svelte.dev/docs/configuration#files
+	//
+	// If you want to overwrite includes/excludes, make sure to copy over the relevant includes/excludes
+	// from the referenced tsconfig.json - TypeScript does not merge them in
+}
diff --git a/package.json b/package.json
@@ -4,12 +4,11 @@
   "description": "Generate icons and logos with machine learning",
   "main": "index.js",
   "scripts": {
-    "test": "echo \"Error: no test specified\" && exit 1",
-    "bundle": "npm run build && mkdir -p build/dist && cp dist/* build/dist && cp index.html build/index.html",
-    "build": "rollup -c",
-    "watch": "rollup -c -w",
-    "dev": "run-p watch start",
-    "start": "serve"
+    "dev": "vite dev",
+		"build": "vite build",
+		"preview": "vite preview",
+		"check": "svelte-kit sync && svelte-check --tsconfig ./jsconfig.json",
+		"check:watch": "svelte-kit sync && svelte-check --tsconfig ./jsconfig.json --watch"
   },
   "repository": {
     "type": "git",
@@ -27,19 +26,23 @@
     "url": "https://github.com/Akatuoro/icon-gan/issues"
   },
   "homepage": "https://github.com/Akatuoro/icon-gan#readme",
+  "type": "module",
   "dependencies": {
-    "@tensorflow/tfjs": "^2.0.1",
+    "@tensorflow/tfjs": "^4.18.0",
     "npm-run-all": "^4.1.5",
-    "rollup-plugin-svelte": "^6.1.1",
-    "svelte": "^3.29.6"
+    "rollup-plugin-svelte": "^7.2.0",
+    "svelte": "^4.2.15"
   },
-  "devDependencies": {
-    "@rollup/plugin-commonjs": "^14.0.0",
-    "@rollup/plugin-node-resolve": "^8.4.0",
-    "comlink": "^4.3.0",
-    "file-saver": "^2.0.2",
-    "rollup": "^2.22.2",
-    "rollup-plugin-terser": "^6.1.0",
-    "serve": "^11.3.2"
-  }
+	"devDependencies": {
+		"@tensorflow/tfjs": "^4.18.0",
+		"comlink": "^4.4.1",
+		"file-saver": "^2.0.5",
+		"@sveltejs/adapter-auto": "^3.0.0",
+		"@sveltejs/kit": "^2.0.0",
+		"@sveltejs/vite-plugin-svelte": "^3.0.0",
+		"svelte": "^4.2.7",
+		"svelte-check": "^3.6.0",
+		"typescript": "^5.0.0",
+		"vite": "^5.0.3"
+	}
 }
diff --git a/rollup.config.js b/rollup.config.js
diff --git a/serve.json b/serve.json
diff --git a/src/App.svelte b/src/App.svelte
diff --git a/src/app.d.ts b/src/app.d.ts
@@ -0,0 +1,13 @@
+// See https://kit.svelte.dev/docs/types#app
+// for information about these interfaces
+declare global {
+	namespace App {
+		// interface Error {}
+		// interface Locals {}
+		// interface PageData {}
+		// interface PageState {}
+		// interface Platform {}
+	}
+}
+
+export {};
diff --git a/index.html → src/app.html b/index.html → src/app.html
@@ -1,12 +1,13 @@
-<!DOCTYPE html>
+<!doctype html>
+<html lang="en">
 <head>
 
 	<meta charset="utf-8">
 	<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+	<link rel="icon" href="%sveltekit.assets%/favicon.png" />
+	%sveltekit.head%
 
     <title></title>
-
-    <script async src="dist/bundle.js"></script>
 
     <style>
         html,
@@ -26,7 +27,6 @@
             top: 0px;
             width: 100%;
             height: 100%;
-            background-image: url("public/icons.png");
             background-position: center;
             background-color: #051A33;
         }
@@ -263,7 +263,7 @@
         function load() {
             const overlay = document.getElementById("overlay")
             overlay.hidden = false
-            location.hash = '#model'
+            location.href = '/model'
         }
 
         function reset() {
@@ -331,58 +331,8 @@
         }
     </script>
 </head>
-<body onload="onload()">
-    <div id="home">
-        <div class="container">
-            <div class="container-content" style="position: absolute;">
-                <div class="header">
-                    <div style="text-align: left;"><noscript>Enable JavaScript!</noscript></div>
-                    <div></div>
-                    <div style="text-align: right;">
-                        <div id="support" hidden style="color: gray; animation: fadein 0.5s;">
-                            <span id="webgl">WebGL</span>
-                            <span id="plus"> + </span>
-                            <span id="worker">Worker</span>
-                        </div>
-                    </div>
-                </div>
-
-                <h1>Icon GAN</h1>
-                <div class="flex-center btn-container">
-                    <div style="position: absolute;">
-                        <button class="btn" onclick="load()">
-                            <svg width="180px" height="60px" viewBox="0 0 180 60" class="border">
-                                <polyline points="179,1 179,59 1,59 1,1 179,1" class="bg-line" />
-                                <polyline points="179,1 179,59 1,59 1,1 179,1" class="hl-line" />
-                            </svg>
-                            <span>LOAD<br><span>(16MB)</span></span>
-                        </button>
-                    </div>
-                </div>
-
-                <div class="footer">
-                    <div style="text-align: left;"><a href="https://github.com/Akatuoro/icon-gan">GitHub</a></div>
-                    <div style="text-align: center;"><a onclick="document.getElementById('aboutDialog').showModal()">About</a></div>
-                    <div style="text-align: right;">License: CC-BY-NC</div>
-                </div>
-            </div>
-        </div>
-    </div>
-    <div id="overlay" hidden="true" onclick="reset()">
-        <div class="container">
-            <div class="lds-grid"><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div></div>
-        </div>
-    </div>
-    <dialog id="aboutDialog" onclick="dialogCloseHandler(event)">
-        <p>Icon GAN is a <a href="https://en.wikipedia.org/wiki/Generative_adversarial_network">generative adversarial network</a> for interactively generating favicons.</p>
-        <p>
-            Usually designers work together with clients to iterate on icon designs, presenting drafts and iterating on the final design.
-            This icon generator can help provide inspiration to the artist and client or serve as base for the iterative process.
-        </p>
-        <p>The interface facilitates exploring the latent space of the trained model. It features exploring a 2d subspace and selectively choosing directions - representing style and form -, interpolating between 2 or 3 icons and moving generated icons and their respective latent space representations between different tools via drag & drop.</p>
-        <br>
-        <menu>
-            <button onclick="document.getElementById('aboutDialog').close()">Close</button>
-        </menu>
-    </dialog>
+<body onload="onload()" data-sveltekit-preload-data="hover">
+    <div style="display: contents">%sveltekit.body%</div>
 </body>
+</html>
+<!DOCTYPE html>
diff --git a/src/exploration/index.js b/src/exploration/index.js
@@ -1,6 +1,7 @@
 import { Exploration } from './exploration';
+import workerURL from './worker?url';
 import * as Comlink from 'comlink'
-window.Comlink = Comlink
+// window.Comlink = Comlink
 
 
 let _useWorker
@@ -25,7 +26,7 @@ export const useWorker = () => {
 export const explore = async () => {
     if (useWorker()) {
         console.info('using worker')
-        const exploration = Comlink.wrap(new Worker('dist/exploration-worker.js'))
+        const exploration = Comlink.wrap(new Worker(workerURL, {type: 'module'}))
         return exploration
     }
     else {

diff --git a/src/main.js b/src/main.js