Devlog 2: Securing the Keys
So guys, Earlier I implemented the Shor's algorithm that shows how Traditional encryptions could be broken easily with Quantum computers, this time I did demonstration of how we can protect our Secrets from Quantum technology.
Basically If you know about Cryptographic encryptions, you might know that we actually never reveal the secret keys while communicating with other parties instead we use our Public keys to do so, which is nothing but simply a mathematical wrap that is generated with help of secret keys and then mathematical blanket over it makes it harder to guess which secret keys might have generated that Public key.
Both Traditional and Post quantum cryptography are different ways to wrap that secret against the potential threats. Earlier when we used very large prime number we relied on computational limits of classical computers that they will practically take so much time to break the pattern and we enjoyed the security until quantum computers came and started to break that same computational limits at very fast pace, then we needed something that QPUs cannot break and we decided that we would use methods which is not a mathematical complexity but just complete chaos and randomness.
One of popular way is Lattice cryptography where we insert random errors in public keys that no obvious pattern is recognized by Quantum. Hence safe against QPU and Classical both.
I have used simple linear equations instead of how actual matrices used by real life encryptions but for understanding analogically same things that generates public output(b), public keys (a), inserted error and bounded by particular modulus.
The idea is same that we would use these Linear equations for Cryptographic handshake between different parties. Noise would make it difficult to reveal secret hence our Objective is fulfilled.
You can play with Parameters and if you have some idea and want to contribute, the repo is open.
Thanks for Reading!
So this project is about a Demonstration of how Quantum computers poses a major threat to modern day cyber algorithms like RSA.
To be more Specific modern day cryptography uses a principle called Harvest now, decrypt later, which means that a very large number(key) which is very computationally expensive to factorize and only factors of that number can break encryption.
So considering the computational limitations of classical computers we just use it until a very fast computational machine comes up and messes our Encryptions.
So in today’s time, Quantum computers have come and they can potentially break encryptions based on Shor’s algorithm, which theoretically uses period finding of a random number less than the key and raises it to power sequentially, finding if the modulus is 1. After that, the same pattern will repeat. After finding the period of repetition, we find the HCF of the random number raised to the power of period/2 ± 1 and the key. This will give us two factors, and only period finding is computationally hard for classical computers because of their brute-forcing / one-by-one checking or guessing method to find the period. Quantum computers, using the power of Quantum parallelism, find periods very fast.
Also, suppose the key is even, or in the beginning itself we find out that the HCF of the key and the chosen random number is more than one (or in simple words, the random number is a factor of the key). In both cases, classical computers are enough to find the factors. In fact, due to this fact, even large numbers are not used in encryptions.
Here, for the UI layer I used Streamlit. Also, I kept an option in the dropdown so users don’t accidentally enter a number that crashes their computer.
On the right side, there is a wave that shows the repetition of the period for some timeline. In the next update I will also add a simulation on how we make encryptions that tolerate these quantum attacks.
I will push it on GitHub so you can check this version.
So I guess it’s final Devlog.
Here firstly I updated Readme with new UI based snapshots.
Made custom Alert box so it matches the theme instead of browser native alert box.
Fixed bug in which earlier the gates were being added in circuit without checking if that Block is being used by other gate and its corresponding qubits.
I hope if I don’t get a new problem to fix I will ship it;
So Guys, I have finally finalized the Cirqmon Playground UI.
I replaced the old glassmorphism theme with a rougher, more irregular visual style. Earlier I got feedback that, the old layout felt cluttered because the quantum gates were spread far apart and Due to Space Background and glassmorphism, it looked like Vibe coded. I have now grouped all the gates together in one place to make the interface cleaner and easier to navigate.
Here Is what I changed:
Removed the Home button. Clicking the Cirqmon logo now takes gets back to the home page.
Updated Playground icons with Animal GIFs to give it more lively and engaging appearance.
As mentioned above, reduced the use of glassmorphism to due to flickering issues and implemented like hand drawn solid color based UI.
Attaching a video Snapshot so you can see changes made.
also, The README is the only major task left. Once that’s finished, I’ll be ready to ship the project!
Every time I think My project is ready to ship I find something missing and then it gets delayed. After I finished the blog on Deutsch Jozsa algorithm the project worked, as it needed only Single and Double qubit gate. When I started writing about Grover’s algorithm I realized the need of Three Qubit gate too as it needed CCZ gate to flip the phase to achieve 111 State. So I had to fix that.
Here is what I did:
So this was what I updated in this Version and now I needs that code review and matching the theme on Playground too. Just Hope I don’t get stuck this time and wrap it up.
Thanks for Reading!
This version is more of testing, I thought that I should write blogs and use examples using Cirqmon, So Written 2 blogs on Quantum computing for Beginners and Deutsch Joza algorithm.
Now After writing Blogs I am getting surge of confidence inside that I understood Quantum Computing more Better. One of topics I am curious about is Cybersecurity and one of Algorithm that challenges classical Approaches like RSA is Shor’s Algorithm so next I am going to explore it, Also along with all these, I have updated Some images in readme too and going to Push updates, so do Share Feedbacks.
Actually I was telling my friend about project, and I realized that the Project should have better readme that tells about features, Examples, and Tour.
Also added HSL wheel in Q sphere so People can Use it as a reference. Initially its faded, you hover it and it gets Visible. Also the Latest version is now Live with multi qubit gates.
So, I am posting this Devlog after interval of Almost 20 days since last Posted.
During this time I learnt a Lot about Quantum computing. Infact, I was planning to ship the Project with Single qubit gates only, but after I joined Qiskit Global Summer School, then I realised that main game in Quantum computing is about entanglement, that comes with multi Qubit gates like CX, CZ, SWAP etc.
The Media attached is Demo is of a GHZ circuit is made by combination of H gate and CNOT gates. Basically a GHZ state is larger version of Bell state. For N qubits, only two possible states shows Up with equal probability i.e 1/root2 (000…n + 111…n).
So Earlier Version was for Only 1 Qubit Gates, and it used Tensor product. Where it used to tensor Each step and then Multiply each step to StateVector in successive manner.
But for 2 Qubit gates, tensor method gets problematic because multi qubit gates need to have dependence on other qubits too, meanwhile tensor assumes every gate on that step is independent and it builds large matrix.
This loses dependence and relation as demanded by multi qubit gates.
So then I got to know of approach called Embedding or Inflation where we first create Temporary matrix of 2^n rows and 2^n Columns with each entry initially as 0, then we start looping through columns of that Matrix (which represent possibility, like iteration for 0 is actually 00 in binary) and then, matching it with rows and columns in Gate matrix, after that we force the bit in Temporary Matrix’s respective column and row to align with what Gate’s matrix bit has? Either 0 or 1.
Finally we get Result of application in that Temporary matrix which we multiply with StateVector later on. That’s how This Inflation Approach works.
Now, Quantum State’s node’s color in Q sphere shows its phase Angle, which can be from PI to -PI, calculated using formula tan2a(y,x), then we constraint it from 0 to 2PI, later convert to degrees, then feeding that value as HUE value in HSL colour format keeping lightness as 50% and Saturation 100% and then it corresponds to Phase Angle with color that degree, like 0deg is red, 90deg is green etc.
So this was Major Changes I did along with some Style changes and Minor error fixing that appeared during changing the Simulator’s Approach.
And to be very Honest at when I started to Write code for 2 qubit Gates, I earlier thought I would Do something that I dont have to change Simulator, but those were still just making me cry.
So finally I gone to AI to learn and for almost 2 days new experiments were going out of head and that way almost I wasted Hours and then to experiment more and Stop Tracking Hackatime since I knew It would track more hours for Experiments too, So I coded in Cursor (Without Any AI, Just as Other Editor) Untracked. At the End it worked :)
Now Finally Majority part is Done, after few More Edits, Will Ship it soon!
So Hey People, I am feeling Immensely satisfied that Q Sphere feature is Mostly done.
Also the GateWiki part is also done that tells You about Gate you Clicked on Gates Tray, again to tell you can drag gates into Circuit to build and Tap to know about it. May be I also link blogs on that Later.
Okay , Now let me share about Making of Q Sphere Part, So earlier I was not able to visualize it, but somehow I got to Know about Spherical Coordinates which is dependent on:
But clicked finally after frustration of not understanding it earlier. Then I gone to Google searching to see 3d visuals and AI to understand how we calculate those angles: So -
Based on hamming weights (Means how many 1s in that State, Suppose in |01> has 1 1s and 011 have 2 1s ) and total qubits which help us find theta and divide sphere into sort of rings for similar nodes/lines of same hamming weights in same ring.
Then we find how we calculate phi based on total active states in each ring and slicing ring into same proportion.
I don’t know why but that was a finally a kick for me :)
Finally since you will plot lines and nodes on spherical surface you have to convert theta and phi to coordinates [x, y, z] which you do using polar coordinates. Then after plotting them, a major part of Q sphere is made. now as you can see on 2nd screenshot left side the Sphere shows nodes for respective State. more chances of being 0 is on upper half and more 1 chance on bottom half.
Also I worked on code Structure to keep all algos separated:
stateVectors
json circuit instructions
So yeah that was work I did, little more things is needed to build, after that project is done. Adding some multi qubit gates is next important thing now.
I would be pushing on Github this Version and Vercel too now. Go check it out.
Namaste!!!
To be very honest I forget that its 8 hours 47 minutes in hackatime and it didn’t posted devlog until I got a Notification on slack.
Sooo Guys! In this part of work I had to decide a thing that should I add Visualization of Qubits or not and then I realized that’s the whole point of project [to let people easily visualize whats happening]. So thats why I have decided add Q sphere.
First of all I realized that my project was using url images and project structure was actually messing up as files and folders were increasing, so I decided to first organise the chaos and downloading all internet 3d assets in project. [Screenshot -1]. Because without a better organization of project it would get intimidatingly hard for others to contribute.
Now second part is making the Result page of Qubit execution match that 3d glassmorphism design and white browsing through IBM composer (Tool for making Circuits) I got to observe that states were actually reverse in order.
Suppose you applied hadamard gate to first qubit in 2 qubit system so instead of showing Probabilities of states as |00> = 50%, |01> = 0, |10> = 50%, |11> = 0, it reversed for 01 and 10. So after reading on internet about this I got to know that both ways are right and just differs because order you calcuate tensors:
G1 * G2 * G3.. gives you Big Endian Version which considers least qubit as importantSo I implemented both in project. Earlier I thought I broke a physics Law [haha.]
Its for Q sphere [2nd screenshot], that’s what help you understand statevector, because we can’t imagine more than 3D, so IBM come with this method.
Basically I have used react 3 fiber that helps us write Three.js in react easily, using JSX instead of js manually, and it shows 3 lines in space which represent each state in vector:
I am still processing [x,y,z] coordinates of line. Q sphere now shows random plots, I have to parse state vector to correct representation, will tell you about it in next devlog after I have learnt and implemented this.
Forth is more of usability, side by side you can see either, code and graph or sphere and graph, so understand better.
Also I added a screen restrictor for small screens since running this project on phone won’t be possible because design clutterness (forget to add screenshot, but you can check live).
So hope you liked this version, I know it’s too much of quantum but yeah like others I am also trying to understand better.
At Last, don’t forget to check attachments and share your feedbacks. Also I think I would be pushing on github now before developing futher.
Namaste!!!
Devlog #4
This Part was all about making Navigation work between pages and since last time I got some feedbacks that Home and Playground VIbe Don’t match so made Playground more 3d.
Here are Changes -
Using react router, Made Navigation between Home and Playground and Vice versa.
Used 3d Resources like Background images, Button images to make it look 3d Videogame.
Added button animations like some changes images, some spins. Improved qubit adjust box.
Added tooltip component so people know what buttons does what, since buttons are image based.
So, I have tried to make project look 3d Glassmorphism and minimal too. check out video attached to see progress till now .
#Devlog 3
Made Homepage for Cirqmon because I wanted to Put Medium blogs and Tool at one place so this will act as Entry door easily. Experimented with designs, fonts and images to make it feel like 3d Cartoon themed. Following things made -
Basically UI for Homepage is Done. Now in next Version WIll use router for Navigation. ALso TBH Gemini really Helped me with Box Shadow button effects which I adjusted according to project Later.
Do give Feedbacks please :)
Its Devlog 2 and in midway didn’t knew That I will be able to go further in project but somehow Curosity pushed it. So I have basically in this Version I made following new Things -
Added fundamental Single Qubit Gates and the Moment someone drag Gates into Circuit and it get Translated into circuit Instructions JSON which tracks for which gate is applied at target and step;
The moment you click on Playcircuit button it Calculates the probability of Each possible Qubit state and corresponding qiskit code;
Basically this part of calculating the Circuit I had options either to use Qiskit directly via Python, Use react pre-written Scripts in react or Reinvent the Wheel by making my own Simulator which might not be as Efficient as Already made ones. So to see how strong my kidneys are I chose 3rd one. But you won’t believe I got answers to all My questions whether Why more qubits means exponential computation time, or tensors and many other things which I will write in blogs in some time.
So basically it was about initializing a State vector and then running step by step tensor product of gates applied and then when I got a single wire as a result of all gates in each step, then multiply the state vector with Matrix which contains 2^N rows and columns (n is number of qubits) which finally gives you the amplitudes of each state. FInally you format them to Show.
Now it still need better design and More code organization after which I will push new Version; till then You are welcome for Questions and Suggestions.
Note - This version handle single qubits till now.
Quite a While I started to learn about quantum Computing and observed that its still gives too research vibes for a beginner to overwhelm and leave it.
This is Cirqmon which I am making so Building Quantum circuits become some fun without dumping every information and expecting everyone to be a Researcher.
Started with making on React, giving it Cartoon or Animated vibe, earlier I thought to make it Doremon themed but later found that it would give copyright issues.
For now features added-
1 ) You can Drag and Drog Quantum gates from Tray into Circuit Canvas.
2 ) Music and Background Manage buttons.
3 ) I have tried to play with Vector and Cartoon Images in Transition.
4 ) Adjust Qubits and Nodes/Steps from Drawer earlier I thought to Use Slider but used Buttons later to Avoid touch screen inconsistencies.
While making the Drag and Drop canvas Features, found that using HTML Drag and drop API sometimes break on Safari and other browers and it was still making codebase look complicated for others or even me in future to Contribute. So I used @dnd kit for drag and drop feature.
Also I kept a Limit on Qubits and Nodes to Keep Execution Easier and test.
Majorly a Structure is Done,