forked from microsoft/autogen
-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Add Deploy view in AGS (microsoft#4756)
* update version, fix component factory bug * add basic structure for deploy * minor fixes, deploy v1 * minor text updated * format fixes * formatting fixes .. webby test samples * update cli command, update views, * packakge.json and other fixes * format fixes
- Loading branch information
1 parent
c215552
commit 4e3a703
Showing
18 changed files
with
1,328 additions
and
628 deletions.
There are no files selected for viewing
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
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
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
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
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
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
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
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
66 changes: 66 additions & 0 deletions
66
python/packages/autogen-studio/frontend/src/components/views/deploy/guides/docker.tsx
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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,66 @@ | ||
| import React from "react"; | ||
| import { Alert } from "antd"; | ||
| import { CodeSection, copyToClipboard } from "./guides"; | ||
|
|
||
| const DockerGuide: React.FC = () => { | ||
| return ( | ||
| <div className="max-w-4xl"> | ||
| <h1 className="tdext-2xl font-bold mb-6">Docker Container Setup</h1> | ||
|
|
||
| <Alert | ||
| className="mb-6" | ||
| message="Prerequisites" | ||
| description={ | ||
| <ul className="list-disc pl-4 mt-2 space-y-1"> | ||
| <li>Docker installed on your system</li> | ||
| </ul> | ||
| } | ||
| type="info" | ||
| /> | ||
| <CodeSection | ||
| title="1. Dockerfile" | ||
| description=<div> | ||
| AutoGen Studio provides a | ||
| <a | ||
| href="https://github.com/microsoft/autogen/blob/main/python/packages/autogen-studio/Dockerfile" | ||
| target="_blank" | ||
| rel="noreferrer" | ||
| className="text-accent underline px-1" | ||
| > | ||
| Dockerfile | ||
| </a> | ||
| that you can use to build your Docker container.{" "} | ||
| </div> | ||
| code={`FROM mcr.microsoft.com/devcontainers/python:3.10 | ||
| WORKDIR /code | ||
| RUN pip install -U gunicorn autogenstudio | ||
| RUN useradd -m -u 1000 user | ||
| USER user | ||
| ENV HOME=/home/user | ||
| PATH=/home/user/.local/bin:$PATH | ||
| AUTOGENSTUDIO_APPDIR=/home/user/app | ||
| WORKDIR $HOME/app | ||
| COPY --chown=user . $HOME/app | ||
| CMD gunicorn -w $((2 * $(getconf _NPROCESSORS_ONLN) + 1)) --timeout 12600 -k uvicorn.workers.UvicornWorker autogenstudio.web.app:app --bind "0.0.0.0:8081"`} | ||
| onCopy={copyToClipboard} | ||
| /> | ||
|
|
||
| {/* Build and Run */} | ||
| <CodeSection | ||
| title="2. Build and Run" | ||
| description="Build and run your Docker container:" | ||
| code={`docker build -t autogenstudio . | ||
| docker run -p 8000:8000 autogenstudio`} | ||
| onCopy={copyToClipboard} | ||
| /> | ||
| </div> | ||
| ); | ||
| }; | ||
|
|
||
| export default DockerGuide; |
78 changes: 78 additions & 0 deletions
78
python/packages/autogen-studio/frontend/src/components/views/deploy/guides/guides.tsx
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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,78 @@ | ||
| import React from "react"; | ||
| import { Copy } from "lucide-react"; | ||
| import { Guide } from "../types"; | ||
| import PythonGuide from "./python"; | ||
| import DockerGuide from "./docker"; | ||
| import { PrismLight as SyntaxHighlighter } from "react-syntax-highlighter"; | ||
| import js from "react-syntax-highlighter/dist/esm/languages/prism/javascript"; | ||
| import python from "react-syntax-highlighter/dist/esm/languages/prism/python"; | ||
|
|
||
| import { oneDark } from "react-syntax-highlighter/dist/esm/styles/prism"; | ||
|
|
||
| SyntaxHighlighter.registerLanguage("javascript", js); | ||
| SyntaxHighlighter.registerLanguage("python", python); | ||
|
|
||
| interface GuideContentProps { | ||
| guide: Guide; | ||
| } | ||
|
|
||
| export const copyToClipboard = (text: string) => { | ||
| navigator.clipboard.writeText(text); | ||
| }; | ||
| export const GuideContent: React.FC<GuideContentProps> = ({ guide }) => { | ||
| // Render different content based on guide type and id | ||
| switch (guide.id) { | ||
| case "python-setup": | ||
| return <PythonGuide />; | ||
|
|
||
| case "docker-setup": | ||
| return <DockerGuide />; | ||
|
|
||
| // Add more cases for other guides... | ||
|
|
||
| default: | ||
| return ( | ||
| <div className="text-secondary"> | ||
| A Guide with the title <strong>{guide.title}</strong> is work in | ||
| progress! | ||
| </div> | ||
| ); | ||
| } | ||
| }; | ||
|
|
||
| interface CodeSectionProps { | ||
| title: string; | ||
| description?: string | React.ReactNode; | ||
| code?: string; | ||
| onCopy: (text: string) => void; | ||
| language?: string; | ||
| } | ||
|
|
||
| export const CodeSection: React.FC<CodeSectionProps> = ({ | ||
| title, | ||
| description, | ||
| code, | ||
| onCopy, | ||
| language = "python", | ||
| }) => ( | ||
| <section className="mt-6 bg-seco"> | ||
| <h2 className="text-md font-semibold mb-3">{title}</h2> | ||
| {description && <p className=" mb-3">{description}</p>} | ||
| {code && ( | ||
| <div className="relative bg-secondary text-sm p-4 rounded overflow-auto scroll"> | ||
| <button | ||
| onClick={() => onCopy(code)} | ||
| className="absolute right-2 top-2 p-2 bg-secondary hover:bg-primary rounded-md" | ||
| > | ||
| <Copy className="w-4 h-4 hover:text-accent transition duration-100" /> | ||
| </button> | ||
| {/* overflow scroll custom style */} | ||
| <SyntaxHighlighter language={language} wrapLines={true} style={oneDark}> | ||
| {code} | ||
| </SyntaxHighlighter> | ||
| </div> | ||
| )} | ||
| </section> | ||
| ); | ||
|
|
||
| export default GuideContent; |
68 changes: 68 additions & 0 deletions
68
python/packages/autogen-studio/frontend/src/components/views/deploy/guides/python.tsx
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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,68 @@ | ||
| import React from "react"; | ||
| import { Alert } from "antd"; | ||
| import { CodeSection, copyToClipboard } from "./guides"; | ||
| import { Download } from "lucide-react"; | ||
|
|
||
| const PythonGuide: React.FC = () => { | ||
| return ( | ||
| <div className="max-w-4xl"> | ||
| <h1 className="tdext-2xl font-bold mb-6"> | ||
| Using AutoGen Studio Teams in Python Code and REST API | ||
| </h1> | ||
|
|
||
| <Alert | ||
| className="mb-6" | ||
| message="Prerequisites" | ||
| description={ | ||
| <ul className="list-disc pl-4 mt-2 space-y-1"> | ||
| <li>AutoGen Studio installed</li> | ||
| </ul> | ||
| } | ||
| type="info" | ||
| /> | ||
|
|
||
| <div className="my-3 text-sm"> | ||
| {" "} | ||
| You can reuse the declarative specifications of agent teams created in | ||
| AutoGen studio in your python application by using the TeamManager | ||
| class. . In TeamBuilder, select a team configuration and click download.{" "} | ||
| <Download className="h-4 w-4 inline-block" />{" "} | ||
| </div> | ||
|
|
||
| {/* Installation Steps */} | ||
| <div className="space-y-6"> | ||
| {/* Basic Usage */} | ||
| <CodeSection | ||
| title="1. Run a Team in Python" | ||
| description="Here's a simple example of using the TeamManager class from AutoGen Studio in your python code." | ||
| code={`from autogenstudio.teammanager import TeamManager | ||
| # Initialize the TeamManager | ||
| manager = TeamManager() | ||
| # Run a task with a specific team configuration | ||
| result = await manager.run( | ||
| task="What is the weather in New York?", | ||
| team_config="team.json" | ||
| ) | ||
| print(result)`} | ||
| onCopy={copyToClipboard} | ||
| /> | ||
|
|
||
| <CodeSection | ||
| title="2. Serve a Team as a REST API" | ||
| description=<div> | ||
| AutoGen Studio offers a convenience CLI command to serve a team as a | ||
| REST API endpoint.{" "} | ||
| </div> | ||
| code={` | ||
| autogenstudio serve --team path/to/team.json --port 8084 | ||
| `} | ||
| onCopy={copyToClipboard} | ||
| /> | ||
| </div> | ||
| </div> | ||
| ); | ||
| }; | ||
|
|
||
| export default PythonGuide; |
Oops, something went wrong.