About The Project

This single-page website is made with Vue.js v3 and Vite 3, and Tailwind CSS and daisyUI for the user interface. The project is fairly simple, it’s to make use of Web Speech API and using an external API to translate the transcriptions. Read Translate API section below for explanations regarding the translation API.

Note: The Web Speech API is not supported by every major browsers, this is why I explicitly mentioned Google Chrome and not the others, for compatibilities check this page by MDN.

Translate API

The API uses @vitalets/google-translate-api package for translation. To host your own API for translation, copy the api folder and deploy it on Vercel.

To make your own implementation of the API for your platform, make sure to follow these rules:

• Check for CORS headers to allow your website to fetch the API
• POST request endpoint with the following body:
  • text for the text to translate
  • to for target language
• POST request endpoint must return the value from @vitalets/google-translate-api‘s translate function

Getting Started

You can try the demo here https://sglkc.github.io/live-translate.

Or follow these steps below to get the website running on your local machine:

1. Clone the repo

git clone https://github.com/sglkc/live-translate.git
cd live-translate

2. Install npm dependencies

npm install

3. Copy or rename .env.example to .env
4. Enter your translate API endpoint in .env (You may also want to change translation interval here)
5. Compile and minify for production

npm run build

Contributing

Every contributions are greatly appreciated! You can start by forking this repository then create a pull request.

1. Fork the repository
2. Create your branch (git checkout -b new-feature)
3. Commit your changes (git commit -m 'feat: add new command')
4. Push to the branch (git push origin new-feature)
5. Open a pull request

License

Distributed under the MIT License. See LICENSE for more information.

GitHub

View Github