File size: 3,995 Bytes
8befdfa 976c341 8befdfa 976c341 8befdfa 976c341 8befdfa 976c341 8befdfa 976c341 8befdfa 976c341 8befdfa 976c341 8befdfa 976c341 8befdfa 9c92325 b35896d 976c341 b35896d 8befdfa b35896d 8befdfa 976c341 8befdfa 976c341 8befdfa 07b0e1a 9c92325 07b0e1a 976c341 07b0e1a b35896d 07b0e1a 8befdfa 07b0e1a 8befdfa 07b0e1a 8befdfa 976c341 8befdfa b35896d 8befdfa | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 | <!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Test /add_points_and_refresh_fn API</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/2.2.19/tailwind.min.js"></script>
</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>
</div>
<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 type="module">
import { client } from 'https://cdn.jsdelivr.net/npm/@gradio/client/+esm';
function log(message) {
const debugInfo = document.getElementById('debug-info');
debugInfo.textContent += message + '\n';
console.log(message);
}
async function handleSubmit() {
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 {
log('Gradio ํด๋ผ์ด์ธํธ ์ฐ๊ฒฐ ์๋...');
const gradioClient = await client("ginipick/Dokdo-pay");
log('ํด๋ผ์ด์ธํธ ์ฐ๊ฒฐ ์ฑ๊ณต');
log('API ํธ์ถ ์์...');
const result = await gradioClient.predict("/add_points_and_refresh_fn", {
email: email
});
log(`์๋ต ๋ฐ์ดํฐ: ${JSON.stringify(result.data, null, 2)}`);
statusElement.textContent = result.data[0] || '์๋ต ์์';
valueElement.innerHTML = result.data[1] || '์๋ต ์์';
} catch (error) {
log(`์๋ฌ ๋ฐ์: ${error.message}`);
statusElement.textContent = `์๋ฌ: ${error.message}`;
valueElement.innerHTML = '์๋ฌ ๋ฐ์';
console.error('Error:', error);
}
}
// DOM์ด ๋ก๋๋ ํ ์ด๋ฒคํธ ๋ฆฌ์ค๋ ์ค์
document.addEventListener('DOMContentLoaded', () => {
const submitButton = document.getElementById('submit');
submitButton.addEventListener('click', handleSubmit);
});
</script>
</body>
</html> |