Update app.py

app.py

@@ -159,14 +159,6 @@ def index():
             </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;">
@@ -174,58 +166,57 @@ def index():
                 <a id="downloadLink" href="#" download>Download Image</a>
             </div>
         </div>
+        <div id="apiUsage">
+            <h3>API Usage:</h3>
+            <div id="fetchCode" class="code-block">
+                // JavaScript fetch code will appear here
+            </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;
             
-            // フォームデータのJSONを作成
-            const formJson = {
-                version: version,
-                scale: parseFloat(scale)
-            };
+            // 現在のURLからベースURLを取得（パス、パラメータ、ハッシュを含めない）
+            const baseUrl = window.location.origin;
+            const apiUrl = baseUrl + '/api/restore';
             
+            // ファイルのプレビュー用文字列を準備
+            let filePreview = '"img-dataURL"';
             if (fileInput.files.length > 0) {
                 const file = fileInput.files[0];
-                formJson.file = {
-                    name: file.name,
-                    type: file.type,
-                    size: file.size + ' bytes'
+                const reader = new FileReader();
+                reader.onload = function(e) {
+                    const dataURL = e.target.result;
+                    if (dataURL.length > 20) {
+                        filePreview = `"${dataURL.substring(0, 10)}...${dataURL.substring(dataURL.length - 10)}"`;
+                    } else {
+                        filePreview = `"${dataURL}"`;
+                    }
+                    updateFetchCode(apiUrl, version, scale, filePreview);
                 };
+                reader.readAsDataURL(file);
             } else {
-                formJson.file = 'No file selected';
+                updateFetchCode(apiUrl, version, scale, filePreview);
             }
-            
-            updateFormDataPreview(formJson);
-            updateFetchCode();
-        }
-        
-        function updateFormDataPreview(formJson) {
-            const previewDiv = document.getElementById('formDataPreview');
-            previewDiv.innerHTML = '<strong>Form data (JSON):</strong><br>' + 
-                JSON.stringify(formJson, null, 2);
         }
         
-        function updateFetchCode() {
-            // 現在のURLからベースURLを取得（パス、パラメータ、ハッシュを含めない）
-            const baseUrl = window.location.origin;
-            const apiUrl = baseUrl + '/api/restore';
-            
+        function updateFetchCode(apiUrl, version, scale, filePreview) {
             const fetchCodeDiv = document.getElementById('fetchCode');
             fetchCodeDiv.innerHTML = `
-<div class="code-block">
-// JavaScript fetch code:
+// JavaScript fetch example:
+const formData = new FormData();
+formData.append('file', ${filePreview});
+formData.append('version', '${version}');
+formData.append('scale', ${scale});
+
 fetch('${apiUrl}', {
     method: 'POST',
-    headers: {
-        'Content-Type': 'multipart/form-data'
-    },
-    body: ${JSON.stringify(formJson, null, 2)}
+    body: formData
 })
 .then(response => {
     if (!response.ok) {
@@ -237,11 +228,11 @@ fetch('${apiUrl}', {
     // Process the returned image blob
     const url = URL.createObjectURL(blob);
     console.log('Image processed successfully', url);
+    // Example: document.getElementById('resultImage').src = url;
 })
 .catch(error => {
     console.error('Error:', error.message);
-});
-</div>`;
+});`;
         }
         
         // フォーム要素の変更を監視