@intron_health/intron_transcriber_streaming

v1.1.0

Published

7 months ago

helper library to run the intron transcription widget.

0High
0Medium
0Low

Intron Health Transcribe Widget

A versatile and easy-to-use widget for transcribing audio, compatible with various JavaScript environments and frameworks.

Learn more

Features

Cross-Platform Compatibility: Works seamlessly with Node.js, browsers, and various frameworks like React and Vue.js.
Multiple Module Support: Available in CommonJS, ES Modules, and UMD formats.
Easy Integration: Simple API to initialize and configure the widget.
Customizable UI: Options to customize button text and position.

Credentials

To get started, you need to have an integration account on our platform.

1 . Go to your account dashboard
2 . Click on the View Integration Tab
3 . Locate and copy the access key

Installation

Install the package via npm:

npm @intron_health/intron_transcriber_streaming

Usage

In React

import React, { useEffect } from "react";
import { loadIntronTranscribeWidget } from "@intron_health/intron_transcriber_streaming";

function App() {
  useEffect(() => {
    const apiKey = ="your-api-key-here";
    const parentElement = document.getElementById("transcription-widget");
    loadIntronTranscribeWidget(
      parentElement,
      apiKey
    );
  }, []);

  return <>
    <div id="transcription-widget"></div>
    <textarea id="transcription-target">Register input here</textarea>
  </>;
}

export default App;

In Vue.js

<template>
  <div ref="transcriptionWidget"></div>
  <textarea id="transcription-target">Register input here</textarea>
</template>

<script>
import { loadIntronTranscribeWidget } from "@intron_health/intron_transcriber_streaming";

export default {
  mounted() {
    const parentElement = this.$refs.transcriptionWidget;
    const apiKey = "your-api-key-here";
    loadIntronTranscribeWidget(parentElement, apiKey);
  },
};
</script>

In Plain HTML/JavaScript

Include the UMD build via a <script> tag:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Transcribe Widget Test</title>
    <!-- Replace with the correct path to your UMD build -->
    <script src="node_modules/intron_transcriber_streaming/dist/intron_transcriber_widget.umd.js"></script>
  </head>
  <body>
    <div id="transcription-widget"></div>
    <h3>Click the box below, then click Record:</h3>
    <textarea id="transcription-target" rows="12" cols="120" placeholder="Transcription will appear here..."></textarea>
    <script>
      const { loadIntronTranscribeWidget } = IntronTranscriberWidget;
      window.onload = function () {
        const parentElement = document.getElementById("transcription-widget");
        const apiKey = "your-api-key-here";
        loadIntronTranscribeWidget(parentElement, apiKey);
      };
    </script>
  </body>
</html>

Parameters

Initializes the transcribe widget with the specified options.

parentElement HTMLElement: Required. The DOM element where the widget will be rendered.
apiKey string: Required. Your API key for authentication.
options Object: Configuration options.
- writeStreamInActiveTextbox boolean: Optional. if true the streamed transcript text will be written into any active textbox,you can set it to false if you intend to use the events to listen for new transcripts and process it
  - true : Default
  - false
- showPostProcessingCategory string: Optional. set the category to display list of post-processing options available.
  - none
  - health : Default
  - general
  - procedure
  - legal
  - call_center

Example using Paramters

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Transcribe Widget Test</title>
    <!-- Replace with the correct path to your UMD build -->
    <script src="node_modules/intron_transcriber_streaming/dist/intron_transcriber_widget.umd.js"></script>
  </head>
  <body>
    <div id="transcription-widget"></div>
    <h3>Click the box below, then click Record:</h3>
    <textarea id="transcription-target" rows="12" cols="120" placeholder="Transcription will appear here..."></textarea>
    <script>
      const { loadIntronTranscribeWidget } = IntronTranscriberWidget;
      window.onload = function () {
        const parentElement = document.getElementById("transcription-widget");
        const apiKey = "your-api-key-here";
        const options = {
          writeStreamInActiveTextbox: true, // Optional config,if true the streamed transcript text will be written into any active textbox (default to true)
          showPostProcessingCategory: "health", // Optional category for post processing option (defaults to "health")
        };
        loadIntronTranscribeWidget(parentElement, apiKey, options);
      };
    </script>
  </body>
</html>

Events

Custom events raised by the widget

intronInferEventStreamTextReceived : String : This event is raised when new updated transcript text is available
intronInferEventTranscriptResult : Object : This event is raised when the transcription session has completed and the final transcript is ready

Event intronInferEventTranscriptResult

Event response schema

the post_processed_results data is based on the options selected from the showPostProcessingCategory parameter

{
  "transcript_id":"",
  "transcript_text":"",
  "post_processed_results":{
    "get_soap_note":"",
    "get_op_note":"",
    "get_summary":"",
    "get_clerking":"",
    "get_entity_list":"",
    "get_treatment_plan":"",
    "get_icd_codes":"",
    "get_suggestions":"",
    "get_differential_diagnosis":"",
    "get_followup_instructions":"",
    "get_practice_guidelines":"",
    "get_call_center_results":"",
    "get_call_center_agent_score":"",
    "get_call_center_agent_score_category":"",
    "get_call_center_product_info":"",
    "get_call_center_product_insights":"",
    "get_call_center_compliance":"",
    "get_call_center_feedback":"",
    "get_call_center_sentiment":"",
    "get_legal_court_hearing":""
  }
}

Example using Events

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Transcribe Widget Test</title>
    <!-- Replace with the correct path to your UMD build -->
    <script src="node_modules/intron_transcriber_streaming/dist/intron_transcriber_widget.umd.js"></script>
  </head>
  <body>
    <div id="transcription-widget"></div>
    <h3>Click the box below, then click Record:</h3>
    <textarea id="transcription-target" rows="12" cols="120" placeholder="Transcription will appear here..."></textarea>
    <script>
      const { loadIntronTranscribeWidget } = IntronTranscriberWidget;
      window.onload = function () {
        const parentElement = document.getElementById("transcription-widget");
        const apiKey = "your-api-key-here";
        const options = {
          writeStreamInActiveTextbox: false, // Optional config,if false the streamed transcript text will not be written into any active textbox (default to true)
        };
        loadIntronTranscribeWidget(parentElement, apiKey, options);
      };
      //Listen to the transcript text event
      document.addEventListener("intronInferEventStreamTextReceived", function (event){
        console.log("NEW TEXT UPDATE",event.detail);
      })
      //Listen to completed session results event
      document.addEventListener("intronInferEventTranscriptResult", function (event){
        console.log("SESSION COMPLETED",event.detail);
      })
    </script>
  </body>
</html>

License

This project is licensed under the MIT License.