Hi! This time I finished the actual website for SPARC!
First I want to acknowledge that this devlog was made for a significantly longer time than my previous devlogs as I had the wrong approach at the beginning and had to learn to use a new framework.
—Brief Summary–––––––––––––––––––––––––
At the beginning, I had the false belief that I would only need to use HTML, CSS, and JS for this website, but eventually I realized that I had to use Python, in particular the Flask framework. I first altered my designs, reorganized my files, and fixed multiple bugs and typos in my code. I created the informative pages of SPARC that provided a perspective on scoliosis treatments and overall information about the website. After learning Flask, I made a dashboard page that allowed the user to save and create sessions. Each session requires the user to upload an image of someone’s back or use a sample image to see the results. It displays the model’s output of the image with the spine points, in addition to hip tilt, shoulder tilt, and the severity of the scoliosis. This analysis required me to make multiple mathematical calculations with different approaches while maintaining the accuracy of the measurements.
–In Detail—————————————————————
I began the website part of this project with the idea that I would use HTML, CSS, and JS, languages that I have previously used. In regards to the website design, I created an outline of my website on Canva and then found background images and icons online. However, midway into programming the website, I found out from resarching similar projects that I could not integrate the AI model with just HTML, CSS, and JS. At that time, I was planning to make another devlog, but I wanted to make some actual progress first, so I continued on. I also changed my design by adding more features, which I believed would enhance SPARC.
I began to learn how to use python, in particular the framework Flask for the first time. While transitioning to Flask, I had to reorganize my files and change the file paths. During my reorganization, I discovered I had errors such as typos and bugs in my CSS and JS :(( I created multiple informative tabs such as the Home, About, Info, and Guide pages. All of the text there is written by me, using my experiences, and credible sources such as Shriners Children’s, a nonprofit healthcare system. I tried to provide a personal perspective for people affected by scoliosis.
Finally for the dashboard page, I was able to load the model and allow it to process images on the website using Python. I also used a database to allow the user to make multiple sessions that could be saved. Each session allows the user to upload images of a person’s back or use the sample images, and view the resulting image of the spine points that the model outputs. I was really excited for this part of the project as I was able to use my knowledge of Math as I experimented with ways to use the model’s output coordinates to provide a conclusion regarding the measured severity of the patient’s scoliosis, hip tilt, and shoulder tilt. I had to be careful in this step as I didn’t want external factors such as how close the patient was to the camera to affect the accuracy, so I used the formula (maximal deviation) / (spine length) and used the sample images as guidelines. To calculate the maximal deviation, one formula that I had to use was the point to line formula (distance from (x0, y0) to line ax+by+c=0 is |ax0+by0+c|/sqrt(aa+bb)).
For the deployment, I spent a really long time trying to deploy it for free on Python Anywhere, but no matter what memory optimizations I made, it still surpassed the disk limit :((( I was really disappointed and had wanted this model to be available for everyone to try online, but obviously anyone can still access it by cloning the Github project and running it locally. (instructions are in the readme)