Spaces:

albumup
/

file

Sleeping

App Files Files Community

albumup commited on Jan 17, 2025

Commit

7b356ed

verified ·

1 Parent(s): eb1add6

Update app.py

Browse files

Files changed (1) hide show

app.py +127 -3

app.py CHANGED Viewed

@@ -7,6 +7,7 @@ import os
 import uuid
 import json
 from datetime import datetime
 app = FastAPI()
@@ -103,7 +104,7 @@ ALBUM_VIEW_HTML = """
         }}
         .file-grid {{
             display: grid;
-            grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
             gap: 20px;
         }}
         .file-item {{
@@ -131,7 +132,87 @@ ALBUM_VIEW_HTML = """
         .button:hover {{
             background-color: #0056b3;
         }}
     </style>
 </head>
 <body>
     <div class="container">
@@ -144,6 +225,13 @@ ALBUM_VIEW_HTML = """
             {file_list}
         </div>
     </div>
 </body>
 </html>
 """
@@ -198,6 +286,15 @@ SEARCH_RESULTS_HTML = """
 </html>
 """
 @app.get("/", response_class=HTMLResponse)
 async def index():
     return HTML_CONTENT
@@ -293,11 +390,38 @@ async def view_album(album_id: str):
     file_list_html = ""
     for file in album['files']:
         file_list_html += f"""
         <div class="file-item">
             <p>{file['filename']}</p>
-            <a href="/upload/{file['path']}" class="button">View</a>
-            <a href="/upload/{file['path']}?download=true" class="button" target="_blank">Download</a>
         </div>
         """

 import uuid
 import json
 from datetime import datetime
+import mimetypes
 app = FastAPI()
         }}
         .file-grid {{
             display: grid;
+            grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
             gap: 20px;
         }}
         .file-item {{
         .button:hover {{
             background-color: #0056b3;
         }}
+        .preview-container {{
+            margin-bottom: 10px;
+            max-width: 100%;
+            height: 200px;
+            overflow: hidden;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            background-color: #f8f9fa;
+            border-radius: 4px;
+        }}
+        .preview-container img {{
+            max-width: 100%;
+            max-height: 100%;
+            object-fit: contain;
+        }}
+        .preview-container video {{
+            max-width: 100%;
+            max-height: 100%;
+            object-fit: contain;
+        }}
+        .modal {{
+            display: none;
+            position: fixed;
+            z-index: 1000;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            background-color: rgba(0,0,0,0.9);
+            overflow: auto;
+        }}
+        .modal-content {{
+            margin: auto;
+            display: block;
+            max-width: 90%;
+            max-height: 90vh;
+            margin-top: 50px;
+        }}
+        .close {{
+            position: absolute;
+            right: 35px;
+            top: 15px;
+            color: #f1f1f1;
+            font-size: 40px;
+            font-weight: bold;
+            cursor: pointer;
+        }}
     </style>
+    <script>
+        function openModal(url) {{
+            const modal = document.getElementById('previewModal');
+            const modalContent = document.getElementById('modalContent');
+            const contentType = getContentType(url);
+            if (contentType === 'image') {{
+                modalContent.innerHTML = `<img src="${{url}}" style="max-width:100%;max-height:90vh;">`;
+            }} else if (contentType === 'video') {{
+                modalContent.innerHTML = `<video controls style="max-width:100%;max-height:90vh;">
+                    <source src="${{url}}" type="video/mp4">
+                    Your browser does not support the video tag.
+                </video>`;
+            }}
+            modal.style.display = 'block';
+        }}
+        function closeModal() {{
+            const modal = document.getElementById('previewModal');
+            modal.style.display = 'none';
+            const modalContent = document.getElementById('modalContent');
+            modalContent.innerHTML = '';
+        }}
+        function getContentType(url) {{
+            const ext = url.split('.').pop().toLowerCase();
+            if (['jpg', 'jpeg', 'png', 'gif', 'webp'].includes(ext)) return 'image';
+            if (['mp4', 'webm', 'ogg'].includes(ext)) return 'video';
+            return 'other';
+        }}
+    </script>
 </head>
 <body>
     <div class="container">
             {file_list}
         </div>
     </div>
+    <!-- Modal for previews -->
+    <div id="previewModal" class="modal" onclick="closeModal()">
+        <span class="close">&times;</span>
+        <div id="modalContent" class="modal-content">
+        </div>
+    </div>
 </body>
 </html>
 """
 </html>
 """
+def get_file_type(filename):
+    mime_type, _ = mimetypes.guess_type(filename)
+    if mime_type:
+        if mime_type.startswith('image/'):
+            return 'image'
+        elif mime_type.startswith('video/'):
+            return 'video'
+    return 'other'
 @app.get("/", response_class=HTMLResponse)
 async def index():
     return HTML_CONTENT
     file_list_html = ""
     for file in album['files']:
+        file_url = f"/upload/{file['path']}"
+        file_type = get_file_type(file['filename'])
+        preview_html = ""
+        if file_type == 'image':
+            preview_html = f"""
+                <div class="preview-container">
+                    <img src="{file_url}" alt="{file['filename']}" onclick="openModal('{file_url}')">
+                </div>
+            """
+        elif file_type == 'video':
+            preview_html = f"""
+                <div class="preview-container">
+                    <video onclick="openModal('{file_url}')" style="cursor: pointer;">
+                        <source src="{file_url}" type="{file['content_type']}">
+                        Your browser does not support the video tag.
+                    </video>
+                </div>
+            """
+        else:
+            preview_html = f"""
+                <div class="preview-container">
+                    <p>No preview available for {file['filename']}</p>
+                </div>
+            """
         file_list_html += f"""
         <div class="file-item">
+            {preview_html}
             <p>{file['filename']}</p>
+            <a href="{file_url}" class="button" onclick="openModal('{file_url}'); return false;">View</a>
+            <a href="{file_url}?download=true" class="button" target="_blank">Download</a>
         </div>
         """