Package: h2o-lightwave
H2O LightwaveH2O Lightwave is a lightweight, pure-Python version ofH2O Wavethat can be embedded in popular async web frameworks like FastAPI, Starlette, etc.In other words, H2O Lightwave works without the Wave server.The integration consists of 2 steps:Add Wave's web assets directory to your framework's static file handler.Add a webSocket handler, and usewave_serve()to connect Wave to your web UI.That's it. You can now render UI elements using pure Python. Lightwave aims to be as minimal as possible and only provides:A simple way to render your UI.A simple way of capturing the user interactions (like button clicks, dropdown values etc.).Minimal state management.Nothing more, nothing less.Example FastAPI integration:fromfastapiimportFastAPI,WebSocket,WebSocketDisconnectfromfastapi.staticfilesimportStaticFilesfromh2o_lightwaveimportQ,ui,wave_servefromh2o_lightwave_webimportweb_directory# Lightwave callback function.asyncdefserve(q:Q):# Paint our UI on the first page visit.ifnotq.client.initialized:# Create a local state.q.client.count=0# Add a "card" with a text and a buttonq.page['hello']=ui.form_card(box='1 1 2 2',items=[ui.text_xl('Hello world'),ui.button(name='counter',label=f'Current count:{q.client.count}'),])q.client.initialized=True# Handle counter button click.ifq.args.counter:# Increment the counter.q.client.count+=1# Update the counter button.q.page['hello'].items[1].button.label=f'Current count:{q.client.count}'# Send the UI changes to the browser.awaitq.page.save()# Run: uvicorn hello_fastapi:app.# FastAPI boilerplate.app=FastAPI()# FastAPI: WebSocket must be registered before index.html handler.@app.websocket("/_s/")asyncdefws(ws:WebSocket):try:awaitws.accept()awaitwave_serve(serve,ws.send_text,ws.receive_text)awaitws.close()exceptWebSocketDisconnect:print('Client disconnected')app.mount("/",StaticFiles(directory=web_directory,html=True),name="/")We also recommend reading theblog postand otherintegration examples.Installationpipinstall"h2o-lightwave[web]"Lightwave requires websockets to function properly. Not all libraries come with them out of the box so you might need to install them additionally. For example, Starlette & FastAPI requirespipinstallwebsocketsto be able to expose websocket handlers. This might differ from framework to framework.WidgetsAll available widgets can be foundhere. We are working on separate docs for Lightwave.Custom HTML pageLightwave can also be used only for certain parts of your HTML pages, e.g. for charts. In addition to the integration steps above:Use theget_web_filesfunction which HTML links to scripts and styles for you to inject into your existing HTML.Render adivwith an idwave-root(<div id='wave-root'></div>) into which you want Lightwave to render.Render a parent container forwave-rootthat hasposition: relativeand has some dimensions attached.{# index_template.html #}<!DOCTYPE html><htmllang="en"><head><metacharset="UTF-8"><metahttp-equiv="X-UA-Compatible"content="IE=edge"><metaname="viewport"content="width=device-width, initial-scale=1.0"><title>Document</title><!-- Scripts and stylesheets required for Wave to work properly. -->{{ wave_files }}</head><style>/* Must have position: relative and some size specified (e.g. height, flexbox, absolute positioning etc.). */.wave-container{position:relative;height:800px;}</style><!-- Websocket URL can be changed if needed. Defaults to "/_s/". --><bodydata-wave-socket-url="/custom_socket/"><noscript>You need to enable JavaScript to run this app.</noscript><divclass="wave-container"><!-- Wave renders here. --><divid="wave-root"></div></div></body></html>ConfigurationBy default, Lightwave tries to connect to websocket route at/_s/. This can be configured by adding adata-wave-socket-urlattribute on the HTML body element (<body data-wave-socket-url='/my_socket_url/'>).LinksWebsite:https://wave.h2o.ai/Releases:https://pypi.org/project/h2o-wave/Code:https://github.com/h2oai/waveIssue tracker:https://github.com/h2oai/wave/issues