diff --git a/.github/workflows/deploy.yml b/.github/workflows/deploy.yml new file mode 100644 index 0000000..8ef7bda --- /dev/null +++ b/.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 \ No newline at end of file diff --git a/README.md b/README.md index 382941e..411bd31 100644 --- a/README.md +++ b/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 \ No newline at end of file diff --git a/index.html b/index.html index 5e41629..34201cf 100644 --- a/index.html +++ b/index.html @@ -3,6 +3,7 @@ + FaceBlit-Web diff --git a/src/App.svelte b/src/App.svelte index fff3a63..855299d 100644 --- a/src/App.svelte +++ b/src/App.svelte @@ -1,5 +1,6 @@ +
- - - +
+

Loading...

+
+
+

EECS 442 Project: Face Blit Web

+

+ View on GitHub +

+ + +

Styles

+ +
\ No newline at end of file diff --git a/src/app.css b/src/app.css index 617f5e9..d5f0f26 100644 --- a/src/app.css +++ b/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 { diff --git a/src/lib/Styles.svelte b/src/lib/Styles.svelte index f8db15c..4e8803a 100644 --- a/src/lib/Styles.svelte +++ b/src/lib/Styles.svelte @@ -3,8 +3,10 @@ import { MP2Dlib } from './MP2Dlib.ts'; import { FaceLandmarker, FilesetResolver, type NormalizedLandmark } from '@mediapipe/tasks-vision'; import { DB } from './Utils.ts'; + + let stylesListFull = ['het', 'watercolorgirl', 'bronzestatue', 'charcoalman', 'expressive', 'frank', 'girl', 'illegalbeauty', 'ken', 'laurinbust', 'lincolnbust', 'malevich', 'oilman', 'oldman', 'prisma', 'stonebust', 'woodenmask']; let stylesList = ['het', 'watercolorgirl']; - let stylesDataList = {}; + let stylesDataList: { [key: string]: any } = {}; let selectedStyle = ''; const WIDTH = 480; @@ -15,18 +17,8 @@ let faceLandmarker: FaceLandmarker | null = null; - export let onStyleSelected: (styleName: string, styleData: any) => void = () => {}; - export let cropParams: { sx: number; sy: number; sWidth: number; sHeight: number } = { sx: 0, sy: 0, sWidth: 0, sHeight: 0 }; - - $: if (cropParams.sx !== 0 || cropParams.sy !== 0 || cropParams.sWidth !== 0 || cropParams.sHeight !== 0) { - if (cropParams.sWidth > WIDTH) { - cropParams.sWidth = WIDTH; - cropParams.sHeight = HEIGHT; - } - if (!loadStyles(cropParams)) { - console.log('Error adding styles'); - } - } + export let stylesLoaded: (allFinished: boolean) => void = () => {}; + export let styleSelected: (styleName: string, styleData: any) => void = () => {}; onMount(async () => { const filesetResolver = await FilesetResolver.forVisionTasks( @@ -41,26 +33,31 @@ runningMode: 'IMAGE', numFaces: 1, }); + + await Promise.all(stylesListFull.map(async (styleName) => { + await loadSingleStyle(styleName); + })); + stylesLoaded(await loadStyles()); }); - function loadStyles(params: { sx: number; sy: number; sWidth: number; sHeight: number }): boolean { + async function loadStyles(): Promise { let allFinished = true; - stylesList.forEach(async (styleName) => { - await loadSingleStyle(styleName); - // if is undefined, then add the style - if (!stylesDataList[styleName]) { + await Promise.all(stylesList.map(async (styleName) => { + if (stylesDataList[styleName]) { + return; + } else { console.log('Style:', styleName, 'is not cached, begin processing'); - if (!addSingleStyle(styleName, params)) { + if (!await addSingleStyle(styleName)) { allFinished = false; } await loadSingleStyle(styleName); } - }); + })); return allFinished; } - async function addSingleStyle(styleName: string, params: { sx: number; sy: number; sWidth: number; sHeight: number }): Promise { + async function addSingleStyle(styleName: string): Promise { try { console.log('Processing style:', styleName); @@ -68,7 +65,7 @@ const image = new Image(); image.src = `/assets/styles/style_${styleName}_480x640.png`; await image.decode(); - // get the image data, no resize needed + // get the image data const canvas = document.createElement('canvas'); canvas.width = image.width; canvas.height = image.height; @@ -78,15 +75,13 @@ const lutArray = await loadLookUpCube(styleName); - // // Perform face landmark detection const results = faceLandmarker!.detect(canvas); if (results.faceLandmarks && results.faceLandmarks.length > 0) { const landmarks = mp2dlib.transformLandmarks(results.faceLandmarks); const landmarksArray = transformLandmarksToInt32Array(landmarks[0]); console.log('landmarksArray:', landmarksArray); - // Convert canvases to Base64 strings for storage - const resizedBlob = await ImageDataToBlob(ImageData, 'image/png'); + const resizedBlob = await ImageDataToBlob(ImageData, 'image/png'); // Save all data to IndexedDB await db.saveStyleData(styleName, { resizedImage: resizedBlob, @@ -110,61 +105,35 @@ try { const data = await db.loadStyleData(styleName); if (data) { - // Convert Base64 strings back to canvases data.resizedImage = await blobToImageData(data.resizedImage); - - // Convert landmarks ArrayBuffer back to Int32Array data.landmarksArray = new Int32Array(data.landmarksArray); - - // Convert lookupCube ArrayBuffer back to Uint16Array data.lookUpCube = new Uint16Array(data.lookUpCube); stylesDataList[styleName] = data; - console.log('Style:', styleName, 'is loaded'); + console.log('Style:', styleName, 'is loaded from indexedDB'); } } catch (error) { - console.error('Error loading style:', error); + console.error('Error loading style:', styleName, error); } } - // Assuming you have initialized your WebAssembly module and have access to it as `wasmModule` async function loadLookUpCube(styleName: string): Promise { - // Construct the file path based on the style name const fileName = `/assets/styles/lut_${styleName}_480x640.bytes`; - try { - // Fetch the binary file const response = await fetch(fileName); - if (!response.ok) { throw new Error(`Failed to load lookup cube from ${fileName}: ${response.status} ${response.statusText}`); } - // Read the response as an ArrayBuffer const arrayBuffer = await response.arrayBuffer(); const data = new Uint16Array(arrayBuffer); - - console.log('Data:', data); + console.log('Data for', styleName, data); return data; - // If needed, you can return a success status or perform additional operations here } catch (error) { console.error(`Error loading lookup cube: ${error.message}`); - throw error; // Re-throw the error after logging + throw error; } } - - // function canvasToBlob(canvas: HTMLCanvasElement, type: string): Promise { - // return new Promise((resolve, reject) => { - // canvas.toBlob((blob) => { - // if (blob) { - // resolve(blob); - // } else { - // reject(new Error('Failed to convert canvas to Blob.')); - // } - // }, type); - // }); - // } - function ImageDataToBlob(imageData: ImageData, type: string): Promise { return new Promise((resolve, reject) => { const canvas = document.createElement('canvas'); @@ -182,24 +151,6 @@ }); } - // function blobToCanvas(blob: Blob): Promise { - // return new Promise((resolve, reject) => { - // const canvas = document.createElement('canvas'); - // const ctx = canvas.getContext('2d'); - // const img = new Image(); - // img.onload = () => { - // canvas.width = img.width; - // canvas.height = img.height; - // ctx!.drawImage(img, 0, 0); - // resolve(canvas); - // }; - // img.onerror = (error) => { - // reject(error); - // }; - // img.src = URL.createObjectURL(blob); - // }); - // } - function blobToImageData(blob: Blob): Promise { return new Promise((resolve, reject) => { const img = new Image(); @@ -219,8 +170,12 @@ } function selectStyle(styleName: string) { - selectedStyle = styleName; - onStyleSelected(styleName, stylesDataList[styleName]); + if (stylesDataList[styleName]) { + selectedStyle = styleName; + styleSelected(styleName, stylesDataList[styleName]); + } else { + console.warn('Style not loaded yet:', styleName); + } } function transformLandmarksToInt32Array(landmarks: NormalizedLandmark[]): Int32Array { @@ -231,6 +186,15 @@ } return landmarksArray; } + + async function handleStyleDownload(styleName: string) { + if (!stylesDataList[styleName]) { + const success = await addSingleStyle(styleName); + if (success) { + await loadSingleStyle(styleName); + } + } + }
- {#each stylesList as styleName} - + {styleName} - + + {#if !stylesDataList[styleName]} + + {/if} +
{/each} -