144 lines
6.9 KiB
HTML
144 lines
6.9 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>File Wizard</title>
|
|
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/choices.js/public/assets/styles/choices.min.css"/>
|
|
<link rel="stylesheet" href="{{ url_for('static', path='/css/style.css') }}">
|
|
<link rel="preconnect" href="https://fonts.googleapis.com">
|
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
|
<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>
|
|
<h1>File Wizard</h1>
|
|
</header>
|
|
|
|
<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>
|
|
|
|
<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 id="drag-overlay" class="drag-overlay">
|
|
<div class="drag-overlay-content">
|
|
<p>Drop files anywhere to begin</p>
|
|
</div>
|
|
</div>
|
|
<div id="action-dialog" class="dialog-overlay">
|
|
<div class="dialog-box">
|
|
<h2>Choose Action</h2>
|
|
<p><span id="dialog-file-count"></span> file(s) dropped. What would you like to do?</p>
|
|
|
|
<div id="dialog-initial-actions" class="dialog-actions">
|
|
<button id="dialog-action-convert">Convert</button>
|
|
<button id="dialog-action-ocr">OCR</button>
|
|
<button id="dialog-action-transcribe">Transcribe</button>
|
|
</div>
|
|
|
|
<div id="dialog-convert-view" style="display: none;">
|
|
<div class="form-control" style="text-align: left; margin-bottom: 1rem;">
|
|
<label for="dialog-output-format-select">Convert To</label>
|
|
<select id="dialog-output-format-select" required></select>
|
|
</div>
|
|
<div class="dialog-actions">
|
|
<button id="dialog-start-conversion">Start Conversion</button>
|
|
<button id="dialog-back" class="dialog-secondary-action">Back</button>
|
|
</div>
|
|
</div>
|
|
|
|
<button id="dialog-action-cancel" class="dialog-cancel">Cancel</button>
|
|
</div>
|
|
</div>
|
|
<script>
|
|
window.APP_CONFIG = {
|
|
conversionTools: {{ conversion_tools | tojson }}
|
|
};
|
|
</script>
|
|
|
|
<script src="https://cdn.jsdelivr.net/npm/choices.js/public/assets/scripts/choices.min.js"></script>
|
|
<script src="{{ url_for('static', path='/js/script.js') }}"></script>
|
|
</body>
|
|
</html> |