Make video chat and dictation download on demand

 }
 
 const initDictation = async () => {
+  microphoneStatus('downloading')
+  injectScript('/assets/vosk-0.0.8.js')
+
   microphoneStatus('loading')
   const partialContainer = document.querySelector('#search .partial')
 

   join.disabled = true
   join.style.display = 'none'
 
-  const tag = document.createElement('script')
-  tag.src = '/chats/mediasoup-demo-app.js'
-  document.getElementsByTagName('head')[0].appendChild(tag)
+  injectStylesheet('/chats/mediasoup-demo-app.css')
+  injectScript('/chats/mediasoup-demo-app.js')
+  injectScript('/chats/resources/js/antiglobal.js')
+  window.localStorage.setItem('debug', '* -engine* -socket* -RIE* *WARN* *ERROR*')
+  if (window.antiglobal) {
+    window.antiglobal('___browserSync___oldSocketIo', 'io', '___browserSync___', '__core-js_shared__')
+    setInterval(window.antiglobal, 180000)
+  }
 
   const autoMute = () => {
     if (typeof window.CLIENT !== 'undefined' && window.CLIENT._micProducer) {

   let color
   let icon
   if (mode === 'on' || mode === 'active') {
-    if (mode === 'on') { color = 'dc322f' } else if (mode === 'active') { color = '268bd2' }
+    if (mode === 'on') {
+      color = 'dc322f'
+    } else if (mode === 'active') {
+      color = '268bd2'
+    }
     icon = `<path d="
               M7 7.40991C7 6.08383 7.52677 4.81207 8.46445 3.87439C9.40213 2.93671
               10.6739 2.40991 12 2.40991C13.3261 2.40991 14.5978 2.93671 15.5355

               14.3869 22.4099 12 22.4099C9.61305 22.4099 7.32384 21.4618 5.63602
               19.7739C3.94819 18.0861 3 15.7969 3 13.4099"
               stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>`
-  } else if (mode === 'off' || mode === 'loading') {
+  } else if (mode === 'off' || mode === 'downloading' || mode === 'loading') {
     if (mode === 'off') {
       color = '93a1a1'
       if (Cookies.get('colormode') === 'dark') { color = '586e75' }
-    } else if (mode === 'loading') { color = '6c71c4' }
+    } else if (mode === 'downloading') {
+      color = 'b58900'
+    } else if (mode === 'loading') {
+      color = '6c71c4'
+    }
     icon = `<path d="
               M17.0005 11.24V13C17.0005 14.3261 16.4737 15.5978 15.536
               16.5355C14.5983 17.4732 13.3266 18 12.0005 18C11.4846 17.9975

   listen.innerHTML = icon
   document.querySelectorAll('#listen path').forEach(el => { el.style.stroke = `#${color}` })
 }
+
+const injectScript = src => {
+  const tag = document.createElement('script')
+  tag.src = src
+  document.getElementsByTagName('head')[0].appendChild(tag)
+}
+const injectStylesheet = href => {
+  const tag = document.createElement('link')
+  tag.rel = 'stylesheet'
+  tag.media = 'screen'
+  tag.href = href
+  document.getElementsByTagName('head')[0].appendChild(tag)
+}

     <link rel=icon href=/media/$owner["photo"][0]>
 $if not tx.request.uri.path:
     <link rel=manifest href=/manifest.json>
-<link rel=stylesheet media=screen href=/chats/mediasoup-demo-app.css>
 <link rel=stylesheet media=screen href=/static/screen.css>
 $if not isinstance(resource, str) and "head" in resource:
     $:resource.head()

         height: 2.6em;
         width: 2.6em; }
     </style>
-<script src=/assets/vosk-0.0.8.js></script>
 <script src=/assets/webtorrent-2.1.30.js></script>
 <script src=/assets/drag-drop-7.2.0.js></script>
 <script src=/assets/js-cookie-3.0.5.js></script>

 let ownerGivenName = '$owner["name"][0].split()[0]'
 </script>
 <script type=module src=/static/enliven.js></script>
-<script src=/chats/resources/js/antiglobal.js></script>
-<script>
-window.localStorage.setItem('debug', '* -engine* -socket* -RIE* *WARN* *ERROR*')
-if (window.antiglobal) {
-  window.antiglobal('___browserSync___oldSocketIo', 'io', '___browserSync___', '__core-js_shared__')
-  setInterval(window.antiglobal, 180000)
-}
-</script>
 </head>
 
 <body