Image_Face_Upscale_Restoration-GFPGAN_API

Running

App Files Files Community

soiz1 commited on Apr 22

Commit

04fc3c7

verified ·

1 Parent(s): 5242696

Update app.py

Browse files

Files changed (1) hide show

app.py +135 -96

app.py CHANGED Viewed

@@ -113,108 +113,147 @@ def restore_image():
 @app.route('/')
 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>
-                <!-- CodeFormer用のweightパラメータが必要な場合 -->
-                <!--
                 <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);
-                });
-            });
-            // CodeFormer用のweightパラメータが必要な場合
-            // document.getElementById('weight').addEventListener('input', function() {
-            //     document.getElementById('weightValue').textContent = this.value;
-            // });
-        </script>
-    </body>
-    </html>
     """
 if __name__ == '__main__':

 @app.route('/')
 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: 30px;">
+		<h3>API:</h3> <pre><code id="apiCode" style="white-space: pre-wrap; background: #f8f8f8; padding: 10px; border-radius: 5px;"></code></pre>
+	</div>
+	<script>
+	function updateApiUsage() {
+	        const fileInput = document.getElementById('file');
+	        const version = document.getElementById('version').value;
+	        const scale = document.getElementById('scale').value;
+	        const baseURL = window.location.origin;
+	        let codeSnippet = `
+	const formData = new FormData();
+	formData.append('file', "file");
+	formData.append('version', '${version}');
+	formData.append('scale', '${scale}');
+	fetch('${baseURL}/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);
+	})
+	.catch(error => {
+	    console.error('Error:', error.message);
+	});`.trim();
+	        document.getElementById('apiCode').textContent = codeSnippet;
+	    }
+	    document.getElementById('uploadForm').addEventListener('change', updateApiUsage);
+	    document.getElementById('version').addEventListener('change', updateApiUsage);
+	    document.getElementById('scale').addEventListener('input', updateApiUsage);
+	    updateApiUsage();
+	</script>
+</body>
+</html>
     """
 if __name__ == '__main__':