Spaces:
Running
on
CPU Upgrade
Running
on
CPU Upgrade
| # app.py | |
| # | |
| # Hugging Face Spaces β Build type: "FastAPI" (Python) | |
| # μ€ν μ http://<space-url>/ λ‘ μ μνλ©΄ FlipBook UIκ° νμλ©λλ€. | |
| from fastapi import FastAPI | |
| from fastapi.responses import HTMLResponse | |
| from fastapi.staticfiles import StaticFiles | |
| import pathlib | |
| BASE = pathlib.Path(__file__).parent | |
| app = FastAPI() | |
| # ββ 1. κ°μ ν΄λμ μ μ νμΌ(jsβ/βcssβ/βimgβ/βmp3 λ±)μ /static κ²½λ‘λ‘ μλΉ | |
| app.mount("/static", StaticFiles(directory=BASE), name="static") | |
| # ββ 2. index.html μμ€ (script/link κ²½λ‘λ§ /static/ λ‘ λ°κΏ) | |
| INDEX_HTML = """ | |
| <!DOCTYPE html> | |
| <html lang="ko"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <title>FlipBook β μ λ‘λ + λ΄μ₯ μ¬μ΄λ</title> | |
| <link rel="stylesheet" href="/static/flipbook.css"> | |
| <!-- νμ JS μμ --> | |
| <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} | |
| h1{text-align:center;margin:24px 0} | |
| #viewer{width:900px;height:600px;margin:0 auto 40px;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;box-shadow:0 2px 4px rgba(0,0,0,.2);transition:.2s; | |
| } | |
| #uploadBtn:hover{transform:translateY(-2px);box-shadow:0 4px 8px rgba(0,0,0,.25)} | |
| #fileInput{display:none} | |
| </style> | |
| </head> | |
| <body> | |
| <h1>Real3D FlipBook β μ΄λ―Έμ§ μ λ‘λ + μ¬μ΄λ β¨</h1> | |
| <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; | |
| const 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]; | |
| const pages=[]; | |
| let done=0; | |
| files.forEach((f,i)=>{ | |
| const rd=new FileReader(); | |
| rd.onload=ev=>{ | |
| pages[i]={src:ev.target.result,thumb:ev.target.result}; | |
| if(++done===files.length) createBook(pages); | |
| }; | |
| rd.readAsDataURL(f); | |
| }); | |
| }; | |
| function createBook(pages){ | |
| if(book){ book.destroy(); holder.innerHTML=''; } | |
| book=new FlipBook(holder,{ | |
| pages, | |
| viewMode:'webgl', | |
| autoSize:true, | |
| flipDuration:800, | |
| backgroundColor:'#ffffff', | |
| sound:true, | |
| assets:{ | |
| flipMp3:'/static/turnPage2.mp3', | |
| hardFlipMp3:'/static/turnPage2.mp3' | |
| }, | |
| controlsProps:{enableFullscreen:true,thumbnails:true} | |
| }); | |
| } | |
| </script> | |
| </body> | |
| </html> | |
| """ | |
| # ββ 3. λΌμ°ν°: GET / β index.html λ°ν | |
| async def root(): | |
| return INDEX_HTML | |