Init app

.github/workflows/labeler.yml

@@ -1,6 +1,7 @@
 name: "Pull Request Labeler"
+
 on:
-- pull_request_target
+  - pull_request_target
 
 jobs:
   labeler:
@@ -9,4 +10,4 @@ jobs:
       pull-requests: write
     runs-on: ubuntu-latest
     steps:
-    - uses: actions/labeler@v5
+      - uses: actions/labeler@v5

.github/workflows/test-app.yml

@@ -0,0 +1,113 @@
+name: Test app
+
+on:
+  pull_request:
+    paths:
+      - "app/**"
+
+env:
+  CACHE_PATH: |
+    app/node_modules
+
+defaults:
+  run:
+    working-directory: ./app
+
+jobs:
+  # build cache for rest of jobs
+  install-cache:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@v4
+
+      - name: Set up Bun
+        uses: oven-sh/setup-bun@v1
+
+      - if: runner.debug == '1'
+        uses: mxschmitt/action-tmate@v3
+
+      - name: Install packages
+        run: bun install
+
+      - name: Define cache key
+        id: define-key
+        run: echo "key=${{ hashFiles('app/bun.lockb') }}" >> $GITHUB_OUTPUT
+
+      - name: Store cache
+        uses: actions/cache@v4
+        with:
+          path: ${{ env.CACHE_PATH }}
+          key: ${{ steps.define-key.outputs.key }}
+
+    outputs:
+      cache-key: ${{ steps.define-key.outputs.key }}
+
+  # test that app can build without issues
+  test-build:
+    runs-on: ubuntu-latest
+    needs: install-cache
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@v4
+
+      - name: Set up Bun
+        uses: oven-sh/setup-bun@v1
+
+      - name: Restore cache
+        uses: actions/cache@v4
+        with:
+          path: ${{ env.CACHE_PATH }}
+          key: ${{ needs.install-cache.outputs.cache-key }}
+
+      - if: runner.debug == '1'
+        uses: mxschmitt/action-tmate@v3
+
+      - name: Run test
+        run: bun run build
+
+  # test that app has no typescript errors
+  test-types:
+    runs-on: ubuntu-latest
+    needs: install-cache
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@v4
+
+      - name: Set up Bun
+        uses: oven-sh/setup-bun@v1
+
+      - name: Restore cache
+        uses: actions/cache@v4
+        with:
+          path: ${{ env.CACHE_PATH }}
+          key: ${{ needs.install-cache.outputs.cache-key }}
+
+      - if: runner.debug == '1'
+        uses: mxschmitt/action-tmate@v3
+
+      - name: Run test
+        run: bun run test:types
+
+  # test that app is properly formatted and linted
+  test-lint:
+    runs-on: ubuntu-latest
+    needs: install-cache
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@v4
+
+      - name: Set up Bun
+        uses: oven-sh/setup-bun@v1
+
+      - name: Restore cache
+        uses: actions/cache@v4
+        with:
+          path: ${{ env.CACHE_PATH }}
+          key: ${{ needs.install-cache.outputs.cache-key }}
+
+      - if: runner.debug == '1'
+        uses: mxschmitt/action-tmate@v3
+
+      - name: Run test
+        run: bun run test:lint

.github/workflows/update-data.yml

@@ -0,0 +1,33 @@
+name: Update app data
+
+on:
+  pull_request:
+  workflow_dispatch:
+
+defaults:
+  run:
+    working-directory: ./app
+
+jobs:
+  update:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@v4
+
+      - name: Set up Bun
+        uses: oven-sh/setup-bun@v1
+
+      - if: runner.debug == '1'
+        uses: mxschmitt/action-tmate@v3
+
+      - name: Install packages
+        run: bun install
+
+      - name: Run update
+        run: bun run update
+
+      - name: Commit updated data
+        uses: stefanzweifel/git-auto-commit-action@v5
+        with:
+          commit_message: "Update data"

README.md

@@ -1,13 +1,38 @@
 ## 3Blue1Brown captions
 
-This repository contains captions for videos on [3blue1brown](https://www.youtube.com/3blue1brown).
-The files of the form year/video-id/language/sentence_translations.json are used to automatically create subtitles, and the goal is to use them to create automatic dubbing as well.
-As a proof of concept for the aim here, on [this video](https://youtu.be/cy8r7WSuT1I), click the gear icon, and change the audio track to "Korean", or take a look a [this one](https://youtu.be/YtkIWDE36qU), and try the audio tracks in French, Greman, Hindi or Spanish.
+This repository contains translations for videos on [3blue1brown](https://www.youtube.com/3blue1brown). To review a given translation, or to submit corrections, visit [translate.3blue1brown.com](https://translate.3blue1brown.com/).
 
-Most of this repo was formed with a script that first used Whisper to transcribe video narration into English with punctuation and then used a translation API to translate that script sentence-by-sentence, recording the timings.
-Machine translation is often far from perfect, so I'll only feel comfortable with the final results here if those translations have been looked over by a native speaker.
+These translations are used to create subtitles, and those that have undergone a full review will be used to make automatic dubs. As a proof of concept for auto-dubbing, take a look at [this video](https://youtu.be/cy8r7WSuT1I), click the gear icon, and change the audio track to "Korean", or take a look a [this one](https://youtu.be/YtkIWDE36qU), and try the audio tracks in French, Greman, Hindi or Spanish.
+
+This repo was initially formed with a script that first used Whisper to transcribe video narration into English, recording the time stamps of each word, and then a first pass for translations was made using either Google Translate or DeepL. Machine translation is often far from perfect, though, so I'll only feel comfortable with the final results here if those translations have been looked over by a native speaker.
 
 ### How to help
 
-We're figuring out the best way to incorporate community contributions.
-If you'd like to help out, it might be best to hold off until a proper system is in place, and note your interest in this [Google form](https://forms.gle/AR8YQPL1USxhM5989), or to join [this discord](https://discord.gg/MSKzxDgTGE).
+- Go to [translate.3blue1brown.com](https://translate.3blue1brown.com/).
+- Navigate to a particular video and language you would like to edit.
+- For each sentence, you can either edit the translation or click the thumbs up to indicate that it sounds natural as it is.
+    - Optionally, if you ensure translated sentences that are marked as too long are abbreviated to fit within the time constraint, this will help to ensure an auto-dubbing can be created smoothly.
+    - If you see a "legacy translation" below a line, this comes from community contributions back in the days when YouTube allowed people to submit subtitles. The timings often don't align perfectly, but hopefully, they offer helpful suggestions.
+- When you've finished with the edits you wanted to make, enter your name, and click submit.
+
+#### What happens after submitting?
+
+A pull request is created on this repository with your changes that will be reviewed. If you're unfamiliar with GitHub and pull requests, don't worry! You don't have to do anything more. If you _are_ familiar with pull requests, another very helpful way to contribute is to look over the ones here in your language and offer a review or feedback.
+
+Once your edits are reviewed and approved, a script will be run to turn it into a captions file and upload it to YouTube, giving you attribution in the description for your contribution. 
+
+If a video is considered completely reviewed, separate scripts will be run to create the automatic dubbing and upload it to YouTube.  _Note, we're still iterating on this, so it may take a little time to work out the kinks._
+
+A video is considered completely reviewed and ready for auto-dubbing if:
+- Each translated sentence has been either edited or given a thumbs-up
+- Each translated sentence fits within the time that the original English sentence occupies. 
+
+
+### Principles
+- **Bias to what's natural**. Don’t worry about translations being word-for-word reflections of the original. Instead, it’s best to follow the spirit of the original but ensure the result sounds natural and fluent. If an English idiom or turn of phrase doesn't make sense in a given language, don't hesitate to change things completely.
+- **Briefer is better**. Because creating an auto-dubbing requires that translations can be spoken in a fixed time interval, to match the original video, the default translation length may often be too long. Feel free to cut out words and phrases that are not essential, or to rephrase them entirely in to capture the spirit of the original in a different way.
+- **Informal > formal**. For languages with choices of formality in the second person, or similar grammatical constructs, it's better to stay informal. The feeling should be one of a personal and friendly conversation between 
+
+If you run into problems, or if you want to request the creation of a translation file for a new language on a particular video, feel free to create an [issue on this repository](https://github.com/3b1b/captions/issues).
+
+To discuss other nuances, and to coordinate with your language's community, you can join [this discord](https://discord.gg/MSKzxDgTGE).

app/.env

@@ -0,0 +1,3 @@
+VITE_TITLE=3Blue1Brown Translations
+VITE_DESCRIPTION=Community contributed translations for 3Blue1Brown content.
+VITE_URL=http://translation.3blue1brown.com/

app/.eslintignore

@@ -0,0 +1,25 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+!.vscode/settings.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?

app/.eslintrc

@@ -0,0 +1,17 @@
+{
+  "root": true,
+  "env": { "browser": true, "es2020": true },
+  "extends": [
+    "eslint:recommended",
+    "plugin:@typescript-eslint/recommended",
+    "plugin:react-hooks/recommended",
+    "plugin:jsx-a11y/recommended"
+  ],
+  "ignorePatterns": ["dist"],
+  "parser": "@typescript-eslint/parser",
+  "plugins": ["react-refresh", "prettier"],
+  "rules": {
+    "prettier/prettier": "warn",
+    "@typescript-eslint/no-unused-vars": "warn"
+  }
+}

app/.gitignore

@@ -0,0 +1,3 @@
+node_modules
+dist
+.DS_Store

app/.prettierignore

@@ -0,0 +1,2 @@
+node_modules
+dist

app/.prettierrc

@@ -0,0 +1,16 @@
+{
+  "plugins": [
+    "@ianvs/prettier-plugin-sort-imports",
+    "prettier-plugin-css-order"
+  ],
+  "importOrder": [
+    "^react",
+    "^[a-zA-Z]",
+    "^@[a-zA-Z]",
+    "^@/",
+    "^/",
+    "^./",
+    "^../"
+  ],
+  "cssDeclarationSorterOrder": "smacss"
+}

app/README.md

@@ -0,0 +1,23 @@
+# Web app frontend
+
+This project was scaffolded using Vite, and has the following key features:
+
+- React 18
+- TypeScript, for static type checking
+- ESLint, for code quality
+- Prettier, for code formatting
+
+## Requirements
+
+- [Bun](https://bun.sh/)
+
+## Commands
+
+| Command           | Description                                       |
+| ----------------- | ------------------------------------------------- |
+| `bun install`     | Install packages                                  |
+| `bun run dev`     | Start local dev server with hot-reloading         |
+| `bun run build`   | Build production version of app                   |
+| `bun run preview` | Serve built version of app (must run build first) |
+| `bun run lint`    | Fix linting and formatting                        |
+| `bun run test`    | Run tests                                         |