kanara/onnx-voice-changer
1
1
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
a77c6792c00f78b7ec19b021140fd50763fbd449
onnx-voice-changer/frontend-deprecated/index.html
T

244 lines
27 KiB
HTML
Raw Blame History

<!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 &amp; 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(163, 230, 53, 0.2); padding: 0.75rem; border-radius: 8px; background: rgba(10, 13, 8, 0.5); box-shadow: 0 0 10px rgba(163, 230, 53, 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 &amp; Merdu)</option>
<option value="16384">16384 sampel (~340ms - Kualitas Studio Sangat Stabil)</option>
<option value="24576">24576 sampel (~510ms - Super Halus &amp; 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 &amp; 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>
Reference in New Issue View Git Blame Copy Permalink