final commit

This commit is contained in:
Madhu 2025-02-16 01:25:49 +05:30
parent 92f7d8b4df
commit 0eadaecd4a
4 changed files with 145 additions and 143 deletions

View file

@ -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.

View file

@ -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")

View file

@ -0,0 +1,4 @@
agno
langchain-openai
browser-use
streamlit

View file

@ -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))