Spaces:

ginipick
/

TESTAPIJS

Running

App Files Files Community

TESTAPIJS / index.html

ginipick

Update index.html

b35896d verified about 1 year ago

raw

history blame contribute delete

4 kB

	<!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>