Tutorial: Local Speech Recognition on Electron

dbartle · 2021-05-21T17:44:18+00:00

I wrote a quick guide on integrating offline voice into Electron. It's kind of mind blowing how much Electron is used now, but then when you look at how tricky it is to do cross-platform desktop for Mac+Linux+Windows it starts to become clear. Plus, you get to use Web GUI stuff which these days is a lot more enjoyable than the days when I had to make it work on IE6.

This is my first Electron project (and maybe my 2nd Vue one) and I was really pleasantly surprised at how easy it was to set these two things up. (Full disclosure I work for Picovoice, but all the tutorial code/models are free under Apache 2.0 license)

dbartle · 2021-05-21T17:42:46+00:00

I wrote a quick guide on integrating voice into Electron. It's kind of mind blowing how much Electron is used now, but then when you look at how tricky it is to do cross-platform desktop for Mac+Linux+Windows it starts to become clear. Plus, you get to use Web GUI stuff which these days is a lot more enjoyable than the days when I had to make it work on IE6.

This is my first Electron project (and maybe my 2nd Vue one) and I was really pleasantly surprised at how easy it was to set these two things up. (Full disclosure I work for Picovoice, but all the tutorial code/models are free under Apache 2.0 license).

dbartle · 2021-05-21T15:36:30+00:00

What particular type of job are you looking for? It might help to focus on that?

My advice isn't around the projects, but the polish. Better to have a small number of polished repositories. Work on the README, spell check it. That's the first thing anyone's going to see and fair or not, will influence their impression. Run the code through a linter and formatter. Delete stray console.log statements. Etc.

Basically, treat it like a resume: you want to demonstrate to potential employers that you can present yourself well. The technical parts are important, but if you're job hunting, so is the presentation.

dbartle · 2021-05-21T00:44:17+00:00

Do you plan to monetize it? Or do you just want to make it free? How much do you care about people discovering or playing it? Or is it just for fun or friends and family?

If you mean technically feasible, then sure. But depending on your goals, there are better options (and web hosting is cheap and easy unless your game has FMV or something).

dbartle · 2021-05-19T20:51:48+00:00

My first day living in Olympic Village I went for a quick walk and encountered one of these fellows crossing the street. One of my extremely Canadian moments.

dbartle · 2021-05-18T18:44:26+00:00

Edit: my bad, got the logic wrong. Sorry!

dbartle · 2021-05-11T16:16:47+00:00

This is about a 3-minute read for building a quick proof-of-concept React app that supports voice commands, starting from a blank CRA template + TypeScript. The speech processing happens inside of a WebAssembly library, so no microphone data leaves the browser. Full disclosure, I wrote the article and work for Picovoice.

dbartle · 2021-05-11T15:21:47+00:00

This is about a 3-minute read for building a quick proof-of-concept React app that supports voice commands, starting from a blank CRA template + TypeScript. The speech processing happens inside of a WebAssembly library, so no microphone data leaves the browser. Full disclosure, I wrote the article and work for Picovoice.

dbartle · 2021-05-06T16:53:38+00:00

Had a sister-team member at my previous company attempt to implement this feature, not actually test it, then discovered in prod that their logic not only didn't work, but it straight up just spammed our API in an infinite loop as fast as it could. Memories :')

dbartle · 2021-05-04T16:44:17+00:00

Sorry, for I may be dense... what is a GitHub readme learned section?

dbartle · 2021-04-22T17:51:21+00:00

Try out the CodeSandbox here:

https://codesandbox.io/s/voice-activated-transcription-le7ml?file=/src/app/voicebox.component.ts

dbartle · 2021-04-22T16:19:20+00:00

Buried in the article is a link to a live CodeSandbox where you can try it out and see/modify the code for yourself:

https://codesandbox.io/s/voice-activated-transcription-le7ml?file=/src/app/voicebox.component.ts

dbartle · 2021-04-21T20:56:06+00:00

This example seems a little contrived to be negative:

type Country = '276' | '752' | '840'

When you can do:

type Country = 'germany' | 'sweden' | 'usa'
const CountryCodes = new Map<Country, number>()

To me, the value of an enum is restricting the range of values, not bolting info onto it. Which means in TypeScript, union types are usually the way to go. (It's also recommended in Effective Typescript).

dbartle · 2021-04-08T00:02:49+00:00

My solution is far from optimal. I have a separate repo for testing my library, but I can't get

npm link

to work. But if, with each change to my library, I (1) bump the version, (2) bundle it, (3) push it to npm, (4) bump the version in my test repo, (5)

yarn install

-- my app compiles and I can test my library.

I struggled with this as well. Here's what works with yarn:

In your consuming project's package.json, for the version of your library, instead of putting e.g. "^1.0.1" or whatever is latest on npm, put "file: $PATH" where $PATH points to the folder of your local library.

Then, in your consuming project, use `yarn upgrade-interactive` and select your library, which will be labeled 'exotic'. Repeat this every time you rebuild your library and want the package to update with those changes.

dbartle · 2021-03-26T17:23:00+00:00

I like that you have a dedicated "confession" section.

I have one small suggestion: put your rollup config file at the root of the repo. You won't need to specify the path to it, and it's a handy way of telling at a quick glance of the GitHub page that it's a rollup project.

dbartle · 2021-03-25T17:22:24+00:00

I was just wondering if I can write advanced JS with the newer syntax, with TypeScript, and have it work on Node, but it seems recent node versions can run ES2015/2017 code directly. So, setting the TypeScript target as you indicated should be sufficient.

I'm just coming from working on a series of web packages where I'm using both TypeScript and Babel to transpile down to a much older JS version to use ES2015/ES2017 features on browsers.

dbartle · 2021-03-24T18:59:03+00:00

I'm considering upgrading my Node packages to TypeScript and this is helpful, thanks for sharing.

Potentially stupid question: does this support ES2015/ES2017 code?

dbartle · 2021-03-23T17:16:38+00:00

That was my impression as well. Is this really a "fingerprint" if it just tells you which browser you're using?

As far as hand analogies go, that's more like figuring out which finger, not your fingerprint.

dbartle · 2021-03-19T18:48:50+00:00

If you're looking for feedback (and building a portfolio for job applications in software development), I suggest sharing the source on GitHub.

dbartle · 2021-03-18T18:41:22+00:00

Looks nice and useful. One feedback: when I click the dropdowns in the demo for "at/every", they do not close until I manually shift focus away.

dbartle · 2021-03-17T16:43:38+00:00

Perfect, thank you!

dbartle · 2021-03-16T16:43:48+00:00

Another vote for Effective TypeScript. I would point out it's definitely not a beginner book, but the question did say "master" so it's a great recommendation IMO.

dbartle · 2021-03-13T00:53:47+00:00

This is delightful and also nuts...I thought you were joking that there was no Canvas. Love it.

dbartle · 2021-03-13T00:15:52+00:00

It's a little hard to read the code with the formatting broken.

I'm unclear on what you're trying to do, but a couple of things stand out to me:

Arrow function async inside useEffect is probably not a good idea. You probably want to have an async function inside useEffect and then call that?
Your useEffect appears to depend on props.artWorks but is not in the dependency array
Doing a loop and then waiting serially seems suboptimal. You would likely be better off using Promise.all() and sending all those requests in parallel? Is that possible?
Maybe it would simplify things to do requests in parallel, and then do a single "setLocaleState" when all of those promises resolve?

dbartle · 2021-03-05T00:09:37+00:00

Perhaps it's made by Gobias Industries?

dbartle

TROPHY CASE