Update app.py

app.py

@@ -14,7 +14,7 @@ HTML_CONTENT = """
     <title>Radd PRO Uploader</title>
     <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;600&display=swap" rel="stylesheet">
     <style>
-        /* Global Styles */
+        /* Global Styles /
         body {
             font-family: 'Poppins', sans-serif;
             background-color: #121212;
@@ -24,7 +24,7 @@ HTML_CONTENT = """
             overflow: hidden;
         }
 
-        /* Moving Grainy Background */
+        / Moving Grainy Background /
         body::before {
             content: "";
             position: fixed;
@@ -52,6 +52,13 @@ HTML_CONTENT = """
             100% { transform: translate(5%, 0); }
         }
 
+        / Glow Animation /
+        @keyframes glowAnimation {
+            0% { box-shadow: 0 0 5px rgba(0, 150, 255, 0.3); }
+            50% { box-shadow: 0 0 20px rgba(0, 150, 255, 0.6); }
+            100% { box-shadow: 0 0 5px rgba(0, 150, 255, 0.3); }
+        }
+
         .container {
             position: relative;
             max-width: 450px;
@@ -72,13 +79,13 @@ HTML_CONTENT = """
             text-shadow: 0 0 5px rgba(255, 255, 255, 0.2);
         }
 
-        /* Buttons */
+        / Buttons /
         .btn {
             display: inline-block;
             position: relative;
-            padding: 12px 24px;
-            margin: 0.5rem;
-            font-size: 1rem;
+            padding: 8px 16px;
+            margin: 0.3rem;
+            font-size: 0.9rem;
             font-weight: 600;
             color: #ffffff;
             background-color: #2a2a2a;
@@ -92,67 +99,32 @@ HTML_CONTENT = """
 
         .btn:hover {
             color: #ffffff;
-            box-shadow: 0 0 15px rgba(0, 122, 255, 0.5);
+            box-shadow: 0 0 15px rgba(0,150,255,0.5);
         }
 
         .btn:hover::before {
             content: '';
             position: absolute;
             inset: -10px;
-            background: radial-gradient(circle at center, rgba(0,122,255,0.2), transparent);
+            background: radial-gradient(circle at center, rgba(0,150,255,0.2), transparent);
             filter: blur(20px);
             animation: glowAnimation 2s infinite;
             z-index: -1;
             pointer-events: none;
         }
 
-        @keyframes glowAnimation {
-            0% { transform: scale(0.8); }
-            50% { transform: scale(1.2); }
-            100% { transform: scale(0.8); }
-        }
-
         .btn:active {
             transform: scale(0.98);
         }
 
-        /* Small Buttons */
-        .small-btn {
-            padding: 8px 16px;
-            font-size: 0.9rem;
-            font-weight: 500;
-            background-color: #2a2a2a;
-            color: #ffffff;
-            border: none;
-            border-radius: 5px;
-            cursor: pointer;
-            transition: color 0.3s ease, box-shadow 0.3s ease;
-            position: relative;
-            overflow: hidden;
-            z-index: 1;
-        }
-
-        .small-btn:hover {
-            color: #ffffff;
-            box-shadow: 0 0 10px rgba(0, 122, 255, 0.5);
-        }
-
-        .small-btn:hover::before {
-            content: '';
-            position: absolute;
-            inset: -10px;
-            background: radial-gradient(circle at center, rgba(0,122,255,0.2), transparent);
-            filter: blur(15px);
-            animation: glowAnimation 2s infinite;
-            z-index: -1;
-            pointer-events: none;
-        }
-
-        .small-btn:active {
-            transform: scale(0.98);
+        / Specific Button Sizes /
+        .copy-btn, .embed-btn {
+            padding: 6px 12px;
+            font-size: 0.8rem;
+            margin: 0.2rem;
         }
 
-        /* Drop Zone */
+        / Drop Zone /
         .drop-zone {
             position: relative;
             padding: 20px;
@@ -162,25 +134,29 @@ HTML_CONTENT = """
             cursor: pointer;
             transition: all 0.3s ease;
             background: rgba(255, 255, 255, 0.05);
+            overflow: hidden;
         }
 
-        .drop-zone:hover, .drop-zone.drag-over {
-            border-color: #ffffff;
-            background: rgba(255, 255, 255, 0.1);
-            position: relative;
-        }
-
-        .drop-zone:hover::before {
+        .drop-zone::before {
             content: '';
             position: absolute;
-            inset: -10px;
-            background: radial-gradient(circle at center, rgba(0,122,255,0.2), transparent);
-            filter: blur(20px);
-            animation: glowAnimation 2s infinite;
-            z-index: -1;
+            inset: 0;
+            background: none;
+            transition: background 0.3s ease;
             pointer-events: none;
         }
 
+        .drop-zone:hover::before {
+            background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADwAAAA8CAQAAACM/9unAAAACXBIWXMAAAsTAAALEwEAmpwYAAABF0lEQVR4nO3YMRLCQBRE0clsYgxZwwq7oLGxAgp2AtbsqQZsYgEG0wEWc/LSZnb9HcMjR8fHvEKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgsK8tJOq9fzs7vlkNlWvf5ELi+20t5k2VSL7p/iHJ5Rz5ynOhU7rQ4pUi+6b4hyeUc+cpzoVO60OkV7rQ4pUi+6b4hxenu+en4rQAOkaks/eJegGaUfOHI+nRvQCND1w2J9yf8C2KZwNjkeUsAKRa7Nz50tQAokVbO/U6AaiWjl5wd6kQAOke8Xpx3JgTQKVq7Heh0ADpFvF6cd0kE0Claux3odAA6RfxenHc+BNCpWrsd6HQAOkX8Xpx3PgTQqVq7Heh0ADpF/F6cdz4E0KlarjdI/cR1FBQUGBgYGBgYGBgYG/AT4AIHph6aQGU7oAAAAASUVORK5CYII=') repeat;
+            animation: grain 8s steps(10) infinite;
+            opacity: 0.3;
+        }
+
+        .drop-zone:hover, .drop-zone.drag-over {
+            border-color: #ffffff;
+            background: rgba(255, 255, 255, 0.1);
+        }
+
         .file-input {
             display: none;
         }
@@ -191,7 +167,7 @@ HTML_CONTENT = """
             color: #aaa;
         }
 
-        /* Progress Bar */
+        / Progress Bar /
         .progress-container {
             display: none;
             margin-top: 1.5rem;
@@ -213,7 +189,7 @@ HTML_CONTENT = """
             transition: width 0.3s ease;
         }
 
-        /* Loading Spinner */
+        / Loading Spinner /
         .loading-spinner {
             display: none;
             width: 40px;
@@ -230,7 +206,7 @@ HTML_CONTENT = """
             100% { transform: rotate(360deg); }
         }
 
-        /* Result Container */
+        / Result Container /
         .result-container {
             display: none;
             margin-top: 1.5rem;
@@ -248,14 +224,14 @@ HTML_CONTENT = """
             text-decoration: underline;
         }
 
-        /* File Types */
+        / File Types /
         .file-types {
             margin-top: 2rem;
             font-size: 0.8rem;
             color: #aaa;
         }
 
-        /* Modal Styles */
+        / Modal Styles /
         .modal {
             display: none;
             position: fixed;
@@ -319,7 +295,7 @@ HTML_CONTENT = """
             margin-right: 10px;
         }
 
-        /* Media Queries */
+        / Media Queries /
         @media (max-width: 480px) {
             .container {
                 padding: 2rem 1rem;
@@ -346,7 +322,7 @@ HTML_CONTENT = """
         <h1>Radd PRO Uploader</h1>
         <form id="uploadForm">
             <div id="dropZone" class="drop-zone">
-                <input type="file" name="file" id="file" class="file-input" accept=".zip,.mp4,.txt,.mp3,image/*,.pdf" required>
+                <input type="file" name="file" id="file" class="file-input" accept=".zip,.mp4,.txt,.mp3,image/,.pdf" required>
                 <label for="file" class="btn">Choose File</label>
                 <p>or drag and drop file here/paste image</p>
             </div>
@@ -363,12 +339,12 @@ HTML_CONTENT = """
 
     <div id="embedModal" class="modal">
         <div class="modal-content">
-            <span class="close">&times;</span>
+            <span class="close">×</span>
             <h2>Embed Video Link</h2>
             <p>Copy the following link to embed the video:</p>
             <div class="embed-container">
                 <input type="text" id="embedLink" readonly>
-                <button onclick="copyEmbedLink()" class="small-btn copy-embed-btn">Copy</button>
+                <button onclick="copyEmbedLink()" class="btn copy-embed-btn">Copy</button>
             </div>
         </div>
     </div>
@@ -394,6 +370,10 @@ HTML_CONTENT = """
             }
         });
 
+        dropZone.addEventListener('click', () => {
+            fileInput.click();
+        });
+
         dropZone.addEventListener('dragover', (e) => {
             e.preventDefault();
             dropZone.classList.add('drag-over');
@@ -512,13 +492,13 @@ HTML_CONTENT = """
 
             const link = document.createElement('a');
             link.href = url;
-            link.textContent = `View ${fileName}`;
+            link.textContent = View ${fileName};
             link.className = 'result-link';
             link.target = '_blank';
 
             const copyBtn = document.createElement('button');
             copyBtn.textContent = 'Copy Link';
-            copyBtn.className = 'small-btn copy-btn';
+            copyBtn.className = 'btn copy-btn';
             copyBtn.onclick = () => {
                 navigator.clipboard.writeText(window.location.origin + url).then(() => {
                     alert('Link copied to clipboard!');
@@ -531,7 +511,7 @@ HTML_CONTENT = """
             if (fileName.toLowerCase().endsWith('.mp4')) {
                 const embedBtn = document.createElement('button');
                 embedBtn.textContent = 'Embed Video for Discord';
-                embedBtn.className = 'small-btn embed-btn';
+                embedBtn.className = 'btn embed-btn';
                 embedBtn.onclick = () => {
                     showEmbedModal(url);
                 };
@@ -543,7 +523,7 @@ HTML_CONTENT = """
         }
 
         function showEmbedModal(url) {
-            const embedUrl = `${window.location.origin}/embed?url=${encodeURIComponent(window.location.origin + url)}&thumbnail=${encodeURIComponent('https://example.com/thumbnail.png')}`;
+            const embedUrl = ${window.location.origin}/embed?url=${encodeURIComponent(window.location.origin + url)}&thumbnail=${encodeURIComponent('https://example.com/thumbnail.png')};
             embedLinkInput.value = embedUrl;
             modal.style.display = "block";
         }
@@ -598,7 +578,7 @@ async def handle_video_stream(path: str, request: Request):
             yield chunk
 
     headers = dict(response.headers)
-    headers['Access-Control-Allow-Origin'] = '*'
+    headers['Access-Control-Allow-Origin'] = ''
     headers['Content-Disposition'] = 'inline'
 
     if response.status_code == 206:
@@ -662,10 +642,10 @@ async def initiate_upload(cookies: Dict[str, str], filename: str, content_type:
     try:
         response = requests.post(url, cookies=cookies, headers={
             'X-CSRFToken': cookies.get('csrftoken'),
-            'User-Agent': 'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/128.0.0.0 Safari/537.36',
+            'User-Agent': 'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWeb/537.36 (KHTML, like Gecko) Chrome/128.0.0.0 Safari/537.36',
             'Referer': 'https://replicate.com/levelsio/neon-tokyo',
             'Origin': 'https://replicate.com',
-            'Accept': '*/*',
+            'Accept': '/*',
             'Accept-Language': 'en-US,en;q=0.5',
             'Accept-Encoding': 'identity',
             'Sec-Fetch-Dest': 'empty',