Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Python Code Studio | Browser-Based Python Development</title> | |
| <link rel="stylesheet" href="style.css"> | |
| <script src="https://cdn.jsdelivr.net/npm/@huggingface/transformers@3.0.2"></script> | |
| </head> | |
| <body> | |
| <div class="container"> | |
| <header> | |
| <h1>🐍 Python Code Studio</h1> | |
| <p class="subtitle">Develop, test, and run Python scripts directly in your browser</p> | |
| <p class="attribution">Built with <a href="https://huggingface.co/spaces/akhaliq/anycoder" target="_blank">anycoder</a></p> | |
| </header> | |
| <div class="app-container"> | |
| <div class="controls"> | |
| <div class="control-group"> | |
| <button id="generateBtn" class="btn primary">Generate Code</button> | |
| <button id="runBtn" class="btn success">Run Script</button> | |
| <button id="debugBtn" class="btn warning">Debug & Fix</button> | |
| <button id="clearBtn" class="btn danger">Clear</button> | |
| </div> | |
| <div class="control-group"> | |
| <label for="modelSelect">Model:</label> | |
| <select id="modelSelect"> | |
| <option value="microsoft/DialogRPT-updown">Code Generation Model</option> | |
| </select> | |
| </div> | |
| </div> | |
| <div class="editor-section"> | |
| <div class="input-section"> | |
| <h3>Code Description</h3> | |
| <textarea id="promptInput" placeholder="Describe the Python code you want to generate (e.g., 'Create a function to calculate fibonacci sequence', 'Build a web scraper for news headlines')" rows="4"></textarea> | |
| <div class="examples"> | |
| <h4>Quick Examples:</h4> | |
| <div class="example-buttons"> | |
| <button class="example-btn" data-prompt="Create a function to calculate factorial of a number">Factorial Calculator</button> | |
| <button class="example-btn" data-prompt="Write a Python script to sort a list of dictionaries by a specific key">List Sorter</button> | |
| <button class="example-btn" data-prompt="Create a simple web scraper using requests and BeautifulSoup">Web Scraper</button> | |
| <button class="example-btn" data-prompt="Write a function to check if a string is a palindrome">Palindrome Checker</button> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="code-section"> | |
| <h3>Python Code Editor</h3> | |
| <textarea id="codeEditor" placeholder="Your Python code will appear here..."></textarea> | |
| </div> | |
| </div> | |
| <div class="output-section"> | |
| <h3>Execution Results</h3> | |
| <div id="outputContainer"> | |
| <div id="outputText">Ready to run Python code...</div> | |
| </div> | |
| </div> | |
| <div class="status-section"> | |
| <div id="statusIndicator" class="status idle"> | |
| <span class="status-dot"></span> | |
| <span class="status-text">Ready</span> | |
| </div> | |
| <div id="progressContainer" class="progress-container"> | |
| <div id="progressBar" class="progress-bar"></div> | |
| <span id="progressText">0%</span> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="features"> | |
| <h3>Features</h3> | |
| <ul> | |
| <li>✅ Generate Python code from natural language descriptions</li> | |
| <li>✅ Execute Python scripts in browser using Pyodide</li> | |
| <li>✅ Debug and fix code errors automatically</li> | |
| <li>✅ No server required - everything runs locally</li> | |
| <li>✅ Support for common Python libraries</li> | |
| </ul> | |
| </div> | |
| </div> | |
| <script src="index.js"></script> | |
| </body> | |
| </html> |