Spaces:

ginipick
/

TESTAPIJS

Running

App Files Files Community

ginipick commited on Jan 6, 2025

Commit

976c341

verified ·

1 Parent(s): 4c1b37a

Update index.html

Browse files

Files changed (1) hide show

index.html +36 -15

index.html CHANGED Viewed

@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html lang="en">
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
@@ -8,28 +8,28 @@
 </head>
 <body class="bg-gray-100 p-8">
     <div class="max-w-2xl mx-auto bg-white rounded-lg shadow-lg p-6">
-        <h1 class="text-3xl font-bold mb-6">Test /add_points_and_refresh_fn API</h1>
         <div class="mb-4">
             <label class="block text-gray-700 text-sm font-bold mb-2" for="email">
-                Email
             </label>
             <input type="email"
                    id="email"
                    class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline"
-                   placeholder="Enter email">
         </div>
         <div class="mb-4">
             <button id="submit"
                     class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline">
-                Submit
             </button>
         </div>
         <div class="mb-4">
             <label class="block text-gray-700 text-sm font-bold mb-2">
-                Status
             </label>
             <div id="status"
                  class="border rounded w-full py-2 px-3 text-gray-700 bg-gray-100">
@@ -38,47 +38,68 @@
         <div class="mb-4">
             <label class="block text-gray-700 text-sm font-bold mb-2">
-                Value
             </label>
             <div id="value"
                  class="border rounded w-full py-2 px-3 text-gray-700 bg-gray-100">
             </div>
         </div>
     </div>
     <script>
         document.getElementById('submit').addEventListener('click', async () => {
             const email = document.getElementById('email').value;
             const statusElement = document.getElementById('status');
             const valueElement = document.getElementById('value');
-            // Reset output fields
-            statusElement.textContent = 'Processing...';
             valueElement.innerHTML = '';
             try {
-                const response = await fetch('https://ginipick-Dokdo-pay.hf.space/api/add_points_and_refresh_fn', {
                     method: 'POST',
                     headers: {
                         'Content-Type': 'application/json',
                     },
                     body: JSON.stringify({
                         email: email
                 });
                 if (!response.ok) {
                     throw new Error(`HTTP error! status: ${response.status}`);
                 }
                 const data = await response.json();
-                // Assuming the API returns an array with status and value
-                statusElement.textContent = data[0];
-                valueElement.innerHTML = data[1];
             } catch (error) {
-                statusElement.textContent = `Error: ${error.message}`;
-                valueElement.innerHTML = 'Error occurred';
                 console.error('Error:', error);
             }
         });

 <!DOCTYPE html>
+<html lang="ko">
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 </head>
 <body class="bg-gray-100 p-8">
     <div class="max-w-2xl mx-auto bg-white rounded-lg shadow-lg p-6">
+        <h1 class="text-3xl font-bold mb-6">API 테스트</h1>
         <div class="mb-4">
             <label class="block text-gray-700 text-sm font-bold mb-2" for="email">
+                이메일
             </label>
             <input type="email"
                    id="email"
                    class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline"
+                   placeholder="이메일을 입력하세요">
         </div>
         <div class="mb-4">
             <button id="submit"
                     class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline">
+                제출
             </button>
         </div>
         <div class="mb-4">
             <label class="block text-gray-700 text-sm font-bold mb-2">
+                상태
             </label>
             <div id="status"
                  class="border rounded w-full py-2 px-3 text-gray-700 bg-gray-100">
         <div class="mb-4">
             <label class="block text-gray-700 text-sm font-bold mb-2">
+                결과값
             </label>
             <div id="value"
                  class="border rounded w-full py-2 px-3 text-gray-700 bg-gray-100">
             </div>
         </div>
+        <div id="debug" class="mt-4 p-4 bg-gray-200 rounded">
+            <h2 class="font-bold mb-2">디버그 정보</h2>
+            <pre id="debug-info" class="whitespace-pre-wrap"></pre>
+        </div>
     </div>
     <script>
+        function log(message) {
+            const debugInfo = document.getElementById('debug-info');
+            debugInfo.textContent += message + '\n';
+            console.log(message);
+        }
         document.getElementById('submit').addEventListener('click', async () => {
             const email = document.getElementById('email').value;
             const statusElement = document.getElementById('status');
             const valueElement = document.getElementById('value');
+            document.getElementById('debug-info').textContent = ''; // 디버그 정보 초기화
+            // 상태 초기화
+            statusElement.textContent = '처리중...';
             valueElement.innerHTML = '';
+            log(`이메일 입력값: ${email}`);
             try {
+                const apiUrl = 'https://api-inference.huggingface.co/spaces/ginipick/Dokdo-pay/add_points_and_refresh_fn';
+                log(`API 호출 시작: ${apiUrl}`);
+                const response = await fetch(apiUrl, {
                     method: 'POST',
                     headers: {
                         'Content-Type': 'application/json',
                     },
                     body: JSON.stringify({
                         email: email
+                    })
                 });
+                log(`응답 상태: ${response.status}`);
                 if (!response.ok) {
                     throw new Error(`HTTP error! status: ${response.status}`);
                 }
                 const data = await response.json();
+                log(`응답 데이터: ${JSON.stringify(data, null, 2)}`);
+                statusElement.textContent = data[0] || '응답 없음';
+                valueElement.innerHTML = data[1] || '응답 없음';
             } catch (error) {
+                log(`에러 발생: ${error.message}`);
+                statusElement.textContent = `에러: ${error.message}`;
+                valueElement.innerHTML = '에러 발생';
                 console.error('Error:', error);
             }
         });