Rev

Picovoice · Jun 4, 2024 · c2ca5bd · c2ca5bd
1 parent 359fe89
commit c2ca5bd
Show file tree

Hide file tree

Showing 5 changed files with 25 additions and 3 deletions.
diff --git a/recipes/llm-voice-assistant/web/README.md b/recipes/llm-voice-assistant/web/README.md
@@ -1,3 +1,7 @@
+## See It In Action!
+
+[![LLM VA in Action](https://img.youtube.com/vi/WWVSACJQknw/0.jpg)](https://www.youtube.com/watch?v=WWVSACJQknw)
+
 ## Compatibility
 
 - Node.js 18+

diff --git a/recipes/llm-voice-assistant/web/package.json b/recipes/llm-voice-assistant/web/package.json
@@ -1,5 +1,5 @@
 {
-  "name": "picollm-web-voice-assistant",
+  "name": "llm-voice-assistant",
   "version": "1.0.0",
   "description": "",
   "entry": "src/index.ts",

diff --git a/recipes/llm-voice-assistant/web/public/controller.js b/recipes/llm-voice-assistant/web/public/controller.js
@@ -112,7 +112,7 @@ window.onload = () => {
           addMessage(humanElem, transcript);
         },
         onEndpoint: async () => {
-          message.innerText = "Generating...";
+          message.innerHTML = "Generating <div class='loader'></div>";
           llmElem = startLLMMessage();
         },
         onText: (text) => {

diff --git a/recipes/llm-voice-assistant/web/public/index.html b/recipes/llm-voice-assistant/web/public/index.html
@@ -79,6 +79,7 @@
       border-radius: 5px;
       background-color: lightblue;
       padding: 6px;
+      margin-bottom: 5px;
     }
 
     .llm-border {
@@ -93,6 +94,7 @@
       border-radius: 5px;
       background-color: lightgrey;
       padding: 6px;
+      margin-bottom: 5px;
     }
 
     .result-container {
@@ -118,10 +120,25 @@
         color: #377dff;
       }
     }
+
+    .loader {
+      border: 2px solid #f3f3f3;
+      border-top: 2px solid black;
+      border-radius: 50%;
+      width: 12pt;
+      height: 12pt;
+      animation: spin 2s linear infinite;
+      margin-left: 10px;
+    }
+
+    @keyframes spin {
+      0% { transform: rotate(0deg); }
+      100% { transform: rotate(360deg); }
+    }
   </style>
 </head>
 <body>
-  <h1>picoLLM Web Voice Assistant</h1>
+  <h1>LLM Voice Assistant</h1>
   <div><b>Status:</b> <span id="status">Not loaded.</span><span id="dotdotdot"></span></div>
   <div id="error" style="white-space: pre; display: none;"></div>
   <hr/>

diff --git a/recipes/llm-voice-assistant/web/src/main.ts b/recipes/llm-voice-assistant/web/src/main.ts
@@ -111,6 +111,7 @@ const init = async (
 
     const { completion, completionTokens } = await pllm.generate(dialog.prompt(), {
       completionTokenLimit: 128,
+      stopPhrases: stopPhrases,
       streamCallback: async token => {
         if (!stopPhrases.includes(token)) {
           onText(token);