Spaces:

plecca
/

pypalai-python-powered-pal

Running

File size: 12,171 Bytes

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Python Playground</title>
    <link rel="icon" type="image/x-icon" href="/static/favicon.ico">
    <script src="https://cdn.tailwindcss.com"></script>
    <script src="https://unpkg.com/feather-icons"></script>
    <style>
        .code-block {
            font-family: 'Courier New', monospace;
            background-color: #f8f8f8;
            border-radius: 4px;
            padding: 16px;
            overflow-x: auto;
        }
        .python-keyword { color: #0000ff; }
        .python-string { color: #a31515; }
        .python-comment { color: #008000; }
        .python-builtin { color: #795e26; }
    </style>
</head>
<body class="bg-gray-50 min-h-screen">
    <div class="container mx-auto px-4 py-8">
        <header class="mb-12">
            <div class="flex items-center justify-between">
                <div class="flex items-center space-x-4">
                    <div class="w-12 h-12 rounded-full bg-yellow-400 flex items-center justify-center text-white">
                        <i data-feather="code" class="w-6 h-6"></i>
                    </div>
                    <h1 class="text-3xl font-bold text-gray-800">Python Playground</h1>
                </div>
                <a href="builder.html" class="px-4 py-2 bg-blue-500 text-white rounded-md hover:bg-blue-600 flex items-center">
                    <i data-feather="layout" class="w-4 h-4 mr-2"></i>
                    Site Builder
                </a>
            </div>
            <p class="mt-2 text-gray-600">Explore and run Python code directly in your browser</p>
        </header>

        <div class="grid grid-cols-1 lg:grid-cols-2 gap-8">
            <div class="bg-white rounded-xl shadow-md p-6">
                <h2 class="text-xl font-semibold mb-4 text-gray-800">Code Editor</h2>
                <textarea id="python-code" class="w-full h-96 p-4 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 font-mono" spellcheck="false">
# Trainable Chat Bot
knowledge_base = {}

def train_bot():
    print("\nBot: Teach me something new!")
    question = input("You say: ")
    answer = input("I respond: ")
    knowledge_base[question.lower()] = answer
    print("Bot: Got it! I've learned something new.")

def save_knowledge():
    with open('bot_knowledge.txt', 'w') as f:
        for q, a in knowledge_base.items():
            f.write(f"{q}|{a}\n")
    print("Bot: My knowledge has been saved!")

def load_knowledge():
    try:
        with open('bot_knowledge.txt', 'r') as f:
            for line in f:
                q, a = line.strip().split('|')
                knowledge_base[q] = a
    except FileNotFoundError:
        pass

def chat_bot():
    load_knowledge()
    print("Bot: Hi there! I'm a trainable BotBuddy. Type 'train' to teach me or 'quit' to exit.")
    
    while True:
        message = input("\nYou: ").lower()
        
        if message == 'quit':
            save_knowledge()
            print("Bot: Goodbye! Thanks for chatting.")
            break
        elif message == 'train':
            train_bot()
        elif message in knowledge_base:
            print(f"Bot: {knowledge_base[message]}")
        else:
            print("Bot: I don't know how to respond to that. Type 'train' to teach me!")

chat_bot()
</textarea>
                <div class="mt-4 flex space-x-3">
                    <button id="run-btn" class="px-6 py-2 bg-green-500 text-white rounded-lg hover:bg-green-600 flex items-center">
                        <i data-feather="play" class="w-4 h-4 mr-2"></i>
                        Run Code
                    </button>
                    <button id="clear-btn" class="px-6 py-2 bg-gray-200 text-gray-700 rounded-lg hover:bg-gray-300 flex items-center">
                        <i data-feather="trash-2" class="w-4 h-4 mr-2"></i>
                        Clear
                    </button>
                </div>
                <div class="mt-4 bg-blue-50 p-4 rounded-lg">
                    <h3 class="font-medium text-blue-800 mb-2">How to use this bot:</h3>
                    <ul class="list-disc pl-5 space-y-1 text-blue-700">
                        <li>Type normal messages to chat</li>
                        <li>Type 'train' to teach the bot new responses</li>
                        <li>Type 'quit' to end the session</li>
                        <li>The bot saves everything you teach it!</li>
                    </ul>
                </div>
</div>

            <div class="bg-white rounded-xl shadow-md p-6">
                <h2 class="text-xl font-semibold mb-4 text-gray-800">Output</h2>
                <div id="output" class="h-96 bg-black text-green-400 p-4 rounded-lg overflow-y-auto font-mono">
                    <p class="text-gray-400">Your output will appear here...</p>
                </div>
                <div class="mt-4">
                    <h3 class="text-lg font-medium mb-2 text-gray-700">Python Resources</h3>
                    <ul class="space-y-2">
                        <li><a href="https://docs.python.org/3/" target="_blank" class="text-blue-500 hover:underline">Python Documentation</a></li>
                        <li><a href="https://realpython.com/" target="_blank" class="text-blue-500 hover:underline">Real Python Tutorials</a></li>
                        <li><a href="https://www.pythoncheatsheet.org/" target="_blank" class="text-blue-500 hover:underline">Python Cheat Sheet</a></li>
                    </ul>
                </div>
            </div>
        </div>

        <div class="mt-12 bg-white rounded-xl shadow-md p-6">
            <h2 class="text-xl font-semibold mb-4 text-gray-800">Example Snippets</h2>
            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
                <div class="border border-gray-200 rounded-lg p-4">
                    <h3 class="font-medium text-gray-800 mb-2">Fibonacci Sequence</h3>
                    <div class="code-block">
                        <span class="python-keyword">def</span> fib(n):<br>
                        &nbsp;&nbsp;<span class="python-keyword">if</span> n <= <span class="python-builtin">1</span>:<br>
                        &nbsp;&nbsp;&nbsp;&nbsp;<span class="python-keyword">return</span> n<br>
                        &nbsp;&nbsp;<span class="python-keyword">return</span> fib(n-<span class="python-builtin">1</span>) + fib(n-<span class="python-builtin">2</span>)<br><br>
                        <span class="python-comment"># Print first 10 Fibonacci numbers</span><br>
                        <span class="python-keyword">for</span> i <span class="python-keyword">in</span> <span class="python-builtin">range</span>(<span class="python-builtin">10</span>):<br>
                        &nbsp;&nbsp;<span class="python-builtin">print</span>(fib(i))
                    </div>
                </div>
                <div class="border border-gray-200 rounded-lg p-4">
                    <h3 class="font-medium text-gray-800 mb-2">List Comprehension</h3>
                    <div class="code-block">
                        <span class="python-comment"># Squares of even numbers</span><br>
                        numbers = [<span class="python-builtin">1</span>, <span class="python-builtin">2</span>, <span class="python-builtin">3</span>, <span class="python-builtin">4</span>, <span class="python-builtin">5</span>, <span class="python-builtin">6</span>]<br>
                        squares = [x**<span class="python-builtin">2</span> <span class="python-keyword">for</span> x <span class="python-keyword">in</span> numbers <span class="python-keyword">if</span> x % <span class="python-builtin">2</span> == <span class="python-builtin">0</span>]<br><br>
                        <span class="python-builtin">print</span>(squares)  <span class="python-comment"># Output: [4, 16, 36]</span>
                    </div>
                </div>
                <div class="border border-gray-200 rounded-lg p-4">
                    <h3 class="font-medium text-gray-800 mb-2">API Request</h3>
                    <div class="code-block">
                        <span class="python-keyword">import</span> requests<br><br>
                        <span class="python-comment"># Fetch data from JSONPlaceholder API</span><br>
                        response = requests.get(<span class="python-string">"https://jsonplaceholder.typicode.com/todos/1"</span>)<br>
                        data = response.json()<br><br>
                        <span class="python-builtin">print</span>(<span class="python-string">"Todo:"</span>, data[<span class="python-string">"title"</span>])<br>
                        <span class="python-builtin">print</span>(<span class="python-string">"Completed:"</span>, data[<span class="python-string">"completed"</span>])
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script>
        // Initialize feather icons
        feather.replace();

        // Run Python code
        document.getElementById('run-btn').addEventListener('click', function() {
            const code = document.getElementById('python-code').value;
            const outputDiv = document.getElementById('output');
            
            try {
                // In a real implementation, you would send this to a backend Python interpreter
                // For demo purposes, we'll simulate some output
                outputDiv.innerHTML = '';
                
                // Simulate different types of output
                if (code.includes('print(')) {
                    if (code.includes("train_bot()")) {
                        outputDiv.innerHTML += '<p class="text-green-400">Bot: Teach me something new!</p>';
                        outputDiv.innerHTML += '<p class="text-blue-400">You say: hello</p>';
                        outputDiv.innerHTML += '<p class="text-blue-400">I respond: Hi there!</p>';
                        outputDiv.innerHTML += '<p class="text-green-400">Bot: Got it! I\'ve learned something new.</p>';
                        outputDiv.innerHTML += '<p class="text-blue-400">You: hello</p>';
                        outputDiv.innerHTML += '<p class="text-green-400">Bot: Hi there!</p>';
                    } else {
                        outputDiv.innerHTML += '<p class="text-green-400">Bot: Hi there! I\'m a trainable BotBuddy. Type \'train\' to teach me or \'quit\' to exit.</p>';
                        outputDiv.innerHTML += '<p class="text-blue-400">You: hello</p>';
                        outputDiv.innerHTML += '<p class="text-green-400">Bot: Hi there!</p>';
                        outputDiv.innerHTML += '<p class="text-blue-400">You: quit</p>';
                        outputDiv.innerHTML += '<p class="text-green-400">Bot: Goodbye! Thanks for chatting.</p>';
                    }
} else if (code.includes('fib(')) {
                    outputDiv.innerHTML += '<p class="text-green-400">0</p><p class="text-green-400">1</p><p class="text-green-400">1</p><p class="text-green-400">2</p><p class="text-green-400">3</p><p class="text-green-400">5</p><p class="text-green-400">8</p><p class="text-green-400">13</p><p class="text-green-400">21</p><p class="text-green-400">34</p>';
                } else if (code.includes('requests.get(')) {
                    outputDiv.innerHTML += '<p class="text-green-400">Todo: delectus aut autem</p><p class="text-green-400">Completed: false</p>';
                } else {
                    outputDiv.innerHTML += '<p class="text-green-400">Code executed successfully (simulated)</p>';
                }
            } catch (error) {
                outputDiv.innerHTML = `<p class="text-red-400">Error: ${error.message}</p>`;
            }
        });

        // Clear output
        document.getElementById('clear-btn').addEventListener('click', function() {
            document.getElementById('output').innerHTML = '<p class="text-gray-400">Your output will appear here...</p>';
        });
    </script>
</body>
</html>