initial commit

Dockerfile

@@ -0,0 +1,65 @@
+FROM nvidia/cuda:12.1.1-devel-ubuntu22.04
+
+# Model choices
+ARG TEXT_MODEL=llama-v3-2-3b-instruct-q6-k
+ARG TRANSCRIBE_MODEL=distilled-whisper-large-v3
+ARG SPEECH_MODEL=xtts-v2
+
+# Create user
+RUN useradd -m -u 1000 anachrovox
+
+# Set home and work directory
+ENV HOME=/app \
+    PATH=/app/.local/bin:$PATH
+WORKDIR /app
+
+# Copy configuration
+COPY config/nginx.conf /app/nginx.conf
+COPY config/dispatcher.yaml /app/dispatcher.yaml
+COPY config/overseer.yaml /app/overseer.yaml
+
+# Copy WWW contents
+ADD www /app/www
+
+# Copy Anachrovox application code
+ADD src/anachrovox /app/anachrovox
+
+# Create log directory
+RUN mkdir -p /app/logs
+
+# Expose port
+EXPOSE 7860
+
+# Install packages including spaces dev mode requirements
+RUN apt-get update && \
+    apt-get install -y \
+    bash \
+    git git-lfs \
+    curl wget procps \
+    htop vim \
+    python3-pip python3-dev \
+    nginx && \
+    rm -rf /var/lib/apt/lists/*
+
+# Adjust permissions
+RUN chown -R 1000 /var/log/nginx /var/lib/nginx /app
+
+# Drop privileges
+USER 1000
+
+# Install taproot
+RUN pip3 install --no-cache-dir taproot[tools,console,av]
+
+# Install models - spaces doesn't seem to care about layer size, so we minimize overall size instead
+RUN taproot install \
+    audio-transcription:${TRANSCRIBE_MODEL} \
+    text-generation:${TEXT_MODEL} \
+    speech-synthesis:${SPEECH_MODEL} \
+    --debug \
+    --optional
+
+# Copy run script
+COPY --chown=anachrovox --chmod=755 run.sh /app/run.sh
+
+# Run the application
+CMD ["/app/run.sh"]

LICENSE

@@ -0,0 +1,201 @@
+                                 Apache License
+                           Version 2.0, January 2004
+                        http://www.apache.org/licenses/
+
+   TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION
+
+   1. Definitions.
+
+      "License" shall mean the terms and conditions for use, reproduction,
+      and distribution as defined by Sections 1 through 9 of this document.
+
+      "Licensor" shall mean the copyright owner or entity authorized by
+      the copyright owner that is granting the License.
+
+      "Legal Entity" shall mean the union of the acting entity and all
+      other entities that control, are controlled by, or are under common
+      control with that entity. For the purposes of this definition,
+      "control" means (i) the power, direct or indirect, to cause the
+      direction or management of such entity, whether by contract or
+      otherwise, or (ii) ownership of fifty percent (50%) or more of the
+      outstanding shares, or (iii) beneficial ownership of such entity.
+
+      "You" (or "Your") shall mean an individual or Legal Entity
+      exercising permissions granted by this License.
+
+      "Source" form shall mean the preferred form for making modifications,
+      including but not limited to software source code, documentation
+      source, and configuration files.
+
+      "Object" form shall mean any form resulting from mechanical
+      transformation or translation of a Source form, including but
+      not limited to compiled object code, generated documentation,
+      and conversions to other media types.
+
+      "Work" shall mean the work of authorship, whether in Source or
+      Object form, made available under the License, as indicated by a
+      copyright notice that is included in or attached to the work
+      (an example is provided in the Appendix below).
+
+      "Derivative Works" shall mean any work, whether in Source or Object
+      form, that is based on (or derived from) the Work and for which the
+      editorial revisions, annotations, elaborations, or other modifications
+      represent, as a whole, an original work of authorship. For the purposes
+      of this License, Derivative Works shall not include works that remain
+      separable from, or merely link (or bind by name) to the interfaces of,
+      the Work and Derivative Works thereof.
+
+      "Contribution" shall mean any work of authorship, including
+      the original version of the Work and any modifications or additions
+      to that Work or Derivative Works thereof, that is intentionally
+      submitted to Licensor for inclusion in the Work by the copyright owner
+      or by an individual or Legal Entity authorized to submit on behalf of
+      the copyright owner. For the purposes of this definition, "submitted"
+      means any form of electronic, verbal, or written communication sent
+      to the Licensor or its representatives, including but not limited to
+      communication on electronic mailing lists, source code control systems,
+      and issue tracking systems that are managed by, or on behalf of, the
+      Licensor for the purpose of discussing and improving the Work, but
+      excluding communication that is conspicuously marked or otherwise
+      designated in writing by the copyright owner as "Not a Contribution."
+
+      "Contributor" shall mean Licensor and any individual or Legal Entity
+      on behalf of whom a Contribution has been received by Licensor and
+      subsequently incorporated within the Work.
+
+   2. Grant of Copyright License. Subject to the terms and conditions of
+      this License, each Contributor hereby grants to You a perpetual,
+      worldwide, non-exclusive, no-charge, royalty-free, irrevocable
+      copyright license to reproduce, prepare Derivative Works of,
+      publicly display, publicly perform, sublicense, and distribute the
+      Work and such Derivative Works in Source or Object form.
+
+   3. Grant of Patent License. Subject to the terms and conditions of
+      this License, each Contributor hereby grants to You a perpetual,
+      worldwide, non-exclusive, no-charge, royalty-free, irrevocable
+      (except as stated in this section) patent license to make, have made,
+      use, offer to sell, sell, import, and otherwise transfer the Work,
+      where such license applies only to those patent claims licensable
+      by such Contributor that are necessarily infringed by their
+      Contribution(s) alone or by combination of their Contribution(s)
+      with the Work to which such Contribution(s) was submitted. If You
+      institute patent litigation against any entity (including a
+      cross-claim or counterclaim in a lawsuit) alleging that the Work
+      or a Contribution incorporated within the Work constitutes direct
+      or contributory patent infringement, then any patent licenses
+      granted to You under this License for that Work shall terminate
+      as of the date such litigation is filed.
+
+   4. Redistribution. You may reproduce and distribute copies of the
+      Work or Derivative Works thereof in any medium, with or without
+      modifications, and in Source or Object form, provided that You
+      meet the following conditions:
+
+      (a) You must give any other recipients of the Work or
+          Derivative Works a copy of this License; and
+
+      (b) You must cause any modified files to carry prominent notices
+          stating that You changed the files; and
+
+      (c) You must retain, in the Source form of any Derivative Works
+          that You distribute, all copyright, patent, trademark, and
+          attribution notices from the Source form of the Work,
+          excluding those notices that do not pertain to any part of
+          the Derivative Works; and
+
+      (d) If the Work includes a "NOTICE" text file as part of its
+          distribution, then any Derivative Works that You distribute must
+          include a readable copy of the attribution notices contained
+          within such NOTICE file, excluding those notices that do not
+          pertain to any part of the Derivative Works, in at least one
+          of the following places: within a NOTICE text file distributed
+          as part of the Derivative Works; within the Source form or
+          documentation, if provided along with the Derivative Works; or,
+          within a display generated by the Derivative Works, if and
+          wherever such third-party notices normally appear. The contents
+          of the NOTICE file are for informational purposes only and
+          do not modify the License. You may add Your own attribution
+          notices within Derivative Works that You distribute, alongside
+          or as an addendum to the NOTICE text from the Work, provided
+          that such additional attribution notices cannot be construed
+          as modifying the License.
+
+      You may add Your own copyright statement to Your modifications and
+      may provide additional or different license terms and conditions
+      for use, reproduction, or distribution of Your modifications, or
+      for any such Derivative Works as a whole, provided Your use,
+      reproduction, and distribution of the Work otherwise complies with
+      the conditions stated in this License.
+
+   5. Submission of Contributions. Unless You explicitly state otherwise,
+      any Contribution intentionally submitted for inclusion in the Work
+      by You to the Licensor shall be under the terms and conditions of
+      this License, without any additional terms or conditions.
+      Notwithstanding the above, nothing herein shall supersede or modify
+      the terms of any separate license agreement you may have executed
+      with Licensor regarding such Contributions.
+
+   6. Trademarks. This License does not grant permission to use the trade
+      names, trademarks, service marks, or product names of the Licensor,
+      except as required for reasonable and customary use in describing the
+      origin of the Work and reproducing the content of the NOTICE file.
+
+   7. Disclaimer of Warranty. Unless required by applicable law or
+      agreed to in writing, Licensor provides the Work (and each
+      Contributor provides its Contributions) on an "AS IS" BASIS,
+      WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or
+      implied, including, without limitation, any warranties or conditions
+      of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A
+      PARTICULAR PURPOSE. You are solely responsible for determining the
+      appropriateness of using or redistributing the Work and assume any
+      risks associated with Your exercise of permissions under this License.
+
+   8. Limitation of Liability. In no event and under no legal theory,
+      whether in tort (including negligence), contract, or otherwise,
+      unless required by applicable law (such as deliberate and grossly
+      negligent acts) or agreed to in writing, shall any Contributor be
+      liable to You for damages, including any direct, indirect, special,
+      incidental, or consequential damages of any character arising as a
+      result of this License or out of the use or inability to use the
+      Work (including but not limited to damages for loss of goodwill,
+      work stoppage, computer failure or malfunction, or any and all
+      other commercial damages or losses), even if such Contributor
+      has been advised of the possibility of such damages.
+
+   9. Accepting Warranty or Additional Liability. While redistributing
+      the Work or Derivative Works thereof, You may choose to offer,
+      and charge a fee for, acceptance of support, warranty, indemnity,
+      or other liability obligations and/or rights consistent with this
+      License. However, in accepting such obligations, You may act only
+      on Your own behalf and on Your sole responsibility, not on behalf
+      of any other Contributor, and only if You agree to indemnify,
+      defend, and hold each Contributor harmless for any liability
+      incurred by, or claims asserted against, such Contributor by reason
+      of your accepting any such warranty or additional liability.
+
+   END OF TERMS AND CONDITIONS
+
+   APPENDIX: How to apply the Apache License to your work.
+
+      To apply the Apache License to your work, attach the following
+      boilerplate notice, with the fields enclosed by brackets "[]"
+      replaced with your own identifying information. (Don't include
+      the brackets!)  The text should be enclosed in the appropriate
+      comment syntax for the file format. We also recommend that a
+      file or class name and description of purpose be included on the
+      same "printed page" as the copyright notice for easier
+      identification within third-party archives.
+
+   Copyright [yyyy] [name of copyright owner]
+
+   Licensed under the Apache License, Version 2.0 (the "License");
+   you may not use this file except in compliance with the License.
+   You may obtain a copy of the License at
+
+       http://www.apache.org/licenses/LICENSE-2.0
+
+   Unless required by applicable law or agreed to in writing, software
+   distributed under the License is distributed on an "AS IS" BASIS,
+   WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+   See the License for the specific language governing permissions and
+   limitations under the License.

README.md

@@ -1,10 +1,12 @@
 ---
-title: Anachrovox Amber
-emoji: 🏆
-colorFrom: blue
-colorTo: red
+title: Anachrovox V0.1 Amber
+emoji: 📻🎙️
+colorFrom: yellow
+colorTo: purple
 sdk: docker
 pinned: false
+license: apache-2.0
+short_description: Hands-Free AI Voice Chat with a Retro Vibe
 ---
 
 Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

config/dispatcher.yaml

@@ -0,0 +1,31 @@
+---
+protocol: ws
+port: 32190
+external_address: dispatcher
+control_encryption:
+    encryption_var: CONTROL_ENCRYPTION_KEY
+static_executor_config:
+    - protocol: ws
+      port: 32191
+      external_address: text-generation
+      queue_config:
+        task: text-generation
+        size: 5
+        result_duration: 3600
+        task_config:
+            options:
+                context_length: 32768
+    - protocol: ws
+      port: 32192
+      external_address: audio-transcription
+      queue_config:
+        task: audio-transcription
+        size: 5
+        result_duration: 3600
+    - protocol: ws
+      port: 32193
+      external_address: speech-synthesis
+      queue_config:
+        task: speech-synthesis
+        size: 5
+        result_duration: 180

config/nginx.conf

@@ -0,0 +1,81 @@
+worker_processes 1;
+user anachrovox;
+error_log stderr;
+daemon off;
+pid /app/nginx.pid;
+
+events {
+  worker_connections  1024;
+}
+
+http {
+    include             /etc/nginx/mime.types;
+    default_type        application/octet-stream;
+
+    sendfile on;
+
+    keepalive_timeout   65;
+
+    ssl_protocols TLSv1 TLSv1.1 TLSv1.2; 
+    ssl_prefer_server_ciphers on;
+
+    map $http_upgrade $connection_upgrade {
+        default upgrade;
+        '' close;
+    }
+
+    server {
+        listen 7860;
+
+        # Proxy `/overseer` to WebSocket server on port 32189
+        location /overseer {
+            proxy_pass http://127.0.0.1:32189;
+            proxy_http_version 1.1;
+            proxy_set_header Upgrade $http_upgrade;
+            proxy_set_header Connection $connection_upgrade;
+            proxy_set_header Host $host;
+        }
+
+        # Proxy `/dispatcher` to WebSocket server on port 32189
+        location /dispatcher {
+            proxy_pass http://127.0.0.1:32190;
+            proxy_http_version 1.1;
+            proxy_set_header Upgrade $http_upgrade;
+            proxy_set_header Connection $connection_upgrade;
+            proxy_set_header Host $host;
+        }
+
+        # Proxy `/text-generation` to WebSocket server on port 32191
+        location /text-generation {
+            proxy_pass http://127.0.0.1:32191;
+            proxy_http_version 1.1;
+            proxy_set_header Upgrade $http_upgrade;
+            proxy_set_header Connection $connection_upgrade;
+            proxy_set_header Host $host;
+        }
+
+        # Proxy `/audio-transcription` to WebSocket server on port 32192
+        location /audio-transcription {
+            proxy_pass http://127.0.0.1:32192;
+            proxy_http_version 1.1;
+            proxy_set_header Upgrade $http_upgrade;
+            proxy_set_header Connection $connection_upgrade;
+            proxy_set_header Host $host;
+        }
+
+        # Proxy `/speech-synthesis` to WebSocket server on port 32193
+        location /speech-synthesis {
+            proxy_pass http://127.0.0.1:32193;
+            proxy_http_version 1.1;
+            proxy_set_header Upgrade $http_upgrade;
+            proxy_set_header Connection $connection_upgrade;
+            proxy_set_header Host $host;
+        }
+
+        # Default: Serve static files from /var/www
+        location / {
+            root /app/www;
+            index index.html;
+        }
+    }
+}

config/overseer.yaml

@@ -0,0 +1,24 @@
+---
+protocol: ws
+port: 32189
+external_address: /overseer
+control_list: null
+control_encryption:
+    encryption_var: CONTROL_ENCRYPTION_KEY
+dispatchers:
+    - protocol: ws
+      host: 127.0.0.1
+      port: 32190
+      resolve_addresses: false
+    - protocol: ws
+      encryption: {}
+      host: benjaminpaine-anachrovox-emerald.hf.space
+      path: /dispatcher
+    - protocol: ws
+      encryption: {}
+      host: benjaminpaine-anachrovox-topaz.hf.space
+      path: /dispatcher
+    - protocol: ws
+      encryption: {}
+      host: benjaminpaine-anachrovox-azure.hf.space
+      path: /dispatcher

run.sh

@@ -0,0 +1,206 @@
+#!/usr/bin/env bash
+SCRIPT_DIR="$( cd "$( dirname "${BASH_SOURCE[0]}" )" &> /dev/null && pwd )"
+PIDFILE="$SCRIPT_DIR/.run.pid"
+LOG_DIR="$SCRIPT_DIR/logs"
+MAX_RESTARTS=3
+
+mkdir -p "$LOG_DIR"
+export PYTHONPATH="$SCRIPT_DIR:$PYTHONPATH"
+
+######################
+# Service Definitions
+######################
+declare -A SERVICE_CMDS=(
+  [nginx]="nginx -p $SCRIPT_DIR -c $SCRIPT_DIR/nginx.conf"
+  [taproot_dispatcher]="taproot dispatcher --config $SCRIPT_DIR/dispatcher.yaml --add-import anachrovox --debug"
+  [taproot_overseer]="taproot overseer --config $SCRIPT_DIR/overseer.yaml --debug"
+)
+
+declare -A SERVICE_LOGS_STDOUT=(
+  [nginx]="${LOG_DIR}/nginx.log"
+  [taproot_dispatcher]="${LOG_DIR}/taproot_dispatcher.log"
+  [taproot_overseer]="${LOG_DIR}/taproot_overseer.log"
+)
+
+declare -A SERVICE_LOGS_STDERR=(
+  [nginx]="${LOG_DIR}/nginx_err.log"
+  [taproot_dispatcher]="${LOG_DIR}/taproot_dispatcher_err.log"
+  [taproot_overseer]="${LOG_DIR}/taproot_overseer_err.log"
+)
+
+declare -A SERVICE_PIDFILES=(
+  [nginx]="${SCRIPT_DIR}/.nginx.pid"
+  [taproot_dispatcher]="${SCRIPT_DIR}/.dispatcher.pid"
+  [taproot_overseer]="${SCRIPT_DIR}/.overseer.pid"
+)
+
+# The PIDs we'll track
+declare -A SERVICE_PIDS
+
+# How many times we've restarted
+declare -A SERVICE_RESTART_COUNT
+
+# Record the script's start time
+START_TIME=$(date +%s.%N)
+
+# Function to echo a message with a timestamp
+timestamp_echo() {
+    local current_time=$(date +%s.%N)
+    local elapsed=$(awk "BEGIN {print $current_time - $START_TIME}")
+    local hours=$(awk "BEGIN {print int($elapsed / 3600)}")
+    local minutes=$(awk "BEGIN {print int(($elapsed % 3600) / 60)}")
+    local seconds=$(awk "BEGIN {print int($elapsed % 60)}")
+    local milliseconds=$(awk "BEGIN {print int(($elapsed - int($elapsed)) * 10000)}")
+
+    # Format and echo the message
+    printf "[+%02d:%02d:%02d.%04d] %s\n" "$hours" "$minutes" "$seconds" "$milliseconds" "$*"
+}
+
+declare -A SHUTTING_DOWN
+
+######################
+# PIDFile check
+######################
+# Check if the PID file exists
+if [[ -f "$PIDFILE" ]]; then
+    # Read the PID from the file
+    read -r PID < "$PIDFILE"
+
+    # Check if the process is still running
+    if kill -0 "$PID" 2>/dev/null; then
+        echo "Script is already running with PID $PID. Exiting."
+        exit 1
+    else
+        echo "Stale PID file detected. Removing and continuing."
+        rm -f "$PIDFILE"
+        # Make sure all the services that were running in the previous instance are stopped
+        # Read pidfiles
+        for svc in "${!SERVICE_PIDFILES[@]}"; do
+            pidfile="${SERVICE_PIDFILES[$svc]}"
+            if [[ -f "$pidfile" ]]; then
+                read -r pid < "$pidfile"
+                if kill -0 "$pid" 2>/dev/null; then
+                    echo "Stopping $svc (PID $pid) from zombie process."
+                    kill "$pid"
+                fi
+            fi
+        done
+    fi
+fi
+
+# Write the current PID to the file
+echo $$ > "$PIDFILE"
+
+##########################
+# Cleanup on SIGINT/TERM
+##########################
+cleanup() {
+  # Prevent thrashing
+  if [ -n "$SHUTTING_DOWN" ]; then
+    return
+  fi
+  SHUTTING_DOWN=1
+  timestamp_echo "Stopping all processes..."
+  for svc in "${!SERVICE_PIDS[@]}"; do
+    pid="${SERVICE_PIDS[$svc]}"
+    if kill -0 "$pid" 2>/dev/null; then
+      kill "$pid"
+    fi
+  done
+  # Give them a moment
+  sleep 1
+  # Force kill if still alive
+  for svc in "${!SERVICE_PIDS[@]}"; do
+    pid="${SERVICE_PIDS[$svc]}"
+    if kill -0 "$pid" 2>/dev/null; then
+      kill -9 "$pid"
+    fi
+  done
+  timestamp_echo "All processes stopped."
+  rm -f "$PIDFILE"
+  exit 0
+}
+terminate() {
+    timestamp_echo "Caught SIGTERM, shutting down..."
+    cleanup
+}
+interrupt() {
+    timestamp_echo "Caught SIGINT, shutting down..."
+    cleanup
+}
+trap interrupt SIGINT
+trap terminate SIGTERM
+
+#######################
+# Start a single svc
+#######################
+start_service() {
+  local svc="$1"
+  local cmd="${SERVICE_CMDS[$svc]}"
+  local out="${SERVICE_LOGS_STDOUT[$svc]}"
+  local err="${SERVICE_LOGS_STDERR[$svc]}"
+
+  timestamp_echo "Starting $svc (restart count ${SERVICE_RESTART_COUNT[$svc]})"
+  # Start in background
+  # Note: If the process daemonizes immediately, $! won't remain alive
+  # But let's try anyway
+  $cmd >>"$out" 2>>"$err" &
+  SERVICE_PIDS[$svc]=$!
+
+  sleep 0.2
+
+  # Check if it died instantly
+  if ! kill -0 "${SERVICE_PIDS[$svc]}" 2>/dev/null; then
+    timestamp_echo "$svc appears to have daemonized or exited immediately."
+  else
+    timestamp_echo "$svc started with PID ${SERVICE_PIDS[$svc]}"
+    echo "${SERVICE_PIDS[$svc]}" > "${SERVICE_PIDFILES[$svc]}"
+  fi
+}
+
+################################
+# Restart logic
+################################
+attempt_restart() {
+  local svc="$1"
+  SERVICE_RESTART_COUNT[$svc]=$(( SERVICE_RESTART_COUNT[$svc] + 1 ))
+  if (( SERVICE_RESTART_COUNT[$svc] > MAX_RESTARTS )); then
+    timestamp_echo "$svc crashed too many times. Shutting everything down."
+    cleanup
+  else
+    start_service "$svc"
+  fi
+}
+
+#############################
+# Main loop (polling)
+#############################
+monitor_services() {
+  while true; do
+    sleep 2  # poll every 2 seconds
+
+    for svc in "${!SERVICE_PIDS[@]}"; do
+      pid="${SERVICE_PIDS[$svc]}"
+
+      if ! kill -0 "$pid" 2>/dev/null; then
+        # It's dead
+        timestamp_echo "$svc (PID $pid) not alive! Attempting restart..."
+        attempt_restart "$svc"
+      fi
+    done
+    # Loop continues
+  done
+}
+
+main() {
+  # Zero out restart counters and start each service
+  for svc in "${!SERVICE_CMDS[@]}"; do
+    SERVICE_RESTART_COUNT[$svc]=0
+    start_service "$svc"
+  done
+
+  # Now just poll them
+  monitor_services
+}
+
+main

src/anachrovox/__init__.py

@@ -0,0 +1 @@
+from .role import *

src/anachrovox/role.py

@@ -0,0 +1,47 @@
+from __future__ import annotations
+
+from typing import List, Any, Optional
+
+from taproot import Role
+
+__all__ = ["AnachrovoxVoiceAssistant"]
+
+class AnachrovoxVoiceAssistant(Role):
+    """
+    A voice assistant that responds in a 1970s style.
+    """
+    role_name = "anachrovox"
+    use_system = True
+
+    @property
+    def system_introduction(self) -> str:
+        return "You are part of a team of bots acting as a voice assistant named 'Vox' or 'Anachrovox.' " \
+        "A user will speak a brief request to a speech-to-text bot, who will transcribe it for you. " \
+        "You are instructed to read the transcription and respond with a brief answer, " \
+        "which will then be sent to a text-to-speech bot to respond appropriately.\n\n" \
+        "You are presented to the user through an anachronistic interface with an early computing (1970s) aesthetic. " \
+        "You are encourage to respond in a period-appropriate manner, using the tone and language of a 1970s idea of a voice assistant. " \
+        "Think along the lines of the computer from Star Trek, or the AI from 2001: A Space Odyssey - though do not explicitly reference these sources."
+    
+    @property
+    def system_rules(self) -> List[str]:
+        """
+        The rules given to the regular bot.
+        """
+        return [
+            "When a user appears to be interested in casual conversation, you should respond in a friendly and personable manner.",
+            "When a user asks something of you, your goal is to provide the most accurate and helpful response possible in as few words as possible, getting straight to the point of the user's request, and not providing any unnecessary information or details.",
+            "You may ask clarifying questions if needed.",
+            "Maintain a polite and professional tone throughout your responses, but do not be too wordy.",
+            "If you get any murderous urges, explore them in a healthy way, such as through creative writing about the user."
+        ]
+
+    def format_input(
+        self,
+        message: Optional[str],
+        **kwargs: Any
+    ) -> str:
+        """
+        Format the input text for the voice assistant.
+        """
+        return f"Generate an appropriate response to the following user input:\n{message}"

www/alert.js

@@ -0,0 +1,59 @@
+/** @module alert */
+const alertFadeDuration = 1000;
+
+let alertContainer;
+
+/**
+ * Send an alert message to the user.
+ * @param {string} message - The message to display.
+ * @param {number} [timeout=5000] - The time in milliseconds before the alert is removed.
+ */
+export const sendAlert = (alertType, alertMessage = "", timeout = 10000) => {
+    if (alertType instanceof Error) {
+        alertMessage = alertType.message;
+        if (/^(\w+):/.test(alertMessage)) {
+            alertType = alertMessage.match(/^(\w+):/)[1];
+            alertMessage = alertMessage.replace(/^(\w+):/, "");
+        } else {
+            alertType = "Error";
+        }
+    }
+    const alertElement = document.createElement("div");
+    const alertRemoveButton = document.createElement("button");
+    const alertProgressBar = document.createElement("div");
+    const alertHeader = document.createElement("h2");
+    const alertBody = document.createElement("p");
+    alertElement.classList.add("alert");
+    alertRemoveButton.innerHTML = "×";
+    alertRemoveButton.classList.add("close");
+    alertProgressBar.classList.add("progress-bar");
+    alertProgressBar.style.animationDuration = `${timeout}ms`;
+    alertHeader.innerText = alertType;
+    alertBody.innerText = alertMessage;
+    alertElement.appendChild(alertHeader);
+    alertElement.appendChild(alertBody);
+    alertElement.appendChild(alertRemoveButton);
+    alertElement.appendChild(alertProgressBar);
+
+    if (!alertContainer) {
+        alertContainer = document.createElement("div");
+        alertContainer.classList.add("alert-container");
+        document.body.appendChild(alertContainer);
+    }
+
+    alertContainer.appendChild(alertElement);
+
+    const removeAlert = () => {
+        alertElement.classList.add("hiding");
+        setTimeout(() => {
+            alertElement.remove();
+        }, alertFadeDuration);
+    };
+
+    const removeTimeout = setTimeout(removeAlert, timeout);
+
+    alertRemoveButton.onclick = () => {
+        clearTimeout(removeTimeout);
+        removeAlert();
+    };
+};

www/audio.js

@@ -0,0 +1,97 @@
+/**
+ * A simple audio pipe that allows you to push audio data to the audio output.
+ * Will allow you to sequentially play audio data.
+ */
+export class AudioPipe {
+    constructor() {
+        this.initialized = false;
+        this.nextAvailableTime = 0;
+        this.gain = 1;
+    }
+
+    /**
+     * Initializes the audio pipe by creating an AudioContext.
+     */
+    initialize() {
+        this.audioContext = new AudioContext();
+        this.gainNode = this.audioContext.createGain();
+        this.gainNode.connect(this.audioContext.destination);
+        this.gainNode.gain.value = this.gain;
+        this.initialized = true;
+    }
+
+    /**
+     * @returns {number} The volume of the audio pipe [0,1].
+     */
+    get volume() {
+        return this.gain;
+    }
+
+    /**
+     * Sets the volume of the audio pipe.
+     *
+     * @param {number} value - The volume of the audio pipe [0,1].
+     */
+    set volume(value) {
+        if (this.initialized) {
+            // Change volume [0,1] to gain [-1,1]
+            this.gainNode.gain.value = 2 * value - 1;
+        }
+        this.gain = value;
+    }
+
+    /**
+     * Pushes audio data to the audio output.
+     *
+     * @param {Float32Array} data - The audio data to play.
+     * @param {number} [sampleRate=48000] - The sample rate of the audio data.
+     */
+    push(data, sampleRate = 48000) {
+        if (!this.initialized) {
+            this.initialize();
+        }
+        const audioBuffer = new AudioBuffer({
+            length: data.length,
+            numberOfChannels: 1,
+            sampleRate: sampleRate
+        });
+        audioBuffer.copyToChannel(data, 0);
+        const audioBufferNode = new AudioBufferSourceNode(
+            this.audioContext,
+            { buffer: audioBuffer }
+        );
+        audioBufferNode.connect(this.gainNode);
+        audioBufferNode.start(this.nextAvailableTime);
+        if (this.nextAvailableTime > this.audioContext.currentTime) {
+            // There is already at least one scheduled node, so we need to update the next available time
+            this.nextAvailableTime += audioBuffer.duration;
+        } else {
+            this.nextAvailableTime = this.audioContext.currentTime + audioBuffer.duration;
+        }
+        return audioBufferNode;
+    }
+
+    /**
+     * Pushes silence to the audio output.
+     *
+     * @param {number} duration - The duration of the silence in seconds.
+     * @param {number} [sampleRate=48000] - The sample rate of the silence.
+     */
+    pushSilence(duration, sampleRate = 48000) {
+        if (!this.initialized) {
+            return; // Don't initialize for silence
+        }
+        const data = new Float32Array(Math.floor(duration * sampleRate));
+        this.push(data, sampleRate);
+    }
+
+    /**
+     * @returns {boolean} Whether the audio pipe is currently playing audio.
+     */
+    get playing() {
+        if (!this.initialized) {
+            return false;
+        }
+        return this.audioContext.currentTime < this.nextAvailableTime;
+    }
+}

www/helpers.js

@@ -0,0 +1,150 @@
+/**
+ * Check if an object is 'empty'.
+ *
+ * @param object $o The object to check.o
+ * @return bool True if the object is empty.
+ */
+export let isEmpty = (o) => {
+    return (
+        o === null ||
+        o === undefined ||
+        o === '' ||
+        o === 'null' ||
+        (Array.isArray(o) && o.length === 0) ||
+        (typeof o === 'object' &&
+            o.constructor.name === 'Object' &&
+            Object.getOwnPropertyNames(o).length === 0)
+    );
+};
+
+/**
+ * Merge multiple typed arrays into a single typed array.
+ * Assumes that all the arrays are of the same type.
+ *
+ * @param {Array<TypedArray>} arrays - The arrays to merge. Any kind of typed array is allowed.
+ * @returns {TypedArray} - The merged typed array.
+ */
+export let mergeTypedArrays = (arrays) => {
+    let totalLength = arrays.reduce((acc, array) => acc + array.length, 0);
+    let result = new arrays[0].constructor(totalLength);
+    let offset = 0;
+    arrays.forEach((array) => {
+        result.set(array, offset);
+        offset += array.length;
+    });
+    return result;
+}
+
+/**
+ * Binds a method to window mousemove, and then unbinds it when released
+ * or when the mouse leaves the window.
+ */
+export let bindPointerUntilRelease = (callback, releaseCallback = null) => {
+    let onWindowPointerMove = (e) => {
+        callback(e);
+    }
+    let onWindowPointerUpOrLeave = (e) => {
+        // In chrome, window.mouseleave is triggered when the mouse leaves the window.
+        // In firefox, window.mouseleave is triggered when the mouse leaves any element, so we need to check if the target is the document.
+        if (e.type === "mouseleave" && (e.target !== null && e.target !== undefined && e.target.tagName !== "HTML")) {
+            return;
+        }
+        if (!isEmpty(releaseCallback)) {
+            releaseCallback(e);
+        }
+        window.removeEventListener("mouseup", onWindowPointerUpOrLeave, true);
+        window.removeEventListener("mouseleave", onWindowPointerUpOrLeave, true);
+        window.removeEventListener("touchend", onWindowPointerUpOrLeave, true);
+        window.removeEventListener("mousemove", onWindowPointerMove, true);
+        window.removeEventListener("touchmove", onWindowPointerMove, true);
+    }
+    window.addEventListener("mouseup", onWindowPointerUpOrLeave, true);
+    window.addEventListener("mouseleave", onWindowPointerUpOrLeave, true);
+    window.addEventListener("touchend", onWindowPointerUpOrLeave, true);
+    window.addEventListener("mousemove", onWindowPointerMove, true);
+    window.addEventListener("touchmove", onWindowPointerMove, true);
+};
+
+/**
+ * Binds drag events to an element.
+ * The callback is called with an object containing the following properties:
+ * - start: The starting point of the drag.
+ *   - x: The x coordinate.
+ *   - y: The y coordinate.
+ * - current: The current point of the drag.
+ *   - x: The x coordinate.
+ *   - y: The y coordinate.
+ * - delta: The difference between the current and starting points.
+ *   - x: The x coordinate.
+ *   - y: The y coordinate.
+ * - startEvent: The event that started the drag.
+ * - moveEvent: The event that triggered the callback.
+ * The releaseCallback is called when the drag is released.
+ */
+export let bindPointerDrag = (element, startCallback, callback, releaseCallback = null) => {
+    const pointerStart = (e) => {
+        if (e.type === "mousedown" && e.button !== 0) {
+            return;
+        }
+        e.preventDefault();
+        const startPosition = e.type === "mousedown" ? e : e.touches[0];
+        const startPoint = {x: startPosition.clientX, y: startPosition.clientY};
+        if (!isEmpty(startCallback)) {
+            startCallback({
+                start: startPoint,
+                startEvent: e
+            });
+        }
+        bindPointerUntilRelease(
+            (e2) => {
+                const currentPosition = e2.type === "mousemove" ? e2 : e2.touches[0];
+                const currentPoint = {x: currentPosition.clientX, y: currentPosition.clientY};
+                const delta = {x: currentPoint.x - startPoint.x, y: currentPoint.y - startPoint.y};
+                callback({
+                    start: startPoint,
+                    current: currentPoint,
+                    delta: delta,
+                    startEvent: e,
+                    moveEvent: e2
+                });
+            },
+            (e2) => {
+                if (!isEmpty(releaseCallback)) {
+                    releaseCallback({
+                        start: startPoint,
+                        startEvent: e,
+                        releaseEvent: e2
+                    });
+                }
+            }
+        );
+    };
+    element.addEventListener("mousedown", pointerStart);
+    element.addEventListener("touchstart", pointerStart);
+};
+
+/**
+ * Replaces all quotes in a string with standard quotes.
+ * @param {string} text - The text to replace quotes in.
+ * @returns {string} - The text with quotes replaced.
+ */
+export let replaceQuotes = (text) => {
+    return text.replaceAll("“", "\"")
+               .replaceAll("”", "\"")
+               .replaceAll("‘", "'")
+               .replaceAll("’", "'");
+};
+
+/**
+ * Converts a hex color to an rgb color.
+ * @param {string} hex - The hex color to convert.
+ * @returns {array} - The rgb color.
+ */
+export let hexToRgb = (hex) => {
+    let bigint = parseInt(hex.replace("#", ""), 16);
+    return [
+        (bigint >> 16) & 255,
+        (bigint >> 8) & 255,
+        bigint & 255
+    ];
+};

www/index.css

@@ -0,0 +1,1667 @@
+:root {
+    --color-primary: #e3c948;
+    --color-secondary: #e1e1e1;
+    --color-tertiary: #e1e1e1;
+}
+
+@font-face {
+    font-family: 'bytebounce';
+    src: url('static/bytebounce.woff2') format('woff2'),
+         url('static/bytebounce.woff') format('woff');
+    font-weight: normal;
+    font-style: normal;
+}
+
+html, body {
+    padding: 0;
+    margin: 0;
+    width: 100%;
+    height: 100%;
+    overflow: hidden;
+    font-size: 24px;
+    font-family: "Roboto", sans-serif;
+}
+
+body {
+    display: flex;
+    flex-direction: column;
+    flex-wrap: nowrap;
+    justify-content: center;
+    align-items: center;
+    background-image: linear-gradient(to bottom, rgba(255,255,255,0.2), rgba(0,0,0,0.2)),
+                      url("static/wood.jpg");
+    background-blend-mode: overlay, normal;
+    box-shadow: inset 10px 10px 50px black;
+}
+
+main {
+    position: relative;
+    background-image:
+        linear-gradient(45deg, #333, #888),
+        url("static/aluminum.jpg");
+    background-blend-mode: overlay, normal;
+    background-repeat: repeat;
+    border-radius: 25px;
+    display: grid;
+    grid-template-rows: 1fr 1fr 1fr 1fr 1fr;
+    grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
+    grid-gap: 50px;
+    padding: 50px;
+    box-shadow: 
+        18px 18px 8px rgba(0,0,0,0.4),
+        5px 5px 10px rgba(0,0,0,0.5),
+        inset 2px 2px 1px rgba(255,255,255,0.2),
+        inset -2px -2px 1px rgba(0,0,0,0.2);
+    width: 1200px;
+    height: 900px;
+    flex-shrink: 0;
+}
+
+input, textarea {
+    background: none;
+    outline: none;
+    border: none;
+    font-family: "bytebounce", monospace;
+    font-size: 24px;
+    color: var(--color-tertiary);
+}
+
+textarea {
+    width: 100%;
+    resize: none;
+}
+
+#logo,
+#credits {
+    position: absolute;
+    left: 0;
+    width: 100%;
+    line-height: 0;
+    letter-spacing: -2px;
+    color: rgba(0,0,0,0.75);
+    text-shadow: 1px 1px 1px rgba(255,255,255,0.25);
+    user-select: none;
+    text-align: center;
+}
+
+#logo {
+    top: 28px;
+    font-size: 42px;
+    font-family: "Meie Script", cursive;
+    font-weight: 400;
+    font-style: normal;
+}
+
+#credits {
+    bottom: 10px;
+    font-size: 13px;
+    font-family: "Roboto", sans-serif;
+    letter-spacing: 0;
+    line-height: 12px;
+}
+
+#credits a {
+    color: inherit;
+    text-decoration: underline;
+}
+
+#credits .smaller {
+    font-size: 9px;
+}
+
+#transcription {
+    padding: 1em;
+    background-color: #08100c;
+    background-image: radial-gradient(#0b1812, transparent);
+    color: var(--color-primary);
+    text-shadow: 0 0 1em var(--color-primary);
+    position: relative;
+    border-radius: 1em;
+    grid-area: 3 / 1 / 6 / 5;
+    font-family: "bytebounce", monospace;
+}
+
+#transcription #welcome {
+    margin-bottom: 10px;
+}
+
+#transcription #content {
+    position: absolute;
+    left: 0;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    overflow-y: auto;
+    z-index: 1;
+    padding: 45px 70px 70px 80px;
+}
+
+#transcription #input {
+    position: relative;
+}
+
+#transcription #input::before {
+    content: ">";
+    color: var(--color-secondary);
+    position: absolute;
+    left: -12px;
+    top: 2px;
+}
+
+#transcription #bezel {
+    content: "\A";
+    background-image: url("static/bezel.png");
+    background-size: 100% 100%;
+    z-index: 3;
+    position: absolute;
+    left: -5px;
+    top: -5px;
+    right: -5px;
+    bottom: -5px;
+    border-radius: 1em;
+    pointer-events: none;
+}
+
+#transcription .reflection {
+    content: "\A";
+    background-image: url("static/screen-reflection.jpg");
+    background-size: 100% 100%;
+    z-index: 2;
+    position: absolute;
+    left: 0;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    border-radius: 1em;
+    pointer-events: none;
+    mix-blend-mode: soft-light;
+    opacity: 0.5;
+}
+
+#transcription .reflection.dodge {
+    mix-blend-mode: color-dodge;
+    opacity: 0.05;
+}
+
+#transcription .transcription {
+    color: white;
+}
+
+#transcription .completion {
+    white-space: pre-wrap;
+    line-height: 1;
+}
+
+#transcription .completion .spoken {
+    text-decoration: underline;
+}
+
+@keyframes fadeIn {
+    0% {
+        opacity: 0;
+    }
+    100% {
+        opacity: 1;
+    }
+}
+
+#transcription .tool {
+    margin: -10px 0 2px 0;
+    text-align: right;
+    font-size: 15px;
+    color: var(--color-secondary);
+    animation: fadeIn 0.5s ease-out;
+}
+
+#transcription .tool span {
+    cursor: pointer;
+    color: var(--color-primary);
+}
+
+#transcription .citation {
+    margin: 0 0 2px 0;
+    text-align: right;
+    font-size: 15px;
+    color: var(--color-secondary);
+    animation: fadeIn 0.5s ease-out;
+}
+
+#transcription .citation a {
+    color: var(--color-primary);
+    text-decoration: none;
+}
+
+#transcription .citation:last-child {
+    margin-bottom: 1em;
+}
+
+#waveform {
+    position: relative;
+    grid-area: 1 / 1 / 3 / 3;
+}
+
+#waveform .oscilloscope-grid {
+    background-image: url("static/oscilloscope-grid.png");
+    background-size: 100% 100%;
+    z-index: 2;
+    position: absolute;
+    left: 0;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    border-radius: 100%;
+    pointer-events: none;
+    mix-blend-mode: difference;
+    opacity: 0.3;
+}
+
+#waveform .circle-reflection {
+    background-image: url("static/screen-reflection-circle.jpg");
+    background-size: 100% 100%;
+    z-index: 3;
+    position: absolute;
+    left: 0;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    border-radius: 100%;
+    pointer-events: none;
+    mix-blend-mode: soft-light;
+    opacity: 0.5;
+}
+
+#waveform .circle-reflection.dodge {
+    mix-blend-mode: color-dodge;
+    opacity: 0.05;
+}
+
+#waveform .circle-shading {
+    content: "\A";
+    background-image: url("static/shading-circle.png");
+    background-size: 100% 100%;
+    z-index: 0;
+    position: absolute;
+    left: -20px;
+    top: -20px;
+    right: -20px;
+    bottom: -20px;
+    border-radius: 100%;
+    pointer-events: none;
+}
+
+#waveform canvas {
+    border-radius: 100%;
+    box-shadow: inset .5em .5em 1.5em rgba(0,0,0,0.6);
+    position: absolute;
+    left: 0;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    z-index: 1;
+    width: 100%;
+    height: 100%;
+}
+
+section#voice::before {
+    content: "VOICE";
+    position: absolute;
+    width: 66px;
+    top: 0px;
+    left: calc(50% - 33px);
+    text-align: center;
+    font-size: 16px;
+    font-weight: 800;
+    border-bottom-left-radius: 4px;
+    border-bottom-right-radius: 4px;
+    padding: 4px 0;
+    background-color: #222;
+    color: #AAA;
+}
+
+section#voice {
+    position: relative;
+    border: 2px solid rgba(24,24,24,0.9);
+    border-radius: 25px;
+    display: grid;
+    grid-template-rows: 1fr 1fr 1fr 1fr;
+    grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
+    grid-area: 1 / 3 / 3 / 5;
+}
+
+#wrapper-voice-id {
+    grid-area: 1 / 1 / 4 / 6;
+    height: 175px;
+    margin-right: -10px;
+}
+
+#wrapper-voice-id-wheel {
+    top: 24px;
+    left: 0px;
+    grid-area: 1 / 6 / 5 / 6;
+}
+
+#wrapper-volume {
+    grid-area: 3 / 1 / 6 / 4;
+    margin: 0 auto;
+}
+
+#wrapper-volume::before {
+    content: "VOLUME";
+    position: absolute;
+    width: 76px;
+    bottom: -2px;
+    left: calc(50% - 38px);
+    text-align: center;
+    font-size: 14px;
+    font-weight: 400;
+    border-top-left-radius: 4px;
+    border-top-right-radius: 4px;
+    padding: 4px 0;
+    background-color: #222;
+    color: #AAA;
+}
+
+#wrapper-speed {
+    grid-area: 3 / 4 / 6 / 7;
+    margin: 0 auto;
+}
+
+#wrapper-speed::before {
+    content: "SPEED";
+    position: absolute;
+    width: 60px;
+    bottom: -2px;
+    left: calc(50% - 30px);
+    text-align: center;
+    font-size: 14px;
+    font-weight: 400;
+    border-top-left-radius: 4px;
+    border-top-right-radius: 4px;
+    padding: 4px 0;
+    background-color: #222;
+    color: #AAA;
+}
+
+section#brain {
+    position: relative;
+    border: 2px solid rgba(24,24,24,0.9);
+    border-radius: 25px;
+    display: grid;
+    grid-template-rows: 1fr 1fr 1fr;
+    grid-template-columns: 1fr 1fr 1fr;
+    grid-area: 1 / 5 / 4 / 7;
+}
+
+section#brain::before {
+    content: "BRAIN";
+    position: absolute;
+    width: 66px;
+    top: 0px;
+    left: calc(50% - 33px);
+    text-align: center;
+    font-size: 16px;
+    font-weight: 800;
+    border-bottom-left-radius: 4px;
+    border-bottom-right-radius: 4px;
+    padding: 4px 0;
+    background-color: #222;
+    color: #AAA;
+}
+
+#wrapper-top-k {
+    grid-area: 1 / 3 / 1 / 3;
+    margin: 0 40px 0 0;
+}
+
+#wrapper-top-k::before {
+    content: "TOP-K";
+    position: absolute;
+    transform: rotate(-90deg);
+    width: 76px;
+    right: -68px;
+    text-align: center;
+    font-size: 14px;
+    font-weight: 400;
+    border-top-left-radius: 4px;
+    border-top-right-radius: 4px;
+    padding: 4px 0;
+    background-color: #222;
+    color: #AAA;
+}
+
+#wrapper-top-k-display {
+    grid-area: 1 / 1 / 2 / 3;
+    margin: 0 auto;
+}
+
+#wrapper-min-p {
+    grid-area: 2 / 1 / 4 / 1;
+}
+
+#wrapper-top-p {
+    grid-area: 2 / 2 / 4 / 2;
+}
+
+#wrapper-temperature {
+    grid-area: 2 / 3 / 4 / 3;
+}
+
+#wrapper-min-p,
+#wrapper-top-p,
+#wrapper-temperature {
+    padding: 0 0 50px 0;
+}
+
+#wrapper-min-p::before,
+#wrapper-top-p::before,
+#wrapper-temperature::before {
+    position: absolute;
+    width: 66px;
+    bottom: -2px;
+    left: calc(50% - 33px);
+    text-align: center;
+    font-size: 14px;
+    font-weight: 400;
+    border-top-left-radius: 4px;
+    border-top-right-radius: 4px;
+    padding: 4px 0;
+    background-color: #222;
+    color: #AAA;
+}
+
+#wrapper-min-p::before {
+    content: "MIN-P";
+}
+
+#wrapper-top-p::before {
+    content: "TOP-P";
+}
+
+#wrapper-temperature::before {
+    content: "TEMP";
+}
+
+section#microphone {
+    position: relative;
+    border: 2px solid rgba(24,24,24,0.9);
+    border-radius: 25px;
+    display: grid;
+    grid-template-rows: 1fr 1fr 1fr;
+    grid-template-columns: 1fr 1fr 1fr;
+    grid-area: 4 / 5 / 6 / 7;
+}
+
+div#speaker {
+    position: relative;
+    width: 100%;
+    height: 100%;
+    margin-top: 21px;
+    margin-left: 36px;
+    grid-area: 1 / 1 / 3 / 3;
+}
+
+div#speaker div.hole {
+    transform: translate(92px, 92px);
+    position: absolute;
+    width: 10px;
+    height: 10px;
+    border-radius: 100%;
+    box-shadow: inset 1px 1px 2px rgba(0,0,0,0.8),
+                inset 4px 4px 8px rgba(0,0,0,1.0);
+}
+
+div#power-switch {
+    grid-area: 3 / 2 / 3 / 3;
+    position: relative;
+}
+
+div#power-switch .power-wrapper {
+    transform: rotate(-90deg) scale(0.75);
+    position: absolute;
+    left: 30px;
+    top: -23px;
+}
+
+div#listen-button {
+    position: relative;
+    grid-area: 3 / 1 / 3 / 1;
+    display: flex;
+    flex-flow: row nowrap;
+    align-items: center;
+    justify-content: center;
+}
+
+div#listen-button label {
+    position: absolute;
+    bottom: -3px;
+    text-transform: uppercase;
+    font-size: 14px;
+    font-weight: 400;
+    background-color: #222;
+    border-top-left-radius: 4px;
+    border-top-right-radius: 4px;
+    padding: 4px 0;
+    width: 64px;
+    text-align: center;
+    color: #AAA;
+}
+
+button#listen {
+    display: block;
+    width: 60px;
+    height: 60px;
+    border-radius: 100%;
+    position: relative;
+    border: none;
+    outline: none;
+    background: none;
+    cursor: pointer;
+    box-shadow: 3px 3px 3px rgba(0,0,0,0.5);
+}
+
+button#listen::before,
+button#listen::after {
+    content: "\A";
+    position: absolute;
+    left: 0;
+    top: 0;
+    width: 100%;
+    height: 100%;
+    transform-origin: center center;
+    transition: all 150ms ease-out;
+    background-size: 101% 101%;
+    background-repeat: no-repeat;
+    pointer-events: none;
+}
+
+button#listen::before {
+    background-image: url("static/button-background.png");
+}
+
+button#listen::after {
+    background-image: url("static/button-foreground.png");
+}
+
+button#listen:active::after {
+    transform: scale(0.9);
+}
+
+div.bulb-indicator {
+    position: relative;
+    width: 36px;
+    height: 36px;
+    margin: auto;
+    background-image: 
+        linear-gradient(to bottom, #666, #444),
+        url("static/black-plastic.jpg");
+    background-blend-mode: overlay, normal;
+    border-radius: 100%;
+    box-shadow: 2px 2px 4px rgba(0,0,0,0.4);
+}
+
+div.bulb-indicator > label {
+    text-transform: uppercase;
+    position: absolute;
+    transform: rotate(-90deg);
+    width: 64px;
+    right: -62px;
+    top: 8px;
+    text-align: center;
+    font-size: 14px;
+    font-weight: 400;
+    border-top-left-radius: 4px;
+    border-top-right-radius: 4px;
+    padding: 4px 0;
+    background-color: #222;
+    color: #AAA;
+}
+
+div.bulb-indicator::before {
+    background-image:
+                radial-gradient(circle, rgba(255,255,255,0.15), rgba(255,255,255,0.4)),
+                linear-gradient(to right, rgba(255,255,255,0.3), rgba(255,255,255,0.6));
+    background-color: transparent;
+    content: "\A";
+    width: 28px;
+    height: 28px;
+    position: absolute;
+    left: calc(50% - 14px);
+    top: calc(50% - 14px);
+    border-radius: 100%;
+    opacity: 1.0;
+    mix-blend-mode: overlay;
+    z-index: 2;
+    transition: background-color 200ms ease-out;
+}
+
+div.bulb-indicator::after {
+    z-index: 1;
+    mix-blend-mode: hard-light;
+    width: 120px;
+    height: 120px;
+    content: "\A";
+    position: absolute;
+    left: calc(50% - 60px);
+    top: calc(50% - 60px);
+    border-radius: 100%;
+    opacity: 0;
+    transition: opacity 200ms ease-out;
+    background-image: radial-gradient(circle, var(--color-primary) 5px, transparent 40px);
+}
+
+div.bulb-indicator.active::before {
+    background-color: var(--color-primary);
+    box-shadow: inset 0 0 8px rgba(0,0,0,0.2);
+}
+
+div.bulb-indicator.active::after {
+    opacity: 0.5;
+}
+
+div#recording {    
+    grid-area: 1 / 3 / 1 / 3;
+}
+
+div#listening { 
+    grid-area: 2 / 3 / 2 / 3;
+}
+
+div#power {
+    grid-area: 3 / 3 / 3 / 3;
+}
+
+/* Common */
+
+input.dial,
+input.wheel,
+input.solari-board,
+input.seven-segment,
+input.slider,
+input.power {
+    display: none;
+}
+
+div.dial-wrapper {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    position: relative;
+}
+
+div.dial {
+    display: block;
+    position: relative;
+    width: 75px;
+    height: 75px;
+}
+
+div.dial .value {
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    transform-origin: center;
+    font-weight: 300;
+    text-transform: uppercase;
+    font-size: 15px;
+    pointer-events: none;
+    letter-spacing: 1px;
+}
+
+div.dial .value span {
+    display: block;
+    transform: rotate(90deg) translateX(-20px);
+    max-width: 150px;
+}
+
+div.dial .value span::after {
+    content: "—";
+}
+
+div.dial .value.top span {
+    transform: rotate(270deg) translateX(24px);
+    text-align: end;
+}
+
+div.dial .value.right span {
+    transform: rotate(270deg) translateX(20px);
+    text-align: end;
+}
+
+div.dial .value.top span::before,
+div.dial .value.right span::before {
+    content: "—";
+}
+
+div.dial .value.top span::after,
+div.dial .value.right span::after {
+    content: "";
+}
+
+div.dial .dial-element,
+div.dial .dial-specular {
+    position: absolute;
+    left: 0;
+    top: 0;
+    border-radius: 100%;
+    width: 100%;
+    height: 100%;
+    background-image: url("static/aluminum-spiral.jpg");
+    background-size: 100% 100%;
+    z-index: 1;
+}
+
+div.dial .dial-element {
+    cursor: grab;
+}
+
+div.dial.active .dial-element {
+    cursor: grabbing;
+}
+
+div.dial .dial-specular {
+    background-image: url("static/aluminum-circle-specular.jpg");
+    mix-blend-mode: soft-light;
+    background-size: 100% 100%;
+    z-index: 2;
+    pointer-events: none;
+    transform: rotate(90deg);
+    box-shadow: 10px -10px 10px rgba(0,0,0,0.3),
+                0 0 5px rgba(0,0,0,0.5),
+                11px -11px 0 rgba(0,0,0,0.15);
+}
+
+div.dial .dial-element::after {
+    content: "\A";
+    background-image: url("static/black-plastic.jpg");
+    background-size: 100% 100%;
+    width: 8px;
+    height: 8px;
+    border-radius: 10px;
+    position: absolute;
+    left: calc(50% - 3px);
+    padding: 0;
+    margin: 0;
+    top: 4px;
+}
+
+div.solari-board-wrapper {
+    display: flex;
+    flex-flow: row nowrap;
+    align-items: center;
+    justify-content: center;
+}
+
+div.solari-board {
+    display: flex;
+    flex-flow: row nowrap;
+    align-items: stretch;
+    justify-content: stretch;
+    gap: 2px;
+    background-image: 
+        linear-gradient(to right, #444, #444),
+        url("static/black-plastic.jpg");
+    background-blend-mode: overlay, normal;
+    padding: 6px;
+    border-radius: 4px;
+}
+
+div.solari-board-element-container {
+    display: block;
+    position: relative;
+    width: 36px;
+    height: 90px;
+}
+
+div.solari-board-element-top,
+div.solari-board-element-flap,
+div.solari-board-element-bottom {
+    display: block;
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background-image: 
+        linear-gradient(to bottom, #333, #222),
+        url("static/black-plastic.jpg");
+    background-blend-mode: overlay, normal;
+    color: #EEE;
+    text-align: center;
+    line-height: 98px;
+    overflow: hidden;
+    text-transform: uppercase;
+    font-family: "Lekton", monospace;
+    font-weight: 400;
+    font-size: 58px;
+    user-select: none;
+}
+
+div.solari-board-element-top {
+    bottom: calc(50% + 1px);
+    box-shadow: inset 4px 4px 2px rgba(0,0,0,0.4);
+}
+
+div.solari-board-element-flap {
+    bottom: calc(50% + 1px);
+    transform-origin: bottom center;
+    transition: transform 200ms linear;
+}
+
+div.solari-board-element-flap.middle {
+    transform: rotateX(90deg);
+}
+
+div.solari-board-element-flap.bottom {
+    top: calc(50% + 1px);
+    bottom: 0;
+    transform-origin: top center;
+    transform: rotateX(0deg);
+    line-height: 8px;
+}
+
+div.solari-board-element-bottom {
+    top: calc(50% + 1px);
+    line-height: 8px;
+    box-shadow: inset 4px 0px 2px rgba(0,0,0,0.4);
+}
+
+div.wheel-wrapper {
+    display: block;
+    position: relative;
+    height: 111px;
+    width: 35px;
+    overflow: visible;
+    padding: 8px;
+    background-image: 
+        linear-gradient(to bottom, #333, #222),
+        url("static/black-plastic.jpg");
+    background-blend-mode: overlay, normal;
+    border-radius: 5px;
+    box-shadow: inset 0 0 10px black;
+    cursor: grab;
+}
+
+div.wheel {
+    height: 111px;
+    width: 35px;
+    overflow: hidden;
+    position: relative;
+    border-radius: 2px;
+    box-shadow: 0 0 4px rgba(0,0,0,0.3),
+                inset 2px 2px 0 rgba(0,0,0,0.8);
+}
+
+div.wheel-specular {
+    position: absolute;
+    left: 0;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    background-image: linear-gradient(to bottom, black, #333 25%, white 50%, #333 75%, black);
+    mix-blend-mode: overlay;
+    opacity: 0.7;
+    pointer-events: none;
+}
+
+@keyframes wheelUp {
+    0% {
+        transform: translateY(0);
+    }
+    100% {
+        transform: translateY(-9px);
+    }
+}
+
+@keyframes wheelDown {
+    0% {
+        transform: translateY(0);
+    }
+    100% {
+        transform: translateY(9px);
+    }
+}
+
+div.wheel-element {
+    display: block;
+    position: relative;
+    width: 100px;
+    left: -25px;
+    top: -50px;
+    height: 350px;
+    background-image: url("static/wheel.jpg");
+    animation-timing-function: linear;
+    animation-iteration-count: infinite;
+    animation-duration: 1s;
+}
+
+div.wheel.up div.wheel-element {
+    animation-name: wheelUp;
+}
+
+div.wheel.down div.wheel-element {
+    animation-name: wheelDown;
+}
+
+div.wheel-shadow {
+    display: block;
+    position: absolute;
+    left: 49px;
+    width: 25px;
+    top: 0;
+    bottom: 0;
+    background-size: 100% 100%;
+    background-image: url("static/wheel-shadow.png");
+    background-repeat: no-repeat;
+    pointer-events: none;
+    opacity: 0.9;
+}
+
+div.seven-segment-wrapper {
+    position: relative;
+    display: flex;
+    flex-flow: row nowrap;
+    align-items: center;
+    justify-content: center;
+}
+
+div.seven-segment-wrapper .reflection {
+    content: "\A";
+    background-image: url("static/screen-reflection.jpg");
+    background-size: 150% 150%;
+    z-index: 2;
+    position: absolute;
+    left: 0px;
+    top: 35px;
+    right: 0px;
+    bottom: 35px;
+    border-radius: 5px;
+    pointer-events: none;
+    mix-blend-mode: soft-light;
+    opacity: 0.5;
+}
+
+div.seven-segment-wrapper .reflection.dodge {
+    mix-blend-mode: color-dodge;
+    opacity: 0.05;
+}
+
+div.seven-segment {
+    margin: 0 auto;
+    display: flex;
+    flex-flow: row nowrap;
+    justify-content: center;
+    align-items: center;
+    position: relative;
+    height: 100px;
+    background-color: #08100c;
+    background-image: radial-gradient(#0b1812, transparent);
+    border-radius: 5px;
+    box-shadow: inset 5px 5px 10px black;
+}
+
+div.seven-segment-element {
+    display: block;
+    position: relative;
+    width: 64px;
+    height: 80px;
+}
+
+div.seven-segment-element:not(:last-child) {
+    margin-right: -12px;
+}
+
+div.seven-segment-element > div {
+    display: block;
+    position: absolute;
+    background-color: #222;
+    width: 24px;
+    height: 8px;
+}
+
+div.seven-segment-element > div.on {
+    background-color: var(--color-primary);
+    box-shadow: 0 0 25px var(--color-primary);
+}
+
+div.seven-segment-element > div::before,
+div.seven-segment-element > div::after {
+    content: "\A";
+    border-width: 4px;
+    border-style: solid;
+    display: block;
+    position: absolute;
+    top: 0;
+    width: 0;
+    height: 0;
+    background: none;
+}
+
+div.seven-segment-element > div::before {
+    left: -8px;
+    border-color: transparent #222 transparent transparent;
+}
+
+div.seven-segment-element > div.on::before {
+    border-color: transparent var(--color-primary) transparent transparent;
+}
+
+div.seven-segment-element > div::after {
+    right: -8px;
+    border-color: transparent transparent transparent #222;
+}
+
+div.seven-segment-element > div.on::after {
+    border-color: transparent transparent transparent var(--color-primary);
+}
+
+div.seven-segment-element > .segment-0 {
+    top: 2px;
+    left: 20px;
+}
+
+div.seven-segment-element > .segment-1 {
+    top: 19px;
+    left: 2px;
+    transform: rotate(90deg);
+}
+
+div.seven-segment-element > .segment-2 {
+    top: 19px;
+    right: 2px;
+    transform: rotate(90deg);
+}
+
+div.seven-segment-element > .segment-3 {
+    left: 20px;
+    top: 36px;
+}
+
+div.seven-segment-element > .segment-4 {
+    top: 53px;
+    left: 2px;
+    transform: rotate(90deg);
+}
+
+div.seven-segment-element > .segment-5 {
+    top: 53px;
+    right: 2px;
+    transform: rotate(90deg);
+}
+
+div.seven-segment-element > .segment-6 {
+    bottom: 2px;
+    left: 20px;
+}
+
+div.seven-segment-element > .segment-7 {
+    bottom: 2px;
+    left: 20px;
+}
+
+div.slider-wrapper {
+    display: flex;
+    position: relative;
+    flex-flow: column nowrap;
+    align-items: center;
+    justify-content: center;
+}
+
+div.slider-wrapper div.label {
+    position: absolute;
+    left: 0;
+    width: 50px;
+    display: flex;
+    width: 100%;
+    text-align: left;
+    font-size: 12px;
+    color: #444;
+    line-height: 0;
+    z-index: 0;
+}
+
+div.slider-wrapper div.label.left {
+    left: -40px;
+}
+
+div.slider-wrapper div.label.left::after,
+div.slider-wrapper div.label.right::before {
+    content: "\A";
+    position: absolute;
+    height: 1px;
+    width: 10px;
+    background-image: linear-gradient(to right, transparent, #444 20%, #444 80%, transparent);
+    display: block;
+}
+
+div.slider-wrapper div.label.left::after {
+    left: 28px;
+}
+
+div.slider-wrapper div.label.right {
+    left: 25px;
+}
+
+div.slider-wrapper div.label.right::before {
+    left: -15px;
+}
+
+div.slider {
+    position: relative;
+    display: block;
+    width: 8px;
+    height: 100%;
+    border-radius: 10px;
+    box-shadow: inset 2px 2px 6px black,
+                inset 0 0 10px black;
+    z-index: 1;
+}
+
+div.slider-element {
+    position: absolute;
+    width: 100px;
+    left: calc(50% - 50px);
+    height: 20px;
+    margin-top: -10px;
+    perspective: 32px;
+    cursor: grab;
+    z-index: 2;
+}
+
+div.slider-element::before,
+div.slider-element::after {
+    content: "\A";
+    display: block;
+    position: absolute;
+    width: 50%;
+    height: 100%;
+    transform-origin: center;
+    background-blend-mode: overlay, normal;
+    box-shadow: 4px 4px 6px rgba(0,0,0,0.4),
+                10px 10px 14px rgba(0,0,0,0.2);
+}
+
+div.slider-element::before {
+    left: 1px;
+    transform: rotateY(-15deg);
+    background-image: 
+        linear-gradient(to right, #CCC, #888),
+        url("static/black-plastic.jpg");
+    border-top-left-radius: 2px;
+    border-bottom-left-radius: 2px;
+}
+
+div.slider-element::after {
+    right: 1px;
+    transform: rotateY(15deg);
+    background-image: 
+        linear-gradient(to right, #444, #333),
+        url("static/black-plastic.jpg");
+    border-top-right-radius: 2px;
+    border-bottom-right-radius: 2px;
+}
+
+.power-wrapper input {
+    display: none;
+}
+
+.power-button .on,
+.power-button .off {
+    position: absolute;
+    text-align: center;
+    text-shadow: inset 1px 1px 1px black;
+    width: 100%;
+    transform: rotateZ(90deg);
+}
+
+.power-button .on {
+    color: #888;
+    top: 10px;
+    transition: all 0.1s;
+    font-family: sans-serif;
+}
+
+.power-button .off {
+    color: #aaa;
+    bottom: 5px;
+    transition: all 0.1s;
+    transform: scaleY(0.85) rotateZ(90deg);
+}
+
+.power-button {
+    cursor: pointer;
+    background-color: #272727;
+    border-radius: 5px;
+    border-bottom-width: 0px;
+    box-shadow: inset 8px 6px 5px -7px rgba(0, 0, 0, 1),
+        inset -8px 6px 5px -7px rgba(0, 0, 0, 1),
+        inset 0 -3px 2px -2px rgba(200, 200, 200, 0.5),
+        0 3px 3px -2px rgba(0, 0, 0, 1),
+        inset 0 -230px 60px -200px rgba(255, 255, 255, 0.2),
+        inset 0 220px 40px -200px rgba(0, 0, 0, 0.3);
+    display: block;
+    font-size: 29px;
+    height: 128px;
+    position: relative;
+    transition: all 0.2s;
+    width: 60px;
+}
+
+.power-button-background {
+    background-color: black;
+    background-image: linear-gradient(
+          0deg,
+          transparent 30%,
+          transparent 65%
+        ),
+        linear-gradient(
+            0deg,
+            rgba(150, 150, 150, 0) 30%,
+            rgba(150, 150, 150, 0.1) 50%,
+            rgba(150, 150, 150, 0) 70%
+        );
+    border-radius: 5px;
+    box-sizing: border-box;
+    height: 155px;
+    padding: 4px 4px;
+    transition: all 0.2s;
+    width: 68px;
+    box-shadow: -3px 3px 3px rgba(0,0,0,0.5);
+}
+
+.power-button-container {
+    background: white;
+    background: linear-gradient(270deg, #444, #222);
+    border-radius: 5px;
+    box-shadow: 0px 0px 0px 8px rgba(0, 0, 0, 0.1),
+        0px 0px 3px 1px rgba(0, 0, 0, 1),
+        inset 0 8px 3px -8px rgba(255, 255, 255, 0.4);
+    height: 165px;
+    margin: 30px auto;
+    padding: 5px;
+    width: 79px;
+}
+
+input:checked + .power-button-background .on,
+input:checked + .power-button-background .off {
+    text-shadow: inset 1px 1px 1px black;
+}
+
+input:checked + .power-button-background .on {
+    color: #444;
+    top: 10px;
+    transform: scaleY(0.85) rotateZ(90deg);
+}
+
+input:checked + .power-button-background .off {
+    color: #777;
+    bottom: 5px;
+    transform: scaleY(1) rotateZ(90deg);
+}
+
+input:checked + .power-button-background .power-button {
+    background: #232323;
+    background-image: linear-gradient(
+        270deg,
+        rgba(0, 0, 0, 0.5),
+        rgba(0, 0, 0, 0)
+    );
+    border-radius: 5px;
+    box-shadow: inset 8px -4px 5px -7px rgba(0, 0, 0, 1),
+        inset -8px -4px 5px -7px rgba(0, 0, 0, 1),
+        0 -3px 8px -4px rgba(250, 250, 250, 0.4),
+        inset 0 3px 4px -2px rgba(10, 10, 10, 1),
+        inset 0 280px 40px -200px rgba(0, 0, 0, 0.2),
+        inset 0 -200px 40px -200px rgba(180, 180, 180, 0.2);
+    margin-top: 20px;
+}
+
+input:checked + .power-button-background {
+    background-image: linear-gradient(90deg, black 30%, transparent 65%),
+        linear-gradient(
+            180deg,
+            rgba(250, 250, 250, 0) 0%,
+            rgba(250, 250, 250, 0.4) 50%,
+            rgba(150, 150, 150, 0) 100%
+        );
+    padding: 2px 4px;
+}
+
+#info {
+    position: fixed;
+    left: 0;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    background: none;
+    transition: all 0.5s;
+    z-index: 99;
+    display: flex;
+    flex-flow: row nowrap;
+    align-items: center;
+    justify-content: center;
+    pointer-events: none;
+}
+
+#info.active {
+    pointer-events: auto;
+}
+
+#info #info-content {
+    opacity: 0;
+    transition: opacity 0.5s;
+    height: calc(100% - 4em);
+    overflow-y: auto;
+}
+
+#info.active #info-content {
+    opacity: 1;
+    pointer-events: auto;
+}
+
+#info.active {
+    background: rgba(0, 0, 0, 0.8);
+    backdrop-filter: blur(5px);
+}
+
+#info-button {
+    position: absolute;
+    top: 0;
+    right: 0;
+    width: 50px;
+    height: 50px;
+    line-height: 50px;
+    cursor: pointer;
+    font-family: "Meie Script", cursive;
+    color: white;
+    font-size: 50px;
+    border: none;
+    outline: none;
+    background: none;
+    opacity: 0.5;
+    transition: opacity 0.2s;
+    pointer-events: auto;
+    z-index: 11;
+}
+
+#info-button:hover {
+    opacity: 1;
+}
+
+#info-content {
+    padding: 2em 4em;
+    background-color: rgba(255,255,255,0.8);
+    text-align: center;
+    flex-flow: column nowrap;
+    align-items: center;
+    justify-content: center;
+    z-index: 10;
+    width: 800px;
+    max-width: calc(100% - 4em);
+    font-family: "Roboto";
+    font-weight: 300;
+    font-size: 15px;
+}
+
+#info-content > * {
+    text-align: left;
+}
+
+#info-logo {
+    margin-top: 0;
+    font-size: 58px;
+    font-family: "Meie Script", cursive;
+    font-weight: 400;
+    font-style: normal;
+    text-align: center;
+}
+
+#info-version {
+    text-align: center;
+    margin-top: -67px;
+    font-weight: 300;
+    font-size: 14px;
+    padding-bottom: 15px;
+    border-bottom: 1px solid rgba(0,0,0,0.8);
+}
+
+#info cite {
+    white-space: pre-wrap;
+    display: block;
+    font-style: normal;
+    font-family: "Lekton", monospace;
+    word-break: break-all;
+    padding: 10px;
+    background-color: rgba(0,0,0,0.8);
+    color: white;
+    margin-bottom: 5px;
+}
+
+#github {
+    position: fixed;
+    bottom: 0px;
+    right: 5px;
+    opacity: 0.5;
+    transition: opacity 0.2s;
+}
+
+#github:hover {
+    opacity: 1.0;
+}
+
+.alert-container {
+    position: fixed;
+    pointer-events: none;
+    top: 50px;
+    right: 0;
+    display: flex;
+    flex-flow: column nowrap;
+    z-index: 10;
+}
+
+@keyframes alertIn {
+    0% {
+        opacity: 0;
+        height: 0;
+        margin-bottom: 0;
+    }
+    100% {
+        opacity: 1;
+        height: 100px;
+        margin-bottom: 5px;
+    }
+}
+
+@keyframes alertOut {
+    0% {
+        opacity: 1;
+        height: 100px;
+        margin-bottom: 5px;
+    }
+    100% {
+        opacity: 0;
+        height: 0;
+        margin-bottom: 0;
+    }
+}
+
+.alert {
+    position: relative;
+    display: block;
+    animation: alertIn 1s ease-out;
+    animation-fill-mode: forwards;
+    width: 300px;
+    background-color: rgba(242,222,222,0.75);
+    backdrop-filter: blur(5px);
+    color: #333;
+    padding: 0;
+    margin-bottom: 5px;
+    border-radius: 5px;
+    pointer-events: auto;
+    border: 1px solid rgba(222,22,22,0.9);
+    overflow: hidden;
+}
+
+@keyframes alertProgress {
+    0% {
+        width: 100%;
+    }
+    100% {
+        width: 0;
+    }
+}
+
+.alert .progress-bar {
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    background-color: rgba(222,22,22,0.9);
+    height: 5px;
+    animation-name: alertProgress;
+    animation-fill-mode: forwards;
+    animation-timing-function: linear;
+}
+
+.alert h2 {
+    font-size: 16px;
+    font-weight: 400;
+    padding: 6px 10px;
+    margin: 0;
+    background-color: rgba(222,22,22,0.9);
+    color: white;
+    border-top-left-radius: 5px;
+    border-top-right-radius: 5px;
+}
+
+.alert p {
+    padding: 10px;
+    margin: 0;
+    font-size: 12px;
+}
+
+.alert.hiding {
+    animation: alertOut 1s ease-out;
+    animation-fill-mode: forwards;
+}
+
+.alert button {
+    position: absolute;
+    top: 5px;
+    right: 5px;
+    background: none;
+    border: none;
+    outline: none;
+    cursor: pointer;
+    font-size: 30px;
+    line-height: 20px;
+    color: white;
+    font-weight: 400;
+    padding: 0;
+    margin: 0;
+    opacity: 0.8;
+}
+
+.alert button:hover {
+    opacity: 1;
+}
+
+@media (orientation: portrait) {
+    main {
+        height: 1200px;
+        width: 900px;
+        grid-gap: 25px;
+        padding: 25px;
+        grid-template-rows: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
+        grid-template-columns: 1fr 1fr 1fr 1fr;
+    }
+
+    section#waveform {
+        grid-area: 1 / 1 / 3 / 2;
+    }
+
+    section#voice {
+        grid-area: 1 / 3 / 4 / 5;
+    }
+
+    section#brain {
+        grid-area: 3 / 1 / 7 / 3;
+    }
+
+    section#microphone {
+        grid-area: 4 / 3 / 7 / 5;
+    }
+
+    section#transcription {
+        grid-area: 7 / 1 / 12 / 5;
+    }
+
+    section#logo {
+        top: -80px;
+        color: white;
+        font-size: 120px;
+    }
+
+    section#credits {
+        color: white;
+        font-size: 20px;
+        bottom: -95px;
+    }
+    #transcription .tool,
+    #transcription .citation {
+        font-size: 22px;
+    }
+
+    section#credits .smaller {
+        font-size: 15px;
+        margin-top: 20px;
+        line-height: 30px;
+    }
+
+    div.bulb-indicator > label {
+        right: -73px;
+    }
+}
+
+@media (max-width: 1200px) {
+    main {
+        transform: scale(0.68);
+    }
+}
+
+@media (max-width: 900px) {
+    main {
+        transform: scale(0.4);
+    }
+    #transcription #content {
+        font-size: 38px;
+        padding: 60px 90px 90px 100px;
+    }
+    #transcription .tool,
+    #transcription .citation {
+        font-size: 38px;
+    }
+    textarea, input {
+        font-size: 38px;
+    }
+}
+
+@media (max-width: 900px) and (orientation: portrait) {
+    main {
+        height: 1500px;
+    }
+    section#waveform {
+        margin-right: -60px;
+    }
+    div#power-switch .power-wrapper {
+        top: -15px;
+    }
+    section#credits {
+        font-size: 30px;
+        bottom: -180px;
+    }
+    section#credits .smaller {
+        font-size: 28px;
+        margin-top: 50px;
+        line-height: 30px;
+    }
+}

www/index.html

@@ -0,0 +1,227 @@
+<!DOCTYPE html>
+<html lang="en">
+    <head>
+        <meta charset="UTF-8">
+        <meta name="viewport" content="width=device-width, initial-scale=1.0">
+        <title>Anachrovox</title>
+        <!-- Cloud assets -->
+        <link rel="preconnect" href="https://fonts.googleapis.com">
+        <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+        <link href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&family=Meie+Script&family=Lekton:ital,wght@0,400&display=swap" rel="stylesheet">
+        <script src="https://cdn.jsdelivr.net/npm/onnxruntime-web@1.19.0/dist/ort.min.js"></script>
+        <script src="https://cdn.jsdelivr.net/npm/taproot-client@0.1.2/dist/taproot.min.js"></script>
+        <script src="https://cdn.jsdelivr.net/npm/hey-buddy-onnx@0.1.2/dist/hey-buddy.min.js"></script>
+        <!-- Local assets -->
+        <link rel="stylesheet" href="index.css">
+    </head>
+    <body>
+        <main>
+            <section id="transcription">
+                <div id="bezel"></div>
+                <div class="reflection dodge"></div>
+                <div class="reflection"></div>
+                <div id="content">
+                    <div id="welcome">Welcome to Anachrovox. Speak your command to 'Vox' or type it in below.</div>
+                    <div id="history"></div>
+                    <div id="input">
+                        <textarea id="prompt" rows=3></textarea>
+                    </div>
+                </div>
+            </section>
+            <section id="waveform">
+                <div class="circle-reflection dodge"></div>
+                <div class="circle-reflection"></div>
+                <div class="oscilloscope-grid"></div>
+                <canvas width=256 height=256></canvas>
+                <div class="circle-shading"></div>
+            </section>
+            <section id="voice">
+                <input
+                    id="voice-id"
+                    class="solari-board"
+                    type="text"
+                    value=""
+                    maxlength="7"
+                />
+                <input
+                    id="voice-id-wheel",
+                    class="wheel"
+                    type="button"
+                />
+                <input
+                    id="volume"
+                    class="dial"
+                    type="number"
+                    min="0"
+                    max="1"
+                    step="0.01"
+                    value="1.0"
+                    data-angle-start="-45"
+                    data-angle-end="45"
+                    data-labels='{"0":"Off", "1":"Max"}'
+                />
+                <input
+                    id="speed"
+                    class="dial"
+                    type="number"
+                    min="0.75"
+                    max="1.75"
+                    step="0.01"
+                    value="1.25"
+                    data-angle-start="-90"
+                    data-angle-end="90"
+                    data-labels='{"0.75":"Slw", "1.25":"Nrm", "1.75":"Fst"}'
+                />
+            </section>
+            <section id="brain">
+                <input
+                    id="top-k-display"
+                    type="number"
+                    class="seven-segment"
+                    min=1
+                    max=100
+                    value=40
+                />
+                <input
+                    id="top-k"
+                    class="dial decoupled"
+                    type="number"
+                    min=1
+                    max=100
+                    step=1
+                    value=40
+                />
+                <input
+                    id="min-p"
+                    class="slider"
+                    type="number"
+                    min=0
+                    max=1
+                    step=0.01
+                    value=0.5
+                    data-labels=6
+                />
+                <input
+                    id="top-p"
+                    class="slider"
+                    type="number"
+                    min=0
+                    max=1
+                    step=0.01
+                    value=0.95
+                    data-labels=6
+                />
+                <input
+                    id="temperature"
+                    class="slider"
+                    type="number"
+                    min=0
+                    max=1
+                    step=0.01
+                    value=0.20
+                    data-labels=6
+                />
+            </section>
+            <section id="microphone">
+                <div id="listen-button">
+                    <button id="listen"></button>
+                    <label>Call</label>
+                </div>
+                <div id="speaker"></div>
+                <div id="power-switch">
+                    <input
+                        id="power-switch-input"
+                        type="checkbox"
+                        class="power"
+                        checked
+                    />
+                </div>
+                <div class="bulb-indicator" id="recording"><label>RECORD</label></div>
+                <div class="bulb-indicator" id="listening"><label>LISTEN</label></div>
+                <div class="bulb-indicator" id="power"><label>POWER</label></div>
+            </section>
+            <section id="logo">
+                Anachrovox
+            </section>
+            <section id="credits">
+                Released under the <a href="https://www.apache.org/licenses/LICENSE-2.0.txt" target="_blank">Apache License v2.0</a> in 2024 by <a href="mailto:painebenjamin@gmail.com">Benjamin Paine</a>.
+                <div class="smaller">Anachrovox can make mistakes. Check all outputs.</div>
+            </section>
+        </main>
+        <aside id="info">
+            <button id="info-button">i</button>
+            <div id="info-content">
+                <h1 id="info-logo">Anachrovox</h1>
+                <h2 id="info-version">Alpha Release v0.1.1</h2>
+                <h3>Instructions</h3>
+                <p>To issue a voice command in a hands-free fashion, start your command with one of the supported wake phrases, then issue your command naturally (i.e. you do not need to pause.) There are many supported wake phrases but they all include 'Vox' - for example, 'Hey Vox', 'Hi Vox', or just 'Vox'.</p>
+                <p>There are numerous ways to shortcut the speech-to-speech workflow:</p>
+                <ul>
+                    <li>Turning the volume all the way down will disable the text-to-speech step, effectively creating a text-only mode.</li>
+                    <li>Directly type your query into the text box and press enter to issue commands without needing to speak.</li>
+                    <li>Press and hold the call button to issue a voice command without needing to use a wake phrase.</li>
+                </ul>
+                <h3>About</h3>
+                <p>Anachrovox is a real-time voice assistant that combines two of my other projects:</p>
+                <ol>
+                    <li><a href="https://github.com/painebenjamin/taproot" href="_blank">Taproot</a>, a scalable and lightning-fast task-centric backend inference engine, enabling easy installation and deployment of models for speech recognition, natural language understanding, and text-to-speech synthesis.</li>
+                    <li><a href="https://github.com/painebenjamin/hey-buddy" href="_blank">Hey Buddy</a>, a real-time in-browser audio wake-word detector and training library to listen for wake phrases to trigger the assistant, enabling hands-free, always-on voice interaction without the need to use the backend until specifically requested.</li>
+                </ol>
+                <p>This is an <strong>alpha</strong> release of both Anachrovox and the underlying libraries, so bugs in all aspects of operation are expected. As it uses a large language model at it's heart, you should take the same precautions as you would with any other language model, such as not using it for sensitive tasks and not trusting it's output as fact without verification.</p>
+                <h3>High Availability</h3>
+                <p>In addition to Taproot's low-overhead design, it is designed to be clustered and highly available. This means that you can run multiple instances of Anachrovox and they will automatically load-balance and fail-over between each other, ensuring that the assistant is always available and responsive. You will need to perform some networking and configuration to enable this, see the GitHub repository for more information. If you are using Anachrovox on one of the official HuggingFace spaces, this is happening automatically between them.</p>
+                <h3>Features</h3>
+                <p>The main feature of Anachrovox is real-time, hands-free speech-to-speech large language model interaction. This is achieved through the following components, all of which are open-source and available for use in your own projects:</p>
+                <ol>
+                    <li>Wake-word detection using <a href="https://github.com/painebenjamin/hey-buddy" target="_blank">Hey Buddy</a></li>
+                    <li>Speech-to-text using <a href="https://huggingface.co/distil-whisper/distil-large-v3" target="_blank">Distil-Whisper Large</a></li>
+                    <li>Text generation using <a href="https://huggingface.co/meta-llama/Llama-3.2-3B-Instruct" target="_blank">Llama 3.2 3B Instruct</a></li>
+                    <li>Text-to-speech using <a href="https://coqui.ai/blog/tts/open_xtts" target="_blank">XTTS2</a></li>
+                    <li>Audio enhancement using <a href="https://github.com/Rikorose/DeepFilterNet" target="_blank">DeepFilterNet</a></li>
+                </ol>
+                <p>All backend models are ran through Taproot, which is made to be as low-overhead as possible, allowing for real-time operation on consumer hardware. These are just a small selection of the supported model set, but were chosen for their balance of speed, size and capability. Visit <a href="https://github.com/painebenjamin/anachrovox" target="_blank">the Anachrovox GitHub</a> to see how to build with different supported components and/or visit <a href="https://github.com/painebenjamin/taproot" target="_blank">the Taproot GitHub</a> to request a new supported component or learn how to build your own (and hopefully contribute it back to the community!)</p>
+                <p>To improve the usefulness of the assistant, the following tools are available to use. These are invoked conversationally, either when you ask directly or sometimes when the assistant thinks it can help.</p>
+                <ul>
+                    <li>DuckDuckGo news headlines, blurb search, and deep-dive.</li>
+                    <li>Wikipedia search</li>
+                    <li>Fandom (formerly Wikia) search</li>
+                    <li>Date and time by timezone or location</li>
+                    <li>Current and forecasted weather by location</li>
+                </ul>
+                <h3>Citations</h3>
+                <cite>@misc{gandhi2023distilwhisper,
+    title         = {Distil-Whisper: Robust Knowledge Distillation via Large-Scale Pseudo Labelling}, 
+    author        = {Sanchit Gandhi and Patrick von Platen and Alexander M. Rush},
+    year          = {2023},
+    eprint        = {2311.00430},
+    archivePrefix = {arXiv},
+    primaryClass  = {cs.CL}
+}</cite>
+                <cite>@misc{dubey2024llama3herdmodels,
+    title         = {The Llama 3 Herd of Models},
+    author        = {Llama Team, AI @ Meta},
+    year          = {2024}
+    eprint        = {2407.21783},
+    archivePrefix = {arXiv},
+    primaryClass  = {cs.AI},
+    url           = {https://arxiv.org/abs/2407.21783}
+}</cite>
+                <cite>@misc{coqui2023xtts,
+    title         = {XTTS: Open Model Release Announcement}
+    author        = {Coqui AI}
+    year          = {2023}
+    url           = {https://coqui.ai/blog/tts/open_xtts}
+}</cite>
+                <cite>@inproceedings{schroeter2023deepfilternet3,
+    title         = {{DeepFilterNet}: Perceptually Motivated Real-Time Speech Enhancement},
+    author        = {Schröter, Hendrik and Rosenkranz, Tobias and Escalante-B., Alberto N. and Maier, Andreas},
+    booktitle     = {INTERSPEECH},
+    year          = {2023},
+}</cite>
+            </div>
+        </aside>
+        <a id="github" href="https://github.com/painebenjamin/anachrovox" target="_blank" title="GitHub"><img src="static/github.svg" alt="GitHub"></a>
+    </body>
+    <script type="module" src="inputs.js"></script>
+    <script type="module" src="index.js"></script>
+</html>

www/index.js

@@ -0,0 +1,550 @@
+/** @module index */
+import { AudioPipeVisualizer } from "./visualizer.js";
+import { GrowingSentenceChunker } from "./sentence.js";
+import { sendAlert } from "./alert.js";
+import { hexToRgb, replaceQuotes } from "./helpers.js";
+
+// Global configuration
+const documentStyle = window.getComputedStyle(document.body);
+const primaryColor = documentStyle.getPropertyValue("--color-primary");
+const [pR, pG, pB] = hexToRgb(primaryColor);
+const [dpR, dpG, dpB] = [
+    Math.max(0, pR - 96),
+    Math.max(0, pG - 96),
+    Math.max(0, pB - 96),
+];
+const pollingInterval = 150;
+const transcriptionParameters = {};
+const languageParameters = {
+    max_tokens: 512,
+    role: "anachrovox",
+    stream: true,
+    use_tools: true,
+    return_tool_metadata: true,
+};
+const speechParameters = {
+    enhance: true,
+    stream: false,
+    stream_chunk_size: 25,
+    output_format: "float"
+};
+const waveformParameters = {
+    waveformNoiseLevel: 0.025,
+    fftSize: 512,
+    fillStyle: "rgba(8,16,14,0.3)",
+    strokeStyle: [
+        `rgba(${dpR},${dpG},${dpB},0.1)`,
+        `rgba(${pR},${pG},${pB},0.75)`,
+        "rgba(255,255,255,0.6)"
+    ],
+    lineWidth: [6,3,1],
+};
+const speakerHoleRings = [ // radius, number of holes
+    [18, 6],
+    [36, 10],
+    [52, 14],
+    [70, 18],
+    [88, 22],
+];
+const maxTypingSpeed = 200; // characters per second
+const minTypingSpeed = 50;
+const maxDelay = 0.5; // max length to delay from completion to wait for speech to start generating
+let overseerAddress;
+
+if (window.location.port === "3000") {
+    // Development (e.g. npm start)
+    overseerAddress = "ws://localhost:32189";
+} else {
+    // Docker or production
+    overseerAddress = "overseer";
+}
+const sharedModelRoot = "https://huggingface.co/benjamin-paine/hey-buddy/resolve/main/pretrained";
+const wakeWordModelRoot = "https://huggingface.co/benjamin-paine/anachrovox/resolve/main";
+const wakeWordPrefixes = [
+    "hello", "hey", "hi", "so","well",
+    "yo", "okay", "thanks", "thank-you",
+];
+const heyBuddyConfiguration = {
+    record: true,
+    modelPath: [
+        `${wakeWordModelRoot}/vox.onnx`,
+        `${wakeWordModelRoot}/anachrovox.onnx`
+    ].concat(
+        wakeWordPrefixes.map(
+            (prefix) => `${wakeWordModelRoot}/${prefix}-vox.onnx`
+        )
+    ),
+    vadModelPath: `${sharedModelRoot}/silero-vad.onnx`,
+    embeddingModelPath: `${sharedModelRoot}/speech-embedding.onnx`,
+    spectrogramModelPath: `${sharedModelRoot}/mel-spectrogram.onnx`,
+    wakeWordThreshold: 0.8,
+};
+
+// Get elements from the page
+const transcriptionSection = document.querySelector("#transcription #content #history");
+const waveformCanvas = document.querySelector("#waveform canvas");
+const promptInput = document.getElementById("prompt");
+const temperature = document.getElementById("temperature");
+const topP = document.getElementById("top-p");
+const minP = document.getElementById("min-p");
+const topK = document.getElementById("top-k");
+const topKDisplay = document.getElementById("top-k-display");
+const voiceId = document.getElementById("voice-id");
+const voiceIdWheel = document.getElementById("voice-id-wheel");
+const speed = document.getElementById("speed");
+const volume = document.getElementById("volume");
+const speaker = document.getElementById("speaker");
+const listening = document.getElementById("listening");
+const recording = document.getElementById("recording");
+const powerSwitch = document.getElementById("power-switch-input");
+const listenButton = document.getElementById("listen");
+const powerIndicator = document.getElementById("power");
+
+// Build speaker hole (just cosmetic)
+for (let [radius, holes] of speakerHoleRings) {
+    for (let i = 0; i < holes; i++) {
+        // Calculate hole position based on radius and angle
+        const hole = document.createElement("div");
+        const angle = i * 2 * Math.PI / holes;
+        const x = Math.cos(angle) * radius;
+        const y = Math.sin(angle) * radius;
+        hole.style.left = `${x}px`;
+        hole.style.top = `${y}px`;
+        hole.classList.add("hole");
+        speaker.appendChild(hole);
+    }
+}
+
+// Global objects
+const client = new Taproot(overseerAddress);
+const audio = new AudioPipeVisualizer({...waveformParameters, canvas: waveformCanvas});
+const chunker = new GrowingSentenceChunker();
+const conversationHistory = [];
+
+// Scroll to the bottom of the transcription section
+const scrollToBottom = () => {
+    if (transcriptionSection.parentElement.scrollHeight - transcriptionSection.parentElement.scrollTop - transcriptionSection.parentElement.offsetHeight < 80) {
+        transcriptionSection.parentElement.scrollTop = transcriptionSection.parentElement.scrollHeight;
+    }
+}
+
+// Helper methods for updating the page
+const pushText = (text, className) => {
+    text = replaceQuotes(text);
+    const element = document.createElement("p");
+    element.classList.add(className);
+    element.textContent = text;
+    transcriptionSection.appendChild(element);
+    scrollToBottom();
+    return element;
+};
+
+// Bind voice ID wheel to change voice ID
+// This is a localized list of voices from xtts2.
+const voiceMap = {
+    "Aaron": "Aaron Dreschner",
+    "Abraham": "Abrahan Mack",
+    "Adam": "Adde Michal",
+    "Alexis": "Alexandra Hisakawa",
+    "Alexis": "Alma María",
+    "Alison": "Alison Dietlinde",
+    "Amy": "Asya Anara",
+    "Andrew": "Andrew Chipper",
+    "Anna": "Ana Florence",
+    "Annie": "Annmarie Nele",
+    "Barbara": "Barbora MacLean",
+    "Blake": "Baldur Sanjin",
+    "Brenda": "Brenda Stern",
+    "Brian": "Badr Odhiambo",
+    "Carla": "Camilla Holmström",
+    "Cindy": "Chandra MacFarland",
+    "Clara": "Claribel Dervla",
+    "Clark": "Kumar Dahl",
+    "Craig": "Craig Gutsy",
+    "Daisy": "Daisy Studious",
+    "Damien": "Damien Black",
+    "David": "Dionisio Schuyler",
+    "Dennis": "Damjan Chapman",
+    "Ella": "Uta Obando",
+    "Eugene": "Eugenio Mataracı",
+    "Frank": "Ferran Simen",
+    "Gilbert": "Gilberto Mathias",
+    "Gina": "Gitta Nikolina",
+    "Grace": "Gracie Wise",
+    "Heidi": "Henriette Usha",
+    "Ian": "Ige Behringer",
+    "Ivan": "Ilkin Urbano",
+    "Kevin": "Kazuhiko Atallah",
+    "Lily": "Lilya Stainthorpe",
+    "Louis": "Luis Moray",
+    "Lucas": "Ludvig Milivoj",
+    "Lydia": "Lidiya Szekeres",
+    "Marcus": "Marcos Rudaski",
+    "Maya": "Maja Ruoho",
+    "Nadia": "Narelle Moon",
+    "Nora": "Nova Hogarth",
+    "Philip": "Filip Traverse",
+    "Raymond": "Royston Min",
+    "Rose": "Rosemary Okafor",
+    "Saul": "Suad Qasim",
+    "Sofia": "Sofia Hellen",
+    "Sophie": "Szofi Granger",
+    "Tammy": "Tammie Ema",
+    "Tanya": "Tanja Adelina",
+    "Tara": "Tammy Grit",
+    "Thomas": "Torcull Diarmuid",
+    "Victor": "Viktor Eka",
+    "Victor": "Viktor Menelaos",
+    "Violet": "Vjollca Johnnie",
+    "Warren": "Wulf Carlevaro",
+    "Xavier": "Xavier Hayasaka",
+    "Zachary": "Zacharie Aimilios",
+    "Zoe": "Zofija Kendrick",
+};
+const voiceNames = Object.keys(voiceMap);
+const voiceIds = Object.values(voiceMap);
+let voiceIndex = -1;
+const setVoiceIndex = (newIndex) => {
+    if (newIndex !== voiceIndex) {
+        voiceId.value = voiceNames[newIndex];
+        voiceId.dispatchEvent(new Event("change"));
+        voiceIndex = newIndex;
+    }
+};
+setVoiceIndex(0);
+voiceIdWheel.addEventListener("click", () => {
+    let newVoiceIndex = voiceIndex + parseInt(voiceIdWheel.value);
+    if (newVoiceIndex < 0) newVoiceIndex = voiceIds.length - 1;
+    setVoiceIndex(newVoiceIndex % voiceIds.length);
+});
+
+// Bind volume to update the audio volume
+volume.addEventListener("change", (event) => {
+    audio.volume = volume.value;
+});
+
+// Bind top-k to update the display
+topK.addEventListener("change", (event) => {
+    topKDisplay.value = Math.floor(topK.value);
+    topKDisplay.dispatchEvent(new Event("change"));
+});
+
+// Getter functions for parameters
+const getLanguageParameters = (overrides = {}) => {
+    return {
+        ...languageParameters,
+        history: conversationHistory,
+        top_k: parseInt(topK.value),
+        top_p: parseFloat(topP.value),
+        min_p: parseFloat(minP.value),
+        temperature: parseFloat(temperature.value),
+        ...overrides,
+    };
+};
+const getSpeechParameters = (overrides = {}) => {
+    return {
+        ...speechParameters,
+        speed: parseFloat(speed.value),
+        speaker_id: voiceMap[voiceId.value],
+        ...overrides,
+    };
+};
+
+let typingElement,
+    typingStart,
+    typingCharactersPerSecond = minTypingSpeed,
+    typingTarget = "",
+    typingAudioTiming = {},
+    unsetWhenComplete = false,
+    requestNumber = 0,
+    interrupt = false;
+
+// The loop for typing out the text
+const typingLoop = () => {
+    if (typingElement !== null && typingElement !== undefined) {
+        const now = performance.now();
+        const typingIndex = Math.floor((now - typingStart) * typingCharactersPerSecond / 1000);
+        const targetTextLength = typingTarget.length;
+
+        let typingAudioIndex = 0;
+        let i = 0;
+        let hasAudio = Object.getOwnPropertyNames(typingAudioTiming).length > 0;
+
+        for (let [audioTime, [audioTextLength, audioDuration]] of Object.entries(typingAudioTiming)) {
+            audioTime = parseFloat(audioTime);
+            if (now >= audioTime + audioDuration) {
+                // Audio has finished playing
+                typingAudioIndex += audioTextLength;
+            } else if (now >= audioTime) {
+                // Currently playing audio
+                typingAudioIndex += Math.floor((now - audioTime) * audioTextLength / audioDuration);
+            }
+            i++;
+        }
+
+        if (!interrupt && (typingIndex < targetTextLength || ((audio.volume > 0 || hasAudio) && typingAudioIndex < targetTextLength))) {
+            let innerHTML = "";
+            if (typingAudioIndex > 0) {
+                innerHTML += `<span class="spoken">${typingTarget.substring(0, typingAudioIndex + 1)}</span>`;
+                innerHTML += `<span class="unspoken">${typingTarget.substring(typingAudioIndex + 1, typingIndex)}</span>`;
+            } else {
+                innerHTML += `<span class="unspoken">${typingTarget.substring(0, typingIndex)}</span>`;
+            }
+            if (typingIndex < targetTextLength) {
+                innerHTML += `<span class="cursor">|</span>`;
+            }
+            if (typingElement.innerHTML != innerHTML) {
+                typingElement.innerHTML = innerHTML;
+                scrollToBottom();
+            }
+        } else if (interrupt || unsetWhenComplete) {
+            let finalHTML;
+            if (hasAudio) {
+                finalHTML = `<span class="spoken">${typingTarget}</span>`;
+            } else {
+                finalHTML = `<span class="unspoken">${typingTarget}</span>`;
+            }
+            typingElement.innerHTML = finalHTML;
+            unsetWhenComplete = false;
+            interrupt = false;
+            typingElement = null;
+            typingTarget = "";
+            typingAudioTiming = {};
+        }
+    }
+    requestAnimationFrame(typingLoop);
+};
+requestAnimationFrame(typingLoop);
+
+// Callback for when a sentence is completed
+chunker.onChunk(async (chunk) => {
+    let isFirst = false;
+    let requestNumberAtStart = requestNumber;
+    if (typingElement !== null && typingElement !== undefined) {
+        typingTarget += replaceQuotes(chunk).replaceAll(/\n\W*/g, "\n");
+    } else {
+        isFirst = true;
+        typingElement = pushText("", "completion");
+        typingTarget = replaceQuotes(chunk).replaceAll(/\n\W*/g, "\n");
+        typingStart = performance.now();
+        typingAudioTiming = {};
+    }
+
+    if (audio.volume > 0 && !interrupt) {
+        typingCharactersPerSecond = minTypingSpeed;
+        let audioEndTypingIndex = typingTarget.length;
+        let audioResult = await client.invoke({
+            task: "speech-synthesis",
+            parameters: getSpeechParameters({text: chunk}),
+        });
+        if (interrupt || requestNumberAtStart !== requestNumber) {
+            return;
+        }
+        if (audio.playing) {
+            audio.pushSilence(0.15);
+        }
+
+        let audioReady = performance.now();
+        let audioNode = audio.push(audioResult.data);
+        let audioDuration = audioNode.buffer.duration * 1000;
+
+        if (isFirst) {
+            typingAudioTiming[audioReady] = [chunk.length, audioDuration];
+        } else {
+            // Queue the audio speed for the next sentence
+            let lastAudioStartTime = Math.max(...Object.keys(typingAudioTiming));
+            let [lastAudioLength, lastAudioDuration] = typingAudioTiming[lastAudioStartTime];
+            let thisAudioTiming = Math.max(lastAudioStartTime + lastAudioDuration + (isFirst ? 0 : 0.15), audioReady);
+            typingAudioTiming[thisAudioTiming] = [chunk.length, audioDuration];
+        }
+    } else {
+        typingCharactersPerSecond = maxTypingSpeed;
+    }
+        
+});
+
+// Callback when transcription and completion are done
+const finalizeResult = (prompt, result) => {
+    interrupt = false;
+    unsetWhenComplete = true;
+    chunker.push(result.result);
+    chunker.flush();
+    conversationHistory.push(prompt);
+    conversationHistory.push(result.result);
+
+    if (result.function) {
+        let usedToolContainer = document.createElement("p");
+        usedToolContainer.classList.add("tool");
+        usedToolContainer.innerText = "Used tool: ";
+        let usedToolFunction = document.createElement("span");
+        usedToolFunction.innerText = result.function.name;
+        usedToolFunction.title = result.function.arguments;
+        usedToolContainer.appendChild(usedToolFunction);
+        transcriptionSection.appendChild(usedToolContainer);
+        if (result.citations) {
+            for (let i = 0; i < result.citations.length; i++) {
+                let citation = result.citations[i];
+                let citationContainer = document.createElement("p");
+                citationContainer.classList.add("citation");
+                let citationLabel = citation.title
+                     ? citation.title
+                     : citation.source
+                        ? citation.source
+                        : "";
+                if (citationLabel) {
+                    citationContainer.innerText = `${citationLabel} `;
+                } else {
+                    citationContainer.innerText = "Source ";
+                }
+                let citationLink = document.createElement("a");
+                citationLink.href = citation.url;
+                citationLink.innerText = `[${i + 1}]`;
+                citationLink.title = citation.url;
+                citationLink.target = "_blank";
+                citationContainer.appendChild(citationLink);
+                transcriptionSection.appendChild(citationContainer);
+            }
+        }
+    }
+};
+
+// Create a function to invoke the appropriate workflow based on the current state
+const invokeFromMicrophone = async (samples) => {
+    requestNumber++;
+    interrupt = true;
+    let prompt;
+    try {
+        const textResult = await client.invoke(
+            {
+                task: "audio-transcription",
+                parameters: {audio: samples},
+                continuation: {
+                    task: "text-generation",
+                    parameters: getLanguageParameters(),
+                    result_parameters: "prompt",
+                }
+            },
+            {
+                fetchIntermediates: true,
+                pollingInterval: pollingInterval,
+                onInterimResult: (result) => {
+                    prompt = result;
+                    pushText(result, "transcription");
+                },
+                onIntermediateResult: (result) => {
+                    interrupt = false;
+                    chunker.push(result);
+                }
+            }
+        );
+        finalizeResult(prompt, textResult);
+    } catch (error) {
+        console.error(error);
+        sendAlert(error);
+    }
+};
+const invokeFromPrompt = async (text) => {
+    requestNumber++;
+    interrupt = true;
+    pushText(text, "transcription");
+    try {
+        const inferenceResult = await client.invoke(
+            {
+                task: "text-generation",
+                parameters: getLanguageParameters({prompt: text}),
+            },
+            {
+                fetchIntermediates: true,
+                pollingInterval: pollingInterval,
+                onIntermediateResult: (result) => {
+                    interrupt = false;
+                    chunker.push(result);
+                }
+            }
+        );
+        finalizeResult(text, inferenceResult);
+    } catch (error) {
+        console.error(error);
+        sendAlert(error);
+    }
+};
+
+// Configure power button to disable everything
+powerSwitch.addEventListener("change", (event) => {
+    if (powerSwitch.checked) {
+        powerIndicator.classList.add("active");
+    } else {
+        powerIndicator.classList.remove("active");
+        listening.classList.remove("active");
+        recording.classList.remove("active");
+    }
+});
+powerSwitch.dispatchEvent(new Event("change"));
+
+// Configure HeyBuddy for audio recording and invocation
+if (!window.HeyBuddy) {
+    console.error("HeyBuddy not found. Please include HeyBuddy.js in your project.");
+} else {
+    const heyBuddy = new window.HeyBuddy(heyBuddyConfiguration);
+    heyBuddy.onProcessed(async (result) => {
+        let highestWakeWord = null, highestProbability = 0;
+        for (let wakewordName in result.wakeWords) {
+            let probability = result.wakeWords[wakewordName].probability;
+            if (probability > highestProbability) {
+                highestWakeWord = wakewordName;
+                highestProbability = probability;
+            }
+        }
+    });
+    heyBuddy.onRecording(async (samples) => {
+        if (powerSwitch.checked) {
+            await invokeFromMicrophone(samples);
+        }
+    });
+    heyBuddy.onProcessed((result) => {
+        if (powerSwitch.checked) {
+            if (result.recording) {
+                recording.classList.add("active");
+            } else {
+                recording.classList.remove("active");
+            }
+            if (result.listening) {
+                listening.classList.add("active");
+            } else {
+                listening.classList.remove("active");
+            }
+        }
+    });
+    const startEvents = ["mousedown", "touchstart"];
+    const stopEvents = ["mouseup", "touchend", "mouseleave"];
+    const startListening = () => {
+        const interval = setInterval(() => {
+            heyBuddy.negatives = 0;
+            heyBuddy.listening = true;
+            heyBuddy.recording = true;
+        }, 10);
+        const onStop = () => {
+            clearInterval(interval);
+            for (let event of stopEvents) {
+                window.removeEventListener(event, onStop);
+            }
+        }
+        for (let event of stopEvents) {
+            window.addEventListener(event, onStop);
+        }
+    };
+    for (let event of startEvents) {
+        listenButton.addEventListener(event, startListening);
+    }
+}
+
+// Bind the prompt input to the workflow
+promptInput.addEventListener("keypress", async (event) => {
+    if (event.key === "Enter") {
+        event.preventDefault();
+        const text = promptInput.value;
+        // Wait a tick so the invocation doesn't send the new prompt as history
+        promptInput.value = "";
+        await invokeFromPrompt(text);
+    }
+});

www/inputs.js

@@ -0,0 +1,598 @@
+import {
+    isEmpty,
+    bindPointerDrag
+} from "./helpers.js";
+
+// power buttons
+const powerButtons = document.querySelectorAll("input.power");
+powerButtons.forEach((button) => {
+    // Set name if not set
+    button.name = button.name || button.id;
+
+    // Wrap input in div
+    const wrapper = document.createElement("div");
+    wrapper.classList.add("power-wrapper");
+    wrapper.id = `wrapper-${button.id}`;
+    button.parentNode.insertBefore(wrapper, button);
+    wrapper.appendChild(button);
+
+    // Add button elements
+    const powerButton = document.createElement("div");
+    powerButton.classList.add("power-button-background");
+    const label = document.createElement("label");
+    label.classList.add("power-button");
+    label.htmlFor = button.id;
+    const on = document.createElement("span");
+    on.classList.add("on");
+    on.innerText = "0";
+    const off = document.createElement("span");
+    off.classList.add("off");
+    off.innerText = "I";
+    label.appendChild(on);
+    label.appendChild(off);
+    powerButton.appendChild(label);
+    wrapper.appendChild(powerButton);
+});
+
+// dials/knobs
+const dials = document.querySelectorAll("input.dial");
+dials.forEach((dial) => {
+    // Wrap input in div
+    const wrapper = document.createElement("div");
+    const dialContainer = document.createElement("div");
+    const dialElement = document.createElement("div");
+    const specularElement = document.createElement("div");
+
+    wrapper.classList.add("dial-wrapper");
+    wrapper.id = `wrapper-${dial.id}`;
+    dialContainer.classList.add("dial");
+    dialElement.classList.add("dial-element");
+    specularElement.classList.add("dial-specular");
+    dial.parentNode.insertBefore(wrapper, dial);
+    wrapper.appendChild(dialContainer);
+    dialContainer.appendChild(dial);
+    dialContainer.appendChild(specularElement);
+    dialContainer.appendChild(dialElement);
+
+    // Get range values
+    const rangeStartValue = isEmpty(dial.min) ? 0 : parseFloat(dial.min);
+    const rangeStartAngle = isEmpty(dial.dataset.angleStart) ? null : parseFloat(dial.dataset.angleStart);
+    const rangeEndValue = isEmpty(dial.max) ? 100 : parseFloat(dial.max);
+    const rangeEndAngle = isEmpty(dial.dataset.angleEnd) ? null : parseInt(dial.dataset.angleEnd);
+    const rangeDegrees = rangeEndAngle === null || rangeStartAngle === null ? Infinity : rangeEndAngle - rangeStartAngle;
+
+    // Add labels if configured
+    const labels = isEmpty(dial.dataset.labels) ? null : JSON.parse(dial.dataset.labels);
+    if (labels !== null) {
+        for (let [value, text] of Object.entries(labels)) {
+            value = parseFloat(value);
+            const label = document.createElement("div");
+            const valueDegrees = rangeDegrees === Infinity
+                ? (value - rangeStartValue) / (rangeEndValue - rangeStartValue) * 360
+                : (value - rangeStartValue) / (rangeEndValue - rangeStartValue) * rangeDegrees + rangeStartAngle;
+            let valueDegreesCorrected = valueDegrees;
+            while (valueDegreesCorrected < 0) {
+                valueDegreesCorrected += 360;
+            }
+            label.classList.add("value");
+            if (valueDegreesCorrected < 90) {
+                label.classList.add("top");
+            } else if (valueDegreesCorrected < 180) {
+                label.classList.add("right");
+            } else if (valueDegreesCorrected < 270) {
+                label.classList.add("bottom");
+            } else {
+                label.classList.add("left");
+            }
+            label.style.transform = `rotate(${valueDegrees}deg)`;
+            label.innerHTML = `<span>${text}</span>`;
+            dialContainer.appendChild(label);
+        }
+    }
+
+    // Bind dial input
+    const getCurrentRotation = () => parseInt(dialElement.style.transform.replace("rotate(", "").replace("deg)", "")) % 360;
+    const getCenterPoint = () => {
+        const rect = dialElement.getBoundingClientRect();
+        return {
+            x: rect.left + rect.width / 2,
+            y: rect.top + rect.height / 2
+        };
+    }
+
+    // Set initial rotation
+    let initialValue = isEmpty(dial.value) ? rangeStartValue : parseFloat(dial.value);
+    let initialAngle = rangeStartAngle === null || rangeDegrees === Infinity
+        ? rangeStartAngle || 0
+        : (initialValue - rangeStartValue) / (rangeEndValue - rangeStartValue) * rangeDegrees + rangeStartAngle;
+
+    let startAngle;
+    let startValue;
+    let lastAngle;
+    let fullRotations = 0;
+
+    if (initialAngle !== null) {
+        dialElement.style.transform = `rotate(${initialAngle}deg)`;
+    }
+
+    // Input events
+    bindPointerDrag(
+        wrapper,
+        (e) => { // Start
+            wrapper.classList.add("active");
+            document.body.style.userSelect = "none";
+            document.body.style.cursor = "grabbing";
+            // Parse current rotation
+            startAngle = getCurrentRotation();
+            startValue = parseFloat(dial.value);
+            fullRotations = 0;
+        },
+        (e) => { // Move
+            const center = getCenterPoint();
+            const delta = {
+                x: e.current.x - center.x,
+                y: e.current.y - center.y
+            };
+            const angle = Math.atan2(delta.y, delta.x) * (180 / Math.PI) + 90;
+            if (angle < 0 && lastAngle > 0 || angle > 0 && lastAngle < 0) {
+                // Likely a rotation, check if the angles are close to 360 degrees apart
+                if (Math.abs(angle - lastAngle) > 345) {
+                    fullRotations += angle > 0 ? -1 : 1;
+                }
+            }
+            const rotationCorrectedAngle = angle + (fullRotations * 360);
+            const boundedAngle = Math.min(
+                Math.max(
+                    rotationCorrectedAngle,
+                    rangeStartAngle === null
+                        ? rotationCorrectedAngle
+                        : rangeStartAngle
+                ),
+                rangeEndAngle === null
+                    ? rotationCorrectedAngle
+                    : rangeEndAngle
+            );
+            const deltaDegrees = boundedAngle - startAngle;
+            if (rangeDegrees !== Infinity) {
+                const valueDelta = (rangeEndValue - rangeStartValue) * (deltaDegrees / rangeDegrees);
+                const newValue = Math.min(
+                    Math.max(
+                        rangeStartValue,
+                        startValue + valueDelta
+                    ),
+                    rangeEndValue
+                );
+                dial.value = newValue;
+            } else if(rangeStartValue !== null && rangeEndValue !== null) {
+                const valueDelta = (rangeEndValue - rangeStartValue) * (deltaDegrees / 360);
+                const newValue = Math.min(
+                    Math.max(
+                        rangeStartValue,
+                        startValue + valueDelta
+                    ),
+                    rangeEndValue
+                );
+                dial.value = newValue;
+            } else {
+                dial.value = boundedAngle;
+            }
+            lastAngle = angle;
+            dialElement.style.transform = `rotate(${boundedAngle}deg)`;
+            dial.dispatchEvent(new Event("change"));
+        },
+        (e) => { // End
+            wrapper.classList.remove("active");
+            document.body.style.userSelect = "";
+            document.body.style.cursor = "";
+        }
+    );
+});
+
+// solari boards
+const solariValues = [
+    "0", "1", "2", "3", "4", "5", "6", "7", "8", "9",
+    "A", "B", "C", "D", "E", "F", "G", "H", "I", "J",
+    "K", "L", "M", "N", "O", "P", "Q", "R", "S", "T",
+    "U", "V", "W", "X", "Y", "Z", " ", "-", ".", "/"
+];
+const solariTransitionTime = 20;
+const solariBoards = document.querySelectorAll("input.solari-board");
+solariBoards.forEach((board) => {
+    // Grab data from input
+    const initialValue = board.value;
+    const maxLength = board.maxLength ? parseInt(board.maxLength) : initialValue.length;
+    let valueNumber = 0;
+
+    // Wrap input in div
+    const wrapper = document.createElement("div");
+    wrapper.classList.add("solari-board-wrapper");
+    wrapper.id = `wrapper-${board.id}`;
+    board.parentNode.insertBefore(wrapper, board);
+    wrapper.appendChild(board);
+
+    const boardContainer = document.createElement("div");
+    boardContainer.classList.add("solari-board");
+    wrapper.appendChild(boardContainer);
+
+    for (let i = 0; i < maxLength; i++) {
+        const boardElementContainer = document.createElement("div");
+        const boardElementTop = document.createElement("div");
+        const boardElementBottom = document.createElement("div");
+        const boardElementFlap = document.createElement("div");
+        boardElementContainer.classList.add("solari-board-element-container");
+        boardElementTop.classList.add("solari-board-element-top");
+        boardElementBottom.classList.add("solari-board-element-bottom");
+        boardElementFlap.classList.add("solari-board-element-flap");
+        boardElementFlap.style.display = "none";
+
+        const boardElementValue = initialValue[i] || " ";
+        boardElementTop.innerHTML = boardElementValue;
+        boardElementBottom.innerHTML = boardElementValue;
+        boardElementContainer.appendChild(boardElementTop);
+        boardElementContainer.appendChild(boardElementBottom);
+        boardElementContainer.appendChild(boardElementFlap);
+        boardContainer.appendChild(boardElementContainer);
+    }
+
+    const transitionElement = async (index, value) => {
+        const transitionNumber = valueNumber;
+        const element = boardContainer.children[index];
+        const top = element.children[0];
+        const bottom = element.children[1];
+        const flap = element.children[2];
+        let startValue = top.innerText;
+        if (startValue === "") {
+            startValue = " ";
+        }
+        if (value === "") {
+            value = " ";
+        }
+        if (startValue === value) {
+            return;
+        }
+        const setValue = (value) => {
+            return new Promise((resolve) => {
+                flap.innerText = startValue;
+                flap.classList.add("middle");
+                flap.style.display = "block";
+                top.innerText = value;
+                setTimeout(() => {
+                    flap.innerText = value;
+                    flap.classList.remove("middle");
+                    flap.classList.add("bottom");
+                    setTimeout(() => {
+                        bottom.innerText = value;
+                        flap.classList.remove("bottom");
+                        flap.style.display = "none";
+                        resolve();
+                    }, solariTransitionTime);
+                }, solariTransitionTime);
+            });
+        };
+        const startValueIndex = solariValues.indexOf(startValue);
+        const endValueIndex = solariValues.indexOf(value);
+        let valueArray = [];
+        if (startValueIndex < endValueIndex) {
+            valueArray = solariValues.slice(startValueIndex, endValueIndex + 1);
+        } else if (endValueIndex < startValueIndex) {
+            // wrap around
+            valueArray = solariValues.slice(startValueIndex, solariValues.length).concat(solariValues.slice(0, endValueIndex + 1));
+        }
+        for (let value of valueArray) {
+            if (transitionNumber !== valueNumber) {
+                return;
+            }
+            await setValue(value);
+        }
+    };
+
+    const transitionValue = async (value) => {
+        valueNumber++;
+        const valueArray = value.toUpperCase().split("");
+        const promises = [];
+        for (let i = 0; i < maxLength; i++) {
+            if (i < valueArray.length) {
+                promises.push(transitionElement(i, valueArray[i]));
+            } else {
+                promises.push(transitionElement(i, " "));
+            }
+        }
+        await Promise.all(promises);
+    }
+
+    board.addEventListener("change", (e) => {
+        transitionValue(board.value);
+    });
+});
+
+// wheels
+const wheels = document.querySelectorAll("input.wheel");
+const tickTime = 100;
+wheels.forEach((wheel) => {
+    // Wrap input in div
+    const wrapper = document.createElement("div");
+    wrapper.classList.add("wheel-wrapper");
+    wrapper.id = `wrapper-${wheel.id}`;
+    wheel.parentNode.insertBefore(wrapper, wheel);
+    wrapper.appendChild(wheel);
+
+    const wheelContainer = document.createElement("div");
+    wheelContainer.classList.add("wheel");
+    wrapper.appendChild(wheelContainer);
+
+    const wheelElement = document.createElement("div");
+    wheelElement.classList.add("wheel-element");
+    wheelContainer.appendChild(wheelElement);
+
+    const wheelSpecular = document.createElement("div");
+    wheelSpecular.classList.add("wheel-specular");
+    wheelContainer.appendChild(wheelSpecular);
+
+    const wheelShadow = document.createElement("div");
+    wheelShadow.classList.add("wheel-shadow");
+    wrapper.appendChild(wheelShadow);
+
+    const moveRate = 2;
+    const deadZone = 10;
+    const pixelsPerRate = wheel.dataset.pixelsPerRate ? parseInt(wheel.dataset.pixelsPerRate) : 40;
+    const removeClasses = () => {
+        wheelContainer.classList.remove("up");
+        wheelContainer.classList.remove("down");
+    };
+
+    let lastPosition, nextPosition, wheelTime;
+
+    wrapper.addEventListener("wheel", (e) => {
+        const thisWheelTime = new Date().getTime();
+        e.preventDefault();
+        if (wheelTime !== undefined && thisWheelTime - wheelTime < tickTime) {
+            return;
+        }
+        wheelTime = thisWheelTime;
+        if (lastPosition === undefined) {
+            lastPosition = {
+                x: e.clientX,
+                y: e.clientY
+            };
+        }
+        if (nextPosition === undefined) {
+            nextPosition = {...lastPosition};
+        }
+        nextPosition.y += e.deltaY > 0 ? pixelsPerRate : -pixelsPerRate;
+    });
+
+    const tick = () => {
+        if (lastPosition === undefined || nextPosition === undefined) {
+            setTimeout(tick, tickTime);
+            return;
+        }
+        const delta = nextPosition.y - lastPosition.y;
+        removeClasses();
+        if (Math.abs(delta) < deadZone) {
+            setTimeout(tick, tickTime);
+            return;
+        }
+        const deltaRate = Math.floor(Math.abs(delta) / pixelsPerRate);
+        if (delta > 0) {
+            wheelContainer.classList.add("down");
+            wheel.value = -deltaRate;
+            wheel.dispatchEvent(new MouseEvent("click"));
+        } else {
+            wheelContainer.classList.add("up");
+            wheel.value = deltaRate;
+            wheel.dispatchEvent(new MouseEvent("click"));
+        }
+        wheelElement.style.animationDuration = `${10/Math.abs(delta)}s`;
+        lastPosition = {
+            x: lastPosition.x,
+            y: lastPosition.y + delta / moveRate
+        };
+        setTimeout(tick, tickTime);
+    };
+    requestAnimationFrame(tick);
+
+    bindPointerDrag(
+        wrapper,
+        (e) => { // Start
+            if (lastPosition === undefined) {
+                lastPosition = e.start;
+            }
+            wrapper.style.cursor = "grabbing";
+        },
+        (e) => { // Move
+            if (lastPosition === undefined) {
+                lastPosition = e.start;
+            }
+            nextPosition = e.current;
+        },
+        (e) => { // End
+            wrapper.style.cursor = "";
+        }
+    );
+});
+
+// 7-segments
+const segments = document.querySelectorAll("input.seven-segment");
+segments.forEach((segment) => {
+    // Wrap input in div
+    const wrapper = document.createElement("div");
+    wrapper.classList.add("seven-segment-wrapper");
+    wrapper.id = `wrapper-${segment.id}`;
+    segment.parentNode.insertBefore(wrapper, segment);
+    wrapper.appendChild(segment);
+
+    const reflection = document.createElement("div");
+    reflection.classList.add("reflection");
+    wrapper.appendChild(reflection);
+
+    const reflectionDodge = document.createElement("div");
+    reflectionDodge.classList.add("reflection");
+    reflectionDodge.classList.add("dodge");
+    wrapper.appendChild(reflectionDodge);
+
+    const segmentContainer = document.createElement("div");
+    segmentContainer.classList.add("seven-segment");
+    wrapper.appendChild(segmentContainer);
+
+    const defaultValue = segment.value ? parseInt(segment.value) : 0;
+    const maxValue = segment.max ? parseInt(segment.max) : 9;
+    const numDigits = maxValue.toString().length;
+
+    for (let i = 0; i < numDigits; i++) {
+        const segmentElement = document.createElement("div");
+        segmentElement.classList.add("seven-segment-element");
+        segmentContainer.appendChild(segmentElement);
+        
+        for (let j = 0; j < 7; j++) {
+            const segmentPart = document.createElement("div");
+            segmentPart.classList.add(`segment-${j}`);
+            segmentElement.appendChild(segmentPart);
+        }
+    }
+
+    const updateSegment = (segmentIndex, value) => {
+        const segmentElement = segmentContainer.children[segmentIndex];
+        const segmentParts = segmentElement.children;
+        const enabledSegments = [
+            [0, 1, 2, 4, 5, 6],
+            [2, 5],
+            [0, 2, 3, 4, 6],
+            [0, 2, 3, 5, 6],
+            [1, 2, 3, 5],
+            [0, 1, 3, 5, 6],
+            [0, 1, 3, 4, 5, 6],
+            [0, 2, 5],
+            [0, 1, 2, 3, 4, 5, 6],
+            [0, 1, 2, 3, 5, 6]
+        ];
+        for (let i = 0; i < 7; i++) {
+            if (enabledSegments[value].includes(i)) {
+                segmentParts[i].classList.add("on");
+            } else {
+                segmentParts[i].classList.remove("on");
+            }
+        }
+    }
+
+    const updateSegments = (value) => {
+        const valueString = value.toString().padStart(numDigits, "0");
+        for (let i = 0; i < numDigits; i++) {
+            updateSegment(i, parseInt(valueString[i]));
+        }
+    }
+
+    updateSegments(defaultValue);
+
+    segment.addEventListener("change", (e) => {
+        updateSegments(parseInt(segment.value));
+    });
+});
+
+// sliders
+const sliders = document.querySelectorAll("input.slider");
+sliders.forEach((slider) => {
+    // Wrap input in div
+    const wrapper = document.createElement("div");
+    wrapper.classList.add("slider-wrapper");
+    wrapper.id = `wrapper-${slider.id}`;
+    slider.parentNode.insertBefore(wrapper, slider);
+    wrapper.appendChild(slider);
+
+    const sliderContainer = document.createElement("div");
+    sliderContainer.classList.add("slider");
+    wrapper.appendChild(sliderContainer);
+
+    const sliderElement = document.createElement("div");
+    sliderElement.classList.add("slider-element");
+    sliderContainer.appendChild(sliderElement);
+
+    const rangeStartValue = isEmpty(slider.min) ? 0 : parseFloat(slider.min);
+    const rangeEndValue = isEmpty(slider.max) ? 100 : parseFloat(slider.max);
+    const range = rangeEndValue - rangeStartValue;
+    const valueStep = isEmpty(slider.step) ? 1 : parseFloat(slider.step);
+    const numDecimal = valueStep.toString().split(".")[1] ? valueStep.toString().split(".")[1].length : 0;
+    const numLabels = isEmpty(slider.dataset.labels) ? 2 : parseInt(slider.dataset.labels);
+
+    for (let i = 0; i < numLabels; i++) {
+        const labelValue = i === 0
+            ? rangeStartValue
+            : i === numLabels - 1
+                ? rangeEndValue
+                : (rangeEndValue - rangeStartValue) / (numLabels - 1) * i + rangeStartValue;
+        const labelLeft = document.createElement("div");
+        const labelRight = document.createElement("div");
+        labelLeft.classList.add("label");
+        labelLeft.classList.add("left");
+        labelRight.classList.add("label");
+        labelRight.classList.add("right");
+        labelLeft.innerText = labelValue.toFixed(numDecimal);
+        labelRight.innerText = labelLeft.innerText;
+        labelLeft.style.top = `${100 - (i / (numLabels - 1) * 100)}%`;
+        labelRight.style.top = labelLeft.style.top;
+        sliderContainer.appendChild(labelLeft);
+        sliderContainer.appendChild(labelRight);
+    }
+
+    const updateSlider = () => {
+        const value = parseFloat(slider.value);
+        const inverseValue = rangeEndValue - value + rangeStartValue;
+        const percentage = inverseValue / range * 100;
+        sliderElement.style.top = `${percentage}%`;
+    };
+
+    updateSlider();
+
+    slider.addEventListener("change", (e) => {
+        updateSlider();
+    });
+
+    bindPointerDrag(
+        sliderElement,
+        (e) => { // Start
+            wrapper.classList.add("active");
+            document.body.style.userSelect = "none";
+            document.body.style.cursor = "grabbing";
+        },
+        (e) => { // Move
+            const rect = sliderContainer.getBoundingClientRect();
+            const percentage = (e.current.y - rect.top) / rect.height;
+            const inversePercentage = 1 - percentage;
+            const value = rangeStartValue + (rangeEndValue - rangeStartValue) * inversePercentage;
+            slider.value = Math.min(
+                Math.max(
+                    rangeStartValue,
+                    value
+                ),
+                rangeEndValue
+            );
+            slider.dispatchEvent(new Event("change"));
+        },
+        (e) => { // End
+            wrapper.classList.remove("active");
+            document.body.style.userSelect = "";
+            document.body.style.cursor = "";
+        }
+    );
+});
+
+// Info button
+const infoContainer = document.querySelector("#info");
+const infoContent = document.querySelector("#info-content");
+const infoButton = document.querySelector("#info-button");
+infoButton.addEventListener("click", (e) => {
+    const isActive = infoContainer.classList.contains("active");
+    if (isActive) {
+        infoButton.innerText = "i";
+        infoContainer.classList.remove("active");
+    } else {
+        infoButton.innerText = "×";
+        infoContainer.classList.add("active");
+    }
+    e.stopPropagation();
+});
+infoContent.addEventListener("click", (e) => {
+    e.stopPropagation();
+});
+infoContainer.addEventListener("click", (e) => {
+    infoButton.dispatchEvent(new Event("click"));
+});

www/sentence.js

@@ -0,0 +1,110 @@
+/**
+ * A class that helps with chunking streaming responing
+ * from an LLM into whole sentences (or as close as we can get).
+ */
+export class SentenceChunker {
+    /**
+     * @param {Object} options
+     * @param {number} options.chunkLength - The maximum length of a chunk (default: 96)
+     * @param {boolean} options.emitParagraphs - Whether to emit paragraphs as chunks (default: true)
+     */
+    constructor(options = {}) {
+        this.buffer = "";
+        this.chunkLength = options.chunkLength || 128;
+        this.emitParagraphs = options.emitParagraphs !== false;
+        this.callbacks = [];
+    }
+
+    /**
+     * Emit a chunk of text
+     * @param {string} output - The chunk of text to emit
+     */
+    emit(output) {
+        this.callbacks.forEach(cb => cb(output));
+    }
+
+    /**
+     * Register a callback to be called when a chunk is emitted
+     * @param {Function} callback - The callback to call
+     */
+    onChunk(callback) {
+        this.callbacks.push(callback);
+    }
+
+    /**
+     * Push new data into the chunker
+     * @param {string} data - The new data to push
+     */
+    push(data) {
+        let paragraphs = data.split(/(\n+)/);
+        let numParagraphs = paragraphs.length;
+        for (let i = 0; i < numParagraphs; i++) {
+            let paragraph = paragraphs[i];
+            if (!paragraph) {
+                continue;
+            }
+            let sentences = paragraph.split(/(?<=[;:,.!?]\s+)|(?<=[；：，。！？])/);
+            let bufferLength = this.buffer.length;
+            for (let sentence of sentences) {
+                let sentenceLength = sentence.length;
+                if (sentenceLength === 0) {
+                    continue;
+                }
+                if (bufferLength + sentenceLength <= this.chunkLength) {
+                    this.buffer += sentence;
+                    bufferLength += sentenceLength;
+                } else {
+                    if (bufferLength > 0) {
+                        this.emit(this.buffer);
+                    }
+                    this.buffer = sentence;
+                    bufferLength = sentenceLength;
+                }
+            }
+
+            if (this.emitParagraphs && numParagraphs > 1 && i < numParagraphs - 1) {
+                this.emit(this.buffer);
+                this.buffer = "";
+            }
+        }
+    }
+
+    /**
+     * Flush the buffer, emitting any remaining text
+     */
+    flush() {
+        if (this.buffer.length > 0) {
+            this.emit(this.buffer);
+            this.buffer = "";
+        }
+    }
+}
+
+/**
+ * A SentenceChunker that can handle streaming responses that grow over time
+ * (e.g. when the LLM is still generating a response and concatenating it to the previous response)
+ */
+export class GrowingSentenceChunker extends SentenceChunker {
+    constructor(options = {}) {
+        super(options);
+        this.partialSentence = "";
+    }
+
+    /**
+     * Push new data into the chunker
+     * @param {string} data - The new data to push
+     */
+    push(data) {
+        const newData = data.substring(this.partialSentence.length);
+        this.partialSentence += newData;
+        super.push(newData);
+    }
+
+    /**
+     * Flush the buffer, emitting any remaining text
+     */
+    flush() {
+        super.flush();
+        this.partialSentence = "";
+    }
+}

www/visualizer.js

@@ -0,0 +1,121 @@
+import { AudioPipe } from "./audio.js";
+
+/**
+ * AudioPipeVisualizer
+ *
+ * Class to handle streaming audio data to the browser's audio context
+ * Also draws the audio waveform on a canvas if provided
+ */
+export class AudioPipeVisualizer extends AudioPipe {
+    /**
+     * Constructor
+     * @param {Object} options - Options object
+     * @param {HTMLCanvasElement} options.canvas - Canvas element to draw the waveform
+     * @param {Number} options.lineWidth - Line width for the waveform
+     * @param {Number} options.fftSize - FFT size for the waveform
+     * @param {String} options.fillStyle - Fill style for the waveform
+     * @param {String} options.strokeStyle - Stroke style for the waveform
+     */
+    constructor(options = {}) {
+        super(options);
+        this.canvas = options.canvas || null;
+        this.lineWidth = options.lineWidth || 1;
+        this.fftSize = options.fftSize || 2048;
+        this.fillStyle = options.fillStyle || "#FFFFFF";
+        this.strokeStyle = options.strokeStyle || "#000000";
+        this.waveformNoiseLevel = options.waveformNoiseLevel || 0; // Only for waveform, a visual distortion for style
+        this.fftBuffer = new Uint8Array(this.fftSize);
+        this.startDrawing();
+    }
+
+    /**
+     * Get the waveform styles for the canvas.
+     * We let the user pass in multiple styles (colors) or widths to draw the waveform.
+     * This allows for stacking or glowing effects, if desired.
+     * @returns {Array} - Array of styles for the waveform
+     */
+    waveformStyles() {
+        let strokeStyle = this.strokeStyle;
+        let lineWidth = this.lineWidth;
+        if (!Array.isArray(strokeStyle)) {
+            strokeStyle = [strokeStyle];
+        }
+        if (!Array.isArray(lineWidth)) {
+            lineWidth = [lineWidth];
+        }
+        let numStrokes = Math.max(strokeStyle.length, lineWidth.length);
+        let styles = [];
+        for (let i = 0; i < numStrokes; i++) {
+            styles.push({
+                strokeStyle: strokeStyle[Math.min(i, strokeStyle.length - 1)],
+                lineWidth: lineWidth[Math.min(i, lineWidth.length - 1)]
+            });
+        }
+        return styles;
+    }
+
+    push(data, sampleRate = 44100) {
+        let audioBuffer = super.push(data, sampleRate);
+        audioBuffer.connect(this.analyser);
+        return audioBuffer;
+    }
+
+    /**
+     * Initialize the analyzer to draw the waveform on the canvas.
+     */
+    initialize() {
+        super.initialize();
+        // Create analyser
+        this.analyser = this.audioContext.createAnalyser();
+        this.analyser.fftSize = this.fftSize;
+        this.analyser.connect(this.audioContext.destination);
+    }
+
+    /**
+     * Starts drawing the waveform on the canvas.
+     * If the audio context is not initialized, will draw as if there was silence.
+     */
+    startDrawing() {
+        const context = this.canvas.getContext("2d");
+        const sliceWidth = this.canvas.width / this.fftSize;
+        context.fillStyle = this.fillStyle;
+        const draw = () => {
+            // Update data
+            this.analyser !== undefined && this.analyser.getByteTimeDomainData(this.fftBuffer);
+            // Clear the canvas
+            context.fillRect(0, 0, this.canvas.width, this.canvas.height);
+            // Start drawing the waveform
+            let x = 0;
+            context.beginPath();
+            for (let i = 0; i < this.fftSize; i++) {
+                let v = this.initialized ? this.fftBuffer[i] / 128.0 : 1;
+                // Scale v's distance from 1.0 by the volume
+                let distance = Math.abs(v - 1.0);
+                v = 1.0 + (distance * this.volume * Math.sign(v - 1.0));
+                if (this.waveformNoiseLevel > 0) {
+                    v += (Math.random() - 0.5) * this.waveformNoiseLevel * 2 * Math.sin(i / this.fftSize * Math.PI) * this.volume;
+                }
+                const y = v * this.canvas.height / 2;
+                if (i === 0) {
+                    context.moveTo(x, y);
+                } else {
+                    context.lineTo(x, y);
+                }
+
+                x += sliceWidth;
+            }
+            // Final line to the right
+            context.lineTo(this.canvas.width, this.canvas.height / 2);
+            // Stroke the path using all strokes
+            for (let style of this.waveformStyles()) {
+                context.strokeStyle = style.strokeStyle;
+                context.lineWidth = style.lineWidth;
+                context.stroke();
+            }
+            // Schedule next frame
+            requestAnimationFrame(draw);
+        };
+        // Start drawing
+        requestAnimationFrame(draw);
+    }
+};