Spaces:

coollsd
/

fileuploader

Running

App Files Files Community

coollsd commited on 3 days ago

Commit

ebde77a

•

1 Parent(s): d82c03c

Update app.py

Browse files

Files changed (1) hide show

app.py +277 -483

app.py CHANGED Viewed

@@ -1,7 +1,6 @@
 from fastapi import FastAPI, File, UploadFile, Request
 from fastapi.responses import HTMLResponse, JSONResponse, StreamingResponse
 import requests
-import time
 import asyncio
 from typing import Dict
@@ -12,328 +11,245 @@ HTML_CONTENT = """
 <html lang="en">
 <head>
     <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Radd PRO Uploader</title>
-    <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;600&display=swap" rel="stylesheet">
     <style>
-        body {
-            font-family: 'Poppins', sans-serif;
-            background-color: #121212;
-            color: #e0e0e0;
             margin: 0;
-            min-height: 100vh;
-            display: flex;
-            justify-content: center;
-            align-items: center;
-            padding: 20px;
             box-sizing: border-box;
         }
-        body::before {
-            content: "";
-            position: fixed;
-            top: 0;
-            left: 0;
-            width: 100%;
-            height: 100%;
-            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.2;
-            pointer-events: none;
         }
-        @keyframes grain {
-            0% { transform: translate(0, 0); }
-            10% { transform: translate(-5%, -5%); }
-            20% { transform: translate(-10%, 5%); }
-            30% { transform: translate(5%, -10%); }
-            40% { transform: translate(-5%, 15%); }
-            50% { transform: translate(-10%, 5%); }
-            60% { transform: translate(15%, 0); }
-            70% { transform: translate(0, 10%); }
-            80% { transform: translate(-15%, 0); }
-            90% { transform: translate(10%, 5%); }
-            100% { transform: translate(5%, 0); }
         }
         .container {
-            position: relative;
-            width: 100%;
-            max-width: 450px;
-            margin: 0 auto;
             padding: 2rem;
-            background: rgba(18, 18, 18, 0.9);
             backdrop-filter: blur(10px);
-            border-radius: 15px;
-            z-index: 1;
             text-align: center;
-            box-shadow: 0 0 20px rgba(0, 0, 0, 0.8);
-        }
-        h1 {
-            margin-bottom: 1.5rem;
-            font-size: 1.8rem;
-            color: #ffffff;
-            text-shadow: 0 0 5px rgba(255, 255, 255, 0.2);
         }
-        .btn {
-            display: inline-block;
-            position: relative;
-            padding: 12px 24px;
-            margin: 0.5rem;
-            font-size: 1rem;
-            font-weight: 600;
-            color: #ffffff;
-            background-color: #2a2a2a;
-            border: none;
-            border-radius: 5px;
             cursor: pointer;
             overflow: hidden;
-            z-index: 1;
-            transition: color 0.3s ease, box-shadow 0.3s ease;
         }
-        .btn:hover {
-            color: #ffffff;
-            box-shadow: 0 0 15px rgba(200, 200, 200, 0.5);
         }
-        .btn:hover::before {
-            content: '';
             position: absolute;
-            inset: -10px;
-            background: radial-gradient(circle at center, rgba(200,200,200,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-btn {
-            padding: 6px 12px;
-            font-size: 0.8rem;
-            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;
-            margin: 0.25rem;
-        }
-        .small-btn:hover {
-            color: #ffffff;
-            box-shadow: 0 0 10px rgba(200, 200, 200, 0.5);
-        }
-        .small-btn:hover::before {
-            content: '';
-            position: absolute;
-            inset: -10px;
-            background: radial-gradient(circle at center, rgba(200,200,200,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 {
-            position: relative;
-            padding: 20px;
-            margin-bottom: 1rem;
-            border: 2px dashed #aaa;
-            border-radius: 10px;
             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.drag-over::before {
-            content: '';
             position: absolute;
-            inset: -10px;
-            background: radial-gradient(circle at center, rgba(200,200,200,0.2), transparent);
-            filter: blur(30px);
-            animation: grainGlow 5s infinite;
-            z-index: -1;
-            pointer-events: none;
-        }
-        @keyframes grainGlow {
-            0% { opacity: 0.2; }
-            50% { opacity: 0.5; }
-            100% { opacity: 0.2; }
         }
-        .file-input {
-            display: none;
         }
-        .file-name {
-            margin-top: 1rem;
-            font-size: 0.9rem;
-            color: #aaa;
-            word-break: break-all;
         }
         .progress-container {
-            display: none;
             margin-top: 1.5rem;
         }
         .progress-bar {
             width: 100%;
             height: 10px;
-            background-color: #333;
-            border-radius: 5px;
             overflow: hidden;
-            margin-bottom: 10px;
         }
         .progress {
             width: 0%;
             height: 100%;
-            background-color: #ffffff;
             transition: width 0.3s ease;
         }
-        .loading-spinner {
-            display: none;
-            width: 40px;
-            height: 40px;
-            border: 4px solid #333;
-            border-top: 4px solid #ffffff;
-            border-radius: 50%;
-            animation: spin 1s linear infinite;
-            margin: 20px auto;
-        }
-        @keyframes spin {
-            0% { transform: rotate(0deg); }
-            100% { transform: rotate(360deg); }
-        }
         .result-container {
-            display: none;
             margin-top: 1.5rem;
         }
         .result-link {
-            color: #ffffff;
             text-decoration: none;
-            font-weight: 600;
-            transition: all 0.3s ease;
-            margin-right: 10px;
-            word-break: break-all;
         }
         .result-link:hover {
-            text-decoration: underline;
-        }
-        .link-buttons {
-            display: flex;
-            justify-content: center;
-            flex-wrap: wrap;
-            margin-top: 10px;
         }
-        /* File Types */
-        .file-types {
-            margin-top: 2rem;
-            font-size: 0.8rem;
-            color: #aaa;
         }
-        .modal {
-            display: none;
-            position: fixed;
-            z-index: 2;
-            left: 0;
-            top: 0;
-            width: 100%;
-            height: 100%;
-            overflow: auto;
-            background-color: rgba(0,0,0,0.8);
         }
-        .modal-content {
-            background-color: #1e1e1e;
-            margin: 15% auto;
-            padding: 20px;
-            border: 1px solid #333;
-            width: 90%;
-            max-width: 600px;
-            border-radius: 10px;
-            color: #e0e0e0;
-            animation: modalFadeIn 0.3s;
-            position: relative;
         }
-        @keyframes modalFadeIn {
-            from {opacity: 0; transform: scale(0.8);}
-            to {opacity: 1; transform: scale(1);}
         }
-        .close {
-            color: #aaa;
-            position: absolute;
-            top: 10px;
-            right: 15px;
-            font-size: 28px;
-            font-weight: bold;
-            transition: color 0.3s ease;
         }
-        .close:hover,
-        .close:focus {
-            color: #fff;
-            text-decoration: none;
-            cursor: pointer;
         }
-        .embed-container {
-            display: flex;
-            flex-direction: column;
-            align-items: stretch;
-            margin-top: 15px;
         }
-        #embedLink {
-            width: 100%;
-            padding: 10px;
-            background-color: #333;
-            border: 1px solid #555;
-            color: #e0e0e0;
-            border-radius: 5px;
-            margin-bottom: 10px;
-            font-size: 0.9rem;
         }
         @media (max-width: 480px) {
@@ -344,20 +260,6 @@ HTML_CONTENT = """
             h1 {
                 font-size: 1.5rem;
             }
-            .btn, .small-btn {
-                font-size: 0.9rem;
-                padding: 10px 20px;
-            }
-            .file-types {
-                font-size: 0.7rem;
-            }
-            .modal-content {
-                width: 95%;
-                margin: 10% auto;
-            }
         }
     </style>
 </head>
@@ -366,13 +268,16 @@ 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>
-                <label for="file" class="btn">Choose File</label>
-                <p>or drag and drop file here/paste image</p>
             </div>
-            <div class="file-name" id="fileName"></div>
-            <button type="submit" id="uploadBtn" class="btn" style="display: none; margin-top: 1rem;">Upload File</button>
-            <div class="progress-container" id="progressContainer"></div>
             <div class="loading-spinner" id="loadingSpinner"></div>
         </form>
         <div class="result-container" id="resultContainer"></div>
@@ -381,228 +286,116 @@ HTML_CONTENT = """
         </div>
     </div>
-    <div id="embedModal" class="modal">
-        <div class="modal-content">
-            <span class="close">&times;</span>
-            <h2>Embed Video Link</h2>
-            <p>copy the link to embed it on discord:</p>
-            <div class="embed-container">
-                <input type="text" id="embedLink" readonly>
-                <button onclick="copyEmbedLink()" class="small-btn copy-embed-btn">Copy</button>
-            </div>
-        </div>
-    </div>
     <script>
         const fileInput = document.getElementById('file');
-        const fileName = document.getElementById('fileName');
         const uploadForm = document.getElementById('uploadForm');
         const progressContainer = document.getElementById('progressContainer');
         const loadingSpinner = document.getElementById('loadingSpinner');
         const resultContainer = document.getElementById('resultContainer');
         const dropZone = document.getElementById('dropZone');
-        const modal = document.getElementById('embedModal');
-        const span = document.getElementsByClassName("close")[0];
-        const embedLinkInput = document.getElementById('embedLink');
         const uploadBtn = document.getElementById('uploadBtn');
-        fileInput.addEventListener('change', handleFileSelect);
-        uploadForm.addEventListener('submit', (e) => {
-            e.preventDefault();
-            if (fileInput.files.length > 0) {
-                uploadFile(fileInput.files[0]);
-            }
         });
-                dropZone.addEventListener('dragover', (e) => {
-            e.preventDefault();
-            dropZone.classList.add('drag-over');
         });
-        dropZone.addEventListener('dragleave', () => {
-            dropZone.classList.remove('drag-over');
         });
         dropZone.addEventListener('drop', (e) => {
             e.preventDefault();
-            dropZone.classList.remove('drag-over');
-            handleFileSelect({ target: { files: e.dataTransfer.files } });
-        });
-        document.addEventListener('paste', (e) => {
-            const items = e.clipboardData.items;
-            for (let i = 0; i < items.length; i++) {
-                if (items[i].kind === 'file') {
-                    const file = items[i].getAsFile();
-                    handleFileSelect({ target: { files: [file] } });
-                    break;
-                }
-            }
         });
-        span.onclick = function() {
-            modal.style.display = "none";
-        }
-        window.onclick = function(event) {
-            if (event.target == modal) {
-                modal.style.display = "none";
-            }
-        }
-        function handleFileSelect(e) {
-            if (e.target.files && e.target.files.length > 0) {
-                const file = e.target.files[0];
-                fileName.textContent = file.name;
-                uploadBtn.style.display = 'inline-block';
                 const dataTransfer = new DataTransfer();
-                dataTransfer.items.add(file);
                 fileInput.files = dataTransfer.files;
             }
         }
         async function uploadFile(file) {
-            progressContainer.innerHTML = '';
             progressContainer.style.display = 'block';
-            loadingSpinner.style.display = 'block';
             uploadBtn.disabled = true;
-            resultContainer.innerHTML = '';
             resultContainer.style.display = 'none';
-            const progressBar = createProgressBar(file.name);
-            progressContainer.appendChild(progressBar);
             const formData = new FormData();
             formData.append('file', file);
-            while (true) {
-                try {
-                    const xhr = new XMLHttpRequest();
-                    xhr.open('POST', '/upload', true);
-                    xhr.upload.onprogress = (event) => updateProgress(event, progressBar.querySelector('.progress'));
-                    xhr.onload = function() {
-                        if (xhr.status === 200) {
-                            const response = JSON.parse(xhr.responseText);
-                            if (response.url) {
-                                addResultLink(response.url, file.name);
-                                resetUploadState();
-                                return;
-                            } else {
-                                throw new Error('Upload failed: ' + response.error);
-                            }
-                        } else {
-                            throw new Error(`HTTP error! status: ${xhr.status}`);
-                        }
-                    };
-                    xhr.onerror = function() {
-                        throw new Error('Network error occurred');
-                    };
-                    xhr.send(formData);
-                    // Wait for the request to complete
-                    await new Promise((resolve, reject) => {
-                        xhr.onloadend = resolve;
-                        xhr.onerror = reject;
-                    });
-                    break; // Success, exit the loop
-                } catch (error) {
-                    console.error('Upload error:', error);
-                    // Wait for a short time before retrying
-                    await new Promise(resolve => setTimeout(resolve, 1000));
-                    // The loop will continue, retrying the upload
                 }
-            }
-        }
-        function createProgressBar(fileName) {
-            const progressBarContainer = document.createElement('div');
-            progressBarContainer.className = 'progress-bar';
-            const progress = document.createElement('div');
-            progress.className = 'progress';
-            progressBarContainer.appendChild(progress);
-            const label = document.createElement('div');
-            label.textContent = fileName;
-            label.style.fontSize = '0.8rem';
-            label.style.marginBottom = '5px';
-            const container = document.createElement('div');
-            container.appendChild(label);
-            container.appendChild(progressBarContainer);
-            return container;
-        }
-        function updateProgress(event, progressBar) {
-            if (event.lengthComputable) {
-                const percentComplete = (event.loaded / event.total) * 100;
-                progressBar.style.width = percentComplete + '%';
-            }
         }
-        function resetUploadState() {
             fileInput.value = '';
-            fileName.textContent = '';
             uploadBtn.style.display = 'none';
             uploadBtn.disabled = false;
             loadingSpinner.style.display = 'none';
         }
-        function addResultLink(url, fileName) {
-            const linkContainer = document.createElement('div');
-            linkContainer.style.marginBottom = '10px';
-            const link = document.createElement('a');
-            link.href = url;
-            link.textContent = `View ${fileName}`;
-            link.className = 'result-link';
-            link.target = '_blank';
-            linkContainer.appendChild(link);
-            const buttonsContainer = document.createElement('div');
-            buttonsContainer.className = 'link-buttons';
-            const copyBtn = document.createElement('button');
-            copyBtn.textContent = 'Copy Link';
-            copyBtn.className = 'small-btn copy-btn';
-            copyBtn.onclick = () => {
-                navigator.clipboard.writeText(window.location.origin + url).then(() => {
-                    alert('Link copied to clipboard!');
-                });
-            };
-            buttonsContainer.appendChild(copyBtn);
-            if (fileName.toLowerCase().endsWith('.mp4')) {
-                const embedBtn = document.createElement('button');
-                embedBtn.textContent = 'Embed Video for Discord';
-                embedBtn.className = 'small-btn embed-btn';
-                embedBtn.onclick = () => {
-                    showEmbedModal(url);
-                };
-                buttonsContainer.appendChild(embedBtn);
-            }
-            linkContainer.appendChild(buttonsContainer);
-            resultContainer.appendChild(linkContainer);
             resultContainer.style.display = 'block';
         }
-        function showEmbedModal(url) {
-            const embedUrl = `${window.location.origin}/embed?url=${encodeURIComponent(window.location.origin + url)}&thumbnail=${encodeURIComponent('https://coollsd-fileuploader.hf.space/rbxg/LdnShkhZFgMlMmCwkeX78RqHbiol6r554v5BryQS9upEC1wu/Untitled.png')}`;
-            embedLinkInput.value = embedUrl;
-            modal.style.display = "block";
-        }
-        function copyEmbedLink() {
-            embedLinkInput.select();
-            document.execCommand('copy');
-            alert('Embed link copied to clipboard!');
-        }
     </script>
 </body>
 </html>
@@ -643,23 +436,21 @@ async def handle_video_stream(path: str, request: Request):
     headers = {'Range': range_header} if range_header else {}
     response = requests.get(original_url, headers=headers, stream=True)
-    def generate():
         for chunk in response.iter_content(chunk_size=8192):
             yield chunk
-    headers = dict(response.headers)
-    headers['Access-Control-Allow-Origin'] = '*'
-    headers['Content-Disposition'] = 'inline'
-    if response.status_code == 206:
-        headers['Content-Range'] = response.headers.get('Content-Range')
-    return StreamingResponse(generate(), status_code=response.status_code, headers=headers)
 @app.get("/embed")
 async def embed_video(url: str, thumbnail: str):
     html = f'''
-    <html>
     <head>
         <meta property="og:type" content="video.other">
         <meta property="og:video" content="{url}">
@@ -674,24 +465,42 @@ async def embed_video(url: str, thumbnail: str):
         <meta property="og:image:height" content="720">
         <meta property="og:image:type" content="image/png">
         <style>
-            body, html {{ margin: 0; padding: 0; height: 100%; background: #000; }}
-            #thumbnail {{ width: 100%; height: 100%; object-fit: contain; cursor: pointer; }}
-            #video {{ display: none; width: 100%; height: 100%; object-fit: contain; }}
         </style>
     </head>
     <body>
-        <img id="thumbnail" src="{thumbnail}" onclick="playVideo()">
-        <video id="video" controls autoplay>
-            <source src="{url}" type="video/mp4">
-            Your browser does not support the video tag.
-        </video>
-        <script>
-            function playVideo() {{
-                document.getElementById('thumbnail').style.display = 'none';
-                document.getElementById('video').style.display = 'block';
-                document.getElementById('video').play();
-            }}
-        </script>
     </body>
     </html>
     '''
@@ -700,9 +509,9 @@ async def embed_video(url: str, thumbnail: str):
 async def get_cookies() -> Dict[str, str]:
     try:
         response = requests.get('https://replicate.com/levelsio/neon-tokyo', headers={
-            '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'
         })
-        return dict(response.cookies)
     except Exception as e:
         print(f'Error fetching the page: {e}')
         return {}
@@ -712,22 +521,12 @@ 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',
-            'Referer': 'https://replicate.com/levelsio/neon-tokyo',
-            'Origin': 'https://replicate.com',
-            'Accept': '*/*',
-            'Accept-Language': 'en-US,en;q=0.5',
-            'Accept-Encoding': 'identity',
-            'Sec-Fetch-Dest': 'empty',
-            'Sec-Fetch-Mode': 'cors',
-            'Sec-Fetch-Site': 'same-origin',
-            'Sec-GPC': '1',
-            'Priority': 'u=1, i'
         })
         return response.json()
     except Exception as e:
         print(f'Error initiating upload: {e}')
-        raise
 async def upload_file(upload_url: str, file_content: bytes, content_type: str) -> bool:
     try:
@@ -738,16 +537,11 @@ async def upload_file(upload_url: str, file_content: bytes, content_type: str) -
         return False
 async def retry_upload(upload_url: str, file_content: bytes, content_type: str, max_retries: int = 5, delay: int = 1) -> bool:
-    while True:
-        try:
-            success = await upload_file(upload_url, file_content, content_type)
-            if success:
-                return True
-            print("Upload failed. Retrying...")
-        except Exception as e:
-            print(f"Error during upload: {e}")
-        await asyncio.sleep(delay)
-        delay = min(delay * 2, 60)  # Exponential backoff, capped at 60 seconds
     return False

 from fastapi import FastAPI, File, UploadFile, Request
 from fastapi.responses import HTMLResponse, JSONResponse, StreamingResponse
 import requests
 import asyncio
 from typing import Dict
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <title>Radd PRO Uploader</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <!-- Google Fonts and Icons -->
+    <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap" rel="stylesheet">
+    <!-- Material Icons -->
+    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
     <style>
+        /* Reset and base styles */
+        * {
             margin: 0;
+            padding: 0;
             box-sizing: border-box;
         }
+        body {
+            font-family: 'Roboto', sans-serif;
+            background: linear-gradient(135deg, #667eea, #764ba2);
+            color: #fff;
+            min-height: 100vh;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            overflow: hidden;
         }
+        h1 {
+            font-size: 2rem;
+            margin-bottom: 1rem;
+            text-align: center;
+            animation: fadeInDown 1s ease forwards;
         }
         .container {
+            background: rgba(255, 255, 255, 0.1);
             padding: 2rem;
+            border-radius: 16px;
             backdrop-filter: blur(10px);
+            max-width: 500px;
+            width: 90%;
             text-align: center;
+            animation: fadeInUp 1s ease forwards;
         }
+        .drop-zone {
+            border: 2px dashed rgba(255, 255, 255, 0.5);
+            border-radius: 12px;
+            padding: 2rem;
             cursor: pointer;
+            transition: background 0.3s, border-color 0.3s;
+            position: relative;
             overflow: hidden;
         }
+        .drop-zone.hover {
+            background: rgba(255, 255, 255, 0.1);
+            border-color: #fff;
         }
+        .drop-zone::before {
+            content: "";
             position: absolute;
+            top: -50%;
+            left: -50%;
+            width: 200%;
+            height: 200%;
+            background: radial-gradient(circle at center, rgba(255, 255, 255, 0.2), transparent 70%);
+            opacity: 0;
             pointer-events: none;
+            transition: opacity 0.5s;
         }
+        .drop-zone.hover::before {
+            opacity: 1;
+            animation: pulsate 1.5s infinite;
         }
+        .drop-zone i {
+            font-size: 4rem;
+            color: rgba(255, 255, 255, 0.7);
         }
+        .drop-zone p {
+            margin-top: 1rem;
+            font-size: 1rem;
+            color: rgba(255, 255, 255, 0.8);
         }
+        .file-input {
+            display: none;
         }
+        .btn {
+            margin-top: 1.5rem;
+            padding: 1rem 2rem;
+            background: #6a11cb;
+            background: linear-gradient(to right, #2575fc, #6a11cb);
+            border: none;
+            border-radius: 50px;
+            color: #fff;
+            font-size: 1rem;
+            font-weight: 500;
             cursor: pointer;
+            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
+            transition: transform 0.2s ease, box-shadow 0.2s ease;
             position: relative;
+            overflow: hidden;
         }
+        .btn::before {
+            content: "";
             position: absolute;
+            top: 0;
+            left: -100%;
+            width: 100%;
+            height: 100%;
+            background: linear-gradient(to right, rgba(255,255,255,0.2), rgba(255,255,255,0.1), rgba(255,255,255,0));
+            transform: skewX(-45deg);
+            transition: left 0.5s;
         }
+        .btn:hover::before {
+            left: 100%;
         }
+        .btn:hover {
+            transform: scale(1.02);
+            box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
         }
         .progress-container {
             margin-top: 1.5rem;
+            display: none;
         }
         .progress-bar {
             width: 100%;
             height: 10px;
+            background: rgba(255, 255, 255, 0.2);
+            border-radius: 50px;
             overflow: hidden;
         }
         .progress {
             width: 0%;
             height: 100%;
+            background: linear-gradient(to right, #36d1dc, #5b86e5);
+            border-radius: 50px;
             transition: width 0.3s ease;
         }
         .result-container {
             margin-top: 1.5rem;
+            display: none;
+            animation: fadeIn 1s ease forwards;
         }
         .result-link {
+            color: #fff;
             text-decoration: none;
+            word-wrap: break-word;
+            font-weight: 500;
+            transition: color 0.3s;
         }
         .result-link:hover {
+            color: #c7c7c7;
         }
+        .loading-spinner {
+            margin-top: 1.5rem;
+            display: none;
         }
+        .loading-spinner::after {
+            content: '';
+            width: 40px;
+            height: 40px;
+            border: 6px solid rgba(255, 255, 255, 0.2);
+            border-top-color: #fff;
+            border-radius: 50%;
+            animation: spin 1s linear infinite;
+            display: inline-block;
         }
+        .file-types {
+            margin-top: 2rem;
+            font-size: 0.9rem;
+            color: rgba(255, 255, 255, 0.7);
+            animation: fadeIn 1s ease forwards;
+            animation-delay: 0.5s;
         }
+        @keyframes fadeInDown {
+            from {
+                opacity: 0;
+                transform: translateY(-20px);
+            }
+            to {
+                opacity: 1;
+                transform: translateY(0);
+            }
         }
+        @keyframes fadeInUp {
+            from {
+                opacity: 0;
+                transform: translateY(20px);
+            }
+            to {
+                opacity: 1;
+                transform: translateY(0);
+            }
         }
+        @keyframes fadeIn {
+            from {
+                opacity: 0;
+            }
+            to {
+                opacity: 1;
+            }
         }
+        @keyframes spin {
+            to {
+                transform: rotate(360deg);
+            }
         }
+        @keyframes pulsate {
+            0% {
+                opacity: 0.2;
+            }
+            50% {
+                opacity: 0.4;
+            }
+            100% {
+                opacity: 0.2;
+            }
         }
         @media (max-width: 480px) {
             h1 {
                 font-size: 1.5rem;
             }
         }
     </style>
 </head>
         <h1>Radd PRO Uploader</h1>
         <form id="uploadForm">
             <div id="dropZone" class="drop-zone">
+                <i class="material-icons">cloud_upload</i>
+                <p>Drag & Drop or Click to Upload</p>
                 <input type="file" name="file" id="file" class="file-input" accept=".zip,.mp4,.txt,.mp3,image/*,.pdf" required>
             </div>
+            <button type="submit" id="uploadBtn" class="btn" style="display: none;">Upload File</button>
+            <div class="progress-container" id="progressContainer">
+                <div class="progress-bar">
+                    <div class="progress" id="progress"></div>
+                </div>
+            </div>
             <div class="loading-spinner" id="loadingSpinner"></div>
         </form>
         <div class="result-container" id="resultContainer"></div>
         </div>
     </div>
     <script>
         const fileInput = document.getElementById('file');
         const uploadForm = document.getElementById('uploadForm');
         const progressContainer = document.getElementById('progressContainer');
+        const progressBar = document.getElementById('progress');
         const loadingSpinner = document.getElementById('loadingSpinner');
         const resultContainer = document.getElementById('resultContainer');
         const dropZone = document.getElementById('dropZone');
         const uploadBtn = document.getElementById('uploadBtn');
+        dropZone.addEventListener('click', () => {
+            fileInput.click();
         });
+        ['dragenter', 'dragover'].forEach(eventName => {
+            dropZone.addEventListener(eventName, (e) => {
+                e.preventDefault();
+                e.stopPropagation();
+                dropZone.classList.add('hover');
+            });
         });
+        ['dragleave', 'drop'].forEach(eventName => {
+            dropZone.addEventListener(eventName, (e) => {
+                e.preventDefault();
+                e.stopPropagation();
+                dropZone.classList.remove('hover');
+            });
         });
         dropZone.addEventListener('drop', (e) => {
             e.preventDefault();
+            fileInput.files = e.dataTransfer.files;
+            handleFileSelect();
         });
+        fileInput.addEventListener('change', handleFileSelect);
+        function handleFileSelect() {
+            if (fileInput.files && fileInput.files.length > 0) {
+                uploadBtn.style.display = 'block';
                 const dataTransfer = new DataTransfer();
+                dataTransfer.items.add(fileInput.files[0]);
                 fileInput.files = dataTransfer.files;
+            } else {
+                uploadBtn.style.display = 'none';
             }
         }
+        uploadForm.addEventListener('submit', (e) => {
+            e.preventDefault();
+            if (fileInput.files.length > 0) {
+                uploadFile(fileInput.files[0]);
+            }
+        });
         async function uploadFile(file) {
             progressContainer.style.display = 'block';
+            loadingSpinner.style.display = 'inline-block';
             uploadBtn.disabled = true;
             resultContainer.style.display = 'none';
+            progressBar.style.width = '0%';
             const formData = new FormData();
             formData.append('file', file);
+            const xhr = new XMLHttpRequest();
+            xhr.open('POST', '/upload', true);
+            xhr.upload.onprogress = (event) => {
+                if (event.lengthComputable) {
+                    const percentComplete = ((event.loaded / event.total) * 100).toFixed(2);
+                    progressBar.style.width = percentComplete + '%';
                 }
+            };
+            xhr.onload = function () {
+                if (xhr.status === 200) {
+                    const response = JSON.parse(xhr.responseText);
+                    displayResult(response.url, file.name);
+                    resetForm();
+                } else {
+                    alert('An error occurred during the upload. Please try again.');
+                    resetForm();
+                }
+            };
+            xhr.onerror = function () {
+                alert('An error occurred during the upload. Please try again.');
+                resetForm();
+            };
+            xhr.send(formData);
         }
+        function resetForm() {
             fileInput.value = '';
             uploadBtn.style.display = 'none';
             uploadBtn.disabled = false;
             loadingSpinner.style.display = 'none';
+            progressContainer.style.display = 'none';
         }
+        function displayResult(url, fileName) {
+            resultContainer.innerHTML = `
+                <p>File uploaded successfully:</p>
+                <a href="${url}" target="_blank" class="result-link">${fileName}</a>
+            `;
             resultContainer.style.display = 'block';
         }
     </script>
 </body>
 </html>
     headers = {'Range': range_header} if range_header else {}
     response = requests.get(original_url, headers=headers, stream=True)
+    async def generate():
         for chunk in response.iter_content(chunk_size=8192):
             yield chunk
+    response_headers = {key: value for key, value in response.headers.items()}
+    response_headers['Access-Control-Allow-Origin'] = '*'
+    response_headers['Content-Disposition'] = 'inline'
+    return StreamingResponse(generate(), status_code=response.status_code, headers=response_headers)
 @app.get("/embed")
 async def embed_video(url: str, thumbnail: str):
     html = f'''
+    <!DOCTYPE html>
+    <html lang="en">
     <head>
         <meta property="og:type" content="video.other">
         <meta property="og:video" content="{url}">
         <meta property="og:image:height" content="720">
         <meta property="og:image:type" content="image/png">
         <style>
+            body, html {{
+                margin: 0;
+                padding: 0;
+                width: 100%;
+                height: 100%;
+                background: #000;
+                display: flex;
+                align-items: center;
+                justify-content: center;
+            }}
+            #video {{
+                width: 100%;
+                height: 100%;
+            }}
+            .video-container {{
+                position: relative;
+                width: 100%;
+                max-width: 1280px;
+                height: auto;
+            }}
+            .video-container video {{
+                width: 100%;
+                height: auto;
+            }}
         </style>
     </head>
     <body>
+        <div class="video-container">
+            <video id="video" controls autoplay>
+                <source src="{url}" type="video/mp4">
+                Your browser does not support the video tag.
+            </video>
+        </div>
     </body>
     </html>
     '''
 async def get_cookies() -> Dict[str, str]:
     try:
         response = requests.get('https://replicate.com/levelsio/neon-tokyo', headers={
+            'User-Agent': 'Mozilla/5.0'
         })
+        return response.cookies.get_dict()
     except Exception as e:
         print(f'Error fetching the page: {e}')
         return {}
     try:
         response = requests.post(url, cookies=cookies, headers={
             'X-CSRFToken': cookies.get('csrftoken'),
+            'User-Agent': 'Mozilla/5.0'
         })
         return response.json()
     except Exception as e:
         print(f'Error initiating upload: {e}')
+        return {}
 async def upload_file(upload_url: str, file_content: bytes, content_type: str) -> bool:
     try:
         return False
 async def retry_upload(upload_url: str, file_content: bytes, content_type: str, max_retries: int = 5, delay: int = 1) -> bool:
+    for attempt in range(1, max_retries + 1):
+        success = await upload_file(upload_url, file_content, content_type)
+        if success:
+            return True
+        else:
+            print(f"Upload failed on attempt {attempt}, retrying in {delay} seconds...")
+            await asyncio.sleep(delay)
     return False