Update app.py

app.py

@@ -397,6 +397,9 @@ def b64_to_pil(b64_str):
     if not b64_str:
         return None
     try:
+        if is_image_url(b64_str):
+            with urlopen(b64_str, timeout=15) as response:
+                return Image.open(BytesIO(response.read())).convert("RGB")
         if b64_str.startswith("data:"):
             _, data = b64_str.split(",", 1)
         else:
@@ -700,6 +703,21 @@ footer{display:none!important}
 .upload-click-area svg{width:86px;height:86px;max-width:100%;flex-shrink:0}
 .upload-main-text{color:#a1a1aa;font-size:14px;font-weight:600;margin-top:4px}
 .upload-sub-text{color:#71717a;font-size:12px}
+.upload-url-box{
+    margin-top:14px;display:flex;gap:8px;width:min(520px,100%);max-width:100%;
+    align-items:center;justify-content:center;flex-wrap:wrap;
+}
+.upload-url-input{
+    flex:1;min-width:240px;background:#09090b;border:1px solid #27272a;border-radius:10px;
+    color:#e4e4e7;padding:10px 12px;font-size:13px;outline:none;
+}
+.upload-url-input:focus{border-color:#ADFF2F;box-shadow:0 0 0 3px rgba(173,255,47,.14)}
+.upload-url-input::placeholder{color:#52525b}
+.upload-url-btn{
+    min-width:96px;height:40px;padding:0 14px;background:rgba(173,255,47,.12);border:1px solid rgba(173,255,47,.28);
+    border-radius:10px;cursor:pointer;color:#D6FF8C;font-size:12px;font-weight:700;transition:all .15s ease;
+}
+.upload-url-btn:hover{background:#ADFF2F;border-color:#ADFF2F;color:#111}
 .single-preview-wrap{
     width:100%;height:100%;display:none;align-items:center;justify-content:center;padding:16px;
     overflow:hidden;
@@ -937,13 +955,15 @@ function init() {
     const previewImg = document.getElementById('single-preview-img');
     const btnUpload = document.getElementById('preview-upload-btn');
     const btnClear = document.getElementById('preview-clear-btn');
+    const urlInput = document.getElementById('image-url-input');
+    const urlBtn = document.getElementById('image-url-btn');
     const promptInput = document.getElementById('custom-query-input');
     const promptPanel = document.getElementById('prompt-panel');
     const promptTabsBar = document.getElementById('prompt-tabs-bar');
     const runBtnEl = document.getElementById('custom-run-btn');
     const outputArea = document.getElementById('custom-output-textarea');
     const imgStatus = document.getElementById('sb-image-status');
-    if (!dropZone || !fileInput || !promptInput || !previewWrap || !previewImg) {
+    if (!dropZone || !fileInput || !promptInput || !previewWrap || !previewImg || !urlInput || !urlBtn) {
         setTimeout(init, 250);
         return;
     }
@@ -1034,8 +1054,8 @@ function init() {
         return false;
     }
     function syncImageToGradio() {
-        setGradioValue('hidden-image-b64', imageState ? imageState.b64 : '');
-        const txt = imageState ? '1 image uploaded' : 'No image uploaded';
+        setGradioValue('hidden-image-b64', imageState ? imageState.value : '');
+        const txt = imageState ? ('Image ready: ' + (imageState.name || 'image')) : 'No image uploaded';
         if (imgStatus) imgStatus.textContent = txt;
     }
     function syncPromptToGradio() {
@@ -1045,11 +1065,12 @@ function init() {
     function syncModelToGradio(name) {
         setGradioValue('hidden-model-name', name);
     }
-    function setPreview(b64, name) {
-        imageState = {b64, name: name || 'image'};
-        previewImg.src = b64;
+    function setPreview(src, name, value) {
+        imageState = {src, name: name || 'image', value: value || src};
+        previewImg.src = src;
         previewWrap.style.display = 'flex';
         if (uploadPrompt) uploadPrompt.style.display = 'none';
+        if (urlInput) urlInput.value = '';
         syncImageToGradio();
     }
     window.__setPreview = setPreview;
@@ -1068,14 +1089,47 @@ function init() {
             return;
         }
         const reader = new FileReader();
-        reader.onload = (e) => setPreview(e.target.result, file.name);
+        reader.onload = (e) => setPreview(e.target.result, file.name, e.target.result);
         reader.readAsDataURL(file);
     }
+    function applyImageUrl() {
+        const raw = urlInput.value.trim();
+        if (!raw) {
+            showToast('Enter an image URL', 'warning');
+            return;
+        }
+        let parsed;
+        try {
+            parsed = new URL(raw);
+        } catch (e) {
+            showToast('Invalid image URL', 'error');
+            return;
+        }
+        if (!['http:', 'https:'].includes(parsed.protocol)) {
+            showToast('Only http/https image URLs are supported', 'error');
+            return;
+        }
+        const testImg = new Image();
+        testImg.onload = () => {
+            const name = parsed.pathname.split('/').filter(Boolean).pop() || parsed.hostname;
+            setPreview(raw, name, raw);
+            showToast('Image URL loaded', 'info');
+        };
+        testImg.onerror = () => showToast('Could not load image from URL', 'error');
+        testImg.src = raw;
+    }
     fileInput.addEventListener('change', (e) => {
         const file = e.target.files && e.target.files[0] ? e.target.files[0] : null;
         if (file) processFile(file);
         e.target.value = '';
     });
+    urlBtn.addEventListener('click', applyImageUrl);
+    urlInput.addEventListener('keydown', (e) => {
+        if (e.key === 'Enter') {
+            e.preventDefault();
+            applyImageUrl();
+        }
+    });
     if (uploadClick) uploadClick.addEventListener('click', () => fileInput.click());
     if (btnUpload) btnUpload.addEventListener('click', () => fileInput.click());
     if (btnClear) btnClear.addEventListener('click', clearPreview);
@@ -1252,7 +1306,7 @@ function init() {
         try {
             const data = JSON.parse(raw);
             if (data.status === 'ok') {
-                if (data.image) setPreview(data.image, data.name || 'example.jpg');
+                if (data.image) setPreview(data.image, data.name || 'example.jpg', data.image);
                 if (data.query) {
                     promptInput.value = data.query;
                     syncPromptToGradio();
@@ -1456,6 +1510,10 @@ with gr.Blocks() as demo:
                             {UPLOAD_PREVIEW_SVG}
                             <span class="upload-main-text">Click or drag an image here</span>
                             <span class="upload-sub-text">Upload one document, page, receipt, screenshot, or scene image for OCR and vision tasks</span>
+                            <div class="upload-url-box">
+                                <input id="image-url-input" class="upload-url-input" type="url" placeholder="...or paste an image URL">
+                                <button id="image-url-btn" class="upload-url-btn" type="button">Use URL</button>
+                            </div>
                         </div>
                     </div>
                     <input id="custom-file-input" type="file" accept="image/*" style="display:none;" />
@@ -1470,7 +1528,7 @@ with gr.Blocks() as demo:
                     </div>
                 </div>
                 <div class="hint-bar">
-                    <b>Upload:</b> Click or drag to add an image &nbsp;&middot;&nbsp;
+                    <b>Upload:</b> Click, drag, or paste an image URL &nbsp;&middot;&nbsp;
                     <b>Model:</b> Switch model tabs from the header &nbsp;&middot;&nbsp;
                     <kbd>Clear</kbd> removes the current image
                 </div>