feat: initial commit - Jhonny Editor
- Adicionado estrutura completa do projeto - Configurado MCP server para Premiere Pro - Adicionado documentação e skills - Configurado Gitignore para o projeto
This commit is contained in:
João Henrique
Executable
+8
@@ -0,0 +1,8 @@
|
||||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<ExtensionList>
|
||||
<Extension Id="com.mcp.premiere.bridge.panel">
|
||||
<HostList>
|
||||
<Host Name="PPRO" Port="8088"/>
|
||||
</HostList>
|
||||
</Extension>
|
||||
</ExtensionList>
|
||||
Executable
+70
@@ -0,0 +1,70 @@
|
||||
/**************************************************************************************************
|
||||
* ADOBE SYSTEMS INCORPORATED
|
||||
* Copyright 2013 Adobe Systems Incorporated
|
||||
* All Rights Reserved.
|
||||
*
|
||||
* NOTICE: Adobe permits you to use, modify, and distribute this file in accordance with the
|
||||
* terms of the Adobe license agreement accompanying it. If you have received this file from a
|
||||
* source other than Adobe, then your use, modification, or distribution of it requires the prior
|
||||
* written permission of Adobe.
|
||||
*
|
||||
* CSInterface.js - v12.0.0 (minimal shim for MCP Bridge)
|
||||
* Download the full version from: https://github.com/nicscott9/CSInterface
|
||||
**************************************************************************************************/
|
||||
|
||||
/**
|
||||
* CSInterface class for Adobe CEP extensions.
|
||||
* This is a minimal implementation. For production use, download the full
|
||||
* CSInterface.js from Adobe's GitHub repository.
|
||||
*/
|
||||
function CSInterface() {}
|
||||
|
||||
/**
|
||||
* Evaluates an ExtendScript in the host application.
|
||||
* @param {string} script - The ExtendScript to evaluate.
|
||||
* @param {function} callback - Callback with the result string.
|
||||
*/
|
||||
CSInterface.prototype.evalScript = function (script, callback) {
|
||||
if (typeof __adobe_cep__ !== "undefined") {
|
||||
// CEP 9+ requires the callback to be passed directly to __adobe_cep__.evalScript.
|
||||
// Calling it without a callback causes the result to be silently discarded,
|
||||
// making every command return null/undefined.
|
||||
__adobe_cep__.evalScript(script, callback || function () {});
|
||||
} else {
|
||||
// Running outside CEP (for testing)
|
||||
console.warn("[CSInterface] Not running in CEP environment");
|
||||
if (callback) callback("EvalScript Error: Not in CEP environment");
|
||||
}
|
||||
};
|
||||
|
||||
/**
|
||||
* Get the host environment.
|
||||
*/
|
||||
CSInterface.prototype.getHostEnvironment = function () {
|
||||
if (typeof __adobe_cep__ !== "undefined") {
|
||||
try {
|
||||
return JSON.parse(__adobe_cep__.getHostEnvironment());
|
||||
} catch (e) {
|
||||
return null;
|
||||
}
|
||||
}
|
||||
return null;
|
||||
};
|
||||
|
||||
/**
|
||||
* Get the system path.
|
||||
* @param {string} pathType - The path type constant.
|
||||
*/
|
||||
CSInterface.prototype.getSystemPath = function (pathType) {
|
||||
if (typeof __adobe_cep__ !== "undefined") {
|
||||
return __adobe_cep__.getSystemPath(pathType);
|
||||
}
|
||||
return "";
|
||||
};
|
||||
|
||||
// System path constants
|
||||
CSInterface.prototype.EXTENSION_ID = "extensionId";
|
||||
|
||||
// Note: This is a minimal shim. For the full CSInterface.js, download from:
|
||||
// https://github.com/nicscott9/CSInterface
|
||||
// and replace this file with the appropriate version for your CEP target.
|
||||
Executable
+79
@@ -0,0 +1,79 @@
|
||||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<ExtensionManifest Version="7.0" ExtensionBundleId="com.mcp.premiere.bridge" ExtensionBundleVersion="1.14.9" ExtensionBundleName="MCP for Adobe Premiere Pro">
|
||||
<ExtensionList>
|
||||
<Extension Id="com.mcp.premiere.bridge.panel" Version="1.14.9"/>
|
||||
<Extension Id="com.mcp.premiere.bridge.headless" Version="1.14.9"/>
|
||||
</ExtensionList>
|
||||
<ExecutionEnvironment>
|
||||
<HostList>
|
||||
<Host Name="PPRO" Version="14.0"/>
|
||||
</HostList>
|
||||
<LocaleList>
|
||||
<Locale Code="All"/>
|
||||
</LocaleList>
|
||||
<RequiredRuntimeList>
|
||||
<RequiredRuntime Name="CSXS" Version="9.0"/>
|
||||
</RequiredRuntimeList>
|
||||
</ExecutionEnvironment>
|
||||
<DispatchInfoList>
|
||||
<Extension Id="com.mcp.premiere.bridge.panel">
|
||||
<DispatchInfo>
|
||||
<Resources>
|
||||
<MainPath>./index.html</MainPath>
|
||||
<ScriptPath>./host.jsx</ScriptPath>
|
||||
<CEFCommandLine>
|
||||
<Parameter>--allow-file-access-from-files</Parameter>
|
||||
<Parameter>--enable-nodejs</Parameter>
|
||||
</CEFCommandLine>
|
||||
</Resources>
|
||||
<Lifecycle>
|
||||
<AutoVisible>true</AutoVisible>
|
||||
</Lifecycle>
|
||||
<UI>
|
||||
<Type>Panel</Type>
|
||||
<Menu>MCP for Adobe Premiere Pro</Menu>
|
||||
<Geometry>
|
||||
<Size>
|
||||
<Height>300</Height>
|
||||
<Width>400</Width>
|
||||
</Size>
|
||||
<MinSize>
|
||||
<Height>200</Height>
|
||||
<Width>300</Width>
|
||||
</MinSize>
|
||||
</Geometry>
|
||||
<Icons/>
|
||||
</UI>
|
||||
</DispatchInfo>
|
||||
</Extension>
|
||||
<Extension Id="com.mcp.premiere.bridge.headless">
|
||||
<DispatchInfo>
|
||||
<Resources>
|
||||
<MainPath>./index.html</MainPath>
|
||||
<ScriptPath>./host.jsx</ScriptPath>
|
||||
<CEFCommandLine>
|
||||
<Parameter>--allow-file-access-from-files</Parameter>
|
||||
<Parameter>--enable-nodejs</Parameter>
|
||||
</CEFCommandLine>
|
||||
</Resources>
|
||||
<Lifecycle>
|
||||
<AutoVisible>false</AutoVisible>
|
||||
<StartOn>
|
||||
<Event>com.adobe.csxs.events.ApplicationActivate</Event>
|
||||
<Event>applicationActivate</Event>
|
||||
</StartOn>
|
||||
</Lifecycle>
|
||||
<UI>
|
||||
<Type>Custom</Type>
|
||||
<Geometry>
|
||||
<Size>
|
||||
<Height>1</Height>
|
||||
<Width>1</Width>
|
||||
</Size>
|
||||
</Geometry>
|
||||
<Icons/>
|
||||
</UI>
|
||||
</DispatchInfo>
|
||||
</Extension>
|
||||
</DispatchInfoList>
|
||||
</ExtensionManifest>
|
||||
Executable
+7
@@ -0,0 +1,7 @@
|
||||
// Host-side ExtendScript (runs in Premiere Pro's ExtendScript engine)
|
||||
// This file can contain ExtendScript helper functions that are always available.
|
||||
// The main execution happens dynamically via CSInterface.evalScript() from main.js.
|
||||
|
||||
function mcpBridgePing() {
|
||||
return "pong";
|
||||
}
|
||||
Executable
+407
@@ -0,0 +1,407 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="pt-BR">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>MCP for Adobe Premiere Pro</title>
|
||||
<link rel="stylesheet" href="styles.css">
|
||||
</head>
|
||||
<body>
|
||||
<div class="panel-shell">
|
||||
|
||||
<header class="panel-header">
|
||||
<div class="brand-mark" aria-hidden="true"><span>M</span></div>
|
||||
<div class="brand-copy">
|
||||
<h1>MCP for Adobe Premiere Pro</h1>
|
||||
<p>Conexão local com o Premiere</p>
|
||||
</div>
|
||||
<div class="header-status" id="headerStatus" data-state="waiting" title="Status da conexão">
|
||||
<span class="header-status-dot" aria-hidden="true"></span>
|
||||
<span id="headerStatusText">Iniciando…</span>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<nav class="tab-bar" role="tablist" aria-label="Painel">
|
||||
<button class="tab-button active" id="tabBtnSilence" role="tab" aria-selected="true" aria-controls="tabSilence" onclick="switchTab('silence')" type="button">
|
||||
<span class="tab-icon" aria-hidden="true">✂</span>Editar vídeo
|
||||
</button>
|
||||
<button class="tab-button" id="tabBtnBridge" role="tab" aria-selected="false" aria-controls="tabBridge" onclick="switchTab('bridge')" type="button">
|
||||
<span class="tab-icon" aria-hidden="true">⇄</span>Conexão
|
||||
</button>
|
||||
<button class="tab-button" id="tabBtnModels" role="tab" aria-selected="false" aria-controls="tabModels" onclick="switchTab('models')" type="button">
|
||||
<span class="tab-icon" aria-hidden="true">◈</span>Modelos
|
||||
</button>
|
||||
<button class="tab-button" id="tabBtnSettings" role="tab" aria-selected="false" aria-controls="tabSettings" onclick="switchTab('settings')" type="button">
|
||||
<span class="tab-icon" aria-hidden="true">⚙</span>Ajustes
|
||||
</button>
|
||||
</nav>
|
||||
|
||||
<!-- Painel de progresso global: tudo que está rodando aparece aqui, no topo,
|
||||
em vez de ficar escondido no log lá embaixo. -->
|
||||
<section class="task-dock" id="taskDock" role="status" aria-live="polite" hidden>
|
||||
<div class="task-head">
|
||||
<span class="task-spinner" id="taskSpinner" aria-hidden="true"></span>
|
||||
<strong class="task-title" id="taskTitle">Processando…</strong>
|
||||
<span class="task-elapsed" id="taskElapsed">00:00</span>
|
||||
</div>
|
||||
<div class="progress-track" id="taskTrack" data-mode="indeterminate">
|
||||
<div class="progress-fill" id="taskFill" style="width:0%"></div>
|
||||
</div>
|
||||
<div class="task-foot">
|
||||
<span class="task-stage" id="taskStage">Preparando…</span>
|
||||
<span class="task-pct" id="taskPct"></span>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<div class="toast" id="toast" role="status" aria-live="polite" hidden>
|
||||
<span class="toast-icon" id="toastIcon" aria-hidden="true">✓</span>
|
||||
<span class="toast-text" id="toastText"></span>
|
||||
<button type="button" class="toast-close" onclick="hideToast()" aria-label="Fechar aviso">✕</button>
|
||||
</div>
|
||||
|
||||
<!-- ============================= EDITAR VÍDEO ============================= -->
|
||||
<div class="tab-panel" id="tabSilence" role="tabpanel" aria-labelledby="tabBtnSilence">
|
||||
|
||||
<p class="tab-intro">Siga os passos de cima para baixo. Cada passo libera o seguinte.</p>
|
||||
|
||||
<section class="step" id="step1" data-state="ready">
|
||||
<div class="step-head">
|
||||
<span class="step-number" aria-hidden="true">1</span>
|
||||
<div class="step-title">
|
||||
<h2>Escolher o vídeo</h2>
|
||||
<p>Lê o primeiro clipe da sequência aberta no Premiere.</p>
|
||||
</div>
|
||||
<span class="step-chip" id="step1Chip">Comece aqui</span>
|
||||
</div>
|
||||
<div class="step-body">
|
||||
<button id="btnDetectClip" class="button button-primary" onclick="silenceDetectClip()" type="button">Detectar sequência ativa</button>
|
||||
<dl class="kv" id="silenceClipCard" hidden>
|
||||
<div><dt>Sequência</dt><dd id="clipSequenceName">—</dd></div>
|
||||
<div><dt>Arquivo</dt><dd id="clipFileName">—</dd></div>
|
||||
<div><dt>Caminho</dt><dd class="kv-path" id="clipMediaPath">—</dd></div>
|
||||
</dl>
|
||||
<p class="field-help" id="silenceClipInfo">Abra a sequência desejada no Premiere e clique em Detectar.</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="step" id="step2" data-state="locked">
|
||||
<div class="step-head">
|
||||
<span class="step-number" aria-hidden="true">2</span>
|
||||
<div class="step-title">
|
||||
<h2>Transcrever a fala</h2>
|
||||
<p>Gera o texto com marcação de tempo usando o Whisper local.</p>
|
||||
</div>
|
||||
<span class="step-chip" id="step2Chip">Bloqueado</span>
|
||||
</div>
|
||||
<div class="step-body">
|
||||
|
||||
<div class="callout callout-info" id="silenceCachedSection" hidden>
|
||||
<strong>Este vídeo já foi transcrito antes</strong>
|
||||
<p>Reaproveite e pule direto para o plano de cortes — leva segundos em vez de minutos.</p>
|
||||
<label class="field-label" for="silenceCachedSelect">Transcrição salva</label>
|
||||
<select id="silenceCachedSelect" class="select-field"></select>
|
||||
<button id="btnUseCachedTranscript" class="button button-primary" onclick="silenceUseCachedTranscript()" type="button">Usar esta transcrição</button>
|
||||
</div>
|
||||
|
||||
<div class="field-grid">
|
||||
<div>
|
||||
<label class="field-label" for="silenceModel">Modelo</label>
|
||||
<select id="silenceModel" class="select-field">
|
||||
<option value="small" selected>small (recomendado)</option>
|
||||
<option value="base">base (mais rápido)</option>
|
||||
<option value="medium">medium (mais preciso)</option>
|
||||
</select>
|
||||
</div>
|
||||
<div>
|
||||
<span class="field-label">Idioma</span>
|
||||
<p class="field-static" id="silenceLanguageInfo">Português</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<label class="checkbox-field">
|
||||
<input type="checkbox" id="silenceDiarize">
|
||||
<span>Detectar quem fala logo após transcrever</span>
|
||||
</label>
|
||||
|
||||
<div class="mini-action" id="silenceRemovalRow">
|
||||
<div>
|
||||
<label class="checkbox-field" style="border:none;padding:0;background:none">
|
||||
<input type="checkbox" id="silenceRemovalEnabled">
|
||||
<span>Remoção de silêncios</span>
|
||||
</label>
|
||||
<span>Só grava a preferência no JSON — não corta nada aqui. A IA decide os cortes usando esse valor.</span>
|
||||
</div>
|
||||
<div style="display:flex;align-items:center;gap:6px;flex:0 0 auto">
|
||||
<label class="field-label" for="silenceRemovalMinDuration" style="margin:0">Mín. (s)</label>
|
||||
<input type="number" id="silenceRemovalMinDuration" class="select-field" style="width:64px" step="0.1" min="0" value="0.8">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<button id="btnTranscribe" class="button button-primary" onclick="silenceTranscribe()" type="button" disabled>Transcrever</button>
|
||||
<p class="field-help" id="silenceCacheInfo"></p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="step step-optional" id="step3" data-state="locked">
|
||||
<div class="step-head">
|
||||
<span class="step-number" aria-hidden="true">3</span>
|
||||
<div class="step-title">
|
||||
<h2>Enriquecer a transcrição <span class="badge-optional">opcional</span></h2>
|
||||
<p>Dados extras que deixam o corte por IA mais preciso.</p>
|
||||
</div>
|
||||
<span class="step-chip" id="step3Chip">Bloqueado</span>
|
||||
</div>
|
||||
<div class="step-body">
|
||||
<div class="mini-action">
|
||||
<div>
|
||||
<strong>Quem fala</strong>
|
||||
<span id="silenceDiarizeInfo">Separa os locutores por trecho. Precisa do token Hugging Face.</span>
|
||||
</div>
|
||||
<button id="btnDiarize" class="button" onclick="silenceDiarizeSpeakers()" type="button" disabled>Detectar</button>
|
||||
</div>
|
||||
<div class="mini-action">
|
||||
<div>
|
||||
<strong>Métricas de voz</strong>
|
||||
<span id="silenceVoiceFeaturesInfo">Pitch, energia, velocidade de fala e pausas de cada trecho.</span>
|
||||
</div>
|
||||
<button id="btnVoiceFeatures" class="button" onclick="silenceComputeVoiceFeatures()" type="button" disabled>Calcular</button>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="step" id="step4" data-state="locked">
|
||||
<div class="step-head">
|
||||
<span class="step-number" aria-hidden="true">4</span>
|
||||
<div class="step-title">
|
||||
<h2>Gerar arquivo JSON</h2>
|
||||
<p>Reúne transcrição, tempos, locutores, métricas de voz e suas configurações de edição. Nada é cortado — o arquivo vai para um agente de IA externo analisar.</p>
|
||||
</div>
|
||||
<span class="step-chip" id="step4Chip">Bloqueado</span>
|
||||
</div>
|
||||
<div class="step-body">
|
||||
<button id="btnBuildPlan" class="button button-primary" onclick="silenceGenerateJson()" type="button" disabled>Gerar arquivo JSON</button>
|
||||
<dl class="kv" id="silenceJsonCard" hidden>
|
||||
<div><dt>Trechos</dt><dd id="jsonSegmentCount">—</dd></div>
|
||||
<div><dt>Arquivo</dt><dd class="kv-path" id="jsonOutputPath">—</dd></div>
|
||||
</dl>
|
||||
<p class="field-help" id="silencePlanInfo"></p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="step" id="step5" data-state="locked">
|
||||
<div class="step-head">
|
||||
<span class="step-number" aria-hidden="true">5</span>
|
||||
<div class="step-title">
|
||||
<h2>Aplicar na timeline</h2>
|
||||
<p>Selecione o plano de edição que a IA devolveu (cortes, zooms, textos, marcadores) e execute na sequência.</p>
|
||||
</div>
|
||||
<span class="step-chip" id="step5Chip">Bloqueado</span>
|
||||
</div>
|
||||
<div class="step-body">
|
||||
<label class="field-label" for="editorialPlanPath">Arquivo do plano (JSON devolvido pela IA)</label>
|
||||
<div class="file-field">
|
||||
<input type="text" id="editorialPlanPath" spellcheck="false" autocomplete="off" placeholder="/caminho/para/plano.json">
|
||||
<button type="button" class="button button-ghost" id="btnPickPlanFile" onclick="pickEditorialPlanFile()">Procurar…</button>
|
||||
</div>
|
||||
<div class="callout callout-warn" id="silenceApplyInfo">
|
||||
<strong>Sem desfazer</strong>
|
||||
<p>Esta versão do Premiere não expõe undo para o painel. Um backup da sequência é criado automaticamente antes de aplicar.</p>
|
||||
</div>
|
||||
<button id="btnApplyEditorialActions" class="button button-danger" onclick="applyEditorialActions()" type="button" disabled>Aplicar plano na timeline</button>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<details class="log-details">
|
||||
<summary>Detalhes técnicos <span class="log-hint">(o passo a passo completo)</span></summary>
|
||||
<div id="silenceLog" role="log" aria-live="polite" aria-relevant="additions" tabindex="0" aria-label="Log da edição"></div>
|
||||
</details>
|
||||
|
||||
</div>
|
||||
|
||||
<!-- ============================== CONEXÃO ============================== -->
|
||||
<div class="tab-panel" id="tabBridge" role="tabpanel" aria-labelledby="tabBtnBridge" hidden>
|
||||
|
||||
<section class="status-panel" role="status" aria-live="polite" aria-atomic="true">
|
||||
<div class="status-indicator" aria-hidden="true">
|
||||
<div class="status-ring"><div class="status-dot waiting" id="statusDot"></div></div>
|
||||
</div>
|
||||
<div class="status-copy">
|
||||
<span class="section-label">Status da ponte</span>
|
||||
<strong id="statusText">Iniciando conector…</strong>
|
||||
<span id="statusDetail">Verificando o Premiere Pro</span>
|
||||
</div>
|
||||
<div class="command-stat">
|
||||
<strong id="cmdCount">0</strong>
|
||||
<span>comandos</span>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<div class="action-row">
|
||||
<button id="btnStart" class="button button-primary" onclick="startBridge()" type="button" aria-controls="log">
|
||||
<svg viewBox="0 0 20 20" aria-hidden="true"><path class="fill-icon" d="m7 5 8 5-8 5V5Z"/></svg>
|
||||
Iniciar
|
||||
</button>
|
||||
<button id="btnStop" class="button button-danger" onclick="stopBridge()" type="button" aria-controls="log" disabled>
|
||||
<svg viewBox="0 0 20 20" aria-hidden="true"><rect class="fill-icon" x="6" y="6" width="8" height="8" rx="1"/></svg>
|
||||
Parar
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<section class="card" aria-labelledby="connectionCenterTitle">
|
||||
<div class="card-head">
|
||||
<h2 id="connectionCenterTitle">Pronto para editar?</h2>
|
||||
<button class="link-button" type="button" onclick="refreshConnectionCenter()" aria-controls="connectionChecks">Verificar</button>
|
||||
</div>
|
||||
<ul class="connection-checks" id="connectionChecks">
|
||||
<li id="checkConnector" data-state="waiting"><span class="check-dot" aria-hidden="true"></span><span><strong>Conector</strong><small>Iniciando…</small></span></li>
|
||||
<li id="checkProject" data-state="waiting"><span class="check-dot" aria-hidden="true"></span><span><strong>Projeto</strong><small>Verificando…</small></span></li>
|
||||
<li id="checkSequence" data-state="waiting"><span class="check-dot" aria-hidden="true"></span><span><strong>Sequência ativa</strong><small>Verificando…</small></span></li>
|
||||
</ul>
|
||||
<p class="field-help">Este painel verifica só o Premiere. No seu assistente de IA, rode <strong>Verify Premiere connection</strong> para a checagem completa.</p>
|
||||
</section>
|
||||
|
||||
<section class="card update-card" aria-live="polite">
|
||||
<div class="card-head">
|
||||
<h2>Atualizações <span class="card-kicker">MCP updates</span></h2>
|
||||
</div>
|
||||
<div class="update-body">
|
||||
<div class="update-copy">
|
||||
<strong id="updateTitle">Version 1.14.9</strong>
|
||||
<span id="updateDetail">Verificando o servidor MCP global e a versão do conector…</span>
|
||||
</div>
|
||||
<button id="btnUpdate" class="button button-ghost" onclick="handleUpdateClick()" type="button" aria-describedby="updateDetail" disabled>
|
||||
Verificar
|
||||
</button>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<details class="advanced">
|
||||
<summary>Pasta de troca de mensagens</summary>
|
||||
<div class="advanced-body">
|
||||
<label class="field-label" for="tempDir">Pasta local usada pela ponte</label>
|
||||
<div class="path-field">
|
||||
<svg viewBox="0 0 20 20" aria-hidden="true"><path d="M2.5 5.5h5l1.5 2h8.5v8h-15v-10Z"/></svg>
|
||||
<input type="text" id="tempDir" value="" spellcheck="false" autocomplete="off" aria-describedby="tempDirHelp">
|
||||
</div>
|
||||
<p class="field-help" id="tempDirHelp">Comandos e respostas são trocados por arquivos nesta pasta. Só mude se souber o que está fazendo.</p>
|
||||
<button class="button button-ghost" id="btnSave" onclick="saveTempDir()" type="button">Salvar pasta</button>
|
||||
</div>
|
||||
</details>
|
||||
|
||||
<details class="log-details">
|
||||
<summary>Detalhes técnicos <span class="log-hint">(atividade da ponte)</span></summary>
|
||||
<div id="log" role="log" aria-live="polite" aria-relevant="additions" tabindex="0" aria-label="Log da ponte"></div>
|
||||
</details>
|
||||
|
||||
</div>
|
||||
|
||||
<!-- =============================== MODELOS =============================== -->
|
||||
<div class="tab-panel" id="tabModels" role="tabpanel" aria-labelledby="tabBtnModels" hidden>
|
||||
|
||||
<section class="card">
|
||||
<div class="card-head"><h2>Idioma da transcrição</h2></div>
|
||||
<label class="field-label" for="transcribeLanguage">Idioma falado nos vídeos</label>
|
||||
<select id="transcribeLanguage" class="select-field" onchange="saveLanguage()"></select>
|
||||
<p class="field-help">Salvo automaticamente e usado em toda transcrição nova.</p>
|
||||
</section>
|
||||
|
||||
<section class="card">
|
||||
<div class="card-head">
|
||||
<h2>API Groq</h2>
|
||||
<div class="hf-token-status" id="groqApiKeyStatus" data-state="unset">
|
||||
<span class="check-dot" aria-hidden="true"></span>
|
||||
<span id="groqApiKeyStatusText">Não configurada</span>
|
||||
</div>
|
||||
</div>
|
||||
<label class="field-label" for="groqApiKey">API key</label>
|
||||
<div class="path-field">
|
||||
<input type="password" id="groqApiKey" placeholder="gsk_..." spellcheck="false" autocomplete="off">
|
||||
<button type="button" class="path-field-toggle" onclick="toggleGroqApiKeyVisibility()" aria-label="Mostrar ou ocultar a chave Groq">👁</button>
|
||||
</div>
|
||||
<p class="field-help">Será usada para transcrição online quando o provider Groq estiver ativo.</p>
|
||||
<button class="button button-primary" id="btnSaveGroqApiKey" onclick="saveGroqApiKey()" type="button">Salvar</button>
|
||||
</section>
|
||||
|
||||
<section class="card">
|
||||
<div class="card-head"><h2>Modelos Whisper</h2></div>
|
||||
<p class="field-help">Modelos maiores acertam mais e demoram mais. O marcado como padrão é o pré-selecionado na aba Editar vídeo.</p>
|
||||
<div class="model-list" id="modelList"></div>
|
||||
</section>
|
||||
|
||||
<details class="advanced">
|
||||
<summary>Pasta dos modelos</summary>
|
||||
<div class="advanced-body">
|
||||
<label class="field-label" for="modelsPath">Onde os modelos ficam salvos</label>
|
||||
<div class="path-field">
|
||||
<svg viewBox="0 0 20 20" aria-hidden="true"><path d="M2.5 5.5h5l1.5 2h8.5v8h-15v-10Z"/></svg>
|
||||
<input type="text" id="modelsPath" spellcheck="false" autocomplete="off" aria-describedby="modelsPathHelp">
|
||||
</div>
|
||||
<p class="field-help" id="modelsPathHelp">Mudar a pasta não move os modelos já baixados.</p>
|
||||
<button class="button button-ghost" id="btnSaveModelsPath" onclick="saveModelsPath()" type="button">Salvar pasta</button>
|
||||
</div>
|
||||
</details>
|
||||
|
||||
<details class="log-details">
|
||||
<summary>Detalhes técnicos <span class="log-hint">(downloads)</span></summary>
|
||||
<div id="modelsLog" role="log" aria-live="polite" aria-relevant="additions" tabindex="0" aria-label="Log de download de modelos"></div>
|
||||
</details>
|
||||
|
||||
</div>
|
||||
|
||||
<!-- =============================== AJUSTES =============================== -->
|
||||
<div class="tab-panel" id="tabSettings" role="tabpanel" aria-labelledby="tabBtnSettings" hidden>
|
||||
|
||||
<section class="card">
|
||||
<div class="card-head">
|
||||
<h2>Token do Hugging Face</h2>
|
||||
<div class="hf-token-status" id="hfTokenStatus" data-state="unset">
|
||||
<span class="check-dot" aria-hidden="true"></span>
|
||||
<span id="hfTokenStatusText">Não configurado</span>
|
||||
</div>
|
||||
</div>
|
||||
<label class="field-label" for="hfToken">Access token</label>
|
||||
<div class="path-field">
|
||||
<input type="password" id="hfToken" placeholder="hf_..." spellcheck="false" autocomplete="off" aria-describedby="hfTokenHelp">
|
||||
<button type="button" class="path-field-toggle" id="btnToggleHfToken" onclick="toggleHfTokenVisibility()" aria-label="Mostrar ou ocultar o token">👁</button>
|
||||
</div>
|
||||
<p class="field-help" id="hfTokenHelp">Autentica os downloads de modelos e libera a detecção de locutores.</p>
|
||||
<div class="button-row">
|
||||
<button class="button button-primary" id="btnSaveHfToken" onclick="saveHfToken()" type="button">Salvar</button>
|
||||
<button class="button button-ghost" id="btnValidateHfToken" onclick="validateHfToken()" type="button">Validar</button>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="card">
|
||||
<div class="card-head">
|
||||
<h2>Personalidades de edição</h2>
|
||||
<button class="link-button" id="btnNewPersonality" onclick="startNewEditorPersonality()" type="button">+ Nova</button>
|
||||
</div>
|
||||
<p class="field-help">
|
||||
Descreva em texto livre como a edição deve ser feita — ex.: “depoimento”: zoom suave nos momentos
|
||||
emotivos, corta hesitação; “podcast”: ritmo ágil, corta silêncio agressivo. A personalidade ativa
|
||||
viaja junto no JSON gerado na transcrição.
|
||||
</p>
|
||||
<div class="model-list" id="editorPersonalityList"></div>
|
||||
|
||||
<div id="editorPersonalityForm" class="inline-form" hidden>
|
||||
<label class="field-label" for="editorPersonalityName">Nome</label>
|
||||
<div class="path-field">
|
||||
<input type="text" id="editorPersonalityName" placeholder="Ex: Depoimento emocional" spellcheck="false" autocomplete="off">
|
||||
</div>
|
||||
<label class="field-label" for="editorPersonalityText">Comportamento esperado</label>
|
||||
<textarea id="editorPersonalityText" rows="6" placeholder="Descreva livremente como o editor deve tratar esse tipo de vídeo…"></textarea>
|
||||
<div class="button-row">
|
||||
<button id="btnSavePersonality" class="button button-primary" onclick="saveEditorPersonalityForm()" type="button">Salvar</button>
|
||||
<button id="btnCancelPersonality" class="button button-ghost" onclick="cancelEditorPersonalityForm()" type="button">Cancelar</button>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script src="CSInterface.js"></script>
|
||||
<script src="updater.cjs"></script>
|
||||
<script src="main.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
Executable
+341
@@ -0,0 +1,341 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>MCP for Adobe Premiere Pro</title>
|
||||
<link rel="stylesheet" href="styles.css">
|
||||
</head>
|
||||
<body>
|
||||
<main class="panel-shell">
|
||||
<header class="panel-header">
|
||||
<div class="brand-mark" aria-hidden="true"><span>M</span></div>
|
||||
<div class="brand-copy">
|
||||
<h1>MCP for Adobe Premiere Pro</h1>
|
||||
<p>Local Premiere connection</p>
|
||||
</div>
|
||||
<div class="auto-start"><span></span>Auto-start</div>
|
||||
</header>
|
||||
|
||||
<nav class="tab-bar" role="tablist" aria-label="Painel">
|
||||
<button class="tab-button active" id="tabBtnBridge" role="tab" aria-selected="true" aria-controls="tabBridge" onclick="switchTab('bridge')" type="button">Bridge</button>
|
||||
<button class="tab-button" id="tabBtnSilence" role="tab" aria-selected="false" aria-controls="tabSilence" onclick="switchTab('silence')" type="button">Cortar silêncio</button>
|
||||
<button class="tab-button" id="tabBtnSettings" role="tab" aria-selected="false" aria-controls="tabSettings" onclick="switchTab('settings')" type="button">Configurações</button>
|
||||
<button class="tab-button" id="tabBtnModels" role="tab" aria-selected="false" aria-controls="tabModels" onclick="switchTab('models')" type="button">Modelos Locais</button>
|
||||
</nav>
|
||||
|
||||
<div class="tab-panel" id="tabBridge" role="tabpanel" aria-labelledby="tabBtnBridge">
|
||||
|
||||
<section class="status-panel" role="status" aria-live="polite" aria-atomic="true">
|
||||
<div class="status-indicator" aria-hidden="true">
|
||||
<div class="status-ring"><div class="status-dot waiting" id="statusDot"></div></div>
|
||||
</div>
|
||||
<div class="status-copy">
|
||||
<span class="section-label">Bridge status</span>
|
||||
<strong id="statusText">Starting connector…</strong>
|
||||
<span id="statusDetail">Checking Premiere Pro</span>
|
||||
</div>
|
||||
<div class="command-stat">
|
||||
<strong id="cmdCount">0</strong>
|
||||
<span>commands</span>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="connection-center" aria-labelledby="connectionCenterTitle">
|
||||
<div class="section-heading">
|
||||
<div>
|
||||
<span class="section-label">Connection Center</span>
|
||||
<h2 id="connectionCenterTitle">Ready-to-edit check</h2>
|
||||
</div>
|
||||
<button class="save-link" type="button" onclick="refreshConnectionCenter()" aria-controls="connectionChecks">Refresh</button>
|
||||
</div>
|
||||
<p class="connection-intro">This panel only checks Premiere. In your AI assistant, run <strong>Verify Premiere connection</strong> for the complete safe check.</p>
|
||||
<ul class="connection-checks" id="connectionChecks">
|
||||
<li id="checkConnector" data-state="waiting"><span class="check-dot" aria-hidden="true"></span><span><strong>Connector</strong><small>Starting…</small></span></li>
|
||||
<li id="checkProject" data-state="waiting"><span class="check-dot" aria-hidden="true"></span><span><strong>Project</strong><small>Checking…</small></span></li>
|
||||
<li id="checkSequence" data-state="waiting"><span class="check-dot" aria-hidden="true"></span><span><strong>Active sequence</strong><small>Checking…</small></span></li>
|
||||
</ul>
|
||||
</section>
|
||||
|
||||
<section class="config-section">
|
||||
<div class="section-heading">
|
||||
<div>
|
||||
<span class="section-label">Configuration</span>
|
||||
<h2>Bridge directory</h2>
|
||||
</div>
|
||||
<button class="save-link" id="btnSave" onclick="saveTempDir()" type="button" title="Save bridge directory">
|
||||
<svg viewBox="0 0 20 20" aria-hidden="true"><path d="M4 3.5h9.4L16.5 6v10.5h-13v-13Z"/><path d="M6.5 3.5v5h7v-5M6.5 16.5v-5h7v5"/></svg>
|
||||
Save
|
||||
</button>
|
||||
</div>
|
||||
<label class="sr-only" for="tempDir">Temporary bridge directory</label>
|
||||
<div class="path-field">
|
||||
<svg viewBox="0 0 20 20" aria-hidden="true"><path d="M2.5 5.5h5l1.5 2h8.5v8h-15v-10Z"/></svg>
|
||||
<input type="text" id="tempDir" value="" spellcheck="false" autocomplete="off" aria-describedby="tempDirHelp">
|
||||
</div>
|
||||
<p class="field-help" id="tempDirHelp">Commands and responses are exchanged through this local folder.</p>
|
||||
</section>
|
||||
|
||||
<div class="action-row">
|
||||
<button id="btnStart" class="button button-primary" onclick="startBridge()" type="button" aria-controls="log">
|
||||
<svg viewBox="0 0 20 20" aria-hidden="true"><path class="fill-icon" d="m7 5 8 5-8 5V5Z"/></svg>
|
||||
Start Bridge
|
||||
</button>
|
||||
<button id="btnStop" class="button button-stop" onclick="stopBridge()" type="button" aria-controls="log" disabled>
|
||||
<svg viewBox="0 0 20 20" aria-hidden="true"><rect class="fill-icon" x="6" y="6" width="8" height="8" rx="1"/></svg>
|
||||
Stop
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<section class="update-section" aria-live="polite">
|
||||
<div class="update-copy">
|
||||
<span class="section-label">MCP updates</span>
|
||||
<strong id="updateTitle">Version 1.14.9</strong>
|
||||
<span id="updateDetail">Checking the global MCP server and connector release…</span>
|
||||
</div>
|
||||
<button id="btnUpdate" class="button button-update" onclick="handleUpdateClick()" type="button" aria-describedby="updateDetail" disabled>
|
||||
Check again
|
||||
</button>
|
||||
</section>
|
||||
|
||||
<section class="activity-section">
|
||||
<div class="section-heading activity-heading">
|
||||
<div>
|
||||
<span class="section-label">Live monitor</span>
|
||||
<h2>Activity</h2>
|
||||
</div>
|
||||
<span class="activity-state"><span></span>Listening</span>
|
||||
</div>
|
||||
<div id="log" role="log" aria-live="polite" aria-relevant="additions" tabindex="0" aria-label="Bridge activity log"></div>
|
||||
</section>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="tab-panel" id="tabSilence" role="tabpanel" aria-labelledby="tabBtnSilence" hidden>
|
||||
|
||||
<section class="config-section">
|
||||
<div class="section-heading">
|
||||
<div>
|
||||
<span class="section-label">1. Vídeo</span>
|
||||
<h2>Clipe da sequência ativa</h2>
|
||||
</div>
|
||||
<button class="save-link" id="btnDetectClip" onclick="silenceDetectClip()" type="button">Detectar</button>
|
||||
</div>
|
||||
<p class="field-help" id="silenceClipInfo">Clique em Detectar com a sequência desejada aberta no Premiere.</p>
|
||||
</section>
|
||||
|
||||
<section class="config-section" id="silenceCachedSection" hidden>
|
||||
<div class="section-heading">
|
||||
<div>
|
||||
<span class="section-label">Transcrições salvas</span>
|
||||
<h2>Já existe transcrição deste vídeo</h2>
|
||||
</div>
|
||||
</div>
|
||||
<label class="sr-only" for="silenceCachedSelect">Transcrição salva</label>
|
||||
<select id="silenceCachedSelect" class="path-field-select"></select>
|
||||
<div class="action-row">
|
||||
<button id="btnUseCachedTranscript" class="button button-primary" onclick="silenceUseCachedTranscript()" type="button">Usar esta e ir para o plano de cortes</button>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="config-section">
|
||||
<div class="section-heading">
|
||||
<div>
|
||||
<span class="section-label">2. Transcrição</span>
|
||||
<h2>Whisper (faster-whisper)</h2>
|
||||
</div>
|
||||
</div>
|
||||
<label class="sr-only" for="silenceModel">Modelo</label>
|
||||
<select id="silenceModel" class="path-field-select">
|
||||
<option value="small" selected>small (recomendado)</option>
|
||||
<option value="base">base (mais rápido)</option>
|
||||
<option value="medium">medium (mais preciso)</option>
|
||||
</select>
|
||||
<label class="checkbox-field">
|
||||
<input type="checkbox" id="silenceDiarize">
|
||||
Detectar quem fala automaticamente após transcrever
|
||||
</label>
|
||||
<div class="action-row">
|
||||
<button id="btnTranscribe" class="button button-primary" onclick="silenceTranscribe()" type="button" disabled>Transcrever</button>
|
||||
</div>
|
||||
<p class="field-help" id="silenceCacheInfo"></p>
|
||||
<div class="action-row">
|
||||
<button id="btnDiarize" class="button" onclick="silenceDiarizeSpeakers()" type="button" disabled>Detectar quem fala nesta transcrição</button>
|
||||
</div>
|
||||
<p class="field-help" id="silenceDiarizeInfo"></p>
|
||||
<div class="action-row">
|
||||
<button id="btnVoiceFeatures" class="button" onclick="silenceComputeVoiceFeatures()" type="button" disabled>Calcular pitch/energia/velocidade/pausas</button>
|
||||
</div>
|
||||
<p class="field-help" id="silenceVoiceFeaturesInfo"></p>
|
||||
</section>
|
||||
|
||||
<section class="config-section">
|
||||
<div class="section-heading">
|
||||
<div>
|
||||
<span class="section-label">3. Plano de cortes</span>
|
||||
<h2>Silêncio a remover</h2>
|
||||
</div>
|
||||
</div>
|
||||
<div class="action-row">
|
||||
<button id="btnBuildPlan" class="button button-primary" onclick="silenceBuildPlan()" type="button" disabled>Gerar plano</button>
|
||||
</div>
|
||||
<p class="field-help" id="silencePlanInfo"></p>
|
||||
</section>
|
||||
|
||||
<section class="config-section">
|
||||
<div class="section-heading">
|
||||
<div>
|
||||
<span class="section-label">4. Aplicar</span>
|
||||
<h2>Cortar na timeline</h2>
|
||||
</div>
|
||||
</div>
|
||||
<p class="field-help" id="silenceApplyInfo">Revise o plano acima antes de aplicar. Esta ação não pode ser desfeita (undo indisponível nesta versão do Premiere) — um backup da sequência é criado automaticamente.</p>
|
||||
<div class="action-row">
|
||||
<button id="btnApplyCuts" class="button button-stop" onclick="silenceApplyCuts()" type="button" disabled>Aplicar cortes na timeline</button>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="config-section">
|
||||
<div class="section-heading">
|
||||
<div>
|
||||
<span class="section-label">5. Plano de edição</span>
|
||||
<h2>Importar plano (cut/zoom/text/marker)</h2>
|
||||
</div>
|
||||
</div>
|
||||
<p class="field-help">Cole aqui o caminho do arquivo JSON de ações que você recebeu (ex: gerado a partir da transcrição via Claude/skill selecao-trechos). Usa a sequência detectada na seção 1.</p>
|
||||
<label class="sr-only" for="editorialPlanPath">Caminho do arquivo do plano</label>
|
||||
<div class="path-field">
|
||||
<input type="text" id="editorialPlanPath" spellcheck="false" autocomplete="off" placeholder="/caminho/para/actions.json">
|
||||
</div>
|
||||
<div class="action-row">
|
||||
<button id="btnApplyEditorialActions" class="button button-stop" onclick="applyEditorialActions()" type="button">Aplicar plano de edição</button>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="activity-section">
|
||||
<div class="section-heading activity-heading">
|
||||
<div>
|
||||
<span class="section-label">Progresso</span>
|
||||
<h2>Log</h2>
|
||||
</div>
|
||||
</div>
|
||||
<div id="silenceLog" role="log" aria-live="polite" aria-relevant="additions" tabindex="0" aria-label="Silence cut log"></div>
|
||||
</section>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="tab-panel" id="tabSettings" role="tabpanel" aria-labelledby="tabBtnSettings" hidden>
|
||||
|
||||
<section class="config-section">
|
||||
<div class="section-heading">
|
||||
<div>
|
||||
<span class="section-label">Configuração</span>
|
||||
<h2>Hugging Face token</h2>
|
||||
</div>
|
||||
<button class="save-link" id="btnSaveHfToken" onclick="saveHfToken()" type="button" title="Salvar token">Salvar</button>
|
||||
</div>
|
||||
<label class="sr-only" for="hfToken">Hugging Face access token</label>
|
||||
<div class="path-field">
|
||||
<input type="password" id="hfToken" placeholder="hf_..." spellcheck="false" autocomplete="off" aria-describedby="hfTokenHelp">
|
||||
<button type="button" class="path-field-toggle" id="btnToggleHfToken" onclick="toggleHfTokenVisibility()" aria-label="Mostrar/ocultar token">👁</button>
|
||||
</div>
|
||||
<p class="field-help" id="hfTokenHelp">
|
||||
Usado para autenticar downloads de modelos no Hugging Face e evitar limites de requisições anônimas.
|
||||
<button type="button" class="save-link" id="btnValidateHfToken" onclick="validateHfToken()">Validar</button>
|
||||
</p>
|
||||
<div class="hf-token-status" id="hfTokenStatus" data-state="unset">
|
||||
<span class="check-dot" aria-hidden="true"></span>
|
||||
<span id="hfTokenStatusText">Não configurado</span>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="config-section">
|
||||
<div class="section-heading">
|
||||
<div>
|
||||
<span class="section-label">Configuração do Editor</span>
|
||||
<h2>Personalidades de edição</h2>
|
||||
</div>
|
||||
</div>
|
||||
<p class="field-help">
|
||||
Descreva, em texto livre, como você espera que a edição seja feita (ex: "depoimento" — zoom
|
||||
suave em momentos emotivos, corta hesitação; "podcast" — ritmo ágil, corta silêncio agressivo).
|
||||
A personalidade marcada como ativa vai junto no JSON gerado na transcrição.
|
||||
</p>
|
||||
<div class="model-list" id="editorPersonalityList"></div>
|
||||
<div class="action-row">
|
||||
<button id="btnNewPersonality" class="button button-primary" onclick="startNewEditorPersonality()" type="button">+ Nova personalidade</button>
|
||||
</div>
|
||||
|
||||
<div id="editorPersonalityForm" hidden>
|
||||
<label class="sr-only" for="editorPersonalityName">Nome da personalidade</label>
|
||||
<div class="path-field">
|
||||
<input type="text" id="editorPersonalityName" placeholder="Ex: Depoimento emocional" spellcheck="false" autocomplete="off">
|
||||
</div>
|
||||
<label class="sr-only" for="editorPersonalityText">Descrição do comportamento</label>
|
||||
<textarea id="editorPersonalityText" rows="6" placeholder="Descreva livremente o comportamento esperado do editor para esse tipo de vídeo…"></textarea>
|
||||
<div class="action-row">
|
||||
<button id="btnSavePersonality" class="button button-primary" onclick="saveEditorPersonalityForm()" type="button">Salvar</button>
|
||||
<button id="btnCancelPersonality" class="button" onclick="cancelEditorPersonalityForm()" type="button">Cancelar</button>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="tab-panel" id="tabModels" role="tabpanel" aria-labelledby="tabBtnModels" hidden>
|
||||
|
||||
<section class="config-section">
|
||||
<div class="section-heading">
|
||||
<div>
|
||||
<span class="section-label">Configuração</span>
|
||||
<h2>Pasta de modelos</h2>
|
||||
</div>
|
||||
<button class="save-link" id="btnSaveModelsPath" onclick="saveModelsPath()" type="button" title="Salvar pasta">Salvar</button>
|
||||
</div>
|
||||
<label class="sr-only" for="modelsPath">Pasta de modelos</label>
|
||||
<div class="path-field">
|
||||
<input type="text" id="modelsPath" spellcheck="false" autocomplete="off" aria-describedby="modelsPathHelp">
|
||||
</div>
|
||||
<p class="field-help" id="modelsPathHelp">Onde os modelos Whisper baixados ficam armazenados. Mudar a pasta não move modelos já baixados.</p>
|
||||
</section>
|
||||
|
||||
<section class="config-section">
|
||||
<div class="section-heading">
|
||||
<div>
|
||||
<span class="section-label">Configuração</span>
|
||||
<h2>Idioma da transcrição</h2>
|
||||
</div>
|
||||
<button class="save-link" id="btnSaveLanguage" onclick="saveLanguage()" type="button" title="Salvar idioma">Salvar</button>
|
||||
</div>
|
||||
<label class="sr-only" for="transcribeLanguage">Idioma</label>
|
||||
<select id="transcribeLanguage" class="path-field-select"></select>
|
||||
</section>
|
||||
|
||||
<section class="config-section">
|
||||
<div class="section-heading">
|
||||
<div>
|
||||
<span class="section-label">Modelos</span>
|
||||
<h2>Modelos locais (Whisper)</h2>
|
||||
</div>
|
||||
</div>
|
||||
<div class="model-list" id="modelList"></div>
|
||||
</section>
|
||||
|
||||
<section class="activity-section">
|
||||
<div class="section-heading activity-heading">
|
||||
<div>
|
||||
<span class="section-label">Progresso</span>
|
||||
<h2>Log</h2>
|
||||
</div>
|
||||
</div>
|
||||
<div id="modelsLog" role="log" aria-live="polite" aria-relevant="additions" tabindex="0" aria-label="Models download log"></div>
|
||||
</section>
|
||||
|
||||
</div>
|
||||
</main>
|
||||
|
||||
<script src="CSInterface.js"></script>
|
||||
<script src="updater.cjs"></script>
|
||||
<script src="main.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
Executable
+2143
File diff suppressed because it is too large
Load Diff
Executable
+1840
File diff suppressed because it is too large
Load Diff
Executable
+602
@@ -0,0 +1,602 @@
|
||||
:root {
|
||||
--bg: #151516;
|
||||
--surface: #1c1c1f;
|
||||
--surface-raised: #222226;
|
||||
--surface-deep: #111113;
|
||||
--border: #35353a;
|
||||
--border-strong: #494950;
|
||||
--text: #f2f1f4;
|
||||
--text-secondary: #adabb3;
|
||||
--text-muted: #74727b;
|
||||
--violet: #9b6cff;
|
||||
--violet-hover: #ad87ff;
|
||||
--violet-soft: rgba(155, 108, 255, 0.12);
|
||||
--green: #70d987;
|
||||
--green-soft: rgba(112, 217, 135, 0.1);
|
||||
--red: #ff6565;
|
||||
--red-soft: rgba(255, 101, 101, 0.09);
|
||||
--amber: #e9b85d;
|
||||
--amber-soft: rgba(233, 184, 93, 0.1);
|
||||
--radius: 8px;
|
||||
--font-ui: -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
|
||||
--font-mono: "Cascadia Mono", "SFMono-Regular", Consolas, monospace;
|
||||
}
|
||||
|
||||
* { box-sizing: border-box; }
|
||||
html, body { width: 100%; min-width: 280px; height: 100%; margin: 0; }
|
||||
|
||||
body {
|
||||
overflow: hidden;
|
||||
background: var(--bg);
|
||||
color: var(--text);
|
||||
font-family: var(--font-ui);
|
||||
font-size: 11.5px;
|
||||
line-height: 1.45;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
button, input, select, textarea { font: inherit; }
|
||||
button { -webkit-appearance: none; }
|
||||
h1, h2, h3 { margin: 0; }
|
||||
|
||||
.panel-shell {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100%;
|
||||
padding: 0 14px 18px;
|
||||
overflow-y: auto;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
.panel-shell::-webkit-scrollbar { width: 7px; }
|
||||
.panel-shell::-webkit-scrollbar-thumb { border-radius: 4px; background: var(--border); }
|
||||
.panel-shell::-webkit-scrollbar-thumb:hover { background: var(--border-strong); }
|
||||
|
||||
/* ------------------------------ Cabeçalho ------------------------------ */
|
||||
.panel-header {
|
||||
position: sticky;
|
||||
top: 0;
|
||||
z-index: 30;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
margin: 0 -14px;
|
||||
padding: 11px 14px;
|
||||
border-bottom: 1px solid var(--border);
|
||||
background: #19191b;
|
||||
}
|
||||
|
||||
.brand-mark {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
flex: 0 0 auto;
|
||||
border: 1px solid #aa83ff;
|
||||
border-radius: 8px;
|
||||
background: var(--violet-soft);
|
||||
color: #cbb8ff;
|
||||
font-size: 13px;
|
||||
font-weight: 750;
|
||||
letter-spacing: -0.04em;
|
||||
}
|
||||
|
||||
.brand-copy { min-width: 0; flex: 1; }
|
||||
.brand-copy h1 { overflow: hidden; font-size: 12px; line-height: 1.25; font-weight: 650; text-overflow: ellipsis; white-space: nowrap; }
|
||||
.brand-copy p { margin: 2px 0 0; color: var(--text-muted); font-size: 9.5px; }
|
||||
|
||||
.header-status {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
flex: 0 0 auto;
|
||||
padding: 4px 9px;
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 20px;
|
||||
background: var(--surface-deep);
|
||||
color: var(--text-secondary);
|
||||
font-size: 9.5px;
|
||||
font-weight: 600;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.header-status-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--text-muted); }
|
||||
.header-status[data-state="connected"] { border-color: rgba(112, 217, 135, .35); color: var(--green); }
|
||||
.header-status[data-state="connected"] .header-status-dot { background: var(--green); box-shadow: 0 0 0 3px var(--green-soft); }
|
||||
.header-status[data-state="waiting"] { border-color: rgba(233, 184, 93, .3); color: var(--amber); }
|
||||
.header-status[data-state="waiting"] .header-status-dot { background: var(--amber); }
|
||||
.header-status[data-state="error"] { border-color: rgba(255, 101, 101, .35); color: var(--red); }
|
||||
.header-status[data-state="error"] .header-status-dot { background: var(--red); }
|
||||
|
||||
/* --------------------------------- Abas --------------------------------- */
|
||||
.tab-bar {
|
||||
position: sticky;
|
||||
top: 53px;
|
||||
z-index: 25;
|
||||
display: flex;
|
||||
gap: 2px;
|
||||
margin: 0 -14px 14px;
|
||||
padding: 0 14px;
|
||||
border-bottom: 1px solid var(--border);
|
||||
background: var(--bg);
|
||||
}
|
||||
|
||||
.tab-button {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 5px;
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
padding: 10px 4px;
|
||||
border: none;
|
||||
border-bottom: 2px solid transparent;
|
||||
background: transparent;
|
||||
color: var(--text-muted);
|
||||
cursor: pointer;
|
||||
font-size: 10.5px;
|
||||
font-weight: 600;
|
||||
white-space: nowrap;
|
||||
transition: color .15s, border-color .15s;
|
||||
}
|
||||
.tab-icon { font-size: 11px; opacity: .8; }
|
||||
.tab-button:hover { color: var(--text-secondary); }
|
||||
.tab-button.active { color: var(--text); border-bottom-color: var(--violet); }
|
||||
.tab-button.active .tab-icon { color: var(--violet); opacity: 1; }
|
||||
.tab-panel[hidden] { display: none; }
|
||||
.tab-intro { margin: 0 0 12px; color: var(--text-muted); font-size: 10px; }
|
||||
|
||||
/* --------------------- Painel de progresso (task dock) ------------------- */
|
||||
.task-dock {
|
||||
position: sticky;
|
||||
top: 91px;
|
||||
z-index: 20;
|
||||
margin: 0 0 14px;
|
||||
padding: 11px 12px;
|
||||
border: 1px solid rgba(155, 108, 255, .4);
|
||||
border-radius: var(--radius);
|
||||
background: linear-gradient(180deg, #221c33 0%, var(--surface) 100%);
|
||||
box-shadow: 0 6px 18px rgba(0, 0, 0, .35);
|
||||
}
|
||||
.task-dock[hidden] { display: none; }
|
||||
.task-dock[data-result="ok"] { border-color: rgba(112, 217, 135, .45); background: linear-gradient(180deg, #182a1e 0%, var(--surface) 100%); }
|
||||
.task-dock[data-result="err"] { border-color: rgba(255, 101, 101, .45); background: linear-gradient(180deg, #2b1a1c 0%, var(--surface) 100%); }
|
||||
|
||||
.task-head { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
|
||||
.task-title { flex: 1; min-width: 0; overflow: hidden; font-size: 11.5px; font-weight: 650; text-overflow: ellipsis; white-space: nowrap; }
|
||||
.task-elapsed { flex: 0 0 auto; color: var(--text-muted); font: 10px var(--font-mono); }
|
||||
|
||||
.task-spinner {
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
flex: 0 0 auto;
|
||||
border: 2px solid rgba(155, 108, 255, .25);
|
||||
border-top-color: var(--violet);
|
||||
border-radius: 50%;
|
||||
animation: spin .8s linear infinite;
|
||||
}
|
||||
.task-dock[data-result] .task-spinner { animation: none; border: none; }
|
||||
.task-dock[data-result="ok"] .task-spinner::before { content: "✓"; color: var(--green); font-size: 12px; font-weight: 700; }
|
||||
.task-dock[data-result="err"] .task-spinner::before { content: "!"; color: var(--red); font-size: 12px; font-weight: 700; }
|
||||
@keyframes spin { to { transform: rotate(360deg); } }
|
||||
|
||||
.progress-track {
|
||||
position: relative;
|
||||
height: 6px;
|
||||
overflow: hidden;
|
||||
border-radius: 3px;
|
||||
background: var(--surface-deep);
|
||||
}
|
||||
.progress-fill {
|
||||
height: 100%;
|
||||
border-radius: 3px;
|
||||
background: linear-gradient(90deg, var(--violet) 0%, var(--violet-hover) 100%);
|
||||
transition: width .3s ease-out;
|
||||
}
|
||||
.progress-track[data-mode="indeterminate"] .progress-fill {
|
||||
width: 38% !important;
|
||||
animation: slide 1.3s ease-in-out infinite;
|
||||
}
|
||||
@keyframes slide { 0% { transform: translateX(-105%); } 100% { transform: translateX(300%); } }
|
||||
.task-dock[data-result="ok"] .progress-fill { background: var(--green); }
|
||||
.task-dock[data-result="err"] .progress-fill { background: var(--red); }
|
||||
|
||||
.task-foot { display: flex; align-items: baseline; gap: 8px; margin-top: 7px; }
|
||||
.task-stage { flex: 1; min-width: 0; overflow: hidden; color: var(--text-secondary); font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
|
||||
.task-pct { flex: 0 0 auto; color: var(--text); font: 600 10px var(--font-mono); }
|
||||
|
||||
/* -------------------------------- Toast -------------------------------- */
|
||||
.toast {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
margin: 0 0 12px;
|
||||
padding: 9px 11px;
|
||||
border: 1px solid var(--border);
|
||||
border-radius: var(--radius);
|
||||
background: var(--surface);
|
||||
font-size: 10.5px;
|
||||
}
|
||||
.toast[hidden] { display: none; }
|
||||
.toast[data-kind="ok"] { border-color: rgba(112, 217, 135, .4); background: var(--green-soft); color: var(--green); }
|
||||
.toast[data-kind="err"] { border-color: rgba(255, 101, 101, .4); background: var(--red-soft); color: #ff9b9b; }
|
||||
.toast-icon { flex: 0 0 auto; font-weight: 700; }
|
||||
.toast-text { flex: 1; min-width: 0; }
|
||||
.toast-close { flex: 0 0 auto; border: 0; background: none; color: inherit; cursor: pointer; opacity: .6; font-size: 10px; }
|
||||
.toast-close:hover { opacity: 1; }
|
||||
|
||||
/* -------------------------------- Passos -------------------------------- */
|
||||
.step {
|
||||
margin: 0 0 10px;
|
||||
border: 1px solid var(--border);
|
||||
border-radius: var(--radius);
|
||||
background: var(--surface);
|
||||
transition: border-color .2s, opacity .2s;
|
||||
}
|
||||
.step[data-state="locked"] { opacity: .5; background: transparent; }
|
||||
.step[data-state="locked"] .step-body { display: none; }
|
||||
.step[data-state="ready"] { border-color: var(--border-strong); }
|
||||
.step[data-state="running"] { border-color: rgba(155, 108, 255, .5); }
|
||||
.step[data-state="done"] { border-color: rgba(112, 217, 135, .3); }
|
||||
.step[data-state="error"] { border-color: rgba(255, 101, 101, .45); }
|
||||
|
||||
.step-head { display: flex; align-items: flex-start; gap: 10px; padding: 12px; }
|
||||
.step[data-state="locked"] .step-head { padding: 10px 12px; }
|
||||
|
||||
.step-number {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 21px;
|
||||
height: 21px;
|
||||
flex: 0 0 auto;
|
||||
margin-top: 1px;
|
||||
border: 1px solid var(--border-strong);
|
||||
border-radius: 50%;
|
||||
color: var(--text-muted);
|
||||
font-size: 10px;
|
||||
font-weight: 700;
|
||||
}
|
||||
.step[data-state="ready"] .step-number,
|
||||
.step[data-state="running"] .step-number { border-color: var(--violet); background: var(--violet-soft); color: var(--violet-hover); }
|
||||
.step[data-state="done"] .step-number { border-color: transparent; background: var(--green); color: #10240f; font-size: 0; }
|
||||
.step[data-state="done"] .step-number::before { content: "✓"; font-size: 11px; font-weight: 800; }
|
||||
.step[data-state="error"] .step-number { border-color: var(--red); color: var(--red); }
|
||||
|
||||
.step-title { flex: 1; min-width: 0; }
|
||||
.step-title h2 { font-size: 11.5px; font-weight: 650; }
|
||||
.step-title p { margin: 3px 0 0; color: var(--text-muted); font-size: 9.5px; }
|
||||
.step[data-state="locked"] .step-title p { display: none; }
|
||||
|
||||
.badge-optional {
|
||||
margin-left: 5px;
|
||||
padding: 1px 5px;
|
||||
border-radius: 4px;
|
||||
background: rgba(127, 127, 127, .16);
|
||||
color: var(--text-muted);
|
||||
font-size: 8px;
|
||||
font-weight: 600;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: .06em;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.step-chip {
|
||||
flex: 0 0 auto;
|
||||
padding: 3px 8px;
|
||||
border-radius: 20px;
|
||||
background: rgba(127, 127, 127, .14);
|
||||
color: var(--text-muted);
|
||||
font-size: 8.8px;
|
||||
font-weight: 650;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.step[data-state="ready"] .step-chip { background: var(--violet-soft); color: var(--violet-hover); }
|
||||
.step[data-state="running"] .step-chip { background: var(--violet-soft); color: var(--violet-hover); }
|
||||
.step[data-state="done"] .step-chip { background: var(--green-soft); color: var(--green); }
|
||||
.step[data-state="error"] .step-chip { background: var(--red-soft); color: #ff9b9b; }
|
||||
|
||||
.step-body { padding: 0 12px 13px; }
|
||||
.step-body > * + * { margin-top: 10px; }
|
||||
.step-body .button { width: 100%; }
|
||||
/* Passo concluído: o botão deixa de puxar o olho para o passo seguinte. */
|
||||
.step[data-state="done"] .button-primary:not(:disabled) { background: transparent; border-color: var(--border-strong); color: var(--text-secondary); }
|
||||
.step[data-state="done"] .button-primary:not(:disabled):hover { background: var(--surface-raised); color: var(--text); }
|
||||
|
||||
/* --------------------------- Campos e cartões --------------------------- */
|
||||
.card {
|
||||
margin: 0 0 12px;
|
||||
padding: 13px;
|
||||
border: 1px solid var(--border);
|
||||
border-radius: var(--radius);
|
||||
background: var(--surface);
|
||||
}
|
||||
.card > * + * { margin-top: 10px; }
|
||||
.card-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
|
||||
.card-head h2 { font-size: 11.5px; font-weight: 650; }
|
||||
.card-kicker { margin-left: 6px; color: var(--text-muted); font-size: 8.2px; font-weight: 600; letter-spacing: .07em; text-transform: uppercase; }
|
||||
|
||||
.section-label { display: block; margin-bottom: 4px; color: var(--text-muted); font-size: 8.4px; font-weight: 650; letter-spacing: .09em; text-transform: uppercase; }
|
||||
.field-label { display: block; margin-bottom: 5px; color: var(--text-secondary); font-size: 9.5px; font-weight: 600; }
|
||||
.field-help { margin: 6px 0 0; color: var(--text-muted); font-size: 9.5px; line-height: 1.5; }
|
||||
.field-help:empty { display: none; }
|
||||
.field-help strong { color: var(--text-secondary); font-weight: 600; }
|
||||
.field-static { margin: 0; padding: 8px 0; color: var(--text-secondary); font-size: 10.5px; }
|
||||
.field-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .8fr); gap: 10px; }
|
||||
|
||||
.select-field, .path-field input, textarea, .file-field input {
|
||||
width: 100%;
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 6px;
|
||||
outline: none;
|
||||
background: var(--surface-deep);
|
||||
color: var(--text);
|
||||
transition: border-color .15s, box-shadow .15s;
|
||||
}
|
||||
.select-field { height: 32px; padding: 0 8px; font-size: 10.5px; }
|
||||
.path-field input, .file-field input { height: 34px; padding: 0 10px; font: 10px var(--font-mono); color: var(--text-secondary); user-select: text; }
|
||||
.path-field > svg + input { padding-left: 32px; }
|
||||
textarea { padding: 8px 10px; font: 10px var(--font-mono); color: var(--text-secondary); resize: vertical; user-select: text; }
|
||||
.select-field:hover, .path-field input:hover, textarea:hover, .file-field input:hover { border-color: var(--border-strong); }
|
||||
.select-field:focus, .path-field input:focus, textarea:focus, .file-field input:focus { border-color: var(--violet); color: var(--text); box-shadow: 0 0 0 2px var(--violet-soft); }
|
||||
|
||||
.path-field { position: relative; display: flex; align-items: center; }
|
||||
.path-field > svg { position: absolute; left: 10px; width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.5; color: var(--text-muted); pointer-events: none; }
|
||||
.path-field-toggle { position: absolute; right: 6px; padding: 4px; border: none; background: none; color: var(--text-muted); cursor: pointer; font-size: 12px; line-height: 1; }
|
||||
.path-field-toggle:hover { color: var(--text); }
|
||||
#hfToken { padding-right: 32px; }
|
||||
|
||||
.file-field { display: flex; gap: 6px; }
|
||||
.file-field input { flex: 1; min-width: 0; }
|
||||
.file-field .button { width: auto; flex: 0 0 auto; padding: 0 12px; }
|
||||
|
||||
.checkbox-field {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
padding: 8px 10px;
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 6px;
|
||||
background: var(--surface-deep);
|
||||
color: var(--text-secondary);
|
||||
cursor: pointer;
|
||||
font-size: 10px;
|
||||
}
|
||||
.checkbox-field:hover { border-color: var(--border-strong); }
|
||||
.checkbox-field input { margin: 0; flex: 0 0 auto; accent-color: var(--violet); }
|
||||
|
||||
.inline-form { padding-top: 10px; border-top: 1px solid var(--border); }
|
||||
.inline-form > * + * { margin-top: 8px; }
|
||||
.button-row { display: flex; gap: 8px; }
|
||||
.button-row .button { flex: 1; }
|
||||
|
||||
/* ---------------------------- Chave/valor, stats ---------------------------- */
|
||||
.kv { display: grid; gap: 1px; margin: 0; padding: 0; overflow: hidden; border: 1px solid var(--border); border-radius: 6px; background: var(--border); }
|
||||
.kv[hidden] { display: none; }
|
||||
.kv > div { display: flex; align-items: baseline; gap: 10px; padding: 7px 10px; background: var(--surface-deep); }
|
||||
.kv dt { flex: 0 0 62px; color: var(--text-muted); font-size: 9px; }
|
||||
.kv dd { flex: 1; min-width: 0; overflow: hidden; margin: 0; color: var(--text); font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
|
||||
.kv .kv-path { color: var(--text-muted); font: 9px var(--font-mono); }
|
||||
|
||||
.stat-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
|
||||
.stat-row[hidden] { display: none; }
|
||||
.stat { padding: 9px 6px; border: 1px solid var(--border); border-radius: 6px; background: var(--surface-deep); text-align: center; }
|
||||
.stat strong { display: block; overflow: hidden; font: 650 14px/1.1 var(--font-mono); text-overflow: ellipsis; }
|
||||
.stat span { display: block; margin-top: 4px; color: var(--text-muted); font-size: 8.5px; }
|
||||
|
||||
.mini-action { display: flex; align-items: center; gap: 10px; padding: 9px 10px; border: 1px solid var(--border); border-radius: 6px; background: var(--surface-deep); }
|
||||
.mini-action > div { flex: 1; min-width: 0; }
|
||||
.mini-action strong { display: block; font-size: 10.5px; font-weight: 600; }
|
||||
.mini-action span { display: block; margin-top: 3px; color: var(--text-muted); font-size: 9.2px; line-height: 1.4; }
|
||||
.mini-action .button { width: auto; flex: 0 0 auto; padding: 0 12px; height: 28px; }
|
||||
|
||||
/* ------------------------------- Callouts ------------------------------- */
|
||||
.callout { padding: 10px 11px; border: 1px solid var(--border); border-left-width: 3px; border-radius: 6px; background: var(--surface-deep); }
|
||||
.callout[hidden] { display: none; }
|
||||
.callout > * + * { margin-top: 8px; }
|
||||
.callout strong { display: block; font-size: 10.5px; font-weight: 650; }
|
||||
.callout p { margin: 4px 0 0; color: var(--text-muted); font-size: 9.5px; line-height: 1.5; }
|
||||
.callout .button { width: 100%; }
|
||||
.callout-info { border-left-color: var(--violet); }
|
||||
.callout-info strong { color: var(--violet-hover); }
|
||||
.callout-warn { border-left-color: var(--amber); background: var(--amber-soft); }
|
||||
.callout-warn strong { color: var(--amber); }
|
||||
|
||||
/* -------------------------------- Botões -------------------------------- */
|
||||
.button {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 7px;
|
||||
min-width: 0;
|
||||
height: 34px;
|
||||
padding: 0 12px;
|
||||
border: 1px solid var(--border-strong);
|
||||
border-radius: 6px;
|
||||
background: var(--surface-raised);
|
||||
color: var(--text);
|
||||
cursor: pointer;
|
||||
font-size: 10.5px;
|
||||
font-weight: 600;
|
||||
transition: background .15s, border-color .15s, color .15s, opacity .15s;
|
||||
}
|
||||
.button:hover { border-color: #5c5c65; background: #2a2a30; }
|
||||
.button svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.5; }
|
||||
.button svg .fill-icon { fill: currentColor; stroke: none; }
|
||||
.button-primary { border-color: transparent; background: var(--violet); color: #150f22; }
|
||||
.button-primary:hover { background: var(--violet-hover); }
|
||||
.button-ghost { border-color: var(--border); background: transparent; color: var(--text-secondary); }
|
||||
.button-ghost:hover { border-color: var(--border-strong); background: var(--surface-raised); color: var(--text); }
|
||||
.button-danger { border-color: #6b3c3f; background: transparent; color: #ff8b8b; }
|
||||
.button-danger:hover { border-color: var(--red); background: var(--red-soft); }
|
||||
.button:disabled, .button[disabled] { border-color: var(--border); background: var(--surface); color: #5f5e65; cursor: default; opacity: .8; }
|
||||
.button:disabled:hover { border-color: var(--border); background: var(--surface); }
|
||||
.button.is-busy { position: relative; color: transparent !important; }
|
||||
.button.is-busy::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
width: 13px; height: 13px;
|
||||
border: 2px solid rgba(255, 255, 255, .25);
|
||||
border-top-color: currentColor;
|
||||
border-radius: 50%;
|
||||
animation: spin .8s linear infinite;
|
||||
color: var(--text);
|
||||
}
|
||||
.button-primary.is-busy::after { color: #150f22; border-color: rgba(21, 15, 34, .3); border-top-color: #150f22; }
|
||||
|
||||
.link-button { padding: 3px 0 3px 8px; border: 0; background: none; color: var(--violet); cursor: pointer; font-size: 9.8px; font-weight: 600; }
|
||||
.link-button:hover { color: var(--violet-hover); }
|
||||
|
||||
.action-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(80px, .6fr); gap: 8px; margin-bottom: 12px; }
|
||||
|
||||
/* ------------------------- Conexão: status/checks ------------------------- */
|
||||
.status-panel {
|
||||
display: grid;
|
||||
grid-template-columns: 42px minmax(0, 1fr) auto;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
margin-bottom: 12px;
|
||||
padding: 13px;
|
||||
border: 1px solid var(--border);
|
||||
border-radius: var(--radius);
|
||||
background: var(--surface);
|
||||
}
|
||||
.status-indicator { display: flex; align-items: center; }
|
||||
.status-ring { display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; border: 1px solid var(--border-strong); border-radius: 50%; background: var(--surface-deep); }
|
||||
.status-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--text-muted); transition: background .2s, box-shadow .2s; }
|
||||
.status-dot.connected { background: var(--green); box-shadow: 0 0 0 5px var(--green-soft); animation: breathe 2.4s ease-in-out infinite; }
|
||||
.status-dot.error { background: var(--red); box-shadow: 0 0 0 5px var(--red-soft); }
|
||||
.status-dot.waiting { background: var(--amber); box-shadow: 0 0 0 5px var(--amber-soft); }
|
||||
@keyframes breathe { 0%, 100% { box-shadow: 0 0 0 4px var(--green-soft); } 50% { box-shadow: 0 0 0 7px rgba(112, 217, 135, .04); } }
|
||||
|
||||
.status-copy { min-width: 0; }
|
||||
.status-copy strong { display: block; overflow: hidden; font-size: 12px; font-weight: 650; line-height: 1.3; text-overflow: ellipsis; white-space: nowrap; }
|
||||
.status-copy #statusDetail { display: block; overflow: hidden; margin-top: 3px; color: var(--text-secondary); font-size: 9.5px; text-overflow: ellipsis; white-space: nowrap; }
|
||||
.command-stat { padding-left: 12px; text-align: right; }
|
||||
.command-stat strong { display: block; font: 650 19px/1 var(--font-mono); }
|
||||
.command-stat span { display: block; margin-top: 5px; color: var(--text-muted); font-size: 8.4px; }
|
||||
|
||||
.connection-checks { display: grid; gap: 6px; padding: 0; margin: 0; list-style: none; }
|
||||
.connection-checks li { display: flex; align-items: center; gap: 9px; padding: 8px 10px; border: 1px solid var(--border); border-radius: 6px; background: var(--surface-deep); }
|
||||
.connection-checks li > span:last-child { min-width: 0; }
|
||||
.connection-checks strong, .connection-checks small { display: block; }
|
||||
.connection-checks strong { color: var(--text-secondary); font-size: 10px; font-weight: 600; }
|
||||
.connection-checks small { margin-top: 2px; color: var(--text-muted); font-size: 9.2px; }
|
||||
.check-dot { width: 7px; height: 7px; flex: 0 0 auto; border-radius: 50%; background: var(--text-muted); }
|
||||
.connection-checks li[data-state="ready"] .check-dot { background: var(--green); box-shadow: 0 0 0 3px var(--green-soft); }
|
||||
.connection-checks li[data-state="needs-attention"] .check-dot { background: var(--amber); }
|
||||
|
||||
.update-body { display: flex; align-items: center; gap: 10px; }
|
||||
.update-copy { flex: 1; min-width: 0; }
|
||||
.update-copy strong { display: block; font-size: 10.5px; font-weight: 600; }
|
||||
.update-copy > span { display: block; margin-top: 3px; color: var(--text-muted); font-size: 9.2px; line-height: 1.45; }
|
||||
.update-card .button { flex: 0 0 auto; height: 30px; white-space: nowrap; }
|
||||
|
||||
.hf-token-status { display: flex; align-items: center; gap: 6px; color: var(--text-muted); font-size: 9.2px; white-space: nowrap; }
|
||||
.hf-token-status[data-state="valid"] .check-dot { background: var(--green); box-shadow: 0 0 0 3px var(--green-soft); }
|
||||
.hf-token-status[data-state="invalid"] .check-dot { background: var(--red); }
|
||||
.hf-token-status[data-state="checking"] .check-dot { background: var(--amber); }
|
||||
|
||||
/* -------------------------------- Modelos -------------------------------- */
|
||||
.model-list { display: flex; flex-direction: column; gap: 8px; }
|
||||
.model-row { padding: 10px 11px; border: 1px solid var(--border); border-radius: 6px; background: var(--surface-deep); }
|
||||
.model-row-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
|
||||
.model-main { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
|
||||
.model-name { font-size: 11px; font-weight: 650; }
|
||||
.model-meta { display: flex; flex-wrap: wrap; gap: 5px; min-width: 0; }
|
||||
.model-badge { max-width: 100%; overflow: hidden; padding: 2px 6px; border-radius: 4px; background: rgba(127, 127, 127, .14); color: var(--text-muted); font-size: 8.4px; text-overflow: ellipsis; white-space: nowrap; }
|
||||
.model-badge-star { background: rgba(233, 184, 93, .16); color: var(--amber); }
|
||||
.model-badge-ready { background: var(--green-soft); color: var(--green); }
|
||||
.model-actions { display: flex; align-items: center; gap: 6px; flex: 0 0 auto; }
|
||||
.model-actions .button { height: 28px; padding: 0 11px; font-size: 10px; }
|
||||
.model-btn-active { opacity: .75; cursor: default; }
|
||||
.model-progress { margin-top: 9px; }
|
||||
.model-progress[hidden] { display: none; }
|
||||
.model-progress .progress-track { height: 5px; }
|
||||
.model-progress-label { display: block; margin-top: 5px; color: var(--text-muted); font-size: 9px; }
|
||||
|
||||
.personality-row { display: flex; align-items: center; gap: 10px; padding: 10px 11px; border: 1px solid var(--border); border-radius: 6px; background: var(--surface-deep); }
|
||||
.personality-row .model-main { flex: 1; min-width: 0; }
|
||||
.personality-row .model-actions { flex-wrap: wrap; justify-content: flex-end; }
|
||||
.personality-row[data-active="true"] { border-color: rgba(155, 108, 255, .5); background: var(--violet-soft); }
|
||||
|
||||
/* ------------------------- Avançado / log recolhido ------------------------- */
|
||||
.advanced, .log-details {
|
||||
margin: 0 0 12px;
|
||||
border: 1px solid var(--border);
|
||||
border-radius: var(--radius);
|
||||
background: var(--surface);
|
||||
}
|
||||
.advanced > summary, .log-details > summary {
|
||||
padding: 10px 12px;
|
||||
color: var(--text-secondary);
|
||||
cursor: pointer;
|
||||
font-size: 10px;
|
||||
font-weight: 600;
|
||||
list-style: none;
|
||||
}
|
||||
.advanced > summary::-webkit-details-marker, .log-details > summary::-webkit-details-marker { display: none; }
|
||||
.advanced > summary::before, .log-details > summary::before {
|
||||
content: "";
|
||||
display: inline-block;
|
||||
width: 0;
|
||||
height: 0;
|
||||
margin-right: 8px;
|
||||
border-top: 4px solid transparent;
|
||||
border-bottom: 4px solid transparent;
|
||||
border-left: 5px solid var(--text-muted);
|
||||
vertical-align: 1px;
|
||||
transition: transform .15s;
|
||||
}
|
||||
.advanced[open] > summary::before, .log-details[open] > summary::before { transform: rotate(90deg); }
|
||||
.advanced > summary:hover, .log-details > summary:hover { color: var(--text); }
|
||||
.log-hint { color: var(--text-muted); font-weight: 400; }
|
||||
.advanced-body { padding: 0 12px 12px; }
|
||||
.advanced-body > * + * { margin-top: 9px; }
|
||||
|
||||
#log, #silenceLog, #modelsLog {
|
||||
height: 180px;
|
||||
margin: 0 12px 12px;
|
||||
overflow-y: auto;
|
||||
padding: 9px 10px;
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 6px;
|
||||
background: var(--surface-deep);
|
||||
font: 9.6px/1.6 var(--font-mono);
|
||||
user-select: text;
|
||||
}
|
||||
#log:empty::before, #silenceLog:empty::before, #modelsLog:empty::before { content: "Nada por aqui ainda."; color: var(--text-muted); }
|
||||
#log::-webkit-scrollbar, #silenceLog::-webkit-scrollbar, #modelsLog::-webkit-scrollbar { width: 5px; }
|
||||
#log::-webkit-scrollbar-thumb, #silenceLog::-webkit-scrollbar-thumb, #modelsLog::-webkit-scrollbar-thumb { border-radius: 3px; background: var(--border-strong); }
|
||||
.log-entry { color: var(--text-muted); animation: log-in .18s ease-out; }
|
||||
.log-entry.cmd { color: #b89cff; }
|
||||
.log-entry.ok { color: var(--green); }
|
||||
.log-entry.err { color: #ff8585; }
|
||||
@keyframes log-in { from { opacity: 0; transform: translateY(2px); } to { opacity: 1; transform: none; } }
|
||||
|
||||
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
|
||||
button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, summary:focus-visible, #log:focus-visible, #silenceLog:focus-visible, #modelsLog:focus-visible { outline: 2px solid var(--violet-hover); outline-offset: 2px; }
|
||||
|
||||
@media (max-width: 340px) {
|
||||
.panel-shell { padding-right: 10px; padding-left: 10px; }
|
||||
.panel-header, .tab-bar { margin-right: -10px; margin-left: -10px; }
|
||||
.tab-bar { padding: 0 10px; }
|
||||
.tab-button { font-size: 0; gap: 0; padding: 10px 2px; }
|
||||
.tab-icon { font-size: 14px; }
|
||||
.field-grid { grid-template-columns: minmax(0, 1fr); }
|
||||
.status-panel { grid-template-columns: 38px minmax(0, 1fr); }
|
||||
.command-stat { grid-column: 2; padding: 8px 0 0; text-align: left; }
|
||||
.command-stat strong, .command-stat span { display: inline; }
|
||||
.mini-action { flex-wrap: wrap; }
|
||||
.mini-action .button { width: 100%; }
|
||||
}
|
||||
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
*, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
|
||||
}
|
||||
|
||||
@media (forced-colors: active) {
|
||||
.status-dot, .check-dot, .header-status-dot { forced-color-adjust: none; border: 1px solid CanvasText; }
|
||||
.button, .path-field input, .select-field, #log, #silenceLog, #modelsLog, .status-panel, .step, .card { border-color: CanvasText; }
|
||||
.progress-fill { background: Highlight; }
|
||||
}
|
||||
Executable
+407
@@ -0,0 +1,407 @@
|
||||
:root {
|
||||
--bg: #151516;
|
||||
--surface: #1c1c1f;
|
||||
--surface-raised: #222226;
|
||||
--surface-deep: #111113;
|
||||
--border: #35353a;
|
||||
--border-strong: #494950;
|
||||
--text: #f2f1f4;
|
||||
--text-secondary: #adabb3;
|
||||
--text-muted: #74727b;
|
||||
--violet: #9b6cff;
|
||||
--violet-hover: #ad87ff;
|
||||
--violet-soft: rgba(155, 108, 255, 0.12);
|
||||
--green: #70d987;
|
||||
--green-soft: rgba(112, 217, 135, 0.1);
|
||||
--red: #ff6565;
|
||||
--amber: #e9b85d;
|
||||
--radius: 7px;
|
||||
--font-ui: -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
|
||||
--font-mono: "Cascadia Mono", "SFMono-Regular", Consolas, monospace;
|
||||
}
|
||||
|
||||
* { box-sizing: border-box; }
|
||||
|
||||
html, body { width: 100%; min-width: 280px; height: 100%; margin: 0; }
|
||||
|
||||
.tab-bar {
|
||||
display: flex;
|
||||
gap: 4px;
|
||||
margin: 0 0 12px;
|
||||
border-bottom: 1px solid var(--border);
|
||||
}
|
||||
|
||||
.tab-button {
|
||||
flex: 1;
|
||||
padding: 8px 10px;
|
||||
background: transparent;
|
||||
border: none;
|
||||
border-bottom: 2px solid transparent;
|
||||
color: var(--text-secondary);
|
||||
cursor: pointer;
|
||||
font-size: 10.8px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.tab-button:hover { color: var(--text); }
|
||||
|
||||
.tab-button.active {
|
||||
color: var(--text);
|
||||
border-bottom-color: var(--violet);
|
||||
}
|
||||
|
||||
.tab-panel[hidden] { display: none; }
|
||||
|
||||
.path-field-select {
|
||||
width: 100%;
|
||||
padding: 7px 10px;
|
||||
margin-bottom: 10px;
|
||||
background: var(--surface-deep);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: var(--radius);
|
||||
color: var(--text);
|
||||
}
|
||||
|
||||
body {
|
||||
overflow: hidden;
|
||||
background: var(--bg);
|
||||
color: var(--text);
|
||||
font-family: var(--font-ui);
|
||||
font-size: 10.8px;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
button, input { font: inherit; }
|
||||
button { -webkit-appearance: none; }
|
||||
|
||||
.panel-shell {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100%;
|
||||
min-height: 420px;
|
||||
padding: 0 14px 14px;
|
||||
overflow-y: auto;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
.panel-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
min-height: 66px;
|
||||
margin: 0 -14px 14px;
|
||||
padding: 12px 14px;
|
||||
border-bottom: 1px solid var(--border);
|
||||
background: #19191b;
|
||||
}
|
||||
|
||||
.brand-mark {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 34px;
|
||||
height: 34px;
|
||||
margin-right: 10px;
|
||||
border: 1px solid #aa83ff;
|
||||
border-radius: 8px;
|
||||
background: var(--violet-soft);
|
||||
color: #cbb8ff;
|
||||
font-size: 13.5px;
|
||||
font-weight: 750;
|
||||
letter-spacing: -0.04em;
|
||||
}
|
||||
|
||||
.brand-copy { min-width: 0; }
|
||||
.brand-copy h1 { margin: 0; font-size: 12.6px; line-height: 1.25; font-weight: 650; letter-spacing: .01em; }
|
||||
.brand-copy p { margin: 3px 0 0; color: var(--text-muted); font-size: 9px; }
|
||||
|
||||
.auto-start {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
margin-left: auto;
|
||||
color: var(--text-muted);
|
||||
font-size: 9px;
|
||||
}
|
||||
.auto-start > span { width: 5px; height: 5px; border-radius: 50%; background: var(--violet); }
|
||||
|
||||
.status-panel {
|
||||
display: grid;
|
||||
grid-template-columns: 44px minmax(0, 1fr) auto;
|
||||
align-items: center;
|
||||
min-height: 88px;
|
||||
padding: 14px;
|
||||
border: 1px solid var(--border);
|
||||
border-radius: var(--radius);
|
||||
background: var(--surface);
|
||||
}
|
||||
|
||||
.status-indicator { display: flex; align-items: center; }
|
||||
.status-ring {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 34px;
|
||||
height: 34px;
|
||||
border: 1px solid var(--border-strong);
|
||||
border-radius: 50%;
|
||||
background: var(--surface-deep);
|
||||
}
|
||||
.status-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--text-muted); transition: background .2s, box-shadow .2s; }
|
||||
.status-dot.connected { background: var(--green); box-shadow: 0 0 0 5px var(--green-soft); animation: breathe 2.4s ease-in-out infinite; }
|
||||
.status-dot.error { background: var(--red); box-shadow: 0 0 0 5px rgba(255, 101, 101, .1); }
|
||||
.status-dot.waiting { background: var(--amber); box-shadow: 0 0 0 5px rgba(233, 184, 93, .1); }
|
||||
|
||||
@keyframes breathe { 0%, 100% { box-shadow: 0 0 0 4px var(--green-soft); } 50% { box-shadow: 0 0 0 7px rgba(112, 217, 135, .04); } }
|
||||
|
||||
.section-label { display: block; margin-bottom: 4px; color: var(--text-muted); font-size: 8.1px; font-weight: 650; letter-spacing: .09em; text-transform: uppercase; }
|
||||
.status-copy { min-width: 0; }
|
||||
.status-copy strong { display: block; overflow: hidden; color: var(--text); font-size: 12.6px; font-weight: 650; line-height: 1.3; text-overflow: ellipsis; white-space: nowrap; }
|
||||
.status-copy strong::before { content: "■ "; color: var(--text-muted); }
|
||||
.status-copy strong[data-state="connected"]::before { content: "✓ "; color: var(--green); }
|
||||
.status-copy strong[data-state="waiting"]::before { content: "… "; color: var(--amber); }
|
||||
.status-copy strong[data-state="error"]::before { content: "! "; color: var(--red); }
|
||||
.status-copy #statusDetail { display: block; overflow: hidden; margin-top: 3px; color: var(--text-secondary); font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
|
||||
|
||||
.command-stat { padding-left: 14px; text-align: right; }
|
||||
.command-stat strong { display: block; font: 600 20px/1 var(--font-mono); }
|
||||
.command-stat span { display: block; margin-top: 5px; color: var(--text-muted); font-size: 8.1px; }
|
||||
|
||||
.config-section { padding: 19px 0 15px; border-bottom: 1px solid var(--border); }
|
||||
.section-heading { display: flex; align-items: flex-end; justify-content: space-between; margin-bottom: 9px; }
|
||||
.section-heading h2 { margin: 0; font-size: 10.8px; font-weight: 600; }
|
||||
|
||||
.save-link {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 5px;
|
||||
padding: 4px 0 4px 8px;
|
||||
border: 0;
|
||||
background: transparent;
|
||||
color: var(--violet);
|
||||
cursor: pointer;
|
||||
font-size: 9px;
|
||||
}
|
||||
.save-link svg, .path-field svg, .button svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.5; }
|
||||
.save-link:hover { color: var(--violet-hover); }
|
||||
|
||||
.path-field { position: relative; display: flex; align-items: center; }
|
||||
.path-field > svg { position: absolute; left: 10px; color: var(--text-muted); pointer-events: none; }
|
||||
.path-field input {
|
||||
width: 100%;
|
||||
height: 36px;
|
||||
padding: 0 10px 0 32px;
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 5px;
|
||||
outline: none;
|
||||
background: var(--surface-deep);
|
||||
color: var(--text-secondary);
|
||||
font: 10px var(--font-mono);
|
||||
user-select: text;
|
||||
transition: border-color .15s, background .15s;
|
||||
}
|
||||
.path-field input:hover { border-color: var(--border-strong); }
|
||||
.path-field input:focus { border-color: var(--violet); background: #141318; color: var(--text); box-shadow: 0 0 0 2px var(--violet-soft); }
|
||||
|
||||
textarea {
|
||||
width: 100%;
|
||||
margin-top: 8px;
|
||||
padding: 8px 10px;
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 5px;
|
||||
outline: none;
|
||||
background: var(--surface-deep);
|
||||
color: var(--text-secondary);
|
||||
font: 10px var(--font-mono);
|
||||
resize: vertical;
|
||||
transition: border-color .15s, background .15s;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
textarea:hover { border-color: var(--border-strong); }
|
||||
textarea:focus { border-color: var(--violet); background: #141318; color: var(--text); box-shadow: 0 0 0 2px var(--violet-soft); }
|
||||
.field-help { margin: 7px 0 0; color: var(--text-muted); font-size: 8.1px; line-height: 1.45; }
|
||||
|
||||
.action-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(84px, .65fr); gap: 8px; padding: 14px 0; }
|
||||
.button {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 7px;
|
||||
min-width: 0;
|
||||
height: 34px;
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 5px;
|
||||
background: var(--surface);
|
||||
color: var(--text-secondary);
|
||||
cursor: pointer;
|
||||
font-size: 9.9px;
|
||||
font-weight: 600;
|
||||
transition: background .15s, border-color .15s, color .15s;
|
||||
}
|
||||
.button:hover { border-color: var(--border-strong); background: var(--surface-deep); color: var(--text); }
|
||||
.button svg .fill-icon { fill: currentColor; stroke: none; }
|
||||
.button-primary { border-color: transparent; background: var(--violet); color: #110d19; }
|
||||
.button-primary:hover { background: var(--violet-hover); }
|
||||
.button-stop { border-color: #6b3c3f; background: transparent; color: #ff8b8b; }
|
||||
.button-stop:hover { border-color: var(--red); background: rgba(255, 101, 101, .08); }
|
||||
.button:disabled { border-color: var(--border); background: var(--surface); color: #5f5e65; cursor: default; }
|
||||
|
||||
.update-section {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
margin-bottom: 14px;
|
||||
padding: 11px 12px;
|
||||
border: 1px solid var(--border);
|
||||
border-radius: var(--radius);
|
||||
background: var(--surface);
|
||||
}
|
||||
|
||||
.connection-center {
|
||||
margin: 0 0 14px;
|
||||
padding: 12px;
|
||||
border: 1px solid var(--border);
|
||||
border-radius: var(--radius);
|
||||
background: var(--surface);
|
||||
}
|
||||
.connection-center .section-heading { margin-bottom: 8px; }
|
||||
.connection-center h2 { font-size: 10.8px; }
|
||||
.connection-intro { margin: 0 0 10px; color: var(--text-muted); font-size: 8.1px; line-height: 1.45; }
|
||||
.connection-intro strong { color: var(--text-secondary); font-weight: 600; }
|
||||
.connection-checks { display: grid; gap: 6px; padding: 0; margin: 0; list-style: none; }
|
||||
.connection-checks li { display: flex; align-items: center; gap: 8px; min-height: 34px; padding: 6px 8px; border: 1px solid var(--border); border-radius: 5px; background: var(--surface-deep); }
|
||||
.connection-checks li > span:last-child { min-width: 0; }
|
||||
.connection-checks strong, .connection-checks small { display: block; }
|
||||
.connection-checks strong { color: var(--text-secondary); font-size: 9px; font-weight: 600; }
|
||||
.connection-checks small { margin-top: 2px; color: var(--text-muted); font-size: 8.1px; }
|
||||
.check-dot { width: 7px; height: 7px; flex: 0 0 auto; border-radius: 50%; background: var(--text-muted); }
|
||||
.connection-checks li[data-state="ready"] .check-dot { background: var(--green); box-shadow: 0 0 0 3px var(--green-soft); }
|
||||
.connection-checks li[data-state="needs-attention"] .check-dot { background: var(--amber); }
|
||||
.update-copy { min-width: 0; flex: 1; }
|
||||
.update-copy strong, .update-copy > span:last-child { display: block; }
|
||||
.update-copy strong { font-size: 9.9px; font-weight: 600; }
|
||||
.update-copy > span:last-child { margin-top: 3px; color: var(--text-muted); font-size: 8.1px; line-height: 1.4; }
|
||||
.button-update {
|
||||
width: auto;
|
||||
min-width: 92px;
|
||||
height: 30px;
|
||||
padding: 0 10px;
|
||||
border-color: var(--border-strong);
|
||||
background: var(--surface-raised);
|
||||
color: var(--violet-hover);
|
||||
white-space: nowrap;
|
||||
}
|
||||
.button-update:hover { border-color: var(--violet); background: var(--violet-soft); }
|
||||
|
||||
.activity-section { display: flex; flex: 1; min-height: 120px; flex-direction: column; }
|
||||
.activity-heading { align-items: center; margin: 2px 0 8px; }
|
||||
.activity-state { display: flex; align-items: center; gap: 6px; color: var(--text-muted); font-size: 8.1px; }
|
||||
.activity-state > span { width: 5px; height: 5px; border-radius: 50%; background: var(--violet); }
|
||||
|
||||
#log {
|
||||
flex: 1;
|
||||
min-height: 100px;
|
||||
overflow-y: auto;
|
||||
padding: 10px 11px;
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 5px;
|
||||
background: var(--surface-deep);
|
||||
font: 10px/1.65 var(--font-mono);
|
||||
user-select: text;
|
||||
}
|
||||
#log:empty::before { content: "Waiting for activity..."; color: var(--text-muted); }
|
||||
#log::-webkit-scrollbar { width: 5px; }
|
||||
#log::-webkit-scrollbar-thumb { border-radius: 3px; background: var(--border-strong); }
|
||||
.log-entry { color: var(--text-muted); animation: log-in .18s ease-out; }
|
||||
.log-entry.cmd { color: #b89cff; }
|
||||
.log-entry.ok { color: var(--green); }
|
||||
.log-entry.err { color: #ff8585; }
|
||||
|
||||
@keyframes log-in { from { opacity: 0; transform: translateY(2px); } to { opacity: 1; transform: none; } }
|
||||
|
||||
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
|
||||
|
||||
button:focus-visible, input:focus-visible, #log:focus-visible { outline: 2px solid var(--violet-hover); outline-offset: 2px; }
|
||||
|
||||
@media (max-width: 330px) {
|
||||
.panel-shell { padding-right: 10px; padding-left: 10px; }
|
||||
.panel-header { margin-right: -10px; margin-left: -10px; padding-right: 10px; padding-left: 10px; }
|
||||
.auto-start { display: none; }
|
||||
.status-panel { grid-template-columns: 38px minmax(0, 1fr); padding: 12px; }
|
||||
.command-stat { grid-column: 2; padding: 8px 0 0; text-align: left; }
|
||||
.command-stat strong, .command-stat span { display: inline; }
|
||||
}
|
||||
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
*, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
|
||||
}
|
||||
|
||||
@media (forced-colors: active) {
|
||||
.status-dot, .auto-start > span, .activity-state > span { forced-color-adjust: none; border: 1px solid CanvasText; }
|
||||
.button, .path-field input, #log, .status-panel { border-color: CanvasText; }
|
||||
.status-copy strong::before { color: CanvasText !important; }
|
||||
}
|
||||
|
||||
/* ---- Settings tab: HF token ---- */
|
||||
#hfToken { padding-left: 10px; padding-right: 32px; }
|
||||
.path-field-toggle {
|
||||
position: absolute;
|
||||
right: 8px;
|
||||
background: none;
|
||||
border: none;
|
||||
color: var(--text-muted);
|
||||
cursor: pointer;
|
||||
font-size: 12px;
|
||||
line-height: 1;
|
||||
padding: 4px;
|
||||
}
|
||||
.path-field-toggle:hover { color: var(--text); }
|
||||
|
||||
.hf-token-status {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
margin-top: 8px;
|
||||
font-size: 8.1px;
|
||||
color: var(--text-muted);
|
||||
}
|
||||
.hf-token-status[data-state="valid"] .check-dot { background: var(--green); box-shadow: 0 0 0 3px var(--green-soft); }
|
||||
.hf-token-status[data-state="invalid"] .check-dot { background: var(--red); }
|
||||
.hf-token-status[data-state="checking"] .check-dot { background: var(--amber); }
|
||||
|
||||
.checkbox-field {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
margin-top: 10px;
|
||||
font-size: 9px;
|
||||
color: var(--text-muted);
|
||||
cursor: pointer;
|
||||
}
|
||||
.checkbox-field input { margin: 0; }
|
||||
|
||||
/* ---- Models tab ---- */
|
||||
.model-list { display: flex; flex-direction: column; gap: 8px; }
|
||||
.model-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 10px;
|
||||
padding: 10px 12px;
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 6px;
|
||||
}
|
||||
.model-main { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
|
||||
.model-name { font-size: 10.8px; font-weight: 600; }
|
||||
.model-meta { display: flex; flex-wrap: wrap; gap: 5px; }
|
||||
.model-badge {
|
||||
font-size: 7.6px;
|
||||
color: var(--text-muted);
|
||||
background: var(--bg-subtle, rgba(127, 127, 127, 0.12));
|
||||
border-radius: 4px;
|
||||
padding: 2px 6px;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.model-badge-star { color: #b8860b; background: rgba(184, 134, 11, 0.15); }
|
||||
.model-actions { display: flex; align-items: center; gap: 6px; flex: 0 0 auto; }
|
||||
.model-btn-active { opacity: 0.7; cursor: default; }
|
||||
Executable
+204
@@ -0,0 +1,204 @@
|
||||
/* MCP Bridge update helpers. Kept dependency-free for the older Chromium
|
||||
* runtime embedded in CEP. */
|
||||
(function (root, factory) {
|
||||
var api = factory();
|
||||
if (typeof module === "object" && module.exports) module.exports = api;
|
||||
root.MCPBridgeUpdater = api;
|
||||
})(this, function () {
|
||||
"use strict";
|
||||
|
||||
var CURRENT_VERSION = "1.14.9";
|
||||
var PACKAGE_NAME = "premiere-pro-mcp";
|
||||
var LATEST_PACKAGE_API = "https://registry.npmjs.org/" + PACKAGE_NAME;
|
||||
var LATEST_RELEASE_API =
|
||||
"https://api.github.com/repos/leancoderkavy/premiere-pro-mcp/releases/latest";
|
||||
var RELEASES_URL =
|
||||
"https://github.com/leancoderkavy/premiere-pro-mcp/releases/latest";
|
||||
|
||||
function normalizeVersion(value) {
|
||||
return String(value || "")
|
||||
.trim()
|
||||
.replace(/^v/i, "")
|
||||
.split("-")[0];
|
||||
}
|
||||
|
||||
function compareVersions(left, right) {
|
||||
var a = normalizeVersion(left).split(".");
|
||||
var b = normalizeVersion(right).split(".");
|
||||
var length = Math.max(a.length, b.length);
|
||||
for (var i = 0; i < length; i++) {
|
||||
var aPart = parseInt(a[i] || "0", 10);
|
||||
var bPart = parseInt(b[i] || "0", 10);
|
||||
if (aPart > bPart) return 1;
|
||||
if (aPart < bPart) return -1;
|
||||
}
|
||||
return 0;
|
||||
}
|
||||
|
||||
function latestPackageVersion(record) {
|
||||
if (!record || typeof record !== "object") {
|
||||
throw new Error("The npm registry returned an invalid package record.");
|
||||
}
|
||||
var tags = record["dist-tags"];
|
||||
var latest = tags && tags.latest;
|
||||
var version = normalizeVersion(latest);
|
||||
if (!version || !/^\d+\.\d+\.\d+$/.test(version)) {
|
||||
throw new Error("The npm registry did not provide a valid latest version.");
|
||||
}
|
||||
return version;
|
||||
}
|
||||
|
||||
function updateStateFromPackageRecord(currentVersion, record) {
|
||||
var current = normalizeVersion(currentVersion);
|
||||
if (!current || !/^\d+\.\d+\.\d+$/.test(current)) {
|
||||
throw new Error("The installed connector version is invalid.");
|
||||
}
|
||||
var latest = latestPackageVersion(record);
|
||||
return {
|
||||
currentVersion: current,
|
||||
latestVersion: latest,
|
||||
updateAvailable: compareVersions(latest, current) > 0,
|
||||
};
|
||||
}
|
||||
|
||||
function chooseDownloadUrl(release) {
|
||||
var assets = release && release.assets ? release.assets : [];
|
||||
var preferredNames = [
|
||||
/^MCPBridgeCEP(?:-[\w.-]+)?\.zxp$/i,
|
||||
/premiere.*(?:connector|bridge).*\.zxp$/i,
|
||||
/\.zxp$/i,
|
||||
/premiere.*(?:connector|bridge).*\.(?:zip|dmg|exe)$/i,
|
||||
];
|
||||
for (var p = 0; p < preferredNames.length; p++) {
|
||||
for (var i = 0; i < assets.length; i++) {
|
||||
if (
|
||||
preferredNames[p].test(assets[i].name || "") &&
|
||||
isTrustedDownloadUrl(assets[i].browser_download_url)
|
||||
) {
|
||||
return assets[i].browser_download_url;
|
||||
}
|
||||
}
|
||||
}
|
||||
return isTrustedDownloadUrl(release && release.html_url)
|
||||
? release.html_url
|
||||
: RELEASES_URL;
|
||||
}
|
||||
|
||||
function isTrustedDownloadUrl(value) {
|
||||
return /^https:\/\/(?:github\.com|api\.github\.com|objects\.githubusercontent\.com)\//i.test(
|
||||
String(value || "")
|
||||
);
|
||||
}
|
||||
|
||||
function powerShellLiteral(value) {
|
||||
return "'" + String(value).replace(/'/g, "''") + "'";
|
||||
}
|
||||
|
||||
function randomSuffix(runtime) {
|
||||
if (runtime.crypto && typeof runtime.crypto.randomBytes === "function") {
|
||||
return runtime.crypto.randomBytes(12).toString("hex");
|
||||
}
|
||||
return String(new Date().getTime()) + "-" + String(Math.random()).slice(2);
|
||||
}
|
||||
|
||||
/**
|
||||
* The CEP panel cannot replace its own files safely while Premiere is running.
|
||||
* This small, detached helper waits for Premiere to close, then invokes the
|
||||
* already-installed per-user npm command. It does not receive project data,
|
||||
* MCP configuration, or credentials, and it never force-quits Premiere.
|
||||
*/
|
||||
function buildWindowsGlobalUpdateScript(cliPath, statusPath, scriptPath) {
|
||||
return [
|
||||
"$ErrorActionPreference = 'Stop'",
|
||||
"$cliPath = " + powerShellLiteral(cliPath),
|
||||
"$statusPath = " + powerShellLiteral(statusPath),
|
||||
"$scriptPath = " + powerShellLiteral(scriptPath),
|
||||
"function Write-UpdateStatus([string]$state) {",
|
||||
" $payload = @{ schemaVersion = 'premiere-pro-mcp.desktop-update.v1'; state = $state; updatedAt = [DateTime]::UtcNow.ToString('o') } | ConvertTo-Json -Compress",
|
||||
" [System.IO.File]::WriteAllText($statusPath, $payload, [System.Text.UTF8Encoding]::new($false))",
|
||||
"}",
|
||||
"try {",
|
||||
" Write-UpdateStatus 'waiting_for_premiere'",
|
||||
" $premiereProcesses = @('Adobe Premiere Pro', 'Adobe Premiere Pro Beta')",
|
||||
" while (Get-Process -Name $premiereProcesses -ErrorAction SilentlyContinue) { Start-Sleep -Seconds 2 }",
|
||||
" Write-UpdateStatus 'updating'",
|
||||
" $npmCommand = (Get-Command npm.cmd -ErrorAction Stop).Source",
|
||||
" & $npmCommand install --global 'premiere-pro-mcp@latest'",
|
||||
" if ($LASTEXITCODE -ne 0) { throw 'npm could not install the latest Premiere MCP package.' }",
|
||||
" & $cliPath --install-cep",
|
||||
" if ($LASTEXITCODE -ne 0) { throw 'The refreshed Premiere MCP package could not install its connector.' }",
|
||||
" Write-UpdateStatus 'complete'",
|
||||
"} catch {",
|
||||
" Write-UpdateStatus 'failed'",
|
||||
" exit 1",
|
||||
"} finally {",
|
||||
" Remove-Item -LiteralPath $scriptPath -Force -ErrorAction SilentlyContinue",
|
||||
"}",
|
||||
"",
|
||||
].join("\r\n");
|
||||
}
|
||||
|
||||
function scheduleWindowsGlobalUpdate(options) {
|
||||
if (!options || !options.runtime) throw new Error("A local updater runtime is required.");
|
||||
var runtime = options.runtime;
|
||||
var fs = runtime.fs;
|
||||
var path = runtime.path;
|
||||
var os = runtime.os;
|
||||
var childProcess = runtime.childProcess;
|
||||
if (!fs || !path || !os || !childProcess) {
|
||||
throw new Error("The local updater runtime is unavailable.");
|
||||
}
|
||||
|
||||
var cliPath = String(options.cliPath || "");
|
||||
if (!cliPath || typeof path.isAbsolute !== "function" || !path.isAbsolute(cliPath)) {
|
||||
throw new Error("The per-user Premiere MCP command could not be resolved.");
|
||||
}
|
||||
if (typeof fs.existsSync === "function" && !fs.existsSync(cliPath)) {
|
||||
throw new Error("The per-user Premiere MCP command is not installed.");
|
||||
}
|
||||
|
||||
var updateDirectory = String(options.updateDirectory || os.tmpdir());
|
||||
if (!updateDirectory || typeof path.isAbsolute !== "function" || !path.isAbsolute(updateDirectory)) {
|
||||
throw new Error("The local update directory is unavailable.");
|
||||
}
|
||||
if (typeof fs.mkdirSync === "function") fs.mkdirSync(updateDirectory, { recursive: true, mode: 0o700 });
|
||||
|
||||
var suffix = randomSuffix(runtime);
|
||||
var statusPath = path.join(updateDirectory, "premiere-pro-mcp-update-" + suffix + ".json");
|
||||
var scriptPath = path.join(updateDirectory, "premiere-pro-mcp-update-" + suffix + ".ps1");
|
||||
var script = buildWindowsGlobalUpdateScript(cliPath, statusPath, scriptPath);
|
||||
fs.writeFileSync(scriptPath, script, { encoding: "utf8", mode: 0o600, flag: "wx" });
|
||||
|
||||
try {
|
||||
var child = childProcess.spawn(
|
||||
"powershell.exe",
|
||||
["-NoProfile", "-ExecutionPolicy", "Bypass", "-File", scriptPath],
|
||||
{ detached: true, windowsHide: true, stdio: "ignore" }
|
||||
);
|
||||
if (!child || typeof child.unref !== "function") {
|
||||
throw new Error("The local updater could not be started.");
|
||||
}
|
||||
child.unref();
|
||||
return { statusPath: statusPath };
|
||||
} catch (error) {
|
||||
try { fs.unlinkSync(scriptPath); } catch (cleanupError) {}
|
||||
throw error;
|
||||
}
|
||||
}
|
||||
|
||||
return {
|
||||
CURRENT_VERSION: CURRENT_VERSION,
|
||||
PACKAGE_NAME: PACKAGE_NAME,
|
||||
LATEST_PACKAGE_API: LATEST_PACKAGE_API,
|
||||
LATEST_RELEASE_API: LATEST_RELEASE_API,
|
||||
RELEASES_URL: RELEASES_URL,
|
||||
normalizeVersion: normalizeVersion,
|
||||
compareVersions: compareVersions,
|
||||
latestPackageVersion: latestPackageVersion,
|
||||
updateStateFromPackageRecord: updateStateFromPackageRecord,
|
||||
chooseDownloadUrl: chooseDownloadUrl,
|
||||
isTrustedDownloadUrl: isTrustedDownloadUrl,
|
||||
buildWindowsGlobalUpdateScript: buildWindowsGlobalUpdateScript,
|
||||
scheduleWindowsGlobalUpdate: scheduleWindowsGlobalUpdate,
|
||||
};
|
||||
});
|
||||
Reference in New Issue
Block a user