web-orchestrator

BSTT Player

A React library to conduct verbal assessments powered by ASR 🔥⚡

BSTT Player is a React library that allows users to conduct verbal assessments by leveraging an Automatic Speech Recognition (ASR) system. This library simplifies the process of incorporating verbal assessments into React projects, providing a smooth and intuitive experience for both developers and users.

Prerequisites:

Before using BSTT Player, ensure the following prerequisites are met:

1. API Key: You need to have a valid API key to interact with the ASR backend service.
2. BSTT Backend URL: Ensure that you have the BSTT backend URL where the ASR requests will be sent.

How to Use:

To use BSTT Player in your React application, follow these steps:

/* Sample Code snippet to incorporate BSTT Player */
// Import BsttPlayer from 'bstt-player'
import BsttPlayer from 'bstt-player';
import { useEffect } from 'react';

function App() {
  
  const onEnd = (data) => {
    console.log("Completed Assessment: ", data);
  }

  const config = {
    apiKey: "a9qnKCuC3tM0J9Z2wS1usZI8j1AH9qc9",
    bstt_base_url: "https://bstt.dev.nisai.samagra.io",
    asr_input_lang: "hi",
    asr_fuzzy_match: false,
    asr_distance_cutoff: 1
  }

  return (
    <div className="App">
      <header className="App-header">

        {/* Load the BsttPlayer component in your app providing the required props */}
        <BsttPlayer
          data={{ textContent: 'हमें अपठित गद्यांश पढ़ने चाहिए क्योंकि इससे हमारी पढ़ाई में सुधार होता है। ये हमारे व्यापक ज्ञान को बढ़ाते हैं और हमारी सोचने की क्षमता को विकसित करते हैं। जब हम इन अपठित गद्यांशों को पढ़ते हैं, तो हमारा ध्यान बढ़ता है और हमें बेहतरीन जवाब देने की क्षमता मिलती है। इसके साथ हमारी भाषा को समझने में भी सुधार होता है।अपठित गद्यांश कैसे पढ़ें?', timeLimit: 10 }}
          height='100vh'
          width='50vw'
          offline={false}
          onStart={() => { console.log("Assessment Started") }}
          onEnd={onEnd}
          onTimeOver={() => { console.log("Time Over") }}
          config={config}
        />
      </header>
    </div>
  );
}

export default App;

Props:

Prop	Type	Description	Default
data	object	The data object consisting of textContent and timeLimit in seconds	None
height	string	Height of the player to be rendered	100vh
width	string	Width of the player to be rendered	100vw
offline	boolean	Boolean to decide whether the assessment should work offline or not	false
onStart	function	Callback function to be executed when the assessment starts	None
onEnd	function	Callback function to be executed when the assessment ends	None
onTimeOver	function	Callback function to be executed when the time limit is over	None
config	object	Configuration object for ASR, containing apiKey, bstt_base_url, asr_input_lang, asr_fuzzy_match, and asr_distance_cutoff	None

How It Works:

BSTT Player displays the textContent in a readable format and the user starts reading the passage. The audio is recorded in chunks and sent to the backend for processing. The results are then merged on the frontend.

In offline mode, the entire recording is stored in IndexedDB and processed when the network is restored. The library uses a silence detection algorithm to create chunks when silence is detected. It captures surrounding audio for about 3 seconds at the beginning before starting the assessment to calculate a threshold decibel.

The final result of the assessment is provided in the following format:

{
  "correct_words_count": 9,
  "total_words": 18,
  "tts": 40,
  "wpm": 9,
  "correct_words": [],
  "incorrect_words": []
}

Ending Notes:

Thank you for choosing BSTT Player! I hope this library makes integrating verbal assessments into your React applications a breeze. Don't forget to star the repository if you find it useful!

🌟 Star us on GitHub: [https://github.com/your-repo/bstt-player]

Feel free to contribute, report issues, or suggest improvements. Happy coding! 💻✨