async def serve(q: Q):
if q.args.start:
q.page['form'] = ui.form_card(box='1 1 12 10',
items=[ui.progress('Running...')])
await q.page.save()
seconds = random.randint(1, 6)
# DON'T DO THIS!
# This will make your app unresponsive for some time:
# message = blocking_function(seconds)
# Do this instead:
with concurrent.futures.ThreadPoolExecutor() as pool:
message = await q.exec(pool, blocking_function, seconds)
# You can also pass a ProcessPoolExecutor, like this:
# with concurrent.futures.ProcessPoolExecutor() as pool:
# message = await q.exec(pool, blocking_function, seconds)
q.page['form'] = ui.form_card(box='1 1 12 10',
items=[ui.message_bar('info', message)])
await q.page.save()
else:
q.page['form'] = ui.form_card(
box='1 1 12 10', items=[ui.button(name='start', label='Start')])
await q.page.save()
async def display_progress_bar(q: Q, form, seconds: int):
for i in range(seconds):
progress_value = (i + 1.0) / seconds
form.items = [
ui.progress(
label='Downloading the interwebs...',
caption=f'{int(progress_value * 100)}%',
value=progress_value,
)
]
await q.page.save()
await q.sleep(1)
def form_training_progress(q: Q):
# display when model training is in progress
return [
ui.text(content=DATASET_TEXT),
ui.dropdown(name='dai_instance_id', label='Select Driverless AI instance', value=q.client.dai_instance_id,
choices=q.client.choices_dai_instances, required=True),
ui.buttons(items=[
ui.button(name='train', label='Train', primary=True, disabled=True),
ui.button(name='predict', label='Predict', primary=True, disabled=True)
]),
ui.progress(label='Training in progress...', caption='This can take a few minutes...'),
ui.text(content=q.client.model_details)
]
async def initialize_app(q: Q):
# Inputs for the app, Should be read from a config file
walmart_train_s3 = "s3://h2o-benchmark/walmart-sales-forecasting/walmart_train.csv"
walmart_predictions_s3 = "s3://h2o-benchmark/walmart-sales-forecasting/walmart_test_preds.csv"
walmart_train = './walmart_train.csv'
walmart_predictions = './walmart_test_preds.csv'
# Setup UI elements on the page
q.page['meta'] = ui.meta_card(box='', title='H2O Wave - Sales Forecasting')
q.page['title'] = ui.header_card(
box='1 1 12 1',
title='Sales Forecasting',
subtitle='Exploring historic demand and forecasts for supply chain optimization',
icon='GiftBox',
icon_color='#ffe600',
)
q.page['loading'] = ui.form_card(
box='4 4 6 1',
items=[ui.progress(label='Downloading sales data from AWS S3 ...', caption='')]
)
await q.page.save()
# Download input data from S3
train = download_file_from_s3(walmart_train_s3, walmart_train, overwrite=False)
if train is None or not os.path.isfile(train):
sys.exit(1)
pred = download_file_from_s3(walmart_predictions_s3, walmart_predictions, overwrite=False)
if pred is None or not os.path.isfile(pred):
sys.exit(1)
q.page['loading'].items[0].progress.label = 'Processing sales data ...'
await q.page.save()
# Create default UserInputs and SalesData
q.app.user_inputs = UserInputs()
q.app.user_inputs.reset()
q.app.sales_data = SalesData(walmart_train, walmart_predictions)
plot_data = q.app.sales_data.get_plot_data(**asdict(q.app.user_inputs))
del q.page['loading']
q.page['sidebar'] = ui.form_card(
box='1 2 3 9',
items=get_user_input_items(q.app.sales_data, q.app.user_inputs)
)
await draw_weekly_sales_plot(q, plot_data)
async def serve(q: Q):
if q.args.start:
q.page['form'] = ui.form_card(box='1 1 -1 -1', items=[ui.progress('Running...')])
await q.page.save()
seconds = random.randint(1, 6)
# DON'T DO THIS!
# This will make your app unresponsive for some time:
# message = blocking_function(seconds)
# Do this instead:
message = await q.run(blocking_function, seconds)
q.page['form'] = ui.form_card(box='1 1 -1 -1', items=[ui.message_bar('info', message)])
await q.page.save()
else:
q.page['form'] = ui.form_card(box='1 1 -1 -1', items=[ui.button(name='start', label='Start')])
await q.page.save()
def get_user_input_items(sales_data, user_inputs, progress=False):
return [
ui.text_l('**Select Area of Interest**'),
ui.dropdown(
name='stores',
label='Store IDs',
values=[str(x) for x in user_inputs.stores],
choices=[ui.choice(name=str(x), label=str(x)) for x in sales_data.stores_unique],
tooltip='Select the Stores to include in the prediction',
trigger=True,
),
ui.text_xs('⠀'),
ui.dropdown(
name='departments',
label='Product IDs',
values=[str(x) for x in user_inputs.departments],
choices=[ui.choice(name=str(x), label=str(x)) for x in sales_data.departments_unique],
tooltip='Select the Products to include in the prediction',
trigger=True,
),
ui.frame(content=' ', height="40px"),
ui.text_l('**Generate Sales Forecast**'),
ui.slider(
name='n_forecast_weeks',
label='Number of Weeks',
min=0,
max=len(sales_data.prediction_dates) - 1,
step=1,
value=user_inputs.n_forecast_weeks,
trigger=True,
tooltip='Select the number of weeks into the future to predict'
),
ui.text_xs('⠀'),
ui.button(
name='reset',
label='Reset',
primary=True,
tooltip='Click to reset all values to defaults'
),
ui.text_xs('⠀'),
ui.progress(label='', caption='', visible=progress),
]
def get_user_input_items(sales_data, user_inputs, progress=False):
return [
ui.text_l('**Prediction Configuration**'),
ui.dropdown(
name='stores',
label='Store IDs',
values=[str(x) for x in user_inputs.stores],
choices=[
ui.choice(name=str(x), label=str(x))
for x in sales_data.stores_unique
],
trigger=True,
),
ui.dropdown(
name='departments',
label='Product IDs',
values=[str(x) for x in user_inputs.departments],
choices=[
ui.choice(name=str(x), label=str(x))
for x in sales_data.departments_unique
],
trigger=True,
),
ui.slider(
name='n_forecast_weeks',
label='Weeks to predict',
min=0,
max=len(sales_data.prediction_dates) - 1,
step=1,
value=user_inputs.n_forecast_weeks,
trigger=True,
),
ui.button(name='reset',
label='Reset',
primary=True,
tooltip='Click to reset all values to defaults'),
ui.progress(label='', caption='', visible=progress),
]
async def serve(q: Q):
q.page['example'] = ui.form_card(box='1 1 4 10', items=[
ui.text_xl(content='Extra-large text, for headings.'),
ui.text_l(content='Large text, for sub-headings.'),
ui.text_m(content='Body text, for paragraphs and other content.'),
ui.text_s(content='Small text, for small print.'),
ui.text_xs(content='Extra-small text, for really small print.'),
ui.separator(label='A separator sections forms'),
ui.progress(label='A progress bar'),
ui.progress(label='A progress bar'),
ui.message_bar(type='success', text='Message bar'),
ui.textbox(name='textbox', label='Textbox'),
ui.label(label='Checkboxes'),
ui.checkbox(name='checkbox1', label='A checkbox'),
ui.checkbox(name='checkbox1', label='Another checkbox'),
ui.checkbox(name='checkbox1', label='Yet another checkbox'),
ui.toggle(name='toggle', label='Toggle'),
ui.choice_group(name='choice_group', label='Choice group', choices=[
ui.choice(name=x, label=x) for x in ['Egg', 'Bacon', 'Spam']
]),
ui.checklist(name='checklist', label='Checklist', choices=[
ui.choice(name=x, label=x) for x in ['Egg', 'Bacon', 'Spam']
]),
ui.dropdown(name='dropdown', label='Dropdown', choices=[
ui.choice(name=x, label=x) for x in ['Egg', 'Bacon', 'Spam']
]),
ui.dropdown(name='dropdown', label='Multi-valued Dropdown', values=[], choices=[
ui.choice(name=x, label=x) for x in ['Egg', 'Bacon', 'Spam']
]),
ui.combobox(name='combobox', label='Combobox', choices=['Choice 1', 'Choice 2', 'Choice 3']),
ui.slider(name='slider', label='Slider'),
ui.range_slider(name='range_slider', label='Range slider', max=99),
ui.spinbox(name='spinbox', label='Spinbox'),
ui.date_picker(name='date_picker', label='Date picker'),
ui.color_picker(name='color_picker', label='Color picker'),
ui.buttons([
ui.button(name='primary_button', label='Primary', primary=True),
ui.button(name='standard_button', label='Standard'),
ui.button(name='standard_disabled_button', label='Standard', disabled=True),
]),
ui.file_upload(name='file_upload', label='File upload'),
ui.table(name='table', columns=[
ui.table_column(name='col1', label='Column 1'),
ui.table_column(name='col2', label='Column 2'),
], rows=[
ui.table_row(name='row1', cells=['Text A', 'Text B']),
ui.table_row(name='row2', cells=['Text C', 'Text D']),
ui.table_row(name='row3', cells=['Text E', 'Text F']),
]),
ui.link(label='Link'),
ui.tabs(name='tabs', items=[
ui.tab(name='email', label='Mail', icon='Mail'),
ui.tab(name='events', label='Events', icon='Calendar'),
ui.tab(name='spam', label='Spam'),
]),
ui.expander(name='expander', label='Expander'),
ui.frame(path='https://example.com'),
ui.markup(content=html),
ui.template(
content=menu,
data=pack(dict(dishes=[
dict(name='Spam', price='$2.00'),
dict(name='Ham', price='$3.45'),
dict(name='Eggs', price='$1.75'),
]))
),
ui.picker(name='picker', label='Picker', choices=[
ui.choice('choice1', label='Choice 1'),
ui.choice('choice2', label='Choice 2'),
ui.choice('choice3', label='Choice 3'),
]),
ui.stepper(name='stepper', items=[
ui.step(label='Step 1', icon='MailLowImportance'),
ui.step(label='Step 2', icon='TaskManagerMirrored'),
ui.step(label='Step 3', icon='Cafe'),
]),
ui.visualization(
plot=ui.plot([ui.mark(type='interval', x='=product', y='=price', y_min=0)]),
data=data(fields='product price', rows=[(c, x) for c, x, _ in [f.next() for _ in range(n)]], pack=True),
),
ui.vega_visualization(
specification=spec,
data=data(fields=["a", "b"], rows=[
["A", rnd()], ["B", rnd()], ["C", rnd()],
["D", rnd()], ["E", rnd()], ["F", rnd()],
["G", rnd()], ["H", rnd()], ["I", rnd()]
], pack=True),
),
ui.button(name='show_inputs', label='Submit', primary=True),
])
await q.page.save()
# Form / Progress / Updating
# Update a #progress bar's completion status periodically.
# #form
# ---
import time
from h2o_wave import site, ui
page = site['/demo']
page['example'] = ui.form_card(box='1 1 4 -1',
items=[
ui.progress(label='Basic Progress'),
])
page.save()
for i in range(1, 11):
time.sleep(1)
page['example'].items = [
ui.progress(label='Basic Progress',
caption=f'{i * 10}% complete',
value=i / 10),
]
# This will work, too:
# page['example'].items[0].progress.value = i/10
page.save()
# Form / Progress
# Use a #progress bar to indicate completion status of an operation.
# #form
# ---
from h2o_wave import site, ui
page = site['/demo']
page['example'] = ui.form_card(box='1 1 4 -1',
items=[
ui.progress(label='Indeterminate Progress',
caption='Goes on forever'),
ui.progress(
label='Standard Progress',
caption='Downloading the interwebs...',
value=0.25),
])
page.save()
async def serve(q: Q):
if not q.client.initialized:
image = 'https://images.pexels.com/photos/220453/pexels-photo-220453.jpeg?auto=compress&h=750&w=1260'
f = FakeCategoricalSeries()
q.client.primary = '#000000'
q.client.page = '#e2e2e2'
q.client.card = '#ffffff'
q.client.text = '#000000'
q.page['meta'] = ui.meta_card(
box='',
theme='custom',
layouts=[
ui.layout(breakpoint='xs',
zones=[
ui.zone('header'),
ui.zone('content',
direction=ui.ZoneDirection.ROW,
zones=[
ui.zone('colors', size='340px'),
ui.zone('preview')
]),
ui.zone('footer')
])
])
q.page['header'] = ui.header_card(box='header',
title='Theme generator',
subtitle='Color your app easily',
icon='Color',
icon_color='$card')
q.page['form'] = ui.form_card(box='colors',
items=[
ui.color_picker(
name='primary',
label='Primary',
trigger=True,
alpha=False,
inline=True,
value=q.client.primary),
ui.color_picker(name='text',
label='Text',
trigger=True,
alpha=False,
inline=True,
value=q.client.text),
ui.color_picker(name='card',
label='Card',
trigger=True,
alpha=False,
inline=True,
value=q.client.card),
ui.color_picker(name='page',
label='Page',
trigger=True,
alpha=False,
inline=True,
value=q.client.page),
ui.text_xl('Check contrast'),
get_contrast('text', 'card', q),
get_contrast('card', 'primary', q),
get_contrast('text', 'page', q),
get_contrast('page', 'primary', q),
ui.text_xl('Copy code'),
ui.frame(content=get_theme_code(q),
height='180px'),
])
q.page['sample'] = ui.form_card(
box='preview',
items=[
ui.text_xl(content='Sample App to show colors'),
ui.progress(label='A progress bar'),
ui.inline([
ui.checkbox(name='checkbox1',
label='A checkbox',
value=True),
ui.checkbox(name='checkbox2', label='Another checkbox'),
ui.checkbox(name='checkbox3',
label='Yet another checkbox'),
ui.toggle(name='toggle', label='Toggle', value=True),
]),
ui.inline([
ui.date_picker(name='date_picker', label='Date picker'),
ui.picker(name='picker',
label='Picker',
choices=[
ui.choice('choice1', label='Choice 1'),
ui.choice('choice2', label='Choice 2'),
ui.choice('choice3', label='Choice 3'),
]),
ui.combobox(name='combobox',
label='Combobox',
choices=['Choice 1', 'Choice 2', 'Choice 3']),
ui.persona(title='John Doe',
subtitle='Data Scientist',
size='s',
image=image),
]),
ui.slider(name='slider', label='Slider', value=70),
ui.link(label='Link'),
ui.inline(justify='between',
items=[
ui.stepper(name='stepper',
width='500px',
items=[
ui.step(label='Step 1',
icon='MailLowImportance'),
ui.step(
label='Step 2',
icon='TaskManagerMirrored'),
ui.step(label='Step 3',
icon='Cafe'),
]),
ui.tabs(name='menu',
value='email',
items=[
ui.tab(name='email',
label='Mail',
icon='Mail'),
ui.tab(name='events',
label='Events',
icon='Calendar'),
ui.tab(name='spam', label='Spam'),
]),
]),
ui.inline(items=[
ui.table(
name='table',
width='50%',
columns=[
ui.table_column(
name='name', label='Name', min_width='80px'),
ui.table_column(name='surname',
label='Surname',
filterable=True),
ui.table_column(name='age',
label='Age',
sortable=True),
ui.table_column(
name='progress',
label='Progress',
cell_type=ui.progress_table_cell_type(
color='$themePrimary')),
],
rows=[
ui.table_row(name='row1',
cells=['John', 'Doe', '25', '0.90']),
ui.table_row(name='row2',
cells=['Ann', 'Doe', '35', '0.75']),
ui.table_row(
name='row3',
cells=['Casey', 'Smith', '40', '0.33']),
],
height='330px',
),
ui.visualization(
width='50%',
plot=ui.plot([
ui.mark(type='interval',
x='=product',
y='=price',
y_min=0)
]),
data=data(fields='product price',
rows=[(c, x) for c, x, _ in
[f.next() for _ in range(20)]],
pack=True),
),
]),
ui.buttons([
ui.button(name='primary_button',
label='Primary',
primary=True),
ui.button(name='standard_button', label='Standard'),
ui.button(name='standard_disabled_button',
label='Disabled',
disabled=True),
ui.button(name='icon_button',
icon='Heart',
caption='Tooltip text'),
]),
])
q.page['footer'] = ui.footer_card(
box='footer', caption='(c) 2021 H2O.ai. All rights reserved.')
q.client.themes = [
ui.theme(name='custom',
text=q.client.text,
card=q.client.card,
page=q.client.page,
primary=q.client.primary)
]
q.client.initialized = True
if q.args.primary:
q.client.themes[0].primary = q.args.primary
q.client.primary = q.args.primary
if q.args.text:
q.client.themes[0].text = q.args.text
q.client.text = q.args.text
if q.args.card:
q.client.themes[0].card = q.args.card
q.client.card = q.args.card
if q.args.page:
q.client.themes[0].page = q.args.page
q.client.page = q.args.page
q.page['meta'].themes = q.client.themes
q.page['form'].items[5] = get_contrast('text', 'card', q)
q.page['form'].items[6] = get_contrast('card', 'primary', q)
q.page['form'].items[7] = get_contrast('text', 'page', q)
q.page['form'].items[8] = get_contrast('page', 'primary', q)
q.page['form'].items[10].frame.content = get_theme_code(q)
await q.page.save()
