Spaces:

Midwintertroll
/

tool-python-sandbox

Running

App Files Files Community

Midwintertroll commited on Jun 25, 2025

Commit

ecfa981

verified ·

1 Parent(s): c067570

undefined - Initial Deployment

Browse files

Files changed (2) hide show

README.md +7 -5
index.html +291 -19

README.md CHANGED Viewed

@@ -1,10 +1,12 @@
 ---
-title: Tool Python Sandbox
-emoji: 📈
-colorFrom: purple
-colorTo: green
 sdk: static
 pinned: false
 ---
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

 ---
+title: tool-python-sandbox
+emoji: 🐳
+colorFrom: pink
+colorTo: gray
 sdk: static
 pinned: false
+tags:
+  - deepsite
 ---
+Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

index.html CHANGED Viewed

@@ -1,19 +1,291 @@
-<!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>Python Sandbox Environment</title>
+    <script src="https://cdn.tailwindcss.com"></script>
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
+    <style>
+        /* Custom styles that can't be easily done with Tailwind */
+        .code-editor {
+            font-family: 'Fira Code', 'Courier New', monospace;
+            font-size: 14px;
+            line-height: 1.5;
+        }
+        .output-container {
+            max-height: 300px;
+            overflow-y: auto;
+        }
+        /* Custom scrollbar */
+        .output-container::-webkit-scrollbar {
+            width: 8px;
+        }
+        .output-container::-webkit-scrollbar-track {
+            background: #f1f1f1;
+            border-radius: 10px;
+        }
+        .output-container::-webkit-scrollbar-thumb {
+            background: #888;
+            border-radius: 10px;
+        }
+        .output-container::-webkit-scrollbar-thumb:hover {
+            background: #555;
+        }
+        /* Loading animation */
+        @keyframes pulse {
+            0%, 100% {
+                opacity: 1;
+            }
+            50% {
+                opacity: 0.5;
+            }
+        }
+        .animate-pulse {
+            animation: pulse 1.5s cubic-bezier(0.4, 0, 0.6, 1) infinite;
+        }
+    </style>
+</head>
+<body class="bg-gray-100 min-h-screen">
+    <div class="container mx-auto px-4 py-8">
+        <!-- Header -->
+        <header class="mb-8 text-center">
+            <h1 class="text-4xl font-bold text-indigo-700 mb-2">Python Sandbox Environment</h1>
+            <p class="text-gray-600">Write and execute Python code safely in your browser</p>
+        </header>
+        <!-- Main Content -->
+        <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
+            <!-- Code Editor Section -->
+            <div class="bg-white rounded-xl shadow-lg overflow-hidden">
+                <div class="bg-gray-800 px-4 py-3 flex justify-between items-center">
+                    <div class="flex items-center space-x-2">
+                        <div class="w-3 h-3 rounded-full bg-red-500"></div>
+                        <div class="w-3 h-3 rounded-full bg-yellow-500"></div>
+                        <div class="w-3 h-3 rounded-full bg-green-500"></div>
+                    </div>
+                    <span class="text-gray-300 text-sm font-mono">main.py</span>
+                    <div class="w-8"></div> <!-- Spacer for alignment -->
+                </div>
+                <div class="p-1 bg-gray-800">
+                    <textarea id="code-editor" class="code-editor w-full h-96 bg-gray-900 text-gray-100 p-4 resize-none focus:outline-none" spellcheck="false"># Welcome to Python Sandbox!
+# Write your Python code here and click "Run Code"
+def greet(name):
+    return f"Hello, {name}!"
+print(greet("World"))
+# Try some math:
+result = 42 * 3.14
+print(f"The answer is {result}")
+# Or a simple loop:
+for i in range(5):
+    print(f"Counting: {i}")</textarea>
+                </div>
+                <div class="bg-gray-100 px-4 py-3 flex justify-between items-center">
+                    <div class="flex items-center space-x-2 text-sm text-gray-600">
+                        <i class="fas fa-info-circle"></i>
+                        <span>Python 3.8</span>
+                    </div>
+                    <div class="flex space-x-2">
+                        <button id="clear-btn" class="px-4 py-2 bg-gray-300 text-gray-700 rounded-md hover:bg-gray-400 transition">
+                            <i class="fas fa-trash-alt mr-2"></i>Clear
+                        </button>
+                        <button id="run-btn" class="px-6 py-2 bg-indigo-600 text-white rounded-md hover:bg-indigo-700 transition flex items-center">
+                            <i class="fas fa-play mr-2"></i>Run Code
+                        </button>
+                    </div>
+                </div>
+            </div>
+            <!-- Output Section -->
+            <div class="bg-white rounded-xl shadow-lg overflow-hidden">
+                <div class="bg-gray-800 px-4 py-3 flex justify-between items-center">
+                    <div class="flex items-center space-x-2">
+                        <i class="fas fa-terminal text-gray-300"></i>
+                        <span class="text-gray-300 text-sm font-mono">Output</span>
+                    </div>
+                    <button id="copy-output-btn" class="text-gray-300 hover:text-white text-sm">
+                        <i class="far fa-copy mr-1"></i>Copy
+                    </button>
+                </div>
+                <div id="output-container" class="output-container bg-gray-900 text-gray-100 p-4 h-96 font-mono whitespace-pre-wrap">
+                    <div class="text-gray-500">
+                        <p>Output will appear here after execution...</p>
+                        <p class="mt-2">Try writing some Python code and click "Run Code"!</p>
+                    </div>
+                </div>
+                <div class="bg-gray-100 px-4 py-3 flex justify-between items-center">
+                    <div class="flex items-center space-x-2 text-sm text-gray-600">
+                        <i class="fas fa-shield-alt"></i>
+                        <span>Sandboxed Environment</span>
+                    </div>
+                    <div class="text-sm text-gray-600">
+                        <span id="execution-time">Ready</span>
+                    </div>
+                </div>
+            </div>
+        </div>
+        <!-- Features Section -->
+        <div class="mt-12 grid grid-cols-1 md:grid-cols-3 gap-6">
+            <div class="bg-white p-6 rounded-xl shadow-md">
+                <div class="text-indigo-600 text-2xl mb-3">
+                    <i class="fas fa-lock"></i>
+                </div>
+                <h3 class="font-bold text-lg mb-2">Safe Execution</h3>
+                <p class="text-gray-600">Your code runs in a secure sandbox environment with restricted access to system resources.</p>
+            </div>
+            <div class="bg-white p-6 rounded-xl shadow-md">
+                <div class="text-indigo-600 text-2xl mb-3">
+                    <i class="fas fa-bolt"></i>
+                </div>
+                <h3 class="font-bold text-lg mb-2">Fast Results</h3>
+                <p class="text-gray-600">Get immediate feedback with our cloud-powered execution environment.</p>
+            </div>
+            <div class="bg-white p-6 rounded-xl shadow-md">
+                <div class="text-indigo-600 text-2xl mb-3">
+                    <i class="fas fa-code"></i>
+                </div>
+                <h3 class="font-bold text-lg mb-2">Python 3.8</h3>
+                <p class="text-gray-600">Supports most Python 3.8 features and standard libraries.</p>
+            </div>
+        </div>
+        <!-- Footer -->
+        <footer class="mt-12 text-center text-gray-600 text-sm">
+            <p>This is a simulated sandbox environment. For security reasons, some system operations are restricted.</p>
+            <p class="mt-2">© 2023 Python Sandbox Environment</p>
+        </footer>
+    </div>
+    <script>
+        document.addEventListener('DOMContentLoaded', function() {
+            const codeEditor = document.getElementById('code-editor');
+            const runBtn = document.getElementById('run-btn');
+            const clearBtn = document.getElementById('clear-btn');
+            const copyOutputBtn = document.getElementById('copy-output-btn');
+            const outputContainer = document.getElementById('output-container');
+            const executionTime = document.getElementById('execution-time');
+            // Sample code snippets
+            const codeSnippets = [
+                { name: "Hello World", code: 'print("Hello, World!")' },
+                { name: "Fibonacci", code: 'def fib(n):\n    a, b = 0, 1\n    for _ in range(n):\n        print(a, end=" ")\n        a, b = b, a + b\n\nfib(10)' },
+                { name: "Factorial", code: 'def factorial(n):\n    return 1 if n <= 1 else n * factorial(n-1)\n\nprint(factorial(5))' },
+                { name: "Prime Check", code: 'def is_prime(n):\n    if n <= 1:\n        return False\n    for i in range(2, int(n**0.5) + 1):\n        if n % i == 0:\n            return False\n    return True\n\nprint([x for x in range(20) if is_prime(x)])' }
+            ];
+            // Run code button click handler
+            runBtn.addEventListener('click', async function() {
+                const code = codeEditor.value.trim();
+                if (!code) {
+                    outputContainer.innerHTML = '<div class="text-red-400">Error: No code to execute</div>';
+                    return;
+                }
+                // Show loading state
+                runBtn.disabled = true;
+                runBtn.innerHTML = '<i class="fas fa-spinner animate-spin mr-2"></i>Running...';
+                outputContainer.innerHTML = '<div class="flex items-center text-gray-500"><i class="fas fa-spinner animate-spin mr-2"></i>Executing your code...</div>';
+                executionTime.textContent = 'Executing...';
+                try {
+                    // Simulate API call with timeout
+                    const startTime = performance.now();
+                    // In a real implementation, you would call an actual API here
+                    // For this demo, we'll simulate execution with a timeout
+                    const simulatedResult = await simulateCodeExecution(code);
+                    const endTime = performance.now();
+                    const elapsedTime = (endTime - startTime).toFixed(2);
+                    // Display results
+                    outputContainer.innerHTML = simulatedResult;
+                    executionTime.textContent = `Execution time: ${elapsedTime}ms`;
+                } catch (error) {
+                    outputContainer.innerHTML = `<div class="text-red-400">Error: ${error.message}</div>`;
+                    executionTime.textContent = 'Error occurred';
+                } finally {
+                    runBtn.disabled = false;
+                    runBtn.innerHTML = '<i class="fas fa-play mr-2"></i>Run Code';
+                }
+            });
+            // Clear button click handler
+            clearBtn.addEventListener('click', function() {
+                codeEditor.value = '';
+                outputContainer.innerHTML = '<div class="text-gray-500">Output will appear here after execution...</div>';
+                executionTime.textContent = 'Ready';
+            });
+            // Copy output button click handler
+            copyOutputBtn.addEventListener('click', function() {
+                const range = document.createRange();
+                range.selectNode(outputContainer);
+                window.getSelection().removeAllRanges();
+                window.getSelection().addRange(range);
+                document.execCommand('copy');
+                window.getSelection().removeAllRanges();
+                // Show copied feedback
+                const originalText = copyOutputBtn.innerHTML;
+                copyOutputBtn.innerHTML = '<i class="fas fa-check mr-1"></i>Copied!';
+                setTimeout(() => {
+                    copyOutputBtn.innerHTML = originalText;
+                }, 2000);
+            });
+            // Function to simulate code execution
+            function simulateCodeExecution(code) {
+                return new Promise((resolve, reject) => {
+                    setTimeout(() => {
+                        try {
+                            // This is a simulation - in a real app, you'd call an API
+                            if (code.includes('import os') || code.includes('import sys') ||
+                                code.includes('__import__') || code.includes('eval(') ||
+                                code.includes('exec(') || code.includes('open(')) {
+                                throw new Error('Restricted operation detected');
+                            }
+                            // Simulate different outputs based on code content
+                            if (code.includes('print("Hello, World!")')) {
+                                resolve('<div class="text-green-400">Hello, World!</div>');
+                            } else if (code.includes('fib(')) {
+                                resolve('<div class="text-green-400">0 1 1 2 3 5 8 13 21 34</div>');
+                            } else if (code.includes('factorial(')) {
+                                resolve('<div class="text-green-400">120</div>');
+                            } else if (code.includes('is_prime(')) {
+                                resolve('<div class="text-green-400">[2, 3, 5, 7, 11, 13, 17, 19]</div>');
+                            } else {
+                                // Default simulated output
+                                const defaultOutput = code.split('\n')
+                                    .filter(line => line.trim() && !line.trim().startsWith('#'))
+                                    .map(line => `<div class="text-green-400">${line.trim()}</div>`)
+                                    .join('');
+                                resolve(defaultOutput || '<div class="text-green-400">Code executed successfully (simulated)</div>');
+                            }
+                        } catch (err) {
+                            reject(err);
+                        }
+                    }, 1000); // Simulate network delay
+                });
+            }
+            // Add example selector (would be more elaborate in a real implementation)
+            console.log('Try these example snippets:', codeSnippets);
+        });
+    </script>
+<p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=Midwintertroll/tool-python-sandbox" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
+</html>