async def serve(q: Q):
if q.args.show_inputs:
q.page['example'].items = [
ui.text(f'date={q.args.date}'),
ui.text(f'date_placeholder={q.args.date_placeholder}'),
ui.text(f'date_disabled={q.args.date_disabled}'),
ui.button(name='show_form', label='Back', primary=True),
]
else:
q.page['example'] = ui.form_card(
box='1 1 4 10',
items=[
ui.date_picker(name='date',
label='Standard date picker',
value='2017-10-19'),
ui.date_picker(name='date_placeholder',
label='Date picker with placeholder',
placeholder='Pick a date'),
ui.date_picker(name='date_disabled',
label='Disabled date picker',
value='2017-10-19',
disabled=True),
ui.button(name='show_inputs', label='Submit', primary=True),
])
await q.page.save()
def render_content_changes(q: Q):
q.page['sidebar'] = ui.form_card(
box='1 2 2 8',
items=[
ui.separator('Button Counting'),
ui.text(
f'This button has been **clicked in this browser session {q.client.count}** times!'
),
ui.text(
f'This button has been **clicked by you {q.user.count}** times!'
),
ui.text(f'This button has been **clicked {q.app.count}** times!'),
ui.buttons([ui.button(name='button', label='Click Me!')],
justify='center')
])
q.page['content'] = ui.form_card(
box='3 2 9 8',
items=[
ui.tabs(name='header_tabs',
value=q.client.tab,
items=[
ui.tab(name=t.lower(), label=t)
for t in ['Home', 'Learn More', 'Contact Us']
]),
ui.frame(
content=
f'This is the {q.client.tab} section, it is still in development.'
)
])
async def serve(q: Q):
if q.args.show_inputs:
q.page['example'].items = [
ui.text(f'toggle_unchecked={q.args.toggle_unchecked}'),
ui.text(f'toggle_checked={q.args.toggle_checked}'),
ui.text(
f'toggle_unchecked_disabled={q.args.toggle_unchecked_disabled}'
),
ui.text(
f'toggle_checked_disabled={q.args.toggle_checked_disabled}'),
ui.button(name='show_form', label='Back', primary=True),
]
else:
q.page['example'] = ui.form_card(
box='1 1 4 10',
items=[
ui.toggle(name='toggle_unchecked', label='Not checked'),
ui.toggle(name='toggle_checked', label='Checked', value=True),
ui.toggle(name='toggle_unchecked_disabled',
label='Not checked (Disabled)',
disabled=True),
ui.toggle(name='toggle_checked_disabled',
label='Checked (Disabled)',
value=True,
disabled=True),
ui.button(name='show_inputs', label='Submit', primary=True),
])
await q.page.save()
async def serve(q: Q):
if q.args.show_inputs:
q.page['example'].items = [
ui.text(f'combobox={q.args.combobox}'),
ui.text(f'combobox_disabled={q.args.combobox_disabled}'),
ui.text(f'combobox_error={q.args.combobox_error}'),
ui.button(name='show_form', label='Back', primary=True),
]
else:
q.page['example'] = ui.form_card(
box='1 1 4 10',
items=[
ui.combobox(name='combobox',
label='Enter or choose a color',
placeholder='Color...',
value='Blue',
choices=combobox_choices),
ui.combobox(name='combobox_disabled',
label='Enter or choose a color',
placeholder='Color...',
value='Blue',
choices=combobox_choices,
disabled=True),
ui.combobox(name='combobox_error',
label='Enter or choose a color',
placeholder='Color...',
value='Blue',
choices=combobox_choices,
error='This combobox has an error!'),
ui.button(name='show_inputs', label='Submit', primary=True),
])
await q.page.save()
async def serve(q: Q):
if q.args.show_inputs:
q.page['example'].items = [
ui.text(f'range_slider={q.args.range_slider}'),
ui.text(f'range_slider_step={q.args.range_slider_step}'),
ui.text(f'range_slider_disabled={q.args.range_slider_disabled}'),
ui.button(name='show_form', label='Back', primary=True),
]
else:
q.page['example'] = ui.form_card(
box='1 1 4 10',
items=[
ui.range_slider(name='range_slider', label='Default slider'),
ui.range_slider(name='range_slider_step',
label='Step slider',
min=0,
max=1000,
step=100,
min_value=0,
max_value=100),
ui.range_slider(name='range_slider_disabled',
label='Disabled slider',
min=0,
max=100,
step=10,
min_value=0,
max_value=70,
disabled=True),
ui.button(name='show_inputs', label='Submit', primary=True),
])
await q.page.save()
async def serve(q: Q):
if q.args.show_inputs:
q.page['example'].items = [
ui.text(f'dropdown={q.args.dropdown}'),
ui.text(f'dropdown_multi={q.args.dropdown_multi}'),
ui.text(f'dropdown_disabled={q.args.dropdown_disabled}'),
ui.button(name='show_form', label='Back', primary=True),
]
else:
q.page['example'] = ui.form_card(box='1 1 4 10',
items=[
ui.dropdown(name='dropdown',
label='Pick one',
value='B',
required=True,
choices=choices),
ui.dropdown(name='dropdown_multi',
label='Pick multiple',
values=['B', 'D'],
required=True,
choices=choices),
ui.dropdown(
name='dropdown_disabled',
label='Pick one (Disabled)',
value='B',
choices=choices,
disabled=True),
ui.button(name='show_inputs',
label='Submit',
primary=True),
])
await q.page.save()
async def serve(q: Q):
if not q.client.initialized:
q.page['meta'] = ui.meta_card(box='')
q.page['example'] = ui.form_card(box='1 1 11 10', items=[
ui.button(name='show_side_panel', label='Order donuts', primary=True)
])
q.client.initialized = True
else:
if q.args.show_side_panel:
q.page['meta'].side_panel = ui.side_panel(title='Welcome to store', items=[
ui.text('Donuts cost $1.99. Proceed?'),
ui.buttons([ui.button(name='next_step', label='Next', primary=True)])
])
elif q.args.next_step:
q.page['meta'].side_panel.items = [
ui.text('You will be charged $1.99. Proceed?'),
ui.buttons([
ui.button(name='cancel', label='Back to safety'),
ui.button(name='submit', label='Place order', primary=True),
])
]
elif q.args.submit:
q.page['example'].items = [ui.message_bar('success', 'Order placed!')]
q.page['meta'].side_panel = None
elif q.args.cancel:
q.page['example'].items = [ui.message_bar('info', 'Order canceled!')]
q.page['meta'].side_panel = None
await q.page.save()
async def serve(q: Q):
if q.args.show_inputs:
q.page['example'].items = [
ui.text(f'spinbox={q.args.spinbox}'),
ui.text(f'spinbox_disabled={q.args.spinbox_disabled}'),
ui.button(name='show_form', label='Back', primary=True),
]
else:
q.page['example'] = ui.form_card(
box='1 1 4 10',
items=[
ui.spinbox(name='spinbox',
label='Standard spinbox',
min=0,
max=100,
step=10,
value=30),
ui.spinbox(name='spinbox_disabled',
label='Disabled spinbox',
min=0,
max=100,
step=10,
value=30,
disabled=True),
ui.button(name='show_inputs', label='Submit', primary=True),
])
await q.page.save()
async def serve(q: Q):
if 'basic_button' in q.args:
q.page['example'].items = [
ui.text(f'basic_button={q.args.basic_button}'),
ui.text(f'primary_button={q.args.primary_button}'),
ui.text(f'link_button={q.args.link_button}'),
ui.text(f'basic_disabled_button={q.args.basic_disabled_button}'),
ui.text(
f'primary_disabled_button={q.args.primary_disabled_button}'),
ui.text(f'link_disabled_button={q.args.link_disabled_button}'),
ui.text(f'basic_compound_button={q.args.basic_compound_button}'),
ui.text(
f'primary_compound_button={q.args.primary_compound_button}'),
ui.text(
f'basic_compound_disabled_button={q.args.basic_compound_disabled_button}'
),
ui.text(
f'primary_compound_disabled_button={q.args.primary_compound_disabled_button}'
),
ui.button(name='show_form', label='Back', primary=True),
]
else:
q.page['example'] = ui.form_card(
box='1 1 4 10',
items=[
ui.button(name='basic_button', label='Basic'),
ui.button(name='primary_button', label='Primary',
primary=True),
ui.button(name='link_button', label='Link', link=True),
ui.button(name='basic_disabled_button',
label='Basic (Disabled)',
disabled=True),
ui.button(name='primary_disabled_button',
label='Primary (Disabled)',
primary=True,
disabled=True),
ui.button(name='link_disabled_button',
label='Link (Disabled)',
link=True,
disabled=True),
ui.button(name='basic_compound_button',
label='Basic',
caption='Compound Button.'),
ui.button(name='primary_compound_button',
label='Primary',
caption='Compound Button',
primary=True),
ui.button(name='basic_compound_disabled_button',
label='Basic (Disabled)',
caption='Compound Button',
disabled=True),
ui.button(name='primary_compound_disabled_button',
label='Primary (Disabled)',
caption='Compound Button',
primary=True,
disabled=True),
])
await q.page.save()
def form_unsupported():
# display when app is not running on cloud
return [
ui.text('''This example requires access to Driverless AI running on
<a href="https://h2oai.github.io/h2o-ai-cloud" target="_blank">H2O AI Hybrid Cloud</a>
and does not support standalone app instances.'''),
ui.text('''Sign up at <a href="https://h2o.ai/free" target="_blank">https://h2o.ai/free</a>
to run apps on cloud.''')
]
async def serve(q: Q):
if q.args.train:
# train WaveML Model using H2O-3 AutoML
copy_expando(q.args, q.client)
q.client.wave_model = build_model(
train_df=q.client.train_df,
target_column='target',
model_type=ModelType.H2O3,
_h2o3_max_runtime_secs=30,
_h2o3_nfolds=2,
_h2o3_include_algos=[q.client.algo]
)
model_id = q.client.wave_model.model.model_id
accuracy = round(100 - q.client.wave_model.model.mean_per_class_error() * 100, 2)
# show training details and prediction option
q.page['example'].items[1].choice_group.value = q.client.algo
q.page['example'].items[2].buttons.items[1].button.disabled = False
q.page['example'].items[3].message_bar.type = 'success'
q.page['example'].items[3].message_bar.text = 'Training successfully completed!'
q.page['example'].items[4].text.content = f'''**H2O AutoML model id:** {model_id} <br />
**Accuracy:** {accuracy}%'''
q.page['example'].items[5].text.content = ''
elif q.args.predict:
# predict on test data
preds = q.client.wave_model.predict(test_df=q.client.test_df)
# show predictions
q.page['example'].items[3].message_bar.text = 'Prediction successfully completed!'
q.page['example'].items[5].text.content = f'''**Example predictions:** <br />
{preds[0]} <br /> {preds[1]} <br /> {preds[2]}'''
else:
# prepare sample train and test dataframes
data = load_wine(as_frame=True)['frame']
q.client.train_df, q.client.test_df = train_test_split(data, train_size=0.8)
# algos
algo_choices = [ui.choice(x, x) for x in ['DRF', 'GLM', 'XGBoost', 'GBM', 'DeepLearning']]
# display ui
q.page['example'] = ui.form_card(
box='1 1 -1 -1',
items=[
ui.text(content='''The sample dataset used is the
<a href="https://scikit-learn.org/stable/modules/generated/sklearn.datasets.load_wine.html" target="_blank">wine dataset</a>.'''),
ui.choice_group(name='algo', label='Select Algo', choices=algo_choices, value='DRF'),
ui.buttons(items=[
ui.button(name='train', label='Train', primary=True),
ui.button(name='predict', label='Predict', primary=True, disabled=True),
]),
ui.message_bar(type='warning', text='Training will take a few seconds'),
ui.text(content=''),
ui.text(content='')
]
)
await q.page.save()
def make_blurb(example: Example):
buttons = []
if example.previous_example:
buttons.append(ui.button(name=f'#{example.previous_example.name}', label='Previous'))
if example.next_example:
buttons.append(ui.button(name=f'#{example.next_example.name}', label='Next', primary=True))
return [
ui.text(example.title, size='l'),
ui.text(example.description),
ui.buttons(buttons),
]
def form_default(q: Q):
# display when app is initialized
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.text(content=STEAM_TEXT, visible=q.client.disable_training),
ui.buttons(items=[
ui.button(name='train', label='Train', primary=True, disabled=q.client.disable_training),
ui.button(name='predict', label='Predict', primary=True, disabled=True),
])
]
def form_training_completed(q: Q):
# display when model training is completed
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),
ui.button(name='predict', label='Predict', primary=True)
]),
ui.message_bar(type='success', text='Training successfully completed!'),
ui.text(content=q.client.model_details)
]
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)
]
def form_default(q: Q):
# display when app is initialized
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.text(content=STEAM_TEXT, visible=q.client.disable_training),
ui.slider(name='dai_interpretability', label='Interpretability', min=1, max=10, step=1, value=7),
ui.toggle(name='dai_reproducible', label='Reproducible', value=False),
ui.buttons(items=[
ui.button(name='train', label='Train', primary=True, disabled=q.client.disable_training),
ui.button(name='predict', label='Predict', primary=True, disabled=True),
])
]
async def serve(q: Q):
if q.args.annotator:
q.page['example'].items = [
ui.text(f'annotator={q.args.annotator}'),
ui.button(name='show_form', label='Back', primary=True),
]
else:
q.page['example'] = ui.form_card(
box='1 1 4 10',
items=[
ui.text_annotator(
name='annotator',
title='Select text to annotate',
tags=[
ui.text_annotator_tag(name='p',
label='Person',
color='#F1CBCB'),
ui.text_annotator_tag(name='o',
label='Org',
color='#CAEACA'),
],
items=[
ui.text_annotator_item(text='Killer Mike', tag='p'),
ui.text_annotator_item(
text=' is a member, of the hip hop supergroup '
), # no tag
ui.text_annotator_item(text='Run the Jewels', tag='o'),
],
),
ui.button(name='submit', label='Submit', primary=True)
])
await q.page.save()
async def serve(q: Q):
if q.args.show_inputs:
q.page['example'].items = [
ui.text(f'swatch={q.args.swatch}'),
ui.button(name='show_form', label='Back', primary=True),
]
else:
q.page['example'] = ui.form_card(box='1 1 4 10',
items=[
ui.color_picker(
name='swatch',
label='Pick a swatch',
choices=[
'#011627',
'#2EC4B6',
'#E71D36',
'#FF9F1C',
'#50514F',
'#F25F5C',
'#FFE066',
'#247BA0',
'#70C1B3',
'#FDFFFC',
]),
ui.button(name='show_inputs',
label='Submit',
primary=True),
])
await q.page.save()
async def serve(q: Q):
if not q.client.initialized:
q.client.initialized = True
q.page['nav'] = ui.markdown_card(
box='1 1 4 2',
title='Menu',
content=
'[Spam](#menu/spam) / [Ham](#menu/ham) / [Eggs](#menu/eggs) / [About](#about)',
)
q.page['blurb'] = ui.markdown_card(
box='1 3 4 2',
title='Description',
content='Welcome to our store!',
)
q.page['cart'] = ui.form_card(
box='1 5 4 2',
title='Cart',
items=[
ui.text('Your cart is empty!'),
ui.buttons([
ui.button(name=buy_now.__name__,
label='Buy Now!',
primary=True),
ui.button(name='empty_cart', label='Clear cart'),
])
],
)
await q.page.save()
else:
await handle_on(q)
async def serve(q: Q):
q.page['example'] = ui.form_card(box='1 1 4 10', items=[
ui.textbox(name='text', label='English', value=q.args.text or '', multiline=True, trigger=True),
ui.label('Pig Latin'),
ui.text(to_pig_latin(q.args.text) or '*Type in some text above to translate to Pig Latin!*'),
])
await q.page.save()
async def show_issue(q: Q, issue_id: str):
issue = issue_lookup[issue_id]
issue.views += 1
q.client.active_issue_id = issue_id
q.page['form'] = ui.form_card(
box='1 1 4 -1',
items=[
ui.text_xl(f'Issue {issue.id}'),
ui.text(issue.text),
ui.text_xs(f'({issue.views} views)'),
ui.buttons([
ui.button(
name='close_issue'
if issue.status == 'Open' else 'reopen_issue',
label="Close Issue"
if issue.status == 'Open' else "Reopen Issue",
primary=True,
),
ui.button(name='back', label='Back'),
]),
])
await q.page.save()
async def serve(q: Q):
if '#' in q.args:
hash_ = q.args['#']
q.page['nav'] = ui.form_card(box='1 1 2 5', items=[
ui.text(f'#={hash_}'),
ui.button(name='show_nav', label='Back', primary=True),
])
else:
q.page['nav'] = ui.nav_card(
box='1 1 2 5',
value='#menu/spam',
items=[
ui.nav_group('Menu', items=[
ui.nav_item(name='#menu/spam', label='Spam'),
ui.nav_item(name='#menu/ham', label='Ham'),
ui.nav_item(name='#menu/eggs', label='Eggs'),
ui.nav_item(name='#menu/toast', label='Toast', disabled=True),
]),
ui.nav_group('Help', items=[
ui.nav_item(name='#about', label='About', icon='Info'),
ui.nav_item(name='#support', label='Support', icon='Help'),
])
],
)
await q.page.save()
async def serve(q: Q):
if 'standard_button' in q.args:
q.page['example'].items = [
ui.text(f'primary_button={q.args.primary_button}'),
ui.text(f'standard_button={q.args.standard_button}'),
ui.text(f'standard_disabled_button={q.args.standard_disabled_button}'),
ui.button(name='show_form', label='Back', primary=True),
]
else:
q.page['example'] = ui.form_card(box='1 1 4 10', items=[
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),
]),
])
await q.page.save()
def form_prediction_completed(q: Q):
# display when model prediction is completed
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.dropdown(name='categorical_columns', label='Select categorical columns',
choices=q.client.column_choices, values=q.client.categorical_columns),
ui.buttons(items=[
ui.button(name='train', label='Train', primary=True),
ui.button(name='predict', label='Predict', primary=True)
]),
ui.message_bar(type='success', text='Prediction successfully completed!'),
ui.text(content=q.client.model_details),
ui.text(content=f'''**Example predictions:** <br />
{q.client.preds[0]} <br /> {q.client.preds[1]} <br /> {q.client.preds[2]}''')
]
async def serve(q: Q):
if not q.client.initialized:
q.page['example'] = ui.form_card(box='1 1 2 3', items=[])
q.client.initialized = True
if 'profile' in q.args and not q.args.show_form:
q.page['example'].items = [
ui.text(f'profile={q.args.profile}'),
ui.text(f'preferences={q.args.preferences}'),
ui.text(f'logout={q.args.logout}'),
ui.button(name='show_form', label='Back', primary=True),
]
else:
q.page['example'].items = [
ui.menu(image=image, items=commands),
ui.menu(icon='Add', items=commands),
ui.menu(items=commands)
]
await q.page.save()
def form_prediction_completed(q: Q):
# display when model prediction is completed
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.slider(name='dai_interpretability', label='Interpretability', min=1, max=10, step=1,
value=q.client.dai_interpretability),
ui.toggle(name='dai_reproducible', label='Reproducible', value=q.client.dai_reproducible),
ui.buttons(items=[
ui.button(name='train', label='Train', primary=True),
ui.button(name='predict', label='Predict', primary=True)
]),
ui.message_bar(type='success', text='Prediction successfully completed!'),
ui.text(content=q.client.model_details),
ui.text(content=f'''**Example predictions:** <br />
{q.client.preds[0]} <br /> {q.client.preds[1]} <br /> {q.client.preds[2]}''')
]
def form_training_completed(q: Q):
# display when model training is completed
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.button(name='train',
label='Train',
primary=True,
disabled=q.client.disable_training),
ui.message_bar(type='success',
text='Training successfully completed!'),
ui.text(content=q.client.model_details),
ui.text(content=
f'**Download:** <a href="{q.client.path_autodoc}">AutoDoc</a>')
]
async def serve(q: Q):
if (not q.client.initialized
): # First visit, create an empty form card for our wizard
q.page['wizard'] = ui.form_card(box='1 1 2 4', items=[])
q.client.initialized = True
wizard = q.page['wizard'] # Get a reference to the wizard form
if q.args.step1:
wizard.items = [
ui.text_xl('Wizard - Step 1'),
ui.text('What is your name?', name='text'),
ui.textbox(name='nickname', label='My name is...',
value='Gandalf'),
ui.buttons([ui.button(name='step2', label='Next', primary=True)]),
]
elif q.args.step2:
q.client.nickname = q.args.nickname
wizard.items = [
ui.text_xl('Wizard - Step 2'),
ui.text(f'Hi {q.args.nickname}! How do you feel right now?',
name='text'),
ui.textbox(name='feeling', label='I feel...', value='magical'),
ui.buttons([ui.button(name='step3', label='Next', primary=True)]),
]
elif q.args.step3:
wizard.items = [
ui.text_xl('Wizard - Done'),
ui.text(
f'What a coincidence, {q.client.nickname}! I feel {q.args.feeling} too!',
name='text',
),
ui.buttons(
[ui.button(name='step1', label='Try Again', primary=True)]),
]
else:
wizard.items = [
ui.text_xl('Wizard Example'),
ui.text("Let's have a conversation, shall we?"),
ui.buttons(
[ui.button(name='step1', label='Of course!', primary=True)]),
]
await q.page.save()
def get_form_items(choice: str):
return [
ui.combobox(name='combobox',
trigger=True,
label='Enter or choose a color',
placeholder='Color...',
value='Blue',
choices=combobox_choices),
ui.label('Sent to server'),
ui.text(choice),
]
async def serve(q: Q):
if q.args.show_inputs:
q.page['example'].items = [
ui.text(f'selected={q.args.choice_group}'),
ui.button(name='show_form', label='Back', primary=True),
]
else:
q.page['example'] = ui.form_card(box='1 1 4 10', items=[
ui.choice_group(name='choice_group', label='Pick one', value='B', required=True, choices=choices),
ui.button(name='show_inputs', label='Submit', primary=True),
])
await q.page.save()