Quantum Annealing on Javascript

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.