Feat whisper opts (#1368)

This commit is contained in:
Markos Gogoulos
2025-09-04 13:39:41 +03:00
committed by GitHub
parent 6cee02085c
commit 8d982ace92
30 changed files with 91 additions and 46 deletions

View File

@@ -7,6 +7,23 @@
{% block innercontent %}
{% include "cms/media_nav.html" with active_tab="subtitles" %}
{% if whisper_form %}
<div class="user-action-form-wrap">
<div class="user-action-form-inner">
<h3 style="display: flex; align-items: center; gap: 0.25rem;">Request Automatic Transcription and Translation
<span title="This is Automatic Transcription using a Whisper model that is loaded locally" style="cursor: help;">
<i class="material-icons">info_outline</i>
</span>
</h3>
<form enctype="multipart/form-data" action="" method="post" class="post-form">
{% csrf_token %}
{% crispy whisper_form %}
</form>
</div>
</div>
{% endif %}
<div class="user-action-form-wrap">
<div class="user-action-form-inner">
<form enctype="multipart/form-data" action="" method="post" class="post-form">
@@ -20,7 +37,7 @@
{% if subtitles %}
<div class="user-action-form-wrap">
<div class="user-action-form-inner">
<h3>Existing Subtitles</h3>
<h3>Edit existing Captions</h3>
<ul>
{% for subtitle in subtitles %}
<li><a href="{{subtitle.url}}">{{subtitle.language.title}}</a></li>
@@ -30,20 +47,5 @@
</div>
{% endif %}
{% if whisper_form %}
<div class="user-action-form-wrap">
<div class="user-action-form-inner">
<h3 style="display: flex; align-items: center; gap: 0.25rem;">Request Automatic Tranascription
<span title="This is Automatic Transcription using a Whisper model that is loaded locally" style="cursor: help;">
<i class="material-icons">info_outline</i>
</span>
</h3>
<form enctype="multipart/form-data" action="" method="post" class="post-form">
{% csrf_token %}
{% crispy whisper_form %}
</form>
</div>
</div>
{% endif %}
{% endblock innercontent %}

View File

@@ -59,24 +59,43 @@
</style>
<div class="form-group{% if field.errors %} has-error{% endif %}">
<div class="control-label-container">
{% if field.label %}
<label for="{{ field.id_for_label }}" class="control-label">
{{ field.label }}
{% if field.field.widget.input_type == 'checkbox' and field.field.choices|length <= 1 %}
<div class="controls">
<label for="{{ field.id_for_label }}" class="control-label" style="font-weight: normal;">
{% crispy_field field %}
<span style="margin-left: 5px;">{{ field.label }}</span>
{% if field.help_text %}
<span class="help-text-inline">- {{ field.help_text|safe }}</span>
{% endif %}
</label>
{% endif %}
</div>
<div class="controls {% if field.name == 'title' or field.name == 'new_tags' or field.name == 'description' %}full-width{% endif %}">
{% crispy_field field %}
{% if field.errors %}
<div class="error-container">
{% for error in field.errors %}
<p class="invalid-feedback">{{ error }}</p>
{% endfor %}
</div>
{% endif %}
</div>
</div>
{% if field.errors %}
<div class="error-container">
{% for error in field.errors %}
<p class="invalid-feedback">{{ error }}</p>
{% endfor %}
</div>
{% endif %}
</div>
{% else %}
<div class="control-label-container">
{% if field.label %}
<label for="{{ field.id_for_label }}" class="control-label">
{{ field.label }}
{% if field.help_text %}
<span class="help-text-inline">- {{ field.help_text|safe }}</span>
{% endif %}
</label>
{% endif %}
</div>
<div class="controls {% if field.name == 'title' or field.name == 'new_tags' or field.name == 'description' %}full-width{% endif %}">
{% crispy_field field %}
{% if field.errors %}
<div class="error-container">
{% for error in field.errors %}
<p class="invalid-feedback">{{ error }}</p>
{% endfor %}
</div>
{% endif %}
</div>
{% endif %}
</div>

View File

@@ -28,7 +28,7 @@
{% else %}
<div class="user-action-form-wrap">
<h1>Edit {{subtitle.language.title}} subtitle</h1>
<h1>{{subtitle.language.title}}</h1>
<div class="user-action-form-inner">
Media: <a href="{{subtitle.media.get_absolute_url}}">{{subtitle.media.title}}</a>
<form action="" method="post" class="post-form">

View File

@@ -15,7 +15,7 @@
<li style="display: inline-block;">
<a href="{% url 'add_subtitle' %}?m={{media_object.friendly_token}}"
style="text-decoration: none; {% if active_tab == 'subtitles' %}font-weight: bold; color: #333; padding-bottom: 3px; border-bottom: 2px solid #333;{% else %}color: #666;{% endif %}">
{{ "Subtitles" | custom_translate:LANGUAGE_CODE}}
{{ "Captions" | custom_translate:LANGUAGE_CODE}}
</a>
</li>
<li style="display: inline-block;">

View File

@@ -16,6 +16,7 @@
<div style="text-align: center; padding: 40px 0;">
<p style="margin-bottom: 20px;">{{ "Click 'Start Recording' and select the screen or tab to record. Once recording is finished, click 'Stop Recording,' and the recording will be uploaded." | custom_translate:LANGUAGE_CODE}}</p>
<p style="margin-bottom: 20px;">{{ "This works in Chrome, Safari and Edge browsers." | custom_translate:LANGUAGE_CODE}}</p>
<button id="startBtn" class="qq-upload-button-selector" style="padding: 10px 20px; font-size: 16px; margin-right: 10px; cursor: pointer;">{{ "Start Recording" | custom_translate:LANGUAGE_CODE}}</button>
<button id="stopBtn" class="qq-upload-button-selector" disabled style="padding: 10px 20px; font-size: 16px; cursor: pointer;">{{ "Stop Recording" | custom_translate:LANGUAGE_CODE}}</button>
<div id="spinner" style="display: none; margin-top: 20px;">
@@ -81,7 +82,8 @@ document.addEventListener("DOMContentLoaded", function(event) {
const displayStream = await navigator.mediaDevices.getDisplayMedia({ video: true });
const audioStream = await navigator.mediaDevices.getUserMedia({ audio: true });
stream = new MediaStream([...displayStream.getTracks(), ...audioStream.getTracks()]);
audioStream.getAudioTracks().forEach(track => displayStream.addTrack(track));
stream = displayStream;
}
// When user stops sharing screen via browser UI