Translation AI by Sync Labs
Translation AI is an open-source tool for translating spoken language in video content with accurate lip synchronization. The purpose of this repo is to help developers quickly integrate multilingual support into video-based apps. This project provides essential APIs and documentation to facilitate the development of applications requiring video translation with lip-sync capabilities.
- Sync Labs for perfectly synchronized lip movements
- Gladia for transcribing and diarization
- Open AI for translating
- Eleven Labs for voice cloning and speech synthesis
- Next.js for web app
- Vercel for deployment
- Supabase for db, auth and storage
- Stripe for billing
To successfully deploy the template, execute the following steps in order:
Clicking the Deploy button will open up a browser tab with instructions on generating a new GitHub repository from this template and creating a corrseponding project in Supabase for auth
and storage
. Below are the steps you'll walk through:
-
Create Git Repository
- Under
Git Scope
select the account you'd like to deploy the repo to. - Under
Repository Name
give your new repo a name.
- Under
-
Add Integrations
The Supabase Vercel Deploy Integration handles configuration of environment variables and initiates the SQL migrations to construct your database schema. You can view the resulting tables in your project's Table editor.
- Click
Add
in the Supabase integration and fill out the form that pops up.
- Click
-
Configure Project
Enter the environment variables required for this project. Below are links to documentation on how to obtain an API key for each of the required services to ensure full functionality.
You'll need to configure your Supabase project's site URL and Vercel's NEXT_PUBLIC_SITE_URL
environment variable to secure and streamline authentication.
-
In your Supabase project, navigate to
Authentication
> URL configuration and enter your production URL (for example, https://your-deployment-url.vercel.app) as the site URL. -
In Vercel, under your project's deployment settings, create a new Production environment variable called
NEXT_PUBLIC_SITE_URL
and set it to your production URL. Make sure you uncheck the options for preview and development environments to maintain the correct operation for preview branches and local development.
After that, you'll need to create a new storage bucket within your Supabase project to store video and audio files.
-
In your Supabase project, navigate to
Storage
and click theNew bucket
button. -
Enter
translation
as the name for your new bucket and togglePublic bucket
to on. -
Click
Save
-
Still in the
Storage
section of your Supabase project, clickPolicies
and add the below policy:
-
Within the section called
translation
(the name of your bucket) clickNew policy
thenFor full costumization
and fill it in as shown below: -
Within the section called
Other policies under storage.objects
add the following three policies:
Next, you'll need to configure Stripe in order to handle test payments.
- Create a Stripe account if you don't have one yet
- Ensure you are in "Test Mode" by toggling the
Test Mode
switch at the top of the dashboard to theON
position.
- In Stripe's
Developers
section, navigate to the Webhooks tab and clickAdd endpoint
- Under
Endpoint URL
enter your deployment URL with/api/webhooks
appended to the end (e.g.,https://your-deployment-url.vercel.app/api/webhooks
). - Under
Select events to listen to
chooseSelect events
, toggle onSelect all events
and then clickAdd events
- Scroll to the bottom of the form and select
Add endpoint
- In the page that appears, under
Signing secret
clickreveal
and copy the secret. - Add this
Signing secret
as theSTRIPE_WEBHOOK_SECRET
environment variable in your Vercel settings.
Redeploy your application in Vercel for the new environment variables to activate. Go to your Vercel Dashboard
, find the Deployments
section, and choose Redeploy
from the overflow menu. Ensure "Use existing Build Cache" is not selected.
With the Stripe webhook setup, you can start creating your products in the Stripe Dashboard. Stripe Checkout supports billing a set amount at regular intervals. It does not support complex pricing structures like tiered pricing or per-seat billing.
- Set up branding in the Branding settings
- Set up the customer portal in the Customer Portal settings
In a terminal navigate to your project's root directory and enter the following command.
vercel login
vercel link
In a terminal navigate to your project's root directory and enter the following command.
vercel env pull .env.local
This command will create a new .env.local
file in your project folder.
- Install the Stripe CLI
- Link your Stripe account.
In a seperate terminal, run the below command to initiate local webhook forwarding
stripe listen --forward-to=localhost:3000/api/webhooks
Running this Stripe command will print a webhook secret (whsec_***
), to the console. Set STRIPE_WEBHOOK_SECRET
to this value in your .env.local
file.
In a separate terminal, navigate to your project's root directory and run the following commands to install dependencies and start the dev server
yarn
yarn dev
Open your web browser and visit http://localhost:3000 to view your application.
We embrace the collaborative spirit of the open-source community.
To suggest enhancements or submit changes:
- Fork the repository.
- Create a new branch from
dev
for your changes. - Commit your updates and push to your fork.
- Submit a pull request back to the
dev
branch of the original repository.
Your contributions are highly appreciated!
- Sync Labs Slack Community
- Sync Labs Docs
Translation AI is released under the MIT License.