zzz

web/src/components/IPythonConsole.vue

@@ -0,0 +1,53 @@
+<template>
+    <div>
+      <h2>IPython Console</h2>
+      <textarea v-model="input"></textarea>
+      <button @click="execute">Execute</button>
+      <pre v-if="result">{{ result }}</pre>
+    </div>
+  </template>
+  
+  <script>
+  import * as IPython from 'jupyter';
+  
+  export default {
+    data() {
+      return {
+        input: '',
+        result: '',
+      };
+    },
+    mounted() {
+      const widget = this.$refs.console;
+      if (widget) {
+        // Initialize the IPython console with the existing DOM node.
+        IPython.Widget(widget);
+        
+        // Connect the console's output area to the textarea for reading/writing.
+        widget.editor.getOutputArea().attachTo(this.$refs.input);
+  
+        // Listen for changes in the textarea.
+        this.$watch('input', () => {
+          if (this.input === '') return;
+          this.execute();
+        });
+      }
+    },
+    methods: {
+      execute() {
+        const widget = this.$refs.console;
+        const code = this.input;
+  
+        // Execute the code and display the results.
+        widget.executeCode(code, null, (err, result) => {
+          if (err) {
+            console.error(err);
+            this.result = '';
+          } else {
+            this.result = result;
+          }
+        });
+      },
+    },
+  };
+  </script>