Spaces:

ginipick
/

TESTAPIJS

Running

App Files Files Community

TESTAPIJS / index.html

ginipick

Update index.html

562b2de verified over 1 year ago

raw

history blame

4.12 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>
	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://ginipick-dokdo-pay.hf.space/api/predict/';
	log(`API 호출 시작: ${apiUrl}`);

	const response = await fetch(apiUrl, {
	method: 'POST',
	headers: {
	'Content-Type': 'application/json',
	},
	body: JSON.stringify({
	data: [email],
	fn_index: 0
	})
	});

	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);
	}
	});
	</script>
	</body>
	</html>