Spaces:

coollsd
/

fileuploader

Running

App Files Files Community

coollsd commited on Sep 17, 2024

Commit

88721d0

verified ·

1 Parent(s): ee024c0

Update app.py

Browse files

Files changed (1) hide show

app.py +124 -5

app.py CHANGED Viewed

@@ -3,6 +3,8 @@ from fastapi.responses import HTMLResponse, JSONResponse, StreamingResponse
 import requests
 import time
 from typing import Dict
 app = FastAPI()
@@ -153,7 +155,7 @@ HTML_CONTENT = """
         .result-link:hover {
             text-decoration: underline;
         }
-        .copy-btn {
             background-color: #333;
             color: #e0e0e0;
             border: none;
@@ -161,8 +163,9 @@ HTML_CONTENT = """
             border-radius: 5px;
             cursor: pointer;
             transition: all 0.3s ease;
         }
-        .copy-btn:hover {
             background-color: #444;
         }
         .file-types {
@@ -182,6 +185,37 @@ HTML_CONTENT = """
             border-color: #ffffff;
             background-color: rgba(255, 255, 255, 0.1);
         }
     </style>
 </head>
 <body>
@@ -204,6 +238,16 @@ HTML_CONTENT = """
         </div>
     </div>
     <script>
         const fileInput = document.getElementById('files');
         const fileName = document.getElementById('fileName');
@@ -212,6 +256,9 @@ HTML_CONTENT = """
         const loadingSpinner = document.getElementById('loadingSpinner');
         const resultContainer = document.getElementById('resultContainer');
         const dropZone = document.getElementById('dropZone');
         let selectedFiles = [];
@@ -223,7 +270,6 @@ HTML_CONTENT = """
             }
         });
-        // Drag and drop functionality
         dropZone.addEventListener('dragover', (e) => {
             e.preventDefault();
             dropZone.classList.add('drag-over');
@@ -239,7 +285,6 @@ HTML_CONTENT = """
             handleFiles({ target: { files: e.dataTransfer.files } });
         });
-        // Paste functionality
         document.addEventListener('paste', (e) => {
             const items = e.clipboardData.items;
             const files = [];
@@ -254,6 +299,16 @@ HTML_CONTENT = """
             }
         });
         function handleFiles(e) {
             selectedFiles = Array.from(e.target.files);
             if (selectedFiles.length > 0) {
@@ -362,8 +417,31 @@ HTML_CONTENT = """
             linkContainer.appendChild(link);
             linkContainer.appendChild(copyBtn);
             resultContainer.appendChild(linkContainer);
             resultContainer.style.display = 'block';
         }
     </script>
 </body>
@@ -418,6 +496,47 @@ async def handle_video_stream(path: str, request: Request):
     return StreamingResponse(generate(), status_code=response.status_code, headers=headers)
 async def get_cookies() -> Dict[str, str]:
     try:
         response = requests.get('https://replicate.com/levelsio/neon-tokyo', headers={
@@ -474,5 +593,5 @@ async def retry_upload(upload_url: str, file_content: bytes, content_type: str,
             print(f'Upload failed, retrying in {delay}s...')
             time.sleep(delay)
             delay *= 2  # Exponential backoff
-    print('Upload failed after all retry attempt')
     return False

 import requests
 import time
 from typing import Dict
+import urllib.parse
+import re
 app = FastAPI()
         .result-link:hover {
             text-decoration: underline;
         }
+        .copy-btn, .embed-btn {
             background-color: #333;
             color: #e0e0e0;
             border: none;
             border-radius: 5px;
             cursor: pointer;
             transition: all 0.3s ease;
+            margin-right: 5px;
         }
+        .copy-btn:hover, .embed-btn:hover {
             background-color: #444;
         }
         .file-types {
             border-color: #ffffff;
             background-color: rgba(255, 255, 255, 0.1);
         }
+        .modal {
+            display: none;
+            position: fixed;
+            z-index: 1;
+            left: 0;
+            top: 0;
+            width: 100%;
+            height: 100%;
+            overflow: auto;
+            background-color: rgba(0,0,0,0.4);
+        }
+        .modal-content {
+            background-color: #fefefe;
+            margin: 15% auto;
+            padding: 20px;
+            border: 1px solid #888;
+            width: 80%;
+            max-width: 600px;
+        }
+        .close {
+            color: #aaa;
+            float: right;
+            font-size: 28px;
+            font-weight: bold;
+        }
+        .close:hover,
+        .close:focus {
+            color: black;
+            text-decoration: none;
+            cursor: pointer;
+        }
     </style>
 </head>
 <body>
         </div>
     </div>
+    <div id="embedModal" class="modal">
+        <div class="modal-content">
+            <span class="close">&times;</span>
+            <h2>Embed Video Link</h2>
+            <p>Copy the following link to embed the video:</p>
+            <input type="text" id="embedLink" readonly style="width: 100%; padding: 5px;">
+            <button onclick="copyEmbedLink()" style="margin-top: 10px;">Copy Embed Link</button>
+        </div>
+    </div>
     <script>
         const fileInput = document.getElementById('files');
         const fileName = document.getElementById('fileName');
         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');
         let selectedFiles = [];
             }
         });
         dropZone.addEventListener('dragover', (e) => {
             e.preventDefault();
             dropZone.classList.add('drag-over');
             handleFiles({ target: { files: e.dataTransfer.files } });
         });
         document.addEventListener('paste', (e) => {
             const items = e.clipboardData.items;
             const files = [];
             }
         });
+        span.onclick = function() {
+            modal.style.display = "none";
+        }
+        window.onclick = function(event) {
+            if (event.target == modal) {
+                modal.style.display = "none";
+            }
+        }
         function handleFiles(e) {
             selectedFiles = Array.from(e.target.files);
             if (selectedFiles.length > 0) {
             linkContainer.appendChild(link);
             linkContainer.appendChild(copyBtn);
+            if (fileName.toLowerCase().endsWith('.mp4')) {
+                const embedBtn = document.createElement('button');
+                embedBtn.textContent = 'Embed Video for Discord';
+                embedBtn.className = 'embed-btn';
+                embedBtn.onclick = () => {
+                    showEmbedModal(url);
+                };
+                linkContainer.appendChild(embedBtn);
+            }
             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/LdiWpl4JO8XmYc6m2PbfrwZgSOjRUX0kPaJzp2IDSN5fYVHK/Untitled.png')}`;
+            embedLinkInput.value = embedUrl;
+            modal.style.display = "block";
+        }
+        function copyEmbedLink() {
+            embedLinkInput.select();
+            document.execCommand('copy');
+            alert('Embed link copied to clipboard!');
         }
     </script>
 </body>
     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:video:url" content="{url}">
+        <meta property="og:video:secure_url" content="{url}">
+        <meta property="og:video:type" content="video/mp4">
+        <meta property="og:video:width" content="1280">
+        <meta property="og:video:height" content="720">
+        <meta property="og:image" content="{thumbnail}">
+        <meta property="og:image:secure_url" content="{thumbnail}">
+        <meta property="og:image:width" content="1280">
+        <meta property="og:image:height" content="720">
+        <meta property="og:image:type" content="image/png">
+        <style>
+            body, html {{ margin: 0; padding: 0; height: 100%; }}
+            #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>
+            <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>
+    '''
+    return HTMLResponse(content=html)
 async def get_cookies() -> Dict[str, str]:
     try:
         response = requests.get('https://replicate.com/levelsio/neon-tokyo', headers={
             print(f'Upload failed, retrying in {delay}s...')
             time.sleep(delay)
             delay *= 2  # Exponential backoff
+    print('Upload failed after all retry attempts')
     return False