Image_Face_Upscale_Restoration-GFPGAN_API

Running

App Files Files Community

soiz1 commited on Apr 22

Commit

0610402

verified ·

1 Parent(s): 40f5d74

Update app.py

Browse files

Files changed (1) hide show

app.py +179 -129

app.py CHANGED Viewed

@@ -115,141 +115,191 @@ def index():
     return """
 <!DOCTYPE html>
 <html>
 <head>
-	<title>Image Upscaling & Restoration API</title>
-	<style>
-	body { font-family: Arial, sans-serif; max-width: 800px; margin: 0 auto; padding: 20px; }
-	            .container { border: 1px solid #ddd; padding: 20px; border-radius: 5px; }
-	            .form-group { margin-bottom: 15px; }
-	            label { display: block; margin-bottom: 5px; }
-	            input, select { width: 100%; padding: 8px; box-sizing: border-box; }
-	            button { background-color: #4CAF50; color: white; padding: 10px 15px; border: none; border-radius: 4px; cursor: pointer; }
-	            button:hover { background-color: #45a049; }
-	            #result { margin-top: 20px; }
-	            #preview { max-width: 100%; margin-top: 10px; }
-	</style>
 </head>
 <body>
-	<h1>Image Upscaling & Restoration API</h1>
-	<div class="container">
-		<form id="uploadForm" enctype="multipart/form-data">
-			<div class="form-group">
-				<label for="file">Upload Image:</label>
-				<input type="file" id="file" name="file" required>
-			</div>
-			<div class="form-group">
-				<label for="version">Version:</label>
-				<select id="version" name="version">
-					<option value="v1.2">v1.2</option>
-					<option value="v1.3">v1.3</option>
-					<option value="v1.4" selected>v1.4</option>
-					<option value="RestoreFormer">RestoreFormer</option>
-					<option value="CodeFormer">CodeFormer</option>
-					<option value="RealESR-General-x4v3">RealESR-General-x4v3</option>
-				</select>
-			</div>
-			<div class="form-group">
-				<label for="scale">Rescaling factor:</label>
-				<input type="number" id="scale" name="scale" value="2" step="0.1" min="1" max="4" required>
-			</div>
-			<!--
-                <div class="form-group">
-                    <label for="weight">Weight (only for CodeFormer):</label>
-                    <input type="range" id="weight" name="weight" min="0" max="100" value="50">
-                    <span id="weightValue">50</span>
-                </div>
-                -->
-			<button type="submit">Process Image</button>
-		</form>
-		<div id="result">
-			<h3>Result:</h3>
-			<div id="outputContainer" style="display: none;">
-				<img id="preview" src="" alt="Processed Image">
-				<a id="downloadLink" href="#" download>Download Image</a>
-			</div>
-		</div>
-	</div>
-	<script>
-	document.getElementById('uploadForm').addEventListener('submit', function(e) {
-	                e.preventDefault();
-	                const formData = new FormData();
-	                formData.append('file', document.getElementById('file').files[0]);
-	                formData.append('version', document.getElementById('version').value);
-	                formData.append('scale', document.getElementById('scale').value);
-	                // formData.append('weight', document.getElementById('weight').value); // CodeFormer用
-	                fetch('/api/restore', {
-	                    method: 'POST',
-	                    body: formData
-	                })
-	                .then(response => {
-	                    if (!response.ok) {
-	                        return response.json().then(err => { throw new Error(err.error || 'Unknown error'); });
-	                    }
-	                    return response.blob();
-	                })
-	                .then(blob => {
-	                    const url = URL.createObjectURL(blob);
-	                    const preview = document.getElementById('preview');
-	                    const downloadLink = document.getElementById('downloadLink');
-	                    const outputContainer = document.getElementById('outputContainer');
-	                    preview.src = url;
-	                    downloadLink.href = url;
-	                    downloadLink.download = 'restored_' + document.getElementById('file').files[0].name;
-	                    outputContainer.style.display = 'block';
-	                })
-	                .catch(error => {
-	                    alert('Error: ' + error.message);
-	                });
-	            });
-	</script>
-<div id="apiUsage" style="margin-top: 40px;">
-    <h3>APIの使い方:</h3>
-    <pre style="background: #f9f9f9; padding: 15px; border: 1px solid #ccc; border-radius: 5px;">
-fetch(window.location.origin + "/api/restore", {
-    method: "POST",
-    body: {
-        file: "file-dataURL",
-        version: document.getElementById("version").value,
-        scale: document.getElementById("scale").value
-    }
-});
-    </pre>
-</div>
-<script>
-    document.getElementById('uploadForm').addEventListener('change', function () {
-        const fileInput = document.getElementById('file');
-        const version = document.getElementById('version').value;
-        const scale = document.getElementById('scale').value;
-        if (fileInput.files.length === 0) return;
-        const reader = new FileReader();
-        reader.onload = function (e) {
-            const dataUrl = e.target.result;
-            const shortenedDataUrl = dataUrl.substring(0, 20) + '...' + dataUrl.slice(-20);
-            const usageCode = `
-fetch(window.location.origin + "/api/restore", {
-    method: "POST",
-    body: {
-        file: "${shortenedDataUrl}",
-        version: "${version}",
-        scale: "${scale}"
     }
 });
-            `;
-            document.querySelector('#apiUsage pre').textContent = usageCode.trim();
-        };
-        reader.readAsDataURL(fileInput.files[0]);
-    });
-</script>
     """

     return """
 <!DOCTYPE html>
 <html>
 <head>
+    <title>Image Upscaling & Restoration API</title>
+    <style>
+        body { font-family: Arial, sans-serif; max-width: 800px; margin: 0 auto; padding: 20px; }
+        .container { border: 1px solid #ddd; padding: 20px; border-radius: 5px; }
+        .form-group { margin-bottom: 15px; }
+        label { display: block; margin-bottom: 5px; }
+        input, select { width: 100%; padding: 8px; box-sizing: border-box; }
+        button { background-color: #4CAF50; color: white; padding: 10px 15px; border: none; border-radius: 4px; cursor: pointer; }
+        button:hover { background-color: #45a049; }
+        #result { margin-top: 20px; }
+        #preview { max-width: 100%; margin-top: 10px; }
+        #apiUsage { background-color: #f5f5f5; padding: 15px; border-radius: 5px; margin-top: 20px; font-family: monospace; white-space: pre-wrap; }
+        #apiUsage h3 { margin-top: 0; }
+        #formDataPreview { max-height: 200px; overflow-y: auto; }
+    </style>
 </head>
 <body>
+    <h1>Image Upscaling & Restoration API</h1>
+    <div class="container">
+        <form id="uploadForm" enctype="multipart/form-data">
+            <div class="form-group">
+                <label for="file">Upload Image:</label>
+                <input type="file" id="file" name="file" required>
+            </div>
+            <div class="form-group">
+                <label for="version">Version:</label>
+                <select id="version" name="version">
+                    <option value="v1.2">v1.2</option>
+                    <option value="v1.3">v1.3</option>
+                    <option value="v1.4" selected>v1.4</option>
+                    <option value="RestoreFormer">RestoreFormer</option>
+                    <option value="CodeFormer">CodeFormer</option>
+                    <option value="RealESR-General-x4v3">RealESR-General-x4v3</option>
+                </select>
+            </div>
+            <div class="form-group">
+                <label for="scale">Rescaling factor:</label>
+                <input type="number" id="scale" name="scale" value="2" step="0.1" min="1" max="4" required>
+            </div>
+            <button type="submit">Process Image</button>
+        </form>
+        <div id="apiUsage">
+            <h3>API Usage:</h3>
+            <p>Here's how to call the API with the current form data:</p>
+            <div id="formDataPreview">Fill out the form to see the API call code...</div>
+            <div id="fetchCode"></div>
+        </div>
+        <div id="result">
+            <h3>Result:</h3>
+            <div id="outputContainer" style="display: none;">
+                <img id="preview" src="" alt="Processed Image">
+                <a id="downloadLink" href="#" download>Download Image</a>
+            </div>
+        </div>
+    </div>
+    <script>
+        // フォームの変更を監視してAPI使用例を更新
+        function updateApiUsage() {
+            const form = document.getElementById('uploadForm');
+            const fileInput = document.getElementById('file');
+            const version = document.getElementById('version').value;
+            const scale = document.getElementById('scale').value;
+            // フォームデータのプレビューを作成
+            const formData = {
+                version: version,
+                scale: scale
+            };
+            if (fileInput.files.length > 0) {
+                const file = fileInput.files[0];
+                const reader = new FileReader();
+                reader.onload = function(e) {
+                    const dataURL = e.target.result;
+                    // データURLを短縮表示
+                    const shortenedDataURL = dataURL.substring(0, 20) + '...' + dataURL.substring(dataURL.length - 20);
+                    formData.file = shortenedDataURL;
+                    formData.fileName = file.name;
+                    formData.fileType = file.type;
+                    formData.fileSize = file.size + ' bytes';
+                    updateFormDataPreview(formData);
+                    updateFetchCode();
+                };
+                reader.readAsDataURL(file);
+            } else {
+                formData.file = 'No file selected';
+                updateFormDataPreview(formData);
+                updateFetchCode();
+            }
+        }
+        function updateFormDataPreview(formData) {
+            const previewDiv = document.getElementById('formDataPreview');
+            previewDiv.innerHTML = '<strong>Form data to be sent:</strong><br>' +
+                JSON.stringify(formData, null, 2);
+        }
+        function updateFetchCode() {
+            const currentUrl = window.location.href;
+            const baseUrl = currentUrl.endsWith('/') ? currentUrl : currentUrl + '/';
+            const apiUrl = baseUrl + 'api/restore';
+            const fetchCodeDiv = document.getElementById('fetchCode');
+            fetchCodeDiv.innerHTML = `
+<strong>JavaScript fetch code:</strong>
+<pre>
+const formData = new FormData();
+formData.append('file', document.getElementById('file').files[0]);
+formData.append('version', '${document.getElementById('version').value}');
+formData.append('scale', ${document.getElementById('scale').value});
+fetch('${apiUrl}', {
+    method: 'POST',
+    body: formData
+})
+.then(response => {
+    if (!response.ok) {
+        return response.json().then(err => { throw new Error(err.error || 'Unknown error'); });
     }
+    return response.blob();
+})
+.then(blob => {
+    // Process the returned image blob
+    const url = URL.createObjectURL(blob);
+    console.log('Image processed successfully', url);
+})
+.catch(error => {
+    console.error('Error:', error.message);
 });
+</pre>`;
+        }
+        // フォーム要素の変更を監視
+        document.getElementById('file').addEventListener('change', updateApiUsage);
+        document.getElementById('version').addEventListener('change', updateApiUsage);
+        document.getElementById('scale').addEventListener('input', updateApiUsage);
+        // 初期表示
+        updateApiUsage();
+        document.getElementById('uploadForm').addEventListener('submit', function(e) {
+            e.preventDefault();
+            const formData = new FormData();
+            formData.append('file', document.getElementById('file').files[0]);
+            formData.append('version', document.getElementById('version').value);
+            formData.append('scale', document.getElementById('scale').value);
+            const currentUrl = window.location.href;
+            const baseUrl = currentUrl.endsWith('/') ? currentUrl : currentUrl + '/';
+            const apiUrl = baseUrl + 'api/restore';
+            fetch(apiUrl, {
+                method: 'POST',
+                body: formData
+            })
+            .then(response => {
+                if (!response.ok) {
+                    return response.json().then(err => { throw new Error(err.error || 'Unknown error'); });
+                }
+                return response.blob();
+            })
+            .then(blob => {
+                const url = URL.createObjectURL(blob);
+                const preview = document.getElementById('preview');
+                const downloadLink = document.getElementById('downloadLink');
+                const outputContainer = document.getElementById('outputContainer');
+                preview.src = url;
+                downloadLink.href = url;
+                downloadLink.download = 'restored_' + document.getElementById('file').files[0].name;
+                outputContainer.style.display = 'block';
+            })
+            .catch(error => {
+                alert('Error: ' + error.message);
+            });
+        });
+    </script>
+</body>
+</html>
     """