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>