auth
This commit is contained in:
@@ -0,0 +1,4 @@
|
|||||||
|
LOCAL_ONLY=True
|
||||||
|
SECRET_KEY=
|
||||||
|
UPLOADS_DIR=./uploads
|
||||||
|
PROCESSED_DIR=./processed
|
||||||
3
.gitignore
vendored
3
.gitignore
vendored
@@ -7,4 +7,7 @@ core
|
|||||||
huey.*
|
huey.*
|
||||||
*.db
|
*.db
|
||||||
req.txt
|
req.txt
|
||||||
|
settings.yml
|
||||||
|
app.log
|
||||||
|
/config/*
|
||||||
|
|
||||||
|
|||||||
@@ -5,12 +5,18 @@ services:
|
|||||||
build: .
|
build: .
|
||||||
env_file:
|
env_file:
|
||||||
- .env
|
- .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"
|
#user: "1000:1000"
|
||||||
ports:
|
ports:
|
||||||
- "6969:8000"
|
- "6969:8000"
|
||||||
volumes:
|
volumes:
|
||||||
# Mount local directories and files into the container for persistence
|
# Mount local directories and files into the container for persistence
|
||||||
|
- ./config:/app/config
|
||||||
- ./uploads_data:/app/uploads
|
- ./uploads_data:/app/uploads
|
||||||
- ./processed_data:/app/processed
|
- ./processed_data:/app/processed
|
||||||
|
|
||||||
|
|||||||
@@ -16,6 +16,7 @@ pypdf
|
|||||||
|
|
||||||
# Configuration & Utilities
|
# Configuration & Utilities
|
||||||
werkzeug
|
werkzeug
|
||||||
|
dotenv
|
||||||
PyYAML
|
PyYAML
|
||||||
pydantic
|
pydantic
|
||||||
pydantic-settings
|
pydantic-settings
|
||||||
|
|||||||
7
run.sh
7
run.sh
@@ -2,9 +2,14 @@
|
|||||||
|
|
||||||
# Exit immediately if a command exits with a non-zero status.
|
# Exit immediately if a command exits with a non-zero status.
|
||||||
set -e
|
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
|
# 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..."
|
echo "Started Gunicorn..."
|
||||||
# Store the Gunicorn process ID
|
# Store the Gunicorn process ID
|
||||||
GUNICORN_PID=$!
|
GUNICORN_PID=$!
|
||||||
|
|||||||
@@ -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:
|
app_settings:
|
||||||
max_file_size_mb: '2000'
|
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:
|
ocr_settings:
|
||||||
ocrmypdf:
|
ocrmypdf:
|
||||||
deskew: true
|
deskew: true
|
||||||
@@ -223,15 +192,15 @@ conversion_tools:
|
|||||||
png_fast: PNG (Fast Compression)
|
png_fast: PNG (Fast Compression)
|
||||||
sox:
|
sox:
|
||||||
name: SoX Audio Converter
|
name: SoX Audio Converter
|
||||||
command_template: sox {input} -r {samplerate} -b {bitdepth} {output}
|
command_template: sox {input} -r {samplerate} {bitdepth} {output}
|
||||||
timeout: 600
|
timeout: 600
|
||||||
formats:
|
formats:
|
||||||
wav_48k_24b: WAV (48kHz, 24-bit)
|
wav_48k_24b: WAV (48kHz, 24-bit)
|
||||||
wav_44k_16b: WAV (CD, 44.1kHz, 16-bit)
|
wav_44k_16b: WAV (CD, 44.1kHz, 16-bit)
|
||||||
flac_48k_24b: FLAC (48kHz, 24-bit)
|
flac_48k_24b: FLAC (48kHz, 24-bit)
|
||||||
flac_44k_16b: FLAC (CD, 44.1kHz, 16-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:
|
mozjpeg:
|
||||||
name: MozJPEG
|
name: MozJPEG
|
||||||
command_template: cjpeg -quality {quality} -outfile {output} {input}
|
command_template: cjpeg -quality {quality} -outfile {output} {input}
|
||||||
233
settings.yml
233
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:
|
app_settings:
|
||||||
max_file_size_mb: '2000'
|
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
|
- .aac
|
||||||
- .mp4
|
- .aiff
|
||||||
- .mkv
|
- .avif
|
||||||
- .mov
|
|
||||||
- .webm
|
|
||||||
- .avi
|
- .avi
|
||||||
- .flv
|
|
||||||
- .md
|
|
||||||
- .txt
|
|
||||||
- .html
|
|
||||||
- .docx
|
|
||||||
- .odt
|
|
||||||
- .rst
|
|
||||||
- .epub
|
|
||||||
- .mobi
|
|
||||||
- .azw3
|
- .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
|
- .pptx
|
||||||
|
- .ps
|
||||||
|
- .rst
|
||||||
|
- .rtf
|
||||||
|
- .svg
|
||||||
|
- .tcr
|
||||||
|
- .tex
|
||||||
|
- .tif
|
||||||
|
- .tiff
|
||||||
|
- .txt
|
||||||
|
- .wav
|
||||||
|
- .webm
|
||||||
|
- .webp
|
||||||
|
- .wma
|
||||||
|
- .wmv
|
||||||
|
- .wps
|
||||||
- .xlsx
|
- .xlsx
|
||||||
|
- .xls
|
||||||
|
- .xml
|
||||||
|
- .xpm
|
||||||
|
- .zip
|
||||||
ocr_settings:
|
ocr_settings:
|
||||||
ocrmypdf:
|
ocrmypdf:
|
||||||
deskew: true
|
deskew: true
|
||||||
@@ -65,6 +100,7 @@ conversion_tools:
|
|||||||
filters:
|
filters:
|
||||||
pdf: pdf
|
pdf: pdf
|
||||||
docx: docx
|
docx: docx
|
||||||
|
doc: doc
|
||||||
odt: odt
|
odt: odt
|
||||||
html: html
|
html: html
|
||||||
rtf: rtf
|
rtf: rtf
|
||||||
@@ -72,26 +108,39 @@ conversion_tools:
|
|||||||
xml: xml
|
xml: xml
|
||||||
epub: epub
|
epub: epub
|
||||||
xlsx: xlsx
|
xlsx: xlsx
|
||||||
|
xls: xls
|
||||||
ods: ods
|
ods: ods
|
||||||
csv: csv:Text
|
csv: csv:Text
|
||||||
pptx: pptx
|
pptx: pptx
|
||||||
|
ppt: ppt
|
||||||
odp: odp
|
odp: odp
|
||||||
svg: svg
|
svg: svg
|
||||||
|
png: png
|
||||||
|
jpg: jpg
|
||||||
|
wps: wps
|
||||||
|
dbf: dbf
|
||||||
formats:
|
formats:
|
||||||
pdf: PDF
|
pdf: PDF Document
|
||||||
docx: Word Document
|
docx: Word Document (DOCX)
|
||||||
|
doc: Word 97-2003 Document (DOC)
|
||||||
odt: OpenDocument Text
|
odt: OpenDocument Text
|
||||||
html: HTML
|
html: HTML Document
|
||||||
rtf: Rich Text Format
|
rtf: Rich Text Format
|
||||||
txt: Plain Text
|
txt: Plain Text
|
||||||
xml: Word 2003 XML
|
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
|
ods: OpenDocument Spreadsheet
|
||||||
csv: CSV
|
csv: CSV
|
||||||
pptx: PowerPoint Presentation
|
pptx: PowerPoint Presentation (PPTX)
|
||||||
|
ppt: PowerPoint 97-2003 Presentation (PPT)
|
||||||
odp: OpenDocument Presentation
|
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:
|
pandoc:
|
||||||
name: Pandoc
|
name: Pandoc
|
||||||
command_template: pandoc --standalone {input} -o {output} --to={output_ext} --pdf-engine=xelatex
|
command_template: pandoc --standalone {input} -o {output} --to={output_ext} --pdf-engine=xelatex
|
||||||
@@ -99,22 +148,27 @@ conversion_tools:
|
|||||||
formats:
|
formats:
|
||||||
docx: Word Document
|
docx: Word Document
|
||||||
odt: OpenDocument Text
|
odt: OpenDocument Text
|
||||||
pdf: PDF
|
pdf: PDF Document
|
||||||
rtf: Rich Text Format
|
rtf: Rich Text Format
|
||||||
txt: Plain Text
|
txt: Plain Text
|
||||||
|
md: Markdown (Strict)
|
||||||
|
gfm: Markdown (GitHub-Flavored)
|
||||||
tex: LaTeX
|
tex: LaTeX
|
||||||
man: Groff Man Page
|
html: HTML5
|
||||||
epub: EPUB v3 Book
|
epub: EPUB v3 Book
|
||||||
epub2: EPUB v2 Book
|
epub2: EPUB v2 Book
|
||||||
html: HTML
|
|
||||||
html5: HTML5
|
|
||||||
pptx: PowerPoint Presentation
|
pptx: PowerPoint Presentation
|
||||||
beamer: Beamer PDF Slides
|
beamer: Beamer PDF Slides
|
||||||
slidy: Slidy HTML Slides
|
slidy: Slidy HTML Slides
|
||||||
md: Markdown
|
revealjs: reveal.js HTML Slides
|
||||||
rst: reStructuredText
|
rst: reStructuredText
|
||||||
jira: Jira Wiki Markup
|
jira: Jira Wiki Markup
|
||||||
mediawiki: MediaWiki Markup
|
mediawiki: MediaWiki Markup
|
||||||
|
asciidoc: AsciiDoc
|
||||||
|
textile: Textile
|
||||||
|
opml: OPML
|
||||||
|
man: Groff Man Page
|
||||||
|
docbook: DocBook XML
|
||||||
ghostscript_pdf:
|
ghostscript_pdf:
|
||||||
name: Ghostscript (PDF)
|
name: Ghostscript (PDF)
|
||||||
command_template: gs -sDEVICE=pdfwrite -dCompatibilityLevel=1.4 -dNOPAUSE -dQUIET
|
command_template: gs -sDEVICE=pdfwrite -dCompatibilityLevel=1.4 -dNOPAUSE -dQUIET
|
||||||
@@ -124,7 +178,8 @@ conversion_tools:
|
|||||||
screen: PDF (Optimized for Screen)
|
screen: PDF (Optimized for Screen)
|
||||||
ebook: PDF (Optimized for Ebooks)
|
ebook: PDF (Optimized for Ebooks)
|
||||||
printer: PDF (Optimized for Print)
|
printer: PDF (Optimized for Print)
|
||||||
archive: PDF/A (for Archiving)
|
prepress: PDF (Optimized for Prepress)
|
||||||
|
pdfa: PDF/A-2b (for Archiving)
|
||||||
ghostscript_image:
|
ghostscript_image:
|
||||||
name: Ghostscript (Image)
|
name: Ghostscript (Image)
|
||||||
command_template: gs -dNOPAUSE -dBATCH -sDEVICE={device} -r{dpi} -sOutputFile={output}
|
command_template: gs -dNOPAUSE -dBATCH -sDEVICE={device} -r{dpi} -sOutputFile={output}
|
||||||
@@ -132,11 +187,18 @@ conversion_tools:
|
|||||||
timeout: 60
|
timeout: 60
|
||||||
formats:
|
formats:
|
||||||
jpeg_72: JPEG Image (72 DPI)
|
jpeg_72: JPEG Image (72 DPI)
|
||||||
|
jpeg_150: JPEG Image (150 DPI)
|
||||||
jpeg_300: JPEG Image (300 DPI)
|
jpeg_300: JPEG Image (300 DPI)
|
||||||
png16m_150: PNG Image (150 DPI)
|
png16m_150: PNG Image (150 DPI)
|
||||||
png16m_300: PNG Image (300 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_300: TIFF Image (300 DPI)
|
||||||
tiff24nc_600: TIFF Image (600 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:
|
calibre:
|
||||||
name: Calibre (ebook-convert)
|
name: Calibre (ebook-convert)
|
||||||
command_template: ebook-convert {input} {output}
|
command_template: ebook-convert {input} {output}
|
||||||
@@ -144,22 +206,42 @@ conversion_tools:
|
|||||||
formats:
|
formats:
|
||||||
epub: EPUB
|
epub: EPUB
|
||||||
mobi: MOBI
|
mobi: MOBI
|
||||||
azw3: Amazon Kindle
|
azw3: Amazon Kindle (AZW3)
|
||||||
pdf: PDF
|
pdf: PDF
|
||||||
docx: Word Document
|
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:
|
ffmpeg:
|
||||||
name: FFmpeg
|
name: FFmpeg
|
||||||
command_template: ffmpeg -i {input} -y -preset medium {output}
|
command_template: ffmpeg -i {input} -y -preset medium {output}
|
||||||
timeout: 600
|
timeout: 600
|
||||||
formats:
|
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
|
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
|
gif: Animated GIF
|
||||||
|
apng: Animated PNG
|
||||||
vips:
|
vips:
|
||||||
name: VIPS
|
name: VIPS
|
||||||
command_template: vips copy {input} {output}[Q=90]
|
command_template: vips copy {input} {output}[Q=90]
|
||||||
@@ -169,7 +251,12 @@ conversion_tools:
|
|||||||
png: PNG Image
|
png: PNG Image
|
||||||
webp: WebP Image (Q90)
|
webp: WebP Image (Q90)
|
||||||
tiff: TIFF Image
|
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:
|
graphicsmagick:
|
||||||
name: GraphicsMagick
|
name: GraphicsMagick
|
||||||
command_template: gm convert {input} -quality 90 {output}
|
command_template: gm convert {input} -quality 90 {output}
|
||||||
@@ -179,21 +266,36 @@ conversion_tools:
|
|||||||
png: PNG Image
|
png: PNG Image
|
||||||
webp: WebP Image
|
webp: WebP Image
|
||||||
tiff: TIFF Image
|
tiff: TIFF Image
|
||||||
|
gif: GIF Image
|
||||||
|
bmp: BMP Image
|
||||||
pdf: PDF from Images
|
pdf: PDF from Images
|
||||||
|
eps: Encapsulated PostScript
|
||||||
|
dpx: DPX Image
|
||||||
|
ico: Windows Icon
|
||||||
|
xpm: X PixMap
|
||||||
inkscape:
|
inkscape:
|
||||||
name: Inkscape
|
name: Inkscape
|
||||||
command_template: inkscape {input} --export-filename={output}
|
command_template: inkscape {input} --export-filename={output}
|
||||||
timeout: 30
|
timeout: 30
|
||||||
formats:
|
formats:
|
||||||
svg: SVG (Plain)
|
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
|
pdf: PDF Document
|
||||||
|
eps: Encapsulated PostScript
|
||||||
|
ps: PostScript
|
||||||
|
emf: Enhanced Metafile
|
||||||
|
wmf: Windows Metafile
|
||||||
|
dxf: AutoCAD DXF R14
|
||||||
libjxl:
|
libjxl:
|
||||||
name: libjxl (cjxl)
|
name: libjxl (cjxl)
|
||||||
command_template: cjxl {input} {output} -q 90
|
command_template: cjxl {input} {output} -q 90
|
||||||
timeout: 30
|
timeout: 30
|
||||||
formats:
|
formats:
|
||||||
jxl: JPEG XL (Q90)
|
jxl_q90: JPEG XL (Quality 90)
|
||||||
|
jxl_lossless: JPEG XL (Lossless)
|
||||||
|
jxl_hq: JPEG XL (High Compression)
|
||||||
resvg:
|
resvg:
|
||||||
name: resvg
|
name: resvg
|
||||||
command_template: resvg {input} {output}
|
command_template: resvg {input} {output}
|
||||||
@@ -206,6 +308,10 @@ conversion_tools:
|
|||||||
timeout: 30
|
timeout: 30
|
||||||
formats:
|
formats:
|
||||||
svg: SVG from Bitmap
|
svg: SVG from Bitmap
|
||||||
|
pdf: PDF from Bitmap
|
||||||
|
eps: EPS from Bitmap
|
||||||
|
ps: PostScript from Bitmap
|
||||||
|
dxf: DXF from Bitmap
|
||||||
markitdown:
|
markitdown:
|
||||||
name: Markitdown
|
name: Markitdown
|
||||||
command_template: markitdown {input} -o {output}
|
command_template: markitdown {input} -o {output}
|
||||||
@@ -223,15 +329,22 @@ conversion_tools:
|
|||||||
png_fast: PNG (Fast Compression)
|
png_fast: PNG (Fast Compression)
|
||||||
sox:
|
sox:
|
||||||
name: SoX Audio Converter
|
name: SoX Audio Converter
|
||||||
command_template: sox {input} -r {samplerate} -b {bitdepth} {output}
|
command_template: sox {input} -r {samplerate} {bitdepth} {output}
|
||||||
timeout: 600
|
timeout: 600
|
||||||
formats:
|
formats:
|
||||||
wav_48k_24b: WAV (48kHz, 24-bit)
|
wav_48k_24b: WAV (48kHz, 24-bit)
|
||||||
wav_44k_16b: WAV (CD, 44.1kHz, 16-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_48k_24b: FLAC (48kHz, 24-bit)
|
||||||
flac_44k_16b: FLAC (CD, 44.1kHz, 16-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:
|
mozjpeg:
|
||||||
name: MozJPEG
|
name: MozJPEG
|
||||||
command_template: cjpeg -quality {quality} -outfile {output} {input}
|
command_template: cjpeg -quality {quality} -outfile {output} {input}
|
||||||
|
|||||||
@@ -39,10 +39,61 @@ body {
|
|||||||
-moz-osx-font-smoothing: grayscale;
|
-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 */
|
||||||
.container {
|
.container {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
max-width: 1280px; /* Increased max-width for 3 columns */
|
max-width: 1280px;
|
||||||
margin: 0 auto;
|
margin: 0 auto;
|
||||||
background: var(--card-bg);
|
background: var(--card-bg);
|
||||||
border-radius: 10px;
|
border-radius: 10px;
|
||||||
@@ -71,7 +122,6 @@ header {
|
|||||||
header h1 {
|
header h1 {
|
||||||
margin: 0 0 0.25rem 0;
|
margin: 0 0 0.25rem 0;
|
||||||
font-size: 3rem;
|
font-size: 3rem;
|
||||||
font-weight: 700;
|
|
||||||
font-family: serif;
|
font-family: serif;
|
||||||
font-weight: lighter;
|
font-weight: lighter;
|
||||||
}
|
}
|
||||||
@@ -86,34 +136,50 @@ header p {
|
|||||||
position: absolute;
|
position: absolute;
|
||||||
top: 1.5rem;
|
top: 1.5rem;
|
||||||
right: 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 {
|
.settings-link {
|
||||||
font-size: 1.5rem;
|
font-size: 0.9rem;
|
||||||
|
margin-left: 0.5em;
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
color: var(--muted-text);
|
color: var(--muted-text);
|
||||||
transition: color 0.2s ease;
|
transition: color 0.2s ease;
|
||||||
|
|
||||||
}
|
}
|
||||||
.settings-link:hover {
|
.settings-link:hover {
|
||||||
color: var(--text-color);
|
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;
|
margin-bottom: 2rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.upload-form fieldset {
|
.upload-form fieldset {
|
||||||
border: 1px solid var(--border-color);
|
border: 1px solid var(--border-color);
|
||||||
border-radius: 8px;
|
border-radius: 8px;
|
||||||
padding: 1rem;
|
padding: 1.5rem;
|
||||||
margin: 0;
|
margin: 0;
|
||||||
background: transparent;
|
background: transparent;
|
||||||
height: 100%;
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.upload-form legend {
|
.upload-form legend {
|
||||||
@@ -134,7 +200,6 @@ header p {
|
|||||||
align-items: center;
|
align-items: center;
|
||||||
gap: 1rem;
|
gap: 1rem;
|
||||||
margin-top: 1rem;
|
margin-top: 1rem;
|
||||||
margin-bottom: 1rem;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
input[type="file"] {
|
input[type="file"] {
|
||||||
@@ -211,31 +276,56 @@ input[type="file"] {
|
|||||||
box-shadow: 0 0 0 2px rgba(0, 180, 255, 0.2);
|
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;
|
display: block;
|
||||||
width: 100%;
|
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;
|
padding: 0.65rem 1rem;
|
||||||
font-size: 1rem;
|
font-size: 1rem;
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
border-radius: 5px;
|
border-radius: 5px;
|
||||||
cursor: pointer;
|
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);
|
background: var(--primary-hover);
|
||||||
|
border-color: var(--primary-hover);
|
||||||
}
|
}
|
||||||
button[type="submit"]:disabled {
|
|
||||||
|
.main-action-button:disabled {
|
||||||
background-color: var(--muted-text);
|
background-color: var(--muted-text);
|
||||||
|
border-color: var(--muted-text);
|
||||||
cursor: not-allowed;
|
cursor: not-allowed;
|
||||||
|
opacity: 0.5;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
/* History Section */
|
/* History Section */
|
||||||
#job-history h2 {
|
#job-history h2 {
|
||||||
text-align: center;
|
text-align: center;
|
||||||
@@ -251,12 +341,14 @@ button[type="submit"]:disabled {
|
|||||||
border: 1px solid var(--border-color);
|
border: 1px solid var(--border-color);
|
||||||
border-radius: 8px;
|
border-radius: 8px;
|
||||||
background-color: var(--surface);
|
background-color: var(--surface);
|
||||||
|
margin-bottom: 6em;
|
||||||
}
|
}
|
||||||
|
|
||||||
#job-table {
|
#job-table {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
border-collapse: collapse;
|
border-collapse: collapse;
|
||||||
font-size: 0.9rem;
|
font-size: 0.9rem;
|
||||||
|
margin-bottom: 2em;
|
||||||
}
|
}
|
||||||
|
|
||||||
#job-table th,
|
#job-table th,
|
||||||
@@ -390,7 +482,7 @@ button[type="submit"]:disabled {
|
|||||||
}
|
}
|
||||||
.cancel-button:hover { background-color: #ff8f8f; }
|
.cancel-button:hover { background-color: #ff8f8f; }
|
||||||
|
|
||||||
/* --- MODIFICATION: Dark theme for Choices.js --- */
|
/* --- Dark theme for Choices.js --- */
|
||||||
.choices {
|
.choices {
|
||||||
font-size: 0.95rem;
|
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 {
|
.drag-overlay {
|
||||||
position: fixed;
|
position: fixed;
|
||||||
inset: 0;
|
inset: 0;
|
||||||
@@ -549,7 +641,6 @@ body.dragging .drag-overlay {
|
|||||||
.dialog-cancel:hover {
|
.dialog-cancel:hover {
|
||||||
color: var(--text-color);
|
color: var(--text-color);
|
||||||
}
|
}
|
||||||
/* --- END: Drag and Drop and Dialog Styles --- */
|
|
||||||
|
|
||||||
/* Spinner */
|
/* Spinner */
|
||||||
.spinner-small {
|
.spinner-small {
|
||||||
@@ -567,7 +658,13 @@ body.dragging .drag-overlay {
|
|||||||
100% { transform: rotate(360deg); }
|
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) {
|
@media (max-width: 768px) {
|
||||||
.table-wrapper {
|
.table-wrapper {
|
||||||
border: none;
|
border: none;
|
||||||
|
|||||||
@@ -1,6 +1,9 @@
|
|||||||
document.addEventListener('DOMContentLoaded', () => {
|
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 USER_TIMEZONE = Intl.DateTimeFormat().resolvedOptions().timeZone;
|
||||||
const DATETIME_FORMAT_OPTIONS = {
|
const DATETIME_FORMAT_OPTIONS = {
|
||||||
year: 'numeric',
|
year: 'numeric',
|
||||||
@@ -10,67 +13,69 @@ document.addEventListener('DOMContentLoaded', () => {
|
|||||||
minute: '2-digit',
|
minute: '2-digit',
|
||||||
timeZone: USER_TIMEZONE,
|
timeZone: USER_TIMEZONE,
|
||||||
};
|
};
|
||||||
console.log(`Using locale: ${USER_LOCALE} and timezone: ${USER_TIMEZONE}`);
|
|
||||||
|
|
||||||
// --- Element Selectors ---
|
// --- Element Selectors ---
|
||||||
const jobListBody = document.getElementById('job-list-body');
|
const appContainer = document.getElementById('app-container');
|
||||||
|
const loginContainer = document.getElementById('login-container');
|
||||||
const pdfForm = document.getElementById('pdf-form');
|
const loginButton = document.getElementById('login-button');
|
||||||
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
|
// 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');
|
||||||
|
|
||||||
|
// Drag and Drop Elements
|
||||||
const dragOverlay = document.getElementById('drag-overlay');
|
const dragOverlay = document.getElementById('drag-overlay');
|
||||||
const actionDialog = document.getElementById('action-dialog');
|
const actionDialog = document.getElementById('action-dialog');
|
||||||
const dialogFileCount = document.getElementById('dialog-file-count');
|
const dialogFileCount = document.getElementById('dialog-file-count');
|
||||||
// Dialog Views
|
|
||||||
const dialogInitialView = document.getElementById('dialog-initial-actions');
|
const dialogInitialView = document.getElementById('dialog-initial-actions');
|
||||||
const dialogConvertView = document.getElementById('dialog-convert-view');
|
const dialogConvertView = document.getElementById('dialog-convert-view');
|
||||||
// Dialog Buttons
|
|
||||||
const dialogConvertBtn = document.getElementById('dialog-action-convert');
|
const dialogConvertBtn = document.getElementById('dialog-action-convert');
|
||||||
const dialogOcrBtn = document.getElementById('dialog-action-ocr');
|
const dialogOcrBtn = document.getElementById('dialog-action-ocr');
|
||||||
const dialogTranscribeBtn = document.getElementById('dialog-action-transcribe');
|
const dialogTranscribeBtn = document.getElementById('dialog-action-transcribe');
|
||||||
const dialogCancelBtn = document.getElementById('dialog-action-cancel');
|
const dialogCancelBtn = document.getElementById('dialog-action-cancel');
|
||||||
const dialogStartConversionBtn = document.getElementById('dialog-start-conversion');
|
const dialogStartConversionBtn = document.getElementById('dialog-start-conversion');
|
||||||
const dialogBackBtn = document.getElementById('dialog-back');
|
const dialogBackBtn = document.getElementById('dialog-back');
|
||||||
// Dialog Select
|
|
||||||
const dialogOutputFormatSelect = document.getElementById('dialog-output-format-select');
|
const dialogOutputFormatSelect = document.getElementById('dialog-output-format-select');
|
||||||
// END: Drag and Drop additions
|
|
||||||
|
|
||||||
|
// --- State Variables ---
|
||||||
let conversionChoices = null;
|
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();
|
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 ---
|
// --- Helper Functions ---
|
||||||
function formatBytes(bytes, decimals = 1) {
|
function formatBytes(bytes, decimals = 1) {
|
||||||
if (!+bytes) return '0 Bytes'; // Handles 0, null, undefined
|
if (!+bytes) return '0 Bytes';
|
||||||
const k = 1024;
|
const k = 1024;
|
||||||
const dm = decimals < 0 ? 0 : decimals;
|
const dm = decimals < 0 ? 0 : decimals;
|
||||||
const sizes = ['Bytes', 'KB', 'MB', 'GB', 'TB'];
|
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]}`;
|
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();
|
const preliminaryJob = {
|
||||||
throw new Error(errorData.detail || `HTTP error! Status: ${response.status}`);
|
id: uploadId,
|
||||||
|
status: 'uploading',
|
||||||
|
progress: 0,
|
||||||
|
original_filename: file.name,
|
||||||
|
input_filesize: file.size,
|
||||||
|
task_type: taskType,
|
||||||
|
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;
|
||||||
}
|
}
|
||||||
const result = await response.json();
|
}
|
||||||
const preliminaryJob = {
|
|
||||||
id: result.job_id,
|
try {
|
||||||
status: 'pending',
|
const finalizePayload = {
|
||||||
progress: 0,
|
upload_id: uploadId,
|
||||||
original_filename: originalFilename,
|
original_filename: file.name,
|
||||||
input_filesize: formData.get('file').size,
|
total_chunks: totalChunks,
|
||||||
task_type: endpoint.includes('ocr') ? 'ocr' : (endpoint.includes('transcribe') ? 'transcription' : 'conversion'),
|
task_type: taskType,
|
||||||
created_at: new Date().toISOString() // Create preliminary UTC timestamp
|
...options
|
||||||
};
|
};
|
||||||
renderJobRow(preliminaryJob);
|
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);
|
startPolling(result.job_id);
|
||||||
} catch (error) {
|
} 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
|
|
||||||
await submitJob(endpoint, formData, file.name);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
// Reset the form UI after all jobs have been submitted
|
|
||||||
const fileNameDisplay = form.querySelector('.file-name');
|
|
||||||
form.reset();
|
|
||||||
if (fileNameDisplay) {
|
|
||||||
fileNameDisplay.textContent = 'No file chosen';
|
|
||||||
fileNameDisplay.title = 'No file chosen';
|
|
||||||
}
|
|
||||||
if (form.id === 'conversion-form' && conversionChoices) {
|
|
||||||
conversionChoices.clearInput();
|
|
||||||
conversionChoices.setValue([]);
|
|
||||||
}
|
|
||||||
submitButton.disabled = false;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
// --- START: Drag and Drop Implementation ---
|
function updateJobToFailedState(jobId, errorMessage) {
|
||||||
function setupDragAndDropListeners() {
|
const row = document.getElementById(jobId);
|
||||||
let dragCounter = 0; // Counter to manage enter/leave events reliably
|
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, '"')}"` : '';
|
||||||
|
actionCell.innerHTML = `<span class="error-text"${errorTitle}>Failed</span>`;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// --- Centralized Task Request Handler ---
|
||||||
|
async function handleTaskRequest(taskType) {
|
||||||
|
if (mainFileInput.files.length === 0) {
|
||||||
|
alert('Please choose one or more files first.');
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
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;
|
||||||
window.addEventListener('dragenter', (e) => {
|
window.addEventListener('dragenter', (e) => {
|
||||||
e.preventDefault();
|
e.preventDefault();
|
||||||
dragCounter++;
|
dragCounter++;
|
||||||
document.body.classList.add('dragging');
|
document.body.classList.add('dragging');
|
||||||
});
|
});
|
||||||
|
|
||||||
window.addEventListener('dragleave', (e) => {
|
window.addEventListener('dragleave', (e) => {
|
||||||
e.preventDefault();
|
e.preventDefault();
|
||||||
dragCounter--;
|
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) => {
|
window.addEventListener('drop', (e) => {
|
||||||
e.preventDefault();
|
e.preventDefault();
|
||||||
dragCounter = 0; // Reset counter
|
dragCounter = 0;
|
||||||
document.body.classList.remove('dragging');
|
document.body.classList.remove('dragging');
|
||||||
|
|
||||||
// Only handle the drop if it's on our designated overlay
|
|
||||||
if (e.target === dragOverlay || dragOverlay.contains(e.target)) {
|
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();
|
showActionDialog();
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@@ -189,16 +251,8 @@ document.addEventListener('DOMContentLoaded', () => {
|
|||||||
|
|
||||||
function showActionDialog() {
|
function showActionDialog() {
|
||||||
dialogFileCount.textContent = stagedFiles.length;
|
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, {
|
dialogConversionChoices = new Choices(dialogOutputFormatSelect, {
|
||||||
searchEnabled: true,
|
searchEnabled: true,
|
||||||
itemSelectText: 'Select',
|
itemSelectText: 'Select',
|
||||||
@@ -206,8 +260,6 @@ document.addEventListener('DOMContentLoaded', () => {
|
|||||||
placeholder: true,
|
placeholder: true,
|
||||||
placeholderValue: 'Select a format...',
|
placeholderValue: 'Select a format...',
|
||||||
});
|
});
|
||||||
|
|
||||||
// Ensure the initial view is shown
|
|
||||||
dialogInitialView.style.display = 'grid';
|
dialogInitialView.style.display = 'grid';
|
||||||
dialogConvertView.style.display = 'none';
|
dialogConvertView.style.display = 'none';
|
||||||
actionDialog.classList.add('visible');
|
actionDialog.classList.add('visible');
|
||||||
@@ -216,91 +268,61 @@ document.addEventListener('DOMContentLoaded', () => {
|
|||||||
function closeActionDialog() {
|
function closeActionDialog() {
|
||||||
actionDialog.classList.remove('visible');
|
actionDialog.classList.remove('visible');
|
||||||
stagedFiles = null;
|
stagedFiles = null;
|
||||||
// Important: Destroy the Choices instance to prevent memory leaks
|
|
||||||
if (dialogConversionChoices) {
|
if (dialogConversionChoices) {
|
||||||
// Explicitly hide the dropdown before destroying
|
dialogConversionChoices.hideDropdown();
|
||||||
dialogConversionChoices.hideDropdown();
|
|
||||||
dialogConversionChoices.destroy();
|
dialogConversionChoices.destroy();
|
||||||
dialogConversionChoices = null;
|
dialogConversionChoices = null;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
// --- Dialog Button and Action Listeners ---
|
|
||||||
dialogConvertBtn.addEventListener('click', () => {
|
dialogConvertBtn.addEventListener('click', () => {
|
||||||
// Switch to the conversion view
|
|
||||||
dialogInitialView.style.display = 'none';
|
dialogInitialView.style.display = 'none';
|
||||||
dialogConvertView.style.display = 'block';
|
dialogConvertView.style.display = 'block';
|
||||||
});
|
});
|
||||||
|
|
||||||
dialogBackBtn.addEventListener('click', () => {
|
dialogBackBtn.addEventListener('click', () => {
|
||||||
// Switch back to the initial view
|
|
||||||
dialogInitialView.style.display = 'grid';
|
dialogInitialView.style.display = 'grid';
|
||||||
dialogConvertView.style.display = 'none';
|
dialogConvertView.style.display = 'none';
|
||||||
});
|
});
|
||||||
|
dialogStartConversionBtn.addEventListener('click', () => handleDialogAction('conversion'));
|
||||||
dialogStartConversionBtn.addEventListener('click', () => handleDialogAction('convert'));
|
|
||||||
dialogOcrBtn.addEventListener('click', () => handleDialogAction('ocr'));
|
dialogOcrBtn.addEventListener('click', () => handleDialogAction('ocr'));
|
||||||
dialogTranscribeBtn.addEventListener('click', () => handleDialogAction('transcribe'));
|
dialogTranscribeBtn.addEventListener('click', () => handleDialogAction('transcription'));
|
||||||
dialogCancelBtn.addEventListener('click', closeActionDialog);
|
dialogCancelBtn.addEventListener('click', closeActionDialog);
|
||||||
|
|
||||||
|
|
||||||
function handleDialogAction(action) {
|
function handleDialogAction(action) {
|
||||||
if (!stagedFiles) return;
|
if (!stagedFiles) return;
|
||||||
|
let options = {};
|
||||||
let endpoint = '';
|
if (action === 'conversion') {
|
||||||
const formDataArray = [];
|
const selectedFormat = dialogConversionChoices.getValue(true);
|
||||||
|
if (!selectedFormat) {
|
||||||
for (const file of stagedFiles) {
|
alert('Please select a format to convert to.');
|
||||||
const formData = new FormData();
|
return;
|
||||||
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);
|
|
||||||
endpoint = '/convert-file';
|
|
||||||
} else if (action === 'ocr') {
|
|
||||||
endpoint = '/ocr-pdf';
|
|
||||||
} else if (action === 'transcribe') {
|
|
||||||
formData.append('model_size', modelSizeSelect.value);
|
|
||||||
endpoint = '/transcribe-audio';
|
|
||||||
}
|
}
|
||||||
formDataArray.push({ formData, name: file.name });
|
options.output_format = selectedFormat;
|
||||||
|
} else if (action === 'transcription') {
|
||||||
|
options.model_size = mainModelSizeSelect.value;
|
||||||
}
|
}
|
||||||
|
Array.from(stagedFiles).forEach(file => uploadFileInChunks(file, action, options));
|
||||||
formDataArray.forEach(item => {
|
|
||||||
submitJob(endpoint, item.formData, item.name);
|
|
||||||
});
|
|
||||||
|
|
||||||
closeActionDialog();
|
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,
|
searchEnabled: true,
|
||||||
itemSelectText: 'Select',
|
itemSelectText: 'Select',
|
||||||
shouldSort: false,
|
shouldSort: false,
|
||||||
placeholder: true,
|
placeholder: true,
|
||||||
placeholderValue: 'Select a format...',
|
placeholderValue: 'Select a format...',
|
||||||
});
|
});
|
||||||
|
|
||||||
const tools = window.APP_CONFIG.conversionTools || {};
|
const tools = window.APP_CONFIG.conversionTools || {};
|
||||||
const choicesArray = [];
|
const choicesArray = [];
|
||||||
for (const toolKey in tools) {
|
for (const toolKey in tools) {
|
||||||
const tool = tools[toolKey];
|
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) {
|
for (const formatKey in tool.formats) {
|
||||||
group.choices.push({
|
group.choices.push({
|
||||||
value: `${toolKey}_${formatKey}`,
|
value: `${toolKey}_${formatKey}`,
|
||||||
@@ -310,20 +332,23 @@ document.addEventListener('DOMContentLoaded', () => {
|
|||||||
choicesArray.push(group);
|
choicesArray.push(group);
|
||||||
}
|
}
|
||||||
conversionChoices.setChoices(choicesArray, 'value', 'label', true);
|
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) {
|
function updateFileName(input, nameDisplay) {
|
||||||
const numFiles = input.files.length;
|
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.textContent = displayText;
|
||||||
nameDisplay.title = displayTitle;
|
nameDisplay.title = displayTitle;
|
||||||
@@ -332,7 +357,7 @@ document.addEventListener('DOMContentLoaded', () => {
|
|||||||
async function handleCancelJob(jobId) {
|
async function handleCancelJob(jobId) {
|
||||||
if (!confirm('Are you sure you want to cancel this job?')) return;
|
if (!confirm('Are you sure you want to cancel this job?')) return;
|
||||||
try {
|
try {
|
||||||
const response = await fetch(`/job/${jobId}/cancel`, { method: 'POST' });
|
const response = await authFetch(`/job/${jobId}/cancel`, { method: 'POST' });
|
||||||
if (!response.ok) {
|
if (!response.ok) {
|
||||||
const errorData = await response.json();
|
const errorData = await response.json();
|
||||||
throw new Error(errorData.detail || 'Failed to cancel job.');
|
throw new Error(errorData.detail || 'Failed to cancel job.');
|
||||||
@@ -347,25 +372,25 @@ document.addEventListener('DOMContentLoaded', () => {
|
|||||||
}
|
}
|
||||||
} catch (error) {
|
} catch (error) {
|
||||||
console.error('Error cancelling job:', error);
|
console.error('Error cancelling job:', error);
|
||||||
alert(`Error: ${error.message}`);
|
if (error.message !== 'Session expired') alert(`Error: ${error.message}`);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
async function loadInitialJobs() {
|
async function loadInitialJobs() {
|
||||||
try {
|
try {
|
||||||
const response = await fetch('/jobs');
|
const response = await authFetch('/jobs');
|
||||||
if (!response.ok) throw new Error('Failed to fetch jobs.');
|
if (!response.ok) throw new Error('Failed to fetch jobs.');
|
||||||
const jobs = await response.json();
|
const jobs = await response.json();
|
||||||
jobListBody.innerHTML = '';
|
jobListBody.innerHTML = '';
|
||||||
for (const job of jobs.reverse()) {
|
for (const job of jobs.reverse()) {
|
||||||
renderJobRow(job);
|
renderJobRow(job);
|
||||||
if (['pending', 'processing'].includes(job.status)) {
|
if (['pending', 'processing'].includes(job.status)) startPolling(job.id);
|
||||||
startPolling(job.id);
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
} catch (error) {
|
} catch (error) {
|
||||||
console.error("Couldn't load job history:", error);
|
console.error("Couldn't load job history:", error);
|
||||||
jobListBody.innerHTML = '<tr><td colspan="6" style="text-align: center;">Could not load job history.</td></tr>';
|
if (error.message !== 'Session expired') {
|
||||||
|
jobListBody.innerHTML = '<tr><td colspan="6" style="text-align: center;">Could not load job history.</td></tr>';
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -373,19 +398,17 @@ document.addEventListener('DOMContentLoaded', () => {
|
|||||||
if (activePolls.has(jobId)) return;
|
if (activePolls.has(jobId)) return;
|
||||||
const intervalId = setInterval(async () => {
|
const intervalId = setInterval(async () => {
|
||||||
try {
|
try {
|
||||||
const response = await fetch(`/job/${jobId}`);
|
const response = await authFetch(`/job/${jobId}`);
|
||||||
if (!response.ok) {
|
if (!response.ok) {
|
||||||
if (response.status === 404) stopPolling(jobId);
|
if (response.status === 404) stopPolling(jobId);
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
const job = await response.json();
|
const job = await response.json();
|
||||||
renderJobRow(job);
|
renderJobRow(job);
|
||||||
if (['completed', 'failed', 'cancelled'].includes(job.status)) {
|
if (['completed', 'failed', 'cancelled'].includes(job.status)) stopPolling(jobId);
|
||||||
stopPolling(jobId);
|
|
||||||
}
|
|
||||||
} catch (error) {
|
} catch (error) {
|
||||||
console.error(`Error polling for job ${jobId}:`, error);
|
console.error(`Error polling for job ${jobId}:`, error);
|
||||||
stopPolling(jobId);
|
stopPolling(jobId); // Stop polling on any error, including auth errors
|
||||||
}
|
}
|
||||||
}, 2500);
|
}, 2500);
|
||||||
activePolls.set(jobId, intervalId);
|
activePolls.set(jobId, intervalId);
|
||||||
@@ -397,42 +420,37 @@ document.addEventListener('DOMContentLoaded', () => {
|
|||||||
activePolls.delete(jobId);
|
activePolls.delete(jobId);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
function renderJobRow(job) {
|
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) {
|
if (!row) {
|
||||||
row = document.createElement('tr');
|
row = document.createElement('tr');
|
||||||
row.id = `job-${job.id}`;
|
row.id = rowId;
|
||||||
jobListBody.prepend(row);
|
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();
|
const extension = job.processed_filepath.split('.').pop();
|
||||||
taskTypeLabel = `Convert to ${extension.toUpperCase()}`;
|
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 submittedDate = new Date(job.created_at);
|
||||||
const formattedDate = submittedDate.toLocaleString(USER_LOCALE, DATETIME_FORMAT_OPTIONS);
|
const formattedDate = submittedDate.toLocaleString(USER_LOCALE, DATETIME_FORMAT_OPTIONS);
|
||||||
|
|
||||||
let statusHtml = `<span class="job-status-badge status-${job.status}">${job.status}</span>`;
|
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 progressClass = (job.task_type === 'transcription' && job.progress > 0) ? '' : 'indeterminate';
|
||||||
const progressWidth = job.task_type === 'transcription' ? job.progress : 100;
|
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>`;
|
statusHtml += `<div class="progress-bar-container"><div class="progress-bar ${progressClass}" style="width: ${progressWidth}%"></div></div>`;
|
||||||
}
|
}
|
||||||
|
|
||||||
let actionHtml = `<span>-</span>`;
|
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>`;
|
actionHtml = `<button class="cancel-button" data-job-id="${job.id}">Cancel</button>`;
|
||||||
} else if (job.status === 'completed' && job.processed_filepath) {
|
} else if (job.status === 'completed' && job.processed_filepath) {
|
||||||
const downloadFilename = job.processed_filepath.split(/[\\/]/).pop();
|
const downloadFilename = job.processed_filepath.split(/[\\/]/).pop();
|
||||||
@@ -442,21 +460,16 @@ document.addEventListener('DOMContentLoaded', () => {
|
|||||||
actionHtml = `<span class="error-text"${errorTitle}>Failed</span>`;
|
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.status === 'completed' && job.output_filesize) {
|
||||||
if (job.input_filesize) {
|
fileSizeHtml += ` → ${formatBytes(job.output_filesize)}`;
|
||||||
let sizeString = formatBytes(job.input_filesize);
|
|
||||||
if (job.status === 'completed' && job.output_filesize) {
|
|
||||||
sizeString += ` → ${formatBytes(job.output_filesize)}`;
|
|
||||||
}
|
|
||||||
fileSizeHtml = `<span class="cell-value">${sizeString}</span>`;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
const escapedFilename = job.original_filename ? job.original_filename.replace(/</g, "<").replace(/>/g, ">") : "No filename";
|
const escapedFilename = job.original_filename ? job.original_filename.replace(/</g, "<").replace(/>/g, ">") : "No filename";
|
||||||
|
|
||||||
row.innerHTML = `
|
row.innerHTML = `
|
||||||
<td data-label="File"><span class="cell-value" title="${escapedFilename}">${escapedFilename}</span></td>
|
<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="Task"><span class="cell-value">${taskTypeLabel}</span></td>
|
||||||
<td data-label="Submitted"><span class="cell-value">${formattedDate}</span></td>
|
<td data-label="Submitted"><span class="cell-value">${formattedDate}</span></td>
|
||||||
<td data-label="Status"><span class="cell-value">${statusHtml}</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() {
|
||||||
loadInitialJobs();
|
if (appContainer) appContainer.style.display = 'block';
|
||||||
setupDragAndDropListeners();
|
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();
|
||||||
|
}
|
||||||
});
|
});
|
||||||
@@ -11,95 +11,99 @@
|
|||||||
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;700&display=swap" rel="stylesheet">
|
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;700&display=swap" rel="stylesheet">
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<div class="container">
|
|
||||||
<div class="header-actions">
|
|
||||||
<a href="/settings" title="Settings" class="settings-link">⚙️</a>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<header>
|
<div id="login-container" style="display: none;">
|
||||||
|
<div class="login-box">
|
||||||
<h1>File Wizard</h1>
|
<h1>File Wizard</h1>
|
||||||
</header>
|
<p>Please log in to continue.</p>
|
||||||
|
<button id="login-button" class="login-button-style">Login</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
<main>
|
<div id="app-container" style="display: none;">
|
||||||
<div class="form-grid">
|
<div class="container">
|
||||||
<section class="processor-section">
|
<div class="header-actions">
|
||||||
<form id="conversion-form" class="upload-form" enctype="multipart/form-data">
|
{% if user and not local_only_mode %}
|
||||||
<fieldset>
|
<div>
|
||||||
<legend><h2>File Conversion</h2></legend>
|
<span class="user-info">Logged in as {{ user.name }}</span>
|
||||||
<div class="file-input-wrapper">
|
<a href="/logout" title="Logout" class="settings-link">Logout</a>
|
||||||
<input type="file" name="file" id="conversion-file-input" required multiple>
|
</div>
|
||||||
<label for="conversion-file-input" class="file-input-label">Choose File...</label>
|
{% endif %}
|
||||||
<span id="conversion-file-name" class="file-name">No file chosen</span>
|
<a href="/settings" title="Settings" class="settings-link">⚙️</a>
|
||||||
</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">
|
|
||||||
<form id="pdf-form" class="upload-form" enctype="multipart/form-data">
|
|
||||||
<fieldset>
|
|
||||||
<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>
|
|
||||||
<select name="model_size" id="model-size-select">
|
|
||||||
<option value="tiny">Tiny (Fastest, lower accuracy)</option>
|
|
||||||
<option value="base" selected>Base</option>
|
|
||||||
<option value="small">Small (Better accuracy)</option>
|
|
||||||
<option value="medium">Medium (High accuracy)</option>
|
|
||||||
<option value="large-v3">Large v3 (Best accuracy, slow)</option>
|
|
||||||
<option value="distil-large-v2">Distilled Large v2</option>
|
|
||||||
</select>
|
|
||||||
</div>
|
|
||||||
<button type="submit">Transcribe</button>
|
|
||||||
</fieldset>
|
|
||||||
</form>
|
|
||||||
</section>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<section id="job-history">
|
<header>
|
||||||
<h2>History</h2>
|
<h1>File Wizard</h1>
|
||||||
<div class="table-wrapper">
|
</header>
|
||||||
<table id="job-table">
|
|
||||||
<thead>
|
<main>
|
||||||
<tr>
|
<section class="processor-section">
|
||||||
<th>File</th>
|
<form id="main-action-form" class="upload-form">
|
||||||
<th>File Size</th>
|
<fieldset>
|
||||||
<th>Task</th>
|
<legend><h2>1. Choose Files</h2></legend>
|
||||||
<th>Submitted</th>
|
<div class="file-input-wrapper">
|
||||||
<th>Status</th>
|
<input type="file" name="file" id="main-file-input" required multiple>
|
||||||
<th class="action-col">Action</th>
|
<label for="main-file-input" class="file-input-label">Choose Files...</label>
|
||||||
</tr>
|
<span id="main-file-name" class="file-name">No files chosen</span>
|
||||||
</thead>
|
</div>
|
||||||
<tbody id="job-list-body">
|
</fieldset>
|
||||||
</tbody>
|
|
||||||
</table>
|
<div class="actions-group">
|
||||||
</div>
|
<fieldset class="action-fieldset">
|
||||||
</section>
|
<legend><h2>Convert</h2></legend>
|
||||||
</main>
|
<div class="form-control">
|
||||||
|
<label for="main-output-format-select">Output Format</label>
|
||||||
|
<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>
|
||||||
|
<option value="medium">Medium (High accuracy)</option>
|
||||||
|
<option value="large-v3">Large v3 (Best accuracy, slow)</option>
|
||||||
|
<option value="distil-large-v2">Distilled Large v2</option>
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
<button type="button" id="start-transcription-btn" class="main-action-button">Start Transcription</button>
|
||||||
|
</fieldset>
|
||||||
|
</div>
|
||||||
|
</form>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section id="job-history">
|
||||||
|
<h2>History</h2>
|
||||||
|
<div class="table-wrapper">
|
||||||
|
<table id="job-table">
|
||||||
|
<thead>
|
||||||
|
<tr>
|
||||||
|
<th>File</th>
|
||||||
|
<th>File Size</th>
|
||||||
|
<th>Task</th>
|
||||||
|
<th>Submitted</th>
|
||||||
|
<th>Status</th>
|
||||||
|
<th class="action-col">Action</th>
|
||||||
|
</tr>
|
||||||
|
</thead>
|
||||||
|
<tbody id="job-list-body">
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
</main>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div id="drag-overlay" class="drag-overlay">
|
<div id="drag-overlay" class="drag-overlay">
|
||||||
@@ -133,8 +137,11 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<script>
|
<script>
|
||||||
|
// Inject server-side configuration for the client-side script
|
||||||
window.APP_CONFIG = {
|
window.APP_CONFIG = {
|
||||||
conversionTools: {{ conversion_tools | tojson }}
|
conversionTools: {{ conversion_tools | tojson }},
|
||||||
|
user: {{ user | tojson }},
|
||||||
|
local_only_mode: {{ local_only_mode | tojson }}
|
||||||
};
|
};
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
|
|||||||
Reference in New Issue
Block a user