diff --git a/README.md b/README.md index 3b9ced1fa1..8b0dffcdff 100644 --- a/README.md +++ b/README.md @@ -1,123 +1,36 @@ storyteller-frontend ==================== -This repository is a frontend [monorepo](https://en.wikipedia.org/wiki/Monorepo), containing all of our websites -and shared library code. Each website can be built and run independently of one another, but they share the same -API backend. - -Here are the websites contained: - -- [FakeYou.com](https://fakeyou.com), our social deepfaking website -- [storyteller.io](https://storyteller.io), our investor relations website and eventual home of our production software -- [power.stream](https://power.stream), our Twitch TTS platform - - [dash.power.stream](https://dash.power.stream), a subdomain for the dashboard. - - [obs.power.stream](https://obs.power.stream), a subdomain for streamers to integrate with OBS. - -Here are some static websites contained: - -- [FakeYou API Docs](https://docs.fakeyou.com), API documentation for the core TTS feature. This does not document our complete API. -- [the.storyteller.company](https://the.storyteller.company), DEPRECATED investor website. Used to get into *Founder Friendly Labs*. - - -TODO: In the future, it will be worth updating this structure to match Netlify's recommended monorepo practices: -https://docs.netlify.com/configure-builds/monorepos/ - - -Development ------------ - -### Development environment setup - ``` -# Install Yarn if not present (Linux/Mac) -sudo npm install --global yarn - -# We might need a newer node (Linux/Mac) -sudo install n -g -sudo n stable - -# Install project deps (Linux/Mac) -yarn install - -# Start one or more of the several frontends (Linux/Mac) -yarn start-fakeyou -yarn start-storyteller-home + ⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠉⠙⠻⢿⣛⣋⠉⠉⠉⠉⠉⠒⠲⠤⣤⢾⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀ +⠀⠀⠀⠀⠀⠀⠀⢀⡤⠴⠒⠒⠒⠒⠒⠦⢤⣀⠀⠀⠀⠀⠀⠀⢀⣠⠤⠒⠉⠁⠀⠀⠀⠀⠀⠀⠀⡴⡱⣿⠦⡀⠀⢀⠤⠆⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀ +⠀⠀⠀⠀⠀⢀⡜⠁⠀⠀⠀⠀⠀⠀⠀⠀⠀⠈⠙⠦⡉⠒⣺⠭⠅⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⢀⡜⡑⠀⡿⠀⠈⠞⠁⡘⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀ +⠀⠀⠀⠀⠀⣸⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⢀⡼⠋⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⢠⠎⡰⠁⠸⡇⠀⠀⡀⡰⠁⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀ +⠀⠀⠀⠀⠀⣿⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⣰⠋⠀⠀⣀⣠⠄⠒⠈⠀⠀⠀⠀⠀⠀⢠⠏⠀⠁⠉⠀⠈⠛⢥⣠⠁⠀⠀⠀⠀⠀⠀⠀⠀Storyteller⠀⠀⠀⠀ +⠀⠀⠀⠀⠀⢸⣀⣀⣀⣀⠀⠀⠀⠀⠀⠀⠀⡰⠁⡠⠖⠋⢠⠃⠀⠀⠀⠀⠀⠀⠀⢀⢔⡏⠀⠀⠀⠀⠸⣷⠠⡀⠙⣆⠀⠀⠀⠀⠀⠀⠀⠀⠀Frontend⠀⠀⠀ +⠀⠀⣠⠔⠋⠉⠀⠀⠀⠈⠉⠙⠒⠦⣄⡀⢠⢣⠊⠀⠀⢀⠆⠀⠀⠀⢀⠊⠀⢠⢁⡎⡸⠀⠀⠀⠀⠀⠀⠈⠉⠁⠀⠘⢦⡀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀ +⠀⡼⠁⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠙⡿⣅⠀⠀⠀⡼⠀⠀⢀⡔⠁⠀⣠⡇⡞⢸⠇⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠩⣒⠄⠀⠀⠀⠀⠀⠀⠀⠀ +⠀⡇⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠈⠳⡀⠀⡇⠀⢠⡞⠀⢀⠔⢹⡎⠀⡞⠀⠀⠀⠀⠀⠀⢠⡒⠒⠷⠿⠷⠒⠚⠉⠀⠀⠀⠀⠀⠀⠀⠀⠀ +⠀⡇⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠙⣄⠇⢀⢻⢃⣴⠁⠀⢨⠇⣸⠁⠀⠀⠀⠀⠀⠀⢸⠉⠲⢤⡀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀ +⠀⠹⡄⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠘⡶⡈⠸⠃⡇⢰⠀⡜⢀⠇⠀⠀⠀⠀⠀⠀⠀⢸⠀⠀⠀⠙⠦⡀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀ +⠀⠀⠹⡄⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⢀⠀⠑⢄⠀⠀⢳⠀⠀⣸⢁⢆⡼⡡⡞⠀⠀⠀⠀⠀⠀⠀⠀⠈⣇⠀⠀⠀⠀⠈⢣⡀⠀⠀⠀⠀⠀⠀Missing test cases +⠀⠀⣠⠼⣆⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⢸⡄⠀⠀⢣⠀⣼⠰⢠⣇⠮⠞⠋⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠸⡄⠀⠀⠀⠀⠀⠱⡄⠀⠀⠀⠀⠀Code runs without being checked⠀⠀⠀ +⠀⡞⠁⠀⠈⢣⡀⠀⠀⠀⠀⠀⠀⠀⠀⠀⣗⠲⢤⡀⣃⣷⣡⢷⡖⠂⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⡀⢷⢄⠀⠀⠀⠀⠀⠰⡀⠀⠀⠀⠀Sorry everyone⠀⠀⠀ +⠰⡇⠀⠀⠀⠀⠙⢦⠀⠀⠀⠀⠀⠀⠀⠀⠸⣀⡴⠋⠁⠀⢠⠎⠀⠀⠀⠀⠀⢀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠁⠸⠀⠁⠢⡀⠀⠀⠀⠘⢄⠀⠀⠀⠀⠀⠀ +⠀⢧⠀⠀⠀⠀⠀⠀⠑⢦⡀⠀⠀⠀⠀⠀⠀⢻⡀⠀⠀⠀⢸⡠⡶⢀⡜⡰⣡⡇⠀⠀⠀⠀⠀⠀⠀⠀⠀⣿⠇⠀⠀⠀⠈⠲⣄⡀⠀⠈⠳⢄⠀⠀⠀⠀ - AI Haiku +⠀⠘⣆⠀⠀⠀⠀⠀⠀⠀⠙⠢⣄⠀⠀⠀⠀⠀⠳⡄⠀⠀⠘⠁⠗⠃⢿⡟⠙⣿⡈⡄⠀⠀⠀⠀⡄⡀⣰⡟⠀⠀⠀⠀⠀⠀⠈⢯⡑⠢⠄⣀⠑⠢⢀⣀ +⠀⠀⠈⢦⡀⠀⠀⠀⠀⠀⠀⠀⠈⢿⠦⣀⠀⠀⠀⠙⢦⠀⠀⠀⠀⠀⠀⡇⠀⠐⢣⢹⡀⠀⡆⣼⣴⠗⡟⠀⠀⠀⠀⠀⠀⠀⠀⠀⢳⡀⠀⠀⠀⠀⠀⠀ +⠀⠀⠀⡜⠻⣄⠀⠀⠀⠀⠀⠀⠀⠸⡴⠚⡟⠢⢄⣀⠀⠳⣄⠀⡟⢲⠒⡇⠀⠀⠀⢑⡇⡼⠛⠉⠁⡼⢡⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⢳⡀⠀⠀⠀⠀⠀ +⠀⠀⢸⠁⠀⠈⠳⣄⠀⠀⠀⠀⠀⠀⢳⡀⢷⠀⠀⠈⠙⠒⠬⣿⣇⣸⡀⡇⠀⠀⢀⠏⢹⠀⠀⠀⣰⠃⠀⠄⠀⠀⠀⠀⠀⠀⠀⠀⠀⡀⣇⠀⠀⠀⠀⠀ +⠀⠀⢸⠀⠀⠀⠀⠈⠳⣄⠀⠀⠀⠀⠀⠳⣸⠀⠀⠀⠀⠀⣠⠃⠀⢨⣧⡇⠀⠀⡼⠀⡟⠀⠀⢠⠇⠀⠀⠘⡀⠀⠀⠀⠀⠀⠀⠀⠀⢀⢸⠀⠀⠀⠀⠀ +⠀⠀⠈⢧⠀⠀⠀⠀⠀⠈⢳⢦⡀⠀⠀⠀⠙⢆⠀⠀⣀⠔⠁⢀⡠⢛⣿⠀⠀⢰⠃⢀⡇⠀⠀⡞⠀⠀⠀⠀⠹⡢⢀⠀⠀⠀⠀⠀⠀⠘⣼⠀⠀⠀⠀⠀ +⠀⠀⠀⠈⢳⡀⠀⠀⠀⠀⠈⢧⠉⣳⣤⣀⠀⠈⠳⣮⡥⠴⠚⠉⠀⢸⡏⠀⢀⡟⡀⢸⠁⠀⢸⠁⠀⠀⠀⠀⠀⠱⡀⠑⢤⡀⠀⠀⠀⠀⠹⡄⠀⠀⠀⠀ +⠀⠀⠀⠀⠀⠙⠢⣄⠀⠀⠀⠈⢿⡁⢀⡏⠑⢢⢤⣈⠳⢄⡀⠀⠀⢸⠇⠀⡼⠀⠑⢿⠀⠀⣼⠀⠀⠀⠀⠀⠀⠀⠙⣄⠀⠈⠓⠦⣄⡀⠀⠑⢄⠀⠀⠀ +⠀⠀⠀⠀⠀⠀⠀⠀⠙⠲⠤⣀⣀⠙⢼⡀⠀⣿⠀⠈⠉⠓⠻⠶⣄⣸⠀⢠⣧⡀⠀⠈⡇⠀⢸⠈⢲⢄⡀⠀⠀⠀⠀⠈⠳⣄⠀⠀⠀⠈⠉⠐⠒⠓⠄⠀ +⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠉⠉⡿⢷⡤⣿⢤⠀⠀⠀⠀⢀⡤⣧⣄⣼⣽⣽⠀⠀⢳⠀⠀⢳⡢⠧⠌⠒⠤⢄⣀⡀⠀⠈⠑⠤⢀⣀⣀⠠⠀⠀⠀⠀ +⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠧⡼⠧⠼⠼⠀⠀⠀⠀⢿⣰⡇⢸⡆⣹⠀⠀⠀⠸⡄⠀⢄⢹⠓⡄⠀⠀⠀⠀⠈⠉⠉⠉⠉⠉⠁⠀⠀⠀⠀⠀⠀ +⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠉⠉⠉⠉⠁⠀⠀⠀⠀⠉⠙⠛⠛⠉⠀⠀ ``` -### Develop locally without CORS: - -Launch Chrome without CORS enforcement, which will allow targeting against FakeYou.com's API directly: - -``` -chromium-browser --disable-web-security --user-data-dir=~/chrome -``` - -Or Mac, - -``` -/Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome --disable-web-security --user-data-dir=~/chrome -``` - -### Monorepo design - -The React monorepo build pattern we're using is based on -[this blog post](https://medium.com/geekculture/setting-up-monorepo-with-create-react-app-cb2cfa763b96), -which while lacking in some respects, still works for our purposes. - -Library code is exported in the library's index.tsx (not very pretty) - - -### Good Code Examples - -* `storyteller/src/pages/tts_configs/TtsConfigsEditRulePage.tsx` - Tree of components that handle a very complicated update API - - -Site-specific docs ------------------- - -### API Documentation Site - -docs.fakeyou.com is generated from `./docs` using [Docsify](https://docsify.js.org/). - -To run and test locally, - -```bash -sudo npm i docsify-cli -g -docsify serve docs -``` - -Deployment ----------- - -Our websites are deployed on Netlify. - -### Netlify notes - -The `.node-version` file controls which version of node Netlify uses to build! - -Design and brand notes ----------------------- - -### FakeYou design / brand - -FakeYou (formerly vo.codes) uses the following: - -* Font: fugaz one, 110, #209CEE -* Favicon: https://favicon.io/favicon-generator/ - -Social icons are paid from the subscription service [FlatIcon](https://www.flaticon.com), -and in particular [this pack](https://www.flaticon.com/packs/social-logo-1) - - -Video thumbnails are generated with [https://ezgif.com/](ezgif) at the following settings: - -* webp, 500x300px (~100kb each) - -Reverse clips are generated with ffmpeg: - -``` -ffmpeg -i input.mp4 -vf reverse reversed.mp4 -``` - -If node becomes a zombie process and you want to find/kill it, `ps aux | grep node`. +Documentation [lives here](./_develop). diff --git a/_develop/local_development_setup.md b/_develop/local_development_setup.md new file mode 100644 index 0000000000..2076358ed8 --- /dev/null +++ b/_develop/local_development_setup.md @@ -0,0 +1,82 @@ +local development setup +======================= + +Ubuntu 22.04 +------------ + +### Development setup + +Install NPM and Yarn + +```bash +sudo apt install npm +sudo npm install --global yarn +``` + +Add the following to your hosts file (`/etc/hosts`) : + +``` +127.0.0.1 dev.fakeyou.com +127.0.0.1 api.dev.fakeyou.com +127.0.0.1 devproxy.fakeyou.com + +127.0.0.1 dev.storyteller.ai +127.0.0.1 api.dev.storyteller.ai +127.0.0.1 devproxy.storyteller.ai +``` + +### Run locally + +Install dependencies + +```bash +yarn install +``` + +Start development server for FakeYou + +```bash +yarn start-fakeyou +``` + +MacOS +----- + +### Development setup + +Install NPM and Yarn + +```bash +sudo apt install npm +sudo npm install --global yarn +``` + +Add the following to your hosts file (`/etc/hosts`) : + +``` +127.0.0.1 dev.fakeyou.com +127.0.0.1 api.dev.fakeyou.com +127.0.0.1 dev.storyteller.ai +127.0.0.1 api.dev.storyteller.ai +``` + +### Run locally + +Install dependencies + +```bash +yarn install +``` + +Start development server for FakeYou + +```bash +yarn start-fakeyou +``` + +Windows +------- + +See [windows.md](./windows.md) + + diff --git a/_develop/old_docs_2023_Q3.md b/_develop/old_docs_2023_Q3.md new file mode 100644 index 0000000000..3b9ced1fa1 --- /dev/null +++ b/_develop/old_docs_2023_Q3.md @@ -0,0 +1,123 @@ +storyteller-frontend +==================== + +This repository is a frontend [monorepo](https://en.wikipedia.org/wiki/Monorepo), containing all of our websites +and shared library code. Each website can be built and run independently of one another, but they share the same +API backend. + +Here are the websites contained: + +- [FakeYou.com](https://fakeyou.com), our social deepfaking website +- [storyteller.io](https://storyteller.io), our investor relations website and eventual home of our production software +- [power.stream](https://power.stream), our Twitch TTS platform + - [dash.power.stream](https://dash.power.stream), a subdomain for the dashboard. + - [obs.power.stream](https://obs.power.stream), a subdomain for streamers to integrate with OBS. + +Here are some static websites contained: + +- [FakeYou API Docs](https://docs.fakeyou.com), API documentation for the core TTS feature. This does not document our complete API. +- [the.storyteller.company](https://the.storyteller.company), DEPRECATED investor website. Used to get into *Founder Friendly Labs*. + + +TODO: In the future, it will be worth updating this structure to match Netlify's recommended monorepo practices: +https://docs.netlify.com/configure-builds/monorepos/ + + +Development +----------- + +### Development environment setup + +``` +# Install Yarn if not present (Linux/Mac) +sudo npm install --global yarn + +# We might need a newer node (Linux/Mac) +sudo install n -g +sudo n stable + +# Install project deps (Linux/Mac) +yarn install + +# Start one or more of the several frontends (Linux/Mac) +yarn start-fakeyou +yarn start-storyteller-home +``` + +### Develop locally without CORS: + +Launch Chrome without CORS enforcement, which will allow targeting against FakeYou.com's API directly: + +``` +chromium-browser --disable-web-security --user-data-dir=~/chrome +``` + +Or Mac, + +``` +/Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome --disable-web-security --user-data-dir=~/chrome +``` + +### Monorepo design + +The React monorepo build pattern we're using is based on +[this blog post](https://medium.com/geekculture/setting-up-monorepo-with-create-react-app-cb2cfa763b96), +which while lacking in some respects, still works for our purposes. + +Library code is exported in the library's index.tsx (not very pretty) + + +### Good Code Examples + +* `storyteller/src/pages/tts_configs/TtsConfigsEditRulePage.tsx` - Tree of components that handle a very complicated update API + + +Site-specific docs +------------------ + +### API Documentation Site + +docs.fakeyou.com is generated from `./docs` using [Docsify](https://docsify.js.org/). + +To run and test locally, + +```bash +sudo npm i docsify-cli -g +docsify serve docs +``` + +Deployment +---------- + +Our websites are deployed on Netlify. + +### Netlify notes + +The `.node-version` file controls which version of node Netlify uses to build! + +Design and brand notes +---------------------- + +### FakeYou design / brand + +FakeYou (formerly vo.codes) uses the following: + +* Font: fugaz one, 110, #209CEE +* Favicon: https://favicon.io/favicon-generator/ + +Social icons are paid from the subscription service [FlatIcon](https://www.flaticon.com), +and in particular [this pack](https://www.flaticon.com/packs/social-logo-1) + + +Video thumbnails are generated with [https://ezgif.com/](ezgif) at the following settings: + +* webp, 500x300px (~100kb each) + +Reverse clips are generated with ffmpeg: + +``` +ffmpeg -i input.mp4 -vf reverse reversed.mp4 +``` + +If node becomes a zombie process and you want to find/kill it, `ps aux | grep node`. + diff --git a/development_docs/windows.md b/_develop/windows.md similarity index 100% rename from development_docs/windows.md rename to _develop/windows.md diff --git a/development_docs/README.md b/development_docs/README.md deleted file mode 100644 index 06bbe319e4..0000000000 --- a/development_docs/README.md +++ /dev/null @@ -1,5 +0,0 @@ -Development Docs -================ - -These documents speak more in depth to setup, individual platform installation, code conventions, and more. - diff --git a/packages/components/src/api/ApiConfig.ts b/packages/components/src/api/ApiConfig.ts index 10c6e22f1c..46b35a4af3 100644 --- a/packages/components/src/api/ApiConfig.ts +++ b/packages/components/src/api/ApiConfig.ts @@ -49,18 +49,30 @@ class ApiConfig { apiHost = "api.storyteller.ai"; break; case "storyteller.stream": + // Storyteller.stream is deprecated and will be decommissioned in the future. apiHost = "api.storyteller.stream"; break; + case "devproxy.fakeyou.com": + case "devproxy.fakeyou.com:7000": + case "devproxy.fakeyou.com:7001": + apiHost = "api.fakeyou.com"; + useSsl = true; + break; + case "devproxy.storyteller.ai": + case "devproxy.storyteller.ai:7000": + case "devproxy.storyteller.ai:7001": + apiHost = "api.storyteller.ai"; + useSsl = true; + break; case "dev.fakeyou.com": // NB: for dev machines with nginx proxies apiHost = "api.dev.fakeyou.com"; break; + case "dev.fakeyou.com:7000": case "dev.fakeyou.com:7001": // NB: for dev machines without nginx proxies - //apiHost = "api.dev.fakeyou.com:12345"; - //useSsl = false; - useSsl = true; - apiHost = "api.fakeyou.com"; + apiHost = "api.dev.fakeyou.com:12345"; + useSsl = false; break; default: if (document.location.host.includes("localhost")) { @@ -418,6 +430,12 @@ class ApiConfig { return `${this.getApiOrigin()}/v1/voice_conversion/inference`; } + // =============== Face Animation =============== + + enqueueFaceAnimation(): string { + return `${this.getApiOrigin()}/v1/animation/face_animation/create`; + } + // =============== Generic Model Downloads =============== enqueueRemoteDownloadJob(): string { diff --git a/packages/components/src/api/face_animation/EnqueueFaceAnimation.ts b/packages/components/src/api/face_animation/EnqueueFaceAnimation.ts new file mode 100644 index 0000000000..3e973bc44d --- /dev/null +++ b/packages/components/src/api/face_animation/EnqueueFaceAnimation.ts @@ -0,0 +1,57 @@ +import { ApiConfig } from "@storyteller/components"; + +export interface EnqueueFaceAnimationRequest { + uuid_idempotency_token: string, + + audio_token: string, + image_token: string, +} + +export interface EnqueueFaceAnimationSuccessResponse { + success: boolean, + inference_job_token: string, +} + +export interface EnqueueFaceAnimationErrorResponse { + success: boolean, +} + +type EnqueueFaceAnimationResponse = EnqueueFaceAnimationSuccessResponse | EnqueueFaceAnimationErrorResponse; + +export function EnqueueFaceAnimationIsSuccess(response: EnqueueFaceAnimationResponse): response is EnqueueFaceAnimationSuccessResponse { + return response?.success === true; +} + +export function EnqueueFaceAnimationIsError(response: EnqueueFaceAnimationResponse): response is EnqueueFaceAnimationErrorResponse { + return response?.success === false; +} + +export async function EnqueueFaceAnimation(request: EnqueueFaceAnimationRequest) : Promise +{ + const endpoint = new ApiConfig().enqueueFaceAnimation(); + + return await fetch(endpoint, { + method: 'POST', + headers: { + 'Accept': 'application/json', + 'Content-Type': 'application/json', + }, + credentials: 'include', + body: JSON.stringify(request), + }) + .then(res => res.json()) + .then(res => { + if (!res) { + return { success : false }; + } + + if (res && 'success' in res) { + return res; + } else { + return { success : false }; + } + }) + .catch(e => { + return { success : false }; + }); +} diff --git a/packages/fakeyou.com/src/v2/view/PageContainer.tsx b/packages/fakeyou.com/src/v2/view/PageContainer.tsx index dbea4fe40b..2d5dd0b340 100644 --- a/packages/fakeyou.com/src/v2/view/PageContainer.tsx +++ b/packages/fakeyou.com/src/v2/view/PageContainer.tsx @@ -87,6 +87,7 @@ import VcModelDeletePage from "./pages/vc/vc_model_delete/VcModelDeletePage"; import SideNav from "components/layout/SideNav/SideNav"; import MobileMenu from "components/layout/MobileMenu/MobileMenu"; import { TopNav } from "./nav/TopNav"; +import { TestingPage } from "./pages/testing/TestingPage"; interface Props { sessionWrapper: SessionWrapper; @@ -577,6 +578,14 @@ class PageContainer extends React.Component< + + + + diff --git a/packages/fakeyou.com/src/v2/view/pages/testing/TestingPage.tsx b/packages/fakeyou.com/src/v2/view/pages/testing/TestingPage.tsx new file mode 100644 index 0000000000..59b2621e86 --- /dev/null +++ b/packages/fakeyou.com/src/v2/view/pages/testing/TestingPage.tsx @@ -0,0 +1,54 @@ +import React from "react"; + +import { usePrefixedDocumentTitle } from "../../../../common/UsePrefixedDocumentTitle"; +import { PosthogClient } from "@storyteller/components/src/analytics/PosthogClient"; +import { + EnqueueFaceAnimation, + EnqueueFaceAnimationIsSuccess, + EnqueueFaceAnimationRequest, +} from "@storyteller/components/src/api/face_animation/EnqueueFaceAnimation"; +import { v4 as uuidv4 } from "uuid"; +import { FrontendInferenceJobType, InferenceJob } from "@storyteller/components/src/jobs/InferenceJob"; + +interface Props { + enqueueInferenceJob: ( + jobToken: string, + frontendInferenceJobType: FrontendInferenceJobType + ) => void; + inferenceJobs: Array; + inferenceJobsByCategory: Map>; +} + +function TestingPage(props: Props) { + PosthogClient.recordPageview(); + usePrefixedDocumentTitle("Testing"); + + const doTest = async () => { + let request: EnqueueFaceAnimationRequest = { + uuid_idempotency_token: uuidv4(), + audio_token: "audio_token", + image_token: "video_token", + }; + + let result = await EnqueueFaceAnimation(request); + + if (EnqueueFaceAnimationIsSuccess(result)) { + props.enqueueInferenceJob( + result.inference_job_token, + FrontendInferenceJobType.VoiceConversion + ); + } + }; + + return ( +
+
+

Testing Page

+ + +
+
+ ); +} + +export { TestingPage };