Simulate graph states in the browser
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

doc.md 3.3KB

7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596
  1. # Graph state server
  2. [Graph states](https://en.wikipedia.org/wiki/Graph_state) are a way of efficiently representing the state of a system of qubits. This tool simulates the behaviour of the graph state and shows an interactive 3D representation of the state. Interaction with the simulation is done either by clicking on things in the web browser or through an API.
  3. ## Using the interface
  4. The state is initialized as a blank canvas without any qubits.
  5. - Click on the grid to make a new qubit
  6. - Hold <kbd>Ctrl</kbd> and click on a qubit to act a Hadamard gate
  7. - Click on a qubit to view its properties
  8. - Select a qubit, then <kbd>Shift</kbd>-click another node to act a CZ gate
  9. - Press <kbd>Space</kbd> to rotate the grid
  10. - Use the up and down arrow keys to move the grid normal to its plane
  11. - Press <kbd>C</kbd> to toggle curved edges
  12. Arbitrary 3D structures can be constructed by rotating the grid.
  13. The URL contains a unique ID such as `oranges-arkansas-mexico-fish`. You can share this URL with other people to share your screen and edit collaboratively.
  14. ## Python package
  15. The underlying graph state simulator is based on Anders' and Briegel's method. Full docs for the Python package are [here](https://peteshadbolt.co.uk/static/abp/). You can install it like this:
  16. :::bash
  17. $ pip install abp
  18. ## API
  19. Here's a complete example of sending a state from Python to the server:
  20. :::python
  21. import abp
  22. # Make a new graph and automatically position the nodes
  23. g = abp.NXGraphState(range(10))
  24. g.layout()
  25. # Post to the server
  26. g.push()
  27. ### Endpoints
  28. - `/<uuid>`: Displays the state using Three.js
  29. - `/<uuid>/graph`:
  30. - `GET` returns JSON representing the state
  31. - `POST` accepts JSON in the same format and overwrites the state in memory
  32. - `/<uuid>/edit`:
  33. - `POST` accepts edit commands such as `cz`, `add_node` etc.
  34. - `doc/`: Shows this page
  35. ### Data format
  36. An HTTP GET to `/<uuid>/graph` will return some JSON.
  37. $ curl https://abv.peteshadbolt.co.uk/<uuid>/graph
  38. {
  39. "adj": {
  40. "(0, 0, 1)": {
  41. "(0, 1, 1)": {},
  42. "(1, 0, 1)": {}
  43. },
  44. "(0, 0, 3)": {
  45. "(0, 1, 3)": {},
  46. "(1, 0, 3)": {}
  47. },
  48. "(0, 0, 5)": {
  49. "(0, 1, 5)": {},
  50. "(1, 0, 5)": {}
  51. },
  52. "(0, 1, 0)": {
  53. "(0, 1, 1)": {},
  54. "(1, 1, 0)": {}
  55. },
  56. "(0, 1, 1)": {
  57. "(0, 0, 1)": {},
  58. ...
  59. The top-level keys are `node` and `adj`. These model the node metadata and adjacency matrix respectively.
  60. Each `node` has
  61. - a `position` (`{x:<> y:<> z:<>}`)
  62. - a `vop` (integer, ignore for now)
  63. - and could also have a `color`, `label`, etc.
  64. `adj` uses the same data structure as `networkx` to efficiently represent sparse adjacency matrices. For each key `i` in `adj`, the value of `adj[i]` is itself a map whose keys `j` correspond to the ids of nodes connected to `i`. The value of `adj[i][j]` is a map which is usually empty but which could be used to store metadata about the edge.
  65. Here's an example of a graph `(A-B C)`:
  66. :::python
  67. {'adj': {0: {1: {}}, 1: {0: {}}, 2: {}},
  68. 'node': {
  69. 0: {'position': {'x': 0, 'y': 0, 'z': 0}, 'vop': 0},
  70. 1: {'position': {'x': 1, 'y': 0, 'z': 0}, 'vop': 0},
  71. 2: {'position': {'x': 2, 'y': 0, 'z': 0}, 'vop': 10}}}