Cannot call Python function from Javascript in Notebook

Question

I would like to call the function say_hello in Jupyter Notebook.

def say_hello():
 print('hello')
%%javascript
//What have been tried
// Method 1
var kernel = IPython.notebook.kernel;
kernel.execute("say_hello()", {"output": callback});
// Method 2
Jupyter.notebook.kernel.execute("say_hello()")

Both methods throw ReferenceError in the browser console.

VM5326:7 Uncaught ReferenceError: IPython is not defined
 at send_message (<anonymous>:7:22)
 at onClickSendMessage (<anonymous>:12:9)
 at HTMLButtonElement.onclick (app.ipynb:1)

version : JupterLab 3.5, IPython 7.16, Python 3.9.1

• ppn029012: It seems like new ipython do not support js api?
• user13146129: I don't know jupyter-notebook. But, I think you having issue with print and return. Cause, i think in your method 2 you are running source code like print. And, in say_hello command you are using print function also. So, i think if you write return instead of print in say_hello command. I think it will work...
• ppn029012: It is not about my function logic. It is about that I can't access IPython and Jupyter objects in my JS code.

Answer 1

The ReferenceError that you're getting is caused by Jupyter and IPython globals not being available in Jupyter Lab at all. You'd have to write a JupyterLab extension yourself.

These things do work in Jupyter Notebooks though. Both of the methods that you tried are a good start but need some improvements.

We need 3 cells - Python, HTML, and JS one.

1. let's just define the method we want to invoke from JS in Python.

def say_hello():
 print('hello')

2. We need to create a cell output, where the JS will be writing the results of the execution.

%%html
<div id="result_output">

3. We execute the Python function, and handle the execution result in a callback. From the callback, we'll fill the result text into the output that we created above.

%%javascript
const callbacks = {
 iopub: {
 output: (data) => {
 // this will print a message in browser console
 console.log('hello in console')
 // this will insert the execution result into "result_output" div
 document.getElementById("result_output").innerHTML = data.content.text
 }
 }
};
const kernel = Jupyter.notebook.kernel
kernel.execute('say_hello()', callbacks)

Some notes:

• your 2nd method would be good enough if you didn't need to see the result, the execution is executed, just the results from kernel are not handled (you can see that in Network tab in browser devtools in Websocket request messages)
• in your method 1 you use callback but you don't define it - that would lead to another ReferenceError
• using const is better than using var in JS
• Jupyter.notebook.kernel is the same as IPython.notebook.kernel