Web

This site now has a chat page where you can ask questions about me and my research. That is not particularly remarkable in itself; chatbots are everywhere these days. What I find more interesting is that this one runs entirely in your browser. There is no server involved, no API keys, and no data leaving your machine. Your questions are answered on your own hardware, by a language model that your browser downloads and runs locally. Here are some reflections on how it is set up and what I have learned along the way. ...

Back in 2012, I published what has become my (by far) most-read blog post: Disciplinarities: intra, cross, multi, inter, trans. There, I introduced a figure based on a combination of Stember’s textual description and Zeigler’s sketch. Making a vector version I published the figure “properly” in my book Sound Actions, and, as described in this blog post), made a vector version (PDF) and source file (ODG) available on GitHub with a CC-BY license. Making a SVG version Recently, I have tried using AI tools to create SVG versions of various illustrations. This has worked remarkably well, including “SVG’ing” the MishMash emblem and the MishMash Cube. One of the cool things about this is that it opens for creative things, like making the MishMash bubbles blink. ...

We are currently working on developing the MishMash webpages. Since I don’t like adding and editing the same information in multiple places, I have been interested in whether the MishMash pages can (as far as possible) “automagically” collect information from other locations. When setting up our partner events pages, I realised that it was possible to collect most of the useful information (title, location, date, image) from the metadata of the pages already hosted on other websites. This makes it much easier to add partner events than if we had to set up our own pages on MishMash.no, which would also duplicate much content. The standard making this happen is called Open Graph. Since I didn’t know about this before I began my little adventure, here is a short overview. ...

I wanted to test whether I could add a local chatbot to arj.no/chat/ that answers questions about my website content and not the whole internet. Since my blog is built using Hugo, a static site generator, I don’t have any server in the background that can host the Large Language Model (LLM). Instead I looked for a simple solution with standard web technologies and files. Running a model in the browser with WebLLM After discussing with CoPilot, I ended up using WebLLM, which allows language models to run inside the browser. It relies on WebGPU, which makes local AI processing possible, if you have Edge or Chrome available. ...

Many musicians rely on basic tools in everyday life, including a tuner, a metronome, and a keyboard. I support the kids in a marching band, and I see that they rely on numerous poorly developed apps that differ between iOS and Android devices. Many of them also include ads, and some even play video ads in the middle of a tuning session. I wanted to see if I could develop some web-based apps to solve the problem. ...

Now that we have the MishMash “bubble” illustration as an editable SVG image, it is time to start playing around with how it can be modified dynamically. The first experiment was to try to make it blink. Here, I describe two approaches, using CSS and a GIF. CSS Hover Blink The CSS version is based on this code: .blink-eye-thumb { display: block; transform-origin: center; will-change: transform; } a:hover .blink-eye-thumb, a:focus-visible .blink-eye-thumb, .blink-eye-thumb:hover, .mishmash-bubbles:hover .blink-eye-thumb { animation: bubble-eye-blink 850ms ease-in-out 2; } @keyframes bubble-eye-blink { 0%, 12%, 40%, 100% { transform: scaleY(1); } 20%, 26% { transform: scaleY(0.08); } 48%, 54% { transform: scaleY(0.14); } } The animation compresses the image vertically on hover/focus. To ensure it works everywhere, it targets: ...

Some weeks ago, I wrote about how I modified the SVG image of the MishMash “bubbles”. Today, I got around to doing a similar process with the MishMash “cube”, an illustration summarising how we want to work in MishMash. The cube The idea of the cube is to present the work packages that structure the organisation, the perspectives that are central to all our work, and the approaches which describe the methods used. One of the aims of MishMash is to enable true interdisciplinary collaboration, and the idea is that the cube will assist us with communicating the multidimensionality of such an endeavour. ...

I have previously written about the MishMash emblem and how I cropped it in a text editor. This was based on the fact that an SVG image is a “vector image” in which all elements are described programmatically. So what appears as an image on screen: is, in fact, an XML file with information. Ever since I discovered this, I thought it could be fun to script changes to the SVG. However, when I opened the file to inspect the content, I quickly realised that it wasn’t as easy as that: ...

Since I am on a roll with cleaning up my Hugo-based blog, adding alt text, and supporting math writing, I also had to experiment with adding support for musical scores. For the Sensing Sound and Music book, I used music21 in Python after struggling to set up LilyPond. Both LilyPond (professional engraving) and music21 (symbolic analysis and MIDI generation) are powerful and could be integrated into a blog, but they usually require a server-side toolchain or extra installation. However, with the help of CoPilot, I discovered ABCjs, a lightweight client‑side library that provides rendering, playback, and MIDI export, which work well for static sites. ...

I am continuing to clean my Hugo site. Going over old posts, I found one on explaining artificial neural networks that included a bunch of equations based on screenshots from my master’s thesis. Now, with the help of CoPilot, I have implemented proper equation support on my Hugo site. KaTeX to the rescue I am used to writing my academic texts using LaTeX, an advanced typesetting library where you write code and compile it to a PDF (or something else). One of the benefits of LaTeX is its advanced support for typing equations (and many other features). However, until recently, it wasn’t so easy to write equations in HTML. ...