Spaces:

Semnykcz
/

UpscaleStudioAPI

Sleeping

App Files Files Community

nykadamec commited on Aug 10

Commit

18ea579

1 Parent(s): 3f578a8

test_api_1

Browse files

Files changed (4) hide show

Dockerfile +31 -0
package.json +37 -0
public/index.html +279 -0
server.js +247 -0

Dockerfile ADDED Viewed

	@@ -0,0 +1,31 @@

+# Use Node.js 18 LTS as base image
+FROM node:18-slim
+# Set working directory
+WORKDIR /app
+# Install system dependencies for TensorFlow.js
+RUN apt-get update && apt-get install -y \
+    python3 \
+    python3-pip \
+    build-essential \
+    && rm -rf /var/lib/apt/lists/*
+# Copy package files
+COPY package*.json ./
+# Install Node.js dependencies
+RUN npm ci --only=production
+# Copy application code
+COPY . .
+# Expose port for Hugging Face Spaces
+EXPOSE 7860
+# Set environment variables
+ENV NODE_ENV=production
+ENV PORT=7860
+# Start the server
+CMD ["npm", "start"]

package.json ADDED Viewed

	@@ -0,0 +1,37 @@

+{
+  "name": "upscaler-api",
+  "version": "1.0.0",
+  "description": "AI Image Upscaler API for Hugging Face Spaces",
+  "main": "server.js",
+  "scripts": {
+    "start": "node server.js",
+    "dev": "node server.js"
+  },
+  "dependencies": {
+    "express": "^4.18.2",
+    "multer": "^1.4.5-lts.1",
+    "cors": "^2.8.5",
+    "@tensorflow/tfjs": "^4.11.0",
+    "@tensorflow/tfjs-backend-wasm": "~4.11.0",
+    "@tensorflow/tfjs-backend-webgl": "~4.11.0",
+    "@tensorflow/tfjs-backend-cpu": "~4.11.0",
+    "@upscalerjs/esrgan-slim": "1.0.0-beta.12",
+    "@upscalerjs/esrgan-medium": "1.0.0-beta.13",
+    "@upscalerjs/esrgan-thick": "1.0.0-beta.16",
+    "upscaler": "1.0.0-beta.19",
+    "canvas": "^2.11.2",
+    "sharp": "^0.32.6"
+  },
+  "engines": {
+    "node": ">=18.0.0"
+  },
+  "keywords": [
+    "ai",
+    "upscaler",
+    "tensorflow",
+    "image-processing",
+    "api"
+  ],
+  "author": "Upscale2 Team",
+  "license": "MIT"
+}

public/index.html ADDED Viewed

	@@ -0,0 +1,279 @@

+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>AI Image Upscaler API Test</title>
+    <style>
+        body {
+            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+            max-width: 800px;
+            margin: 0 auto;
+            padding: 20px;
+            background: #f5f5f5;
+        }
+        .container {
+            background: white;
+            padding: 30px;
+            border-radius: 12px;
+            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
+        }
+        h1 {
+            color: #333;
+            text-align: center;
+            margin-bottom: 30px;
+        }
+        .form-group {
+            margin-bottom: 20px;
+        }
+        label {
+            display: block;
+            margin-bottom: 5px;
+            font-weight: 600;
+            color: #555;
+        }
+        input, select {
+            width: 100%;
+            padding: 10px;
+            border: 2px solid #ddd;
+            border-radius: 6px;
+            font-size: 16px;
+            box-sizing: border-box;
+        }
+        input:focus, select:focus {
+            outline: none;
+            border-color: #007bff;
+        }
+        button {
+            background: #007bff;
+            color: white;
+            padding: 12px 24px;
+            border: none;
+            border-radius: 6px;
+            font-size: 16px;
+            cursor: pointer;
+            width: 100%;
+            margin-top: 10px;
+        }
+        button:hover {
+            background: #0056b3;
+        }
+        button:disabled {
+            background: #ccc;
+            cursor: not-allowed;
+        }
+        .result {
+            margin-top: 30px;
+            padding: 20px;
+            background: #f8f9fa;
+            border-radius: 6px;
+            border-left: 4px solid #007bff;
+        }
+        .error {
+            background: #f8d7da;
+            border-left-color: #dc3545;
+            color: #721c24;
+        }
+        .success {
+            background: #d4edda;
+            border-left-color: #28a745;
+            color: #155724;
+        }
+        .image-container {
+            display: flex;
+            gap: 20px;
+            margin-top: 20px;
+            flex-wrap: wrap;
+        }
+        .image-box {
+            flex: 1;
+            min-width: 300px;
+        }
+        .image-box h3 {
+            margin-top: 0;
+            color: #555;
+        }
+        .image-box img {
+            max-width: 100%;
+            height: auto;
+            border: 2px solid #ddd;
+            border-radius: 6px;
+        }
+        .metadata {
+            background: #e9ecef;
+            padding: 15px;
+            border-radius: 6px;
+            margin-top: 15px;
+            font-family: monospace;
+            font-size: 14px;
+        }
+        .loading {
+            text-align: center;
+            padding: 20px;
+        }
+        .spinner {
+            border: 4px solid #f3f3f3;
+            border-top: 4px solid #007bff;
+            border-radius: 50%;
+            width: 40px;
+            height: 40px;
+            animation: spin 1s linear infinite;
+            margin: 0 auto 10px;
+        }
+        @keyframes spin {
+            0% { transform: rotate(0deg); }
+            100% { transform: rotate(360deg); }
+        }
+    </style>
+</head>
+<body>
+    <div class="container">
+        <h1>🚀 AI Image Upscaler API Test</h1>
+        <form id="upscaleForm">
+            <div class="form-group">
+                <label for="imageFile">Select Image:</label>
+                <input type="file" id="imageFile" accept="image/*" required>
+            </div>
+            <div class="form-group">
+                <label for="scale">Scale Factor:</label>
+                <select id="scale">
+                    <option value="2">2x</option>
+                    <option value="3">3x</option>
+                    <option value="4">4x</option>
+                </select>
+            </div>
+            <div class="form-group">
+                <label for="modelType">AI Model:</label>
+                <select id="modelType">
+                    <option value="esrgan-slim">ESRGAN Slim (Fast)</option>
+                    <option value="esrgan-medium">ESRGAN Medium (Balanced)</option>
+                    <option value="esrgan-thick">ESRGAN Thick (Best Quality)</option>
+                </select>
+            </div>
+            <div class="form-group">
+                <label for="patchSize">Patch Size:</label>
+                <select id="patchSize">
+                    <option value="64">64</option>
+                    <option value="96">96</option>
+                    <option value="128" selected>128</option>
+                    <option value="160">160</option>
+                    <option value="192">192</option>
+                </select>
+            </div>
+            <div class="form-group">
+                <label for="padding">Padding:</label>
+                <select id="padding">
+                    <option value="0">0</option>
+                    <option value="4">4</option>
+                    <option value="8" selected>8</option>
+                    <option value="12">12</option>
+                    <option value="16">16</option>
+                </select>
+            </div>
+            <button type="submit" id="submitBtn">Upscale Image</button>
+        </form>
+        <div id="result"></div>
+    </div>
+    <script>
+        document.getElementById('upscaleForm').addEventListener('submit', async (e) => {
+            e.preventDefault();
+            const fileInput = document.getElementById('imageFile');
+            const scale = document.getElementById('scale').value;
+            const modelType = document.getElementById('modelType').value;
+            const patchSize = document.getElementById('patchSize').value;
+            const padding = document.getElementById('padding').value;
+            const submitBtn = document.getElementById('submitBtn');
+            const resultDiv = document.getElementById('result');
+            if (!fileInput.files[0]) {
+                alert('Please select an image file');
+                return;
+            }
+            // Show loading state
+            submitBtn.disabled = true;
+            submitBtn.textContent = 'Processing...';
+            resultDiv.innerHTML = `
+                <div class="loading">
+                    <div class="spinner"></div>
+                    <p>Upscaling image with ${scale}x scale using ${modelType} model...</p>
+                </div>
+            `;
+            try {
+                const formData = new FormData();
+                formData.append('image', fileInput.files[0]);
+                formData.append('scale', scale);
+                formData.append('modelType', modelType);
+                formData.append('patchSize', patchSize);
+                formData.append('padding', padding);
+                const startTime = Date.now();
+                const response = await fetch('/upscale', {
+                    method: 'POST',
+                    body: formData
+                });
+                const result = await response.json();
+                const totalTime = Date.now() - startTime;
+                if (result.success) {
+                    // Create original image URL
+                    const originalImageUrl = URL.createObjectURL(fileInput.files[0]);
+                    resultDiv.innerHTML = `
+                        <div class="result success">
+                            <h3>✅ Upscaling Successful!</h3>
+                            <div class="image-container">
+                                <div class="image-box">
+                                    <h3>Original Image</h3>
+                                    <img src="${originalImageUrl}" alt="Original">
+                                </div>
+                                <div class="image-box">
+                                    <h3>Upscaled Image (${result.metadata.scale}x)</h3>
+                                    <img src="${result.result}" alt="Upscaled">
+                                    <a href="${result.result}" download="upscaled-${result.metadata.scale}x.png"
+                                       style="display: inline-block; margin-top: 10px; padding: 8px 16px; background: #007bff; color: white; text-decoration: none; border-radius: 4px;">
+                                        Download Upscaled Image
+                                    </a>
+                                </div>
+                            </div>
+                            <div class="metadata">
+                                <strong>Processing Details:</strong><br>
+                                Scale: ${result.metadata.scale}x<br>
+                                Model: ${result.metadata.modelType}<br>
+                                Patch Size: ${result.metadata.patchSize}<br>
+                                Padding: ${result.metadata.padding}<br>
+                                Backend: ${result.metadata.backend}<br>
+                                Server Processing Time: ${result.metadata.processingTime}ms<br>
+                                Total Time: ${totalTime}ms
+                            </div>
+                        </div>
+                    `;
+                } else {
+                    throw new Error(result.error || 'Unknown error');
+                }
+            } catch (error) {
+                resultDiv.innerHTML = `
+                    <div class="result error">
+                        <h3>❌ Error</h3>
+                        <p><strong>Failed to upscale image:</strong> ${error.message}</p>
+                    </div>
+                `;
+            } finally {
+                submitBtn.disabled = false;
+                submitBtn.textContent = 'Upscale Image';
+            }
+        });
+    </script>
+</body>
+</html>

server.js ADDED Viewed

	@@ -0,0 +1,247 @@

+const express = require('express');
+const multer = require('multer');
+const cors = require('cors');
+const sharp = require('sharp');
+const tf = require('@tensorflow/tfjs');
+require('@tensorflow/tfjs-backend-wasm');
+require('@tensorflow/tfjs-backend-cpu');
+const Upscaler = require('upscaler').default;
+const app = express();
+const PORT = process.env.PORT || 7860;
+// Middleware
+app.use(cors());
+app.use(express.json({ limit: '50mb' }));
+app.use(express.urlencoded({ extended: true, limit: '50mb' }));
+// Serve static files from public directory
+app.use(express.static('public'));
+// Configure multer for file uploads
+const upload = multer({
+  storage: multer.memoryStorage(),
+  limits: {
+    fileSize: 10 * 1024 * 1024, // 10MB limit
+  },
+  fileFilter: (req, file, cb) => {
+    if (file.mimetype.startsWith('image/')) {
+      cb(null, true);
+    } else {
+      cb(new Error('Only image files are allowed'), false);
+    }
+  }
+});
+// Global upscaler instance
+let upscalerInstance = null;
+// Initialize TensorFlow.js backend
+async function initializeTensorFlow() {
+  try {
+    console.log('Initializing TensorFlow.js...');
+    // Try to set WASM backend first, fallback to CPU
+    try {
+      await tf.setBackend('wasm');
+      await tf.ready();
+      console.log('TensorFlow.js initialized with WASM backend');
+    } catch (wasmError) {
+      console.warn('WASM backend failed, falling back to CPU:', wasmError.message);
+      await tf.setBackend('cpu');
+      await tf.ready();
+      console.log('TensorFlow.js initialized with CPU backend');
+    }
+    console.log('Current backend:', tf.getBackend());
+    return true;
+  } catch (error) {
+    console.error('Failed to initialize TensorFlow.js:', error);
+    return false;
+  }
+}
+// Get model for scale and type
+async function getModelForScaleAndType(scale, modelType) {
+  switch (modelType) {
+    case 'esrgan-slim':
+      const { x2: slimX2, x3: slimX3, x4: slimX4 } = require('@upscalerjs/esrgan-slim');
+      if (scale === 2) return slimX2;
+      if (scale === 3) return slimX3;
+      return slimX4;
+    case 'esrgan-medium':
+      const { x2: mediumX2, x3: mediumX3, x4: mediumX4 } = require('@upscalerjs/esrgan-medium');
+      if (scale === 2) return mediumX2;
+      if (scale === 3) return mediumX3;
+      return mediumX4;
+    case 'esrgan-thick':
+      const { x2: thickX2, x3: thickX3, x4: thickX4 } = require('@upscalerjs/esrgan-thick');
+      if (scale === 2) return thickX2;
+      if (scale === 3) return thickX3;
+      return thickX4;
+    default:
+      // Default to esrgan-slim
+      const { x2: defaultX2, x3: defaultX3, x4: defaultX4 } = require('@upscalerjs/esrgan-slim');
+      if (scale === 2) return defaultX2;
+      if (scale === 3) return defaultX3;
+      return defaultX4;
+  }
+}
+// Initialize upscaler with specific model
+async function initializeUpscaler(scale = 2, modelType = 'esrgan-slim') {
+  try {
+    console.log(`Initializing upscaler with scale ${scale}x and model ${modelType}...`);
+    const model = await getModelForScaleAndType(scale, modelType);
+    upscalerInstance = new Upscaler({ model });
+    console.log('Upscaler initialized successfully');
+    return upscalerInstance;
+  } catch (error) {
+    console.error('Failed to initialize upscaler:', error);
+    throw error;
+  }
+}
+// Convert buffer to base64 data URL
+function bufferToDataURL(buffer, mimeType = 'image/png') {
+  const base64 = buffer.toString('base64');
+  return `data:${mimeType};base64,${base64}`;
+}
+// Health check endpoint
+app.get('/', (req, res) => {
+  res.json({
+    status: 'ok',
+    message: 'AI Image Upscaler API',
+    backend: tf.getBackend(),
+    version: '1.0.0',
+    endpoints: {
+      upscale: 'POST /upscale',
+      health: 'GET /'
+    }
+  });
+});
+// Main upscale endpoint
+app.post('/upscale', upload.single('image'), async (req, res) => {
+  try {
+    if (!req.file) {
+      return res.status(400).json({ error: 'No image file provided' });
+    }
+    const { scale = 2, modelType = 'esrgan-slim', patchSize = 128, padding = 8 } = req.body;
+    // Validate parameters
+    const validScales = [2, 3, 4];
+    const validModels = ['esrgan-slim', 'esrgan-medium', 'esrgan-thick'];
+    if (!validScales.includes(parseInt(scale))) {
+      return res.status(400).json({ error: 'Invalid scale. Must be 2, 3, or 4' });
+    }
+    if (!validModels.includes(modelType)) {
+      return res.status(400).json({ error: 'Invalid model type' });
+    }
+    console.log(`Processing image with scale ${scale}x, model ${modelType}`);
+    // Initialize upscaler if needed
+    if (!upscalerInstance) {
+      await initializeUpscaler(parseInt(scale), modelType);
+    }
+    // Convert image buffer to data URL
+    const inputDataURL = bufferToDataURL(req.file.buffer, req.file.mimetype);
+    // Perform upscaling
+    console.log('Starting upscaling...');
+    const startTime = Date.now();
+    const result = await upscalerInstance.upscale(inputDataURL, {
+      output: 'base64',
+      patchSize: parseInt(patchSize),
+      padding: parseInt(padding),
+      awaitNextFrame: true
+    });
+    const processingTime = Date.now() - startTime;
+    console.log(`Upscaling completed in ${processingTime}ms`);
+    // Return the upscaled image
+    res.json({
+      success: true,
+      result: result,
+      metadata: {
+        scale: parseInt(scale),
+        modelType: modelType,
+        patchSize: parseInt(patchSize),
+        padding: parseInt(padding),
+        processingTime: processingTime,
+        backend: tf.getBackend()
+      }
+    });
+  } catch (error) {
+    console.error('Upscaling error:', error);
+    res.status(500).json({
+      error: 'Failed to upscale image',
+      message: error.message,
+      backend: tf.getBackend()
+    });
+  }
+});
+// Error handling middleware
+app.use((error, req, res, next) => {
+  if (error instanceof multer.MulterError) {
+    if (error.code === 'LIMIT_FILE_SIZE') {
+      return res.status(400).json({ error: 'File too large. Maximum size is 10MB' });
+    }
+  }
+  console.error('Unhandled error:', error);
+  res.status(500).json({ error: 'Internal server error' });
+});
+// Start server
+async function startServer() {
+  try {
+    // Initialize TensorFlow.js
+    const tfInitialized = await initializeTensorFlow();
+    if (!tfInitialized) {
+      console.error('Failed to initialize TensorFlow.js. Exiting...');
+      process.exit(1);
+    }
+    // Start the server
+    app.listen(PORT, '0.0.0.0', () => {
+      console.log(`🚀 Upscaler API server running on port ${PORT}`);
+      console.log(`📊 TensorFlow.js backend: ${tf.getBackend()}`);
+      console.log(`🔗 Health check: http://localhost:${PORT}/`);
+    });
+  } catch (error) {
+    console.error('Failed to start server:', error);
+    process.exit(1);
+  }
+}
+// Handle graceful shutdown
+process.on('SIGTERM', () => {
+  console.log('Received SIGTERM, shutting down gracefully...');
+  if (upscalerInstance) {
+    try {
+      upscalerInstance.dispose();
+    } catch (error) {
+      console.warn('Error disposing upscaler:', error);
+    }
+  }
+  process.exit(0);
+});
+// Start the server
+startServer();