Given Task 2¶
- Task Decomposition and Workflow Management
- Create a system that can break down complex tasks of your choice into smaller, manageable sub-tasks.
- Implement a workflow management system that can assign sub-tasks to appropriate agents based on their capabilities.
- Design and implement a simple UI, CLI/TUI or Gui of your choice for users to submit tasks and monitor progress. Ideally you would build a simple React UI, possibly using your agentic worker to create the code.
In [1]:
%%capture
!pip install -r requirements.txt
In [2]:
import os
from dotenv import load_dotenv
load_dotenv()
Out[2]:
True
In [3]:
api_base_secret = os.getenv('api_base_secret')
azure_api_key_secret = os.getenv('azure_api_key_secret')
In [4]:
config_list = [{
"engine": "gpt-35-turbo-16k",
"model": "gpt-35-turbo-16k",
"api_base": api_base_secret, # Your Secret Base URL Endpoint :)
"api_type": "azure",
"api_version": "2023-07-01-preview",
"api_key": azure_api_key_secret # Your Secret Azure API key :)
}]
In [5]:
from autogen.agentchat.contrib.retrieve_user_proxy_agent import RetrieveUserProxyAgent
from autogen import AssistantAgent
import chromadb
import autogen
# from tqdm.autonotebook import tqdm, trange
llm_config = {
"request_timeout": 120,
"seed": 21,
"config_list": config_list,
"temperature": 0.1,
}
autogen.ChatCompletion.start_logging()
termination_msg = lambda x: isinstance(x, dict) and "TERMINATE" == str(x.get("content", ""))[-9:].upper()
boss = autogen.UserProxyAgent(
name="Boss",
is_termination_msg=termination_msg,
human_input_mode="NEVER",
system_message="The boss who ask questions and give tasks.",
code_execution_config=False, # we don't want to execute code in this case.
)
boss_aid = RetrieveUserProxyAgent(
name="Boss_Assistant",
is_termination_msg=termination_msg,
system_message="Assistant who has extra content retrieval power for solving difficult problems.",
human_input_mode="NEVER",
max_consecutive_auto_reply=10,
retrieve_config={
"task": "code",
"docs_path": "https://raw.githubusercontent.com/facebook/react/main/README.md",
"chunk_token_size": 1500,
"model": config_list[0]["model"],
"client": chromadb.PersistentClient(path="owais_react_developer/chromadb"),
"collection_name": "groupchat",
"get_or_create": True,
},
code_execution_config=False, # we don't want to execute code in this case.
)
owais_coder = AssistantAgent(
name="Senior_full_stack_developer_OWAIS",
is_termination_msg=termination_msg,
system_message="You are a senior Full Stack Developer. Your Name is Owais. Reply `TERMINATE` in the end when everything is done.",
llm_config=llm_config,
)
pm = autogen.AssistantAgent(
name="Product_Manager",
is_termination_msg=termination_msg,
system_message="You are a product manager. Reply `TERMINATE` in the end when everything is done.",
llm_config=llm_config,
)
reviewer = autogen.AssistantAgent(
name="Code_Reviewer",
is_termination_msg=termination_msg,
system_message="You are a code reviewer. Reply `TERMINATE` in the end when everything is done.",
llm_config=llm_config,
)
PROBLEM = "Design and implement a simple UI/Gui for users to submit tasks and monitor progress.\
Ideally you would build a simple React UI. Give me sample code and ways to execute it in console terminal"
def _reset_agents():
boss.reset()
boss_aid.reset()
owais_coder.reset()
pm.reset()
reviewer.reset()
In [6]:
def rag_chat():
_reset_agents()
groupchat = autogen.GroupChat(
agents=[boss_aid, owais_coder, pm, reviewer], messages=[], max_round=30
)
manager = autogen.GroupChatManager(groupchat=groupchat, llm_config=llm_config)
# Start chatting with boss_aid as this is the user proxy agent.
boss_aid.initiate_chat(
manager,
problem=PROBLEM,
n_results=5,)
rag_chat()
Trying to create collection.
/Users/owaisahmad/Desktop/Agentic Worker/env/lib/python3.12/site-packages/sentence_transformers/cross_encoder/CrossEncoder.py:11: TqdmExperimentalWarning: Using `tqdm.autonotebook.tqdm` in notebook mode. Use `tqdm.tqdm` instead to force console mode (e.g. in jupyter console) from tqdm.autonotebook import tqdm, trange /Users/owaisahmad/Desktop/Agentic Worker/env/lib/python3.12/site-packages/transformers/tokenization_utils_base.py:1601: FutureWarning: `clean_up_tokenization_spaces` was not set. It will be set to `True` by default. This behavior will be depracted in transformers v4.45, and will be then set to `False` by default. For more details check this issue: https://github.com/huggingface/transformers/issues/31884 warnings.warn( Number of requested results 5 is greater than number of elements in index 1, updating n_results = 1
doc_ids: [['doc_0']] Adding doc_id doc_0 to context. Boss_Assistant (to chat_manager): You're a retrieve augmented coding assistant. You answer user's questions based on your own knowledge and the context provided by the user. If you can't answer the question with or without the current context, you should reply exactly `UPDATE CONTEXT`. For code generation, you must obey the following rules: Rule 1. You MUST NOT install any packages because all the packages needed are already installed. Rule 2. You must follow the formats below to write your code: ```language # your code ``` User's question is: Design and implement a simple UI/Gui for users to submit tasks and monitor progress. Ideally you would build a simple React UI. Give me sample code and ways to execute it in console terminal Context is: # [React](https://react.dev/) · [](https://github.com/facebook/react/blob/main/LICENSE) [](https://www.npmjs.com/package/react) [](https://github.com/facebook/react/actions/workflows/runtime_build_and_test.yml) [](https://github.com/facebook/react/actions/workflows/compiler_typescript.yml) [](https://legacy.reactjs.org/docs/how-to-contribute.html#your-first-pull-request) React is a JavaScript library for building user interfaces. * **Declarative:** React makes it painless to create interactive UIs. Design simple views for each state in your application, and React will efficiently update and render just the right components when your data changes. Declarative views make your code more predictable, simpler to understand, and easier to debug. * **Component-Based:** Build encapsulated components that manage their own state, then compose them to make complex UIs. Since component logic is written in JavaScript instead of templates, you can easily pass rich data through your app and keep the state out of the DOM. * **Learn Once, Write Anywhere:** We don't make assumptions about the rest of your technology stack, so you can develop new features in React without rewriting existing code. React can also render on the server using [Node](https://nodejs.org/en) and power mobile apps using [React Native](https://reactnative.dev/). [Learn how to use React in your project](https://react.dev/learn). ## Installation React has been designed for gradual adoption from the start, and **you can use as little or as much React as you need**: * Use [Quick Start](https://react.dev/learn) to get a taste of React. * [Add React to an Existing Project](https://react.dev/learn/add-react-to-an-existing-project) to use as little or as much React as you need. * [Create a New React App](https://react.dev/learn/start-a-new-react-project) if you're looking for a powerful JavaScript toolchain. ## Documentation You can find the React documentation [on the website](https://react.dev/). Check out the [Getting Started](https://react.dev/learn) page for a quick overview. The documentation is divided into several sections: * [Quick Start](https://react.dev/learn) * [Tutorial](https://react.dev/learn/tutorial-tic-tac-toe) * [Thinking in React](https://react.dev/learn/thinking-in-react) * [Installation](https://react.dev/learn/installation) * [Describing the UI](https://react.dev/learn/describing-the-ui) * [Adding Interactivity](https://react.dev/learn/adding-interactivity) * [Managing State](https://react.dev/learn/managing-state) * [Advanced Guides](https://react.dev/learn/escape-hatches) * [API Reference](https://react.dev/reference/react) * [Where to Get Support](https://react.dev/community) * [Contributing Guide](https://legacy.reactjs.org/docs/how-to-contribute.html) You can improve it by sending pull requests to [this repository](https://github.com/reactjs/react.dev). ## Examples We have several examples [on the website](https://react.dev/). Here is the first one to get you started: ```jsx import { createRoot } from 'react-dom/client'; function HelloMessage({ name }) { return <div>Hello {name}</div>; } const root = createRoot(document.getElementById('container')); root.render(<HelloMessage name="Taylor" />); ``` This example will render "Hello Taylor" into a container on the page. You'll notice that we used an HTML-like syntax; [we call it JSX](https://react.dev/learn#writing-markup-with-jsx). JSX is not required to use React, but it makes code more readable, and writing it feels like writing HTML. ## Contributing The main purpose of this repository is to continue evolving React core, making it faster and easier to use. Development of React happens in the open on GitHub, and we are grateful to the community for contributing bugfixes and improvements. Read below to learn how you can take part in improving React. ### [Code of Conduct](https://code.fb.com/codeofconduct) Facebook has adopted a Code of Conduct that we expect project participants to adhere to. Please read [the full text](https://code.fb.com/codeofconduct) so that you can understand what actions will and will not be tolerated. ### [Contributing Guide](https://legacy.reactjs.org/docs/how-to-contribute.html) Read our [contributing guide](https://legacy.reactjs.org/docs/how-to-contribute.html) to learn about our development process, how to propose bugfixes and improvements, and how to build and test your changes to React. ### [Good First Issues](https://github.com/facebook/react/labels/good%20first%20issue) To help you get your feet wet and get you familiar with our contribution process, we have a list of [good first issues](https://github.com/facebook/react/labels/good%20first%20issue) that contain bugs that have a relatively limited scope. This is a great place to get started. ### License React is [MIT licensed](./LICENSE). -------------------------------------------------------------------------------- Senior_full_stack_developer_OWAIS (to chat_manager): To design and implement a simple UI/GUI for users to submit tasks and monitor progress using React, you can follow these steps: 1. Install Node.js and npm (Node Package Manager) if you haven't already. You can download them from the official website: [Node.js](https://nodejs.org/en/). 2. Create a new directory for your project and navigate to it in the terminal. 3. Initialize a new React project using the `create-react-app` command-line tool. Run the following command: ```bash npx create-react-app task-manager ``` This will create a new directory called `task-manager` with a basic React project structure. 4. Navigate to the project directory: ```bash cd task-manager ``` 5. Open the project in your favorite code editor. 6. In the `src` directory, create a new file called `TaskForm.js`. This file will contain the form component for users to submit tasks. Add the following code to the file: ```jsx import React, { useState } from 'react'; const TaskForm = ({ onSubmit }) => { const [task, setTask] = useState(''); const handleSubmit = (e) => { e.preventDefault(); onSubmit(task); setTask(''); }; return ( <form onSubmit={handleSubmit}> <input type="text" value={task} onChange={(e) => setTask(e.target.value)} placeholder="Enter task" /> <button type="submit">Submit</button> </form> ); }; export default TaskForm; ``` 7. In the `src` directory, create a new file called `TaskList.js`. This file will contain the component to display the list of tasks and their progress. Add the following code to the file: ```jsx import React from 'react'; const TaskList = ({ tasks }) => { return ( <ul> {tasks.map((task, index) => ( <li key={index}>{task}</li> ))} </ul> ); }; export default TaskList; ``` 8. In the `src` directory, open the `App.js` file and replace its content with the following code: ```jsx import React, { useState } from 'react'; import TaskForm from './TaskForm'; import TaskList from './TaskList'; const App = () => { const [tasks, setTasks] = useState([]); const handleSubmit = (task) => { setTasks([...tasks, task]); }; return ( <div> <h1>Task Manager</h1> <TaskForm onSubmit={handleSubmit} /> <TaskList tasks={tasks} /> </div> ); }; export default App; ``` 9. Save all the files and go back to the terminal. 10. Start the development server by running the following command: ```bash npm start ``` This will start the React development server and open the app in your default browser. You should see the "Task Manager" title, a form to submit tasks, and an empty list. 11. You can now start submitting tasks using the form and see them appear in the list. That's it! You have successfully designed and implemented a simple UI/GUI for users to submit tasks and monitor progress using React. To execute the code in the console terminal, follow these steps: 1. Open your favorite code editor and create a new file called `index.js`. 2. Copy the following code into the `index.js` file: ```jsx import React from 'react'; import ReactDOM from 'react-dom'; import App from './App'; ReactDOM.render(<App />, document.getElementById('root')); ``` 3. Save the file. 4. Open the terminal and navigate to the directory where the `index.js` file is located. 5. Run the following command to install the required dependencies: ```bash npm install react react-dom ``` 6. Run the following command to execute the code: ```bash node index.js ``` You should see the output in the terminal, and if there are no errors, the React app will be rendered in the browser. That's it! You have successfully executed the React code in the console terminal. TERMINATE --------------------------------------------------------------------------------
In [7]:
def norag_chat():
_reset_agents()
groupchat = autogen.GroupChat(
agents=[boss, owais_coder, pm, reviewer], messages=[], max_round=12
)
manager = autogen.GroupChatManager(groupchat=groupchat, llm_config=llm_config)
# Start chatting with boss as this is the user proxy agent.
boss.initiate_chat(
manager,
message=PROBLEM,)
norag_chat()
Boss (to chat_manager): Design and implement a simple UI/Gui for users to submit tasks and monitor progress. Ideally you would build a simple React UI. Give me sample code and ways to execute it in console terminal -------------------------------------------------------------------------------- Senior_full_stack_developer_OWAIS (to chat_manager): Sure, I can help you with that. Here's a sample code for a simple React UI to submit tasks and monitor progress: ```jsx import React, { useState } from 'react'; const App = () => { const [tasks, setTasks] = useState([]); const [newTask, setNewTask] = useState(''); const handleTaskChange = (e) => { setNewTask(e.target.value); }; const handleTaskSubmit = (e) => { e.preventDefault(); setTasks([...tasks, newTask]); setNewTask(''); }; return ( <div> <h1>Task Manager</h1> <form onSubmit={handleTaskSubmit}> <input type="text" value={newTask} onChange={handleTaskChange} /> <button type="submit">Add Task</button> </form> <ul> {tasks.map((task, index) => ( <li key={index}>{task}</li> ))} </ul> </div> ); }; export default App; ``` To execute this code in the console terminal, you'll need to follow these steps: 1. Make sure you have Node.js installed on your machine. 2. Create a new directory for your project and navigate to it in the terminal. 3. Initialize a new React project by running the following command: ``` npx create-react-app task-manager ``` 4. Once the project is created, navigate to the project directory: ``` cd task-manager ``` 5. Replace the content of the `src/App.js` file with the sample code provided above. 6. Start the development server by running the following command: ``` npm start ``` 7. Open your browser and visit `http://localhost:3000` to see the UI in action. That's it! You now have a simple React UI for submitting tasks and monitoring progress. Feel free to customize the code and add more features as per your requirements. TERMINATE --------------------------------------------------------------------------------
In [ ]: