Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>AI Agent Code Arena</title> | |
| <!-- Import Phosphor Icons --> | |
| <script src="https://unpkg.com/@phosphor-icons/web"></script> | |
| <!-- Import Highlight.js for syntax highlighting --> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/styles/atom-one-dark.min.css"> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/highlight.min.js"></script> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/languages/javascript.min.js"></script> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/languages/python.min.js"></script> | |
| <style> | |
| :root { | |
| /* Color Palette */ | |
| --bg-body: #0f1115; | |
| --bg-panel: #161b22; | |
| --bg-input: #0d1117; | |
| --border-color: #30363d; | |
| --primary: #58a6ff; | |
| --primary-hover: #79c0ff; | |
| --accent-green: #238636; | |
| --accent-purple: #8957e5; | |
| --accent-orange: #d29922; | |
| --text-main: #c9d1d9; | |
| --text-muted: #8b949e; | |
| --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.5); | |
| /* Typography */ | |
| --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; | |
| --font-mono: 'JetBrains Mono', 'Fira Code', Consolas, monospace; | |
| } | |
| * { | |
| box-sizing: border-box; | |
| margin: 0; | |
| padding: 0; | |
| } | |
| body { | |
| background-color: var(--bg-body); | |
| color: var(--text-main); | |
| font-family: var(--font-sans); | |
| height: 100vh; | |
| display: flex; | |
| flex-direction: column; | |
| overflow: hidden; | |
| } | |
| /* --- Header --- */ | |
| header { | |
| background-color: var(--bg-panel); | |
| border-bottom: 1px solid var(--border-color); | |
| padding: 1rem 2rem; | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| height: 64px; | |
| } | |
| .logo-area { | |
| display: flex; | |
| align-items: center; | |
| gap: 0.75rem; | |
| font-weight: 700; | |
| font-size: 1.25rem; | |
| color: #fff; | |
| } | |
| .logo-icon { | |
| color: var(--primary); | |
| font-size: 1.5rem; | |
| } | |
| .anycoder-link { | |
| font-size: 0.875rem; | |
| color: var(--text-muted); | |
| text-decoration: none; | |
| transition: color 0.2s; | |
| display: flex; | |
| align-items: center; | |
| gap: 0.5rem; | |
| } | |
| .anycoder-link:hover { | |
| color: var(--primary); | |
| } | |
| /* --- Main Layout --- */ | |
| main { | |
| flex: 1; | |
| display: flex; | |
| flex-direction: column; | |
| overflow: hidden; | |
| position: relative; | |
| } | |
| /* --- Input Section --- */ | |
| .prompt-container { | |
| padding: 1.5rem 2rem; | |
| background: linear-gradient(180deg, var(--bg-body) 0%, rgba(15, 17, 21, 0.9) 100%); | |
| z-index: 10; | |
| border-bottom: 1px solid var(--border-color); | |
| display: flex; | |
| flex-direction: column; | |
| gap: 1rem; | |
| max-width: 1200px; | |
| width: 100%; | |
| margin: 0 auto; | |
| } | |
| .prompt-wrapper { | |
| position: relative; | |
| width: 100%; | |
| } | |
| textarea { | |
| width: 100%; | |
| background-color: var(--bg-input); | |
| border: 1px solid var(--border-color); | |
| border-radius: 8px; | |
| padding: 1rem; | |
| padding-right: 4rem; | |
| color: var(--text-main); | |
| font-family: var(--font-sans); | |
| font-size: 1rem; | |
| resize: none; | |
| height: 100px; | |
| outline: none; | |
| transition: border-color 0.2s, box-shadow 0.2s; | |
| } | |
| textarea:focus { | |
| border-color: var(--primary); | |
| box-shadow: 0 0 0 3px rgba(88, 166, 255, 0.1); | |
| } | |
| .generate-btn { | |
| position: absolute; | |
| bottom: 12px; | |
| right: 12px; | |
| background-color: var(--accent-green); | |
| color: white; | |
| border: none; | |
| border-radius: 6px; | |
| padding: 0.5rem 1rem; | |
| font-weight: 600; | |
| cursor: pointer; | |
| display: flex; | |
| align-items: center; | |
| gap: 0.5rem; | |
| transition: background-color 0.2s, transform 0.1s; | |
| } | |
| .generate-btn:hover { | |
| background-color: #2ea043; | |
| } | |
| .generate-btn:active { | |
| transform: scale(0.98); | |
| } | |
| .generate-btn:disabled { | |
| background-color: var(--border-color); | |
| cursor: not-allowed; | |
| color: var(--text-muted); | |
| } | |
| .settings-bar { | |
| display: flex; | |
| gap: 1.5rem; | |
| align-items: center; | |
| font-size: 0.875rem; | |
| color: var(--text-muted); | |
| } | |
| .agent-toggle { | |
| display: flex; | |
| align-items: center; | |
| gap: 0.5rem; | |
| cursor: pointer; | |
| user-select: none; | |
| } | |
| .toggle-checkbox { | |
| appearance: none; | |
| width: 16px; | |
| height: 16px; | |
| border: 1px solid var(--border-color); | |
| border-radius: 4px; | |
| background-color: var(--bg-input); | |
| position: relative; | |
| cursor: pointer; | |
| } | |
| .toggle-checkbox:checked { | |
| background-color: var(--primary); | |
| border-color: var(--primary); | |
| } | |
| .toggle-checkbox:checked::after { | |
| content: '✔'; | |
| position: absolute; | |
| font-size: 10px; | |
| color: white; | |
| top: 50%; | |
| left: 50%; | |
| transform: translate(-50%, -50%); | |
| } | |
| /* --- Results Grid --- */ | |
| .results-area { | |
| flex: 1; | |
| padding: 1.5rem 2rem; | |
| overflow-y: auto; | |
| display: grid; | |
| grid-template-columns: repeat(auto-fit, minmax(400px, 1fr)); | |
| gap: 1.5rem; | |
| } | |
| .agent-card { | |
| background-color: var(--bg-panel); | |
| border: 1px solid var(--border-color); | |
| border-radius: 12px; | |
| display: flex; | |
| flex-direction: column; | |
| overflow: hidden; | |
| transition: box-shadow 0.3s; | |
| height: 100%; | |
| min-height: 400px; | |
| position: relative; | |
| } | |
| .agent-card:hover { | |
| box-shadow: var(--shadow-lg); | |
| border-color: #444c56; | |
| } | |
| .card-header { | |
| padding: 1rem; | |
| border-bottom: 1px solid var(--border-color); | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| background-color: rgba(255, 255, 255, 0.02); | |
| } | |
| .agent-info { | |
| display: flex; | |
| align-items: center; | |
| gap: 0.75rem; | |
| } | |
| .agent-avatar { | |
| width: 32px; | |
| height: 32px; | |
| border-radius: 8px; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| font-size: 1.2rem; | |
| color: white; | |
| } | |
| /* Agent specific colors */ | |
| .agent-gpt .agent-avatar { background: linear-gradient(135deg, #10a37f, #0d8a6a); } | |
| .agent-claude .agent-avatar { background: linear-gradient(135deg, #d97757, #c25e3e); } | |
| .agent-llama .agent-avatar { background: linear-gradient(135deg, #0066ff, #0044aa); } | |
| .agent-name { | |
| font-weight: 600; | |
| font-size: 0.95rem; | |
| } | |
| .agent-model { | |
| font-size: 0.75rem; | |
| color: var(--text-muted); | |
| } | |
| .status-badge { | |
| font-size: 0.75rem; | |
| padding: 0.25rem 0.6rem; | |
| border-radius: 99px; | |
| background-color: rgba(139, 148, 158, 0.2); | |
| color: var(--text-muted); | |
| display: flex; | |
| align-items: center; | |
| gap: 0.35rem; | |
| } | |
| .status-badge.generating { | |
| background-color: rgba(210, 153, 34, 0.2); | |
| color: var(--accent-orange); | |
| } | |
| .status-badge.completed { | |
| background-color: rgba(35, 134, 54, 0.2); | |
| color: var(--accent-green); | |
| } | |
| .status-dot { | |
| width: 6px; | |
| height: 6px; | |
| border-radius: 50%; | |
| background-color: currentColor; | |
| } | |
| .status-badge.generating .status-dot { | |
| animation: pulse 1.5s infinite; | |
| } | |
| @keyframes pulse { | |
| 0% { opacity: 1; transform: scale(1); } | |
| 50% { opacity: 0.5; transform: scale(1.2); } | |
| 100% { opacity: 1; transform: scale(1); } | |
| } | |
| .card-body { | |
| flex: 1; | |
| padding: 0; | |
| overflow-y: auto; | |
| background-color: #0d1117; | |
| position: relative; | |
| } | |
| /* Code Block Styling */ | |
| pre { | |
| margin: 0; | |
| padding: 1.5rem; | |
| font-family: var(--font-mono); | |
| font-size: 0.9rem; | |
| line-height: 1.6; | |
| } | |
| code { | |
| font-family: inherit; | |
| } | |
| .copy-btn { | |
| position: absolute; | |
| top: 10px; | |
| right: 10px; | |
| background: rgba(255, 255, 255, 0.1); | |
| border: 1px solid rgba(255, 255, 255, 0.1); | |
| color: var(--text-main); | |
| padding: 0.25rem 0.5rem; | |
| border-radius: 4px; | |
| font-size: 0.75rem; | |
| cursor: pointer; | |
| opacity: 0; | |
| transition: opacity 0.2s; | |
| display: flex; | |
| align-items: center; | |
| gap: 4px; | |
| } | |
| .card-body:hover .copy-btn { | |
| opacity: 1; | |
| } | |
| .copy-btn:hover { | |
| background: rgba(255, 255, 255, 0.2); | |
| } | |
| /* Metrics Footer */ | |
| .card-footer { | |
| padding: 0.75rem 1rem; | |
| border-top: 1px solid var(--border-color); | |
| background-color: var(--bg-panel); | |
| display: flex; | |
| justify-content: space-between; | |
| font-size: 0.75rem; | |
| color: var(--text-muted); | |
| } | |
| .metric { | |
| display: flex; | |
| align-items: center; | |
| gap: 0.35rem; | |
| } | |
| .metric i { | |
| font-size: 1rem; | |
| } | |
| /* Empty State */ | |
| .empty-state { | |
| grid-column: 1 / -1; | |
| display: flex; | |
| flex-direction: column; | |
| align-items: center; | |
| justify-content: center; | |
| height: 100%; | |
| color: var(--text-muted); | |
| text-align: center; | |
| padding: 4rem; | |
| } | |
| .empty-icon { | |
| font-size: 4rem; | |
| margin-bottom: 1rem; | |
| opacity: 0.5; | |
| } | |
| /* Scrollbar */ | |
| ::-webkit-scrollbar { | |
| width: 8px; | |
| height: 8px; | |
| } | |
| ::-webkit-scrollbar-track { | |
| background: var(--bg-body); | |
| } | |
| ::-webkit-scrollbar-thumb { | |
| background: #30363d; | |
| border-radius: 4px; | |
| } | |
| ::-webkit-scrollbar-thumb:hover { | |
| background: #484f58; | |
| } | |
| /* Mobile Responsive */ | |
| @media (max-width: 768px) { | |
| .results-area { | |
| grid-template-columns: 1fr; | |
| } | |
| .header { | |
| padding: 1rem; | |
| } | |
| .prompt-container { | |
| padding: 1rem; | |
| } | |
| .settings-bar { | |
| flex-wrap: wrap; | |
| gap: 1rem; | |
| } | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <header> | |
| <div class="logo-area"> | |
| <i class="ph ph-code-block logo-icon"></i> | |
| <span>AgentArena</span> | |
| </div> | |
| <a href="https://huggingface.co/spaces/akhaliq/anycoder" target="_blank" class="anycoder-link"> | |
| Built with anycoder <i class="ph ph-arrow-square-out"></i> | |
| </a> | |
| </header> | |
| <main> | |
| <div class="prompt-container"> | |
| <div class="prompt-wrapper"> | |
| <textarea id="promptInput" placeholder="Describe the code you want to generate (e.g., 'Create a Python script to scrape product prices from Amazon')..."></textarea> | |
| <button id="generateBtn" class="generate-btn" onclick="startGeneration()"> | |
| <i class="ph ph-lightning"></i> Generate | |
| </button> | |
| </div> | |
| <div class="settings-bar"> | |
| <span>Active Agents:</span> | |
| <label class="agent-toggle"> | |
| <input type="checkbox" class="toggle-checkbox" checked disabled> | |
| <span>GPT-4o</span> | |
| </label> | |
| <label class="agent-toggle"> | |
| <input type="checkbox" class="toggle-checkbox" checked> | |
| <span>Claude 3.5 Sonnet</span> | |
| </label> | |
| <label class="agent-toggle"> | |
| <input type="checkbox" class="toggle-checkbox" checked> | |
| <span>Llama 3 70B</span> | |
| </label> | |
| </div> | |
| </div> | |
| <div class="results-area" id="resultsArea"> | |
| <div class="empty-state"> | |
| <i class="ph ph-robot empty-icon"></i> | |
| <h2>Ready to Code</h2> | |
| <p>Enter a prompt above to see how different AI agents tackle the same problem.</p> | |
| </div> | |
| </div> | |
| </main> | |
| <script> | |
| // Mock Data for "Streaming" Simulation | |
| const mockResponses = { | |
| gpt: `import requests | |
| from bs4 import BeautifulSoup | |
| import pandas as pd | |
| import time | |
| def scrape_amazon_prices(product_list): | |
| headers = { | |
| "User-Agent": "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/91.0.4472.124 Safari/537.36", | |
| "Accept-Language": "en-US,en;q=0.9" | |
| } | |
| data = [] | |
| for url in product_list: | |
| try: | |
| response = requests.get(url, headers=headers) | |
| soup = BeautifulSoup(response.content, "html.parser") | |
| # Extract Title | |
| title = soup.find("span", attrs={"id": 'productTitle'}) | |
| title = title.string.strip() if title else "NA" | |
| # Extract Price | |
| price = soup.find("span", attrs={'class': 'a-price-whole'}) | |
| price = price.string.strip() if price else "NA" | |
| data.append({"Title": title, "Price": price, "URL": url}) | |
| # Be polite to the server | |
| time.sleep(2) | |
| except Exception as e: | |
| print(f"Error scraping {url}: {e}") | |
| return pd.DataFrame(data) | |
| # Example Usage | |
| if __name__ == "__main__": | |
| urls = ["https://amazon.com/dp/B08N5WRWNW"] # Example URL | |
| df = scrape_amazon_prices(urls) | |
| print(df)`, | |
| claude: `import asyncio | |
| import aiohttp | |
| from bs4 import BeautifulSoup | |
| from typing import List, Dict | |
| class AmazonScraper: | |
| def __init__(self): | |
| self.headers = { | |
| 'User-Agent': 'Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/120.0.0.0 Safari/537.36', | |
| 'Accept': 'text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,*/*;q=0.8' | |
| } | |
| async def fetch_page(self, session: aiohttp.ClientSession, url: str) -> str: | |
| async with session.get(url, headers=self.headers) as response: | |
| return await response.text() | |
| def parse_price(self, html: str) -> Dict: | |
| soup = BeautifulSoup(html, 'lxml') | |
| # Selectors logic | |
| title_el = soup.select_one('#productTitle') | |
| price_whole = soup.select_one('.a-price-whole') | |
| price_fraction = soup.select_one('.a-price-fraction') | |
| title = title_el.get_text().strip() if title_el else None | |
| price = "N/A" | |
| if price_whole and price_fraction: | |
| price = f"{price_whole.get_text().strip()}.{price_fraction.get_text().strip()}" | |
| return { | |
| 'title': title, | |
| 'price': price, | |
| 'timestamp': datetime.now().isoformat() | |
| } | |
| async def scrape_products(self, urls: List[str]): | |
| async with aiohttp.ClientSession() as session: | |
| tasks = [self.fetch_page(session, url) for url in urls] | |
| pages = await asyncio.gather(*tasks) | |
| return [self.parse_price(page) for page in pages] | |
| # This is a more robust async approach | |
| # Requires: pip install aiohttp beautifulsoup4 lxml`, | |
| llama: `import requests | |
| from bs4 import BeautifulSoup | |
| import csv | |
| def get_product_details(url): | |
| """ | |
| Simple function to get product details. | |
| Note: Amazon has strict anti-scraping. | |
| You might need proxies in production. | |
| """ | |
| # Headers are crucial to avoid 503 errors | |
| headers = ({'User-Agent': | |
| 'Mozilla/5.0 (X11; Linux x86_64) \ | |
| AppleWebKit/537.36 (KHTML, like Gecko) \ | |
| Chrome/44.0.2403.157 Safari/537.36', | |
| 'Accept-Language': 'en-US, en;q=0.5'}) | |
| page = requests.get(url, headers=headers) | |
| soup = BeautifulSoup(page.content, "html.parser") | |
| try: | |
| title = soup.find("span", attrs={"id": 'productTitle'}).text.strip() | |
| except AttributeError: | |
| title = "" | |
| try: | |
| price_parent = soup.find("span", attrs={'class': 'a-price'}) | |
| price = price_parent.find("span", attrs={'class': 'a-offscreen'}).text | |
| except AttributeError: | |
| price = "" | |
| return title, price | |
| def save_to_csv(products): | |
| fields = ['Title', 'Price', 'Link'] | |
| with open('amazon_products.csv', 'w', newline='') as f: | |
| write = csv.writer(f) | |
| write.writerow(fields) | |
| write.writerows(products) | |
| # Main execution flow | |
| print("Starting scraper...") | |
| ` | |
| }; | |
| const agents = [ | |
| { id: 'gpt', name: 'GPT-4o', model: 'OpenAI', class: 'agent-gpt', icon: 'ph-openai-logo' }, | |
| { id: 'claude', name: 'Claude 3.5', model: 'Anthropic', class: 'agent-claude', icon: 'ph-brain' }, | |
| { id: 'llama', name: 'Llama 3', model: 'Meta AI', class: 'agent-llama', icon: 'ph-meta-logo' } | |
| ]; | |
| function createAgentCard(agent) { | |
| return ` | |
| <div class="agent-card ${agent.class}" id="card-${agent.id}"> | |
| <div class="card-header"> | |
| <div class="agent-info"> | |
| <div class="agent-avatar"> | |
| <i class="ph ${agent.icon}"></i> | |
| </div> | |
| <div> | |
| <div class="agent-name">${agent.name}</div> | |
| <div class="agent-model">${agent.model}</div> | |
| </div> | |
| </div> | |
| <div class="status-badge generating" id="status-${agent.id}"> | |
| <div class="status-dot"></div> | |
| <span>Thinking...</span> | |
| </div> | |
| </div> | |
| <div class="card-body"> | |
| <button class="copy-btn" onclick="copyCode('code-${agent.id}')"> | |
| <i class="ph ph-copy"></i> Copy | |
| </button> | |
| <pre><code class="language-python" id="code-${agent.id}"></code></pre> | |
| </div> | |
| <div class="card-footer"> | |
| <div class="metric" id="time-${agent.id}"> | |
| <i class="ph ph-clock"></i> --s | |
| </div> | |
| <div class="metric" id="tokens-${agent.id}"> | |
| <i class="ph ph-text-aa"></i> -- tokens | |
| </div> | |
| </div> | |
| </div> | |
| `; | |
| } | |
| function sleep(ms) { | |
| return new Promise(resolve => setTimeout(resolve, ms)); | |
| } | |
| async function typeWriter(elementId, text, speed = 10) { | |
| const element = document.getElementById(elementId); | |
| let i = 0; | |
| // Clear previous content | |
| element.textContent = ''; | |
| // Random chunk size to simulate network packets | |
| while (i < text.length) { | |
| const chunkSize = Math.floor(Math.random() * 5) + 2; | |
| const chunk = text.slice(i, i + chunkSize); | |
| element.textContent += chunk; | |
| // Highlight syntax periodically (simulating real-time render) | |
| if (i % 50 === 0) { | |
| hljs.highlightElement(element); | |
| // Auto scroll to bottom | |
| element.parentElement.parentElement.scrollTop = element.parentElement.parentElement.scrollHeight; | |
| } | |
| i += chunkSize; | |
| await sleep(speed); | |
| } | |
| // Final highlight | |
| hljs.highlightElement(element); | |
| } | |
| async function simulateAgent(agent) { | |
| const startTime = Date.now(); | |
| const codeElementId = `code-${agent.id}`; | |
| const statusElementId = `status-${agent.id}`; | |
| const timeElementId = `time-${agent.id}`; | |
| const tokenElementId = `tokens-${agent.id}`; | |
| // Initial Delay to simulate processing start | |
| await sleep(Math.random() * 1000 + 500); | |
| const statusEl = document.getElementById(statusElementId); | |
| statusEl.innerHTML = `<div class="status-dot"></div><span>Generating...</span>`; | |
| // Typewriter effect | |
| await typeWriter(codeElementId, mockResponses[agent.id], 15); // 15ms per char approx | |
| const endTime = Date.now(); | |
| const duration = ((endTime - startTime) / 1000).toFixed(2); | |
| const tokens = mockResponses[agent.id].length / 4; // Rough estimate | |
| // Update UI to completed | |
| statusEl.className = 'status-badge completed'; | |
| statusEl.innerHTML = `<i class="ph ph-check-circle"></i><span>Done</span>`; | |
| document.getElementById(timeElementId).innerHTML = `<i class="ph ph-clock"></i> ${duration}s`; | |
| document.getElementById(tokenElementId).innerHTML = `<i class="ph ph-text-aa"></i> ~${Math.floor(tokens)} tokens`; | |
| } | |
| async function startGeneration() { | |
| const promptInput = document.getElementById('promptInput'); | |
| const generateBtn = document.getElementById('generateBtn'); | |
| const resultsArea = document.getElementById('resultsArea'); | |
| if (!promptInput.value.trim()) { | |
| alert("Please enter a prompt first."); | |
| return; | |
| } | |
| // Lock UI | |
| generateBtn.disabled = true; | |
| generateBtn.innerHTML = `<i class="ph ph-spinner-gap ph-spin"></i> Processing...`; | |
| // Clear previous results and setup grid | |
| resultsArea.innerHTML = ''; | |
| // Create cards | |
| agents.forEach(agent => { | |
| resultsArea.innerHTML += createAgentCard(agent); | |
| }); | |
| // Start simulations concurrently | |
| const promises = agents.map(agent => simulateAgent(agent)); | |
| await Promise.all(promises); | |
| // Unlock UI | |
| generateBtn.disabled = false; | |
| generateBtn.innerHTML = `<i class="ph ph-lightning"></i> Generate`; | |
| } | |
| function copyCode(elementId) { | |
| const code = document.getElementById(elementId).innerText; | |
| navigator.clipboard.writeText(code).then(() => { | |
| // Simple feedback | |
| alert('Code copied to clipboard!'); | |
| }); | |
| } | |
| </script> | |
| </body> | |
| </html> |