add loading page & deployed to github pages

.github/workflows/deploy.yml

@@ -0,0 +1,31 @@
+name: Build and Deploy to GitHub Pages
+
+on:
+  push:
+    branches:
+      - main  # Change to your default branch if different
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: Checkout Repository
+        uses: actions/checkout@v3
+
+      - name: Setup Node.js
+        uses: actions/setup-node@v3
+        with:
+          node-version: '23'
+
+      - name: Install Dependencies
+        run: npm install
+
+      - name: Build Project
+        run: npm run build
+
+      - name: Deploy to GitHub Pages
+        uses: peaceiris/actions-gh-pages@v3
+        with:
+          github_token: ${{ secrets.GITHUB_TOKEN }}
+          publish_dir: ./build  # Directory to publish

README.md

@@ -1,47 +1,49 @@
-# Svelte + Vite
+# Face Blit Web
 
-This template should help get you started developing with Svelte in Vite.
+This project brings [Face Blit](https://github.com/AnetaTexler/FaceBlit) to a web application for demonstration purposes.
 
-## Recommended IDE Setup
+## Usage
 
-[VS Code](https://code.visualstudio.com/) + [Svelte](https://marketplace.visualstudio.com/items?itemName=svelte.svelte-vscode).
+1. **Clone the repository:**
 
-## Need an official Svelte framework?
+    ```bash
+    git clone https://github.com/Yushu-He/FaceBlit-Web.git
+    cd FaceBlit-Web
+    ```
 
-Check out [SvelteKit](https://github.com/sveltejs/kit#readme), which is also powered by Vite. Deploy anywhere with its serverless-first approach and adapt to various platforms, with out of the box support for TypeScript, SCSS, and Less, and easily-added support for mdsvex, GraphQL, PostCSS, Tailwind CSS, and more.
+2. **Install dependencies:**
 
-## Technical considerations
+    ```bash
+    npm install
+    ```
 
-**Why use this over SvelteKit?**
+3. **Run the development server:**
 
-- It brings its own routing solution which might not be preferable for some users.
-- It is first and foremost a framework that just happens to use Vite under the hood, not a Vite app.
+    ```bash
+    npm run dev
+    ```
 
-This template contains as little as possible to get started with Vite + Svelte, while taking into account the developer experience with regards to HMR and intellisense. It demonstrates capabilities on par with the other `create-vite` templates and is a good starting point for beginners dipping their toes into a Vite + Svelte project.
+## Technologies Used
 
-Should you later need the extended capabilities and extensibility provided by SvelteKit, the template has been structured similarly to SvelteKit so that it is easy to migrate.
+- [Svelte](https://svelte.dev/)
+- [WebAssembly (Wasm)](https://webassembly.org/)
+- [MediaPipe](https://github.com/google/mediapipe)
+- [IDB](https://github.com/jakearchibald/idb)
+- [Font Awesome](https://fontawesome.com/)
+- [Vite](https://vitejs.dev/)
 
-**Why `global.d.ts` instead of `compilerOptions.types` inside `jsconfig.json` or `tsconfig.json`?**
+## Note
 
-Setting `compilerOptions.types` shuts out all other types not explicitly listed in the configuration. Using triple-slash references keeps the default TypeScript setting of accepting type information from the entire workspace, while also adding `svelte` and `vite/client` type information.
+In the main branch, there is a TypeScript native version, but due to time constraints, it is only partially completed and has low performance.
 
-**Why include `.vscode/extensions.json`?**
+## Conclusion
 
-Other templates indirectly recommend extensions via the README, but this file allows VS Code to prompt the user to install the recommended extension upon opening the project.
+This project was developed as the final project for the University of Michigan EECS442 course.
 
-**Why enable `checkJs` in the JS template?**
+## References
 
-It is likely that most cases of changing variable types in runtime are likely to be accidental, rather than deliberate. This provides advanced typechecking out of the box. Should you like to take advantage of the dynamically-typed nature of JavaScript, it is trivial to change the configuration.
-
-**Why is HMR not preserving my local component state?**
-
-HMR state preservation comes with a number of gotchas! It has been disabled by default in both `svelte-hmr` and `@sveltejs/vite-plugin-svelte` due to its often surprising behavior. You can read the details [here](https://github.com/sveltejs/svelte-hmr/tree/master/packages/svelte-hmr#preservation-of-local-state).
-
-If you have state that's important to retain within a component, consider creating an external store which would not be replaced by HMR.
-
-```js
-// store.js
-// An extremely simple external store
-import { writable } from 'svelte/store'
-export default writable(0)
-```
+- [Face Blit](https://github.com/AnetaTexler/FaceBlit)
+- [MediaPipe](https://github.com/google/mediapipe)
+- [Mediapipe 2 Dlib Landmarks by PeizhiYan](https://github.com/PeizhiYan/Mediapipe_2_Dlib_Landmarks/tree/main)
+- [Build TFLite & OpenCV to WASM (with SIMD, CMake) | Face Detection on Web](https://blog.seeso.io/face-detection-on-web-tflite-wasm-simd-462975e0f628)
+- University of Michigan EECS442 Course Materials

index.html

@@ -3,6 +3,7 @@
   <head>
     <meta charset="UTF-8" />
     <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>FaceBlit-Web</title>
   </head>

src/App.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
   import { onMount } from 'svelte';
+  import { fade } from 'svelte/transition';
   import { FaceLandmarker, FilesetResolver, DrawingUtils } from '@mediapipe/tasks-vision';
   import type { NormalizedLandmark } from '@mediapipe/tasks-vision';
   import Styles from './lib/Styles.svelte';
@@ -8,6 +9,8 @@
   const WIDTH = 480;
   const HEIGHT = 640;
 
+  let loading = true;
+
   let videoElement: HTMLVideoElement;
   let canvasElement: HTMLCanvasElement;
   let faceLandmarker: FaceLandmarker;
@@ -33,7 +36,7 @@
   };
 
   const mp2dlib = new MP2Dlib();
-  let loeaded = false;
+  let apiLoaded = false;
   let api = {
     create_image_buffer: (): number => {return 0},
     destroy_image_buffer: (p: number) => {},
@@ -58,6 +61,10 @@
     targetLandmarksp: 0,
   }
 
+  function handleStylesLoaded(allFinished: boolean) {
+    loading = !allFinished;
+  }
+
   function handleStyleSelected(styleName: string, styleData: any) {
     selectedStyleName = styleName;
     selectedStyleData = styleData;
@@ -88,7 +95,7 @@
         load_style: wasmModule.cwrap('load_style', 'number', ['number', 'number', 'number']),
         stylizeImage: wasmModule.cwrap('stylizeImage', '', ['number', 'number', 'number']),
       };
-      loeaded = true;
+      apiLoaded = true;
     } catch (e) {
       console.error('Error loading face_blit.js:', e);
     }
@@ -239,15 +246,33 @@
 }
 </script>
 
+
 <main>
-  <video bind:this="{videoElement}" style="display: none;" aria-hidden="true"></video>
-  <canvas bind:this="{canvasElement}"></canvas>
-  <Styles onStyleSelected={handleStyleSelected} cropParams={window.cropParams}/>
+  <div class="loading-page" class:hidden={!loading} transition:fade={{ duration: 1000 }}>
+    <h1>Loading...</h1>
+  </div>
+  <div class="app page" class:hidden={loading} transition:fade={{ duration: 1000 }}>
+    <h1>EECS 442 Project: Face Blit Web</h1>
+    <p><a href="https://github.com/Yushu-He/FaceBlit-Web" target="_blank" class="github-link" style="text-decoration: none; color: inherit;">
+      <i class="fa fa-github" style="font-size: 24px; margin-right: 8px;"></i> View on GitHub
+    </a></p>
+    <video bind:this={videoElement} style="display: none;" aria-hidden="true"></video>
+    <canvas bind:this={canvasElement}></canvas>
+    <h1>Styles</h1>
+    <Styles 
+      stylesLoaded={handleStylesLoaded}
+      styleSelected={handleStyleSelected}
+    />
+  </div>
 </main>
 
 <style>
   canvas {
     width: auto;
     height: 100%;
+    border-radius: 60px;
+  }
+  .hidden {
+    display: none;
   }
 </style>

src/app.css

@@ -57,13 +57,6 @@ button {
   cursor: pointer;
   transition: border-color 0.25s;
 }
-button:hover {
-  border-color: #646cff;
-}
-button:focus,
-button:focus-visible {
-  outline: 4px auto -webkit-focus-ring-color;
-}
 
 @media (prefers-color-scheme: light) {
   :root {