diff --git a/package.json b/package.json index f57d674..28e07a7 100644 --- a/package.json +++ b/package.json @@ -1,5 +1,13 @@ { "dependencies": { - "three": "^0.179.1" + "react": "^18.x", + "react-dom": "^18.x", + "three": "^0.179.1" + }, + "devDependencies": { + "vite": "^4.x", + "tailwindcss": "^3.x", + "postcss": "^8.x", + "autoprefixer": "^10.x" } } diff --git a/qubitverse/simulator/gates/gates.hh b/qubitverse/simulator/gates/gates.hh index db06432..1a83cd9 100644 --- a/qubitverse/simulator/gates/gates.hh +++ b/qubitverse/simulator/gates/gates.hh @@ -6,9 +6,12 @@ #ifndef SIMULATOR_GATES #define SIMULATOR_GATES +#define _USE_MATH_DEFINES + #include #include + #include // for sqrt and M_PI namespace simulator diff --git a/qubitverse/visualizer/package.json b/qubitverse/visualizer/package.json index 7baea86..7375a63 100644 --- a/qubitverse/visualizer/package.json +++ b/qubitverse/visualizer/package.json @@ -20,19 +20,22 @@ "react-konva": "^19.0.3", "recharts": "^2.15.1", "tailwind": "^4.0.0", - "tailwindcss": "^4.0.12", "three": "^0.179.1", "vis-network": "^9.1.9" }, "devDependencies": { "@eslint/js": "^9.21.0", + "@tailwindcss/postcss": "^4.1.12", "@types/react": "^19.0.10", "@types/react-dom": "^19.0.4", "@vitejs/plugin-react": "^4.3.4", + "autoprefixer": "^10.4.21", "eslint": "^9.21.0", "eslint-plugin-react-hooks": "^5.1.0", "eslint-plugin-react-refresh": "^0.4.19", "globals": "^15.15.0", + "postcss": "^8.5.6", + "tailwindcss": "^4.1.12", "vite": "^6.2.0" } } diff --git a/qubitverse/visualizer/src/App.jsx b/qubitverse/visualizer/src/App.jsx index 542e1f6..e08124f 100644 --- a/qubitverse/visualizer/src/App.jsx +++ b/qubitverse/visualizer/src/App.jsx @@ -1,24 +1,35 @@ -import React, { useState } from "react"; +import React, { useState, useEffect } from "react"; import QuantumCircuit from "./components/QuantumCircuit"; import "./App.css"; import Navbar from "./components/Navbar"; import NQubitInput from "./components/NQubitInput"; import BlochSphere from "./components/BlochSphere"; - +import './index.css'; function App() { const [nQubits, setNQubits] = useState(null); const [showBloch, setShowBloch] = useState(false); + const [darkTheme, setDarkTheme] = useState(false); + + useEffect(()=>{ + if(darkTheme){ + document.documentElement.classList.add("dark"); + }else{ + document.documentElement.classList.remove("dark"); + } + }, [darkTheme]); return ( <> setShowBloch(!showBloch)} isBlochActive={showBloch} + darkTheme={darkTheme} + setDarkTheme={setDarkTheme} /> {showBloch ? ( ) : nQubits === null ? ( - + ) : ( )} diff --git a/qubitverse/visualizer/src/components/BlochSphere.jsx b/qubitverse/visualizer/src/components/BlochSphere.jsx index e6f156b..b5cd0dd 100644 --- a/qubitverse/visualizer/src/components/BlochSphere.jsx +++ b/qubitverse/visualizer/src/components/BlochSphere.jsx @@ -35,9 +35,16 @@ function BlochSphere() { context.fillText(message, canvas.width / 2, canvas.height / 2); const texture = new THREE.CanvasTexture(canvas); texture.needsUpdate = true; - const spriteMaterial = new THREE.SpriteMaterial({ map: texture, transparent: true }); + const spriteMaterial = new THREE.SpriteMaterial({ + map: texture, + transparent: true, + }); const sprite = new THREE.Sprite(spriteMaterial); - sprite.scale.set(canvas.width / scalefactor, canvas.height / scalefactor, 1.0); + sprite.scale.set( + canvas.width / scalefactor, + canvas.height / scalefactor, + 1.0 + ); return sprite; }; @@ -107,7 +114,7 @@ function BlochSphere() { controls.enableDamping = true; controls.dampingFactor = 0.12; controls.rotateSpeed = 0.5; - controls.enableZoom = true; // <-- Fixed here: zoom enabled + controls.enableZoom = true; // <-- Fixed here: zoom enabled controls.enablePan = false; // Sphere @@ -136,7 +143,7 @@ function BlochSphere() { ]); scene.add(new THREE.Line(xGeom, xMat)); // Y axis: green - const yMat = new THREE.LineBasicMaterial({ color: "#00c66a" }); + const yMat = new THREE.LineBasicMaterial({ color: "#ff6f00" }); const yGeom = new THREE.BufferGeometry().setFromPoints([ new THREE.Vector3(0, 0, 0), new THREE.Vector3(0, 1.3, 0), @@ -162,7 +169,7 @@ function BlochSphere() { const labelY = createTextSprite( "y", - { fontsize: 30, fontColor: "#00c66a", fontWeight: 700 }, + { fontsize: 30, fontColor: "#ff6f00", fontWeight: 700 }, 82 ); labelY.position.set(0, 1.45, 0); @@ -190,7 +197,14 @@ function BlochSphere() { const origin = new THREE.Vector3(0, 0, 0); const length = 1.13; const hex = 0xff00ff; - const arrowHelper = new THREE.ArrowHelper(dir, origin, length, hex, 0.17, 0.1); + const arrowHelper = new THREE.ArrowHelper( + dir, + origin, + length, + hex, + 0.17, + 0.1 + ); scene.add(arrowHelper); arrowHelperRef.current = arrowHelper; @@ -219,88 +233,112 @@ function BlochSphere() { const x = Math.sin(theta) * Math.cos(phi); const y = Math.sin(theta) * Math.sin(phi); const z = Math.cos(theta); - arrowHelperRef.current.setDirection(new THREE.Vector3(x, y, z).normalize()); + arrowHelperRef.current.setDirection( + new THREE.Vector3(x, y, z).normalize() + ); } }, [selectedQubit]); - const selectedIndex = qubits.findIndex(q => q.label === selectedQubit.label); + const selectedIndex = qubits.findIndex( + (q) => q.label === selectedQubit.label + ); return (
-

Bloch Sphere
Visualizer

-
{selectedQubit.label} {isRotated ? " (rotated)" : ""}
-
Rotations around default axes:
@@ -328,43 +368,52 @@ function BlochSphere() { }} key={axis} > - {axis} axis:
{[90, -90, 180, -180].map((deg) => ( - - {error.length > 0 &&

{error}

} -
-
+" + + // style={{ + // display: "flex", + // flexDirection: "column", + // gap: "10px", + // userSelect: "none", + // width: "100%", + // maxWidth: "500px", + // alignItems: "center", + // justifyContent: "center", + // border: "solid 3px", + // borderRadius: "8px", + // padding: "2rem", + // boxShadow: "0px 4px 12px rgba(0, 0, 0, 0.15)", + // backgroundColor: "#fff", + // }} + > +

+ Enter Number of Qubits +

+ + + + {error.length > 0 && ( +

+ {error} +

+ )}
- ); + + + ); } -export default NQubitInput; \ No newline at end of file +export default NQubitInput; diff --git a/qubitverse/visualizer/src/components/Navbar.jsx b/qubitverse/visualizer/src/components/Navbar.jsx index 9d40d3f..397f064 100644 --- a/qubitverse/visualizer/src/components/Navbar.jsx +++ b/qubitverse/visualizer/src/components/Navbar.jsx @@ -1,54 +1,53 @@ import React, { useState, useEffect } from "react"; -const Navbar = ({ onBlochToggle, isBlochActive }) => { - const [darkTheme, setDarkTheme] = useState(false); +const Navbar = ({ onBlochToggle, isBlochActive, darkTheme, setDarkTheme }) => { - useEffect(() => { - if (darkTheme) { - document.documentElement.classList.add("dark"); - } else { - document.documentElement.classList.remove("dark"); - } - }, [darkTheme]); + return ( -