update READMEs

OvidijusParsiunas · Aug 5, 2023 · 25b72c3 · 25b72c3
1 parent e740fee
commit 25b72c3
Show file tree

Hide file tree

Showing 21 changed files with 442 additions and 338 deletions.
diff --git a/.gitignore b/.gitignore
@@ -1,2 +1,3 @@
 node_modules
-dist
+dist
+demo
diff --git a/README.md b/README.md
@@ -24,10 +24,10 @@ const targetElement = document.getElementById('target-element');
 SpeechToElement.toggle("webspeech", {element: targetElement});
 ```
 
-[CDN](https://cdn.jsdelivr.net/gh/ovidijusparsiunas/speech-to-element@master/component/bundle/index.js):
+[CDN](https://cdn.jsdelivr.net/gh/ovidijusparsiunas/speech-to-element@master/component/bundle/index.min.js):
 
 ```
-<script type="module" src="https://cdn.jsdelivr.net/gh/ovidijusparsiunas/speech-to-element@master/component/bundle/index.js"></script>
+<script type="module" src="https://cdn.jsdelivr.net/gh/ovidijusparsiunas/speech-to-element@master/component/bundle/index.min.js"></script>
 ```
 
 ```
@@ -36,7 +36,7 @@ window.SpeechToElement.toggle("webspeech", {element: targetElement});
 ```
 
 When using Azure, you will also need to install its speech [SDK](https://www.npmjs.com/package/microsoft-cognitiveservices-speech-sdk). Read more in the [Azure SDK](#floppy_disk-azure-sdk) section. <br />
-Make sure to checkout the [`examples`](https://github.com/OvidijusParsiunas/speech-to-element/tree/main/examples) directory to browse templates for [`React`](https://github.com/OvidijusParsiunas/speech-to-element/tree/main/examples/ui), [`Next.js`](https://github.com/OvidijusParsiunas/speech-to-element/tree/main/examples/nextjs) and more.
+Make sure to checkout the [examples](https://github.com/OvidijusParsiunas/speech-to-element/tree/main/examples) directory to browse templates for [React](https://github.com/OvidijusParsiunas/speech-to-element/tree/main/examples/ui), [Next.js](https://github.com/OvidijusParsiunas/speech-to-element/tree/main/examples/nextjs) and more.
 
 ### :beginner: API
 
@@ -231,6 +231,8 @@ SpeechToElement.toggle("azure", {
 });
 ```
 
+<br />
+
 Example server templates for the `retrieveToken` property:
 
 | Express                                                                                                                                                                                                                                        | Nest                                                                                                                                                                                                                                       | Flask                                                                                                                                                                                                                                        | Spring                                                                                                                                                                                                                                               | Go                                                                                                                                                                                                                              | Next                                                                                                                                                                                                                                  |
@@ -239,6 +241,12 @@ Example server templates for the `retrieveToken` property:
 
 <br />
 
+Location of `subscriptionKey` and `region` details in Azure Portal:
+
+<img width="987" src="./assets/azure-credentials.png" alt="Credentials location in Azure Portal">
+
+<br />
+
 ### :floppy_disk: Azure SDK
 
 To use the [Azure Cognitive Speech Services API](https://learn.microsoft.com/en-us/azure/ai-services/speech-service/speech-to-text), you will need to add the official [Azure Speech SDK](https://www.npmjs.com/package/microsoft-cognitiveservices-speech-sdk) into your project and assign it to the `window.SpeechSDK` variable. Here are some simple ways you can achieve this:
@@ -286,9 +294,7 @@ Examples:
 
 Example React project that uses a package bundler. It should work similarly for other UI frameworks:
 
-// WORK - examples
-
-[Click for Live Example](https://stackblitz.com/edit/stackblitz-starters-u6bayx?file=src%2FApp.tsx)
+[Click for Live Example](https://stackblitz.com/edit/stackblitz-starters-ujkq7j?file=src%2FApp.tsx)
 
 VanillaJS approach with no bundler (this can also be used as fallback if above doesn't work):
 

diff --git a/assets/azure-credentials.png b/assets/azure-credentials.png
diff --git a/component/README.md b/component/README.md
diff --git a/examples/README.md b/examples/README.md
@@ -1,17 +1,15 @@
-// WORK - refactor
+<img src="../assets/banner-white.png" alt="Logo">
 
-![Deep Chat](../assets/readme/all-servers.png)
-
-This directory contains code examples for setting up your own server to connect with [Deep Chat](https://www.npmjs.com/package/deep-chat).
+This directory contains examples for setting up [Speech to Element](https://www.npmjs.com/package/speech-to-element) with [React](https://github.com/OvidijusParsiunas/speech-to-element/tree/main/examples/ui), [Next.js](https://github.com/OvidijusParsiunas/speech-to-element/tree/main/examples/nextjs) and server templates for [Azure](https://learn.microsoft.com/en-us/azure/ai-services/speech-service/speech-to-text).
 
 ### :computer: Local setup
 
 If you are downloading the project via `git clone` - we advise you to use shallow cloning with the use of the [--depth 1](https://www.perforce.com/blog/vcs/git-beyond-basics-using-shallow-clones) option to reduce its size:
 
 ```
-git clone --depth 1 https://github.com/OvidijusParsiunas/deep-chat.git
+git clone --depth 1 https://github.com/OvidijusParsiunas/speech-to-element.git
 ```
 
 ### :wrench: Improvements
 
-If you are experiencing issues with this project or have suggestions on how to improve it, do not hesitate to create a new ticket in [Github issues](https://github.com/OvidijusParsiunas/deep-chat/issues) and we will look into it as soon as possible.
+If you are experiencing issues with this project or have suggestions on how to improve it, do not hesitate to create a new ticket in [Github issues](https://github.com/OvidijusParsiunas/speech-to-element/issues) and we will look into it as soon as possible.
diff --git a/examples/go/README.md b/examples/go/README.md
@@ -1,19 +1,24 @@
-// WORK - refactor
+<img src="../../assets/banner-white.png" alt="Logo">
 
-![Deep Chat](../../assets/readme/golang-connect.png)
+This is an example GO server template that can be used to fetch an Azure Speech Token for the [Speech To Element](https://www.npmjs.com/package/speech-to-element)'s [`retrieveToken`](https://github.com/OvidijusParsiunas/speech-to-element#azureoptions) function.
 
-This is an example GO server template that can be used to communicate with the [Deep Chat](https://www.npmjs.com/package/deep-chat) component. It includes a variety of endpoints that can be used to host your own service or act as a proxy for the following AI APIs - [OpenAI](https://openai.com/blog/openai-api), [HuggingFace](https://learn.microsoft.com/en-gb/azure/cognitive-services/), [StabilityAI](https://stability.ai/), [Cohere](https://docs.cohere.com/docs).
+### :calling: UI example
 
-### :calling: UI component
-
-This project is preconfigured to work with the example [UI project](https://github.com/OvidijusParsiunas/deep-chat/tree/main/example-servers/ui). Once both are running - they should be able to communicate with each other right out of the box.
+This server is preconfigured to work with the example [UI project](https://github.com/OvidijusParsiunas/speech-to-element/tree/main/examples/ui). Once both are running - they should be able to communicate with each other right out of the box.
 
 ### :computer: Local setup
 
 If you are downloading the project via `git clone` - we advise you to use shallow cloning with the use of the [--depth 1](https://www.perforce.com/blog/vcs/git-beyond-basics-using-shallow-clones) option to reduce its size:
 
 ```
-git clone --depth 1 https://github.com/OvidijusParsiunas/deep-chat.git
+git clone --depth 1 https://github.com/OvidijusParsiunas/speech-to-element.git
+```
+
+Create an `.env` file with the following variables (see the `.env.example` file):
+
+```
+SUBSCRIPTION_KEY=subscription-key
+REGION=region
 ```
 
 Navigate to this directory and run the following command to retrieve the relevant packages:
@@ -28,8 +33,6 @@ Start the server:
 go run main.go
 ```
 
-If you want to use the OpenAI API examples, please create an `.env` file and define the `OPENAI_API_KEY` environment variable. See the `.env.example` file.
-
 ### :wrench: Improvements
 
-If you are experiencing issues with this project or have suggestions on how to improve it, do not hesitate to create a new ticket in [Github issues](https://github.com/OvidijusParsiunas/deep-chat/issues) and we will look into it as soon as possible.
+If you are experiencing issues with this project or have suggestions on how to improve it, do not hesitate to create a new ticket in [Github issues](https://github.com/OvidijusParsiunas/speech-to-element/issues) and we will look into it as soon as possible.
diff --git a/examples/java/springboot/README.md b/examples/java/springboot/README.md
@@ -1,19 +1,24 @@
-// WORK - refactor
+<img src="../../../assets/banner-white.png" alt="Logo">
 
-![Deep Chat](../../../assets/readme/spring-boot-connect.png)
+This is an example Spring Boot server template that can be used to fetch an Azure Speech Token for the [Speech To Element](https://www.npmjs.com/package/speech-to-element)'s [`retrieveToken`](https://github.com/OvidijusParsiunas/speech-to-element#azureoptions) function.
 
-This is an example Spring Boot server template that can be used to communicate with the [Deep Chat](https://www.npmjs.com/package/deep-chat) component. It includes a variety of endpoints that can be used to host your own service or act as a proxy for the following AI APIs - [OpenAI](https://openai.com/blog/openai-api), [HuggingFace](https://learn.microsoft.com/en-gb/azure/cognitive-services/), [StabilityAI](https://stability.ai/), [Cohere].
+### :calling: UI example
 
-### :calling: UI component
-
-This project is preconfigured to work with the example [UI project](https://github.com/OvidijusParsiunas/deep-chat/tree/main/example-servers/ui). Once both are running - they should be able to communicate with each other right out of the box.
+This server is preconfigured to work with the example [UI project](https://github.com/OvidijusParsiunas/speech-to-element/tree/main/examples/ui). Once both are running - they should be able to communicate with each other right out of the box.
 
 ### :computer: Local setup
 
 If you are downloading the project via `git clone` - we advise you to use shallow cloning with the use of the [--depth 1](https://www.perforce.com/blog/vcs/git-beyond-basics-using-shallow-clones) option to reduce its size:
 
 ```
-git clone --depth 1 https://github.com/OvidijusParsiunas/deep-chat.git
+git clone --depth 1 https://github.com/OvidijusParsiunas/speech-to-element.git
+```
+
+Add the following variables to the `application.properties` file:
+
+```
+SUBSCRIPTION_KEY=subscription-key
+REGION=region
 ```
 
 Navigate to this directory and run the following command to install the required modules:
@@ -28,8 +33,6 @@ Run the project:
 mvn spring-boot:run
 ```
 
-If you want to use the OpenAI API examples, please add your api key to the `OPENAI_API_KEY` environment variable inside the `application.properties` file.
-
 ### :wrench: Improvements
 
-If you are experiencing issues with this project or have suggestions on how to improve it, do not hesitate to create a new ticket in [Github issues](https://github.com/OvidijusParsiunas/deep-chat/issues) and we will look into it as soon as possible.
+If you are experiencing issues with this project or have suggestions on how to improve it, do not hesitate to create a new ticket in [Github issues](https://github.com/OvidijusParsiunas/speech-to-element/issues) and we will look into it as soon as possible.
diff --git a/examples/nextjs/README.md b/examples/nextjs/README.md
@@ -1,8 +1,6 @@
-// WORK - refactor
+<img src="../../assets/banner-white.png" alt="Logo">
 
-![Deep Chat](../../assets/readme/nextjs-connect.png)
-
-This is an example NextJS server template that can be used to communicate with the [Deep Chat](https://www.npmjs.com/package/deep-chat) component. It includes a variety of endpoints that can be used to host your own service or act as a proxy for the following AI APIs - [OpenAI](https://openai.com/blog/openai-api), [HuggingFace](https://learn.microsoft.com/en-gb/azure/cognitive-services/), [StabilityAI](https://stability.ai/), [Cohere].
+This is an example Next.js server template that can be used to fetch an Azure Speech Token for the [Speech To Element](https://www.npmjs.com/package/speech-to-element)'s [`retrieveToken`](https://github.com/OvidijusParsiunas/speech-to-element#azureoptions) function.
 
 This project is fully setup and ready to be hosted by a platform such as [Vercel](https://vercel.com/).
 
@@ -11,7 +9,7 @@ This project is fully setup and ready to be hosted by a platform such as [Vercel
 If you are downloading the project via `git clone` - we advise you to use shallow cloning with the use of the [--depth 1](https://www.perforce.com/blog/vcs/git-beyond-basics-using-shallow-clones) option to reduce its size:
 
 ```
-git clone --depth 1 https://github.com/OvidijusParsiunas/deep-chat.git
+git clone --depth 1 https://github.com/OvidijusParsiunas/speech-to-element.git
 ```
 
 Navigate to this directory and run the following command to download the dependencies:
@@ -20,17 +18,20 @@ Navigate to this directory and run the following command to download the depende
 npm install
 ```
 
+Replace the [`process.env.SUBSCRIPTION_KEY`](https://github.com/OvidijusParsiunas/speech-to-element/blob/e740fee37cbea469624963517ea37593f39ed2fc/examples/nextjs/pages/api/token.ts#L16C4-L16C4) variable with your key string:
+
+```
+headers: {'Ocp-Apim-Subscription-Key': 'subscription key'},
+```
+
 Run the project:
 
 ```
 npm run dev
 ```
 
-If you want to use the OpenAI API examples:
-
-- Local - Replace the `process.env.OPENAI_API_KEY` in code with your key
-- Hosting platform - Add an `OPENAI_API_KEY` environment variable
+When deploying to a hosting platform, make sure to set the `SUBSCRIPTION_KEY` environment variable.
 
 ### :wrench: Improvements
 
-If you are experiencing issues with this project or have suggestions on how to improve it, do not hesitate to create a new ticket in [Github issues](https://github.com/OvidijusParsiunas/deep-chat/issues) and we will look into it as soon as possible.
+If you are experiencing issues with this project or have suggestions on how to improve it, do not hesitate to create a new ticket in [Github issues](https://github.com/OvidijusParsiunas/speech-to-element/issues) and we will look into it as soon as possible.
diff --git a/examples/node/express/README.md b/examples/node/express/README.md
@@ -1,19 +1,24 @@
-// WORK - refactor
+<img src="../../../assets/banner-white.png" alt="Logo">
 
-![Deep Chat](../../../assets/readme/express-connect.png)
+This is an example Express server template that can be used to fetch an Azure Speech Token for the [Speech To Element](https://www.npmjs.com/package/speech-to-element)'s [`retrieveToken`](https://github.com/OvidijusParsiunas/speech-to-element#azureoptions) function.
 
-This is an example Express server template that can be used to communicate with the [Deep Chat](https://www.npmjs.com/package/deep-chat) component. It includes a variety of endpoints that can be used to host your own service or act as a proxy for the following AI APIs - [OpenAI](https://openai.com/blog/openai-api), [HuggingFace](https://learn.microsoft.com/en-gb/azure/cognitive-services/), [StabilityAI](https://stability.ai/), [Cohere].
+### :calling: UI example
 
-### :calling: UI component
-
-This project is preconfigured to work with the example [UI project](https://github.com/OvidijusParsiunas/deep-chat/tree/main/example-servers/ui). Once both are running - they should be able to communicate with each other right out of the box.
+This server is preconfigured to work with the example [UI project](https://github.com/OvidijusParsiunas/speech-to-element/tree/main/examples/ui). Once both are running - they should be able to communicate with each other right out of the box.
 
 ### :computer: Local setup
 
 If you are downloading the project via `git clone` - we advise you to use shallow cloning with the use of the [--depth 1](https://www.perforce.com/blog/vcs/git-beyond-basics-using-shallow-clones) option to reduce its size:
 
 ```
-git clone --depth 1 https://github.com/OvidijusParsiunas/deep-chat.git
+git clone --depth 1 https://github.com/OvidijusParsiunas/speech-to-element.git
+```
+
+Create an `.env` file with the following variables (see the `.env.example` file):
+
+```
+SUBSCRIPTION_KEY=subscription-key
+REGION=region
 ```
 
 Navigate to this directory and run the following command to download the dependencies:
@@ -28,8 +33,6 @@ Run the project:
 npm run start
 ```
 
-If you want to use the OpenAI API examples, please create an `.env` file and define the `OPENAI_API_KEY` environment variable. See the `.env.example` file.
-
 ### :wrench: Improvements
 
-If you are experiencing issues with this project or have suggestions on how to improve it, do not hesitate to create a new ticket in [Github issues](https://github.com/OvidijusParsiunas/deep-chat/issues) and we will look into it as soon as possible.
+If you are experiencing issues with this project or have suggestions on how to improve it, do not hesitate to create a new ticket in [Github issues](https://github.com/OvidijusParsiunas/speech-to-element/issues) and we will look into it as soon as possible.
diff --git a/examples/node/nestjs/README.md b/examples/node/nestjs/README.md
@@ -1,19 +1,24 @@
-// WORK - update
+<img src="../../../assets/banner-white.png" alt="Logo">
 
-![Deep Chat](../../../assets/readme/nestjs-connect.png)
+This is an example NestJS server template that can be used to fetch an Azure Speech Token for the [Speech To Element](https://www.npmjs.com/package/speech-to-element)'s [`retrieveToken`](https://github.com/OvidijusParsiunas/speech-to-element#azureoptions) function.
 
-This is an example NestJS server template that can be used to communicate with the [Deep Chat](https://www.npmjs.com/package/deep-chat) component. It includes a variety of endpoints that can be used to host your own service or act as a proxy for the following AI APIs - [OpenAI](https://openai.com/blog/openai-api), [HuggingFace](https://learn.microsoft.com/en-gb/azure/cognitive-services/), [StabilityAI](https://stability.ai/), [Cohere].
+### :calling: UI example
 
-### :calling: UI component
-
-This project is preconfigured to work with the example [UI project](https://github.com/OvidijusParsiunas/deep-chat/tree/main/example-servers/ui). Once both are running - they should be able to communicate with each other right out of the box.
+This server is preconfigured to work with the example [UI project](https://github.com/OvidijusParsiunas/speech-to-element/tree/main/examples/ui). Once both are running - they should be able to communicate with each other right out of the box.
 
 ### :computer: Local setup
 
 If you are downloading the project via `git clone` - we advise you to use shallow cloning with the use of the [--depth 1](https://www.perforce.com/blog/vcs/git-beyond-basics-using-shallow-clones) option to reduce its size:
 
 ```
-git clone --depth 1 https://github.com/OvidijusParsiunas/deep-chat.git
+git clone --depth 1 https://github.com/OvidijusParsiunas/speech-to-element.git
+```
+
+Create an `.env` file with the following variables (see the `.env.example` file):
+
+```
+SUBSCRIPTION_KEY=subscription-key
+REGION=region
 ```
 
 Navigate to this directory and run the following command to download the dependencies:
@@ -28,8 +33,6 @@ Run the project:
 npm run start
 ```
 
-If you want to use the OpenAI API examples, please create an `.env` file and define the `OPENAI_API_KEY` environment variable. See the `.env.example` file.
-
 ### :wrench: Improvements
 
-If you are experiencing issues with this project or have suggestions on how to improve it, do not hesitate to create a new ticket in [Github issues](https://github.com/OvidijusParsiunas/deep-chat/issues) and we will look into it as soon as possible.
+If you are experiencing issues with this project or have suggestions on how to improve it, do not hesitate to create a new ticket in [Github issues](https://github.com/OvidijusParsiunas/speech-to-element/issues) and we will look into it as soon as possible.