final commit
This commit is contained in:
parent
92f7d8b4df
commit
0eadaecd4a
4 changed files with 145 additions and 143 deletions
|
|
@ -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.
|
||||
|
|
@ -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")
|
||||
|
|
@ -0,0 +1,4 @@
|
|||
agno
|
||||
langchain-openai
|
||||
browser-use
|
||||
streamlit
|
||||
|
|
@ -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))
|
||||
Loading…
Reference in a new issue