4. Using Circuit Builder¶

4.1. Folder structure¶

The QuICScript Circuit Builder is built using HTML, Javascript, and CSS.

The core files are as follows:

├──index.html - Modify this file to change the default configuration
└──assets/
   ├──index.js
   ├──index.css
   ├──QuICScript.js
   └──QuICScript.wasm

index.html - Web server to point to index.html. For customization, see following sections for more information.
index.js - Logic for Circuit Builder
index.css - Styling for Circuit Builder
QuICScript.js - QuICScript Engine WASM library
QuICScript.wasm - QuICScript Engine WebAssembly file

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 enabling personalized experience.

Theme configuration
- Modify Gate Style
- Modify Gate Palette
Feature configuration
1. URL Params
2. defaultConfig

4.2.1. Theme configuration¶

Theme configuration allows you to change the look and feel of the Circuit Builder.

4.2.1.1. Modify Gate Style¶

Update in index.html under <style> tag.

<style>
   div.gate {
      /* Change Gate background color here: Default (#f3f4f6) */
      background-color: #98CFEC;
   }
</style>

Note

Any CSS styling works, including removing border border: none;

4.2.1.2. Modify Gate Palette¶

Update in index.html under <script> tag.

<script>
   /** Update Gates present in the palette: Default ["H", "X", "Y", "Z", "C", "N", "P", "T", "I", "s", "U", "d", "m"]  */
   /** Do check the documentation for allowed gates */
   const gates = ["H", "X", "Y", "Z", "C", "P", "T", "I", "s", "U", "m"];
</script>

Note

Check out Using QuICScript for available gates.

4.2.2. Feature configuration¶

The Circuit Builder comes with a set of features that can be customized to suit your needs.

Feature configuration enable you to set default parameters for the builder.

Check Parameters for feature list.

There are 2 methods to customize the circuit builder.

URL Params
defaultConfig

Note

The circuit builder piorities URL Params over defaultConfig, if URL Params is set, defaultConfig will be disregarded.

4.2.2.1. URL Params¶

URL Params follows Query String.

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

4.2.2.1.1. Usage¶

Single Parameter <url>?<param>=<data>

Multiple Parameter (Separated with &) <url>?<param>=<data>&<param>=<data>

Warning

Make sure <param> follow exactly to Available Params. Any invalid param/data will not reflect in the builder.

4.2.2.1.2. Parameters¶

quicscript - QuICScript String
qubits - Number of qubits
columns - Number of columns
qibo - Enable/Disable of Qibo Feature
type - Type of output
input - Enable/Disable of Input Feature

Parameters¶
Query string parameter	Type	Description	Constraint	Default	Example
`quicscript`	string	QuICScript String (qubits are calculated)	0 \(<\) qubits \(\leq\) 20	—	Link
`qubits`	integer	Number of qubits	0 \(<\) qubits \(\leq\) 20	`9`	Link
`columns`	integer	Gate depth	—	`20`	Link
`qibo`	boolean	Toggle Qibo Feature	`true` \| `false`	`false`	Link
`type`	string	Type of output	`decimal` \| `binary` \| `invbinary`	`binary`	Link
`input`	boolean	Enable QuICScript input	`true` \| `false`	`true`	Link

Examples use cases¶
quicscript	qubits	columns	Remarks	Example
not-in-use	not-in-use	not-in-use	Default configuration	Link
use	not-in-use	not-in-use	Set Bell State	Link
use	use	use	3-qubit QFT circuit with 6 columns	Link
not-in-use	use	use	Empty 5-qubit circuit with gate depth of 10	Link

Note

In this example we are using https://pqcee.github.io/quicscript-dev-react/ as the base URL, do replace it with where you are hosting the website application

4.2.2.2. defaultConfig¶

Similar to URL Params, defaultConfig has all the parameters as configurable as URL Params. defaultConfig enables config to be set in the index.html for standardized usage when served.

Confguration is done via editing index.html, uncommenting the comments to set default config:

/* Allow config of the QuICScript Builder
*  Remove the comment to enable the config
*/
const defaultConfig = {
   // defaultQubits: 9, // Default: null
   // defaultColumns: 20, // Default: null
   // defaultQuic: "HI,CN", // Default: null
   // qibo: true, // Default: false
   // defaultResultDelimiter: "binary", // Default: binary (decimal, invbinary, binary)
   // displayInput: false, // Default: true
};

4.3. Circuit Builder Setup (iFrame)¶

Follow these steps:

Basic Embedding

To embed the link https://pqcee.github.io/quicscript-dev-react/ in an HTML file using an iframe:

<iframe src="https://pqcee.github.io/quicscript-dev-react/?qibo=true&input=false"
        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.
Optional Parameters:
- See Feature configuration for more information on the URL parameters you can modify to create custom configurations.

4.4. Preloading Circuits¶

The Circuit Builder comes with a callback_render fuction which enables developers to interact with the visualizer via index.html.

This can be triggered after ReactOnLoad. Uncommenting the following code in index.html will set the circuit to render H,CN onload.

ReactOnLoad = () => {
   // Example Preload Circuit with H,CN
   // Uncomment the line below to preload a circuit
   // callback_render("H,CN");
};