{"id":13908649,"url":"https://github.com/zernonia/vista","last_synced_at":"2025-11-04T21:03:01.043Z","repository":{"id":65284136,"uuid":"578714506","full_name":"zernonia/vista","owner":"zernonia","description":"Add animated subtitle to your video automatically","archived":false,"fork":false,"pushed_at":"2023-01-09T06:37:18.000Z","size":4242,"stargazers_count":106,"open_issues_count":1,"forks_count":5,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-02-27T09:34:06.442Z","etag":null,"topics":["ffmpeg-wasm","nuxt3","supabase","unocss","vue3"],"latest_commit_sha":null,"homepage":"https://vistaeditor.com/","language":"Vue","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/zernonia.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2022-12-15T17:54:28.000Z","updated_at":"2025-02-05T02:25:54.000Z","dependencies_parsed_at":"2023-01-16T06:15:50.869Z","dependency_job_id":null,"html_url":"https://github.com/zernonia/vista","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zernonia%2Fvista","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zernonia%2Fvista/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zernonia%2Fvista/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zernonia%2Fvista/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/zernonia","download_url":"https://codeload.github.com/zernonia/vista/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":243815576,"owners_count":20352194,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["ffmpeg-wasm","nuxt3","supabase","unocss","vue3"],"created_at":"2024-08-06T23:02:53.370Z","updated_at":"2025-11-04T21:02:56.008Z","avatar_url":"https://github.com/zernonia.png","language":"Vue","funding_links":["https://www.buymeacoffee.com/zernonia"],"categories":["HarmonyOS","Vue"],"sub_categories":["Windows Manager"],"readme":"\u003cbr /\u003e\n\u003cp align=\"center\"\u003e\n  \u003ca href=\"https://github.com/zernonia/vista\"\u003e\n    \u003cimg src=\"public/logo.svg\" alt=\"Vista's Logo\" width=\"80\"\u003e\n  \u003c/a\u003e\n  \u003cbr /\u003e\n\n  \u003cp align=\"center\"\u003e\n    Automatic, Animated subtitle generation for\u003cbr\u003e short-form video! \n  \u003c/p\u003e\n\n  \u003cp align=\"center\"\u003e \n    \u003ca href=\"https://www.vistaeditor.com/\"\u003eView Demo\u003c/a\u003e\n    ·\n    \u003ca href=\"https://github.com/zernonia/vista/issues\"\u003eReport Bug\u003c/a\u003e\n    ·\n    \u003ca href=\"https://github.com/zernonia/vista/issues\"\u003eRequest Feature\u003c/a\u003e\n  \u003c/p\u003e\n\u003c/p\u003e\n\n\u003cbr/\u003e\n\n![vista - automatic, animated subtitle generation for short-form video](public/og.png)\n\n## Story\n\nVista is my Hackathon submission for [Supabase Launch week 6](https://supabase.com/launch-week). It was inspired by those animated subtitle while scrolling through Youtube Shorts, and I always wanted to play with [ffmpeg](https://ffmpeg.org/), and this serves as a good opportunity!\n\nThis ends up a super challenging task:\n\n1. I need to run ffmpeg for video encoding, but hosting a server will required a lot of coding \u0026 maintenance, thus resorting to use ffmpeg-wasm, which could be use on modern browser that supports wasm.\n\n2. Perform speech-to-text is not an easy task, to speed up MVP, I've utilized AssemblyAI API for the video transcription.\n\n3. Because speech-to-text is an async task, I've combined [Supabase Edge Function](https://github.com/zernonia/vista/tree/main/supabase/functions/transcribe-webhook) as webhook when the process is done, then use [Supabase Realtime](https://github.com/zernonia/vista/blob/main/pages/v/%5Bid%5D.vue#L8) to populate the subtitle.\n\n## Supabase Usage\n\n1. Supabase Auth - to handle user and their storage bucket\n2. Supabase DB - to store projects data\n3. Supabase Storage - to store user's video (with policies)\n4. Supabase Realtime - to populate the UI anytime when subtitle is ready\n5. Supabase Edge Function - trigger AssemblyAI transcription, and act as webhook\n\n## 🚀 Features\n\n- 🤩 Free\n- 📖 Open-Source\n\n### 🔨 Built With\n\n- [Nuxt 3](https://v3.nuxtjs.org/)\n- [Supabase](https://supabase.com)\n- [UnoCss](https://uno.antfu.me/)\n- [AssemblyAI](https://www.assemblyai.com/)\n- [FFmpeg.wasm](https://ffmpegwasm.netlify.app/)\n\n## 🌎 Setup\n\n### Prerequisites\n\nYarn\n\n- ```sh\n  npm install --global yarn\n  ```\n\n### Development\n\n1. Clone the repo\n   ```sh\n   git clone https://github.com/zernonia/vista.git\n   ```\n2. Install NPM packages\n   ```sh\n   cd vista\n   yarn install\n   ```\n3. Set up `.env` (check `.env.example`)\n4. Run local development instance\n   ```sh\n   yarn dev\n   ```\n\n### Supabase Database\n\n```sql\ncreate table users (\n  id uuid default uuid_generate_v4() primary key,\n  updated_at timestamp default now(),\n  username text,\n  full_name text,\n  avatar_url text\n);\n\ncreate table projects (\n  id uuid default uuid_generate_v4() primary key,\n  user_id uuid references users (id),\n  created_at timestamp default now(),\n  video_key text,\n  transcription_id text,\n  words ARRAY,\n  title text,\n  config json\n);\n\n\ncreate or replace function public.handle_new_user()\n  returns trigger as $$\n  begin\n    insert into public.users (id, avatar_url, username)\n    values (new.id, new.raw_user_meta_data-\u003e\u003e'avatar_url', new.raw_user_meta_data-\u003e\u003e'user_name';\n    return new;\n  end;\n  $$ language plpgsql security definer;\n\n\ncreate trigger on_auth_user_created\n  after insert on auth.users\n  for each row execute procedure public.handle_new_user();\n```\n\n## ➕ Contributing\n\nContributions are what make the open source community such an amazing place to be learn, inspire, and create. Any contributions you make are **greatly appreciated**.\n\n1. Fork the Project\n2. Create your Feature Branch (`git checkout -b feature/AmazingFeature`)\n3. Commit your Changes (`git commit -m 'Add some AmazingFeature'`)\n4. Push to the Branch (`git push origin feature/AmazingFeature`)\n5. Open a Pull Request\n\n## Acknowledgement\n\n1. [Nuxt 3 - Awesome framework](https://v3.nuxtjs.org/)\n1. [Supabase - Super easy setup (as always)](https://supabase.com)\n\n## Author\n\n- Zernonia ([@zernonia](https://twitter.com/zernonia))\n\nAlso, if you like my work, please buy me a coffee ☕😳\n\n\u003ca href=\"https://www.buymeacoffee.com/zernonia\" target=\"_blank\"\u003e\n    \u003cimg src=\"https://www.buymeacoffee.com/assets/img/custom_images/yellow_img.png\" alt=\"Logo\" \u003e\n  \u003c/a\u003e\n\n## 🔥 Contributors\n\n\u003ca href=\"https://github.com/zernonia/vista/graphs/contributors\"\u003e\n  \u003cimg src=\"https://contrib.rocks/image?repo=zernonia/vista\" /\u003e\n\u003c/a\u003e\n\n## 📜 License\n\nDistributed under the MIT License. See `LICENSE` for more information.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fzernonia%2Fvista","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fzernonia%2Fvista","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fzernonia%2Fvista/lists"}