diff --git a/examples/fixing_bug_example.ipynb b/examples/fixing_bug_example.ipynb
new file mode 100644
index 0000000..c925c95
--- /dev/null
+++ b/examples/fixing_bug_example.ipynb
@@ -0,0 +1,240 @@
+{
+ "cells": [
+  {
+   "cell_type": "code",
+   "execution_count": 4,
+   "id": "1114df89",
+   "metadata": {},
+   "outputs": [
+    {
+     "ename": "NameError",
+     "evalue": "name 'printa' is not defined",
+     "output_type": "error",
+     "traceback": [
+      "\u001b[1;31m---------------------------------------------------------------------------\u001b[0m",
+      "\u001b[1;31mNameError\u001b[0m                                 Traceback (most recent call last)",
+      "Cell \u001b[1;32mIn[4], line 2\u001b[0m\n\u001b[0;32m      1\u001b[0m \u001b[38;5;66;03m# print \"Hello, World!\"\u001b[39;00m\n\u001b[1;32m----> 2\u001b[0m \u001b[43mprinta\u001b[49m(\u001b[38;5;124m\"\u001b[39m\u001b[38;5;124mHello, World!\u001b[39m\u001b[38;5;124m\"\u001b[39m)\n",
+      "\u001b[1;31mNameError\u001b[0m: name 'printa' is not defined"
+     ]
+    }
+   ],
+   "source": [
+    "# print \"Hello, World!\"\n",
+    "printa(\"Hello, World!\")"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": 5,
+   "id": "88fe6fb4",
+   "metadata": {},
+   "outputs": [
+    {
+     "ename": "SyntaxError",
+     "evalue": "expected ':' (3930893725.py, line 1)",
+     "output_type": "error",
+     "traceback": [
+      "\u001b[1;36m  Cell \u001b[1;32mIn[5], line 1\u001b[1;36m\u001b[0m\n\u001b[1;33m    if x == 5\u001b[0m\n\u001b[1;37m             ^\u001b[0m\n\u001b[1;31mSyntaxError\u001b[0m\u001b[1;31m:\u001b[0m expected ':'\n"
+     ]
+    }
+   ],
+   "source": [
+    "if x == 5\n",
+    "    print(\"x == 5\")"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": 30,
+   "id": "b73b834e",
+   "metadata": {},
+   "outputs": [
+    {
+     "ename": "NameError",
+     "evalue": "name 'y' is not defined",
+     "output_type": "error",
+     "traceback": [
+      "\u001b[1;31m---------------------------------------------------------------------------\u001b[0m",
+      "\u001b[1;31mNameError\u001b[0m                                 Traceback (most recent call last)",
+      "Cell \u001b[1;32mIn[30], line 2\u001b[0m\n\u001b[0;32m      1\u001b[0m x \u001b[38;5;241m=\u001b[39m \u001b[38;5;241m10\u001b[39m\n\u001b[1;32m----> 2\u001b[0m \u001b[38;5;28mprint\u001b[39m(\u001b[43my\u001b[49m)\n",
+      "\u001b[1;31mNameError\u001b[0m: name 'y' is not defined"
+     ]
+    }
+   ],
+   "source": [
+    "x = 10\n",
+    "print(y)"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": 39,
+   "id": "72409629",
+   "metadata": {},
+   "outputs": [
+    {
+     "ename": "NameError",
+     "evalue": "name 'calculate_sum' is not defined",
+     "output_type": "error",
+     "traceback": [
+      "\u001b[1;31m---------------------------------------------------------------------------\u001b[0m",
+      "\u001b[1;31mNameError\u001b[0m                                 Traceback (most recent call last)",
+      "Cell \u001b[1;32mIn[39], line 1\u001b[0m\n\u001b[1;32m----> 1\u001b[0m \u001b[43mcalculate_sum\u001b[49m(\u001b[38;5;241m5\u001b[39m, \u001b[38;5;241m10\u001b[39m)\n",
+      "\u001b[1;31mNameError\u001b[0m: name 'calculate_sum' is not defined"
+     ]
+    }
+   ],
+   "source": [
+    "calculate_sum(5, 10)"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": 40,
+   "id": "c0c74cd8",
+   "metadata": {},
+   "outputs": [
+    {
+     "ename": "TypeError",
+     "evalue": "can only concatenate str (not \"int\") to str",
+     "output_type": "error",
+     "traceback": [
+      "\u001b[1;31m---------------------------------------------------------------------------\u001b[0m",
+      "\u001b[1;31mTypeError\u001b[0m                                 Traceback (most recent call last)",
+      "Cell \u001b[1;32mIn[40], line 3\u001b[0m\n\u001b[0;32m      1\u001b[0m x \u001b[38;5;241m=\u001b[39m \u001b[38;5;124m\"\u001b[39m\u001b[38;5;124mHello\u001b[39m\u001b[38;5;124m\"\u001b[39m\n\u001b[0;32m      2\u001b[0m y \u001b[38;5;241m=\u001b[39m \u001b[38;5;241m5\u001b[39m\n\u001b[1;32m----> 3\u001b[0m \u001b[38;5;28mprint\u001b[39m(\u001b[43mx\u001b[49m\u001b[43m \u001b[49m\u001b[38;5;241;43m+\u001b[39;49m\u001b[43m \u001b[49m\u001b[43my\u001b[49m)\n",
+      "\u001b[1;31mTypeError\u001b[0m: can only concatenate str (not \"int\") to str"
+     ]
+    }
+   ],
+   "source": [
+    "x = \"Hello\"\n",
+    "y = 5\n",
+    "print(x + y)"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": 44,
+   "id": "3315c57c",
+   "metadata": {},
+   "outputs": [
+    {
+     "ename": "AttributeError",
+     "evalue": "'dict' object has no attribute 'name'",
+     "output_type": "error",
+     "traceback": [
+      "\u001b[1;31m---------------------------------------------------------------------------\u001b[0m",
+      "\u001b[1;31mAttributeError\u001b[0m                            Traceback (most recent call last)",
+      "Cell \u001b[1;32mIn[44], line 2\u001b[0m\n\u001b[0;32m      1\u001b[0m person \u001b[38;5;241m=\u001b[39m {\u001b[38;5;124m\"\u001b[39m\u001b[38;5;124mname\u001b[39m\u001b[38;5;124m\"\u001b[39m: \u001b[38;5;124m\"\u001b[39m\u001b[38;5;124mAlice\u001b[39m\u001b[38;5;124m\"\u001b[39m, \u001b[38;5;124m\"\u001b[39m\u001b[38;5;124mage\u001b[39m\u001b[38;5;124m\"\u001b[39m: \u001b[38;5;241m30\u001b[39m}\n\u001b[1;32m----> 2\u001b[0m \u001b[38;5;28mprint\u001b[39m(\u001b[43mperson\u001b[49m\u001b[38;5;241;43m.\u001b[39;49m\u001b[43mname\u001b[49m)\n",
+      "\u001b[1;31mAttributeError\u001b[0m: 'dict' object has no attribute 'name'"
+     ]
+    }
+   ],
+   "source": [
+    "person = {\"name\": \"Alice\", \"age\": 30}\n",
+    "print(person.name)"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": 42,
+   "id": "bcd5e7b4",
+   "metadata": {},
+   "outputs": [
+    {
+     "ename": "ZeroDivisionError",
+     "evalue": "division by zero",
+     "output_type": "error",
+     "traceback": [
+      "\u001b[1;31m---------------------------------------------------------------------------\u001b[0m",
+      "\u001b[1;31mZeroDivisionError\u001b[0m                         Traceback (most recent call last)",
+      "Cell \u001b[1;32mIn[42], line 3\u001b[0m\n\u001b[0;32m      1\u001b[0m x \u001b[38;5;241m=\u001b[39m \u001b[38;5;241m10\u001b[39m\n\u001b[0;32m      2\u001b[0m y \u001b[38;5;241m=\u001b[39m \u001b[38;5;241m0\u001b[39m\n\u001b[1;32m----> 3\u001b[0m result \u001b[38;5;241m=\u001b[39m \u001b[43mx\u001b[49m\u001b[43m \u001b[49m\u001b[38;5;241;43m/\u001b[39;49m\u001b[43m \u001b[49m\u001b[43my\u001b[49m\n",
+      "\u001b[1;31mZeroDivisionError\u001b[0m: division by zero"
+     ]
+    }
+   ],
+   "source": [
+    "x = 10\n",
+    "y = 0\n",
+    "result = x / y"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": 1,
+   "id": "1eb252b2",
+   "metadata": {},
+   "outputs": [
+    {
+     "ename": "KeyError",
+     "evalue": "'city'",
+     "output_type": "error",
+     "traceback": [
+      "\u001b[1;31m---------------------------------------------------------------------------\u001b[0m",
+      "\u001b[1;31mKeyError\u001b[0m                                  Traceback (most recent call last)",
+      "Cell \u001b[1;32mIn[1], line 2\u001b[0m\n\u001b[0;32m      1\u001b[0m my_dict \u001b[38;5;241m=\u001b[39m {\u001b[38;5;124m\"\u001b[39m\u001b[38;5;124mname\u001b[39m\u001b[38;5;124m\"\u001b[39m: \u001b[38;5;124m\"\u001b[39m\u001b[38;5;124mAlice\u001b[39m\u001b[38;5;124m\"\u001b[39m, \u001b[38;5;124m\"\u001b[39m\u001b[38;5;124mage\u001b[39m\u001b[38;5;124m\"\u001b[39m: \u001b[38;5;241m30\u001b[39m}\n\u001b[1;32m----> 2\u001b[0m \u001b[38;5;28mprint\u001b[39m(\u001b[43mmy_dict\u001b[49m\u001b[43m[\u001b[49m\u001b[38;5;124;43m\"\u001b[39;49m\u001b[38;5;124;43mcity\u001b[39;49m\u001b[38;5;124;43m\"\u001b[39;49m\u001b[43m]\u001b[49m)\n",
+      "\u001b[1;31mKeyError\u001b[0m: 'city'"
+     ]
+    }
+   ],
+   "source": [
+    "my_dict = {\"name\": \"Alice\", \"age\": 30}\n",
+    "print(my_dict[\"city\"])"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": 30,
+   "id": "b076aeb0",
+   "metadata": {},
+   "outputs": [
+    {
+     "ename": "ImportError",
+     "evalue": "cannot import name 'load_adigits' from 'sklearn.datasets' (C:\\Users\\redam\\AppData\\Local\\Programs\\Python\\Python310\\lib\\site-packages\\sklearn\\datasets\\__init__.py)",
+     "output_type": "error",
+     "traceback": [
+      "\u001b[1;31m---------------------------------------------------------------------------\u001b[0m",
+      "\u001b[1;31mImportError\u001b[0m                               Traceback (most recent call last)",
+      "Cell \u001b[1;32mIn[30], line 2\u001b[0m\n\u001b[0;32m      1\u001b[0m \u001b[38;5;66;03m# load Digits Dataset from sklearn\u001b[39;00m\n\u001b[1;32m----> 2\u001b[0m \u001b[38;5;28;01mfrom\u001b[39;00m \u001b[38;5;21;01msklearn\u001b[39;00m\u001b[38;5;21;01m.\u001b[39;00m\u001b[38;5;21;01mdatasets\u001b[39;00m \u001b[38;5;28;01mimport\u001b[39;00m load_adigits\n\u001b[0;32m      3\u001b[0m digits \u001b[38;5;241m=\u001b[39m load_adigits()\n",
+      "\u001b[1;31mImportError\u001b[0m: cannot import name 'load_adigits' from 'sklearn.datasets' (C:\\Users\\redam\\AppData\\Local\\Programs\\Python\\Python310\\lib\\site-packages\\sklearn\\datasets\\__init__.py)"
+     ]
+    }
+   ],
+   "source": [
+    "# load Digits Dataset from sklearn\n",
+    "from sklearn.datasets import load_adigits\n",
+    "digits = load_adigits()\n",
+    "\n"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "id": "bf5758fd",
+   "metadata": {},
+   "outputs": [],
+   "source": []
+  }
+ ],
+ "metadata": {
+  "kernelspec": {
+   "display_name": "Python 3 (ipykernel)",
+   "language": "python",
+   "name": "python3"
+  },
+  "language_info": {
+   "codemirror_mode": {
+    "name": "ipython",
+    "version": 3
+   },
+   "file_extension": ".py",
+   "mimetype": "text/x-python",
+   "name": "python",
+   "nbconvert_exporter": "python",
+   "pygments_lexer": "ipython3",
+   "version": "3.10.11"
+  }
+ },
+ "nbformat": 4,
+ "nbformat_minor": 5
+}
diff --git a/src/animation.js b/src/animation.js
index 81cc57f..7661932 100644
--- a/src/animation.js
+++ b/src/animation.js
@@ -66,34 +66,7 @@ animation.startWaitingAnimation = (activeTextarea) => {
   // Add a new <style> element to the <head> element
   document.head.appendChild(styleElement);
 
-  // get cursor element
-  const cursorElement = activeTextarea.querySelector('div.CodeMirror-cursor')
-  const style = window.getComputedStyle(cursorElement);
-  // Which line
-  const lineIndex = Math.round(parseFloat(style.getPropertyValue('top')) / 17)
-  // Obtain element for all line
-  const linesElement = activeTextarea.getElementsByClassName('CodeMirror-line')
-  // the code span elements for this active line
-  const currectLineSpanList = linesElement[lineIndex].querySelectorAll('span span')
-
-  // deprecate：Set the animated font dom element when it waits 
-  // As a code hint carrier
-  const animationElement = document.createElement('span');
-
-  animationElement.classList.add("per-insert-code")
-  animationElement.style.color = 'grey';
-
-  // Insert gray code hints, If the active line has no span tag
-  if (currectLineSpanList.length == 0) {
-    const withAllCodeSpan = linesElement[lineIndex].querySelectorAll('span')
-    // creates an element in a unique code carrier, as long as the mouse exists, the code carrier exists
-    withAllCodeSpan[withAllCodeSpan.length - 1].appendChild(animationElement)
-  } else {
-    // Insert new hint code in the last code span
-    const withAllCodeSpan = linesElement[lineIndex].childNodes
-    withAllCodeSpan[withAllCodeSpan.length - 1].insertAdjacentElement('afterend', animationElement);
-  }
-
+  
 
   // Waiting steps, 0.333 seconds per step
   let timeLeft = 90;
@@ -107,7 +80,7 @@ animation.startWaitingAnimation = (activeTextarea) => {
     }
 
   }, 333)
-  return [animationInterval, animationElement, activeCellParentElement]
+  return [animationInterval, activeCellParentElement]
 }
 
 
diff --git a/src/api.js b/src/api.js
index dc8b6f9..80967b3 100644
--- a/src/api.js
+++ b/src/api.js
@@ -5,7 +5,7 @@ const api = {
 
 
 const cleanUpBigcodeOutput = (suggestion, isLastLine) => {
-    suggestion = suggestion.replace("# -*- coding: utf-8 -*-\n\n", "")
+    suggestion = suggestion.replace("# -*- coding: utf-8 -*-\n\n", "").replace(/\t/g, '    ')
     let outPutIndex = suggestion.indexOf('<jupyter_output>')
 
     if (outPutIndex != -1){
@@ -83,8 +83,10 @@ api.sendToBigcode = async (code, url, token, isLastLine) => {
         stream: false,
         parameters: {
             return_full_text: false,
-            stop: ["<jupyter_output>"]
-        }
+            stop: ["<jupyter_output>"],
+            max_new_tokens: 20
+        },
+        
     }
 
     if (!isLastLine){
diff --git a/src/content.js b/src/content.js
index 680e690..36bf478 100644
--- a/src/content.js
+++ b/src/content.js
@@ -26,39 +26,54 @@
   const { utility, animation, state, api, preferences } = window;
 
 
-  const mainProcess = async () => {
+  const mainProcess = async (isAutoRequest = false) => {
     //Obtain the Textarea of the current input box
     const activeTextarea = document.activeElement;
 
+    if (activeTextarea.tagName != "TEXTAREA"){
+      return
+    }
+
     state.activeRequestTextarea = activeTextarea
 
     // Obtain the current input box (cell) from the Textarea of the current input box
     const activeCell = activeTextarea.parentElement.parentElement
 
     const checkedMode = await preferences.getCheckedMode()
-    if (!checkedMode){
+
+    if (!checkedMode) {
       alert("Please save your settings!")
       return
     }
 
     const currctJupyterModel = state.currctJupyterModel
+    const requestType = state.requestType
 
     // Retrieve the content of the active cell 
-    const [code, isLastLine] = utility.getCellContentText(checkedMode, currctJupyterModel);
+    let [code, isLastLine] = utility.getCodeFormat(checkedMode, currctJupyterModel, requestType);
+    isAutoRequest ? isLastLine = false : null
 
     if (!code) return;
 
     if (activeCell) {
       // Start Animation
-      const [animationInterval, animationElement, activeCellElement] = animation.startWaitingAnimation(activeCell)
+      const [animationInterval, activeCellElement] = animation.startWaitingAnimation(activeCell)
       state.isRequestInProgress = true
 
       let suggestion;
       // Deal with a series of problems such as network
       try {
 
-        switch (checkedMode) { 
+        switch (checkedMode) {
           case "OpenAI":
+            // Openai does not support fixing bugs
+            if (state.requestType == "fixBug") {
+              clearInterval(animationInterval)
+              activeCellElement.classList.remove('before-content')
+              state.isRequestInProgress = false
+              return
+            }
+
             const apikey = await preferences.getOpenAIKey()
             const GPTModelType = await preferences.getGPTModelType()
             suggestion = await api.sendToOpenAI(code, apikey, GPTModelType, isLastLine)
@@ -97,27 +112,35 @@
         state.isRequestInProgress = false
         state.codeToFill = suggestion
 
-        // Replace the content of the text animation box with code
-        animationElement.innerHTML = suggestion
+        utility.viewCodeResult(suggestion, code, requestType, activeTextarea)
+
       }
     }
   }
 
+
   // Adds an event listener for filling in code after the request is completed
   const fillCodeKeyListener = (event) => {
+    console.log("a");
     if (event.ctrlKey && !state.isRequestInProgress && state.isRequestSuccessful) {
       event.preventDefault();
 
       // Get the previously existing animated text element (if any)
       // If it doesn't exist, it's assumed that the user doesn't need the code
       const animationElementList = document.querySelectorAll(".per-insert-code");
-
+    
       // If the animated text element exists, it's assumed that the user wants to insert the code into the code block
       if (animationElementList.length === 1) {
         // delete animation element
         animationElementList[0].remove()
 
-        utility.insertSuggestion(state.codeToFill, state.activeRequestTextarea);
+        // request type "normal" or "fixBug"
+        if (state.requestType == "normal") {
+          utility.insertSuggestion(state.codeToFill, state.activeRequestTextarea);
+        } else if (state.requestType == "fixBug") {
+          utility.insertSuggestionFixBug(state.codeToFill, state.activeRequestTextarea, state.currctJupyterModel)
+        }
+
       }
 
       // Reset the request successful flag
@@ -125,24 +148,94 @@
     }
   };
 
+
+  const undisplayedCodeDiff = () => {
+    if (state.isRequestSuccessful) {
+      state.isRequestSuccessful = false
+      utility.clearShowcasingCode(state.activeRequestTextarea)
+    }
+  }
+
+  const autoRequestCode = (eventCode) => {
+    // If there is no code hint
+    if (document.querySelectorAll(".per-insert-code").length == 0 || document.querySelectorAll(".displayed").length == 0) {
+      state.isRequestSuccessful = false
+    }
+    
+    // If there is code hint
+    if (document.querySelectorAll(".per-insert-code").length != 0) {
+
+      // Check that the input code matches the next character of the code prompt
+      const chekcResult = utility.checkCodeEquality(eventCode, state.codeToFill)
+      
+      if (chekcResult) {
+        state.codeToFill = state.codeToFill.slice(1)
+
+        // Moves the current code to the bottom of the CPU time slice queue, Place the jupyer default event before this method
+        const timeOut = setTimeout(() => {
+          utility.isShortcutKeyChar(eventCode.key, state.activeRequestTextarea, state.recordCodeEqualPairShortcutKey)
+          utility.showNormalCode(state.codeToFill, state.activeRequestTextarea)
+          clearTimeout(timeOut)
+        },0)
+      }
+      return
+    }
+
+    if (state.isRequestInProgress || state.isRequestSuccessful) {
+      return
+    }
+
+    if (state.autoRequestTimeout) {
+      clearTimeout(state.autoRequestTimeout);
+    }
+
+    // Set a new timeout for 0.8 seconds. After my test, the 0.8s delay is the most user-friendly
+    state.autoRequestTimeout = setTimeout(async () => {
+      if (state.isRequestInProgress || state.isRequestSuccessful) {
+        return
+      }
+
+      state.requestType = "normal"
+      await mainProcess(isAutoRequest = true)
+    }, 800);
+  }
+
+
   const requestCodeKeyListener = async (event) => {
     // Check if the Ctrl + Space keys were pressed
     if (event.ctrlKey && event.code === 'Space') {
       // Block default events
       event.preventDefault();
 
-      if (state.isRequestInProgress || state.isRequestSuccessful) {
-        return
-      }
+      if (state.isRequestInProgress || state.isRequestSuccessful) return
 
+      state.requestType = "normal"
       await mainProcess()
 
+    } else if (event.ctrlKey && event.code === 'Backquote') {
+      // Block default events
+      event.preventDefault();
+
+      if (state.isRequestInProgress || state.isRequestSuccessful) return
+
+      state.requestType = "fixBug"
+      await mainProcess()
+      
+    } else if (!event.ctrlKey) {  // Press all buttons except ctrl, cancel if fixbug is being displayed
+      undisplayedCodeDiff()
+      autoRequestCode(event)
     }
+
+
+
+
   }
 
   const montedEventListener = () => {
     document.addEventListener('keydown', requestCodeKeyListener);
     document.addEventListener('keydown', fillCodeKeyListener);
+    document.addEventListener("mousedown", undisplayedCodeDiff)
+    
   }
 
 
diff --git a/src/state.js b/src/state.js
index 3f908ab..18ae959 100644
--- a/src/state.js
+++ b/src/state.js
@@ -9,6 +9,12 @@ const state = {
     isRequestSuccessful: false,
     // Code to be filled in after request completion
     codeToFill: "",
+    // value is normal or fixBug
+    requestType: "",
+    
+    autoRequestTimeout: null,
+
+    recordCodeEqualPairShortcutKey: new Map([['\'', false], ['"', false]])
 }
 
 window.state = state
\ No newline at end of file
diff --git a/src/utility.js b/src/utility.js
index 09f7e0e..304eb99 100644
--- a/src/utility.js
+++ b/src/utility.js
@@ -1,18 +1,18 @@
-// Call Link: getCellContentText -> getCellContentTextRequiredForBigCode/getCellContentTextRequiredForOpenAI -> getActiveContext -> getActiveCellPointerCode/getCellCode
+// Call Link: getCodeFormat -> getCellContentText -> getCellContentTextRequiredForBigCode/getCellContentTextRequiredForOpenAI -> getActiveContext -> getActiveCellPointerCode/getCellCode
 
 const utility = {
     /*
-       Get Context Code text
+        Get Context Code text
 
         Params:
             checkedMode: openai or bigcode
             currctJupyterModel: lab or notebook
+            requestType: normal or fixBug
 
         Returns: str
             Returns the corresponding formatting code based on the request mode selected by the current user
     */
-
-    getCellContentText(checkedMode, currctJupyterModel) { },
+    getCodeFormat(checkedMode, currctJupyterModel, requestType) { },
 
     /*
         Insert the code after the request
@@ -22,6 +22,43 @@ const utility = {
             activeRequestTextarea: The textarea dom that the user is operating on
     */
     insertSuggestion(suggestion, activeRequestTextarea) { },
+
+    insertSuggestionFixBug(suggestion, activeRequestTextarea, currctJupyterModel) { },
+
+    // Hide the code of the current cell user
+    enableCellCode(activeRequestTextarea) { },
+
+    // Clear displayed code
+    clearShowcasingCode(activeRequestTextarea) { },
+
+    /*
+        Check that the input code matches the next character of the code prompt
+
+        Params:
+            eventCode: keyboard characters
+            codeToFill: hint Code
+
+        Returns: boolean
+    */
+    checkCodeEquality(eventCode, codeToFill) { },
+    
+    // Showing Code Tips
+    showNormalCode(codeToFill, activeRequestTextarea) { },
+    
+    // Determines if this is jupyter's default character
+    isShortcutKeyChar(eventCode, activeRequestTextarea) { },
+    
+    /*
+        Display the request result block
+
+        Params:
+            suggestion: The code used for demonstration
+            codeFormat: Prompt of request
+            requestType: normal or fixbug
+            activeRequestTextarea: Textarea when on requested
+
+    */
+    viewCodeResult(suggestion, codeFormat, requestType, activeRequestTextarea) { }
 }
 
 
@@ -33,7 +70,6 @@ const bigcodeFormattPrefixMap = {
     "output": "<jupyter_output>"
 }
 
-
 const getCellCode = (cellElement, cellIndex, currctJupyterModel) => {
     const cellContent = []
 
@@ -87,6 +123,7 @@ const getActiveCellPointerCode = (activeCell, cellIndex, currctJupyterModel) =>
 
     // get cursor element
     const cursorElement = activeCell.querySelector('div.CodeMirror-cursor')
+    if(!cursorElement) return []
 
     const style = window.getComputedStyle(cursorElement);
 
@@ -97,15 +134,18 @@ const getActiveCellPointerCode = (activeCell, cellIndex, currctJupyterModel) =>
     const lineIndex = Math.round(parseFloat(style.getPropertyValue('top')) / 17)
 
     // Obtain element for all line
-    const linesElement = activeCell.getElementsByClassName('CodeMirror-line')
+    const linesElement = activeCell.querySelectorAll('.CodeMirror-line:not(.displayed)')
+
     // code dom element length in active line
     const codeElementWdth = linesElement[lineIndex].querySelector("span").offsetWidth
 
+    let cursorAtEndInLine = true
     // Determine whether the pointer is at the end of a line, Because there is a left marring, so -4, but due to precision issues so -3
     if (cursorOffsetLeft - 3 < codeElementWdth) {
-        return [null, null]
+        cursorAtEndInLine = false
     }
 
+
     for (let i = 0; i < linesElement.length; i++) {
         if (i == lineIndex) {
             cellContent.push({
@@ -142,7 +182,9 @@ const getActiveCellPointerCode = (activeCell, cellIndex, currctJupyterModel) =>
             })
         });
     }
-    return cellContent
+
+    return [cellContent, cursorAtEndInLine]
+
 }
 
 
@@ -174,7 +216,9 @@ const getActiveContext = (currctJupyterModel) => {
 
     for (let i = 0; i < cellElements.length; i++) {
         if (i == activeCellIndex) {
-            const activeCellContent = getActiveCellPointerCode(activeCell, i, currctJupyterModel)
+            const [activeCellContent, cursorAtEndInLine] = getActiveCellPointerCode(activeCell, i, currctJupyterModel)
+            if (!cursorAtEndInLine) return []
+
             context = [...context, ...activeCellContent]
         } else if (i < activeCellIndex) {
             const cellContent = getCellCode(cellElements[i], i, currctJupyterModel)
@@ -198,7 +242,7 @@ const judgeIsTheLastLine = (context, currrntIndex) => {
 
         const lineInformation = context[currrntIndex]
 
-        if (lineInformation.type == "output"){
+        if (lineInformation.type == "output") {
             return true
         }
 
@@ -217,6 +261,11 @@ const judgeIsTheLastLine = (context, currrntIndex) => {
 const getCellContentTextRequiredForOpenAI = (currctJupyterModel) => {
     const context = getActiveContext(currctJupyterModel)
 
+    if (context.length == 0) {
+        return [null, null]
+    }
+
+
     let prompt = ""
     let isLastLine = true
 
@@ -246,6 +295,12 @@ const getCellContentTextRequiredForOpenAI = (currctJupyterModel) => {
 
 function getCellContentTextRequiredForBigCode(currctJupyterModel) {
     const context = getActiveContext(currctJupyterModel)
+
+    if (context.length == 0) {
+        return [null, null]
+    }
+
+
     let prompt = "<start_jupyter>"
     let cellCodeText = ""
     let isLastLine = true
@@ -279,7 +334,8 @@ function getCellContentTextRequiredForBigCode(currctJupyterModel) {
 }
 
 
-utility.getCellContentText = (checkedMode, currctJupyterModel) => {
+
+const getCellContentText = (checkedMode, currctJupyterModel) => {
     switch (checkedMode) {
         case "OpenAI": return getCellContentTextRequiredForOpenAI(currctJupyterModel);
         case "BigCode": return getCellContentTextRequiredForBigCode(currctJupyterModel);
@@ -287,7 +343,38 @@ utility.getCellContentText = (checkedMode, currctJupyterModel) => {
     }
 }
 
+utility.showNormalCode = (codeToFill, activeRequestTextarea) => {
+    // get cursor element
+    const cursorElement = activeRequestTextarea.parentElement.parentElement.querySelector('div.CodeMirror-cursor')
+    const style = window.getComputedStyle(cursorElement);
+    // Which line
+    const lineIndex = Math.round(parseFloat(style.getPropertyValue('top')) / 17)
+    // Obtain element for all line
+    const linesElement = activeRequestTextarea.parentElement.parentElement.getElementsByClassName('CodeMirror-line')
+    // the code span elements for this active line
+    const currectLineSpanList = linesElement[lineIndex].querySelectorAll('span span')
+
+    // deprecate：Set the animated font dom element when it waits 
+    // As a code hint carrier
+    const codeCarrierElement = document.createElement('span');
+
+    codeCarrierElement.classList.add("per-insert-code")
+    codeCarrierElement.style.color = 'grey';
+
+    // Insert gray code hints, If the active line has no span tag
+    if (currectLineSpanList.length == 0) {
+        const withAllCodeSpan = linesElement[lineIndex].querySelectorAll('span')
+        // creates an element in a unique code carrier, as long as the mouse exists, the code carrier exists
+        withAllCodeSpan[withAllCodeSpan.length - 1].appendChild(codeCarrierElement)
+    } else {
+        // Insert new hint code in the last code span
+        const withAllCodeSpan = linesElement[lineIndex].childNodes
+        withAllCodeSpan[withAllCodeSpan.length - 1].insertAdjacentElement('afterend', codeCarrierElement);
+    }
+    codeCarrierElement.innerHTML = codeToFill
+
 
+}
 
 utility.insertSuggestion = (suggestion, activeRequestTextarea) => {
     // Focus the textarea, otherwise, it is not possible to insert the suggestion using the Tab key from another location
@@ -314,4 +401,285 @@ utility.insertSuggestion = (suggestion, activeRequestTextarea) => {
 }
 
 
+// Levenshtein distance, Obtain similarity based on distance
+const levenshteinDistanceDP = (str1, str2) => {
+    const m = str1.length;
+    const n = str2.length;
+    const dp = Array(n + 1).fill(0);
+
+    for (let j = 1; j <= n; j++) {
+        dp[j] = j;
+    }
+
+    for (let i = 1; i <= m; i++) {
+        let prev = dp[0];
+        dp[0] = i;
+        for (let j = 1; j <= n; j++) {
+            let temp = dp[j];
+            if (str1[i - 1] === str2[j - 1]) {
+                // Characters are equal and no action is required
+                dp[j] = prev;
+            } else {
+                // Characters are not equal, take the minimum value of adjacent position operands and add 1
+                dp[j] = Math.min(dp[j - 1], dp[j], prev) + 1;
+            }
+            prev = temp;
+        }
+    }
+
+    return dp[n];
+}
+
+const compareCodeLines = (codeLine1, codeLine2) => {
+    codeLine1 = codeLine1.toLowerCase();
+    codeLine2 = codeLine2.toLowerCase();
+
+    const distance = levenshteinDistanceDP(codeLine1, codeLine2);
+
+    const similarityScore = 1 - distance / Math.max(codeLine1.length, codeLine2.length);
+
+    return similarityScore >= 0.8;
+}
+
+
+
+// Due to the presence of a large number of invisible characters, replace them
+let invisibleCodeReg = /[\u200B-\u200D\uFEFF]/g
+const generateCompareCodes = (oldCode, newCode) => {
+
+    oldCode = oldCode.replace(invisibleCodeReg, "")
+    newCode = newCode.replace(invisibleCodeReg, "")
+
+    // Split the strings into lines and store them in separate arrays
+    const oldCodeLine = oldCode.split('\n');
+    const newCodeLine = newCode.split('\n');
+
+
+    // Create an empty array to store the generated HTML
+    let html = [];
+    let newCodeIndex = 0
+
+    // Iterate over the lines and compare them
+    for (let i = 0; i < oldCodeLine.length; i++) {
+
+        if (newCodeIndex == newCodeLine.length) {
+            for (i; i < oldCodeLine.length; i++) {
+                html.push(`<span style="color: red;">- ${oldCodeLine[i]}</span>`)
+            }
+            break;
+        }
+
+        const oldLine = oldCodeLine[i];
+        const newLine = newCodeLine[newCodeIndex];
+
+        // If the lines are the same, generate a gray span
+        if (oldLine === newLine) {
+            html.push(`<span style="color: #787878">= ${oldLine}</span>`);
+            newCodeIndex++;
+        } else if (compareCodeLines(oldLine, newLine)) {// Determine the similarity here. If it is similar, it will be considered a code error. The old one will be highlighted in red and added below (green)
+            html.push(`<span style="color: red;">- ${oldLine}</span>`)
+            html.push(`<span style="color: green;">+ ${newLine}</span>`)
+            newCodeIndex++
+        } else {
+            // If it is completely different, it will be considered as a new code snippet and added directly above (green)
+
+            let newCodeAssistIndex = newCodeIndex
+            // Prepare to insert code with HTML
+            const perInsertCode = []
+
+            let isAddedOldCode = false
+            // Check which line of the new code is similar to the old one
+            for (newCodeAssistIndex; newCodeAssistIndex < newCodeLine.length; newCodeAssistIndex++) {
+                if (oldLine == newCodeLine[newCodeAssistIndex] || compareCodeLines(oldLine, newCodeLine[newCodeIndex])) {
+                    for (newCodeIndex; newCodeIndex < newCodeAssistIndex; newCodeIndex++) {
+                        perInsertCode.push(`<span style="color: green;">+ ${newCodeLine[newCodeIndex]}</span>`)
+                    }
+                } else {
+                    if (i < oldCodeLine.length) {
+                        perInsertCode.push(`<span style="color: red;">- ${oldCodeLine[i++]}</span>`)
+                        isAddedOldCode = true
+                    }
+                    perInsertCode.push(`<span style="color: green;">+ ${newCodeLine[newCodeIndex++]}</span>`)
+                }
+            }
+            if (isAddedOldCode) i--
+            html = [...html, ...perInsertCode]
+        }
+    }
+
+    // Join the generated HTML and return it
+    return html.join('\n');
+}
+
+function parseErrorFullmessage(message) {
+    const meassgeLines = message.split("\n").filter((line) => {
+        return line != "" && line != " "
+    })
+    return meassgeLines[meassgeLines.length - 1]
+}
+
+
+const formatCodeAndBugIllustrate = (currctJupyterModel) => {
+    const activeCell = document.activeElement.parentElement.parentElement;
+    const [codeLineInformation, cursorAtEndInLine] = getActiveCellPointerCode(activeCell, 0, currctJupyterModel)
+
+    let code = "<commit_before>"
+    let errorMessageIndex = -1
+    for (let index = 0; index < codeLineInformation.length; index++) {
+        const lineInformation = codeLineInformation[index]
+
+        if (lineInformation.type == "output") {
+            // Determine if the next one is also an output, there can only be two consecutive outputs at most
+            if (index < codeLineInformation.length - 1 && codeLineInformation[index + 1].type == "output") {
+                errorMessageIndex = index + 1
+            } else {
+                errorMessageIndex = index
+            }
+            break
+        }
+
+        if (index == codeLineInformation.length - 1) {
+            code += lineInformation.content
+            break
+        } else if (codeLineInformation[index + 1].type != "output") {
+            code += lineInformation.content + "\n"
+        } else {
+            code += lineInformation.content
+        }
+
+    }
+
+    if (errorMessageIndex == -1) {
+        return ""
+    }
+
+    // Unified return of results with method 'getCellContentText', reduce code logic
+    return [`${code}<commit_msg>fix bug, ${parseErrorFullmessage(codeLineInformation[errorMessageIndex].content)}<commit_after>`, true]
+}
+
+
+
+utility.getCodeFormat = (checkedMode, currctJupyterModel, requestType) => {
+    switch (requestType) {
+        case "normal": return getCellContentText(checkedMode, currctJupyterModel);
+        case "fixBug": return formatCodeAndBugIllustrate(currctJupyterModel);
+        default: return ""
+    }
+}
+
+const viewDiffCode = (html, activeRequestTextarea) => {
+    disableCellCode(activeRequestTextarea)
+    const activeCell = activeRequestTextarea.parentElement.parentElement;
+
+    // Due to the need to hide user code, the previous preview logic cannot be used
+    const codeMirrorCode = activeCell.querySelector(".CodeMirror-code")
+    const codeMirrorCodeLine = document.createElement('pre');
+    codeMirrorCodeLine.classList.add("CodeMirror-line", "displayed", "per-insert-code")
+
+    codeMirrorCodeLine.innerHTML = html
+    codeMirrorCode.appendChild(codeMirrorCodeLine)
+}
+
+
+const generateCompareCodesWrapper = (prompt, result) => {
+    const preCodeMesageSplit = prompt.split("<commit_msg>")
+    const preCode = preCodeMesageSplit[0].slice(15)
+    return generateCompareCodes(preCode, result)
+}
+
+utility.viewCodeResult = (suggestion, codeFormat, requestType, activeRequestTextarea) => {
+    switch (requestType) {
+        case "normal": utility.showNormalCode(suggestion, activeRequestTextarea); break;
+        case "fixBug": viewDiffCode(generateCompareCodesWrapper(codeFormat, suggestion), activeRequestTextarea); break;
+    }
+}
+
+const simulateUserPressingBackspace = (activeRequestTextarea) => {
+    if (activeRequestTextarea) {
+        let event = new KeyboardEvent("keydown", { key: "Backspace", keyCode: 8, which: 8, code: "Backspace" });
+        activeRequestTextarea.dispatchEvent(event);
+    }
+}
+
+const simulateUserPressingMoveMouseRight = (activeRequestTextarea) => {
+    if (activeRequestTextarea) {
+        let event = new KeyboardEvent("keydown", { key: "ArrowRight", keyCode: 39, which: 39, code: "ArrowRight" });
+        activeRequestTextarea.dispatchEvent(event);
+    }
+}
+
+
+// Hide all code for the active cell
+const disableCellCode = (textarea) => {
+    const activeCell = textarea.parentElement.parentElement
+    const codeMirrorLines = activeCell.querySelectorAll('.CodeMirror-code pre');
+    for (let i = 0; i < codeMirrorLines.length; i++) {
+        codeMirrorLines[i].style.display = "none"
+    }
+}
+
+// Restore all code that hides the current cell
+utility.enableCellCode = (textarea) => {
+    const activeCell = textarea.parentElement.parentElement
+    const codeMirrorLines = activeCell.querySelectorAll('.CodeMirror-code pre');
+    for (let i = 0; i < codeMirrorLines.length; i++) {
+        codeMirrorLines[i].style.display = "block"
+    }
+}
+
+utility.insertSuggestionFixBug = (suggestion, activeRequestTextarea, currctJupyterModel) => {
+    // Focus the textarea, otherwise, it is not possible to insert the suggestion using the Tab key from another location
+    activeRequestTextarea.focus();
+    const [cellContent, cursorAtEndInLine] = getActiveCellPointerCode(activeRequestTextarea.parentElement.parentElement, 0, currctJupyterModel)
+
+    for (let index = 0; index < cellContent.length; index++) {
+        if (cellContent[index].type == "output") {
+            continue
+        }
+
+        for (let j = 0; j <= cellContent[index].content.length; j++) {
+            simulateUserPressingMoveMouseRight(activeRequestTextarea)
+            simulateUserPressingBackspace(activeRequestTextarea)
+        }
+
+    }
+    utility.enableCellCode(activeRequestTextarea)
+
+    activeRequestTextarea.value = suggestion;
+
+    // Trigger an input event on the textarea to update the CodeMirror instance
+    const event = new Event('input', { bubbles: true, cancelable: true });
+    activeRequestTextarea.dispatchEvent(event);
+}
+
+
+utility.clearShowcasingCode = (activeRequestTextarea) => {
+    utility.enableCellCode(activeRequestTextarea)
+    const activeCell = activeRequestTextarea.parentElement.parentElement;
+
+    // Due to the need to hide user code, the previous preview logic cannot be used
+    const displayedCodeElement = activeCell.querySelector(".displayed")
+    if (displayedCodeElement) displayedCodeElement.remove();
+}
+
+utility.checkCodeEquality = (eventCode, codeToFill) => {
+    return eventCode.key == codeToFill[0]
+}
+
+let pairShortcutKey = new Set(['(', '{', '[', '\'', '"'])
+utility.isShortcutKeyChar = (eventCode, activeRequestTextarea, recordCodeEqualPairShortcutKey) => {
+
+    if (pairShortcutKey.has(eventCode)) {
+        if(recordCodeEqualPairShortcutKey.has(eventCode)) {
+            if(!recordCodeEqualPairShortcutKey[eventCode]) {
+                recordCodeEqualPairShortcutKey[eventCode] = !recordCodeEqualPairShortcutKey[eventCode]
+                simulateUserPressingMoveMouseRight(activeRequestTextarea)
+                simulateUserPressingBackspace(activeRequestTextarea)
+            }
+            return
+        }
+        simulateUserPressingMoveMouseRight(activeRequestTextarea)
+        simulateUserPressingBackspace(activeRequestTextarea)
+    }
+}
 window.utility = utility
\ No newline at end of file