1

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.

JustTryingMyBest
  • 21
  • 4
  • Is any version of this using MyBinder to run so you could point us to an example? Even a minimal one? As it is, I'm surprised nobody has dinged you for a vague post with no details. Also you say your code is similar to other models? Maybe I'm misunderstanding what you mean there; however, if you feel it is similar to something that works, also include a pointer to that. The key difference(s) may be clear to a fresh set of eyes. Similarly, if there was something that works, did it actually work where you are currently running Voila? Or was it working elsewhere? – Wayne Apr 28 '22 at 14:55
  • @Wayne The link to my current MyBinder is: https://notebooks.gesis.org/binder/jupyter/user/tbentley2016-project-toxomwtw/voila/render/Stroke_Prediction.ipynb?token=iHSxAPzVQHOl1KDVOKEOJQ – JustTryingMyBest Apr 29 '22 at 04:47
  • @Wayne, updated the post to add code. The current MyBinder link just has the image without the button since I couldn't figure out how to get the button to work for the heatmap to show. Also, do you know how to get around MyBinder showing error 404 a few minutes after successfully rendering with Voila? Thank you for your help! – JustTryingMyBest Apr 29 '22 at 04:55
  • Minor point: So what you pasted as your you link to your current MyBinder, was just the link to that specific **TEMPORARY** session you were running. It gets confusing; however, when providing a link to people looking to help usually you want the launch URL which has a different pattern. For example, it will begin `https://mybinder.org/v2/gh/` and have the name of the github user & full repo name. It won't have a token or weird string of characters interrupting the repo name. It should look like what you see indicated if you hover over a `launch binder` badge. – Wayne Apr 29 '22 at 14:51
  • You have stuff in your requirements that is conflicting with installing JupyterLab and what is needed for the MyBinder stuff to work right. Plus, you have pinned everything which is a bad idea for troubleshooting. First you always unpin everything and then restore what is absolutely necessary and that doesn't break things. The easiest solution if you are trying to keep a record of versions you developed with in `requirements.txt` in root, or if that gets used by other services, is to make a separate subdirectory named `binder` in your repo and put a separate `requirements.txt` file in there. – Wayne Apr 29 '22 at 14:59
  • The configuration files in the `binder` subdirectory will preferentially get used by mybinder when it sees such a directory. In the `binder` subdirectory make the contents of your requirements only the extra packages you need to run your notebook code and Voila. **The infrastructure stuff needs to be out of there.** Sort of like [this example](https://github.com/fomightez/pdbepisa-binder/blob/main/requirements.txt). Once you get things working you could go back & add pinning to the versions in the `binder` subdirectory if you absolutely need a calculation or something to give the same result. – Wayne Apr 29 '22 at 15:06
  • Counterintuitive to the usual best practices from the point of reproducibility is the fact that pinning versions of packages is usually a bad idea for most stuff with MyBinder. This comes from the how packages in the typical data stack get developed along with each other over time. And so if you are using typical packages to mostly straightforward stuff, the development process would have ironed out issues that came up during use in concert with the popular packages. So you end up having your repo build correctly for longer and your code work for longer if you don't pin. Usually. – Wayne Apr 29 '22 at 15:13
  • This would be much more easily discussed at [the Jupyter Discourse Forum](https://discourse.jupyter.org/) where discussions are allowed. There's even 'Binder' & 'repo help' & 'help-wanted' categories. Anyway, I forked you repo and did what I suggested. You can see it working from [here](https://github.com/fomightez/tbentley_voila). Go there and hit `launch binder`. I added that button 3 you reference to a block at the bottom of `Stroke_Prediction.ipynb`. I found it work as you should see in the notes. And you should be able to try it yourself. – Wayne Apr 29 '22 at 16:34
  • @Wayne, thank you so much! I really appreciate your time and effort. Telling me about the link without the token was a huge help. I cleaned up the requirments.txt file and I have each of the confusion matrices showing when the widget button is clicked now. However, I have tried adding buttons to download the images as jpg files which also working in Jupyter Notebook but not in Voila. The link is: https://notebooks.gesis.org/binder/jupyter/user/tbentley2016-project-k01kg63p/voila/render/Stroke_Prediction.ipynb – JustTryingMyBest May 04 '22 at 21:58
  • Just so you know, the link in the last line was again to a temporary session launched from your repo, not a general launch link. I'll try to look at the download thing soon. – Wayne May 05 '22 at 14:48

1 Answers1

0

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)
Wayne
  • 6,607
  • 8
  • 36
  • 93