Spaces:

crsmithdev
/

anycoder-734429a6

Running

App Files Files Community

crsmithdev commited on Dec 15, 2025

Commit

a9bc71e

verified ·

1 Parent(s): 8002d5b

Upload folder using huggingface_hub

Browse files

Files changed (1) hide show

index.html +766 -19

index.html CHANGED Viewed

@@ -1,19 +1,766 @@
-<!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
-</html>

+<!DOCTYPE html>
+<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>