@dssp/supervision 1.0.0-alpha.7 → 1.0.0-alpha.74

package/dist-client/pages/building-inspection/building-inspection-detail-ai-measurement.js

@@ -0,0 +1,868 @@
+import { __decorate, __metadata } from "tslib";
+import '@material/web/icon/icon.js';
+import '@operato/input/ox-input-switch.js';
+import '@operato/mini-map/ox-zoomable-image.js';
+import '@material/web/progress/circular-progress.js';
+import gql from 'graphql-tag';
+import { css, html } from 'lit';
+import { customElement, state, query } from 'lit/decorators.js';
+import html2canvas from 'html2canvas';
+import { PageView } from '@operato/shell';
+import { CommonGristStyles, ScrollbarStyles } from '@operato/styles';
+import { client } from '@operato/graphql';
+import { notify } from '@operato/layout';
+import './component/building-inspection-detail-header';
+let BuildingInspectionAiMeasurement = class BuildingInspectionAiMeasurement extends PageView {
+    constructor() {
+        super(...arguments);
+        this.KEYPOINT_RULER_API_BASE_URL = 'https://hatiolab-korea-uni.ettisoft.com';
+        this.project = {};
+        this.buildingInspection = {};
+        this.buildingInspectionId = '';
+        this.capturedVideoUrl = null;
+        this.videoFile = null;
+        this.frame = null;
+        this.analyzing = false;
+        this.selectedPoints = {
+            x1: null,
+            y1: null,
+            x2: null,
+            y2: null
+        };
+        this.frameNaturalWidth = 0;
+        this.frameNaturalHeight = 0;
+        this.displayedImageRect = null;
+        this.distance = null;
+        this.unit = null;
+        this.analyzingError = null;
+        this._onImageLoad = () => {
+            if (!this.frameImageEl || !this.imageWrapperEl)
+                return;
+            const img = this.frameImageEl;
+            const wrapperRect = this.imageWrapperEl.getBoundingClientRect();
+            const imgRect = img.getBoundingClientRect();
+            this.frameNaturalWidth = img.naturalWidth;
+            this.frameNaturalHeight = img.naturalHeight;
+            this.displayedImageRect = {
+                width: imgRect.width,
+                height: imgRect.height,
+                left: imgRect.left - wrapperRect.left,
+                top: imgRect.top - wrapperRect.top
+            };
+        };
+        this._onImageClick = (event) => {
+            if (!this.frameImageEl || !this.imageWrapperEl)
+                return;
+            const imgRect = this.frameImageEl.getBoundingClientRect();
+            const wrapperRect = this.imageWrapperEl.getBoundingClientRect();
+            const clientX = event.clientX;
+            const clientY = event.clientY;
+            // Ignore clicks outside the displayed image area
+            if (clientX < imgRect.left || clientX > imgRect.right || clientY < imgRect.top || clientY > imgRect.bottom) {
+                return;
+            }
+            // 새로운 마크 입력 시 이전 거리/단위 결과 초기화
+            this.distance = null;
+            this.unit = null;
+            this.analyzingError = null;
+            const relativeX = clientX - imgRect.left;
+            const relativeY = clientY - imgRect.top;
+            const xOnNatural = Math.round((relativeX * this.frameNaturalWidth) / imgRect.width);
+            const yOnNatural = Math.round((relativeY * this.frameNaturalHeight) / imgRect.height);
+            if (this.selectedPoints.x1 === null || this.selectedPoints.y1 === null) {
+                this.selectedPoints = Object.assign(Object.assign({}, this.selectedPoints), { x1: xOnNatural, y1: yOnNatural });
+            }
+            else if (this.selectedPoints.x2 === null || this.selectedPoints.y2 === null) {
+                this.selectedPoints = Object.assign(Object.assign({}, this.selectedPoints), { x2: xOnNatural, y2: yOnNatural });
+            }
+            else {
+                // 세 번째 클릭부터는 초기화 후 첫 점으로 설정
+                this.selectedPoints = { x1: xOnNatural, y1: yOnNatural, x2: null, y2: null };
+            }
+            // Update displayed rect cache (in case layout changed)
+            this.displayedImageRect = {
+                width: imgRect.width,
+                height: imgRect.height,
+                left: imgRect.left - wrapperRect.left,
+                top: imgRect.top - wrapperRect.top
+            };
+        };
+    }
+    get context() {
+        return {
+            title: '검측 관리 상세 - AI 거리 측정'
+        };
+    }
+    render() {
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
+        return html `
+      <building-inspection-detail-header
+        .buildingInspectionId=${(_a = this.buildingInspection) === null || _a === void 0 ? void 0 : _a.id}
+        .buildingLevelId=${(_c = (_b = this.buildingInspection) === null || _b === void 0 ? void 0 : _b.buildingLevel) === null || _c === void 0 ? void 0 : _c.id}
+        .projectName=${this.project.name}
+        .buildingName=${(_f = (_e = (_d = this.buildingInspection) === null || _d === void 0 ? void 0 : _d.buildingLevel) === null || _e === void 0 ? void 0 : _e.building) === null || _f === void 0 ? void 0 : _f.name}
+        .buildingLevelFloor=${(_h = (_g = this.buildingInspection) === null || _g === void 0 ? void 0 : _g.buildingLevel) === null || _h === void 0 ? void 0 : _h.floor}
+        .projectId=${this.project.id}
+      ></building-inspection-detail-header>
+
+      <div body>
+        <!-- Preview selected or recorded video -->
+        <div preview>
+          ${((_j = this.frame) === null || _j === void 0 ? void 0 : _j.download_url)
+            ? html `
+                <div class="image-wrapper" @click=${this._onImageClick}>
+                  <img
+                    id="frameImage"
+                    src="${this.KEYPOINT_RULER_API_BASE_URL + ((_k = this.frame) === null || _k === void 0 ? void 0 : _k.download_url)}"
+                    crossorigin="anonymous"
+                    alt="frame"
+                    loading="eager"
+                    @load=${this._onImageLoad}
+                  />
+                  ${this._renderMarkers()}
+                </div>
+              `
+            : // 동영상 선택 후 동영상 프리뷰
+                this.capturedVideoUrl
+                    ? html `<video src=${this.capturedVideoUrl} controls playsinline></video>`
+                    : // 초기 상태, 동영상 선택 전
+                        html `<md-icon>videocam</md-icon>`}
+        </div>
+
+        <div controls>
+          <span class="controls-title">동영상 촬영</span>
+
+          <!-- 가운데 버튼 -->
+          ${((_l = this.frame) === null || _l === void 0 ? void 0 : _l.download_url) && this._hasTwoPoints() && this.distance && this.unit
+            ? // 거리 측정 완료 시, 사진 저장 버튼 표시
+                html `<button class="save" ?disabled=${this.analyzing} @click=${this._savePhoto}>사진 저장</button>`
+            : // 거리 측정 완료 전, 동영상 촬영 버튼 표시
+                html `<div class="camera-controls">
+                <div class="camera-shutter">
+                  <md-icon>camera</md-icon>
+                  <input id="cameraInput" type="file" accept="video/*" capture="environment" @change="${this._onVideoSelected}" />
+                </div>
+                <button class="album-button" @click="${this._onAlbumButtonClick}">앨범 선택</button>
+                <input id="albumInput" type="file" accept="video/*" @change="${this._onVideoSelected}" style="display: none;" />
+              </div>`}
+
+          <!-- Action buttons -->
+          <div action-buttons>
+            ${this.frame
+            ? html `
+                  <button class="photo" ?disabled=${this.analyzing || !this._hasTwoPoints()} @click=${this._onAnalyzePhoto}>
+                    사진 분석
+                  </button>
+                `
+            : html `
+                  <button class="save" ?disabled=${this.analyzing || !this.capturedVideoUrl} @click=${this._onAnalyzeVideo}>
+                    동영상 분석
+                  </button>
+                `}
+            <button class="retry" @click=${this._onRetry}>초기화</button>
+          </div>
+        </div>
+      </div>
+
+      <!-- 전체 화면을 덮는 로딩 오버레이 -->
+      ${this.analyzing
+            ? html `<div class="loading-overlay">
+            <div class="loading-container">
+              <md-circular-progress indeterminate></md-circular-progress>
+              <div class="loading-text">분석 중...</div>
+            </div>
+          </div>`
+            : ''}
+    `;
+    }
+    async updated(changes) { }
+    async pageUpdated(changes, lifecycle) {
+        if (this.active) {
+            this._onRetry();
+            this.buildingInspectionId = lifecycle.resourceId || '';
+            await this.initBuildingInspection(this.buildingInspectionId);
+        }
+    }
+    async initBuildingInspection(buildingInspectionId = '') {
+        var _a, _b, _c, _d;
+        const response = await client.query({
+            query: gql `
+        query BuildingInspection($buildingInspectionId: String!) {
+          buildingInspection(id: $buildingInspectionId) {
+            id
+            status
+            requestDate
+            drawingMarker
+            checklist {
+              id
+              location
+              inspectionDrawingType
+            }
+            buildingLevel {
+              id
+              floor
+              mainDrawing {
+                id
+                name
+                fullpath
+              }
+              mainDrawingImage
+              building {
+                id
+                name
+                buildingComplex {
+                  id
+                }
+              }
+            }
+          }
+        }
+      `,
+            variables: {
+                buildingInspectionId
+            }
+        });
+        if (response.errors)
+            return;
+        this.buildingInspection = response.data.buildingInspection;
+        await this._getProjectByBuildingComplexId((_d = (_c = (_b = (_a = this.buildingInspection) === null || _a === void 0 ? void 0 : _a.buildingLevel) === null || _b === void 0 ? void 0 : _b.building) === null || _c === void 0 ? void 0 : _c.buildingComplex) === null || _d === void 0 ? void 0 : _d.id);
+    }
+    async _getProjectByBuildingComplexId(buildingComplexId) {
+        const response = await client.query({
+            query: gql `
+        query ProjectByBuildingComplexId($buildingComplexId: String!) {
+          project: projectByBuildingComplexId(buildingComplexId: $buildingComplexId) {
+            id
+            name
+          }
+        }
+      `,
+            variables: {
+                buildingComplexId
+            }
+        });
+        if (response.errors)
+            return;
+        this.project = response.data.project;
+    }
+    _onVideoSelected(event) {
+        var _a;
+        const input = event.target;
+        const file = (_a = input === null || input === void 0 ? void 0 : input.files) === null || _a === void 0 ? void 0 : _a[0];
+        if (!file)
+            return;
+        // Only allow video files
+        if (!file.type.startsWith('video/')) {
+            console.warn('선택된 파일이 동영상이 아닙니다.');
+            return;
+        }
+        // Revoke old object URL if exists
+        if (this.capturedVideoUrl) {
+            URL.revokeObjectURL(this.capturedVideoUrl);
+        }
+        this.videoFile = file;
+        this.capturedVideoUrl = URL.createObjectURL(file);
+    }
+    _onAlbumButtonClick() {
+        var _a;
+        // 앨범 선택을 위해 숨겨진 input을 클릭
+        (_a = this.albumInputEl) === null || _a === void 0 ? void 0 : _a.click();
+    }
+    async _onAnalyzeVideo() {
+        var _a, _b, _c, _d, _e, _f, _g;
+        if (!this.videoFile) {
+            console.warn('선택된 동영상이 없습니다.');
+            return;
+        }
+        try {
+            this.analyzing = true;
+            const form = new FormData();
+            form.append('files', this.videoFile, this.videoFile.name);
+            const response = await fetch(`${this.KEYPOINT_RULER_API_BASE_URL}/api/run/keypoint-ruler`, {
+                method: 'POST',
+                headers: { Authorization: `Basic ${btoa('admin:admin1234')}` },
+                body: form
+            });
+            const data = await response.json();
+            this.frame = {
+                file_id: (_b = (_a = data === null || data === void 0 ? void 0 : data.result) === null || _a === void 0 ? void 0 : _a.output_files[0]) === null || _b === void 0 ? void 0 : _b.file_id,
+                download_url: (_d = (_c = data === null || data === void 0 ? void 0 : data.result) === null || _c === void 0 ? void 0 : _c.output_files[0]) === null || _d === void 0 ? void 0 : _d.download_url,
+                file_path: (_f = (_e = data === null || data === void 0 ? void 0 : data.result) === null || _e === void 0 ? void 0 : _e.frames[0]) === null || _f === void 0 ? void 0 : _f.file_path,
+                calibration: (_g = data === null || data === void 0 ? void 0 : data.result) === null || _g === void 0 ? void 0 : _g.calibration
+            };
+        }
+        catch (error) {
+            console.error('동영상 업로드 실패:', error);
+        }
+        finally {
+            this.analyzing = false;
+        }
+    }
+    _onRetry() {
+        // Clear current selection and reopen camera
+        if (this.capturedVideoUrl) {
+            URL.revokeObjectURL(this.capturedVideoUrl);
+        }
+        this.capturedVideoUrl = null;
+        this.videoFile = null;
+        this.frame = null;
+        this.selectedPoints = { x1: null, y1: null, x2: null, y2: null };
+        this.displayedImageRect = null;
+        this.frameNaturalWidth = 0;
+        this.frameNaturalHeight = 0;
+        this.cameraInputEl.value = '';
+        this.albumInputEl.value = '';
+        this.distance = null;
+        this.unit = null;
+        this.analyzingError = null;
+    }
+    _hasTwoPoints() {
+        const { x1, y1, x2, y2 } = this.selectedPoints;
+        return x1 !== null && y1 !== null && x2 !== null && y2 !== null;
+    }
+    _renderMarkers() {
+        if (!this.displayedImageRect)
+            return html ``;
+        const { left, top, width, height } = this.displayedImageRect;
+        const { x1, y1, x2, y2 } = this.selectedPoints;
+        const toDisplay = (x, y) => {
+            const dx = left + (x * width) / (this.frameNaturalWidth || 1);
+            const dy = top + (y * height) / (this.frameNaturalHeight || 1);
+            return { dx, dy };
+        };
+        return html `
+      <!-- 첫 번째 점 -->
+      ${x1 !== null && y1 !== null
+            ? (() => {
+                const p = toDisplay(x1, y1);
+                return html `<div class="point-marker point-1" style="left:${p.dx}px; top:${p.dy}px;"></div>`;
+            })()
+            : ''}
+      <!-- 두 번째 점 -->
+      ${x2 !== null && y2 !== null
+            ? (() => {
+                const p = toDisplay(x2, y2);
+                return html `<div class="point-marker point-2" style="left:${p.dx}px; top:${p.dy}px;"></div>`;
+            })()
+            : ''}
+      <!-- 두점 사이 선 -->
+      ${this._hasTwoPoints()
+            ? (() => {
+                const p1 = toDisplay(x1, y1);
+                const p2 = toDisplay(x2, y2);
+                const cx = (p1.dx + p2.dx) / 2;
+                const cy = (p1.dy + p2.dy) / 2;
+                // 선의 길이와 각도 계산
+                const length = Math.sqrt(Math.pow(p2.dx - p1.dx, 2) + Math.pow(p2.dy - p1.dy, 2));
+                const angle = Math.atan2(p2.dy - p1.dy, p2.dx - p1.dx) * (180 / Math.PI);
+                return html `
+              <!-- DIV로 그린 선 -->
+              <div
+                class="line-overlay"
+                style="
+                  left: ${p1.dx}px; 
+                  top: ${p1.dy}px; 
+                  width: ${length}px; 
+                  height: 3px;
+                  transform: rotate(${angle}deg);
+                "
+              ></div>
+              <!-- 거리 라벨 -->
+              ${this.analyzingError
+                    ? html `<div class="distance-label" style="left:${cx}px; top:${cy}px;">${this.analyzingError}</div>`
+                    : this.distance && this.unit
+                        ? html `<div class="distance-label" style="left:${cx}px; top:${cy}px;">${this.distance} ${this.unit}</div>`
+                        : ''}
+            `;
+            })()
+            : ''}
+    `;
+    }
+    async _onAnalyzePhoto() {
+        if (!this.frame) {
+            console.warn('분석할 사진이 없습니다.');
+            return;
+        }
+        if (!this._hasTwoPoints()) {
+            console.warn('두 점을 먼저 선택해 주세요.');
+            return;
+        }
+        try {
+            this.analyzing = true;
+            const payload = {
+                x1: this.selectedPoints.x1,
+                y1: this.selectedPoints.y1,
+                x2: this.selectedPoints.x2,
+                y2: this.selectedPoints.y2,
+                file_path: this.frame.file_path,
+                calibration: this.frame.calibration
+            };
+            const form = new FormData();
+            form.append('input', JSON.stringify(payload));
+            const response = await fetch(`${this.KEYPOINT_RULER_API_BASE_URL}/api/run/keypoint-ruler`, {
+                method: 'POST',
+                headers: { Authorization: `Basic ${btoa('admin:admin1234')}` },
+                body: form
+            });
+            const result = await response.json();
+            const { distance, unit, error } = result.result || {};
+            this.distance = distance;
+            this.unit = unit;
+            this.analyzingError = error;
+        }
+        catch (error) {
+            console.error('사진 분석 실패:', error);
+        }
+        finally {
+            this.analyzing = false;
+        }
+    }
+    async _savePhoto() {
+        var _a, _b, _c;
+        if (!this.frame || !this._hasTwoPoints() || this.distance === null || !this.unit) {
+            notify({ message: '분석 완료 후 저장할 수 있습니다.', level: 'warn' });
+            return;
+        }
+        const checklistId = (_b = (_a = this.buildingInspection) === null || _a === void 0 ? void 0 : _a.checklist) === null || _b === void 0 ? void 0 : _b.id;
+        let file;
+        try {
+            file = await this.getCurrentImage();
+        }
+        catch (e) {
+            notify({ message: '이미지 합성에 실패했습니다.', level: 'error' });
+            return;
+        }
+        const response = await client.mutate({
+            mutation: gql `
+        mutation ($attachments: [NewAttachment!]!) {
+          createAttachments(attachments: $attachments) {
+            id
+          }
+        }
+      `,
+            variables: {
+                attachments: [{ file, refBy: checklistId, refType: 'Checklist', description: (_c = this.buildingInspection) === null || _c === void 0 ? void 0 : _c.status }]
+            },
+            context: { hasUpload: true }
+        });
+        if (!response.errors) {
+            notify({ message: '사진 대지를 저장하였습니다.', level: 'info' });
+            return;
+        }
+        return response.data.createAttachments;
+    }
+    async getCurrentImage() {
+        if (!this.imageWrapperEl) {
+            throw new Error('이미지 영역을 찾을 수 없습니다.');
+        }
+        try {
+            // html2canvas로 .image-wrapper 영역 캡처
+            const canvas = await html2canvas(this.imageWrapperEl, {
+                backgroundColor: null, // 투명 배경
+                scale: 1, // 1:1 스케일
+                useCORS: true, // CORS 이미지 허용
+                allowTaint: false, // 보안상 false
+                logging: false // 로그 비활성화
+            });
+            // 캔버스를 Blob으로 변환
+            const blob = await new Promise(resolve => {
+                canvas.toBlob(resolve, 'image/png', 1.0);
+            });
+            // File 객체로 변환하여 반환
+            return new File([blob], `inspection_${Date.now()}.png`, {
+                type: 'image/png'
+            });
+        }
+        catch (error) {
+            console.error('html2canvas 캡처 실패:', error);
+            throw new Error('화면 캡처에 실패했습니다.');
+        }
+    }
+};
+BuildingInspectionAiMeasurement.styles = [
+    ScrollbarStyles,
+    CommonGristStyles,
+    css `
+      :host {
+        display: grid;
+        grid-template-rows: 75px 1fr;
+        color: #4e5055;
+        width: 100%;
+        height: 100%;
+        background-color: #f7f7f7;
+      }
+
+      div[body] {
+        display: flex;
+        justify-items: center;
+        gap: var(--spacing-medium);
+        margin: var(--spacing-medium);
+        min-height: 0;
+      }
+
+      div[preview] {
+        flex: 1;
+        border: 2px solid #ddd;
+        border-radius: 10px;
+
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        min-height: 0;
+        overflow: hidden;
+      }
+
+      div[preview] img {
+        flex: 1;
+        max-width: 100%;
+        max-height: 100%;
+        object-fit: contain;
+      }
+
+      div[preview] video {
+        flex: 1;
+        max-width: 100%;
+        max-height: 100%;
+        object-fit: contain;
+      }
+
+      div[preview] md-icon {
+        --md-icon-size: 160px;
+      }
+
+      .loading-container {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+        gap: 12px;
+      }
+
+      .loading-text {
+        font-size: 14px;
+        color: #666;
+      }
+
+      .frame-container {
+        width: 100%;
+        height: 100%;
+        max-height: 100%;
+        min-height: 0;
+        overflow-y: auto;
+        display: flex;
+        flex-direction: column;
+        gap: 12px;
+        padding: 12px;
+      }
+
+      .frames-header {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        gap: 12px;
+        font-size: 20px;
+        font-weight: 700;
+        color: #333;
+        text-align: center;
+        padding-block: 8px;
+      }
+
+      .frames-count {
+        font-size: 16px;
+        color: #777;
+        font-weight: 600;
+      }
+
+      .frames-grid {
+        display: grid;
+        grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
+        gap: 12px;
+      }
+
+      .frame-item {
+        border: 1px solid #ddd;
+        border-radius: 8px;
+        overflow: hidden;
+        background: #fff;
+        cursor: pointer;
+        transition:
+          box-shadow 0.2s,
+          transform 0.1s;
+      }
+
+      .frame-item:hover {
+        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+        transform: translateY(-1px);
+      }
+
+      .frame-item img {
+        display: block;
+        width: 100%;
+        height: 120px;
+        object-fit: cover;
+      }
+
+      .image-wrapper {
+        flex: 1;
+        display: flex;
+        position: relative;
+        align-content: center;
+        text-align: center;
+      }
+
+      .point-marker {
+        position: absolute;
+        width: 14px;
+        height: 14px;
+        border-radius: 50%;
+        border: 2px solid #fff;
+        transform: translate(-50%, -50%);
+        pointer-events: none;
+        box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.25);
+      }
+
+      .point-1 {
+        background-color: #e53935;
+      }
+
+      .point-2 {
+        background-color: #1e88e5;
+      }
+
+      .line-overlay {
+        position: absolute;
+        pointer-events: none;
+        background-color: #ff9800;
+        transform-origin: left center;
+      }
+
+      .distance-label {
+        position: absolute;
+        background: rgba(0, 0, 0, 0.7);
+        color: #fff;
+        font-size: 14px;
+        padding: 2px 6px;
+        border-radius: 4px;
+        transform: translate(-50%, -120%);
+        pointer-events: none;
+        white-space: nowrap;
+      }
+
+      div[controls] {
+        width: 240px;
+        display: flex;
+        flex-direction: column;
+        justify-content: space-between;
+        align-items: center;
+      }
+
+      div[action-buttons] {
+        display: flex;
+        flex-direction: row;
+        justify-content: space-between;
+        gap: 15px;
+      }
+
+      .switch-container {
+        display: flex;
+        align-items: center;
+        gap: 10px;
+        font-size: 24px;
+        font-weight: bold;
+      }
+
+      ox-input-switch {
+        --ox-simple-switch-fullwidth: 68px;
+        --ox-simple-switch-fullheight: 34px;
+        --ox-simple-switch-thumbnail-size: 34px;
+      }
+
+      .camera-controls {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        gap: 12px;
+      }
+
+      .camera-shutter {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        cursor: pointer;
+        position: relative;
+      }
+
+      .controls-title {
+        font-size: 18px;
+        font-weight: 700;
+        color: #333;
+        margin-bottom: 8px;
+        text-align: center;
+      }
+
+      .camera-shutter md-icon {
+        --md-icon-size: 100px;
+      }
+
+      .camera-shutter input {
+        opacity: 0;
+        width: 100%;
+        height: 100%;
+        position: absolute;
+        left: 0;
+        top: 0;
+        cursor: pointer;
+      }
+
+      button {
+        padding: 10px 20px;
+        font-size: 16px;
+        border-radius: 5px;
+        border: none;
+        cursor: pointer;
+      }
+
+      button.save {
+        background-color: #4caf50;
+        color: white;
+
+        &:disabled {
+          background-color: #ccc;
+          cursor: default;
+        }
+      }
+
+      button.retry {
+        background-color: #f0ad4e;
+        color: white;
+      }
+
+      button.photo {
+        background-color: #1e88e5;
+        color: white;
+
+        &:disabled {
+          background-color: #ccc;
+          cursor: default;
+        }
+      }
+
+      button.album-button {
+        background-color: #9c27b0;
+        color: white;
+        font-size: 14px;
+        padding: 8px 16px;
+        border-radius: 5px;
+        border: none;
+        cursor: pointer;
+
+        &:hover {
+          background-color: #7b1fa2;
+        }
+
+        &:disabled {
+          background-color: #ccc;
+          cursor: default;
+        }
+      }
+
+      .loading-overlay {
+        position: fixed;
+        top: 0;
+        left: 0;
+        right: 0;
+        bottom: 0;
+        background: rgba(0, 0, 0, 0.5);
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+        gap: 12px;
+        z-index: 2000;
+      }
+
+      .loading-overlay .loading-container {
+        background: white;
+        padding: 32px;
+        border-radius: 12px;
+        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
+      }
+    `
+];
+__decorate([
+    state(),
+    __metadata("design:type", Object)
+], BuildingInspectionAiMeasurement.prototype, "project", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", Object)
+], BuildingInspectionAiMeasurement.prototype, "buildingInspection", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", String)
+], BuildingInspectionAiMeasurement.prototype, "buildingInspectionId", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", Object)
+], BuildingInspectionAiMeasurement.prototype, "capturedVideoUrl", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", Object)
+], BuildingInspectionAiMeasurement.prototype, "videoFile", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", Object)
+], BuildingInspectionAiMeasurement.prototype, "frame", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", Boolean)
+], BuildingInspectionAiMeasurement.prototype, "analyzing", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", Object)
+], BuildingInspectionAiMeasurement.prototype, "selectedPoints", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", Number)
+], BuildingInspectionAiMeasurement.prototype, "frameNaturalWidth", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", Number)
+], BuildingInspectionAiMeasurement.prototype, "frameNaturalHeight", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", Object)
+], BuildingInspectionAiMeasurement.prototype, "displayedImageRect", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", Object)
+], BuildingInspectionAiMeasurement.prototype, "distance", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", Object)
+], BuildingInspectionAiMeasurement.prototype, "unit", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", Object)
+], BuildingInspectionAiMeasurement.prototype, "analyzingError", void 0);
+__decorate([
+    query('img#frameImage'),
+    __metadata("design:type", HTMLImageElement)
+], BuildingInspectionAiMeasurement.prototype, "frameImageEl", void 0);
+__decorate([
+    query('div.image-wrapper'),
+    __metadata("design:type", HTMLDivElement)
+], BuildingInspectionAiMeasurement.prototype, "imageWrapperEl", void 0);
+__decorate([
+    query('#cameraInput'),
+    __metadata("design:type", HTMLInputElement)
+], BuildingInspectionAiMeasurement.prototype, "cameraInputEl", void 0);
+__decorate([
+    query('#albumInput'),
+    __metadata("design:type", HTMLInputElement)
+], BuildingInspectionAiMeasurement.prototype, "albumInputEl", void 0);
+BuildingInspectionAiMeasurement = __decorate([
+    customElement('building-inspection-detail-ai-measurement')
+], BuildingInspectionAiMeasurement);
+export { BuildingInspectionAiMeasurement };
+//# sourceMappingURL=building-inspection-detail-ai-measurement.js.map