diff --git a/.gitignore b/.gitignore new file mode 100644 index 0000000..8b13789 --- /dev/null +++ b/.gitignore @@ -0,0 +1 @@ + diff --git a/ai_agent_tutorials/ai_3dpygame_r1/README.md b/ai_agent_tutorials/ai_3dpygame_r1/README.md new file mode 100644 index 0000000..766b24a --- /dev/null +++ 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 new file mode 100644 index 0000000..385a5d4 --- /dev/null +++ b/ai_agent_tutorials/ai_3dpygame_r1/ai_3dpygame_r1.py @@ -0,0 +1,173 @@ +import streamlit as st +from openai import OpenAI +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 Browser + +st.set_page_config(page_title="PyGame Code Generator", layout="wide") + +# Initialize session state +if "api_keys" not in st.session_state: + st.session_state.api_keys = { + "deepseek": "", + "openai": "" + } + +# Streamlit sidebar for API keys +with st.sidebar: + st.title("API Keys Configuration") + st.session_state.api_keys["deepseek"] = st.text_input( + "DeepSeek API Key", + type="password", + value=st.session_state.api_keys["deepseek"] + ) + st.session_state.api_keys["openai"] = st.text_input( + "OpenAI API Key", + type="password", + 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") +example_query = "Create a particle system simulation where 100 particles emit from the mouse position and respond to keyboard-controlled wind forces" +query = st.text_area( + "Enter your PyGame query:", + height=70, + placeholder=f"e.g.: {example_query}" +) + +# 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() + + # Initialize Deepseek client + deepseek_client = OpenAI( + api_key=st.session_state.api_keys["deepseek"], + base_url="https://api.deepseek.com" + ) + + system_prompt = """You are a Pygame and Python Expert that specializes in making games and visualisation through pygame and python programming. + During your reasoning and thinking, include clear, concise, and well-formatted Python code in your reasoning. + Always include explanations for the code you provide.""" + + try: + # Get reasoning from Deepseek + with st.spinner("Generating solution..."): + deepseek_response = deepseek_client.chat.completions.create( + model="deepseek-reasoner", + messages=[ + {"role": "system", "content": system_prompt}, + {"role": "user", "content": query} + ], + max_tokens=1 + ) + + reasoning_content = deepseek_response.choices[0].message.reasoning_content + print("\nDeepseek Reasoning:\n", reasoning_content) + with st.expander("R1's Reasoning"): + st.write(reasoning_content) + + # Initialize Claude agent (using PhiAgent) + openai_agent = AgnoAgent( + model=AgnoOpenAIChat( + id="gpt-4o", + api_key=st.session_state.api_keys["openai"] + ), + show_tool_calls=True, + markdown=True + ) + + # Extract code + extraction_prompt = f"""Extract ONLY the Python code from the following content which is reasoning of a particular query to make a pygame script. + Return nothing but the raw code without any explanations, or markdown backticks: + {reasoning_content}""" + + with st.spinner("Extracting code..."): + code_response = openai_agent.run(extraction_prompt) + extracted_code = code_response.content + + # 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") + + 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_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 new file mode 100644 index 0000000..fe7ed8a --- /dev/null +++ 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