From 0eadaecd4ac880f732b04898505f75a37e158967 Mon Sep 17 00:00:00 2001 From: Madhu Date: Sun, 16 Feb 2025 01:25:49 +0530 Subject: [PATCH] final commit --- ai_agent_tutorials/ai_3dpygame_r1/README.md | 50 ++++++ .../ai_3dpygame_r1/ai_3dpygame_r1.py | 147 +++++++++++------- .../ai_3dpygame_r1/requirements.txt | 4 + ai_agent_tutorials/ai_3dpygame_r1/test.py | 87 ----------- 4 files changed, 145 insertions(+), 143 deletions(-) delete mode 100644 ai_agent_tutorials/ai_3dpygame_r1/test.py diff --git a/ai_agent_tutorials/ai_3dpygame_r1/README.md b/ai_agent_tutorials/ai_3dpygame_r1/README.md index e69de29..766b24a 100644 --- a/ai_agent_tutorials/ai_3dpygame_r1/README.md +++ b/ai_agent_tutorials/ai_3dpygame_r1/README.md @@ -0,0 +1,50 @@ +## 🎮 AI 3D PyGame Visualizer with R1 +This Project demonstrates R1's code capabilities with a PyGame code generator and visualizer with browser use. The system uses DeepSeek for reasoning, OpenAI for code extraction, and browser automation agents to visualize the code on Trinket.io. + +### Features + +- Generates PyGame code from natural language descriptions +- Uses DeepSeek Reasoner for code logic and explanation +- Extracts clean code using OpenAI GPT-4o +- Automates code visualization on Trinket.io using browser agents +- Provides a streamlined Streamlit interface +- Multi-agent system for handling different tasks (navigation, coding, execution, viewing) + +### How to get Started? + +1. Clone the GitHub repository +```bash +git clone https://github.com/Shubhamsaboo/awesome-llm-apps.git +cd awesome-llm-apps/ai_agent_tutorials/ai_3dpygame_r1 +``` + +2. Install the required dependencies: +```bash +pip install -r requirements.txt +``` + +3. Get your API Keys +- Sign up for [DeepSeek](https://platform.deepseek.com/) and obtain your API key +- Sign up for [OpenAI](https://platform.openai.com/) and obtain your API key + +4. Run the AI PyGame Visualizer +```bash +streamlit run ai_3dpygame_r1.py +``` + +5. Browser use automatically opens your web browser and navigate to the URL provided in the console output to interact with the PyGame generator. + +### How it works? + +1. **Query Processing:** User enters a natural language description of the desired PyGame visualization. +2. **Code Generation:** + - DeepSeek Reasoner analyzes the query and provides detailed reasoning with code + - OpenAI agent extracts clean, executable code from the reasoning +3. **Visualization:** + - Browser agents automate the process of running code on Trinket.io + - Multiple specialized agents handle different tasks: + - Navigation to Trinket.io + - Code input + - Execution + - Visualization viewing +4. **User Interface:** Streamlit provides an intuitive interface for entering queries, viewing code, and managing the visualization process. diff --git a/ai_agent_tutorials/ai_3dpygame_r1/ai_3dpygame_r1.py b/ai_agent_tutorials/ai_3dpygame_r1/ai_3dpygame_r1.py index eb93c85..385a5d4 100644 --- a/ai_agent_tutorials/ai_3dpygame_r1/ai_3dpygame_r1.py +++ b/ai_agent_tutorials/ai_3dpygame_r1/ai_3dpygame_r1.py @@ -1,10 +1,10 @@ import streamlit as st from openai import OpenAI -from phi.agent import Agent as PhiAgent -from phi.model.anthropic import Claude +from agno.agent import Agent as AgnoAgent +from agno.models.openai import OpenAIChat as AgnoOpenAIChat +from langchain_openai import ChatOpenAI import asyncio -from browser_use import Agent as BrowserAgent, SystemPrompt -from langchain_anthropic import ChatAnthropic +from browser_use import Browser st.set_page_config(page_title="PyGame Code Generator", layout="wide") @@ -12,7 +12,7 @@ st.set_page_config(page_title="PyGame Code Generator", layout="wide") if "api_keys" not in st.session_state: st.session_state.api_keys = { "deepseek": "", - "claude": "" + "openai": "" } # Streamlit sidebar for API keys @@ -23,11 +23,23 @@ with st.sidebar: type="password", value=st.session_state.api_keys["deepseek"] ) - st.session_state.api_keys["claude"] = st.text_input( - "Claude API Key", + st.session_state.api_keys["openai"] = st.text_input( + "OpenAI API Key", type="password", - value=st.session_state.api_keys["claude"] + value=st.session_state.api_keys["openai"] ) + + st.markdown("---") + st.info(""" + 📝 How to use: + 1. Enter your API keys above + 2. Write your PyGame visualization query + 3. Click 'Generate Code' to get the code + 4. Click 'Generate Visualization' to: + - Open Trinket.io PyGame editor + - Copy and paste the generated code + - Watch it run automatically + """) # Main UI st.title("AI 3D Visualizer with R1") @@ -37,10 +49,14 @@ query = st.text_area( height=70, placeholder=f"e.g.: {example_query}" ) -generate_btn = st.button("Generate Code and Visualisation") -if generate_btn and query: - if not st.session_state.api_keys["deepseek"] or not st.session_state.api_keys["claude"]: +# Split the buttons into columns +col1, col2 = st.columns(2) +generate_code_btn = col1.button("Generate Code") +generate_vis_btn = col2.button("Generate Visualization") + +if generate_code_btn and query: + if not st.session_state.api_keys["deepseek"] or not st.session_state.api_keys["openai"]: st.error("Please provide both API keys in the sidebar") st.stop() @@ -72,10 +88,10 @@ if generate_btn and query: st.write(reasoning_content) # Initialize Claude agent (using PhiAgent) - claude_agent = PhiAgent( - model=Claude( - id="claude-3-5-sonnet-20241022", - api_key=st.session_state.api_keys["claude"] + openai_agent = AgnoAgent( + model=AgnoOpenAIChat( + id="gpt-4o", + api_key=st.session_state.api_keys["openai"] ), show_tool_calls=True, markdown=True @@ -87,52 +103,71 @@ if generate_btn and query: {reasoning_content}""" with st.spinner("Extracting code..."): - code_response = claude_agent.run(extraction_prompt) + code_response = openai_agent.run(extraction_prompt) extracted_code = code_response.content - with st.expander("Generated PyGame Code"): + # Store the generated code in session state + st.session_state.generated_code = extracted_code + + # Display the code + with st.expander("Generated PyGame Code", expanded=True): st.code(extracted_code, language="python") - - # Initialize browser agent for Trinket interaction - async def run_pygame_on_trinket(code: str) -> None: - task_description = ( - "You are a Trinket.io PyGame expert. Follow these steps precisely:\n" - "1. Navigate to https://trinket.io/features/pygame\n" - "2. In the main.py file, clear any existing code in the editor\n" - "3. Paste this code into the editor:\n{0}\n" - "4. Click the Run button on the right to execute the code\n" - "5. Wait for the pygame visualisation to appear, once it does, view it for 10 seconds and then Quit the pygame window\n" - ).format(code) - - browser_agent = BrowserAgent( - task=task_description, - llm=ChatAnthropic( - model="claude-3-5-sonnet-20240620", - api_key=st.session_state.api_keys["claude"] - ), - max_actions_per_step=5, - max_failures=3 - ) - - with st.spinner("Running code on Trinket..."): - try: - result = await browser_agent.run() - if result and hasattr(result, 'final_response'): - share_url = result.final_response - st.success("Code is running on Trinket!") - st.write("You can view the visualization here:") - st.write(share_url) - else: - st.error("Failed to get a sharing URL from Trinket") - except Exception as e: - st.error(f"Error running code on Trinket: {str(e)}") - st.info("You can still copy the code above and run it manually on Trinket") - - # Run the async function - asyncio.run(run_pygame_on_trinket(extracted_code)) + + st.success("Code generated successfully! Click 'Generate Visualization' to run it.") except Exception as e: st.error(f"An error occurred: {str(e)}") -elif generate_btn and not query: +elif generate_vis_btn: + if "generated_code" not in st.session_state: + st.warning("Please generate code first before visualization") + else: + async def run_pygame_on_trinket(code: str) -> None: + browser = Browser() + from browser_use import Agent + async with await browser.new_context() as context: + model = ChatOpenAI( + model="gpt-4o", + api_key=st.session_state.api_keys["openai"] + ) + + agent1 = Agent( + task='Go to https://trinket.io/features/pygame, thats your only job.', + llm=model, + browser_context=context, + ) + + executor = Agent( + task='Executor. Execute the code written by the User by clicking on the run button on the right. ', + llm=model, + browser_context=context + ) + + coder = Agent( + task='Coder. Your job is to wait for the user for 10 seconds to write the code in the code editor.', + llm=model, + browser_context=context + ) + + viewer = Agent( + task='Viewer. Your job is to just view the pygame window for 10 seconds.', + llm=model, + browser_context=context, + ) + + with st.spinner("Running code on Trinket..."): + try: + await agent1.run() + await coder.run() + await executor.run() + await viewer.run() + st.success("Code is running on Trinket!") + except Exception as e: + st.error(f"Error running code on Trinket: {str(e)}") + st.info("You can still copy the code above and run it manually on Trinket") + + # Run the async function with the stored code + asyncio.run(run_pygame_on_trinket(st.session_state.generated_code)) + +elif generate_code_btn and not query: st.warning("Please enter a query before generating code") \ No newline at end of file diff --git a/ai_agent_tutorials/ai_3dpygame_r1/requirements.txt b/ai_agent_tutorials/ai_3dpygame_r1/requirements.txt index e69de29..fe7ed8a 100644 --- a/ai_agent_tutorials/ai_3dpygame_r1/requirements.txt +++ b/ai_agent_tutorials/ai_3dpygame_r1/requirements.txt @@ -0,0 +1,4 @@ +agno +langchain-openai +browser-use +streamlit \ No newline at end of file diff --git a/ai_agent_tutorials/ai_3dpygame_r1/test.py b/ai_agent_tutorials/ai_3dpygame_r1/test.py deleted file mode 100644 index 9db9b5a..0000000 --- a/ai_agent_tutorials/ai_3dpygame_r1/test.py +++ /dev/null @@ -1,87 +0,0 @@ -extracted_code = """import pygame -import random - -pygame.init() - -screen_width = 800 -screen_height = 600 -screen = pygame.display.set_mode((screen_width, screen_height)) -pygame.display.set_caption("Bouncing Rectangle") - -clock = pygame.time.Clock() - -# Rectangle properties -rect_width = 50 -rect_height = 30 -x = screen_width // 2 - rect_width // 2 -y = screen_height // 2 - rect_height // 2 -dx = 5 -dy = 5 - -colors = [(255, 0, 0), (0, 255, 0), (0, 0, 255), (255, 255, 0), (0, 255, 255), (255, 0, 255)] -current_color = random.choice(colors) - -running = True -while running: - for event in pygame.event.get(): - if event.type == pygame.QUIT: - running = False - - # Update position - x += dx - y += dy - - # Check collisions and change direction/color - if x <= 0 or x + rect_width >= screen_width: - dx = -dx - current_color = random.choice(colors) - if y <= 0 or y + rect_height >= screen_height: - dy = -dy - current_color = random.choice(colors) - - # Fill the screen with a background color - screen.fill((0, 0, 0)) - - # Draw the rectangle - pygame.draw.rect(screen, current_color, (x, y, rect_width, rect_height)) - - pygame.display.flip() - clock.tick(60) - -pygame.quit()""" - -import asyncio -from browser_use import Agent as BrowserAgent, SystemPrompt -from langchain_anthropic import ChatAnthropic -from langchain_openai import ChatOpenAI -import os -from dotenv import load_dotenv - -load_dotenv() - - -async def run_pygame_on_trinket(code: str) -> None: - task_description = ( - "You are a Trinket.io PyGame expert. Follow these steps precisely:\n" - "1. Navigate to https://trinket.io/features/pygame\n" - "2. In the main.py file, clear and delete the existing code. If you dont know how to do it, copy the whole code by command + A and delete it.\n" - "3. Paste this code into the editor:\n{0} by control\n" - "4. Click the Run button on the right to execute the code\n" - "5. Wait for the pygame visualisation to appear, once it does, view it for 10 seconds and then Quit the pygame window\n" - "6. If you have any issues, try to fix them by yourself. If you cannot fix them, ask the user for help.\n" - ).format(code) - - browser_agent = BrowserAgent( - task=task_description, - llm=ChatOpenAI( - model="gpt-4o", - api_key=os.getenv("OPENAI_API_KEY") - ), - max_actions_per_step=10, - max_failures=25 - ) - - result = await browser_agent.run() - -# Run the async function -asyncio.run(run_pygame_on_trinket(extracted_code)) \ No newline at end of file