Web-Manager

Running

App Files Files Community

openfree commited on 16 days ago

Commit

857f721

verified ·

1 Parent(s): 769faf5

Update app.py

Browse files

Files changed (1) hide show

app.py +58 -49

app.py CHANGED Viewed

@@ -61,7 +61,7 @@ CATEGORIES = {
     ],
 }
-# ─────────────── 2. URL HELPERS (iframe + screenshot) ────────────────
 def direct_url(hf_url: str) -> str:
     m = re.match(r"https?://huggingface\.co/spaces/([^/]+)/([^/?#]+)", hf_url)
     if not m:
@@ -74,31 +74,27 @@ def direct_url(hf_url: str) -> str:
 def screenshot_url(hf_url: str) -> str:
     return f"https://image.thum.io/get/fullpage/{direct_url(hf_url)}"
-# ──────────────── 3. CATEGORY API  (used by tabs) ────────────────
 @app.route('/api/category')
 def api_category():
     cat = request.args.get('name', '')
     urls = CATEGORIES.get(cat, [])
-    data = []
-    for url in urls:
-        m = re.match(r"https?://huggingface\.co/spaces/([^/]+)/([^/?#]+)", url)
-        owner, name = m.groups() if m else ('', url.split('/')[-1])
-        data.append({
-            "title": name,
-            "owner": owner,
-            "name": name,
             "iframe": direct_url(url),
             "shot":   screenshot_url(url),
             "hf":     url
-        })
-    return jsonify(data)
-# ───────────────────── 4. FRONT PAGE ROUTE ─────────────────────
 @app.route('/')
 def home():
     return render_template('index.html', cats=list(CATEGORIES.keys()))
-# ───────────── 5. BUILD index.html (once) ──────────────
 os.makedirs('templates', exist_ok=True)
 with open('templates/index.html', 'w', encoding='utf-8') as fp:
     fp.write(r'''<!DOCTYPE html>
@@ -110,70 +106,83 @@ body{margin:0;font-family:Nunito,sans-serif;background:#f6f8fb}
 .tabs{display:flex;flex-wrap:wrap;gap:8px;padding:16px}
 .tab{padding:6px 14px;border:none;border-radius:18px;background:#e2e8f0;font-weight:600;cursor:pointer}
 .tab.active{background:#a78bfa;color:#1a202c}
-.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(330px,1fr));gap:14px;padding:0 16px 60px}
 .card{background:#fff;border-radius:12px;box-shadow:0 2px 8px rgba(0,0,0,.08);overflow:hidden;height:420px;display:flex;flex-direction:column;position:relative}
 .frame{flex:1;position:relative;overflow:hidden}
 .frame iframe,.frame img{position:absolute;width:166.667%;height:166.667%;transform:scale(.6);transform-origin:top left;border:0}
 .err{display:none;align-items:center;justify-content:center;width:100%;height:100%;background:#fafafa;text-align:center;padding:10px;color:#666;font-size:.9rem}
 .foot{height:44px;background:#fafafa;display:flex;align-items:center;justify-content:center;border-top:1px solid #eee}
 .foot a{font-size:.82rem;font-weight:700;color:#4a6dd8;text-decoration:none}
-</style></head>
 <body>
 <div class="tabs" id="tabs"></div>
 <div class="grid" id="grid"></div>
 <script>
-// ----- helpers --------------------------------------------------
 function createCard(sp){
-  const c=document.createElement('div');c.className='card';
-  const f=document.createElement('div');f.className='frame';
   const ifr=document.createElement('iframe');
-  ifr.src=sp.iframe; ifr.loading='lazy'; f.appendChild(ifr);
   const err=document.createElement('div');err.className='err';
   err.innerHTML=`Preview blocked.<br><a href="${sp.hf}" target="_blank">Open on HF ↗</a>`;
-  f.appendChild(err);
-  ifr.onerror=()=>toSnapshot();
-  // after 10 s fallback if still blank
-  setTimeout(()=>{try{
-       const ok=ifr.contentWindow && ifr.contentWindow.document.body.innerHTML.length>30;
-       if(!ok) toSnapshot();}catch(e){toSnapshot();}},10000);
-  function toSnapshot(){
-       ifr.remove(); const img=new Image();
-       img.src=sp.shot; img.loading='lazy';
-       img.onerror=()=>{err.style.display='flex';};
-       f.prepend(img);
   }
   const foot=document.createElement('div');foot.className='foot';
   foot.innerHTML=`<a href="${sp.iframe}" target="_blank">${sp.title}</a>`;
-  c.appendChild(f); c.appendChild(foot);
-  return c;
 }
-// ----- load tab -------------------------------------------------
-const cats={{cats|tojson}};
-const tabs=document.getElementById('tabs');
-const grid=document.getElementById('grid');
-let active="";
 function load(cat){
-  if(cat===active)return; active=cat;
   [...tabs.children].forEach(b=>b.classList.toggle('active',b.dataset.c===cat));
   grid.innerHTML='<p style="grid-column:1/-1;text-align:center;padding:40px">Loading…</p>';
   fetch('/api/category?name='+encodeURIComponent(cat))
-     .then(r=>r.json()).then(arr=>{
-        grid.innerHTML='';
-        arr.forEach(sp=>grid.appendChild(createCard(sp)));
-     });
 }
-// tabs init
 cats.forEach((c,i)=>{
   const b=document.createElement('button');
-  b.className='tab';b.textContent=c;b.dataset.c=c;
-  b.onclick=()=>load(c);tabs.appendChild(b);
-  if(i===0)load(c);
 });
 </script>
 </body></html>''')
-# ────────────────── 6. RUN APP ──────────────────
 if __name__ == '__main__':
-    # hugggingface spaces use 7860 by convention
     app.run(host='0.0.0.0', port=7860)

     ],
 }
+# ─────────────── 2. URL HELPERS ────────────────
 def direct_url(hf_url: str) -> str:
     m = re.match(r"https?://huggingface\.co/spaces/([^/]+)/([^/?#]+)", hf_url)
     if not m:
 def screenshot_url(hf_url: str) -> str:
     return f"https://image.thum.io/get/fullpage/{direct_url(hf_url)}"
+# ─────────────── 3. API FOR TABS ───────────────
 @app.route('/api/category')
 def api_category():
     cat = request.args.get('name', '')
     urls = CATEGORIES.get(cat, [])
+    return jsonify([
+        {
+            "title": url.split('/')[-1],
+            "owner": url.split('/')[-2] if '/spaces/' in url else '',
             "iframe": direct_url(url),
             "shot":   screenshot_url(url),
             "hf":     url
+        } for url in urls
+    ])
+# ─────────────── 4. ROUTES ───────────────
 @app.route('/')
 def home():
     return render_template('index.html', cats=list(CATEGORIES.keys()))
+# ─────────────── 5. CREATE TEMPLATE ───────────────
 os.makedirs('templates', exist_ok=True)
 with open('templates/index.html', 'w', encoding='utf-8') as fp:
     fp.write(r'''<!DOCTYPE html>
 .tabs{display:flex;flex-wrap:wrap;gap:8px;padding:16px}
 .tab{padding:6px 14px;border:none;border-radius:18px;background:#e2e8f0;font-weight:600;cursor:pointer}
 .tab.active{background:#a78bfa;color:#1a202c}
+.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;padding:0 16px 60px}
+@media(max-width:800px){.grid{grid-template-columns:1fr}}
 .card{background:#fff;border-radius:12px;box-shadow:0 2px 8px rgba(0,0,0,.08);overflow:hidden;height:420px;display:flex;flex-direction:column;position:relative}
 .frame{flex:1;position:relative;overflow:hidden}
 .frame iframe,.frame img{position:absolute;width:166.667%;height:166.667%;transform:scale(.6);transform-origin:top left;border:0}
 .err{display:none;align-items:center;justify-content:center;width:100%;height:100%;background:#fafafa;text-align:center;padding:10px;color:#666;font-size:.9rem}
 .foot{height:44px;background:#fafafa;display:flex;align-items:center;justify-content:center;border-top:1px solid #eee}
 .foot a{font-size:.82rem;font-weight:700;color:#4a6dd8;text-decoration:none}
+</style>
+</head>
 <body>
 <div class="tabs" id="tabs"></div>
 <div class="grid" id="grid"></div>
 <script>
+const cats={{cats|tojson}};
+const tabs=document.getElementById('tabs');
+const grid=document.getElementById('grid');
+let active="";
+/* ---------- card builder (dynamic + fallback) ---------- */
 function createCard(sp){
+  const card=document.createElement('div');card.className='card';
+  const frameBox=document.createElement('div');frameBox.className='frame';
   const ifr=document.createElement('iframe');
+  ifr.src=sp.iframe; ifr.loading='lazy';
+  frameBox.appendChild(ifr);
   const err=document.createElement('div');err.className='err';
   err.innerHTML=`Preview blocked.<br><a href="${sp.hf}" target="_blank">Open on HF ↗</a>`;
+  frameBox.appendChild(err);
+  let loaded=false;
+  ifr.onload = ()=>{ loaded=true; };          // success
+  ifr.onerror= fallback;                      // immediate fail
+  setTimeout(()=>{ if(!loaded) fallback(); },10000); // watchdog
+  function fallback(){
+    ifr.remove();
+    const img=new Image(); img.src=sp.shot; img.loading='lazy';
+    img.onerror=()=>{ err.style.display='flex'; };
+    frameBox.prepend(img);
   }
   const foot=document.createElement('div');foot.className='foot';
   foot.innerHTML=`<a href="${sp.iframe}" target="_blank">${sp.title}</a>`;
+  card.appendChild(frameBox);
+  card.appendChild(foot);
+  return card;
 }
+/* ---------- load tab ---------- */
 function load(cat){
+  if(cat===active) return;
+  active=cat;
   [...tabs.children].forEach(b=>b.classList.toggle('active',b.dataset.c===cat));
   grid.innerHTML='<p style="grid-column:1/-1;text-align:center;padding:40px">Loading…</p>';
   fetch('/api/category?name='+encodeURIComponent(cat))
+    .then(r=>r.json()).then(arr=>{
+      grid.innerHTML='';
+      arr.forEach(sp=>grid.appendChild(createCard(sp)));
+    });
 }
+/* ---------- init tabs ---------- */
 cats.forEach((c,i)=>{
   const b=document.createElement('button');
+  b.className='tab'; b.textContent=c; b.dataset.c=c;
+  b.onclick=()=>load(c);
+  tabs.appendChild(b);
+  if(i===0) load(c);
 });
 </script>
 </body></html>''')
+# ─────────────── 6. RUN ───────────────
 if __name__ == '__main__':
     app.run(host='0.0.0.0', port=7860)