add export to qasm (UI + some code)

adgt · Nov 19, 2020 · b730f01 · b730f01
1 parent 1f54b8e
commit b730f01
Show file tree

Hide file tree

Showing 3 changed files with 71 additions and 3 deletions.
diff --git a/html/export.partial.html b/html/export.partial.html
@@ -20,14 +20,23 @@
             <pre tabindex="104" id="export-circuit-json-pre" style="overflow:auto; max-width:600px; max-height:60px; border: 1px solid black; padding:5px; margin:2px;"></pre>
         </div>
 
+        <br>
+        <strong>OpenQASM</strong>
+        <div style="margin: 10px 0 0 20px;">
+            <button tabindex="105" id="export-qasm-copy-button">Copy to Clipboard</button>&nbsp;&nbsp;<span id="export-qasm-copy-result"></span>
+            <br>
+            <pre tabindex="106" id="export-qasm-pre" style="overflow:auto; max-width:600px; max-height:200px; border: 1px solid black; padding:5px; margin:2px;"></pre>
+        </div>
+
+
         <br>
         <strong>Simulation Data JSON</strong> - Output amplitudes, detector results, display data, etc.
         <div style="margin: 10px 0 0 20px;">
-            <button tabindex="105" id="export-amplitudes-button">Generate and Copy to Clipboard</button>&nbsp;<span id="export-amplitudes-result"></span>
-            <input type="checkbox" tabindex="106" id="export-amplitudes-use-amps" style="float: right; margin-right: 10px;">
+            <button tabindex="107" id="export-amplitudes-button">Generate and Copy to Clipboard</button>&nbsp;<span id="export-amplitudes-result"></span>
+            <input type="checkbox" tabindex="108" id="export-amplitudes-use-amps" style="float: right; margin-right: 10px;">
             <label style="float: right" for="export-amplitudes-use-amps">Skip output amplitudes</label>
             <br>
-            <pre tabindex="107" id="export-amplitudes-pre" style="overflow:auto; max-width:600px; max-height:60px; border: 1px solid black; padding:5px; margin:2px;"></pre>
+            <pre tabindex="109" id="export-amplitudes-pre" style="overflow:auto; max-width:600px; max-height:60px; border: 1px solid black; padding:5px; margin:2px;"></pre>
         </div>
     </div>
 </div>
diff --git a/package.json b/package.json
@@ -25,6 +25,7 @@
   },
   "scripts": {
     "build": "grunt build-src",
+    "build-debug": "grunt build-debug && cp ./out/quirk.html /mnt/x -f",
     "test": "grunt test",
     "test-chrome": "grunt test-chrome",
     "test-firefox": "grunt test-firefox",

diff --git a/src/ui/exports.js b/src/ui/exports.js
@@ -77,6 +77,44 @@ function initExports(revision, mostRecentStats, obsIsAnyOverlayShowing) {
             }, 1000);
         });
 
+    const convertJsonToQasm = (jsonText) => {
+        const map = {
+            X: "x",
+            Y: "y",
+            Z: "z",
+            H: "h"
+        }
+        let qasmString = 'OPENQASM 2.0;\ninclude "qelib1.inc"\n';
+        //noinspection UnusedCatchParameterJS
+        var json = ""
+        try {
+            json = JSON.parse(jsonText)
+        }
+        catch(_) {
+            return "Invalid Circuit JSON."
+        }
+        const cols = json["cols"];
+        const numQubits = Math.max(...(cols.map((arr) => arr.length)));
+        const numCbits = cols.filter(arr => arr.includes("Measure"));
+        // HANDLE CASE WHEN No MEASUREMENTS
+        console.log(numCbits);
+        qasmString += `qreg q[${numQubits}];\n`
+        if (numCbits > 0) qasmString +=`creg c[${numCbits.length}];\n`;
+
+        cols.forEach((col) => {
+            console.log(col)
+            col.forEach((gate, idx) => {
+                if (gate == '1') return;
+                console.log(gate);
+                var thisQasm = map[gate] + ` q[${idx}];\n`
+                qasmString += thisQasm;
+            });
+        });
+
+        return qasmString;
+
+    }
+
     // Export escaped link.
     (() => {
         const linkElement = /** @type {HTMLAnchorElement} */ document.getElementById('export-escaped-anchor');
@@ -98,6 +136,7 @@ function initExports(revision, mostRecentStats, obsIsAnyOverlayShowing) {
         setupButtonElementCopyToClipboard(copyButton, jsonTextElement, copyResultElement);
         revision.latestActiveCommit().subscribe(jsonText => {
             //noinspection UnusedCatchParameterJS
+            debugger;
             try {
                 let val = JSON.parse(jsonText);
                 jsonTextElement.innerText = JSON.stringify(val, null, '  ');
@@ -107,6 +146,25 @@ function initExports(revision, mostRecentStats, obsIsAnyOverlayShowing) {
         });
     })();
 
+    // Export QASM
+    (() => {
+        const qasmTextElement = /** @type {HTMLPreElement} */ document.getElementById('export-qasm-pre');
+        const copyButton = /** @type {HTMLButtonElement} */ document.getElementById('export-qasm-copy-button');
+        const copyResultElement = /** @type {HTMLElement} */ document.getElementById('export-qasm-copy-result');
+        setupButtonElementCopyToClipboard(copyButton, qasmTextElement, copyResultElement);
+        revision.latestActiveCommit().subscribe(jsonText => {
+            //noinspection UnusedCatchParameterJS
+            //debugger;
+            try {
+                let val = convertJsonToQasm(jsonText);
+                qasmTextElement.innerText = val;
+            } catch (_) {
+                console.error("ERROR")
+                qasmTextElement.innerText = jsonText;
+            }
+        });
+    })();
+
     // Export final output.
     (() => {
         const outputTextElement = /** @type {HTMLPreElement} */ document.getElementById('export-amplitudes-pre');