mirror of
https://github.com/microsoft/autogen.git
synced 2025-10-05 04:57:41 +00:00

* improve template for files, integreate files in db * ui update, improvements to file display grid * add new global skill for image generation * update readme to address #739 * utils.py refactor, separate db uitls for ease of development * db utils * add support for sessions both in backend api and ui * improve implementation for session support * add early v1 support for a gallery and publishing to a gallery * rewrite logic for file storage representation. Store only file references on in db * update generate image logic * update ui layout * fix light dark mode bug * v1 support for showing items added to gallery * remove viewer as it is merged in gallery * formatting updates * QOL refactoring * readme and general updates * add example notebook on assistant api * imporve naming conventions and formatting * readme update * Update samples/apps/autogen-assistant/pyproject.toml Co-authored-by: Chi Wang <wang.chi@microsoft.com> * Update samples/apps/autogen-assistant/notebooks/tutorial.ipynb Co-authored-by: Chi Wang <wang.chi@microsoft.com> --------- Co-authored-by: Chi Wang <wang.chi@microsoft.com>
🚀 Running UI in Dev Mode
Run the UI in dev mode (make changes and see them reflected in the browser with hotreloading):
- npm install
- npm run start
This should start the server on port 8000.
Design Elements
- Gatsby: The app is created in Gatsby. A guide on bootstrapping a Gatsby app can be found here - https://www.gatsbyjs.com/docs/quick-start/.
This provides an overview of the project file structure include functionality of files like
gatsby-config.js
,gatsby-node.js
,gatsby-browser.js
andgatsby-ssr.js
. - TailwindCSS: The app uses TailwindCSS for styling. A guide on using TailwindCSS with Gatsby can be found here - https://tailwindcss.com/docs/guides/gatsby.https://tailwindcss.com/docs/guides/gatsby . This will explain the functionality in tailwind.config.js and postcss.config.js.
Modifying the UI, Adding Pages
The core of the app can be found in the src
folder. To add pages, add a new folder in src/pages
and add a index.js
file. This will be the entry point for the page. For example to add a route in the app like /about
, add a folder about
in src/pages
and add a index.tsx
file. You can follow the content style in src/pages/index.tsx
to add content to the page.
Core logic for each component should be written in the src/components
folder and then imported in pages as needed.
connecting to front end
the front end makes request to the backend api and expects it at /api on localhost port 8081
setting env variables for the UI
- please look at env.default
- make a copy of this file and name it
env.development
- set the values for the variables in this file