demo/web/index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <script src="node_modules/@picovoice/rhino-web/dist/iife/index.js"></script>
    <script src="node_modules/@picovoice/web-voice-processor/dist/iife/index.js"></script>
    <script src="contexts/rhinoContext.js"></script>
    <script src="models/rhinoModel.js"></script>
    <script type="application/javascript">
      let rhino = null;

      function writeMessage(message, bold = false) {
        console.log(message);
        let p = document.createElement("p");
        let text = document.createTextNode(message);

        if (bold) {
          let b = document.createElement("b");
          b.appendChild(text)
          text = b
        }

        p.appendChild(text);
        document.getElementById("messages").appendChild(p);
      }

      function rhinoInferenceCallback(inference) {
        if (inference.isFinalized) {
          writeMessage(`Inference detected: ${JSON.stringify(inference)}`, true);
          if (rhino) {
            WebVoiceProcessor.WebVoiceProcessor.unsubscribe(rhino);
          }
          document.getElementById("push-to-talk").disabled = false;
          writeMessage("Press the 'Push to Talk' button to speak again.");
        }
      }

      async function startRhino(accessKey) {
        try {
          writeMessage("Rhino is loading. Please wait...");
          rhino = await RhinoWeb.RhinoWorker.create(
              accessKey,
              rhinoContext,
              rhinoInferenceCallback,
              rhinoModel,
          );

          writeMessage("Rhino worker ready!");
          document.getElementById("push-to-talk").disabled = false;
          document.getElementById("rhn-context-yaml").innerText = rhino.contextInfo;

          writeMessage("Press the 'Push to Talk' button to talk. Then say something from the context info below.");
        } catch (error) {
          writeMessage(error);
        }
      }

      document.addEventListener("DOMContentLoaded", function () {
        document.getElementById("push-to-talk").onclick = function (event) {
          if (rhino) {
            writeMessage("Rhino is listening for your commands ...");
            this.disabled = true;
            WebVoiceProcessor.WebVoiceProcessor.subscribe(rhino);
          }
        };
      });
    </script>
  </head>
  <body>
    <h1>Rhino Web Demo</h1>
    <p>This demo uses Rhino for Web and the WebVoiceProcessor to:</p>
    <ol>
      <li>
        Create an instance of Rhino that understands commands in the within a given sample context;
      </li>
      <li>
        Acquire microphone (& ask permission) data stream and convert to voice
        processing format (16kHz 16-bit linear PCM). The downsampled audio is
        forwarded to the Rhino engine. The audio <i>does not</i> leave the
        browser: all processing is occurring via the Rhino WebAssembly code.
      </li>
      <li>
        Await inference events from the Rhino engine and output them to the
        page. When the inference is concluded, the push-to-talk button is
        enabled again.
      </li>
    </ol>
    After entering the AccessKey, click the "Start Rhino" button.
    <hr />
    <label for="accessKey"
      >AccessKey obtained from
      <a href="https://picovoice.ai/console/">Picovoice Console</a>:</label
    >
    <input type="text" id="accessKey" name="accessKey" />
    <input
      type="button"
      id="submit"
      value="Start Rhino"
      onclick="startRhino(document.getElementById('accessKey').value)"
    />
    <button id="push-to-talk" disabled>Push to Talk</button>
    <hr />
    <div id="messages" style="white-space: pre;"></div>
    <br />
    <hr />
    <h2>Context info:</h2>
    <pre id="rhn-context-yaml"></pre>
  </body>
</html>