- HTML5 Canvas
- HTML / CSS
NeuraNex is a software application I am developing for Lifetimes Infinity. NeuraNex is a graphical tool used to construct and train artificial neural networks. NeuraNex will be used internally within Lifetimes Infinity, but will also be offered as a product to external customers. My main priority in developing NeuraNex is to ensure it stays aligned with Lifetimes Infinity's long-term roadmap.
- Animated website background: Maintains the animation across multiple pages.
- Basic Editor (in Development): Simple interface for loading data and training basic networks.
- Advanced Editor (in Development): Complete control over network layout and neuron logic.
Project Challenge: Animated Background Spanning Multiple Pages
Solution: Save and Load Data in Local Storage
The NeuraNex website has a slow-moving background animation for the landing page. As I built more pages to the site, navigating from page to page felt disjointed with the animation resetting on each page load or refresh. I wanted to be able to have the animation continue even when the user changes to a different page. Since NeuraNex is a web application, it is important to convey to users that the team building NeuraNex knows what they are doing in all aspects, including the presentation of the rest of the website around the application. That's why I was driven to make the animation work across multiple pages. There were two ways I saw of solving this challenge:
- Have the website actually just be one page, but have it dynamically load in each page's content as needed. I didn't like this idea very much at all, mainly because I wanted to be able to have links to specific pages without any weirdness.
- Save the current state of the animation to local storage and then load it back in when a page loads. This option was going to be a lot more work in the short-term, since I was going to have to rework much of the animation script to be able to save and load data. However, the long-term benefits of this method seemed a lot better, so I decided to see if I could make this work.
I didn't write the original animation code myself (original project: polygonizr). I had already tweaked it a bit to get it to look how I wanted, but now I needed to dive in and figure out how everything was put together to be able to figure out how I could create a save/load system for it.
- I did a first pass through all the code just to read it all and make sure I knew what was going on.
- Then I stripped out all of the parts that I wasn't using for my version of the animation. I also cleaned up some of the formatting to make everything consistent. From stripping out all the parts I didn't need, I got the bonus effect of decreasing the file size from 73KB to 6KB (even after adding my new code for saving/loading).
- The way the animation data was stored originally didn't allow for saving/loading data at all, so after getting everything all cleaned up, I rewrote several sections dealing with how the animation data was created and stored.
- Once the data formats and data-related functions were all reworked, adding the actual code for saving and loading data didn't take too long.
- Upon leaving a page, the animation data is saved to local storage.
- When a page is loaded, it checks to see if there is animation data. If so, it loads the data and resumes the animation. If there are any issues with loading the data, or if the window has been resized, it will just generate new animation data.
Project Challenge: Web Application vs Desktop Application
Solution: Web Application
Why we decided to build NeuraNex as a web application:
- The application itself will be relatively lightweight, so providing it right in the browser will mean less barriers to entry for users.
- Easier to deploy updates more regularly and seamlessly.
- All users will be running the latest version, making troubleshooting issues easier.
- We plan to host templates and pre-made solutions on the website. Integrating this with an online app will be easier than integration with a desktop application, since it will mean less things needing to communicate with each other.
Project Challenge: Full Control Over Neuron Logic
Solution (in Development): Create a Neuron Logic Language
On a related note, there isn't really a standard format that artificial neural networks are saved in, so we had to decide what kind of formats we wanted to support saving to and how we could best save files in our own format that supports everything NeuraNex offers. The save files for networks built with NeuraNex need to allow for saving of neuron logic in addition to the network structure.