Merge branch 'main' into dev/kernel_env

Author: dasmy

.env.azure-example

@@ -1,6 +1,6 @@
 OPENAI_API_KEY=XXXX
 OPENAI_API_TYPE=azure
-OPENAI_BASE_URL=https://your-resource-name.openai.azure.com
+OPENAI_API_BASE=https://your-resource-name.openai.azure.com
 OPENAI_API_VERSION=2023-03-15-preview
 # OPENAI_EXTRA_HEADERS={"key": "value"}
 AZURE_OPENAI_DEPLOYMENTS=[{"displayName": "GPT-3.5", "name": "your-gpt-3.5-deployment"}, {"displayName": "GPT-4", "name": "your-gpt-4-deployment"}]

.env.example

@@ -1,6 +1,6 @@
 OPENAI_API_KEY=sk-XXXX
 OPENAI_API_TYPE=open_ai
-OPENAI_BASE_URL=https://api.openai.com/v1
+OPENAI_API_BASE=https://api.openai.com/v1
 OPENAI_API_VERSION=2023-03-15-preview
 # OPENAI_EXTRA_HEADERS={"key": "value"}
 OPENAI_MODELS=[{"displayName": "GPT-3.5", "name": "gpt-3.5-turbo"}, {"displayName": "GPT-4", "name": "gpt-4"}]

frontend/src/App.tsx

@@ -41,13 +41,13 @@ function App() {
   let [messages, setMessages] = useState<Array<MessageDict>>(
     Array.from([
       {
-        text: "Hello! I'm a GPT Code assistant. Ask me to do something for you! Pro tip: you can upload a file and I'll be able to use it.",
-        role: "system",
+        text: "Hello! I am a GPT Code assistant. Ask me to do something for you! Pro tip: you can upload a file and I'll be able to use it.",
+        role: "generator",
         type: "message",
       },
       {
         text: "If I get stuck just type 'reset' and I'll restart the kernel.",
-        role: "system",
+        role: "generator",
         type: "message",
       },
     ])
@@ -77,7 +77,7 @@ function App() {
 
   const handleCommand = (command: string) => {
     if (command == "reset") {
-      addMessage({text: "Restarting the kernel.", type: "message", role: "system"});
+      addMessage({ text: "Restarting the kernel.", type: "message", role: "system" });
       setWaitingForSystem(WaitingStates.StartingKernel);
 
       fetch(`${Config.API_ADDRESS}/restart`, {
@@ -118,21 +118,22 @@ function App() {
         }),
       });
 
-      
-
       const data = await response.json();
       const code = data.code;
 
-      addMessage({ text: code, type: "code", role: "system" });
-      addMessage({ text: data.text, type: "message", role: "system" });
+      addMessage({ text: data.text, type: "message", role: "generator" });
 
       if (response.status != 200) {
         setWaitingForSystem(WaitingStates.Idle);
         return;
       }
 
-      submitCode(code);
-      setWaitingForSystem(WaitingStates.RunningCode);
+      if (!!code) {
+        submitCode(code);
+        setWaitingForSystem(WaitingStates.RunningCode);
+      } else {
+        setWaitingForSystem(WaitingStates.Idle);
+      }
     } catch (error) {
       console.error(
         "There has been a problem with your fetch operation:",
@@ -159,26 +160,8 @@ function App() {
   }
 
   function completeUpload(message: string) {
-    addMessage({
-      text: message,
-      type: "message",
-      role: "system",
-    });
-
+    addMessage({ text: message, type: "message", role: "upload" });
     setWaitingForSystem(WaitingStates.Idle);
-
-    // Inform prompt server
-    fetch(`${Config.WEB_ADDRESS}/inject-context`, {
-      method: "POST",
-      headers: {
-        "Content-Type": "application/json",
-      },
-      body: JSON.stringify({
-        prompt: message,
-      }),
-    })
-      .then(() => {})
-      .catch((error) => console.error("Error:", error));
   }
 
   function startUpload(_: string) {

frontend/src/components/Chat.css

@@ -1,3 +1,7 @@
+div.message.generator {
+    background: rgba(247,247,248);
+}
+
 div.message.system {
     background: rgba(247,247,248);
 }
@@ -20,6 +24,10 @@ div.avatar svg {
     overflow-x: hidden;
 }
 
+div.message.generator div.avatar {
+    background: #74a89b;
+}
+
 div.message.system div.avatar {
     background: #74a89b;
 }

frontend/src/components/Chat.tsx

@@ -2,6 +2,8 @@ import "./Chat.css";
 
 import VoiceChatIcon from "@mui/icons-material/VoiceChat";
 import PersonIcon from "@mui/icons-material/Person";
+import TerminalIcon from '@mui/icons-material/Terminal';
+import FileUploadIcon from '@mui/icons-material/FileUpload';
 import { MessageDict } from "../App";
 
 import remarkGfm from 'remark-gfm';
@@ -20,48 +22,83 @@ function Message(props: {
   const isMarkdown = (input: string) => {
     const mdRegex = /\[.*\]\(.*\)|\*\*.*\*\*|__.*__|\#.*|\!\[.*\]\(.*\)|`.*`|\- .*|\|.*\|/g;
     return mdRegex.test(input);
-  }
+  };
+
+  let ICONS = {
+    "upload": <FileUploadIcon />,
+    "generator":  <VoiceChatIcon />,
+    "system": <TerminalIcon />,
+    "user": <PersonIcon />,
+  };
 
   return (
-    <div className={"message " + (role == "system" ? "system" : "user")}>
+    <div className={"message " + role}>
       <div className="avatar-holder">
         <div className="avatar">
-          {role == "system" ? <VoiceChatIcon /> : <PersonIcon />}
+          { ICONS[role as keyof typeof ICONS] }
         </div>
       </div>
       <div className="message-body">
-        {props.type == "code" && (
-          <div>
-            I generated the following code:
-            <SyntaxHighlighter wrapLongLines={true} language="python">
-              {text}
-            </SyntaxHighlighter>
-          </div>
-        )}
-
         {props.type == "message" &&
           (props.showLoader ? (
             <div>
               {text} {props.showLoader ? <div className="loader"></div> : null}
             </div>
           ) : (
             isMarkdown(text) ? 
-            <ReactMarkdown
-            children={text}
-            remarkPlugins={[remarkGfm]}
-            /> :
+              <ReactMarkdown
+              children={text}
+              remarkPlugins={[remarkGfm]}
+              components={{
+                code({node, inline, className, children, style, ...props}) {
+                  const match = /language-(\w+)/.exec(className || '')
+                  return !inline ? (
+                    <SyntaxHighlighter
+                      {...props}
+                      children={String(children).replace(/\n$/, '')}
+                      wrapLongLines={true}
+                      language={match ? match[1] : "python"}
+                      PreTag="div"
+                    />
+                  ) : (
+                    <code {...props} className={className}>
+                      {children}
+                    </code>
+                  )
+                }
+              }}
+            />
+          :
             <div className="cell-output" dangerouslySetInnerHTML={{ __html: text }}></div>
           ))}
 
-        {(props.type == "message_raw") &&
+        {props.type == "message_error" &&
+          (props.showLoader ? (
+            <div>
+              {text} {props.showLoader ? <div className="loader"></div> : null}
+            </div>
+          ) : (
+            <div>
+              Execution Error:
+              <SyntaxHighlighter
+                {...props}
+                children={text}
+                wrapLongLines={true}
+                language={"python"}
+                PreTag="div"
+              />
+            </div>
+          ))}
+
+        {props.type == "message_raw" &&
           (props.showLoader ? (
             <div>
               {text} {props.showLoader ? <div className="loader"></div> : null}
             </div>
           ) : (
             <div className="cell-output" dangerouslySetInnerHTML={{ __html: text }}></div>
           ))}
-        
+
         {props.type == "image/png" &&
           <div className="cell-output-image" dangerouslySetInnerHTML={{ __html: `<img src='data:image/png;base64,${text}' />` }}></div>
         }

gpt_code_ui/kernel_program/kernel_manager.py

@@ -150,7 +150,7 @@ def flush_kernel_msgs(kc, tries=1, timeout=0.2):
                 elif msg["msg_type"] == "error":
                     send_message(
                         utils.escape_ansi("\n".join(msg["content"]["traceback"])),
-                        "message_raw",
+                        "message_error",
                     )
             except queue.Empty:
                 hit_empty += 1

gpt_code_ui/kernel_program/main.py

@@ -62,6 +62,7 @@ def start_kernel_manager():
     utils.store_pid(kernel_manager_process.pid, "kernel_manager")
 
 
+
 def cleanup_kernel_program():
     kernel_manager.cleanup_spawned_processes()
 
@@ -79,10 +80,10 @@ def on_recv(conn, ident, message):
                 logger.debug("Kernel is ready.")
                 result_queue.put({
                     "value": "Kernel is ready.",
-                    "type": "message"
+                    "type": "message_status"
                 })
 
-        elif message["type"] in ["message", "message_raw", "image/png", "image/jpeg"]:
+        elif message["type"] in ["message", "message_raw", "message_error", "image/png", "image/jpeg"]:
             # TODO: 1:1 kernel <> channel mapping
             logger.debug("%s of type %s" % (message["value"], message["type"]))
 

gpt_code_ui/main.py

@@ -16,20 +16,23 @@
 
 APP_URL = "http://localhost:%s" % APP_PORT
 
+
 def run_webapp():
     try:
         app.run(host="0.0.0.0", port=APP_PORT, use_reloader=False)
-    except Exception as e:
-        logging.exception("Error running the webapp:")
+    except Exception:
+        logging.exception("Error running the webapp")
         sys.exit(1)
 
+
 def run_kernel_program():
     try:
         asyncio.run(kernel_program_main())
-    except Exception as e:
-        logging.exception("Error running the kernel_program:")
+    except Exception:
+        logging.exception("Error running the kernel_program")
         sys.exit(1)
 
+
 def setup_logging():
     log_format = "%(asctime)s [%(levelname)s]: %(message)s"
     logging.basicConfig(level=logging.INFO, format=log_format)
@@ -38,32 +41,33 @@ def setup_logging():
     file_handler.setFormatter(logging.Formatter(log_format))
     logging.getLogger().addHandler(file_handler)
 
+
 def print_color(text, color="gray"):
     # Default to gray
-    code="242"
+    code = "242"
 
     if color == "green":
-        code="35"
-    
+        code = "35"
+
     gray_code = "\033[38;5;%sm" % code
     reset_code = "\033[0m"
     print(f"{gray_code}{text}{reset_code}")
 
 
 def print_banner():
-        
-        print("""
+    print("""
 █▀▀ █▀█ ▀█▀ ▄▄ █▀▀ █▀█ █▀▄ █▀▀
 █▄█ █▀▀ ░█░ ░░ █▄▄ █▄█ █▄▀ ██▄
-        """)
+    """)
+
+    print("> Open GPT-Code UI in your browser %s" % APP_URL)
+    print("")
+    print("You can inspect detailed logs in app.log.")
+    print("")
+    print("Find your OpenAI API key at https://platform.openai.com/account/api-keys")
+    print("")
+    print_color("Contribute to GPT-Code UI at https://github.com/ricklamers/gpt-code-ui")
 
-        print("> Open GPT-Code UI in your browser %s" % APP_URL)
-        print("")
-        print("You can inspect detailed logs in app.log.")
-        print("")
-        print("Find your OpenAI API key at https://platform.openai.com/account/api-keys")
-        print("")
-        print_color("Contribute to GPT-Code UI at https://github.com/ricklamers/gpt-code-ui")   
 
 def main():
     setup_logging()
@@ -80,20 +84,19 @@ def main():
             try:
                 app.test_client().get("/")
                 break
-            except:
+            except Exception:
                 time.sleep(0.1)
-        
-        print_banner()    
-        
+
+        print_banner()
+
         webbrowser.open(APP_URL)
 
         webapp_process.join()
         kernel_program_process.join()
 
-        
     except KeyboardInterrupt:
         print("Terminating processes...")
-        
+
         cleanup_kernel_program()
         kernel_program_process.terminate()
 
@@ -103,6 +106,7 @@ def main():
         kernel_program_process.join()
 
         print("Processes terminated.")
-        
+
+
 if __name__ == '__main__':
     main()