storyfai-s2t-component

v1.4.2

Published

a month ago

This web component is to make our agents operate easier, impacting their productivity and giving our customers a seamless experience.

Downloads

284

0High
0Medium
0Low

maikolcode_

StoryfAI Component (Speech To Text)

This library/component is a microphone that enables voice-to-text functionality using StoryfAI services. It is straightforward to implement in any framework; all that is required is an API key generated through the StoryfAI web application.

Implementation

As mentioned above, we need an API key provided by the StoryfAI application.

JavaScript native

Here is a basic guide to install a StoryfAI component published in npm in an JavaScript project:

Step 1: Install StoryfAI folder It is essential to acquire the file that stores the integral configuration of the component, using the following command.

npm i storyfai-s2t-component

Step 2: Configure component in your project Upload the downloaded file to your project structure/folder

/
|-- storyfai-lib
|-- index.html
|-- ...

Step 3: Use the StoryfAI component

Import the component scripts: In your index.html file, you need to import the main module of the component inside the <head> section of the document.

<html lang="en">
  <head>
    ...
    <title>My Vanilla App</title>
    <!-- Import this files to get the Storyfai component -->
    <script type="module" src="node_modules/storyfai-s2t-component/dist/storyfai-s2t-component/storyfai-s2t-component.esm.js"></script>
    <script nomodule src="node_modules/storyfai-s2t-component/dist/esm/storyfai-s2t-component.js"></script>
  </head>
  <body>
    <!-- Page content -->
  </body>
</html>

Use the component in your vanilla page: Now, you can use the StoryfAI component in your page, adding the corresponding tag:

<!-- index.html -->

<h1>My Vanilla Project</h1>

<!-- Use the StoryfAI Component adding your API key -->
<storyfai-speech api-key="'your_api_key_here'"></storyfai-speech>

Use the Outputs event: To get the output events, we need to add the corresponding tags with a function that receives the event.

<storyfai-speech api-key="'your_api_key_here'"></storyfai-speech>

<!-- Use the receiveText event listener to get the text received by the speech to text response -->
<script>
  const storyfaiSpeech = document.querySelector('storyfai-speech');
  storyfaiSpeech.addEventListener('receiveText', event => {
    // your login here
  });
</script>

Angular

Here is a basic guide to install a StoryfAI component published in npm in an Angular project:

Step 1: Create a new Angular project If you don't have an Angular project yet, you can create one with Angular CLI. Open your terminal and run the following command:

ng new project-name
cd project-name

Step 2: Install the StoryfAI component Use npm or yarn to install the StoryfAI component in your Angular project. For example, if the component is called my-component-stencil, run:

npm i storyfai-s2t-component

Step 3: Configure the component in your Angular project

Import the component module: In your Angular module (usually app.module.ts), import the CUSTOM_ELEMENTS_SCHEMA schema used to enable the use of custom elements in an Angular application.

import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';

@NgModule({
  ...,
  bootstrap: [AppComponent],
  schemas: [CUSTOM_ELEMENTS_SCHEMA]
})

Register components by StoryfAI library: Import the defineCustomElements function, this is usually called at the entry point of the application, such as in the main file (main.ts or similar) of an Angular application.

// main.ts Angular file
import { defineCustomElements } from 'storyfai-s2t-component/loader';

// file configuration

platformBrowserDynamic()
  .bootstrapModule(AppModule)
  .catch(err => console.error(err));

defineCustomElements(window);

Use the component in your template: Now, you can use the StoryfAI component in your Angular templates. Open the template file where you want to use the component and add the corresponding tag:

<!-- app.component.html -->

<h1>My Angular Project</h1>

<!-- Use the StoryfAI Component adding your API key -->
<storyfai-speech [apiKey]="'your_api_key_here'"></storyfai-speech>

Use the Outputs event: To get the output events, we need to add the corresponding tags with a function that receives the event.

<!-- app.component.html -->

<h1>My Angular Project</h1>

<!-- Use the (receiveText) property to get the text received by the speech to text response -->
<storyfai-speech [apiKey]="'your_api_key_here'" (receiveText)="handleReceiveSpeech($event)"></storyfai-speech>