Spaces:

jeongsoo
/

TestStaticHTML

Running

App Files Files Community

jeongsoo commited on Apr 30, 2025

Commit

f09b46a

1 Parent(s): 2ed13ec

init

Browse files

Files changed (1) hide show

index.html +508 -18

index.html CHANGED Viewed

@@ -1,19 +1,509 @@
-<!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
 </html>

+<!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;
+    // 로컬 스토리지에서 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';
+      }
+    }
+    // CORS 우회 fetch 래퍼 함수
+    async function fetchWithCors(url, options = {}) {
+      try {
+        // 직접 연결 시도
+        const response = await fetch(url, {
+          ...options,
+          mode: 'cors',
+          headers: {
+            ...options.headers,
+            'Accept': 'application/json'
+          }
+        });
+        if (response.ok) return response;
+      } catch (error) {
+        console.log('직접 연결 실패, 프록시 시도:', error);
+      }
+      // 프록시 사용 시도
+      try {
+        const proxyUrl = 'https://cors-anywhere.herokuapp.com/';
+        return fetch(proxyUrl + url, {
+          ...options,
+          headers: {
+            ...options.headers,
+            'X-Requested-With': 'XMLHttpRequest'
+          }
+        });
+      } catch (proxyError) {
+        addLog(`CORS 프록시 오류: ${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 {
+        const response = await fetchWithCors(`${serverUrl}/health`);
+        if (response.ok) {
+          updateConnectionStatus(true);
+          addLog('서버 연결 성공!', 'success');
+        } else {
+          updateConnectionStatus(false);
+          addLog(`서버 응답 오류: ${response.status}`, 'error');
+        }
+      } 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 {
+        const response = await fetchWithCors(`${serverUrl}/api/status`);
+        if (!response.ok) {
+          addLog(`상태 확인 실패! 상태 코드: ${response.status}`, 'error');
+          return;
+        }
+        const result = await response.json();
+        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 response = await fetchWithCors(`${serverUrl}/api/send`, {
+          method: 'POST',
+          headers: { 'Content-Type': 'application/json' },
+          body: JSON.stringify({
+            action: 'echo',
+            data: { message: message },
+            timestamp: Date.now()
+          })
+        });
+        if (!response.ok) {
+          addLog(`에코 테스트 실패! 상태 코드: ${response.status}`, 'error');
+          return;
+        }
+        const result = await response.json();
+        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 {
+        const response = await fetchWithCors(`${serverUrl}/api/devices`);
+        if (!response.ok) {
+          addLog(`장치 목록 조회 실패! 상태 코드: ${response.status}`, 'error');
+          return;
+        }
+        const result = await response.json();
+        document.getElementById('devicesResult').textContent = JSON.stringify(result, null, 2);
+        // 장치 선택 드롭다운 업데이트
+        const deviceSelect = document.getElementById('deviceSelect');
+        deviceSelect.innerHTML = '<option value="">-- 장치 선택 --</option>';
+        result.devices.forEach(device => {
+          const option = document.createElement('option');
+          option.value = device.id;
+          option.textContent = `${device.name} (${device.type})`;
+          deviceSelect.appendChild(option);
+        });
+        addLog(`장치 목록 조회 성공: ${result.devices.length}개 장치 발견`, 'success');
+      } catch (error) {
+        addLog(`장치 목록 조회 중 오류 발생: ${error.message}`, 'error');
+      }
+    }
+    // 장치 정보 조회
+    async function getDeviceInfo() {
+      if (!validateConnection()) return;
+      const deviceId = document.getElementById('deviceSelect').value;
+      if (!deviceId) {
+        addLog('장치를 먼저 선택해주세요!', 'error');
+        return;
+      }
+      addLog(`장치 ID "${deviceId}" 상세 정보 조회 중...`);
+      try {
+        const response = await fetchWithCors(`${serverUrl}/api/device/${deviceId}/info`);
+        if (!response.ok) {
+          addLog(`장치 정보 조회 실패! 상태 코드: ${response.status}`, 'error');
+          return;
+        }
+        const result = await response.json();
+        document.getElementById('deviceInfoResult').textContent = JSON.stringify(result, null, 2);
+        addLog('장치 정보 조회 성공', 'success');
+      } catch (error) {
+        addLog(`장치 정보 조회 중 오류 발생: ${error.message}`, 'error');
+      }
+    }
+    // 프로그램 목록 조회
+    async function getPrograms() {
+      if (!validateConnection()) return;
+      addLog('프로그램 목록 조회 중...');
+      try {
+        const response = await fetchWithCors(`${serverUrl}/api/programs`);
+        if (!response.ok) {
+          addLog(`프로그램 목록 조회 실패! 상태 코드: ${response.status}`, 'error');
+          return;
+        }
+        const result = await response.json();
+        document.getElementById('programsResult').textContent = JSON.stringify(result, null, 2);
+        // 프로그램 선택 드롭다운 업데이트
+        const programSelect = document.getElementById('programSelect');
+        programSelect.innerHTML = '<option value="">-- 프로그램 선택 --</option>';
+        result.programs.forEach(program => {
+          const option = document.createElement('option');
+          option.value = program.id;
+          option.textContent = `${program.name} - ${program.description || '설명 없음'}`;
+          programSelect.appendChild(option);
+        });
+        addLog(`프로그램 목록 조회 성공: ${result.programs.length}개 프로그램 발견`, 'success');
+      } catch (error) {
+        addLog(`프로그램 목록 조회 중 오류 발생: ${error.message}`, 'error');
+      }
+    }
+    // 프로그램 실행
+    async function executeProgram() {
+      if (!validateConnection()) return;
+      const programId = document.getElementById('programSelect').value;
+      if (!programId) {
+        addLog('프로그램을 먼저 선택해주세요!', 'error');
+        return;
+      }
+      addLog(`프로그램 ID "${programId}" 실행 중...`);
+      try {
+        const response = await fetchWithCors(`${serverUrl}/api/programs/${programId}/execute`, {
+          method: 'POST',
+          headers: { 'Content-Type': 'application/json' }
+        });
+        if (!response.ok) {
+          addLog(`프로그램 실행 실패! 상태 코드: ${response.status}`, 'error');
+          return;
+        }
+        const result = await response.json();
+        document.getElementById('executeProgramResult').textContent = JSON.stringify(result, null, 2);
+        addLog(`프로그램 실행 성공: ${result.message || ''}`, 'success');
+      } catch (error) {
+        addLog(`프로그램 실행 중 오류 발생: ${error.message}`, 'error');
+      }
+    }
+    // 로그 지우기
+    function clearLog() {
+      document.getElementById('logArea').innerHTML = '';
+      addLog('로그가 초기화되었습니다.');
+    }
+  </script>
+</body>
 </html>