Embedding IpyWidgets outside Ipython notebook

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.

You might be able to find what you are looking for in my thread soon enough:

https://discourse.jupyter.org/t/hosting-interactive-jupyter-html-file-with-ipywidgets-on-github-as-web-page/8361/6