Quantum Computing in JavaScript with Q.js

Hi, I'm Stuart Smith. Some of you folks might already know me from my dayjob. I've been part of the virtual reality community for quite some time now. Particularly the web-based VR community.

I got involved in web VR back when building web-based virtual reality meant asking Brandon Jones over at Google for custom builds of Chromium. The medium felt really fresh and exciting. And around that time, I wrote the VR controller library for 3JS. It provided an easy, generic way for your web VR app to support a bunch of different hand controllers without having to write custom code for each one. So back then, that meant, you know, the first Vive controllers, Microsoft Mixed Reality controllers, Rift Touch, Daydream, and remember Gear VR? And all that stuff.

Over at the Google Data Arts team, we used the VR controller library to power this VR music video for the band LCD Sound System. You could dance along to the song in VR, and then a recording of your dance would become part of the video itself. So shout out to our collaborators and the real stars of that project, Studio Moniker and Studio Pucky. Look them both up.

I also released Space Rocks, a personal tribute to Atari's 1979 classic Asteroids, but in VR, of course. I took my VR controller library and I added something I called multi-channel haptic feedback. Which made it super easy to add complex haptic commands to your web VR app. Like, if you wanted kickback from firing your laser, but also needed to feel the hum of your plasma engines revving up and down, well, my haptic channels approach made that a breeze. Just a few years later, Oculus upped the game by adding a hand tracking API for web-based VR. I immediately wrote HandyJS. For both recording and recognizing hand poses on the fly. So instead of just pinch gestures to select things, with HandyJS you could easily recognize the whole ASL finger spelling alphabet and then some. Finger guns was most fun, obviously. This library does not require any machine learning whatsoever. Seriously, there's no network inside of Handy, it's some k-means clustering magic. And it is wicked fast.

I've made a lot of work outside of VR, too. I started coding when I was quite young, but I'm educated as a graphic designer and artist. I didn't study computer science. I've worked as a commissioned artist, and I've had artwork exhibited in various galleries and museums. I'm also a lifelong mediocre-to-terrible musician.

I even enjoy writing essays occasionally, despite having no license to do so. And right now, I'm the head of consumer augmented reality at Unity. Everyone knows Unity, right? Our game engine is all about providing real-time 3D rendering for the masses. 70% of the world's mobile games are made with Unity. And we're not just 70% of mobile, we're half of all games. So if you play games, you've played something made with Unity. But I'm not here to talk about any of that. I'm here to talk about my nights and weekends' passion interest, quantum computing. I'm the creator and maintainer of Quantum JavaScript, or QGS for short. And I'm the founder of Open Quantum Club.

What is this stuff exactly? Well, let's go deep on QGS for a second. It's actually a few things at once. It's this website and the corresponding source code repository. It's this drag-and-drop circuit composer interface in particular. It's a quantum circuit simulator. So all the inner workings that allow you to run quantum circuit simulations right on your phone or laptop without having actual quantum hardware in your hands. It's that entire code library and the corresponding API. It's the concept primers that are there to help you get up to speed on quantum stuff quickly. Especially if you're like me, no real physics background, no quantum background, just a casual coder with some high school math. It turns out that's all you need to get started messing around with this stuff. It's the documentation for the qJS API as well because what good is a library if you don't know how to use it? And when you put all this stuff together, there's the small but growing community of enthusiastic folks who've also fallen in love with this ridiculous idea of fusing quantum and web browsers, cause JavaScript wasn't chaotic enough on its own already. And so for this community, I'm starting something called OQC, Open Quantum Club. This is a project that I'm spinning up right now through a website that will feature profiles and interviews with folks in the quantum community. The special focus here will be on the humanity behind the math. Who are the personalities? What are our collective hopes and dreams? So stay tuned for more about that as we head towards 2023.

And okay, that's all great, right? But what exactly is quantum computing? What even is a quantum computer? This. This is a quantum computer right here. This hanging cylindrical tank that you see. There are different sorts of quantum computer architectures, polarized photons, trapped ions, superconductors. Right now, superconducting quantum computers, like you see here, are the most popular kind.

They're used by companies like IBM, or Getty, Google. Superconducting quantum computers require extreme cold to function, just a hair above absolute zero. What we're looking at here is actually the refrigeration tank that holds the computing parts. Let's look inside that tank.

Here we see someone servicing the parts that would normally be covered by the refrigeration tank during operation. This is what some folks call the golden chandelier. All of this intricate hardware inside the refrigeration tank is for supercooling and gently nudging electron pairs. Using the quantum nature of this internal environment to represent data and perform computations on that data. Here is a glamour shot of a golden chandelier. I'm told that there is some actual gold plating in here for thermal and corrosion prevention purposes, but what we're looking at is mostly copper alloys. It's still pretty though.

The actual quantum computation happens right here on this tiny chip itself. It sits at the very bottom, the coldest part of the chandelier. This is where you actually nudge and measure the state of your electron pairs. And just to be clear, this hardware does not do some kind of magic. Our universe is already quantum in nature. We humans are just too big, and our environment is too noisy to be able to observe quantum effects directly. That's why we have to make really intricate hardware that can make these effects visible and useful to us.

Okay, but you might notice this so-called computer does not seem to have a keyboard or mouse or even a monitor. It's definitely a computer but not in the sense that we commonly use that word. It makes more sense to think about a quantum computer like a graphics card. If you're not familiar with graphics cards, this is one right here, you slot it into your computer's motherboard and it handles all the complex graphic rendering that your machine might need to do. If you're into high-end video games, you've probably been concerned about how powerful your graphics card is. Now, we never use the phrase graphics computer, though that's really what this is. It computes graphics.

So, we have a parallel situation here. A quantum computer is really a computing component. Instead of sliding it into your computer's motherboard like a graphics card, companies like IBM, Rigetti, Google, and so on, they hook these golden monsters up to the internet and you can send them quantum computation tasks to carry out. They'll run your program, and then they'll send you back the finished results. And this paradigm has been around forever, right? Maybe you think of it as cloud computing or time-sharing? When Pixar or Weta are rendering their computer-generated imagery for their next blockbuster film, they don't just render that on a single computer in the office.

No way, it's too complex. Instead they'll send that task out to what's called a render farm, racks and racks of raw computing hardware that you can access remotely. And that's the commercial model for using quantum computers today.

Unless you're at a university or a major corporation, you know, building this hardware yourself, you're going to write a quantum program right on your laptop or phone and send that over the internet to be run remotely on real quantum hardware like this. And then the results of that quantum execution will be pinged back to you when it's done.

Now, we just talked about quantum hardware, and we'll touch on quantum hardware again in a few minutes. But I want to make something clear. Let's say this circle represents quantum physics. This is all the knowledge about how the universe actually conducts itself. Photons, electrons, locality, tolerances, thermodynamics, packets of light, and so on. And over here is quantum computing. This is just pure math and logic. You don't need to know anything about electrons or superconducting or any of it. This is just computer programming.

Now, that statement might frustrate folks who understand both of these oceans of knowledge, but you don't need to know how electricity works to make a website, right? Same deal here. You don't need to actually know the physics in order to write some code. So all of that quantum hardware that makes up a quantum computer, it's really this intersection right here. That's actual physics and engineering in the service of creating a machine that can compute things. And that is great. It's all great. But this is really where QGS sits. I'm not a physicist. I'm not an engineer. QGS is not hardware. It's just software. So no physics, just computing. If we're being honest, my personal knowledge scape looks a little more like this. Random puddles of knowledge rather than a vast ocean. But also this. Because we humans are beautifully messy and nonsensical creatures.

Learning is a journey and I'm still at the beginning of my quantum journey, I think. If you think this stuff is exciting but worry that you're not a physicist, that you don't understand quantum mechanics, all of QGS has been built so far on these splotchy puddles of knowledge. You're in good company. Hop in the puddles with me.

Like I said, we'll touch on hardware again in a bit. But for now, let's talk about QGS itself. So this is the QGS website, really the hub for the whole Q experience. There are quantum tutorials, API documentation, and it's a playground for experimenting with quantum circuits. They're called circuits in the biz, so that's what I call them here. But it might be more helpful to think of them as programs, just code, just software.

I'm going to play a quick demo video for you that I made a while back to show off some of the features of QGS. So keep your eyes glued to the video while I use this opportunity for a quick drink of water. Okay, all right. Quantum JavaScript. It starts off with this interactive circuit building interface that runs right in your web browser. And I'll explain what these things are in a moment, but I'll just show you how it operates first. We can select everything and throw it away and start over. We also have an undo button here which is great, and also a lock button so we can lock our circuit and can't mess it up, can't select things, can't throw stuff away, which is even more helpful on a mobile interface where there is no hover state and selection.

You just, you're tapping, perhaps you're tapping a scroll, perhaps you're tapping without meaning to, and you definitely don't want to mess up a circuit that you've carefully composed. But in this case, we can throw down an identity gate and maybe a poly X gate and select them and combine them together to make a controlled gate here. And what we've just created here is a bell state. And even if you don't understand any of this stuff, you can see the live probability results being updated in real time as we change things. So it's really cool that you can drag and drop stuff together. But you can also code things, code circuits with JavaScript. And what's even more than that is you can combine the two. So if we open up our JavaScript console here. Let me clear it out. It says that this circuit is accessible in our console. So let's give that a shot. Let's see.

We get a circuit back. Let's make this a little larger. Let's see what that circuit looks like. We can get a diagram of it. It's not very interesting when we have a blank circuit. But here, we can quickly build that Bell state again. And you can see, as I'm editing the circuit, we're getting real output just like that. And here, let me scroll up. So we can actually see that this ASCII diagram looks very similar to what we have right here, doesn't it? And so that is pretty cool. And what's even cooler is we can start to do things like, let's say we want to add one of those H gates. That's a Hadamard gate, and we'll talk about that in a second. Let's add it to moment three on wire three, which should put it right there. Let's see if we can do that. Oh, and there it is. So we can actually jump back and forth between code and the drag and drop interface. So it's not about dumbing something down, not at all. With QGIS, you have access to this quantum circuit both through code and the drag and drop interface. And you can fluidly switch back and forth to whatever has least cognitive overhead in that moment. Let's say I need to get rid of everything here in moment two. I could certainly code that, or I could just select it and throw it away. So I just want to emphasize that designing a user interface and offering pictures to look at and click on is never about dumbing something down. It's about making tasks easier and more efficient for us human beings who require that. And there it is.

Let's see. Now I debated whether or not I should try to cram a crash course in quantum concepts into a 20-minute talk, but I think it would take me about an hour to comfortably walk you through this stuff, and it gets a little mathy. So I'm going to mostly spare you, except for this. I want to give you a small taste of what's going on here, and hopefully that's intriguing enough that you will visit the QGIS site on your own to learn more. And better yet, check out our list of links and references so you can jump straight into some good source materials on your own.

So here we go. This is an actual page from the QGIS website describing qubits and what they are. And it starts out by saying qubits are just a pair of numbers. So a quantum bit, the smallest unit that you will use to do quantum computing, can be represented by a pair of numbers. Now, you might physically represent your qubits using photons or something else. But mathematically, it's just two numbers. That's it. And we can name one alpha, and we can name the other one beta. And the thing that makes this pair of numbers special is their relationship to each other. And here it is. Alpha squared plus beta squared must always equal exactly 1. And the reason is because alpha and beta represent the probabilities of a bit being 0 or 1, on or off. And the sum of those probabilities must always be 100%, right? In the end, there is an outcome.

And here we can just scroll down. You can see there's a whole lot more information here, descriptions of why qubits are named certain things, in-depth descriptions of why some are on and some are considered off, ket notation, all sorts of things that I'm just glossing over here. But you can really spend your own time with and get to know.

And this is my favorite right here, is the block-sphere representation of a qubit. So we can see this horizontal qubit, which is considered 0 or off, and the vertical qubit, which is its inverse. So this is considered on. And we also have all these other states. We can just rock around the clock here and see different qubit states. And qubits are really just matrices and vectors. And this will make a lot more sense in context when you look at gates and circuits.

One thing I just wanted to mention really quickly before we jump out of this is superposition. So you've probably heard some things like superposition means something, two things happen at the exact same time or maybe neither happen or something like that. Superposition just means a state where the probability of outcomes are not 100% yes or no, it's some mixture, that's it. I really like to demystify superposition because there's a lot of kind of pop science nonsense around it that just really doesn't translate once you learn the math.

One more thing that I want to touch on here is there are some purposeful quirks to this library. For example, when using the verbose syntax to do things with qubits, you'll notice that some commands have a dollar sign, for instance, at the end. This is a warning sign from the API. If you use the dollar sign, you are mutating your state, you are overwriting the value of that variable. You can see an example here where you add cat and dog and it's destructive, right? Notice that dollar sign suffix as opposed to the non-destructive version which will not change the value of cat. So that's just one example of some of the fun things you might encounter as you explore.

And, oh, right. I said I'd touch on quantum hardware again and here it is. I happen to work at Amazon for a little while in their web services division and Amazon just so happened to be working on a quantum service called Amazon bracket. You can access bracket through a prepared Jupyter notebook. Perhaps some of you might be familiar with Jupyter from doing machine learning. Anyway, here's a little demo video I made a few months before bracket launched using the QGIS interface to drive it. So here I have a Jupyter notebook with Amazon bracket loaded which means that I can use Python code, bracket is Python library, and I can use that to build quantum circuits that I can then run on a simulator in the cloud, or I can run on quantum hardware because Amazon has partnered with different quantum hardware vendors. And so we can do that, we can offer that to our customers and that's pretty exciting. But what's also exciting is this, with just a few lines of HTML, really two lines of HTML, I can inject QJS into this Jupyter notebook, it's now injected, and now I can inject my quantum circuit composer. And this composer, which should look awfully familiar, is writing bracket code.

So this is actually bracket Python code, which right now is set to run on the simulator in the cloud so that we can get quicker results. But if you wanted to, you could switch what device we're running on, and you could actually run this on quantum hardware and get true quantum results. So check this out. Down here you can see where it says our QJS circuit equals a new circuit and it has a placeholder identity gate. This is bracket code, and we're about to watch it change as I start to compose stuff. Look at that, look how it put a Hadamard gate and created a CNOT gate. And we can take that and we can run that. What this is, is a coin flip circuit. And we're waiting for the output to come back from the cloud. So Hadamard puts the qubit into a state of superposition. And then this distributes that superposition to the qubit on the second register here. And so our two possible outcomes are 00 and 11. And you can see, we've gotten a result back from the simulator. It's run that simulation 100 times, which is a customizable number. And it's come back roughly even 54 times, it came out 00 and 46 times, it came out 11.

So here's the deal. We can drag and drop and build circuits as we please using the QJS drag and drop interface. We can even edit that thing and get real-time reports in the JavaScript console still, and it is building Amazon bracket code, which we can run on a simulator or on actual quantum hardware. So that is pretty cool. It is pretty cool. That right there is proof that you can use QJS to drive actual quantum hardware. And to me, that's really special.

All right, let's wrap it up. So folks, this is where I can use your help. QJS is open source. It's on GitHub. Do you like JavaScript? Do you like quantum computing? You can jump right in. And there are open issues that you can check out. Ongoing discussion that could use your voice. There's a lot of documentation and it's easy to get started. I swear. And hey, if I've said anything insightful or smart about quantum computing, it's just because I'm channeling these folks right here. So look them up. They have videos, books, courses, and so on. And as always, MIT OpenCourseWare and Stanford Video Lectures are great free resources.

I'm Stuart Smith. This has been Quantum JavaScript. You can try it out right now in your favorite web browser. Just go to quantumjavascript.app. From there, you'll find everything, including the GitHub repo. Please do get involved in this project. I want to make quantum computing accessible to everyone. That's worth saying again. I want to make quantum computing accessible to everyone. So let's do it.