4. Using Circuit Builder¶

4.1. Folder structure¶

The QuICScript Circuit Builder is built using React.

The core files are as follows:

├──index.html
└──assets/
   ├──index.js
   ├──index.css
   ├──QuICScript.js
   └──QuICScript.wasm
└──public/
   └──appConfig.json

index.html - Web server to point to index.html.
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.

4.2. 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.

Gate Palette configuration
Preset Circuits configuration
Default Circuit configuration
Display configuration

4.2.1. Gate Palette configuration¶

Gate Palette configuration allows you to change what Gates are enabled in the Circuit Builder.

Update in appConfig.json under availableGates field. The full config of all supported gates is shown below:

"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 Using QuICScript for further information on available gates.

4.2.2. 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:

"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."
   }
]

4.2.3. 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:

"defaultCircuit": {
   "qubits": 9,
   "columns": 20,
   "initialCircuit": null
}

4.2.4. Display configuration¶

Display configuration allows for modifications to the User Interface.

Update in appConfig.json under display field.

"display": {
   "showQiboTranslation": true,
   "showCircuitInput": true,
   "useCustomGates": true,
   "gateBackgroundColor": "#98cfec",
   "resultDelimiter": "decimal"
}

Each of these config options will be explained in greater detail below.

4.2.5. Enable Qibo¶

To enable Qibo, set showQiboTranslation field to true.

This allows for enabling Qibo code generation and Qibo JSON file output.

4.2.6. 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.

4.2.7. 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).

4.2.8. Change Gate Background Colour¶

Add a hex code to change the gate background color to what you would like.

4.2.9. Modify Result Delimiter¶

Modifying the result delimiter will change the 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.

binary will return the circuit result in little endian format.

invbinary will return the circuit result in big endian format.

4.2.9.1. URL Params¶

URL Params follows Query String.

Using URL Params allows user to insert default parameters into the system for configurations.

4.3. Circuit Builder Setup (iFrame)¶

Follow these steps:

Basic Embedding
- To embed the link https://quicscript.pqcee.com in an HTML file using an iframe:
```
<iframe src="https://quicscript.pqcee.com"
        title="iFrame example"
        width="50%"
        height="600"
        allow="fullscreen">
</iframe>
```
Note

This code embeds the page, allows full-screen, enables qibo, disables input field, and adjusts the width and height.*
Adjusting <iframe ...> Parameters:
- Width: The width of the frame in CSS pixels. Default is 300.
- Height: The height of the frame in CSS pixels. Default is 150.
Allow fullscreen:
- To enable fullscreen mode for the iframe, add the allow="fullscreen" attribute.