Spaces:

developerbayman
/

neat-python-ide-im-making-thought-it-was-gonna-help-me-with-python-and-did-this-in-html

Running

App Files Files Community

developerbayman commited on Jul 4, 2025

Commit

342be81

verified ·

1 Parent(s): 680bf17

undefined - Initial Deployment

Browse files

Files changed (2) hide show

README.md +7 -7
index.html +507 -19

README.md CHANGED Viewed

@@ -1,12 +1,12 @@
 ---
-title: >-
-  Neat Python Ide Im Making Thought It Was Gonna Help Me With Python And Did
-  This In Html
-emoji: 📊
-colorFrom: yellow
-colorTo: green
 sdk: static
 pinned: false
 ---
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

 ---
+title: neat-python-ide-im-making-thought-it-was-gonna-help-me-with-python-and-did-this-in-html
+emoji: 🐳
+colorFrom: blue
+colorTo: pink
 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,507 @@
-<!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 IDE with Ollama</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>
+        .code-editor {
+            font-family: 'Courier New', monospace;
+            font-size: 14px;
+            line-height: 1.5;
+            tab-size: 4;
+        }
+        .dark .code-editor {
+            background-color: #1e1e1e;
+            color: #d4d4d4;
+        }
+        .light .code-editor {
+            background-color: #ffffff;
+            color: #333333;
+        }
+        .chat-message {
+            max-width: 80%;
+            word-wrap: break-word;
+        }
+        .resize-handle {
+            width: 4px;
+            background-color: rgba(156, 163, 175, 0.3);
+            cursor: col-resize;
+            transition: background-color 0.2s;
+        }
+        .resize-handle:hover {
+            background-color: rgba(156, 163, 175, 0.6);
+        }
+        .tab-active {
+            border-bottom: 2px solid;
+        }
+        .dark .tab-active {
+            border-color: #3b82f6;
+        }
+        .light .tab-active {
+            border-color: #2563eb;
+        }
+    </style>
+</head>
+<body class="h-screen flex flex-col dark:bg-gray-900">
+    <!-- Top Navigation -->
+    <nav class="bg-blue-600 text-white p-2 shadow-md">
+        <div class="container mx-auto flex justify-between items-center">
+            <div class="flex items-center space-x-4">
+                <h1 class="text-xl font-bold">Python IDE with Ollama</h1>
+                <div class="hidden md:flex space-x-2">
+                    <button class="px-3 py-1 rounded hover:bg-blue-700">File</button>
+                    <button class="px-3 py-1 rounded hover:bg-blue-700">Edit</button>
+                    <button class="px-3 py-1 rounded hover:bg-blue-700">View</button>
+                    <button class="px-3 py-1 rounded hover:bg-blue-700">Run</button>
+                    <button class="px-3 py-1 rounded hover:bg-blue-700">Tools</button>
+                </div>
+            </div>
+            <div class="flex items-center space-x-4">
+                <button id="theme-toggle" class="p-1 rounded-full hover:bg-blue-700">
+                    <i class="fas fa-moon"></i>
+                </button>
+                <button class="px-3 py-1 bg-blue-700 rounded hover:bg-blue-800">
+                    <i class="fas fa-question-circle"></i> Help
+                </button>
+            </div>
+        </div>
+    </nav>
+    <!-- Main Content Area -->
+    <div class="flex flex-1 overflow-hidden">
+        <!-- Editor Area -->
+        <div class="flex-1 flex flex-col overflow-hidden">
+            <!-- Tabs -->
+            <div class="bg-gray-800 dark:bg-gray-800 flex items-center border-b border-gray-700">
+                <div class="flex overflow-x-auto" id="editor-tabs">
+                    <div class="tab flex items-center px-4 py-2 text-white border-b-2 border-blue-500 tab-active">
+                        <span>main.py</span>
+                        <button class="ml-2 text-gray-400 hover:text-white">
+                            <i class="fas fa-times"></i>
+                        </button>
+                    </div>
+                    <button class="px-3 py-2 text-gray-400 hover:text-white">
+                        <i class="fas fa-plus"></i>
+                    </button>
+                </div>
+            </div>
+            <!-- Code Editor -->
+            <div class="flex-1 overflow-auto">
+                <textarea id="code-editor" class="code-editor w-full h-full p-4 resize-none outline-none dark:bg-gray-800 dark:text-gray-200" spellcheck="false"># Welcome to Python IDE with Ollama integration
+def hello_world():
+    print("Hello, World!")
+if __name__ == "__main__":
+    hello_world()</textarea>
+            </div>
+            <!-- Output Console -->
+            <div class="bg-gray-900 text-gray-200 border-t border-gray-700" style="height: 200px;">
+                <div class="flex justify-between items-center bg-gray-800 px-4 py-2">
+                    <span class="font-mono">Output</span>
+                    <div class="flex space-x-2">
+                        <button class="text-gray-400 hover:text-white">
+                            <i class="fas fa-trash-alt"></i>
+                        </button>
+                        <button class="text-gray-400 hover:text-white">
+                            <i class="fas fa-expand"></i>
+                        </button>
+                    </div>
+                </div>
+                <div id="output-console" class="p-2 font-mono text-sm overflow-y-auto h-full">
+                    <div class="text-green-400">>>> Ready</div>
+                </div>
+            </div>
+            <!-- Toolbar -->
+            <div class="bg-gray-800 px-4 py-2 flex items-center space-x-2 border-t border-gray-700">
+                <button class="px-3 py-1 bg-green-600 text-white rounded hover:bg-green-700 flex items-center">
+                    <i class="fas fa-play mr-2"></i> Run
+                </button>
+                <button class="px-3 py-1 bg-red-600 text-white rounded hover:bg-red-700 flex items-center">
+                    <i class="fas fa-stop mr-2"></i> Stop
+                </button>
+                <button class="px-3 py-1 bg-blue-600 text-white rounded hover:bg-blue-700 flex items-center">
+                    <i class="fas fa-cog mr-2"></i> Build
+                </button>
+                <select class="px-2 py-1 bg-gray-700 text-white rounded border border-gray-600">
+                    <option>.deb</option>
+                    <option>.exe</option>
+                </select>
+                <button class="px-3 py-1 bg-purple-600 text-white rounded hover:bg-purple-700 flex items-center">
+                    <i class="fas fa-plus-circle mr-2"></i> Venv
+                </button>
+                <button class="px-3 py-1 bg-yellow-600 text-white rounded hover:bg-yellow-700 flex items-center">
+                    <i class="fas fa-trash-alt mr-2"></i> Remove Venv
+                </button>
+            </div>
+        </div>
+        <!-- Resize Handle -->
+        <div class="resize-handle"></div>
+        <!-- Chat Panel -->
+        <div class="w-80 bg-gray-800 border-l border-gray-700 flex flex-col">
+            <div class="p-3 border-b border-gray-700 flex justify-between items-center">
+                <h3 class="font-semibold text-white">Ollama Chat</h3>
+                <div class="flex items-center space-x-2">
+                    <select id="model-selector" class="bg-gray-700 text-white text-sm rounded px-2 py-1 border border-gray-600">
+                        <option>llama2</option>
+                        <option>codellama</option>
+                        <option>mistral</option>
+                    </select>
+                    <button id="refresh-models" class="text-gray-400 hover:text-white">
+                        <i class="fas fa-sync-alt"></i>
+                    </button>
+                </div>
+            </div>
+            <!-- Chat Messages -->
+            <div id="chat-messages" class="flex-1 overflow-y-auto p-3 space-y-3">
+                <div class="chat-message bg-blue-600 text-white p-3 rounded-lg self-end">
+                    <div class="font-bold">You:</div>
+                    <div>How can I improve this code?</div>
+                </div>
+                <div class="chat-message bg-gray-700 text-white p-3 rounded-lg">
+                    <div class="font-bold">Ollama:</div>
+                    <div>Here are some suggestions to improve your code:
+1. Add docstrings to document your functions
+2. Consider using type hints
+3. Add error handling</div>
+                </div>
+                <div class="chat-message bg-blue-600 text-white p-3 rounded-lg self-end">
+                    <div class="font-bold">You:</div>
+                    <div>Can you show me an example?</div>
+                </div>
+                <div class="chat-message bg-gray-700 text-white p-3 rounded-lg">
+                    <div class="font-bold">Ollama:</div>
+                    <div class="font-mono text-sm bg-gray-800 p-2 rounded">
+<pre>def hello_world() -> None:
+    """Prints a hello world message to the console."""
+    try:
+        print("Hello, World!")
+    except Exception as e:
+        print(f"An error occurred: {e}")</pre>
+                    </div>
+                </div>
+            </div>
+            <!-- Chat Input -->
+            <div class="p-3 border-t border-gray-700">
+                <div class="relative">
+                    <textarea id="chat-input" class="w-full bg-gray-700 text-white rounded p-2 pr-10 resize-none outline-none" rows="3" placeholder="Ask Ollama about your code..."></textarea>
+                    <button id="send-message" class="absolute right-2 bottom-2 bg-blue-600 text-white p-1 rounded hover:bg-blue-700">
+                        <i class="fas fa-paper-plane"></i>
+                    </button>
+                </div>
+            </div>
+        </div>
+    </div>
+    <!-- Status Bar -->
+    <div class="bg-gray-800 text-gray-300 text-sm px-4 py-1 flex justify-between items-center border-t border-gray-700">
+        <div class="flex items-center space-x-4">
+            <span id="status-message">Ready</span>
+            <span class="hidden md:inline">Python 3.10.6</span>
+        </div>
+        <div class="flex items-center space-x-4">
+            <span id="cursor-position">Ln 1, Col 1</span>
+            <span id="file-encoding">UTF-8</span>
+        </div>
+    </div>
+    <script>
+        // Theme toggle
+        const themeToggle = document.getElementById('theme-toggle');
+        const body = document.body;
+        themeToggle.addEventListener('click', () => {
+            body.classList.toggle('dark');
+            body.classList.toggle('light');
+            if (body.classList.contains('dark')) {
+                themeToggle.innerHTML = '<i class="fas fa-sun"></i>';
+                localStorage.setItem('theme', 'dark');
+            } else {
+                themeToggle.innerHTML = '<i class="fas fa-moon"></i>';
+                localStorage.setItem('theme', 'light');
+            }
+            // Update editor theme
+            updateEditorTheme();
+        });
+        // Initialize theme
+        if (localStorage.getItem('theme') === 'light') {
+            body.classList.remove('dark');
+            body.classList.add('light');
+            themeToggle.innerHTML = '<i class="fas fa-moon"></i>';
+        } else {
+            body.classList.remove('light');
+            body.classList.add('dark');
+            themeToggle.innerHTML = '<i class="fas fa-sun"></i>';
+        }
+        function updateEditorTheme() {
+            const editor = document.getElementById('code-editor');
+            if (body.classList.contains('dark')) {
+                editor.classList.add('dark:bg-gray-800', 'dark:text-gray-200');
+                editor.classList.remove('bg-white', 'text-gray-800');
+            } else {
+                editor.classList.remove('dark:bg-gray-800', 'dark:text-gray-200');
+                editor.classList.add('bg-white', 'text-gray-800');
+            }
+        }
+        // Chat functionality
+        const chatInput = document.getElementById('chat-input');
+        const sendMessageBtn = document.getElementById('send-message');
+        const chatMessages = document.getElementById('chat-messages');
+        const modelSelector = document.getElementById('model-selector');
+        const refreshModelsBtn = document.getElementById('refresh-models');
+        sendMessageBtn.addEventListener('click', sendMessage);
+        chatInput.addEventListener('keydown', (e) => {
+            if (e.key === 'Enter' && !e.shiftKey) {
+                e.preventDefault();
+                sendMessage();
+            }
+        });
+        function sendMessage() {
+            const message = chatInput.value.trim();
+            if (message) {
+                // Add user message
+                addMessage('You', message, true);
+                chatInput.value = '';
+                // Simulate Ollama response
+                setTimeout(() => {
+                    const responses = [
+                        "I've analyzed your code. Here are some suggestions...",
+                        "That's an interesting question. Let me think...",
+                        "Based on your code, I recommend...",
+                        "Here's an improved version of your function:",
+                        "I found a potential issue in your code..."
+                    ];
+                    const randomResponse = responses[Math.floor(Math.random() * responses.length)];
+                    if (message.toLowerCase().includes('example')) {
+                        // Return a code example
+                        addMessage('Ollama', randomResponse, false);
+                        setTimeout(() => {
+                            addCodeExample();
+                        }, 500);
+                    } else {
+                        addMessage('Ollama', randomResponse, false);
+                    }
+                }, 1000);
+            }
+        }
+        function addMessage(sender, message, isUser) {
+            const messageDiv = document.createElement('div');
+            messageDiv.className = `chat-message ${isUser ? 'bg-blue-600 self-end' : 'bg-gray-700'} text-white p-3 rounded-lg ${isUser ? 'self-end' : ''}`;
+            messageDiv.innerHTML = `<div class="font-bold">${sender}:</div><div>${message}</div>`;
+            chatMessages.appendChild(messageDiv);
+            chatMessages.scrollTop = chatMessages.scrollHeight;
+        }
+        function addCodeExample() {
+            const codeDiv = document.createElement('div');
+            codeDiv.className = 'chat-message bg-gray-700 text-white p-3 rounded-lg';
+            codeDiv.innerHTML = `
+                <div class="font-bold">Ollama:</div>
+                <div class="font-mono text-sm bg-gray-800 p-2 rounded">
+                    <pre>def improved_function():\n    """This is a better version of your code."""\n    try:\n        # Improved logic here\n        pass\n    except Exception as e:\n        print(f"Error: {e}")</pre>
+                </div>
+            `;
+            chatMessages.appendChild(codeDiv);
+            chatMessages.scrollTop = chatMessages.scrollHeight;
+        }
+        // Model refresh
+        refreshModelsBtn.addEventListener('click', () => {
+            // Simulate model refresh
+            const statusMessage = document.getElementById('status-message');
+            statusMessage.textContent = 'Refreshing Ollama models...';
+            setTimeout(() => {
+                // Add some dummy models
+                modelSelector.innerHTML = `
+                    <option>llama2</option>
+                    <option selected>codellama</option>
+                    <option>mistral</option>
+                    <option>phi</option>
+                    <option>gemma</option>
+                `;
+                statusMessage.textContent = 'Models refreshed';
+                // Show a toast notification
+                showToast('Models list updated successfully');
+            }, 1500);
+        });
+        // Run button functionality
+        document.querySelector('.bg-green-600').addEventListener('click', () => {
+            const outputConsole = document.getElementById('output-console');
+            const statusMessage = document.getElementById('status-message');
+            outputConsole.innerHTML = '<div class="text-green-400">>>> Running script...</div>';
+            statusMessage.textContent = 'Running script...';
+            // Simulate script execution
+            setTimeout(() => {
+                outputConsole.innerHTML += `
+                    <div class="text-white">Hello, World!</div>
+                    <div class="text-green-400">>>> Script finished (0.12s)</div>
+                `;
+                statusMessage.textContent = 'Script finished';
+            }, 2000);
+        });
+        // Stop button functionality
+        document.querySelector('.bg-red-600').addEventListener('click', () => {
+            const outputConsole = document.getElementById('output-console');
+            const statusMessage = document.getElementById('status-message');
+            outputConsole.innerHTML += '<div class="text-red-400">>>> Script stopped by user</div>';
+            statusMessage.textContent = 'Script stopped';
+        });
+        // Tab functionality
+        document.querySelectorAll('#editor-tabs .tab').forEach(tab => {
+            tab.addEventListener('click', (e) => {
+                if (e.target.tagName !== 'BUTTON') {
+                    document.querySelectorAll('#editor-tabs .tab').forEach(t => {
+                        t.classList.remove('tab-active');
+                    });
+                    tab.classList.add('tab-active');
+                }
+            });
+            const closeBtn = tab.querySelector('button');
+            if (closeBtn) {
+                closeBtn.addEventListener('click', (e) => {
+                    e.stopPropagation();
+                    tab.remove();
+                });
+            }
+        });
+        // Add new tab
+        document.querySelector('#editor-tabs button:last-child').addEventListener('click', () => {
+            const newTab = document.createElement('div');
+            newTab.className = 'tab flex items-center px-4 py-2 text-white border-b-2 border-blue-500 tab-active';
+            newTab.innerHTML = `
+                <span>new_file.py</span>
+                <button class="ml-2 text-gray-400 hover:text-white">
+                    <i class="fas fa-times"></i>
+                </button>
+            `;
+            // Remove active class from other tabs
+            document.querySelectorAll('#editor-tabs .tab').forEach(t => {
+                t.classList.remove('tab-active');
+            });
+            document.querySelector('#editor-tabs').insertBefore(newTab, document.querySelector('#editor-tabs button:last-child'));
+            // Add click handler for the new tab
+            newTab.addEventListener('click', (e) => {
+                if (e.target.tagName !== 'BUTTON') {
+                    document.querySelectorAll('#editor-tabs .tab').forEach(t => {
+                        t.classList.remove('tab-active');
+                    });
+                    newTab.classList.add('tab-active');
+                }
+            });
+            // Add close handler for the new tab
+            newTab.querySelector('button').addEventListener('click', (e) => {
+                e.stopPropagation();
+                newTab.remove();
+            });
+        });
+        // Resize functionality
+        const resizeHandle = document.querySelector('.resize-handle');
+        const editorArea = document.querySelector('.flex-1');
+        const chatPanel = document.querySelector('.w-80');
+        resizeHandle.addEventListener('mousedown', (e) => {
+            e.preventDefault();
+            document.addEventListener('mousemove', resize);
+            document.addEventListener('mouseup', stopResize);
+        });
+        function resize(e) {
+            const newWidth = window.innerWidth - e.clientX;
+            if (newWidth > 300 && newWidth < 600) {
+                chatPanel.style.width = `${newWidth}px`;
+            }
+        }
+        function stopResize() {
+            document.removeEventListener('mousemove', resize);
+        }
+        // Helper function to show toast notifications
+        function showToast(message) {
+            const toast = document.createElement('div');
+            toast.className = 'fixed bottom-4 right-4 bg-gray-800 text-white px-4 py-2 rounded shadow-lg animate-fade-in';
+            toast.textContent = message;
+            document.body.appendChild(toast);
+            setTimeout(() => {
+                toast.classList.add('animate-fade-out');
+                setTimeout(() => toast.remove(), 500);
+            }, 3000);
+        }
+        // Track cursor position in editor
+        const codeEditor = document.getElementById('code-editor');
+        const cursorPosition = document.getElementById('cursor-position');
+        codeEditor.addEventListener('input', updateCursorPosition);
+        codeEditor.addEventListener('click', updateCursorPosition);
+        codeEditor.addEventListener('keydown', updateCursorPosition);
+        function updateCursorPosition() {
+            const text = codeEditor.value;
+            const cursorPos = codeEditor.selectionStart;
+            let line = 1;
+            let col = 1;
+            for (let i = 0; i < cursorPos; i++) {
+                if (text[i] === '\n') {
+                    line++;
+                    col = 1;
+                } else {
+                    col++;
+                }
+            }
+            cursorPosition.textContent = `Ln ${line}, Col ${col}`;
+        }
+        // Initialize cursor position
+        updateCursorPosition();
+    </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=developerbayman/neat-python-ide-im-making-thought-it-was-gonna-help-me-with-python-and-did-this-in-html" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
+</html>