UI Implementation for doc operations

Signed-off-by: Skye <[email protected]>

Author: skye-cyber

filemac/main.py

@@ -14,6 +14,7 @@
     SUPPORTED_AUDIO_FORMATS_SHOW,
     SUPPORTED_DOC_FORMATS,
     SUPPORTED_IMAGE_FORMATS_SHOW,
+    SUPPORTED_VIDEO_FORMATS_SHOW,
 )
 from . import warnings_handler
 from .audiopy.audio import AudioConverter
@@ -503,6 +504,7 @@ def __init__(self, parser, args, remaining_args) -> None:
         self.SUPPORTED_DOC_FORMATS = SUPPORTED_DOC_FORMATS
         self.SUPPORTED_AUDIO_FORMATS_SHOW = SUPPORTED_AUDIO_FORMATS_SHOW
         self.SUPPORTED_AUDIO_FORMATS_DIRECT = SUPPORTED_AUDIO_FORMATS_DIRECT
+        self.SUPPORTED_VIDEO_FORMATS_SHOW = SUPPORTED_VIDEO_FORMATS_SHOW
         self.Argsmain = Argsmain
         self.VideoConverter = VideoConverter
         self.AudioConverter = AudioConverter
@@ -537,12 +539,12 @@ def pdfjoin(self):
         init.controller()
 
     def image_converter(self):
-        if self.args.target_format is None:
-            self.ensure_target_format()
-            return
         if self.args.convert_image == "help":
             print(self.SUPPORTED_IMAGE_FORMATS_SHOW)
             return
+        if self.args.target_format is None:
+            self.ensure_target_format()
+            return
         if self.args.target_format is None:
             print(
                 f"{fcl.RED_FG}Please provide output format specified by{fcl.CYAN_FG} '-tf'{RESET}"
@@ -604,7 +606,7 @@ def handle_video_conversion_help(self):
         return
 
     def handle_video_conversion(self):
-        if self.agrs.target_format is None:
+        if hasattr(self, "agrs") and self.agrs.target_format is None:
             self.ensure_target_format()
             return
         ev = self.VideoConverter(self.args.convert_video, self.args.target_format)

fweb/core/config.py

@@ -37,16 +37,16 @@
                 "id": "extract_pages",
                 "name": "Extract PDF Pages",
                 "icon": """M128.5 64C93.2 64 64.5 92.7 64.5 128L64.5 512C64.5 547.3 93.2 576 128.5 576L384.5 576C419.8 576 448.5 547.3 448.5 512L448.5 416L526.6 416L495.6 447C486.2 456.4 486.2 471.6 495.6 480.9C505 490.2 520.2 490.3 529.5 480.9L601.5 408.9C610.9 399.5 610.9 384.3 601.5 375L529.5 303C520.1 293.6 504.9 293.6 495.6 303C486.3 312.4 486.2 327.6 495.6 336.9L526.6 367.9L448.5 367.9L448.5 234.4C448.5 217.4 441.8 201.1 429.8 189.1L323.2 82.7C311.2 70.7 295 64 278 64L128.5 64zM390 240L296.5 240C283.2 240 272.5 229.3 272.5 216L272.5 122.5L390 240zM256.5 392C256.5 378.7 267.2 368 280.5 368L384.5 368L384.5 416L280.5 416C267.2 416 256.5 405.3 256.5 392z""",
-                "color": "yellow",
+                "color": "orange",
                 "description": "Extract specific pages from PDF documents",
             },
-            {
-                "id": "Atext2word",
-                "name": "Advanced Text to Word",
-                "icon": """M72 96C49.9 96 32 113.9 32 136L32 192C32 209.7 46.3 224 64 224C81.7 224 96 209.7 96 192L96 160L160 160L160 480L128 480C110.3 480 96 494.3 96 512C96 529.7 110.3 544 128 544L256 544C273.7 544 288 529.7 288 512C288 494.3 273.7 480 256 480L224 480L224 160L288 160L288 192C288 209.7 302.3 224 320 224C337.7 224 352 209.7 352 192L352 136C352 113.9 334.1 96 312 96L72 96zM470.6 425.4C458.1 412.9 437.8 412.9 425.3 425.4C412.8 437.9 412.8 458.2 425.3 470.7L489.3 534.7C501.8 547.2 522.1 547.2 534.6 534.7L598.6 470.7C611.1 458.2 611.1 437.9 598.6 425.4C586.1 412.9 565.8 412.9 553.3 425.4L543.9 434.8L543.9 205.3L553.3 214.7C565.8 227.2 586.1 227.2 598.6 214.7C611.1 202.2 611.1 181.9 598.6 169.4L534.6 105.4C528.6 99.4 520.5 96 512 96C503.5 96 495.4 99.4 489.4 105.4L425.4 169.4C412.9 181.9 412.9 202.2 425.4 214.7C437.9 227.2 458.2 227.2 470.7 214.7L480.1 205.3L480.1 434.8L470.7 425.4z""",
-                "color": "indigo",
-                "description": "Convert text files to Word documents with formatting",
-            },
+            # { no-longer viable
+            #   "id": "Atext2word",
+            #  "name": "Advanced Text to Word",
+            # "icon": """M72 96C49.9 96 32 113.9 32 136L32 192C32 209.7 46.3 224 64 224C81.7 224 96 209.7 96 192L96 160L160 160L160 480L128 480C110.3 480 96 494.3 96 512C96 529.7 110.3 544 128 544L256 544C273.7 544 288 529.7 288 512C288 494.3 273.7 480 256 480L224 480L224 160L288 160L288 192C288 209.7 302.3 224 320 224C337.7 224 352 209.7 352 192L352 136C352 113.9 334.1 96 312 96L72 96zM470.6 425.4C458.1 412.9 437.8 412.9 425.3 425.4C412.8 437.9 412.8 458.2 425.3 470.7L489.3 534.7C501.8 547.2 522.1 547.2 534.6 534.7L598.6 470.7C611.1 458.2 611.1 437.9 598.6 425.4C586.1 412.9 565.8 412.9 553.3 425.4L543.9 434.8L543.9 205.3L553.3 214.7C565.8 227.2 586.1 227.2 598.6 214.7C611.1 202.2 611.1 181.9 598.6 169.4L534.6 105.4C528.6 99.4 520.5 96 512 96C503.5 96 495.4 99.4 489.4 105.4L425.4 169.4C412.9 181.9 412.9 202.2 425.4 214.7C437.9 227.2 458.2 227.2 470.7 214.7L480.1 205.3L480.1 434.8L470.7 425.4z""",
+            # "color": "indigo",
+            # "description": "Convert text files to Word documents with formatting",
+            # },
             {
                 "id": "doc2image",
                 "name": "Document to Images",

fweb/core/static/css/styles.css

@@ -23,6 +23,11 @@ class FileHandler {
     });
   }
 
+  openFileSelector(dropZoneId) {
+    const inputElement = document.getElementById(`${dropZoneId}-input`);
+    inputElement?.click();
+  }
+
   setupDragAndDrop(dropZone, fileInput, multiple) {
     dropZone.addEventListener("dragover", (e) => {
       e.preventDefault();

fweb/core/static/js/FileHandler.js

@@ -86,8 +86,8 @@ class ToolHandler {
       scan_pdf: () => this.initPDFScanning(),
       doc_long_image: () => this.initLongImageConversion(),
       extract_pages: () => this.initPageExtraction(),
-      Atext2word: () => this.initTextToWord(),
-      doc2image: () => this.initDocToImage(),
+      //Atext2word: () => this.initTextToWord(),
+      doc2image: () => this.initDocToImages(),
 
       // Image Tools
       convert_image: () => this.initImageConversion(),
@@ -122,54 +122,166 @@ class ToolHandler {
   }
 
   // Tool-specific initialization methods
+  ///=====Doc Operation==//
   initDocumentConversion() {
     fileHandler.setupFileDropZone("doc-drop-zone", "doc-file-input", true);
     this.setupFormatSelector("doc-target-format", [
       "pdf",
       "docx",
       "txt",
       "html",
+      "xls",
+      "xlsx",
+      "ppt",
+      "pptx",
+    ]);
+    this.setupAcceptedFiles("doc", [
+      "pdf",
+      "docx",
+      "txt",
+      "html",
+      "xls",
+      "xlsx",
+      "ppt",
+      "pptx",
     ]);
   }
 
-  initImageConversion() {
-    fileHandler.setupFileDropZone("image-drop-zone", "image-file-input", true);
-    this.setupFormatSelector("image-target-format", [
-      "png",
-      "jpg",
-      "jpeg",
-      "webp",
-      "gif",
-    ]);
-    this.setupQualitySlider();
+  initPDFJoining() {
+    fileHandler.setupFileDropZone(
+      "ppf_join-drop-zone",
+      "pdf_join-file-input",
+      false,
+    );
   }
 
+  initPDFScanning() {
+    fileHandler.setupFileDropZone(
+      "scan_pdf-drop-zone",
+      "scan_pdf-file-input",
+      false,
+    );
+  }
+
+  initPageExtraction() {
+    fileHandler.setupFileDropZone(
+      "extract_pages-drop-zone",
+      "extract_pages-file-input",
+      false,
+    );
+  }
+
+  initDocToImages() {
+    fileHandler.setupFileDropZone(
+      "doc2image-drop-zone",
+      "doc2image-file-input",
+      false,
+    );
+  }
+
+  initLongImageConversion() {
+    fileHandler.setupFileDropZone(
+      "doc_long_image-drop-zone",
+      "doc_long_image-file-input",
+      false,
+    );
+  }
+
+  ///=====OCR Operation==//
+  initOCR() {
+    fileHandler.setupFileDropZone("ocr-drop-zone", "ocr-file-input", true);
+    this.setupLanguageSelector();
+  }
+
+  ///=====Audio Operation==//
   initAudioConversion() {
     fileHandler.setupFileDropZone("audio-drop-zone", "audio-file-input", true);
     this.setupFormatSelector("audio-target-format", [
       "mp3",
       "wav",
       "flac",
       "m4a",
+      "ogg",
+      "aac",
+      "raw",
+      "aiff",
+      "ogv",
+    ]);
+    this.setupAcceptedFiles("audio", [
+      "mp3",
+      "wav",
+      "flac",
+      "m4a",
+      "ogg",
+      "aac",
+      "raw",
+      "aiff",
+      "ogv",
     ]);
   }
 
+  ///=====Video Operation==//
   initVideoConversion() {
-    fileHandler.setupFileDropZone("video-drop-zone", "video-file-input", false);
+    fileHandler.setupFileDropZone("video-drop-zone", "video-file-input", true);
     this.setupFormatSelector("video-target-format", [
       "mp4",
       "mkv",
+      "webm",
+      "mov",
       "avi",
+      "flv",
+      "wmv",
+      ,
+    ]);
+    this.setupAcceptedFiles("video", [
+      "mp4",
+      "mkv",
+      "webm",
       "mov",
+      "avi",
+      "flv",
+      "wmv",
+      ,
     ]);
   }
 
-  initOCR() {
-    fileHandler.setupFileDropZone("ocr-drop-zone", "ocr-file-input", true);
-    this.setupLanguageSelector();
+  ///=====Image Operation==//
+  initImageConversion() {
+    fileHandler.setupFileDropZone("image-drop-zone", "image-file-input", true);
+    this.setupFormatSelector("image-target-format", [
+      "png",
+      "jpg",
+      "jpeg",
+      "webp",
+      "gif",
+      "eps",
+      "pic",
+      "tiff",
+      "dib",
+      "bmp",
+    ]);
+    this.setupAcceptedFiles("image", [
+      "png",
+      "jpg",
+      "jpeg",
+      "webp",
+      "gif",
+      "eps",
+      "pic",
+      "tiff",
+      "dib",
+      "bmp",
+    ]);
+    this.setupQualitySlider();
   }
 
-  // Add more tool initialization methods as needed...
+  initImageToPDF() {
+    fileHandler.setupFileDropZone(
+      "image2pdf-drop-zone",
+      "image2pdf-file-input",
+      false,
+    );
+  }
 
   // Utility methods for tool setup
   setupFormatSelector(selectId, formats) {
@@ -184,6 +296,18 @@ class ToolHandler {
     }
   }
 
+  setupAcceptedFiles(inputId, accepts) {
+    if (accepts) {
+      const Finput = document.getElementById(`${inputId}-file-input`);
+      Finput
+        ? Finput.setAttribute(
+            "accept",
+            accepts.map((format) => `.${format}`).join(","),
+          )
+        : "";
+    }
+  }
+
   setupQualitySlider() {
     const slider = document.querySelector('input[name="quality"]');
     const valueDisplay = document.getElementById("quality-value");

fweb/core/static/js/ToolsHandler.js

@@ -100,10 +100,9 @@ class UIManager {
     if (section) {
       section.classList.toggle("hidden");
 
-      const icon = section.previousElementSibling?.querySelector("i");
-      if (icon) {
-        icon.classList.toggle("fa-chevron-up");
-        icon.classList.toggle("fa-chevron-down");
+      const svg = section.previousElementSibling?.querySelector("svg");
+      if (svg) {
+        svg.classList.toggle("rotate-180");
       }
     }
   }
@@ -114,10 +113,11 @@ class UIManager {
       if (loading) {
         submitButton.disabled = true;
         submitButton.innerHTML =
-          '<i class="fas fa-spinner fa-spin mr-2"></i>Processing...';
+          '<span class="h-5 w-5 fill-current fas fa-spinner spin mr-2"><svg><s/vg>Processing...</span';
       } else {
         submitButton.disabled = false;
-        submitButton.innerHTML = '<i class="fas fa-cog mr-2"></i>Process Files';
+        submitButton.innerHTML = `<span class="flex-justify-center items-center mr-2">
+          <svg class="h-5 w-5 fill-current dark:fill-gray-200 mb-3" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 640"><path d="M176 544C96.5 544 32 479.5 32 400C32 336.6 73 282.8 129.9 263.5C128.6 255.8 128 248 128 240C128 160.5 192.5 96 272 96C327.4 96 375.5 127.3 399.6 173.1C413.8 164.8 430.4 160 448 160C501 160 544 203 544 256C544 271.7 540.2 286.6 533.5 299.7C577.5 320 608 364.4 608 416C608 486.7 550.7 544 480 544L176 544zM337 255C327.6 245.6 312.4 245.6 303.1 255L231.1 327C221.7 336.4 221.7 351.6 231.1 360.9C240.5 370.2 255.7 370.3 265 360.9L296 329.9L296 432C296 445.3 306.7 456 320 456C333.3 456 344 445.3 344 432L344 329.9L375 360.9C384.4 370.3 399.6 370.3 408.9 360.9C418.2 351.5 418.3 336.3 408.9 327L336.9 255z"/></svg>Process Files</span>`;
       }
     }
   }

fweb/core/static/js/uiManager.js

@@ -47,6 +47,15 @@ module.exports = {
         h6: "200", // Adjust as needed
       },
       zIndex: {
+        1: "1",
+        5: "5",
+        10: "10",
+        15: "15",
+        20: "20",
+        25: "25",
+        30: "30",
+        35: "35",
+        40: "40",
         41: "41",
         45: "45",
         51: "51",
@@ -61,7 +70,54 @@ module.exports = {
         95: "95",
         100: "100",
       },
+      animation: {
+        bounce: "bounce 0.5s infinite",
+        "bounce-100": "bounce 0.5s 100ms infinite",
+        "bounce-200": "bounce 0.5s 200ms infinite",
+        "bounce-300": "bounce 0.5s 300ms infinite",
+        "bounce-400": "bounce 0.5s 400ms infinite",
+        "bounce-500": "bounce 0.5s 500ms infinite",
+        "bounce-600": "bounce 0.5s 600ms infinite",
+        heartpulse: "heartpulse 1s infinite",
+        "spin-50": "spin 0.5s linear infinite",
+        "reload-100": "spin 1s linear infinite",
+        "spin-200": "spin 2s linear infinite",
+        fadeIn: "fadeIn 2s cubic-bezier(0.25, 1, 0.5, 1)",
+      },
+    },
+    keyframes: {
+      fadeIn: {
+        "0%": { opacity: 0, transform: "translateY(-300px)" },
+        "10%": { opacity: 0.1 },
+        "20%": { opacity: 0.2 },
+        "30%": { opacity: 0.3 },
+        "40%": { opacity: 0.4 },
+        "50%": { opacity: 0.5, transform: "translateY(-150px)" },
+        "60%": { opacity: 0.6 },
+        "70%": { opacity: 0.7 },
+        "80%": { opacity: 0.8 },
+        "90%": { opacity: 0.9 },
+        "100%": { opacity: 1, transform: "translateY(0)" },
+      },
+      bounce: {
+        "0%": { opacity: 1 },
+        "50%": { opacity: 0.5 },
+        "100%": { opacity: 1 },
+      },
+      heartpulse: {
+        "0%": { transform: "scale(1)" },
+        "50%": { transform: "scale(1.2)" },
+        "100%": { transform: "scale(1)" },
+      },
+      spin: {
+        "0%": { transform: "rotate(0deg)" },
+        "100%": { transform: "rotate(360deg)" },
+      },
     },
+    /*gradientColorStops: {
+         *        'gradient-primary': '#00b4d8',
+         *        'gradient-secondary': '#00ffcc',
+      },*/
   },
   plugins: [],
 };