Differences

This shows you the differences between two versions of the page.

Link to this comparison view

Both sides previous revisionPrevious revision
Next revision		Previous revision
projects:quantum:distributed [2024/12/05 14:39] – [Code Examples] kymkiprojects:quantum:distributed [2024/12/06 16:05] (current) – kymki
Line 1: Line 1:
 +<html>
 +<head>
 +  <meta charset="UTF-8">
 +  <meta name="viewport" content="width=device-width, initial-scale=1.0">
 +  <title>Ramble Meter</title>
 +  <style>
 +    /* Container for the entire Ramble Meter */
 +    .ramble-meter-container {
 +      display: flex;
 +      align-items: center;
 +      justify-content: center;
 +      margin: 20px 0;
 +    }
 +
 +    /* Ramble Meter */
 +    .ramble-meter {
 +      position: relative;
 +      width: 200px; /* Scaled down */
 +      height: 40px; /* Scaled down */
 +      background: linear-gradient(to right, green, yellow, orange, red);
 +      border-radius: 20px;
 +      overflow: hidden;
 +      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
 +    }
 +
 +    /* Needle */
 +    .needle {
 +      position: absolute;
 +      top: 5px; /* Adjust for centering */
 +      left: 50%; /* Default position */
 +      width: 4px; /* Visible width */
 +      height: 30px;
 +      background: black;
 +      border-radius: 2px;
 +      z-index: 2;
 +      box-shadow: 0 0 10px rgba(0, 0, 0, 0.5); /* Glow effect */
 +    }
 +
 +    /* Label in the middle of the meter */
 +    .meter-label {
 +      position: absolute;
 +      top: 50%;
 +      left: 50%;
 +      transform: translate(-50%, -50%);
 +      font-family: Arial, sans-serif;
 +      font-size: 12px; /* Adjusted for smaller size */
 +      font-weight: bold;
 +      color: #fff;
 +      text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
 +      z-index: 3;
 +    }
 +
 +    /* Tooltip styling */
 +    .tooltip {
 +      visibility: hidden;
 +      width: 250px;
 +      background-color: #222;
 +      color: #fff;
 +      text-align: center;
 +      padding: 10px;
 +      border-radius: 5px;
 +      position: absolute;
 +      top: 50%; /* Vertically aligned */
 +      left: 110%; /* Position to the right of the meter */
 +      transform: translateY(-50%);
 +      font-size: 12px;
 +      z-index: 10;
 +      box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
 +    }
 +
 +    /* Show tooltip on hover */
 +    .ramble-meter:hover + .tooltip {
 +      visibility: visible;
 +    }
 +
 +    /* Wrapper for positioning the tooltip and meter */
 +    .ramble-wrapper {
 +      position: relative;
 +      display: flex;
 +      align-items: center;
 +    }
 +  </style>
 +  <script>
 +    document.addEventListener("DOMContentLoaded", () => {
 +      const needle = document.querySelector(".needle");
 +      const rambleMeter = document.querySelector(".ramble-meter");
 +      const level = rambleMeter.getAttribute("data-level"); // Read the level from the attribute (0-100)
 +      needle.style.left = `${Math.min(Math.max(level, 0), 100)}%`; // Clamp between 0 and 100
 +    });
 +  </script>
 +</head>
 +<body>
 +  <!-- Ramble Meter -->
 +  <div class="ramble-meter-container">
 +    <div class="ramble-wrapper">
 +      <div class="ramble-meter" data-level="10"> <!-- Adjust level here (0-100) -->
 +        <div class="meter-label">Ramble Meter</div>
 +        <div class="needle"></div>
 +      </div>
 +      <div class="tooltip">This post is very close to being completely finished. Not that rambly at all.</div>
 +    </div>
 +  </div>
 +</body>
 +</html>
 +
 {{ :wiki:distributed_quantum_computing:qcqc.png?1300x400 |}} {{ :wiki:distributed_quantum_computing:qcqc.png?1300x400 |}}
  
Line 47: Line 152:
     Create and append noise_spec (function: apply_noise_model, dependencies: noise_dependencies, noise_model: noise_model, ansatz_type: ansatz_type)     Create and append noise_spec (function: apply_noise_model, dependencies: noise_dependencies, noise_model: noise_model, ansatz_type: ansatz_type)
  
-Workflow of dependencies for each wavefunction ansatz:+Which yields a workflow of dependencies for each wavefunction ansatz: 
     "assemble_hamiltonian" -> "prepare_ansatz" -> "run_vqe_simulation" -> "apply_noise_model"     "assemble_hamiltonian" -> "prepare_ansatz" -> "run_vqe_simulation" -> "apply_noise_model"
  
Line 246: Line 352:
 As mentioned earlier, we use ColonyOS features to create and schedule workflows of processes. This can be done in one go through using the Python interface ** pycolonies **: As mentioned earlier, we use ColonyOS features to create and schedule workflows of processes. This can be done in one go through using the Python interface ** pycolonies **:
  
-<code python> +<html> 
 +<head> 
 +  <link href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/styles/monokai-sublime.min.css" rel="stylesheet"> 
 +  <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/highlight.min.js"></script> 
 +  <script>hljs.highlightAll();</script> 
 +</head> 
 +<body> 
 +<pre><code class="python">
 def build_workflow(): def build_workflow():
     step_name = "build_workflow"     step_name = "build_workflow"
Line 341: Line 453:
         workflow_graph = colonies.submit_workflow(workflow, prvkey)         workflow_graph = colonies.submit_workflow(workflow, prvkey)
         print(f"Workflow {workflow_graph.processgraphid} submitted")         print(f"Workflow {workflow_graph.processgraphid} submitted")
-</code>+ 
 +</code></pre> 
 +</body> 
 +</html> 
  
 This workflow generates a graph much like the one described earlier. Each function spec takes a node identified and generates data for instantiating a FuncSpec object, like for instance the one electron integral: This workflow generates a graph much like the one described earlier. Each function spec takes a node identified and generates data for instantiating a FuncSpec object, like for instance the one electron integral:
  
-<code python>+<html> 
 +<head> 
 +  <link href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/styles/monokai-sublime.min.css" rel="stylesheet"> 
 +  <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/highlight.min.js"></script> 
 +  <script>hljs.highlightAll();</script> 
 +</head> 
 +<body> 
 +<pre><code class="python">
 def generate_one_electron_integrals_spec(nodename): def generate_one_electron_integrals_spec(nodename):
     one_electron_uuid = str(uuid.uuid4())     one_electron_uuid = str(uuid.uuid4())
Line 357: Line 480:
         )         )
     )     )
- </code>+</pre></code> 
 + 
 +</body> 
 +</html>
  
 The executor used in this example, in turn, imports the required functions and calls them with appropriate arguments: The executor used in this example, in turn, imports the required functions and calls them with appropriate arguments:
  
-<code python>+<html> 
 +<head> 
 +  <link href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/styles/monokai-sublime.min.css" rel="stylesheet"> 
 +  <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/highlight.min.js"></script> 
 +  <script>hljs.highlightAll();</script> 
 +</head> 
 +<body> 
 +<pre><code class="python">
 from quantum_workflow.hamiltonian import ( from quantum_workflow.hamiltonian import (
     calculate_one_electron_integrals,     calculate_one_electron_integrals,
Line 449: Line 582:
          
     etc..      etc.. 
 +</code></pre>
 +</body>
 +</html>
  
-</code> 
  
 calculate_one_electron_integrals and other functions under the executor is what contains the actual qiskit implementation: calculate_one_electron_integrals and other functions under the executor is what contains the actual qiskit implementation:
  
-<code python>+<html> 
 +<head> 
 +  <link href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/styles/monokai-sublime.min.css" rel="stylesheet"> 
 +  <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/highlight.min.js"></script> 
 +  <script>hljs.highlightAll();</script> 
 +</head> 
 +<body> 
 +<pre><code class="python">
 from pyscf import gto, scf, ao2mo from pyscf import gto, scf, ao2mo
  
Line 499: Line 641:
         raise e         raise e
     return uuid     return uuid
 +    </code></pre>
 +</body>
 +</html>
  
-</code> 
  
 Clearly, for simplicity here I'm using PySCF to do my integral calculations, but I could just as well use any other language and integral library to do this. This is a benefit of using a loosely coupled system like this - we could implement any node in any way as long as the format they use to exchange data is conserved.  Clearly, for simplicity here I'm using PySCF to do my integral calculations, but I could just as well use any other language and integral library to do this. This is a benefit of using a loosely coupled system like this - we could implement any node in any way as long as the format they use to exchange data is conserved.