Spaces:

coollsd
/

fileuploader

Paused

App Files Files Community

coollsd commited on Sep 19, 2024

Commit

21b7ff5

verified ·

1 Parent(s): ebde77a

Update app.py

Browse files

Files changed (1) hide show

app.py +483 -277

app.py CHANGED Viewed

@@ -1,6 +1,7 @@
 from fastapi import FastAPI, File, UploadFile, Request
 from fastapi.responses import HTMLResponse, JSONResponse, StreamingResponse
 import requests
 import asyncio
 from typing import Dict
@@ -11,245 +12,328 @@ HTML_CONTENT = """
 <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) {
@@ -260,6 +344,20 @@ HTML_CONTENT = """
             h1 {
                 font-size: 1.5rem;
             }
         }
     </style>
 </head>
@@ -268,16 +366,13 @@ HTML_CONTENT = """
         <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>
@@ -286,116 +381,228 @@ HTML_CONTENT = """
         </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>
@@ -436,21 +643,23 @@ 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)
-    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}">
@@ -465,42 +674,24 @@ 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;
-                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>
     '''
@@ -509,9 +700,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'
         })
-        return response.cookies.get_dict()
     except Exception as e:
         print(f'Error fetching the page: {e}')
         return {}
@@ -521,12 +712,22 @@ 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'
         })
         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:
@@ -537,11 +738,16 @@ 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:
-    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

 from fastapi import FastAPI, File, UploadFile, Request
 from fastapi.responses import HTMLResponse, JSONResponse, StreamingResponse
 import requests
+import time
 import asyncio
 from typing import Dict
 <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) {
             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>
         <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>
         </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>
     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}">
         <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>
     '''
 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 {}
     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:
         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