Circuit Builder Structure and Configuration
============================================
This section covers the folder structure of QuICScript Circuit Builder, as well as the
configuration instructions for modifying the different features in the Circuit Builder.
Circuit Builder File and Folder Structure
------------------------------------------
The QuICScript Circuit Builder is built using React. And as such, there are 3 categories of
files:
- React bundled files (index.html, index.css and index.js)
- QuICScript engine files (QuICScript.js and QuICScript.wasm)
- App configuration file (appConfig.json)
The core folders and files are as follows:
::
├──index.html
└──assets/
├──index.js
├──index.css
├──QuICScript.js
└──QuICScript.wasm
└──public/
└──appConfig.json
#. ``index.html`` - Base HTML page.
#. ``index.js`` - Logic for Circuit Builder
#. ``index.css`` - Styling for Circuit Builder
#. ``QuICScript.js`` - QuICScript Engine WASM library
#. ``QuICScript.wasm`` - QuICScript Engine WebAssembly file
#. ``appConfig.json`` - Configuration file for application. For customization, see following section for more information.
.. warning::
**Do not** modify the ``js`` and ``css`` files directly as it may break the application. They are bundled assets through the build process.
.. _change-default-configuration:
Circuit Builder Configuration
------------------------------
QuICScript Circuit Builder comes with fully customizable features suited for your needs. From changing styling to setting default configurations,
the builder is designed to be flexible in enabling personalized experience.
#. :ref:`Gate Palette configuration`
#. :ref:`Preset Circuits configuration`
#. :ref:`Default Circuit configuration`
#. :ref:`Display configuration`
#. :ref:`Enable Qibo`
#. :ref:`Enable Input`
#. :ref:`Use Custom Gate Symbols`
#. :ref:`Change Gate Background Colour`
#. :ref:`Modify Result Delimiter`
.. _Gate Palette configuration:
Gate Palette configuration
^^^^^^^^^^^^^^^^^^^^^^^^^^^
Gate Palette configuration allows you to change what Gates are enabled in the Circuit Builder.
.. figure:: images/full_gate_palette.png
:figwidth: 19%
:align: Right
:alt: Gate Palette
Gate Palette
Update in ``appConfig.json`` under ``availableGates`` field. The full config of all supported gates
is shown below:
.. code-block:: json
"availableGates": {
"basic": ["H", "X", "Y", "Z"],
"controlled": ["C", "N"],
"phase": ["P", "T", "s"],
"measurement": ["m"],
"utility": ["I", "d"],
"rotation": ["x", "y", "z", "U"]
}
.. note::
Check out :ref:`using_QuICScript` for further information on available gates.
.. _Preset Circuits configuration:
Preset Circuits configuration
^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
Preset Circuits configuration allows you to predefine a list of circuits that you would like your
users to have access to and is configured in ``appConfig.json`` in the ``presetCircuits`` field.
An example is shown below:
.. code-block:: json
"presetCircuits": [
{ "id": "custom", "name": "Custom", "circuit": "" },
{
"id": "quantumfourier",
"name": "Quantum Fourier Transform",
"circuit": "IIH,ICP,CIT,IHI,CPI,HII."
},
{
"id": "quantumtele",
"name": "Quantum Teleportation",
"circuit": "IHI,ICN,CNI,HII,mmI,ICN,CIZ."
},
{
"id": "grover3",
"name": "Grover 3 Qubit",
"circuit": "HHH,IIX,IIH,CCN,XXI,IIH,IIX,IIH,CCN,XII,HII,XXI,IHI,IXX,IIH,CCN,XII,HXI,IHH,IIX,IIH."
}
]
.. _Default Circuit configuration:
Default Circuit configuration
^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
Default Circuit configuration allows you to set the number of qubit rows, columns and the initial circuit you
want users to see.
Update in ``appConfig.json`` under ``defaultCircuit`` field. An example is shown below:
.. code-block:: json
"defaultCircuit": {
"qubits": 9,
"columns": 20,
"initialCircuit": null
}
.. _Display configuration:
Display configuration
^^^^^^^^^^^^^^^^^^^^^^
Display configuration allows for modifications to the User Interface.
Update in ``appConfig.json`` under ``display`` field.
.. code-block:: json
"display": {
"showQiboTranslation": true,
"showCircuitInput": true,
"useCustomGates": true,
"gateBackgroundColor": "#98cfec",
"resultDelimiter": "decimal"
}
Each of these config options will be explained in greater detail below.
.. _Enable Qibo:
Enable Qibo
~~~~~~~~~~~~
To enable Qibo, set ``showQiboTranslation`` field to true.
This allows for enabling Qibo code generation and Qibo JSON file output.
.. figure:: images/qibo_code.png
:figwidth: 60%
:align: center
:alt: Qibo Code
Qibo Code
.. _Enable Input:
Enable Input
~~~~~~~~~~~~~
To enable input, set ``showCircuitInput`` field to true.
This will render a circuit string input field below the circuit builder, which will allow
users to type in QuICScript as an alternative.
.. figure:: images/circuit_input.png
:figwidth: 90%
:align: center
:alt: Circuit Input
Circuit Input
.. figure:: images/custom_gate_palette.png
:figwidth: 19%
:align: Right
:alt: Custom Gate Palette
.. _Use Custom Gate Symbols:
Use Custom Gate Symbols
~~~~~~~~~~~~~~~~~~~~~~~~
To use custom gate symbols, set ``useCustomGates`` to true.
The gates affected by this include:
- Controlled (C)
- Not (N)
- Swap (s)
- Measurement (m).
.. _Change Gate Background Colour:
Change Gate Background Colour
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
Add a hex code to change the gate background color to what you would like.
.. figure:: images/gate_style.png
:figwidth: 19%
:align: center
:alt: Gate Style
Gate Style
.. _Modify Result Delimiter:
Modify Result Delimiter
~~~~~~~~~~~~~~~~~~~~~~~~
Modifying the result delimiter will change the default result that is returned when the circuit is run.
There are three options: "decimal", "binary" and "invbinary"
``decimal`` will return the circuit result with qubits in decimal format.
.. figure:: images/decimal_result.png
:figwidth: 19%
:align: center
:alt: Decimal Circuit Result
``binary`` will return the circuit result in little endian format.
.. figure:: images/binary_result.png
:figwidth: 19%
:align: center
:alt: Binary Circuit Result
``invbinary`` will return the circuit result in big endian format.
.. figure:: images/invbinary_result.png
:figwidth: 19%
:align: center
:alt: Inverse Binary Circuit Result
Circuit Builder Setup (iFrame)
--------------------------------------------
Follow these steps:
#. Basic Embedding
* To embed the link ``https://quicscript.pqcee.com`` in an HTML file using an iframe:
.. code-block:: html
.. note::
This code embeds the page, allows full-screen, and adjusts the width and height.*
#. Adjusting ``