Building a Quantum ESPRESSO GUI on a Tablet

So here’s something I didn’t expect to be writing about this semester.

I’m a first-year CSE student. I do most of my coding practice on a tablet with Google Colab open in the browser. And somehow, over the past few weeks, I ended up building a working simulation of BURAI 3; the GUI for Quantum ESPRESSO, specifically for visualizing the band gap of MoSe2 (Molybdenum Diselenide). A real 2D material being studied for next-gen transistors and solar cells.

Full disclosure upfront: I referenced published papers, leaned on the Three.js documentation, used AI assistance, and took workflow inspiration from existing GitHub repos. But I understood what went into it, and that’s what I actually want to talk about.

Because here’s the thing - nobody tells you in first year. Understanding something and building it from scratch are two completely different skills, and both are valid.

Why This Project

My professor mentioned MoSe2 band structure project. Something about how it has a direct band gap in monolayer form but an indirect one in bulk. Didn’t fully get it at the time, but the phrase “indirect-to-direct transition” stuck with me.

I came back to my dorm, looked it up, fell down a rabbit hole, found Quantum ESPRESSO, then found BURAI 3. Grey interface, teal and yellow atoms, old-school panel on the left. It looked like something a researcher would actually use.

I thought: can I build something that looks and works like this, but runs in a single Colab cell on a tablet?
Turns out yes.

What I Actually Built

Before anything technical, let me be clear about what this is and what it isn’t.

What it is:

• A browser-based simulation of the BURAI 3 interface
• A 3D interactive crystal structure viewer using Three.js
• A band structure plot with real published gap values for MoSe2
• Physics controls that actually change the graph (Monolayer/Bulk, PBE/HSE06/GW, SOC on/off)
• Runs entirely in one Google Colab cell

What it isn’t:

• A real Quantum ESPRESSO installation running pw.x
• A live DFT calculation (that needs a cluster and hours of runtime)
• Something I could have built entirely on my own at this stage

That last point matters. I see posts where people oversell what they built and it always feels off. So: built with assistance, understood it, iterated on it, learned a lot.

The Physics

Band gap is the energy distance between where electrons normally sit (valence band) and where they need to go to conduct electricity (conduction band). MoSe2 sits around 1.44 to 1.55 eV, comfortably in semiconductor range.

The reason the method choice matters is that PBE (the standard DFT approximation) consistently underestimates band gaps by 10 to 30 percent. HSE06 corrects for this. GW gets closest to experiment but is expensive to run. The viewer lets you switch between all three and see the difference directly.

The Prototype - What It Actually Looks Like

When you run the cell, you land on the 3D structure view first. The BURAI orange top bar, the dark tab bar with “Mini Project” and “mose2_final” tabs, and the grey viewport with the crystal rotating in front of you. Mo atoms in teal, Se atoms in yellow, bonds connecting them.

The band structure view section; the plot sits in the viewport — red solid bands, orange dashed SOC-split bands, a cyan shaded region marking the gap, and an arrow annotation on the right showing the exact gap value. Below the plot, the k-point labels: Γ M K Γ A.

The right panel has all the controls. Change any of them and the plot redraws immediately:

• Monolayer vs Bulk — the band shapes shift, the gap type flips between direct and indirect.

• PBE / HSE06 / GW — the gap value changes and a note appears at the bottom explaining the accuracy tradeoff for that method.

• SOC on/off — the top valence band visibly splits into two branches when you turn it on.

Default on load: Monolayer + HSE06 + SOC ON = 1.55 eV. That’s the closest match to the experimental optical gap for monolayer MoSe2.

Languages and Tools used

Each language has one job and sticks to it.
Python delivers the whole thing to Colab’s output. All it needs is one call. That’s its entire role here.

HTML is the structure - the window layout, the top bar, the panels, the tabs. Matching BURAI meant getting specific: #cccccc grey, #3a3a3a tab bar, the exact button shapes.

CSS is purely visual - the orange gradient, the old-school inset borders, the toggle states.

JavaScript is where the project actually lives. The 3D viewer, the band plot, all the toggle logic. Switch from PBE to HSE06 and JavaScript catches it, grabs the new value, wipes the canvas, and redraws everything. Feels instant.

Three.js handles the 3D crystal. It wraps WebGL (the browser’s 3D engine) into something actually approachable; so you’re placing atoms and setting up lights, along with drag interactions.

HTML Canvas API draws the band structure graph. No library, it’s the browser’s built-in 2D drawing tools. Each line, label, and shaded region on that plot is a direct canvas command.

A Bit of Three.js

Here’s what placing an atom in the 3D viewer actually looks like:

// Mo atom — teal sphere at its crystal position
const moGeometry = new THREE.SphereGeometry(0.42, 32, 20);
const moMaterial = new THREE.MeshPhongMaterial({
  color: 0x22aacc,     // teal — matches BURAI exactly
  shininess: 90,
  specular: 0x99ddee   // gives it that shiny lit look
});
const moAtom = new THREE.Mesh(moGeometry, moMaterial);
moAtom.position.set(x, y, z); // fractional crystal coordinates
scene.add(moAtom);

Honest Limitations

The gap values come from published literature, not a live calculation. The band shapes are drawn from manually placed coordinates with smoothing. The BURAI interface is a visual simulation.

The honest pitch: this is an interactive visualization of MoSe2 band structure physics using literature values, built to explore how dimensionality, functional, and SOC choices affect band gap results — in a UI that mirrors real BURAI output.

For a first-year project, that’s a pretty good starter.

What I Took Away

The band structure is literally just a plot of allowed electron energies against crystal momentum. Once that clicked, the whole subject stopped being intimidating. And HTML, CSS, and JavaScript can build things that look like serious scientific software if you care enough about the details.

Sources: Liu et al. PRB 88, 085433 (2013) · github.com · threejs.org docs etc

Thanks for reading. Corrections welcome.

Dev Vishwas | First-year B.Tech CSE