Spaces:

ginipick
/

AI-BOOK

Paused

App Files Files Community

AI-BOOK / app.py

ginipick

Update app.py

31c4a0e verified 6 months ago

raw

history blame

2.87 kB

	# app.py
	from fastapi import FastAPI
	from fastapi.responses import HTMLResponse
	from fastapi.staticfiles import StaticFiles
	import pathlib, os, uvicorn

	BASE = pathlib.Path(__file__).parent

	app = FastAPI()

	# ── 정적 파일 (JS / CSS / 이미지 / MP3) 서빙 ──
	app.mount("/static", StaticFiles(directory=BASE), name="static")

	# ── index.html 원문 ──
	INDEX_HTML = """
	<!DOCTYPE html>
	<html lang="ko">
	<head>
	<meta charset="UTF-8">
	<title>FlipBook – 업로드 + 사운드</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/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;font-family:sans-serif;background:#f4f4f4}
	#viewer{width:900px;height:600px;margin:40px auto;background:#fff;border:1px solid #ccc}
	.upload-wrapper{display:flex;justify-content:center}
	#uploadBtn{all:unset;width:44px;height:44px;line-height:44px;text-align:center;
	font-size:26px;border-radius:50%;cursor:pointer;background:#ffb84d;color:#fff}
	#fileInput{display:none}
	</style>
	</head>
	<body>
	<h2 style="text-align:center">Real3D FlipBook – 업로드 ✨📖</h2>
	<div id="viewer"></div>
	<div class="upload-wrapper">
	<button id="uploadBtn" title="이미지 업로드">📷</button>
	<input id="fileInput" type="file" accept="image/*" multiple>
	</div>
	<script>
	let book=null, holder=document.getElementById('viewer');
	document.getElementById('uploadBtn').onclick=()=>document.getElementById('fileInput').click();
	document.getElementById('fileInput').onchange=e=>{
	if(!e.target.files.length) return;
	const files=[...e.target.files], pages=[], tot=files.length; let cnt=0;
	files.forEach((f,i)=>{const r=new FileReader();r.onload=x=>{
	pages[i]={src:x.target.result,thumb:x.target.result};
	if(++cnt===tot) makeBook(pages);
	};r.readAsDataURL(f);});
	};
	function makeBook(p){
	if(book){book.destroy();holder.innerHTML='';}
	book=new FlipBook(holder,{
	pages:p,viewMode:'webgl',autoSize:true,flipDuration:800,backgroundColor:'#fff',
	sound:true,assets:{flipMp3:'/static/turnPage2.mp3',hardFlipMp3:'/static/turnPage2.mp3'},
	controlsProps:{enableFullscreen:true,thumbnails:true}
	});
	}
	</script>
	</body></html>
	"""

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

	# ── Hugging Face가 ‘python app.py’ 로 실행할 때 직접 uvicorn을 띄움 ──
	if __name__ == "__main__":
	port = int(os.environ.get("PORT", 7860))
	uvicorn.run("app:app", host="0.0.0.0", port=port, reload=False)