Update app.py

app.py

@@ -1,204 +1,320 @@
 import gradio as gr
-import json
 import time
 
-# Simulated file storage (in-memory dictionary for demo)
-files = {"untitled.py": ""}
+# Simulated file storage (in-memory dictionary)
+files = {"untitled.py": ""}  # file_name: content
+open_files = ["untitled.py"]  # List of open files
 
 # Load file content into editor
-def load_file(file, current_file):
+def load_file(file, current_file, open_files):
     global files
     if file is not None:
         with open(file.name, "r") as f:
             code = f.read()
         filename = file.name.split("/")[-1]
         files[filename] = code
-        return code, filename, list(files.keys()), code
-    return files.get(current_file, ""), current_file, list(files.keys()), files.get(current_file, "")
+        if filename not in open_files:
+            open_files.append(filename)
+        return code, filename, list(files.keys()), open_files, code
+    return files.get(current_file, ""), current_file, list(files.keys()), open_files, files.get(current_file, "")
 
 # Save current file content
 def save_file(code, current_file):
     global files
     files[current_file] = code
-    return list(files.keys()), f"Saved {current_file}"
+    return f"Saved {current_file}"
 
-# Simulate running code with terminal history
+# Simulate running code
 def run_code(code, terminal_history):
     timestamp = time.strftime("%H:%M:%S")
     output = f"[{timestamp}] Ran:\n{code}\nOutput: Simulated execution successful"
     return f"{terminal_history}\n{output}".strip()
 
-# AI-powered suggestions (expandable with real model)
+# Process terminal commands
+def process_command(cmd, files, history):
+    if cmd.strip() == "ls":
+        output = "\n".join(files.keys())
+    elif cmd.startswith("echo "):
+        output = cmd[5:]
+    else:
+        output = f"Command not recognized: {cmd}"
+    return f"{history}\n$ {cmd}\n{output}"
+
+# AI-powered suggestions
 def get_suggestions(code):
-    if "def" in code.lower():
+    code = code.lower()
+    if "def" in code:
         return ["def function_name():", "def main():", "def __init__(self):"]
-    elif "print" in code.lower():
+    elif "print" in code:
         return ["print('Hello, World!')", "print(variable)", "print(f'String: {var}')"]
-    elif "import" in code.lower():
+    elif "import" in code:
         return ["import os", "import sys", "import numpy as np"]
     return ["# Start typing for suggestions"]
 
-# Insert suggestion into editor
+# Insert suggestion
 def insert_suggestion(code, suggestion):
     if suggestion:
         lines = code.split("\n")
         last_line = lines[-1]
-        if last_line.strip():
-            return code + "\n" + suggestion
-        return code + suggestion
+        return code + ("\n" + suggestion if last_line.strip() else suggestion)
     return code
 
-# Switch tabs (load different file)
-def switch_tab(selected_file):
-    global files
-    return files.get(selected_file, ""), selected_file, list(files.keys())
+# Switch tabs
+def switch_tab(selected, files):
+    return files.get(selected, ""), selected
 
 # Add new file
-def add_new_file():
-    global files
+def add_new_file(open_files, files):
     new_file = f"untitled_{len(files)}.py"
     files[new_file] = ""
-    return "", new_file, list(files.keys())
+    open_files.append(new_file)
+    return "", new_file, list(files.keys()), open_files, files[new_file]
 
-# Download current file
+# Close tab
+def close_tab(open_files, current_file, files):
+    if len(open_files) > 1:
+        new_open_files = [f for f in open_files if f != current_file]
+        new_current = new_open_files[0]
+        return new_open_files, new_current, files[new_current]
+    return open_files, current_file, files[current_file]
+
+# Download file
 def download_code(code, current_file):
     return code, current_file
 
-# Gradio interface with VS Code-like complexity
+# Process command palette
+def process_palette(cmd, theme, files, current_file):
+    if cmd == "theme dark":
+        return "dark", "Theme set to dark"
+    elif cmd == "theme light":
+        return "light", "Theme set to light"
+    elif cmd == "save":
+        files[current_file] = code_editor.value
+        return theme, f"Saved {current_file}"
+    return theme, f"Command not found: {cmd}"
+
+# Gradio interface
 with gr.Blocks(
     title="VS Code Clone",
     css="""
-        .gradio-container { background-color: #1e1e1e; color: #d4d4d4; font-family: 'Consolas', monospace; height: 100vh; }
-        .topbar { background-color: #333333; padding: 5px; border-bottom: 1px solid #3c3c3c; }
-        .sidebar { background-color: #252526; padding: 10px; border-right: 1px solid #3c3c3c; }
-        .editor { background-color: #252526; border: 1px solid #3c3c3c; }
+        .gradio-container { background-color: #1e1e1e; color: #d4d4d4; font-family: 'Consolas', monospace; height: 100vh; margin: 0; }
+        .activity-bar { background-color: #333; padding: 10px; width: 50px; min-width: 50px; }
+        .sidebar { background-color: #252526; padding: 10px; width: 200px; min-width: 200px; }
+        .editor { background-color: #1e1e1e; border: none; }
         .terminal { background-color: #0e0e0e; color: #b5cea8; font-size: 12px; }
-        .suggestions { background-color: #252526; border: 1px solid #3c3c3c; }
-        button { background-color: #007acc; color: white; border: none; padding: 5px 10px; margin: 2px; }
-        button:hover { background-color: #005f99; }
+        .status-bar { background-color: #007acc; color: white; padding: 5px; }
         .tabs { display: flex; gap: 5px; background-color: #1e1e1e; padding: 5px; border-bottom: 1px solid #3c3c3c; }
         .tab { background-color: #2d2d2d; padding: 5px 10px; cursor: pointer; }
         .tab.active { background-color: #007acc; }
-        .file-list { max-height: 200px; overflow-y: auto; }
-    """,
-    theme="dark"
+        button { background-color: #007acc; color: white; border: none; padding: 5px; margin: 2px; }
+        button:hover { background-color: #005f99; }
+        .file-list { max-height: 300px; overflow-y: auto; }
+        .command-palette { position: absolute; top: 20%; left: 30%; width: 40%; background: #252526; z-index: 1000; padding: 10px; }
+        .light .gradio-container { background-color: #ffffff; color: #000000; }
+        .light .editor { background-color: #ffffff; color: #000000; }
+        .light .sidebar { background-color: #f3f3f3; }
+        .light .terminal { background-color: #f0f0f0; color: #000000; }
+        .light .status-bar { background-color: #0066cc; }
+        .light .tabs { background-color: #ffffff; }
+        .light .tab { background-color: #e0e0e0; }
+        .light .tab.active { background-color: #0066cc; }
+    """
 ) as app:
     # States
     current_file = gr.State(value="untitled.py")
     terminal_history = gr.State(value="")
+    theme_state = gr.State(value="dark")
+    cursor_position = gr.State(value="Ln 1, Col 1")
 
-    # Top bar with controls
-    with gr.Row(elem_classes="topbar"):
-        run_button = gr.Button("▶ Run")
-        save_button = gr.Button("💾 Save")
-        new_file_button = gr.Button("➕ New File")
-        gr.Markdown(f"### VS Code Clone - {time.strftime('%Y-%m-%d')}", elem_classes="topbar")
-
-    # Tabbed editor
-    with gr.Row(elem_classes="tabs"):
-        file_tabs = gr.Dropdown(label="Open Files", choices=list(files.keys()), value="untitled.py", interactive=True)
-
-    # Main layout
+    # Layout
     with gr.Row():
+        # Activity Bar
+        with gr.Column(scale=0, elem_classes="activity-bar"):
+            explorer_btn = gr.Button("📁")
+            terminal_btn = gr.Button("🖥️")
+
         # Sidebar (File Explorer)
-        with gr.Column(scale=1, elem_classes="sidebar"):
+        with gr.Column(scale=1, visible=False, elem_classes="sidebar") as sidebar:
             gr.Markdown("### Explorer")
             file_upload = gr.File(label="Upload File")
             file_list = gr.Listbox(label="Files", choices=list(files.keys()), interactive=True, elem_classes="file-list")
-            status_display = gr.Textbox(label="Status", interactive=False)
 
-        # Editor and Terminal/Suggestions
+        # Editor Pane
         with gr.Column(scale=4):
-            code_editor = gr.Code(
-                label="Editor",
-                language="python",
-                lines=20,
-                elem_classes="editor"
-            )
+            with gr.Row(elem_classes="tabs"):
+                file_tabs = gr.Dropdown(label="Open Files", choices=open_files, value="untitled.py", interactive=True)
+                new_file_btn = gr.Button("➕")
+                close_tab_btn = gr.Button("❌")
+            code_editor = gr.Code(label="Editor", language="python", lines=20, elem_classes="editor")
             with gr.Row():
-                terminal_output = gr.Textbox(label="Terminal", lines=10, elem_classes="terminal")
-                suggestions_list = gr.Listbox(label="Suggestions", choices=[], interactive=True, elem_classes="suggestions")
+                with gr.Column(scale=3):
+                    terminal_panel = gr.Column(visible=False, elem_classes="terminal")
+                    with terminal_panel:
+                        terminal_output = gr.Textbox(label="Terminal", lines=10, interactive=False)
+                        terminal_input = gr.Textbox(label=">", placeholder="Type command and press Enter")
+                with gr.Column(scale=1):
+                    suggestions_list = gr.Listbox(label="Suggestions", choices=[], interactive=True)
+
+    # Status Bar
+    with gr.Row(elem_classes="status-bar"):
+        run_btn = gr.Button("▶ Run")
+        save_btn = gr.Button("💾 Save")
+        status_info = gr.Textbox(value="Python • Ln 1, Col 1", interactive=False)
+
+    # Command Palette
+    command_palette = gr.Textbox(label="> Command Palette", visible=False, elem_classes="command-palette")
 
-    # Hidden download output
+    # Hidden Download Output
     download_output = gr.File(label="Download", visible=False)
 
-    # JavaScript for keyboard shortcuts (Ctrl+S to save, Ctrl+R to run)
+    # JavaScript for shortcuts and cursor tracking
     app.load(_js="""
     () => {
+        const editor = document.querySelector('#code_editor textarea');
+        const status = document.querySelector('#status_info input');
+        const palette = document.querySelector('#command_palette');
+        const themeInput = document.querySelector('#theme_state input');
+        const container = document.querySelector('.gradio-container');
+
+        // Cursor position
+        function getCursorPosition(textarea) {
+            const text = textarea.value;
+            const pos = textarea.selectionStart;
+            const lines = text.substr(0, pos).split('\\n');
+            return `Python • Ln ${lines.length}, Col ${lines[lines.length - 1].length + 1}`;
+        }
+        editor.addEventListener('keyup', () => {
+            status.value = getCursorPosition(editor);
+            status.dispatchEvent(new Event('input'));
+        });
+        editor.addEventListener('click', () => {
+            status.value = getCursorPosition(editor);
+            status.dispatchEvent(new Event('input'));
+        });
+
+        // Shortcuts
         document.addEventListener('keydown', (e) => {
+            if (e.ctrlKey && e.shiftKey && e.key === 'P') {
+                e.preventDefault();
+                palette.style.display = 'block';
+                palette.querySelector('input').focus();
+            }
             if (e.ctrlKey && e.key === 's') {
                 e.preventDefault();
-                document.querySelectorAll('button')[1].click(); // Save button
+                document.querySelector('#save_btn').click();
             }
             if (e.ctrlKey && e.key === 'r') {
                 e.preventDefault();
-                document.querySelectorAll('button')[0].click(); // Run button
+                document.querySelector('#run_btn').click();
             }
         });
+
+        // Hide palette on Escape
+        palette.querySelector('input').addEventListener('keydown', (e) => {
+            if (e.key === 'Escape') {
+                palette.style.display = 'none';
+            }
+        });
+
+        // Theme switching
+        container.classList.add(themeInput.value);
+        const observer = new MutationObserver(() => {
+            container.classList.remove('light', 'dark');
+            container.classList.add(themeInput.value);
+        });
+        observer.observe(themeInput, {attributes: true});
     }
-    """)
+    """, outputs=[status_info])
+
+    # Event Handlers
+    explorer_btn.click(lambda v: gr.update(visible=not v), inputs=[sidebar.visible], outputs=[sidebar])
+    terminal_btn.click(lambda v: gr.update(visible=not v), inputs=[terminal_panel.visible], outputs=[terminal_panel])
 
-    # Event handlers
-    # File upload
     file_upload.change(
-        fn=load_file,
-        inputs=[file_upload, current_file],
-        outputs=[code_editor, current_file, file_list, code_editor]
+        load_file,
+        inputs=[file_upload, current_file, file_tabs.choices],
+        outputs=[code_editor, current_file, file_list, file_tabs, code_editor]
     )
 
-    # Save file
-    save_button.click(
-        fn=save_file,
+    save_btn.click(
+        save_file,
         inputs=[code_editor, current_file],
-        outputs=[file_list, status_display]
+        outputs=[status_info]
     ).then(
-        fn=download_code,
+        download_code,
         inputs=[code_editor, current_file],
         outputs=[download_output]
     )
 
-    # Run code
-    run_button.click(
-        fn=run_code,
+    run_btn.click(
+        run_code,
         inputs=[code_editor, terminal_history],
         outputs=[terminal_output]
     ).then(
-        fn=lambda x: x,
+        lambda x: x,
+        inputs=[terminal_output],
+        outputs=[terminal_history]
+    )
+
+    terminal_input.submit(
+        process_command,
+        inputs=[terminal_input, files, terminal_history],
+        outputs=[terminal_output]
+    ).then(lambda: "", outputs=[terminal_input]).then(
+        lambda x: x,
         inputs=[terminal_output],
         outputs=[terminal_history]
     )
 
-    # Suggestions
     code_editor.change(
-        fn=get_suggestions,
+        get_suggestions,
         inputs=[code_editor],
         outputs=[suggestions_list]
     )
+
     suggestions_list.select(
-        fn=insert_suggestion,
+        insert_suggestion,
         inputs=[code_editor, suggestions_list],
         outputs=[code_editor]
     )
 
-    # Tab switching
     file_tabs.change(
-        fn=switch_tab,
-        inputs=[file_tabs],
-        outputs=[code_editor, current_file, file_list]
+        switch_tab,
+        inputs=[file_tabs, files],
+        outputs=[code_editor, current_file]
+    )
+
+    new_file_btn.click(
+        add_new_file,
+        inputs=[file_tabs.choices, files],
+        outputs=[code_editor, current_file, file_list, file_tabs, code_editor]
     )
 
-    # New file
-    new_file_button.click(
-        fn=add_new_file,
-        outputs=[code_editor, current_file, file_list]
+    close_tab_btn.click(
+        close_tab,
+        inputs=[file_tabs.choices, current_file, files],
+        outputs=[file_tabs.choices, current_file, code_editor]
+    ).then(
+        lambda open_files, current_file: gr.update(choices=open_files, value=current_file),
+        inputs=[file_tabs.choices, current_file],
+        outputs=[file_tabs]
     )
 
-    # File list selection
     file_list.select(
-        fn=switch_tab,
-        inputs=[file_list],
-        outputs=[code_editor, current_file, file_list]
+        lambda selected, open_files, files: (files[selected], selected, open_files + [selected] if selected not in open_files else open_files),
+        inputs=[file_list, file_tabs.choices, files],
+        outputs=[code_editor, current_file, file_tabs.choices]
+    ).then(
+        lambda open_files, current_file: gr.update(choices=open_files, value=current_file),
+        inputs=[file_tabs.choices, current_file],
+        outputs=[file_tabs]
     )
 
-# Launch the app
+    command_palette.submit(
+        process_palette,
+        inputs=[command_palette, theme_state, files, current_file],
+        outputs=[theme_state, status_info]
+    ).then(lambda: gr.update(visible=False), outputs=[command_palette])
+
+# Launch
 app.launch()