Update templates/index.html

templates/index.html

@@ -78,6 +78,35 @@
                         {% endif %}
                     </div>
 
+                    <div style="margin-top: 20px; border-top: 1px solid #ddd; padding-top: 20px;">이미지 업로드</div>
+                    <div class="upload-section" style="padding: 20px; background-color: #f5f5f5; border-radius: 8px; margin-top: 10px;">
+                        <form id="upload-form" enctype="multipart/form-data">
+                            <div style="margin-bottom: 15px;">
+                                <label for="image-upload" style="display: block; margin-bottom: 5px; font-weight: 500;">의료 영상 선택:</label>
+                                <input type="file" id="image-upload" name="image" accept=".png,.jpg,.jpeg,.gif,.bmp,.dcm,.dicom" required style="width: 100%; padding: 8px; border: 1px solid #ddd; border-radius: 4px;">
+                            </div>
+                            
+                            <div style="margin-bottom: 15px;">
+                                <label for="image-type-select" style="display: block; margin-bottom: 5px; font-weight: 500;">영상 유형:</label>
+                                <select id="image-type-select" name="image_type" style="width: 100%; padding: 8px; border: 1px solid #ddd; border-radius: 4px;">
+                                    <option value="CXR">흉부 X-레이</option>
+                                    <option value="CT">CT</option>
+                                    <option value="OTHER">기타 의료 영상</option>
+                                </select>
+                            </div>
+                            
+                            <div style="margin-bottom: 15px;">
+                                <label for="context-input" style="display: block; margin-bottom: 5px; font-weight: 500;">추가 정보 (선택사항):</label>
+                                <textarea id="context-input" name="context" rows="3" placeholder="환자 증상이나 검사 목적 등을 입력하세요" style="width: 100%; padding: 8px; border: 1px solid #ddd; border-radius: 4px; resize: vertical;"></textarea>
+                            </div>
+                            
+                            <button type="submit" class="nav-button" style="width: 100%; padding: 12px; background-color: #4285f4; color: white; border: none; border-radius: 4px; font-size: 16px; cursor: pointer;">
+                                <span class="material-symbols-outlined" style="vertical-align: middle; margin-right: 5px;">upload</span>
+                                영상 분석하기
+                            </button>
+                        </form>
+                    </div>
+
             </div>
             <div class="nav-button nav-button-info" id="info-button">
                 <div class="nav-button-inner">
@@ -181,6 +210,105 @@
             </div>
         </div>
     </div>
+    
+    <script>
+    // 이미지 업로드 폼 처리
+    document.addEventListener('DOMContentLoaded', function() {
+        const uploadForm = document.getElementById('upload-form');
+        if (uploadForm) {
+            uploadForm.addEventListener('submit', async function(e) {
+                e.preventDefault();
+                
+                const formData = new FormData(this);
+                const submitButton = this.querySelector('button[type="submit"]');
+                const originalButtonText = submitButton.innerHTML;
+                
+                // 로딩 상태 표시
+                submitButton.disabled = true;
+                submitButton.innerHTML = '<span class="material-symbols-outlined" style="vertical-align: middle; margin-right: 5px;">hourglass_empty</span>분석 중...';
+                
+                // 기존 에러 메시지 제거
+                const errorDiv = document.getElementById('explanation-error');
+                if (errorDiv) {
+                    errorDiv.style.display = 'none';
+                    errorDiv.textContent = '';
+                }
+                
+                try {
+                    const response = await fetch('/upload_and_analyze', {
+                        method: 'POST',
+                        body: formData
+                    });
+                    
+                    const result = await response.json();
+                    
+                    if (response.ok) {
+                        // 업로드된 이미지 표시
+                        const fileInput = document.getElementById('image-upload');
+                        const file = fileInput.files[0];
+                        if (file) {
+                            const reader = new FileReader();
+                            reader.onload = function(e) {
+                                const reportImage = document.getElementById('report-image');
+                                if (reportImage) {
+                                    reportImage.src = e.target.result;
+                                    reportImage.style.display = 'block';
+                                }
+                            };
+                            reader.readAsDataURL(file);
+                        }
+                        
+                        // 분석 결과 표시
+                        const explanationContent = document.getElementById('explanation-content');
+                        if (explanationContent) {
+                            explanationContent.innerHTML = result.analysis.replace(/\n/g, '<br>');
+                        }
+                        
+                        // 보고서 텍스트 영역에 업로드 정보 표시
+                        const reportTextDisplay = document.getElementById('report-text-display');
+                        if (reportTextDisplay) {
+                            reportTextDisplay.innerHTML = '<div style="padding: 20px; background-color: #e8f4f8; border-radius: 8px;">' +
+                                '<h3 style="margin-top: 0;">업로드된 영상 분석</h3>' +
+                                '<p>파일명: ' + file.name + '</p>' +
+                                '<p>영상 유형: ' + document.getElementById('image-type-select').selectedOptions[0].text + '</p>' +
+                                (document.getElementById('context-input').value ? '<p>추가 정보: ' + document.getElementById('context-input').value + '</p>' : '') +
+                                '</div>';
+                        }
+                        
+                        // 설명 로딩 메시지 숨기기
+                        const explanationLoading = document.getElementById('explanation-loading');
+                        if (explanationLoading) {
+                            explanationLoading.style.display = 'none';
+                        }
+                        
+                        // 이미지 헤더 업데이트
+                        const imageHeader = document.getElementById('image-modality-header');
+                        if (imageHeader) {
+                            imageHeader.textContent = document.getElementById('image-type-select').selectedOptions[0].text;
+                        }
+                        
+                    } else {
+                        // 에러 표시
+                        if (errorDiv) {
+                            errorDiv.textContent = result.error || '분석 중 오류가 발생했습니다.';
+                            errorDiv.style.display = 'block';
+                        }
+                    }
+                } catch (error) {
+                    console.error('업로드 오류:', error);
+                    if (errorDiv) {
+                        errorDiv.textContent = '네트워크 오류가 발생했습니다. 다시 시도해주세요.';
+                        errorDiv.style.display = 'block';
+                    }
+                } finally {
+                    // 버튼 원래 상태로 복원
+                    submitButton.disabled = false;
+                    submitButton.innerHTML = originalButtonText;
+                }
+            });
+        }
+    });
+    </script>
 </body>
 
 </html>