169 lines
8.1 KiB
HTML
169 lines
8.1 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 id="login-container" style="display: none;">
|
|
<div class="login-box">
|
|
<h1>File Wizard</h1>
|
|
<p>Please log in to continue.</p>
|
|
<button id="login-button" class="login-button-style">Login</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="app-container" style="display: none;">
|
|
<div class="container">
|
|
<div class="header-actions">
|
|
{% if user and not local_only_mode %}
|
|
<div>
|
|
<span class="user-info">Logged in as {{ user.name }}</span>
|
|
<a href="/logout" title="Logout" class="settings-link">Logout</a>
|
|
</div>
|
|
{% endif %}
|
|
<a href="/settings" title="Settings" class="settings-link">⚙️</a>
|
|
</div>
|
|
|
|
<header>
|
|
<h1>File Wizard</h1>
|
|
</header>
|
|
|
|
<main>
|
|
<section class="processor-section">
|
|
<form id="main-action-form" class="upload-form">
|
|
<fieldset>
|
|
<legend><h2>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">
|
|
{% for model in whisper_models %}
|
|
<option value="{{ model }}">{{ model }}</option>
|
|
{% endfor %}
|
|
</select>
|
|
</div>
|
|
<button type="button" id="start-transcription-btn" class="main-action-button">Start Transcription</button>
|
|
</fieldset>
|
|
|
|
<fieldset class="action-fieldset">
|
|
<legend><h2>Text-to-Speech</h2></legend>
|
|
<div class="form-control">
|
|
<label for="main-tts-model-select">Voice Model</label>
|
|
<select name="model_name" id="main-tts-model-select" required></select>
|
|
</div>
|
|
<button type="button" id="start-tts-btn" class="main-action-button">Start Synthesis</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">
|
|
<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>
|
|
<button id="dialog-action-tts">Synthesize Speech</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>
|
|
|
|
<div id="dialog-tts-view" style="display: none;">
|
|
<div class="form-control" style="text-align: left; margin-bottom: 1rem;">
|
|
<label for="dialog-tts-model-select">Voice Model</label>
|
|
<select id="dialog-tts-model-select" required></select>
|
|
</div>
|
|
<div class="dialog-actions">
|
|
<button id="dialog-start-tts">Start Synthesis</button>
|
|
<button id="dialog-back-tts" class="dialog-secondary-action">Back</button>
|
|
</div>
|
|
</div>
|
|
|
|
<button id="dialog-action-cancel" class="dialog-cancel">Cancel</button>
|
|
</div>
|
|
</div>
|
|
<script>
|
|
// Inject server-side configuration for the client-side script
|
|
window.APP_CONFIG = {
|
|
conversionTools: {{ conversion_tools | tojson }},
|
|
user: {{ user | tojson }},
|
|
local_only_mode: {{ local_only_mode | 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> |