Bixby Studio is an Electron based desktop IDE that enables developers to create Bixby “Capsules”, which are equivalent in function to Alexa Skills or Google Assistant Actions. Bixby Studio provides developers the tools for:
- Modelling their product/service’s domain
- Training the AI to interpret conversations
- A full-featured code editor (based on Monaco)
- Simulator and debugging tools to test their Capsules on a variety of devices including smartwatches, phones, speakers, and even refrigerators.
Bixby Studio has been the primary focus of my time at Viv Labs, so I’ve had the privilege to be instrumental in many areas of the application, however some of the highlights for me are listed below.
- CSS Modules
A crucial component of Bixby Studio is the Simulator. Without this tool, developers would have no way to test their Capsules without having access to a physical device. This is particularly challenging for refrigerators. My work on the Simulator was mostly to do with replicating native device functionality such as playing/controlling audio or ensuring animations and interactivity matched the real devices as closely as possible.
The Bixby Studio Debug Console provides developers an interactive view of their Capsule as it is executing. Users can step through the execution and see exactly how Bixby has made decisions and displayed output. My main contribution to the Debug Console was implementing an inspector view. This is a tree-style view that functions similarly to a web browser’s DOM inspector, allowing users to interactively filter and drill down into all the different data points that contribute to having a conversation with Bixby.
Working very closely with our UX Designer, I architected a colour system that allowed us to style the application in a way that could smoothly adapt to a light/dark theme. CSS Custom Properties (AKA CSS Variables) were the key to the system. Instead of manually setting colours for dark and light modes, I utilised an opacity based system that would automatically adapt to the current colour scheme.