Spaces:

bk939448
/

Image-Optimizer-API

Running

App Files Files Community

bk939448 commited on Feb 22

Commit

490ce53

verified ·

1 Parent(s): d54fb16

Update app.py

Browse files

Files changed (1) hide show

app.py +53 -33

app.py CHANGED Viewed

@@ -140,66 +140,79 @@ HTML_UI = """
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Skynet DMCA Killer</title>
     <style>
-        body { font-family: 'Courier New', Courier, monospace; background: #050505; color: #0f0; padding: 20px; max-width: 800px; margin: auto; }
-        .card { background: #111; padding: 25px; border-radius: 8px; border: 1px solid #0f0; box-shadow: 0 0 15px rgba(0, 255, 0, 0.2); }
-        h2 { color: #0f0; border-bottom: 1px dashed #0f0; padding-bottom: 10px; text-transform: uppercase; }
-        .input-group { background: #1a1a1a; padding: 15px; border-radius: 5px; margin-bottom: 15px; border: 1px solid #333; }
-        input[type="text"], input[type="file"], select { width: 100%; padding: 12px; margin: 8px 0; background: #000; color: #0f0; border: 1px solid #0f0; outline: none; box-sizing: border-box; }
-        button { width: 100%; padding: 15px; background: #0f0; color: #000; font-weight: bold; border: none; cursor: pointer; text-transform: uppercase; margin-top: 10px; font-size: 16px; }
-        button:hover { background: #fff; color: #000; }
-        button:disabled { background: #333; color: #666; cursor: not-allowed; }
-        #result { margin-top: 25px; padding: 15px; background: #002200; border-left: 4px solid #0f0; display: none; word-wrap: break-word; }
-        .url-box { background: #000; padding: 10px; border: 1px dashed #0f0; margin: 10px 0; font-size: 14px; }
-        .stats { display: flex; justify-content: space-between; font-weight: bold; font-size: 14px; margin-top: 10px; color: #fff; }
     </style>
 </head>
 <body>
     <div class="card">
-        <h2>🛡️ DMCA Killer v4.0 (XOR Encrypted)</h2>
         <div class="input-group">
-            <label><b>Option 1: Paste Image URL</b></label>
-            <input type="text" id="imgUrl" placeholder="🔗 https://example.com/movie.jpg">
         </div>
         <div class="input-group">
-            <label><b>Option 2: Direct File Upload</b></label>
             <input type="file" id="imgFile" accept="image/*">
         </div>
         <select id="level">
-            <option value="none">💎 None (Original Quality, Bypass Compression)</option>
-            <option value="extreme" selected>🍋 Extreme (Max Compression, ~60KB)</option>
-            <option value="medium">🍎 Medium (~150KB)</option>
         </select>
-        <button onclick="uploadImage()" id="btn">⚡ Encrypt & Deploy to HF</button>
         <div id="result">
-            <h3 style="margin:0 0 10px 0;">✅ DEPLOYMENT SUCCESSFUL</h3>
-            <p style="margin: 0; color: #aaa;">Cloudflare Worker URL (Safe for DB):</p>
             <div class="url-box" id="resLink"></div>
             <div class="stats">
-                <span id="oldSize">Original: -- KB</span>
-                <span id="newSize" style="color:#0f0;">Encrypted: -- KB</span>
             </div>
-            <p style="margin-top: 10px; font-size: 12px; color: yellow;">⚠️ Note: This URL will only work if your Cloudflare Worker is active!</p>
         </div>
     </div>
     <script>
-        async function uploadImage() {
             const btn = document.getElementById('btn');
             const urlInput = document.getElementById('imgUrl').value;
             const fileInput = document.getElementById('imgFile').files[0];
             const level = document.getElementById('level').value;
             const resDiv = document.getElementById('result');
-            if(!urlInput && !fileInput) { alert("Please provide a URL or select a File!"); return; }
-            btn.innerText = "⏳ Encrypting Data & Uploading...";
             btn.disabled = true;
             resDiv.style.display = "none";
@@ -214,18 +227,25 @@ HTML_UI = """
                 if(data.success) {
                     document.getElementById('resLink').innerText = data.url;
-                    document.getElementById('oldSize').innerText = `Original: ${data.original_size_kb} KB`;
-                    document.getElementById('newSize').innerText = `Encrypted: ${data.encrypted_size_kb} KB`;
                     resDiv.style.display = "block";
                 } else {
-                    alert("❌ Error: " + data.error);
                 }
             } catch (err) {
-                alert("❌ Critical Network Error!");
             }
-            btn.innerText = "⚡ Encrypt & Deploy to HF";
             btn.disabled = false;
         }
     </script>
 </body>
 </html>

 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>OptiPix Pro | Smart Image Optimizer</title>
     <style>
+        :root { --primary: #3b82f6; --bg: #0f172a; --card: #1e293b; --text: #f1f5f9; }
+        body { font-family: 'Inter', system-ui, sans-serif; background: var(--bg); color: var(--text); padding: 20px; max-width: 700px; margin: auto; }
+        .card { background: var(--card); padding: 30px; border-radius: 16px; box-shadow: 0 10px 25px rgba(0,0,0,0.3); border: 1px solid #334155; }
+        h2 { color: #fff; margin-top: 0; font-size: 24px; text-align: center; }
+        p.sub { text-align: center; color: #94a3b8; font-size: 14px; margin-bottom: 25px; }
+        .input-group { background: #0f172a; padding: 15px; border-radius: 10px; margin-bottom: 20px; border: 1px solid #334155; }
+        label { display: block; font-weight: 600; margin-bottom: 8px; font-size: 14px; color: #3b82f6; }
+        input[type="text"], input[type="file"], select { width: 100%; padding: 12px; background: #1e293b; color: #fff; border: 1px solid #475569; border-radius: 8px; outline: none; box-sizing: border-box; font-size: 14px; }
+        input:focus { border-color: var(--primary); }
+        button { width: 100%; padding: 14px; background: var(--primary); color: white; font-weight: bold; border: none; border-radius: 8px; cursor: pointer; font-size: 16px; transition: 0.3s; margin-top: 10px; }
+        button:hover { background: #2563eb; transform: translateY(-1px); }
+        button:disabled { background: #475569; cursor: not-allowed; transform: none; }
+        #result { margin-top: 30px; padding: 20px; background: #064e3b; border-radius: 12px; display: none; animation: fadeIn 0.5s ease; }
+        .url-box { background: #0f172a; padding: 12px; border: 1px solid #059669; border-radius: 6px; margin: 10px 0; font-family: monospace; font-size: 13px; color: #34d399; overflow-x: auto; white-space: nowrap; }
+        .stats { display: flex; justify-content: space-between; font-size: 13px; margin-top: 15px; background: rgba(0,0,0,0.2); padding: 8px 12px; border-radius: 6px; }
+        .preview-img { max-width: 100%; border-radius: 8px; margin-top: 15px; border: 1px solid #334155; display: block; }
+        @keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
+        .copy-btn { background: #334155; color: #fff; padding: 5px 10px; font-size: 11px; border-radius: 4px; border: none; cursor: pointer; float: right; margin-top: -35px; margin-right: 5px; }
     </style>
 </head>
 <body>
     <div class="card">
+        <h2>🚀 OptiPix Pro</h2>
+        <p class="sub">High-performance AI image compression and cloud hosting.</p>
         <div class="input-group">
+            <label>Remote Image URL</label>
+            <input type="text" id="imgUrl" placeholder="https://example.com/image.jpg">
         </div>
+        <div style="text-align: center; margin-bottom: 20px; color: #475569; font-size: 12px;">— OR —</div>
         <div class="input-group">
+            <label>Upload Local Image</label>
             <input type="file" id="imgFile" accept="image/*">
         </div>
+        <label>Compression Level</label>
         <select id="level">
+            <option value="none">Original (No Compression)</option>
+            <option value="extreme" selected>Web-Ready (Max Optimization)</option>
+            <option value="medium">Standard (Balanced)</option>
         </select>
+        <button onclick="processImage()" id="btn">Optimize & Host Image</button>
         <div id="result">
+            <h3 style="margin:0 0 10px 0; font-size: 18px; color: #34d399;">✅ Processing Complete</h3>
+            <p style="margin: 0; color: #a7f3d0; font-size: 13px;">CDN Optimized Link:</p>
             <div class="url-box" id="resLink"></div>
+            <button class="copy-btn" onclick="copyUrl()">Copy URL</button>
             <div class="stats">
+                <span>Original: <span id="oldSize">--</span> KB</span>
+                <span style="color: #34d399;">Optimized: <span id="newSize">--</span> KB</span>
             </div>
+            <img id="resImg" class="preview-img" src="" alt="Preview">
         </div>
     </div>
     <script>
+        async function processImage() {
             const btn = document.getElementById('btn');
             const urlInput = document.getElementById('imgUrl').value;
             const fileInput = document.getElementById('imgFile').files[0];
             const level = document.getElementById('level').value;
             const resDiv = document.getElementById('result');
+            if(!urlInput && !fileInput) { alert("Please provide an image source!"); return; }
+            btn.innerText = "⚡ Processing on Cloud...";
             btn.disabled = true;
             resDiv.style.display = "none";
                 if(data.success) {
                     document.getElementById('resLink').innerText = data.url;
+                    document.getElementById('oldSize').innerText = data.original_size_kb;
+                    document.getElementById('newSize').innerText = data.encrypted_size_kb;
+                    document.getElementById('resImg').src = data.url;
                     resDiv.style.display = "block";
                 } else {
+                    alert("Processing Error: " + data.error);
                 }
             } catch (err) {
+                alert("Cloud connection failed!");
             }
+            btn.innerText = "Optimize & Host Image";
             btn.disabled = false;
         }
+        function copyUrl() {
+            const url = document.getElementById('resLink').innerText;
+            navigator.clipboard.writeText(url);
+            alert("Link copied to clipboard!");
+        }
     </script>
 </body>
 </html>