Spaces:

ginipick
/

AI-BOOK

Running on CPU Upgrade

File size: 12,191 Bytes

from fastapi import FastAPI
from fastapi.responses import HTMLResponse
from fastapi.staticfiles import StaticFiles
import pathlib, os, uvicorn, base64

BASE = pathlib.Path(__file__).parent
app = FastAPI()
app.mount("/static", StaticFiles(directory=BASE), name="static")

# PDF 디렉토리 설정
PDF_DIR = BASE / "pdf"
if not PDF_DIR.exists():
    PDF_DIR.mkdir(parents=True)

# PDF 파일 목록 가져오기
def get_pdf_files():
    pdf_files = []
    if PDF_DIR.exists():
        pdf_files = [f for f in PDF_DIR.glob("*.pdf")]
    return pdf_files

# PDF 썸네일 생성 및 프로젝트 데이터 준비
def generate_pdf_projects():
    projects_data = []
    pdf_files = get_pdf_files()
    
    for pdf_file in pdf_files:
        projects_data.append({
            "path": str(pdf_file),
            "name": pdf_file.stem
        })
    
    return projects_data

HTML = """
<!doctype html><html lang="ko"><head>
<meta charset="utf-8"><title>FlipBook Space</title>
<link rel="stylesheet" href="/static/flipbook.css">
<script src="/static/three.js"></script>
<script src="/static/iscroll.js"></script>
<script src="/static/mark.js"></script>
<script src="/static/mod3d.js"></script>
<script src="/static/pdf.js"></script>
<script src="/static/flipbook.js"></script>
<script src="/static/flipbook.book3.js"></script>
<script src="/static/flipbook.scroll.js"></script>
<script src="/static/flipbook.swipe.js"></script>
<script src="/static/flipbook.webgl.js"></script>
<style>
body{margin:0;background:#f0f0f0;font-family:sans-serif}
header{max-width:960px;margin:0 auto;padding:18px 20px;display:flex;align-items:center}
#homeBtn{display:none;width:38px;height:38px;border:none;border-radius:50%;cursor:pointer;
         background:#0077c2;color:#fff;font-size:20px;margin-right:12px}
#homeBtn:hover{background:#005999}
h2{margin:0;font-size:1.5rem;font-weight:600}
#home,#viewerPage{max-width:960px;margin:0 auto;padding:0 20px 40px}
.grid{display:grid;grid-template-columns:repeat(auto-fill,180px);gap:16px;margin-top:24px}
.card{
  background:#fff url('/static/book2.jpg') no-repeat center center;
  background-size: 130%;  /* 배경 이미지 30% 확대 */
  border:1px solid #ccc;
  border-radius:6px;
  cursor:pointer;
  box-shadow:0 2px 4px rgba(0,0,0,.12);
  width: 180px;
  height: 240px;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.card img{
  width:65%;  /* 썸네일 크기 조정 */
  height:auto;
  object-fit:contain;
  position:absolute;  /* 절대 위치로 변경 */
  top:50%;  /* 상단에서 50% */
  left:50%;  /* 좌측에서 50% */
  transform: translate(-50%, -50%);  /* 정중앙 배치 */
  border: 1px solid #ddd;
  box-shadow: 0 2px 5px rgba(0,0,0,0.2);
}
.card p{
  text-align:center;
  margin:6px 0;
  position: absolute;
  bottom: 10px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(255, 255, 255, 0.7);
  padding: 4px 8px;
  border-radius: 4px;
  width: 85%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 150px;
}
button.upload{all:unset;cursor:pointer;border:1px solid #bbb;padding:8px 14px;border-radius:6px;background:#fff;margin:0 8px}
#viewer{
  width:100%;
  height:100vh; /* 전체 화면 높이로 확장 */
  max-width:100%; /* 최대 너비 제한 해제 */
  margin:0; /* 마진 제거 */
  background:#fff;
  border:none; /* 테두리 제거 */
  position:fixed; /* 고정 위치 */
  top:0;
  left:0;
  z-index:1000; /* 최상위 표시 */
}
</style></head><body>

<header>
  <button id="homeBtn" title="홈으로">⌂</button>
  <h2>My FlipBook Projects</h2>
</header>

<section id="home">
  <div>
    <label class="upload">📷 이미지 <input id="imgInput" type="file" accept="image/*" multiple hidden></label>
    <label class="upload">📄 PDF <input id="pdfInput" type="file" accept="application/pdf" hidden></label>
  </div>
  <div class="grid" id="grid"></div>
</section>

<section id="viewerPage" style="display:none">
  <div id="viewer"></div>
</section>

<script>
let projects=[], fb=null;
const grid=$id('grid'), viewer=$id('viewer');
pdfjsLib.GlobalWorkerOptions.workerSrc='/static/pdf.worker.js';

// 서버에서 미리 로드된 PDF 프로젝트
let serverProjects = [];

/* 🔊 오디오 unlock – 내장 Audio 와 같은 MP3 경로 사용 */
['click','touchstart'].forEach(evt=>{
  document.addEventListener(evt,function u(){new Audio('static/turnPage2.mp3')
        .play().then(a=>a.pause()).catch(()=>{});document.removeEventListener(evt,u,{capture:true});},
        {once:true,capture:true});
});

/* ── 유틸 ── */
function $id(id){return document.getElementById(id)}
function addCard(i,thumb,title){
  const d=document.createElement('div');
  d.className='card';
  d.onclick=()=>open(i);
  
  // 제목 10글자 제한 및 말줄임표 처리
  const displayTitle = title ? 
    (title.length > 10 ? title.substring(0, 10) + '...' : title) : 
    '프로젝트 ' + (i+1);
  
  d.innerHTML=`<img src="${thumb}"><p title="${title || '프로젝트 ' + (i+1)}">${displayTitle}</p>`;
  grid.appendChild(d);
}

/* ── 이미지 업로드 ── */
$id('imgInput').onchange=e=>{
  const files=[...e.target.files]; if(!files.length) return;
  const pages=[],tot=files.length;let done=0;
  files.forEach((f,i)=>{const r=new FileReader();r.onload=x=>{pages[i]={src:x.target.result,thumb:x.target.result};
      if(++done===tot) save(pages);};r.readAsDataURL(f);});
};

/* ── PDF 업로드 ── */
$id('pdfInput').onchange=e=>{
  const file=e.target.files[0]; if(!file) return;
  const fr=new FileReader();
  fr.onload=v=>{
    pdfjsLib.getDocument({data:v.target.result}).promise.then(async pdf=>{
      const pages=[];
      for(let p=1;p<=pdf.numPages;p++){
        const pg=await pdf.getPage(p), vp=pg.getViewport({scale:1});
        const c=document.createElement('canvas');c.width=vp.width;c.height=vp.height;
        await pg.render({canvasContext:c.getContext('2d'),viewport:vp}).promise;
        pages.push({src:c.toDataURL(),thumb:c.toDataURL()});
      }
      save(pages, file.name.replace('.pdf', ''));
    });
  };fr.readAsArrayBuffer(file);
};

/* ── 프로젝트 저장 ── */
function save(pages, title){
  const id=projects.push(pages)-1;
  addCard(id,pages[0].thumb, title);
}

/* ── 서버 PDF 로드 ── */
async function loadServerPDFs() {
  try {
    const response = await fetch('/api/pdf-projects');
    serverProjects = await response.json();
    
    // 서버 PDF 로드 및 썸네일 생성
    for(let i = 0; i < serverProjects.length; i++) {
      const project = serverProjects[i];
      const response = await fetch(`/api/pdf-thumbnail?path=${encodeURIComponent(project.path)}`);
      const data = await response.json();
      
      if(data.thumbnail) {
        const pages = [{
          src: data.thumbnail,
          thumb: data.thumbnail,
          path: project.path
        }];
        
        save(pages, project.name);
      }
    }
  } catch(error) {
    console.error('서버 PDF 로드 실패:', error);
  }
}

/* ── 카드 → FlipBook ── */
function open(i){
  toggle(false);
  const pages = projects[i];
  
  // 로컬 프로젝트 또는 서버 PDF 로드
  if(fb){fb.destroy();viewer.innerHTML='';}
  
  if(pages[0].path) {
    // 서버 PDF 파일 로드
    fetch(`/api/pdf-content?path=${encodeURIComponent(pages[0].path)}`)
      .then(response => {
        if (!response.ok) {
          throw new Error('PDF 로드 실패: ' + response.statusText);
        }
        return response.arrayBuffer();
      })
      .then(pdfData => {
        // PDF 데이터 로드 확인 로깅
        console.log('PDF 데이터 로드 완료:', pdfData.byteLength + ' 바이트');
        
        return pdfjsLib.getDocument({data: pdfData}).promise;
      })
      .then(async pdf => {
        console.log('PDF 문서 로드 완료. 페이지 수:', pdf.numPages);
        
        const pdfPages = [];
        for(let p = 1; p <= pdf.numPages; p++) {
          console.log('페이지 렌더링 중:', p + '/' + pdf.numPages);
          
          const pg = await pdf.getPage(p);
          const vp = pg.getViewport({scale: 1});
          const c = document.createElement('canvas');
          c.width = vp.width;
          c.height = vp.height;
          
          await pg.render({canvasContext: c.getContext('2d'), viewport: vp}).promise;
          pdfPages.push({src: c.toDataURL(), thumb: c.toDataURL()});
        }
        
        console.log('모든 페이지 렌더링 완료:', pdfPages.length);
        createFlipBook(pdfPages);
      })
      .catch(error => {
        console.error('PDF 처리 중 오류 발생:', error);
        alert('PDF를 로드하는 중 오류가 발생했습니다: ' + error.message);
      });
  } else {
    // 업로드된 프로젝트 보기
    console.log('로컬 업로드된 프로젝트 렌더링:', pages.length + '페이지');
    createFlipBook(pages);
  }
}

function createFlipBook(pages) {
  console.log('FlipBook 생성 시작. 페이지 수:', pages.length);
  
  try {
    fb = new FlipBook(viewer, {
      pages: pages,
      viewMode: 'webgl',
      autoSize: true,
      flipDuration: 800,
      backgroundColor: '#fff',
      /* 🔊 내장 사운드 */
      sound: true,
      assets: {flipMp3: 'static/turnPage2.mp3', hardFlipMp3: 'static/turnPage2.mp3'},
      controlsProps: {enableFullscreen: true, thumbnails: true}
    });
    
    console.log('FlipBook 생성 완료');
  } catch (error) {
    console.error('FlipBook 생성 중 오류 발생:', error);
    alert('FlipBook을 생성하는 중 오류가 발생했습니다: ' + error.message);
  }
}

/* ── 네비게이션 ── */
$id('homeBtn').onclick=()=>toggle(true);
function toggle(showHome){
  $id('home').style.display=showHome?'block':'none';
  $id('viewerPage').style.display=showHome?'none':'block';
  $id('homeBtn').style.display=showHome?'none':'inline-block';
}

// 페이지 로드 시 서버 PDF 로드
window.addEventListener('DOMContentLoaded', loadServerPDFs);
</script>
</body></html>
"""

# API 엔드포인트: PDF 프로젝트 목록
@app.get("/api/pdf-projects")
async def get_pdf_projects():
    return generate_pdf_projects()

# API 엔드포인트: PDF 썸네일 생성
@app.get("/api/pdf-thumbnail")
async def get_pdf_thumbnail(path: str):
    try:
        import fitz  # PyMuPDF
        
        # PDF 파일 열기
        doc = fitz.open(path)
        
        # 첫 페이지 가져오기
        if doc.page_count > 0:
            page = doc[0]
            # 썸네일용 이미지 렌더링 (해상도 조정)
            pix = page.get_pixmap(matrix=fitz.Matrix(0.5, 0.5))
            img_data = pix.tobytes("png")
            
            # Base64 인코딩
            b64_img = base64.b64encode(img_data).decode('utf-8')
            return {"thumbnail": f"data:image/png;base64,{b64_img}"}
        
        return {"thumbnail": None}
    except Exception as e:
        return {"error": str(e), "thumbnail": None}

@app.get("/api/pdf-content")
async def get_pdf_content(path: str):
    try:
        # 파일 존재 여부 확인
        pdf_path = pathlib.Path(path)
        if not pdf_path.exists():
            return {"error": f"파일을 찾을 수 없습니다: {path}"}, 404

        # 파일 읽기
        with open(path, "rb") as pdf_file:
            content = pdf_file.read()
            
        # 응답 헤더 설정 - PDF 파일임을 명시
        headers = {
            "Content-Type": "application/pdf",
            "Content-Disposition": f"inline; filename={pdf_path.name}"
        }
        
        # 파일 콘텐츠 반환
        from fastapi.responses import Response
        return Response(content=content, headers=headers)
    except Exception as e:
        import traceback
        error_details = traceback.format_exc()
        print(f"PDF 콘텐츠 로드 오류: {str(e)}\n{error_details}")
        return {"error": str(e)}, 500

@app.get("/", response_class=HTMLResponse)
async def root():
    return HTML

if __name__ == "__main__":
    uvicorn.run("app:app", host="0.0.0.0", port=int(os.getenv("PORT", 7860)))