How I Ported a Python Wake Word System to the Browser When the LLMs Gave Up

I started this project with a goal that seemed simple on paper: take openWakeWord, a powerful open-source library for wake word detection, and make it run entirely in a web browser. And when I say “in the browser,” I mean it. No tricks. No websockets streaming audio to a Python server. I wanted the models, the audio processing, and the detection logic running completely on the client.
My initial approach was to “vibe-code” it with the new generation of LLMs. I fed my high-level goal to Gemini 2.5 Pro, o4-mini-high, and Grok 4. They gave me a fantastic head start, building out the initial HTML, CSS, and JavaScript structure with impressive speed. But after dozens of messages just refining the vibe, we hit a hard wall. The models would run, but the output score was just a flat line at zero. No errors, no crashes, just… nothing.
This is where the real story begins. The vibe was off. Vibe coding had failed. I had to pivot from being a creative director to a deep-dive detective. It’s a tale of how I used a novel cross-examination technique with these same LLMs to solve a problem that each one, individually, had given up on.

TL;DR: The openWakeWord JavaScript Architecture That Actually Works

For the engineers who just want the final schematics, here is the stateful, multi-buffer pipeline required to make this work.

• Pipeline: [Audio Chunk] -> Melspectrogram Model -> Melspectrogram Buffer -> Embedding Model -> Wake Word Model -> Score
• Stage 1: Audio to Image (Melspectrogram):
  • Audio Source: 16kHz, 16-bit, Mono PCM audio.
  • Chunking: The pipeline operates on 1280 sample chunks (80ms). This is non-negotiable.
  • Model Input: The chunk is fed into melspectrogram.onnx as a float32 tensor.
  • Mandatory Transformation: The output from the melspectrogram model must be transformed with the formula output = (value / 10.0) + 2.0.
• Stage 2: Image Analysis (Feature Embedding):
  • Melspectrogram Buffer: The 5 transformed spectrogram frames from Stage 1 are pushed into a buffer.
  • Sliding Window: This stage only executes when the mel_buffer contains at least 76 frames. A window is sliced from the start of the buffer.
  • Model Input: This window is fed into embedding_model.onnx as a tensor.
  • Window Step: After processing, the buffer is slid forward by 8 frames (splice(0, 8)).
• Stage 3: Prediction:
  • Embedding Buffer: The 96-value feature vector from Stage 2 is pushed into a second, fixed-size buffer that holds the last 16 embeddings.
  • Model Input: Once full, the 16 embeddings are flattened and fed into the final wake word model as a tensor. This [batch, sequence, features] shape is the critical insight that resolved a key error.

The Unvarnished Truth: My Journey into Debugging Hell

After the initial burst of productivity, all three LLMs hit the same wall and gave up. They settled on the same, demoralizing conclusion: the problem was floating-point precision differences between Python and the browser’s ONNX Runtime. They suggested the complex math in openWakeWord was too sensitive and that a 100% client-side implementation was likely impossible.
Something about that felt fishy. The separate VAD (Voice Activity Detection) model was working perfectly fine. This felt like a logic problem, not a fundamental platform limitation.
This is where the breakthrough happened. I realized “vibe coding” wasn’t enough. I had to get specific. I decided to change my approach and use the LLMs as specialized, focused tools rather than general-purpose partners:

1. The Analyst: I tasked one LLM with a single, focused job: analyze the openwakeword Python source code and describe, in painstaking detail, exactly what it was doing at every step.
2. The Coder: I took the detailed blueprint from the “Analyst” and fed it to a different LLM. Its job was to take that blueprint and write the JavaScript implementation.

This cross-examination process was like a magic trick. It bypassed the ruts the models had gotten into and started revealing the hidden architectural assumptions that had been causing all the problems.

The First Wall: The Sound-to-Image Pipeline

The “Analyst” LLM immediately revealed my most basic misunderstanding. I thought I was feeding a sound model, but that’s not how it works. These models don’t “hear” sound; they “see” it.
Aha! Moment #1: It’s an Image Recognition Problem. The first model in the chain, melspectrogram.onnx, doesn’t process audio waves. Its entire job is to convert a raw 80ms audio chunk into a melspectrogram—a 2D array of numbers that is essentially an image representing the intensity of different frequencies in that sound. The subsequent models are doing pattern recognition on these sound-images, not on the audio itself. This also explained the second part of the puzzle: the models were trained on specifically processed images, which is why this transformation was mandatory:

// This isn't just a normalization; it's part of the "image processing" pipeline
// that the model was trained on. It fails silently without it.

for (let j = 0; j < new_mel_data.length; j++) {
  new_mel_data[j] = (new_mel_data[j] / 10.0) + 2.0;
}

The Second Wall: The Audio History Tax

With the formula in place, my test WAV file still failed. The “Analyst” LLM’s breakdown of the Python code’s looping was the key. I realized the pipeline’s second stage needs a history of 76 spectrogram frames to even begin its work. Each 80ms audio chunk only produces 5 frames, meaning the system has to process 16 chunks (1.28 seconds) of audio before it can even think about generating the first feature vector. My test file was too short.

// This logic checks if the audio is long enough and pads it with silence if not.

const minRequiredSamples = 16 * frameSize; // 16 chunks * 1280 samples/chunk = 20480

if (audioData.length < minRequiredSamples) {
  const padding = new Float32Array(minRequiredSamples - audioData.length);
  const newAudioData = new Float32Array(minRequiredSamples);
  newAudioData.set(audioData, 0);
  newAudioData.set(padding, audioData.length);
  audioData = newAudioData; // Use the new, padded buffer
}

The Third Wall: The Treachery of Optimization

The system came to life, but it was unstable, crashing with a bizarre offset is out of bounds error. This wasn’t a floating-point issue; it was a memory management problem. I discovered that for performance, the ONNX Runtime for web reuses its memory buffers. The variable I was saving wasn’t the data, but a temporary reference to a memory location that was being overwritten.

// AHA Moment: ONNX Runtime reuses its output buffers. We MUST create a *copy*
// of the data instead of just pushing a reference to the buffer.

const new_embedding_data_view = embeddingOut[embeddingModel.outputNames[0]].data;
const stable_copy_of_embedding = new Float32Array(new_embedding_data_view);
embedding_buffer.push(stable_copy_of_embedding); // Push the stable copy, not the temporary view.

The Final Wall: The Purpose of the VAD

The system was finally stable, and I could see the chart spike to 1.0 when I spoke the wake word. But the success sound wouldn’t play reliably. This was due to my most fundamental misconception. I had assumed the VAD’s purpose was to save resources. My thinking was: “VAD is cheap, the wake word model is expensive. So, I should only run the expensive model when the VAD detects speech.”
This is completely wrong.
Aha! Moment #4: The VAD is a Confirmation, Not a Trigger. The wake word pipeline must run continuously to maintain its history buffers. The VAD’s true purpose is to act as a confirmation signal. A detection is only valid if two conditions are met simultaneously: the wake word model reports a high score, AND the VAD confirms that human speech is currently happening. It’s a two-factor authentication system for your voice. This led to the final race condition: the VAD is fast, but the wake word pipeline is slow. The solution was a VAD Hangover—what I call “Redemption Frames”—to keep the detection window open just a little longer.

// These constants define the VAD Hangover logic

const VAD_HANGOVER_FRAMES = 12; // Keep speech active for ~1 second after VAD stops

let vadHangoverCounter = 0;
let isSpeechActive = false;

// Later, the final check uses this managed state:
if (score > 0.5 && isSpeechActive) {
 // Detection is valid!
}

The Backend Betrayal: A Final Hurdle

With the core logic finally perfected, I implemented a feature to switch between the WASM, WebGL, and WebGPU backends. WASM and WebGPU worked, but WebGL crashed instantly with the error: `Error: no available backend found. ERR: [wasm] backend not found`.
The issue was that the melspectrogram.onnx model uses specialized audio operators that the WebGL backend in ONNX Runtime simply does not support. My code was trying to force all models onto the selected backend, which is impossible when one is incompatible. The solution was a hybrid backend approach: force the incompatible pre-processing models (melspectrogram and VAD) to run on the universally-supported WASM backend, while allowing the heavy-duty neural network models to run on the user’s selected GPU backend for a performance boost. I’ve left the WebGL option in the demo as a reference for this interesting limitation.

The Final Product

This journey was a powerful lesson in the limitations of “vibe coding” for complex technical problems. While LLMs are incredible for scaffolding, they can’t replace rigorous, first-principles debugging. By pivoting my strategy—using one LLM to deconstruct the source of truth and another to implement that truth—I was able to solve a problem that a single LLM, or even a committee of them, declared impossible. The result is a working, robust web demo that proves this complex audio pipeline can indeed be tamed, running 100% on the client, in the browser, no Python backend required.

What it does

• Upload a PNG file to extract the embedded generation prompts (stored in iTXt chunks)
• Works entirely in your browser – no server uploads needed, completely client-side
• Super fast — instantly reveals the exact prompt used to create the SD image

Perfect for artists studying prompt techniques, content verification, or understanding how specific AI images were created.

Try it now to decode the text behind your Stable Diffusion images.

Hey fellow WordPress maintainers! After dealing with countless broken WordPress sites and locked-out admin panels over the years, I finally decided to create something that would make my life (and hopefully yours) easier. Enter WP Recovery Tools – a single-file emergency toolkit that might just save your bacon when everything goes sideways.

What is WP Recovery Tools?

It’s a standalone PHP script that helps you recover access and fix common WordPress issues without needing to access wp-admin or rely on working WordPress functions. Think of it as your emergency backdoor when the front door is jammed.

How to Use

1. Download the PHP script
2. (If not already, rename it from wp-recovery-tools.php to something like wp-recovery-tools_[random-string].php)
3. Upload it to your WordPress root directory (where /wp-config.php is)
4. Access it through your browser: Example: https://exmaple.com/wp-recovery-tools-0727248cdf916d5f.php
5. Delete it when you’re done!

Key Features

1. Recovery Mode Management

• Generate and manage recovery mode links
• Clear all existing recovery links if needed
• No need to mess with database queries or code snippets

2. User Management

• View all WordPress users and their roles
• Reset user passwords with a single click
• Create new admin users when you’re locked out
• Perfect for when you can’t access wp-admin or forgot credentials

3. Plugin Management

• See all installed plugins and their status
• Activate/deactivate plugins without accessing wp-admin
• Super helpful when a plugin breaks your site or causes the white screen of death

4. Theme Tools

• List all installed themes
• Check current active theme
• Switch themes when wp-admin is inaccessible
• Great for fixing broken themes or theme-related issues

5. Database & System Tools

• Database repair and optimization
• Clear cache and transients
• Reset permalinks
• View detailed system information

Security First

The script has several security features built-in:

• If no suffix found, forces you to rename the file with a unique suffix before using
• Provides recovery links that expire and have limited use
• Uses secure password generation
• Implements proper SQL escaping and input validation

Important Warnings and Disclaimers

PLEASE READ THIS CAREFULLY

1. Backup Your Site First!
   • Seriously, don’t skip this. Take a full backup of your files and database before using any recovery tools
   • If something goes wrong, you’ll thank me later
2. No Warranty
   • This tool is provided as-is, without any warranty
   • While I use it regularly on production sites, your mileage may vary
   • Test it on a staging environment first if possible
3. Security Considerations
   • Don’t leave this file on your server after you’re done
   • Always make sure the file has random suffix (wp-recovery-tools-c60f10ea67c4db3d.php)
   • Keep the renamed filename secret – it’s your emergency access key

When to Use This Tool

This toolkit is perfect for when:

• You’re locked out of wp-admin
• A plugin or theme update broke your site
• You need to quickly add an admin user
• WordPress recovery mode isn’t working
• You need to deactivate a problematic plugin
• Database needs quick repairs
• You need system information for debugging

When Not to Use

• Don’t use it for regular WordPress maintenance
• Don’t leave it on your server permanently
• Not meant for regular user management
• Don’t use it if WordPress is working normally

Pro Tips

1. Keep a copy in your emergency toolkit
2. Test it on a development site first to get familiar with the features
3. Document the filename you choose – you don’t want to forget it during an emergency
4. Consider creating a separate backup admin user while everything is working
5. Bookmark this article for future reference

Technical Requirements

• WordPress 5.2 or higher
• PHP 7.0 or higher
• MySQL/MariaDB
• File access to your WordPress root directory

Final Thoughts

As someone who manages multiple WordPress sites, having this tool in my arsenal has saved me countless hours of troubleshooting and recovery work. Just remember – with great power comes great responsibility. Use it wisely, keep it secure, and always, ALWAYS have backups!

Happy recovering!

P.S. I’m actively maintaining this tool and adding new features. If you have suggestions or run into any issues, feel free to reach out!

Disclaimer: This tool is provided as-is without any warranties or guarantees. Always backup your site before using any recovery tools.

What is G-Code Flipper?

G-Code Flipper is an online tool designed to help users flip or mirror their G-code files. It supports adjustments along the X-axis or Y-axis, ensuring prints are correctly oriented.

Key Features

File Upload

Upload your G-code file directly into the tool. The tool will read and prepare the file for further processing.

Flip Options

The tool allows you to flip the G-code along the X-axis, Y-axis, or not flip at all. This helps in achieving the desired print orientation.

Visual Representation

G-Code Flipper provides a visual representation of the print before and after flipping. This ensures users can verify changes before proceeding with printing.

Automatic Mesh Detection

The tool automatically detects the start and end of the print mesh, accommodating different slicers:

• Start Line: Identified by the first occurrence of ;LAYER:0 or ;AFTER_LAYER_CHANGE  
• End Line: Identified by the last occurrence of ; stop printing object … or ;TIME_ELAPSED: …
  (Cura and Orca Slicers)
  

If the tool fails to detect these lines, it prompts users to manually specify them.

Download Adjusted Files

After flipping, users can download the adjusted G-code file directly from the tool.

How to Use G-Code Flipper

1. Upload Your File: Select and upload your G-code file.
2. Set Print Bed Dimensions: Input the dimensions of your print bed.
3. Choose Flip Direction: Select whether to flip along the X-axis, Y-axis, or no flip.
4. Review and Adjust: Check the visual representation of your print before and after flipping.
5. Download Your File: Download the adjusted G-code file for printing.

Full Disclaimer:

The entire code for this tool, as well as the article above was written by Claude 3.5 Sonnet. The thumbnail generated by ChatGPT 4o . It took 44 revisions to make the code work semi-properly. Use with caution. ABSOLUTELY NO WARRANTY. Good luck. Please let me know if you find bugs, have feedback or improvement suggestions.

Unfortunately, Plesk doesn’t seem to have a way to upgrade MariaDB using the components in the control panel.

Attempts to add this feature didn’t work for me either despite their claims

Hint: you can add an extension from the Plesk interface named Panel.ini Editor if you want to try your luck:

The following official article on Plesk doesn’t work either

https://support.plesk.com/hc/en-us/articles/12388091703703

It results in an error like this:

The repository 'https://dlm.mariadb.com/repo/maxscale/latest/apt bionic Release' does not have a Release file.

Failed to add trusted package signing keys

The Solution:

1. First create backups of all databases as .sql dump:

   MYSQL_PWD=`cat /etc/psa/.psa.shadow` mysqldump -u admin --verbose --all-databases --routines --triggers > /tmp/all-databases.sql

2. Create a backup of all MySQL/MariaDB data (this is different from the above — it copies the entire current mysql/mariadb version executables):

   cp -v -a /var/lib/mysql/ /var/lib/mysql_backup

Then, follow this instead: https://mariadb.org/download/?t=repo-config&d=18.04+LTS+%22bionic%22&v=11.2&r_m=knownhost

Make sure you select your right OS version, desired MariaDB version, and a mirror closer to you is preferable.

Hints:
Use cat /etc/*-release to find out your current OS name and version.

Use sudo nano /etc/apt/sources.list.d/mariadb.sources to create a file and paste the contents from second box. Ctrl+X to exit nano and Y to save file.

In the end I finished with some commands from the first article that didn’t work initially. It’s supposed to add the newly installed MariaDB version to Plesk.

6. Start the MariaDB service:

   systemctl start mariadb

7. Upgrade MySQL/MariaDB databases:

   MYSQL_PWD=`cat /etc/psa/.psa.shadow` mysql_upgrade -uadmin

8. Restart MySQL/MariaDB service:

   systemctl restart mariadb

9. Execute the following commands to update package version inside Plesk:

   plesk bin service_node --update local
   plesk sbin packagemng -sdf

    

This finally worked…  after a few refreshes Plesk was showing MariaDB Version: 11.2

Let me know how it goes. Good luck!

It is required that you store all your data in Unicode format (UTF-8). New installations must be performed into databases that have their default character set as Unicode. If you are upgrading, you should perform the UTF-8 migration process (see the Admin page).

The current setup of MySQL or MariaDB is using ‘utf8’. This character set does not support four byte characters which include some emoji. Trying to use these characters will result in an error when updating a record, and any information being sent to the database will be lost Please consider changing your settings to ‘utf8mb4’. See the documentation for full details.

The Solution:

Login to mysql/mariadb via SSH using root user or the user associated with moodle db:

(All code snippets below are editable)

mysql -u moodle_user -p 123456

use moodle;

SHOW LOCAL VARIABLES LIKE 'character_set_database';

--# In my case I got this:

+------------------------+---------+
| Variable_name          |  Value  |
+------------------------+---------+
| character_set_database | utf8mb3 |
+------------------------+---------+
1 row in set (0.001 sec)

--# Run the following to change to utf8mb4

ALTER DATABASE moodle CHARACTER SET utf8mb4 COLLATE utf8mb4_unicode_ci;

--# Verify again to make sure the change took effect

SHOW LOCAL VARIABLES LIKE 'character_set_database';

+------------------------+---------+
| Variable_name          |  Value  |
+------------------------+---------+
| character_set_database | utf8mb4 |
+------------------------+---------+
1 row in set (0.001 sec)

Make sure in your ./config.php ‘dbcollation’ is set to ‘utf8mb4_unicode_ci’

//...

$CFG->dboptions = array (
  'dbpersist' => 0,
  'dbport' => '',
  'dbsocket' => '',
  'dbcollation' => 'utf8mb4_unicode_ci',  // 'utf8_general_ci' doesn't work
);

//...

sudo nano /etc/mysql/my.cnf

#... append to the bottom

#Moodle required
[ client]
default-character-set = utf8mb4

[mysqld]
innodb_file_format = Barracuda
innodb_file_per_table = 1
innodb_large_prefix = true

character-set-server = utf8mb4
collation-server = utf8mb4_unicode_ci
skip-character-set-client-handshake

[mysql]
default-character-set = utf8mb4

systemctl restart mariadb

Let me know how it goes or if you have other solutions. Good luck!

P.S. Also, check my article on updating MariaDB since Moodle requires 10.5.6 or greater I think. Ignore the part that is about Plesk if you’re not using it — the process is exactly the same except the last step 9. is not necessary on vanilla Ubuntu or CentOS.

Important settings:

The last line is set to false even though the Klipper test reports true!
You may need to try a combo of true and false of these settings.
I’ve seen other threads set pin_up_touch_mode_reports_triggered to true to get it working depending on the model.
stow_on_each_sample is slower but it doesn’t work as well otherwise.

Here’s what it looks like when NOT working:

Some keywords: 3D Touch not working, blinking fast. BL Touch Clone (3D Touch) fails calibration. Red Blink. Blue Blink.

Here’s my entire printer.cfg  — keep in mind it has pressure advance, bed leveling, etc. custom settings.

Here’s how to remove the new windows explorer context menu and revert to the old one.

Easy method

DOWNLOAD – Restore_Explorer_Context_Menu.reg

Double-click the file to run it and press ‘Yes’

Test right-clicking anywhere right away.

If it doesn’t work, restart Windows Explorer from Task Manager!

That’s it!

Custom Method

Alternatively, if you don’t trust running a random registry file off the internet you can create your own:

Create a text file anywhere and name it something like Restore_Explorer_Context_Menu.reg

Edit it > Paste the following below > Save it > Double-click it > Click Yes! > Restart Explorer

Windows Registry Editor Version 5.00

[HKEY_CURRENT_USER\Software\Classes\CLSID\{86ca1aa0-34aa-4e8b-a509-50c905bae2a2}\InprocServer32]
@=""

This was based on the following article:

https://www.techrepublic.com/article/how-to-restore-the-full-context-menu-to-file-explorer-in-windows-11/

It’s the only method that worked for me. The Folder Options method with “Launch folder windows in a separate process” didn’t work for me

Edit

If for some strange reason you want to revert back to the default menu replace @=”” with @=- and run the reg again. (The minus will delete the entry)