<SYSTEM_TASK:>
Given the following text description, write Python code to implement the functionality described below step by step
<END_TASK>
<USER_TASK:>
Description:
 Index - Back - Next
Widget List
Step1:  Numeric widgets
There are many widgets distributed with ipywidgets that are designed to display numeric values.  Widgets exist for displaying integers and floats, both bounded and unbounded.  The integer widgets share a similar naming scheme to their floating point counterparts.  By replacing Float with Int in the widget name, you can find the Integer equivalent.
IntSlider
The slider is displayed with a specified, initial value. Lower and upper bounds are defined by min and max, and the value can be incremented according to the step parameter.
The slider's label is defined by description parameter 
The slider's orientation is either 'horizontal' (default) or 'vertical'
readout  displays the current value of the slider next to it. The options are True (default) or False 
readout_format specifies the format function used to represent slider value. The default is '.2f'
Step2:  FloatSlider
Step3:  An example of sliders displayed vertically.
Step4:  FloatLogSlider
The FloatLogSlider has a log scale, which makes it easy to have a slider that covers a wide range of positive magnitudes. The min and max refer to the minimum and maximum exponents of the base, and the value refers to the actual value of the slider.
Step5:  IntRangeSlider
Step6:  FloatRangeSlider
Step7:  IntProgress
Step8:  FloatProgress
Step9:  The numerical text boxes that impose some limit on the data (range, integer-only) impose that restriction when the user presses enter.
BoundedIntText
Step10:  BoundedFloatText
Step11:  IntText
Step12:  FloatText
Step13:  Boolean widgets
There are three widgets that are designed to display a boolean value.
ToggleButton
Step14:  Checkbox
value specifies the value of the checkbox
indent parameter places an indented checkbox, aligned with other controls. Options are True (default) or False
Step15:  Valid
The valid widget provides a read-only indicator.
Step16:  Selection widgets
There are several widgets that can be used to display single selection lists, and two that can be used to select multiple values.  All inherit from the same base class.  You can specify the enumeration of selectable options by passing a list (options are either (label, value) pairs, or simply values for which the labels are derived by calling str).
<div class="alert alert-info">
Changes in *ipywidgets 8*
Step17:  The following is also valid, displaying the words 'One', 'Two', 'Three' as the dropdown choices but returning the values 1, 2, 3.
Step18:  RadioButtons
Step19:  With dynamic layout and very long labels
Step20:  Select
Step21:  SelectionSlider
Step22:  SelectionRangeSlider
The value, index, and label keys are 2-tuples of the min and max values selected. The options must be nonempty.
Step23:  ToggleButtons
Step24:  SelectMultiple
Multiple values can be selected with <kbd>shift</kbd> and/or <kbd>ctrl</kbd> (or <kbd>command</kbd>) pressed and mouse clicks or arrow keys.
Step25:  String widgets
There are several widgets that can be used to display a string value.  The Text, Textarea, and Combobox widgets accept input.  The HTML and HTMLMath widgets display a string as HTML (HTMLMath also renders math). The Label widget can be used to construct a custom control label.
Text
Step26:  Textarea
Step27:  Combobox
Step28:  Password
The Password widget hides user input on the screen. This widget is not a secure way to collect sensitive information because
Step29:  Label
The Label widget is useful if you need to build a custom description next to a control using similar styling to the built-in control descriptions.
Step30:  HTML
Step31:  HTML Math
Step32:  Image
Step33:  Button
Step34:  The icon attribute can be used to define an icon; see the fontawesome page for available icons. 
A callback function foo can be registered using button.on_click(foo). The function foo will be called when the button is clicked with the button instance as its single argument.
Output
The Output widget can capture and display stdout, stderr and rich output generated by IPython. For detailed documentation, see the output widget examples.
Play (Animation) widget
The Play widget is useful to perform animations by iterating on a sequence of integers with a certain speed. The value of the slider below is linked to the player.
Step35:  Tags input widget
The TagsInput widget is useful to for selecting/creating a list of tags. You can drag and drop tags to reorder them, limit them to a set of allowed values, or even prevent making duplicate tags.
Step36:  Date picker
For a list of browsers that support the date picker widget, see the MDN article for the HTML date input field.
Step37:  Time picker
For a list of browsers that support the time picker widget, see the MDN article for the HTML time input field.
Step38:  Datetime picker
For a list of browsers that support the datetime picker widget, see the MDN article for the HTML datetime-local input field. For the browsers that do not support the datetime-local input, we try to fall back on displaying separate date and time inputs.
Time zones
There are two points worth to note with regards to timezones for datetimes
Step39:  Color picker
Step40:  File Upload
The FileUpload allows to upload any type of file(s) into memory in the kernel.
Step41:  The upload widget exposes a value attribute that contains the files uploaded. The value attribute is a tuple with a dictionary for each uploaded file. For instance
Step42:  Container/Layout widgets
These widgets are used to hold other widgets, called children. Each has a children property that may be set either when the widget is created or later.
Box
Step43:  HBox
Step44:  VBox
Step45:  GridBox
This box uses the HTML Grid specification to lay out its children in two dimensional grid. The example below lays out the 8 items inside in 3 columns and as many rows as needed to accommodate the items.
Step46:  Accordion
Step47:  Tabs
In this example the children are set after the tab is created. Titles for the tabs are set in the same way they are for Accordion.
Step48:  Stacked
The Stacked widget can have multiple children widgets as for Tab and Accordion, but only shows one at a time depending on the value of selected_index
Step49:  This can be used in combination with another selection-based widget to show different widgets depending on the selection
Step50:  Accordion,  Tab, and Stacked use selected_index, not value
Unlike the rest of the widgets discussed earlier, the container widgets Accordion and Tab update their selected_index attribute when the user changes which accordion or tab is selected. That means that you can both see what the user is doing and programmatically set what the user sees by setting the value of selected_index.
Setting selected_index = None closes all of the accordions or deselects all tabs.
In the cells below try displaying or setting the selected_index of the tab and/or accordion.
Step51:  Nesting tabs and accordions
Tabs and accordions can be nested as deeply as you want. If you have a few minutes, try nesting a few accordions or putting an accordion inside a tab or a tab inside an accordion. 
The example below makes a couple of tabs with an accordion children in one of them
<ASSISTANT_TASK:>
Python Code:
import ipywidgets as widgets
Explanation: Index - Back - Next
Widget List
End of explanation
widgets.IntSlider(
    value=7,
    min=0,
    max=10,
    step=1,
    description='Test:',
    disabled=False,
    continuous_update=False,
    orientation='horizontal',
    readout=True,
    readout_format='d'
)
Explanation: Numeric widgets
There are many widgets distributed with ipywidgets that are designed to display numeric values.  Widgets exist for displaying integers and floats, both bounded and unbounded.  The integer widgets share a similar naming scheme to their floating point counterparts.  By replacing Float with Int in the widget name, you can find the Integer equivalent.
IntSlider
The slider is displayed with a specified, initial value. Lower and upper bounds are defined by min and max, and the value can be incremented according to the step parameter.
The slider's label is defined by description parameter 
The slider's orientation is either 'horizontal' (default) or 'vertical'
readout  displays the current value of the slider next to it. The options are True (default) or False 
readout_format specifies the format function used to represent slider value. The default is '.2f'
End of explanation
widgets.FloatSlider(
    value=7.5,
    min=0,
    max=10.0,
    step=0.1,
    description='Test:',
    disabled=False,
    continuous_update=False,
    orientation='horizontal',
    readout=True,
    readout_format='.1f',
)
Explanation: FloatSlider
End of explanation
widgets.FloatSlider(
    value=7.5,
    min=0,
    max=10.0,
    step=0.1,
    description='Test:',
    disabled=False,
    continuous_update=False,
    orientation='vertical',
    readout=True,
    readout_format='.1f',
)
Explanation: An example of sliders displayed vertically.
End of explanation
widgets.FloatLogSlider(
    value=10,
    base=10,
    min=-10, # max exponent of base
    max=10, # min exponent of base
    step=0.2, # exponent step
    description='Log Slider'
)
Explanation: FloatLogSlider
The FloatLogSlider has a log scale, which makes it easy to have a slider that covers a wide range of positive magnitudes. The min and max refer to the minimum and maximum exponents of the base, and the value refers to the actual value of the slider.
End of explanation
widgets.IntRangeSlider(
    value=[5, 7],
    min=0,
    max=10,
    step=1,
    description='Test:',
    disabled=False,
    continuous_update=False,
    orientation='horizontal',
    readout=True,
    readout_format='d',
)
Explanation: IntRangeSlider
End of explanation
widgets.FloatRangeSlider(
    value=[5, 7.5],
    min=0,
    max=10.0,
    step=0.1,
    description='Test:',
    disabled=False,
    continuous_update=False,
    orientation='horizontal',
    readout=True,
    readout_format='.1f',
)
Explanation: FloatRangeSlider
End of explanation
widgets.IntProgress(
    value=7,
    min=0,
    max=10,
    description='Loading:',
    bar_style='', # 'success', 'info', 'warning', 'danger' or ''
    style={'bar_color': 'maroon'},
    orientation='horizontal'
)
Explanation: IntProgress
End of explanation
widgets.FloatProgress(
    value=7.5,
    min=0,
    max=10.0,
    description='Loading:',
    bar_style='info',
    style={'bar_color': '#ffff00'},
    orientation='horizontal'
)
Explanation: FloatProgress
End of explanation
widgets.BoundedIntText(
    value=7,
    min=0,
    max=10,
    step=1,
    description='Text:',
    disabled=False
)
Explanation: The numerical text boxes that impose some limit on the data (range, integer-only) impose that restriction when the user presses enter.
BoundedIntText
End of explanation
widgets.BoundedFloatText(
    value=7.5,
    min=0,
    max=10.0,
    step=0.1,
    description='Text:',
    disabled=False
)
Explanation: BoundedFloatText
End of explanation
widgets.IntText(
    value=7,
    description='Any:',
    disabled=False
)
Explanation: IntText
End of explanation
widgets.FloatText(
    value=7.5,
    description='Any:',
    disabled=False
)
Explanation: FloatText
End of explanation
widgets.ToggleButton(
    value=False,
    description='Click me',
    disabled=False,
    button_style='', # 'success', 'info', 'warning', 'danger' or ''
    tooltip='Description',
    icon='check' # (FontAwesome names without the `fa-` prefix)
)
Explanation: Boolean widgets
There are three widgets that are designed to display a boolean value.
ToggleButton
End of explanation
widgets.Checkbox(
    value=False,
    description='Check me',
    disabled=False,
    indent=False
)
Explanation: Checkbox
value specifies the value of the checkbox
indent parameter places an indented checkbox, aligned with other controls. Options are True (default) or False
End of explanation
widgets.Valid(
    value=False,
    description='Valid!',
)
Explanation: Valid
The valid widget provides a read-only indicator.
End of explanation
widgets.Dropdown(
    options=['1', '2', '3'],
    value='2',
    description='Number:',
    disabled=False,
)
Explanation: Selection widgets
There are several widgets that can be used to display single selection lists, and two that can be used to select multiple values.  All inherit from the same base class.  You can specify the enumeration of selectable options by passing a list (options are either (label, value) pairs, or simply values for which the labels are derived by calling str).
<div class="alert alert-info">
Changes in *ipywidgets 8*:
Selection widgets no longer accept a dictionary of options. Pass a list of key-value pairs instead.
</div>
Dropdown
End of explanation
widgets.Dropdown(
    options=[('One', 1), ('Two', 2), ('Three', 3)],
    value=2,
    description='Number:',
)
Explanation: The following is also valid, displaying the words 'One', 'Two', 'Three' as the dropdown choices but returning the values 1, 2, 3.
End of explanation
widgets.RadioButtons(
    options=['pepperoni', 'pineapple', 'anchovies'],
#    value='pineapple', # Defaults to 'pineapple'
#    layout={'width': 'max-content'}, # If the items' names are long
    description='Pizza topping:',
    disabled=False
)
Explanation: RadioButtons
End of explanation
widgets.Box(
    [
        widgets.Label(value='Pizza topping with a very long label:'), 
        widgets.RadioButtons(
            options=[
                'pepperoni', 
                'pineapple', 
                'anchovies', 
                'and the long name that will fit fine and the long name that will fit fine and the long name that will fit fine '
            ],
            layout={'width': 'max-content'}
        )
    ]
)
Explanation: With dynamic layout and very long labels
End of explanation
widgets.Select(
    options=['Linux', 'Windows', 'macOS'],
    value='macOS',
    # rows=10,
    description='OS:',
    disabled=False
)
Explanation: Select
End of explanation
widgets.SelectionSlider(
    options=['scrambled', 'sunny side up', 'poached', 'over easy'],
    value='sunny side up',
    description='I like my eggs ...',
    disabled=False,
    continuous_update=False,
    orientation='horizontal',
    readout=True
)
Explanation: SelectionSlider
End of explanation
import datetime
dates = [datetime.date(2015, i, 1) for i in range(1, 13)]
options = [(i.strftime('%b'), i) for i in dates]
widgets.SelectionRangeSlider(
    options=options,
    index=(0, 11),
    description='Months (2015)',
    disabled=False
)
Explanation: SelectionRangeSlider
The value, index, and label keys are 2-tuples of the min and max values selected. The options must be nonempty.
End of explanation
widgets.ToggleButtons(
    options=['Slow', 'Regular', 'Fast'],
    description='Speed:',
    disabled=False,
    button_style='', # 'success', 'info', 'warning', 'danger' or ''
    tooltips=['Description of slow', 'Description of regular', 'Description of fast'],
#     icons=['check'] * 3
)
Explanation: ToggleButtons
End of explanation
widgets.SelectMultiple(
    options=['Apples', 'Oranges', 'Pears'],
    value=['Oranges'],
    #rows=10,
    description='Fruits',
    disabled=False
)
Explanation: SelectMultiple
Multiple values can be selected with <kbd>shift</kbd> and/or <kbd>ctrl</kbd> (or <kbd>command</kbd>) pressed and mouse clicks or arrow keys.
End of explanation
widgets.Text(
    value='Hello World',
    placeholder='Type something',
    description='String:',
    disabled=False   
)
Explanation: String widgets
There are several widgets that can be used to display a string value.  The Text, Textarea, and Combobox widgets accept input.  The HTML and HTMLMath widgets display a string as HTML (HTMLMath also renders math). The Label widget can be used to construct a custom control label.
Text
End of explanation
widgets.Textarea(
    value='Hello World',
    placeholder='Type something',
    description='String:',
    disabled=False
)
Explanation: Textarea
End of explanation
widgets.Combobox(
    # value='John',
    placeholder='Choose Someone',
    options=['Paul', 'John', 'George', 'Ringo'],
    description='Combobox:',
    ensure_option=True,
    disabled=False
)
Explanation: Combobox
End of explanation
widgets.Password(
    value='password',
    placeholder='Enter password',
    description='Password:',
    disabled=False
)
Explanation: Password
The Password widget hides user input on the screen. This widget is not a secure way to collect sensitive information because:
The contents of the Password widget are transmitted unencrypted.
If the widget state is saved in the notebook the contents of the Password widget is stored as plain text.
End of explanation
widgets.HBox([widgets.Label(value="The $m$ in $E=mc^2$:"), widgets.FloatSlider()])
Explanation: Label
The Label widget is useful if you need to build a custom description next to a control using similar styling to the built-in control descriptions.
End of explanation
widgets.HTML(
    value="Hello <b>World</b>",
    placeholder='Some HTML',
    description='Some HTML',
)
Explanation: HTML
End of explanation
widgets.HTMLMath(
    value=r"Some math and <i>HTML</i>: \(x^2\) and $$\frac{x+1}{x-1}$$",
    placeholder='Some HTML',
    description='Some HTML',
)
Explanation: HTML Math
End of explanation
file = open("images/WidgetArch.png", "rb")
image = file.read()
widgets.Image(
    value=image,
    format='png',
    width=300,
    height=400,
)
Explanation: Image
End of explanation
button = widgets.Button(
    description='Click me',
    disabled=False,
    button_style='', # 'success', 'info', 'warning', 'danger' or ''
    tooltip='Click me',
    icon='check' # (FontAwesome names without the `fa-` prefix)
)
button
Explanation: Button
End of explanation
play = widgets.Play(
    value=50,
    min=0,
    max=100,
    step=1,
    interval=500,
    description="Press play",
    disabled=False
)
slider = widgets.IntSlider()
widgets.jslink((play, 'value'), (slider, 'value'))
widgets.HBox([play, slider])
Explanation: The icon attribute can be used to define an icon; see the fontawesome page for available icons. 
A callback function foo can be registered using button.on_click(foo). The function foo will be called when the button is clicked with the button instance as its single argument.
Output
The Output widget can capture and display stdout, stderr and rich output generated by IPython. For detailed documentation, see the output widget examples.
Play (Animation) widget
The Play widget is useful to perform animations by iterating on a sequence of integers with a certain speed. The value of the slider below is linked to the player.
End of explanation
tags = widgets.TagsInput(
    value=['pizza', 'fries'],
    allowed_tags=['pizza', 'fries', 'tomatoes', 'steak'],
    allow_duplicates=False
)
tags
color_tags = widgets.ColorsInput(
    value=['red', '#2f6d30'],
    # allowed_tags=['red', 'blue', 'green'],
    # allow_duplicates=False
)
color_tags
Explanation: Tags input widget
The TagsInput widget is useful to for selecting/creating a list of tags. You can drag and drop tags to reorder them, limit them to a set of allowed values, or even prevent making duplicate tags.
End of explanation
widgets.DatePicker(
    description='Pick a Date',
    disabled=False
)
Explanation: Date picker
For a list of browsers that support the date picker widget, see the MDN article for the HTML date input field.
End of explanation
widgets.TimePicker(
    description='Pick a Time',
    disabled=False
)
Explanation: Time picker
For a list of browsers that support the time picker widget, see the MDN article for the HTML time input field.
End of explanation
widgets.DatetimePicker(
    description='Pick a Time',
    disabled=False
)
Explanation: Datetime picker
For a list of browsers that support the datetime picker widget, see the MDN article for the HTML datetime-local input field. For the browsers that do not support the datetime-local input, we try to fall back on displaying separate date and time inputs.
Time zones
There are two points worth to note with regards to timezones for datetimes:
- The browser always picks datetimes using its timezone.
- The kernel always gets the datetimes in the default system timezone of the kernel (see https://docs.python.org/3/library/datetime.html#datetime.datetime.astimezone with None as the argument).
This means that if the kernel and browser have different timezones, the default string serialization of the timezones might differ, but they will still represent the same point in time.
End of explanation
widgets.ColorPicker(
    concise=False,
    description='Pick a color',
    value='blue',
    disabled=False
)
Explanation: Color picker
End of explanation
widgets.FileUpload(
    accept='',  # Accepted file extension e.g. '.txt', '.pdf', 'image/*', 'image/*,.pdf'
    multiple=False  # True to accept multiple files upload else False
)
Explanation: File Upload
The FileUpload allows to upload any type of file(s) into memory in the kernel.
End of explanation
widgets.Controller(
    index=0,
)
Explanation: The upload widget exposes a value attribute that contains the files uploaded. The value attribute is a tuple with a dictionary for each uploaded file. For instance:
```python
uploader = widgets.FileUpload()
display(uploader)
upload something...
once a file is uploaded, use the .value attribute to retrieve the content:
uploader.value
=> (
=>   {
=>     'name': 'example.txt',
=>     'type': 'text/plain',
=>     'size': 36,
=>     'last_modified': datetime.datetime(2020, 1, 9, 15, 58, 43, 321000, tzinfo=datetime.timezone.utc),
=>     'content': <memory at 0x10c1b37c8>
=>   },
=> )
```
Entries in the dictionary can be accessed either as items, as one would any dictionary, or as attributes:
```
uploaded_file = uploader.value[0]
uploaded_file["size"]
=> 36
uploaded_file.size
=> 36
```
The contents of the file uploaded are in the value of the content key. They are a memory view:
```python
uploaded_file.content
=> <memory at 0x10c1b37c8>
```
You can extract the content to bytes:
```python
uploaded_file.content.tobytes()
=> b'This is the content of example.txt.\n'
```
If the file is a text file, you can get the contents as a string by decoding it:
```python
import codecs
codecs.decode(uploaded_file.content, encoding="utf-8")
=> 'This is the content of example.txt.\n'
```
You can save the uploaded file to the filesystem from the kernel:
python
with open("./saved-output.txt", "wb") as fp:
    fp.write(uploaded_file.content)
To convert the uploaded file into a Pandas dataframe, you can use a BytesIO object:
python
import io
import pandas as pd
pd.read_csv(io.BytesIO(uploaded_file.content))
If the uploaded file is an image, you can visualize it with an image widget:
python
widgets.Image(value=uploaded_file.content.tobytes())
<div class="alert alert-info">
Changes in *ipywidgets 8*:
The `FileUpload` changed significantly in ipywidgets 8:
- The `.value` traitlet is now a list of dictionaries, rather than a dictionary mapping the uploaded name to the content. To retrieve the original form, use `{f["name"]: f.content.tobytes() for f in uploader.value}`.
- The `.data` traitlet has been removed. To retrieve it, use `[f.content.tobytes() for f in uploader.value]`.
- The `.metadata` traitlet has been removed. To retrieve it, use `[{k: v for k, v in f.items() if k != "content"} for f in w.value]`.
</div>
<div class="alert alert-warning">
Warning: When using the `FileUpload` Widget, uploaded file content might be saved in the notebook if widget state is saved.
</div>
Controller
The Controller allows a game controller to be used as an input device.
End of explanation
items = [widgets.Label(str(i)) for i in range(4)]
widgets.Box(items)
Explanation: Container/Layout widgets
These widgets are used to hold other widgets, called children. Each has a children property that may be set either when the widget is created or later.
Box
End of explanation
items = [widgets.Label(str(i)) for i in range(4)]
widgets.HBox(items)
Explanation: HBox
End of explanation
items = [widgets.Label(str(i)) for i in range(4)]
left_box = widgets.VBox([items[0], items[1]])
right_box = widgets.VBox([items[2], items[3]])
widgets.HBox([left_box, right_box])
Explanation: VBox
End of explanation
items = [widgets.Label(str(i)) for i in range(8)]
widgets.GridBox(items, layout=widgets.Layout(grid_template_columns="repeat(3, 100px)"))
Explanation: GridBox
This box uses the HTML Grid specification to lay out its children in two dimensional grid. The example below lays out the 8 items inside in 3 columns and as many rows as needed to accommodate the items.
End of explanation
accordion = widgets.Accordion(children=[widgets.IntSlider(), widgets.Text()], titles=('Slider', 'Text'))
accordion
Explanation: Accordion
End of explanation
tab_contents = ['P0', 'P1', 'P2', 'P3', 'P4']
children = [widgets.Text(description=name) for name in tab_contents]
tab = widgets.Tab()
tab.children = children
tab.titles = [str(i) for i in range(len(children))]
tab
Explanation: Tabs
In this example the children are set after the tab is created. Titles for the tabs are set in the same way they are for Accordion.
End of explanation
button = widgets.Button(description='Click here')
slider = widgets.IntSlider()
stacked = widgets.Stacked([button, slider])
stacked  # will show only the button
Explanation: Stacked
The Stacked widget can have multiple children widgets as for Tab and Accordion, but only shows one at a time depending on the value of selected_index:
End of explanation
dropdown = widgets.Dropdown(options=['button', 'slider'])
widgets.jslink((dropdown, 'index'), (stacked, 'selected_index'))
widgets.VBox([dropdown, stacked])
Explanation: This can be used in combination with another selection-based widget to show different widgets depending on the selection:
End of explanation
tab.selected_index = 3
accordion.selected_index = None
Explanation: Accordion,  Tab, and Stacked use selected_index, not value
Unlike the rest of the widgets discussed earlier, the container widgets Accordion and Tab update their selected_index attribute when the user changes which accordion or tab is selected. That means that you can both see what the user is doing and programmatically set what the user sees by setting the value of selected_index.
Setting selected_index = None closes all of the accordions or deselects all tabs.
In the cells below try displaying or setting the selected_index of the tab and/or accordion.
End of explanation
tab_nest = widgets.Tab()
tab_nest.children = [accordion, accordion]
tab_nest.titles = ('An accordion', 'Copy of the accordion')
tab_nest
Explanation: Nesting tabs and accordions
Tabs and accordions can be nested as deeply as you want. If you have a few minutes, try nesting a few accordions or putting an accordion inside a tab or a tab inside an accordion. 
The example below makes a couple of tabs with an accordion children in one of them
End of explanation
<END_TASK>