reactqbit
Version:
Quantum computing circuits with React JSX
206 lines (200 loc) • 7.5 kB
JavaScript
;
var __defProp = Object.defineProperty;
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
var __getOwnPropNames = Object.getOwnPropertyNames;
var __hasOwnProp = Object.prototype.hasOwnProperty;
var __export = (target, all) => {
for (var name in all)
__defProp(target, name, { get: all[name], enumerable: true });
};
var __copyProps = (to, from, except, desc) => {
if (from && typeof from === "object" || typeof from === "function") {
for (let key of __getOwnPropNames(from))
if (!__hasOwnProp.call(to, key) && key !== except)
__defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
}
return to;
};
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
// src/index.ts
var index_exports = {};
__export(index_exports, {
QuantumCircuit: () => QuantumCircuit,
QuantumGate: () => QuantumGate,
QuantumWire: () => QuantumWire,
Qubit: () => Qubit,
applyGate: () => applyGate,
calculateEntanglement: () => calculateEntanglement,
calculateQuantumState: () => calculateQuantumState
});
module.exports = __toCommonJS(index_exports);
// src/components/Qubit.tsx
var import_jsx_runtime = require("react/jsx-runtime");
var Qubit = ({
id,
value = "0",
className = "",
children
}) => {
return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { id, className: `qubit animate-quantum-pulse ${className}`, "data-value": value, children: [
value,
children
] });
};
// src/components/QuantumGate.tsx
var import_jsx_runtime2 = require("react/jsx-runtime");
var QuantumGate = ({
type,
targets,
controls = [],
className = "",
onClick
}) => {
return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
"div",
{
className: `quantum-gate ${className}`,
"data-gate-type": type,
"data-targets": targets.join(","),
"data-controls": controls.join(","),
onClick,
children: type
}
);
};
// src/components/QuantumCircuit.tsx
var import_react = require("react");
var import_jsx_runtime3 = require("react/jsx-runtime");
var QuantumCircuit = ({
qubits,
className = "",
children
}) => {
const [simulating, setSimulating] = (0, import_react.useState)(false);
const [results, setResults] = (0, import_react.useState)(null);
const runSimulation = () => {
setSimulating(true);
setTimeout(() => {
const possibleStates = generatePossibleStates(qubits);
const probabilities = generateProbabilities(possibleStates.length);
setResults({
states: possibleStates,
probabilities
});
setSimulating(false);
}, 1500);
};
const generatePossibleStates = (numQubits) => {
const states = [];
const totalStates = Math.pow(2, numQubits);
for (let i = 0; i < totalStates; i++) {
const binaryString = i.toString(2).padStart(numQubits, "0");
const ketNotation = `|${binaryString}\u27E9`;
states.push(ketNotation);
}
return states;
};
const generateProbabilities = (numStates) => {
const rawValues = [];
let sum = 0;
for (let i = 0; i < numStates; i++) {
const val = Math.random();
rawValues.push(val);
sum += val;
}
return rawValues.map((val) => Number((val / sum).toFixed(4)));
};
return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: `p-4 border-2 border-[#4C1D95] rounded-lg ${className}`, children: [
/* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "flex justify-between items-center mb-4", children: [
/* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("h3", { className: "text-lg font-bold text-[#6D28D9]", children: [
"Quantum Circuit (",
qubits,
" qubits)"
] }),
/* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
"button",
{
className: "px-4 py-2 bg-[#6D28D9] text-white rounded-md hover:bg-[#4C1D95] transition-colors",
onClick: runSimulation,
disabled: simulating,
children: simulating ? "Simulating..." : "Simulate"
}
)
] }),
/* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "space-y-4 mb-4", children }),
results && /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "mt-6 p-4 bg-[#F3F4F6] rounded-lg border border-[#C4B5FD]", children: [
/* @__PURE__ */ (0, import_jsx_runtime3.jsx)("h4", { className: "text-md font-semibold text-[#6D28D9] mb-2", children: "Quantum Superposition Result" }),
/* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "grid grid-cols-2 gap-2", children: results.states.map((state, index) => /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "flex justify-between items-center", children: [
/* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: "font-mono", children: state }),
/* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "flex items-center", children: [
/* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
"div",
{
className: "h-4 bg-[#6D28D9]",
style: { width: `${results.probabilities[index] * 100}px` }
}
),
/* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("span", { className: "ml-2 text-sm", children: [
(results.probabilities[index] * 100).toFixed(1),
"%"
] })
] })
] }, index)) }),
/* @__PURE__ */ (0, import_jsx_runtime3.jsx)("p", { className: "mt-4 text-xs text-gray-500 italic", children: "Probability amplitude for each possible basis state" })
] })
] });
};
// src/components/QuantumWire.tsx
var import_jsx_runtime4 = require("react/jsx-runtime");
var QuantumWire = ({ qubitId, className = "" }) => {
return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: `quantum-wire w-full ${className}`, "data-qubit-id": qubitId });
};
// src/index.ts
var calculateQuantumState = (gates, initialState) => {
const numQubits = initialState.length;
const possibleStates = Math.pow(2, numQubits);
const probabilities = [];
let remainingProb = 1;
for (let i = 0; i < possibleStates - 1; i++) {
const variance = 0.5 + gates.length * 0.1;
const prob = Math.random() * variance * remainingProb;
probabilities.push(prob);
remainingProb -= prob;
}
probabilities.push(remainingProb);
return {
states: Array(possibleStates).fill(0).map((_, i) => {
const binaryString = i.toString(2).padStart(numQubits, "0");
return `|${binaryString}\u27E9`;
}),
probabilities: probabilities.map((p) => Number(p.toFixed(4)))
};
};
var applyGate = (gate, qubitValues) => {
return qubitValues.map((v) => {
if (gate === "X") return v === "0" ? "1" : v === "1" ? "0" : v;
if (gate === "H") return v === "0" || v === "1" ? "+" : "0";
if (gate === "Z") return v === "+" ? "-" : v === "-" ? "+" : v;
return v;
});
};
var calculateEntanglement = (state1, state2) => {
if (state1 === "+" && state2 === "+" || state1 === "1" && state2 === "1") {
return 1;
} else if (state1 === "0" && state2 === "0" || state1 === "-" && state2 === "-") {
return 0.8;
} else {
return 0.2;
}
};
// Annotate the CommonJS export names for ESM import in node:
0 && (module.exports = {
QuantumCircuit,
QuantumGate,
QuantumWire,
Qubit,
applyGate,
calculateEntanglement,
calculateQuantumState
});
//# sourceMappingURL=index.cjs.map