Hugging Face's logo

Spaces:
jamesLeeeeeee
/
ocr
Running

App Files Community
jamesLeeeeeee commited on
Commit
6cd201c
·
verified ·
1 Parent(s): 4446ad7

아니 ocr 수정 플랫폼 만든다니까?

Browse files

뭘만들고 있는거야.
ocr 수정하고 그 ocr을 공정/공정 라벨링하는 툴이야.
관리자는 ocr등록 / 작업 배포/ 모니터링/ 반려/통과
작업자는 ocr 수정/ 공정/공종 기입 / 자기 작업 모니터링
ok?

Files changed (8) hide show
  1. README.md +8 -5
  2. admin.html +179 -0
  3. components/footer.js +21 -0
  4. components/header.js +65 -0
  5. index.html +98 -19
  6. script.js +35 -0
  7. style.css +73 -18
  8. worker.html +161 -0
README.md CHANGED
@@ -1,10 +1,13 @@
1
  ---
2
- title: Ocr
3
- emoji: 📈
4
- colorFrom: gray
5
- colorTo: indigo
6
  sdk: static
7
  pinned: false
 
 
8
  ---
9
 
10
- Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
 
 
1
  ---
2
+ title: OCR 정밀 교정 공방 🔧
3
+ colorFrom: purple
4
+ colorTo: blue
5
+ emoji: 🐳
6
  sdk: static
7
  pinned: false
8
+ tags:
9
+ - deepsite-v3
10
  ---
11
 
12
+ # Welcome to your new DeepSite project!
13
+ This project was created with [DeepSite](https://huggingface.co/deepsite).
admin.html ADDED
@@ -0,0 +1,179 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="ko">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>OCR 관리자 대시보드 - OCR 정밀 교정 공방</title>
7
+ <link rel="icon" type="image/x-icon" href="/static/favicon.ico">
8
+ <link rel="stylesheet" href="style.css">
9
+ <script src="https://cdn.tailwindcss.com"></script>
10
+ <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
11
+ <script>
12
+ tailwind.config = {
13
+ theme: {
14
+ extend: {
15
+ colors: {
16
+ 'primary': {
17
+ 50: '#f0f9ff',
18
+ 100: '#e0f2fe',
19
+ 200: '#bae6fd',
20
+ 300: '#7dd3fc',
21
+ 400: '#38bdf8',
22
+ 500: '#0ea5e9',
23
+ 600: '#0284c7',
24
+ 700: '#0369a1',
25
+ 800: '#075985',
26
+ 900: '#0c4a6e',
27
+ }
28
+ }
29
+ }
30
+ }
31
+ }
32
+ </script>
33
+ </head>
34
+ <body class="bg-gradient-to-br from-primary-50 to-primary-100 min-h-screen">
35
+ <custom-header></custom-header>
36
+
37
+ <main class="container mx-auto px-4 py-8">
38
+ <div class="text-center mb-12">
39
+ <h1 class="text-4xl font-bold text-primary-900 mb-4">OCR 관리자 대시보드 🔧</h1>
40
+ <p class="text-lg text-primary-700 max-w-2xl mx-auto">
41
+ OCR 문서 등록, 작업 배포, 진행 상황 모니터링, 검수 및 승인을 관리하는 관리자 전용 페이지입니다.
42
+ </p>
43
+ </div>
44
+
45
+ <!-- 통계 카드 -->
46
+ <div class="grid grid-cols-1 md:grid-cols-4 gap-6 mb-8">
47
+ <div class="bg-white rounded-xl p-6 shadow-lg border border-primary-200">
48
+ <div class="flex items-center">
49
+ <div class="w-12 h-12 bg-primary-500 rounded-full flex items-center justify-center mr-4">
50
+ <i data-feather="file-text" class="text-white"></i>
51
+ </div>
52
+ <div>
53
+ <h3 class="text-2xl font-bold text-primary-900">1,247</h3>
54
+ <p class="text-primary-600 text-sm">총 OCR 문서</p>
55
+ </div>
56
+ </div>
57
+ </div>
58
+
59
+ <div class="bg-white rounded-xl p-6 shadow-lg border border-primary-200">
60
+ <div class="flex items-center">
61
+ <div class="w-12 h-12 bg-yellow-500 rounded-full flex items-center justify-center mr-4">
62
+ <i data-feather="clock" class="text-white"></i>
63
+ </div>
64
+ <div>
65
+ <h3 class="text-2xl font-bold text-primary-900">342</h3>
66
+ <p class="text-primary-600 text-sm">진행 중 작업</p>
67
+ </div>
68
+ </div>
69
+ </div>
70
+
71
+ <div class="bg-white rounded-xl p-6 shadow-lg border border-primary-200">
72
+ <div class="flex items-center">
73
+ <div class="w-12 h-12 bg-green-500 rounded-full flex items-center justify-center mr-4">
74
+ <i data-feather="check-circle" class="text-white"></i>
75
+ </div>
76
+ <div>
77
+ <h3 class="text-2xl font-bold text-primary-900">785</h3>
78
+ <p class="text-primary-600 text-sm">완료된 작업</p>
79
+ </div>
80
+ </div>
81
+ </div>
82
+
83
+ <div class="bg-white rounded-xl p-6 shadow-lg border border-primary-200">
84
+ <div class="flex items-center">
85
+ <div class="w-12 h-12 bg-red-500 rounded-full flex items-center justify-center mr-4">
86
+ <i data-feather="x-circle" class="text-white"></i>
87
+ </div>
88
+ <div>
89
+ <h3 class="text-2xl font-bold text-primary-900">120</h3>
90
+ <p class="text-primary-600 text-sm">반려된 작업</p>
91
+ </div>
92
+ </div>
93
+ </div>
94
+ </div>
95
+
96
+ <!-- 주요 기능 섹션 -->
97
+ <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8 mb-12">
98
+ <!-- OCR 등록 -->
99
+ <div class="bg-white/80 backdrop-blur-sm rounded-2xl p-6 shadow-lg border border-primary-200 hover:shadow-xl transition-all duration-300">
100
+ <div class="w-12 h-12 bg-primary-500 rounded-full flex items-center justify-center mb-4">
101
+ <i data-feather="upload" class="text-white"></i>
102
+ </div>
103
+ <h3 class="text-xl font-semibold text-primary-900 mb-2">OCR 문서 등록</h3>
104
+ <p class="text-primary-700 mb-4">새로운 OCR 문서를 업로드하고 작업을 등록합니다.</p>
105
+ <button class="w-full bg-primary-500 hover:bg-primary-600 text-white px-4 py-2 rounded-lg font-medium transition-all duration-300">
106
+ 문서 등록하기
107
+ </button>
108
+ </div>
109
+
110
+ <!-- 작업 배포 -->
111
+ <div class="bg-white/80 backdrop-blur-sm rounded-2xl p-6 shadow-lg border border-primary-200 hover:shadow-xl transition-all duration-300">
112
+ <div class="w-12 h-12 bg-primary-600 rounded-full flex items-center justify-center mb-4">
113
+ <i data-feather="send" class="text-white"></i>
114
+ </div>
115
+ <h3 class="text-xl font-semibold text-primary-900 mb-2">작업 배포 관리</h3>
116
+ <p class="text-primary-700 mb-4">등록된 OCR 문서를 작업자에게 배포하고 우선순위를 설정합니다.</p>
117
+ <button class="w-full bg-primary-500 hover:bg-primary-600 text-white px-4 py-2 rounded-lg font-medium transition-all duration-300">
118
+ 작업 배포하기
119
+ </button>
120
+ </div>
121
+
122
+ <!-- 모니터링 -->
123
+ <div class="bg-white/80 backdrop-blur-sm rounded-2xl p-6 shadow-lg border border-primary-200 hover:shadow-xl transition-all duration-300">
124
+ <div class="w-12 h-12 bg-primary-700 rounded-full flex items-center justify-center mb-4">
125
+ <i data-feather="monitor" class="text-white"></i>
126
+ </div>
127
+ <h3 class="text-xl font-semibold text-primary-900 mb-2">작업 모니터링</h3>
128
+ <p class="text-primary-700 mb-4">전체 작업 진행 상황과 개별 작업자 성과를 실시간으로 확인합니다.</p>
129
+ <button class="w-full bg-primary-500 hover:bg-primary-600 text-white px-4 py-2 rounded-lg font-medium transition-all duration-300">
130
+ 모니터링 보기
131
+ </button>
132
+ </div>
133
+
134
+ <!-- 검수 및 승인 -->
135
+ <div class="bg-white/80 backdrop-blur-sm rounded-2xl p-6 shadow-lg border border-primary-200 hover:shadow-xl transition-all duration-300">
136
+ <div class="w-12 h-12 bg-green-500 rounded-full flex items-center justify-center mb-4">
137
+ <i data-feather="check-square" class="text-white"></i>
138
+ </div>
139
+ <h3 class="text-xl font-semibold text-primary-900 mb-2">검수 및 승인</h3>
140
+ <p class="text-primary-700 mb-4">완료된 OCR 작업을 검수하고 승인하거나 반려합니다.</p>
141
+ <button class="w-full bg-green-500 hover:bg-green-600 text-white px-4 py-2 rounded-lg font-medium transition-all duration-300">
142
+ 검수 진행하기
143
+ </button>
144
+ </div>
145
+
146
+ <!-- 반려 관리 -->
147
+ <div class="bg-white/80 backdrop-blur-sm rounded-2xl p-6 shadow-lg border border-primary-200 hover:shadow-xl transition-all duration-300">
148
+ <div class="w-12 h-12 bg-red-500 rounded-full flex items-center justify-center mb-4">
149
+ <i data-feather="alert-circle" class="text-white"></i>
150
+ </div>
151
+ <h3 class="text-xl font-semibold text-primary-900 mb-2">반려 관리</h3>
152
+ <p class="text-primary-700 mb-4">반려된 작업의 사유를 관리하고 재작업을 지시합니다.</p>
153
+ <button class="w-full bg-red-500 hover:bg-red-600 text-white px-4 py-2 rounded-lg font-medium transition-all duration-300">
154
+ 반려 관리하기
155
+ </button>
156
+ </div>
157
+
158
+ <!-- 통계 리포트 -->
159
+ <div class="bg-white/80 backdrop-blur-sm rounded-2xl p-6 shadow-lg border border-primary-200 hover:shadow-xl transition-all duration-300">
160
+ <div class="w-12 h-12 bg-purple-500 rounded-full flex items-center justify-center mb-4">
161
+ <i data-feather="bar-chart" class="text-white"></i>
162
+ </div>
163
+ <h3 class="text-xl font-semibold text-primary-900 mb-2">통계 리포트</h3>
164
+ <p class="text-primary-700 mb-4">작업 효율, 정확도, 작업자 성과 등 다양한 통계 리포트를 생성합니다.</p>
165
+ <button class="w-full bg-purple-500 hover:bg-purple-600 text-white px-4 py-2 rounded-lg font-medium transition-all duration-300">
166
+ 리포트 보기
167
+ </button>
168
+ </div>
169
+ </div>
170
+ </main>
171
+
172
+ <custom-footer></custom-footer>
173
+
174
+ <script src="components/header.js"></script>
175
+ <script src="components/footer.js"></script>
176
+ <script src="script.js"></script>
177
+ <script>feather.replace();</script>
178
+ </body>
179
+ </html>
components/footer.js ADDED
@@ -0,0 +1,21 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ class CustomFooter extends HTMLElement {
2
+ connectedCallback() {
3
+ this.attachShadow({ mode: 'open' });
4
+ this.shadowRoot.innerHTML = `
5
+ <style>
6
+ footer {
7
+ background: rgba(12, 74, 110, 0.9);
8
+ color: white;
9
+ margin-top: auto;
10
+ }
11
+ .footer-link {
12
+ color: #bae6fd;
13
+ transition: color 0.3s ease;
14
+ }
15
+ .footer-link:hover {
16
+ color: #ffffff;
17
+ }
18
+ </style>
19
+ <footer class="mt-16">
20
+ <div class="container mx-auto px-4 py-8">
21
+ <div class="grid grid-cols-1 md:grid-cols-4 gap-8">
components/header.js ADDED
@@ -0,0 +1,65 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ class CustomHeader extends HTMLElement {
2
+ connectedCallback() {
3
+ this.attachShadow({ mode: 'open' });
4
+ this.shadowRoot.innerHTML = `
5
+ <style>
6
+ nav {
7
+ background: rgba(255, 255, 255, 0.8);
8
+ backdrop-filter: blur(10px);
9
+ border-bottom: 1px solid rgba(14, 165, 233, 0.2);
10
+ }
11
+ .nav-link {
12
+ color: #0c4a6e;
13
+ transition: all 0.3s ease;
14
+ position: relative;
15
+ }
16
+ .nav-link:hover {
17
+ color: #0ea5e9;
18
+ transform: translateY(-2px);
19
+ }
20
+ .nav-link::after {
21
+ content: '';
22
+ position: absolute;
23
+ width: 0;
24
+ height: 2px;
25
+ bottom: -4px;
26
+ left: 50%;
27
+ background: #0ea5e9;
28
+ transition: all 0.3s ease;
29
+ transform: translateX(-50%);
30
+ }
31
+ .nav-link:hover::after {
32
+ width: 100%;
33
+ }
34
+ .logo {
35
+ background: linear-gradient(135deg, #0ea5e9 0%, #0369a1 100%);
36
+ -webkit-background-clip: text;
37
+ -webkit-text-fill-color: transparent;
38
+ background-clip: text;
39
+ }
40
+ </style>
41
+ <nav class="sticky top-0 z-50">
42
+ <div class="container mx-auto px-4 py-4">
43
+ <div class="flex items-center justify-between">
44
+ <a href="/" class="text-2xl font-bold logo undefined-pulse">Undefined🌀</a>
45
+ <div class="hidden md:flex space-x-8">
46
+ <a href="/" class="nav-link font-medium">홈</a>
47
+ <a href="/admin.html" class="nav-link font-medium">관리자</a>
48
+ <a href="/worker.html" class="nav-link font-medium">작업자</a>
49
+ </div>
50
+ <div class="flex items-center space-x-4">
51
+ <button class="bg-undefined-500 hover:bg-undefined-600 text-white px-4 py-2 rounded-full text-sm font-medium transition-all duration-300">
52
+ Get Started
53
+ </button>
54
+ <button class="md:hidden">
55
+ <i data-feather="menu" class="text-undefined-700"></i>
56
+ </button>
57
+ </div>
58
+ </div>
59
+ </div>
60
+ </nav>
61
+ `;
62
+ }
63
+ }
64
+
65
+ customElements.define('custom-header', CustomHeader);
index.html CHANGED
@@ -1,19 +1,98 @@
1
- <!doctype html>
2
- <html>
3
- <head>
4
- <meta charset="utf-8" />
5
- <meta name="viewport" content="width=device-width" />
6
- <title>My static Space</title>
7
- <link rel="stylesheet" href="style.css" />
8
- </head>
9
- <body>
10
- <div class="card">
11
- <h1>Welcome to your static Space!</h1>
12
- <p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
13
- <p>
14
- Also don't forget to check the
15
- <a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
16
- </p>
17
- </div>
18
- </body>
19
- </html>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>OCR 정밀 교정 공방 🔧</title>
7
+ <link rel="icon" type="image/x-icon" href="/static/favicon.ico">
8
+ <link rel="stylesheet" href="style.css">
9
+ <script src="https://cdn.tailwindcss.com"></script>
10
+ <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
11
+ <script src="https://unpkg.com/feather-icons"></script>
12
+ <script>
13
+ tailwind.config = {
14
+ theme: {
15
+ extend: {
16
+ colors: {
17
+ 'undefined': {
18
+ 50: '#f0f9ff',
19
+ 100: '#e0f2fe',
20
+ 200: '#bae6fd',
21
+ 300: '#7dd3fc',
22
+ 400: '#38bdf8',
23
+ 500: '#0ea5e9',
24
+ 600: '#0284c7',
25
+ 700: '#0369a1',
26
+ 800: '#075985',
27
+ 900: '#0c4a6e',
28
+ }
29
+ }
30
+ }
31
+ }
32
+ }
33
+ </script>
34
+ </head>
35
+ <body class="bg-gradient-to-br from-undefined-50 to-undefined-100 min-h-screen">
36
+ <custom-header></custom-header>
37
+
38
+ <main class="container mx-auto px-4 py-8">
39
+ <div class="text-center mb-12">
40
+ <h1 class="text-6xl font-bold text-undefined-900 mb-4">OCR 정밀 교정 공방 🔧</h1>
41
+ <p class="text-xl text-undefined-700 max-w-2xl mx-auto">
42
+ OCR 텍스트 정밀 수정 및 공정/공종 라벨링을 위한 전문 플랫폼입니다.
43
+ 관리자와 작업자가 협력하여 정확한 문서 데이터를 생성합니다.
44
+ </p>
45
+ </div>
46
+
47
+ <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8 mb-12">
48
+ <div class="bg-white/80 backdrop-blur-sm rounded-2xl p-6 shadow-lg border border-undefined-200">
49
+ <div class="w-12 h-12 bg-undefined-500 rounded-full flex items-center justify-center mb-4">
50
+ <i data-feather="help-circle" class="text-white"></i>
51
+ </div>
52
+ <h3 class="text-xl font-semibold text-undefined-900 mb-2">OCR 텍스트 수정</h3>
53
+ <p class="text-undefined-700">OCR로 추출된 텍스트의 오류를 정밀하게 수정합니다.</p>
54
+ </div>
55
+
56
+ <div class="bg-white/80 backdrop-blur-sm rounded-2xl p-6 shadow-lg border border-undefined-200">
57
+ <div class="w-12 h-12 bg-undefined-600 rounded-full flex items-center justify-center mb-4">
58
+ <i data-feather="circle" class="text-white"></i>
59
+ </div>
60
+ <h3 class="text-xl font-semibold text-undefined-900 mb-2">공정/공종 라벨링</h3>
61
+ <p class="text-undefined-700">문서 내용에 맞는 공정과 공종을 선택하여 정확한 라벨을 추가합니다.</p>
62
+ </div>
63
+
64
+ <div class="bg-white/80 backdrop-blur-sm rounded-2xl p-6 shadow-lg border border-undefined-200">
65
+ <div class="w-12 h-12 bg-undefined-700 rounded-full flex items-center justify-center mb-4">
66
+ <i data-feather="moon" class="text-white"></i>
67
+ </div>
68
+ <h3 class="text-xl font-semibold text-undefined-900 mb-2">작업 모니터링</h3>
69
+ <p class="text-undefined-700">개인 작업 진행률과 전체 성과를 실시간으로 확인합니다.</p>
70
+ </div>
71
+ </div>
72
+
73
+ <div class="bg-undefined-900 text-white rounded-2xl p-8 text-center">
74
+ <h2 class="text-3xl font-bold mb-4">OCR 정밀 교정 플랫폼</h2>
75
+ <p class="text-undefined-100 mb-6 max-w-2xl mx-auto">
76
+ 건설, 제조, 엔지니어링 분야의 OCR 문서를 전문적으로 수정하고 라벨링합니다.
77
+ 정확한 데이터로 비즈니스 효율성을 높이세요.
78
+ </p>
79
+ <div class="flex justify-center space-x-4">
80
+ <a href="/admin.html" class="bg-undefined-500 hover:bg-undefined-600 text-white px-8 py-3 rounded-full font-semibold transition-all duration-300 transform hover:scale-105">
81
+ 관리자 로그인
82
+ </a>
83
+ <a href="/worker.html" class="bg-green-500 hover:bg-green-600 text-white px-8 py-3 rounded-full font-semibold transition-all duration-300 transform hover:scale-105">
84
+ 작업자 로그인
85
+ </a>
86
+ </div>
87
+ </div>
88
+ </main>
89
+
90
+ <custom-footer></custom-footer>
91
+
92
+ <script src="components/header.js"></script>
93
+ <script src="components/footer.js"></script>
94
+ <script src="script.js"></script>
95
+ <script>feather.replace();</script>
96
+ <script src="https://huggingface.co/deepsite/deepsite-badge.js"></script>
97
+ </body>
98
+ </html>
script.js ADDED
@@ -0,0 +1,35 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ // Main script for undefined universe
2
+ document.addEventListener('DOMContentLoaded', function() {
3
+ console.log('Welcome to the Undefined Universe! 🌀');
4
+
5
+ // Add some undefined magic to the page
6
+ const elements = document.querySelectorAll('.bg-undefined-500, .bg-undefined-600, .bg-undefined-700');
7
+
8
+ elements.forEach(element => {
9
+ element.addEventListener('mouseenter', function() {
10
+ this.classList.add('undefined-glow', 'transition-all', 'duration-300');
11
+ });
12
+
13
+ element.addEventListener('mouseleave', function() {
14
+ this.classList.remove('undefined-glow');
15
+ });
16
+ });
17
+
18
+ // Add undefined animation to main heading
19
+ const mainHeading = document.querySelector('h1');
20
+ if (mainHeading) {
21
+ mainHeading.classList.add('undefined-pulse');
22
+ }
23
+
24
+ // Random undefined color generator for fun
25
+ const undefinedColors = ['bg-undefined-400', 'bg-undefined-500', 'bg-undefined-600', 'bg-undefined-700'];
26
+ const randomElements = document.querySelectorAll('.bg-white');
27
+
28
+ setInterval(() => {
29
+ randomElements.forEach(element => {
30
+ const randomColor = undefinedColors[Math.floor(Math.random() * undefinedColors.length)];
31
+ element.classList.remove(...undefinedColors);
32
+ element.classList.add(randomColor);
33
+ });
34
+ }, 3000);
35
+ });
style.css CHANGED
@@ -1,28 +1,83 @@
 
 
 
 
 
 
1
  body {
2
- padding: 2rem;
3
- font-family: -apple-system, BlinkMacSystemFont, "Arial", sans-serif;
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
4
  }
5
 
6
- h1 {
7
- font-size: 16px;
8
- margin-top: 0;
 
 
 
 
 
 
9
  }
10
 
11
- p {
12
- color: rgb(107, 114, 128);
13
- font-size: 15px;
14
- margin-bottom: 10px;
15
- margin-top: 5px;
 
16
  }
17
 
18
- .card {
19
- max-width: 620px;
20
- margin: 0 auto;
21
- padding: 16px;
22
- border: 1px solid lightgray;
23
- border-radius: 16px;
24
  }
25
 
26
- .card p:last-child {
27
- margin-bottom: 0;
 
 
28
  }
 
1
+ @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
2
+
3
+ * {
4
+ font-family: 'Inter', sans-serif;
5
+ }
6
+
7
  body {
8
+ background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%);
9
+ }
10
+ .undefined-glow {
11
+ box-shadow: 0 0 20px rgba(14, 165, 233, 0.3);
12
+ }
13
+
14
+ .undefined-gradient {
15
+ background: linear-gradient(135deg, #0ea5e9 0%, #0369a1 100%);
16
+ }
17
+
18
+ .undefined-border-glow {
19
+ border: 2px solid #0ea5e9;
20
+ box-shadow: 0 0 15px rgba(14, 165, 233, 0.4);
21
+ }
22
+
23
+ @keyframes undefined-pulse {
24
+ 0%, 100% {
25
+ opacity: 1;
26
+ }
27
+ 50% {
28
+ opacity: 0.7;
29
+ }
30
+ }
31
+
32
+ .undefined-pulse {
33
+ animation: undefined-pulse 2s infinite;
34
+ }
35
+
36
+ /* OCR 작업 관련 스타일 */
37
+ .ocr-container {
38
+ background: white;
39
+ border-radius: 12px;
40
+ padding: 2rem;
41
+ box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
42
+ }
43
+
44
+ .ocr-text-area {
45
+ min-height: 300px;
46
+ border: 2px solid #e5e7eb;
47
+ border-radius: 8px;
48
+ padding: 1rem;
49
+ font-family: 'Courier New', monospace;
50
+ line-height: 1.6;
51
  }
52
 
53
+ .ocr-label {
54
+ display: inline-block;
55
+ background: #f0f9ff;
56
+ border: 1px solid #0ea5e9;
57
+ border-radius: 20px;
58
+ padding: 0.5rem 1rem;
59
+ margin: 0.25rem;
60
+ font-size: 0.875rem;
61
+ color: #0369a1;
62
  }
63
 
64
+ .process-select {
65
+ width: 100%;
66
+ padding: 0.75rem;
67
+ border: 2px solid #e5e7eb;
68
+ border-radius: 8px;
69
+ background: white;
70
  }
71
 
72
+ .work-progress {
73
+ height: 8px;
74
+ background: #e5e7eb;
75
+ border-radius: 4px;
76
+ overflow: hidden;
 
77
  }
78
 
79
+ .progress-bar {
80
+ height: 100%;
81
+ background: linear-gradient(135deg, #0ea5e9 0%, #0369a1 100%);
82
+ transition: width 0.3s ease;
83
  }
worker.html ADDED
@@ -0,0 +1,161 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="ko">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>OCR 작업자 대시보드 - OCR 정밀 교정 공방</title>
7
+ <link rel="icon" type="image/x-icon" href="/static/favicon.ico">
8
+ <link rel="stylesheet" href="style.css">
9
+ <script src="https://cdn.tailwindcss.com"></script>
10
+ <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
11
+ <script>
12
+ tailwind.config = {
13
+ theme: {
14
+ extend: {
15
+ colors: {
16
+ 'primary': {
17
+ 50: '#f0f9ff',
18
+ 100: '#e0f2fe',
19
+ 200: '#bae6fd',
20
+ 300: '#7dd3fc',
21
+ 400: '#38bdf8',
22
+ 500: '#0ea5e9',
23
+ 600: '#0284c7',
24
+ 700: '#0369a1',
25
+ 800: '#075985',
26
+ 900: '#0c4a6e',
27
+ }
28
+ }
29
+ }
30
+ }
31
+ }
32
+ </script>
33
+ </head>
34
+ <body class="bg-gradient-to-br from-primary-50 to-primary-100 min-h-screen">
35
+ <custom-header></custom-header>
36
+
37
+ <main class="container mx-auto px-4 py-8">
38
+ <div class="text-center mb-12">
39
+ <h1 class="text-4xl font-bold text-primary-900 mb-4">OCR 작업자 대시보드 🛠️</h1>
40
+ <p class="text-lg text-primary-700 max-w-2xl mx-auto">
41
+ OCR 텍스트 수정, 공정/공종 라벨링, 작업 진행률 모니터링을 위한 작업자 전용 페이지입니다.
42
+ </p>
43
+ </div>
44
+
45
+ <!-- 개인 통계 -->
46
+ <div class="grid grid-cols-1 md:grid-cols-3 gap-6 mb-8">
47
+ <div class="bg-white rounded-xl p-6 shadow-lg border border-primary-200">
48
+ <div class="flex items-center">
49
+ <div class="w-12 h-12 bg-primary-500 rounded-full flex items-center justify-center mr-4">
50
+ <i data-feather="list" class="text-white"></i>
51
+ </div>
52
+ <div>
53
+ <h3 class="text-2xl font-bold text-primary-900">15</h3>
54
+ <p class="text-primary-600 text-sm">할당된 작업</p>
55
+ </div>
56
+ </div>
57
+ </div>
58
+
59
+ <div class="bg-white rounded-xl p-6 shadow-lg border border-primary-200">
60
+ <div class="flex items-center">
61
+ <div class="w-12 h-12 bg-yellow-500 rounded-full flex items-center justify-center mr-4">
62
+ <i data-feather="edit" class="text-white"></i>
63
+ </div>
64
+ <div>
65
+ <h3 class="text-2xl font-bold text-primary-900">8</h3>
66
+ <p class="text-primary-600 text-sm">진행 중 작업</p>
67
+ </div>
68
+ </div>
69
+ </div>
70
+
71
+ <div class="bg-white rounded-xl p-6 shadow-lg border border-primary-200">
72
+ <div class="flex items-center">
73
+ <div class="w-12 h-12 bg-green-500 rounded-full flex items-center justify-center mr-4">
74
+ <i data-feather="check" class="text-white"></i>
75
+ </div>
76
+ <div>
77
+ <h3 class="text-2xl font-bold text-primary-900">7</h3>
78
+ <p class="text-primary-600 text-sm">완료된 작업</p>
79
+ </div>
80
+ </div>
81
+ </div>
82
+ </div>
83
+
84
+ <!-- 작업 기능 섹션 -->
85
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-8 mb-12">
86
+ <!-- OCR 수정 작업 -->
87
+ <div class="bg-white/80 backdrop-blur-sm rounded-2xl p-6 shadow-lg border border-primary-200">
88
+ <div class="w-16 h-16 bg-primary-500 rounded-full flex items-center justify-center mb-4 mx-auto">
89
+ <i data-feather="edit-3" class="text-white text-xl"></i>
90
+ </div>
91
+ <h3 class="text-xl font-semibold text-primary-900 mb-2 text-center">OCR 텍스트 수정</h3>
92
+ <p class="text-primary-700 mb-6 text-center">OCR로 추출된 텍스트의 오류를 수정하고 정확성을 높입니다.</p>
93
+ <div class="space-y-4">
94
+ <div class="bg-primary-50 rounded-lg p-4">
95
+ <h4 class="font-medium text-primary-800 mb-2">진행 중인 작업</h4>
96
+ <div class="flex justify-between items-center">
97
+ <span class="text-sm text-primary-600">문서 #2456 - 건축 도면</span>
98
+ </div>
99
+ </div>
100
+ <button class="w-full bg-primary-500 hover:bg-primary-600 text-white px-4 py-3 rounded-lg font-medium transition-all duration-300 transform hover:scale-105">
101
+ 작업 시���하기
102
+ </button>
103
+ </div>
104
+ </div>
105
+
106
+ <!-- 공정/공종 라벨링 -->
107
+ <div class="bg-white/80 backdrop-blur-sm rounded-2xl p-6 shadow-lg border border-primary-200">
108
+ <div class="w-16 h-16 bg-green-500 rounded-full flex items-center justify-center mb-4 mx-auto">
109
+ <i data-feather="tag" class="text-white text-xl"></i>
110
+ </div>
111
+ <h3 class="text-xl font-semibold text-primary-900 mb-2 text-center">공정/공종 라벨링</h3>
112
+ <p class="text-primary-700 mb-6 text-center">문서 내용에 맞는 공정과 공종을 선택하여 라벨을 추가합니다.</p>
113
+ <div class="space-y-4">
114
+ <div class="bg-green-50 rounded-lg p-4">
115
+ <h4 class="font-medium text-primary-800 mb-2">완료 대기 작업</h4>
116
+ <div class="flex justify-between items-center">
117
+ <span class="text-sm text-primary-600">문서 #1890 - 시공 계획서</span>
118
+ </div>
119
+ </div>
120
+ <button class="w-full bg-green-500 hover:bg-green-600 text-white px-4 py-3 rounded-lg font-medium transition-all duration-300 transform hover:scale-105">
121
+ 라벨링 시작하기
122
+ </button>
123
+ </div>
124
+ </div>
125
+ </div>
126
+ </div>
127
+
128
+ <!-- 작업 진행률 -->
129
+ <div class="bg-white rounded-2xl p-8 shadow-lg border border-primary-200 mb-8">
130
+ <h2 class="text-2xl font-bold text-primary-900 mb-6 text-center">나의 작업 진행률 📊</h2>
131
+ <div class="space-y-6">
132
+ <div>
133
+ <div class="flex justify-between mb-2">
134
+ <span class="text-primary-700">문서 #2456 - 건축 도면</span>
135
+ <span class="text-primary-700 font-medium">65%</span>
136
+ </div>
137
+ <div class="w-full bg-primary-200 rounded-full h-3">
138
+ <div class="bg-primary-500 h-3 rounded-full" style="width: 65%"></div>
139
+ </div>
140
+ </div>
141
+ <div>
142
+ <div class="flex justify-between mb-2">
143
+ <span class="text-primary-700">문서 #1890 - 시공 계획서</span>
144
+ <span class="text-primary-700 font-medium">40%</span>
145
+ </div>
146
+ <div class="w-full bg-primary-200 rounded-full h-3">
147
+ <div class="bg-primary-500 h-3 rounded-full" style="width: 40%"></div>
148
+ </div>
149
+ </div>
150
+ </div>
151
+ </div>
152
+ </main>
153
+
154
+ <custom-footer></custom-footer>
155
+
156
+ <script src="components/header.js"></script>
157
+ <script src="components/footer.js"></script>
158
+ <script src="script.js"></script>
159
+ <script>feather.replace();</script>
160
+ </body>
161
+ </html>