jeongsoo commited on
Commit
fb40bd4
·
1 Parent(s): 75673f0
Files changed (1) hide show
  1. README.md +104 -0
README.md ADDED
@@ -0,0 +1,104 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ ---
2
+ title: LocalPCAgent 제어 인터페이스
3
+ emoji: 💻
4
+ colorFrom: indigo
5
+ colorTo: blue
6
+ sdk: gradio
7
+ sdk_version: 3.50.2
8
+ app_file: app.py
9
+ pinned: false
10
+ ---
11
+
12
+ Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
13
+
14
+ # LocalPCAgent HuggingFace 웹 인터페이스
15
+
16
+ 이 웹앱은 [LocalPCAgent](https://github.com/yourusername/LocalPCAgent) 서버와 통신하여 로컬 PC의 기능을 원격으로 제어하고 테스트할 수 있는 인터페이스를 제공합니다.
17
+
18
+ ## 특징
19
+
20
+ - 직관적인 웹 기반 인터페이스
21
+ - ngrok URL을 통한 서버 연결
22
+ - 서버 상태 모니터링
23
+ - 장치 및 프로그램 관리
24
+ - 에코 테스트 및 커스텀 요청 기능
25
+ - 상세한 로그 기록
26
+
27
+ ## 사용 방법
28
+
29
+ 1. **서버 URL 설정**
30
+ - 로컬 PC에서 ngrok을 사용하여 LocalPCAgent 서버를 실행합니다.
31
+ - 생성된 ngrok URL을 웹앱의 입력 필드에 입력하고 '연결' 버튼을 클릭합니다.
32
+
33
+ 2. **기본 기능**
34
+ - '상태 확인' 버튼을 클릭하여 서버 상태를 확인합니다.
35
+ - 메시지 입력 후 '에코 테스트' 버튼을 클릭하여 UDP 통신을 테스트합니다.
36
+
37
+ 3. **장치 관리**
38
+ - '장치 목록 가져오기' 버튼을 클릭하여 연결된 장치를 조회합니다.
39
+ - 장치를 선택하고 '장치 정보 가져오기' 버튼을 클릭하여 상세 정보를 확인합니다.
40
+
41
+ 4. **프로그램 실행**
42
+ - '프로그램 목록 가져오기' 버튼을 클릭하여 실행 가능한 프로그램을 조회합니다.
43
+ - 프로그램을 선택하고 '프로그램 실행' 버튼을 클릭하여 로컬 PC에서 실행합니다.
44
+
45
+ 5. **고급 기능**
46
+ - 커스텀 API 요청을 작성하고 전송할 수 있습니다.
47
+ - 다양한 엔드포인트 및 HTTP 메소드 사용 가능
48
+
49
+ ## 로컬에서 실행하기
50
+
51
+ 1. 이 저장소를 클론합니다.
52
+ 2. 웹 서버(예: Python의 `http.server`)를 사용하여 로컬에서 실행합니다:
53
+ ```bash
54
+ python -m http.server 8080
55
+ ```
56
+ 3. 웹 브라우저에서 `http://localhost:8080`으로 접속합니다.
57
+
58
+ ## HuggingFace Spaces 배포
59
+
60
+ 이 웹앱은 [HuggingFace Spaces](https://huggingface.co/spaces)에 쉽게 배포할 수 있습니다:
61
+
62
+ 1. HuggingFace 계정으로 로그인합니다.
63
+ 2. 새 Space를 생성하고 "Gradio" 템플릿을 선택합니다.
64
+ 3. 이 저장소의 파일을 Space에 업로드합니다.
65
+
66
+ ## 보안 고려사항
67
+
68
+ 이 웹앱은 개발 및 테스트 목적으로 설계되었습니다. 프로덕션 환경에서 사용하기 전에 다음 사항을 고려하세요:
69
+
70
+ 1. ngrok은 임시 URL을 제공하므로 보안에 주의해야 합니다.
71
+ 2. 인증 메커니즘이 없으므로 누구나 URL만 알면 접근할 수 있습니다.
72
+ 3. 프로그램 실행 기능은 시스템에 영향을 줄 수 있으므로 신중하게 사용해야 합니다.
73
+ 4. 민감한 정보를 포함한 시스템에서는 추가 보안 조치가 필요합니다.
74
+
75
+ ## 기술 스택
76
+
77
+ - HTML5
78
+ - CSS3
79
+ - JavaScript (ES6+)
80
+ - LocalStorage API (URL 저장용)
81
+ - Fetch API (HTTP 요청용)
82
+ - Gradio (HuggingFace Spaces 배포용)
83
+
84
+ ## API 참조
85
+
86
+ 웹앱에서 사용하는 주요 API 엔드포인트:
87
+
88
+ | 엔드포인트 | 메소드 | 설명 |
89
+ |------------|--------|------|
90
+ | `/health` | GET | 서버 상태 확인 |
91
+ | `/api/status` | GET | 상세 서버 정보 조회 |
92
+ | `/api/send` | POST | UDP 메시지 전송 |
93
+ | `/api/devices` | GET | 장치 목록 조회 |
94
+ | `/api/device/{id}/info` | GET | 장치 상세 정보 조회 |
95
+ | `/api/programs` | GET | 프로그램 목록 조회 |
96
+ | `/api/programs/{id}/execute` | POST | 프로그램 실행 |
97
+
98
+ ## 라이선스
99
+
100
+ MIT 라이선스
101
+
102
+ ## 기여하기
103
+
104
+ 이슈 및 풀 리퀘스트는 언제든지 환영합니다. 버그 리포트, 기능 요청, 또는 코드 기여를 통해 프로젝트를 개선하는 데 도움을 주세요.