This is something I’m finding utterly amazing! Amazing in it’s simplicity and it’s amazing the subject isn’t documented better … and I find it frustrating with all the incomplete information in blog articles and websites that tout the ability to do so. This isn’t to say their information is entirely incorrect, just that it makes it difficult to produce a quick simple product for someone that’s impatient and simply wants a working answer. If your host supports Python you can without a doubt do all this on your hosted service, if not then this hopefully is a solution you can use. Especially if there is just a need for proof of concept or to simply get the data out there.
Notes on limitations:
- Only one instance of the “free” version
- End users will have to click “to continue” with the free version.
- If your Python code doesn’t run in the background or is reset by Colab you’ll have to update the code.
- If your host supports Python, and you elect to get a paid ngrok account this might be a longer term solution for you.
What follows seeks to be “complete” in that readers should be able to duplicate the following code and get a successful post of their data on their WordPress website. Let’s get started.
Prerequisites:
- Google Colab access (get a gmail account and make your life easier)
- Working Colab Python code that outputs a table (or other data in a tabular form similar to mine) as a data frame
- WordPress website
- An account with ngrok.com (do it … it’s free)
- Patience … but not much really. I’m pretty impatient.
Once you have these 5 things in place let’s start a new notebook in Colab and add some code. At the top of your Colab project add a code block to install the streamlit and pyngrok packages:
!pip install -q streamlit
!pip install pyngrokAdd another code block for your imports and the Python application you’re wanting to run. Here is an example of my code with a simple data frame:
%%writefile app.py
import streamlit as st
import pandas as pd
df1 = pd.DataFrame({'Company Name':['WhatsApp'], 'Founders':['Jan Koum, Brian Acton'], 'Founded': [2009], 'Number of Employees': ['50'] })
st.write("""
# Experimental Data
""")
st.table(df1)From the ngrok dashboard select “Setup & Installation” and scroll down just a bit and copy the line that says:
ngrok config add-authtoken xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxYou can place this in a code block of it’s own or include it with the next few lines of code that create the tunnel to display your results on a webpage (be sure to replace the xxxxxxxxxxxxxxxxxxxxxxxxxxxxxx with your authtoken:
from pyngrok import ngrok
!streamlit run app.py&>/dev/null&
# Connect the tunnel to port 8501
public_url = ngrok.connect(8501)
print(public_url)You’ll get a waring response something to the effect which you can ignore from a functionality view (from a security perspective you should investigate ngrok further and consider a paid account and IP restrictions):
WARNING:pyngrok.process.ngrok:t=2023-07-13T16:48:55+0000 lvl=warn msg="ngrok config file found at legacy location, move to XDG location" xdg_path=/root/.config/ngrok/ngrok.yml legacy_path=/root/.ngrok2/ngrok.yml
Along with a url:
NgrokTunnel: "https://blahblahblahcode.ngrok-free.app" -> "http://localhost:8501"
The public url is what you are looking for (“https://blahblahblahcode.ngrok-free.app“) this is the pyngrok tunnel to your data output. From here it’s a simple matter of creating an iframe with the URL. For reverence here’s the complete Colab code along with a few extra lines of code for testing and your entertainment:
When you open the URL you’ll get a message like the one below. As with all things free, you can get rid of it with a paid account. Luckily your enduser will only have to clear it once.
Click “Visit Site” and your results should display:
Last step and the easiest.
Within the page or post you want to present your data add a WordPress block and then choose “html” as the block type and insert the following code:
<style>
iframe {
border: none;
}
</style>
<iframe src="https://<insert your blahblahblahcode here, without the "<" and ">" and no spaces>.ngrok-free.app/?embedded=true" width="100%" height="500" allowfullscreen="" sandbox="allow-scripts allow-same-origin">
</iframe>“Save draft” and then “Preview” or “Publish”. “If” everything has worked up to this point then you should be in business. From here it becomes an output formatting process and dealing with the limitations of iframe. There are several output formats you may want to explore such as .json, cvs and markdown that may work for you, and as always I’m sure there are some plugins that may be of use. WordPress has some support docs on the use of iframes. “If” you have a solution of your own please share! … and like and share this page.