How to deploy as a web application?

[crxi]

Firstly, a big THANK YOU to @ramedina86 for making GUI development fun and efficient again!

I am creating a KNN demo for teaching purposes. Initially I tried Anvil (https://knn-demo.anvil.app/). Then Dash on Jupyter. Both experience was so-so. By chance, I came across StreamSync (the pigeon demo) and decided to give it a try. It was AWESOME! I love the separation of UI from backend code and the elegant UI designer.

So my KNN demo in StreamSync is now on GitHub (https://github.com/crxi/knn). I am looking for a way to deploy it (like the Anvil version). How do I go about doing that? Do I have to run it in Docker and host it on Google cloud? I am looking for a low-cost solution so that I can let my students interact with it instead of just watching me demo it over Zoom lessons. Any advice is appreciated.

[FabienArcellier]

Hi @crxi, I have developped a blueprint that show on how to use streamsync inside gitpod. gitpod should match your usecase to allow students to start an environment from your code and play with it on a sandbox.

If you want to release an application, you have to package it. We don't have option yet to host automatically streamsync project. It's recommended to use it with docker.

[FabienArcellier]

I can open a PR on your repo to implement this mechanism if it may help you. Let me know

[ramedina86]

Thanks @crxi that's an incredible compliment! I'm glad you find it useful.

I encourage you to try the approach @FabienArcellier mentioned. When I first tried it I couldn't believe how straightforward it was.

On Google Cloud (and Azure) you can deploy for free if you size it appropriately, check the free tiers.

In the future (few months from now, at least), we'll likely be able to allow users to deploy to our own cloud, using a command like streamsync deploy. For now, I agree that deployment isn't as straightforward as with something like Anvil (but the Gitpod approach comes close).

[crxi]

Thanks @FabienArcellier and @ramedina86 for the replies. I tried pip install streamsync on gitpod and it failed for some reason.

Anyway the good news is I figured out how to do it on render.com! Here are two apps:

• https://knn-with-streamsync.onrender.com/
• https://wwt-with-streamsync.onrender.com/

The steps are easy. Add requirements.txt and serve.py (as documented in streamsync doc) and have "python serve.py" as the execution command on Render. See https://github.com/crxi/knn and See https://github.com/crxi/wwt for the code.

The next thing I want to do is to combine them into one repository so that both apps can be served out by one instance of the webservice. I tried the script for FastAPI as shown here (https://www.streamsync.cloud/custom-server.html#multiple-apps-at-once) but it failed with "SyntaxError: Unexpected token 'I', "Internal S"... is not valid JSON" when I go to https://127.0.0.1:3333/knn on my local PC.

Are the instructions/script on that page correct? I can't find much info about multi-app deployment on the net. Here is my serve.py for the combined app.

import argparse
import uvicorn
import streamsync.serve
from fastapi import FastAPI, Response

parser = argparse.ArgumentParser(description='serve.py')
parser.add_argument('--loglevel', type=str, default='info',
                    help='Log level for the server script')
args = parser.parse_args()

root_asgi_app = FastAPI()
knn_app = streamsync.serve.get_asgi_app("./knn", "run")
wwt_app = streamsync.serve.get_asgi_app("./wwt", "run")

root_asgi_app.mount("/knn", knn_app)
root_asgi_app.mount("/wwt", wwt_app)

@root_asgi_app.get("/")
async def init():
    return Response("""
    <h1>Welcome to ML Demo</h1>
    """)

uvicorn.run(root_asgi_app,
    host="0.0.0.0",
    port=3333,
    log_level=args.loglevel,
    ws_max_size=streamsync.serve.MAX_WEBSOCKET_MESSAGE_SIZE)

[FabienArcellier]

Hi @crxi,

That great you find a way to run it on Renders.

I have already noticed this problem in #186 (comment). I did not document it and I did not open an issue to fix it. We use a FastAPI mechanism called lifespan which is incompatible with sub asgi application.

We need to adapt your code to make your program work. Cloud you try that and tell me if it's work fine ?

import argparse
from contextlib import asynccontextmanager

import uvicorn
import streamsync.serve
from fastapi import FastAPI, Response

parser = argparse.ArgumentParser(description='serve.py')
parser.add_argument('--loglevel', type=str, default='info',
                    help='Log level for the server script')
args = parser.parse_args()

knn_app = streamsync.serve.get_asgi_app("./knn", "run")
wwt_app = streamsync.serve.get_asgi_app("./wwt", "run")


@asynccontextmanager
async def lifespan_context(app: FastAPI):
    async with knn_app.router.lifespan_context(app):
        async with wwt_app.router.lifespan_context(app):
            yield

root_asgi_app = FastAPI(lifespan=lifespan_context)
root_asgi_app.mount("/knn", knn_app)
root_asgi_app.mount("/wwt", wwt_app)

@root_asgi_app.get("/")
async def init():
    return Response("""
    <h1>Welcome to ML Demo</h1>
    """)

uvicorn.run(root_asgi_app,
    host="0.0.0.0",
    port=3333,
    log_level=args.loglevel,
    ws_max_size=streamsync.serve.MAX_WEBSOCKET_MESSAGE_SIZE)

[crxi]

Thanks @FabienArcellier! That worked really well! See https://mldemo.onrender.com. It combines both demos now.

[FabienArcellier]

The result feels amazing 🥳. I really enjoy trying it.

If you want to share your work with student, I would advocate to try again on gitpod it shoud amaze you how it would be easy for your student to leverage and tune your apps. If you feel curious, contact me through discord.

[crxi]

Thanks for your help! I will give gitpod another shot in the coming weeks. Didn't seem to get it right the first time.

Right now I just need something that works to explain concepts to my students. 🤣

[ramedina86]

We really liked your app and discussed it during our scrum today. Thanks for sharing!

[crxi]

Sorry for revisiting an old thread. (Should I start a new Discussion although it is related to the above?)

I've recently migrated my mldemo code to Writer Framework (see https://github.com/crxi/mldemo-wr). The migration was easy - thanks to the team for making it so!

I've combined the 3 apps into 1 and displayed them in 3 different Tabs. To manage the states, I've simply nested them (main.py):

initial_state = wf.init_state({
    "my_app": {
        "title": "ML Demo"
    },
    "knn" : knn.initial_state,
    "wwt" : wwt.initial_state,
    "kcl" : kcl.initial_state,
})

However, that means in knn.py, I had to do this workaround:

def draw_graph(state):
    if 'knn' in state: state = state['knn']
    ...

to minimize the changes in my code migration.

My question: Is this the best way to handle Tabs and their internal states? Or is there a better/recommended coding pattern/design?

[FabienArcellier]

Hello,

That's a great question.

The simplest and most robust pattern is to add a initial_state dictionary in every module. This dictionary will be transformed upon loading into State by WF engine. You won't be to use affectation statement on every event handler.

knn.py

def updated_counter(state, payload):  
  state["knn"]["counter"] += 1  
  
initial_state = {  
    "counter": 0  
}

main.py

import knn
import wwt
import kcl

wf.init_handlers(knn)

initial_state = wf.init_state({
    "my_app": {
        "title": "ML Demo"
    },
    "knn" : knn.initial_state,
    "wwt" : wwt.initial_state,
    "kcl" : kcl.initial_state,
})

To extend the discussion, I have tried several patterns to decompose application and I haven't found a great one yet. I have identified 2 constraints that limit composition strategy :

• event handler receive global state, so you have to target the key declared in main.py (hard to change)
• state should be initialized with all the keys on startup (I am not fully sure for this one, but it is easy to change)

Regards,