Meet Streamlit Sharing | Build a Simple Photo Editor

Rafael Messias Grecco
Mar 29 · 8 min read
Ylanite Koppens

I recently received an invitation from Streamlit to test their new tool, Streamlit Sharing, which allows implementation, quickly and very simply, the implementation of an App created with Streamlit, since this project is already in a Github repository.

I confess that I was surprised by the speed with which I was able to implement a project of mine, which previously ran only locally on my machine and now anyone from anywhere in the world can access this application.

Before going into the code details, it is important that this tool is not released for everyone, but you can request access, just click here and you will be redirected to the Streamlit Sharing page.

Let’s go to the code

The complete code is on my Github, if you want to check it out, click here

To enter the code, first, we will understand what will be built, the idea is that a person can upload an image and make some modifications to that image, for example, apply some filters, increase or decrease the brightness or contrast among others possible modifications.
It is a very simple application, but it is very enriching for people who are studying computer vision.

The first step, as usual, is to import the libraries that will be used.

In line 7, I have already configured the size of our image, here I left 500, however, you can adjust this value as you wish in your project.

As we saw in my article, Introduction to Streamlit, all the code of our application has to be inside a function, as follows:

As stated, all the code must be within this function that was created.

That done, let’s create a function that will load the Placeholder image, this step is necessary because, to deploy with Streamlit Sharing your image cannot be on your machine, in this case, I put it in the project repository and used it from there. You can use the same one, just go to the Github link I left at the beginning, this image is in the images folder.

You may have noticed that this function is below an @ st.cache, this is so that when running our Streamlit application, this function is loaded only once, which makes the operation of the App more agile.

What this function basically is is to take the URL of our image, which as I said is on Github, and returns the image contained in that URL.

Now that we have created our function, we can call it and pass our URL as a parameter, in parallel, we will add the title to our App, as well as its sidebar.

In this step, I have also added the options that will be in the sidebar.
In line 7, I stored the user’s choice in the op variable.

Let’s see how our application is doing so far:

It is possible to notice that when I select an option in the menu, no changes are made, this is because we have not programmed anything yet for when we click on any option, we will do that in the next step.

Let’s see how our code starts when op = Filters

Okay, initially it may seem like a complicated step, however, what I did here was very simple, when the user sets the Filters option, it enters that part of the code, where it will be possible for her to upload an image of his machine, for that we use the command st.file_uploader(), as parameters we pass the text we want to appear and then the file formats that will be allowed to perform the upload, here are the main 3 for images.

Let’s check how the moment is:

Notice that the list of Filters we created already appears in the sidebar. As well as space for the user to upload images from his machine.

Let’s do the filters, I’ll add the code and I’ll explain each part of the code.

The first filter is Grayscale, which is the simplest to create, using the cvtColor() function and finally, with the command st.image() we show the image in our App Streamlit.

The next filter is Sepia, to be applied it is necessary to build the kernel that offers the desired result. To find the value of this Kernel, it is very simple, I found them here.
With the values ​​that will be placed in the kernel, we set it up and finally apply it with the cv2.filter2D() function.

Now, the Blur filter has an addition to the others already presented, initially, it is very simple, where we apply the Gaussian Blur function, but it has a new component, a slider, where it is possible to vary the intensity of the blur that will be applied. For that we use the slider function of Streamlit, which has as parameters, the description, in quotation marks, then the next values ​​refer to the minimum, maximum, and the quantity that will be set as standard and finally the step, which here is worth 2, so the blur will vary from 2 to 2, this is because the result of the Gaussian Blur Function is more satisfactory when a kernels with odd numbers are applied.

The next filter is the Contour filter, its construction is very simple and it follows the steps of first applying a Blur Filter and then applying the Canny edge detector with the cv2.canny() function.

The last filter is sketch, which is to make it look like the photo was drawn, the construction of each step of this filter is in Github, in the Support Notebook. But in a nutshell, we take the image that is in grayscale and invert it, the black tones turn white and the opposite also occurs. This inverted image is where we are going to apply a Blur Filter. Next, we will use the cv2.divide function to divide the pixels of those in the gray-scale image with 255-blur_image, this method returns an image that resembles a drawing.
Be sure to check the Notebook, where you can view these images that are in the middle of the process.

And if no filter is selected, we will simply show the original image.

Let’s check the result:

As you can see the result was very satisfactory, and in the image that the Blur Filter was applied, the slide appeared, where it is possible to control the intensity of Blur.

However, we still have a lot of work, we have to schedule image corrections.

I’m going to do it the same way as before, I’m going to present the whole code, then I’m going to comment part by part of the code.

Here the MImage variable will store what improvement the user wants to apply to the image, the options are:

  • Contrast
  • Brightness
  • Sharpness

This step is simpler than the previous one, because we have a pattern, in the variable enh, we will always store what we want to apply for improvement, always in the same way ImageEnhance followed by the improvement we want to perform, for example in the first case we have: ImageEnhance.Contrast, then with the enhance function we have already put the improvements in the function of the value placed in the slider and all the improvements follow the same pattern.

In the end, I already added what will be in the Informations menu, in case I put a simple sentence informing who developed it, feel free to put the information you find relevant.

With all these steps ready, it’s time to get to know Streamlit Sharing, with your project completed, you can upload it to Github, remembering to import requirements.txt that can be obtained with pipreqs, which must be installed and used. this way:

pip install pipreqs
pipreqs /home/project/location

If you have any necessary packages with apt-get, you must upload them to Github with a packages.txt, in the Github link, I used this file, check how it is used, Click here.

After the project is already on Github, and you have already received your invitation to test Stramlit Sharing, we will deploy the app.

If your request has not been answered yet, wait a little longer and continue following the tutorial to see how simple it is to use.

After clicking the New App button, this window will open:

And after selecting the repository that your application is in and which branch, you will select which .py file your code is in, as mine only has the it has already identified automatically.

Clicking on deploy you will wait a few minutes that the deployment will be done, after those minutes that vary according to the complexity of your application, it is ready and your application is already available for everyone to see.

In the initial tab of Streamlit Sharing, all your applications are left.

Check the result of this article, just click here.

And we come to an end, I hope this tutorial has helped you to know a little more about Streamlit and also the field of Computer Vision. Feel free to leave a suggestion in the comments and see my other articles. Good studies!!!

Analytics Vidhya

Analytics Vidhya is a community of Analytics and Data…

Analytics Vidhya

Analytics Vidhya is a community of Analytics and Data Science professionals. We are building the next-gen data science ecosystem

Rafael Messias Grecco

Written by

Electrical engineering student and technology enthusiast. Projects in fields such as Machine Learning, Time Series and Computer Vision.

Analytics Vidhya

Analytics Vidhya is a community of Analytics and Data Science professionals. We are building the next-gen data science ecosystem

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store