takeone-youtube-clone/resources/views/admin/gpu.blade.php

@extends('admin.layout')

@section('title', 'GPU Accelerator')
@section('page_title', 'GPU Accelerator')

@section('extra_styles')
@include('admin.partials.settings-styles')
@endsection

@section('content')
<div class="adm-page-header">
    <h1 class="adm-page-title"><i class="bi bi-gpu-card"></i> GPU Accelerator</h1>
</div>

@if(session('success'))
<div class="adm-alert adm-alert-success" style="margin-bottom:20px;">
    <i class="bi bi-check-circle-fill"></i>
    <span>{{ session('success') }}</span>
    <button class="adm-alert-close" type="button"><i class="bi bi-x"></i></button>
</div>
@endif

@if($errors->any())
<div class="adm-alert adm-alert-error" style="margin-bottom:20px;">
    <i class="bi bi-exclamation-triangle-fill"></i>
    <span>{{ $errors->first() }}</span>
    <button class="adm-alert-close" type="button"><i class="bi bi-x"></i></button>
</div>
@endif

<form method="POST" action="{{ route('admin.settings.update') }}" id="gpuForm">
@csrf

<div class="settings-section">
    <div class="settings-section-header">
        <i class="bi bi-gpu-card"></i>
        GPU Accelerated Processing
        <span id="gpuStatusChip" style="margin-left:6px;">
            @if(count($gpus))
                <span class="chip chip-green"><span class="chip-dot"></span> {{ count($gpus) }} GPU{{ count($gpus) > 1 ? 's' : '' }} detected</span>
            @else
                <span class="chip chip-red"><span class="chip-dot"></span> No GPU detected</span>
            @endif
        </span>
        <span id="nvencStatusChip" style="margin-left:6px;">
            @if($nvencWorks)
                <span class="chip chip-green"><span class="chip-dot"></span> NVENC encoding ✓</span>
            @else
                <span class="chip chip-red"><span class="chip-dot"></span> NVENC encoding ✗</span>
            @endif
        </span>
    </div>

    @if(!$nvencWorks && count($gpus))
    <div style="background:rgba(239,68,68,.08);border-left:3px solid #f87171;padding:12px 18px;font-size:13px;color:#f87171;line-height:1.6;">
        <strong>⚠ NVENC is not working with the current FFmpeg binary.</strong><br>
        The GPU is detected but FFmpeg cannot initialise CUDA on this driver.<br>
        <strong>Fix:</strong> Install a newer FFmpeg with CUDA 12+ support (e.g. <code>jellyfin-ffmpeg7</code>), then update the binary path below.<br>
        Until then, video encoding will automatically fall back to CPU (libx264).
    </div>
    @endif

    <div class="settings-section-body">

        <div style="margin-bottom:20px;">
            <div style="display:flex;align-items:center;justify-content:space-between;margin-bottom:12px;">
                <span style="font-size:13px;color:var(--text-2);">Available GPUs</span>
                <button type="button" class="adm-btn adm-btn-sm" id="detectBtn" onclick="detectGpus()">
                    <i class="bi bi-arrow-repeat" id="detectIcon"></i> Detect GPUs
                </button>
            </div>
            <div id="gpuCardsWrap">
                @if(count($gpus))
                    @include('admin.partials.gpu-cards', ['gpus' => $gpus, 'selectedDevice' => $settings['gpu_device']])
                @else
                    <div class="no-gpu-state">
                        <i class="bi bi-gpu-card"></i>
                        <p>No NVIDIA GPUs detected. Click "Detect GPUs" to scan.</p>
                    </div>
                @endif
            </div>
        </div>

        <div class="setting-row">
            <div class="setting-label">
                <strong>Enable GPU acceleration</strong>
                <small>When enabled, video encoding uses the NVIDIA GPU. When disabled, falls back to CPU (libx264).</small>
            </div>
            <div class="setting-control">
                <label class="toggle-wrap">
                    <span class="toggle-switch">
                        <input type="checkbox" id="gpuEnabledInput" name="gpu_enabled_check"
                               {{ $settings['gpu_enabled'] === 'true' ? 'checked' : '' }}>
                        <span class="toggle-track"></span>
                        <span class="toggle-thumb"></span>
                    </span>
                    <span class="toggle-label" id="gpuEnabledLabel">
                        {{ $settings['gpu_enabled'] === 'true' ? 'Enabled' : 'Disabled' }}
                    </span>
                </label>
                <input type="hidden" name="gpu_enabled" id="gpuEnabledHidden"
                       value="{{ $settings['gpu_enabled'] }}">
            </div>
        </div>

        <input type="hidden" name="gpu_device" id="gpuDeviceInput" value="{{ $settings['gpu_device'] }}">

        <div class="setting-row" id="gpuEncoderRow">
            <div class="setting-label">
                <strong>Video encoder</strong>
                <small>h264_nvenc is broadly compatible. hevc_nvenc produces smaller files (H.265) but requires compatible players. libx264 forces CPU encoding regardless of the toggle above.</small>
            </div>
            <div class="setting-control">
                <div class="enc-grid">
                    @foreach([
                        ['h264_nvenc', 'H.264 NVENC', 'GPU · max compatibility'],
                        ['hevc_nvenc', 'H.265 NVENC', 'GPU · smaller files'],
                        ['libx264',   'libx264',      'CPU · software fallback'],
                    ] as [$val, $label, $desc])
                    <button type="button"
                            class="enc-card {{ $settings['gpu_encoder'] === $val ? 'selected' : '' }}"
                            data-encoder="{{ $val }}"
                            onclick="selectEncoder(this)">
                        <span class="enc-card-name">{{ $label }}</span>
                        <span class="enc-card-desc">{{ $desc }}</span>
                    </button>
                    @endforeach
                </div>
                <input type="hidden" name="gpu_encoder" id="gpuEncoderInput" value="{{ $settings['gpu_encoder'] }}">
            </div>
        </div>

        <div class="setting-row" id="gpuPresetRow">
            <div class="setting-label">
                <strong>Encoding preset</strong>
                <small>NVENC presets: p1 (fastest) → p7 (best quality). libx264 presets: fast / medium / slow. Preset only affects speed vs file size; quality is controlled by CQ/CRF.</small>
            </div>
            <div class="setting-control">
                <select name="gpu_preset" class="adm-select-full" id="gpuPresetSelect">
                    <optgroup label="NVENC (GPU)">
                        @foreach(['p1','p2','p3','p4','p5','p6','p7'] as $p)
                        <option value="{{ $p }}" {{ $settings['gpu_preset'] === $p ? 'selected' : '' }}>
                            {{ $p }}{{ $p === 'p4' ? ' — recommended' : '' }}
                        </option>
                        @endforeach
                    </optgroup>
                    <optgroup label="libx264 (CPU)">
                        @foreach(['fast','medium','slow'] as $p)
                        <option value="{{ $p }}" {{ $settings['gpu_preset'] === $p ? 'selected' : '' }}>
                            {{ $p }}
                        </option>
                        @endforeach
                    </optgroup>
                </select>
            </div>
        </div>

        <div class="setting-row" id="gpuHwaccelRow">
            <div class="setting-label">
                <strong>Hardware decode acceleration</strong>
                <small>Use CUDA to decode the source video on the GPU before re-encoding, speeding up the pipeline. Disable if you see CUDA errors in the logs.</small>
            </div>
            <div class="setting-control">
                <select name="gpu_hwaccel" class="adm-select-full">
                    <option value="cuda" {{ $settings['gpu_hwaccel'] === 'cuda' ? 'selected' : '' }}>cuda — GPU decode</option>
                    <option value="none" {{ $settings['gpu_hwaccel'] === 'none' ? 'selected' : '' }}>none — CPU decode</option>
                </select>
            </div>
        </div>

        <div class="setting-row">
            <div class="setting-label">
                <strong>FFmpeg binary path</strong>
                <small>
                    Absolute path to the <code>ffmpeg</code> executable.
                    Change this to use a newer build (e.g. <code>/usr/lib/jellyfin-ffmpeg/ffmpeg</code>)
                    that supports your GPU driver. Current: <code>{{ config('ffmpeg.ffmpeg', '/usr/bin/ffmpeg') }}</code>
                </small>
            </div>
            <div class="setting-control">
                <input type="text" name="ffmpeg_binary" class="adm-input-full"
                       value="{{ $settings['ffmpeg_binary'] }}"
                       placeholder="/usr/bin/ffmpeg">
            </div>
        </div>

    </div>
</div>

<div class="save-bar">
    <a href="{{ route('admin.dashboard') }}" class="adm-btn">Cancel</a>
    <button type="submit" class="adm-btn adm-btn-primary">
        <i class="bi bi-floppy"></i> Save GPU Settings
    </button>
</div>

</form>
@endsection

@section('scripts')
<script>
function selectGpuCard(el) {
    document.querySelectorAll('.gpu-card').forEach(c => c.classList.remove('selected'));
    el.classList.add('selected');
    document.getElementById('gpuDeviceInput').value = el.dataset.index;
}

function selectEncoder(el) {
    document.querySelectorAll('.enc-card').forEach(c => c.classList.remove('selected'));
    el.classList.add('selected');
    document.getElementById('gpuEncoderInput').value = el.dataset.encoder;
    const isCpu = el.dataset.encoder === 'libx264';
    document.getElementById('gpuPresetSelect').value = isCpu ? 'fast' : 'p4';
}

const gpuToggle = document.getElementById('gpuEnabledInput');
const gpuHidden = document.getElementById('gpuEnabledHidden');
const gpuLabel  = document.getElementById('gpuEnabledLabel');
function applyGpuToggle() {
    const on = gpuToggle.checked;
    gpuHidden.value  = on ? 'true' : 'false';
    gpuLabel.textContent = on ? 'Enabled' : 'Disabled';
}
gpuToggle.addEventListener('change', applyGpuToggle);

async function detectGpus() {
    const btn  = document.getElementById('detectBtn');
    const icon = document.getElementById('detectIcon');
    btn.disabled = true;
    icon.className = 'bi bi-arrow-repeat spin';

    try {
        const res  = await fetch('{{ route('admin.settings.detect-gpu') }}');
        const data = await res.json();
        const gpus = data.gpus || [];
        const wrap = document.getElementById('gpuCardsWrap');
        const chip = document.getElementById('gpuStatusChip');
        const selectedDevice = parseInt(document.getElementById('gpuDeviceInput').value);

        if (gpus.length === 0) {
            wrap.innerHTML = '<div class="no-gpu-state"><i class="bi bi-gpu-card"></i><p>No NVIDIA GPUs detected.</p></div>';
            chip.innerHTML = '<span class="chip chip-red"><span class="chip-dot"></span> No GPU detected</span>';
        } else {
            chip.innerHTML = `<span class="chip chip-green"><span class="chip-dot"></span> ${gpus.length} GPU${gpus.length > 1 ? 's' : ''} detected</span>`;
            wrap.innerHTML = buildGpuCards(gpus, selectedDevice);
        }
    } catch (e) { console.error(e); }

    btn.disabled = false;
    icon.className = 'bi bi-arrow-repeat';
}

function buildGpuCards(gpus, selectedDevice) {
    if (!gpus.length) return '';
    const grid = document.createElement('div');
    grid.className = 'gpu-grid';
    gpus.forEach(gpu => {
        const used    = gpu.mem_total - gpu.mem_free;
        const usedPct = Math.round((used / gpu.mem_total) * 100);
        const sel     = gpu.index === selectedDevice;
        const card    = document.createElement('div');
        card.className = 'gpu-card' + (sel ? ' selected' : '');
        card.dataset.index = gpu.index;
        card.onclick = function() { selectGpuCard(this); };
        card.innerHTML = `
            <div class="gpu-card-check">${sel ? '<i class="bi bi-check"></i>' : ''}</div>
            <div class="gpu-card-name">${escHtml(gpu.name)}</div>
            <div class="gpu-stat"><span>VRAM</span><span class="gpu-stat-val">${gpu.mem_total.toLocaleString()} MB</span></div>
            <div class="gpu-stat"><span>Free</span><span class="gpu-stat-val">${gpu.mem_free.toLocaleString()} MB</span></div>
            <div class="gpu-stat"><span>GPU Load</span><span class="gpu-stat-val">${gpu.util}%</span></div>
            <div class="gpu-stat"><span>Temp</span><span class="gpu-stat-val">${gpu.temp} °C</span></div>
            <div class="gpu-stat"><span>Driver</span><span class="gpu-stat-val">${escHtml(gpu.driver)}</span></div>
            <div class="mem-bar-wrap"><div class="mem-bar-track"><div class="mem-bar-fill" style="width:${usedPct}%"></div></div></div>`;
        grid.appendChild(card);
    });
    return grid.outerHTML;
}

function escHtml(s) {
    return String(s).replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;').replace(/"/g,'&quot;');
}
</script>
@endsection