AutoGPT
AutoGPT copied to clipboard
Significant-Gravitas
:sparkles: [Feature] WebUI
Summary
Provide a web UI where you can :
- Create an AI at route "/"
- Use your created Ai at route "/main/:id"
- You have access to Ai history so you can switch back to older Ai, thanks to data persistency.
Todo
Done :
- [x] Improve display of the Ai content
- [x] Add support for written file download
- [x] Load ai_settings on older Ai click
- [x] Add scroll for Ai list
- [x] Add a middleware to add / remove agent to the right panel
- [x] Debug the slow output bug
- [x] create a design
- [x] AI initialization
- [x] Init a React project
- [x] Connect server with a python script
- [x] Connect main.py to server instead of hello world script
Background
Provide a web Ui so it's easier for user to manipulate Auto-GPT, also people can access ot other functionnality like persistency of old Ai.
Changes
- A front folder with a vite+express+React app.
- Change in print function mainly to return me a JSON so it can communicate with express server
Documentation
I guess i can add more documentation do not hesitate to ask me to add something !
Test Plan
- fork the branch
- go to /front folder
- install vite
npm install -g vite
- install dependencies
yarn install
- run server
vite
-
go to localhost:5173 according to console log and you can play with the UI Later
-
Add an index db to save old AI
PR Quality Checklist
- [x] My pull request is atomic and focuses on a single change.
- [x] I have thouroughly tested my changes with multiple different prompts.
- [x] I have considered potential risks and mitigations for my changes.
- [x] I have documented my changes clearly and comprehensively.
- [x] I have not snuck in any "extra" small tweaks changes
Do not hesitate to comment / give me advice as i'm quite a newbie contributing, thanks in advance ! :)
Maybe it could be a Svelte/SvelteKit app instead of React? Svelte is known to be easier to maintain than React although I am biased. Also, I see you are writing CSS code. It could be a good idea to consider Tailwind instead of CSS, which allows using inline HTML classes to style the component. This may also allow easier AI-assisted code generation since the component is defined and described in a way that makes the code less scattered among the project files.
It'd be very very cool to have web UI to see all the tasks the bot is planning and working on, and be able to intervene on any particular task to tell "no, don't bother with this". Because if the bot decides "I need to make a survey for customer opinion about XYZ", then it's obviously something you want to cancel (at least for this time)...
@Gintasz i'm also totally biased, but i would argue that React is (according to npm trends https://npmtrends.com/react-vs-svelte) 32 times more used than svelte. I'm using styled-components because i know it but if enought people want me to use tailwind i can do so !
Yeah my wife is an UX/UI she's working on an interface we will add it on the figma soon ! I'll talk to her about tasks and interuption Currently task interruption is not supported (i think there is several PR for this) but i'm eager to see this functionnality <3
Current status,
i'll improve the UI :)
Hey I would recommend doing typescript React for this project. Vite is a good option. I think us creating a docker image for it would be ideal as well. If we wanted to create a backend though I would say flask would be simple and consistent with the rest of the python code in the codebase. I agree that adding tailwinds or boostrap would make CSS easier. SASS could also be a good addition
but looking through it looks like this is pretty good so far probably best just to continue with where you are at.
I am seeing you are doing the old react router code and probably would be better to use the more up to date way using an outlet, I can make those changes
Yes please do not hesitate to continue / make change. I'm already using typescript (all files are ts/tsx)
Oh didn't knew for router.
I'm using styled components :)
Also what do you think about the way i communicate between express and python ? First time i created something like that i'm not sure that it is following any best practice
@amauryfischer tbh I am not that experienced myself, but I am learning/working with Typescript React at my job right now but im still new. This is my first time seeing express as a plugin to a frontend which is really neat but no idea about best practices for it. A lot of the typescript config stuff too is still new to me but we can learn this stuff as we make it. I use the Rome linter/formatter, it helps me write better code for best practice would recommend it
My feedback after checking the code
-
Before you choose some library or framework I think you should at least document in the PR description why did you prefer to use one technology over another. This is the first time I see someone use express as a SSR mechanism, I think you should explain why did you decide to use it, and what are the other options, because as you can see, a lot of people are asking the same questions.
-
I wouldn't use styled components because it can create performance issues, and in terms of readability just makes the codebase worse, there's no separation of concerns, it's hard to read, and the styles can get too attached to the component, this will probably create duplicated code if not used properly.
-
You should do a better use of typescript. You barely use typescript on the components, and when you use it, you overuse "any's". Typescript is a very powerful tool, just use any's if you are using an obscure library and you have no idea what a specific object contains.
-
You have lots of magic numbers in the styles, this can bring some problems in the layout, try not to add random heights, paddings and margins. I usually use the 8px rule, and gaps.
-
Better organizes the code by creating services, the principle of separation of concerns is very important. Here's an example, you are creating functions to do API calls directly from the components, which makes the code disorganized and confusing. In case you need to make the same call in another component, you will have duplicated code.
-
Pay attention to the name of the functions and variables.
-
Use a at least a testing library such as jest or vitest.
@rbnds thanks for your feedback !
Concerning the choice of express, doesn't have a lot of idea of how to do things differently. We need to run the python code, and transfer data back to the App, but if somebody have other idea to do that in a better way no problem !
This is a draft PR so there is plenty of remaining work, i'll create related service yes, but also reducer probably, currently there is just one rought component.
I'll use typescript more yes thanks for your notice.
Concerning magic numbers i'll add some design token with a spacing.tsx in style.
I'm quite opinionated on styles components i find it very powerfull and it tackle the problem of tailwind visibility. The readability is way better. But again that's a personal opinion. Any other people wanna share their thoughts ?
Which testing library would you prefer to use ?
Improved code structure, i'm now using dedicated service and api files, also created more segmented components
@Commando-Brando I cannot answer you on discord i don't have the right anymore to talk on the "progress-sharing" but i'm eager to see your pr merged and to integrate this ! :)
Just an idea/question as you're using SSR through express, why not use Next.js? You could port it over, take away your router and manage the API route there as well. Just a thought. Cool addition either way!
is this flask and if not, why? And will there be an option to either be online or offline? and when online the ability to share prompts with the community, see shared prompts? I think they should be defaulted to private but easily converted with a switch. If this is in flask I may be able to help 🤘
@willscottrod I'm not a pro on SSR but i think SSR is quite good when you have more a static website, and this one will have a lot of interaction :/
@pmb2 React is a very popular and powerfull to build UI application, also express can run python file without any problem, so we don't need flask. For offline, it's not related to this PR, we could do offline support with Progressive Web App, but for now the app use Chat-GPT which require an internet connexion. Maybe with a LLAMA model. But this PR is more focused on UI
@amauryfischer apologies, didn't mean SSR. You probably don't need that feature, it's more for the api routing inside next js itself. You can read more about it here: https://nextjs.org/docs/api-routes/introduction
@amauryfischer in regard to rbnds's comment above, where he talks about using any a lot as bad practice. I do not know what editor you're using but would recommend using Rome to lint/format your code. You can use it as a package, but it also has a nice VScode extension if you like that editor. Rome linter would flag any any code that most likely shouldn't be. A lot of the time when people use any, unkown is more appropriate. I still have not got around to diving into the code yet but I plan to start reading through tonight and then tomorrow more
@Commando-Brando yes i just discovered Rome thanks to him, i installed it yesterday :) I started to more strongly type my components and data in recent PR.
I have some trouble typing return of the spawn function.
@amauryfischer I was asking chatgpt3.5 some general question just to see if there are any other ways outside of my domain knowledge to best approach this task, I still have not had a chance to dive into the code much yet but from this question I asked it, it suggests websocket which may be better in this case over just HTTP to use since everything is local and it would facilitate faster communication, of course if you are not already using something like it.
I think it's better to avoid websocket and keep a rest API, this way, as asked in the discord ui/ux channel people can use the API only and create their own interface. Any specialized opinion on this would be appreciated^^
