Dear all,
I’m a newbie in this community and kindly ask for your help about Widgets in python.
I am currently trying to embed some widgets from my ipython notebook into an HTML page for giving access to non-technical people.
Basically, my code updated a result based on the choice selected in the radiobutton widgets.
When I run my code in jupyternotebook all the elements are correctly displayed.
However, when I tried to embed this snippet of code into an HTML page, I cannot be able to see my final result even though the widgets are correctly displaying.
I read the documentation Embedding Jupyter Widgets in Other Contexts than the Notebook — Jupyter Widgets 8.0.0a4 documentation but cannot find a workaround to be able to display the final result.
Does anyone can bring me some help on that.
I have enclosed below my snippet of code that generate this HTML page.
import json
from future import print_function
from ipywidgets import interact, interactive, fixed, interact_manual,widgets,Text
from ipywidgets.embed import embed_data
from IPython.display import display, clear_output
import numpy as np
foo = [(‘local and roadside’,1),(‘nationwide’,2),(‘european’,3)]
style = {‘description_width’: ‘initial’}
dropbox1 = widgets.RadioButtons(
options=foo, # Object to iterate over
description='Type of Cover required:',
style=style, # User defined
value=foo[1][1], # Default value selection
rows=len(foo), # The number of rows to display when showing the box
interactive=True, # This makes the box interactive, I believe this is true by default
);
y = Text(description=‘Expected Claim Frequency :’,
style =style)
output = widgets.Output()
class call_freq():
def __init__(self):
self.loc,self.nat,self.eu=([] for i in range(3))
#self.y.value=""
def coverage(self):
#loc,nat,eu=([] for i in range(3))
#y.value = args['new']
if dropbox1.value==1:
self.loc=1
self.nat,self.eu=0,0
#y.value="yes!"
elif dropbox1.value==2:
self.nat=1
self.loc,self.eu=0,0
#y.value="maybe"
else:
self.eu=1
self.loc,self.nat=0,0
#y.value="no"
value = self.loc*-0.1229+self.nat*-0.0468+self.eu*-0.4080
return value
def exp_freq(self,*args):
with output:
val = round(np.exp(-2.8553+self.coverage()),4)
y.value=str(val)
return y.value
c = call_freq()
dropbox1.observe(c.exp_freq, ‘value’)
out1 = widgets.VBox([dropbox1,y,output])
tab = widgets.Tab(children = [out1])
tab.set_title(0, ‘Claim Frequency’)
data = embed_data(views=[tab])
html_template = “”"
<title>Widget export</title>
<!-- Load RequireJS, used by the IPywidgets for dependency management -->
<script
src="https://cdnjs.cloudflare.com/ajax/libs/require.js/2.3.4/require.min.js"
integrity="sha256-Ae2Vz/4ePdIu6ZyI/5ZGsYnb+m0JlOmKPjt6XZ9JJkA="
crossorigin="anonymous">
</script>
<!-- Load IPywidgets bundle for embedding. -->
<script
data-jupyter-widgets-cdn="https://unpkg.com/"
data-jupyter-widgets-cdn-only
src="https://cdn.jsdelivr.net/npm/@jupyter-widgets/html-manager@*/dist/embed-amd.js"
crossorigin="anonymous">
</script>
<!-- The state of all the widget models on the page -->
<script type="application/vnd.jupyter.widget-state+json">
{manager_state}
</script>
<h1>Estimating Claim Frequency </h1>
<p> This interactive tool enables us simulating expected claim frequency based on risk factors </p>
<div id="first-slider-widget">
<!-- This script tag will be replaced by the view's DOM tree -->
<script type="application/vnd.jupyter.widget-view+json">
{widget_views[0]}
</script>
</div>
<hrule />
manager_state = json.dumps(data[‘manager_state’])
widget_views = [json.dumps(view) for view in data[‘view_specs’]]
rendered_template = html_template.format(manager_state=manager_state, widget_views=widget_views)
with open(‘widget.html’, ‘w’) as fp:
fp.write(rendered_template)
Thanks in advance for your help.