mirror of
https://github.com/storytold/artcraft.git
synced 2026-11-14 22:02:36 +00:00
Merge branch 'master' into bflat-fy-v2v-model-page
This commit is contained in:
9 files changed
+376
-125
No files matched your search
@@ -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).
|
||||
|
||||
@@ -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)
|
||||
|
||||
|
||||
@@ -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`.
|
||||
|
||||
File renamed without changes.
@@ -1,5 +0,0 @@
|
||||
Development Docs
|
||||
================
|
||||
|
||||
These documents speak more in depth to setup, individual platform installation, code conventions, and more.
|
||||
|
||||
@@ -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 {
|
||||
|
||||
@@ -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<EnqueueFaceAnimationResponse>
|
||||
{
|
||||
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 };
|
||||
});
|
||||
}
|
||||
@@ -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<
|
||||
<AboutPage />
|
||||
</Route>
|
||||
|
||||
<Route path="/testing">
|
||||
<TestingPage
|
||||
enqueueInferenceJob={this.props.enqueueInferenceJob}
|
||||
inferenceJobs={this.props.inferenceJobs}
|
||||
inferenceJobsByCategory={this.props.inferenceJobsByCategory}
|
||||
/>
|
||||
</Route>
|
||||
|
||||
<Route path="/commissions">
|
||||
<CommunityCommissionsPage />
|
||||
</Route>
|
||||
|
||||
@@ -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<InferenceJob>;
|
||||
inferenceJobsByCategory: Map<FrontendInferenceJobType, Array<InferenceJob>>;
|
||||
}
|
||||
|
||||
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 (
|
||||
<div>
|
||||
<div className="container-panel pt-4 pb-5">
|
||||
<h1>Testing Page</h1>
|
||||
|
||||
<button onClick={() => doTest()}>Test the thing</button>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export { TestingPage };
|
||||
Reference in new issue
Block a user