Update app.py

app.py

@@ -208,52 +208,50 @@ def index():
 	            });
 	            
 	</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);
+<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;
 
-	})
-	.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);
+        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>
 
-	    updateApiUsage();
-	</script>
-</body>
 
-</html>
     """
 
 if __name__ == '__main__':