Before you dive into my story looking for details on ‘how’, let me save you time and give you an answer right away:
- Answer: you should give users sample code, pre-filled with parameters that they chose while playing with an interactive web app.
- Example: Recently, I created a web app "Distribution Analyser" that allows users to interactively explore continuous distributions and fit them to their data, giving them figures and tables as a result. In addition, they will receive pre-filled Python code with their selected parameters (or result from the fitting), as shown in the screenshots below.
Web app with Streamlit
How it started
Having an idea for a web app, I started searching for tools that I could use to bring my idea to life (a story for next time). While searching, I found out about the existence of Streamlit, an open-source Python library for making custom web apps with which you can "build and deploy an app in several minutes". A few lines of code later, I had a basic functional app – I was sold!
~1 week later
An early prototype of the first feature "Explore Distributions" was ready and I was showcasing the app to friends (Niko and Matthijs). At some point, they asked "Can a user export parameters?" where my answer was "Oh, yes, they should be able to do that!"
Putting myself in the shoes of a user, I realised that despite having parameter values in the table, it would still take me a lot of time and effort to be able to reproduce the results obtained in 5–10 seconds using the app. If I can interactively explore, why can’t I generate some sample code to use these results elsewhere?
How to generate code within code?
Python’s answer: f-strings – simple and powerful
"F-strings provide a way to embed expressions inside string literals, using a minimal syntax. An f-string is an expression evaluated at run time, not a constant value." (PEP 498)
In Python: preface a string literal with an f and put your variable into curly braces {}, when you execute the code, those variables will get assigned values. See the simple example below (f-strings and their evaluated values are bolded):
platform = 'Towards Data Science'
author = 'Robert Dzudzar'
number_of_articles = 1
example = f"{author} wrote {number_of_articles} article(s) for {platform}."
print(example)
# Returns: Robert Dzudzar wrote 1 article(s) for Towards Data Science.
How do I generate code in ‘Distribution Analyser’?
Within the app, the user plays with widgets: they select a distribution, then they use sliders or input boxes to tweak distribution parameters (each distribution has its own set of parameters). Values from Streamlit widgets are passed to a function that makes the figure – so why can’t we pass code too?
Depending on the code and parameters, sometimes variables need to be tweaked to have the desired format in the f-string:
- In Distribution Analyser, to provide a user with generated code I need variable names or their values, or sometimes both, which I obtain with simple string manipulation. Once I get the desired format, I just pass it to the f-string (see Figure below). Created f-sting is then passed to a Streamlit button which will print it out when pressed.
The figure below shows a side by side comparison of f-strings in ‘Explore distributions‘ and generated code (f-strings and their values are highlighted). In the same fashion, this is done to obtain the code from the best-fit distribution function. You can find the entire web app source code on GitHub, and feel free to play with and explore Distribution Analyser on Streamlit Sharing.
In conclusion
Give more to users to save their time and effort.
For web app developers it will take only a few more functions added to their app (at least if they are using Python) to make simple, reproducible and ready-to-use code that they can give to users as part of the analysis results. Having such an option saves users hours or even days of taking notes and digging through the source code.