storyteller-frontend

This repository is a frontend 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, our social deepfaking website
• storyteller.io, our investor relations website and eventual home of our production software
• power.stream, our Twitch TTS platform
  • dash.power.stream, a subdomain for the dashboard.
  • obs.power.stream, a subdomain for streamers to integrate with OBS.

Here are some static websites contained:

• FakeYou API Docs, API documentation for the core TTS feature. This does not document our complete API.
• 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, 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.

To run and test locally,

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, and in particular this pack

Video thumbnails are generated with https://ezgif.com/ 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.