Spaces:

akhaliq
/

gradio-IDE

Runtime error

App Files Files Community

akhaliq HF Staff commited on Feb 25

Commit

655b364

verified ·

1 Parent(s): 6655081

Create app.py

Browse files

Files changed (1) hide show

app.py +260 -0

app.py ADDED Viewed

	@@ -0,0 +1,260 @@

+import gradio as gr
+import os
+import tempfile
+import shutil
+from pathlib import Path
+# Helper functions
+def read_file(file_path):
+    if not file_path:
+        return "", ""
+    try:
+        with open(file_path, 'r', encoding='utf-8') as f:
+            content = f.read()
+        # Get file extension for syntax highlighting
+        ext = os.path.splitext(file_path)[1].lstrip('.')
+        if ext in ['js', 'py', 'html', 'css', 'json', 'md', 'txt']:
+            language = ext
+        elif ext in ['jsx', 'tsx']:
+            language = 'javascript'
+        else:
+            language = 'text'
+        return content, language
+    except Exception as e:
+        return f"Error reading file: {str(e)}", "text"
+def save_file(file_path, content):
+    if not file_path:
+        return "No file selected"
+    try:
+        with open(file_path, 'w', encoding='utf-8') as f:
+            f.write(content)
+        return f"Successfully saved to {file_path}"
+    except Exception as e:
+        return f"Error saving file: {str(e)}"
+def create_file(folder_path, file_name):
+    if not folder_path or not file_name:
+        return "Please select a folder and provide a file name"
+    try:
+        file_path = os.path.join(folder_path, file_name)
+        with open(file_path, 'w', encoding='utf-8') as f:
+            f.write("")
+        return f"Created file: {file_path}"
+    except Exception as e:
+        return f"Error creating file: {str(e)}"
+def render_html(code):
+    if not code:
+        return "<p>No HTML to render</p>"
+    return code
+def run_python(code):
+    if not code:
+        return "No code to run"
+    try:
+        # Create a temporary file to execute the code
+        with tempfile.NamedTemporaryFile(suffix='.py', delete=False) as temp:
+            temp_name = temp.name
+            temp.write(code.encode('utf-8'))
+        # Redirect stdout to capture output
+        import sys
+        from io import StringIO
+        old_stdout = sys.stdout
+        redirected_output = StringIO()
+        sys.stdout = redirected_output
+        # Execute the code
+        with open(temp_name, 'r') as f:
+            exec(f.read())
+        # Restore stdout and get the output
+        sys.stdout = old_stdout
+        output = redirected_output.getvalue()
+        # Clean up
+        os.unlink(temp_name)
+        return output if output.strip() else "Code executed successfully (no output)"
+    except Exception as e:
+        return f"Error executing code: {str(e)}"
+# Setup demo workspace
+def setup_demo_workspace():
+    demo_dir = os.path.join(os.getcwd(), "demo_workspace")
+    if not os.path.exists(demo_dir):
+        os.makedirs(demo_dir)
+        # Create some example files
+        with open(os.path.join(demo_dir, "index.html"), "w") as f:
+            f.write("""<!DOCTYPE html>
+<html>
+<head>
+    <title>Example Page</title>
+    <link rel="stylesheet" href="style.css">
+</head>
+<body>
+    <h1>Hello, Gradio IDE!</h1>
+    <p>This is a sample HTML file.</p>
+    <script src="script.js"></script>
+</body>
+</html>""")
+        with open(os.path.join(demo_dir, "style.css"), "w") as f:
+            f.write("""body {
+    font-family: Arial, sans-serif;
+    margin: 0;
+    padding: 20px;
+    background-color: #f0f0f0;
+}
+h1 {
+    color: #333;
+}""")
+        with open(os.path.join(demo_dir, "script.js"), "w") as f:
+            f.write("""console.log('Hello from JavaScript!');
+document.addEventListener('DOMContentLoaded', function() {
+    console.log('Page loaded!');
+});""")
+        with open(os.path.join(demo_dir, "example.py"), "w") as f:
+            f.write("""def greet(name):
+    return f"Hello, {name}!"
+# Test the function
+print(greet("World"))
+# Some example code
+for i in range(5):
+    print(f"Count: {i}")""")
+    return demo_dir
+# Create the Gradio interface
+def create_ide():
+    # Setup demo workspace
+    workspace_dir = setup_demo_workspace()
+    with gr.Blocks(title="Gradio IDE") as app:
+        gr.Markdown("# Gradio IDE")
+        with gr.Row():
+            with gr.Column(scale=1):
+                gr.Markdown("### File Explorer")
+                file_explorer = gr.FileExplorer(
+                    root_dir=workspace_dir,
+                    height=500,
+                    label="Files"
+                )
+                with gr.Row():
+                    new_file_name = gr.Textbox(label="New File Name")
+                    create_btn = gr.Button("Create File")
+                current_folder = gr.Textbox(label="Current Folder", interactive=False)
+                status = gr.Textbox(label="Status", interactive=False)
+            with gr.Column(scale=2):
+                current_file = gr.Textbox(label="Current File", interactive=False)
+                code_editor = gr.Code(
+                    label="Code Editor",
+                    language="python",
+                    height=500,
+                    elem_id="code-editor"
+                )
+                with gr.Row():
+                    save_btn = gr.Button("Save File")
+                    run_btn = gr.Button("Run Code")
+                output_console = gr.Textbox(label="Output Console", interactive=False, lines=6)
+        with gr.Tab("HTML Preview"):
+            html_preview = gr.HTML(label="Preview")
+            render_btn = gr.Button("Render HTML")
+        with gr.Tab("Help"):
+            gr.Markdown("""
+            ## How to use the Gradio IDE
+            1. Browse files using the File Explorer on the left
+            2. Click on a file to open it in the Code Editor
+            3. Edit the file content as needed
+            4. Click "Save File" to save your changes
+            5. For HTML files, go to the HTML Preview tab and click "Render HTML"
+            6. For Python files, click "Run Code" to execute and see the output
+            7. To create a new file, enter a name and click "Create File"
+            Enjoy coding!
+            """)
+        # Event handlers
+        def update_file_selection(selected_path):
+            path = selected_path[0] if selected_path else ""
+            if os.path.isdir(path):
+                return "", "", path, f"Selected folder: {path}"
+            content, language = read_file(path)
+            folder = os.path.dirname(path) if path else ""
+            return content, language, folder, f"Opened file: {path}"
+        file_explorer.change(
+            update_file_selection,
+            inputs=[file_explorer],
+            outputs=[code_editor, code_editor.language, current_folder, status]
+        )
+        def update_current_file(selected_path):
+            if selected_path and os.path.isfile(selected_path[0]):
+                return selected_path[0]
+            return ""
+        file_explorer.change(
+            update_current_file,
+            inputs=[file_explorer],
+            outputs=[current_file]
+        )
+        save_btn.click(
+            save_file,
+            inputs=[current_file, code_editor],
+            outputs=[status]
+        )
+        create_btn.click(
+            create_file,
+            inputs=[current_folder, new_file_name],
+            outputs=[status]
+        ).then(
+            lambda: gr.update(value=""),
+            outputs=[new_file_name]
+        )
+        run_btn.click(
+            run_python,
+            inputs=[code_editor],
+            outputs=[output_console]
+        )
+        render_btn.click(
+            render_html,
+            inputs=[code_editor],
+            outputs=[html_preview]
+        )
+    return app
+# Create and launch the app
+ide_app = create_ide()
+if __name__ == "__main__":
+    ide_app.launch()