Inject JS via gr.Blocks(js=) instead of inline script tags

Gradio strips script tags from gr.HTML for security. Move all
JS to the js= parameter and CSS to css= parameter on Blocks.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

app.py

@@ -252,29 +252,29 @@ CUSTOM_HTML = """
         </div>
     </div>
 </div>
+"""
+
+CUSTOM_CSS = _CHAT_UI_CSS + """
+#explorer-app { font-family: var(--font-family, 'Inter', system-ui, sans-serif); max-width: 800px; margin: 0 auto; }
+#setup-panel { padding: 24px 0; }
+.setup-field { margin-bottom: 16px; }
+.setup-field label { display: block; font-size: 13px; color: #6B7280; margin-bottom: 4px; }
+#token-input { width: 100%; padding: 8px 12px; border: 1px solid #E5E7EB; border-radius: 4px; font-family: inherit; font-size: 14px; }
+#token-input:focus { outline: none; border-color: #4682B4; }
+.drop-zone { border: 2px dashed #E5E7EB; border-radius: 8px; padding: 32px; text-align: center; color: #9CA3AF; cursor: pointer; transition: border-color 0.2s; }
+.drop-zone.drag-over { border-color: #4682B4; background: #f0f7ff; }
+.drop-zone p { margin: 0; }
+.file-label { color: #4682B4; cursor: pointer; text-decoration: underline; }
+#file-list { margin-top: 8px; font-size: 13px; color: #374151; text-align: left; }
+#file-list div { padding: 2px 0; }
+#start-btn { width: 100%; padding: 10px; background: #4682B4; color: white; border: none; border-radius: 4px; font-family: inherit; font-size: 14px; cursor: pointer; margin-top: 8px; }
+#start-btn:disabled { background: #D1D5DB; cursor: default; }
+#start-btn:not(:disabled):hover { background: #3a6f9a; }
+#chat-panel { padding-top: 8px; }
+"""
 
-<style>""" + _CHAT_UI_CSS + """</style>
-<script>""" + _CHAT_UI_JS + """</script>
-<style>
-    #explorer-app { font-family: var(--font-family, 'Inter', system-ui, sans-serif); max-width: 800px; margin: 0 auto; }
-    #setup-panel { padding: 24px 0; }
-    .setup-field { margin-bottom: 16px; }
-    .setup-field label { display: block; font-size: 13px; color: #6B7280; margin-bottom: 4px; }
-    #token-input { width: 100%; padding: 8px 12px; border: 1px solid #E5E7EB; border-radius: 4px; font-family: inherit; font-size: 14px; }
-    #token-input:focus { outline: none; border-color: #4682B4; }
-    .drop-zone { border: 2px dashed #E5E7EB; border-radius: 8px; padding: 32px; text-align: center; color: #9CA3AF; cursor: pointer; transition: border-color 0.2s; }
-    .drop-zone.drag-over { border-color: #4682B4; background: #f0f7ff; }
-    .drop-zone p { margin: 0; }
-    .file-label { color: #4682B4; cursor: pointer; text-decoration: underline; }
-    #file-list { margin-top: 8px; font-size: 13px; color: #374151; text-align: left; }
-    #file-list div { padding: 2px 0; }
-    #start-btn { width: 100%; padding: 10px; background: #4682B4; color: white; border: none; border-radius: 4px; font-family: inherit; font-size: 14px; cursor: pointer; margin-top: 8px; }
-    #start-btn:disabled { background: #D1D5DB; cursor: default; }
-    #start-btn:not(:disabled):hover { background: #3a6f9a; }
-    #chat-panel { padding-top: 8px; }
-</style>
-<script>
-(function() {
+CUSTOM_JS = _CHAT_UI_JS + """
+;(function() {
     var API_BASE = window.location.origin;
     var tokenInput = document.getElementById('token-input');
     var fileInput = document.getElementById('file-input');
@@ -320,7 +320,6 @@ CUSTOM_HTML = """
         startBtn.disabled = true;
         startBtn.textContent = 'Uploading...';
 
-        // Step 1: Upload files to Gradio's file endpoint
         var formData = new FormData();
         selectedFiles.forEach(function(f) { formData.append('files', f); });
 
@@ -330,7 +329,6 @@ CUSTOM_HTML = """
         })
         .then(function(r) { return r.json(); })
         .then(function(uploadedPaths) {
-            // Step 2: Call our setup endpoint with the server file paths
             return fetch(API_BASE + '/gradio_api/call/upload', {
                 method: 'POST',
                 headers: { 'Content-Type': 'application/json' },
@@ -418,7 +416,7 @@ CUSTOM_HTML = """
                         finalHtml += '<div class="chat-stats">' + eventData.stats + '</div>';
                     }
                     if (eventData.trace_html) {
-                        finalHtml += '<button class="chat-trace-toggle" onclick="this.nextElementSibling.classList.toggle(\'open\')">trace</button>';
+                        finalHtml += '<button class="chat-trace-toggle" onclick="this.nextElementSibling.classList.toggle(\\'open\\')">trace</button>';
                         finalHtml += '<div class="chat-trace">' + eventData.trace_html + '</div>';
                     }
                     turn.innerHTML = '<div class="chat-question">' + escapeHtml(question) + '</div>' + finalHtml;
@@ -455,12 +453,11 @@ CUSTOM_HTML = """
         });
     });
 })();
-</script>
 """
 
 
 def build_app() -> gr.Blocks:
-    with gr.Blocks(title="Document Explorer") as demo:
+    with gr.Blocks(title="Document Explorer", css=CUSTOM_CSS, js=CUSTOM_JS) as demo:
         gr.HTML(CUSTOM_HTML)
 
         # Hidden state for file upload workspace