Hugging Face's logo

Spaces:
Midwintertroll
/
tool-python-sandbox
Running

App Files Community
tool-python-sandbox / index.html
Midwintertroll's picture
Midwintertroll
undefined - Initial Deployment
ecfa981 verified
Raw History Blame Contribute Delete
14.9 kB
<!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>