From fa7f180cb7cd22e2cac8be3b88630920596cda61 Mon Sep 17 00:00:00 2001
From: Saifeddine ALOUI <aloui.seifeddine@gmail.com>
Date: Mon, 21 Aug 2023 22:07:11 +0200
Subject: [PATCH] zzz

---
 web/src/components/IPythonConsole.vue | 53 +++++++++++++++++++++++++++
 1 file changed, 53 insertions(+)
 create mode 100644 web/src/components/IPythonConsole.vue

diff --git a/web/src/components/IPythonConsole.vue b/web/src/components/IPythonConsole.vue
new file mode 100644
index 00000000..b0035bdf
--- /dev/null
+++ b/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>
\ No newline at end of file