options.html

<style>
* {
  -webkit-user-select: none;
  -user-select: none;
  -webkit-user-drag: none;
  -user-drag: none;
}

@font-face {
  font-family: 'Custom_Font';
  src: local('.SFNSText-Light'), 
       local('.HelveticaNeueDeskInterface-Light'), 
       local('.LucidaGrandeUI'), 
       local('Ubuntu Light'), 
       local('Segoe UI Light'),
       local('Roboto-Light'), 
       local('DroidSans'), 
       local('Tahoma');
}

input {
    -webkit-user-select:initial;
}

* {
  margin: 0;
  padding: 0;
}

html, body {
  background-color: white;
  font-family: Custom_Font!important;
  font-size: 1em;
  overflow-x: hidden;
  overflow-y: auto;
}

label, input {
    vertical-align: middle;
}

label, input[type=checkbox], input[type=radio] {
    cursor: pointer;
}

label {
    margin-right: 15px;
    border: 1px dotted black;
    padding: 3px 5px;
    border-radius: 3px;
}

input[type=radio] {
    vertical-align: baseline;
    margin-right: 8px;
}

select {
    border: 1px solid black;
    padding: 0;
    outline:none!important;
    border: 1px dotted black;
    padding: 3px 5px;
    border-radius: 3px;
}

option {
    background: white;
    color: black;
    text-shadow: none;
    outline:none!important;
    padding: 2px 5px;
    border-bottom: 1px solid black;
}

option:last-child {
    border-bottom: 0;
}

input[disabled], label[disabled], button[disabled] {
    cursor: not-allowed!important;
    color: #bfbfbf!important;
}

#applying-changes {
    background: yellow;
    position: fixed;
    top: 0;
    left: 0px;
    right: 0px;
    width: 100%;
    text-align: center;
    color: green;
    font-weight: bold;
    display: none;
    font-size: 24px !important;
    padding: 0;
    border-bottom: 1px solid;
}

label:hover {
    background: yellow;
}

td {
    padding: 10px 20px;
}

article {
    width: 800px;
    margin: 0 auto 30px;
    border: 1px solid black;
    border-top: 0;
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
}

h1 {
    text-align: center;
    padding: 20px 0;
    font-weight: normal;
    font-size: 250%;
}
</style>

<title>VigoTechTV</title>

<p id="applying-changes">Applying Changes...</p>

<article>
<h1>VigoTechTV - Options</h1>

<table>
    <tr>
        <td>
            Select a camera device:
        </td>

        <td>
            <select id="camera-devices"></select>
        </td>
    </tr>

    <tr>
        <td>
            Select a microphone device:
        </td>

        <td>
            <select id="microphone-devices"></select>
        </td>
    </tr>

    <tr>
        <td>
            Select video codecs:
        </td>

        <td>
            <div id="videoCodec" style="display: inline-block;">
                <label><input type="radio" checked>Default</label>
                <label><input type="radio">VP8</label>
                <label><input type="radio">VP9</label>
                <label><input type="radio">H264</label>
                <label><input type="radio">MKV</label>
            </div>
        </td>
    </tr>

    <tr>
        <td>
            Camera resolutions:
        </td>

        <td>
            <select id="videoResolutions">
                <option value="1920x1080" selected>1920p</option>
                <option value="1280x720">720p</option>
                <option value="640x480">480p</option>
                <option value="640x360">360p</option>
                <option value="320x240">240p</option>
                <option value="default">Default</option>
            </select>
        </td>
    </tr>

    <tr>
        <td>
            Select video frame rates:
        </td>

        <td>
            <select id="videoMaxFrameRates">
                <option selected>None</option>
                <option>30</option>
                <option>25</option>
                <option>15</option>
            </select>
        </td>
    </tr>

    <tr>
        <td>
            Select video bitrates:
        </td>

        <td>
            <select id="bitsPerSecond">
                <option value="default" selected>Default bitrates</option>
                <option value="8000000000">1 GB per second</option>
                <option value="800000000">100 MB per second</option>
                <option value="8000000">1 MB per second</option>
                <option value="800000">100 KB per second</option>
                <option value="8000">1 KB per second</option>
                <option value="800">100 Bytes per second</option>
            </select>
        </td>
    </tr>

    <tr>
        <td>
            YouTube visibility:
        </td>

        <td>
            <select id="youtube_privacy">
                <option value="public" selected>Public</option>
                <option value="unlisted">Unlisted</option>
                <option value="private">Private</option>
                <option value="scheduled" disabled>Scheduled</option>
            </select>
        </td>
    </tr>

    <tr><td colspan="2"><hr></td></tr>

    <tr>
        <td>
            Subtítulos automáticos:
        </td>

        <td>
            <label><input type="checkbox" id="enableTranscription" checked> Mostrar la opción de generar subtítulos en el preview</label>
            <br>
            <small style="display:inline-block;margin-top:6px;color:#666;">
                Tras grabar, en el preview podrás generar subtítulos con Whisper (local, en el navegador),
                descargarlos en .srt/.vtt y subirlos a YouTube. El audio no sale del equipo.
            </small>
        </td>
    </tr>

    <tr>
        <td>
            Idioma de la transcripción:
        </td>

        <td>
            <select id="transcriptionLang">
                <option value="es-ES" selected>Español (España)</option>
                <option value="gl-ES">Galego</option>
                <option value="ca-ES">Català</option>
                <option value="es-MX">Español (México)</option>
                <option value="en-US">English (US)</option>
                <option value="en-GB">English (UK)</option>
                <option value="pt-PT">Português</option>
                <option value="fr-FR">Français</option>
                <option value="de-DE">Deutsch</option>
                <option value="it-IT">Italiano</option>
            </select>
        </td>
    </tr>

    <tr>
        <td>
            Calidad del modelo:
        </td>

        <td>
            <select id="transcriptionModel">
                <option value="tiny">Rápido (tiny · ~40 MB)</option>
                <option value="base" selected>Equilibrado (base · ~80 MB)</option>
                <option value="small">Preciso (small · ~240 MB, más lento)</option>
            </select>
            <br>
            <small style="display:inline-block;margin-top:6px;color:#666;">
                El modelo se descarga una sola vez y queda en caché.
            </small>
        </td>
    </tr>

    <tr>
        <td>
            Resumen / acta del meetup:
        </td>

        <td>
            <label><input type="checkbox" id="enableSummary" checked> Permitir generar un acta en Markdown (IA local)</label>
            <br>
            <small style="display:inline-block;margin-top:6px;color:#666;">
                A partir de los subtítulos, genera un resumen con puntos clave, herramientas y enlaces.
                Corre en el navegador (el modelo se descarga una vez). Usa WebGPU si está disponible.
            </small>
        </td>
    </tr>

    <tr>
        <td>
            Proveedor del resumen:
        </td>

        <td>
            <select id="summaryProvider">
                <option value="local" selected>Local (en el navegador, privado)</option>
                <option value="openai">OpenAI API (mejor calidad, de pago)</option>
            </select>
            <br>
            <small style="display:inline-block;margin-top:6px;color:#666;">
                Con OpenAI, la transcripción se envía a sus servidores. Con "Local" no sale del equipo.
            </small>
        </td>
    </tr>

    <tr>
        <td>
            Modelo (Local):
        </td>

        <td>
            <select id="summaryModel">
                <option value="small" selected>Rápido (Qwen2.5 0.5B)</option>
                <option value="large">Preciso (Qwen2.5 1.5B, más lento/pesado)</option>
            </select>
        </td>
    </tr>

    <tr>
        <td>
            OpenAI API key:
        </td>

        <td>
            <input type="password" id="openaiApiKey" placeholder="sk-..." autocomplete="off" style="width:280px;padding:3px 5px;border:1px dotted black;border-radius:3px;">
            <br>
            <small style="display:inline-block;margin-top:6px;color:#666;">
                Se guarda solo en este equipo (no se sincroniza). Solo se usa si el proveedor es OpenAI.
            </small>
        </td>
    </tr>

    <tr>
        <td>
            Modelo (OpenAI):
        </td>

        <td>
            <select id="openaiModel">
                <option value="gpt-4o-mini" selected>gpt-4o-mini (barato)</option>
                <option value="gpt-4o">gpt-4o (mejor)</option>
                <option value="gpt-4.1-mini">gpt-4.1-mini</option>
            </select>
        </td>
    </tr>

    <tr><td colspan="2"><hr></td></tr>

    <tr>
        <td>
            Logo (mosca):
        </td>

        <td>
            <input type="file" id="logo-file" accept="image/*">
            <button id="logo-remove" style="display:none;">Eliminar</button>
            <br>
            <img id="logo-preview" style="display:none; max-width:120px; max-height:120px; margin-top:5px;">
        </td>
    </tr>

    <tr>
        <td>
            Logo position:
        </td>

        <td>
            <select id="logoPosition">
                <option value="top-left">Top Left</option>
                <option value="top-right">Top Right</option>
                <option value="bottom-left" selected>Bottom Left</option>
                <option value="bottom-right">Bottom Right</option>
            </select>
        </td>
    </tr>

    <tr>
        <td>
            Logo size:
        </td>

        <td>
            <select id="logoSize">
                <option value="5">5%</option>
                <option value="8">8%</option>
                <option value="10" selected>10%</option>
                <option value="15">15%</option>
                <option value="20">20%</option>
            </select>
        </td>
    </tr>

    <tr>
        <td>
            Camera layout:
        </td>

        <td>
            <select id="layoutMode">
                <option value="overlay" selected>Overlay (camera over screen)</option>
                <option value="framed">Framed (no overlap)</option>
            </select>
        </td>
    </tr>

    <tr>
        <td>
            Camera size:
        </td>

        <td>
            <select id="cameraSize">
                <option value="15">15%</option>
                <option value="20" selected>20%</option>
                <option value="25">25%</option>
                <option value="30">30%</option>
                <option value="35">35%</option>
            </select>
        </td>
    </tr>

    <tr>
        <td>
            Camera PiP position:
            <br><small>(only used in overlay layout)</small>
        </td>

        <td>
            <select id="pipPosition">
                <option value="top-left">Top Left</option>
                <option value="top-right">Top Right</option>
                <option value="bottom-left">Bottom Left</option>
                <option value="bottom-right" selected>Bottom Right</option>
            </select>
        </td>
    </tr>
</table>

</article>

<script src="options.js"></script>