akukanara
244 lines
13 KiB
HTML
244 lines
13 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="id">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<meta name="description" content="Omni Real-time Voice Changer - Pengubah suara real-time berbasis AI berlatensi sangat rendah dengan ONNX Runtime.">
|
|
<title>🎙️ Omni Real-Time Voice Changer - High-Performance AI Audio</title>
|
|
|
|
<!-- Modern Typography: Inter & Outfit from Google Fonts -->
|
|
<link rel="preconnect" href="https://fonts.googleapis.com">
|
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
|
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Outfit:wght@400;600;800&display=swap" rel="stylesheet">
|
|
|
|
<!-- Link to premium Vanilla CSS -->
|
|
<link rel="stylesheet" href="styles.css">
|
|
</head>
|
|
<body>
|
|
<div class="glow-backdrop"></div>
|
|
|
|
<div class="dashboard-container">
|
|
<!-- HEADER -->
|
|
<header class="app-header">
|
|
<div class="logo-area">
|
|
<span class="pulse-indicator active"></span>
|
|
<h1>🎙️ OMNI VOICE CHANGER</h1>
|
|
</div>
|
|
<p class="tagline">Pengubah Suara Real-Time AI Berlatensi Ultra Rendah menggunakan Akselerasi ONNX Runtime</p>
|
|
</header>
|
|
|
|
<!-- CONNECTION BAR -->
|
|
<div class="connection-bar card glassmorphism">
|
|
<div class="form-row">
|
|
<div class="input-group">
|
|
<label for="ws_url">URL Server WebSocket</label>
|
|
<input type="text" id="ws_url" value="ws://127.0.0.1:8765" placeholder="ws://localhost:8765">
|
|
</div>
|
|
<div class="connection-status-container">
|
|
<span id="connection_status" class="status-badge disconnected">Terputus</span>
|
|
</div>
|
|
<div class="btn-group-row">
|
|
<button id="connect_btn" class="btn btn-primary">Hubungkan Server</button>
|
|
<button id="stream_btn" class="btn btn-accent" disabled>Mulai Mengubah Suara</button>
|
|
<button id="play_toggle_btn" class="btn btn-primary" disabled>🔊 Mendengarkan: AKTIF</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- MAIN DASHBOARD CONTENT -->
|
|
<main class="dashboard-grid">
|
|
|
|
<!-- MODEL CONFIGURATION -->
|
|
<section class="card glassmorphism col-span-1" aria-labelledby="model-config-title">
|
|
<h2 id="model-config-title" class="card-title">⚙️ Konfigurasi Model & Perangkat</h2>
|
|
|
|
<!-- QUICK PRESETS PANEL -->
|
|
<div class="control-group">
|
|
<label>⚡ Quick Presets (Profil Performa)</label>
|
|
<div class="btn-group-row" style="width: 100%; display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.5rem; height: auto; margin-bottom: 0.75rem;">
|
|
<button id="preset_latency_btn" class="btn btn-primary" style="font-size: 0.8rem; padding: 0.65rem 0.5rem;">⚡ Respon Kilat (PM)</button>
|
|
<button id="preset_quality_btn" class="btn btn-accent" style="font-size: 0.8rem; padding: 0.65rem 0.5rem;">🎙️ Kualitas Tinggi (RMVPE)</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="control-group">
|
|
<label for="model_select">Pilih Model Suara (RVC ONNX)</label>
|
|
<select id="model_select" class="custom-select">
|
|
<option value="HuTao">HuTao (Genshin Impact)</option>
|
|
<option value="HuoHuo">HuoHuo (Honkai Star Rail)</option>
|
|
</select>
|
|
</div>
|
|
|
|
<div class="control-group">
|
|
<label for="device_select">Execution Provider (Akselerasi GPU)</label>
|
|
<select id="device_select" class="custom-select">
|
|
<option value="cpu">CPU (Sangat Stabil)</option>
|
|
<option value="cuda" selected>CUDA (NVIDIA GPU - Super Cepat)</option>
|
|
<option value="dml">DirectML (AMD/Intel GPU Windows)</option>
|
|
</select>
|
|
</div>
|
|
|
|
<!-- DUAL AUDIO ROUTING MODE (SERVER VS CLIENT) -->
|
|
<div class="control-group" style="border-top: 1px solid rgba(255, 255, 255, 0.05); padding-top: 0.75rem; margin-top: 0.75rem;">
|
|
<label for="routing_mode_select">Mode Audio (Routing Mode)</label>
|
|
<select id="routing_mode_select" class="custom-select">
|
|
<option value="browser" selected>Client Mode (Browser Streaming - Portabel)</option>
|
|
<option value="hardware">Server Mode (Hardware Direct - Latensi Nol)</option>
|
|
</select>
|
|
</div>
|
|
|
|
<div id="hardware_devices_panel" class="control-group" style="display: none; border: 1px solid rgba(99, 102, 241, 0.2); padding: 0.75rem; border-radius: 8px; background: rgba(11, 12, 19, 0.5); box-shadow: 0 0 10px rgba(99, 102, 241, 0.05);">
|
|
<div style="margin-bottom: 0.75rem;">
|
|
<label for="server_input_select" style="font-size: 0.75rem; margin-bottom: 0.25rem; color: var(--primary); text-transform: uppercase; font-weight: 600;">🎙️ Input Mikrofon Server</label>
|
|
<select id="server_input_select" class="custom-select" style="font-size: 0.8rem; padding: 0.4rem;"></select>
|
|
</div>
|
|
<div>
|
|
<label for="server_output_select" style="font-size: 0.75rem; margin-bottom: 0.25rem; color: var(--accent); text-transform: uppercase; font-weight: 600;">🔊 Output Speaker/Kabel Server</label>
|
|
<select id="server_output_select" class="custom-select" style="font-size: 0.8rem; padding: 0.4rem;"></select>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="control-group">
|
|
<label>Metode Deteksi Nada (Pitch Extraction)</label>
|
|
<div class="radio-group-modern">
|
|
<label class="radio-tile">
|
|
<input type="radio" name="f0_method" value="pm" checked>
|
|
<span class="tile-label">PM (Tercepat)</span>
|
|
</label>
|
|
<label class="radio-tile">
|
|
<input type="radio" name="f0_method" value="dio">
|
|
<span class="tile-label">DIO (Ringan)</span>
|
|
</label>
|
|
<label class="radio-tile">
|
|
<input type="radio" name="f0_method" value="harvest">
|
|
<span class="tile-label">Harvest (Stabil)</span>
|
|
</label>
|
|
<label class="radio-tile">
|
|
<input type="radio" name="f0_method" value="rmvpe">
|
|
<span class="tile-label">RMVPE (Fidelitas Tinggi)</span>
|
|
</label>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="control-group">
|
|
<div class="slider-header">
|
|
<label for="transpose_slider">Transpose (Pengubah Nada)</label>
|
|
<span id="transpose_val" class="slider-value">0 semitone</span>
|
|
</div>
|
|
<input type="range" id="transpose_slider" min="-24" max="24" value="0" step="1" class="custom-slider">
|
|
<div class="slider-ticks">
|
|
<span>-24 (Pria Berat)</span>
|
|
<span>0 (Asli)</span>
|
|
<span>+24 (Wanita/Anime)</span>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- AUDIO DSP & PROCESSING -->
|
|
<section class="card glassmorphism col-span-1" aria-labelledby="dsp-title">
|
|
<h2 id="dsp-title" class="card-title">🎛️ Pemrosesan Audio (DSP)</h2>
|
|
|
|
<div class="control-group">
|
|
<div class="slider-header">
|
|
<label for="gate_slider">Noise Gate (Threshold)</label>
|
|
<span id="gate_val" class="slider-value">-40 dB</span>
|
|
</div>
|
|
<input type="range" id="gate_slider" min="-60" max="-10" value="-40" step="1" class="custom-slider">
|
|
<div class="slider-ticks">
|
|
<span>-60 dB (Sensitif)</span>
|
|
<span>-40 dB (Default)</span>
|
|
<span>-10 dB (Ketat)</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="control-group">
|
|
<div class="slider-header">
|
|
<label for="input_gain_slider">Input Gain (Penguat Mic)</label>
|
|
<span id="input_gain_val" class="slider-value">1.0x</span>
|
|
</div>
|
|
<input type="range" id="input_gain_slider" min="0" max="3" value="1" step="0.1" class="custom-slider">
|
|
</div>
|
|
|
|
<div class="control-group">
|
|
<div class="slider-header">
|
|
<label for="output_gain_slider">Output Gain (Volume Suara)</label>
|
|
<span id="output_gain_val" class="slider-value">1.0x</span>
|
|
</div>
|
|
<input type="range" id="output_gain_slider" min="0" max="3" value="1" step="0.1" class="custom-slider">
|
|
</div>
|
|
|
|
<div id="browser_noise_cancel_group" class="control-group">
|
|
<label class="checkbox-container" style="display: flex; align-items: center; gap: 0.5rem; cursor: pointer; user-select: none;">
|
|
<input type="checkbox" id="noise_cancel_checkbox" checked style="width: 18px; height: 18px; cursor: pointer; accent-color: var(--primary);">
|
|
<span class="checkbox-label" style="font-size: 0.85rem; font-weight: 500; color: var(--text-muted); text-transform: uppercase;">🚫 Peredam Bising (Noise Cancel)</span>
|
|
</label>
|
|
</div>
|
|
|
|
<div class="control-group">
|
|
<label for="chunk_select">Ukuran Buffer (Chunk Size - Latensi vs Stabilitas)</label>
|
|
<select id="chunk_select" class="custom-select">
|
|
<option value="8192" selected>8192 sampel (~170ms - Rekomendasi Minim Distorsi)</option>
|
|
<option value="12288">12288 sampel (~250ms - Sangat Halus & Merdu)</option>
|
|
<option value="16384">16384 sampel (~340ms - Kualitas Studio Sangat Stabil)</option>
|
|
<option value="24576">24576 sampel (~510ms - Super Halus & Kokoh)</option>
|
|
<option value="32768">32768 sampel (~680ms - Fidelitas Maksimal)</option>
|
|
<option value="49152">49152 sampel (~1.0 detik - Ultra Smooth Cinema)</option>
|
|
<option value="65536">65536 sampel (~1.3 detik - Kestabilan Maksimal)</option>
|
|
<option value="98304">98304 sampel (~2.0 detik - Mode Penyiaran/Broadcasting)</option>
|
|
</select>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- OSCILLOSCOPES / WAVEFORM VISUALIZERS -->
|
|
<section class="card glassmorphism col-span-2" aria-labelledby="visualizer-title">
|
|
<h2 id="visualizer-title" class="card-title">📊 Live Audio Waveform & Visualizer</h2>
|
|
|
|
<div class="visualizer-row">
|
|
<div class="visualizer-container">
|
|
<div class="vis-label">
|
|
<span class="dot input-dot"></span>
|
|
<span>Sinyal Mikrofon (Input)</span>
|
|
</div>
|
|
<canvas id="input_canvas" class="waveform-canvas"></canvas>
|
|
</div>
|
|
<div class="visualizer-container">
|
|
<div class="vis-label">
|
|
<span class="dot output-dot"></span>
|
|
<span>Hasil AI Voice (Output)</span>
|
|
</div>
|
|
<canvas id="output_canvas" class="waveform-canvas"></canvas>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
</main>
|
|
|
|
<!-- PERFORMANCE HUD FOOTER -->
|
|
<footer class="performance-hud card glassmorphism">
|
|
<div class="hud-item">
|
|
<span class="hud-label">Latensi Bulat (RTT)</span>
|
|
<span id="hud_latency" class="hud-value italic">-- ms</span>
|
|
</div>
|
|
<div class="hud-separator"></div>
|
|
<div class="hud-item">
|
|
<span class="hud-label">Rasio Pemrosesan</span>
|
|
<span id="hud_time" class="hud-value text-accent">-- ms</span>
|
|
</div>
|
|
<div class="hud-separator"></div>
|
|
<div class="hud-item">
|
|
<span class="hud-label">Sinyal Suara</span>
|
|
<span id="hud_gate_status" class="hud-value active-badge">Berdiam</span>
|
|
</div>
|
|
<div class="hud-separator"></div>
|
|
<div class="hud-item">
|
|
<span class="hud-label">Frekuensi Audio</span>
|
|
<span id="hud_sr" class="hud-value">44100 Hz</span>
|
|
</div>
|
|
</footer>
|
|
</div>
|
|
|
|
<!-- Link to premium Javascript logic -->
|
|
<script src="app.js"></script>
|
|
</body>
|
|
</html>
|