Spaces:
Running
Running
| <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> |