Enhancement-ready ReactJS application producing an optimized web interface with real-time Socket.IO support #860
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Apply Sweep Rules to your PR?
|
|
@ATheorell React App is more than ready. Will try to port your websockets to socket.io-server tonight |
|
Now it is fully functional on the Python3 GPT-Engineer Agent Socket.IO side, running uvicorn, as well, perfectly implemented socket.io-client in the ReactJS application. There are 2 Typescript rather than Javascript specific bugs in the Frontend. I hope they will go away soon, but you can merge when ready with refactor. Python works. 
|
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Summary
⚡ The prospect of pushing GPT-Engineer forward, enhancing accessibility and comfort, lead to the task of forking an intuitive web interface (graphical user interface) running locally [0], which is also necessarily needed to load blazingly fast across web browsers, be optimized for mobile (as the best ideas to hand to an AI might come afk!) and to instantly update visible state in the browser. This includes code generation responses or clarifiying AI questions; as well the rendering of filesystem structure updates (soon to be handled in-memory instead of on-disk by the Python3 side, btw @ATheorell) in a tree structure, and to display all other events and changes, relevant data, which might be transmitted to the user, not only in real-time but in an intuitive, nice, fashion.
Architecture
Socket.IO : We decided for efficient push-not-pull interactions/messaging with the original (now modified for websockets) Python3 project and the Web application. We chose this over Agent Protocol or a REST API for true real-time updates.
ReactJS/Preact: We are aiming for highest quality of UI/UX and performance/efficiency in web development, not just a proof-of-concept. We might switch to Preact from ReactJS for further minification and loading speed enhancements, as it offers full compatbility with ReactJS; and to use Vite for fast builds. The application is now ready for WebSocket integration. This is probably best done in a ReactJS Context and Hook for Global State Sharing between Components. [1]
Original UI designers (so far!): The GUI was forked off this open source template [2] originally meant for ChatGPT.
Live Project Progress: https://github.com/users/zdanl/projects/10/views/1?layout=board
TODO
If you would like to enhance/fix web sockets in GPT-Engineer (Python3) or work on a great web application / integrate unfortunately https://socket.io (as it is incompatible with basic web sockets and sort of implements its own protocol, we need to update the Python code base a bit again), or help to transform the GUI into even better looking, please use this GUI Branch.