In this third part of the ML project miniseries, we'll explore how to publish your newly created solar panel detection application using streamlit. <ol><li><a href="https://appsilon.com/using-ai-to-detect-solar-panels-part-1/" target="_blank" rel="noopener noreferrer">Data collection and preprocessing</a></li><li><a href="https://appsilon.com/detecting-solar-panels-with-fastai-part-2/" target="_blank" rel="noopener noreferrer">Training neural network model using<code class="language-r">fastai</code></a></li><li>Deploying your app using<code class="language-r">streamlit</code></li></ol> We've been working on building a tool to automatically detect solar panels from orthophotos. So far we've gone through how to collect and preprocess these images and use them to train a neural network model with fastai. In this part, we'll focus on creating a web app PoC using<code class="language-r">streamlit</code>. You've come all this way and built your very own solar panel segmentation model. Why not share it with your friends and colleagues? Show off your hard work and learn how to create various data-related apps using<code class="language-r">streamlit</code>. <ul><li><a href="#streamlit" rel="noopener noreferrer">Streamlit</a></li><li><a href="#hello-world" rel="noopener noreferrer">Hello World in streamlit</a></li><li><a href="#latex-demo" rel="noopener noreferrer">Latex Demo</a></li><li><a href="#streamlit-poc" rel="noopener noreferrer">Streamlit PoC</a></li><li><a href="#publication" rel="noopener noreferrer">Publishing streamlit app</a></li><li><a href="#summary" rel="noopener noreferrer">Summary</a></li></ul> <h2 id="streamlit">What is streamlit</h2> <a href="https://pypi.org/project/streamlit/" target="_blank" rel="noopener noreferrer">Streamlit</a> is a relatively new, open-source app framework that lets data scientists and ML engineers create and publish apps quickly. And it's done all in Python. Now, if you're not a Python guru or want something with a little more 'React' feel to it, don't fret. There are multiple dashboard frameworks you can choose from. For instance, our personal favorite - R Shiny. There's also Dash, Viola, and you have the ability to share a jupyter notebook or create something from scratch in flask. Since its publication in 2019,<code class="language-r">streamlit</code>has seen significant interest - <a href="https://github.com/streamlit/streamlit" target="_blank" rel="noopener noreferrer">over 15.9k stars on Github</a>! It continues to provide the Python community with functionality upgrades and regular maintenance. The library helps users create PoCs, apps, and dashboards as easily as possible, as quickly as possible, and all for free. It's not unlike R Shiny - with the exception that R Shiny is a - you guessed it! - R package. <h2 id="hello-world">Writing hello world app in streamlit</h2> There's this idea with<code class="language-r">streamlit</code>that you should be able to write what you want to see when you want to see it. Keep that in mind when trying to understand the code. <script src="https://gist.github.com/pstorozenko/e9b75cbd46c57e43f19937cdbff03489.js?file=st_hello_world.py"></script> You can run your app with a simple command:<code class="language-r">streamlit run st_hello_world.py</code>in the terminal. <img class="size-full wp-image-11888 aligncenter" src="https://webflow-prod-assets.s3.amazonaws.com/6525256482c9e9a06c7a9d3c%2F65b01f52817460dff137460c_streamlit_hello.webp" alt="streamlit hello application" width="1914" height="981" /> &nbsp; <h2 id="latex-demo">Interactive and latex demo in streamlit</h2> It's cool to see something like this so fast. Especially with the lack of so-called boilerplate code. Every symbol serves some purpose! Now let's try adding some interactivity to the app. <script src="https://gist.github.com/pstorozenko/e9b75cbd46c57e43f19937cdbff03489.js?file=st_interactivity.py"></script> &nbsp; <img class="size-full wp-image-11880 aligncenter" src="https://webflow-prod-assets.s3.amazonaws.com/6525256482c9e9a06c7a9d3c%2F65b01f53cb8cd72a3d44fe67_interactivity.webp" alt="interactivity on a shiny streamlit app poc" width="1915" height="977" /> There are some people (like me!) for whom a decent scientific blog system/web app framework MUST allow easy work with latex equations. Fortunately, that's a piece of cake in streamlit. Due to the way f-strings work in Python, we have a tiny bit of boilerplate code to include here: <script src="https://gist.github.com/pstorozenko/e9b75cbd46c57e43f19937cdbff03489.js?file=st_interactivity_latex.py"></script> &nbsp; <img class="size-full wp-image-11882 aligncenter" src="https://webflow-prod-assets.s3.amazonaws.com/6525256482c9e9a06c7a9d3c%2F65b01f55ee976c4ea991aec8_interactivity_latex.webp" alt="interactivity latex" width="1917" height="977" /> <h2 id="streamlit-poc">Solar panel segmentation in streamlit PoC app</h2> By combining the features described above with a few more, we can create a functional demo app. But first, I want to point out a few things: <ol><li>fastai requires the<code class="language-r">label_func</code>function to be available in scope upon loading (recall part 2 of the miniseries). That's why it's defined like that.</li><li>Predictions are made based on either the provided example or an uploaded file.</li><li>After uploading/choosing a file from the list it's displayed until the model's prediction is calculated. Then the image is substituted for the alpha channel showing the location of the panels.</li><li>In lines 30-31, we change the mask to make solar panels non-transparent, and the rest of the image is slightly faded.</li></ol> <script src="https://gist.github.com/pstorozenko/e9b75cbd46c57e43f19937cdbff03489.js?file=app_v3.py"></script> &nbsp; <img class="size-full wp-image-11886 aligncenter" src="https://webflow-prod-assets.s3.amazonaws.com/6525256482c9e9a06c7a9d3c%2F65b01f5704abfeee1f05a82b_streamlit_fullapp.webp" alt="full streamlit app for deployment" width="666" height="1004" /> <h2 id="publication">Sharing streamlit app with the World</h2> And there we have it! A demo app that's ready to be shared with the world. We've added ours on RStudio Connect. You can explore the <a href="https://demo.appsilon.com/apps/solar-panels-detection-streamlit" target="_blank" rel="noopener noreferrer">Solar Panel Detection demo app</a> for yourself. It's pretty easy to make a 'Hello World' with<code class="language-r">streamlit</code>. And in this tutorial, we've shared with you how to add a trained model. If you have any issues, be sure to check out the <a href="https://streamlit.io/cloud" target="_blank" rel="noopener noreferrer">official tutorial</a>. While this method might be convenient for small applications to share with friends and colleagues, there's another solution for enterprises - using <a href="https://docs.rstudio.com/connect/user/streamlit/" target="_blank" rel="noopener noreferrer">RStudio Connect</a>. So keep an eye out for a future post on how to upgrade your app deployment. In the meantime, feel free to contact us at hello@appsilon.com should you need any immediate assistance. <h2 id="summary">Conclusion</h2> Using the new Python library streamlit, we were able to share our impressive solar panel identifier model with the world! We learned that this library is a great way to quickly visualize your Python experiments and a fairly friendly tool for beginners with great expressive power - a true Python package. I guess that's why its popularity is growing every month. And probably why you should be utilizing it more! Sign up for our newsletter to get updates and receive our latest blogs in your inbox - like how to deploy streamlit apps on RStudio Connect! This project was written under: <ul><li>fastai version 2.4.1</li><li>streamlit version 0.86.0</li></ul>