index.Rmd

---
title: "Quantum FlyTrap Demo"
description: |
  Welcome to the demo. I hope you enjoy it!
site: distill::distill_website
---

```{r setup, include=FALSE}
knitr::opts_chunk$set(echo = FALSE)

# Learn more about creating websites with Distill at:
# https://rstudio.github.io/distill/website.html

# Learn more about publishing to GitHub Pages at:
# https://rstudio.github.io/distill/publish_website.html#github-pages

```


```{r, results='asis', echo=FALSE, message=FALSE}
cat(
  "<script src='https://cdn.jsdelivr.net/npm/vue@2.6.12'></script>",
  "<script src='https://unpkg.com/quantum-tensors@0.4.10/dist/quantum-tensors.min.js'></script>",
  "<script src='https://unpkg.com/bra-ket-vue@0.3.1/dist/bra-ket-vue.min.js'></script>"
)
```

Author: **Deep Lokhande**



---


## Example 0 Test Examples.

- This section is included just to test if everthing loads properly.
- Proceed to next section for actual submission.


#### Test adding user defined vector.
<div id='qtest'></div>


#### Test adding gates/operators.
<div id='op-h'></div>

---

## Example 1

- In this example we will look at the simple case of effect of pauli gates ($H$ and $X$) on initial state.

<div id='ex1'></div>

---

## Example 2

- In this example we will look at matrix multiplication and tensor products of operators.


### Input Matrix

- This is a user defined operator using `Operator.fromArray()` function.

- For simplicity I have considered Hadamard Matrix, but an other matrix will work.
<div id='uin'></div>

### Example of matrix multiplication $H \cdot H = I$

- Here, we look at matrix multiplication between 2 Hadamard matrices. 
- As we know that Hadamard matrix is unitary matrix, multiplying this matrix with itself will result in Identity matrix.

<div id='ex2mul'></div>

### Example of tensor multiplication $H \otimes I$

- Here, we look at tensor product of one Hadamard and Identity matrix.
- We will observe the dimensionality increase in the output matrix, where tensor product between two $2 \times 2$ matrices, result in a $4 \times 4$ matrix.

<div id='ex2ten'></div>

---

## Quantum Teleportation

- In this section, we will look at and example of Quantum Teleportation.

- The initial state can be chosen by user as $|\psi\rangle = \alpha |0\rangle + \beta |1\rangle$.

- For simplicity here I chose $|\psi\rangle = |1\rangle$

- The steps in the teleportation are explained briefly in the value column of Ketlistviewer.


<div id='qtp'></div>


---

Hope the reviewer of this site will approve my work.

Looking forward for working with you.

Let me know if you need anything else regarding this project.



- Contact Details: 
  - Phone: +1-(848)-252-0653
  - Email: [deep.lokhande@rutgers.edu](mailto:deep.lokhande@rutgers.edu)
  - Webpage: [deeplokhande.github.io](https://deeplokhande.github.io)
  

# THANK YOU


```{js,results='asis', echo=FALSE, message=FALSE}
const { Circuit,Gates, Vector,  Dimension,  Cx,  Operator } = QuantumTensors;
const { MatrixViewer, KetListViewer, KetViewer } = BraKetVue;
const rt2 = 1 / Math.sqrt(2);

  
function showKet(elName, vector) {
  new Vue({
    el: elName,
    template: "<ket-viewer :vector='vector' :dark-mode='false'/>",
    components: {
      KetViewer,
    },
    data() {
  	  return { vector }
    }
  })
}

function showMatrix(elName, operator) {
  return new Vue({
    el: elName,
    template: "<matrix-viewer :operator-raw='operator' :dark-mode='false'/>",
    components: {
      MatrixViewer,
    },
    data() {
  	  return { operator }
    }
  })
}

function showKetList(elName, list) {
  return new Vue({
    el: elName,
    template: "<ket-list-viewer :steps='list' :dark-mode='false'/>",
    components: {
      KetListViewer,
    },
    data() {
      return { list }
    }
  })
}


// Example 0 Code

const qtest = Vector.fromArray(
  [Cx(1), Cx(0), Cx(2, 1), Cx(0, -1)],
  [Dimension.qubit(), Dimension.qubit()]
).normalize();

showKet('#qtest',qtest);

showMatrix('#op-h',Gates.H());

// Example 1 Code

const qex1 = Vector.fromArray([Cx(1), Cx(0)], [Dimension.qubit()]).normalize();

let ex1=[
  {
    value: "Initial State",
    vector: qex1,
  },
  {
    value: "After applying H gate on initial state",
    vector: Gates.H().mulVec(qex1),
  },
  {
    value: "After applying X gate on initial state",
    vector: Gates.X().mulVec(qex1),
  },
];


showKetList('#ex1',ex1);


// Example 2 Code


const uin = Operator.fromArray(
  [
    [Cx(rt2), Cx(rt2)],
    [Cx(rt2), Cx(-rt2)],
  ],
  [Dimension.qubit()]
);


let ex2mul = uin.mulOp(uin);
let ex2ten = uin.outer(Gates.I());


showMatrix('#uin',uin);

showMatrix('#ex2mul',ex2mul);

showMatrix('#ex2ten', ex2ten);


// Example 3 Code (TODO)



// Quantum Teleportation


const circh = [];
let circ = Circuit.qubits(1)
  // .applyGate(uin,0)
  .X(0)
  .saveTo(circh)
  .addQubit()
  .addQubit()
  .H(1)
  .CNOT(1, 2)
  .saveTo(circh)
  .CNOT(0, 1)
  .H(0)
  .saveTo(circh)
  .CNOT(1,2)
  .saveTo(circh)
  .SWAP(0,2)
  .saveTo(circh);

// Following conditional statements could be used, but I choose different method to find the final answer.
// if (circh[2].measureQubit(1)[1]["probability"] === 1) {
//   circ.X(2);
//   circ.saveTo(circh);
// }
// if (circh[2].measureQubit(0)[1]["probability"] === 1) {
//   circ.Z(2);
//   circ.saveTo(circh);
// }

let a = circh[4].measureQubit(0)[0]['probability'];
let b = circh[4].measureQubit(0)[1]['probability'];
let outState = Vector.fromArray(
      [Cx(a),Cx(b)],
      [Dimension.qubit()],
      removeZeros = 'false',
    ).normalize(); 

let qtp = [
  { 
    value: "Initial state to be teleported on 0th qubit", 
    vector: circh[0].vector 
  },
  {
    value: "Adding 2 more qubits and creating Bell Pair on 1st and 2nd qubit",
    vector: circh[1].vector,
  },
  {
    value: "Alice does operations on 0th and 1st qubit",
    vector: circh[2].vector,
  },
  {
    value: "Bob does corrective operations",
    vector: circh[3].vector,
  },
  {
    value: "Bob does corrective operations",
    vector: circh[4].vector,
  },
  {
    value: "The teleported state is",
    vector: outState,
  },
];

showKetList('#qtp',qtp);
```

```{css, echo=FALSE}
.matrix-viewer {
  margin: auto;
}
a {
  color: #42b983;
}
```