Skip to content

React app using the Watson Speech to Text service to transform voice audio into written text.

Notifications You must be signed in to change notification settings

watson-developer-cloud/speech-to-text-code-pattern

Repository files navigation

# DEPRECATED

This code pattern and repo is no longer supported. You can find the newly supported Speech to Text Code Pattern here.

Speech to Text Code Pattern 🗣

Sample React app for playing around with the Watson Speech to Text service.

Travis semantic-release

Demo: https://speech-to-text-code-pattern.ng.bluemix.net/

Flow

architecture

  1. User supplies an audio input to the application (running locally, in the IBM Cloud or in IBM Cloud Pak for Data).
  2. The application sends the audio data to the Watson Speech to Text service through a WebSocket connection.
  3. As the data is processed, the Speech to Text service returns information about extracted text and other metadata to the application to display.

Prerequisites

  1. Sign up for an IBM Cloud account.
  2. Download the IBM Cloud CLI.
  3. Create an instance of the Speech to Text service and get your credentials:
    • Go to the Speech to Text page in the IBM Cloud Catalog.
    • Log in to your IBM Cloud account.
    • Click Create.
    • Click Show to view the service credentials.
    • Copy the apikey value.
    • Copy the url value.

Cloud Pak for Data

To use this code pattern with a Speech to Text instance provisioned on Cloud Pak for Data, you can use your CPD username and password credentials or an access_token to authenticate your requests. You also need the service url as described here.

Another important thing to note is that this code pattern assumes that you're using a valid SSL certificate for your CPD cluster. If not, you'll receive transcription errors. If you'd still like to use the app with an invalid certificate, you'll need to look up your browser-specific way to ignore these certificate errors. Do note that this is very insecure though!

Configuring the application

Depending on where your service instance is you may have different ways to download the credentials file.

Need more information? See the authentication wiki.

Automatically

Copy the credential file to the application folder.

Cloud Pak for Data

CPD

Public Cloud

public

Manually

  1. In the application folder, copy the .env.example file and create a file called .env:

    cp .env.example .env
    
  2. Open the .env file and add the service credentials depending on your environment.

    Example .env file that configures the apikey and url for a Speech to Text service instance hosted in the US South region:

    SPEECH_TO_TEXT_APIKEY=12345abcde
    SPEECH_TO_TEXT_URL=https://stream.watsonplatform.net/speech-to-text/api
    
    • CPD using username and password: If your service instance is running in Cloud Pak for Data and you want to use username and password credentials, add the following variables to the .env file.

      SPEECH_TO_TEXT_USERNAME=admin
      SPEECH_TO_TEXT_PASSWORD=password
      SPEECH_TO_TEXT_URL=https://{cpd-url}:{cpd-port}/speech-to-text/api
      
    • CPD using access token: If your service instance is running in Cloud Pak for Data and you want to use the access_token from the service instance detail page, add the following:

      SPEECH_TO_TEXT_BEARER_TOKEN=eyJhbGciOiJSUzI1NiIsInR5cCI6IkpXVCJ9.ey...
      SPEECH_TO_TEXT_URL=https://{cpd-url}:{cpd-port}/speech-to-text/api
      

Running locally

  1. Install the dependencies

    npm install
    
  2. Build the application

    npm run build
    
  3. Run the application

    npm run dev
    
  4. View the application in a browser at localhost:3000

Deploying to IBM Cloud as a Cloud Foundry Application

Click on the button below to deploy this demo to the IBM Cloud.

Deploy to IBM Cloud

  1. Build the application

    npm run build
    
  2. Login to IBM Cloud with the IBM Cloud CLI

    ibmcloud login
    
  3. Target a Cloud Foundry organization and space.

    ibmcloud target --cf
    
  4. Edit the manifest.yml file. Change the name field to something unique. For example: - name: my-app-name.

  5. Deploy the application

    ibmcloud app push
    
  6. View the application online at the app URL, for example: https://my-app-name.mybluemix.net

Tests

Unit tests

Run unit tests with:

npm run test:components

See the output for more info.

Integration tests

First you have to make sure your code is built:

npm run build

Then run integration tests with:

npm run test:integration

Directory structure

.
├── app.js                      // Express routes
├── config                      // Express configuration
│   ├── error-handler.js
│   ├── express.js
│   └── security.js
├── package.json
├── public                      // Static resources
├── server.js                   // Entry point
├── test                        // Tests
└── src                         // React client
    └── index.js                // App entry point

License

This sample code is licensed under the MIT License.

Open Source @ IBM

Find more open source projects on the IBM Github Page

About

React app using the Watson Speech to Text service to transform voice audio into written text.

Resources

Stars

Watchers

Forks

Packages

No packages published