It's example of integration with Deepgram using react.
Deepgram is external service to transcript speech from audio! (using AI, crazy stuff!)
Read more here: https://deepgram.com
Purpose is to use speech transcription to improve an react app accessibility. We provide extra way to input value!
- Help to provide input for people with disabilities
- Speed up a form filling
- Share expierience accross any device
- any device supporting modern browser
- react-native (mobile, TV, dekstop) as well!
Project was made as submission to DEV hackathlon, read more here
Post here: post
Project is built from two parts deepgram-proxy and deepgram-react
We need some backend to upload audio file and communicate with deepgram API.
- deepgram-proxy is a simple nodejs container with express.js to handler API requests.
- API allow to upload audio a file and return a transcript in return
- Backend communication to secure API key
Simple example how to integrate your react app with the proxy.
Yes! You can integrate any other app with the proxy! It's just REST API!
- Register deepgram account https://deepgram.com
- Generate API key in deepgram panel, more in docs
- Go to deepgram-proxy/.env-example
- Copy file as .env
- Set variable DEEPGRAM_API_KEY with your API key
In root dir, just execute:
docker-compose up -d
By default project will be available on ports:
http://localhost:3000 -> frontend
http://localhost:8080 -> proxy
If you would like to change ports, just edit .env file in root directory:
FRONTEND_PORT=3000
FRONTEND_NAME=deepgram-react
PROXY_PORT=8080
PROXY_NAME=deepgram-proxy
First start a proxy
# move to proxy folder
cd deepgram-proxy
npm install && npm start
next start a frontend
# move to frontend folder
cd deepgram-react
npm install && npm start
By default project will be available on ports:
http://localhost:3000 -> frontend
http://localhost:8080 -> proxy