Spaces:
Sleeping
Sleeping
| {% extends "base.html" %} | |
| {% block title %}Radiant AI - Studio{% endblock %} | |
| {% block page_title %}Image Studio{% endblock %} | |
| {% block content %} | |
| <style> | |
| .studio-layout { display: grid; grid-template-columns: 320px 1fr; gap: 25px; height: 100%; min-height: 0; } | |
| .controls-panel { display: flex; flex-direction: column; gap: 20px; overflow-y: auto; padding-right: 5px; } | |
| .icon-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; } | |
| .range-wrap { margin-bottom: 15px; } | |
| .range-header { display: flex; justify-content: space-between; font-size: 0.85rem; margin-bottom: 8px; color: var(--text-gray); } | |
| .filter-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; } | |
| .filter-btn { background: rgba(255, 255, 255, 0.05); border: 1px solid transparent; padding: 8px; border-radius: 8px; color: var(--text-gray); cursor: pointer; font-size: 0.85rem; transition: all 0.2s; text-align: center; } | |
| .filter-btn:hover { background: rgba(255, 255, 255, 0.1); color: white; } | |
| .filter-btn.active { background: rgba(0, 242, 255, 0.15); border-color: var(--primary-cyan); color: var(--primary-cyan); } | |
| .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; } | |
| #imagePreview { max-width: 95%; max-height: 90%; object-fit: contain; border-radius: 4px; box-shadow: 0 0 40px rgba(0,0,0,0.5); } | |
| .action-bar { position: absolute; bottom: 20px; right: 20px; display: flex; gap: 10px; background: rgba(0,0,0,0.6); padding: 10px; border-radius: 12px; backdrop-filter: blur(10px); } | |
| /* Checkbox Style */ | |
| .chain-control { display: flex; align-items: center; gap: 10px; background: rgba(0, 242, 255, 0.1); padding: 10px; border-radius: 8px; border: 1px solid rgba(0, 242, 255, 0.3); margin-bottom: 15px; } | |
| .chain-control input { width: 18px; height: 18px; accent-color: var(--primary-cyan); cursor: pointer; } | |
| .chain-control label { font-size: 0.9rem; color: var(--primary-cyan); cursor: pointer; font-weight: 500; } | |
| </style> | |
| <div class="studio-layout"> | |
| <aside class="controls-panel"> | |
| <div class="glass-panel" style="padding: 20px;"> | |
| <div class="tool-header">Source</div> | |
| <input type="file" id="fileInput" accept="image/*" hidden> | |
| <button class="btn btn-secondary" style="width: 100%;" onclick="document.getElementById('fileInput').click()"> | |
| <i class="ph ph-upload-simple"></i> Upload Image | |
| </button> | |
| </div> | |
| <div class="chain-control"> | |
| <input type="checkbox" id="studioChainingCheckbox" onchange="toggleStudioChaining(this)"> | |
| <label for="studioChainingCheckbox">Bake Edits (Chain)</label> | |
| </div> | |
| <div class="glass-panel" style="padding: 20px;"> | |
| <div class="tool-header">Adjustments</div> | |
| <div class="range-wrap"> | |
| <div class="range-header"><span>Brightness</span> <span id="val-brightness">0</span></div> | |
| <input type="range" id="brightness" min="-100" max="100" value="0" oninput="handleSliderChange('brightness', this.value)"> | |
| </div> | |
| <div class="range-wrap"> | |
| <div class="range-header"><span>Contrast</span> <span id="val-contrast">0</span></div> | |
| <input type="range" id="contrast" min="-100" max="100" value="0" oninput="handleSliderChange('contrast', this.value)"> | |
| </div> | |
| <div class="range-wrap"> | |
| <div class="range-header"><span>Saturation</span> <span id="val-saturation">0</span></div> | |
| <input type="range" id="saturation" min="-100" max="100" value="0" oninput="handleSliderChange('saturation', this.value)"> | |
| </div> | |
| <div class="range-wrap"> | |
| <div class="range-header"><span>Sharpness</span> <span id="val-sharpness">0</span></div> | |
| <input type="range" id="sharpness" min="0" max="100" value="0" oninput="handleSliderChange('sharpness', this.value)"> | |
| </div> | |
| </div> | |
| <div class="glass-panel" style="padding: 20px;"> | |
| <div class="tool-header">Geometry</div> | |
| <div class="icon-grid"> | |
| <button class="filter-btn" onclick="triggerAutoApply('rotate_left')"><i class="ph ph-arrow-counter-clockwise"></i> -90°</button> | |
| <button class="filter-btn" onclick="triggerAutoApply('rotate_right')"><i class="ph ph-arrow-clockwise"></i> +90°</button> | |
| <button class="filter-btn" onclick="triggerAutoApply('flip_h')"><i class="ph ph-arrows-left-right"></i> Flip H</button> | |
| <button class="filter-btn" onclick="triggerAutoApply('flip_v')"><i class="ph ph-arrows-down-up"></i> Flip V</button> | |
| </div> | |
| </div> | |
| <div class="glass-panel" style="padding: 20px;"> | |
| <div class="tool-header">Filters</div> | |
| <div class="filter-grid"> | |
| <button class="filter-btn active" onclick="handleFilterClick('none')">Normal</button> | |
| <button class="filter-btn" onclick="handleFilterClick('grayscale')">B&W</button> | |
| <button class="filter-btn" onclick="handleFilterClick('sepia')">Sepia</button> | |
| <button class="filter-btn" onclick="handleFilterClick('sketch')">Sketch</button> | |
| <button class="filter-btn" onclick="handleFilterClick('cartoon')">Cartoon</button> | |
| <button class="filter-btn" onclick="handleFilterClick('hdr')">HDR</button> | |
| <button class="filter-btn" onclick="handleFilterClick('cyberpunk')">Cyberpunk</button> | |
| <button class="filter-btn" onclick="handleFilterClick('summer')">Summer</button> | |
| <button class="filter-btn" onclick="handleFilterClick('winter')">Winter</button> | |
| <button class="filter-btn" onclick="handleFilterClick('posterize')">Posterize</button> | |
| <button class="filter-btn" onclick="handleFilterClick('negative')">Negative</button> | |
| <button class="filter-btn" onclick="handleFilterClick('emboss')">Emboss</button> | |
| <button class="filter-btn" onclick="handleFilterClick('blur')">Blur</button> | |
| <button class="filter-btn" onclick="handleFilterClick('sharpen_filter')">X-Sharp</button> | |
| </div> | |
| </div> | |
| </aside> | |
| <main class="canvas-area"> | |
| <div style="position: absolute; top: 20px; left: 20px; z-index: 10; display: flex; gap: 10px;"> | |
| <button class="btn btn-secondary" onclick="undoEdit()" title="Undo (Ctrl+Z)"> | |
| <i class="ph ph-arrow-u-up-left"></i> Undo | |
| </button> | |
| <button class="btn btn-secondary" onclick="redoEdit()" title="Redo (Ctrl+Y)"> | |
| <i class="ph ph-arrow-u-up-right"></i> Redo | |
| </button> | |
| </div> | |
| <div id="placeholderState" class="upload-placeholder"> | |
| <i class="ph ph-image" style="font-size: 3rem;"></i> | |
| <h3>No Image Selected</h3> | |
| <p>Upload an image to start editing</p> | |
| </div> | |
| <div style="flex: 1; display: flex; align-items: center; justify-content: center; width: 100%; overflow: hidden; position: relative;"> | |
| <div id="processingOverlay" style="position: absolute; inset: 0; background: rgba(0,0,0,0.5); backdrop-filter: blur(2px); display: none; align-items: center; justify-content: center; z-index: 20;"> | |
| <div style="background: #000; padding: 15px 25px; border-radius: 30px; color: var(--primary-cyan); display: flex; align-items: center; gap: 10px; border: 1px solid var(--primary-cyan);"> | |
| <i class="ph ph-spinner ph-spin" style="font-size: 1.2rem;"></i> Rendering... | |
| </div> | |
| </div> | |
| <img id="imagePreview" src="" alt="Preview" style="display: none;"> | |
| </div> | |
| <div class="action-bar" id="actionBar" style="display: none;"> | |
| <button class="btn btn-secondary" onclick="resetOriginal()"> | |
| <i class="ph ph-arrow-counter-clockwise"></i> Reset Original | |
| </button> | |
| <a id="downloadLink" href="#" download="radiant_edit.png" class="btn btn-primary" style="background: var(--primary-cyan); color: #000;"> | |
| <i class="ph ph-download-simple"></i> Download | |
| </a> | |
| </div> | |
| </main> | |
| </div> | |
| {% endblock %} |