Inspiration Chemistry, as many know it, is a challenging subject, but what most people don't think about is that part of it is the way chemistry is communicated to us: it forces the human mind to constantly translate between invisible subatomic data, macroscopic physical states, and an incredibly dense, abstract language of nomenclature. Though there has been some molecular structure visualization, traditional software mirrors static textbooks, presenting them as flat, isolated data grids rather than dynamic molecular structures. Additionally, as a major social problem, underfunded educational institutions lack the expensive 3D modeling kits or software needed to bridge the learning gap.
The inspiration for this project came from personal experience with chemistry, where I found it frustrating that I couldn't find an open-access portal that provided raw atomic metrics, a dynamic 3D visualization, and a linguistic breakdown on a single interface. This project aims to help solve the scientific communication hurdle and the educational equity gap, making molecular science free and universally accessible to any student with a browser.
What it does ChemLingua's goal is to help transform how chemistry is communicated with users by providing a unified, responsive dashboard divided into three interactive zones:
Periodic Table: An intuitive dashboard mapped to standardized CPK atomic colors, allowing users to filter elements by phase state or chemical group and view the corresponding metrics of each element.
3D Molecular Visual: A WebGL-powered canvas that dynamically pulls molecular data from PubChem. It bypasses the traditional flat textbook look, rendering 3D stick-and-sphere representations that users can interact with.
AI Linguistic Engine: A dedicated natural language pipeline that takes complex, dry chemical terminology and thoughtfully breaks down its structural meaning into an understandable, conversational insight.
How we built it This final version of the project was built after several attempts, and in the end, it was decided to make the entire platform a lightweight, front-end-focused application to optimize performance and accessibility, rather than a backend, as in the early attempts. The UI & Layout was built using HTML5 grids and CSS3 to create an aesthetic, cohesive, dark-themed, mostly responsive design. The 3D visualization was integrated using the 3Dmol.js library, which handled client-side WebGL rendering of atomic structures. For the data and pipelines, we leveraged JavaScript's fetch routines to pull raw spatial coordinates from the PubChem API, which were then paired with language insights processed via DeepSeek on Featherless AI's serverless platform.
Challenges we ran into Challenges I ran into during this project included engine latency, interface conflicts, and molecule display limitations. The AI engine, powered by DeepSeek, initially suffered a longer runtime than it does now; we had to. When switching between different states of matter (gas, liquid, solid), conflicts can prevent any structure from being rendered on the 3D visualization canvas. For the molecule display limitations, I'm confused about why it can't render certain and complex molecules.
Accomplishments that we're proud of Accomplishments that I'm proud of are the design of the interactive periodic table. I've always wanted to create something like it ever since I saw them on sites for periodic tables while doing my chemistry homework. It was also amazing that I was able to make responsive 3D molecular structures. Even when many websites don't render the structure for you, you would have to draw it yourself.
What we learned The most interesting thing that I learned is that it is entirely possible to have a project without a backend. I learned how to work with 3D coordinate matrices and WebGL canvases, as well as additional UI techniques. I was really surprised that ChemLingua worked only with a front end. During this project, I even learned some more facts and explored some new molecular structures.
What's next for ChemLingua The next steps for ChemLingua are to significantly improve runtime and constraints. ChemLingua's linguistic engine pipeline needs to be refactored to achieve a much faster runtime and support multiple requests/prompts. Additionally, ChemLingua will be more educational and helpful by incorporating environmental factors, such as temperature and pressure controls, so that users can see how these forces physically affect molecular structures. As of now, ChemLingua cannot render large or highly complex molecular networks. In the future, it will be able to process more complex and even some abnormal molecular structures that have been scientifically discovered.
Built With
- css
- deepseek
- featherlessai
- gemini
- html5
- javascript
- pubchem
- webgl
Log in or sign up for Devpost to join the conversation.