Fix binary/image handling - use blob for preview

app.py

@@ -629,18 +629,14 @@ def ui():
             try {
                 const res = await fetch(url, opts);
                 const elapsed = Math.round(performance.now() - start);
-                const text = await res.text();
+                const contentType = res.headers.get('content-type') || '';
+                const isBinary = contentType.includes('image/') || contentType.includes('octet-stream');
 
                 // Status
                 const statusEl = document.getElementById('status');
                 statusEl.textContent = res.status + ' ' + res.statusText;
                 statusEl.className = 'status-value ' + (res.ok ? 'status-ok' : (res.status >= 500 ? 'status-err' : 'status-warn'));
 
-                // Meta
-                document.getElementById('time').textContent = elapsed + 'ms';
-                document.getElementById('size').textContent = text.length > 1024 ? (text.length / 1024).toFixed(1) + ' KB' : text.length + ' B';
-                document.getElementById('content-type').textContent = res.headers.get('content-type')?.split(';')[0] || '-';
-
                 // Response headers
                 const headersHtml = [];
                 res.headers.forEach((value, name) => {
@@ -648,21 +644,41 @@ def ui():
                 });
                 document.getElementById('response-headers').innerHTML = headersHtml.join('') || '<div style="color:#86868b">No headers</div>';
 
-                // Raw response
-                document.getElementById('response-raw').textContent = text;
+                if (isBinary) {
+                    // Handle binary data
+                    const blob = await res.blob();
+                    document.getElementById('time').textContent = elapsed + 'ms';
+                    document.getElementById('size').textContent = blob.size > 1024 ? (blob.size / 1024).toFixed(1) + ' KB' : blob.size + ' B';
+                    document.getElementById('content-type').textContent = contentType.split(';')[0] || '-';
 
-                // Formatted response
-                let display;
-                try {
-                    const json = JSON.parse(text);
-                    display = highlightJSON(JSON.stringify(json, null, 2));
-                } catch {
-                    display = text.replace(/</g, '&lt;').replace(/>/g, '&gt;');
-                }
-                document.getElementById('response').innerHTML = display;
+                    document.getElementById('response-raw').textContent = `[Binary data: ${blob.size} bytes]`;
+                    document.getElementById('response').innerHTML = `<span style="color:#86868b">[Binary data: ${blob.size} bytes, type: ${contentType}]</span>`;
+
+                    // Preview binary
+                    renderBinaryPreview(blob, contentType, url);
+                } else {
+                    // Handle text data
+                    const text = await res.text();
+                    document.getElementById('time').textContent = elapsed + 'ms';
+                    document.getElementById('size').textContent = text.length > 1024 ? (text.length / 1024).toFixed(1) + ' KB' : text.length + ' B';
+                    document.getElementById('content-type').textContent = contentType.split(';')[0] || '-';
+
+                    // Raw response
+                    document.getElementById('response-raw').textContent = text;
+
+                    // Formatted response
+                    let display;
+                    try {
+                        const json = JSON.parse(text);
+                        display = highlightJSON(JSON.stringify(json, null, 2));
+                    } catch {
+                        display = text.replace(/</g, '&lt;').replace(/>/g, '&gt;');
+                    }
+                    document.getElementById('response').innerHTML = display;
 
-                // Preview
-                renderPreview(text, res.headers.get('content-type') || '');
+                    // Preview
+                    renderPreview(text, contentType);
+                }
 
             } catch (err) {
                 document.getElementById('status').textContent = 'Error';
@@ -680,7 +696,26 @@ def ui():
         document.getElementById('url').onkeydown = (e) => { if (e.key === 'Enter') sendRequest(); };
         sendRequest();
 
-        // Preview rendering
+        // Preview rendering for binary content
+        function renderBinaryPreview(blob, contentType, url) {
+            const container = document.getElementById('preview-container');
+            const ct = contentType.toLowerCase();
+
+            if (ct.includes('image/')) {
+                const blobUrl = URL.createObjectURL(blob);
+                container.innerHTML = `<img class="preview-image" src="${blobUrl}" alt="Image preview" onload="URL.revokeObjectURL(this.src)">`;
+            } else {
+                // Generic binary
+                container.innerHTML = `<div class="preview-text" style="text-align:center;padding:40px;">
+                    <div style="font-size:32px;margin-bottom:12px;">Binary Data</div>
+                    <div style="color:#86868b;">${blob.size} bytes</div>
+                    <div style="color:#86868b;">${contentType}</div>
+                    <a href="${url}" download style="display:inline-block;margin-top:16px;padding:8px 16px;background:#007aff;color:#fff;border-radius:6px;text-decoration:none;">Download</a>
+                </div>`;
+            }
+        }
+
+        // Preview rendering for text content
         function renderPreview(text, contentType) {
             const container = document.getElementById('preview-container');
             const ct = contentType.toLowerCase();
@@ -693,10 +728,6 @@ def ui():
                 iframe.srcdoc = text;
                 container.innerHTML = '';
                 container.appendChild(iframe);
-            } else if (ct.includes('image/')) {
-                // Show image (requires blob URL for binary)
-                const url = document.getElementById('url').value;
-                container.innerHTML = `<img class="preview-image" src="${url}" alt="Image preview">`;
             } else if (ct.includes('application/json') || ct.includes('json')) {
                 // Interactive JSON tree
                 try {