Quantum Annealing on Javascript

Yuichiro Minato
May 19 · 5 min read

Introduction

We cannot usually use the actual quantum computer or quantum machines. This time we introduce Quantum Annealing simulator on Javascript easy to use for website or web application combining your useful interface.

Codes

Let’s see the codes.

Below we show the quantum annealing code with 150qubits and 50 trotters (number of parallel processes). The interactions between qubits are fixed to 1 this time.

The basic step for simulation is,

  1. Initialize all the qubits. In quantum annealing all the qubits are initialized randomly. This time we have 150qubits with 50trotters, so we initialize totally 150*50qubits to +1 or -1
  2. We use quantum monte carlo for this simulation. We initialize G=10 and reducing G with multiply 0.999 on every update of magnetic field 2000 times. On every G we calculate 50000 times for the state.
  3. For each simulation we first select “trotter” and “qubit”. We calculate both the classical ising model Energy difference and Energy interaction between trotters.
  4. Evaluating the Energy difference using Metropolis method, we decide to flip the qubit value.
  5. We calculate step 2 to 4 until the state to stabilize.
//Parameters
 var N = 150;
 var kT = 0.02;
 var G = 10;
 var q = [];
 var m = 50 ;
 var jij = 1;
 var loop = 50000; //Initialize qubits
 for(var j=0;j<m;j++){
  q[j] = [];
  for(var i=0;i<N;i++){
   q[j][i] = Math.floor(Math.random()-0.5)*2+1;
  };
 }; //Quantum Monte Carlo
 for(var l=0;l<2000;l++){
  for(var k=0;k<loop;k++){
   var y = Math.floor(Math.random()*m); //Randomly select trotter
   var x = Math.floor(Math.random()*N); //Randomly select qubits
   var dE = (jij*2*q[y][x]*q[y][(N+x-1)%N] + jij*2*q[y][x]*q[y][(x+1)%N])/m; //calc energy
   var kk = G/kT/m;
   var kk1 = Math.exp(kk);
   var kk2 = Math.exp(-kk);
   dE += q[y][x]*(q[(m+y-1)%m][x]+q[(y+1)%m][x])*Math.log((kk1+kk2)/(kk1-kk2))/kT;
   if(dE<0 || Math.exp(-dE/kT)>Math.random()){ //Metropolis method
    q[y][x] = -q[y][x]; //flip the qubit
   };
  };  G = G*0.999;
 };

Implementation of Chimera graph

If you want to implement chimera graph which is the specific connection of qubits, you can realize it by limiting the connection of the ising model.

var N = 512;
 var kT = 0.02;
 var G = 10;
 var q = [];
 var m = 256;
 var jij = 1;
 var hcell = 8;
 var hq = hcell*8; for(var j=0;j<m;j++){
  q[j] = [];
  for(var i=0;i<N;i++){
   q[j][i] = Math.floor(Math.random()-0.5)*2+1;
  };
 }; for(var l=0;l<600;l++){
  for(var k=0;k<N*m;k++){
   var x = Math.floor(Math.random()*N);
   var y = Math.floor(Math.random()*m);
   var xcell = Math.floor(x/8)*8;
   if(x%8<4){
    var dE = jij*2*q[y][x]*(q[y][xcell+4]+q[y][xcell+5]+q[y][xcell+6]+q[y][xcell+7]);
    if(x<N-hq){
     dE += jij*2*q[y][x]*(q[y][x+hq]);
    }
    if(x>hq-1){
     dE += jij*2*q[y][x]*(q[y][x-hq]);
    }
   }else{
    var dE = jij*2*q[y][x]*(q[y][xcell+0]+q[y][xcell+1]+q[y][xcell+2]+q[y][xcell+3]);
    if(x%hq>7){
     dE += jij*2*q[y][x]*q[y][x-8];
    }
    if(x%hq<hq-8){
     dE += jij*2*q[y][x]*q[y][x+8];
    }
   }   dE = dE/m;
   var kk = G/kT/m;
   var kk1 = Math.exp(kk);
   var kk2 = Math.exp(-kk);
   dE += q[y][x]*(q[(m+y-1)%m][x]+q[(y+1)%m][x])*Math.log((kk1+kk2)/(kk1-kk2))/kT;
   if(dE<0 || Math.exp(-dE/kT)>Math.random()){
    q[y][x] = -q[y][x];
   };
  };  G = G*0.99;
 };

Implementation of Simulated annealing with chimera graph

You can also implement the simulated annealing algorithm similar to quantum annealing easily.

var N = 2048;
var kT = 5;
var q = [];
var jij = -1;
var hcell = 16;
var hq = hcell*8;for(var i=0;i<N;i++){
 q[i] = Math.floor(Math.random()-0.5)*2+1;
};for(var i=0;i<550;i++){
 for(var k=0;k<N;k++){
  var x = Math.floor(Math.random()*N);
  var xcell = Math.floor(x/8)*8;
  if(x%8<4){
   var dE = jij*2*q[x]*(q[xcell+4]+q[xcell+5]+q[xcell+6]+q[xcell+7]);
   if(x<N-hq){
    dE += jij*2*q[x]*(q[x+hq]);
   }
   if(x>hq-1){
    dE += jij*2*q[x]*(q[x-hq]);
   }
  }else{
   var dE = jij*2*q[x]*(q[xcell+0]+q[xcell+1]+q[xcell+2]+q[xcell+3]);
   if(x%hq>7){
    dE += jij*2*q[x]*q[x-8];
   }
   if(x%hq<hq-8){
    dE += jij*2*q[x]*q[x+8];
   }
  }
  if(dE<0 || Math.exp(-dE/kT)>Math.random()){
   q[x] = -q[x];
  };
 } kT= kT*0.99;
};

It’s quite easy and short.

Visualization of Quantum Annealing

It html and javascript code, so you can visualize the process of calculation by using html canvas.

<!doctype html>
<html>
<head>
 <style>body{font-size:10px;}</style>
</head>
<body>
kT=0.02<br>
G=<span id="GG"></span><br><br>
<canvas id="main" width="2000" height="900"></canvas>
<script>
 //parameters
 var N = 150;
 var kT = 0.02;
 var G = 10;
 var q = [];
 var m = 50 ;
 var jij = 1;
 var loop = 50000;
 //qbit initialize
 for(var j=0;j<m;j++){
  q[j] = [];
  for(var i=0;i<N;i++){
   q[j][i] = Math.floor(Math.random()-0.5)*2+1;
  };
 };
 //html5 canvas
 var canvas = document.getElementById('main');
 var ctx = canvas.getContext('2d');
 var anneal = setInterval(function(){
  //monte carlo loop start
  for(var k=0;k<loop;k++){
   var y = Math.floor(Math.random()*m); //select random trotter
   var x = Math.floor(Math.random()*N); //select random qbit
   var dE = (jij*2*q[y][x]*q[y][(N+x-1)%N] + jij*2*q[y][x]*q[y][(x+1)%N])/m; //Energy difference calc
   var kk = G/kT/m;
   var kk1 = Math.exp(kk);
   var kk2 = Math.exp(-kk);
   dE += q[y][x]*(q[(m+y-1)%m][x]+q[(y+1)%m][x])*Math.log((kk1+kk2)/(kk1-kk2))/kT; //Quantum flactuation calc
   if(dE<0 || Math.exp(-dE/kT)>Math.random()){ // Metropolis
    q[y][x] = -q[y][x]; //flipping qbit
   };
  };
  //updating drawing
  ctx.clearRect(0,0,2000,900);
  ctx.beginPath();
  for(var j=0;j<m;j++){
   for(var i=0;i<N;i++){
    if(q[j][i]==1){
     ctx.fillStyle = 'rgb(255,0,0)';
    }else{
     ctx.fillStyle = 'rgb(255,255,255)';
    }
    ctx.fillRect(i*7,j*8,5,5);
   };
  };
  G = G*0.999;
  if(G<0.1){ //finishing
   clearInterval(anneal);
  };
  document.getElementById('GG').innerHTML = G;
 },1);
</script>
</body>
</html>

To watch the movement of qubits, it’s quite interesting. Please try see this on your computer.

Visualization of Chimera graph

The visualization of chimera graph is also easy to implement using html canvas.

<!doctype html>
<html>
<head>
<style>body{font-size:10px;}</style>
</head>
<body>
G=<span id="GG"></span><br><br>
<canvas id="main" width="2000" height="900"></canvas>
<script>
 var N = 512;
 var kT = 0.02;
 var G = 10;
 var q = [];
 var m = 256;
 var jij = 1;
 var hcell = 8;
 var hq = hcell*8;
 var drawtrotter = 10;
 var alpha = 1/drawtrotter;
 for(var j=0;j<m;j++){
  q[j] = [];
  for(var i=0;i<N;i++){
   q[j][i] = Math.floor(Math.random()-0.5)*2+1;
  };
 };
 var canvas = document.getElementById('main');
 var ctx = canvas.getContext('2d');
 var anneal = setInterval(function(){
  for(var k=0;k<N*m;k++){
   var x = Math.floor(Math.random()*N);
   var y = Math.floor(Math.random()*m);
   var xcell = Math.floor(x/8)*8;
   if(x%8<4){
    var dE = jij*2*q[y][x]*(q[y][xcell+4]+q[y][xcell+5]+q[y][xcell+6]+q[y][xcell+7]);
    if(x<N-hq){
     dE += jij*2*q[y][x]*(q[y][x+hq]);
    }
    if(x>hq-1){
     dE += jij*2*q[y][x]*(q[y][x-hq]);
    }
   }else{
    var dE = jij*2*q[y][x]*(q[y][xcell+0]+q[y][xcell+1]+q[y][xcell+2]+q[y][xcell+3]);
    if(x%hq>7){
     dE += jij*2*q[y][x]*q[y][x-8];
    }
    if(x%hq<hq-8){
     dE += jij*2*q[y][x]*q[y][x+8];
    }
   }
   dE = dE/m;
   var kk = G/kT/m;
   var kk1 = Math.exp(kk);
   var kk2 = Math.exp(-kk);
   dE += q[y][x]*(q[(m+y-1)%m][x]+q[(y+1)%m][x])*Math.log((kk1+kk2)/(kk1-kk2))/kT;
   if(dE<0 || Math.exp(-dE/kT)>Math.random()){
    q[y][x] = -q[y][x];
   };
  };
  ctx.clearRect(0,0,2000,900);
  for(var j=0;j<10;j++){
   for(var i=0;i<N;i++){
    if(q[j][i]==1){
     ctx.fillStyle = 'rgba(255,0,0,'+alpha+')';
    }else{
     ctx.fillStyle = 'rgba(0,0,0,0)';
    }
    if(i%8<4){
     ctx.fillRect(3+i%8*7+Math.floor(i%hq/8)*40,Math.floor(i/hq)*40,3,30);
    }else{
     ctx.fillRect(Math.floor(i%hq/8)*40,i%8*7-25+Math.floor(i/hq)*40,30,3);
    }
   };
  };
  G = G*0.999;
  document.getElementById('GG').innerHTML = G;
  if(G<0.05){
   clearInterval(anneal);
  }
 },1);
</script>
</body>
</html>

Result

It’s very useful to check the process of calculation on quantum annealing using javascript.

Yuichiro Minato

Written by

MDR, Quantum Computing@Tokyo, https://mdrft.com/