async def get_inputs(q: Q):
q.page['main'] = ui.form_card(
box="1 2 8 5",
items=[
ui.text_xl('Enter your text input for generation:'),
ui.textbox(name="input_text",
label='',
value=q.app.input_text,
multiline=True),
ui.separator(),
ui.slider(
name="num_words_to_generate",
label=
"Maximum number of words to generate (including input text)",
min=5,
max=50,
step=1,
value=q.app.num_words_to_generate
if q.app.num_words_to_generate else 12,
),
ui.separator(),
ui.buttons([
ui.button(name="generate_text", label='Generate',
primary=True),
])
])
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.'
)
])
def init(q: Q):
q.page['meta'] = ui.meta_card(
box='',
title='Explain Ratings',
layouts=[
ui.layout(breakpoint='xs',
zones=[
ui.zone('header'),
ui.zone('body',
direction=ui.ZoneDirection.ROW,
size='calc(100vh - 70px)',
zones=[
ui.zone('sidebar', size='350px'),
ui.zone('content',
direction=ui.ZoneDirection.ROW)
])
]),
])
q.page['header'] = ui.header_card(box='header',
title='Hotel Reviews',
subtitle='Explains the hotel reviews',
icon='ReviewSolid',
icon_color='#00A8E0')
q.client.review = config.review_column_list[0]
form_filters = []
for column in config.filterable_columns:
choices = [ui.choice(name='empty', label='All')] + [
ui.choice(name=str(column), label=str(column))
for column in config.dataset[column].drop_duplicates()
]
form_filters.append(
ui.dropdown(name=f'filter_{column}',
label=config.column_mapping[column],
trigger=True,
value='empty',
choices=choices))
sidebar_items = [
ui.dropdown(name='review',
label='Review type',
value=q.client.review,
trigger=True,
choices=[
ui.choice(name=column,
label=config.column_mapping[column])
for column in config.dataset[config.review_column_list]
]),
ui.separator('Filters')
] + form_filters
q.page['sidebar'] = ui.form_card(box='sidebar', items=sidebar_items)
q.page['original'] = ui.image_card(box='content',
title='Original',
type='png',
image=plot_word_cloud(
config.dataset[q.client.review], q))
def render_plot_view(q: Q):
"""Sets up the view a file as ui.table card"""
items = [ui.separator(label='Step 3: Visualize the Dataset')]
if q.client.working_file_path is None:
items.append(ui.message_bar(type='warning', text='Please upload a dataset!'))
else:
items.append(make_ui_plot(file_path=q.client.working_file_path))
q.page['plot'] = ui.form_card(box='4 6 8 -1', items=items)
def render_table_view(q: Q):
"""Sets up the view a file as ui.table card"""
items = [ui.separator(label='Step 2: View the Dataset')]
if q.client.working_file_path is None:
items.append(ui.message_bar(type='warning', text='Please upload a dataset!'))
else:
items.append(ui.text_xl(os.path.basename(q.client.working_file_path)))
items.append(make_ui_table(file_path=q.client.working_file_path, n_rows=10, name='head_of_table'))
q.page['table'] = ui.form_card(box='4 2 8 4', items=items)
def render_suggestions(q: Q):
suggestions = get_suggestions(q.client.rule_set, q.client.cart_products)
q.page['suggestions'].items = [
ui.separator(label='Recommended for You'),
*[
ui.button(name='suggestion_btn',
label=suggestion,
value=suggestion,
caption='Add to cart') for suggestion in suggestions
],
]
def render_upload_view(q: Q):
"""Sets up the upload-dataset card"""
q.page['upload'] = ui.form_card(
box='1 2 3 -1',
items=[
ui.separator(label='Step 1: Choose a Dataset'),
ui.message_bar(
type='info',
text='This application requires a .csv file with any type of data within it',
),
ui.file_upload(name='file_upload', label='Upload Data', multiple=False, file_extensions=['csv']),
]
)
def render_trending(q: Q):
trending_products = get_trending_products(q.client.rule_set,
q.client.cart_products)
q.page['trending'].items = [
ui.separator(label='Trending Now'),
*[
ui.button(name='trending_btn',
label=product,
value=product,
caption='Add to cart') for product in trending_products
],
]
async def show_todos(q: Q):
# Get items for this user.
db: WaveDB = q.app.db
# Check if we have any updates, i.e. the user has checked/unchecked any item.
updates = []
for key, done in expando_to_dict(q.args).items():
# We've named each todo item `todo_{id}' (e.g. todo_42, todo_43, and so on)
# So identify the todo items from their 'todo_' prefix, then extract the ids from the names.
if key.startswith('todo_'):
_, id = key.split('_', 1)
updates.append(('update todo set done=? where id=?',
1 if done else 0, int(id)))
# If we have updates, update our database.
if len(updates):
_, err = await db.exec_many(*updates)
if err:
raise RuntimeError(f'Failed updating todos: {err}')
# Fetch latest todos for our user
rows, err = await db.exec('select id, label, done from todo where user=?',
q.auth.subject)
if err:
raise RuntimeError(f'Failed fetching todos: {err}')
todos = [TodoItem(id, label, done) for id, label, done in rows]
# Create done/not-done checkboxes.
done = [
ui.checkbox(name=f'todo_{todo.id}',
label=todo.label,
value=True,
trigger=True) for todo in todos if todo.done
]
not_done = [
ui.checkbox(name=f'todo_{todo.id}', label=todo.label, trigger=True)
for todo in todos if not todo.done
]
# Display list
q.page['form'] = ui.form_card(
box='1 1 4 10',
items=[
ui.text_l('To Do'),
ui.button(name='new_todo', label='Add To Do...', primary=True),
*not_done,
*([ui.separator('Done')] if len(done) else []),
*done,
])
await q.page.save()
async def show_results(q: Q):
q.page['main'] = ui.form_card(box="1 2 4 5",
items=[
ui.text_xl("Input Text:"),
ui.separator(),
ui.text(q.app.input_text),
ui.separator(),
ui.buttons([
ui.button(name="get_inputs",
label='Try Again!',
primary=True),
])
])
result = q.app.model(q.app.input_text,
max_length=q.app.num_words_to_generate,
do_sample=False)[0]
q.app.generated_text = result["generated_text"]
q.page['visualization'] = ui.form_card(box="5 2 4 5",
items=[
ui.text_xl("Generated Text:"),
ui.separator(''),
ui.text(q.app.generated_text)
])
def populate_dropdown_list(q: Q):
filter_choices = [
ui.choice(
name=json.dumps({"id": q.client.filter_count + 1, "attr": column, "attr_val": None}),
label=config.column_mapping[column]
) for column in config.filterable_columns
]
items = [
ui.text_l("Filter reviews"),
]
for key, value in q.client.filters.items():
for attr, attr_val in value.items():
items.append(ui.dropdown(
name="filter",
label="Choose a review attribute",
placeholder=config.column_mapping[attr],
choices=[
ui.choice(
name=json.dumps({'id': key, 'attr': column, 'attr_val': None}),
label=config.column_mapping[column]
) for column in config.filterable_columns
],
trigger=True,
), )
items.append(ui.dropdown(
name="filter_value",
label="Choose a value for selected review attribute",
placeholder=attr_val,
choices=[ui.choice(name=json.dumps({'id': key, 'attr': attr, 'attr_val': column}), label=column) for
column in config.dataset[attr].drop_duplicates()],
trigger=True,
), )
items.append(ui.separator())
if (q.args.add_filter and all(q.client.filters.values())) or q.args.review_choice or q.args.reset_filters:
items.append(ui.dropdown(
name="filter",
label="Choose a review attribute",
placeholder="Please select a category to filter",
choices=filter_choices,
trigger=True
), )
items.append(ui.button(name="compare_review_button", label="Compare Reviews", primary=True))
return items
async def show_todos(q: Q):
# Get items for this user.
todos: List[TodoItem] = q.user.todos
# Create a sample list if we don't have any.
if todos is None:
q.user.todos = todos = [
TodoItem('Do this'),
TodoItem('Do that'),
TodoItem('Do something else')
]
# If the user checked/unchecked an item, update our list.
for todo in todos:
if todo.id in q.args:
todo.done = q.args[todo.id]
# Create done/not-done checkboxes.
done = [
ui.checkbox(name=todo.id, label=todo.label, value=True, trigger=True)
for todo in todos if todo.done
]
not_done = [
ui.checkbox(name=todo.id, label=todo.label, trigger=True)
for todo in todos if not todo.done
]
# Display list
q.page['form'] = ui.form_card(
box='1 1 4 10',
items=[
ui.text_l('To Do'),
ui.button(name='new_todo', label='Add To Do...', primary=True),
*not_done,
*([ui.separator('Done')] if len(done) else []),
*done,
])
await q.page.save()
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()
def init_ui(q: Q):
q.page['meta'] = ui.meta_card(
title='Shopping Cart Recomendations',
box='',
layouts=[
ui.layout(breakpoint='xs',
zones=[
ui.zone('header', size='80px'),
ui.zone('cart', size='250px'),
ui.zone('trending'),
ui.zone('suggestions'),
]),
ui.layout(
breakpoint='m',
zones=[
ui.zone('header', size='80px'),
ui.zone('body',
size='1000px',
direction=ui.ZoneDirection.ROW,
zones=[
ui.zone('cart', size='300px'),
ui.zone('right-pane',
direction=ui.ZoneDirection.COLUMN,
zones=[
ui.zone('trending', size='600px'),
ui.zone('suggestions'),
]),
]),
]),
ui.layout(breakpoint='xl',
width='1600px',
zones=[
ui.zone('header', size='80px'),
ui.zone('body',
size='750px',
direction=ui.ZoneDirection.ROW,
zones=[
ui.zone('cart', size='300px'),
ui.zone('trending'),
ui.zone('suggestions'),
])
])
])
q.page.add(
'header',
ui.header_card(
box='header',
title=config.title,
subtitle=config.subtitle,
icon=config.icon,
icon_color=config.icon_color,
))
q.page['suggestions'] = ui.form_card(box='suggestions', items=[])
q.page['trending'] = ui.form_card(box='trending', items=[])
q.page['cart'] = ui.form_card(
box='cart',
items=[
ui.separator('Cart'),
ui.text('Search and add products to the cart'),
ui.picker(
name='cart_products',
choices=[
ui.choice(name=str(x), label=str(x))
for x in get_products_list()
],
values=q.client.cart_products,
trigger=True,
),
ui.button(name='toggle_theme', label='Toggle Theme', primary=True)
])
q.client.theme = 'default'
# Form / Text / Sizes
# Use text size variants to display formatted text using predefined font sizes.
# ---
from h2o_wave import site, ui
page = site['/demo']
page['example'] = ui.form_card(
box='1 1 4 -1',
items=[
ui.separator('Separator'),
ui.text_xl('Extra large text'),
ui.text_l('Large text'),
ui.text('Normal text'),
ui.text_m('Medium text'),
ui.text_s('Small text'),
ui.text_xs('Extra small text'),
# Using `ui.text()` with a `size` argument produces similar results:
ui.separator('Separator'),
ui.text('Extra large text', size=ui.TextSize.XL),
ui.text('Large text', size=ui.TextSize.L),
ui.text('Normal text'),
ui.text('Medium text', size=ui.TextSize.M),
ui.text('Small text', size=ui.TextSize.S),
ui.text('Extra small text', size=ui.TextSize.XS),
],
)
page.save()
# Form / Separator
# Use a separator to visually separate content into groups.
# ---
from h2o_wave import site, ui
page = site['/demo']
page['example'] = ui.form_card(
box='1 1 2 5',
items=[
ui.separator(label='Separator 1'),
ui.text('The quick brown fox jumps over the lazy dog.'),
ui.separator(label='Separator 2'),
ui.text('The quick brown fox jumps over the lazy dog.'),
ui.separator(label='Separator 3'),
ui.text('The quick brown fox jumps over the lazy dog.'),
]
)
page.save()
