events working, prompt appearing on shell

Author: root

gpt_engineer/applications/w3s/server.py

@@ -3,15 +3,18 @@
 # * @zdanl here modiyfing @atheorell work from websockets to socket.io
 
 from aiohttp import web
-import aiohttp_cors
 import socketio
 import tempfile
 import json
+import os
 
 from gpt_engineer.core.default.lean_agent import LeanAgent
-from gpt_engineer.core.preprompt_holder import PrepromptHolder
 
-sio = socketio.AsyncServer(cors_allowed_origins="*")
+# from gpt_engineer.core.preprompt_holder import PrepromptHolder
+
+sio = socketio.AsyncServer(async_mode="aiohttp", cors_allowed_origins="*")
+# sio.set('transports', ['websocket']);
+
 app = web.Application()
 sio.attach(app)
 
@@ -20,22 +23,21 @@
 
 
 class GPTEngineerNamespace(socketio.AsyncNamespace):
-    def on_connect(self, sid, environ):
+    async def on_connect(self, sid, environ):
         print("Real-time socket to browser established.")
+        await self.emit("openai_api_key", os.environ["OPENAI_API_KEY"])
 
     def on_disconnect(self, sid):
         print("Browser disconnected.")
 
-    def on_my_event(self, sid, data):
-        self.emit("my_response", data)
-
-    def on_gp4_apikey(self, sid, data):
+    async def on_openai_api_key(self, sid, data):
+        print(f"Received new OpenAI API Key: {data}")
         code = agent.seed(data)
 
-    async def on_init(event, sid, data):
-        print(f"{event}: {data}")
-        code = agent.init(event["prompt"])
-        await socketio.emit("prompt", {"payload": json.dumps(code)})
+    async def on_init(self, sid, prompt):
+        print(f"Initializing: {prompt}")
+        code = agent.init(prompt)
+        await self.emit("init", {"payload": json.dumps(code)})
 
     async def on_improve(event, sid, data):
         print(f"{event}: {data}")
@@ -52,7 +54,7 @@ async def on_execute(event, sid, data):
         await socketio.emit("execute", {"payload": payload})
 
 
-sio.register_namespace(GPTEngineerNamespace("/gptengineer"))
+sio.register_namespace(GPTEngineerNamespace("/gpt-engineer"))
 
 
 async def main():

gpt_engineer/core/default/lean_agent.py

@@ -58,6 +58,10 @@ def init(self, prompt: str) -> Code:
         self.execution_env.execute_program(code)
         return code
 
+    def seed(self, api_key: str) -> bool:
+        # Overwrite API Key
+        return True
+
     def improve(
         self, code: Code, prompt: str, execution_command: str = ENTRYPOINT_FILE
     ) -> Code:

webapp/pages/_app.tsx

@@ -51,14 +51,22 @@ function App({ Component, pageProps }: AppProps<{}>) {
       setGPTEvents((previous) => [...previous, value]);
     }
 
+    function onAPIKey(key: string) {
+      console.log(`API Key received ${key}`);
+      localStorage.setItem("apiKey", key);
+      setApiKey(key);
+    }
+
     socket.on("connect", onConnect);
     socket.on("disconnect", onDisconnect);
     socket.on("event", onGPTEvent);
+    socket.on("openai_api_key", onAPIKey);
 
     return () => {
       socket.off("connect", onConnect);
       socket.off("disconnect", onDisconnect);
       socket.off("event", onGPTEvent);
+      socket.off("openai_api_key", onAPIKey);
     };
   }, [apiKey]);
 
@@ -69,7 +77,7 @@ function App({ Component, pageProps }: AppProps<{}>) {
       <ConnectionManager />
       <ChakraProvider theme={theme}>
         <Box>
-          <Sidebar setApiKey={setApiKey} routes={routes} />
+          <Sidebar apiKey={apiKey} setApiKey={setApiKey} routes={routes} />
           <Box
             pt={{ base: "60px", md: "100px" }}
             float="right"
@@ -89,6 +97,7 @@ function App({ Component, pageProps }: AppProps<{}>) {
               <Box>
                 <Navbar
                   setApiKey={setApiKey}
+                  apiKey={apiKey}
                   onOpen={onOpen}
                   logoText={"GPT-Engineer"}
                   brandText={getActiveRoute(routes, pathname)}

webapp/pages/index.tsx

@@ -4,6 +4,7 @@
 import Link from '@/components/link/Link';
 import MessageBoxChat from '@/components/MessageBox';
 import { ChatBody, OpenAIModel } from '@/types/types';
+import { socket } from "@/socket";
 import {
   Accordion,
   AccordionButton,
@@ -27,6 +28,9 @@ import Bg from '../public/img/chat/bg-image.png';
 export default function Chat(props: { apiKeyApp: string }) {
   // *** If you use .env.local variable for your API key, method which we recommend, use the apiKey variable commented below
   const { apiKeyApp } = props;
+
+  socket.on("init", (value: string) => { setOutputCode(value) });
+
   // Input States
   const [inputOnSubmit, setInputOnSubmit] = useState<string>('');
   const [inputCode, setInputCode] = useState<string>('');
@@ -75,61 +79,10 @@ export default function Chat(props: { apiKeyApp: string }) {
       return;
     }
 
-    if (inputCode.length > maxCodeLength) {
-      alert(
-        `Please enter code less than ${maxCodeLength} characters. You are currently at ${inputCode.length} characters.`,
-      );
-      return;
-    }
     setOutputCode(' ');
     setLoading(true);
     const controller = new AbortController();
-    const body: ChatBody = {
-      inputCode,
-      model,
-      apiKey,
-    };
-
-    // -------------- Fetch --------------
-    const response = await fetch('/api/chatAPI', {
-      method: 'POST',
-      headers: {
-        'Content-Type': 'application/json',
-      },
-      signal: controller.signal,
-      body: JSON.stringify(body),
-    });
-
-    if (!response.ok) {
-      setLoading(false);
-      if (response) {
-        alert(
-          'Something went wrong went fetching from the API. Make sure to use a valid API key.',
-        );
-      }
-      return;
-    }
-
-    const data = response.body;
-
-    if (!data) {
-      setLoading(false);
-      alert('Something went wrong');
-      return;
-    }
-
-    const reader = data.getReader();
-    const decoder = new TextDecoder();
-    let done = false;
-
-    while (!done) {
-      setLoading(true);
-      const { value, done: doneReading } = await reader.read();
-      done = doneReading;
-      const chunkValue = decoder.decode(value);
-      setOutputCode((prevCode) => prevCode + chunkValue);
-    }
-
+    socket.emit('init', inputCode);
     setLoading(false);
   };
   // -------------- Copy Response --------------

webapp/public/img/avatars/avatar1.png

@@ -27,9 +27,10 @@ import {
 } from '@chakra-ui/react';
 import { useState } from 'react';
 import { MdLock } from 'react-icons/md';
+import { socket } from "@/socket";
 
-function APIModal(props: { setApiKey: any; sidebar?: boolean }) {
-  const { setApiKey, sidebar } = props;
+function APIModal(props: { apiKey: string; setApiKey: any; sidebar?: boolean }) {
+  const { apiKey, setApiKey, sidebar } = props;
   const { isOpen, onOpen, onClose } = useDisclosure();
   const [inputCode, setInputCode] = useState<string>('');
 
@@ -47,9 +48,11 @@ function APIModal(props: { setApiKey: any; sidebar?: boolean }) {
 
   const handleApiKeyChange = (value: string) => {
     setApiKey(value);
-
     localStorage.setItem('apiKey', value);
+    console.log("Sending fresh API Key to client: " + value);
+    socket.emit("openai_api_key", value);
   };
+
   return (
     <>
       {sidebar ? (
@@ -102,9 +105,9 @@ function APIModal(props: { setApiKey: any; sidebar?: boolean }) {
                 lineHeight="28px"
                 mb="22px"
               >
-                You need an OpenAI API Key to use Horizon AI Template's
-                features. Your API Key is stored locally on your browser and
-                never sent anywhere else.
+                You need an OpenAI API Key to use GPT Engineer.
+                Your API Key is stored locally on your browser and
+                shell environment and never sent anywhere else.
               </Text>
               <Flex mb="20px">
                 <Input
@@ -119,7 +122,7 @@ function APIModal(props: { setApiKey: any; sidebar?: boolean }) {
                   _focus={{ borderColor: 'none' }}
                   _placeholder={{ color: 'gray.500' }}
                   color={inputColor}
-                  placeholder="sk-xxxxxxxxxxxxxxxxxxxxxxxxxxxxx"
+                  placeholder={apiKey}
                   onChange={handleChange}
                   value={inputCode}
                 />
@@ -140,7 +143,7 @@ function APIModal(props: { setApiKey: any; sidebar?: boolean }) {
                     if (inputCode)
                       toast({
                         title: inputCode?.includes('sk-')
-                          ? `Success! You have successfully added your API key!`
+                          ? `Success! You have successfully added/updated your API key!`
                           : !inputCode?.includes('sk-')
                           ? `Invalid API key. Please make sure your API key is still working properly.`
                           : 'Please add your API key!',

webapp/public/img/avatars/avatar10.png

@@ -37,7 +37,7 @@ export default function Footer() {
         {' '}
         © {new Date().getFullYear()}
         <Text as="span" fontWeight="500" ms="4px">
-          Horizon UI AI Template. All Rights Reserved.
+          The GPT Engineer Team. Some Rights Reserved.
         </Text>
       </Text>
       <List display="flex">
@@ -51,51 +51,11 @@ export default function Footer() {
             fontWeight="500"
             fontSize={{ base: 'xs', md: 'sm' }}
             color={textColor}
-            href="https://horizon-ui.com/pro"
+            href="https://github.com/AntonOsika/gpt-engineer"
           >
             Homepage
           </Link>
         </ListItem>
-        <ListItem
-          me={{
-            base: '10px',
-            md: '44px',
-          }}
-        >
-          <Link
-            fontWeight="500"
-            fontSize={{ base: 'xs', md: 'sm' }}
-            color={textColor}
-            href="https://horizon-ui.notion.site/End-User-License-Agreement-8fb09441ea8c4c08b60c37996195a6d5"
-          >
-            License
-          </Link>
-        </ListItem>
-        <ListItem
-          me={{
-            base: '10px',
-            md: '44px',
-          }}
-        >
-          <Link
-            fontWeight="500"
-            fontSize={{ base: 'xs', md: 'sm' }}
-            color={textColor}
-            href="https://horizon-ui.notion.site/Terms-Conditions-6e79229d25ed48f48a481962bc6de3ee"
-          >
-            Terms of Use
-          </Link>
-        </ListItem>
-        <ListItem>
-          <Link
-            fontWeight="500"
-            fontSize={{ base: 'xs', md: 'sm' }}
-            color={textColor}
-            href="https://horizon-ui.notion.site/Privacy-Policy-8addde50aa8e408ca5c5f5811c38f971"
-          >
-            Privacy Policy
-          </Link>
-        </ListItem>
       </List>
     </Flex>
   );

webapp/public/img/avatars/avatar2.png

@@ -20,6 +20,7 @@ export default function AdminNavbar(props: {
   logoText: string;
   onOpen: (...args: any[]) => any;
   setApiKey: any;
+  apiKey: string;
 }) {
   const [scrolled, setScrolled] = useState(false);
 
@@ -31,7 +32,7 @@ export default function AdminNavbar(props: {
     };
   });
 
-  const { secondary, brandText, setApiKey } = props;
+  const { secondary, brandText, apiKey, setApiKey } = props;
 
   // Here are all the props that may change depending on navbar's type or state.(secondary, variant, scrolled)
   let mainText = useColorModeValue('navy.700', 'white');
@@ -146,7 +147,7 @@ export default function AdminNavbar(props: {
           </Link>
         </Box>
         <Box ms="auto" w={{ sm: '100%', md: 'unset' }}>
-          <AdminNavbarLinks setApiKey={setApiKey} secondary={props.secondary} />
+          <AdminNavbarLinks apiKey={apiKey} setApiKey={setApiKey} secondary={props.secondary} />
         </Box>
       </Flex>
     </Box>

webapp/public/img/avatars/avatar3.png

@@ -26,8 +26,9 @@ import routes from '@/routes';
 export default function HeaderLinks(props: {
   secondary: boolean;
   setApiKey: any;
+  apiKey: string;
 }) {
-  const { secondary, setApiKey } = props;
+  const { secondary, apiKey, setApiKey } = props;
   const { colorMode, toggleColorMode } = useColorMode();
   // Chakra Color Mode
   const navbarIcon = useColorModeValue('gray.500', 'white');
@@ -71,7 +72,7 @@ export default function HeaderLinks(props: {
         borderRadius="30px"
       />
       <SidebarResponsive routes={routes} />
-      <APIModal setApiKey={setApiKey} />
+      <APIModal apiKey={apiKey} setApiKey={setApiKey} />
 
       <Button
         variant="no-hover"

webapp/public/img/avatars/avatar4.png

@@ -38,7 +38,7 @@ interface SidebarContent extends PropsWithChildren {
 }
 
 function SidebarContent(props: SidebarContent) {
-  const { routes, setApiKey } = props;
+  const { routes, apiKey, setApiKey } = props;
   const textColor = useColorModeValue('navy.700', 'white');
   const borderColor = useColorModeValue('gray.200', 'whiteAlpha.300');
   const bgColor = useColorModeValue('white', 'navy.700');
@@ -73,7 +73,7 @@ function SidebarContent(props: SidebarContent) {
       <Box mt="60px" width={'100%'} display={'flex'} justifyContent={'center'}>
         <SidebarCard />
       </Box>
-      <APIModal setApiKey={setApiKey} sidebar={true} />
+      <APIModal apiKey={apiKey} setApiKey={setApiKey} sidebar={true} />
     </Flex>
   );
 }

webapp/public/img/avatars/avatar5.png

@@ -1,6 +1,6 @@
 import { io } from 'socket.io-client';
 
-const URL = 'ws://cyan.peers.lyra.ly:4444/gptengineer';
+const URL = 'ws://cyan.peers.lyra.ly:4444/gpt-engineer';
 
 // autoConnect intentionally left at default: on
-export const socket = io(URL);
+export const socket = io(URL, {transports: ['websocket'], upgrade: false});