Revolutionize Your Workflow with VoxKraken: A Google Extension for Speaking and Chatting with GPT-3 - Part 1
Tags: javascript, tutorial, productivity, webdev
Published: 2023-02-20 07:33:13


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wzcixiisehi50b0oqg75.png)

**ATTENTION:** This extension can read the text, only when you pause Adblock

GPT-3 is an amazing tool, but sometimes it can be distracting to use when you need to find information quickly. While it certainly saves time, what if you could have an AI partner like Tony Stark's JARVIS? I know I do, and I'm sure I'm not alone. I dream of having a wise man or woman on my second screen who can answer all of my questions, just like when I was a kid and wanted to ask everything out loud. That's where the idea for this solution came from.

## Developing Your AI Assistant's Personality: The First Step to Creating a Unique and Engaging User Experience

> “Don’t wait for inspiration. It comes while working." - Henri Matisse

Generating new ideas is always a challenge, but fortunately, we now have some amazing tools to help us. That's why I turned to **Chat GPT** to assist me in finding the perfect name for my assistant. After receiving a list of names, one stood out as a perfect fit: **"VoxKraken"**. This name sounds both impressive and memorable, which is exactly what I was looking for. I'm excited to continue my journey and generate other key visuals like logos and images along the way by using **Midjourney**.

## Designing Your AI Assistant: The Second Step to Creating a Unique and Memorable User Experience"


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/uqj4kocvh57mc8ypnurg.png)

> "I really believe that everyone has a talent, ability, or skill that he can mine to support himself and to succeed in life." - Dean Koontz

In my quest to create a seamless user experience, I've decided to add my AI assistant directly onto the Google page. While you can add your assistant anywhere you'd like, I believe that Google provides the perfect platform. With innovative tools like OpenAI and Chat GPT at our disposal, there are many ways to create an effective and engaging interface. In this article, we'll explore how to design an interface that maximizes the benefits of these tools and provides a seamless experience for users.


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4qdbs6x19y17bhvqqb0s.png)

The **drawKrakenAssistant** function is responsible for adding the Kraken assistant to your Google web page. It's a simple process that involves adding some interesting generated header pictures (if desired) and two columns for displaying the questions and answers text. In this example, you can walk through the steps required to implement this function and customize the interface to provide a unique and engaging experience for your users.

## Teaching Assistant to Listen: The First Step in Developing Speech Recognition for Kraken


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5rnq018azjfdyiz9jva6.png)

> “To say that a person feels listened to means a lot more than just their ideas get heard. It's a sign of respect. It makes people feel valued.” - Deborah Tannen, Georgetown University

For the next step, we will be implementing a **SpeechRecognition** function using the library called SpeechRecognition. This library is both free and easy to set up. We will begin by creating a simple listener that can capture our speech. Once the listener captures the text, we will ask our Kraken to read it out loud and wait until the reading is finished.


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/y8zn27gn0xxn5rbj7s78.png)

## Unleash the Power: The Third Step - Teaching Our Kraken to Speak with Confidence

This part is also relatively straightforward. We will be utilizing the SpeechSynthesis library for our Kraken to speak. Here's the algorithm:

- We define our new synthesis and gather all available voices. 

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1wx80hghuo92pxl5069s.png)


- Next, we set up the desired voice and configure it accordingly.
 
- Finally, we will call this in a function that generates a question and have our Kraken read it aloud.


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/klfds7l6alx6gmn5gywb.png)


**Unlocking Intelligence: The Last Step - Teaching Our Kraken to Think Like a Smart Person**

In the final step of our process, we will be utilizing the OpenAI model **'text-davinci-003'**, which is the core of Chat GPT. This model is a state-of-the-art language processing tool that has been trained on massive amounts of text data, enabling it to generate human-like responses to a wide range of queries. By leveraging the power of this AI technology, we can teach our Kraken to think and respond like a human being.

To connect to OpenAI and access the 'text-davinci-003' model, we will need to set some configurations. These configurations will include things like the authentication credentials required to access the API, as well as any specific settings related to our particular use case.

Once we have established a connection and configured the settings, we can then pose a question to the model and receive a response. The 'text-davinci-003' model is incredibly versatile and can answer questions on a wide range of topics, making it an excellent tool for teaching our Kraken to think critically and respond intelligently to a variety of situations.

Overall, by leveraging the power of AI and the OpenAI 'text-davinci-003' model, we can empower our Kraken with the ability to process and respond to information in a way that closely mimics human thought processes.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9tff8u6k0qxmw3u3nx2x.png)




## Meet VoxKraken: Your New Smart Friend Who Can Listen and Respond with Voice Technology

Although our new assistant isn't perfect yet, it's a start. Sometimes it struggles with understanding my pronunciation, and longer questions can be a challenge, but that's to be expected when using simple, free tools to build it. The important thing is that I've proven the concept - that it's possible to build such technology in just one evening. Now, I can quickly generate a list of ideas or learn how to use a new node package, get inspired by a daily script for senior developers, or even have it write a message from my manager with relevant context. It's faster, which means I can continue writing code without getting distracted.


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/i6l724xxke02noixoeh4.png)