Inspiration
Given the theme "Retro-Futuristic" we drew heavy inspiration from Microsoft's Office Assistant, or better known as "Clippy". Wanting to give the legacy character a fresh makeover, we designed our character off of the idea of a "Futuristic Robot" and how they were depicted in the early 2000s and late 1900s.
What it does
A.L.F.R.E.D.O. (AL) is a roaming desktop entity that serves as not only a personal assistant, but also a companion for solo computer sessions; Our character was not only designed to help, but also to entertain.
How we built it
AL was built using the NW.js (formerly known as node-webkit) module of the NodeJS runtime environment. Behind the scenes, AL inhabits a transparent window where he can perform and act as himself;
Visuals are implemented from an HTML and multiple CSS files. AL's functionality and operations are managed with JS and JSON files.
AL's movement was drawn out and illustrated using Clip Studio Paint and then converted into the appropriate file type for animation.
AL's conversational ability is made possible using OpenAI's API, which allows for natural conversations between AL and the user. This API was implemented using Python script.
The entire project was hosted using a GitHub repository, where collaborative innovation is made possible for software engineers.
Challenges we ran into
The biggest issue we ran into right at the beginning was trying to decide on the framework / tools we would be implementing to get a digital companion to appear on the screen, independent from a window.
Another big challenge that we came across was trying to make use of OpenAI's API. Due to the massive demand for this product, we found it difficult to purchase token credits to attempt to start learning the API.
Accomplishments that we're proud of
Firstly, getting AL to appear on the screen by himself was a struggle that took much more time than expected from the team. After restarting many times and trying several different development tools, finally getting him to appear as we wanted was a tremendous relief.
Another feature that we are proud of is AL's ability to express himself through his body language and actions. Not only is he capable of walking back and forth across your computer screen, he also has some sweet moves that he is able to bust out when the time is right.
What we learned
During this Hackathon, we as a team learned how to use development tools such as NW.js and NodeJS, web design fundamentals including HTML, CSS, JS, and JSON, node package managers (NPM and NPX), command lines (CMD and PowerShell), 3rd Party API's (OpenAI), and of course GitHub for collaboration.
Some more specific things that we have learned include:
- Creating a Native App using Web Dev Tools
- Overriding Default Event Functions
- Implementing other Script Types into JS Files
and so much more...
What's next for ALFREDO
AL may be impressive on his own, but he is still new to this new world.
AL's future includes a revised project skeleton, which will be more optimally designed now that we have been through the process already.
AL also hopes to become more independent in the future, acquiring full autonomy to do and act as he likes (without being malicious of course).
One last thing AL hopes for one day is a companion of his own. Whether that be a furry companion of his own or a person of interest, we hope to one day fulfill that wish of his.
Built With
- clip-studio-paint
- cmd
- css
- github
- html
- javascript
- json
- node.js
- npm
- npx
- nw.js
- openai
- visual-studio

Log in or sign up for Devpost to join the conversation.