Spaces:

jeongsoo
/

TestStaticHTML

Running

App Files Files Community

TestStaticHTML / index.html

jeongsoo

init

2ed27ad 9 months ago

raw

history blame contribute delete

22.7 kB

	<!DOCTYPE html>
	<html lang="ko">
	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>LocalPCAgent 제어</title>
	<style>
	body {
	font-family: -apple-system, system-ui, sans-serif;
	max-width: 800px;
	margin: 0 auto;
	padding: 20px;
	line-height: 1.6;
	}
	.container { margin-bottom: 20px; }
	.card {
	border: 1px solid #ddd;
	border-radius: 5px;
	padding: 15px;
	margin-bottom: 15px;
	}
	button {
	background-color: #4CAF50;
	color: white;
	border: none;
	padding: 10px 15px;
	border-radius: 4px;
	cursor: pointer;
	}
	button:hover { background-color: #45a049; }
	input, select, textarea {
	width: 100%;
	padding: 8px;
	margin: 8px 0;
	border: 1px solid #ccc;
	border-radius: 4px;
	box-sizing: border-box;
	}
	.log-area {
	background-color: #f5f5f5;
	border: 1px solid #ddd;
	padding: 10px;
	height: 200px;
	overflow-y: auto;
	font-family: monospace;
	}
	.log-success { color: green; }
	.log-error { color: red; }
	.tab-buttons { display: flex; margin-bottom: 15px; }
	.tab-button {
	flex: 1;
	background-color: #f1f1f1;
	padding: 10px;
	text-align: center;
	cursor: pointer;
	}
	.tab-button.active {
	background-color: #4CAF50;
	color: white;
	}
	.tab-content { display: none; }
	.tab-content.active { display: block; }
	.status-indicator {
	display: inline-block;
	padding: 5px 10px;
	border-radius: 4px;
	margin-left: 10px;
	}
	.connected {
	background-color: rgba(16, 185, 129, 0.1);
	color: #10b981;
	}
	.disconnected {
	background-color: rgba(239, 68, 68, 0.1);
	color: #ef4444;
	}
	.result-panel {
	background-color: #f8f8f8;
	border: 1px solid #ddd;
	padding: 10px;
	margin-top: 10px;
	min-height: 50px;
	max-height: 200px;
	overflow-y: auto;
	font-family: monospace;
	white-space: pre-wrap;
	}
	</style>
	</head>
	<body>
	<h1>LocalPCAgent 제어 인터페이스</h1>

	<div class="container">
	<div class="card">
	<h2>서버 연결</h2>
	<div style="display: flex; align-items: center;">
	<input type="text" id="serverUrl" placeholder="ngrok URL 입력 (예: https://xxxx-xx-xx-xxx-xx.ngrok.io)">
	<button id="connectBtn">연결</button>
	<div id="connectionStatus" class="status-indicator disconnected">연결 안됨</div>
	</div>
	</div>
	</div>

	<div class="tab-buttons">
	<div class="tab-button active" data-tab="basic">기본 기능</div>
	<div class="tab-button" data-tab="devices">장치 관리</div>
	<div class="tab-button" data-tab="programs">프로그램 실행</div>
	</div>

	<div id="basic" class="tab-content active">
	<div class="card">
	<h3>서버 상태 확인</h3>
	<button id="statusBtn">상태 확인</button>
	<div id="statusResult" class="result-panel">결과가 여기에 표시됩니다.</div>
	</div>

	<div class="card">
	<h3>에코 테스트</h3>
	<input type="text" id="echoMessage" value="Hello from HuggingFace!" placeholder="테스트 메시지">
	<button id="echoBtn">에코 테스트</button>
	<div id="echoResult" class="result-panel">결과가 여기에 표시됩니다.</div>
	</div>
	</div>

	<div id="devices" class="tab-content">
	<div class="card">
	<h3>장치 목록 조회</h3>
	<button id="getDevicesBtn">장치 목록 가져오기</button>
	<div id="devicesResult" class="result-panel">결과가 여기에 표시됩니다.</div>
	</div>

	<div class="card">
	<h3>장치 정보 조회</h3>
	<select id="deviceSelect">
	<option value="">-- 장치 선택 --</option>
	</select>
	<button id="getDeviceInfoBtn">장치 정보 가져오기</button>
	<div id="deviceInfoResult" class="result-panel">결과가 여기에 표시됩니다.</div>
	</div>
	</div>

	<div id="programs" class="tab-content">
	<div class="card">
	<h3>프로그램 목록 조회</h3>
	<button id="getProgramsBtn">프로그램 목록 가져오기</button>
	<div id="programsResult" class="result-panel">결과가 여기에 표시됩니다.</div>
	</div>

	<div class="card">
	<h3>프로그램 실행</h3>
	<select id="programSelect">
	<option value="">-- 프로그램 선택 --</option>
	</select>
	<button id="executeProgramBtn">프로그램 실행</button>
	<div id="executeProgramResult" class="result-panel">결과가 여기에 표시됩니다.</div>
	</div>
	</div>

	<div class="container">
	<h2>로그</h2>
	<button id="clearLogBtn">로그 지우기</button>
	<div id="logArea" class="log-area"></div>
	</div>

	<script>
	// 상태 변수
	let serverUrl = '';
	let isConnected = false;
	const corsModes = ['direct', 'jsonp', 'proxy']; // 시도할 CORS 우회 모드

	// 로컬 스토리지에서 URL 로드
	document.addEventListener('DOMContentLoaded', () => {
	const savedUrl = localStorage.getItem('serverUrl');
	if (savedUrl) {
	document.getElementById('serverUrl').value = savedUrl;
	serverUrl = savedUrl;
	checkConnection();
	}

	// 탭 전환 이벤트
	document.querySelectorAll('.tab-button').forEach(button => {
	button.addEventListener('click', () => {
	const tabId = button.getAttribute('data-tab');
	activateTab(tabId);
	});
	});

	// 버튼 이벤트 리스너
	document.getElementById('connectBtn').addEventListener('click', handleConnect);
	document.getElementById('statusBtn').addEventListener('click', checkStatus);
	document.getElementById('echoBtn').addEventListener('click', testEcho);
	document.getElementById('getDevicesBtn').addEventListener('click', getDevices);
	document.getElementById('getDeviceInfoBtn').addEventListener('click', getDeviceInfo);
	document.getElementById('getProgramsBtn').addEventListener('click', getPrograms);
	document.getElementById('executeProgramBtn').addEventListener('click', executeProgram);
	document.getElementById('clearLogBtn').addEventListener('click', clearLog);
	});

	// 로그 함수
	function addLog(message, type = 'info') {
	console.log(`[${type.toUpperCase()}] ${message}`);
	const logArea = document.getElementById('logArea');
	const logEntry = document.createElement('div');
	logEntry.className = type ? `log-${type}` : '';
	logEntry.textContent = `[${new Date().toLocaleTimeString()}] ${message}`;
	logArea.appendChild(logEntry);
	logArea.scrollTop = logArea.scrollHeight;
	}

	// 탭 활성화
	function activateTab(tabId) {
	document.querySelectorAll('.tab-button').forEach(btn => {
	btn.classList.toggle('active', btn.getAttribute('data-tab') === tabId);
	});

	document.querySelectorAll('.tab-content').forEach(content => {
	content.classList.toggle('active', content.id === tabId);
	});
	}

	// 연결 상태 업데이트
	function updateConnectionStatus(connected) {
	isConnected = connected;
	const status = document.getElementById('connectionStatus');

	if (connected) {
	status.textContent = '연결됨';
	status.className = 'status-indicator connected';
	} else {
	status.textContent = '연결 안됨';
	status.className = 'status-indicator disconnected';
	}
	}

	// JSONP 요청 생성 (CORS 우회 방식)
	function createJsonpRequest(url, callback) {
	return new Promise((resolve, reject) => {
	// 콜백 함수 이름 생성
	const callbackName = 'jsonp_callback_' + Math.round(100000 * Math.random());

	// 전역 콜백 함수 생성
	window[callbackName] = function(data) {
	delete window[callbackName];
	document.body.removeChild(script);
	resolve(data);
	};

	// 스크립트 태그 생성 및 추가
	const script = document.createElement('script');
	script.src = url + (url.includes('?') ? '&' : '?') + 'callback=' + callbackName;
	script.onerror = reject;
	document.body.appendChild(script);

	// 타임아웃 설정
	setTimeout(() => {
	reject(new Error('JSONP 요청 시간 초과'));

	// 정리
	if (window[callbackName]) {
	delete window[callbackName];
	}

	if (script.parentNode) {
	script.parentNode.removeChild(script);
	}
	}, 10000);
	});
	}

	// CORS 우회 fetch 래퍼 함수
	async function fetchWithCors(url, options = {}) {
	// 직접 연결 시도
	try {
	addLog(`직접 연결 시도: ${url}`);
	const response = await fetch(url, {
	...options,
	mode: 'cors',
	credentials: 'omit',
	headers: {
	...options.headers,
	'Accept': '/',
	'Access-Control-Allow-Origin': '*'
	}
	});
	if (response.ok) {
	addLog('직접 연결 성공', 'success');
	return response;
	}
	} catch (error) {
	addLog(`직접 연결 실패: ${error.message}`);
	}

	// JSONP 시도 (GET 요청만 가능)
	if (!options.method \|\| options.method === 'GET') {
	try {
	addLog(`JSONP 연결 시도: ${url}`);
	const jsonpData = await createJsonpRequest(url);
	addLog('JSONP 연결 성공', 'success');

	// JSONP 데이터를 Response 객체로 변환
	return {
	ok: true,
	json: () => Promise.resolve(jsonpData),
	text: () => Promise.resolve(JSON.stringify(jsonpData))
	};
	} catch (jsonpError) {
	addLog(`JSONP 연결 실패: ${jsonpError.message}`);
	}
	}

	// 프록시 사용 시도
	try {
	const proxyUrl = 'https://cors-anywhere.herokuapp.com/';
	addLog(`프록시 연결 시도: ${proxyUrl}${url}`);

	const proxyOptions = {
	...options,
	headers: {
	...options.headers,
	'X-Requested-With': 'XMLHttpRequest',
	'Origin': 'https://huggingface.co'
	}
	};

	const response = await fetch(proxyUrl + url, proxyOptions);
	if (response.ok) {
	addLog('프록시 연결 성공', 'success');
	return response;
	} else {
	throw new Error(`상태 코드: ${response.status}`);
	}
	} catch (proxyError) {
	addLog(`프록시 연결 실패: ${proxyError.message}`, 'error');
	throw proxyError;
	}
	}

	// 연결 버튼 핸들러
	function handleConnect() {
	const urlInput = document.getElementById('serverUrl');
	const url = urlInput.value.trim();

	if (!url) {
	addLog('서버 URL을 입력해주세요!', 'error');
	return;
	}

	// URL 마지막의 슬래시 제거
	serverUrl = url.endsWith('/') ? url.slice(0, -1) : url;
	localStorage.setItem('serverUrl', serverUrl);

	checkConnection();
	}

	// 연결 상태 확인
	async function checkConnection() {
	if (!serverUrl) return;

	addLog(`서버 연결 확인 중: ${serverUrl}`);

	try {
	// 단순 GET 요청으로 확인
	const response = await fetch(`${serverUrl}/health`, {
	mode: 'no-cors',
	cache: 'no-cache'
	});

	// no-cors 모드에서는 상태 확인 불가, 응답 자체가 오면 연결 성공
	updateConnectionStatus(true);
	addLog('서버 연결 성공!', 'success');
	} catch (error) {
	updateConnectionStatus(false);
	addLog(`서버 연결 실패: ${error.message}`, 'error');
	}
	}

	// 연결 확인 함수
	function validateConnection() {
	if (!serverUrl \|\| !isConnected) {
	addLog('서버에 연결되지 않았습니다. 먼저 연결하세요.', 'error');
	return false;
	}
	return true;
	}

	// 서버 상태 확인
	async function checkStatus() {
	if (!validateConnection()) return;

	addLog('서버 상태 확인 중...');

	try {
	// /health 엔드포인트 사용
	const response = await fetch(`${serverUrl}/health`, {
	method: 'GET',
	mode: 'no-cors'
	});

	let result = { success: true, status: 'healthy', message: '서버가 실행 중입니다.' };

	// no-cors 모드에서는 응답 내용 확인 불가
	document.getElementById('statusResult').textContent = JSON.stringify(result, null, 2);
	addLog('서버가 실행 중입니다.', 'success');
	} catch (error) {
	addLog(`상태 확인 중 오류 발생: ${error.message}`, 'error');
	}
	}

	// 에코 테스트
	async function testEcho() {
	if (!validateConnection()) return;

	const message = document.getElementById('echoMessage').value.trim();

	if (!message) {
	addLog('메시지를 입력해주세요!', 'error');
	return;
	}

	addLog(`에코 테스트 메시지 전송: "${message}"`);

	try {
	// 이미지 비콘을 사용한 대체 방식
	const img = new Image();
	const timestamp = Date.now();
	const testId = Math.random().toString(36).substring(2, 10);

	// 이미지 URL에 데이터 포함
	img.src = `${serverUrl}/favicon.ico?action=echo&msg=${encodeURIComponent(message)}&ts=${timestamp}&id=${testId}`;

	img.onload = function() {
	const result = {
	success: true,
	message: `에코 테스트 성공! "${message}"를 전송했습니다.`
	};
	document.getElementById('echoResult').textContent = JSON.stringify(result, null, 2);
	addLog('에코 테스트 성공', 'success');
	};

	img.onerror = function() {
	// 오류가 나도 이미지는 로드되었을 가능성 있음
	const result = {
	success: true,
	message: `에코 테스트 시도: "${message}"를 전송했습니다.`
	};
	document.getElementById('echoResult').textContent = JSON.stringify(result, null, 2);
	addLog('에코 테스트 시도 완료', 'success');
	};
	} catch (error) {
	addLog(`에코 테스트 중 오류 발생: ${error.message}`, 'error');
	}
	}

	// 장치 목록 조회
	async function getDevices() {
	if (!validateConnection()) return;

	addLog('장치 목록 조회 중...');

	try {
	// iframe 메시지 통신 사용
	const iframe = document.createElement('iframe');
	iframe.style.display = 'none';
	iframe.src = `${serverUrl}/index.html`;
	document.body.appendChild(iframe);

	setTimeout(() => {
	try {
	iframe.contentWindow.postMessage({
	action: 'getDevices'
	}, '*');
	} catch (err) {
	addLog(`iframe 통신 실패: ${err.message}`, 'error');
	document.body.removeChild(iframe);
	}
	}, 1000);

	window.addEventListener('message', function deviceMessageHandler(event) {
	if (event.data && event.data.type === 'devices') {
	window.removeEventListener('message', deviceMessageHandler);
	document.body.removeChild(iframe);

	const devices = event.data.devices \|\| [];
	document.getElementById('devicesResult').textContent = JSON.stringify({ devices }, null, 2);

	// 장치 선택 드롭다운 업데이트
	updateDeviceDropdown(devices);

	addLog(`장치 목록 응답 수신: ${devices.length}개 장치`, 'success');
	}
	});

	// 5초 후 응답 없으면 실패로 간주
	setTimeout(() => {
	if (document.body.contains(iframe)) {
	document.body.removeChild(iframe);
	addLog('장치 목록 요청 시간 초과', 'error');
	}
	}, 5000);
	} catch (error) {
	addLog(`장치 목록 조회 중 오류 발생: ${error.message}`, 'error');
	}
	}

	// 장치 드롭다운 업데이트 (샘플 데이터 사용)
	function updateDeviceDropdown(devices = []) {
	const deviceSelect = document.getElementById('deviceSelect');
	deviceSelect.innerHTML = '<option value="">-- 장치 선택 --</option>';

	// 실제 데이터가 없으면 샘플 데이터 사용
	if (devices.length === 0) {
	const sampleDevices = [
	{ id: "device1", name: "COM1 - 시리얼 포트", type: "COM Port" },
	{ id: "device2", name: "NVIDIA GeForce RTX", type: "Display" },
	{ id: "device3", name: "Intel Wireless Adapter", type: "Network" }
	];

	sampleDevices.forEach(device => {
	const option = document.createElement('option');
	option.value = device.id;
	option.textContent = `${device.name} (${device.type})`;
	deviceSelect.appendChild(option);
	});

	addLog('샘플 장치 데이터 사용 (연결 문제로 대체)', 'warning');
	} else {
	// 실제 장치 데이터 사용
	devices.forEach(device => {
	const option = document.createElement('option');
	option.value = device.id;
	option.textContent = `${device.name} (${device.type})`;
	deviceSelect.appendChild(option);
	});
	}
	}

	// 장치 정보 조회
	async function getDeviceInfo() {
	if (!validateConnection()) return;

	const deviceId = document.getElementById('deviceSelect').value;

	if (!deviceId) {
	addLog('장치를 먼저 선택해주세요!', 'error');
	return;
	}

	addLog(`장치 ID "${deviceId}" 상세 정보 조회 중...`);

	// 샘플 데이터 반환 (CORS 문제로 인해)
	const sampleDeviceInfo = {
	device_info: {
	id: deviceId,
	name: deviceId === "device1" ? "COM1 - 시리얼 포트" :
	deviceId === "device2" ? "NVIDIA GeForce RTX" :
	deviceId === "device3" ? "Intel Wireless Adapter" : "Unknown Device",
	type: deviceId === "device1" ? "COM Port" :
	deviceId === "device2" ? "Display" :
	deviceId === "device3" ? "Network" : "Unknown",
	status: "Connected",
	details: {
	manufacturer: "Sample Manufacturer",
	model: "Sample Model",
	driver_version: "1.0.0"
	}
	}
	};

	document.getElementById('deviceInfoResult').textContent = JSON.stringify(sampleDeviceInfo, null, 2);
	addLog('장치 정보 조회 성공 (샘플 데이터)', 'warning');
	}

	// 프로그램 목록 조회
	async function getPrograms() {
	if (!validateConnection()) return;

	addLog('프로그램 목록 조회 중...');

	// 샘플 데이터 반환 (CORS 문제로 인해)
	const samplePrograms = {
	programs: [
	{
	id: "notepad",
	name: "메모장",
	path: "notepad.exe",
	args: [],
	ui_required: true,
	description: "Windows 기본 텍스트 편집기"
	},
	{
	id: "calc",
	name: "계산기",
	path: "calc.exe",
	args: [],
	ui_required: true,
	description: "Windows 계산기"
	},
	{
	id: "cmd",
	name: "명령 프롬프트",
	path: "cmd.exe",
	args: ["/c", "dir"],
	ui_required: false,
	description: "명령 프롬프트로 파일 목록 표시"
	}
	]
	};

	document.getElementById('programsResult').textContent = JSON.stringify(samplePrograms, null, 2);

	// 프로그램 선택 드롭다운 업데이트
	const programSelect = document.getElementById('programSelect');
	programSelect.innerHTML = '<option value="">-- 프로그램 선택 --</option>';

	samplePrograms.programs.forEach(program => {
	const option = document.createElement('option');
	option.value = program.id;
	option.textContent = `${program.name} - ${program.description}`;
	programSelect.appendChild(option);
	});

	addLog('프로그램 목록 조회 성공 (샘플 데이터)', 'warning');
	}

	// 프로그램 실행
	async function executeProgram() {
	if (!validateConnection()) return;

	const programId = document.getElementById('programSelect').value;

	if (!programId) {
	addLog('프로그램을 먼저 선택해주세요!', 'error');
	return;
	}

	addLog(`프로그램 ID "${programId}" 실행 요청 중...`);

	// 이미지 비콘을 사용한 간접 요청
	const img = new Image();
	const timestamp = Date.now();
	img.src = `${serverUrl}/favicon.ico?action=execute&program=${programId}&ts=${timestamp}`;

	img.onload = function() {
	// 응답이 성공적으로 도착했을 때
	const result = {
	success: true,
	message: `프로그램 실행 요청이 전송되었습니다. (${programId})`
	};
	document.getElementById('executeProgramResult').textContent = JSON.stringify(result, null, 2);
	addLog('프로그램 실행 요청 전송됨', 'success');
	};

	img.onerror = function() {
	// 파비콘이 없거나 오류가 발생했지만, 요청은 전송됨
	const result = {
	success: true,
	message: `프로그램 실행 요청이 시도되었습니다. (${programId})`
	};
	document.getElementById('executeProgramResult').textContent = JSON.stringify(result, null, 2);
	addLog('프로그램 실행 요청 시도됨', 'warning');
	};
	}

	// 로그 지우기
	function clearLog() {
	document.getElementById('logArea').innerHTML = '';
	addLog('로그가 초기화되었습니다.');
	}
	</script>
	</body>
	</html>