templates/vision.html

{% extends "base.html" %}

{% block title %}Radiant AI - Computer Vision{% endblock %}
{% block page_title %}Computer Vision Hub{% endblock %}

{% block content %}
<style>
    .vision-layout { display: grid; grid-template-columns: 300px 1fr; gap: 25px; height: 100%; }
    .tool-card { background: var(--glass-bg); border: 1px solid var(--glass-border); padding: 15px; border-radius: 16px; margin-bottom: 20px; }
    .tool-title { font-weight: 600; margin-bottom: 8px; display: flex; align-items: center; gap: 10px; font-size: 0.95rem; }
    .tool-icon { font-size: 1.4rem; color: var(--primary-cyan); }
    .tool-desc { font-size: 0.8rem; color: var(--text-gray); margin-bottom: 15px; }
    .color-picker-row { display: flex; align-items: center; gap: 10px; background: rgba(0,0,0,0.2); padding: 8px; border-radius: 8px; margin-bottom: 10px; }
    input[type="color"] { -webkit-appearance: none; border: none; width: 32px; height: 32px; cursor: pointer; background: none; }
    .canvas-area { position: relative; background: radial-gradient(circle at center, #1a1a24 0%, #0d0d12 100%); border-radius: 20px; border: 1px solid var(--glass-border); display: flex; align-items: center; justify-content: center; overflow: hidden; }
    #visionPreview { max-width: 95%; max-height: 95%; object-fit: contain; display: none; }
    .results-overlay { position: absolute; top: 20px; left: 20px; background: rgba(0,0,0,0.8); padding: 15px; border-radius: 12px; color: white; display: none; max-width: 250px; }
    .processing-badge { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); background: rgba(0,0,0,0.9); color: var(--primary-cyan); padding: 15px 30px; border-radius: 50px; border: 1px solid var(--primary-cyan); display: none; align-items: center; gap: 10px; z-index: 10; }
    .action-bar { position: absolute; bottom: 20px; right: 20px; display: flex; gap: 10px; background: rgba(0,0,0,0.6); padding: 10px; border-radius: 12px; }
    
    /* Checkbox Style */
    .chain-control { display: flex; align-items: center; gap: 10px; background: rgba(189, 0, 255, 0.1); padding: 10px; border-radius: 8px; border: 1px solid rgba(189, 0, 255, 0.3); margin-bottom: 15px; }
    .chain-control input { width: 18px; height: 18px; accent-color: #bd00ff; cursor: pointer; }
    .chain-control label { font-size: 0.9rem; color: #bd00ff; cursor: pointer; font-weight: 500; }
</style>

<div class="vision-layout">
    
    <aside class="controls-panel">
        <div class="tool-card">
            <input type="file" id="visionFileInput" accept="image/*" hidden>
            <button class="btn btn-secondary" style="width: 100%;" onclick="document.getElementById('visionFileInput').click()">
                <i class="ph ph-upload-simple"></i> Upload Source
            </button>
        </div>

        <div class="chain-control">
            <input type="checkbox" id="visionChainingCheckbox">
            <label for="visionChainingCheckbox">Apply on Previous Result</label>
        </div>

        <div class="tool-card">
            <div class="tool-title"><i class="ph-duotone ph-scan tool-icon"></i> Detection</div>
            <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 10px;">
                <button class="btn btn-secondary" onclick="runVisionTask('yolo')">Objects</button>
                <button class="btn btn-secondary" onclick="runVisionTask('pose')">Pose (Body)</button>
            </div>
        </div>

        <div class="tool-card">
            <div class="tool-title"><i class="ph-duotone ph-sliders-horizontal tool-icon" style="color: #bd00ff;"></i> Utilities</div>
            <button class="btn btn-secondary" onclick="runVisionTask('remove_bg')" style="width: 100%; margin-bottom: 10px;">Remove BG</button>
            
            <div class="color-picker-row">
                <input type="color" id="bgColorPicker" value="#ffffff">
                <button class="btn btn-secondary" onclick="runVisionTask('replace_bg')" style="flex:1; padding: 5px;">Replace BG</button>
            </div>

            <button class="btn btn-secondary" onclick="runVisionTask('doc_scanner')" style="width: 100%;">Doc Scanner</button>
        </div>

        <div class="tool-card">
            <div class="tool-title"><i class="ph-duotone ph-eye-slash tool-icon"></i> Privacy</div>
            <div style="display: flex; gap: 10px; align-items: center; margin-bottom: 10px;">
                <input type="range" id="blurSlider" min="5" max="100" value="30" style="flex:1;">
            </div>
            <button class="btn btn-secondary" onclick="runVisionTask('face_blur')" style="width: 100%;">Blur Faces</button>
            <button class="btn btn-secondary" onclick="runVisionTask('canny_edge')" style="width: 100%; margin-top: 10px;">Edge Detect</button>
        </div>
    </aside>

    <main class="canvas-area">
        <div id="visionLoading" class="processing-badge"><i class="ph ph-spinner ph-spin"></i> AI Processing...</div>
        <div id="visionPlaceholder" class="upload-placeholder">
            <i class="ph ph-eye" style="font-size: 3rem; opacity: 0.5; margin-bottom: 10px;"></i>
            <h3>Computer Vision</h3>
            <p>Select a tool to analyze the image</p>
        </div>
        <img id="visionPreview" src="" alt="AI Result">
        <div id="visionOverlay" class="results-overlay">
            <strong style="color: var(--primary-cyan); display: block; margin-bottom: 5px;">Detections:</strong>
            <ul id="detectionList" style="list-style: none; padding-left: 0;"></ul>
        </div>
        <div class="action-bar" id="visionActionBar" style="display: none;">
            <a id="visionDownload" href="#" download="radiant_vision.png" class="btn btn-primary"><i class="ph ph-download-simple"></i> Download</a>
        </div>
    </main>
</div>
{% endblock %}