Initial commit: HanSoo Office Editor with FastAPI backend

README.md

@@ -0,0 +1,37 @@
+# HanSoo Office Editor
+
+HWP · DOCX · XLSX · PPTX · PDF 파일을 브라우저에서 업로드하고 처리할 수 있는 오피스 에디터.
+
+## 기능
+
+- **다양한 파일 형식 지원**: HWP, HWPX, DOCX, XLSX, PPTX, PDF, TXT, CSV, JSON
+- **드래그 앤 드롭 업로드**: 직관적인 파일 업로드 인터페이스
+- **텍스트 추출**: 파일에서 텍스트 내용 추출
+- **FAST API 백엔드**: 빠른 파일 처리
+
+## 기술 스택
+
+- **백엔드**: FastAPI, Uvicorn
+- **프론트엔드**: HTML5, CSS3, Vanilla JavaScript
+- **배포**: HuggingFace Spaces
+
+## 로컬 실행
+
+```bash
+pip install -r requirements.txt
+python app.py
+```
+
+브라우저에서 `http://localhost:7860` 접속
+
+## API 엔드포인트
+
+- `GET /` - 메인 페이지
+- `GET /health` - 헬스 체크
+- `POST /api/upload` - 파일 업로드
+- `GET /api/files/{file_id}` - 파일 정보 조회
+- `POST /api/process` - 파일 처리 (추출, 변환)
+
+## 라이선스
+
+MIT License

app.py

@@ -0,0 +1,132 @@
+import os
+import json
+from fastapi import FastAPI, UploadFile, File, HTTPException, Form
+from fastapi.staticfiles import StaticFiles
+from fastapi.responses import FileResponse, JSONResponse
+from fastapi.middleware.cors import CORSMiddleware
+from pathlib import Path
+import shutil
+import uuid
+
+app = FastAPI(title="HanSoo Office Editor", version="1.0.0")
+
+# CORS 설정
+app.add_middleware(
+    CORSMiddleware,
+    allow_origins=["*"],
+    allow_credentials=True,
+    allow_methods=["*"],
+    allow_headers=["*"],
+)
+
+# 업로드 디렉토리
+UPLOAD_DIR = Path("/tmp/hansoo_uploads")
+UPLOAD_DIR.mkdir(parents=True, exist_ok=True)
+
+# 정적 파일 제공
+app.mount("/static", StaticFiles(directory="static"), name="static")
+
+
+@app.get("/")
+def read_root():
+    """인덱스 페이지 제공"""
+    return FileResponse("index.html")
+
+
+@app.get("/health")
+def health_check():
+    """헬스 체크 엔드포인트"""
+    return {"status": "healthy", "service": "HanSoo Office Editor"}
+
+
+@app.post("/api/upload")
+async def upload_file(file: UploadFile = File(...)):
+    """파일 업로드 엔드포인트"""
+    try:
+        file_id = str(uuid.uuid4())
+        file_path = UPLOAD_DIR / f"{file_id}_{file.filename}"
+        
+        with open(file_path, "wb") as buffer:
+            shutil.copyfileobj(file.file, buffer)
+        
+        return {
+            "success": True,
+            "file_id": file_id,
+            "filename": file.filename,
+            "size": file_path.stat().st_size,
+            "content_type": file.content_type
+        }
+    except Exception as e:
+        raise HTTPException(status_code=500, detail=str(e))
+
+
+@app.get("/api/files/{file_id}")
+async def get_file(file_id: str):
+    """업로드된 파일 정보 조회"""
+    files = list(UPLOAD_DIR.glob(f"{file_id}_*"))
+    if not files:
+        raise HTTPException(status_code=404, detail="File not found")
+    
+    file_path = files[0]
+    return {
+        "file_id": file_id,
+        "filename": file_path.name.replace(f"{file_id}_", ""),
+        "size": file_path.stat().st_size
+    }
+
+
+@app.post("/api/process")
+async def process_file(
+    file_id: str = Form(...),
+    operation: str = Form("extract")
+):
+    """파일 처리 엔드포인트 (추출, 변환 등)"""
+    files = list(UPLOAD_DIR.glob(f"{file_id}_*"))
+    if not files:
+        raise HTTPException(status_code=404, detail="File not found")
+    
+    file_path = files[0]
+    
+    try:
+        if operation == "extract":
+            # 텍스트 추출 로직 (확장자에 따라 처리)
+            content = extract_text(file_path)
+            return {"success": True, "content": content}
+        elif operation == "convert":
+            # 변환 로직
+            return {"success": True, "message": "Conversion completed"}
+        else:
+            raise HTTPException(status_code=400, detail="Unknown operation")
+    except Exception as e:
+        raise HTTPException(status_code=500, detail=str(e))
+
+
+def extract_text(file_path: Path) -> str:
+    """파일에서 텍스트 추출"""
+    suffix = file_path.suffix.lower()
+    
+    if suffix in [".txt", ".md", ".json", ".csv"]:
+        return file_path.read_text(encoding="utf-8")
+    elif suffix == ".pdf":
+        # PDF 텍스트 추출 (PyPDF2 또는 pdfplumber 필요)
+        return "PDF text extraction requires additional dependencies"
+    elif suffix in [".docx", ".xlsx", ".pptx"]:
+        return "Office file extraction requires python-docx/openpyxl/python-pptx"
+    elif suffix in [".hwp", ".hwpx"]:
+        return "HWP extraction requires rhwp or pyhwp"
+    else:
+        return "Unsupported file format"
+
+
+@app.on_event("shutdown")
+def cleanup():
+    """서버 종료 시 업로드 디렉토리 정리"""
+    try:
+        shutil.rmtree(UPLOAD_DIR)
+    except:
+        pass
+
+
+if __name__ == "__main__":
+    import uvicorn
+    uvicorn.run(app, host="0.0.0.0", port=int(os.getenv("PORT", 7860)))

index.html

@@ -0,0 +1,203 @@
+<!DOCTYPE html>
+<html lang="ko">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>HanSoo Office Editor</title>
+    <style>
+        * { margin: 0; padding: 0; box-sizing: border-box; }
+        body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; background: #f5f5f5; min-height: 100vh; }
+        .container { max-width: 1200px; margin: 0 auto; padding: 20px; }
+        header { background: #fff; padding: 20px; border-radius: 12px; margin-bottom: 20px; box-shadow: 0 2px 8px rgba(0,0,0,0.1); }
+        h1 { color: #333; font-size: 24px; margin-bottom: 8px; }
+        .subtitle { color: #666; font-size: 14px; }
+        .upload-area { background: #fff; padding: 40px; border-radius: 12px; border: 2px dashed #ddd; text-align: center; cursor: pointer; transition: all 0.3s; }
+        .upload-area:hover { border-color: #4CAF50; background: #f9fff9; }
+        .upload-area.dragover { border-color: #4CAF50; background: #e8f5e9; }
+        .upload-icon { font-size: 48px; margin-bottom: 16px; }
+        .upload-text { color: #666; font-size: 16px; margin-bottom: 8px; }
+        .upload-hint { color: #999; font-size: 12px; }
+        .file-list { background: #fff; padding: 20px; border-radius: 12px; margin-top: 20px; box-shadow: 0 2px 8px rgba(0,0,0,0.1); }
+        .file-item { display: flex; align-items: center; padding: 12px; border-bottom: 1px solid #eee; }
+        .file-item:last-child { border-bottom: none; }
+        .file-name { flex: 1; color: #333; }
+        .file-size { color: #999; font-size: 12px; margin-right: 16px; }
+        .file-actions { display: flex; gap: 8px; }
+        .btn { padding: 8px 16px; border: none; border-radius: 6px; cursor: pointer; font-size: 14px; transition: all 0.2s; }
+        .btn-primary { background: #4CAF50; color: #fff; }
+        .btn-primary:hover { background: #45a049; }
+        .btn-secondary { background: #e0e0e0; color: #333; }
+        .btn-secondary:hover { background: #d0d0d0; }
+        .btn-danger { background: #f44336; color: #fff; }
+        .btn-danger:hover { background: #da190b; }
+        .status { padding: 12px; border-radius: 6px; margin-top: 16px; display: none; }
+        .status.success { background: #e8f5e9; color: #2e7d32; display: block; }
+        .status.error { background: #ffebee; color: #c62828; display: block; }
+        .supported-formats { margin-top: 20px; padding: 16px; background: #fff3e0; border-radius: 8px; }
+        .supported-formats h3 { font-size: 14px; color: #e65100; margin-bottom: 8px; }
+        .supported-formats p { font-size: 12px; color: #666; }
+        #fileInput { display: none; }
+    </style>
+</head>
+<body>
+    <div class="container">
+        <header>
+            <h1>HanSoo Office Editor</h1>
+            <p class="subtitle">HWP · DOCX · XLSX · PPTX · PDF 파일 업로드 및 처리</p>
+        </header>
+
+        <div class="upload-area" id="uploadArea">
+            <div class="upload-icon">📁</div>
+            <div class="upload-text">파일을 드래그하거나 클릭하여 업로드</div>
+            <div class="upload-hint">최대 50MB 지원</div>
+            <input type="file" id="fileInput" multiple>
+        </div>
+
+        <div class="supported-formats">
+            <h3>지원하는 파일 형식</h3>
+            <p>HWP, HWPX, DOCX, XLSX, PPTX, PDF, TXT, CSV, JSON</p>
+        </div>
+
+        <div class="file-list" id="fileList" style="display: none;">
+            <h2 style="margin-bottom: 16px; font-size: 18px;">업로드된 파일</h2>
+            <div id="fileItems"></div>
+        </div>
+
+        <div class="status" id="status"></div>
+    </div>
+
+    <script>
+        const uploadArea = document.getElementById('uploadArea');
+        const fileInput = document.getElementById('fileInput');
+        const fileList = document.getElementById('fileList');
+        const fileItems = document.getElementById('fileItems');
+        const status = document.getElementById('status');
+
+        let uploadedFiles = [];
+
+        // 드래그 앤 드롭
+        uploadArea.addEventListener('dragover', (e) => {
+            e.preventDefault();
+            uploadArea.classList.add('dragover');
+        });
+
+        uploadArea.addEventListener('dragleave', () => {
+            uploadArea.classList.remove('dragover');
+        });
+
+        uploadArea.addEventListener('drop', (e) => {
+            e.preventDefault();
+            uploadArea.classList.remove('dragover');
+            handleFiles(e.dataTransfer.files);
+        });
+
+        // 클릭 업로드
+        uploadArea.addEventListener('click', () => fileInput.click());
+        fileInput.addEventListener('change', (e) => handleFiles(e.target.files));
+
+        async function handleFiles(files) {
+            for (const file of files) {
+                await uploadFile(file);
+            }
+        }
+
+        async function uploadFile(file) {
+            showStatus('업로드 중...', 'info');
+
+            const formData = new FormData();
+            formData.append('file', file);
+
+            try {
+                const response = await fetch('/api/upload', {
+                    method: 'POST',
+                    body: formData
+                });
+
+                const data = await response.json();
+
+                if (data.success) {
+                    uploadedFiles.push({
+                        file_id: data.file_id,
+                        filename: data.filename,
+                        size: data.size
+                    });
+                    renderFileList();
+                    showStatus(`"${data.filename}" 업로드 완료`, 'success');
+                } else {
+                    showStatus('업로드 실패', 'error');
+                }
+            } catch (error) {
+                showStatus(`오류: ${error.message}`, 'error');
+            }
+        }
+
+        function renderFileList() {
+            if (uploadedFiles.length > 0) {
+                fileList.style.display = 'block';
+                fileItems.innerHTML = uploadedFiles.map(f => `
+                    <div class="file-item">
+                        <span class="file-name">${escapeHtml(f.filename)}</span>
+                        <span class="file-size">${formatSize(f.size)}</span>
+                        <div class="file-actions">
+                            <button class="btn btn-primary" onclick="processFile('${f.file_id}', 'extract')">추출</button>
+                            <button class="btn btn-danger" onclick="deleteFile('${f.file_id}')">삭제</button>
+                        </div>
+                    </div>
+                `).join('');
+            }
+        }
+
+        async function processFile(fileId, operation) {
+            showStatus('처리 중...', 'info');
+
+            const formData = new FormData();
+            formData.append('file_id', fileId);
+            formData.append('operation', operation);
+
+            try {
+                const response = await fetch('/api/process', {
+                    method: 'POST',
+                    body: formData
+                });
+
+                const data = await response.json();
+
+                if (data.success) {
+                    showStatus('처리 완료', 'success');
+                    console.log(data);
+                } else {
+                    showStatus('처리 실패', 'error');
+                }
+            } catch (error) {
+                showStatus(`오류: ${error.message}`, 'error');
+            }
+        }
+
+        async function deleteFile(fileId) {
+            uploadedFiles = uploadedFiles.filter(f => f.file_id !== fileId);
+            renderFileList();
+            if (uploadedFiles.length > 0) {
+                showStatus('파일 삭제 완료', 'success');
+            }
+        }
+
+        function showStatus(message, type) {
+            status.textContent = message;
+            status.className = `status ${type}`;
+            setTimeout(() => { status.className = 'status'; }, 3000);
+        }
+
+        function formatSize(bytes) {
+            if (bytes < 1024) return bytes + ' B';
+            if (bytes < 1024 * 1024) return (bytes / 1024).toFixed(1) + ' KB';
+            return (bytes / (1024 * 1024)).toFixed(1) + ' MB';
+        }
+
+        function escapeHtml(text) {
+            const div = document.createElement('div');
+            div.textContent = text;
+            return div.innerHTML;
+        }
+    </script>
+</body>
+</html>

requirements.txt

@@ -0,0 +1,4 @@
+fastapi>=0.115.0
+uvicorn[standard]>=0.34.0
+python-multipart>=0.0.19
+aiofiles>=24.1.0