Add project files

.gitattributes

@@ -33,3 +33,4 @@ saved_model/**/* 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
+*.jpg filter=lfs diff=lfs merge=lfs -text

Dockerfile

@@ -0,0 +1,16 @@
+# Read the doc: https://huggingface.co/docs/hub/spaces-sdks-docker
+# you will also find guides on how best to write your Dockerfile
+
+FROM python:3.10
+
+RUN useradd -m -u 1000 user
+USER user
+ENV PATH="/home/user/.local/bin:$PATH"
+
+WORKDIR /app
+
+COPY --chown=user ./requirements.txt requirements.txt
+RUN pip install --no-cache-dir --upgrade -r requirements.txt
+
+COPY --chown=user . /app
+CMD ["uvicorn", "app:app", "--host", "0.0.0.0", "--port", "7860"]

app.py

@@ -0,0 +1,120 @@
+from flask import Flask, render_template, request, jsonify, send_from_directory
+import numpy as np
+from PIL import Image
+import io
+import base64
+from scipy.linalg import svd
+import os
+
+app = Flask(__name__, static_url_path='/static')
+
+def calculate_storage(shape, r_value):
+    if len(shape) == 3:  # RGB image
+        height, width, channels = shape
+        original_size = height * width * channels
+        compressed_size = channels * (height * r_value + r_value + width * r_value)
+    else:  # Grayscale image
+        height, width = shape
+        original_size = height * width
+        compressed_size = height * r_value + r_value + width * r_value
+    
+    return {
+        'original': original_size,
+        'compressed': compressed_size,
+        'compression_ratio': original_size / compressed_size if compressed_size > 0 else 0
+    }
+
+def process_image(image_data, r_value):
+    # Open image as RGB
+    img = Image.open(io.BytesIO(image_data))
+    img_array = np.array(img)
+    
+    # Check if image is RGB (3 channels)
+    if len(img_array.shape) == 3 and img_array.shape[2] == 3:
+        # Process each channel separately
+        reconstructed = np.zeros_like(img_array)
+        
+        for channel in range(3):
+            # Extract the channel
+            channel_data = img_array[:, :, channel]
+            
+            # Perform SVD on this channel
+            U, s, Vt = svd(channel_data, full_matrices=False)
+            
+            # Reconstruct image with r singular values
+            r = min(r_value, len(s))
+            reconstructed[:, :, channel] = np.dot(U[:, :r] * s[:r], Vt[:r, :])
+        
+        # Clip values to valid range and convert to uint8
+        reconstructed = np.clip(reconstructed, 0, 255).astype(np.uint8)
+    else:
+        # Fallback to grayscale processing if not RGB
+        img_array = np.array(img.convert('L'))
+        U, s, Vt = svd(img_array, full_matrices=False)
+        r = min(r_value, len(s))
+        reconstructed = np.dot(U[:, :r] * s[:r], Vt[:r, :])
+        reconstructed = np.clip(reconstructed, 0, 255).astype(np.uint8)
+    
+    # Convert back to image
+    reconstructed_img = Image.fromarray(reconstructed)
+    
+    # Save to base64 string
+    buffered = io.BytesIO()
+    reconstructed_img.save(buffered, format="PNG")
+    img_str = base64.b64encode(buffered.getvalue()).decode()
+    
+    # Calculate storage requirements
+    storage = calculate_storage(img_array.shape, r_value)
+    
+    return {
+        'processed_image': img_str,
+        'dimensions': img_array.shape,
+        'max_r': min(img_array.shape[0], img_array.shape[1]),
+        'storage': storage
+    }
+
+def get_predefined_images():
+    images_dir = os.path.join('static', 'images')
+    if not os.path.exists(images_dir):
+        return []
+    allowed_extensions = {'.jpg', '.jpeg', '.png', '.gif'}
+    images = []
+    for filename in os.listdir(images_dir):
+        if os.path.splitext(filename)[1].lower() in allowed_extensions:
+            images.append({
+                'name': os.path.splitext(filename)[0].replace('_', ' ').title(),
+                'path': f'/static/images/{filename}'
+            })
+    return images
+
+@app.route('/')
+def index():
+    predefined_images = get_predefined_images()
+    return render_template('index.html', predefined_images=predefined_images)
+
+@app.route('/process', methods=['POST'])
+def process():
+    image_data = None
+    if 'image' in request.files:
+        image = request.files['image'].read()
+        image_data = image
+    elif 'image_url' in request.form:
+        image_url = request.form['image_url']
+        if image_url.startswith('/static/'):
+            image_path = os.path.join(os.path.dirname(__file__), image_url[1:])
+            with open(image_path, 'rb') as f:
+                image_data = f.read()
+    
+    if not image_data:
+        return jsonify({'error': 'No image provided'}), 400
+
+    r_value = int(request.form.get('r_value', 1))
+    
+    try:
+        result = process_image(image_data, r_value)
+        return jsonify(result)
+    except Exception as e:
+        return jsonify({'error': str(e)}), 400
+
+if __name__ == '__main__':
+    app.run(debug=True)

requirements.txt

@@ -0,0 +1,5 @@
+Flask==2.0.1
+Werkzeug==2.0.3
+numpy>=1.24.0
+Pillow>=9.0.0
+scipy>=1.10.0

templates/index.html

@@ -0,0 +1,397 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width,initial-scale=1.0">
+    <title>Image SVD Processor</title>
+    <style>
+        body {
+            font-family: Arial, sans-serif;
+            max-width: 1000px;
+            margin: 0 auto;
+            padding: 15px;
+            background-color: #f5f5f5;
+        }
+        .container {
+            background-color: white;
+            padding: 15px;
+            border-radius: 8px;
+            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
+        }
+        h1 {
+            text-align: center;
+            background-color: #3498db;
+            color: #fff;
+            padding: 20px;
+            margin: 0 0 20px 0;
+            border-radius: 8px;
+        }
+        .controls {
+            display: flex;
+            justify-content: space-between;
+            align-items: flex-start;
+            margin: 10px 0;
+            padding: 10px;
+            background-color: #f8f9fa;
+            border-radius: 8px;
+            gap: 10px;
+        }
+        .image-selection {
+            display: flex;
+            gap: 8px;
+            flex-wrap: wrap;
+            align-items: center;
+        }
+        .predefined-images, .upload-section {
+            display: flex;
+            flex-direction: column;
+            gap: 5px;
+        }
+        .slider-container {
+            flex: 0 0 40%;
+            margin-left: auto;
+            text-align: right;
+        }
+        #r-value {
+            width: 80%;
+        }
+        .image-container {
+            display: flex;
+            justify-content: space-between;
+            margin-top: 15px;
+            flex-wrap: wrap;
+            gap: 15px;
+        }
+        .image-box {
+            flex: 1;
+            min-width: 250px;
+            text-align: center;
+            margin-bottom: 15px;
+            padding: 10px;
+            background: #fff;
+            border-radius: 8px;
+            box-shadow: 0 1px 3px rgba(0,0,0,0.1);
+            position: relative;
+        }
+        .image-box img {
+            max-width: 100%;
+            max-height: 300px;
+            border: 1px solid #ddd;
+            border-radius: 4px;
+            padding: 8px;
+            background: #fff;
+        }
+        .loading-overlay {
+            display: none;
+            position: absolute;
+            top: 0; left: 0; right: 0; bottom: 0;
+            background: rgba(255,255,255,0.8);
+            justify-content: center;
+            align-items: center;
+        }
+        .spinner {
+            width: 50px; height: 50px;
+            border: 5px solid #f3f3f3;
+            border-top: 5px solid #3498db;
+            border-radius: 50%;
+            animation: spin 1s linear infinite;
+        }
+        @keyframes spin {
+            0% {transform: rotate(0deg);}
+            100% {transform: rotate(360deg);}
+        }
+        .info {
+            margin-top: 10px;
+            color: #666;
+            padding: 5px;
+            background: #f8f9fa;
+            border-radius: 4px;
+        }
+        input[type="file"] {
+            padding: 5px;
+            border: none;
+            background: transparent;
+        }
+        input[type="file"]::-webkit-file-upload-button {
+            background: #3498db;
+            color: white;
+            padding: 8px 16px;
+            border: none;
+            border-radius: 4px;
+            cursor: pointer;
+        }
+        input[type="range"] {
+            height: 8px;
+            -webkit-appearance: none;
+            margin: 10px 0;
+            background: #ddd;
+            border-radius: 4px;
+        }
+        input[type="range"]::-webkit-slider-thumb {
+            -webkit-appearance: none;
+            width: 20px;
+            height: 20px;
+            background: #3498db;
+            border-radius: 50%;
+            cursor: pointer;
+        }
+        .storage-info {
+            font-size: 0.9em;
+            color: #666;
+            margin-top: 5px;
+            text-align: left;
+            padding: 8px;
+            background: #f8f9fa;
+            border-radius: 4px;
+        }
+        .storage-details {
+            display: flex;
+            flex-direction: column;
+            gap: 5px;
+        }
+        .storage-row {
+            display: flex;
+            justify-content: space-between;
+        }
+        .highlight {
+            color: #3498db;
+            font-weight: bold;
+        }
+        .or-divider {
+            display: flex;
+            align-items: center;
+            color: #666;
+            font-size: 0.9em;
+            padding: 5px;
+        }
+    </style>
+</head>
+<body>
+    <div class="container">
+        <h1>Image SVD Processor</h1>
+        <div class="controls">
+            <div class="image-selection">
+                <div class="predefined-images">
+                    <label for="predefinedImage" style="margin-top: -5px;padding-bottom: 5px;">Select a predefined image:</label>
+                    <select id="predefinedImage" style="height: 30px;">
+                        <option value="">-- Select an image --</option>
+                        {% for image in predefined_images %}
+                        <option value="{{ image.path }}">{{ image.name }}</option>
+                        {% endfor %}
+                    </select>
+                </div>
+                <div class="or-divider">
+                    <span>OR</span>
+                </div>
+                <div class="upload-section">
+                    <label for="imageInput">Upload your own image:</label>
+                    <input type="file" id="imageInput" accept="image/*">
+                </div>
+            </div>
+            <div class="slider-container" style="margin-top: 10px;">
+                <label for="r-value">R Value: <span id="r-value-display">5</span></label>
+                <input type="range" id="r-value" min="1" max="100" value="5">
+            </div>
+        </div>
+
+        <div class="image-container">
+            <div class="image-box">
+                <h3>Original Image</h3>
+                <img id="originalImage" src="" alt="Original image will appear here">
+                <div class="info" id="originalInfo"></div>
+                <div class="storage-info">
+                    <div class="storage-details" id="originalStorage">
+                        <div class="storage-row">
+                            <span>Storage (bytes):</span>
+                            <span class="highlight">-</span>
+                        </div>
+                        <div class="storage-row">
+                            <span>Dimensions:</span>
+                            <span>height × width × channels</span>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <div class="image-box">
+                <h3>Processed Image</h3>
+                <img id="processedImage" src="" alt="Processed image will appear here">
+                <div class="info" id="processedInfo"></div>
+                <div class="storage-info">
+                    <div class="storage-details" id="processedStorage">
+                        <div class="storage-row">
+                            <span>Storage (bytes):</span>
+                            <span class="highlight">-</span>
+                        </div>
+                        <div class="storage-row">
+                            <span>SVD Components:</span>
+                            <span>U×r + r + V×r</span>
+                        </div>
+                        <div class="storage-row">
+                            <span>Compression Ratio:</span>
+                            <span class="highlight">-</span>
+                        </div>
+                    </div>
+                </div>
+                <div class="loading-overlay" id="loading">
+                    <div class="spinner"></div>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <script>
+        let originalImage = document.getElementById('originalImage');
+        let processedImage = document.getElementById('processedImage');
+        let rValue = document.getElementById('r-value');
+        let rValueDisplay = document.getElementById('r-value-display');
+        let loading = document.getElementById('loading');
+        let imageInput = document.getElementById('imageInput');
+        let predefinedSelect = document.getElementById('predefinedImage');
+        let maxR = 100;
+        let currentImage = null;
+
+        // Function to load first predefined image
+        function loadFirstPredefinedImage() {
+            if (predefinedSelect.options.length > 1) {  // if we have any predefined images
+                predefinedSelect.selectedIndex = 1;  // select first image (index 0 is the placeholder)
+                const selectedImageUrl = predefinedSelect.value;
+                if (selectedImageUrl) {
+                    originalImage.src = selectedImageUrl;
+                    processImageFromUrl(selectedImageUrl);
+                }
+            }
+        }
+
+        // Load first image when page loads
+        window.addEventListener('load', loadFirstPredefinedImage);
+
+        document.getElementById('predefinedImage').addEventListener('change', function(e) {
+            if (e.target.value) {
+                imageInput.value = '';
+                originalImage.src = e.target.value;
+                processImageFromUrl(e.target.value);
+            }
+        });
+
+        imageInput.addEventListener('change', function(e) {
+            if (e.target.files && e.target.files[0]) {
+                document.getElementById('predefinedImage').value = '';
+                let reader = new FileReader();
+                reader.onload = function(e) {
+                    originalImage.src = e.target.result;
+                    currentImage = imageInput.files[0];
+                    processImage();
+                }
+                reader.readAsDataURL(e.target.files[0]);
+            }
+        });
+
+        async function processImageFromUrl(imageUrl) {
+            loading.style.display = 'flex';
+            const formData = new FormData();
+            formData.append('image_url', imageUrl);
+            formData.append('r_value', rValue.value);
+            try {
+                const response = await fetch('/process', {method: 'POST', body: formData});
+                const data = await response.json();
+                if (data.error) {
+                    alert('Error: ' + data.error);
+                    return;
+                }
+                processedImage.src = 'data:image/png;base64,' + data.processed_image;
+                maxR = data.max_r;
+                rValue.max = maxR;
+                document.getElementById('originalStorage').innerHTML = `
+                    <div class="storage-row">
+                        <span>Storage (bytes):</span>
+                        <span class="highlight">${data.storage.original.toLocaleString()}</span>
+                    </div>
+                    <div class="storage-row">
+                        <span>Dimensions:</span>
+                        <span>${data.dimensions.join(' × ')}</span>
+                    </div>`;
+                document.getElementById('processedStorage').innerHTML = `
+                    <div class="storage-row">
+                        <span>Storage (bytes):</span>
+                        <span class="highlight">${data.storage.compressed.toLocaleString()}</span>
+                    </div>
+                    <div class="storage-row">
+                        <span>SVD Components:</span>
+                        <span>${data.dimensions[0]}×${rValue.value} + ${rValue.value} + ${data.dimensions[1]}×${rValue.value}</span>
+                    </div>
+                    <div class="storage-row">
+                        <span>Compression Ratio:</span>
+                        <span class="highlight">${data.storage.compression_ratio.toFixed(2)}:1</span>
+                    </div>`;
+                document.getElementById('originalInfo').textContent =
+                    `Dimensions: ${data.dimensions.join(' × ')}`;
+                document.getElementById('processedInfo').textContent =
+                    `Using ${rValue.value} of ${maxR} singular values`;
+            } catch (error) {
+                alert('Error processing image: ' + error.message);
+            } finally {
+                loading.style.display = 'none';
+            }
+        }
+
+        rValue.addEventListener('input', function() {
+            rValueDisplay.textContent = this.value;
+            const predefinedImage = document.getElementById('predefinedImage');
+            if (predefinedImage.value) {
+                processImageFromUrl(predefinedImage.value);
+            } else if (currentImage) {
+                processImage();
+            }
+        });
+
+        async function processImage() {
+            if (!currentImage) {return;}
+            loading.style.display = 'flex';
+            const formData = new FormData();
+            formData.append('image', currentImage);
+            formData.append('r_value', rValue.value);
+            try {
+                const response = await fetch('/process', {method: 'POST', body: formData});
+                const data = await response.json();
+                if (data.error) {
+                    alert('Error: ' + data.error);
+                    return;
+                }
+                processedImage.src = 'data:image/png;base64,' + data.processed_image;
+                maxR = data.max_r;
+                rValue.max = maxR;
+                document.getElementById('originalStorage').innerHTML = `
+                    <div class="storage-row">
+                        <span>Storage (bytes):</span>
+                        <span class="highlight">${data.storage.original.toLocaleString()}</span>
+                    </div>
+                    <div class="storage-row">
+                        <span>Dimensions:</span>
+                        <span>${data.dimensions.join(' × ')}</span>
+                    </div>`;
+                document.getElementById('processedStorage').innerHTML = `
+                    <div class="storage-row">
+                        <span>Storage (bytes):</span>
+                        <span class="highlight">${data.storage.compressed.toLocaleString()}</span>
+                    </div>
+                    <div class="storage-row">
+                        <span>SVD Components:</span>
+                        <span>${data.dimensions[0]}×${rValue.value} + ${rValue.value} + ${data.dimensions[1]}×${rValue.value}</span>
+                    </div>
+                    <div class="storage-row">
+                        <span>Compression Ratio:</span>
+                        <span class="highlight">${data.storage.compression_ratio.toFixed(2)}:1</span>
+                    </div>`;
+                document.getElementById('originalInfo').textContent =
+                    `Dimensions: ${data.dimensions.join(' × ')}`;
+                document.getElementById('processedInfo').textContent =
+                    `Using ${rValue.value} of ${maxR} singular values`;
+            } catch (error) {
+                alert('Error processing image: ' + error.message);
+            } finally {
+                loading.style.display = 'none';
+            }
+        }
+    </script>
+</body>
+</html>