Widgets run perfectly in Jupyter Notebook, but do nothing in Voila

Question

I have several buttons which generate images. All work perfectly in Jupyter Notebook, but when I click Voila, and click the buttons, nothing happens. The first button works, but the code is very similar to run other models, yet the other buttons do not work. Is there a work around for this issue?

Edit: My code which does not show the output when the button is clicked:

compare = {}
button9 = widgets.Button(description = "Report All")
output = widgets.Output()
display(button9, output)

dt = DecisionTreeClassifier(random_state=42)
dt = dt.fit(X_train, y_train)
y_pred = dt.predict(X_test)
compare['Decision Trees'] = [accuracy_score(y_test, y_pred), precision_score(y_test, y_pred), recall_score(y_test, y_pred), f1_score(y_test, y_pred)]

def report_button(b):
    compare = pd.DataFrame.from_dict(compare).T
    compare.columns = ['Accuracy', 'Precision', 'Recall', 'F1 Score']
    compare = com.sort_values('Accuracy', ascending=False)
    sns.heatmap(compare, center = True, fmt='.4f', cmap='Blues', annot=True)
    
button9.on_click(report_button)

However this code displays the output when clicked:

button3 = widgets.Button(description="Decision Trees")
output3 = widgets.Output()
display(button3, output3)

def dt_button(b):
# Decision Trees Classifier
    dt = DecisionTreeClassifier(random_state=42)
    dt = dt.fit(X_train, y_train)
    y_pred = dt.predict(X_test)
    compare['Decision Trees'] = [accuracy_score(y_test, y_pred), precision_score(y_test, y_pred_dt), recall_score(y_test, y_pred), f1_score(y_test, y_pred)]
    CM = confusion_matrix(y_test, y_pred_dt)
    sns.heatmap(CM, center = True, fmt='', cmap='Blues', annot=True)
    plt.title('Decision Trees Confusion Matrix')
    plt.show()

button3.on_click(dt_button)

Additionally, I am having the issue of MyBinder rendering my file with Voila, but after a few minutes, the MyBinder link shows Error 404.

Answer 1

I'm answering your last question here (about the download button) because I need to add code blocks and comments don't allow that.

---

You are using Panel in your notebook to do the download and so it works. For Voila you need to stick with ipywidgets-compatible solutions as I discussed earlier. You cannot just add another dashboard extension, Panel, and expect it to work in Voila

Here makes it seem this isn't as easy as it seems.

Suggested Option:

Based on https://stackoverflow.com/a/60013735/8508004 , using SVM_Confusion_Matrix.jpg as the example.

%%html
<a href="SVM_Confusion_Matrix.jpg" download="SVM_Confusion_Matrix.jpg">Click to Download SVM image</a>

Options along that line can even be coded to show up dynamically after an event in VOila, see example code use.

Not suggested but could be useful for similar:
Based on https://github.com/jupyter-widgets/ipywidgets/issues/2471#issuecomment-580965788 (this just opens the image as separate and you have to right-click and save image as)

from IPython.display import display, FileLink

local_file = FileLink('./SVM_Confusion_Matrix.jpg', result_html_prefix="Click here to download: ")
display(local_file)