Logo
Home
Projects
Blog

Ready to create
something amazing?

Company logo

Ali Benkarrouch

Software Engineering student at ETS

Get upDownload my CV
LinkedInGithubEmail

Contact me

© 2026 Ali Benkarrouch. All rights reserved.
0%
All projects
Genie Optiroll
March 2026

Genie Optiroll

As a piano player, I often find reading traditional sheet music time-consuming and prefer visual piano rolls. Since not every song has a piano roll tutorial available online, I wanted to build a tool that could instantly convert any sheet music into an interactive piano roll. Adding built-in speed controls allows me to slow down complex sections, making it much easier to learn new music directly at my piano. Additionally, for quite a while, I wanted to revisit my original "Genies" project from 2024 to build a "v2". I decided to start a new series of standalone applications under the "Genie" brand, where all my AI and computer vision projects will be categorized. That is why the project name starts with "Genie:", while "Optiroll" is a blend of "Optical" (from Optical Music Recognition) and "Roll" (from Piano Roll).

Contribution

I decided to take on this project entirely on my own. As the sole developer, I handled the full development lifecycle, from designing the UI/UX and coding the React frontend to building the FastAPI backend and integrating the complex computer vision pipeline.

Project Gallery

Visual Overview

Genie Optiroll screenshot 1

Approach

Drawing from my past computer vision experience, my initial plan was to build a custom note-detection algorithm from scratch using OpenCV. However, I quickly realized the immense complexity, edge cases, and strict formatting rules required to accurately parse standard music notation. I pivoted my strategy and researched Optical Music Recognition (OMR), ultimately opting for oemer, a state-of-the-art pre-trained model. I built a FastAPI backend that runs oemer on uploaded images to generate a MusicXML file, then uses muspy to extract precise MIDI note events (pitch, time, duration). On the frontend, I developed a custom HTML Canvas to render the falling bars and integrated the smplr Web Audio library to provide realistic, controllable instrument playback directly in the browser.

Features

  • Sheet music upload
  • Interactive piano roll
  • Multiple instrument sounds
  • Duet instrument layering
  • Custom visual themes
  • Pitch transposition
  • Saved sheet library

Stack

GSAPGSAPOpenCVOpenCVViteViteSQLiteSQLiteReactReactTailwindTailwindFastAPIFastAPImuspymuspyPythonPythonOemer (OMR)smplr

Sources

Github
Github

More Projects

Explore Other Work

Portail DTI

Portail DTI

During my last web application class at CEGEP, we had to choose a project from a list provided by our teacher. My team and I decided to take on something quite ambitious: the computer science department portal. The idea behind this project was to design a digital space for students in the program. A place designed to promote mutual assistance, tutoring, event sharing, project promotion, as well as the creation and consultation of tutorials. In short, a true collaborative portal that brings the student community together around the development and sharing of knowledge.

December 2024

Whale of Misfortune

Whale of Misfortune

I designed this project as part of my first course dedicated to mobile app development. Since the initial assignment was technically simple, I chose to set myself apart by injecting a strong visual identity into it. To do this, I created, designed, and animated an original character using Aseprite, drawing inspiration from the pixel art style of cult games such as Undertale. This project was the perfect opportunity to combine my technical skills with my graphic creativity.

November 2024

ArtSync

ArtSync

As part of my Web Application 2 course in college, I had the opportunity to work in a team on the design and on the development of a full-stack application. We created ArtSync, a platform where users can publish, explore, and share artistic content. The project took us through all stages of development: requirements analysis, UML diagram, relational database design, interface design with Figma, and development using Java, Spring Boot, Thymeleaf, and Angular. It was a great experience to put our knowledge into practice in an agile environment, with regular follow-ups and a workflow that felt very close to a real professional project.

May 2024

View All Projects