release err fix

DESCRIPTION.md

@@ -0,0 +1,21 @@
+# LocalPCAgent 웹 인터페이스
+
+이 Space는 LocalPCAgent 서버와 통신하여 로컬 PC의 기능을 원격으로 제어하고 관리할 수 있는 웹 인터페이스를 제공합니다.
+
+## 사용 방법
+
+1. 로컬 PC에서 LocalPCAgent 서버와 ngrok을 실행합니다.
+2. ngrok에서 제공하는 URL을 이 웹앱에 입력합니다.
+3. '연결' 버튼을 클릭하여 서버와 통신을 시작합니다.
+4. 다양한 기능 탭을 사용하여 로컬 PC의 장치 및 프로그램을 관리합니다.
+
+## 주요 기능
+
+- 서버 상태 모니터링
+- 장치 목록 조회 및 관리
+- 프로그램 실행
+- 고급 API 요청 테스트
+
+## 주의사항
+
+이 웹앱은 개발 및 테스트 목적으로 제공됩니다. 인증 메커니즘 없이 ngrok URL만 알면 누구나 접속할 수 있으므로, 보안이 중요한 환경에서는 주의하여 사용하세요.

README.md

@@ -1,13 +1,90 @@
----
-title: TestWebApp
-emoji: 😻
-colorFrom: green
-colorTo: pink
-sdk: gradio
-sdk_version: 5.28.0
-app_file: app.py
-pinned: false
-license: mit
----
-
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
+# LocalPCAgent HuggingFace 웹 인터페이스
+
+이 웹앱은 [LocalPCAgent](https://github.com/yourusername/LocalPCAgent) 서버와 통신하여 로컬 PC의 기능을 원격으로 제어하고 테스트할 수 있는 인터페이스를 제공합니다.
+
+## 특징
+
+- 직관적인 웹 기반 인터페이스
+- ngrok URL을 통한 서버 연결
+- 서버 상태 모니터링
+- 장치 및 프로그램 관리
+- 에코 테스트 및 커스텀 요청 기능
+- 상세한 로그 기록
+
+## 사용 방법
+
+1. **서버 URL 설정**
+   - 로컬 PC에서 ngrok을 사용하여 LocalPCAgent 서버를 실행합니다.
+   - 생성된 ngrok URL을 웹앱의 입력 필드에 입력하고 '연결' 버튼을 클릭합니다.
+
+2. **기본 기능**
+   - '상태 확인' 버튼을 클릭하여 서버 상태를 확인합니다.
+   - 메시지 입력 후 '에코 테스트' 버튼을 클릭하여 UDP 통신을 테스트합니다.
+
+3. **장치 관리**
+   - '장치 목록 가져오기' 버튼을 클릭하여 연결된 장치를 조회합니다.
+   - 장치를 선택하고 '장치 정보 가져오기' 버튼을 클릭하여 상세 정보를 확인합니다.
+
+4. **프로그램 실행**
+   - '프로그램 목록 가져오기' 버튼을 클릭하여 실행 가능한 프로그램을 조회합니다.
+   - 프로그램을 선택하고 '프로그램 실행' 버튼을 클릭하여 로컬 PC에서 실행합니다.
+
+5. **고급 기능**
+   - 커스텀 API 요청을 작성하고 전송할 수 있습니다.
+   - 다양한 엔드포인트 및 HTTP 메소드 사용 가능
+
+## 로컬에서 실행하기
+
+1. 이 저장소를 클론합니다.
+2. 웹 서버(예: Python의 `http.server`)를 사용하여 로컬에서 실행합니다:
+   ```bash
+   python -m http.server 8080
+   ```
+3. 웹 브라우저에서 `http://localhost:8080`으로 접속합니다.
+
+## HuggingFace Spaces 배포
+
+이 웹앱은 [HuggingFace Spaces](https://huggingface.co/spaces)에 쉽게 배포할 수 있습니다:
+
+1. HuggingFace 계정으로 로그인합니다.
+2. 새 Space를 생성하고 "Static" 템플릿을 선택합니다.
+3. 이 저장소의 파일을 Space에 업로드합니다.
+
+## 보안 고려사항
+
+이 웹앱은 개발 및 테스트 목적으로 설계되었습니다. 프로덕션 환경에서 사용하기 전에 다음 사항을 고려하세요:
+
+1. ngrok은 임시 URL을 제공하므로 보안에 주의해야 합니다.
+2. 인증 메커니즘이 없으므로 누구나 URL만 알면 접근할 수 있습니다.
+3. 프로그램 실행 기능은 시스템에 영향을 줄 수 있으므로 신중하게 사용해야 합니다.
+4. 민감한 정보를 포함한 시스템에서는 추가 보안 조치가 필요합니다.
+
+## 기술 스택
+
+- HTML5
+- CSS3
+- JavaScript (ES6+)
+- LocalStorage API (URL 저장용)
+- Fetch API (HTTP 요청용)
+
+## API 참조
+
+웹앱에서 사용하는 주요 API 엔드포인트:
+
+| 엔드포인트 | 메소드 | 설명 |
+|------------|--------|------|
+| `/health` | GET | 서버 상태 확인 |
+| `/api/status` | GET | 상세 서버 정보 조회 |
+| `/api/send` | POST | UDP 메시지 전송 |
+| `/api/devices` | GET | 장치 목록 조회 |
+| `/api/device/{id}/info` | GET | 장치 상세 정보 조회 |
+| `/api/programs` | GET | 프로그램 목록 조회 |
+| `/api/programs/{id}/execute` | POST | 프로그램 실행 |
+
+## 라이선스
+
+MIT 라이선스
+
+## 기여하기
+
+이슈 및 풀 리퀘스트는 언제든지 환영합니다. 버그 리포트, 기능 요청, 또는 코드 기여를 통해 프로젝트를 개선하는 데 도움을 주세요.

app.py

@@ -1,36 +1,6 @@
 import gradio as gr
-import os
-
-# 웹앱 파일들 경로
-HTML_PATH = os.path.join(os.path.dirname(__file__), "index.html")
-CSS_PATH = os.path.join(os.path.dirname(__file__), "style.css")
-JS_PATH = os.path.join(os.path.dirname(__file__), "app.js")
-
-# HTML 파일 불러오기
-with open(HTML_PATH, "r", encoding="utf-8") as f:
-    html_content = f.read()
-    
-# CSS 파일 불러오기
-with open(CSS_PATH, "r", encoding="utf-8") as f:
-    css_content = f.read()
-
-# JS 파일 불러오기
-with open(JS_PATH, "r", encoding="utf-8") as f:
-    js_content = f.read()
-
-# HTML에 CSS와 JS 직접 삽입 (외부 참조 대신)
-html_with_inline_assets = html_content.replace(
-    '<link rel="stylesheet" href="style.css">',
-    f'<style>{css_content}</style>'
-).replace(
-    '<script src="app.js"></script>',
-    f'<script>{js_content}</script>'
-)
-
-# Gradio 인터페이스 생성
-def create_interface():
-    return gr.HTML(html_with_inline_assets)
+from gradio_interface import demo
 
 # Gradio 앱 시작
-iface = create_interface()
-iface.launch()
+if __name__ == "__main__":
+    demo.launch()

gradio_interface.py

@@ -0,0 +1,38 @@
+import gradio as gr
+import os
+
+def create_webapp():
+    # 웹앱 파일들 경로
+    HTML_PATH = os.path.join(os.path.dirname(__file__), "index.html")
+    CSS_PATH = os.path.join(os.path.dirname(__file__), "style.css")
+    JS_PATH = os.path.join(os.path.dirname(__file__), "app.js")
+
+    # HTML 파일 불러오기
+    with open(HTML_PATH, "r", encoding="utf-8") as f:
+        html_content = f.read()
+        
+    # CSS 파일 불러오기
+    with open(CSS_PATH, "r", encoding="utf-8") as f:
+        css_content = f.read()
+
+    # JS 파일 불러오기
+    with open(JS_PATH, "r", encoding="utf-8") as f:
+        js_content = f.read()
+
+    # HTML에 CSS와 JS 직접 삽입 (외부 참조 대신)
+    html_with_inline_assets = html_content.replace(
+        '<link rel="stylesheet" href="style.css">',
+        f'<style>{css_content}</style>'
+    ).replace(
+        '<script src="app.js"></script>',
+        f'<script>{js_content}</script>'
+    )
+
+    # Gradio 블록 생성
+    with gr.Blocks(css="footer {display:none}") as demo:
+        gr.HTML(html_with_inline_assets)
+        
+    return demo
+
+# 웹 앱 생성 및 반환
+demo = create_webapp()

title.md

@@ -0,0 +1 @@
+LocalPCAgent 제어 인터페이스