| <!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); |
| } |
| } |
| |
| |
| document.addEventListener('DOMContentLoaded', () => { |
| const submitButton = document.getElementById('submit'); |
| submitButton.addEventListener('click', handleSubmit); |
| }); |
| </script> |
| </body> |
| </html> |
