From f41a9761fa62c2e0b5e9a8d4fce366035954f0c4 Mon Sep 17 00:00:00 2001 From: Kye Date: Sat, 2 Dec 2023 20:22:33 -0800 Subject: [PATCH] [DEMO][Software GPT] --- flow_state.json | 15 +++ playground/demos/education/education.py | 40 ++++++-- playground/demos/grupa/app.py | 123 +++++++++++++++++++----- swarms/prompts/education.py | 1 - 4 files changed, 143 insertions(+), 36 deletions(-) create mode 100644 flow_state.json diff --git a/flow_state.json b/flow_state.json new file mode 100644 index 00000000..f8a05b5c --- /dev/null +++ b/flow_state.json @@ -0,0 +1,15 @@ +{ + "memory": [ + [ + "Human:: Document the following code: In order to implement the signup system in TypeScript using Supabase based on the provided algorithmic pseudocode and codebase, we need to follow these steps:\n\n1. Import necessary modules and dependencies.\n2. Implement the `useEffect` hook to check if a user is already authenticated when the `MainPanel` component renders.\n3. Define a function `handleFormSubmit` to handle form submission.\n4. Implement the form for user signup in the `UpperPanel` component.\n5. Implement the `LowerPanel` component which will display a message or instructions based on `promptInstruction` state.\n\nLet's start by importing the necessary modules and dependencies. \n\n```typescript\nimport React, { useState, useEffect } from 'react';\nimport { Auth } from '@supabase/ui';\nimport { supabase } from './supabaseClient';\nimport UpperPanel from './UpperPanel';\nimport LowerPanel from './LowerPanel';\n```\n\nNext, we'll add the `useEffect` hook inside the `MainPanel` component to check if a user is already authenticated when the component renders. If a user is found, we'll update the `user` state with the returned user.\n\n```typescript\nconst MainPanel = () => {\n const [user, setUser] = useState(null);\n const [promptInstructionForLowerPanel, setPromptInstructionForLowerPanel] = useState(''); \n const [formData, setFormData] = useState('');\n const [isLoading, setIsLoading] = useState(false); \n\n useEffect(() => {\n const user = supabase.auth.user();\n if (user) {\n setUser(user);\n }\n }, []);\n\n return (\n
\n \n \n
\n );\n};\n```\n\nNow, let's define a function `handleFormSubmit` to handle form submission. This function will be passed as a prop to the `UpperPanel` component.\n\n```typescript\nconst handleFormSubmit = async (event) => {\n event.preventDefault();\n setIsLoading(true);\n const { user, error } = await supabase.auth.signUp(formData);\n if (error) {\n setPromptInstructionForLowerPanel(error.message);\n } else {\n setUser(user);\n }\n setIsLoading(false);\n};\n```\n\nWe'll continue with the next steps in the following code blocks.", + "AI: # TypeScript Signup System with Supabase\n\nThis documentation provides a comprehensive guide and explanation of the TypeScript signup system using Supabase. The system consists of several components including MainPanel, UpperPanel, and LowerPanel, as well as the use of the Supabase client for authentication. \n\n## Overview\n\nThe signup system is designed to authenticate users using Supabase, a modern and open-source backend service. The system is built with TypeScript and React, utilizing React's useState and useEffect hooks for state management and side effects respectively.\n\nThe system is divided into three main components:\n\n- `MainPanel`: This is the parent component that holds the state for the user, prompt instructions, form data, and loading status. It also contains the useEffect hook to check if a user is already authenticated when the component renders.\n- `UpperPanel`: This component contains the form for user signup.\n- `LowerPanel`: This component displays a message or instructions based on the `promptInstruction` state.\n\n## Importing Modules and Dependencies\n\nThe first step is to import the necessary modules and dependencies. We import React, useState, and useEffect from the 'react' library. We also import Auth from '@supabase/ui', the UI library for Supabase, and our initialized Supabase client from './supabaseClient'. Finally, we import our UpperPanel and LowerPanel components.\n\n```typescript\nimport React, { useState, useEffect } from 'react';\nimport { Auth } from '@supabase/ui';\nimport { supabase } from './supabaseClient';\nimport UpperPanel from './UpperPanel';\nimport LowerPanel from './LowerPanel';\n```\n\n## The MainPanel Component\n\nThe `MainPanel` component is the parent component that holds the state for the user, prompt instructions, form data, and loading status. It also contains the useEffect hook to check if a user is already authenticated when the component renders.\n\n```typescript\nconst MainPanel = () => {\n const [user, setUser] = useState(null);\n const [promptInstructionForLowerPanel, setPromptInstructionForLowerPanel] = useState(''); \n const [formData, setFormData] = useState('');\n const [isLoading, setIsLoading] = useState(false); \n\n useEffect(() => {\n const user = supabase.auth.user();\n if (user) {\n setUser(user);\n }\n }, []);\n\n return (\n
\n \n \n
\n );\n};\n```\n\nIn the `MainPanel` component, we define four pieces of state:\n\n- `user`: This is initially set to null and will hold the authenticated user, if one exists.\n- `promptInstructionForLowerPanel`: This holds the instructions or messages to be displayed in the `LowerPanel` component.\n- `formData`: This is initially an empty string and will hold the form data from the signup form.\n- `isLoading`: This is initially set to false and will be used to manage the loading state of the form.\n\nThe useEffect hook checks if a user is already authenticated when the component renders. If a user is found, the `user` state is updated with the returned user.\n\n## The handleFormSubmit Function\n\nNext, we define a function `handleFormSubmit` to handle form submission. This function will be passed as a prop to the `UpperPanel` component.\n\n```typescript\nconst handleFormSubmit = async (event) => {\n event.preventDefault();\n setIsLoading(true);\n const { user, error } = await supabase.auth.signUp(formData);\n if (error) {\n setPromptInstructionForLowerPanel(error.message);\n } else {\n setUser(user);\n }\n setIsLoading(false);\n};\n```\n\nIn the `handleFormSubmit` function, we first prevent the default form submission behavior with `event.preventDefault()`. We then set `isLoading` to true to indicate that the form is being submitted. \n\nWe then call `supabase.auth.signUp` with the `formData` as an argument. This function returns a promise that resolves to an object containing the user and any error that might have occurred during the signup process.\n\nIf an error occurs during the signup process, we update `promptInstructionForLowerPanel` with the error message. If the signup is successful, we update the `user` state with the returned user. Finally, we set `isLoading` to false to indicate that the form submission has completed.\n\n## Next Steps\n\nThe implementation of the `UpperPanel` and `LowerPanel` components will be covered in the following sections. The `UpperPanel` component will contain the form for user signup, while the `LowerPanel` component will display a message or instructions based on the `promptInstructionForLowerPanel` state.", + "# TypeScript Signup System with Supabase\n\nThis documentation provides a comprehensive guide and explanation of the TypeScript signup system using Supabase. The system consists of several components including MainPanel, UpperPanel, and LowerPanel, as well as the use of the Supabase client for authentication. \n\n## Overview\n\nThe signup system is designed to authenticate users using Supabase, a modern and open-source backend service. The system is built with TypeScript and React, utilizing React's useState and useEffect hooks for state management and side effects respectively.\n\nThe system is divided into three main components:\n\n- `MainPanel`: This is the parent component that holds the state for the user, prompt instructions, form data, and loading status. It also contains the useEffect hook to check if a user is already authenticated when the component renders.\n- `UpperPanel`: This component contains the form for user signup.\n- `LowerPanel`: This component displays a message or instructions based on the `promptInstruction` state.\n\n## Importing Modules and Dependencies\n\nThe first step is to import the necessary modules and dependencies. We import React, useState, and useEffect from the 'react' library. We also import Auth from '@supabase/ui', the UI library for Supabase, and our initialized Supabase client from './supabaseClient'. Finally, we import our UpperPanel and LowerPanel components.\n\n```typescript\nimport React, { useState, useEffect } from 'react';\nimport { Auth } from '@supabase/ui';\nimport { supabase } from './supabaseClient';\nimport UpperPanel from './UpperPanel';\nimport LowerPanel from './LowerPanel';\n```\n\n## The MainPanel Component\n\nThe `MainPanel` component is the parent component that holds the state for the user, prompt instructions, form data, and loading status. It also contains the useEffect hook to check if a user is already authenticated when the component renders.\n\n```typescript\nconst MainPanel = () => {\n const [user, setUser] = useState(null);\n const [promptInstructionForLowerPanel, setPromptInstructionForLowerPanel] = useState(''); \n const [formData, setFormData] = useState('');\n const [isLoading, setIsLoading] = useState(false); \n\n useEffect(() => {\n const user = supabase.auth.user();\n if (user) {\n setUser(user);\n }\n }, []);\n\n return (\n
\n \n \n
\n );\n};\n```\n\nIn the `MainPanel` component, we define four pieces of state:\n\n- `user`: This is initially set to null and will hold the authenticated user, if one exists.\n- `promptInstructionForLowerPanel`: This holds the instructions or messages to be displayed in the `LowerPanel` component.\n- `formData`: This is initially an empty string and will hold the form data from the signup form.\n- `isLoading`: This is initially set to false and will be used to manage the loading state of the form.\n\nThe useEffect hook checks if a user is already authenticated when the component renders. If a user is found, the `user` state is updated with the returned user.\n\n## The handleFormSubmit Function\n\nNext, we define a function `handleFormSubmit` to handle form submission. This function will be passed as a prop to the `UpperPanel` component.\n\n```typescript\nconst handleFormSubmit = async (event) => {\n event.preventDefault();\n setIsLoading(true);\n const { user, error } = await supabase.auth.signUp(formData);\n if (error) {\n setPromptInstructionForLowerPanel(error.message);\n } else {\n setUser(user);\n }\n setIsLoading(false);\n};\n```\n\nIn the `handleFormSubmit` function, we first prevent the default form submission behavior with `event.preventDefault()`. We then set `isLoading` to true to indicate that the form is being submitted. \n\nWe then call `supabase.auth.signUp` with the `formData` as an argument. This function returns a promise that resolves to an object containing the user and any error that might have occurred during the signup process.\n\nIf an error occurs during the signup process, we update `promptInstructionForLowerPanel` with the error message. If the signup is successful, we update the `user` state with the returned user. Finally, we set `isLoading` to false to indicate that the form submission has completed.\n\n## Next Steps\n\nThe implementation of the `UpperPanel` and `LowerPanel` components will be covered in the following sections. The `UpperPanel` component will contain the form for user signup, while the `LowerPanel` component will display a message or instructions based on the `promptInstructionForLowerPanel` state." + ] + ], + "loop_interval": 1, + "retry_attempts": 3, + "retry_interval": 1, + "interactive": false, + "dashboard": false, + "dynamic_temperature": false +} \ No newline at end of file diff --git a/playground/demos/education/education.py b/playground/demos/education/education.py index 5b9d9df7..77f16f1b 100644 --- a/playground/demos/education/education.py +++ b/playground/demos/education/education.py @@ -11,7 +11,9 @@ api_key = os.getenv("OPENAI_API_KEY") stability_api_key = os.getenv("STABILITY_API_KEY") # Initialize language model -llm = OpenAIChat(openai_api_key=api_key, temperature=0.5, max_tokens=3000) +llm = OpenAIChat( + openai_api_key=api_key, temperature=0.5, max_tokens=3000 +) # Initialize Stable Diffusion sd_api = StableDiffusion(api_key=stability_api_key) @@ -20,18 +22,28 @@ sd_api = StableDiffusion(api_key=stability_api_key) user_preferences = { "subjects": "Cognitive Architectures", "learning_style": "Visual", - "challenge_level": "Moderate" + "challenge_level": "Moderate", } # Formatted prompts from user preferences -curriculum_prompt = edu_prompts.CURRICULUM_DESIGN_PROMPT.format(**user_preferences) -interactive_prompt = edu_prompts.INTERACTIVE_LEARNING_PROMPT.format(**user_preferences) -sample_prompt = edu_prompts.SAMPLE_TEST_PROMPT.format(**user_preferences) -image_prompt = edu_prompts.IMAGE_GENERATION_PROMPT.format(**user_preferences) +curriculum_prompt = edu_prompts.CURRICULUM_DESIGN_PROMPT.format( + **user_preferences +) +interactive_prompt = edu_prompts.INTERACTIVE_LEARNING_PROMPT.format( + **user_preferences +) +sample_prompt = edu_prompts.SAMPLE_TEST_PROMPT.format( + **user_preferences +) +image_prompt = edu_prompts.IMAGE_GENERATION_PROMPT.format( + **user_preferences +) # Initialize agents for different educational tasks curriculum_agent = Agent(llm=llm, max_loops=1, sop=curriculum_prompt) -interactive_learning_agent = Agent(llm=llm, max_loops=1, sop=interactive_prompt) +interactive_learning_agent = Agent( + llm=llm, max_loops=1, sop=interactive_prompt +) sample_lesson_agent = Agent(llm=llm, max_loops=1, sop=sample_prompt) # Create Sequential Workflow @@ -39,7 +51,9 @@ workflow = SequentialWorkflow(max_loops=1) # Add tasks to workflow with personalized prompts workflow.add(curriculum_agent, "Generate a curriculum") -workflow.add(interactive_learning_agent, "Generate an interactive lesson") +workflow.add( + interactive_learning_agent, "Generate an interactive lesson" +) workflow.add(sample_lesson_agent, "Generate a practice test") # Execute the workflow for text-based tasks @@ -50,7 +64,13 @@ image_result = sd_api.run(image_prompt) # Output results for each task for task in workflow.tasks: - print(f"Task Description: {task.description}\nResult: {task.result}\n") + print( + f"Task Description: {task.description}\nResult:" + f" {task.result}\n" + ) # Output image result -print(f"Image Generation Task: Generate an image for the interactive lesson\nResult: {image_result}") +print( + "Image Generation Task: Generate an image for the interactive" + f" lesson\nResult: {image_result}" +) diff --git a/playground/demos/grupa/app.py b/playground/demos/grupa/app.py index 5f09999b..c1760b7b 100644 --- a/playground/demos/grupa/app.py +++ b/playground/demos/grupa/app.py @@ -1,22 +1,47 @@ import os from dotenv import load_dotenv -from fastapi import FastAPI -from pydantic import BaseModel from swarms.models import OpenAIChat from swarms.prompts.code_interpreter import CODE_INTERPRETER from swarms.structs import Agent +from swarms.prompts.programming import TEST_SOP, DOCUMENTATION_SOP +from termcolor import colored + +load_dotenv() -class AgentInput(BaseModel): - feature: str - codebase: str +FEATURE = ( + "Implement an all-new signup system in typescript using supabase" +) +CODEBASE = """ -app = FastAPI() -load_dotenv() +import React, { useState } from 'react'; +import UpperPanel from './UpperPanel'; +import LowerPanel from './LowerPanel'; + +const MainPanel = () => { + const [promptInstructionForLowerPanel, setPromptInstructionForLowerPanel] = useState(''); + const [formData, setFormData] = useState(''); + const [isLoading, setIsLoading] = useState(false); + + return ( +
+ + +
+ ); +}; + +export default MainPanel; + + +""" # Load the environment variables api_key = os.getenv("OPENAI_API_KEY") @@ -44,10 +69,18 @@ feature_implementer_backend = Agent( llm=llm, max_loops=1, sop=CODE_INTERPRETER, autosave=True ) +# Create another agent for a different task +tester_agent = Agent( + llm=llm, max_loops=1, sop=TEST_SOP, autosave=True +) -# ##################### FastAPI ##################### +# Create another agent for a different task +documenting_agent = Agent( + llm=llm, max_loops=1, sop=DOCUMENTATION_SOP, autosave=True +) +# Product Agent prompt def feature_codebase_product_agentprompt( feature: str, codebase: str ) -> str: @@ -58,21 +91,61 @@ def feature_codebase_product_agentprompt( return prompt -# @app.post("/agent/") -# async def run_feature_implementer_frontend(item: AgentInput): -# agent1_out = feature_implementer_frontend.run( -# f"Create the backend code for {item.feature} in markdown" -# " based off of this algorithmic pseudocode:" -# f" {product_manager_agent.run(feature_codebase_product_agentprompt(item.feature, item.codebase))} write" -# f" the logic based on the following codebase: {item.codebase}" -# ) -# return {"output": agent1_out} - -def software_gpt(feature: str, codebase: str) -> str: - agent1_out = feature_implementer_frontend.run( - f"Create the backend code for {feature} in markdown" - " based off of this algorithmic pseudocode:" - f" {product_manager_agent.run(feature_codebase_product_agentprompt(feature, codebase))} write" - f" the logic based on the following codebase: {codebase}" +# Product Manager Agent +product_manager_out = product_manager_agent.run( + feature_codebase_product_agentprompt(FEATURE, CODEBASE) +) +print( + colored( + ( + "---------------------------- Product Manager Plan:" + f" {product_manager_out}" + ), + "cyan", + ) +) + +# Feature Implementer Agent +agent1_out = feature_implementer_frontend.run( + f"Create the backend code for {FEATURE} in markdown based off of" + f" this algorithmic pseudocode: {product_manager_out} the logic" + f" based on the following codebase: {CODEBASE}" +) +print( + colored( + ( + "--------------------- Feature Implementer Code logic:" + f" {agent1_out}" + ), + "cyan", + ) +) + +# Tester agent +tester_agent_out = tester_agent.run( + f"Create tests for the following code: {agent1_out}" +) +print( + colored( + ( + "---------------------------- Tests for the logic:" + f" {tester_agent_out}" + ), + "green", ) - print(agent1_out) \ No newline at end of file +) + + +# Documentation Agent +documenter_agent_out = documenting_agent.run( + f"Document the following code: {agent1_out}" +) +print( + colored( + ( + "---------------------------- Documentation for the" + f" logic: {documenter_agent_out}" + ), + "yellow", + ) +) diff --git a/swarms/prompts/education.py b/swarms/prompts/education.py index 0e7742d9..1963128d 100644 --- a/swarms/prompts/education.py +++ b/swarms/prompts/education.py @@ -32,4 +32,3 @@ IMAGE_GENERATION_PROMPT = f""" Develop a stable diffusion prompt for an educational image/visual aid that align with the {subjects} curriculum, specifically designed to enhance understanding for students with a {learning_style} learning style. This might include diagrams, infographics, and illustrative representations to simplify complex concepts. Ensure you output a 10/10 descriptive image generation prompt only. """ -