Inspiration/ The Problem

Creating powerpoints is an extremely mundane and tedious task that everybody has done or is still doing, whether you’re a student, a businessman, a CEO, or an entrepreneur. More specifically, the most monotonous part of creating a slideshow is the gathering of contextually related images for each slide. However, they are still an important part of a presentation, since they're used to make presentations more aesthetically pleasing or to fill up space. Whatever the reason, it can be agreed that a presentation without visuals is simply not worth viewing.

What it does

AutoSlide is a web app that automatically finds images from the web which contextually fit your slideshows and updates the presentation automatically with the new images. Users upload their imageless slideshow which is then processed. AutoSlide returns a zip file containing an updated slideshow along with extra images for the slideshow in case the user is unsatisfied with any of the current ones.

How we built it

We built AutoSlide using Python, Django, HTML, Bootstrap, and CSS. One important aspect of our program was determining the keywords in the slideshow. To accomplish this, we used the NLTK library for Python. Another important aspect of our program was querying for images, which was done with the Requests library.

The app consists of backend processing and frontend user interfaces put together with the Django framework. The backend does all the heavy lifting in terms of processing while the frontend continually exchanges data with the server so as to offer an engaging UI/UX.

Challenges we ran into

We faced a variety of challenges at different stages of implementation.

Starting with the processing, one of the issues we had was determining where to put images on a slide. The data provided by the slides, we found, lacked the exact numbers we needed. So it required some ingenuity with manipulating the numbers and we found ourselves applying problem-solving skills from competitive programming such as the implementation of the classical histogram algorithm.

Another problem we faced during the processing was that it was hard to find the best keywords for a given slide. To combat this, we looked at different POS (parts-of-speech) we could target and we tested with multiple models until we settled with one that we were satisfied with.

In the backend, one of our biggest issues was finding a way to communicate with the frontend by delivering files through the API calls. Through a lot of trials and redesigns we were able to put together a solid framework for file exchange between the server and client-side.

For the frontend, one of the hardest tasks was to get the parallax scrolling up and working. As with the backend, finding a solution to our problems required a lot of research and finding more ways that didn't work than ones that did. However by utilizing some less common CSS tricks, we were able to get a working version that we were very satisfied with.

Accomplishments that we're proud of

We’re proud of creating a high-performing backend, and a clean, modern user interface to support it. In particular, we were proud of the parallax effect found on the home page, as well as our algorithm efficiency when inserting images into the slideshow. To optimize our code and allow it to run in a reasonable amount of time, we used dynamic programming. Our problem involved finding the largest unoccupied rectangular area on the slide, which is closely related to the classic problem of finding the largest rectangular area in a histogram. In the end, this resulted in our app producing satisfying outputs with efficiency.

What we learned

AutoSlide was our first project working with manipulating slideshows, parallax, and file sharing. Additionally, we deepened our knowledge regarding familiar topics, such as Django, where we worked with the REST API framework for the first time. In the Figma workshop, we learned about how to create website prototypes and how it’s an amazing resource to plan out web apps.

What's next for AutoSlide

The next steps for AutoSlide are to provide more settings to allow users to more accurately narrow down the types of images they are looking for in their slideshow. Possible settings include colour scheme, image orientation, and image style (i.e. animation, painting).

+ 6 more
Share this project: