Skip to content

alyu201/Reactalk

Repository files navigation



Reactalk

Getting started . How to use Reactalk

Welcome to Reactalk!

Reactalk is a VSCode extension that serves as a voice programming tool, aka. You can code using your voice. We have a wide selection of commands available and they come under 4 categories: Composition, Editing, Navigation and System.


Table of Contents
  1. Getting Started
  2. How to use Reactalk

📋 Getting Started

To get a local copy up and running, follow these steps:

Prerequisites

Software

  1. Node v14.0 or above
npm install npm@latest -g

# check for node version >14
node --version
  1. VSCode
  2. SoX v14.4.1 (for Windows users)

Services

  1. Setup a Google Cloud project by following the steps outlined here (Note: this will require a billing account for the Google Cloud service). Store the google credentials file for the Google Cloud project somewhere safely

Hardware

  1. Desktop USB microphone (recommended)
  2. Laptop/PC

(back to top)

Setup and run Reactalk for development

  1. Clone the repository to your local machine
 git clone https://github.com/alyu201/Reactalk.git
  1. Set the Google Cloud project credentials as an environment variable
  • Windows:
    • Add the GOOGLE_APPLICATION_CREDENTIALS env variable with the path to the credential keys json file as the value using the env field in the launch.json file in the .vscode folder. image
  • Mac:
    • When setting up the environment variables for Mac, it is better to set the environment varaible in the shell startup file (for example in the ~/.bashrc or ~/.profile file) so that the variable can be applied in future shell sessions. image
  1. Ensure you are at the root directory
  2. Run npm install on your terminal to install the required node dependencies.
npm install
  1. Due to issues with node-record-lpcm16 package, the index.js file of the package needs updating. Go to node_modules/node-record-lpcm16/recorders/index.js and on line 5, change the return require(...) to return require(./${recorderName}) instead

  2. Build and start the extension in an Extension Development Host window by pressing the F5 key

(back to top)

Package Reactalk as a .vsix extension file

  1. Follow the steps specified in Setup and run Reactalk for development to clone and setup the project.
  2. Install the vsce command-line tool to package Reactalk by executing the following in the terminal. More information can be found here.
npm install -g vsce
  1. Package Reactalk as an extension by executing the following in the terminal. This should produce a Reactalk extension .vsix file named reactalk-0.0.1.vsix in the root directory.
$ cd myExtension
$ vsce package
# myExtension.vsix generated

(back to top)

Install and run Reactalk as an extension locally

  1. Follow the instructions in the Package Reactalk as a .vsix extension file section to produce a .vsix file.
  2. To install and run Reactalk as an extension, navigate to the ‘Extensions’ tab of the sidebar in VSCode.

image

  1. Click on the three dots located at the top right side and click on 'Install from VSIX'.

image

  1. A file explorer dialogue will appear for choosing the .vsix file to install. Locate the reactalk-0.0.1.vsix file and press ‘install’.

image

  1. Reactalk is now installed as an extension locally and a new extension will appear in the sidebar of VSCode. If the displayed extension does not show up, have a look at the secondary sidebar or the toggle panel.

image

  1. To use Reactalk, refer to the How to use Reactalk section below for more details.

(back to top)

How to use Reactalk

  1. Ensure that you have a microphone available. This can be the system’s existing microphone or a USB plugin microphone.
  2. Open up Reactalk. Ensure that the extension is installed and enabled. To install and setup Reactalk as an extension on your machine locally, follow the steps in the Install and run Reactalk as an extension locally section of the Compendium/Documentation/Setup and run Reactalk.docx file

image

  1. You should see the setup from the Recommended setup section above. If not, refer to this section above to adjust.
  2. Click the start button (represented by the microphone icon) to begin speaking.

image

  • This should change the status to ‘started’:

image

  1. Begin talking! And the transcript should appear. For example, saying “go up” would produce this:

image

  1. To stop Reactalk, say ‘stop listening’:

image

(back to top)

About

VSCode extension tool for vocalising React web application development

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

 
 
 

Contributors