auth

.env.example

@@ -0,0 +1,4 @@
+LOCAL_ONLY=True
+SECRET_KEY=
+UPLOADS_DIR=./uploads
+PROCESSED_DIR=./processed

.gitignore

@@ -7,4 +7,7 @@ core
 huey.*
 *.db
 req.txt
+settings.yml
+app.log
+/config/*
 

docker-compose.yml

@@ -5,12 +5,18 @@ services:
     build: .
     env_file:
       - .env
+    environment:
+      - LOCAL_ONLY=True # set to False to enable OIDC auth (requires configuration in settings.yml)
+      - SECRET_KEY= # if using auth
+      - UPLOADS_DIR=/app/uploads
+      - PROCESSED_DIR=/app/processed
 
     #user: "1000:1000"
     ports:
       - "6969:8000"
     volumes:
       # Mount local directories and files into the container for persistence
+      - ./config:/app/config
       - ./uploads_data:/app/uploads
       - ./processed_data:/app/processed
 

requirements.txt

@@ -16,6 +16,7 @@ pypdf
 
 # Configuration & Utilities
 werkzeug
+dotenv
 PyYAML
 pydantic
 pydantic-settings

run.sh

@@ -2,9 +2,14 @@
 
 # Exit immediately if a command exits with a non-zero status.
 set -e
+source .env
 
+LOCAL_ONLY=True
+SECRET_KEY=4bd5dcfc32602307e5101efcfedbb7c3e770a8167d596933
+UPLOADS_DIR=/home/manuel/file-wiz/uploads
+PROCESSED_DIR=/home/manuel/file-wiz/processed
 # Start Gunicorn in the background
-gunicorn -w 4 --threads 2 -k uvicorn.workers.UvicornWorker --forwarded-allow-ips='*' main:app -b 0.0.0.0:8000 &
+gunicorn -w 4 --threads 2 -k uvicorn.workers.UvicornWorker --forwarded-allow-ips='*' --error-logfile - --access-logfile - main:app -b 0.0.0.0:8000 &
 echo "Started Gunicorn..."
 # Store the Gunicorn process ID
 GUNICORN_PID=$!

settings.default.yml

@@ -1,45 +1,14 @@
+auth_settings:
+  oidc_client_id: 
+  oidc_client_secret: 
+  oidc_server_metadata_url: https://accounts.oauth.com/oidc/.well-known/openid-configuration
+  oidc_userinfo_endpoint: https://accounts.oauth.com/oidc/me
+  oidc_end_session_endpoint: https://accounts.oauth.com/oidc/session/end
+  admin_users:
+  - admin@local.com
 app_settings:
   max_file_size_mb: '2000'
-  allowed_all_extensions:
+  allowed_all_extensions: [.pdf, .ps, .eps, .png, .jpg, .jpeg, .tiff, .tif, .gif, .bmp, .webp, .svg, .jxl, .avif, .ppm, .mp3, .m4a, .ogg, .flac, .opus, .wav, .aac, .mp4, .mkv, .mov, .webm, .avi, .flv, .md, .txt, .html, .docx, .odt, .rst, .epub, .mobi, .azw3, .pptx, .xlsx]
-  - .pdf
-  - .ps
-  - .eps
-  - .png
-  - .jpg
-  - .jpeg
-  - .tiff
-  - .tif
-  - .gif
-  - .bmp
-  - .webp
-  - .svg
-  - .jxl
-  - .avif
-  - .ppm
-  - .mp3
-  - .m4a
-  - .ogg
-  - .flac
-  - .opus
-  - .wav
-  - .aac
-  - .mp4
-  - .mkv
-  - .mov
-  - .webm
-  - .avi
-  - .flv
-  - .md
-  - .txt
-  - .html
-  - .docx
-  - .odt
-  - .rst
-  - .epub
-  - .mobi
-  - .azw3
-  - .pptx
-  - .xlsx
 ocr_settings:
   ocrmypdf:
     deskew: true
@@ -223,15 +192,15 @@ conversion_tools:
       png_fast: PNG (Fast Compression)
   sox:
     name: SoX Audio Converter
-    command_template: sox {input} -r {samplerate} -b {bitdepth} {output}
+    command_template: sox {input} -r {samplerate} {bitdepth} {output}
     timeout: 600
     formats:
       wav_48k_24b: WAV (48kHz, 24-bit)
       wav_44k_16b: WAV (CD, 44.1kHz, 16-bit)
       flac_48k_24b: FLAC (48kHz, 24-bit)
       flac_44k_16b: FLAC (CD, 44.1kHz, 16-bit)
-      ogg_32k_16b: Ogg Vorbis (32kHz)
+      ogg_32k: Ogg Vorbis (32kHz)
-      ogg_16k_16b: Ogg Vorbis (16kHz, Voice)
+      ogg_16k: Ogg Vorbis (16kHz, Voice)
   mozjpeg:
     name: MozJPEG
     command_template: cjpeg -quality {quality} -outfile {output} {input}

settings.yml

@@ -1,45 +1,80 @@
+auth_settings:
+  oidc_client_id: filewiz
+  oidc_client_secret: 5tIR4k75pdmiV2QSlLSSeqsA5vgxB21F
+  oidc_server_metadata_url: https://accounts.manuelunterriker.de/oidc/.well-known/openid-configuration
+  oidc_userinfo_endpoint: https://accounts.manuelunterriker.de/oidc/me
+  oidc_end_session_endpoint: https://accounts.manuelunterriker.de/oidc/session/end
+  admin_users:
+  - manuel@unterriker.com
 app_settings:
   max_file_size_mb: '2000'
   allowed_all_extensions:
-  - .pdf
-  - .ps
-  - .eps
-  - .png
-  - .jpg
-  - .jpeg
-  - .tiff
-  - .tif
-  - .gif
-  - .bmp
-  - .webp
-  - .svg
-  - .jxl
-  - .avif
-  - .ppm
-  - .mp3
-  - .m4a
-  - .ogg
-  - .flac
-  - .opus
-  - .wav
   - .aac
-  - .mp4
+  - .aiff
-  - .mkv
+  - .avif
-  - .mov
-  - .webm
   - .avi
-  - .flv
-  - .md
-  - .txt
-  - .html
-  - .docx
-  - .odt
-  - .rst
-  - .epub
-  - .mobi
   - .azw3
+  - .bmp
+  - .csv
+  - .dbf
+  - .doc
+  - .docx
+  - .dpx
+  - .dxf
+  - .eps
+  - .epub
+  - .fb2
+  - .fits
+  - .flac
+  - .flv
+  - .gif
+  - .gsm
+  - .html
+  - .htmlz
+  - .ico
+  - .jpeg
+  - .jpg
+  - .jxl
+  - .lit
+  - .lrf
+  - .m4a
+  - .md
+  - .mkv
+  - .mobi
+  - .mov
+  - .mp3
+  - .mp4
+  - .odt
+  - .ogg
+  - .ogv
+  - .opml
+  - .opus
+  - .pdb
+  - .pdf
+  - .pnm
+  - .png
+  - .ppt
   - .pptx
+  - .ps
+  - .rst
+  - .rtf
+  - .svg
+  - .tcr
+  - .tex
+  - .tif
+  - .tiff
+  - .txt
+  - .wav
+  - .webm
+  - .webp
+  - .wma
+  - .wmv
+  - .wps
   - .xlsx
+  - .xls
+  - .xml
+  - .xpm
+  - .zip
 ocr_settings:
   ocrmypdf:
     deskew: true
@@ -65,6 +100,7 @@ conversion_tools:
     filters:
       pdf: pdf
       docx: docx
+      doc: doc
       odt: odt
       html: html
       rtf: rtf
@@ -72,26 +108,39 @@ conversion_tools:
       xml: xml
       epub: epub
       xlsx: xlsx
+      xls: xls
       ods: ods
       csv: csv:Text
       pptx: pptx
+      ppt: ppt
       odp: odp
       svg: svg
+      png: png
+      jpg: jpg
+      wps: wps
+      dbf: dbf
     formats:
-      pdf: PDF
+      pdf: PDF Document
-      docx: Word Document
+      docx: Word Document (DOCX)
+      doc: Word 97-2003 Document (DOC)
       odt: OpenDocument Text
-      html: HTML
+      html: HTML Document
       rtf: Rich Text Format
       txt: Plain Text
       xml: Word 2003 XML
-      epub: EPUB
+      epub: EPUB E-Book
-      xlsx: Excel Spreadsheet
+      xlsx: Excel Spreadsheet (XLSX)
+      xls: Excel 97-2003 Spreadsheet (XLS)
       ods: OpenDocument Spreadsheet
       csv: CSV
-      pptx: PowerPoint Presentation
+      pptx: PowerPoint Presentation (PPTX)
+      ppt: PowerPoint 97-2003 Presentation (PPT)
       odp: OpenDocument Presentation
-      svg: SVG
+      svg: SVG Image (from Draw/Impress)
+      png: PNG Image (from Draw/Impress)
+      jpg: JPEG Image (from Draw/Impress)
+      wps: MS Works Document
+      dbf: dBase Database File
   pandoc:
     name: Pandoc
     command_template: pandoc --standalone {input} -o {output} --to={output_ext} --pdf-engine=xelatex
@@ -99,22 +148,27 @@ conversion_tools:
     formats:
       docx: Word Document
       odt: OpenDocument Text
-      pdf: PDF
+      pdf: PDF Document
       rtf: Rich Text Format
       txt: Plain Text
+      md: Markdown (Strict)
+      gfm: Markdown (GitHub-Flavored)
       tex: LaTeX
-      man: Groff Man Page
+      html: HTML5
       epub: EPUB v3 Book
       epub2: EPUB v2 Book
-      html: HTML
-      html5: HTML5
       pptx: PowerPoint Presentation
       beamer: Beamer PDF Slides
       slidy: Slidy HTML Slides
-      md: Markdown
+      revealjs: reveal.js HTML Slides
       rst: reStructuredText
       jira: Jira Wiki Markup
       mediawiki: MediaWiki Markup
+      asciidoc: AsciiDoc
+      textile: Textile
+      opml: OPML
+      man: Groff Man Page
+      docbook: DocBook XML
   ghostscript_pdf:
     name: Ghostscript (PDF)
     command_template: gs -sDEVICE=pdfwrite -dCompatibilityLevel=1.4 -dNOPAUSE -dQUIET
@@ -124,7 +178,8 @@ conversion_tools:
       screen: PDF (Optimized for Screen)
       ebook: PDF (Optimized for Ebooks)
       printer: PDF (Optimized for Print)
-      archive: PDF/A (for Archiving)
+      prepress: PDF (Optimized for Prepress)
+      pdfa: PDF/A-2b (for Archiving)
   ghostscript_image:
     name: Ghostscript (Image)
     command_template: gs -dNOPAUSE -dBATCH -sDEVICE={device} -r{dpi} -sOutputFile={output}
@@ -132,11 +187,18 @@ conversion_tools:
     timeout: 60
     formats:
       jpeg_72: JPEG Image (72 DPI)
+      jpeg_150: JPEG Image (150 DPI)
       jpeg_300: JPEG Image (300 DPI)
       png16m_150: PNG Image (150 DPI)
       png16m_300: PNG Image (300 DPI)
+      pngalpha_150: PNG Image with Alpha (150 DPI)
+      pngalpha_300: PNG Image with Alpha (300 DPI)
       tiff24nc_300: TIFF Image (300 DPI)
       tiff24nc_600: TIFF Image (600 DPI)
+      tiffg4_300: TIFF Image (G4 Fax, 300 DPI)
+      bmp16m_300: BMP Image (300 DPI)
+      pcx24b_300: PCX Image (300 DPI)
+      pnm_300: PNM Image (300 DPI)
   calibre:
     name: Calibre (ebook-convert)
     command_template: ebook-convert {input} {output}
@@ -144,22 +206,42 @@ conversion_tools:
     formats:
       epub: EPUB
       mobi: MOBI
-      azw3: Amazon Kindle
+      azw3: Amazon Kindle (AZW3)
       pdf: PDF
       docx: Word Document
+      rtf: Rich Text Format
+      txt: Plain Text
+      fb2: FictionBook 2
+      htmlz: Zipped HTML
+      pdb: eReader PDB
+      lrf: Sony BroadBand eBook
+      lit: Microsoft Reader
+      tcr: Psion Series 3
   ffmpeg:
     name: FFmpeg
     command_template: ffmpeg -i {input} -y -preset medium {output}
     timeout: 600
     formats:
-      mp4: MP4 Video
+      mp4: MP4 Video (H.264/AAC)
-      mkv: MKV Video
+      mp4_hevc: MP4 Video (H.265/AAC)
-      mov: MOV Video
+      mkv: MKV Video (H.264/AAC)
-      webm: WebM Video
+      mov: MOV Video (H.264/AAC)
+      webm: WebM Video (VP9/Opus)
+      webm_av1: WebM Video (AV1/Opus)
+      avi: AVI Video (MPEG4/MP3)
+      wmv: WMV Video
+      flv: FLV Video (Flash)
+      ogv: Ogg Theora Video
       mp3: MP3 Audio
-      wav: WAV Audio
+      wav: WAV Audio (Uncompressed PCM)
-      flac: FLAC Audio
+      flac: FLAC Audio (Lossless)
+      aac: AAC Audio
+      aiff: AIFF Audio
+      wma: WMA Audio
+      ogg: Ogg Vorbis Audio
+      opus: Opus Audio
       gif: Animated GIF
+      apng: Animated PNG
   vips:
     name: VIPS
     command_template: vips copy {input} {output}[Q=90]
@@ -169,7 +251,12 @@ conversion_tools:
       png: PNG Image
       webp: WebP Image (Q90)
       tiff: TIFF Image
-      avif: AVIF Image
+      avif: AVIF Image (Q90)
+      heif: HEIF Image (Q90)
+      jp2: JPEG 2000
+      gif: GIF Image
+      pnm: PNM Image
+      fits: FITS Image
   graphicsmagick:
     name: GraphicsMagick
     command_template: gm convert {input} -quality 90 {output}
@@ -179,21 +266,36 @@ conversion_tools:
       png: PNG Image
       webp: WebP Image
       tiff: TIFF Image
+      gif: GIF Image
+      bmp: BMP Image
       pdf: PDF from Images
+      eps: Encapsulated PostScript
+      dpx: DPX Image
+      ico: Windows Icon
+      xpm: X PixMap
   inkscape:
     name: Inkscape
     command_template: inkscape {input} --export-filename={output}
     timeout: 30
     formats:
       svg: SVG (Plain)
-      png: PNG Image (96 DPI)
+      inkscape_svg: SVG (Inkscape)
+      png_96: PNG Image (96 DPI)
+      png_300: PNG Image (300 DPI)
       pdf: PDF Document
+      eps: Encapsulated PostScript
+      ps: PostScript
+      emf: Enhanced Metafile
+      wmf: Windows Metafile
+      dxf: AutoCAD DXF R14
   libjxl:
     name: libjxl (cjxl)
     command_template: cjxl {input} {output} -q 90
     timeout: 30
     formats:
-      jxl: JPEG XL (Q90)
+      jxl_q90: JPEG XL (Quality 90)
+      jxl_lossless: JPEG XL (Lossless)
+      jxl_hq: JPEG XL (High Compression)
   resvg:
     name: resvg
     command_template: resvg {input} {output}
@@ -206,6 +308,10 @@ conversion_tools:
     timeout: 30
     formats:
       svg: SVG from Bitmap
+      pdf: PDF from Bitmap
+      eps: EPS from Bitmap
+      ps: PostScript from Bitmap
+      dxf: DXF from Bitmap
   markitdown:
     name: Markitdown
     command_template: markitdown {input} -o {output}
@@ -223,15 +329,22 @@ conversion_tools:
       png_fast: PNG (Fast Compression)
   sox:
     name: SoX Audio Converter
-    command_template: sox {input} -r {samplerate} -b {bitdepth} {output}
+    command_template: sox {input} -r {samplerate} {bitdepth} {output}
     timeout: 600
     formats:
       wav_48k_24b: WAV (48kHz, 24-bit)
       wav_44k_16b: WAV (CD, 44.1kHz, 16-bit)
+      wav_16k_16b: WAV (Voice, 16kHz, 16-bit)
       flac_48k_24b: FLAC (48kHz, 24-bit)
       flac_44k_16b: FLAC (CD, 44.1kHz, 16-bit)
-      ogg_32k_16b: Ogg Vorbis (32kHz)
+      aiff_44k_16b: AIFF (CD, 44.1kHz, 16-bit)
-      ogg_16k_16b: Ogg Vorbis (16kHz, Voice)
+      mp3_320k: MP3 (320 kbps)
+      mp3_128k: MP3 (128 kbps)
+      ogg_192k: Ogg Vorbis (192 kbps)
+      ogg_96k: Ogg Vorbis (96 kbps)
+      opus_128k: Opus (128 kbps)
+      opus_64k: Opus (64 kbps, Voice)
+      gsm: GSM 06.10 (13kbps, Voice)
   mozjpeg:
     name: MozJPEG
     command_template: cjpeg -quality {quality} -outfile {output} {input}

static/css/style.css

@@ -39,10 +39,61 @@ body {
     -moz-osx-font-smoothing: grayscale;
 }
 
+/* --- START: Login View Styles --- */
+#login-container {
+    display: flex; /* Initially hidden/shown by JS */
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    height: 100vh;
+    text-align: center;
+    padding: 1rem;
+}
+
+.login-box {
+    background: var(--card-bg);
+    padding: 2.5rem 3rem;
+    border-radius: 10px;
+    border: 1px solid var(--border-color);
+}
+
+#login-container h1 {
+    font-family: serif;
+    font-weight: lighter;
+    font-size: 3rem;
+    margin: 0 0 0.5rem 0;
+}
+
+#login-container p {
+    font-size: 1.1rem;
+    color: var(--muted-text);
+    margin-bottom: 2rem;
+}
+
+.login-button-style {
+    background-color: var(--primary-color);
+    color: var(--bg-color);
+    border: 1px solid var(--primary-color);
+    padding: 0.7rem 2.5rem;
+    font-size: 1rem;
+    font-weight: 600;
+    border-radius: 5px;
+    cursor: pointer;
+    transition: background-color 0.15s ease, color 0.15s ease, transform 0.1s ease;
+}
+
+.login-button-style:hover {
+    background-color: transparent;
+    color: var(--primary-color);
+    transform: scale(1.03);
+}
+/* --- END: Login View Styles --- */
+
+
 /* Container */
 .container {
     width: 100%;
-    max-width: 1280px; /* Increased max-width for 3 columns */
+    max-width: 1280px;
     margin: 0 auto;
     background: var(--card-bg);
     border-radius: 10px;
@@ -71,7 +122,6 @@ header {
 header h1 {
     margin: 0 0 0.25rem 0;
     font-size: 3rem;
-    font-weight: 700;
     font-family: serif;
     font-weight: lighter;
 }
@@ -86,34 +136,50 @@ header p {
     position: absolute;
     top: 1.5rem;
     right: 1.5rem;
+    display: flex;
+    align-items: center;
+    gap: 1rem;
+}
+
+.header-actions div {
+    position: fixed;
+    left: 0;
+    bottom: 0em;
+    width: 100vw;
+    padding: 2em;
+    padding-top: 5em;
+    text-align: center;
+    background-color: rgb(0, 0, 0);
+    background: linear-gradient(0deg, rgb(0, 0, 0) 30%, rgba(0, 0, 0, 0) 100%);
+}
+
+.user-info {
+    font-size: 0.9rem;
+    color: var(--muted-text);
 }
 .settings-link {
-    font-size: 1.5rem;
+    font-size: 0.9rem;
+    margin-left: 0.5em;
     text-decoration: none;
     color: var(--muted-text);
     transition: color 0.2s ease;
+    
 }
 .settings-link:hover {
     color: var(--text-color);
 }
-/* Form Layout */
+
-.form-grid {
+/* --- Form and Input Styles --- */
-    display: grid;
+.processor-section {
-    /* MODIFICATION: Responsive grid for 1, 2, or 3 items */
-    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
-    gap: 1.5rem;
     margin-bottom: 2rem;
 }
 
 .upload-form fieldset {
     border: 1px solid var(--border-color);
     border-radius: 8px;
-    padding: 1rem;
+    padding: 1.5rem;
     margin: 0;
     background: transparent;
-    height: 100%;
-    display: flex;
-    flex-direction: column;
 }
 
 .upload-form legend {
@@ -134,7 +200,6 @@ header p {
     align-items: center;
     gap: 1rem;
     margin-top: 1rem;
-    margin-bottom: 1rem;
 }
 
 input[type="file"] {
@@ -211,31 +276,56 @@ input[type="file"] {
     box-shadow: 0 0 0 2px rgba(0, 180, 255, 0.2);
 }
 
-/* Submit button */
+/* --- NEW: Responsive group for action sections --- */
-button[type="submit"] {
+.actions-group {
+    display: grid;
+    grid-template-columns: repeat(3, 1fr); /* 3 columns for wide screens */
+    gap: 1.5rem;
+    margin-top: 1.5rem;
+}
+
+.action-fieldset {
+    /* Inherits border/padding from the generic fieldset style */
+    display: flex;
+    flex-direction: column;
+}
+
+.action-description {
+    color: var(--muted-text);
+    font-size: 0.9rem;
+    margin-bottom: 1rem;
+    flex-grow: 1; /* Helps align buttons if one section has more text */
+}
+
+/* --- NEW: Styling for individual action buttons --- */
+.main-action-button {
     display: block;
     width: 100%;
-    background: var(--primary-color);
+    background: transparent;
-    background-color: transparent;
+    border: 1px solid var(--border-color);
-    border-color: var(--border-color);
+    color: var(--text-color);
-    border-width: 1px;
-    color: #ffffff;
     padding: 0.65rem 1rem;
     font-size: 1rem;
     font-weight: 600;
     border-radius: 5px;
     cursor: pointer;
-    transition: background-color 0.15s ease;
+    transition: background-color 0.15s ease, border-color 0.15s ease;
-    margin-top: auto;
+    margin-top: auto; /* Pushes button to the bottom of the flex container (fieldset) */
 }
-button[type="submit"]:hover {
+
+.main-action-button:hover {
     background: var(--primary-hover);
+    border-color: var(--primary-hover);
 }
-button[type="submit"]:disabled {
+
+.main-action-button:disabled {
     background-color: var(--muted-text);
+    border-color: var(--muted-text);
     cursor: not-allowed;
+    opacity: 0.5;
 }
 
+
 /* History Section */
 #job-history h2 {
     text-align: center;
@@ -251,12 +341,14 @@ button[type="submit"]:disabled {
     border: 1px solid var(--border-color);
     border-radius: 8px;
     background-color: var(--surface);
+    margin-bottom: 6em;
 }
 
 #job-table {
     width: 100%;
     border-collapse: collapse;
     font-size: 0.9rem;
+    margin-bottom: 2em;
 }
 
 #job-table th,
@@ -390,7 +482,7 @@ button[type="submit"]:disabled {
 }
 .cancel-button:hover { background-color: #ff8f8f; }
 
-/* --- MODIFICATION: Dark theme for Choices.js --- */
+/* --- Dark theme for Choices.js --- */
 .choices {
     font-size: 0.95rem;
 }
@@ -447,7 +539,7 @@ button[type="submit"]:disabled {
 
 }
 
-/* --- START: Drag and Drop and Dialog Styles --- */
+/* --- Drag and Drop and Dialog Styles --- */
 .drag-overlay {
     position: fixed;
     inset: 0;
@@ -549,7 +641,6 @@ body.dragging .drag-overlay {
 .dialog-cancel:hover {
     color: var(--text-color);
 }
-/* --- END: Drag and Drop and Dialog Styles --- */
 
 /* Spinner */
 .spinner-small {
@@ -567,7 +658,13 @@ body.dragging .drag-overlay {
     100% { transform: rotate(360deg); }
 }
 
-/* Mobile responsive table */
+/* --- Mobile responsive styles --- */
+@media (max-width: 992px) {
+    .actions-group {
+        grid-template-columns: 1fr; /* Stack to 1 column on tablet and smaller */
+    }
+}
+
 @media (max-width: 768px) {
     .table-wrapper {
         border: none;

static/js/script.js

@@ -1,6 +1,9 @@
 document.addEventListener('DOMContentLoaded', () => {
-    // --- User Locale and Timezone Detection (Corrected Implementation) ---
+    // --- Constants ---
-    const USER_LOCALE = navigator.language || 'en-US'; // Fallback to en-US
+    const CHUNK_SIZE = 5 * 1024 * 1024; // 5 MB chunks
+
+    // --- User Locale and Timezone Detection ---
+    const USER_LOCALE = navigator.language || 'en-US';
     const USER_TIMEZONE = Intl.DateTimeFormat().resolvedOptions().timeZone;
     const DATETIME_FORMAT_OPTIONS = {
         year: 'numeric',
@@ -10,67 +13,69 @@ document.addEventListener('DOMContentLoaded', () => {
         minute: '2-digit',
         timeZone: USER_TIMEZONE,
     };
-    console.log(`Using locale: ${USER_LOCALE} and timezone: ${USER_TIMEZONE}`);
 
     // --- Element Selectors ---
+    const appContainer = document.getElementById('app-container');
+    const loginContainer = document.getElementById('login-container');
+    const loginButton = document.getElementById('login-button');
+
+    // Main form elements
+    const mainFileInput = document.getElementById('main-file-input');
+    const mainFileName = document.getElementById('main-file-name');
+    const mainOutputFormatSelect = document.getElementById('main-output-format-select');
+    const mainModelSizeSelect = document.getElementById('main-model-size-select');
+    const startConversionBtn = document.getElementById('start-conversion-btn');
+    const startOcrBtn = document.getElementById('start-ocr-btn');
+    const startTranscriptionBtn = document.getElementById('start-transcription-btn');
+
     const jobListBody = document.getElementById('job-list-body');
 
-    const pdfForm = document.getElementById('pdf-form');
+    // Drag and Drop Elements
-    const pdfFileInput = document.getElementById('pdf-file-input');
-    const pdfFileName = document.getElementById('pdf-file-name');
-    
-    const audioForm = document.getElementById('audio-form');
-    const audioFileInput = document.getElementById('audio-file-input');
-    const audioFileName = document.getElementById('audio-file-name');
-    const modelSizeSelect = document.getElementById('model-size-select');
-    
-    const conversionForm = document.getElementById('conversion-form');
-    const conversionFileInput = document.getElementById('conversion-file-input');
-    const conversionFileName = document.getElementById('conversion-file-name');
-    const outputFormatSelect = document.getElementById('output-format-select');
-
-    // START: Drag and Drop additions
     const dragOverlay = document.getElementById('drag-overlay');
     const actionDialog = document.getElementById('action-dialog');
     const dialogFileCount = document.getElementById('dialog-file-count');
-    // Dialog Views
     const dialogInitialView = document.getElementById('dialog-initial-actions');
     const dialogConvertView = document.getElementById('dialog-convert-view');
-    // Dialog Buttons
     const dialogConvertBtn = document.getElementById('dialog-action-convert');
     const dialogOcrBtn = document.getElementById('dialog-action-ocr');
     const dialogTranscribeBtn = document.getElementById('dialog-action-transcribe');
     const dialogCancelBtn = document.getElementById('dialog-action-cancel');
     const dialogStartConversionBtn = document.getElementById('dialog-start-conversion');
     const dialogBackBtn = document.getElementById('dialog-back');
-    // Dialog Select
     const dialogOutputFormatSelect = document.getElementById('dialog-output-format-select');
-    // END: Drag and Drop additions
 
+    // --- State Variables ---
     let conversionChoices = null;
-    let dialogConversionChoices = null; // For the dialog's format selector
+    let modelChoices = null; // For the model dropdown instance
+    let dialogConversionChoices = null;
     const activePolls = new Map();
-    let stagedFiles = null; // To hold files from a drop event
+    let stagedFiles = null;
 
-    // --- Main Event Listeners ---
-    pdfFileInput.addEventListener('change', () => updateFileName(pdfFileInput, pdfFileName));
-    audioFileInput.addEventListener('change', () => updateFileName(audioFileInput, audioFileName));
-    conversionFileInput.addEventListener('change', () => updateFileName(conversionFileInput, conversionFileName));
 
-    pdfForm.addEventListener('submit', (e) => handleFormSubmit(e, '/ocr-pdf', pdfForm));
+    // --- Authentication-aware Fetch Wrapper ---
-    audioForm.addEventListener('submit', (e) => handleFormSubmit(e, '/transcribe-audio', audioForm));
+    /**
-    conversionForm.addEventListener('submit', (e) => handleFormSubmit(e, '/convert-file', conversionForm));
+     * A wrapper around the native fetch API that handles 401 Unauthorized responses.
-
+     * If a 401 is received, it assumes the session has expired and redirects to the login page.
-    jobListBody.addEventListener('click', (event) => {
+     * @param {string} url - The URL to fetch.
-        if (event.target.classList.contains('cancel-button')) {
+     * @param {object} options - The options for the fetch request.
-            const jobId = event.target.dataset.jobId;
+     * @returns {Promise<Response>} - A promise that resolves to the fetch Response.
-            handleCancelJob(jobId);
+     */
+    async function authFetch(url, options) {
+        const response = await fetch(url, options);
+        if (response.status === 401) {
+            // Use a simple alert for now. A more sophisticated modal could be used.
+            alert('Your session has expired. You will be redirected to the login page.');
+            window.location.href = '/login';
+            // Throw an error to stop the promise chain of the calling function
+            throw new Error('Session expired');
         }
-    });
+        return response;
+    }
+
 
     // --- Helper Functions ---
     function formatBytes(bytes, decimals = 1) {
-        if (!+bytes) return '0 Bytes'; // Handles 0, null, undefined
+        if (!+bytes) return '0 Bytes';
         const k = 1024;
         const dm = decimals < 0 ? 0 : decimals;
         const sizes = ['Bytes', 'KB', 'MB', 'GB', 'TB'];
@@ -78,109 +83,166 @@ document.addEventListener('DOMContentLoaded', () => {
         return `${parseFloat((bytes / Math.pow(k, i)).toFixed(dm))} ${sizes[i]}`;
     }
 
-    // --- Core Job Submission Logic (Refactored for reuse) ---
+    // --- Chunked Uploading Logic ---
-    async function submitJob(endpoint, formData, originalFilename) {
+    async function uploadFileInChunks(file, taskType, options = {}) {
-        try {
+        const uploadId = 'upload-' + Date.now() + '-' + Math.random().toString(36).substr(2, 9);
-            const response = await fetch(endpoint, { method: 'POST', body: formData });
+        const totalChunks = Math.ceil(file.size / CHUNK_SIZE);
-            if (!response.ok) {
+
-                const errorData = await response.json();
-                throw new Error(errorData.detail || `HTTP error! Status: ${response.status}`);
-            }
-            const result = await response.json();
         const preliminaryJob = {
-                id: result.job_id,
+            id: uploadId,
-                status: 'pending',
+            status: 'uploading',
             progress: 0,
-                original_filename: originalFilename,
+            original_filename: file.name,
-                input_filesize: formData.get('file').size,
+            input_filesize: file.size,
-                task_type: endpoint.includes('ocr') ? 'ocr' : (endpoint.includes('transcribe') ? 'transcription' : 'conversion'),
+            task_type: taskType,
-                created_at: new Date().toISOString() // Create preliminary UTC timestamp
+            created_at: new Date().toISOString()
         };
         renderJobRow(preliminaryJob);
+
+        for (let chunkNumber = 0; chunkNumber < totalChunks; chunkNumber++) {
+            const start = chunkNumber * CHUNK_SIZE;
+            const end = Math.min(start + CHUNK_SIZE, file.size);
+            const chunk = file.slice(start, end);
+            const formData = new FormData();
+            formData.append('chunk', chunk, file.name);
+            formData.append('upload_id', uploadId);
+            formData.append('chunk_number', chunkNumber);
+
+            try {
+                const response = await authFetch('/upload/chunk', {
+                    method: 'POST',
+                    body: formData,
+                });
+                if (!response.ok) {
+                    throw new Error(`Chunk upload failed with status: ${response.status}`);
+                }
+                const progress = Math.round(((chunkNumber + 1) / totalChunks) * 100);
+                updateUploadProgress(uploadId, progress);
+            } catch (error) {
+                console.error(`Error uploading chunk ${chunkNumber} for ${file.name}:`, error);
+                if (error.message !== 'Session expired') {
+                    updateJobToFailedState(uploadId, `Upload failed: ${error.message}`);
+                }
+                return;
+            }
+        }
+
+        try {
+            const finalizePayload = {
+                upload_id: uploadId,
+                original_filename: file.name,
+                total_chunks: totalChunks,
+                task_type: taskType,
+                ...options
+            };
+            const finalizeResponse = await authFetch('/upload/finalize', {
+                method: 'POST',
+                headers: { 'Content-Type': 'application/json' },
+                body: JSON.stringify(finalizePayload),
+            });
+            if (!finalizeResponse.ok) {
+                const errorData = await finalizeResponse.json();
+                throw new Error(errorData.detail || 'Finalization failed');
+            }
+            const result = await finalizeResponse.json();
+            const uploadRow = document.getElementById(uploadId);
+            if (uploadRow) {
+                uploadRow.id = `job-${result.job_id}`;
+                const statusCell = uploadRow.querySelector('td[data-label="Status"] .cell-value');
+                if (statusCell) {
+                    statusCell.innerHTML = `<span class="job-status-badge status-pending">Pending</span>`;
+                }
+            }
             startPolling(result.job_id);
         } catch (error) {
-            console.error('Error submitting job:', error);
+            console.error(`Error finalizing upload for ${file.name}:`, error);
-            alert(`Submission failed for ${originalFilename}: ${error.message}`);
+            if (error.message !== 'Session expired') {
+                updateJobToFailedState(uploadId, `Finalization failed: ${error.message}`);
+            }
         }
     }
 
-    // --- Original Form Submission Handler (Now uses submitJob) ---
+    function updateUploadProgress(uploadId, progress) {
-    async function handleFormSubmit(event, endpoint, form) {
+        const row = document.getElementById(uploadId);
-        event.preventDefault();
+        if (row) {
-        const fileInput = form.querySelector('input[type="file"]');
+            const progressBar = row.querySelector('.progress-bar');
-        if (fileInput.files.length === 0) return;
+            if (progressBar) {
-
+                progressBar.style.width = `${progress}%`;
-        const submitButton = form.querySelector('button[type="submit"]');
+            }
-        submitButton.disabled = true;
-
-        // Convert FileList to an array to loop through it
-        const files = Array.from(fileInput.files);
-
-        // Process each file as a separate job
-        for (const file of files) {
-            const formData = new FormData();
-            formData.append('file', file);
-
-            // Append other form data if it exists
-            const outputFormat = form.querySelector('select[name="output_format"]');
-            if (outputFormat) {
-                formData.append('output_format', outputFormat.value);
         }
-            const modelSize = form.querySelector('select[name="model_size"]');
-            if (modelSize) {
-                formData.append('model_size', modelSize.value);
     }
 
-            // Await each job submission to process them sequentially
+    function updateJobToFailedState(jobId, errorMessage) {
-            await submitJob(endpoint, formData, file.name);
+        const row = document.getElementById(jobId);
+        if (row) {
+            const statusCell = row.querySelector('td[data-label="Status"] .cell-value');
+            const actionCell = row.querySelector('td[data-label="Action"] .cell-value');
+            if (statusCell) statusCell.innerHTML = `<span class="job-status-badge status-failed">Failed</span>`;
+            if (actionCell) {
+                const errorTitle = errorMessage ? ` title="${errorMessage.replace(/"/g, '&quot;')}"` : '';
+                actionCell.innerHTML = `<span class="error-text"${errorTitle}>Failed</span>`;
+            }
+        }
     }
 
-        // Reset the form UI after all jobs have been submitted
+    // --- Centralized Task Request Handler ---
-        const fileNameDisplay = form.querySelector('.file-name');
+    async function handleTaskRequest(taskType) {
-        form.reset();
+        if (mainFileInput.files.length === 0) {
-        if (fileNameDisplay) {
+            alert('Please choose one or more files first.');
-             fileNameDisplay.textContent = 'No file chosen';
+            return;
-             fileNameDisplay.title = 'No file chosen';
-        }
-        if (form.id === 'conversion-form' && conversionChoices) {
-            conversionChoices.clearInput();
-            conversionChoices.setValue([]);
-        }
-        submitButton.disabled = false;
         }
 
-    // --- START: Drag and Drop Implementation ---
+        const files = Array.from(mainFileInput.files);
+        const options = {};
+
+        if (taskType === 'conversion') {
+            const selectedFormat = conversionChoices.getValue(true);
+            if (!selectedFormat) {
+                alert('Please select a format to convert to.');
+                return;
+            }
+            options.output_format = selectedFormat;
+        } else if (taskType === 'transcription') {
+            options.model_size = mainModelSizeSelect.value;
+        }
+
+        // Disable buttons during upload process
+        startConversionBtn.disabled = true;
+        startOcrBtn.disabled = true;
+        startTranscriptionBtn.disabled = true;
+
+        const uploadPromises = files.map(file => uploadFileInChunks(file, taskType, options));
+        await Promise.allSettled(uploadPromises);
+
+        // Reset file input and re-enable buttons
+        mainFileInput.value = ''; // Resets the file list
+        updateFileName(mainFileInput, mainFileName);
+        startConversionBtn.disabled = false;
+        startOcrBtn.disabled = false;
+        startTranscriptionBtn.disabled = false;
+    }
+
+
     function setupDragAndDropListeners() {
-        let dragCounter = 0; // Counter to manage enter/leave events reliably
+        let dragCounter = 0;
-
         window.addEventListener('dragenter', (e) => {
             e.preventDefault();
             dragCounter++;
             document.body.classList.add('dragging');
         });
-
         window.addEventListener('dragleave', (e) => {
             e.preventDefault();
             dragCounter--;
-            if (dragCounter === 0) {
+            if (dragCounter === 0) document.body.classList.remove('dragging');
-                document.body.classList.remove('dragging');
-            }
         });
-
+        window.addEventListener('dragover', (e) => e.preventDefault());
-        window.addEventListener('dragover', (e) => {
-            e.preventDefault(); // This is necessary to allow a drop
-        });
-
         window.addEventListener('drop', (e) => {
             e.preventDefault();
-            dragCounter = 0; // Reset counter
+            dragCounter = 0;
             document.body.classList.remove('dragging');
-            
-            // Only handle the drop if it's on our designated overlay
             if (e.target === dragOverlay || dragOverlay.contains(e.target)) {
-                const files = e.dataTransfer.files;
+                if (e.dataTransfer.files && e.dataTransfer.files.length > 0) {
-                if (files && files.length > 0) {
+                    stagedFiles = e.dataTransfer.files;
-                    stagedFiles = files;
                     showActionDialog();
                 }
             }
@@ -189,16 +251,8 @@ document.addEventListener('DOMContentLoaded', () => {
 
     function showActionDialog() {
         dialogFileCount.textContent = stagedFiles.length;
-
+        dialogOutputFormatSelect.innerHTML = mainOutputFormatSelect.innerHTML; // Use main select as template
-        // Clone options from main form's select to the dialog's select
+        if (dialogConversionChoices) dialogConversionChoices.destroy();
-        dialogOutputFormatSelect.innerHTML = outputFormatSelect.innerHTML;
-
-        // Clean up previous Choices.js instance if it exists
-        if (dialogConversionChoices) {
-            dialogConversionChoices.destroy();
-        }
-
-        // Initialize a new Choices.js instance for the dialog
         dialogConversionChoices = new Choices(dialogOutputFormatSelect, {
             searchEnabled: true,
             itemSelectText: 'Select',
@@ -206,8 +260,6 @@ document.addEventListener('DOMContentLoaded', () => {
             placeholder: true,
             placeholderValue: 'Select a format...',
         });
-
-        // Ensure the initial view is shown
         dialogInitialView.style.display = 'grid';
         dialogConvertView.style.display = 'none';
         actionDialog.classList.add('visible');
@@ -216,91 +268,61 @@ document.addEventListener('DOMContentLoaded', () => {
     function closeActionDialog() {
         actionDialog.classList.remove('visible');
         stagedFiles = null;
-        // Important: Destroy the Choices instance to prevent memory leaks
         if (dialogConversionChoices) {
-            // Explicitly hide the dropdown before destroying
             dialogConversionChoices.hideDropdown();
             dialogConversionChoices.destroy();
             dialogConversionChoices = null;
         }
     }
 
-    // --- Dialog Button and Action Listeners ---
     dialogConvertBtn.addEventListener('click', () => {
-        // Switch to the conversion view
         dialogInitialView.style.display = 'none';
         dialogConvertView.style.display = 'block';
     });
-
     dialogBackBtn.addEventListener('click', () => {
-        // Switch back to the initial view
         dialogInitialView.style.display = 'grid';
         dialogConvertView.style.display = 'none';
     });
-
+    dialogStartConversionBtn.addEventListener('click', () => handleDialogAction('conversion'));
-    dialogStartConversionBtn.addEventListener('click', () => handleDialogAction('convert'));
     dialogOcrBtn.addEventListener('click', () => handleDialogAction('ocr'));
-    dialogTranscribeBtn.addEventListener('click', () => handleDialogAction('transcribe'));
+    dialogTranscribeBtn.addEventListener('click', () => handleDialogAction('transcription'));
     dialogCancelBtn.addEventListener('click', closeActionDialog);
 
-
     function handleDialogAction(action) {
         if (!stagedFiles) return;
-
+        let options = {};
-        let endpoint = '';
+        if (action === 'conversion') {
-        const formDataArray = [];
-
-        for (const file of stagedFiles) {
-            const formData = new FormData();
-            formData.append('file', file);
-            
-            if (action === 'convert') {
             const selectedFormat = dialogConversionChoices.getValue(true);
             if (!selectedFormat) {
                 alert('Please select a format to convert to.');
                 return;
             }
-                formData.append('output_format', selectedFormat);
+            options.output_format = selectedFormat;
-                endpoint = '/convert-file';
+        } else if (action === 'transcription') {
-            } else if (action === 'ocr') {
+            options.model_size = mainModelSizeSelect.value;
-                endpoint = '/ocr-pdf';
-            } else if (action === 'transcribe') {
-                formData.append('model_size', modelSizeSelect.value);
-                endpoint = '/transcribe-audio';
         }
-            formDataArray.push({ formData, name: file.name });
+        Array.from(stagedFiles).forEach(file => uploadFileInChunks(file, action, options));
-        }
-
-        formDataArray.forEach(item => {
-            submitJob(endpoint, item.formData, item.name);
-        });
-
         closeActionDialog();
     }
-    // --- END: Drag and Drop Implementation ---
 
-    function initializeConversionSelector() {
+    /**
-        if (conversionChoices) {
+     * Initializes all Choices.js dropdowns on the page.
-            conversionChoices.destroy();
+     */
-        }
+    function initializeSelectors() {
-        conversionChoices = new Choices(outputFormatSelect, {
+        // --- Conversion Dropdown ---
+        if (conversionChoices) conversionChoices.destroy();
+        conversionChoices = new Choices(mainOutputFormatSelect, {
             searchEnabled: true,
             itemSelectText: 'Select',
             shouldSort: false,
             placeholder: true,
             placeholderValue: 'Select a format...',
         });
-
         const tools = window.APP_CONFIG.conversionTools || {};
         const choicesArray = [];
         for (const toolKey in tools) {
             const tool = tools[toolKey];
-            const group = {
+            const group = { label: tool.name, id: toolKey, disabled: false, choices: [] };
-                label: tool.name,
-                id: toolKey,
-                disabled: false,
-                choices: []
-            };
             for (const formatKey in tool.formats) {
                 group.choices.push({
                     value: `${toolKey}_${formatKey}`,
@@ -310,20 +332,23 @@ document.addEventListener('DOMContentLoaded', () => {
             choicesArray.push(group);
         }
         conversionChoices.setChoices(choicesArray, 'value', 'label', true);
+
+        // --- Model Size Dropdown ---
+        if (modelChoices) modelChoices.destroy();
+        modelChoices = new Choices(mainModelSizeSelect, {
+            searchEnabled: false,   // Disables the search box
+            shouldSort: false,      // Keeps the original <option> order
+            itemSelectText: '',     // Hides the "Press to select" tooltip
+        });
     }
 
     function updateFileName(input, nameDisplay) {
         const numFiles = input.files.length;
-        let displayText = 'No file chosen';
+        let displayText = numFiles === 1 ? input.files[0].name : `${numFiles} files selected`;
-        let displayTitle = 'No file chosen';
+        let displayTitle = numFiles > 1 ? Array.from(input.files).map(f => f.name).join(', ') : displayText;
-
+        if (numFiles === 0) {
-        if (numFiles === 1) {
+            displayText = 'No file chosen';
-            displayText = input.files[0].name;
+            displayTitle = 'No file chosen';
-            displayTitle = input.files[0].name;
-        } else if (numFiles > 1) {
-            displayText = `${numFiles} files selected`;
-            // Create a title attribute to show all filenames on hover
-            displayTitle = Array.from(input.files).map(file => file.name).join(', ');
         }
         nameDisplay.textContent = displayText;
         nameDisplay.title = displayTitle;
@@ -332,7 +357,7 @@ document.addEventListener('DOMContentLoaded', () => {
     async function handleCancelJob(jobId) {
         if (!confirm('Are you sure you want to cancel this job?')) return;
         try {
-            const response = await fetch(`/job/${jobId}/cancel`, { method: 'POST' });
+            const response = await authFetch(`/job/${jobId}/cancel`, { method: 'POST' });
             if (!response.ok) {
                 const errorData = await response.json();
                 throw new Error(errorData.detail || 'Failed to cancel job.');
@@ -347,45 +372,43 @@ document.addEventListener('DOMContentLoaded', () => {
             }
         } catch (error) {
             console.error('Error cancelling job:', error);
-            alert(`Error: ${error.message}`);
+            if (error.message !== 'Session expired') alert(`Error: ${error.message}`);
         }
     }
 
     async function loadInitialJobs() {
         try {
-            const response = await fetch('/jobs');
+            const response = await authFetch('/jobs');
             if (!response.ok) throw new Error('Failed to fetch jobs.');
             const jobs = await response.json();
             jobListBody.innerHTML = '';
             for (const job of jobs.reverse()) {
                 renderJobRow(job);
-                if (['pending', 'processing'].includes(job.status)) {
+                if (['pending', 'processing'].includes(job.status)) startPolling(job.id);
-                    startPolling(job.id);
-                }
             }
         } catch (error) {
             console.error("Couldn't load job history:", error);
+            if (error.message !== 'Session expired') {
                 jobListBody.innerHTML = '<tr><td colspan="6" style="text-align: center;">Could not load job history.</td></tr>';
             }
         }
+    }
 
     function startPolling(jobId) {
         if (activePolls.has(jobId)) return;
         const intervalId = setInterval(async () => {
             try {
-                const response = await fetch(`/job/${jobId}`);
+                const response = await authFetch(`/job/${jobId}`);
                 if (!response.ok) {
                     if (response.status === 404) stopPolling(jobId);
                     return;
                 }
                 const job = await response.json();
                 renderJobRow(job);
-                if (['completed', 'failed', 'cancelled'].includes(job.status)) {
+                if (['completed', 'failed', 'cancelled'].includes(job.status)) stopPolling(jobId);
-                    stopPolling(jobId);
-                }
             } catch (error) {
                 console.error(`Error polling for job ${jobId}:`, error);
-                stopPolling(jobId);
+                stopPolling(jobId); // Stop polling on any error, including auth errors
             }
         }, 2500);
         activePolls.set(jobId, intervalId);
@@ -399,40 +422,35 @@ document.addEventListener('DOMContentLoaded', () => {
     }
 
     function renderJobRow(job) {
-        let row = document.getElementById(`job-${job.id}`);
+        const rowId = job.id.startsWith('upload-') ? job.id : `job-${job.id}`;
+        let row = document.getElementById(rowId);
         if (!row) {
             row = document.createElement('tr');
-            row.id = `job-${job.id}`;
+            row.id = rowId;
             jobListBody.prepend(row);
         }
 
-        let taskTypeLabel = 'Unknown';
+        let taskTypeLabel = job.task_type;
-        if (job.task_type === 'ocr' || job.task_type === 'ocr-image') {
+        if (job.task_type === 'conversion' && job.processed_filepath) {
-            taskTypeLabel = 'OCR';
-        } else if (job.task_type === 'transcription') {
-            taskTypeLabel = 'Transcription';
-        } else if (job.task_type === 'conversion' && job.processed_filepath) {
             const extension = job.processed_filepath.split('.').pop();
             taskTypeLabel = `Convert to ${extension.toUpperCase()}`;
-        } else if (job.task_type === 'conversion') {
-            taskTypeLabel = 'Conversion';
         }
 
-        // --- CORRECTED DATE FORMATTING ---
-        // Takes the UTC string from the server (or the preliminary job)
-        // and formats it using the user's detected locale and timezone.
         const submittedDate = new Date(job.created_at);
         const formattedDate = submittedDate.toLocaleString(USER_LOCALE, DATETIME_FORMAT_OPTIONS);
 
         let statusHtml = `<span class="job-status-badge status-${job.status}">${job.status}</span>`;
-        if (job.status === 'processing') {
+        if (job.status === 'uploading') {
+            statusHtml = `<span class="job-status-badge status-processing">Uploading</span>`;
+            statusHtml += `<div class="progress-bar-container"><div class="progress-bar" style="width: ${job.progress || 0}%"></div></div>`;
+        } else if (job.status === 'processing') {
             const progressClass = (job.task_type === 'transcription' && job.progress > 0) ? '' : 'indeterminate';
             const progressWidth = job.task_type === 'transcription' ? job.progress : 100;
             statusHtml += `<div class="progress-bar-container"><div class="progress-bar ${progressClass}" style="width: ${progressWidth}%"></div></div>`;
         }
 
         let actionHtml = `<span>-</span>`;
-        if (job.status === 'pending' || job.status === 'processing') {
+        if (['pending', 'processing'].includes(job.status)) {
             actionHtml = `<button class="cancel-button" data-job-id="${job.id}">Cancel</button>`;
         } else if (job.status === 'completed' && job.processed_filepath) {
             const downloadFilename = job.processed_filepath.split(/[\\/]/).pop();
@@ -442,21 +460,16 @@ document.addEventListener('DOMContentLoaded', () => {
             actionHtml = `<span class="error-text"${errorTitle}>Failed</span>`;
         }
 
-        // --- File Size Logic ---
+        let fileSizeHtml = job.input_filesize ? formatBytes(job.input_filesize) : '-';
-        let fileSizeHtml = '<span>-</span>';
-        if (job.input_filesize) {
-            let sizeString = formatBytes(job.input_filesize);
         if (job.status === 'completed' && job.output_filesize) {
-                sizeString += ` → ${formatBytes(job.output_filesize)}`;
+            fileSizeHtml += ` → ${formatBytes(job.output_filesize)}`;
-            }
-            fileSizeHtml = `<span class="cell-value">${sizeString}</span>`;
         }
 
         const escapedFilename = job.original_filename ? job.original_filename.replace(/</g, "&lt;").replace(/>/g, "&gt;") : "No filename";
 
         row.innerHTML = `
             <td data-label="File"><span class="cell-value" title="${escapedFilename}">${escapedFilename}</span></td>
-            <td data-label="File Size">${fileSizeHtml}</td>
+            <td data-label="File Size"><span class="cell-value">${fileSizeHtml}</span></td>
             <td data-label="Task"><span class="cell-value">${taskTypeLabel}</span></td>
             <td data-label="Submitted"><span class="cell-value">${formattedDate}</span></td>
             <td data-label="Status"><span class="cell-value">${statusHtml}</span></td>
@@ -464,8 +477,43 @@ document.addEventListener('DOMContentLoaded', () => {
         `;
     }
 
-    // --- Initial Load ---
+    // --- App Initialization and Auth Check ---
-    initializeConversionSelector();
+    function initializeApp() {
+        if (appContainer) appContainer.style.display = 'block';
+        if (loginContainer) loginContainer.style.display = 'none';
+
+        startConversionBtn.addEventListener('click', () => handleTaskRequest('conversion'));
+        startOcrBtn.addEventListener('click', () => handleTaskRequest('ocr'));
+        startTranscriptionBtn.addEventListener('click', () => handleTaskRequest('transcription'));
+        mainFileInput.addEventListener('change', () => updateFileName(mainFileInput, mainFileName));
+
+        jobListBody.addEventListener('click', (event) => {
+            if (event.target.classList.contains('cancel-button')) {
+                const jobId = event.target.dataset.jobId;
+                handleCancelJob(jobId);
+            }
+        });
+
+        // Load initial data and setup UI components
+        initializeSelectors();
         loadInitialJobs();
         setupDragAndDropListeners();
+    }
+
+    function showLoginView() {
+        if (appContainer) appContainer.style.display = 'none';
+        if (loginContainer) loginContainer.style.display = 'flex';
+        if (loginButton) {
+            loginButton.addEventListener('click', () => {
+                window.location.href = '/login';
+            });
+        }
+    }
+
+    // --- Entry Point ---
+    if (window.APP_CONFIG && (window.APP_CONFIG.local_only_mode || window.APP_CONFIG.user)) {
+        initializeApp();
+    } else {
+        showLoginView();
+    }
 });

templates/index.html

@@ -11,8 +11,24 @@
     <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;700&display=swap" rel="stylesheet">
 </head>
 <body>
+
+    <div id="login-container" style="display: none;">
+        <div class="login-box">
+            <h1>File Wizard</h1>
+            <p>Please log in to continue.</p>
+            <button id="login-button" class="login-button-style">Login</button>
+        </div>
+    </div>
+
+    <div id="app-container" style="display: none;">
         <div class="container">
             <div class="header-actions">
+                {% if user and not local_only_mode %}
+                    <div>
+                    <span class="user-info">Logged in as {{ user.name }}</span>
+                    <a href="/logout" title="Logout" class="settings-link">Logout</a>
+                    </div>
+                {% endif %}
                 <a href="/settings" title="Settings" class="settings-link">⚙️</a>
             </div>
 
@@ -21,51 +37,38 @@
             </header>
 
             <main>
-            <div class="form-grid">
                 <section class="processor-section">
-                    <form id="conversion-form" class="upload-form" enctype="multipart/form-data">
+                    <form id="main-action-form" class="upload-form">
                         <fieldset>
-                            <legend><h2>File Conversion</h2></legend>
+                            <legend><h2>1. Choose Files</h2></legend>
                             <div class="file-input-wrapper">
-                                 <input type="file" name="file" id="conversion-file-input" required multiple>
+                                 <input type="file" name="file" id="main-file-input" required multiple>
-                                 <label for="conversion-file-input" class="file-input-label">Choose File...</label>
+                                 <label for="main-file-input" class="file-input-label">Choose Files...</label>
-                                 <span id="conversion-file-name" class="file-name">No file chosen</span>
+                                 <span id="main-file-name" class="file-name">No files chosen</span>
                             </div>
-                            <div class="form-control">
-                                <label for="output-format-select">Convert To</label>
-                                <select name="output_format" id="output-format-select" required></select>
-                            </div>
-                            <button type="submit">Convert File</button>
                         </fieldset>
-                    </form>
-                </section>
 
-                <section class="processor-section">
+                        <div class="actions-group">
-                    <form id="pdf-form" class="upload-form" enctype="multipart/form-data">
+                            <fieldset class="action-fieldset">
-                        <fieldset>
+                                <legend><h2>Convert</h2></legend>
-                            <legend><h2>PDF OCR</h2></legend>
-                            <div class="file-input-wrapper">
-                                <input type="file" name="file" id="pdf-file-input" accept=".pdf" required multiple>
-                                <label for="pdf-file-input" class="file-input-label">Choose PDF...</label>
-                                <span id="pdf-file-name" class="file-name">No file chosen</span>
-                            </div>
-                            <button type="submit">Process PDF</button>
-                        </fieldset>
-                    </form>
-                </section>
-
-                <section class="processor-section">
-                    <form id="audio-form" class="upload-form" enctype="multipart/form-data">
-                        <fieldset>
-                            <legend><h2>Transcribe Audio</h2></legend>
-                            <div class="file-input-wrapper">
-                                 <input type="file" name="file" id="audio-file-input" accept="audio/*" required multiple>
-                                 <label for="audio-file-input" class="file-input-label">Choose Audio...</label>
-                                 <span id="audio-file-name" class="file-name">No file chosen</span>
-                            </div>
                                 <div class="form-control">
-                                <label for="model-size-select">Model Size</label>
+                                    <label for="main-output-format-select">Output Format</label>
-                                <select name="model_size" id="model-size-select">
+                                    <select name="output_format" id="main-output-format-select" required></select>
+                                </div>
+                                <button type="button" id="start-conversion-btn" class="main-action-button">Start Conversion</button>
+                            </fieldset>
+
+                            <fieldset class="action-fieldset">
+                                <legend><h2>OCR PDF/Image</h2></legend>
+                                <p class="action-description">Extract text from scanned documents and images.</p>
+                                <button type="button" id="start-ocr-btn" class="main-action-button">Start OCR</button>
+                            </fieldset>
+
+                            <fieldset class="action-fieldset">
+                                <legend><h2>Transcribe Audio/Video</h2></legend>
+                                <div class="form-control">
+                                    <label for="main-model-size-select">Model Size</label>
+                                    <select name="model_size" id="main-model-size-select">
                                         <option value="tiny">Tiny (Fastest, lower accuracy)</option>
                                         <option value="base" selected>Base</option>
                                         <option value="small">Small (Better accuracy)</option>
@@ -74,11 +77,11 @@
                                         <option value="distil-large-v2">Distilled Large v2</option>
                                     </select>
                                 </div>
-                            <button type="submit">Transcribe</button>
+                                <button type="button" id="start-transcription-btn" class="main-action-button">Start Transcription</button>
                             </fieldset>
+                        </div>
                     </form>
                 </section>
-            </div>
 
                 <section id="job-history">
                     <h2>History</h2>
@@ -101,6 +104,7 @@
                 </section>
             </main>
         </div>
+    </div>
 
     <div id="drag-overlay" class="drag-overlay">
         <div class="drag-overlay-content">
@@ -133,8 +137,11 @@
         </div>
     </div>
     <script>
+        // Inject server-side configuration for the client-side script
         window.APP_CONFIG = {
-            conversionTools: {{ conversion_tools | tojson }}
+            conversionTools: {{ conversion_tools | tojson }},
+            user: {{ user | tojson }},
+            local_only_mode: {{ local_only_mode | tojson }}
         };
     </script>