Hugging Face's logo

Spaces:
jamesLeeeeeee
/
ocr
Running

App Files Community
ocr
File size: 11,360 Bytes 
0f7d155
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
 
<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>샘플 데이터 - OCR 정밀 교정 공방</title>
    <link rel="icon" type="image/x-icon" href="/static/favicon.ico">
    <link rel="stylesheet" href="style.css">
    <script src="https://cdn.tailwindcss.com"></script>
    <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        'primary': {
                            50: '#f0f9ff',
                            100: '#e0f2fe',
                            200: '#bae6fd',
                            300: '#7dd3fc',
                            400: '#38bdf8',
                            500: '#0ea5e9',
                            600: '#0284c7',
                            700: '#0369a1',
                            800: '#075985',
                            900: '#0c4a6e',
                        }
                    }
                }
            }
        }
    </script>
</head>
<body class="bg-gradient-to-br from-primary-50 to-primary-100 min-h-screen">
    <custom-header></custom-header>
    
    <main class="container mx-auto px-4 py-8">
        <div class="text-center mb-12">
            <h1 class="text-4xl font-bold text-primary-900 mb-4">샘플 데이터 📊</h1>
            <p class="text-lg text-primary-700 max-w-2xl mx-auto">
                실제 작업 환경을 경험할 수 있는 샘플 데이터입니다. OCR 텍스트 수정과 공정/공종 라벨링을 연습해보세요.
            </p>
        </div>

        <!-- 샘플 문서 섹션 -->
        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8 mb-12">
            <!-- 샘플 1 -->
            <div class="bg-white/80 backdrop-blur-sm rounded-2xl p-6 shadow-lg border border-primary-200">
                <div class="w-12 h-12 bg-primary-500 rounded-full flex items-center justify-center mb-4">
                    <i data-feather="file-text" class="text-white"></i>
                </div>
                <h3 class="text-xl font-semibold text-primary-900 mb-2">건축 도면 샘플</h3>
                <p class="text-primary-700 mb-4">건축 도면에서 추출된 OCR 텍스트를 수정하고 공종을 라벨링합니다.</p>
                <div class="ocr-container mb-4">
                    <div class="ocr-text-area">
건축허가 신청서

신청인: 홍길동
주소: 서울시 강남구 테헤란로 123

건물용도: 업무시설
대지면적: 1,200㎡
건축면적: 800㎡
연면적: 3,600㎡

구조: 철근콘크리트조
규모: 지하 2층, 지상 10층

공사개요: 
- 지하주차장 시설
- 친환경 설계 적용
- 지진에 강한 구조 설계

허가신청일: 2024년 3월 1일
                    </div>
                </div>
                <div class="space-y-3">
                    <div>
                        <label class="block text-sm text-primary-600 mb-1">공정 선택</label>
                        <select class="process-select">
                            <option>기본설계</option>
                            <option>실시설계</option>
                            <option>인허가</option>
                            <option>공사준비</option>
                            <option>시공</option>
                            <option>준공검사</option>
                        </select>
                    </div>
                    <div>
                        <label class="block text-sm text-primary-600 mb-1">공종 선택</label>
                        <select class="process-select">
                            <option>토공사</option>
                            <option>콘크리트공사</option>
                            <option>철근공사</option>
                            <option>목공사</option>
                            <option>도장공사</option>
                        </select>
                    </div>
                    <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">
                            샘플 작업 시작
                        </button>
                    </div>
                </div>
            </div>

            <!-- 샘플 2 -->
            <div class="bg-white/80 backdrop-blur-sm rounded-2xl p-6 shadow-lg border border-primary-200">
                <div class="w-12 h-12 bg-green-500 rounded-full flex items-center justify-center mb-4">
                    <i data-feather="clipboard" class="text-white"></i>
                </div>
                <h3 class="text-xl font-semibold text-primary-900 mb-2">시공 계획서 샘플</h3>
                <p class="text-primary-700 mb-4">시공 계획서의 OCR 텍스트를 교정하고 적절한 공정을 라벨링합니다.</p>
                <div class="ocr-container mb-4">
                    <div class="ocr-text-area">
시공계획서

프로젝트명: ABC 빌딩 신축공사
시공사: ㈜한국건설
공사기간: 2024.03.01 ~ 2024.12.31

주요공정:
1. 가설공사 (3월)
2. 토목공사 (4월~5월)
3. 건축공사 (6월~11월)
4. 마감공사 (12월)

안전관리계획:
- 주간 안전회의
- 정기 안전점검
- 안전교육 실시

품질관리계획:
- 자재검수
- 공정별 검사
- 최종 검수
                    </div>
                </div>
                <div class="space-y-3">
                    <div>
                        <label class="block text-sm text-primary-600 mb-1">공정 선택</label>
                        <select class="process-select">
                            <option>가설공사</option>
                            <option>토목공사</option>
                            <option>건축공사</option>
                            <option>마감공사</option>
                            <option>준공검사</option>
                        </select>
                    </div>
                    <div>
                        <label class="block text-sm text-primary-600 mb-1">공종 선택</label>
                        <select class="process-select">
                            <option>가설공사</option>
                            <option>토공사</option>
                            <option>콘크리트공사</option>
                            <option>철근공사</option>
                            <option>방수공사</option>
                        </select>
                    </div>
                    <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">
                            샘플 작업 시작
                        </button>
                    </div>
                </div>
            </div>

            <!-- 샘플 3 -->
            <div class="bg-white/80 backdrop-blur-sm rounded-2xl p-6 shadow-lg border border-primary-200">
                <div class="w-12 h-12 bg-yellow-500 rounded-full flex items-center justify-center mb-4">
                    <i data-feather="trending-up" class="text-white"></i>
                </div>
                <h3 class="text-xl font-semibold text-primary-900 mb-2">공사 명세서 샘플</h3>
                <p class="text-primary-700 mb-4">공사 명세서의 OCR 텍스트를 정밀하게 수정합니다.</p>
                <div class="ocr-container mb-4">
                    <div class="ocr-text-area">
공사명세서

공사명: XYZ 아파트 리모델링
시공사: ㈜대한건설
공사기간: 2024.04.01 ~ 2024.10.31

시방서:
- 콘크리트: 24MPa 이상
- 철근: SD400
- 도장: 아크릴 수성페인트

공사비 내역:
1. 가설비: 50,000,000원
2. 자재비: 800,000,000원
3. 인건비: 350,000,000원
4. 경비: 100,000,000원

총 공사비: 1,300,000,000원
                    </div>
                </div>
                <div class="space-y-3">
                    <div>
                        <label class="block text-sm text-primary-600 mb-1">공정 선택</label>
                        <select class="process-select">
                            <option>설계</option>
                            <option>자재조달</option>
                            <option>시공</option>
                            <option>마감</option>
                            <option>검수</option>
                        </select>
                    </div>
                    <div>
                        <label class="block text-sm text-primary-600 mb-1">공종 선택</label>
                        <select class="process-select">
                            <option>철근공사</option>
                            <option>콘크리트공사</option>
                            <option>타일공사</option>
                            <option>도장공사</option>
                            <option>전기공사</option>
                        </select>
                    </div>
                    <button class="w-full bg-yellow-500 hover:bg-yellow-600 text-white px-4 py-2 rounded-lg font-medium transition-all duration-300">
                            샘플 작업 시작
                        </button>
                    </div>
                </div>
            </div>
        </div>

        <!-- 작업 진행률 샘플 -->
        <div class="bg-white rounded-2xl p-8 shadow-lg border border-primary-200">
            <h2 class="text-2xl font-bold text-primary-900 mb-6 text-center">샘플 작업 진행률 📈</h2>
            <div class="space-y-6">
                <div>
                    <div class="flex justify-between mb-2">
                        <span class="text-primary-700">건축 도면 샘플</span>
                        <span class="text-primary-700 font-medium">75%</span>
                    </div>
                    <div class="w-full bg-primary-200 rounded-full h-3">
                        <div class="bg-primary-500 h-3 rounded-full" style="width: 75%"></div>
                </div>
                <div>
                    <div class="flex justify-between mb-2">
                        <span class="text-primary-700">시공 계획서 샘플</span>
                        <span class="text-primary-700 font-medium">50%</span>
                    </div>
                    <div class="w-full bg-primary-200 rounded-full h-3">
                        <div class="bg-primary-500 h-3 rounded-full" style="width: 50%"></div>
                </div>
                <div>
                    <div class="flex justify-between mb-2">
                        <span class="text-primary-700">공사 명세서 샘플</span>
                        <span class="text-primary-700 font-medium">25%</span>
                    </div>
                    <div class="w-full bg-primary-200 rounded-full h-3">
                        <div class="bg-primary-500 h-3 rounded-full" style="width: 25%"></div>
                </div>
            </div>
        </div>
    </main>

    <custom-footer></custom-footer>

    <script src="components/header.js"></script>
    <script src="components/footer.js"></script>
    <script src="script.js"></script>
    <script>feather.replace();</script>
</body>
</html>