Upload folder using huggingface_hub

gradio_app.py

@@ -521,13 +521,67 @@ def create_gradio_interface():
             overflow: hidden !important;
         }
         
-        /* Code editor styling */
-        .code-container .cm-editor {
+        /* Force text selection on ALL code elements */
+        .code-container,
+        .code-container *,
+        .code-container textarea,
+        .code-container input,
+        .code-container .cm-editor,
+        .code-container .cm-content,
+        .code-container .cm-line {
+            user-select: text !important;
+            -webkit-user-select: text !important;
+            -moz-user-select: text !important;
+            -ms-user-select: text !important;
+            cursor: text !important;
+        }
+        
+        /* Make selection visible */
+        .code-container .cm-editor ::selection {
+            background: #3b82f6 !important;
+            color: white !important;
+        }
+        
+        .code-container .cm-editor ::-moz-selection {
+            background: #3b82f6 !important;
+            color: white !important;
+        }
+        
+        /* Make cursor visible */
+        .code-container .cm-cursor {
+            border-color: #3b82f6 !important;
+            border-width: 2px !important;
+            opacity: 1 !important;
+            visibility: visible !important;
+        }
+        
+        /* Ensure selection works in CodeMirror */
+        .code-container .cm-selectionBackground {
+            background: #3b82f6 !important;
+            opacity: 0.3 !important;
+        }
+        
+        /* Make sure focused state is visible */
+        .code-container .cm-focused {
+            outline: 2px solid #3b82f6 !important;
+            outline-offset: 2px !important;
+        }
+        
+        /* Code textbox styling */
+        .code-container textarea {
             background: #ffffff !important;
+            border: none !important;
             border-radius: 4px !important;
             font-family: 'SF Mono', 'Monaco', 'Inconsolata', 'Roboto Mono', 'Fira Code', monospace !important;
             font-size: 14px !important;
             line-height: 1.5 !important;
+            padding: 1.5rem !important;
+            color: #2d3748 !important;
+            font-weight: 500 !important;
+            resize: vertical !important;
+            white-space: pre !important;
+            overflow-wrap: normal !important;
+            word-break: normal !important;
         }
         
         /* Enable soft wrapping for code content */
@@ -694,6 +748,38 @@ def create_gradio_interface():
         [role="listbox"][style*="background"] {
             background: #ffffff !important;
         }
+        </script>
+        
+        <script>
+        // Fix CodeMirror text selection after page loads
+        document.addEventListener('DOMContentLoaded', function() {
+            setTimeout(function() {
+                // Find all CodeMirror editors
+                const editors = document.querySelectorAll('.code-container .cm-editor');
+                editors.forEach(editor => {
+                    // Enable text selection on CodeMirror
+                    editor.style.userSelect = 'text';
+                    editor.style.webkitUserSelect = 'text';
+                    editor.style.mozUserSelect = 'text';
+                    
+                    // Find the content area
+                    const content = editor.querySelector('.cm-content');
+                    if (content) {
+                        content.style.userSelect = 'text';
+                        content.style.webkitUserSelect = 'text';
+                        content.style.mozUserSelect = 'text';
+                    }
+                    
+                    // Add event listeners to ensure selection works
+                    editor.addEventListener('mousedown', function(e) {
+                        e.stopPropagation();
+                    });
+                });
+            }, 1000);
+        });
+        </script>
+        
+        <style>
         
         /* Accordion title styling - target the actual Gradio accordion elements */
         button.label-wrap > span:first-child,
@@ -1034,7 +1120,7 @@ def create_gradio_interface():
                     elem_classes="view-prompt-btn"
                 )
             
-            # Code Output
+            # Code Output - back to Code component with better selection
             code_output = gr.Code(
                 label="Generated Code",
                 language="python",
@@ -1043,6 +1129,7 @@ def create_gradio_interface():
                 show_label=True,
                 elem_classes="code-container",
                 show_line_numbers=False,
+                wrap_lines=True,
                 value="# Your optimized diffusion code will appear here after generation\n# Click 'Generate Optimized Code' to create hardware-specific Python code\n\nprint('Ready to generate AI art with optimized performance!')"
             )