├── README.md
├── index.html
├── script.js
└── styles.css
/README.md:
--------------------------------------------------------------------------------
1 | # AutogenAppGenerator
2 | Generate app.py for Autogen using a simple UI
3 | You can try it out at https://pewekar.github.io/AutogenAppGenerator/
4 |
--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
9 |
10 |
11 | AutoGen Script Generator
12 |
13 |
14 |
62 |
63 |
64 | AutoGen Script Generator
65 |
66 |
70 |
71 |
77 |
78 |
79 |
80 |
81 |
82 |
83 |
84 |
85 |
86 |
87 |
88 |
95 |
96 |
97 |
98 |
Assistant Agent(s)
99 |
142 |
165 |
166 |
167 |
168 |
169 |
170 |
171 |
172 |
173 |
174 |
175 |
176 |
177 |
--------------------------------------------------------------------------------
/script.js:
--------------------------------------------------------------------------------
1 | //script.js
2 | let assistantCount = 1;
3 | let assistantAgentTypes = [];
4 | /*
5 | window.onload = function() {
6 | initializePage();
7 | };
8 | */
9 | function initializePage() {
10 | const useEnvVarCheckbox = document.getElementById("useEnvVar");
11 | const apiKeyGroup = document.getElementById("apiKeyGroup");
12 |
13 | // Uncheck the "Use Environment Variable" checkbox
14 | useEnvVarCheckbox.checked = true;
15 |
16 | // Show the API key box
17 | apiKeyGroup.style.display = "none";
18 | // Managing Agent Type dropdown selection
19 | document.getElementById("assistantAgentType_0").onchange = function () {
20 | assistantAgentTypes[0] = this.value;
21 | }
22 |
23 | // Managing RAG checkbox and URL input box visibility for User Proxy
24 | document.getElementById("userProxyRAG").onchange = function () {
25 | if (this.checked) {
26 | document.getElementById("userProxyURL").style.display = "block";
27 | } else {
28 | document.getElementById("userProxyURL").style.display = "none";
29 | }
30 | }
31 | }
32 |
33 | function removeAssistantAgent(id) {
34 | const assistantDiv = document.getElementById(id);
35 | if (assistantDiv) {
36 | assistantDiv.remove();
37 | }
38 | }
39 |
40 | function addAssistantAgent() {
41 | const newAssistantDiv = document.createElement('div');
42 | newAssistantDiv.className = 'input-group';
43 | newAssistantDiv.id = `assistant_${assistantCount}`;
44 |
45 | // Managing agent type dropdown selection
46 | let assistantAgentType = document.createElement('select');
47 | assistantAgentType.id = `assistantAgentType_${assistantCount}`;
48 | assistantAgentType.onchange = function () {
49 | assistantAgentTypes[assistantCount] = this.value;
50 | }
51 | // Populating the dropdown with options
52 | let option1 = document.createElement('option');
53 | option1.value = "Assistant";
54 | option1.text = "Assistant";
55 | option1.selected = true;
56 | assistantAgentType.add(option1);
57 |
58 | let option2 = document.createElement('option');
59 | option2.value = "RAG";
60 | option2.text = "RAG";
61 | assistantAgentType.add(option2);
62 |
63 | let option3 = document.createElement('option');
64 | option3.value = "Teachable";
65 | option3.text = "Teachable";
66 | assistantAgentType.add(option3);
67 | // Similar existing operations...
68 |
69 | const newAssistantLabel = document.createElement('label');
70 | newAssistantLabel.htmlFor = `assistantName_${assistantCount}`;
71 | newAssistantLabel.innerHTML = 'Assistant Agent Name:';
72 | newAssistantLabel.style.marginTop = "20px";
73 |
74 | const newAssistantInput = document.createElement('input');
75 | newAssistantInput.type = 'text';
76 | newAssistantInput.id = `assistantName_${assistantCount}`;
77 | newAssistantInput.className = 'padded-input';
78 | newAssistantInput.placeholder = 'Assistant Agent Name'; // Set the default value as a placeholder
79 | newAssistantInput.addEventListener('focus', function() {
80 | if (this.value === this.placeholder) {
81 | this.value = '';
82 | }
83 | });
84 |
85 | newAssistantDiv.appendChild(assistantAgentType);
86 | //newAssistantDiv.appendChild(newAssistantLabel);
87 | newAssistantDiv.appendChild(document.createElement('br'));
88 | newAssistantDiv.appendChild(newAssistantInput);
89 |
90 | const newSystemMessageLabel = document.createElement('label');
91 | newSystemMessageLabel.htmlFor = `systemMessage_${assistantCount}`;
92 | newSystemMessageLabel.innerHTML = 'System Message:';
93 |
94 | const newSystemMessageInput = document.createElement('input');
95 | newSystemMessageInput.type = 'text';
96 | newSystemMessageInput.id = `systemMessage_${assistantCount}`;
97 | newSystemMessageInput.placeholder = 'System Message';
98 |
99 | //newAssistantDiv.appendChild(newSystemMessageLabel);
100 | newAssistantDiv.appendChild(newSystemMessageInput);
101 |
102 |
103 | // Hide or display the 'System Message' box based on selected Assistant Agent Type
104 | assistantAgentType.onchange = function () {
105 | assistantAgentTypes[assistantCount] = this.value;
106 | if (this.value !== "Assistant") {
107 | newSystemMessageInput.style.display = 'none';
108 | } else {
109 | newSystemMessageInput.style.display = 'block';
110 | }
111 | }
112 |
113 | // new code
114 | const newAddButton = document.createElement('button'); // New code
115 | newAddButton.className = 'add-button'; // New code
116 | newAddButton.innerHTML = '+'; // New code
117 | newAddButton.onclick = addAssistantAgent; // New code
118 | newAssistantDiv.appendChild(newAddButton); // New code
119 |
120 | const newRemoveButton = document.createElement('button');
121 | newRemoveButton.className = 'remove-button';
122 | newRemoveButton.innerHTML = '-';
123 | newRemoveButton.onclick = () => removeAssistantAgent(newAssistantDiv.id);
124 | newAssistantDiv.appendChild(newRemoveButton);
125 | // new code ends
126 |
127 | document.getElementById('assistantAgents').appendChild(newAssistantDiv);
128 | assistantCount++;
129 | }
130 |
131 | function toggleAPIKeyBox() {
132 | const useEnvVar = document.getElementById("useEnvVar").checked;
133 | const apiKeyGroup = document.getElementById("apiKeyGroup");
134 | if (useEnvVar) {
135 | apiKeyGroup.style.display = "none";
136 | } else {
137 | apiKeyGroup.style.display = "block";
138 | }
139 | }
140 |
141 | function copyToClipboard() {
142 | const textarea = document.getElementById("generatedScript");
143 | textarea.select();
144 | document.execCommand("copy");
145 | }
146 |
147 | function generateScript() {
148 | const apiKey = document.getElementById("apiKey").value;
149 | const model = document.getElementById("model").value;
150 | const task = document.getElementById("task").value;
151 |
152 |
153 | var imports = [];
154 | var agentConfig = "";
155 | let script = `# AutoGen Script\n\n`;
156 | script += '# Import Section - Uncomment import lines as needed\n';
157 | script += '#import autogen\n';
158 | script += `from autogen import AssistantAgent, UserProxyAgent\n`;
159 | script += `#from autogen.agentchat.contrib.retrieve_assistant_agent import RetrieveAssistantAgent\n`;
160 | script += `#from autogen.agentchat.contrib.retrieve_user_proxy_agent import RetrieveUserProxyAgent\n`;
161 | script += `#from autogen.agentchat.contrib.teachable_agent import TeachableAgent\n`;
162 | script += `#from autogen.ChatCompletion import ChatCompletion\n`;
163 | script += `#import chromadb\n\n`;
164 | script += `# LLM Key\n`;
165 |
166 |
167 | if (apiKey) {
168 | script += `api_key = "${apiKey}"\n`;
169 | } else {
170 | script += `import os\n`;
171 | script += `api_key = os.environ.get("OPENAI_API_KEY")\n`;
172 | script += `\n\n`;
173 | }
174 | // Generate llm_config structure
175 | script += `# Configuration\n`;
176 | let llm_config = `llm_config={\n "request_timeout": 600,\n "seed": 42,\n "config_list": config_list,\n "temperature": 0\n}`;
177 | script += `config_list = [\n {\n 'model': '${model}',\n 'api_key': api_key\n }\n]\n\n`;
178 | script += llm_config + '\n';
179 | script += `\n\n`;
180 | script += `# Messaging\n`;
181 | script += "#ChatCompletion.start_logging()\n";
182 | script += "termination_msg = \"\"\"lambda x: isinstance(x, dict) and 'TERMINATE' == str(x.get('content', ''))[-9:].upper()\"\"\"\n";
183 | script += `\n\n`;
184 |
185 | script += `# Assistant Agents\n`;
186 | for (let i = 0; i < assistantCount; i++) {
187 | const assistantAgentTypes = document.getElementById(`assistantAgentType_${i}`).value;
188 | const assistantName = document.getElementById(`assistantName_${i}`).value || `assistant_${i}`;
189 | const systemMessage = document.getElementById(`systemMessage_${i}`).value;
190 |
191 | if (assistantAgentTypes[i] == "RAG") {
192 | // Your RAG script here
193 | script += `assistant_${i} = RetrieveAssistantAgent(name="${assistantName}", system_message=You are a helpful assistant."${systemMessage}", llm_config=llm_config)\n`;
194 | } else if (assistantAgentTypes[i] == "Teachable") {
195 | // Your Teachable script here
196 | script += `assistant_${i} = TeachableAgent(name="${assistantName}", system_message="${systemMessage}", llm_config=llm_config, teach_config={"verbosity": 0, "reset_db": True, "path_to_db_dir": "./teachable_agent_db", recall_threshold": 1.5})\n`;
197 | } else {
198 | // Default Assistant script here
199 | script += `assistant_${i} = AssistantAgent(name="${assistantName}", system_message="${systemMessage}", llm_config=llm_config)\n`;
200 | }
201 |
202 | }
203 |
204 | const useRAG = document.getElementById("userProxyRAG").checked;
205 | const userProxyName = document.getElementById("userProxyName").value || "userProxy";
206 | var userProxyURL = document.getElementById("userProxyURL").value;
207 | if (useRAG) {
208 | // If the Use RAG checkbox is selected, add specific RAG-related code here
209 | script += `\n# RAG User Proxy Agent\n`;
210 | script += `userProxy = RetrieveUserProxyAgent(\n`;
211 | script += `name="${userProxyName}",\n`;
212 | script += `#is_termination_msg=termination_msg,\n`;
213 | script += `system_message="Assistant who has extra content retrieval power for solving difficult problems.",\n`;
214 | script += `human_input_mode="TERMINATE",\n`;
215 | script += `max_consecutive_auto_reply=3,\n`;
216 | script += `retrieve_config={\n`;
217 | script += ` "task": "code",\n`;
218 | script += ` "docs_path": "${userProxyURL}",\n`;
219 | script += ` "chunk_token_size": 1000,\n`;
220 | script += ` "model": config_list[0]["model"],\n`;
221 | script += ` "client": chromadb.PersistentClient(path="/tmp/chromadb"),\n`;
222 | script += ` "collection_name": "groupchat",\n`;
223 | script += ` "get_or_create": True,\n`;
224 | script += `},\n`;
225 | script += `code_execution_config=False, # we don't want to execute code in this case.\n`;
226 | script += `)\n`;
227 | } else {
228 | // If the Use RAG checkbox is not selected, add the regular code here
229 |
230 | script += `\n# User Proxy Agent\n`;
231 | script += `userProxy = UserProxyAgent(name="${userProxyName}",\n`;
232 | script += `human_input_mode="NEVER",\n`;
233 | script += `max_consecutive_auto_reply=10,\n`;
234 | script += `#is_termination_msg=termination_msg,\n`;
235 | script += `code_execution_config={"work_dir": "web"},\n`;
236 | script += `llm_config=llm_config,\n`;
237 | script += `system_message=\"\"\"A human admin\"\"\")\n`;
238 | }
239 | /* script += `system_message=\"\"\"Reply TERMINATE if the task has been solved at full satisfaction.\n`;
240 | script += `Otherwise, reply CONTINUE, or the reason why the task is not solved yet.\"\"\"\n`;
241 | script += `)\n`;
242 | script += `userProxy.initiate_chat(assistant_0, message="${task}")\n`;*/
243 | // Check the number of Assistant Agents
244 | script += `\n`;
245 | script += `# Initiate Chat\n`;
246 | if (assistantCount === 1) {
247 | // If there's only one Assistant Agent
248 | script += `userProxy.initiate_chat(assistant_0, message="${task}", clear_history=True)\n`;
249 | } else {
250 | // If there's more than one Assistant Agent
251 | script += `# Create groupchat\n`;
252 | script += `groupchat = autogen.GroupChat(\n`;
253 | script += ` agents=[userProxy`;
254 |
255 | // Add the assistant agents to the groupchat
256 | for (let i = 0; i < assistantCount; i++) {
257 | script += `, assistant_${i}`;
258 | }
259 |
260 | script += `], messages=[])\n`;
261 | script += `manager = autogen.GroupChatManager(groupchat=groupchat, llm_config=llm_config)\n`;
262 |
263 | script += `\n# Start the conversation\n`;
264 | script += `userProxy.initiate_chat(\n`;
265 | script += ` manager, message="${task}")\n`;
266 | // ... rest of your existing code for handling multiple Assistant Agents ...
267 | }
268 | /*
269 | prompt = f"Here's a Python script. Please optimize it for readability and performance.\n\n{script}"
270 |
271 | response = openai.Completion.create(
272 | engine="text-davinci-002",
273 | prompt=prompt,
274 | max_tokens=200
275 | )
276 |
277 | optimized_script = response.choices[0].text.strip()
278 |
279 | script += `# Pass responses between multiple AssistantAgents\n`;
280 | for (let i = 0; i < assistantCount - 1; i++) {
281 | script += `response = userProxy.get_last_response(assistant_${i})\n`;
282 | script += `next_response = userProxy.send_message(assistant_${i + 1}, message=response['choices'][0]['message']['content'])\n`;
283 | }
284 | */
285 | document.getElementById("generatedScript").value = script;
286 | }
287 |
--------------------------------------------------------------------------------
/styles.css:
--------------------------------------------------------------------------------
1 | body {
2 | font-family: 'Roboto', sans-serif;
3 | background-color: #1f1f1f;
4 | color: #ffffff;
5 | padding: 4rem;
6 | }
7 |
8 | h1 {
9 | font-size: 2.5rem;
10 | margin-bottom: 2rem;
11 | text-align: center;
12 | }
13 |
14 | .input-group {
15 | margin-bottom: 2rem;
16 | display: flex;
17 | justify-content: space-between;
18 | align-items: flex-start; /* Adjusted to align with the top of widgets */
19 | }
20 |
21 | label {
22 | display: inline-block; /* Allows vertical alignment */
23 | vertical-align: middle; /* Centers vertically with the widget */
24 | margin-right: 1rem; /* Spacing between the label and its widget */
25 | font-weight: 500;
26 | }
27 |
28 | input[type="text"],
29 | textarea,
30 | select {
31 | width: 100%;
32 | padding: 0.8rem 1rem;
33 | border-radius: 4px;
34 | background: #333;
35 | border: 1px solid #555;
36 | color: #fff;
37 | font-size: 1rem;
38 | box-sizing: border-box;
39 | margin-right: 1rem; /* Spacing between the widget and the next element */
40 | }
41 |
42 | textarea.full-height {
43 | height: 200px;
44 | resize: vertical;
45 | margin: 1rem;
46 | }
47 |
48 | button {
49 | background: #6200ee;
50 | color: #ffffff;
51 | padding: 0.6rem 1.2rem;
52 | border: none;
53 | border-radius: 4px;
54 | cursor: pointer;
55 | transition: background 0.3s;
56 | }
57 |
58 | button:hover {
59 | background: #8e24aa;
60 | }
61 |
62 | .flex-container {
63 | display: flex;
64 | justify-content: space-between;
65 | align-items: flex-start; /* Adjusted to align with the top of widgets */
66 | margin-bottom: 1.5rem;
67 | }
68 |
69 | .agent-group {
70 | border: 1px solid #555;
71 | padding: 1rem;
72 | border-radius: 6px;
73 | margin-bottom: 1rem;
74 | }
75 |
76 | .add-button {
77 | margin: 1rem;
78 | }
79 |
80 | .input-group label {
81 | margin-right: 10px;
82 | }
83 |
84 | .padded-input {
85 | margin-bottom: 1rem;
86 | padding: 0.8rem 1rem;
87 | }
88 |
89 | .agent-group {
90 | border: 1px solid #1f1f1f;
91 | padding: 40px;
92 | margin-top: 20px;
93 | position: relative;
94 | }
95 |
96 | .group-title {
97 | position: absolute;
98 | top: -10px;
99 | left: 10px;
100 | background-color: #1f1f1f;
101 | padding: 0 10px;
102 | }
103 |
104 | .left-group, .right-group {
105 | display: flex;
106 | align-items: center;
107 | flex-grow: 1;
108 | }
109 |
110 | .newAssistantLabel {
111 | margin-top: 20px;
112 | }
113 |
114 | #assistantAgents select {
115 | background-color: #000; /* Black background color */
116 | color: #fff; /* White text color */
117 | border: 1px solid #888; /* Provides some contrast */
118 | appearance: none; /* Removes default styles */
119 | -webkit-appearance: none; /* For Safari */
120 | -moz-appearance: none; /* For Firefox */
121 | vertical-align: middle; /* Aligns with the adjacent elements */
122 | padding-right: 25px; /* Makes room for custom arrow */
123 | background-image:
124 | linear-gradient(45deg, transparent 50%, #fff 50%),
125 | linear-gradient(-45deg, transparent 50%, #fff 50%),
126 | linear-gradient(to right, #000, #000); /* Creates the custom white arrow */
127 | background-position:
128 | calc(100% - 15px) 50%, /* Position of downward arrow */
129 | calc(100% - 10px) 50%, /* Position of downward arrow */
130 | 100% 0; /* Position of underlying black color */
131 | background-size:
132 | 5px 5px, /* Size of arrow */
133 | 5px 5px, /* Size of arrow */
134 | 2.5em 2.5em; /* Size of background black color */
135 | background-repeat: no-repeat;
136 | }
137 |
138 |
139 | .input-group {
140 | display: flex;
141 | align-items: center; /* Aligns items vertically in the center */
142 | }
143 |
144 | .input-group input.padded-input {
145 | margin: 0 5px; /* Adds some spacing between the input fields */
146 | }
147 |
148 | .input-group .add-button, .remove-button{
149 | width: 24px; /* Sets a fixed width */
150 | height: 24px; /* Sets a fixed height */
151 | vertical-align: middle; /* Aligns with the adjacent elements */
152 | }
153 |
154 |
--------------------------------------------------------------------------------