Initial commit with LFS models

.gitattributes

@@ -0,0 +1,36 @@
+*.7z filter=lfs diff=lfs merge=lfs -text
+*.arrow filter=lfs diff=lfs merge=lfs -text
+*.bin filter=lfs diff=lfs merge=lfs -text
+*.bz2 filter=lfs diff=lfs merge=lfs -text
+*.ckpt filter=lfs diff=lfs merge=lfs -text
+*.ftz filter=lfs diff=lfs merge=lfs -text
+*.gz filter=lfs diff=lfs merge=lfs -text
+*.h5 filter=lfs diff=lfs merge=lfs -text
+*.joblib filter=lfs diff=lfs merge=lfs -text
+*.lfs.* filter=lfs diff=lfs merge=lfs -text
+*.mlmodel filter=lfs diff=lfs merge=lfs -text
+*.model filter=lfs diff=lfs merge=lfs -text
+*.msgpack filter=lfs diff=lfs merge=lfs -text
+*.npy filter=lfs diff=lfs merge=lfs -text
+*.npz filter=lfs diff=lfs merge=lfs -text
+*.onnx filter=lfs diff=lfs merge=lfs -text
+*.ot filter=lfs diff=lfs merge=lfs -text
+*.parquet filter=lfs diff=lfs merge=lfs -text
+*.pb filter=lfs diff=lfs merge=lfs -text
+*.pickle filter=lfs diff=lfs merge=lfs -text
+*.pkl filter=lfs diff=lfs merge=lfs -text
+*.pt filter=lfs diff=lfs merge=lfs -text
+*.pth filter=lfs diff=lfs merge=lfs -text
+*.rar filter=lfs diff=lfs merge=lfs -text
+*.safetensors filter=lfs diff=lfs merge=lfs -text
+saved_model/**/* filter=lfs diff=lfs merge=lfs -text
+*.tar.* filter=lfs diff=lfs merge=lfs -text
+*.tar filter=lfs diff=lfs merge=lfs -text
+*.tflite filter=lfs diff=lfs merge=lfs -text
+*.tgz filter=lfs diff=lfs merge=lfs -text
+*.wasm filter=lfs diff=lfs merge=lfs -text
+*.xz filter=lfs diff=lfs merge=lfs -text
+*.zip filter=lfs diff=lfs merge=lfs -text
+*.zst filter=lfs diff=lfs merge=lfs -text
+*tfevents* filter=lfs diff=lfs merge=lfs -text
+*.caffemodel filter=lfs diff=lfs merge=lfs -text

Dockerfile

@@ -0,0 +1,37 @@
+# 1. Base image
+FROM python:3.9-slim
+
+# 2. Create non-root user (HF requirement)
+RUN useradd -m -u 1000 user
+USER user
+
+# 3. Environment
+ENV PATH="/home/user/.local/bin:$PATH"
+WORKDIR /app
+
+# 4. System dependencies (OpenCV + git)
+USER root
+RUN apt-get update && apt-get install -y \
+    libgl1-mesa-glx \
+    libglib2.0-0 \
+    git \
+    && rm -rf /var/lib/apt/lists/*
+USER user
+
+# 5. Copy requirements first (cache-friendly)
+COPY --chown=user requirements.txt .
+
+# 6. Install Python dependencies
+RUN pip install --no-cache-dir -r requirements.txt
+
+# 7. Copy application code
+COPY --chown=user . .
+
+# 8. Create upload directory safely
+RUN mkdir -p static/uploads
+
+# 9. Hugging Face port
+EXPOSE 7860
+
+# 10. Production server
+CMD ["gunicorn", "-b", "0.0.0.0:7860", "app:app"]

README.md

@@ -0,0 +1,12 @@
+---
+title: Radiant Ai
+emoji: ⚡
+colorFrom: gray
+colorTo: red
+sdk: docker
+pinned: false
+license: openrail
+short_description: Advance AI Image Editor and Processor
+---
+
+Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

app.py

@@ -0,0 +1,249 @@
+import os
+import time
+from flask import Flask, render_template, request, jsonify, send_from_directory
+from werkzeug.utils import secure_filename
+
+# Import Services (We will create these next)
+# Note: Ensure empty __init__.py exists in services/ folder
+from services.studio import StudioService
+from services.vision import VisionService
+from services.ai_studio import AIStudioService
+from services.utilities import UtilitiesService
+
+# Initialize Flask App
+app = Flask(__name__)
+
+# --- Configuration ---
+UPLOAD_FOLDER = 'static/uploads'
+ALLOWED_EXTENSIONS = {'png', 'jpg', 'jpeg', 'webp', 'bmp'}
+
+app.config['UPLOAD_FOLDER'] = UPLOAD_FOLDER
+app.config['MAX_CONTENT_LENGTH'] = 32 * 1024 * 1024  # Increased to 32MB for high-res images
+app.secret_key = 'radiant_secret_key_dev'
+
+# Ensure upload directory exists
+os.makedirs(app.config['UPLOAD_FOLDER'], exist_ok=True)
+
+# Initialize Service Instances
+studio_service = StudioService()
+vision_service = VisionService()
+ai_service = AIStudioService()
+utilities_service = UtilitiesService()
+
+# --- Helpers ---
+def allowed_file(filename):
+    return '.' in filename and \
+           filename.rsplit('.', 1)[1].lower() in ALLOWED_EXTENSIONS
+
+def get_file_path(filename):
+    return os.path.join(app.config['UPLOAD_FOLDER'], secure_filename(filename))
+
+def generate_output_filename(original_filename, prefix="processed"):
+    timestamp = int(time.time())
+    name, ext = os.path.splitext(original_filename)
+    return f"{prefix}_{timestamp}_{name}{ext}"
+
+# --- Page Routes (Frontend) ---
+
+@app.route('/')
+def index():
+    return render_template('onboarding.html')
+
+@app.route('/studio')
+def studio():
+    return render_template('studio.html')
+
+@app.route('/vision')
+def vision():
+    return render_template('vision.html')
+
+@app.route('/ai-studio')
+def ai_studio():
+    return render_template('ai_studio.html')
+
+@app.route('/utilities')
+def utilities():
+    return render_template('utilities.html')
+
+@app.route('/about')
+def about():
+    return render_template('about.html')
+
+#@app.route('/products')
+#def products():
+#    return render_template('products.html')
+
+@app.route('/docs')
+def docs():
+    return render_template('docs.html')
+
+@app.route('/download')
+def download():
+    return render_template('download.html')
+
+
+
+
+
+# --- API: Core Upload ---
+
+@app.route('/api/upload', methods=['POST'])
+def upload_file():
+    if 'file' not in request.files:
+        return jsonify({'success': False, 'error': 'No file part'}), 400
+    
+    file = request.files['file']
+    if file.filename == '':
+        return jsonify({'success': False, 'error': 'No selected file'}), 400
+    
+    if file and allowed_file(file.filename):
+        # Create unique filename
+        filename = secure_filename(f"{int(time.time())}_{file.filename}")
+        filepath = os.path.join(app.config['UPLOAD_FOLDER'], filename)
+        file.save(filepath)
+        
+        return jsonify({
+            'success': True,
+            'filename': filename,
+            'url': f"/static/uploads/{filename}"
+        })
+    
+    return jsonify({'success': False, 'error': 'Invalid file type'}), 400
+
+# --- API: Studio (Image Editing) ---
+
+@app.route('/api/process-studio', methods=['POST'])
+def process_studio():
+    try:
+        data = request.json
+        filename = data.get('filename')
+        options = data.get('options') # Contains brightness, contrast, filter, etc.
+
+        if not filename or not options:
+            return jsonify({'success': False, 'error': 'Missing parameters'}), 400
+
+        input_path = get_file_path(filename)
+        output_filename = generate_output_filename(filename, "edit")
+        output_path = os.path.join(app.config['UPLOAD_FOLDER'], output_filename)
+
+        # Call Service
+        success, result = studio_service.process_request(input_path, output_path, options)
+
+        if success:
+            return jsonify({
+                'success': True, 
+                'url': f"/static/uploads/{output_filename}", 
+                'filename': output_filename
+            })
+        else:
+            return jsonify({'success': False, 'error': str(result)}), 500
+
+    except Exception as e:
+        return jsonify({'success': False, 'error': str(e)}), 500
+
+# --- API: Vision (YOLO, BG Remove) ---
+
+@app.route('/api/process-vision', methods=['POST'])
+def process_vision():
+    try:
+        data = request.json
+        filename = data.get('filename')
+        task = data.get('task')
+        # extra options like 'color' for bg replacement or 'value' for blur intensity
+        options = data 
+
+        if not filename or not task:
+            return jsonify({'success': False, 'error': 'Missing parameters'}), 400
+
+        input_path = get_file_path(filename)
+        output_filename = generate_output_filename(filename, f"vision_{task}")
+        output_path = os.path.join(app.config['UPLOAD_FOLDER'], output_filename)
+
+        success, result_meta = vision_service.process_request(input_path, output_path, task, options)
+
+        if success:
+            response = {
+                'success': True,
+                'url': f"/static/uploads/{output_filename}",
+                'filename': output_filename
+            }
+            # Add detections if they exist (for YOLO)
+            if isinstance(result_meta, dict) and 'detections' in result_meta:
+                response['detections'] = result_meta['detections']
+            return jsonify(response)
+        else:
+            return jsonify({'success': False, 'error': str(result_meta)}), 500
+
+    except Exception as e:
+        return jsonify({'success': False, 'error': str(e)}), 500
+
+# --- API: AI Studio (Colorize, Upscale) ---
+
+@app.route('/api/process-ai', methods=['POST'])
+def process_ai():
+    try:
+        data = request.json
+        filename = data.get('filename')
+        task = data.get('task')
+
+        if not filename or not task:
+            return jsonify({'success': False, 'error': 'Missing parameters'}), 400
+
+        input_path = get_file_path(filename)
+        output_filename = generate_output_filename(filename, f"ai_{task}")
+        output_path = os.path.join(app.config['UPLOAD_FOLDER'], output_filename)
+
+        success, result = ai_service.process_request(input_path, output_path, task)
+
+        if success:
+            return jsonify({
+                'success': True, 
+                'url': f"/static/uploads/{output_filename}", 
+                'filename': output_filename
+            })
+        else:
+            return jsonify({'success': False, 'error': str(result)}), 500
+
+    except Exception as e:
+        return jsonify({'success': False, 'error': str(e)}), 500
+
+# --- API: Utilities (Convert, Resize) ---
+
+@app.route('/api/process-utility', methods=['POST'])
+def process_utility():
+    try:
+        data = request.json
+        filename = data.get('filename')
+        # Service handles specific logic internally
+        
+        input_path = get_file_path(filename)
+        # Output directory is passed so service can generate name based on format
+        output_dir = app.config['UPLOAD_FOLDER']
+
+        success, result = utilities_service.process_request(input_path, output_dir, data)
+
+        if success:
+            if data.get('action') == 'metadata':
+                return jsonify({'success': True, 'metadata': result})
+            else:
+                return jsonify({
+                    'success': True, 
+                    'url': f"/static/uploads/{result}", 
+                    'filename': result
+                })
+        else:
+            return jsonify({'success': False, 'error': str(result)}), 500
+
+    except Exception as e:
+        return jsonify({'success': False, 'error': str(e)}), 500
+
+# --- Serve Static Files (Images) ---
+@app.route('/static/uploads/<filename>')
+def uploaded_file(filename):
+    return send_from_directory(app.config['UPLOAD_FOLDER'], filename)
+
+if __name__ == '__main__':
+    return "Radiant AI running on Hugging Face 🚀"
+    #print("🚀 Radiant AI Server Starting...")
+    #app.run(debug=True, port=5000)
+    #app.run(host='0.0.0.0', port=7860)

models/EDSR_x4.pb

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:dd35ce3cae53ecee2d16045e08a932c3e7242d641bb65cb971d123e06904347f
+size 38573255

models/colorization_release_v2.caffemodel

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:f5af1e602646328c792e1094f9876fe9cd4c09ac46fa886e5708a1abc89137b1
+size 128946764

models/pts_in_hull.npy

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:b5dec01315c34f43f1c8c089e84c45ae35d1838d8e77ed0e7ca930f79ffa450e
+size 5088

models/u2net.onnx

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:8d10d2f3bb75ae3b6d527c77944fc5e7dcd94b29809d47a739a7a728a912b491
+size 175997641

models/yolov8n-pose.pt

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:c6fa93dd1ee4a2c18c900a45c1d864a1c6f7aba75d84f91648a30b7fb641d212
+size 6832633

models/yolov8n.pt

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:31e20dde3def09e2cf938c7be6fe23d9150bbbe503982af13345706515f2ef95
+size 6534387

requirements.txt

@@ -0,0 +1,23 @@
+Flask==3.0.0
+opencv-python-headless==4.9.0.80
+numpy==1.26.2
+Pillow==10.1.0
+rembg==2.0.50
+ultralytics==8.0.227
+werkzeug==3.0.1
+onnxruntime==1.16.3
+scikit-image==0.22.0
+gunicorn
+# Note: TensorFlow removed to save space (OpenCV handles the .pb models)
+# Note: Torch is installed automatically as a dependency of Ultralytics
+
+#flask
+#opencv-python-headless
+#numpy
+#pillow
+#torch
+#ultralytics
+#rembg
+#onnxruntime
+#scikit-image
+#tensorflow

services/ai_studio.py

@@ -0,0 +1,113 @@
+import os
+import cv2
+import numpy as np
+from cv2 import dnn_superres
+
+class AIStudioService:
+    """
+    Handles Deep Learning tasks:
+    - Colorization (Caffe)
+    - Super Resolution (EDSR x4)
+    - Restoration (Denoising)
+    """
+
+    def __init__(self):
+        self.models_dir = 'models'
+        
+        # Colorization Paths
+        self.proto_path = os.path.join(self.models_dir, 'colorization_deploy_v2.prototxt')
+        self.model_path = os.path.join(self.models_dir, 'colorization_release_v2.caffemodel')
+        self.points_path = os.path.join(self.models_dir, 'pts_in_hull.npy')
+
+        # Super Resolution Path
+        self.edsr_path = os.path.join(self.models_dir, 'EDSR_x4.pb')
+
+    def process_request(self, image_path, output_path, task):
+        try:
+            if not os.path.exists(image_path):
+                raise FileNotFoundError("Input file not found")
+
+            if task == 'colorize':
+                return self._colorize_image(image_path, output_path)
+            elif task == 'upscale':
+                return self._upscale_image(image_path, output_path)
+            elif task == 'restore':
+                return self._restore_image(image_path, output_path)
+            else:
+                raise ValueError(f"Unknown AI task: {task}")
+        
+        except Exception as e:
+            print(f"AI Service Error: {e}")
+            return False, str(e)
+
+    def _colorize_image(self, input_path, output_path):
+        if not os.path.exists(self.model_path):
+            raise FileNotFoundError("Colorization models missing")
+
+        net = cv2.dnn.readNetFromCaffe(self.proto_path, self.model_path)
+        pts = np.load(self.points_path)
+
+        class8 = net.getLayerId("class8_ab")
+        conv8 = net.getLayerId("conv8_313_rh")
+        pts = pts.transpose().reshape(2, 313, 1, 1)
+        
+        net.getLayer(class8).blobs = [pts.astype("float32")]
+        net.getLayer(conv8).blobs = [np.full([1, 313], 2.606, dtype="float32")]
+
+        img = cv2.imread(input_path)
+        normalized = img.astype("float32") / 255.0
+        lab = cv2.cvtColor(normalized, cv2.COLOR_BGR2LAB)
+        
+        resized = cv2.resize(lab, (224, 224))
+        L = cv2.split(resized)[0]
+        L -= 50
+
+        net.setInput(cv2.dnn.blobFromImage(L))
+        ab = net.forward()[0, :, :, :].transpose((1, 2, 0))
+        ab = cv2.resize(ab, (img.shape[1], img.shape[0]))
+
+        L_orig = cv2.split(lab)[0]
+        colorized = np.concatenate((L_orig[:, :, np.newaxis], ab), axis=2)
+        colorized = cv2.cvtColor(colorized, cv2.COLOR_LAB2BGR)
+        colorized = np.clip(colorized, 0, 1)
+        
+        colorized = (255 * colorized).astype("uint8")
+        cv2.imwrite(output_path, colorized)
+        
+        return True, output_path
+
+    def _upscale_image(self, input_path, output_path):
+        if not os.path.exists(self.edsr_path):
+            raise FileNotFoundError("EDSR_x4.pb model missing")
+
+        img = cv2.imread(input_path)
+        h, w = img.shape[:2]
+
+        # Safety Check: Resize if too big before upscaling
+        max_dim = 1024
+        if max(h, w) > max_dim:
+            scale = max_dim / max(h, w)
+            new_w, new_h = int(w * scale), int(h * scale)
+            img = cv2.resize(img, (new_w, new_h), interpolation=cv2.INTER_AREA)
+
+        sr = dnn_superres.DnnSuperResImpl_create()
+        sr.readModel(self.edsr_path)
+        sr.setModel("edsr", 4) 
+
+        result = sr.upsample(img)
+        cv2.imwrite(output_path, result)
+        
+        return True, output_path
+
+    def _restore_image(self, input_path, output_path):
+        """
+        Removes noise from image (Denoising).
+        """
+        img = cv2.imread(input_path)
+        
+        # h = strength of filter. Big h = perfectly smooth but blurred details.
+        # 10 is a good balance.
+        result = cv2.fastNlMeansDenoisingColored(img, None, 10, 10, 7, 21)
+        
+        cv2.imwrite(output_path, result)
+        return True, output_path

services/studio.py

@@ -0,0 +1,111 @@
+import cv2
+import numpy as np
+
+class StudioService:
+    """
+    Handles standard image editing operations.
+    CRITICAL: Always expects the ORIGINAL image as input to prevent double-processing.
+    """
+
+    def process_request(self, image_path, output_path, options):
+        try:
+            img = cv2.imread(image_path)
+            if img is None:
+                raise ValueError("Could not load image.")
+
+            # 1. Geometry (Rotate/Flip)
+            # Note: We apply this first so filters apply to the correct orientation
+            img = self._apply_geometry(img, options)
+
+            # 2. Adjustments (Brightness/Contrast/Sharpness)
+            img = self._apply_adjustments(img, options)
+
+            # 3. Filters
+            filter_type = options.get('filter', 'none')
+            if filter_type != 'none':
+                img = self._apply_filter(img, filter_type)
+
+            cv2.imwrite(output_path, img)
+            return True, output_path
+
+        except Exception as e:
+            print(f"Studio Error: {e}")
+            return False, str(e)
+
+    def _apply_geometry(self, img, options):
+        rotation = int(options.get('rotation', 0)) % 360
+        if rotation == 90: img = cv2.rotate(img, cv2.ROTATE_90_CLOCKWISE)
+        elif rotation == 180: img = cv2.rotate(img, cv2.ROTATE_180)
+        elif rotation == 270: img = cv2.rotate(img, cv2.ROTATE_90_COUNTERCLOCKWISE)
+
+        if options.get('flip_h'): img = cv2.flip(img, 1)
+        if options.get('flip_v'): img = cv2.flip(img, 0)
+        return img
+
+    def _apply_adjustments(self, img, options):
+        # Brightness & Contrast
+        bright = int(options.get('brightness', 0))
+        contrast = int(options.get('contrast', 0))
+
+        if bright != 0 or contrast != 0:
+            if contrast == -100: alpha = 0.0
+            else: alpha = 131 * (contrast + 127) / (127 * (131 - contrast))
+            beta = bright
+            img = cv2.convertScaleAbs(img, alpha=alpha, beta=beta)
+
+        # Saturation
+        sat = int(options.get('saturation', 0))
+        if sat != 0:
+            # Convert to HSV, handling potential grayscale images
+            if len(img.shape) == 2: img = cv2.cvtColor(img, cv2.COLOR_GRAY2BGR)
+            
+            hsv = cv2.cvtColor(img, cv2.COLOR_BGR2HSV).astype("float32")
+            (h, s, v) = cv2.split(hsv)
+            s = s * (1 + sat / 100.0)
+            s = np.clip(s, 0, 255)
+            hsv = cv2.merge([h, s, v])
+            img = cv2.cvtColor(hsv.astype("uint8"), cv2.COLOR_HSV2BGR)
+
+        # Sharpness (Unsharp Masking)
+        sharp = int(options.get('sharpness', 0))
+        if sharp != 0:
+            # Sigma=3.0, Threshold=0
+            gaussian = cv2.GaussianBlur(img, (0, 0), 3.0)
+            amount = sharp / 50.0 # Scale 0-100 to 0-2.0 strength
+            img = cv2.addWeighted(img, 1 + amount, gaussian, -amount, 0)
+
+        return img
+
+    def _apply_filter(self, img, f_type):
+        # Ensure image is 3-channel for filters
+        if len(img.shape) == 2: img = cv2.cvtColor(img, cv2.COLOR_GRAY2BGR)
+
+        if f_type == 'grayscale':
+            return cv2.cvtColor(cv2.cvtColor(img, cv2.COLOR_BGR2GRAY), cv2.COLOR_GRAY2BGR)
+        elif f_type == 'sepia':
+            kernel = np.array([[0.272, 0.534, 0.131], [0.349, 0.686, 0.168], [0.393, 0.769, 0.189]])
+            return cv2.transform(img, kernel)
+        elif f_type == 'blur':
+            return cv2.GaussianBlur(img, (15, 15), 0)
+        elif f_type == 'negative':
+            return cv2.bitwise_not(img)
+        elif f_type == 'cyberpunk':
+            img = img.astype(np.float32)
+            b, g, r = cv2.split(img)
+            b = np.clip(b * 1.2 + 10, 0, 255)
+            r = np.clip(r * 1.1 + 10, 0, 255)
+            return cv2.merge([b, g, r]).astype(np.uint8)
+        elif f_type == 'sketch':
+            gray = cv2.cvtColor(img, cv2.COLOR_BGR2GRAY)
+            inv = cv2.bitwise_not(gray)
+            blur = cv2.GaussianBlur(inv, (21, 21), 0)
+            return cv2.cvtColor(cv2.divide(gray, 255 - blur, scale=256), cv2.COLOR_GRAY2BGR)
+        elif f_type == 'cartoon':
+            gray = cv2.cvtColor(img, cv2.COLOR_BGR2GRAY)
+            gray = cv2.medianBlur(gray, 5)
+            edges = cv2.adaptiveThreshold(gray, 255, cv2.ADAPTIVE_THRESH_MEAN_C, cv2.THRESH_BINARY, 9, 9)
+            color = cv2.bilateralFilter(img, 9, 300, 300)
+            return cv2.bitwise_and(color, cv2.cvtColor(edges, cv2.COLOR_GRAY2BGR))
+        
+        # Fallback for others (summer, winter, etc) or return original
+        return img

services/utilities.py

@@ -0,0 +1,129 @@
+import os
+from PIL import Image, ExifTags
+
+class UtilitiesService:
+    """
+    Handles general image utilities:
+    - Format Conversion (JPG, PNG, WEBP, BMP)
+    - Resizing & Compression
+    - Metadata (EXIF) Extraction
+    """
+
+    def process_request(self, image_path, output_dir, options):
+        """
+        Main entry point.
+        options: {'action': 'convert'|'resize'|'metadata', ...params}
+        """
+        try:
+            # check file exists
+            if not os.path.exists(image_path):
+                raise FileNotFoundError("Input file missing")
+
+            action = options.get('action')
+            
+            if action == 'metadata':
+                return True, self._get_metadata(image_path)
+            
+            elif action == 'convert':
+                return self._convert_format(image_path, output_dir, options)
+                
+            elif action == 'resize':
+                return self._resize_image(image_path, output_dir, options)
+                
+            else:
+                raise ValueError(f"Unknown utility action: {action}")
+
+        except Exception as e:
+            print(f"Utility Error: {e}")
+            return False, str(e)
+
+    def _convert_format(self, image_path, output_dir, options):
+        img = Image.open(image_path)
+        
+        # Target format
+        target_format = options.get('format', 'png').lower()
+        
+        # Handle RGBA to RGB conversion for JPG/BMP which don't support transparency
+        if target_format in ['jpg', 'jpeg', 'bmp'] and img.mode == 'RGBA':
+            img = img.convert('RGB')
+
+        # Generate new filename
+        base_name = os.path.splitext(os.path.basename(image_path))[0]
+        # Clean timestamp prefix if it exists to avoid double timestamps
+        if '_' in base_name and base_name[0].isdigit():
+             # rough heuristic to keep name clean
+             pass 
+
+        new_filename = f"converted_{base_name}.{target_format}"
+        output_path = os.path.join(output_dir, new_filename)
+
+        # Save
+        if target_format in ['jpg', 'jpeg']:
+            img.save(output_path, quality=95)
+        else:
+            img.save(output_path)
+            
+        return True, new_filename
+
+    def _resize_image(self, image_path, output_dir, options):
+        img = Image.open(image_path)
+        
+        # Get dimensions
+        try:
+            # If input is empty string, use original dim
+            w_opt = options.get('width')
+            h_opt = options.get('height')
+            
+            w = int(w_opt) if w_opt else img.width
+            h = int(h_opt) if h_opt else img.height
+        except ValueError:
+            w, h = img.width, img.height
+
+        quality = int(options.get('quality', 90))
+
+        # Resize (LANCZOS is high quality downsampling filter)
+        img = img.resize((w, h), Image.Resampling.LANCZOS)
+
+        # Generate filename
+        base_name = os.path.basename(image_path)
+        output_path = os.path.join(output_dir, f"resized_{base_name}")
+
+        # Save with compression if JPEG/WEBP
+        save_kwargs = {}
+        if output_path.lower().endswith(('.jpg', '.jpeg', '.webp')):
+             # Ensure RGB for JPEG
+            if img.mode == 'RGBA' and output_path.lower().endswith(('.jpg', '.jpeg')):
+                img = img.convert('RGB')
+            save_kwargs['quality'] = quality
+            
+        img.save(output_path, **save_kwargs)
+
+        return True, os.path.basename(output_path)
+
+    def _get_metadata(self, image_path):
+        img = Image.open(image_path)
+        exif_data = {}
+        
+        # Extract basic info
+        exif_data['Format'] = img.format
+        exif_data['Mode'] = img.mode
+        exif_data['Size'] = f"{img.width} x {img.height}"
+        
+        # Extract EXIF if available
+        if hasattr(img, '_getexif') and img._getexif():
+            for tag, value in img._getexif().items():
+                if tag in ExifTags.TAGS:
+                    tag_name = ExifTags.TAGS[tag]
+                    # Filter out binary data which isn't JSON serializable
+                    if isinstance(value, bytes):
+                        value = "<Binary Data>"
+                    # Limit long strings
+                    if isinstance(value, str) and len(value) > 100:
+                        value = value[:100] + "..."
+                        
+                    exif_data[tag_name] = str(value)
+        
+        if len(exif_data) <= 3: # Only basic info found
+            exif_data['Note'] = "No advanced EXIF data found in this image."
+            
+        return exif_data

services/vision.py

@@ -0,0 +1,179 @@
+import os
+import cv2
+import numpy as np
+from rembg import remove
+from ultralytics import YOLO
+from PIL import Image
+from io import BytesIO
+
+class VisionService:
+    """
+    Handles Computer Vision tasks:
+    - Object Detection (YOLOv8)
+    - Pose Estimation (YOLOv8-Pose)
+    - Background Removal (rembg)
+    - Background Replacement
+    - Privacy Face Blur
+    - Document Scanner (Thresholding)
+    - Edge Detection
+    """
+
+    def __init__(self):
+        # Lazy loading models
+        self.yolo_model = None
+        self.pose_model = None
+        self.face_cascade = None
+
+    def process_request(self, image_path, output_path, task, options=None):
+        try:
+            if not os.path.exists(image_path):
+                raise FileNotFoundError("Input file not found")
+
+            # Initialize result metadata
+            result_meta = {}
+            options = options or {}
+
+            # --- Task Dispatcher ---
+            
+            if task == 'yolo':
+                img = cv2.imread(image_path)
+                img, detections = self._detect_objects(img)
+                result_meta['detections'] = detections
+                cv2.imwrite(output_path, img)
+            
+            elif task == 'pose':
+                img = cv2.imread(image_path)
+                img = self._estimate_pose(img)
+                cv2.imwrite(output_path, img)
+
+            elif task == 'remove_bg':
+                img = cv2.imread(image_path)
+                img = self._remove_background(img)
+                cv2.imwrite(output_path, img)
+            
+            elif task == 'replace_bg':
+                color = options.get('color', '#ffffff')
+                self._replace_background_color(image_path, output_path, color)
+            
+            elif task == 'face_blur':
+                img = cv2.imread(image_path)
+                intensity = int(options.get('value', 30))
+                img = self._blur_faces(img, intensity)
+                cv2.imwrite(output_path, img)
+            
+            elif task == 'doc_scanner':
+                img = cv2.imread(image_path)
+                img = self._document_threshold(img)
+                cv2.imwrite(output_path, img)
+
+            elif task == 'canny_edge':
+                img = cv2.imread(image_path)
+                img = self._detect_edges(img)
+                cv2.imwrite(output_path, img)
+            
+            else:
+                raise ValueError(f"Unknown task: {task}")
+
+            return True, result_meta
+
+        except Exception as e:
+            print(f"Vision Error: {e}")
+            return False, str(e)
+
+    # --- Feature Implementations ---
+
+    def _detect_objects(self, img):
+        if self.yolo_model is None:
+            self.yolo_model = YOLO('yolov8n.pt') # Auto-downloads if missing
+
+        results = self.yolo_model(img)
+        detections = []
+
+        for r in results:
+            for box in r.boxes:
+                x1, y1, x2, y2 = map(int, box.xyxy[0])
+                conf = float(box.conf[0])
+                cls = int(box.cls[0])
+                
+                if conf < 0.4: continue
+                
+                label = self.yolo_model.names[cls]
+                detections.append({'label': label, 'conf': conf})
+
+                # Draw Fancy Box
+                cv2.rectangle(img, (x1, y1), (x2, y2), (0, 242, 255), 2)
+                cv2.putText(img, f"{label} {int(conf*100)}%", (x1, y1 - 10), 
+                            cv2.FONT_HERSHEY_SIMPLEX, 0.5, (0, 242, 255), 2)
+
+        return img, detections
+
+    def _estimate_pose(self, img):
+        if self.pose_model is None:
+            # Use the Pose model version
+            self.pose_model = YOLO('yolov8n-pose.pt') 
+
+        results = self.pose_model(img)
+        
+        # Plot results directly onto the image
+        # YOLOv8 has a built-in plotter that draws the skeletons beautifully
+        for r in results:
+            img = r.plot() 
+            
+        return img
+
+    def _remove_background(self, img):
+        img_rgb = cv2.cvtColor(img, cv2.COLOR_BGR2RGB)
+        output = remove(img_rgb)
+        return cv2.cvtColor(output, cv2.COLOR_RGBA2BGRA)
+
+    def _replace_background_color(self, input_path, output_path, hex_color):
+        with open(input_path, 'rb') as i:
+            subject_bytes = remove(i.read())
+        
+        subject = Image.open(BytesIO(subject_bytes)).convert("RGBA")
+        
+        # Parse Color
+        if hex_color.startswith('#'): hex_color = hex_color.lstrip('#')
+        rgb = tuple(int(hex_color[i:i+2], 16) for i in (0, 2, 4))
+        
+        background = Image.new("RGBA", subject.size, rgb + (255,))
+        combined = Image.alpha_composite(background, subject)
+        combined.convert("RGB").save(output_path, quality=95)
+
+    def _blur_faces(self, img, intensity):
+        if self.face_cascade is None:
+            self.face_cascade = cv2.CascadeClassifier(cv2.data.haarcascades + 'haarcascade_frontalface_default.xml')
+
+        gray = cv2.cvtColor(img, cv2.COLOR_BGR2GRAY)
+        faces = self.face_cascade.detectMultiScale(gray, 1.1, 4)
+        
+        # Map intensity 0-100 to kernel size 3-99
+        k = int(intensity) * 2 + 1
+        
+        for (x, y, w, h) in faces:
+            roi = img[y:y+h, x:x+w]
+            roi = cv2.GaussianBlur(roi, (k, k), 30)
+            img[y:y+h, x:x+w] = roi
+            cv2.rectangle(img, (x, y), (x+w, y+h), (0, 255, 0), 1)
+            
+        return img
+
+    def _document_threshold(self, img):
+        # Convert to grayscale
+        gray = cv2.cvtColor(img, cv2.COLOR_BGR2GRAY)
+        # Apply Adaptive Thresholding (Great for documents with uneven lighting)
+        thresh = cv2.adaptiveThreshold(gray, 255, cv2.ADAPTIVE_THRESH_GAUSSIAN_C, 
+                                       cv2.THRESH_BINARY, 11, 2)
+        return cv2.cvtColor(thresh, cv2.COLOR_GRAY2BGR)
+
+    def _detect_edges(self, img):
+        gray = cv2.cvtColor(img, cv2.COLOR_BGR2GRAY)
+        blurred = cv2.GaussianBlur(gray, (5, 5), 0)
+        # Auto-Canny: median based thresholds
+        v = np.median(blurred)
+        sigma = 0.33
+        lower = int(max(0, (1.0 - sigma) * v))
+        upper = int(min(255, (1.0 + sigma) * v))
+        
+        edges = cv2.Canny(blurred, lower, upper)
+        return cv2.cvtColor(edges, cv2.COLOR_GRAY2BGR)

static/css/style.css

@@ -0,0 +1,558 @@
+/* --- CSS VARIABLES & THEME --- */
+:root {
+    /* Colors */
+    --bg-dark: #0a0a0f;
+    --bg-panel: #14141e;
+    
+    /* Neon Accents */
+    --primary-cyan: #00f2ff;
+    --primary-purple: #bd00ff;
+    --primary-pink: #ff0055;
+    --gradient-main: linear-gradient(135deg, #00f2ff 0%, #bd00ff 100%);
+    
+    /* Glassmorphism settings */
+    --glass-bg: rgba(255, 255, 255, 0.03);
+    --glass-border: rgba(255, 255, 255, 0.08);
+    --glass-blur: 20px;
+    
+    /* Text */
+    --text-white: #ffffff;
+    --text-gray: #a0a0a5;
+    
+    /* Spacing */
+    --sidebar-width: 260px;
+    --header-height: 70px;
+}
+
+/* --- RESET & BASE --- */
+* {
+    box-sizing: border-box;
+    margin: 0;
+    padding: 0;
+}
+
+body {
+    font-family: 'Inter', sans-serif;
+    color: var(--text-white);
+    background: var(--bg-dark); 
+    font-size: 16px;
+    line-height: 1.5;
+}
+
+a { text-decoration: none; color: inherit; }
+ul { list-style: none; }
+button, input, select { font-family: inherit; }
+
+/* --- SIDEBAR STYLING --- */
+.sidebar {
+    width: var(--sidebar-width);
+    height: 100vh;
+    background: rgba(10, 10, 15, 0.7);
+    backdrop-filter: blur(var(--glass-blur));
+    -webkit-backdrop-filter: blur(var(--glass-blur));
+    border-right: 1px solid var(--glass-border);
+    display: flex;
+    flex-direction: column;
+    padding: 25px;
+    z-index: 100;
+}
+
+.brand {
+    font-family: 'Orbitron', sans-serif;
+    font-size: 1.4rem;
+    font-weight: 700;
+    margin-bottom: 40px;
+    display: flex;
+    align-items: center;
+    gap: 12px;
+    color: var(--text-white);
+    letter-spacing: 1px;
+}
+
+.text-gradient {
+    background: var(--gradient-main);
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+}
+
+/* Top Bar Navigation Links */
+.nav-link-btn {
+    display: inline-flex;
+    align-items: center;
+    gap: 6px;
+    padding: 8px 16px;
+    border-radius: 10px;
+    background: rgba(255, 255, 255, 0.03);
+    border: 1px solid var(--glass-border);
+    color: var(--text-gray);
+    font-size: 0.9rem;
+    font-weight: 500;
+    transition: all 0.3s ease;
+    text-decoration: none;
+}
+
+.nav-link-btn i {
+    font-size: 1.1rem;
+}
+
+.nav-link-btn:hover {
+    background: rgba(255, 255, 255, 0.08);
+    border-color: var(--primary-cyan);
+    color: var(--text-white);
+    transform: translateY(-2px);
+    box-shadow: 0 4px 12px rgba(0, 242, 255, 0.1);
+}
+
+/* Responsive Navigation */
+@media (max-width: 768px) {
+    .nav-link-btn span {
+        display: none;
+    }
+    
+    .nav-link-btn {
+        padding: 10px;
+    }
+    
+    .user-controls {
+        gap: 10px;
+    }
+}
+
+/* Section Styling for About/Docs Pages */
+.page-container {
+    max-width: 1200px;
+    margin: 0 auto;
+}
+
+.section-block {
+    background: var(--glass-bg);
+    border: 1px solid var(--glass-border);
+    border-radius: 20px;
+    padding: 40px;
+    margin-bottom: 30px;
+    animation: fadeIn 0.6s ease-out;
+}
+
+.section-title {
+    font-family: 'Orbitron', sans-serif;
+    font-size: 2rem;
+    margin-bottom: 20px;
+    background: var(--gradient-main);
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+}
+
+.section-subtitle {
+    font-size: 1.5rem;
+    margin-bottom: 15px;
+    color: var(--text-white);
+    font-weight: 600;
+}
+
+.info-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
+    gap: 20px;
+    margin-top: 30px;
+}
+
+.info-card {
+    background: rgba(255, 255, 255, 0.02);
+    border: 1px solid var(--glass-border);
+    border-radius: 15px;
+    padding: 25px;
+    transition: all 0.3s ease;
+}
+
+.info-card:hover {
+    background: rgba(255, 255, 255, 0.05);
+    border-color: var(--primary-purple);
+    transform: translateY(-3px);
+}
+
+.info-card h4 {
+    color: var(--primary-cyan);
+    margin-bottom: 10px;
+    font-size: 1.1rem;
+}
+
+.info-card p {
+    color: var(--text-gray);
+    line-height: 1.6;
+}
+
+
+.nav-menu {
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+    flex: 1;
+}
+
+.nav-item {
+    display: flex;
+    align-items: center;
+    gap: 12px;
+    padding: 12px 16px;
+    border-radius: 12px;
+    color: var(--text-gray);
+    font-weight: 500;
+    transition: all 0.3s ease;
+    border: 1px solid transparent;
+}
+
+.nav-item i { font-size: 1.3rem; }
+
+.nav-item:hover {
+    background: rgba(255, 255, 255, 0.05);
+    color: var(--text-white);
+}
+
+.nav-item.active {
+    background: rgba(0, 242, 255, 0.08);
+    border-color: rgba(0, 242, 255, 0.2);
+    color: var(--primary-cyan);
+    box-shadow: 0 0 15px rgba(0, 242, 255, 0.05);
+}
+
+.sidebar-footer {
+    font-size: 0.8rem;
+    color: var(--text-gray);
+    border-top: 1px solid var(--glass-border);
+    padding-top: 20px;
+}
+
+.status-indicator {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    margin-bottom: 5px;
+    font-size: 0.75rem;
+    color: #00ff88;
+}
+
+.status-dot {
+    width: 8px;
+    height: 8px;
+    background: #00ff88;
+    border-radius: 50%;
+    box-shadow: 0 0 8px #00ff88;
+}
+
+/* --- MAIN CONTENT LAYOUT --- */
+.main-content {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    height: 100vh;
+    overflow: hidden;
+    position: relative;
+}
+
+.top-bar {
+    height: var(--header-height);
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 0 30px;
+    border-bottom: 1px solid var(--glass-border);
+    background: rgba(10, 10, 15, 0.3);
+}
+
+.page-title {
+    font-family: 'Orbitron', sans-serif;
+    font-size: 1.4rem;
+    letter-spacing: 0.5px;
+    font-weight: 500;
+}
+
+.user-controls {
+    display: flex;
+    gap: 20px;
+    align-items: center;
+}
+
+.icon-btn {
+    background: transparent;
+    border: none;
+    color: var(--text-gray);
+    font-size: 1.2rem;
+    cursor: pointer;
+    transition: color 0.2s;
+}
+
+.icon-btn:hover { color: var(--text-white); }
+
+.avatar {
+    width: 38px;
+    height: 38px;
+    border-radius: 50%;
+    background: var(--gradient-main);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-weight: 700;
+    font-size: 1rem;
+    color: #000;
+}
+
+.content-scrollable {
+    flex: 1;
+    overflow-y: auto;
+    padding: 30px;
+}
+
+/* --- GLASSMORPHISM COMPONENTS --- */
+.glass-panel {
+    background: var(--glass-bg);
+    border: 1px solid var(--glass-border);
+    backdrop-filter: blur(var(--glass-blur));
+    -webkit-backdrop-filter: blur(var(--glass-blur));
+    border-radius: 20px;
+    box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.2);
+}
+
+.tool-header {
+    font-size: 0.8rem;
+    text-transform: uppercase;
+    letter-spacing: 1px;
+    color: var(--text-gray);
+    margin-bottom: 12px;
+    font-weight: 600;
+}
+
+/* --- BUTTONS --- */
+.btn {
+    padding: 12px 24px;
+    border-radius: 10px;
+    font-weight: 600;
+    cursor: pointer;
+    border: none;
+    font-family: 'Inter', sans-serif;
+    transition: all 0.2s ease;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    gap: 8px;
+    font-size: 0.95rem;
+}
+
+.btn:active { transform: scale(0.97); }
+.btn:disabled { opacity: 0.5; cursor: not-allowed; }
+
+.btn-primary {
+    background: var(--gradient-main);
+    color: #0a0a0f;
+    box-shadow: 0 0 20px rgba(0, 242, 255, 0.2);
+}
+
+.btn-primary:hover:not(:disabled) {
+    box-shadow: 0 0 30px rgba(0, 242, 255, 0.4);
+    filter: brightness(1.1);
+}
+
+.btn-secondary {
+    background: rgba(255, 255, 255, 0.05);
+    border: 1px solid var(--glass-border);
+    color: var(--text-white);
+}
+
+.btn-secondary:hover:not(:disabled) {
+    background: rgba(255, 255, 255, 0.1);
+    border-color: rgba(255, 255, 255, 0.2);
+}
+
+/* --- FORMS & INPUTS --- */
+input[type="range"] {
+    width: 100%;
+    height: 6px;
+    background: rgba(255, 255, 255, 0.1);
+    border-radius: 5px;
+    outline: none;
+    -webkit-appearance: none;
+}
+
+input[type="range"]::-webkit-slider-thumb {
+    -webkit-appearance: none;
+    width: 18px;
+    height: 18px;
+    background: var(--primary-cyan);
+    border-radius: 50%;
+    cursor: pointer;
+    box-shadow: 0 0 10px rgba(0, 242, 255, 0.5);
+    margin-top: -6px; /* center thumb */
+}
+
+input[type="range"]::-webkit-slider-runnable-track {
+    width: 100%;
+    height: 6px;
+    cursor: pointer;
+    background: transparent;
+    border-radius: 5px;
+}
+
+.upload-placeholder {
+    text-align: center;
+    color: var(--text-gray);
+    padding: 40px;
+    border: 2px dashed var(--glass-border);
+    border-radius: 16px;
+    transition: all 0.3s;
+}
+
+.upload-placeholder:hover {
+    border-color: var(--primary-cyan);
+    background: rgba(0, 242, 255, 0.02);
+}
+
+/* Download Button Highlight */
+.download-highlight {
+    background: linear-gradient(135deg, rgba(0, 242, 255, 0.1) 0%, rgba(189, 0, 255, 0.1) 100%) !important;
+    border-color: var(--primary-cyan) !important;
+    color: var(--primary-cyan) !important;
+    position: relative;
+    overflow: hidden;
+}
+
+.download-highlight::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: -100%;
+    width: 100%;
+    height: 100%;
+    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent);
+    transition: left 0.5s;
+}
+
+.download-highlight:hover::before {
+    left: 100%;
+}
+
+.download-highlight:hover {
+    box-shadow: 0 0 20px rgba(0, 242, 255, 0.3) !important;
+    transform: translateY(-2px);
+}
+
+/* Platform Download Cards */
+.download-cards {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
+    gap: 25px;
+    margin-top: 30px;
+}
+
+.platform-card {
+    background: var(--glass-bg);
+    border: 1px solid var(--glass-border);
+    border-radius: 20px;
+    padding: 35px;
+    text-align: center;
+    transition: all 0.4s ease;
+    position: relative;
+    overflow: hidden;
+}
+
+.platform-card::before {
+    content: '';
+    position: absolute;
+    top: -50%;
+    left: -50%;
+    width: 200%;
+    height: 200%;
+    background: radial-gradient(circle, rgba(0, 242, 255, 0.1) 0%, transparent 70%);
+    opacity: 0;
+    transition: opacity 0.4s;
+}
+
+.platform-card:hover::before {
+    opacity: 1;
+}
+
+.platform-card:hover {
+    transform: translateY(-8px);
+    border-color: var(--primary-cyan);
+    box-shadow: 0 15px 40px rgba(0, 242, 255, 0.15);
+}
+
+.platform-icon {
+    font-size: 4rem;
+    margin-bottom: 20px;
+    display: inline-block;
+    position: relative;
+    z-index: 1;
+}
+
+.platform-name {
+    font-size: 1.6rem;
+    font-weight: 600;
+    margin-bottom: 10px;
+    color: var(--text-white);
+}
+
+.platform-details {
+    color: var(--text-gray);
+    font-size: 0.9rem;
+    margin-bottom: 25px;
+    line-height: 1.6;
+}
+
+.version-badge {
+    display: inline-block;
+    background: rgba(0, 242, 255, 0.1);
+    border: 1px solid rgba(0, 242, 255, 0.3);
+    padding: 5px 15px;
+    border-radius: 20px;
+    font-size: 0.75rem;
+    color: var(--primary-cyan);
+    margin-bottom: 20px;
+    font-weight: 600;
+}
+
+.file-size {
+    font-size: 0.8rem;
+    color: var(--text-gray);
+    margin-top: 10px;
+}
+
+/* Feature List */
+.feature-list {
+    list-style: none;
+    padding: 0;
+    margin: 20px 0;
+    text-align: left;
+}
+
+.feature-list li {
+    color: var(--text-gray);
+    line-height: 2.2;
+    padding-left: 30px;
+    position: relative;
+}
+
+.feature-list li::before {
+    content: '✓';
+    position: absolute;
+    left: 0;
+    color: #00ff88;
+    font-weight: 700;
+    font-size: 1.2rem;
+}
+
+
+/* --- SCROLLBAR --- */
+::-webkit-scrollbar { width: 8px; }
+::-webkit-scrollbar-track { background: rgba(0,0,0,0.2); }
+::-webkit-scrollbar-thumb { 
+    background: rgba(255,255,255,0.15); 
+    border-radius: 4px; 
+}
+::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,0.25); }
+
+/* --- ANIMATIONS --- */
+@keyframes fadeIn {
+    from { opacity: 0; transform: translateY(10px); }
+    to { opacity: 1; transform: translateY(0); }
+}
+
+.fade-in { animation: fadeIn 0.4s ease-out; }

static/js/main.js

@@ -0,0 +1,419 @@
+/**
+ * Radiant AI - Main Logic v3.3
+ * Features: Auto-Apply, Independent Tab Chaining, History, Robust Session
+ */
+
+const AppState = {
+    // Session State
+    uploadFilename: localStorage.getItem('radiant_upload_filename') || null, // Clean Original
+    currentFilename: localStorage.getItem('radiant_filename') || null,       // Latest Edited
+    currentUrl: localStorage.getItem('radiant_current_url') || null,
+    
+    // AI Lab specific state
+    selectedAIModel: null,
+
+    history: [],      
+    historyIndex: -1,
+
+    serverParams: {
+        brightness: 0, contrast: 0, saturation: 0, sharpness: 0,
+        rotation: 0, flip_h: false, flip_v: false, filter: 'none'
+    },
+    
+    debounceTimer: null,
+    isProcessing: false
+};
+
+document.addEventListener('DOMContentLoaded', () => {
+    initSession();
+    setupGlobalListeners();
+    setupKeyboardShortcuts();
+});
+
+// --- 1. Helper: Determine Source File ---
+
+/**
+ * Returns the correct filename to process based on the tab's checkbox state.
+ * @param {string} checkboxId - The ID of the checkbox in the active tab
+ */
+function getSourceFilename(checkboxId) {
+    const cb = document.getElementById(checkboxId);
+    
+    // If checkbox exists AND is checked AND we have a previous result -> Chain it
+    if (cb && cb.checked && AppState.currentFilename) {
+        console.log(`🔗 Chaining Enabled: Using ${AppState.currentFilename}`);
+        return AppState.currentFilename;
+    }
+    
+    // Otherwise use the clean original
+    console.log(`✨ Using Original: ${AppState.uploadFilename}`);
+    return AppState.uploadFilename;
+}
+
+// --- 2. Session & History ---
+
+function initSession() {
+    const savedParams = localStorage.getItem('radiant_params');
+    if(savedParams) AppState.serverParams = JSON.parse(savedParams);
+
+    if (AppState.currentUrl && AppState.uploadFilename) {
+        restoreImageToUI(AppState.currentUrl);
+        updateSlidersUI();
+        if(AppState.history.length === 0) pushHistory(AppState.currentUrl, AppState.serverParams);
+    }
+}
+
+function pushHistory(url, params) {
+    if (AppState.historyIndex < AppState.history.length - 1) {
+        AppState.history = AppState.history.slice(0, AppState.historyIndex + 1);
+    }
+    const paramsCopy = JSON.parse(JSON.stringify(params));
+    AppState.history.push({ url: url, params: paramsCopy });
+    AppState.historyIndex++;
+    
+    localStorage.setItem('radiant_current_url', url);
+    localStorage.setItem('radiant_params', JSON.stringify(params));
+}
+
+function undoEdit() {
+    if (AppState.historyIndex > 0) {
+        AppState.historyIndex--;
+        restoreState(AppState.history[AppState.historyIndex]);
+    }
+}
+
+function redoEdit() {
+    if (AppState.historyIndex < AppState.history.length - 1) {
+        AppState.historyIndex++;
+        restoreState(AppState.history[AppState.historyIndex]);
+    }
+}
+
+function restoreState(state) {
+    restoreImageToUI(state.url);
+    AppState.serverParams = JSON.parse(JSON.stringify(state.params));
+    updateSlidersUI();
+}
+
+// --- 3. Studio Logic (Auto-Apply + Chaining) ---
+
+// Special Chaining Logic for Studio:
+// If "Bake" is enabled, we commit the current state as the new "Original" 
+// and reset sliders to 0 so you can edit on top.
+function toggleStudioChaining(checkbox) {
+    if(checkbox.checked) {
+        if(confirm("Bake current edits? This will reset sliders to 0 but keep the look.")) {
+            // "Bake" logic: Set current edited file as the new "Original"
+            AppState.uploadFilename = AppState.currentFilename;
+            localStorage.setItem('radiant_upload_filename', AppState.currentFilename);
+            
+            // Reset params to 0 (visual reset)
+            AppState.serverParams = { brightness: 0, contrast: 0, saturation: 0, sharpness: 0, rotation: 0, flip_h: false, flip_v: false, filter: 'none' };
+            updateSlidersUI();
+            
+            // Uncheck box automatically after baking (optional UX choice)
+            checkbox.checked = false; 
+        } else {
+            checkbox.checked = false;
+        }
+    }
+}
+
+function handleSliderChange(param, value) {
+    if(!AppState.uploadFilename) return;
+    document.getElementById(`val-${param}`).innerText = value;
+    AppState.serverParams[param] = parseInt(value);
+    if (AppState.debounceTimer) clearTimeout(AppState.debounceTimer);
+    AppState.debounceTimer = setTimeout(() => processAutoEdit(), 500);
+}
+
+function handleFilterClick(filterName) {
+    if(!AppState.uploadFilename) return alert("Upload image first");
+    document.querySelectorAll('.filter-btn').forEach(b => b.classList.remove('active'));
+    if(event && event.target) event.target.classList.add('active');
+    AppState.serverParams.filter = filterName;
+    processAutoEdit();
+}
+
+function triggerAutoApply(action) {
+    if(!AppState.uploadFilename) return alert("Upload image first");
+    if (action === 'rotate_right') AppState.serverParams.rotation = (AppState.serverParams.rotation + 90) % 360;
+    else if (action === 'rotate_left') AppState.serverParams.rotation = (AppState.serverParams.rotation - 90) % 360;
+    else if (action === 'flip_h') AppState.serverParams.flip_h = !AppState.serverParams.flip_h;
+    else if (action === 'flip_v') AppState.serverParams.flip_v = !AppState.serverParams.flip_v;
+    processAutoEdit();
+}
+
+async function processAutoEdit() {
+    if (AppState.isProcessing) return;
+    const overlay = document.getElementById('processingOverlay');
+    if(overlay) overlay.style.display = 'flex';
+    AppState.isProcessing = true;
+
+    try {
+        // Studio always uses uploadFilename (the clean source) 
+        // unless "Bake" was triggered (which updates uploadFilename)
+        const payload = { filename: AppState.uploadFilename, options: AppState.serverParams };
+        
+        const res = await fetch('/api/process-studio', {
+            method: 'POST', headers: {'Content-Type': 'application/json'}, body: JSON.stringify(payload)
+        });
+        const data = await res.json();
+        
+        if (data.success) {
+            AppState.currentFilename = data.filename;
+            localStorage.setItem('radiant_filename', data.filename);
+            restoreImageToUI(data.url);
+            pushHistory(data.url, AppState.serverParams);
+        }
+    } catch (err) { console.error(err); } 
+    finally { 
+        if(overlay) overlay.style.display = 'none'; 
+        AppState.isProcessing = false; 
+    }
+}
+
+// --- 4. VISION LOGIC ---
+
+async function runVisionTask(taskType) {
+    if(!AppState.uploadFilename) return alert("Please upload an image first.");
+
+    // Determine Source File (Chain or Original)
+    const sourceFile = getSourceFilename('visionChainingCheckbox');
+
+    const loader = document.getElementById('visionLoading');
+    const img = document.getElementById('visionPreview');
+    const overlay = document.getElementById('visionOverlay');
+    const ph = document.getElementById('visionPlaceholder');
+
+    const payload = { filename: sourceFile, task: taskType };
+    if (taskType === 'replace_bg') payload.color = document.getElementById('bgColorPicker').value;
+    if (taskType === 'face_blur') payload.value = document.getElementById('blurSlider').value;
+
+    if(loader) loader.style.display = 'flex';
+    if(img) img.style.filter = 'blur(5px) grayscale(80%)';
+    if(overlay) overlay.style.display = 'none';
+
+    try {
+        const res = await fetch('/api/process-vision', {
+            method: 'POST', headers: {'Content-Type': 'application/json'}, body: JSON.stringify(payload)
+        });
+        const data = await res.json();
+
+        if(data.success) {
+            // Update current filename so subsequent chains use this result
+            AppState.currentFilename = data.filename;
+            localStorage.setItem('radiant_filename', data.filename);
+
+            const freshUrl = `${data.url}?t=${new Date().getTime()}`;
+            if(img) { img.src = freshUrl; img.style.display = 'block'; img.style.filter = 'none'; }
+            if(ph) ph.style.display = 'none';
+            
+            document.getElementById('visionDownload').href = data.url;
+            document.getElementById('visionActionBar').style.display = 'flex';
+
+            if(data.detections && data.detections.length > 0 && overlay) {
+                overlay.style.display = 'block';
+                document.getElementById('detectionList').innerHTML = data.detections.map(d => 
+                    `<li>• <b>${d.label}</b> <small>${(d.conf*100).toFixed(0)}%</small></li>`
+                ).join('');
+            }
+        } else { alert("Vision Error: " + data.error); }
+    } catch(err) { alert("Server Error"); } 
+    finally {
+        if(loader) loader.style.display = 'none';
+        if(img) img.style.filter = 'none';
+    }
+}
+
+// --- 5. AI LABORATORY LOGIC ---
+
+function selectAIModel(task, card) {
+    AppState.selectedAIModel = task;
+    document.querySelectorAll('.model-card').forEach(c => c.classList.remove('active'));
+    card.classList.add('active');
+    const btn = document.getElementById('btnRunAI');
+    if (AppState.uploadFilename) btn.disabled = false;
+}
+
+async function runAITask() {
+    if(!AppState.uploadFilename || !AppState.selectedAIModel) return alert("Select an image and a model first.");
+
+    // Determine Source File (Chain or Original)
+    const sourceFile = getSourceFilename('aiChainingCheckbox');
+
+    const loader = document.getElementById('aiLoader');
+    const outImg = document.getElementById('aiOutputImg');
+    const inImg = document.getElementById('aiInputImg');
+    const actions = document.getElementById('aiActions');
+
+    // Update Input Preview to match what we are processing
+    if(sourceFile !== AppState.uploadFilename) {
+        // If chaining, show the previous result as the input
+        inImg.src = `${AppState.currentUrl}?t=${new Date().getTime()}`;
+    } else {
+        // Else show original
+        inImg.src = `${AppState.originalUrl}?t=${new Date().getTime()}`;
+    }
+
+    outImg.style.display = 'none';
+    actions.style.display = 'none';
+    if(loader) loader.style.display = 'flex';
+
+    try {
+        const res = await fetch('/api/process-ai', {
+            method: 'POST',
+            headers: {'Content-Type': 'application/json'},
+            body: JSON.stringify({
+                filename: sourceFile,
+                task: AppState.selectedAIModel
+            })
+        });
+
+        const data = await res.json();
+
+        if(data.success) {
+            // Update current filename so next chain uses this
+            AppState.currentFilename = data.filename;
+            localStorage.setItem('radiant_filename', data.filename);
+            localStorage.setItem('radiant_current_url', data.url);
+
+            outImg.src = `${data.url}?t=${new Date().getTime()}`;
+            outImg.style.display = 'block';
+            document.getElementById('aiDownload').href = data.url;
+            actions.style.display = 'flex';
+        } else {
+            alert("AI Error: " + data.error);
+        }
+    } catch(err) {
+        alert("Server connection failed.");
+    } finally {
+        if(loader) loader.style.display = 'none';
+    }
+}
+
+// --- 6. Upload & Helpers ---
+
+function setupGlobalListeners() {
+    ['fileInput', 'visionFileInput', 'aiFileInput', 'utilFileInput'].forEach(id => {
+        const el = document.getElementById(id);
+        if(el) el.addEventListener('change', handleUpload);
+    });
+}
+
+async function handleUpload(e) {
+    const file = e.target.files[0];
+    if(!file) return;
+    
+    const formData = new FormData();
+    formData.append('file', file);
+    
+    // Show loading
+    const btn = e.target.nextElementSibling;
+    const oldText = btn ? btn.innerHTML : '';
+    if(btn) btn.innerHTML = 'Uploading...';
+
+    try {
+        const res = await fetch('/api/upload', { method: 'POST', body: formData });
+        const data = await res.json();
+        
+        if(data.success) {
+            // New Session
+            AppState.uploadFilename = data.filename; 
+            AppState.currentFilename = data.filename; // Init current as original
+            AppState.originalUrl = data.url;
+            AppState.currentUrl = data.url;
+            
+            AppState.history = [];
+            AppState.historyIndex = -1;
+            AppState.serverParams = { brightness: 0, contrast: 0, saturation: 0, sharpness: 0, rotation: 0, flip_h: false, flip_v: false, filter: 'none' };
+            
+            localStorage.setItem('radiant_upload_filename', data.filename);
+            localStorage.setItem('radiant_filename', data.filename);
+            localStorage.setItem('radiant_current_url', data.url);
+            localStorage.setItem('radiant_original_url', data.url);
+            
+            pushHistory(data.url, AppState.serverParams);
+            restoreImageToUI(data.url);
+            updateSlidersUI();
+            
+            // Enable AI button if model selected
+            if(AppState.selectedAIModel) document.getElementById('btnRunAI').disabled = false;
+            
+            // Show comparison view in AI tab
+            const aiWork = document.getElementById('aiWorkArea');
+            const aiPlace = document.getElementById('aiPlaceholder');
+            if(aiWork) aiWork.style.display = 'grid';
+            if(aiPlace) aiPlace.style.display = 'none';
+        }
+    } catch(err) { alert("Upload error"); }
+    finally { if(btn) btn.innerHTML = oldText; e.target.value = ''; }
+}
+
+function restoreImageToUI(url) {
+    const fresh = `${url}?t=${new Date().getTime()}`;
+    ['imagePreview', 'visionPreview', 'aiInputImg', 'utilPreview'].forEach(id => {
+        const el = document.getElementById(id);
+        if(el) { el.src = fresh; el.style.display = 'block'; }
+    });
+    
+    ['placeholderState', 'visionPlaceholder', 'aiPlaceholder', 'utilPlaceholder'].forEach(id => {
+        const el = document.getElementById(id);
+        if(el) el.style.display = 'none';
+    });
+
+    const aiWork = document.getElementById('aiWorkArea');
+    if(aiWork && url) aiWork.style.display = 'grid';
+
+    const dl = document.getElementById('downloadLink');
+    if(dl) dl.href = fresh;
+    const bar = document.getElementById('actionBar');
+    if(bar) bar.style.display = 'flex';
+}
+
+function updateSlidersUI() {
+    const p = AppState.serverParams;
+    setVal('brightness', p.brightness);
+    setVal('contrast', p.contrast);
+    setVal('saturation', p.saturation);
+    setVal('sharpness', p.sharpness);
+    document.querySelectorAll('.filter-btn').forEach(b => b.classList.remove('active'));
+    const btns = document.querySelectorAll('.filter-btn');
+    btns.forEach(b => {
+        if(b.innerText.toLowerCase() === p.filter) b.classList.add('active');
+        else if (p.filter === 'none' && b.innerText === 'Normal') b.classList.add('active');
+    });
+}
+
+function setVal(id, val) {
+    const el = document.getElementById(id);
+    const label = document.getElementById(`val-${id}`);
+    if(el) el.value = val;
+    if(label) label.innerText = val;
+}
+
+function resetOriginal() {
+    if(AppState.uploadFilename && confirm("Reset all edits?")) {
+        AppState.serverParams = { brightness: 0, contrast: 0, saturation: 0, sharpness: 0, rotation: 0, flip_h: false, flip_v: false, filter: 'none' };
+        
+        // Reset state to original
+        AppState.currentFilename = AppState.uploadFilename;
+        localStorage.setItem('radiant_filename', AppState.uploadFilename);
+        
+        processAutoEdit();
+        updateSlidersUI();
+        
+        // Reset AI Output
+        const aiOut = document.getElementById('aiOutputImg');
+        const aiAct = document.getElementById('aiActions');
+        if(aiOut) aiOut.style.display = 'none';
+        if(aiAct) aiAct.style.display = 'none';
+    }
+}
+
+function setupKeyboardShortcuts() {
+    document.addEventListener('keydown', (e) => {
+        if ((e.ctrlKey || e.metaKey) && e.key === 'z') { e.preventDefault(); undoEdit(); }
+        if ((e.ctrlKey || e.metaKey) && e.key === 'y') { e.preventDefault(); redoEdit(); }
+    });
+}

templates/about.html

@@ -0,0 +1,147 @@
+{% extends "base.html" %}
+
+{% block title %}About - Radiant AI{% endblock %}
+{% block page_title %}About{% endblock %}
+
+{% block content %}
+<div class="page-container">
+    <!-- Hero Section -->
+    <div class="section-block" style="text-align: center;">
+        <div style="font-size: 4rem; margin-bottom: 20px;">
+            <i class="ph-duotone ph-aperture" style="color: var(--primary-cyan);"></i>
+        </div>
+        <h1 class="section-title">About Radiant AI</h1>
+        <p style="font-size: 1.2rem; color: var(--text-gray); max-width: 700px; margin: 0 auto; line-height: 1.7;">
+            Radiant AI is a next-generation visual intelligence platform that combines professional image editing 
+            tools with cutting-edge artificial intelligence to deliver powerful, intuitive solutions for creators, 
+            developers, and businesses.
+        </p>
+    </div>
+
+    <!-- Mission Section -->
+    <div class="section-block">
+        <h2 class="section-subtitle">
+            <i class="ph ph-rocket-launch" style="color: var(--primary-purple);"></i> Our Mission
+        </h2>
+        <p style="color: var(--text-gray); line-height: 1.8; font-size: 1rem;">
+            We believe that advanced AI-powered image processing should be accessible to everyone. Our mission is to 
+            democratize visual intelligence by providing professional-grade tools that are simple to use, fast, and 
+            powered by state-of-the-art machine learning models. Whether you're enhancing photos, detecting objects, 
+            or restoring memories, Radiant AI empowers you to create without limits.
+        </p>
+    </div>
+
+    <!-- Features Grid -->
+    <div class="section-block">
+        <h2 class="section-subtitle">
+            <i class="ph ph-lightning" style="color: var(--primary-cyan);"></i> What We Offer
+        </h2>
+        <div class="info-grid">
+            <div class="info-card">
+                <h4><i class="ph ph-sliders-horizontal"></i> Studio Editor</h4>
+                <p>Professional image editing with filters, adjustments, and real-time previews.</p>
+            </div>
+            <div class="info-card">
+                <h4><i class="ph ph-scan"></i> Backgrounds & Vision</h4>
+                <p>Object detection with YOLOv8, background removal, and face blurring technology.</p>
+            </div>
+            <div class="info-card">
+                <h4><i class="ph ph-sparkle"></i> AI Laboratory</h4>
+                <p>Super resolution upscaling, image colorization, and photo restoration.</p>
+            </div>
+            <div class="info-card">
+                <h4><i class="ph ph-wrench"></i> Utilities</h4>
+                <p>Format conversion, compression, and batch processing tools.</p>
+            </div>
+        </div>
+    </div>
+
+    <!-- Desktop Software Section -->
+<div class="section-block" style="background: linear-gradient(135deg, rgba(0, 242, 255, 0.08) 0%, rgba(189, 0, 255, 0.08) 100%);">
+    <h2 class="section-subtitle">
+        <i class="ph ph-desktop-tower" style="color: var(--primary-cyan);"></i> Desktop Application
+    </h2>
+    <p style="color: var(--text-gray); line-height: 1.8; margin-bottom: 20px;">
+        Take Radiant AI with you offline. Our desktop application brings the full power of AI-driven 
+        image processing directly to your computer with enhanced performance, complete privacy, and 
+        advanced features not available in the web version [web:17][web:20].
+    </p>
+    
+    <div class="info-grid" style="margin-top: 25px;">
+            <div class="info-card">
+                <h4><i class="ph ph-airplane-takeoff"></i> Work Offline</h4>
+                <p>All AI models run locally on your machine. No internet connection required for processing [web:17].</p>
+            </div>
+            <div class="info-card">
+                <h4><i class="ph ph-lightning-slash"></i> 3x Faster</h4>
+                <p>GPU acceleration with CUDA and Metal support for blazing-fast processing speeds [web:20].</p>
+            </div>
+            <div class="info-card">
+                <h4><i class="ph ph-lock-key"></i> Private & Secure</h4>
+                <p>Your images stay on your computer. Perfect for sensitive or confidential content [web:17].</p>
+            </div>
+            <div class="info-card">
+                <h4><i class="ph ph-stack"></i> Unlimited Processing</h4>
+                <p>No file size limits or batch restrictions. Process thousands of images simultaneously.</p>
+            </div>
+        </div>
+
+        <div style="text-align: center; margin-top: 30px;">
+            <p style="color: var(--text-gray); margin-bottom: 20px; font-size: 1.05rem;">
+                Available for Windows, macOS, and Linux
+            </p>
+            <a href="{{ url_for('download') }}" class="btn btn-primary" style="font-size: 1.1rem; padding: 15px 35px;">
+                <i class="ph ph-download-simple"></i> Download Desktop App
+            </a>
+        </div>
+    </div>
+
+
+    <!-- Technology Stack -->
+    <div class="section-block">
+        <h2 class="section-subtitle">
+            <i class="ph ph-cube" style="color: var(--primary-purple);"></i> Powered By
+        </h2>
+        <p style="color: var(--text-gray); line-height: 1.8; margin-bottom: 20px;">
+            Radiant AI leverages modern web technologies and advanced machine learning frameworks to deliver 
+            exceptional performance and reliability:
+        </p>
+        <ul style="color: var(--text-gray); line-height: 2; list-style: none; padding: 0;">
+            <li><i class="ph ph-check-circle" style="color: #00ff88;"></i> <strong>Flask & Python</strong> - Robust backend infrastructure</li>
+            <li><i class="ph ph-check-circle" style="color: #00ff88;"></i> <strong>TensorFlow & PyTorch</strong> - Deep learning models</li>
+            <li><i class="ph ph-check-circle" style="color: #00ff88;"></i> <strong>YOLOv8</strong> - Real-time object detection</li>
+            <li><i class="ph ph-check-circle" style="color: #00ff88;"></i> <strong>OpenCV</strong> - Computer vision processing</li>
+            <li><i class="ph ph-check-circle" style="color: #00ff88;"></i> <strong>Modern UI/UX</strong> - Glassmorphism design with smooth animations</li>
+        </ul>
+    </div>
+
+    <!-- Developer Info -->
+    <div class="section-block" style="text-align: center; background: linear-gradient(135deg, rgba(0, 242, 255, 0.05) 0%, rgba(189, 0, 255, 0.05) 100%);">
+        <h2 class="section-subtitle">
+            <i class="ph ph-code" style="color: var(--primary-cyan);"></i> Developed By
+        </h2>
+        <div style="display: inline-flex; align-items: center; gap: 15px; margin-top: 20px; padding: 20px 40px; background: rgba(0, 0, 0, 0.3); border-radius: 15px; border: 1px solid var(--glass-border);">
+            <div style="width: 60px; height: 60px; border-radius: 50%; background: var(--gradient-main); display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 1.5rem; color: #000;">
+                J
+            </div>
+            <div style="text-align: left;">
+                <h3 style="margin: 0; font-size: 1.3rem; color: var(--text-white);">Jaiho Labs</h3>
+                <p style="margin: 5px 0 0 0; color: var(--text-gray); font-size: 0.9rem;">
+                    Building AI-powered solutions for the future
+                </p>
+                <a href="https://jaiho-labs.onrender.com" target="_blank" rel="noopener noreferrer" 
+                   class="btn btn-secondary" style="margin-top: 15px; font-size: 0.85rem;">
+                    <i class="ph ph-arrow-square-out"></i> Visit Jaiho Labs
+                </a>
+            </div>
+            
+        </div>
+        
+    </div>
+
+    <!-- Version Info -->
+    <div style="text-align: center; padding: 30px 0; color: var(--text-gray); font-size: 0.9rem;">
+        <p>Radiant AI Version 2.0 | Built with ❤️ by Jaiho Labs</p>
+    </div>
+</div>
+{% endblock %}

templates/ai_studio.html

@@ -0,0 +1,102 @@
+{% extends "base.html" %}
+
+{% block title %}Radiant AI - Deep Learning Lab{% endblock %}
+{% block page_title %}AI Laboratory{% endblock %}
+
+{% block content %}
+<style>
+    .ai-layout { display: grid; grid-template-columns: 300px 1fr; gap: 25px; height: 100%; }
+    .model-card { background: linear-gradient(145deg, rgba(255,255,255,0.05) 0%, rgba(0,0,0,0.2) 100%); border: 1px solid var(--glass-border); padding: 20px; border-radius: 16px; margin-bottom: 20px; transition: all 0.2s ease; cursor: pointer; position: relative; overflow: hidden; }
+    .model-card:hover { transform: translateY(-2px); border-color: var(--primary-purple); background: rgba(255, 255, 255, 0.08); }
+    .model-card.active { border-color: var(--primary-purple); background: rgba(189, 0, 255, 0.15); box-shadow: 0 0 20px rgba(189, 0, 255, 0.2); }
+    .model-icon { font-size: 2rem; margin-bottom: 10px; color: var(--text-white); }
+    .model-name { font-weight: 700; font-size: 1.1rem; margin-bottom: 5px; }
+    .model-tech { font-size: 0.75rem; color: var(--primary-cyan); text-transform: uppercase; letter-spacing: 1px; margin-bottom: 8px; display: inline-block; background: rgba(0, 242, 255, 0.1); padding: 2px 6px; border-radius: 4px; font-weight: 600; }
+    .comparison-area { display: none; grid-template-columns: 1fr 1fr; gap: 15px; height: 100%; min-height: 400px; }
+    .img-box { background: rgba(0,0,0,0.3); border-radius: 16px; border: 1px solid var(--glass-border); display: flex; flex-direction: column; align-items: center; justify-content: center; overflow: hidden; position: relative; }
+    .img-box img { max-width: 100%; max-height: 90%; object-fit: contain; }
+    .img-label { position: absolute; top: 15px; left: 15px; background: rgba(0,0,0,0.7); padding: 5px 12px; border-radius: 20px; font-size: 0.8rem; color: var(--text-white); backdrop-filter: blur(5px); border: 1px solid var(--glass-border); }
+    .loader-overlay { position: absolute; inset: 0; background: rgba(0,0,0,0.8); display: flex; flex-direction: column; align-items: center; justify-content: center; z-index: 10; backdrop-filter: blur(5px); }
+    
+    /* Checkbox Style */
+    .chain-control { display: flex; align-items: center; gap: 10px; background: rgba(255, 0, 85, 0.1); padding: 10px; border-radius: 8px; border: 1px solid rgba(255, 0, 85, 0.3); margin-bottom: 15px; }
+    .chain-control input { width: 18px; height: 18px; accent-color: #ff0055; cursor: pointer; }
+    .chain-control label { font-size: 0.9rem; color: #ff0055; cursor: pointer; font-weight: 500; }
+</style>
+
+<div class="ai-layout">
+    <aside class="controls-panel">
+        <div class="glass-panel" style="padding: 20px; margin-bottom: 20px;">
+            <div class="tool-header">Source Image</div>
+            <input type="file" id="aiFileInput" accept="image/*" hidden>
+            <button class="btn btn-secondary" style="width: 100%;" onclick="document.getElementById('aiFileInput').click()">
+                <i class="ph ph-file-image"></i> Select Photo
+            </button>
+        </div>
+
+        <div class="chain-control">
+            <input type="checkbox" id="aiChainingCheckbox">
+            <label for="aiChainingCheckbox">Chain AI Models</label>
+        </div>
+
+        <div class="tool-header">Select AI Model</div>
+
+        <div class="model-card" id="card-colorize" onclick="selectAIModel('colorize', this)">
+            <div class="model-tech">Caffe / DNN</div>
+            <i class="ph-duotone ph-palette model-icon" style="color: #ff0055;"></i>
+            <div class="model-name">Auto Colorize</div>
+            <p style="font-size: 0.85rem; color: var(--text-gray);">Restores vibrant colors to B&W photos.</p>
+        </div>
+
+        <div class="model-card" id="card-upscale" onclick="selectAIModel('upscale', this)">
+            <div class="model-tech">EDSR / TensorFlow</div>
+            <i class="ph-duotone ph-arrows-out-simple model-icon" style="color: var(--primary-cyan);"></i>
+            <div class="model-name">Super Res (4x)</div>
+            <p style="font-size: 0.85rem; color: var(--text-gray);">Upscales low-res images by 400%.</p>
+        </div>
+
+        <div class="model-card" id="card-restore" onclick="selectAIModel('restore', this)">
+            <div class="model-tech">OpenCV / NLM</div>
+            <i class="ph-duotone ph-sparkle model-icon" style="color: #bd00ff;"></i>
+            <div class="model-name">AI Restoration</div>
+            <p style="font-size: 0.85rem; color: var(--text-gray);">Denoise and repair grainy images.</p>
+        </div>
+
+        <button class="btn btn-primary" id="btnRunAI" onclick="runAITask()" style="width: 100%; margin-top: 10px;" disabled>
+            <i class="ph ph-lightning"></i> Run Processor
+        </button>
+    </aside>
+
+    <main class="glass-panel" style="display: flex; flex-direction: column; padding: 20px; overflow: hidden;">
+        <div id="aiPlaceholder" class="upload-placeholder" style="flex: 1; display: flex; flex-direction: column; justify-content: center;">
+            <i class="ph ph-brain" style="font-size: 4rem; color: var(--primary-purple); margin-bottom: 20px;"></i>
+            <h3>AI Laboratory</h3>
+            <p>Select a model and upload an image to begin.</p>
+        </div>
+
+        <div id="aiWorkArea" class="comparison-area">
+            <div class="img-box">
+                <div class="img-label">Original / Previous</div>
+                <img id="aiInputImg" src="" alt="Original">
+            </div>
+            <div class="img-box">
+                <div class="img-label" style="color: var(--primary-cyan); border-color: var(--primary-cyan);">AI Output</div>
+                <div id="aiLoader" class="loader-overlay" style="display: none;">
+                    <i class="ph ph-spinner ph-spin" style="font-size: 3rem; color: var(--primary-cyan);"></i>
+                    <p style="margin-top: 15px; font-size: 1rem; color: white;">Neural Network Processing...</p>
+                </div>
+                <img id="aiOutputImg" src="" alt="Result" style="display: none;">
+            </div>
+        </div>
+
+        <div id="aiActions" style="margin-top: 20px; display: none; justify-content: flex-end; gap: 10px;">
+            <button class="btn btn-secondary" onclick="resetOriginal()">
+                <i class="ph ph-trash"></i> Reset All
+            </button>
+            <a id="aiDownload" href="#" download="radiant_ai_output.png" class="btn btn-primary">
+                <i class="ph ph-download-simple"></i> Download High-Res
+            </a>
+        </div>
+    </main>
+</div>
+{% endblock %}

templates/base.html

@@ -0,0 +1,145 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>{% block title %}Radiant AI{% endblock %}</title>
+    
+    <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&family=Orbitron:wght@500;700&display=swap" rel="stylesheet">
+    
+    <script src="https://unpkg.com/@phosphor-icons/web"></script>
+
+    <link rel="stylesheet" href="{{ url_for('static', filename='css/style.css') }}">
+    
+    <style>
+        /* Critical Layout Styles placed here to prevent FOUC (Flash of Unstyled Content) */
+        :root {
+            --bg-dark: #0a0a0f;
+            --accent-cyan: #00f2ff;
+            --accent-purple: #bd00ff;
+            --text-main: #ffffff;
+            --sidebar-width: 260px;
+        }
+
+        body {
+            margin: 0;
+            padding: 0;
+            font-family: 'Inter', sans-serif;
+            background-color: var(--bg-dark);
+            /* Deep Space Gradient Background */
+            background-image: 
+                radial-gradient(circle at 15% 50%, rgba(189, 0, 255, 0.08) 0%, transparent 50%),
+                radial-gradient(circle at 85% 30%, rgba(0, 242, 255, 0.08) 0%, transparent 50%);
+            color: var(--text-main);
+            height: 100vh;
+            display: flex;
+            overflow: hidden;
+        }
+
+        .app-wrapper {
+            display: flex;
+            width: 100%;
+            height: 100%;
+        }
+
+        /* Top Bar for Mobile/Tablet context */
+        .mobile-header {
+            display: none; 
+        }
+
+        @media (max-width: 768px) {
+            .app-wrapper { flex-direction: column; }
+            .sidebar { display: none; } /* Hide sidebar on mobile for now */
+            .mobile-header { display: flex; padding: 15px; background: #1a1a2e; }
+        }
+    </style>
+</head>
+<body>
+
+    <div class="app-wrapper">
+        <aside class="sidebar">
+            <div class="brand">
+                <i class="ph-fill ph-aperture" style="color: var(--accent-cyan);"></i>
+                <span>RADIANT <span class="text-gradient">AI</span></span>
+            </div>
+
+            <nav class="nav-menu">
+                <a href="{{ url_for('index') }}" class="nav-item {% if request.endpoint == 'index' %}active{% endif %}">
+                    <i class="ph ph-house"></i>
+                    <span>Home</span>
+                </a>
+                <a href="{{ url_for('studio') }}" class="nav-item {% if request.endpoint == 'studio' %}active{% endif %}">
+                    <i class="ph ph-paint-brush-broad"></i>
+                    <span>Studio Editor</span>
+                </a>
+                <a href="{{ url_for('vision') }}" class="nav-item {% if request.endpoint == 'vision' %}active{% endif %}">
+                    <i class="ph ph-eye"></i>
+                    <span>Backgrounds & Vision</span>
+                </a>
+                <a href="{{ url_for('ai_studio') }}" class="nav-item {% if request.endpoint == 'ai_studio' %}active{% endif %}">
+                    <i class="ph ph-magic-wand"></i>
+                    <span>AI Laboratory</span>
+                </a>
+                <a href="{{ url_for('utilities') }}" class="nav-item {% if request.endpoint == 'utilities' %}active{% endif %}">
+                    <i class="ph ph-wrench"></i>
+                    <span>Utilities</span>
+                </a>
+                <!---<a href="https://yourdomain.com/help" target="_blank" class="nav-item">
+                    <i class="ph ph-question"></i>
+                    <span>Help</span>
+                </a>--->
+            </nav>
+
+            <div class="sidebar-footer">
+                <div class="status-indicator">
+                    <span class="status-dot"></span> 
+                    <a href="https://jaiho-labs.onrender.com" target="_blank" rel="noopener noreferrer"> Developed by Jaiho Labs</a>
+                </div>
+                <p>Radiant AI — Version 2.0</p>
+            </div>
+        </aside>
+
+        <main class="main-content">
+            <header class="top-bar">
+                <h2 class="page-title">{% block page_title %}Dashboard{% endblock %}</h2>
+                <div class="user-controls">
+                    <span id="sessionStatus" style="font-size: 0.8rem; color: #a0a0a0; margin-right: 15px;"></span>
+
+                    <!-- Navigation Links -->
+                    <a href="{{ url_for('about') }}" class="nav-link-btn" title="About">
+                        <i class="ph ph-info-circle"></i>
+                        <span>About</span>
+                    </a>
+
+                    <a href="https://jaiho-digital.onrender.com/hub.html" target="_blank" rel="noopener noreferrer" class="nav-link-btn" title="Explore More Products">
+                        <i class="ph ph-app-window"></i>
+                        <span>Explore Products</span>
+                    </a>
+
+                    <a href="{{ url_for('docs') }}" class="nav-link-btn" title="Documentation">
+                        <i class="ph ph-book-open"></i>
+                        <span>Docs</span>
+                    </a>
+
+                    <a href="{{ url_for('download') }}" class="nav-link-btn download-highlight" title="Download Software">
+                        <i class="ph ph-download-simple"></i>
+                        <span>Download</span>
+                    </a>
+                </div>
+            </header>
+
+
+
+            <div class="content-scrollable">
+                {% block content %}{% endblock %}
+            </div>
+        </main>
+    </div>
+
+    <script src="{{ url_for('static', filename='js/main.js') }}"></script>
+    
+    {% block scripts %}{% endblock %}
+</body>
+</html>

templates/docs.html

@@ -0,0 +1,174 @@
+{% extends "base.html" %}
+
+{% block title %}Documentation - Radiant AI{% endblock %}
+{% block page_title %}Documentation{% endblock %}
+
+{% block content %}
+<div class="page-container">
+    <!-- Header -->
+    <div class="section-block" style="text-align: center;">
+        <div style="font-size: 3.5rem; margin-bottom: 20px;">
+            <i class="ph-duotone ph-book-open" style="color: var(--primary-purple);"></i>
+        </div>
+        <h1 class="section-title">Documentation</h1>
+        <p style="font-size: 1.1rem; color: var(--text-gray); max-width: 650px; margin: 0 auto;">
+            Complete guide to using Radiant AI's powerful image processing and AI tools.
+        </p>
+    </div>
+
+    <!-- Getting Started -->
+    <div class="section-block">
+        <h2 class="section-subtitle">
+            <i class="ph ph-play-circle" style="color: var(--primary-cyan);"></i> Getting Started
+        </h2>
+        <p style="color: var(--text-gray); line-height: 1.8; margin-bottom: 20px;">
+            Welcome to Radiant AI! This platform provides a suite of AI-powered image processing tools 
+            accessible through an intuitive web interface.
+        </p>
+        <ol style="color: var(--text-gray); line-height: 2; padding-left: 20px;">
+            <li><strong>Navigate</strong> using the sidebar to access different tools</li>
+            <li><strong>Upload</strong> your images using drag-and-drop or file selection</li>
+            <li><strong>Process</strong> images with your chosen tool or AI model</li>
+            <li><strong>Download</strong> your enhanced results instantly</li>
+        </ol>
+    </div>
+
+    <!-- Studio Editor -->
+    <div class="section-block">
+        <h2 class="section-subtitle">
+            <i class="ph ph-paint-brush-broad" style="color: var(--primary-purple);"></i> Studio Editor
+        </h2>
+        <p style="color: var(--text-gray); line-height: 1.8; margin-bottom: 15px;">
+            Professional image editing tools for creative enhancement.
+        </p>
+        <div class="info-grid">
+            <div class="info-card">
+                <h4>Basic Adjustments</h4>
+                <p>Brightness, contrast, saturation, and exposure controls with real-time preview.</p>
+            </div>
+            <div class="info-card">
+                <h4>Filters & Effects</h4>
+                <p>Apply cinematic filters, vintage effects, and artistic styles to your images.</p>
+            </div>
+            <div class="info-card">
+                <h4>Transform Tools</h4>
+                <p>Crop, rotate, flip, and resize images with precision.</p>
+            </div>
+        </div>
+    </div>
+
+    <!-- Computer Vision -->
+    <div class="section-block">
+        <h2 class="section-subtitle">
+            <i class="ph ph-eye" style="color: var(--primary-cyan);"></i> Backgrounds & Vision
+        </h2>
+        <p style="color: var(--text-gray); line-height: 1.8; margin-bottom: 15px;">
+            Advanced AI-powered visual analysis and processing.
+        </p>
+        <div class="info-grid">
+            <div class="info-card">
+                <h4>Object Detection</h4>
+                <p>YOLOv8-powered detection recognizes and labels objects in your images with bounding boxes.</p>
+            </div>
+            <div class="info-card">
+                <h4>Background Removal</h4>
+                <p>AI-powered background segmentation removes backgrounds with precision.</p>
+            </div>
+            <div class="info-card">
+                <h4>Face Blurring</h4>
+                <p>Automatic face detection and blurring for privacy protection in photos.</p>
+            </div>
+        </div>
+    </div>
+
+    <!-- AI Laboratory -->
+    <div class="section-block">
+        <h2 class="section-subtitle">
+            <i class="ph ph-magic-wand" style="color: var(--primary-purple);"></i> AI Laboratory
+        </h2>
+        <p style="color: var(--text-gray); line-height: 1.8; margin-bottom: 15px;">
+            Deep learning models for image enhancement and restoration.
+        </p>
+        <div class="info-grid">
+            <div class="info-card">
+                <h4>Super Resolution</h4>
+                <p>Upscale low-resolution images up to 4x while preserving details using deep learning.</p>
+            </div>
+            <div class="info-card">
+                <h4>Image Colorization</h4>
+                <p>Transform black and white photos into vibrant color images using AI.</p>
+            </div>
+            <div class="info-card">
+                <h4>Photo Restoration</h4>
+                <p>Repair damaged or old photographs by removing scratches and artifacts.</p>
+            </div>
+        </div>
+    </div>
+
+    <!-- API & Technical -->
+    <div class="section-block">
+        <h2 class="section-subtitle">
+            <i class="ph ph-code" style="color: var(--primary-cyan);"></i> Technical Details
+        </h2>
+        <h4 style="color: var(--text-white); margin-top: 25px; margin-bottom: 10px;">Supported Formats</h4>
+        <p style="color: var(--text-gray); line-height: 1.8;">
+            <strong>Input:</strong> JPG, JPEG, PNG, WEBP, BMP<br>
+            <strong>Output:</strong> JPG, PNG, WEBP
+        </p>
+        
+        <h4 style="color: var(--text-white); margin-top: 25px; margin-bottom: 10px;">Processing Limits</h4>
+        <p style="color: var(--text-gray); line-height: 1.8;">
+            <strong>Max File Size:</strong> 10MB per image<br>
+            <strong>Max Resolution:</strong> 4000x4000 pixels<br>
+            <strong>Batch Processing:</strong> Up to 5 images simultaneously
+        </p>
+        
+        <h4 style="color: var(--text-white); margin-top: 25px; margin-bottom: 10px;">Performance</h4>
+        <p style="color: var(--text-gray); line-height: 1.8;">
+            Processing times vary based on image size and selected operation. Most operations complete within 2-10 seconds.
+        </p>
+    </div>
+
+    <!-- FAQ -->
+    <div class="section-block">
+        <h2 class="section-subtitle">
+            <i class="ph ph-question" style="color: var(--primary-purple);"></i> Frequently Asked Questions
+        </h2>
+        <div style="margin-top: 20px;">
+            <div style="margin-bottom: 25px;">
+                <h4 style="color: var(--primary-cyan); margin-bottom: 8px;">Is my data secure?</h4>
+                <p style="color: var(--text-gray); line-height: 1.7;">
+                    Yes. All images are processed on our secure servers and automatically deleted after processing. 
+                    We do not store or share your images.
+                </p>
+            </div>
+            
+            <div style="margin-bottom: 25px;">
+                <h4 style="color: var(--primary-cyan); margin-bottom: 8px;">Can I use this for commercial projects?</h4>
+                <p style="color: var(--text-gray); line-height: 1.7;">
+                    Yes. All processed images belong to you and can be used for any purpose including commercial projects.
+                </p>
+            </div>
+            
+            <div style="margin-bottom: 25px;">
+                <h4 style="color: var(--primary-cyan); margin-bottom: 8px;">What AI models do you use?</h4>
+                <p style="color: var(--text-gray); line-height: 1.7;">
+                    We use YOLOv8 for object detection, custom CNN models for super resolution, and transformer-based 
+                    models for colorization and restoration.
+                </p>
+            </div>
+        </div>
+    </div>
+
+    <!-- Support -->
+    <div class="section-block" style="text-align: center; background: linear-gradient(135deg, rgba(189, 0, 255, 0.05) 0%, rgba(0, 242, 255, 0.05) 100%);">
+        <h2 class="section-subtitle">Need Help?</h2>
+        <p style="color: var(--text-gray); margin-bottom: 20px;">
+            Can't find what you're looking for? Contact us for support.
+        </p>
+        <a href="mailto:jaihodigital@gmail.com" class="btn btn-primary">
+            <i class="ph ph-chats-circle"></i> Contact Support
+        </a>
+    </div>
+</div>
+{% endblock %}

templates/download.html

@@ -0,0 +1,389 @@
+{% extends "base.html" %}
+
+{% block title %}Download - Radiant AI{% endblock %}
+{% block page_title %}Download Software{% endblock %}
+
+{% block content %}
+<div class="page-container">
+    <!-- Hero Section -->
+    <div class="section-block" style="text-align: center;">
+        <div style="font-size: 4rem; margin-bottom: 20px;">
+            <i class="ph-duotone ph-download-simple" style="color: var(--primary-cyan);"></i>
+        </div>
+        <h1 class="section-title">Download Radiant AI Desktop</h1>
+        <p style="font-size: 1.2rem; color: var(--text-gray); max-width: 700px; margin: 0 auto 20px auto; line-height: 1.7;">
+            One-click portable installation. No manual setup required. The installer automatically handles 
+            Python, dependencies, AI models, and launches the application in your browser [web:21][web:27].
+        </p>
+        <div class="version-badge" style="font-size: 0.9rem; padding: 8px 20px;">
+            <i class="ph ph-star-four"></i> Latest Version: 2.0.1 | Released: December 2025
+        </div>
+    </div>
+
+    <!-- One-Click Installation Highlight -->
+    <div class="section-block" style="background: linear-gradient(135deg, rgba(0, 242, 255, 0.1) 0%, rgba(189, 0, 255, 0.1) 100%); border: 2px solid var(--primary-cyan);">
+        <div style="text-align: center;">
+            <h2 style="font-family: 'Orbitron', sans-serif; font-size: 1.8rem; margin-bottom: 20px;">
+                <i class="ph ph-magic-wand" style="color: var(--primary-cyan);"></i> 
+                <span class="text-gradient">One-Click Installation</span>
+            </h2>
+            <p style="color: var(--text-gray); line-height: 1.8; max-width: 700px; margin: 0 auto;">
+                Simply download and run the <strong>.bat</strong> file. It automatically installs Python, 
+                creates a virtual environment, downloads all required libraries and AI models, and launches 
+                Radiant AI in your default browser. No technical knowledge required [web:21][web:27][web:29]!
+            </p>
+        </div>
+    </div>
+
+    <!-- Platform Downloads -->
+    <div class="section-block">
+        <h2 class="section-subtitle" style="text-align: center;">
+            <i class="ph ph-desktop-tower" style="color: var(--primary-purple);"></i> Download for Your Platform
+        </h2>
+        
+        <div class="download-cards">
+            <!-- Windows -->
+            <div class="platform-card">
+                <div class="platform-icon" style="color: #00a4ef;">
+                    <i class="ph-fill ph-windows-logo"></i>
+                </div>
+                <h3 class="platform-name">Windows</h3>
+                <div class="version-badge">Portable Installation</div>
+                <p class="platform-details">
+                    For Windows 10 and Windows 11 (64-bit)<br>
+                    Includes: Python 3.11 + Virtual Environment + All Dependencies
+                </p>
+                <a href="#" class="btn btn-primary" style="width: 100%; justify-content: center;">
+                    <i class="ph ph-download-simple"></i> Download RadiantAI-Setup.bat
+                </a>
+                <p class="file-size">Installer Script • 8 KB<br>
+                    <span style="font-size: 0.75rem;">(Downloads ~450 MB on first run)</span>
+                </p>
+            </div>
+
+            <!-- macOS -->
+            <div class="platform-card">
+                <div class="platform-icon" style="color: var(--text-white);">
+                    <i class="ph-fill ph-apple-logo"></i>
+                </div>
+                <h3 class="platform-name">macOS</h3>
+                <div class="version-badge">Shell Script</div>
+                <p class="platform-details">
+                    For macOS 11 Big Sur and later (Intel & Apple Silicon)<br>
+                    Includes: Python 3.11 + Virtual Environment + All Dependencies
+                </p>
+                <a href="#" class="btn btn-primary" style="width: 100%; justify-content: center;">
+                    <i class="ph ph-download-simple"></i> Download RadiantAI-Setup.sh
+                </a>
+                <p class="file-size">Installer Script • 7 KB<br>
+                    <span style="font-size: 0.75rem;">(Downloads ~450 MB on first run)</span>
+                </p>
+            </div>
+
+            <!-- Linux -->
+            <div class="platform-card">
+                <div class="platform-icon" style="color: #fcc624;">
+                    <i class="ph-fill ph-linux-logo"></i>
+                </div>
+                <h3 class="platform-name">Linux</h3>
+                <div class="version-badge">Shell Script</div>
+                <p class="platform-details">
+                    For Ubuntu 20.04+, Debian, Fedora, Arch, and other distributions<br>
+                    Includes: Python 3.11 + Virtual Environment + All Dependencies
+                </p>
+                <a href="#" class="btn btn-primary" style="width: 100%; justify-content: center;">
+                    <i class="ph ph-download-simple"></i> Download RadiantAI-Setup.sh
+                </a>
+                <p class="file-size">Installer Script • 7 KB<br>
+                    <span style="font-size: 0.75rem;">(Downloads ~450 MB on first run)</span>
+                </p>
+            </div>
+        </div>
+    </div>
+
+    <!-- How It Works -->
+    <div class="section-block">
+        <h2 class="section-subtitle">
+            <i class="ph ph-gear-six" style="color: var(--primary-cyan);"></i> How the One-Click Installer Works
+        </h2>
+        <p style="color: var(--text-gray); line-height: 1.8; margin-bottom: 25px;">
+            The automated installer script handles all the complex setup for you [web:21][web:27][web:29].
+        </p>
+        
+        <div class="info-grid">
+            <div class="info-card">
+                <h4><i class="ph ph-number-circle-one"></i> Python Installation</h4>
+                <p>Automatically downloads and installs Python 3.11 (portable version) if not already installed [web:21][web:29].</p>
+            </div>
+            <div class="info-card">
+                <h4><i class="ph ph-number-circle-two"></i> Virtual Environment</h4>
+                <p>Creates an isolated Python virtual environment (venv) to avoid conflicts with your system [web:27].</p>
+            </div>
+            <div class="info-card">
+                <h4><i class="ph ph-number-circle-three"></i> Dependencies</h4>
+                <p>Installs all required libraries: Flask, TensorFlow, OpenCV, PIL, NumPy, and more via pip [web:28].</p>
+            </div>
+            <div class="info-card">
+                <h4><i class="ph ph-number-circle-four"></i> AI Models</h4>
+                <p>Downloads pre-trained models: YOLOv8, super-resolution, colorization, and face detection models.</p>
+            </div>
+            <div class="info-card">
+                <h4><i class="ph ph-number-circle-five"></i> Auto Launch</h4>
+                <p>Starts the Flask server and automatically opens Radiant AI in your default web browser [web:27].</p>
+            </div>
+            <div class="info-card">
+                <h4><i class="ph ph-number-circle-six"></i> Future Runs</h4>
+                <p>After first setup, double-click the .bat file anytime to instantly launch the application [web:27].</p>
+            </div>
+        </div>
+    </div>
+
+    <!-- Installation Instructions -->
+    <div class="section-block">
+        <h2 class="section-subtitle">
+            <i class="ph ph-list-checks" style="color: var(--primary-purple);"></i> Installation Instructions
+        </h2>
+        
+        <div style="margin-top: 25px;">
+            <!-- Windows Instructions -->
+            <div style="background: rgba(255, 255, 255, 0.02); padding: 25px; border-radius: 15px; border: 1px solid var(--glass-border); margin-bottom: 25px;">
+                <h4 style="color: var(--text-white); margin-bottom: 15px; display: flex; align-items: center; gap: 10px; font-size: 1.2rem;">
+                    <i class="ph-fill ph-windows-logo" style="color: #00a4ef;"></i> Windows Installation
+                </h4>
+                <ol style="color: var(--text-gray); line-height: 2.2; padding-left: 20px; font-size: 0.95rem;">
+                    <li>Download the <code style="background: rgba(0, 242, 255, 0.1); padding: 3px 10px; border-radius: 5px; color: var(--primary-cyan);">RadiantAI-Setup.bat</code> file</li>
+                    <li>Save it to a folder where you want Radiant AI installed (e.g., <code style="background: rgba(255,255,255,0.05); padding: 2px 8px; border-radius: 4px;">C:\RadiantAI\</code>) [web:27]</li>
+                    <li><strong>Double-click</strong> the <code style="background: rgba(0, 242, 255, 0.1); padding: 3px 10px; border-radius: 5px; color: var(--primary-cyan);">RadiantAI-Setup.bat</code> file [web:21][web:27]</li>
+                    <li>A command prompt will open and begin the automatic installation (takes 3-5 minutes on first run) [web:21]</li>
+                    <li>Once complete, Radiant AI will automatically open in your browser at <code style="background: rgba(255,255,255,0.05); padding: 2px 8px; border-radius: 4px;">http://localhost:5000</code></li>
+                    <li><strong>Next time:</strong> Just double-click the .bat file to launch instantly! [web:27]</li>
+                </ol>
+                <div style="margin-top: 20px; padding: 15px; background: rgba(0, 242, 255, 0.05); border-left: 3px solid var(--primary-cyan); border-radius: 5px;">
+                    <p style="color: var(--text-gray); margin: 0; font-size: 0.9rem;">
+                        <i class="ph ph-info" style="color: var(--primary-cyan);"></i> 
+                        <strong>Note:</strong> Windows may show a security warning for the .bat file. Click "More info" → "Run anyway" to proceed [web:21].
+                    </p>
+                </div>
+            </div>
+
+            <!-- macOS Instructions -->
+            <div style="background: rgba(255, 255, 255, 0.02); padding: 25px; border-radius: 15px; border: 1px solid var(--glass-border); margin-bottom: 25px;">
+                <h4 style="color: var(--text-white); margin-bottom: 15px; display: flex; align-items: center; gap: 10px; font-size: 1.2rem;">
+                    <i class="ph-fill ph-apple-logo" style="color: var(--text-white);"></i> macOS Installation
+                </h4>
+                <ol style="color: var(--text-gray); line-height: 2.2; padding-left: 20px; font-size: 0.95rem;">
+                    <li>Download the <code style="background: rgba(0, 242, 255, 0.1); padding: 3px 10px; border-radius: 5px; color: var(--primary-cyan);">RadiantAI-Setup.sh</code> file</li>
+                    <li>Open Terminal and navigate to the download location</li>
+                    <li>Make the script executable: <code style="background: rgba(255,255,255,0.05); padding: 2px 8px; border-radius: 4px;">chmod +x RadiantAI-Setup.sh</code> [web:26]</li>
+                    <li>Run the installer: <code style="background: rgba(255,255,255,0.05); padding: 2px 8px; border-radius: 4px;">./RadiantAI-Setup.sh</code></li>
+                    <li>The script will handle all installation and launch the browser automatically</li>
+                    <li><strong>Next time:</strong> Run <code style="background: rgba(255,255,255,0.05); padding: 2px 8px; border-radius: 4px;">./RadiantAI-Launch.sh</code> to start instantly</li>
+                </ol>
+            </div>
+
+            <!-- Linux Instructions -->
+            <div style="background: rgba(255, 255, 255, 0.02); padding: 25px; border-radius: 15px; border: 1px solid var(--glass-border);">
+                <h4 style="color: var(--text-white); margin-bottom: 15px; display: flex; align-items: center; gap: 10px; font-size: 1.2rem;">
+                    <i class="ph-fill ph-linux-logo" style="color: #fcc624;"></i> Linux Installation
+                </h4>
+                <ol style="color: var(--text-gray); line-height: 2.2; padding-left: 20px; font-size: 0.95rem;">
+                    <li>Download the <code style="background: rgba(0, 242, 255, 0.1); padding: 3px 10px; border-radius: 5px; color: var(--primary-cyan);">RadiantAI-Setup.sh</code> file</li>
+                    <li>Open your terminal and navigate to the download location</li>
+                    <li>Make it executable: <code style="background: rgba(255,255,255,0.05); padding: 2px 8px; border-radius: 4px;">chmod +x RadiantAI-Setup.sh</code> [web:26]</li>
+                    <li>Run the installer: <code style="background: rgba(255,255,255,0.05); padding: 2px 8px; border-radius: 4px;">./RadiantAI-Setup.sh</code></li>
+                    <li>The script automatically installs dependencies and launches in your browser</li>
+                    <li><strong>Next time:</strong> Run <code style="background: rgba(255,255,255,0.05); padding: 2px 8px; border-radius: 4px;">./RadiantAI-Launch.sh</code> for instant startup</li>
+                </ol>
+            </div>
+        </div>
+    </div>
+
+    <!-- What Gets Installed -->
+    <div class="section-block">
+        <h2 class="section-subtitle">
+            <i class="ph ph-package" style="color: var(--primary-cyan);"></i> What Gets Installed
+        </h2>
+        <p style="color: var(--text-gray); line-height: 1.8; margin-bottom: 20px;">
+            The installer downloads and configures everything needed for Radiant AI [web:21][web:27][web:28].
+        </p>
+        
+        <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 20px;">
+            <div>
+                <h4 style="color: var(--primary-cyan); margin-bottom: 15px;">
+                    <i class="ph ph-code"></i> Core Components
+                </h4>
+                <ul class="feature-list">
+                    <li>Python 3.11 (Portable) [web:29]</li>
+                    <li>Virtual Environment (venv) [web:27]</li>
+                    <li>Flask Web Framework</li>
+                    <li>Requirements.txt dependencies [web:28]</li>
+                </ul>
+            </div>
+            
+            <div>
+                <h4 style="color: var(--primary-cyan); margin-bottom: 15px;">
+                    <i class="ph ph-brain"></i> AI & ML Libraries
+                </h4>
+                <ul class="feature-list">
+                    <li>TensorFlow 2.x</li>
+                    <li>PyTorch</li>
+                    <li>OpenCV (cv2)</li>
+                    <li>Pillow (PIL)</li>
+                    <li>NumPy & SciPy</li>
+                </ul>
+            </div>
+            
+            <div>
+                <h4 style="color: var(--primary-cyan); margin-bottom: 15px;">
+                    <i class="ph ph-robot"></i> Pre-trained Models
+                </h4>
+                <ul class="feature-list">
+                    <li>YOLOv8 (Object Detection)</li>
+                    <li>Super Resolution (ESRGAN)</li>
+                    <li>Colorization Model</li>
+                    <li>Face Detection (Haar Cascade)</li>
+                    <li>Background Removal (U2-Net)</li>
+                </ul>
+            </div>
+        </div>
+    </div>
+
+    <!-- Desktop Features -->
+    <div class="section-block">
+        <h2 class="section-subtitle">
+            <i class="ph ph-lightning" style="color: var(--primary-purple);"></i> Desktop Version Benefits
+        </h2>
+        
+        <div class="info-grid">
+            <div class="info-card">
+                <h4><i class="ph ph-airplane-takeoff"></i> Fully Offline</h4>
+                <p>Process images without internet. All models and processing happen locally on your machine [web:26].</p>
+            </div>
+            <div class="info-card">
+                <h4><i class="ph ph-rocket-launch"></i> Faster Performance</h4>
+                <p>Native Python execution is significantly faster than web-based processing.</p>
+            </div>
+            <div class="info-card">
+                <h4><i class="ph ph-lock-key"></i> Complete Privacy</h4>
+                <p>Your images never leave your computer. Perfect for sensitive or confidential content [web:26].</p>
+            </div>
+            <div class="info-card">
+                <h4><i class="ph ph-infinity"></i> No Limits</h4>
+                <p>Process unlimited images with no file size or batch quantity restrictions.</p>
+            </div>
+            <div class="info-card">
+                <h4><i class="ph ph-hard-drives"></i> Local Storage</h4>
+                <p>Save processed images directly to your local folders with full file system access.</p>
+            </div>
+            <div class="info-card">
+                <h4><i class="ph ph-plugs-connected"></i> Easy Updates</h4>
+                <p>Simply re-run the .bat file to check for and install updates automatically [web:27].</p>
+            </div>
+        </div>
+    </div>
+
+    <!-- System Requirements -->
+    <div class="section-block">
+        <h2 class="section-subtitle">
+            <i class="ph ph-cpu" style="color: var(--primary-cyan);"></i> System Requirements
+        </h2>
+        
+        <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(350px, 1fr)); gap: 30px; margin-top: 25px;">
+            <div>
+                <h4 style="color: var(--primary-cyan); margin-bottom: 15px; font-size: 1.1rem;">Minimum Requirements</h4>
+                <ul class="feature-list">
+                    <li>Windows 10/11, macOS 11+, or Linux (Ubuntu 20.04+)</li>
+                    <li>4GB RAM (8GB recommended)</li>
+                    <li>2 GHz dual-core processor</li>
+                    <li>2GB free disk space (for installation)</li>
+                    <li>Active internet (first installation only) [web:21]</li>
+                </ul>
+            </div>
+            
+            <div>
+                <h4 style="color: var(--primary-cyan); margin-bottom: 15px; font-size: 1.1rem;">Recommended for Best Performance</h4>
+                <ul class="feature-list">
+                    <li>16GB RAM or higher</li>
+                    <li>Multi-core processor (6+ cores)</li>
+                    <li>NVIDIA GPU with CUDA support</li>
+                    <li>5GB free disk space</li>
+                    <li>SSD storage for faster model loading</li>
+                </ul>
+            </div>
+        </div>
+    </div>
+
+    <!-- Troubleshooting -->
+    <div class="section-block">
+        <h2 class="section-subtitle">
+            <i class="ph ph-wrench" style="color: var(--primary-purple);"></i> Troubleshooting
+        </h2>
+        
+        <div style="margin-top: 20px;">
+            <div style="margin-bottom: 25px;">
+                <h4 style="color: var(--primary-cyan); margin-bottom: 8px;">
+                    <i class="ph ph-warning"></i> "Windows protected your PC" warning
+                </h4>
+                <p style="color: var(--text-gray); line-height: 1.7;">
+                    This is normal for .bat files. Click "More info" → "Run anyway" to proceed [web:21].
+                </p>
+            </div>
+            
+            <div style="margin-bottom: 25px;">
+                <h4 style="color: var(--primary-cyan); margin-bottom: 8px;">
+                    <i class="ph ph-x-circle"></i> Installation fails or gets stuck
+                </h4>
+                <p style="color: var(--text-gray); line-height: 1.7;">
+                    Ensure you have a stable internet connection. Delete the created folders and try again [web:27].
+                </p>
+            </div>
+            
+            <div style="margin-bottom: 25px;">
+                <h4 style="color: var(--primary-cyan); margin-bottom: 8px;">
+                    <i class="ph ph-browsers"></i> Browser doesn't open automatically
+                </h4>
+                <p style="color: var(--text-gray); line-height: 1.7;">
+                    Manually open your browser and navigate to <code style="background: rgba(255,255,255,0.05); padding: 2px 8px; border-radius: 4px;">http://localhost:5000</code>
+                </p>
+            </div>
+            
+            <div style="margin-bottom: 25px;">
+                <h4 style="color: var(--primary-cyan); margin-bottom: 8px;">
+                    <i class="ph ph-stop-circle"></i> "Port 5000 already in use" error
+                </h4>
+                <p style="color: var(--text-gray); line-height: 1.7;">
+                    Another application is using port 5000. Close other Flask apps or modify the port in the config file.
+                </p>
+            </div>
+        </div>
+    </div>
+
+    <!-- Support Section -->
+    <div class="section-block" style="text-align: center; background: linear-gradient(135deg, rgba(189, 0, 255, 0.05) 0%, rgba(0, 242, 255, 0.05) 100%);">
+        <h2 class="section-subtitle">Need Help?</h2>
+        <p style="color: var(--text-gray); margin-bottom: 25px; max-width: 600px; margin-left: auto; margin-right: auto;">
+            Check our documentation for detailed guides, or contact us for support.
+        </p>
+        <div style="display: flex; gap: 15px; justify-content: center; flex-wrap: wrap;">
+            <a href="{{ url_for('docs') }}" class="btn btn-secondary">
+                <i class="ph ph-book-open"></i> View Documentation
+            </a>
+            <a href="mailto:jaihodigital@gmail.com" class="btn btn-primary">
+            <i class="ph ph-chats-circle"></i> Contact Support
+        </a>
+
+        </div>
+    </div>
+
+    <!-- License Info -->
+    <div style="text-align: center; padding: 30px 0; color: var(--text-gray); font-size: 0.85rem; border-top: 1px solid var(--glass-border); margin-top: 20px;">
+        <p style="margin-bottom: 10px;">
+            <i class="ph ph-shield-check" style="color: #00ff88;"></i> 
+            By downloading Radiant AI, you agree to our Terms of Service and Privacy Policy.
+        </p>
+        <p>
+            © 2025 Jaiho Labs. All rights reserved. | Free for personal and commercial use
+        </p>
+    </div>
+</div>
+{% endblock %}

templates/onboarding.html

@@ -0,0 +1,135 @@
+{% extends "base.html" %}
+
+{% block title %}Radiant AI - Home{% endblock %}
+{% block page_title %}Welcome{% endblock %}
+
+{% block content %}
+<style>
+    /* Page specific animations */
+    .hero-section {
+        text-align: center;
+        padding: 60px 20px;
+        animation: fadeIn 0.8s ease-out;
+    }
+
+    .hero-title {
+        font-family: 'Orbitron', sans-serif;
+        font-size: 3rem;
+        margin-bottom: 20px;
+        line-height: 1.2;
+    }
+
+    .hero-subtitle {
+        font-size: 1.2rem;
+        color: var(--text-gray);
+        max-width: 600px;
+        margin: 0 auto 40px auto;
+    }
+
+    .features-grid {
+        display: grid;
+        grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+        gap: 25px;
+        margin-top: 50px;
+    }
+
+    .feature-card {
+        background: var(--glass-bg);
+        border: 1px solid var(--glass-border);
+        padding: 30px;
+        border-radius: 20px;
+        transition: transform 0.3s, border-color 0.3s;
+        text-align: left;
+        position: relative;
+        overflow: hidden;
+    }
+
+    .feature-card:hover {
+        transform: translateY(-5px);
+        border-color: var(--primary-cyan);
+        background: rgba(255, 255, 255, 0.05);
+    }
+
+    .card-icon {
+        font-size: 2.5rem;
+        color: var(--primary-purple);
+        margin-bottom: 20px;
+        display: inline-block;
+    }
+
+    .card-title {
+        font-size: 1.4rem;
+        font-weight: 600;
+        margin-bottom: 10px;
+        color: var(--text-white);
+    }
+
+    .card-desc {
+        color: var(--text-gray);
+        font-size: 0.95rem;
+        margin-bottom: 25px;
+        line-height: 1.5;
+    }
+
+    .glow-circle {
+        position: absolute;
+        width: 150px;
+        height: 150px;
+        background: var(--primary-cyan);
+        filter: blur(80px);
+        opacity: 0.1;
+        border-radius: 50%;
+        top: -50px;
+        right: -50px;
+        pointer-events: none;
+    }
+
+    @keyframes fadeIn {
+        from { opacity: 0; transform: translateY(20px); }
+        to { opacity: 1; transform: translateY(0); }
+    }
+</style>
+
+<div class="hero-section">
+    <h1 class="hero-title">Unleash the Power of <br><span class="text-gradient">Visual Intelligence</span></h1>
+    <p class="hero-subtitle">
+        Transform your images with next-generation AI tools. Enhance, detect, restore, and create with the speed of light.
+    </p>
+    
+    <a href="{{ url_for('studio') }}" class="btn btn-primary" style="font-size: 1.1rem; padding: 15px 35px;">
+        <i class="ph-fill ph-rocket-launch"></i> Start Creating Now
+    </a>
+</div>
+
+<div class="features-grid">
+    <div class="feature-card glass-panel">
+        <div class="glow-circle" style="background: var(--primary-cyan);"></div>
+        <i class="ph-duotone ph-sliders-horizontal card-icon" style="color: var(--primary-cyan);"></i>
+        <h3 class="card-title">Image Studio</h3>
+        <p class="card-desc">
+            Professional editing tools at your fingertips. Crop, rotate, adjust lighting, and apply cinematic filters in real-time.
+        </p>
+        <a href="{{ url_for('studio') }}" class="btn btn-secondary">Open Studio <i class="ph ph-arrow-right"></i></a>
+    </div>
+
+    <div class="feature-card glass-panel">
+        <div class="glow-circle" style="background: var(--primary-purple);"></div>
+        <i class="ph-duotone ph-scan card-icon" style="color: var(--primary-purple);"></i>
+        <h3 class="card-title">Backgrounds & Vision</h3>
+        <p class="card-desc">
+            Detect objects with YOLOv8, remove backgrounds instantly, and blur faces for privacy with advanced machine learning.
+        </p>
+        <a href="{{ url_for('vision') }}" class="btn btn-secondary">Open Vision <i class="ph ph-arrow-right"></i></a>
+    </div>
+
+    <div class="feature-card glass-panel">
+        <div class="glow-circle" style="background: #ff0055;"></div>
+        <i class="ph-duotone ph-sparkle card-icon" style="color: #ff0055;"></i>
+        <h3 class="card-title">AI Laboratory</h3>
+        <p class="card-desc">
+            Deep learning magic. Upscale low-res photos (Super Resolution), colorize black & white memories, and restore old photos.
+        </p>
+        <a href="{{ url_for('ai_studio') }}" class="btn btn-secondary">Open AI Lab <i class="ph ph-arrow-right"></i></a>
+    </div>
+</div>
+{% endblock %}

templates/products.html

@@ -0,0 +1,23 @@
+{% extends "base.html" %}
+
+{% block title %}Explore Products{% endblock %}
+{% block page_title %}Other Products{% endblock %}
+
+{% block content %}
+<div class="features-grid">
+    <div class="feature-card">
+        <h3>Radiant Video AI</h3>
+        <p>AI-powered video enhancement & restoration.</p>
+    </div>
+
+    <div class="feature-card">
+        <h3>Radiant Docs AI</h3>
+        <p>Smart document analysis and OCR.</p>
+    </div>
+
+    <div class="feature-card">
+        <h3>Radiant Vision Pro</h3>
+        <p>Enterprise-grade computer vision APIs.</p>
+    </div>
+</div>
+{% endblock %}

templates/studio.html

@@ -0,0 +1,141 @@
+{% 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 %}

templates/utilities.html

@@ -0,0 +1,205 @@
+{% extends "base.html" %}
+
+{% block title %}Radiant AI - Utilities{% endblock %}
+{% block page_title %}Image Utilities{% endblock %}
+
+{% block content %}
+<style>
+    .utils-layout {
+        display: grid;
+        grid-template-columns: 300px 1fr;
+        gap: 25px;
+        height: 100%;
+    }
+
+    .util-section {
+        margin-bottom: 25px;
+        border-bottom: 1px solid var(--glass-border);
+        padding-bottom: 20px;
+    }
+
+    .util-section:last-child { border-bottom: none; padding-bottom: 0; }
+
+    .input-group {
+        display: flex;
+        gap: 10px;
+        margin-bottom: 10px;
+    }
+
+    .input-group input, .input-group select {
+        width: 100%;
+        background: rgba(0,0,0,0.3);
+        border: 1px solid var(--glass-border);
+        padding: 10px;
+        border-radius: 8px;
+        color: white;
+        font-family: 'Inter', sans-serif;
+        font-size: 0.9rem;
+    }
+
+    .input-group input:focus, .input-group select:focus {
+        border-color: var(--primary-cyan);
+        outline: none;
+    }
+
+    /* Metadata Display Box */
+    .meta-data-box {
+        background: rgba(0,0,0,0.4);
+        border-radius: 8px;
+        padding: 15px;
+        font-family: 'Courier New', monospace;
+        font-size: 0.85rem;
+        color: var(--text-gray);
+        max-height: 250px;
+        overflow-y: auto;
+        white-space: pre-wrap;
+        border: 1px solid var(--glass-border);
+        margin-top: 10px;
+    }
+</style>
+
+<div class="utils-layout">
+
+    <aside class="controls-panel">
+        
+        <div class="glass-panel" style="padding: 20px;">
+            <div class="tool-header">Source File</div>
+            <input type="file" id="utilFileInput" accept="image/*" hidden>
+            <button class="btn btn-secondary" style="width: 100%;" onclick="document.getElementById('utilFileInput').click()">
+                <i class="ph ph-upload-simple"></i> Upload Image
+            </button>
+        </div>
+
+        <div class="glass-panel" style="padding: 20px;">
+            <div class="tool-header">Format Converter</div>
+            <div class="input-group">
+                <select id="convertFormat">
+                    <option value="png">PNG (Lossless)</option>
+                    <option value="jpg">JPEG (Web Optimized)</option>
+                    <option value="webp">WebP (Modern)</option>
+                    <option value="bmp">BMP (Raw)</option>
+                </select>
+            </div>
+            <button class="btn btn-primary" onclick="runUtility('convert')" style="width: 100%; margin-top: 5px;">
+                Convert Format
+            </button>
+        </div>
+
+        <div class="glass-panel" style="padding: 20px;">
+            <div class="tool-header">Resize (Pixels)</div>
+            
+            <div class="input-group">
+                <input type="number" id="resizeW" placeholder="Width">
+                <input type="number" id="resizeH" placeholder="Height">
+            </div>
+            
+            <div class="tool-header" style="margin-top: 15px;">Compression Quality</div>
+            <div class="input-group" style="align-items: center;">
+                <input type="range" id="qualitySlider" min="10" max="100" value="90" oninput="document.getElementById('qVal').innerText=this.value">
+                <span id="qVal" style="width: 35px; text-align: center; font-weight: bold;">90</span>
+            </div>
+
+            <button class="btn btn-secondary" onclick="runUtility('resize')" style="width: 100%; margin-top: 10px;">
+                Apply Resize
+            </button>
+        </div>
+
+        <div class="glass-panel" style="padding: 20px;">
+            <div class="tool-header">Information</div>
+            <button class="btn btn-secondary" onclick="runUtility('metadata')" style="width: 100%;">
+                <i class="ph ph-list-magnifying-glass"></i> View Metadata
+            </button>
+        </div>
+
+    </aside>
+
+    <main class="glass-panel" style="display: flex; flex-direction: column; padding: 20px; overflow-y: auto;">
+        
+        <div id="utilPlaceholder" class="upload-placeholder" style="flex: 1; display: flex; flex-direction: column; justify-content: center;">
+            <i class="ph ph-wrench" style="font-size: 3rem; margin-bottom: 15px; color: var(--text-gray);"></i>
+            <h3>Utility Tools</h3>
+            <p>Convert, Resize, or Inspect your images.</p>
+        </div>
+
+        <div id="utilWorkArea" style="display: none; height: 100%; flex-direction: column;">
+            
+            <div style="flex: 1; display: flex; align-items: center; justify-content: center; background: rgba(0,0,0,0.2); border-radius: 12px; margin-bottom: 20px; min-height: 300px; padding: 20px;">
+                <img id="utilPreview" src="" style="max-width: 100%; max-height: 400px; box-shadow: 0 0 20px rgba(0,0,0,0.5); border-radius: 8px;">
+            </div>
+
+            <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; padding: 10px; background: rgba(0,0,0,0.3); border-radius: 10px;">
+                <div id="fileInfo" style="font-size: 0.9rem; color: var(--primary-cyan); font-weight: 500;">
+                    </div>
+                <a id="utilDownload" href="#" class="btn btn-primary" download>
+                    <i class="ph ph-download-simple"></i> Download Result
+                </a>
+            </div>
+
+            <div id="metaSection" style="display: none;">
+                <div class="tool-header">EXIF Data</div>
+                <div id="metaDataOutput" class="meta-data-box"></div>
+            </div>
+
+        </div>
+    </main>
+
+</div>
+
+{% endblock %}
+
+{% block scripts %}
+<script>
+    async function runUtility(action) {
+        const filename = localStorage.getItem('radiant_filename');
+        if(!filename) return alert("Please upload an image first.");
+
+        const payload = {
+            filename: filename,
+            action: action
+        };
+
+        // Gather params based on action
+        if(action === 'convert') {
+            payload.format = document.getElementById('convertFormat').value;
+        } else if (action === 'resize') {
+            payload.width = document.getElementById('resizeW').value;
+            payload.height = document.getElementById('resizeH').value;
+            payload.quality = document.getElementById('qualitySlider').value;
+        }
+
+        try {
+            const res = await fetch('/api/process-utility', {
+                method: 'POST',
+                headers: {'Content-Type': 'application/json'},
+                body: JSON.stringify(payload)
+            });
+
+            const data = await res.json();
+
+            if(data.success) {
+                if(action === 'metadata') {
+                    // Handle Metadata display
+                    document.getElementById('metaSection').style.display = 'block';
+                    document.getElementById('metaDataOutput').innerText = JSON.stringify(data.metadata, null, 2);
+                } else {
+                    // Handle Image operations
+                    const img = document.getElementById('utilPreview');
+                    img.src = `${data.url}?t=${new Date().getTime()}`;
+                    
+                    document.getElementById('utilDownload').href = data.url;
+                    
+                    // Update Info Text
+                    const format = (action === 'convert') ? payload.format.toUpperCase() : 'Image';
+                    document.getElementById('fileInfo').innerText = `Success: ${data.filename}`;
+                }
+            } else {
+                alert("Error: " + data.error);
+            }
+
+        } catch(err) {
+            console.error(err);
+            alert("Processing Error");
+        }
+    }
+</script>
+{% endblock %}

templates/vision.html

@@ -0,0 +1,89 @@
+{% 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 %}