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.*
|
||||
*.db
|
||||
req.txt
|
||||
settings.yml
|
||||
app.log
|
||||
/config/*
|
||||
|
||||
|
||||
@@ -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
|
||||
|
||||
|
||||
@@ -16,6 +16,7 @@ pypdf
|
||||
|
||||
# Configuration & Utilities
|
||||
werkzeug
|
||||
dotenv
|
||||
PyYAML
|
||||
pydantic
|
||||
pydantic-settings
|
||||
|
||||
7
run.sh
7
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=$!
|
||||
|
||||
@@ -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:
|
||||
- .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
|
||||
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]
|
||||
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_16k_16b: Ogg Vorbis (16kHz, Voice)
|
||||
ogg_32k: Ogg Vorbis (32kHz)
|
||||
ogg_16k: Ogg Vorbis (16kHz, Voice)
|
||||
mozjpeg:
|
||||
name: MozJPEG
|
||||
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:
|
||||
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
|
||||
- .mkv
|
||||
- .mov
|
||||
- .webm
|
||||
- .aiff
|
||||
- .avif
|
||||
- .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
|
||||
docx: Word Document
|
||||
pdf: PDF 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
|
||||
xlsx: Excel Spreadsheet
|
||||
epub: EPUB E-Book
|
||||
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
|
||||
mkv: MKV Video
|
||||
mov: MOV Video
|
||||
webm: WebM Video
|
||||
mp4: MP4 Video (H.264/AAC)
|
||||
mp4_hevc: MP4 Video (H.265/AAC)
|
||||
mkv: MKV Video (H.264/AAC)
|
||||
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
|
||||
flac: FLAC Audio
|
||||
wav: WAV Audio (Uncompressed PCM)
|
||||
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)
|
||||
ogg_16k_16b: Ogg Vorbis (16kHz, Voice)
|
||||
aiff_44k_16b: AIFF (CD, 44.1kHz, 16-bit)
|
||||
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}
|
||||
|
||||
@@ -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 {
|
||||
display: grid;
|
||||
/* MODIFICATION: Responsive grid for 1, 2, or 3 items */
|
||||
grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
|
||||
gap: 1.5rem;
|
||||
|
||||
/* --- Form and Input Styles --- */
|
||||
.processor-section {
|
||||
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 */
|
||||
button[type="submit"] {
|
||||
/* --- NEW: Responsive group for action sections --- */
|
||||
.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-color: transparent;
|
||||
border-color: var(--border-color);
|
||||
border-width: 1px;
|
||||
color: #ffffff;
|
||||
background: transparent;
|
||||
border: 1px solid var(--border-color);
|
||||
color: var(--text-color);
|
||||
padding: 0.65rem 1rem;
|
||||
font-size: 1rem;
|
||||
font-weight: 600;
|
||||
border-radius: 5px;
|
||||
cursor: pointer;
|
||||
transition: background-color 0.15s ease;
|
||||
margin-top: auto;
|
||||
transition: background-color 0.15s ease, border-color 0.15s ease;
|
||||
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;
|
||||
|
||||
@@ -1,6 +1,9 @@
|
||||
document.addEventListener('DOMContentLoaded', () => {
|
||||
// --- User Locale and Timezone Detection (Corrected Implementation) ---
|
||||
const USER_LOCALE = navigator.language || 'en-US'; // Fallback to en-US
|
||||
// --- Constants ---
|
||||
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 jobListBody = document.getElementById('job-list-body');
|
||||
|
||||
const pdfForm = document.getElementById('pdf-form');
|
||||
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');
|
||||
const appContainer = document.getElementById('app-container');
|
||||
const loginContainer = document.getElementById('login-container');
|
||||
const loginButton = document.getElementById('login-button');
|
||||
|
||||
// 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 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));
|
||||
audioForm.addEventListener('submit', (e) => handleFormSubmit(e, '/transcribe-audio', audioForm));
|
||||
conversionForm.addEventListener('submit', (e) => handleFormSubmit(e, '/convert-file', conversionForm));
|
||||
|
||||
jobListBody.addEventListener('click', (event) => {
|
||||
if (event.target.classList.contains('cancel-button')) {
|
||||
const jobId = event.target.dataset.jobId;
|
||||
handleCancelJob(jobId);
|
||||
// --- Authentication-aware Fetch Wrapper ---
|
||||
/**
|
||||
* 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.
|
||||
* @param {string} url - The URL to fetch.
|
||||
* @param {object} options - The options for the fetch request.
|
||||
* @returns {Promise<Response>} - A promise that resolves to the fetch Response.
|
||||
*/
|
||||
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) ---
|
||||
async function submitJob(endpoint, formData, originalFilename) {
|
||||
try {
|
||||
const response = await fetch(endpoint, { method: 'POST', body: formData });
|
||||
if (!response.ok) {
|
||||
const errorData = await response.json();
|
||||
throw new Error(errorData.detail || `HTTP error! Status: ${response.status}`);
|
||||
// --- Chunked Uploading Logic ---
|
||||
async function uploadFileInChunks(file, taskType, options = {}) {
|
||||
const uploadId = 'upload-' + Date.now() + '-' + Math.random().toString(36).substr(2, 9);
|
||||
const totalChunks = Math.ceil(file.size / CHUNK_SIZE);
|
||||
|
||||
const preliminaryJob = {
|
||||
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,
|
||||
status: 'pending',
|
||||
progress: 0,
|
||||
original_filename: originalFilename,
|
||||
input_filesize: formData.get('file').size,
|
||||
task_type: endpoint.includes('ocr') ? 'ocr' : (endpoint.includes('transcribe') ? 'transcription' : 'conversion'),
|
||||
created_at: new Date().toISOString() // Create preliminary UTC timestamp
|
||||
}
|
||||
|
||||
try {
|
||||
const finalizePayload = {
|
||||
upload_id: uploadId,
|
||||
original_filename: file.name,
|
||||
total_chunks: totalChunks,
|
||||
task_type: taskType,
|
||||
...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);
|
||||
} catch (error) {
|
||||
console.error('Error submitting job:', error);
|
||||
alert(`Submission failed for ${originalFilename}: ${error.message}`);
|
||||
console.error(`Error finalizing upload for ${file.name}:`, error);
|
||||
if (error.message !== 'Session expired') {
|
||||
updateJobToFailedState(uploadId, `Finalization failed: ${error.message}`);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// --- Original Form Submission Handler (Now uses submitJob) ---
|
||||
async function handleFormSubmit(event, endpoint, form) {
|
||||
event.preventDefault();
|
||||
const fileInput = form.querySelector('input[type="file"]');
|
||||
if (fileInput.files.length === 0) return;
|
||||
|
||||
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);
|
||||
function updateUploadProgress(uploadId, progress) {
|
||||
const row = document.getElementById(uploadId);
|
||||
if (row) {
|
||||
const progressBar = row.querySelector('.progress-bar');
|
||||
if (progressBar) {
|
||||
progressBar.style.width = `${progress}%`;
|
||||
}
|
||||
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 setupDragAndDropListeners() {
|
||||
let dragCounter = 0; // Counter to manage enter/leave events reliably
|
||||
function updateJobToFailedState(jobId, errorMessage) {
|
||||
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, '"')}"` : '';
|
||||
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) => {
|
||||
e.preventDefault();
|
||||
dragCounter++;
|
||||
document.body.classList.add('dragging');
|
||||
});
|
||||
|
||||
window.addEventListener('dragleave', (e) => {
|
||||
e.preventDefault();
|
||||
dragCounter--;
|
||||
if (dragCounter === 0) {
|
||||
document.body.classList.remove('dragging');
|
||||
}
|
||||
if (dragCounter === 0) document.body.classList.remove('dragging');
|
||||
});
|
||||
|
||||
window.addEventListener('dragover', (e) => {
|
||||
e.preventDefault(); // This is necessary to allow a drop
|
||||
});
|
||||
|
||||
window.addEventListener('dragover', (e) => e.preventDefault());
|
||||
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 (files && files.length > 0) {
|
||||
stagedFiles = files;
|
||||
if (e.dataTransfer.files && e.dataTransfer.files.length > 0) {
|
||||
stagedFiles = e.dataTransfer.files;
|
||||
showActionDialog();
|
||||
}
|
||||
}
|
||||
@@ -189,16 +251,8 @@ document.addEventListener('DOMContentLoaded', () => {
|
||||
|
||||
function showActionDialog() {
|
||||
dialogFileCount.textContent = stagedFiles.length;
|
||||
|
||||
// Clone options from main form's select to the dialog's select
|
||||
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
|
||||
dialogOutputFormatSelect.innerHTML = mainOutputFormatSelect.innerHTML; // Use main select as template
|
||||
if (dialogConversionChoices) dialogConversionChoices.destroy();
|
||||
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.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('convert'));
|
||||
dialogStartConversionBtn.addEventListener('click', () => handleDialogAction('conversion'));
|
||||
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 endpoint = '';
|
||||
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);
|
||||
endpoint = '/convert-file';
|
||||
} else if (action === 'ocr') {
|
||||
endpoint = '/ocr-pdf';
|
||||
} else if (action === 'transcribe') {
|
||||
formData.append('model_size', modelSizeSelect.value);
|
||||
endpoint = '/transcribe-audio';
|
||||
let options = {};
|
||||
if (action === 'conversion') {
|
||||
const selectedFormat = dialogConversionChoices.getValue(true);
|
||||
if (!selectedFormat) {
|
||||
alert('Please select a format to convert to.');
|
||||
return;
|
||||
}
|
||||
formDataArray.push({ formData, name: file.name });
|
||||
options.output_format = selectedFormat;
|
||||
} else if (action === 'transcription') {
|
||||
options.model_size = mainModelSizeSelect.value;
|
||||
}
|
||||
|
||||
formDataArray.forEach(item => {
|
||||
submitJob(endpoint, item.formData, item.name);
|
||||
});
|
||||
|
||||
Array.from(stagedFiles).forEach(file => uploadFileInChunks(file, action, options));
|
||||
closeActionDialog();
|
||||
}
|
||||
// --- END: Drag and Drop Implementation ---
|
||||
|
||||
function initializeConversionSelector() {
|
||||
if (conversionChoices) {
|
||||
conversionChoices.destroy();
|
||||
}
|
||||
conversionChoices = new Choices(outputFormatSelect, {
|
||||
/**
|
||||
* Initializes all Choices.js dropdowns on the page.
|
||||
*/
|
||||
function initializeSelectors() {
|
||||
// --- 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 = {
|
||||
label: tool.name,
|
||||
id: toolKey,
|
||||
disabled: false,
|
||||
choices: []
|
||||
};
|
||||
const group = { 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 displayTitle = 'No file chosen';
|
||||
|
||||
if (numFiles === 1) {
|
||||
displayText = input.files[0].name;
|
||||
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(', ');
|
||||
let displayText = numFiles === 1 ? input.files[0].name : `${numFiles} files selected`;
|
||||
let displayTitle = numFiles > 1 ? Array.from(input.files).map(f => f.name).join(', ') : displayText;
|
||||
if (numFiles === 0) {
|
||||
displayText = 'No file chosen';
|
||||
displayTitle = 'No file chosen';
|
||||
}
|
||||
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,25 +372,25 @@ 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)) {
|
||||
startPolling(job.id);
|
||||
}
|
||||
if (['pending', 'processing'].includes(job.status)) startPolling(job.id);
|
||||
}
|
||||
} catch (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;
|
||||
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)) {
|
||||
stopPolling(jobId);
|
||||
}
|
||||
if (['completed', 'failed', 'cancelled'].includes(job.status)) 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);
|
||||
@@ -397,42 +420,37 @@ document.addEventListener('DOMContentLoaded', () => {
|
||||
activePolls.delete(jobId);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
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';
|
||||
if (job.task_type === 'ocr' || job.task_type === 'ocr-image') {
|
||||
taskTypeLabel = 'OCR';
|
||||
} else if (job.task_type === 'transcription') {
|
||||
taskTypeLabel = 'Transcription';
|
||||
} else if (job.task_type === 'conversion' && job.processed_filepath) {
|
||||
|
||||
let taskTypeLabel = job.task_type;
|
||||
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 = '<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 = `<span class="cell-value">${sizeString}</span>`;
|
||||
let fileSizeHtml = job.input_filesize ? formatBytes(job.input_filesize) : '-';
|
||||
if (job.status === 'completed' && job.output_filesize) {
|
||||
fileSizeHtml += ` → ${formatBytes(job.output_filesize)}`;
|
||||
}
|
||||
|
||||
const escapedFilename = job.original_filename ? job.original_filename.replace(/</g, "<").replace(/>/g, ">") : "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 ---
|
||||
initializeConversionSelector();
|
||||
loadInitialJobs();
|
||||
setupDragAndDropListeners();
|
||||
// --- App Initialization and Auth Check ---
|
||||
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();
|
||||
}
|
||||
});
|
||||
@@ -11,95 +11,99 @@
|
||||
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;700&display=swap" rel="stylesheet">
|
||||
</head>
|
||||
<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>
|
||||
</header>
|
||||
<p>Please log in to continue.</p>
|
||||
<button id="login-button" class="login-button-style">Login</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<main>
|
||||
<div class="form-grid">
|
||||
<section class="processor-section">
|
||||
<form id="conversion-form" class="upload-form" enctype="multipart/form-data">
|
||||
<fieldset>
|
||||
<legend><h2>File Conversion</h2></legend>
|
||||
<div class="file-input-wrapper">
|
||||
<input type="file" name="file" id="conversion-file-input" required multiple>
|
||||
<label for="conversion-file-input" class="file-input-label">Choose File...</label>
|
||||
<span id="conversion-file-name" class="file-name">No file 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">
|
||||
<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 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>
|
||||
|
||||
<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>
|
||||
<header>
|
||||
<h1>File Wizard</h1>
|
||||
</header>
|
||||
|
||||
<main>
|
||||
<section class="processor-section">
|
||||
<form id="main-action-form" class="upload-form">
|
||||
<fieldset>
|
||||
<legend><h2>1. Choose Files</h2></legend>
|
||||
<div class="file-input-wrapper">
|
||||
<input type="file" name="file" id="main-file-input" required multiple>
|
||||
<label for="main-file-input" class="file-input-label">Choose Files...</label>
|
||||
<span id="main-file-name" class="file-name">No files chosen</span>
|
||||
</div>
|
||||
</fieldset>
|
||||
|
||||
<div class="actions-group">
|
||||
<fieldset class="action-fieldset">
|
||||
<legend><h2>Convert</h2></legend>
|
||||
<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 id="drag-overlay" class="drag-overlay">
|
||||
@@ -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>
|
||||
|
||||
|
||||
Reference in New Issue
Block a user