423 lines
17 KiB
Swift
423 lines
17 KiB
Swift
import SwiftUI
|
||
import UniformTypeIdentifiers
|
||
|
||
/// Guia "Legendas Dinâmicas" — apenas configuração de estilo. Nenhum
|
||
/// processamento acontece aqui: a geração das legendas roda na aba
|
||
/// "Projeto".
|
||
///
|
||
/// Os valores ficam em `~/.fcp-mcp-server/config.json` (via
|
||
/// `model_manager.save_dynamic_subtitle_config`), os mesmos lidos por
|
||
/// `generate_dynamic_subtitles` como padrão — não em UserDefaults/
|
||
/// `@AppStorage`, para que a geração renderize exatamente o que esta tela
|
||
/// mostra, e para que qualquer chamador (app, MCP, uma sessão de IA) veja o
|
||
/// mesmo estilo sem precisar repassar os 11 campos a cada chamada. Mesmo
|
||
/// desenho de `VoiceAnalysisView`.
|
||
///
|
||
/// Layout em duas colunas: à esquerda, um **preview vertical 9:16** fixo que
|
||
/// reproduz a composição real (posição, escala, quebra de linhas e o
|
||
/// escalonamento das linhas de apoio); à direita, os controles agrupados por
|
||
/// assunto.
|
||
struct CaptionsView: View {
|
||
@State private var config = CaptionStyleConfig.defaults
|
||
@State private var isLoading = true
|
||
@State private var errorMessage: String?
|
||
|
||
// Frase de amostra do preview — só conveniência local, não afeta a
|
||
// geração real (que usa as palavras de verdade da transcrição), então
|
||
// continua em @AppStorage em vez do config compartilhado.
|
||
@AppStorage("capSampleBefore") private var sampleBefore = "que vão"
|
||
@AppStorage("capSampleEmphasis") private var sampleEmphasis = "melhorar"
|
||
@AppStorage("capSampleAfter") private var sampleAfter = "sua legenda"
|
||
@AppStorage("capShowGuides") private var showsGuides = true
|
||
|
||
private let fontChoices = [
|
||
"Helvetica Neue", "Helvetica", "Arial", "Avenir Next",
|
||
"Futura", "SF Pro Display", "Georgia", "Impact",
|
||
]
|
||
|
||
private let emphasisFontChoices = [
|
||
"Playfair Display", "Georgia", "Didot", "Futura",
|
||
"Avenir Next", "Times New Roman", "Helvetica Neue", "Impact",
|
||
]
|
||
|
||
private let emphasisFaceChoices = [
|
||
"Medium Italic", "Italic", "Bold Italic", "Bold", "Regular", "Light Italic",
|
||
]
|
||
|
||
/// Salva no arquivo a cada mudança e devolve um Binding, para os controles
|
||
/// continuarem simples (`$config.x` viraria só memória local).
|
||
private func bound<T>(_ keyPath: WritableKeyPath<CaptionStyleConfig, T>) -> Binding<T> {
|
||
Binding(
|
||
get: { config[keyPath: keyPath] },
|
||
set: { config[keyPath: keyPath] = $0; save() }
|
||
)
|
||
}
|
||
|
||
private func colorBound(_ keyPath: WritableKeyPath<CaptionStyleConfig, String>) -> Binding<Color> {
|
||
Binding(
|
||
get: { Color(rgbaString: config[keyPath: keyPath]) },
|
||
set: { config[keyPath: keyPath] = $0.fcpxmlColorString; save() }
|
||
)
|
||
}
|
||
|
||
var body: some View {
|
||
HSplitView {
|
||
previewColumn
|
||
.frame(minWidth: 250, idealWidth: 300, maxWidth: 380)
|
||
controlsColumn
|
||
.frame(minWidth: 380, idealWidth: 460)
|
||
}
|
||
.task { await load() }
|
||
}
|
||
|
||
// MARK: - Coluna da pré-visualização
|
||
|
||
private var previewColumn: some View {
|
||
VStack(alignment: .leading, spacing: 14) {
|
||
HStack {
|
||
Label("Pré-visualização", systemImage: "rectangle.on.rectangle.angled")
|
||
.font(.headline)
|
||
Spacer()
|
||
Toggle("Guias", isOn: $showsGuides)
|
||
.toggleStyle(.switch)
|
||
.controlSize(.mini)
|
||
.labelsHidden()
|
||
.help("Mostra a faixa do bloco e a linha de centro do quadro.")
|
||
}
|
||
|
||
SubtitlePreviewView(
|
||
bodyFont: config.font,
|
||
bodySize: config.fontSize,
|
||
bodyColor: Color(rgbaString: config.activeColor),
|
||
emphasisFont: config.emphasisFont,
|
||
emphasisFace: config.emphasisFace,
|
||
emphasisSize: config.emphasisSize,
|
||
emphasisColor: Color(rgbaString: config.emphasisColor),
|
||
bandHeight: config.bandHeight,
|
||
blockCenterY: config.blockCenterY,
|
||
lineGap: config.lineGap,
|
||
beforeText: $sampleBefore,
|
||
emphasisText: $sampleEmphasis,
|
||
afterText: $sampleAfter,
|
||
showsGuides: showsGuides
|
||
)
|
||
.frame(maxWidth: .infinity, maxHeight: 420)
|
||
|
||
GroupBox("Frase de amostra") {
|
||
VStack(spacing: 6) {
|
||
LabeledContent("Antes") {
|
||
TextField("", text: $sampleBefore).textFieldStyle(.roundedBorder)
|
||
}
|
||
LabeledContent("Ênfase") {
|
||
TextField("", text: $sampleEmphasis).textFieldStyle(.roundedBorder)
|
||
}
|
||
LabeledContent("Depois") {
|
||
TextField("", text: $sampleAfter).textFieldStyle(.roundedBorder)
|
||
}
|
||
}
|
||
.padding(.vertical, 4)
|
||
}
|
||
|
||
if emphasisOverflows {
|
||
Label(
|
||
"A palavra de ênfase é mais larga que o quadro nesse tamanho — reduza o tamanho da ênfase para não sair cortada.",
|
||
systemImage: "exclamationmark.triangle.fill"
|
||
)
|
||
.font(.caption)
|
||
.foregroundStyle(.orange)
|
||
.fixedSize(horizontal: false, vertical: true)
|
||
}
|
||
|
||
Text("Quadro vertical 9:16 na mesma geometria do Final Cut: a ênfase fica centrada e as linhas de apoio se deslocam para os lados alternados. Larguras são estimadas — a posição e a escala são reais.")
|
||
.font(.caption2)
|
||
.foregroundStyle(.secondary)
|
||
.fixedSize(horizontal: false, vertical: true)
|
||
|
||
Spacer(minLength: 0)
|
||
}
|
||
.padding(20)
|
||
.frame(maxHeight: .infinity, alignment: .top)
|
||
}
|
||
|
||
// MARK: - Coluna de controles
|
||
|
||
private var controlsColumn: some View {
|
||
Form {
|
||
if isLoading {
|
||
Section {
|
||
ProgressView().controlSize(.small)
|
||
.frame(maxWidth: .infinity, alignment: .center)
|
||
}
|
||
} else {
|
||
positionSection
|
||
bodySection
|
||
emphasisSection
|
||
calibrationSection
|
||
}
|
||
if let errorMessage {
|
||
Section {
|
||
Label(errorMessage, systemImage: "exclamationmark.triangle.fill")
|
||
.foregroundStyle(.red)
|
||
}
|
||
}
|
||
}
|
||
.formStyle(.grouped)
|
||
}
|
||
|
||
private var positionSection: some View {
|
||
Section {
|
||
slider(
|
||
"Altura do bloco",
|
||
value: bound(\.bandHeight), in: 0.10...0.50, step: 0.01,
|
||
readout: "\(Int(config.bandHeight * 100))%",
|
||
help: "Quanto da altura do quadro a frase pode ocupar antes de quebrar em outro bloco."
|
||
)
|
||
slider(
|
||
"Posição vertical",
|
||
value: bound(\.blockCenterY), in: -700...300, step: 1,
|
||
readout: "\(Int(config.blockCenterY))",
|
||
help: "0 é o centro do quadro; negativos descem, positivos sobem."
|
||
)
|
||
slider(
|
||
"Espaço entre linhas",
|
||
value: bound(\.lineGap), in: -80...120, step: 1,
|
||
readout: "\(Int(config.lineGap))pt",
|
||
help: "Distância entre uma linha e a outra, além das próprias letras. Negativo sobrepõe."
|
||
)
|
||
} header: {
|
||
Text("Posicionamento no Quadro")
|
||
} footer: {
|
||
Text("Medidas em pontos do canvas de referência 2160×3840. O espaço entre linhas é contado a partir da tinta real de cada linha — em 0 elas se encostam, e em negativo uma entra na outra.")
|
||
.font(.caption2).foregroundStyle(.secondary)
|
||
}
|
||
}
|
||
|
||
private var bodySection: some View {
|
||
Section("Linhas de apoio") {
|
||
Picker("Fonte", selection: bound(\.font)) {
|
||
ForEach(fontChoices, id: \.self) { Text($0).tag($0) }
|
||
}
|
||
slider(
|
||
"Tamanho",
|
||
value: bound(\.fontSize), in: 20...200, step: 1,
|
||
readout: "\(Int(config.fontSize))pt",
|
||
help: "Tamanho das linhas que acompanham a palavra-chave."
|
||
)
|
||
ColorPicker("Cor", selection: colorBound(\.activeColor), supportsOpacity: true)
|
||
}
|
||
}
|
||
|
||
private var emphasisSection: some View {
|
||
Section("Palavra de ênfase") {
|
||
Picker("Fonte", selection: bound(\.emphasisFont)) {
|
||
ForEach(emphasisFontChoices, id: \.self) { Text($0).tag($0) }
|
||
}
|
||
Picker("Estilo", selection: bound(\.emphasisFace)) {
|
||
ForEach(emphasisFaceChoices, id: \.self) { Text($0).tag($0) }
|
||
}
|
||
slider(
|
||
"Tamanho",
|
||
value: bound(\.emphasisSize), in: 60...400, step: 1,
|
||
readout: "\(Int(config.emphasisSize))pt",
|
||
help: "A palavra-chave da frase, sozinha em sua linha e maior."
|
||
)
|
||
ColorPicker("Cor", selection: colorBound(\.emphasisColor), supportsOpacity: true)
|
||
}
|
||
}
|
||
|
||
private var calibrationSection: some View {
|
||
Section {
|
||
slider(
|
||
"Escala no Final Cut",
|
||
value: bound(\.textScale), in: 0.5...3.0, step: 0.05,
|
||
readout: String(format: "%.2f×", config.textScale),
|
||
help: "Converte o tamanho escolhido para o espaço em que o modelo de título do Final Cut desenha o texto."
|
||
)
|
||
|
||
HStack {
|
||
Spacer()
|
||
Button("Restaurar padrão") {
|
||
config = CaptionStyleConfig.defaults
|
||
save()
|
||
}
|
||
.buttonStyle(.link)
|
||
}
|
||
} header: {
|
||
Text("Calibração")
|
||
} footer: {
|
||
VStack(alignment: .leading, spacing: 6) {
|
||
Text("O modelo \"Text\" do Final Cut trabalha no espaço do quadro inteiro (2160×3840), enquanto o layout é calculado em pontos — metade disso. Por isso o padrão é 2,00×, aplicado ao tamanho E à posição juntos. Ajuste só se o seu modelo usar outra proporção.")
|
||
Text("Este estilo fica salvo em ~/.fcp-mcp-server/config.json e é usado automaticamente ao gerar legendas dinâmicas — nada é processado aqui.")
|
||
}
|
||
.font(.caption2).foregroundStyle(.secondary)
|
||
}
|
||
}
|
||
|
||
/// Slider com rótulo, leitura numérica alinhada e explicação em tooltip —
|
||
/// mantém as linhas do formulário com a mesma altura.
|
||
private func slider(
|
||
_ title: String,
|
||
value: Binding<Double>,
|
||
in range: ClosedRange<Double>,
|
||
step: Double,
|
||
readout: String,
|
||
help: String
|
||
) -> some View {
|
||
LabeledContent(title) {
|
||
HStack(spacing: 10) {
|
||
Slider(value: value, in: range, step: step)
|
||
Text(readout)
|
||
.font(.caption).monospacedDigit()
|
||
.foregroundStyle(.secondary)
|
||
.frame(width: 46, alignment: .trailing)
|
||
}
|
||
}
|
||
.help(help)
|
||
}
|
||
|
||
/// Largura útil do canvas de referência (1080 pt menos 4% de cada lado).
|
||
private static let usableCanvasWidth: CGFloat = 1080 * 0.92
|
||
|
||
/// A palavra de ênfase da amostra passa da largura do quadro no tamanho
|
||
/// escolhido? Medida no mesmo canvas que o backend usa.
|
||
private var emphasisOverflows: Bool {
|
||
let text = sampleEmphasis.trimmingCharacters(in: .whitespaces)
|
||
guard !text.isEmpty else { return false }
|
||
var descriptor = NSFontDescriptor(fontAttributes: [.family: config.emphasisFont])
|
||
if !config.emphasisFace.isEmpty {
|
||
descriptor = descriptor.addingAttributes([.face: config.emphasisFace])
|
||
}
|
||
let nsFont = NSFont(descriptor: descriptor, size: CGFloat(config.emphasisSize))
|
||
?? NSFont.systemFont(ofSize: CGFloat(config.emphasisSize))
|
||
let width = (text as NSString).size(withAttributes: [.font: nsFont]).width
|
||
return width > Self.usableCanvasWidth
|
||
}
|
||
|
||
// MARK: - Backend
|
||
|
||
@MainActor
|
||
private func load() async {
|
||
await withCheckedContinuation { continuation in
|
||
PythonBridge.call(command: "dynamic_subtitle_config") { result, error in
|
||
DispatchQueue.main.async {
|
||
if let result {
|
||
config = CaptionStyleConfig(from: result)
|
||
} else if let error {
|
||
errorMessage = error
|
||
}
|
||
isLoading = false
|
||
continuation.resume()
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
private func save() {
|
||
PythonBridge.call(command: "set_dynamic_subtitle_config", arguments: config.arguments()) { _, error in
|
||
DispatchQueue.main.async { errorMessage = error }
|
||
}
|
||
}
|
||
}
|
||
|
||
/// O estilo das legendas dinâmicas, no formato que a tela edita e o bridge
|
||
/// (`admin/models_api.py` → `set_dynamic_subtitle_config`) persiste.
|
||
struct CaptionStyleConfig {
|
||
var bandHeight: Double
|
||
var blockCenterY: Double
|
||
var lineGap: Double
|
||
var font: String
|
||
var fontSize: Double
|
||
var emphasisFont: String
|
||
var emphasisFace: String
|
||
var emphasisSize: Double
|
||
var activeColor: String
|
||
var emphasisColor: String
|
||
var textScale: Double
|
||
|
||
static let defaults = CaptionStyleConfig(
|
||
bandHeight: 0.22,
|
||
blockCenterY: -167,
|
||
lineGap: 8,
|
||
font: "Helvetica Neue",
|
||
fontSize: 104,
|
||
emphasisFont: "Playfair Display",
|
||
emphasisFace: "Medium Italic",
|
||
emphasisSize: 265,
|
||
activeColor: "1 1 1 1",
|
||
emphasisColor: "1 1 1 1",
|
||
textScale: 2.0
|
||
)
|
||
|
||
/// Lê a resposta do bridge, caindo no padrão para qualquer campo ausente.
|
||
init(from json: [String: Any]) {
|
||
let d = CaptionStyleConfig.defaults
|
||
self.init(
|
||
bandHeight: json["band_height"] as? Double ?? d.bandHeight,
|
||
blockCenterY: json["block_center_y"] as? Double ?? d.blockCenterY,
|
||
lineGap: json["line_gap"] as? Double ?? d.lineGap,
|
||
font: json["font"] as? String ?? d.font,
|
||
fontSize: (json["font_size"] as? NSNumber)?.doubleValue ?? d.fontSize,
|
||
emphasisFont: json["emphasis_font"] as? String ?? d.emphasisFont,
|
||
emphasisFace: json["emphasis_face"] as? String ?? d.emphasisFace,
|
||
emphasisSize: (json["emphasis_size"] as? NSNumber)?.doubleValue ?? d.emphasisSize,
|
||
activeColor: json["active_color"] as? String ?? d.activeColor,
|
||
emphasisColor: json["emphasis_color"] as? String ?? d.emphasisColor,
|
||
textScale: json["text_scale"] as? Double ?? d.textScale
|
||
)
|
||
}
|
||
|
||
init(
|
||
bandHeight: Double, blockCenterY: Double, lineGap: Double,
|
||
font: String, fontSize: Double,
|
||
emphasisFont: String, emphasisFace: String, emphasisSize: Double,
|
||
activeColor: String, emphasisColor: String, textScale: Double
|
||
) {
|
||
self.bandHeight = bandHeight
|
||
self.blockCenterY = blockCenterY
|
||
self.lineGap = lineGap
|
||
self.font = font
|
||
self.fontSize = fontSize
|
||
self.emphasisFont = emphasisFont
|
||
self.emphasisFace = emphasisFace
|
||
self.emphasisSize = emphasisSize
|
||
self.activeColor = activeColor
|
||
self.emphasisColor = emphasisColor
|
||
self.textScale = textScale
|
||
}
|
||
|
||
func arguments() -> [String: Any] {
|
||
[
|
||
"band_height": bandHeight,
|
||
"block_center_y": blockCenterY,
|
||
"line_gap": lineGap,
|
||
"font": font,
|
||
"font_size": Int(fontSize),
|
||
"emphasis_font": emphasisFont,
|
||
"emphasis_face": emphasisFace,
|
||
"emphasis_size": Int(emphasisSize),
|
||
"active_color": activeColor,
|
||
"emphasis_color": emphasisColor,
|
||
"text_scale": textScale,
|
||
]
|
||
}
|
||
}
|
||
|
||
extension Color {
|
||
/// Parses an FCPXML "R G B A" space-separated 0-1 string into a Color.
|
||
init(rgbaString: String) {
|
||
let parts = rgbaString.split(separator: " ").compactMap { Double($0) }
|
||
guard parts.count >= 3 else { self = .white; return }
|
||
let r = parts[0], g = parts[1], b = parts[2], a = parts.count >= 4 ? parts[3] : 1.0
|
||
self.init(.sRGB, red: r, green: g, blue: b, opacity: a)
|
||
}
|
||
|
||
/// Converts to FCPXML's "R G B A" space-separated 0-1 string (sRGB).
|
||
var fcpxmlColorString: String {
|
||
let ns = NSColor(self).usingColorSpace(.sRGB) ?? NSColor(self)
|
||
return String(
|
||
format: "%.4g %.4g %.4g %.4g",
|
||
ns.redComponent, ns.greenComponent, ns.blueComponent, ns.alphaComponent
|
||
)
|
||
}
|
||
}
|