Spaces:

ginipick
/

AI-BOOK

Paused

App Files Files Community

AI-BOOK / app-backup3.py

ginipick

Rename app.py to app-backup3.py

d5ebba7 verified 7 months ago

raw

history blame

20 kB

	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: 169%; /* 배경 이미지를 현재보다 30% 더 키움 (130% * 1.3 = 169%) */
	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:55%; /* 썸네일 크기 줄임 (배경이 커져서 비율 유지) */
	height:auto;
	object-fit:contain;
	position:absolute; /* 절대 위치로 변경 */
	top:50%; /* 상단에서 50% */
	left:50%; /* 좌측에서 50% */
	transform: translate(-50%, -70%); /* 정중앙에서 20% 위로 이동 */
	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;
	font-size: 11px; /* 기본 16px에서 약 30% 감소 */
	}
	button.upload{all:unset;cursor:pointer;border:1px solid #bbb;padding:8px 14px;border-radius:6px;background:#fff;margin:0 8px}
	#viewer{
	width:90%;
	height:90vh;
	max-width:90%;
	margin:0;
	background:#fff;
	border:1px solid #ddd;
	border-radius:8px;
	position:fixed;
	top:50%;
	left:50%;
	transform:translate(-50%, -50%);
	z-index:1000;
	box-shadow:0 4px 20px rgba(0,0,0,0.15);
	/* 화면 비율에 맞게 조정 */
	max-height: calc(90vh - 40px); /* 여백 고려 */
	aspect-ratio: auto; /* 비율 자동 조정 */
	object-fit: contain; /* 내용물 비율 유지 */
	overflow: hidden; /* 내용 넘침 방지 */
	}

	/* FlipBook 컨트롤바 관련 스타일 오버라이드 */
	.flipbook-container .fb3d-menu-bar {
	z-index: 2000 !important; /* 컨트롤바가 다른 요소보다 위에 오도록 함 */
	opacity: 1 !important; /* 항상 표시되도록 함 */
	bottom: 0 !important; /* 하단에 고정 */
	background-color: rgba(0,0,0,0.7) !important; /* 배경색 설정 */
	border-radius: 0 0 8px 8px !important; /* 하단 모서리만 둥글게 */
	padding: 8px 0 !important; /* 상하 패딩 추가 */
	}

	.flipbook-container .fb3d-menu-bar > ul > li > img,
	.flipbook-container .fb3d-menu-bar > ul > li > div {
	opacity: 1 !important; /* 메뉴 아이콘 항상 표시 */
	transform: scale(1.2) !important; /* 아이콘 크기 약간 키움 */
	}

	.flipbook-container .fb3d-menu-bar > ul > li {
	margin: 0 8px !important; /* 메뉴 아이템 간격 조정 */
	}

	/* 메뉴 툴팁 스타일 개선 */
	.flipbook-container .fb3d-menu-bar > ul > li > span {
	background-color: rgba(0,0,0,0.8) !important;
	color: white !important;
	border-radius: 4px !important;
	padding: 4px 8px !important;
	font-size: 12px !important;
	bottom: 45px !important; /* 툴팁 위치 조정 */
	}
	</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) {
	// 로딩 표시
	viewer.innerHTML = '<div style="position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);text-align:center;"><div style="border:4px solid #f3f3f3;border-top:4px solid #3498db;border-radius:50%;width:50px;height:50px;margin:0 auto;animation:spin 2s linear infinite;"></div><p style="margin-top:20px;font-size:16px;">PDF 로딩 중...</p></div>';

	// 스타일 추가
	if (!document.getElementById('loadingStyle')) {
	const style = document.createElement('style');
	style.id = 'loadingStyle';
	style.textContent = '@keyframes spin{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}';
	document.head.appendChild(style);
	}

	// 서버 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 = [];
	const progressElement = viewer.querySelector('p');

	for(let p = 1; p <= pdf.numPages; p++) {
	if (progressElement) {
	progressElement.textContent = `PDF 페이지 로딩 중... (${p}/${pdf.numPages})`;
	}

	try {
	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()});
	} catch (pageError) {
	console.error(`페이지 ${p} 렌더링 오류:`, pageError);
	}
	}

	console.log('모든 페이지 렌더링 완료:', pdfPages.length);

	if (pdfPages.length > 0) {
	createFlipBook(pdfPages);
	} else {
	throw new Error('PDF에서 페이지를 추출할 수 없습니다.');
	}
	})
	.catch(error => {
	console.error('PDF 처리 중 오류 발생:', error);
	viewer.innerHTML = `<div style="position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);text-align:center;"><p style="color:red;font-size:16px;">PDF를 로드하는 중 오류가 발생했습니다:<br>${error.message}</p><button id="backBtn" style="margin-top:20px;padding:10px 20px;background:#0077c2;color:white;border:none;border-radius:4px;cursor:pointer;">홈으로 돌아가기</button></div>`;

	document.getElementById('backBtn').addEventListener('click', function() {
	toggle(true);
	});
	});
	} else {
	// 업로드된 프로젝트 보기
	console.log('로컬 업로드된 프로젝트 렌더링:', pages.length + '페이지');
	createFlipBook(pages);
	}
	}

	function createFlipBook(pages) {
	console.log('FlipBook 생성 시작. 페이지 수:', pages.length);

	try {
	// 화면 비율 계산
	const calculateAspectRatio = () => {
	const windowWidth = window.innerWidth;
	const windowHeight = window.innerHeight;
	const aspectRatio = windowWidth / windowHeight;

	// 너비 또는 높이 기준으로 최대 90% 제한
	let width, height;
	if (aspectRatio > 1) { // 가로 화면
	height = Math.min(windowHeight * 0.9, windowHeight - 40);
	width = height * aspectRatio * 0.8; // 가로 화면에서는 약간 줄임
	if (width > windowWidth * 0.9) {
	width = windowWidth * 0.9;
	height = width / (aspectRatio * 0.8);
	}
	} else { // 세로 화면
	width = Math.min(windowWidth * 0.9, windowWidth - 40);
	height = width / aspectRatio * 0.9; // 세로 화면에서는 약간 늘림
	if (height > windowHeight * 0.9) {
	height = windowHeight * 0.9;
	width = height * aspectRatio * 0.9;
	}
	}

	// 최적 사이즈 반환
	return {
	width: Math.round(width),
	height: Math.round(height)
	};
	};

	// 초기 화면 비율 계산
	const size = calculateAspectRatio();
	viewer.style.width = size.width + 'px';
	viewer.style.height = size.height + 'px';

	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,
	enableToc: true,
	enableDownload: false,
	enablePrint: false,
	enableZoom: true,
	enableShare: false,
	enableSearch: true,
	enableAutoPlay: true,
	enableAnnotation: false,
	enableSound: true,
	enableLightbox: false,
	layout: 10, // 레이아웃 옵션
	skin: 'light', // 스킨 스타일
	autoNavigationTime: 3600, // 자동 넘김 시간(초)
	hideControls: false, // 컨트롤 숨김 비활성화
	paddingTop: 10, // 상단 패딩
	paddingLeft: 10, // 좌측 패딩
	paddingRight: 10, // 우측 패딩
	paddingBottom: 10, // 하단 패딩
	pageTextureSize: 1024, // 페이지 텍스처 크기
	thumbnails: true, // 섬네일 활성화
	autoHideControls: false, // 자동 숨김 비활성화
	controlsTimeout: 8000 // 컨트롤 표시 시간 연장
	}
	});

	// 화면 크기 변경 시 FlipBook 크기 조정
	window.addEventListener('resize', () => {
	if (fb) {
	const newSize = calculateAspectRatio();
	viewer.style.width = newSize.width + 'px';
	viewer.style.height = newSize.height + 'px';
	fb.resize();
	}
	});

	// FlipBook 생성 후 컨트롤바 강제 표시
	setTimeout(() => {
	try {
	// 컨트롤바 관련 요소 찾기 및 스타일 적용
	const menuBars = document.querySelectorAll('.flipbook-container .fb3d-menu-bar');
	if (menuBars && menuBars.length > 0) {
	menuBars.forEach(menuBar => {
	menuBar.style.display = 'block';
	menuBar.style.opacity = '1';
	menuBar.style.visibility = 'visible';
	menuBar.style.zIndex = '9999';
	});
	}
	} catch (e) {
	console.warn('컨트롤바 스타일 적용 중 오류:', e);
	}
	}, 1000);

	console.log('FlipBook 생성 완료');
	} catch (error) {
	console.error('FlipBook 생성 중 오류 발생:', error);
	alert('FlipBook을 생성하는 중 오류가 발생했습니다: ' + error.message);
	}
	}

	/* ── 네비게이션 ── */
	$id('homeBtn').onclick=()=>{
	if(fb) {
	fb.destroy();
	viewer.innerHTML = '';
	fb = null;
	}
	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';

	// 추가: 전체 화면 모드에서 homeBtn 위치 조정
	if(!showHome) {
	$id('homeBtn').style.position = 'fixed';
	$id('homeBtn').style.top = '20px';
	$id('homeBtn').style.left = '20px';
	$id('homeBtn').style.zIndex = '9999'; // 최상위 z-index로 변경
	$id('homeBtn').style.fontSize = '24px'; // 크기 증가
	$id('homeBtn').style.width = '48px';
	$id('homeBtn').style.height = '48px';
	$id('homeBtn').style.boxShadow = '0 2px 10px rgba(0,0,0,0.2)'; // 그림자 추가

	// 배경 오버레이 추가
	document.body.style.backgroundColor = '#3a3a3a';
	} else {
	$id('homeBtn').style.position = '';
	$id('homeBtn').style.top = '';
	$id('homeBtn').style.left = '';
	$id('homeBtn').style.zIndex = '';
	$id('homeBtn').style.fontSize = '';
	$id('homeBtn').style.width = '';
	$id('homeBtn').style.height = '';
	$id('homeBtn').style.boxShadow = '';

	// 배경 원래대로
	document.body.style.backgroundColor = '#f0f0f0';
	}
	}

	// 페이지 로드 시 서버 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()

	# 파일명 처리 - URL 인코딩으로 한글 등 특수 문자 처리
	import urllib.parse
	filename = pdf_path.name
	encoded_filename = urllib.parse.quote(filename)

	# 응답 헤더 설정 - RFC 6266 표준 사용
	headers = {
	"Content-Type": "application/pdf",
	"Content-Disposition": f"inline; filename=\"{encoded_filename}\"; filename*=UTF-8''{encoded_filename}"
	}

	# 파일 콘텐츠 직접 반환 (dict가 아닌 Response 객체)
	from fastapi.responses import Response
	return Response(content=content, media_type="application/pdf")
	except Exception as e:
	import traceback
	error_details = traceback.format_exc()
	print(f"PDF 콘텐츠 로드 오류: {str(e)}\n{error_details}")

	# 오류 응답 반환 (JSON 형식)
	from fastapi.responses import JSONResponse
	return JSONResponse(content={"error": str(e)}, status_code=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)))