Deploy to HF Spaces as Docker sdk

Dockerfile

@@ -0,0 +1,22 @@
+FROM python:3.9-slim
+
+WORKDIR /app
+
+# Give permissions to create folders
+RUN mkdir -p /app/data /app/logs && chmod 777 /app/data /app/logs
+
+# Install dependencies
+COPY ./server/requirements.txt /app/requirements.txt
+RUN pip install --no-cache-dir --upgrade -r /app/requirements.txt
+
+# Copy application files
+COPY . /app
+
+# Ensure correct permissions after copy
+RUN chmod -R 777 /app/data /app/logs
+
+# Expose port (default for HF Spaces)
+EXPOSE 7860
+
+# Command to run the standard Flask app
+CMD ["python", "server/app.py"]

README.md

@@ -3,8 +3,7 @@ title: DocVault App
 emoji: 📁
 colorFrom: blue
 colorTo: purple
-sdk: static
-app_file: index.html
+sdk: docker
 pinned: false
 ---
 

app.js

@@ -1,7 +1,7 @@
 // DocVault — Offline-First Document Storage System
 // Uses local Flask backend for all operations
 
-const API_BASE = 'http://localhost:5000/api';
+const API_BASE = '/api';
 const USER_ID = 'default_user';
 const DEFAULT_FOLDER = '';
 
@@ -950,37 +950,26 @@ function setNavActive(nav) {
 }
 
 navMyFiles.addEventListener('click', (e) => {
-  console.log('navMyFiles clicked'); // Debug
   e.preventDefault();
   e.stopPropagation();
   e.stopImmediatePropagation();
-  currentBrowse = 'files'; 
-  currentPath = [];
+  currentBrowse = 'files'; currentPath = [];
   setNavActive(navMyFiles);
   fetchAndRender();
-  return false;
 });
 
 navRecent.addEventListener('click', (e) => {
-  console.log('navRecent clicked'); // Debug
   e.preventDefault();
-  e.stopPropagation();
-  e.stopImmediatePropagation();
   currentBrowse = 'recent';
   setNavActive(navRecent);
   renderRecentView();
-  return false;
 });
 
 navStarred.addEventListener('click', (e) => {
-  console.log('navStarred clicked'); // Debug
   e.preventDefault();
-  e.stopPropagation();
-  e.stopImmediatePropagation();
   currentBrowse = 'starred';
   setNavActive(navStarred);
   renderStarredView();
-  return false;
 });
 
 function renderRecentView() {

index.html

@@ -38,29 +38,29 @@
             </div>
 
             <div class="new-btn-wrapper">
-                <button type="button" class="btn-primary new-btn" id="newBtn">
+                <button class="btn-primary new-btn" id="newBtn">
                     <i class="ph-bold ph-plus"></i> New
                 </button>
                 <div class="new-dropdown" id="newDropdown">
-                    <button type="button" class="new-dropdown-item" id="createFolderBtn">
+                    <button class="new-dropdown-item" id="createFolderBtn">
                         <i class="ph-fill ph-folder-plus"></i> Create Folder
                     </button>
-                    <button type="button" class="new-dropdown-item" id="uploadFileBtn">
+                    <button class="new-dropdown-item" id="uploadFileBtn">
                         <i class="ph-fill ph-upload-simple"></i> Upload File
                     </button>
                 </div>
             </div>
 
             <nav class="sidebar-nav">
-                <button type="button" class="nav-item active" id="navMyFiles">
+                <a href="#" class="nav-item active" id="navMyFiles">
                     <i class="ph-fill ph-folder"></i> My Files
-                </button>
-                <button type="button" class="nav-item" id="navRecent">
+                </a>
+                <a href="#" class="nav-item" id="navRecent">
                     <i class="ph-fill ph-clock-counter-clockwise"></i> Recent
-                </button>
-                <button type="button" class="nav-item" id="navStarred">
+                </a>
+                <a href="#" class="nav-item" id="navStarred">
                     <i class="ph-fill ph-star"></i> Starred
-                </button>
+                </a>
             </nav>
 
             <div class="sidebar-bottom">
@@ -102,8 +102,8 @@
                 <div class="section-header">
                     <h2>Folders</h2>
                     <div class="view-toggles">
-                        <button type="button" class="icon-btn active" id="viewGrid" title="Grid"><i class="ph-fill ph-squares-four"></i></button>
-                        <button type="button" class="icon-btn" id="viewList" title="List"><i class="ph-fill ph-list-dashes"></i></button>
+                        <button class="icon-btn active" id="viewGrid" title="Grid"><i class="ph-fill ph-squares-four"></i></button>
+                        <button class="icon-btn" id="viewList" title="List"><i class="ph-fill ph-list-dashes"></i></button>
                     </div>
                 </div>
                 <div class="grid-container" id="foldersContainer"></div>
@@ -121,14 +121,14 @@
     <!-- Create Folder -->
     <div class="modal-overlay" id="createFolderModal">
         <div class="modal glass-panel">
-            <button type="button" class="close-modal" id="closeNameModal"><i class="ph-bold ph-x"></i></button>
+            <button class="close-modal" id="closeNameModal"><i class="ph-bold ph-x"></i></button>
             <h3><i class="ph-fill ph-folder-plus" style="color:var(--folder-color);margin-right:10px"></i>New Folder</h3>
             <div class="input-group">
                 <input type="text" id="folderNameInput" placeholder="Enter folder name..." autocomplete="off">
             </div>
             <div class="modal-footer">
-                <button type="button" class="btn-secondary" id="cancelFolderBtn">Cancel</button>
-                <button type="button" class="btn-primary" id="confirmFolderBtn">Create</button>
+                <button class="btn-secondary" id="cancelFolderBtn">Cancel</button>
+                <button class="btn-primary" id="confirmFolderBtn">Create</button>
             </div>
         </div>
     </div>
@@ -136,14 +136,14 @@
     <!-- Delete Confirmation -->
     <div class="modal-overlay" id="deleteModal">
         <div class="modal glass-panel" style="max-width:360px">
-            <button type="button" class="close-modal" id="closeDeleteModal"><i class="ph-bold ph-x"></i></button>
+            <button class="close-modal" id="closeDeleteModal"><i class="ph-bold ph-x"></i></button>
             <div class="delete-icon-wrap"><i class="ph-fill ph-warning"></i></div>
             <p style="text-align:center; margin-bottom:20px; font-size:15px; color:var(--text-main);">
                 Are you sure you want to delete <strong>this item</strong>?
             </p>
             <div class="modal-footer" style="justify-content:center;gap:16px">
-                <button type="button" class="btn-secondary" id="cancelDeleteBtn">Cancel</button>
-                <button type="button" class="btn-danger" id="confirmDeleteBtn"><i class="ph-fill ph-trash"></i> Delete</button>
+                <button class="btn-secondary" id="cancelDeleteBtn">Cancel</button>
+                <button class="btn-danger" id="confirmDeleteBtn"><i class="ph-fill ph-trash"></i> Delete</button>
             </div>
         </div>
     </div>
@@ -151,15 +151,15 @@
     <!-- Rename Modal -->
     <div class="modal-overlay" id="renameModal">
         <div class="modal glass-panel" style="max-width:400px">
-            <button type="button" class="close-modal" id="closeRenameModal"><i class="ph-bold ph-x"></i></button>
+            <button class="close-modal" id="closeRenameModal"><i class="ph-bold ph-x"></i></button>
             <h3><i class="ph-fill ph-pencil-simple" style="color:var(--primary-color)"></i> Rename File</h3>
             <div class="input-group">
                 <label class="input-label">New Name</label>
                 <input type="text" id="renameInput" placeholder="Enter new name..." autocomplete="off">
             </div>
             <div class="modal-footer">
-                <button type="button" class="btn-secondary" id="cancelRenameBtn">Cancel</button>
-                <button type="button" class="btn-primary" id="confirmRenameBtn"><i class="ph-fill ph-check"></i> Rename</button>
+                <button class="btn-secondary" id="cancelRenameBtn">Cancel</button>
+                <button class="btn-primary" id="confirmRenameBtn"><i class="ph-fill ph-check"></i> Rename</button>
             </div>
         </div>
     </div>
@@ -175,8 +175,8 @@
                     <span id="previewFileName">filename.pdf</span>
                 </div>
                 <div style="display:flex; gap:12px">
-                    <button type="button" class="icon-btn" id="downloadFromPreview" title="Download"><i class="ph-bold ph-download-simple"></i></button>
-                    <button type="button" class="close-modal" id="closePreviewModal" style="position:static"><i class="ph-bold ph-x"></i></button>
+                    <button class="icon-btn" id="downloadFromPreview" title="Download"><i class="ph-bold ph-download-simple"></i></button>
+                    <button class="close-modal" id="closePreviewModal" style="position:static"><i class="ph-bold ph-x"></i></button>
                 </div>
             </div>
             <div class="preview-body" id="previewBody">

js/api/hfService.js

@@ -4,7 +4,7 @@ const CACHE_TTL = 5 * 60 * 1000; // 5 minutes
 
 class HFService {
   constructor() {
-    this.apiBase = 'http://localhost:5000/api';
+    this.apiBase = '/api';
     this.cache = new Map();
     this.retryLimit = 3;
     this.retryDelay = 1000; // 1s start for exponential backoff

server/app.py

@@ -182,5 +182,6 @@ def create_app():
 
 if __name__ == '__main__':
     app = create_app()
-    logger.info(f"Starting DocVault on http://localhost:5000 (DEBUG: {DEBUG})")
-    app.run(debug=DEBUG, host='0.0.0.0', port=5000)
+    port = int(os.environ.get("PORT", 7860))
+    logger.info(f"Starting DocVault on http://localhost:{port} (DEBUG: {DEBUG})")
+    app.run(debug=DEBUG, host='0.0.0.0', port=port)