<jupyter_start><jupyter_text>V4A Example 03 - Output WidgetsIf you're using [widget events and callbacks](https://ipywidgets.readthedocs.io/en/latest/examples/Widget%20Events.html "Widget Events"), the [Output widget](https://ipywidgets.readthedocs.io/en/latest/examples/Output%20Widget.html "Output widget") is one of the most useful tools for making your notebook work in Voila.  If you have a callback function that uses `print()` or [`IPython.display`](https://ipython.readthedocs.io/en/stable/api/generated/IPython.display.html "IPython.display documentation") to display output, that output will not show up in Voila.  The Output widget is a quick way to fix that with minimal changes to your notebook.<jupyter_code>from IPython.display import display, HTML, clear_output
import ipywidgets as widgets<jupyter_output><empty_output><jupyter_text>The ProblemContinuing from the [Interact example](V4A%20Example%2002%20-%20Interact.ipynb "Example 2"), suppose you can't use the `interact` family for some reason, so you've put together your own widget UI, with your analysis triggered by a button click.<jupyter_code>def square1(b):
    x = input1.value
    print(x * x)
    
input1 = widgets.IntSlider(value=5, min=0, max=10)
button1 = widgets.Button(description="Square it!")
button1.on_click(square1)

widgets.HBox(children=[input1, button1])<jupyter_output><empty_output><jupyter_text>While this works fine in Jupyter, the print statement in the callback doesn't show up in Voila!  This is because the kernel can only print to the cell output area during the Rendering Phase, but the square function gets called during the Interactive Phase when your user clicks the button.  Remember that during the Interactive Phase, only widgets can talk to the kernel.  The SolutionSo how can you fix this?  Well, one way might be to use another widget.<jupyter_code>def square2(b):
    x = input2.value
    output2.value = x * x
    
input2 = widgets.IntSlider(value=5, min=0, max=10)
output2 = widgets.IntText()
button2 = widgets.Button(description="Square it!")
button2.on_click(square2)

widgets.HBox(children=[input2, button2, output2])<jupyter_output><empty_output><jupyter_text>That works for simple cases, but the Output widget is a more general solution that you can use for anything from print statements to rich output like charts and maps. Anything that Jupyter can display, the Output widget can display too.  And by using the Output widget as a decorator on your callback function, you don't have to change much of your code.  All you need to do is create the Output widget, capture the output of your callback, and make sure to include the Output widget in your layout somewhere.  Here's how you might fix that first example above.<jupyter_code>output3 = widgets.Output()

@output3.capture()
def square3(b):
    x = input3.value
    print(x * x)
    
input3 = widgets.IntSlider(value=5, min=0, max=10)
button3 = widgets.Button(description="Square it!")
button3.on_click(square3)

widgets.VBox([widgets.HBox([input3, button3]), output3])<jupyter_output><empty_output><jupyter_text>You can also clear the output each time the callback runs.<jupyter_code>output4 = widgets.Output()

@output4.capture(clear_output=True)
def square4(b):
    x = input4.value
    print(x * x)
    
input4 = widgets.IntSlider(value=5, min=0, max=10)
button4 = widgets.Button(description="Square it!")
button4.on_click(square4)

widgets.VBox([widgets.HBox([input4, button4]), output4])<jupyter_output><empty_output><jupyter_text>And you can use `IPython.display`, including calling `clear_output` manually.<jupyter_code>output5 = widgets.Output()

@output5.capture()
def square5(b):
    x = input5.value
    clear_output()
    display(HTML(f"<h3><i>{x * x}</i></h3>"))
    
input5 = widgets.IntSlider(value=5, min=0, max=10)
button5 = widgets.Button(description="Square it!")
button5.on_click(square5)

widgets.VBox([widgets.HBox([input5, button5]), output5])<jupyter_output><empty_output>
{'fraction_non_alphanumeric': 0.10269317895796627, 'fraction_numerical': 0.023408004027183488, 'mean_word_length': 5.612312811980034, 'pattern_counts': {'":': 0, '<': 29, '<?xml version=': 0, '>': 29, 'https://': 3, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'chain_length': '6', 'dir': 'jupyter-structured-clean-dedup', 'id': '196415', 'license': 'MIT', 'n_tokens_mistral': 1288, 'n_tokens_neox': 1250, 'n_words': 401, 'path': 'V4A Example 03 - Output Widgets.ipynb', 'repo_name': 'nbgallery/Voila4Analysts', 'size': '3973'}