| <html> | |
| <head> | |
| <title>Quantum AI Explorer</title> | |
| <link rel="stylesheet" href="style.css"> | |
| <script src="https://cdn.plot.ly/plotly-2.27.0.min.js"></script> | |
| <link href="https://fonts.googleapis.com/css2?family=Space+Mono&display=swap" rel="stylesheet"> | |
| </head> | |
| <body> | |
| <header> | |
| <h1>Quantum AI Explorer</h1> | |
| </header> | |
| <div class="container"> | |
| <div class="modules"> | |
| <div class="module" id="superposition"> | |
| <h2>Superposition & Entanglement</h2> | |
| <div class="visualization"></div> | |
| <div class="controls"> | |
| <button onclick="toggleSuperposition()">Toggle States</button> | |
| </div> | |
| </div> | |
| <div class="module" id="gates"> | |
| <h2>Quantum Gates</h2> | |
| <div class="visualization"></div> | |
| <div class="controls"> | |
| <button onclick="applyHadamard()">Apply Hadamard</button> | |
| <button onclick="applyPhaseGate()">Apply Phase Gate</button> | |
| </div> | |
| </div> | |
| <div class="module" id="search"> | |
| <h2>Quantum Search</h2> | |
| <div class="visualization"></div> | |
| <div class="controls"> | |
| <button onclick="runGroverSearch()">Run Grover Search</button> | |
| </div> | |
| </div> | |
| <div class="module" id="walks"> | |
| <h2>Quantum Walks</h2> | |
| <div class="visualization"></div> | |
| <div class="controls"> | |
| <button onclick="startQuantumWalk()">Start Walk</button> | |
| <button onclick="stopQuantumWalk()">Stop Walk</button> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="info-panel"> | |
| <h3>System State</h3> | |
| <div id="state-display"></div> | |
| <h3>Metrics</h3> | |
| <div id="metrics"></div> | |
| </div> | |
| </div> | |
| <script src="quantum.js"></script> | |
| <script src="visualizations.js"></script> | |
| </body> | |
| </html> |