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,13 +52,6 @@ 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;
@@ -79,13 +72,13 @@ HTML_CONTENT = """
             text-shadow: 0 0 5px rgba(255, 255, 255, 0.2);
         }
 
-        / Buttons /
+        /* Buttons */
         .btn {
             display: inline-block;
             position: relative;
-            padding: 8px 16px;
-            margin: 0.3rem;
-            font-size: 0.9rem;
+            padding: 12px 24px;
+            margin: 0.5rem;
+            font-size: 1rem;
             font-weight: 600;
             color: #ffffff;
             background-color: #2a2a2a;
@@ -99,32 +92,67 @@ HTML_CONTENT = """
 
         .btn:hover {
             color: #ffffff;
-            box-shadow: 0 0 15px rgba(0,150,255,0.5);
+            box-shadow: 0 0 15px rgba(0, 122, 255, 0.5);
         }
 
         .btn:hover::before {
             content: '';
             position: absolute;
             inset: -10px;
-            background: radial-gradient(circle at center, rgba(0,150,255,0.2), transparent);
+            background: radial-gradient(circle at center, rgba(0,122,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);
         }
 
-        / Specific Button Sizes /
-        .copy-btn, .embed-btn {
-            padding: 6px 12px;
-            font-size: 0.8rem;
-            margin: 0.2rem;
+        /* 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);
         }
 
-        / Drop Zone /
+        /* Drop Zone */
         .drop-zone {
             position: relative;
             padding: 20px;
@@ -134,27 +162,23 @@ HTML_CONTENT = """
             cursor: pointer;
             transition: all 0.3s ease;
             background: rgba(255, 255, 255, 0.05);
-            overflow: hidden;
-        }
-
-        .drop-zone::before {
-            content: '';
-            position: absolute;
-            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);
+            position: relative;
+        }
+
+        .drop-zone:hover::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;
+            pointer-events: none;
         }
 
         .file-input {
@@ -167,7 +191,7 @@ HTML_CONTENT = """
             color: #aaa;
         }
 
-        / Progress Bar /
+        /* Progress Bar */
         .progress-container {
             display: none;
             margin-top: 1.5rem;
@@ -189,7 +213,7 @@ HTML_CONTENT = """
             transition: width 0.3s ease;
         }
 
-        / Loading Spinner /
+        /* Loading Spinner */
         .loading-spinner {
             display: none;
             width: 40px;
@@ -206,7 +230,7 @@ HTML_CONTENT = """
             100% { transform: rotate(360deg); }
         }
 
-        / Result Container /
+        /* Result Container */
         .result-container {
             display: none;
             margin-top: 1.5rem;
@@ -224,14 +248,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;
@@ -295,7 +319,7 @@ HTML_CONTENT = """
             margin-right: 10px;
         }
 
-        / Media Queries /
+        /* Media Queries */
         @media (max-width: 480px) {
             .container {
                 padding: 2rem 1rem;
@@ -322,7 +346,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>
@@ -339,12 +363,12 @@ HTML_CONTENT = """
 
     <div id="embedModal" class="modal">
         <div class="modal-content">
-            <span class="close">×</span>
+            <span class="close">&times;</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="btn copy-embed-btn">Copy</button>
+                <button onclick="copyEmbedLink()" class="small-btn copy-embed-btn">Copy</button>
             </div>
         </div>
     </div>
@@ -370,10 +394,6 @@ HTML_CONTENT = """
             }
         });
 
-        dropZone.addEventListener('click', () => {
-            fileInput.click();
-        });
-
         dropZone.addEventListener('dragover', (e) => {
             e.preventDefault();
             dropZone.classList.add('drag-over');
@@ -492,13 +512,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 = 'btn copy-btn';
+            copyBtn.className = 'small-btn copy-btn';
             copyBtn.onclick = () => {
                 navigator.clipboard.writeText(window.location.origin + url).then(() => {
                     alert('Link copied to clipboard!');
@@ -511,7 +531,7 @@ HTML_CONTENT = """
             if (fileName.toLowerCase().endsWith('.mp4')) {
                 const embedBtn = document.createElement('button');
                 embedBtn.textContent = 'Embed Video for Discord';
-                embedBtn.className = 'btn embed-btn';
+                embedBtn.className = 'small-btn embed-btn';
                 embedBtn.onclick = () => {
                     showEmbedModal(url);
                 };
@@ -523,7 +543,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";
         }
@@ -578,7 +598,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:
@@ -642,10 +662,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) AppleWeb/537.36 (KHTML, like Gecko) Chrome/128.0.0.0 Safari/537.36',
+            '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',
             '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',