72 lines
3.0 KiB
HTML
72 lines
3.0 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Multilingual Voice Translator</title>
|
|
<link rel="stylesheet" href="{{ url_for('static', filename='css/style.css') }}">
|
|
</head>
|
|
<body>
|
|
<div class="container">
|
|
<h1>Voice Translator</h1>
|
|
<p class="subtitle">Powered by Gemma 3</p>
|
|
|
|
<div class="translation-panel">
|
|
<div class="language-selector">
|
|
<div class="select-container">
|
|
<label for="sourceLanguage">From:</label>
|
|
<select id="sourceLanguage">
|
|
{% for code, name in languages.items() %}
|
|
<option value="{{ code }}" {% if code == "english" %}selected{% endif %}>{{ name }}</option>
|
|
{% endfor %}
|
|
</select>
|
|
</div>
|
|
|
|
<button id="swapLanguages" aria-label="Swap languages">
|
|
<span>⇄</span>
|
|
</button>
|
|
|
|
<div class="select-container">
|
|
<label for="targetLanguage">To:</label>
|
|
<select id="targetLanguage">
|
|
{% for code, name in languages.items() %}
|
|
<option value="{{ code }}" {% if code == "french" %}selected{% endif %}>{{ name }}</option>
|
|
{% endfor %}
|
|
</select>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="text-panels">
|
|
<div class="text-panel">
|
|
<textarea id="sourceText" placeholder="Speak or type text to translate"></textarea>
|
|
<div class="controls">
|
|
<button id="recordSource" class="record-button">
|
|
<span class="mic-icon">🎤</span>
|
|
<span class="button-text">Record</span>
|
|
</button>
|
|
<button id="clearSource" class="clear-button">Clear</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="text-panel">
|
|
<textarea id="translatedText" placeholder="Translation will appear here" readonly></textarea>
|
|
<div class="controls">
|
|
<button id="speak" class="speak-button">
|
|
<span class="speaker-icon">🔊</span>
|
|
<span class="button-text">Speak</span>
|
|
</button>
|
|
<button id="copyTranslation" class="copy-button">Copy</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<button id="translateButton" class="primary-button">Translate</button>
|
|
</div>
|
|
|
|
<div id="status" class="status-message"></div>
|
|
</div>
|
|
|
|
<script src="{{ url_for('static', filename='js/main.js') }}"></script>
|
|
</body>
|
|
</html>
|