Spaces:

mnhkahn
/

mo-ocr

Running

App Files Files Community

mnhkahn commited on Mar 21

Commit

574ec98

1 Parent(s): 87ab1fd

refactor(static): 简化index.html结构并改用iframe加载OCR页面

Browse files

将静态页面从完整样式实现改为使用iframe加载外部OCR页面
移除原有样式和脚本逻辑，仅保留基本结构和版权信息

Files changed (2) hide show

app.py +5 -5
static/index.html +21 -226

app.py CHANGED Viewed

@@ -281,11 +281,6 @@ async def debug_upload(request: Request, file: UploadFile = File(...)):
         raise HTTPException(status_code=500, detail=str(e))
-from fastapi.staticfiles import StaticFiles
-app.mount("/", StaticFiles(directory="static", html=True), name="web")
 @app.get("/")
 async def root():
     return {"message": "欢迎使用汉字书法识别模型，请使用 POST /upload 接口上传图片。"}
@@ -336,6 +331,11 @@ async def upload_text(file: UploadFile = File(...)):
         raise HTTPException(status_code=500, detail=f"服务器内部错误: {e}")
 if __name__ == "__main__":
     import uvicorn

         raise HTTPException(status_code=500, detail=str(e))
 @app.get("/")
 async def root():
     return {"message": "欢迎使用汉字书法识别模型，请使用 POST /upload 接口上传图片。"}
         raise HTTPException(status_code=500, detail=f"服务器内部错误: {e}")
+from fastapi.staticfiles import StaticFiles
+app.mount("/", StaticFiles(directory="static", html=True), name="web")
 if __name__ == "__main__":
     import uvicorn

static/index.html CHANGED Viewed

@@ -1,228 +1,23 @@
-<!DOCTYPE html>
 <html lang="zh-CN">
-<head>
-<meta charset="UTF-8" />
-<title>汉字书法字体识别</title>
-<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no"/>
-<meta name="apple-mobile-web-app-capable" content="yes"/>
-<style>
-/* 基础复位 */
-*{box-sizing:border-box;margin:0;padding:0}
-html,body{height:100%;font-family:"Noto Serif SC","Songti SC",serif;background:#f6f2e9;color:#2a2a2a}
-body{display:flex;flex-direction:column;align-items:center;justify-content:flex-start;padding:16px;min-height:100vh}
-/* 背景纹理 */
-body::before{
-    content:'';
-    position:fixed;inset:0;
-    background:url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAMAAAAp4XiDAAAAUVBMVEWFhYWDg4N3d3dtbW17e3t1dXWBgYGHh4d5eXlzc3OLi4ubm5uVlZWPj4+NjY19fX2JiYl/f39ra2uRkZGZmZlpaWmXl5dvb29xcXGTk5NnZ2c8TV1mAAAAG3RSTlNAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEAvEOwtAAAFVklEQVR4XpWWB67c2BUFb3g557T/hRo9/WUMZHlgr4Bg8Z4qQgQJlHI4A8SzFVrapvmTF9O7dmYRFZ60YiBhJRCgh1FYhiLAmdvX0CzTOpNE77ME0Zty/nWWzchDtiqrmQDeuv3powQ5ta2eN0FY0InkqDD73lT9c9lEzwUNqgFHs9VQce3TVClFCQrSTfOiYkVJQBmpbq2L6iZavPnAPcoU0dSw0SUTqz/GtrGuXfbyyBniKykOWQWGqwwMA7QiYAxi+IlPdqo+hYHnUt5ZPfnsHJyNiDtnpJyayNBkF6cWoYGAMY92U2hXHF/C1M8uP/ZtYdiuj26UdAdQQSXQErwSOMzt/XWRWAz5GuSBIkwG1H3abJ2OsUOUhGC6tK4EMtJO0ttC6IBD3kM0ve0tJwMdSfjZo+EEISaeTr9P3wYrGjXqyC1krcKdhMpxEnt5JetoulscpyzhXN5FRpuPHvbeQaKxFAEB6EN+cYN6xD7RYGpXpNndMmZgM5Dcs3YSNFDHUo2LGfZuukSWyUYirJAdYbF3MfqEKmjM+I2EfhA94iG3L7uKrR+GdWD73ydlIB+6hgref1QTlmgmbM3/LeX5GI1Ux1RWpgxpLuZ2+I+IjzZ8wqE4nilvQdkUdfhzI5QDWy+kw5Wgg2pGpeEVeCCA7b85BO3F9DzxB3cdqvBzWcmzbyMiqhzuYqtHRVG2y4x+KOlnyqla8AoWWpuBoYRxzXrfKuILl6SfiWCbjxoZJUaCBj1CjH7GIaDbc9kqBY3W/Rgjda1iqQcOJu2WW+76pZC9QG7M00dffe9hNnseupFL53r8F7YHSwJWUKP2q+k7RdsxyOB11n0xtOvnW4irMMFNV4H0uqwS5ExsmP9AxbDTc9JwgneAT5vTiUSm1E7BSflSt3bfa1tv8Di3R8n3Af7MNWzs49hmauE2wP+ttrq+AsWpFG2awvsuOqbipWHgtuvuaAE+A1Z/7gC9hesnr+7wqCwG8c5yAg3AL1fm8T9AZtp/bbJGwl1pNrE7RuOX7PeMRUERVaPpEs+yqeoSmuOlokqw49pgomjLeh7icHNlG19yjs6XXOMedYm5xH2YxpV2tc0Ro2jJfxC50ApuxGob7lMsxfTbeUv07TyYxpeLucEH1gNd4IKH2LAg5TdVhlCafZvpskfncCfx8pOhJzd76bJWeYFnFciwcYfubRc12Ip/ppIhA1/mSZ/RxjFDrJC5xifFjJpY2Xl5zXdguFqYyTR1zSp1Y9p+tktDYYSNflcxI0iyO4TPBdlRcpeqjK/piF5bklq77V2aGpZU+y4rsaMCCqUEM4NkLFxC4CcxwHu5bXLyGm0x+vd4KuZV0X9fKq2uQJg==');
-    opacity:.06;pointer-events:none;z-index:-1;
-}
-/* 标题卷轴 */
-.title-box{
-    background:url('data:image/svg+xml;utf8,\
-        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 300 60"><rect width="300" height="60" fill="%23d9c7a3" rx="6"/>\
-        <path d="M0 50h300" stroke="%239632" stroke-width="2"/></svg>') center/contain no-repeat;
-    padding:16px 40px;
-    margin:10px 0 20px;
-    width: 100%;
-    max-width: 320px;
-}
-.title-box h1{
-    font-family:"微软雅黑";
-    font-size:24px;
-    letter-spacing:2px;
-    color:#8c1515;
-    font-weight:450;
-    text-align: center;
-}
-/* 图片预览 */
-#preview{
-    max-width: 100%;
-    max-height: 40vh;
-    width: auto;
-    height: auto;
-    border:2px solid #8c1515;
-    border-radius:6px;
-    background:#fff;
-    margin: 10px 0;
-}
-/* 按钮：朱砂印章效果 */
-.btn{
-    margin:20px 0;
-    padding:14px 36px;
-    font-size:18px;
-    letter-spacing:2px;
-    color:#fff;
-    background:#8c1515;
-    border:none;
-    border-radius:4px;
-    cursor:pointer;
-    box-shadow:0 4px 8px rgba(140,21,21,.25);
-    transition:.2s;
-    min-height: 48px; /* 确保触摸友好 */
-}
-.btn:active{
-    transform:translateY(2px);
-    box-shadow:0 2px 4px rgba(140,21,21,.25);
-    background:#7a1212;
-}
-/* 识别中提示 */
-#loading{
-    display:none;
-    font-size:18px;
-    color:#8c1515;
-    margin: 10px 0;
-    text-align: center;
-}
-/* 结果卷轴 */
-.result-scroll{
-    width:100%;
-    max-width:420px;
-    background:#f9f6f0;
-    border:1px solid #b88868;
-    border-radius:6px;
-    box-shadow:0 2px 6px rgba(0,0,0,.15);
-    display:none;
-    margin: 10px 0 20px;
-    overflow-x: auto; /* 防止表格在小屏幕上溢出 */
-}
-.result-scroll table{
-    width:100%;
-    border-collapse:collapse;
-    min-width: 300px; /* 确保表格在小屏幕上不会过窄 */
-}
-.result-scroll th, .result-scroll td{
-    padding:12px 8px;
-    text-align:center;
-    font-size:16px; /* 稍微减小字体以适应小屏幕 */
-}
-.result-scroll th{
-    background:#e7d9bd;
-    color:#5c3316;
-    font-weight:600;
-}
-.result-scroll tr:nth-child(even){
-    background:#f3ede2;
-}
-/* 版权 */
-footer{
-    font-size:14px;
-    color:#7d6446;
-    margin-top:auto; /* 将版权信息推到底部 */
-    padding: 10px 0;
-    letter-spacing:1px;
-    text-align: center;
-}
-footer a {
-    color: #7d6446;
-    text-decoration: none;
-}
-/* 移动端特定优化 */
-@media (max-width: 480px) {
-    body {
-        padding: 12px;
-        justify-content: flex-start;
-    }
-    .title-box {
-        padding: 12px 30px;
-        margin: 5px 0 15px;
-    }
-    .title-box h1 {
-        font-size: 20px;
-        letter-spacing: 1px;
-    }
-    .btn {
-        padding: 12px 28px;
-        font-size: 16px;
-        margin: 15px 0;
-    }
-    .result-scroll th, .result-scroll td {
-        padding: 10px 6px;
-        font-size: 14px;
-    }
-    footer {
-        font-size: 12px;
-    }
-}
-/* 防止横屏时元素过大 */
-@media (max-height: 500px) {
-    #preview {
-        max-height: 30vh;
-    }
-}
-</style>
-</head>
-<body>
-<div class="title-box"><h1>汉字书法字体识别</h1></div>
-<!-- 图片预览 -->
-<img id="preview" alt="点击选择图片" src="han.png" />
-<!-- 选择文件 -->
-<input id="file" type="file" accept="image/*" hidden/>
-<button class="btn" onclick="document.getElementById('file').click()">选择图片</button>
-<!-- 识别中提示 -->
-<div id="loading">识别中，请稍候…</div>
-<!-- 结果卷轴 -->
-<div class="result-scroll" id="result">
-    <table>
-        <thead><tr><th>识别结果</th><th>置信度</th></tr></thead>
-        <tbody></tbody>
-    </table>
-</div>
-<!-- 版权 -->
-<footer>&gt;&gt;&nbsp;<a href="https://github.com/jfxia/shufa" target="_blank">github.com/jfxia/shufa</a>&nbsp;&lt;&lt;</footer>
-<script>
-document.getElementById('file').addEventListener('change', e=>{
-    const file = e.target.files[0];
-    if(!file) return;
-    const preview = document.getElementById('preview');
-    preview.src = URL.createObjectURL(file);
-    document.getElementById('result').style.display='none';
-    document.getElementById('loading').style.display='block';
-    const form = new FormData();
-    form.append('file', file);
-    fetch('/upload', {method:'POST', body:form})
-        .then(r=>{if(!r.ok) throw new Error('识别失败 '+r.status); return r.json()})
-        .then(list=>{
-            const tbody=document.querySelector('#result tbody');
-            tbody.innerHTML='';
-            list.forEach(item=>{
-                const tr=document.createElement('tr');
-                tr.innerHTML=`<td>${item.char}</td><td>${item.prob}</td>`;
-                tbody.appendChild(tr);
-            });
-            document.getElementById('result').style.display='block';
-            document.getElementById('loading').style.display='none';
-        })
-        .catch(err=>{
-            alert(err.message||'未知错误');
-            document.getElementById('loading').style.display='none';
-        });
-});
-</script>
-</body>
 </html>

+<!doctype html>
 <html lang="zh-CN">
+    <head>
+        <meta charset="UTF-8" />
+        <title>汉字书法字体识别</title>
+        <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no" />
+        <meta name="apple-mobile-web-app-capable" content="yes" />
+    </head>
+    <body>
+        <!-- iframe容器 -->
+        <div class="iframe-container">
+            <iframe src="https://www.cyeam.com/mo/ocr"></iframe>
+        </div>
+        <!-- 版权 -->
+        <footer>
+            &gt;&gt;&nbsp;
+            <a href="https://github.com/jfxia/shufa" target="_blank">github.com/jfxia/shufa</a>
+            &nbsp;&lt;&lt;
+        </footer>
+    </body>
 </html>