Forem: Shubham Bajaj

Vocode Setup for GenAI Voice Calls: A Guide for Non-Python Developers

Shubham Bajaj — Fri, 24 May 2024 17:51:37 +0000

Target Audience: This guide is designed for developers who are not primarily familiar with Python or its ecosystem, and want to set up Vocode for GenAI voice calls.

Introduction to Vocode and Project Tools
Project Setup and Dependency Management
Configuring Environment Variables and Ngrok
Setting Up the Telephony Server
Creating the Outbound Call Script
Additional Notes and Troubleshooting
References

1. Introduction to Vocode and Project Tools

Vocode is a powerful tool for creating AI-powered voice applications. To streamline the development process, we'll use:

Poetry: For managing project dependencies and virtual environments.
Pyproject.toml: A configuration file used by Poetry to define project details, Python version, and required libraries.

2. Project Setup and Dependency Management

Install Poetry: Follow the instructions on the Poetry installation page.
Create the Project:
```
poetry new project-name
```

Activate the Virtual Environment:

poetry config virtualenvs.create true
poetry shell

Specify the Python Version:
- Open pyproject.toml in your project directory.
- Add the following under [tool.poetry.dependencies]:
```
python = ">=3.9,<3.12"
```
- Update the lock file:
```
poetry lock --no-update
```

Install Dependencies:

poetry add redis^4.5.4 twilio^8.1.0 vocode==0.1.111 vonage^3.5.1 python-dotenv^1.0.0

Verify Installation:
- Create main.py and add:
```
print("Hello, GenAI")
```
- Run:
```
poetry run python main.py
```
- You should see "Hello, GenAI" printed in the console.

3. Configuring Environment Variables and Ngrok

Create the .env File:

Create a .env file in your project's root directory.

Add your credentials (replace placeholders with actual values):

BASE_URL=
DEEPGRAM_API_KEY=
OPENAI_API_KEY=
AZURE_SPEECH_KEY=
AZURE_SPEECH_REGION=
TWILIO_ACCOUNT_SID=
TWILIO_AUTH_TOKEN=
TWILIO_FROM_NUMBER=

Set Up Ngrok:
- Install Ngrok from https://ngrok.com/download.
- Set up your Ngrok AuthToken from https://dashboard.ngrok.com/get-started/your-authtoken.
- Run in a separate terminal:
```
ngrok http 3000
```
- Copy the provided ngrok URL (e.g., https://abcdef123456.ngrok.io) and paste it as your BASE_URL in .env, removing the https:// prefix and trailing slash.
- Image of ngrok terminal output

4. Setting Up the Telephony Server

Copy the Server Code: Get the code from this Gist: https://gist.github.com/bajajcodes/5722cade50a9867b98b246a2cb30ced4 and paste it into main.py.
Activate Your Virtual Environment:
```
poetry shell
```
Run the Server:
```
poetry run python main.py
```

Start the FastAPI Server (Add to main.py):

import uvicorn

if __name__ == "__main__":
uvicorn.run(app, host="localhost", port=port)

Run the Script Again:
```
poetry run python main.py
```

Image of Uvicorn Server Output
Image of ngrok accessing localhost server

5. Creating the Outbound Call Script

Set Up Redis:

docker run -dp 6379:6379 -it redis/redis-stack:latest

Create outbound_call.py: Copy the code from this Gist: https://gist.github.com/bajajcodes/718b598b26e146c4b6bbc784c1d2b1c0 and paste it into outbound_call.py.
Activate Your Virtual Environment:
```
poetry shell
```
Run the Script:
```
poetry run python outbound_call.py
```

Image of Script Console Output
Image of Server Logs

6. Additional Notes and Troubleshooting

Ngrok URL: Ensure the BASE_URL in .env matches the ngrok URL.
Endpoints: Access your FastAPI app at the ngrok URL or your BASE_URL. You can test endpoints like /inbound_call, /events, and /recordings using curl or a web browser.

7. References

Vocode Telephony Server Documentation: https://docs.vocode.dev/open-source/telephony
Vocode Telephony Server Code: https://github.com/vocodedev/vocode-python/tree/main/apps/telephony_app

Mastering Jest Configuration for React TypeScript Projects with Vite: A Step-by-Step Guide

Shubham Bajaj — Fri, 15 Dec 2023 18:27:34 +0000

1. First generate react typescript using vite

npm create vite@latest

2. Install dependancies

npm i jest @types/jest ts-jest --save-dev

3. Exclude test files from typescript type checking for production

Create tsconfig.prod.json and paste following contents into it.

touch tsconfig.prod.json

// tsconfig.prod.json
{
  "extends": "./tsconfig",
  "exclude": [
    "./src/__tests__/**",
    "./src/__mocks__/**",
    "./src/test-utils"
  ]
}

Exclude test files from typescript type checking when building for production, you don’t want a typescript error in your test file breaks your build in production.
—Nguyen Viet Hung, hung.dev

Use tsconfig.prod.json when building

# package.json
{
...,
"scripts":{
  ...,
  "build": "NODE_ENV=production tsc -p tsconfig.prod.json && vite build"
},
...
}

4. Add `test` script to `package.json`

// package.json
{
...,
"scripts":{
  ...,
  "test": "NODE_ENV=test jest"
},
...
}

5. Write a simple test

// src/App.test.tsx

describe('App', () => {
  it('should work as expected', () => {
    expect(1 + 1).toBe(2);
  });
});

Run the npm run test 🤞, and first test case 😃 passed. 🚀

node 'node_modules/.bin/jest' '/.../code/my-doc-test-app/src/App.test.tsx' -t 'App'
 PASS  src/App.test.tsx
  App
    ✓ should work as expected (1 ms)

Test Suites: 1 passed, 1 total
Tests:       1 passed, 1 total
Snapshots:   0 total
Time:        0.209 s
Ran all test suites matching /...\/code\/my-doc-test-app\/src\/App.test.tsx/i with tests matching "App".

6. Test the `App` component

// src/App.test.tsx
import { render } from '@testing-library/react';
import App from './App';

describe('App', () => {
  it('should work as expected', () => {
    render(<App />);
  });
});

Run the npm run test 🤞, and test failed. This error will show up.

node 'node_modules/.bin/jest' '/Users/satparkash/code/test-app/src/A
pp.test.tsx' -t 'App'
 FAIL  src/App.test.tsx
  ● Test suite failed to run

    SyntaxError: /Users/satparkash/code/test-app/src/App.test.tsx: Support for the experimental syntax 'jsx' isn't currently enabled (6:12):

      4 | describe('App', () => {
      5 |   it('should work as expected', () => {
    > 6 |     render(<App />);
        |            ^
      7 |   });
      8 | });
      9 |

    Add @babel/preset-react (https://github.com/babel/babel/tree/main/packages/babel-preset-react) to the 'presets' section of your Babel config to enable transformation.
    If you want to leave it as-is, add @babel/plugin-syntax-jsx (https://github.com/babel/babel/tree/main/packages/babel-plugin-syntax-jsx) to the 'plugins' section to enable parsing.

    Test Suites: 1 failed, 1 total
Tests:       0 total
Snapshots:   0 total
Time:        0.278 s
Ran all test suites matching /\/Users\/satparkash\/code\/test-app\/src\/App.test.tsx/i with tests matching "App".

The above ☝️ error message is indicating a syntax related to JSX in test file.
The error is saying that support for the syntax 'JSX' isn't currently enabled.

To resolve the issue we need to make sure that the JSX syntax is properly
configured for project, and also the jest. (Hint: Babel)

7. For JSX support, add babel presets and add .babelrc

Firstly Install dependancies

npm i @babel/preset-env @babel/preset-react @babel/preset-typescript --save-dev

Create .babelrc file at project root, and paste following contents into it.

touch .babelrc

//.babelrc
{
  "presets": [
    "@babel/preset-env",
    ["@babel/preset-react", { "runtime": "automatic" }],
    "@babel/preset-typescript"
  ]
}

8. Install testing library for react

By Now previous error will be gone and you will get new error message.

node 'node_modules/.bin/jest' '/Users/satparkash/code/test-app/src
/App.test.tsx' -t 'App'
 FAIL  src/App.test.tsx
  ● Test suite failed to run

    Cannot find module '@testing-library/react' from 'src/App.test.tsx'

    > 1 | import { render } from '@testing-library/react';
        | ^
      2 | import App from './App';
      3 |
      4 | describe('App', () => {

      at Resolver._throwModNotFoundError (node_modules/jest-resolve/build/resolver.js:427:11)
      at Object.require (src/App.test.tsx:1:1)

Test Suites: 1 failed, 1 total
Tests:       0 total
Snapshots:   0 total
Time:        0.231 s
Ran all test suites matching /\/Users\/satparkash\/code\/test-app\/src\/App.test.tsx/i with tests matching "App"

Now, you have to add libraries which will allow you to make things happen (access VDOM, interacting …. etc), And those libraries are “@testing-library/dom”, “@testing-library/jest-dom”, “@testing-library/react” and “@testing-library/user-event”
—Mhand

npm i @testing-library/dom @testing-library/jest-dom @testing-library/react @testing-library/user-event --save-dev

Now it's time to configure jest-environment. You will see another error message
saying Jest encountered an unexpected token, don't worry we are about to fix
it.

9. Let's Configure Jest

Firstly install following dependancies

npm i ts-node jest-environment-jsdom --save-dev

Create a file jest.config.ts at the root project, and paste following contents into it.

touch jest.config.ts

//jest.config.ts
export default {
  rootDir: 'src',
  preset: 'ts-jest',
  testEnvironment: 'jsdom',
  transform: {
    '^.+\\.tsx?$': 'ts-jest',
    // process `*.tsx` files with `ts-jest`
  },
  moduleNameMapper: {
    '\\.(gif|ttf|eot|svg|png)$': '<rootDir>/config/jest/fileMock.ts',
    '^.+\\.(css|less|scss|sass)$': '<rootDir>/config/jest/styleMock.ts',
  },
  setupFilesAfterEnv: ['./config/jest/setupTests.ts'],
  moduleFileExtensions: [
    // Place tsx and ts to beginning as suggestion from Jest team
    // https://jestjs.io/docs/configuration#modulefileextensions-arraystring
    'tsx',
    'ts',
    'web.js',
    'js',
    'web.ts',
    'web.tsx',
    'json',
    'web.jsx',
    'jsx',
    'node',
  ],
  modulePaths: ['<rootDir>/src'],
};

Create config/jest/styleMock.ts, config/jest/fileMock.ts to mock css and files.

// config/jest/styleMock.ts

module.exports = {};

// config/jest/fileMock.ts

export {}; //coment this if you ts-node to start complaining again
module.exports = 'test-file-stub';

Create config/jest/setupTests.ts, a file that runs before each test.

//config/jest/setupTests.ts

// jest-dom adds custom jest matchers for asserting on DOM nodes.
// allows you to do things like:
// expect(element).toHaveTextContent(/react/i)
// learn more: https://github.com/testing-library/jest-dom
import '@testing-library/jest-dom';

INFO

/**
 *
 * If imported(inside setupTests.ts):
 * import '@testing-library/jest-dom/extend-expect'
 * then we are required to map it inside `jest.config.ts` like this:
 * 

 * // jest.config.ts
 * {
 * ...,
 * moduleNameMapper: {
 * ...,
 *     '@testing-library/jest-dom/extend-expect': '@testing-library/jest-dom',
 * }
 * }
 */

By this moment, you can run the test successfully😎.

node 'node_modules/.bin/jest' '/Users/satparkash/code/test-app/src/App.test.tsx' -t 'App'
 PASS  src/App.test.tsx
  App
    ✓ should work as expected (12 ms)

Test Suites: 1 passed, 1 total
Tests:       1 passed, 1 total
Snapshots:   0 total
Time:        1.19 s
Ran all test suites matching /\/Users\/satparkash\/code\/test-app\/src\/App.test.tsx/i with tests matching "App".

Happy testing 😀

10. For Snapsot Testing [optional]

For snapshot testing add react-test-renderer

npm i react-test-renderer --save-dev

PS: I didnt' implemented snapshot testing 😄 Yet.

11. For import.meta' meta-property is only allowed when the '--module' option is... [error TS1343]

Error Message

error TS1343: The 'import.meta' meta-property is only allowed when the '--module' option is 'es2020', 'es2022', 'esnext', 'system', 'node16', or 'nodenext'.

          .get(import.meta.env.VITE_API_PATH + '/api/posts')

Install dependancy

npm install -D ts-jest-mock-import-meta

Change the transform to mock import.meta of vite

// jest.config.ts

export default {

  ...,
    transform: {
    '^.+\\.tsx?$': [
      'ts-jest',
      {
        diagnostics: {
          ignoreCodes: [1343],
        },
        astTransformers: {
          before: [
            {
              path: 'node_modules/ts-jest-mock-import-meta',
              options: {
                metaObjectReplacement: {
                  env: {
                    // Replicate as .env.local
                    VITE_API_PATH: 'http://localhost:3001',
                  },
                },
              },
            },
          ],
        },
      },
    ],
  },
  ...
}

References

Mastering JavaScript: Understanding TypeError vs ReferenceError and == vs ===

Shubham Bajaj — Mon, 13 Feb 2023 08:00:49 +0000

JavaScript is a powerful and flexible programming language, but it can be confusing for beginners. In this article, we will explore two common errors that developers face while coding in JavaScript: TypeError and ReferenceError, and how to avoid them. We will also take a deep dive into the difference between == and ===, two common comparison operators in JavaScript.

TypeError in JavaScript

A TypeError in JavaScript occurs when you try to perform an operation on an object that is not of the correct type. For example, trying to access a property of an undefined object or calling a function that is not a function.


let a;
console.log(a.name); 
// TypeError: Cannot read property 'name' of undefined


let a = "hello";
a(); // TypeError: a is not a function

To avoid TypeErrors, it is important to always check if an object is defined and of the correct type before trying to perform operations on it.

ReferenceError in JavaScript

A ReferenceError in JavaScript occurs when you try to access a variable that has not been declared. This is often caused by typo mistakes or forgetting to declare the variable.


console.log(b); // ReferenceError: b is not defined

To avoid ReferenceErrors, it is important to declare all the variables you need before using them and to double-check for typo mistakes.

== vs === in JavaScript

== and === are two comparison operators in JavaScript. The == operator compares values and returns true if they are equal, while the === operator compares both values and types and returns true only if both are equal.

For example:


let a = 5;
let b = "5";
console.log(a == b); // true
console.log(a === b); // false

It is important to use the === operator whenever possible, as it ensures that the comparison is both value and type-sensitive, avoiding unexpected results in your code.

In conclusion, understanding TypeError, ReferenceError, and the difference between == and === are crucial concepts for writing high-quality, bug-free code in JavaScript. Always check the type and declaration of your variables and objects before performing operations on them, and use the === operator whenever possible. Happy coding!

"A Beginner's Guide to Understanding Undefined, Functions, Console, and Console.log in JavaScript"

Shubham Bajaj — Mon, 13 Feb 2023 07:42:31 +0000

What is Undefined in JavaScript?
Why Does a Function When Called Returns Undefined?
What is Console and Console.log in JavaScript?
Why Does the Console Return Undefined on Executing the Log Method?

What is Undefined in JavaScript?

In JavaScript, undefined is a value that represents the absence of a value. It is a special value that indicates that a variable has been declared, but it has not been assigned a value.

For example:


let a;
console.log(a); // Output: undefined

In this example, the variable a is declared, but it has not been assigned a value, so it is considered to have the value undefined.

Why Does a Function When Called Returns Undefined?

In JavaScript, a function is a block of code that is designed to perform a specific task. When you call a function, it executes the code inside it, and then returns a value. If a function doesn't have a return statement, or if the return statement doesn't have a value, then the function returns undefined.

For example:


function hello() {
  console.log("Hello, World!");
}

hello(); // Output: "Hello, World!"
console.log(hello()); // Output: "Hello, World!" undefined

In this example, the hello function doesn't have a return statement, so it returns undefined.

What is Console and Console.log in JavaScript?

The console is a tool used by developers to debug their code. It is part of the JavaScript development environment and can be accessed in the browser's developer tools. The console.log method is used to log information to the console.

For example:


let a = 10;
console.log(a); // Output: 10

In this example, the console.log method is used to log the value of the variable a, which is 10, to the console.

Why Does the Console Return Undefined on Executing the Log Method?

The console.log method displays undefined when you try to log a value that doesn't have a defined value.

For example:


let a;
console.log(a); // Output: undefined

In this example, the variable a is declared but not initialized, meaning it doesn't have a value. When we try to log a to the console, it shows undefined because that's the value of the variable.

In conclusion, understanding the concepts of undefined, functions, console, and console.log is important for debugging your code and making sure it works as intended.

Forem: Shubham Bajaj

Vocode Setup for GenAI Voice Calls: A Guide for Non-Python Developers

Table of Contents

1. Introduction to Vocode and Project Tools

2. Project Setup and Dependency Management

3. Configuring Environment Variables and Ngrok

4. Setting Up the Telephony Server

5. Creating the Outbound Call Script

6. Additional Notes and Troubleshooting

7. References

Mastering Jest Configuration for React TypeScript Projects with Vite: A Step-by-Step Guide

1. First generate react typescript using vite

2. Install dependancies

3. Exclude test files from typescript type checking for production

4. Add `test` script to `package.json`

5. Write a simple test

6. Test the `App` component

7. For JSX support, add babel presets and add .babelrc

8. Install testing library for react

9. Let's Configure Jest

10. For Snapsot Testing [optional]

11. For import.meta' meta-property is only allowed when the '--module' option is... [error TS1343]

References

Mastering JavaScript: Understanding TypeError vs ReferenceError and == vs ===

TypeError in JavaScript

ReferenceError in JavaScript

== vs === in JavaScript

"A Beginner's Guide to Understanding Undefined, Functions, Console, and Console.log in JavaScript"

Table Of Contents

What is Undefined in JavaScript?

Why Does a Function When Called Returns Undefined?

What is Console and Console.log in JavaScript?

Why Does the Console Return Undefined on Executing the Log Method?

Forem: Shubham Bajaj

Vocode Setup for GenAI Voice Calls: A Guide for Non-Python Developers

Table of Contents

1. Introduction to Vocode and Project Tools

2. Project Setup and Dependency Management

3. Configuring Environment Variables and Ngrok

4. Setting Up the Telephony Server

5. Creating the Outbound Call Script

6. Additional Notes and Troubleshooting

7. References

Mastering Jest Configuration for React TypeScript Projects with Vite: A Step-by-Step Guide

1. First generate react typescript using vite

2. Install dependancies

3. Exclude test files from typescript type checking for production

4. Add test script to package.json

5. Write a simple test

6. Test the App component

7. For JSX support, add babel presets and add .babelrc

8. Install testing library for react

9. Let's Configure Jest

10. For Snapsot Testing [optional]

11. For import.meta' meta-property is only allowed when the '--module' option is... [error TS1343]

References

Mastering JavaScript: Understanding TypeError vs ReferenceError and == vs ===

TypeError in JavaScript

ReferenceError in JavaScript

== vs === in JavaScript

"A Beginner's Guide to Understanding Undefined, Functions, Console, and Console.log in JavaScript"

Table Of Contents

What is Undefined in JavaScript?

Why Does a Function When Called Returns Undefined?

What is Console and Console.log in JavaScript?

Why Does the Console Return Undefined on Executing the Log Method?

4. Add `test` script to `package.json`

6. Test the `App` component