This is the main Superlore app that handles backend and frontend. It uses the following technologies:
- ✅ NextJS Typescript
- ✅ GraphQL with autogen-types
- ✅ Postgres with autogen-types
- ☑️ Websockets with autogen-types
Make sure you are using node 16+
$ npm install
$ npm run dev
-
First connect to Postgres using Google Cloud Shell.
-
Then setup Prisma database types.
$ npx prisma
$ npx prisma init
$ npx prisma db pull
$ mkdir -p prisma/migrations/0_init
$ npx prisma migrate diff --from-empty --to-schema-datamodel prisma/schema.prisma --script > prisma/migrations/0_init/migration.sql
$ npx prisma migrate resolve --applied 0_init
$ npx prisma generate
If you need to reset the database, you can do so by running within the postgres shell:
\l # list databases
DROP DATABASE main; # drop database
CREATE DATABASE main WITH TEMPLATE template0; # create database
\c main; # connect to database
# run the init script to create tables
# src/scripts/initializedb.ts
\d # list tables
To get GCP to work, you will need to: related
const GCP_service_account_key = {
"type": "service_account",
"project_id": "superlore-demo",
"private_key_id": "______",
"private_key": "-----BEGIN PRIVATE KEY-----_______\n-----END PRIVATE KEY-----\n",
"client_email": "[email protected]",
"client_id": "_______",
"auth_uri": "https://accounts.google.com/o/oauth2/auth",
"token_uri": "https://oauth2.googleapis.com/token",
"auth_provider_x509_cert_url": "https://www.googleapis.com/oauth2/v1/certs",
"client_x509_cert_url": "https://www.googleapis.com/robot/v1/metadata/x509/_______%40superlore-demo.iam.gserviceaccount.com"
}
const base64EncodedKey = btoa(JSON.stringify(GCP_service_account_key))
Now save base64EncodedKey
into your .ENV
file like so:
GCP_KEYFILE_BASE64=eyJ0eXBlIjoi....291bnQuY29tIn0=
To get this available in Vercel deployment, manually copy the env variables into the deployment tab Project > Settings > Environment Variables
Be sure to also add NPM_TOKEN
as an env variable in Vercel. The token is found locally at .npmrc
-
Install Google Cloud SDK by following the instructions here: https://cloud.google.com/sdk/docs/install
-
Authenticate with your Google account:
gcloud auth login
- Set the CORS configuration for your Firebase Storage bucket (replace
your-bucket-name
with your actual bucket name):
gsutil cors set ./firebase/firebase-storage-cors.json gs://superlore-dev.appspot.com
That's it! Now your Firebase Storage bucket allows all CORS requests.
- Scrollshow of interesting TikToks
- Sign up for account --> email passwordless
- Add money to account
- Video Canvas page with preloaded models
- LLM asks what kind of video the user wants to make. User responds with prompt.
- LLM generates scene by scene descriptions for video.
- User modifies as they wish. Click the "generate" button to turn text-to-video
- User may also insert a video from their library into the editor
- Upload a video you want to convert
- Select timeframe crop and add to canvas
- Add prompt to timecrop and click "generate"