.. _Circuit Builder: Using Circuit Builder ================================ This section covers how to use the Circuit Builder to build and run Quantum Circuits in QuICScript. .. figure:: images/circuit_builder_v2.png :figwidth: 100% :alt: Circuit Builder QuICScript Circuit Builder (Default Configration) Above is what the circuit builder looks like in its entirety. The circuit builder has different options for creating, modifying and exporting a circuit to your desired needs. The circuit builder can be run using the ``Run`` button, and produce results that can be analysed. The next few sections will cover how to create, modify and export a circuit. Then, the results will be covered in the following section. Create Circuit --------------- The Circuit Builder is feature rich with 5 different ways to create a quantum circuit: 1. Select a preset circuit 2. Drag and drop gates to form a circuit 3. Input a circuit using QuICScript in the input field (if enabled) 4. Import a QuICScript circuit file 5. Input a circuit using query param Select a preset circuit ^^^^^^^^^^^^^^^^^^^^^^^^ There is a dropdown box on the top left of the app, that contains a series of predefined circuits. By default the selected option will be *custom* as shown below: .. figure:: images/select_circuit_box.png :figwidth: 40% :alt: Select Circuit Dropdown Box To select a predefined circuit, click on the dropdown, then select a circuit. Below is example of what the dropdown looks like: .. figure:: images/select_circuit_open.png :figwidth: 40% :alt: Select Circuit Dropdown Open Then, the circuit will be rendered. You may then drag and drop gates to edit the circuit as you wish, or simply click run at the bottom to run the circuit and produce the results. .. note:: To configure what predefined circuits can be shown in the dropdown, please refer to :ref:`Preset Circuits configuration`. Drag and drop gates to form a circuit ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ To use drag and drop on circuit gates, simple click and hold (or tap and hold on mobile) a preferred gate in the palette on the left of the circuit builder: .. figure:: images/gate_palette_v2.png :figwidth: 20% :alt: New Gate Palette Then drag the gate to a preferred slot on the builder board, then drop it. The board has light, dotted gray lines around each slot for ease of use: .. figure:: images/gate_slots.png :figwidth: 40% :alt: Gate Slots Once you have dragged your gates onto the board to form your desired circuit, simply click *Run* to run your quantum circuit and produce the results. There are 3 special gates that require additional input after the gates have been dropped on the board: - U gate - Rx, Ry and Rz gates - Measurement gate U gate input ~~~~~~~~~~~~~ By default, U gate will have 3 parameters tagged to it: theta, phi and lambda. These will all be zero unless changed: .. figure:: images/u_gate_default.png :figwidth: 40% :alt: U Gate default dropdown You will need to manually click on each input, add values to each parameter: .. figure:: images/u_gate_value.png :figwidth: 40% :alt: U Gate with values dropdown .. note:: Keep in mind that there are no units because the angle values are in radians, not degrees. R gates Input ~~~~~~~~~~~~~~ All 3 types of R gate have a single parameter tagged to it: alpha. Similar to U gate, this will be zero unless changed: .. figure:: images/rx_gate_default.png :figwidth: 40% :alt: Rx Gate default dropdown Similar to U gate, you will need to manually click each input to change the value of the parameter: .. figure:: images/rx_gate_value.png :figwidth: 40% :alt: Rx Gate with value dropdown .. note:: Similar to U gate, all R gates dropdowns do not have units because the angle values are in radians, not degrees. Measurement gate toggle ~~~~~~~~~~~~~~~~~~~~~~~~ The measurement gate also has a dropdown with one option: *Multi-shot*: .. figure:: images/measure_multishot_untoggled.png :figwidth: 40% :alt: Measurement Multi-shot Untoggled When toggled (which is a global option, meaning it affects all measurement gates simultaneously), the measurement gate will change character to *M*: .. figure:: images/measure_multishot_toggled.png :figwidth: 40% :alt: Measurement Multi-shot toggled Toggling multi-shot on will prevent state from collapsing after each measurement. Input a circuit using QuICScript in the input field ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ If enabled (see :ref:`Enable Input` for info), there will be circuit input field below the builder board: .. figure:: images/empty_circuit_input.png :figwidth: 90% :alt: Empty Circuit Input Simply fill up the input with your desired circuit and click *Run*: .. figure:: images/circuit_input.png :figwidth: 90% :alt: Circuit Input .. note:: The input is in sync with the builder board, which means any changes in the input will automatically update the board and vice-versa. Import a QuICScript circuit file ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ To import a QuICScript circuit, simply click *Upload Circuit* on the top left. .. figure:: images/upload_download_buttons.png :figwidth: 40% :alt: Upload & Download Buttons This will open a file dialog to select the file you would like to upload. .. figure:: images/file_dialog.png :figwidth: 60% :alt: File Upload dialog Simply select the file you wish to upload. This will import the file, check for errors and load the circuit on the board and in the text input. After which, just click *Run* to see your uploaded circuit results. Input a circuit using query param ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ You can provide a quantum circuit using QuICScript by adding it to the URL, using the following format: ``https://quicscript.pqcee.com?quicscript=[circuit]`` Replace ``[circuit]`` (including the square brackets) with your desired quantum circuit. An example is shown below: ``https://quicscript.pqcee.com?quicscript=HI,CN.`` Then proceed to the URL. This will load the Circuit Builder with your provided circuit, and you can click *Run* to get your circuit results. .. attention:: Do not use any other keyword other **quicscript** as a query param. It will render an empty circuit. (e.g. ``https://quicscript.pqcee.com?input=HI,CN.``) Modify Circuit --------------- The Circuit Builder has several ways to modify both the builder board, as well as the circuit: 1. Add Qubit 2. Delete gate 3. Remove Qubit 4. Add Column 5. Remove Column 6. Copy gates 7. Move gates Operations 1 to 3 (Add Qubit, Delete gate and Remove Qubit) are performed buttons and drag and drop slots in the builder board. Operations 4 to 7 (Add Column, Remove Column, Copy gates and Move gates) are in the Modifier palette, and are exclusively performed using drag and drop: .. figure:: images/modifier_palette.png :figwidth: 40% :alt: Modifier Palette Add Qubit ^^^^^^^^^^ To add a new qubit row to the builder board, simply click *Add Qubit* on the bottom left: .. figure:: images/add_qubit_button.png :figwidth: 40% :alt: Add Qubit Button This will add a new qubit row after the last qubit row. Delete gate ^^^^^^^^^^^^ To delete a gate, simple drag and drop the gate you would like to delete in the Dustbin gate at the bottom left of the builder board: .. figure:: images/dustbin_gate.png :figwidth: 40% :alt: Dustbin Gate .. _Remove Qubit: Remove Qubit ^^^^^^^^^^^^^ To remove a qubit row, scroll to the right and click the red ``x`` icon after the qubit row: .. figure:: images/delete_qubit_button.png :figwidth: 40% :alt: Delete Qubit Button .. note:: Removing a qubit row from the circuit will also remove all gates on the qubit row from the circuit. Add Column ^^^^^^^^^^^ To add a column, drag and drop the green ``Add column to the right`` modifier to the desired column: .. figure:: images/add_column_modifier.png :figwidth: 20% :alt: Add Column Modifier The column gap to the right of the column you hover over will be highlighted. When released, a new column will be added to the right of the dropped column. Delete Column ^^^^^^^^^^^^^^ To delete a column, drag and drop the red ``Delete column`` modifier to the desired column: .. figure:: images/delete_column_modifier.png :figwidth: 20% :alt: Delete Column Modifier .. note:: Similar to :ref:`Remove Qubit`, when you delete a column with gates, you will also remove the gates from the circuit. .. _Copy gates: Copy gates ^^^^^^^^^^^ To copy a group of gates, drag and drop the yellow ``Copy Selector`` modifier at the top left of the group of gates you want to copy: .. figure:: images/copy_gate_first_action.png :figwidth: 40% :alt: Copy gate first action Then scroll your mouse to the bottom right of where you want the copy to end: .. figure:: images/copy_gate_second_action.png :figwidth: 40% :alt: Copy gate second action .. note:: In mobile, this second action requires you drag and drop the yellow ``Copy Selector`` modifier again on the bottom right of where you want the copy to end instead. At this point, the copy selection will be highlighted yellow. Simply drag and drop the selection to your desired location to complete copy: .. figure:: images/copy_gate_drop_action.png :figwidth: 40% :alt: Copy gate drop action Move gates ^^^^^^^^^^^ The move modifier is very similar to the copy modifier. To move a group of gates, drag and drop the violet ``Move Selector`` modifier at the top left of the group of gates you want to move. Then, like copy, scroll to the bottom right (or drag and drop again to the bottom right for mobile) to select the end point for the move selection. Similar to copy, the move selection will be highlighted, but it will be light violet. Finally, drag and drop the selection to move the selected gates to a new location. .. note:: If you would like a visual representation of what this would look like, please refer to :ref:`Copy gates`. Export Circuit --------------- To export your circuit, simple click ``Download Circuit`` on the top left of the circuit builder. This will open a dialog prompting you to enter the filename of the text file: .. figure:: images/download_circuit_dialog.png :figwidth: 40% :alt: Download Circuit Dialog Enter a filename and click ``OK``. Then the circuit file will be downloaded into browser downloads folder. This file can then be used for safekeeping and for future use, by uploading this circuit file back into the circuit builder. Circuit Results ---------------- When a circuit is built and you click ``Run`` at the bottom, a bar chart, equation and probability list is generated: .. figure:: images/quicscript_results.png :figwidth: 60% :alt: QuICScript Results The probability list below the ``Run`` button shows a list of state probabilities. It can be copied by clicking the *clipboard* icon to the right of the list. The bar chart shows the probability in bar chart form. The bar chart will only be rendered when the circuit is 4 qubits or less. The equation provides a complex number representation of the state. It can also be copied by clicking on *Copy LaTeX*. If Qibo is enabled (see :ref:`Enable Qibo` for more information), then you can click ``Qibo`` button to generated Qibo code to the right: .. figure:: images/quicscript_results_with_qibo.png :align: center :figwidth: 80% :alt: QuICScript Result with Qibo This can also be copied using the *clipboard* icon. Reset Circuit -------------- If you want to reset the circuit builder, simply click ``Reset``. This will clear the circuit and all results. .. note:: The silder results will not be cleared or change, until a new circuit is run.