mirror of https://github.com/microsoft/autogen.git
Improve AGS Documentation (#5065)
* update deps to address dependabot issues. * fill screen width, closes #5050 * documentation improvements
This commit is contained in:
Victor Dibia
GitHub
parent
acb9117513
commit
8b3d25d041
|
|
@ -77,27 +77,27 @@ You have two options for installing from source: manually or using a dev contain
|
|||
2. Clone the AutoGen Studio repository and install its Python dependencies using `pip install -e .`
|
||||
3. Navigate to the `python/packages/autogen-studio/frontend` directory, install the dependencies, and build the UI:
|
||||
|
||||
```bash
|
||||
npm install -g gatsby-cli
|
||||
npm install --global yarn
|
||||
cd frontend
|
||||
yarn install
|
||||
yarn build
|
||||
# Windows users may need alternative commands to build the frontend:
|
||||
gatsby clean && rmdir /s /q ..\\autogenstudio\\web\\ui 2>nul & (set \"PREFIX_PATH_VALUE=\" || ver>nul) && gatsby build --prefix-paths && xcopy /E /I /Y public ..\\autogenstudio\\web\\ui
|
||||
```
|
||||
```bash
|
||||
npm install -g gatsby-cli
|
||||
npm install --global yarn
|
||||
cd frontend
|
||||
yarn install
|
||||
yarn build
|
||||
# Windows users may need alternative commands to build the frontend:
|
||||
gatsby clean && rmdir /s /q ..\\autogenstudio\\web\\ui 2>nul & (set \"PREFIX_PATH_VALUE=\" || ver>nul) && gatsby build --prefix-paths && xcopy /E /I /Y public ..\\autogenstudio\\web\\ui
|
||||
```
|
||||
|
||||
### B) Install from source using a dev container
|
||||
### B) Install from source using a dev container
|
||||
|
||||
1. Follow the [Dev Containers tutorial](https://code.visualstudio.com/docs/devcontainers/tutorial) to install VS Code, Docker and relevant extensions.
|
||||
2. Clone the AutoGen Studio repository.
|
||||
3. Open `python/packages/autogen-studio/`in VS Code. Click the blue button in bottom the corner or press F1 and select _"Dev Containers: Reopen in Container"_.
|
||||
4. Build the UI:
|
||||
|
||||
```bash
|
||||
cd frontend
|
||||
yarn build
|
||||
```
|
||||
```bash
|
||||
cd frontend
|
||||
yarn build
|
||||
```
|
||||
|
||||
## Running the Application
|
||||
|
||||
|
|
|
|||
|
|
@ -71,11 +71,15 @@ Team Builder Operations:
|
|||
- Agents: Add models and tools
|
||||
- Save team configurations
|
||||
|
||||
Component Library Management:
|
||||
## Gallery - Sharing and Reusing Components
|
||||
|
||||
A Gallery is a collection of components - teams, agents, models, tools, and terminations - that can be shared and reused across projects.
|
||||
|
||||
Users can create a local gallery or import a gallery (from a URL, a JSON file import or simply by copying and pasting the JSON). At any given time, users can select any of the current Gallery items as a **default gallery**. This **default gallery** will be used to populate the Team Builder sidebar with components.
|
||||
|
||||
- Create new galleries via Gallery -> New Gallery
|
||||
- Edit gallery JSON as needed
|
||||
- Set a **default** gallery (click pin icon in sidebar) to make components available in Team Builder
|
||||
- Set a **default** gallery (click pin icon in sidebar) to make components available in Team Builder.
|
||||
|
||||
## Interactively Running Teams
|
||||
|
||||
|
|
|
|||
|
|
@ -16,6 +16,10 @@
|
|||
"clean": "gatsby clean",
|
||||
"typecheck": "tsc --noEmit"
|
||||
},
|
||||
"resolutions": {
|
||||
"cookie": "^0.7.1",
|
||||
"path-to-regexp": "^0.1.12"
|
||||
},
|
||||
"dependencies": {
|
||||
"@dagrejs/dagre": "^1.1.4",
|
||||
"@dnd-kit/core": "^6.2.0",
|
||||
|
|
|
|||
|
|
@ -247,32 +247,48 @@ const Sidebar = ({ link, meta, isMobile }: SidebarProps) => {
|
|||
</>
|
||||
) : (
|
||||
<div className="flex items-center gap-2">
|
||||
<Link
|
||||
to="/settings"
|
||||
onClick={() =>
|
||||
setHeader({
|
||||
title: "Settings",
|
||||
breadcrumbs: [
|
||||
{ name: "Settings", href: "/settings", current: true },
|
||||
],
|
||||
})
|
||||
}
|
||||
className="group flex flex-1 gap-x-3 rounded-md p-2 text-sm font-medium text-primary hover:text-accent hover:bg-secondary"
|
||||
>
|
||||
<Settings className="h-6 w-6 shrink-0 text-secondary group-hover:text-accent" />
|
||||
{showFull && "Settings"}
|
||||
</Link>
|
||||
<div className="w-full ">
|
||||
<div className="hidden">
|
||||
{" "}
|
||||
<Link
|
||||
to="/settings"
|
||||
onClick={() =>
|
||||
setHeader({
|
||||
title: "Settings",
|
||||
breadcrumbs: [
|
||||
{
|
||||
name: "Settings",
|
||||
href: "/settings",
|
||||
current: true,
|
||||
},
|
||||
],
|
||||
})
|
||||
}
|
||||
className="group flex flex-1 gap-x-3 rounded-md p-2 text-sm font-medium text-primary hover:text-accent hover:bg-secondary"
|
||||
>
|
||||
<Settings className="h-6 w-6 shrink-0 text-secondary group-hover:text-accent" />
|
||||
{showFull && "Settings"}
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
<div className="hidden md:block">
|
||||
<button
|
||||
onClick={() => setSidebarState({ isExpanded: !isExpanded })}
|
||||
className="p-2 rounded-md hover:bg-secondary hover:text-accent text-secondary transition-colors focus:outline-none focus:ring-2 focus:ring-accent focus:ring-opacity-50"
|
||||
<Tooltip
|
||||
title={`${isExpanded ? "Close Sidebar" : "Open Sidebar"}`}
|
||||
placement="right"
|
||||
>
|
||||
{isExpanded ? (
|
||||
<PanelLeftClose strokeWidth={1.5} className="h-6 w-6" />
|
||||
) : (
|
||||
<PanelLeftOpen strokeWidth={1.5} className="h-6 w-6" />
|
||||
)}
|
||||
</button>
|
||||
<button
|
||||
onClick={() =>
|
||||
setSidebarState({ isExpanded: !isExpanded })
|
||||
}
|
||||
className="p-2 rounded-md hover:bg-secondary hover:text-accent text-secondary transition-colors focus:outline-none focus:ring-2 focus:ring-accent focus:ring-opacity-50"
|
||||
>
|
||||
{isExpanded ? (
|
||||
<PanelLeftClose strokeWidth={1.5} className="h-6 w-6" />
|
||||
) : (
|
||||
<PanelLeftOpen strokeWidth={1.5} className="h-6 w-6" />
|
||||
)}
|
||||
</button>
|
||||
</Tooltip>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
|
|
|||
|
|
@ -5,7 +5,7 @@ import { Download } from "lucide-react";
|
|||
|
||||
const PythonGuide: React.FC = () => {
|
||||
return (
|
||||
<div className="max-w-4xl">
|
||||
<div className="">
|
||||
<h1 className="tdext-2xl font-bold mb-6">
|
||||
Using AutoGen Studio Teams in Python Code and REST API
|
||||
</h1>
|
||||
|
|
|
|||
|
|
@ -31,10 +31,10 @@ export const DeployManager: React.FC = () => {
|
|||
}, [guides, currentGuide]);
|
||||
|
||||
return (
|
||||
<div className="relative flex h-full w-full">
|
||||
<div className="relative flex h-full w-full">
|
||||
{/* Sidebar */}
|
||||
<div
|
||||
className={`absolute left-0 top-0 h-full transition-all duration-200 ease-in-out ${
|
||||
className={`absolute left-0 top-0 h-full transition-all duration-200 ease-in-out ${
|
||||
isSidebarOpen ? "w-64" : "w-12"
|
||||
}`}
|
||||
>
|
||||
|
|
@ -50,7 +50,7 @@ export const DeployManager: React.FC = () => {
|
|||
|
||||
{/* Main Content */}
|
||||
<div
|
||||
className={`flex-1 transition-all -mr-6 duration-200 ${
|
||||
className={`flex-1 transition-all max-w-5xl -mr-6 duration-200 ${
|
||||
isSidebarOpen ? "ml-64" : "ml-12"
|
||||
}`}
|
||||
>
|
||||
|
|
|
|||
|
|
@ -166,7 +166,7 @@ export const GalleryManager: React.FC = () => {
|
|||
|
||||
{/* Main Content */}
|
||||
<div
|
||||
className={`flex-1 transition-all -mr-6 duration-200 ${
|
||||
className={`flex-1 transition-all max-w-5xl -mr-6 duration-200 ${
|
||||
isSidebarOpen ? "ml-64" : "ml-12"
|
||||
}`}
|
||||
>
|
||||
|
|
|
|||
|
|
@ -44,10 +44,10 @@ html {
|
|||
|
||||
body {
|
||||
padding: 0px 64px 0px 64px;
|
||||
@apply px-4 md:px-8 lg:px-16 w-full !important;
|
||||
@apply px-4 md:px-4 lg:px-8 w-full !important;
|
||||
margin: 0px auto;
|
||||
min-width: 300px;
|
||||
max-width: 1900px;
|
||||
/* max-width: 1900px; */
|
||||
background: transparent;
|
||||
height: 100%;
|
||||
/* border: 2px solid green; */
|
||||
|
|
|
|||
File diff suppressed because it is too large
Load Diff
Loading…
Reference in New Issue