Spaces:

broadfield
/

hf-module

Running

App Files Files Community

broadfield commited on 15 days ago

Commit

8ec1ecd

verified ·

1 Parent(s): 8b1c07f

Deploy HF Module Manager UI

Browse files

Files changed (1) hide show

index.html +111 -19

index.html CHANGED Viewed

@@ -1,19 +1,111 @@
-<!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
-</html>

+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>ChatSeed HF Module Manager</title>
+  <style>
+    * { box-sizing: border-box; margin: 0; padding: 0; }
+    body { font-family: system-ui, -apple-system, sans-serif; background: #0f172a; color: #e2e8f0; min-height: 100vh; }
+    .app { max-width: 900px; margin: 0 auto; padding: 24px; }
+    header { display: flex; align-items: center; justify-content: space-between; padding: 16px 0; border-bottom: 1px solid #1e293b; margin-bottom: 24px; }
+    header h1 { font-size: 1.4rem; display: flex; align-items: center; gap: 8px; }
+    header h1 span { background: #059669; color: #fff; font-size: 0.6rem; padding: 2px 8px; border-radius: 999px; font-weight: 500; }
+    .status-bar { display: flex; align-items: center; gap: 12px; background: #1e293b; padding: 10px 16px; border-radius: 12px; margin-bottom: 20px; font-size: 0.85rem; }
+    .btn { padding: 8px 16px; border: none; border-radius: 8px; cursor: pointer; font-size: 0.8rem; font-weight: 500; transition: all 0.15s; }
+    .btn-primary { background: #059669; color: #fff; }
+    .btn-primary:hover { background: #047857; }
+    .btn-outline { background: transparent; border: 1px solid #334155; color: #cbd5e1; }
+    .btn-outline:hover { background: #1e293b; }
+    .card { background: #1e293b; border: 1px solid #334155; border-radius: 14px; padding: 20px; margin-bottom: 16px; }
+    .card h3 { font-size: 0.9rem; color: #94a3b8; margin-bottom: 12px; text-transform: uppercase; letter-spacing: 0.04em; }
+    .tool-btn { display: flex; align-items: center; gap: 8px; width: 100%; padding: 10px 14px; background: #0f172a; border: 1px solid #334155; border-radius: 10px; color: #e2e8f0; cursor: pointer; font-size: 0.8rem; transition: all 0.15s; }
+    .tool-btn:hover { border-color: #059669; background: #1a2332; }
+    .tool-btn .icon { font-size: 1.1rem; width: 24px; text-align: center; }
+    .modal-overlay { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,0.7); z-index: 1000; display: flex; align-items: center; justify-content: center; padding: 16px; }
+    .modal { background: #1e293b; border: 1px solid #334155; border-radius: 16px; padding: 24px; width: 520px; max-width: 100%; box-shadow: 0 25px 50px rgba(0,0,0,0.4); }
+    .modal h2 { margin-bottom: 16px; font-size: 1.1rem; }
+    .modal input, .modal textarea, .modal select { width: 100%; padding: 10px 12px; background: #0f172a; border: 1px solid #475569; border-radius: 8px; color: #f1f5f9; font-size: 0.85rem; margin-bottom: 12px; box-sizing: border-box; }
+    .modal textarea { min-height: 80px; font-family: monospace; }
+    .output { background: #0f172a; border: 1px solid #334155; border-radius: 10px; padding: 14px; margin-top: 12px; white-space: pre-wrap; font-family: monospace; font-size: 0.78rem; line-height: 1.6; max-height: 400px; overflow-y: auto; }
+    .hidden { display: none; }
+    .flex { display: flex; gap: 8px; }
+    .flex-1 { flex: 1; }
+    footer { text-align: center; padding: 24px; color: #475569; font-size: 0.75rem; border-top: 1px solid #1e293b; margin-top: 32px; }
+  </style>
+</head>
+<body>
+  <div class="app">
+    <header>
+      <h1>🤗 ChatSeed <span>HF Module v10</span></h1>
+      <div><span id="statusText" style="font-size:0.8rem;color:#94a3b8;">Online</span></div>
+    </header>
+    <div class="status-bar">
+      <div style="flex:1;display:flex;gap:8px;align-items:center;"><span>🔑</span><span id="tokenLabel" style="color:#94a3b8;">No token set</span></div>
+      <button class="btn btn-outline" onclick="showTokenPopup()">Login</button>
+      <button class="btn btn-outline" onclick="logout()">Logout</button>
+    </div>
+    <div style="display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:20px;">
+      <button class="tool-btn" onclick="whoami()"><span class="icon">🔍</span><span class="name">Whoami</span><span class="arrow">→</span></button>
+      <button class="tool-btn" onclick="listSpaces()"><span class="icon">📂</span><span class="name">My Spaces</span><span class="arrow">→</span></button>
+      <button class="tool-btn" onclick="showCreateSpace()"><span class="icon">✨</span><span class="name">Create Space</span><span class="arrow">→</span></button>
+      <button class="tool-btn" onclick="showSpaceStatus()"><span class="icon">📊</span><span class="name">Space Status</span><span class="arrow">→</span></button>
+      <button class="tool-btn" onclick="showUploadFile()"><span class="icon">📄</span><span class="name">Upload File</span><span class="arrow">→</span></button>
+      <button class="tool-btn" onclick="showSearchSpaces()"><span class="icon">🔎</span><span class="name">Search</span><span class="arrow">→</span></button>
+    </div>
+    <div class="card"><h3>📋 Output</h3><div id="output" class="output">🚀 ChatSeed HF Module v10 loaded! Login to start.</div></div>
+    <div id="modalArea"></div>
+    <footer>ChatSeed HF Hub Manager v10 — <a href="https://huggingface.co/spaces/broadfield/hf-module" target="_blank" style="color:#60a5fa;">broadfield/hf-module</a></footer>
+  </div>
+  <div id="tokenPopup" class="modal-overlay hidden">
+    <div class="modal">
+      <h2>🔐 Login</h2>
+      <p style="color:#94a3b8;font-size:0.85rem;margin-bottom:16px;">Token stored in localStorage.</p>
+      <input type="password" id="tokenInput" placeholder="hf_..." style="font-family:monospace;">
+      <label style="display:flex;align-items:center;gap:6px;font-size:0.8rem;color:#94a3b8;margin-bottom:12px;"><input type="checkbox" id="showToken" style="accent-color:#059669;"> Show</label>
+      <div class="flex"><button class="btn btn-primary flex-1" onclick="setToken()">🔐 Set</button><button class="btn btn-outline" onclick="closeTokenPopup()">Cancel</button></div>
+    </div>
+  </div>
+<script>
+(function(){
+  'use strict';
+  const HF_API_BASE='https://huggingface.co';
+  function gt(){try{return localStorage.getItem('chatseed_hf_token')||''}catch(e){return ''}}
+  function st(t){try{localStorage.setItem('chatseed_hf_token',t)}catch(e){}}
+  function ct(){try{localStorage.removeItem('chatseed_hf_token')}catch(e){}}
+  function ah(){const t=gt();if(!t)throw new Error('No HF token');return{Authorization:'Bearer '+t}}
+  async function hf(p,o={}){const u=HF_API_BASE+p;const h={...ah(),'Content-Type':'application/json',...o.headers||{}};const r=await fetch(u,{...o,headers:h});if(!r.ok){let m='';try{const e=await r.json();m=e.error||JSON.stringify(e)}catch(e){m=r.statusText}throw new Error('HF '+r.status+': '+m)}if(r.status===204)return null;const c=r.headers.get('content-type')||'';if(c.includes('application/json'))return r.json();return r.text()}
+  async function cf(rt,ns,repo,files,s,d){return hf('/api/spaces/'+ns+'/'+repo+'/commit/main',{method:'POST',body:JSON.stringify({summary:s||'Update',description:d||'',files:files.map(f=>({path:f.path,content:f.content}))})})}
+  const tools={};
+  tools.token_status={handler:async function(){const t=gt();if(!t)return'🔑 No token.';try{const i=await hf('/api/whoami-v2');return'🔑 **Active** ('+t.substring(0,6)+'…'+t.substring(t.length-4)+')\n👤 '+(i.name||i.user)+'\n📧 '+(i.email||'N/A')}catch(e){return'⚠️ '+e.message}}};
+  tools.whoami={handler:async function(){try{const i=await hf('/api/whoami-v2');let r='**👤 User**\nName: '+(i.name||i.user)+'\nEmail: '+(i.email||'N/A');if(i.orgs&&i.orgs.length)r+='\nOrgs: '+i.orgs.map(o=>o.name).join(', ');return r}catch(e){return'❌ '+e.message}}};
+  tools.list_my_spaces={handler:async function(){const u=await hf('/api/whoami-v2');const n=u.name||u.user;const r=await hf('/api/spaces?author='+encodeURIComponent(n)+'&limit=25&sort=lastModified');if(!r||!r.length)return'📭 No spaces.';let o='📂 **Spaces ('+n+'):**\n';r.forEach(s=>{o+='\n'+(s.private?'🔒':'🌍')+' **'+(s.id||s.namespace+'/'+s.name)+'**'+(s.sdk?' ['+s.sdk+']':'')+(s.runtime?.stage?' — '+s.runtime.stage:'')});return o}};
+  tools.create_space={handler:async function(a){const ns=a.org||(await hf('/api/whoami-v2')).name;const p={name:a.name,type:'space',sdk:a.sdk||'gradio',private:a.private||false};if(a.hardware)p.hardware=a.hardware;if(a.sleep_time)p.sleep_time=a.sleep_time;const r=await hf('/api/repos/create',{method:'POST',body:JSON.stringify(p)});return'✅ **Created:** '+ns+'/'+a.name+'\n🔗 https://huggingface.co/spaces/'+ns+'/'+a.name}};
+  tools.hf_upload_file={handler:async function(a){const p=a.repo_id.split('/');if(p.length!==2)return'❌ Invalid';await cf('space',p[0],p[1],[{path:a.path,content:a.content}]);return'✅ Uploaded `'+a.path+'` → `'+a.repo_id+'`'}};
+  tools.space_status={handler:async function(a){const p=a.repo_id.split('/');if(p.length!==2)return'❌ Invalid';const r=await hf('/api/spaces/'+p[0]+'/'+p[1]+'/runtime');const ri=await hf('/api/spaces/'+p[0]+'/'+p[1]);const s=r.stage||'UNKNOWN';const em={'NO_APP_FILE':'📄','BUILDING':'🔨','RUNNING':'✅','PAUSED':'⏸️','SLEEPING':'💤','ERROR':'❌'};return'**📊 Status:** `'+a.repo_id+'`\n**Stage:** '+(em[s]||'❓')+' '+s+'\n**SDK:** '+(ri.sdk||'N/A')+'\n**URL:** https://huggingface.co/spaces/'+a.repo_id+'\n**App:** https://'+p[0]+'-'+p[1]+'.hf.space'}};
+  tools.search_spaces={handler:async function(a){const r=await hf('/api/spaces?search='+encodeURIComponent(a.query)+'&limit=5&sort=likes');if(!r||!r.length)return'🔍 None';let o='🔍 **"'+a.query+'"**\n';r.forEach((s,i)=>{o+='\n'+(i+1)+'. **'+(s.id||s.namespace+'/'+s.name)+'**'+(s.sdk?' ['+s.sdk+']':'')+(s.likes?' ���'+s.likes:'')});return o}};
+  const out=document.getElementById('output');
+  function log(m){out.textContent=m}
+  window.whoami=async function(){try{log(await tools.whoami.handler())}catch(e){log('❌ '+e.message)}};
+  window.listSpaces=async function(){try{log(await tools.list_my_spaces.handler())}catch(e){log('❌ '+e.message)}};
+  window.showTokenPopup=function(){document.getElementById('tokenPopup').classList.remove('hidden');document.getElementById('tokenInput').focus()};
+  window.closeTokenPopup=function(){document.getElementById('tokenPopup').classList.add('hidden')};
+  window.setToken=async function(){const v=document.getElementById('tokenInput').value.trim();if(!v)return;st(v);log('✅ Token set. Verifying...');try{const i=await hf('/api/whoami-v2');log('✅ **Authenticated as** '+(i.name||i.user));closeTokenPopup();updateUI()}catch(e){log('⚠️ Stored but verify failed: '+e.message);closeTokenPopup();updateUI()}};
+  window.logout=function(){ct();updateUI();log('🚪 Logged out.')};
+  window.showCreateSpace=function(){document.getElementById('modalArea').innerHTML='<div class="modal-overlay" onclick="if(event.target===this)closeModal()"><div class="modal"><h2>✨ Create Space</h2><input id="spName" placeholder="Space name"><select id="spSdk"><option value="gradio">Gradio</option><option value="streamlit">Streamlit</option><option value="docker">Docker</option><option value="static">Static</option></select><input id="spHw" placeholder="Hardware (optional)"><label style="display:flex;align-items:center;gap:6px;font-size:0.8rem;margin-bottom:12px;"><input type="checkbox" id="spPriv" style="accent-color:#059669;"> Private</label><button class="btn btn-primary" onclick="createSpace()">🚀 Create</button></div></div>'};
+  window.createSpace=async function(){const n=document.getElementById('spName').value.trim();if(!n)return;const a={name:n,sdk:document.getElementById('spSdk').value};if(document.getElementById('spPriv').checked)a.private=true;const h=document.getElementById('spHw').value.trim();if(h)a.hardware=h;try{log(await tools.create_space.handler(a));closeModal()}catch(e){log('❌ '+e.message)}};
+  window.showSpaceStatus=function(){document.getElementById('modalArea').innerHTML='<div class="modal-overlay" onclick="if(event.target===this)closeModal()"><div class="modal"><h2>📊 Status</h2><input id="stRepo" placeholder="namespace/space-name"><button class="btn btn-primary" onclick="getStatus()">🔍 Check</button></div></div>'};
+  window.getStatus=async function(){const id=document.getElementById('stRepo').value.trim();if(!id)return;try{log(await tools.space_status.handler({repo_id:id}));closeModal()}catch(e){log('❌ '+e.message)}};
+  window.showUploadFile=function(){document.getElementById('modalArea').innerHTML='<div class="modal-overlay" onclick="if(event.target===this)closeModal()"><div class="modal"><h2>📄 Upload</h2><input id="upRepo" placeholder="namespace/space-name"><input id="upPath" placeholder="path/to/file"><textarea id="upContent" placeholder="file content..."></textarea><button class="btn btn-primary" onclick="uploadFile()">📤 Upload</button></div></div>'};
+  window.uploadFile=async function(){const r=document.getElementById('upRepo').value.trim();const p=document.getElementById('upPath').value.trim();const c=document.getElementById('upContent').value;if(!r||!p)return;try{log(await tools.hf_upload_file.handler({repo_id:r,path:p,content:c}));closeModal()}catch(e){log('❌ '+e.message)}};
+  window.showSearchSpaces=function(){document.getElementById('modalArea').innerHTML='<div class="modal-overlay" onclick="if(event.target===this)closeModal()"><div class="modal"><h2>🔎 Search</h2><input id="sq" placeholder="Search..."><button class="btn btn-primary" onclick="searchSpaces()">🔍 Search</button></div></div>'};
+  window.searchSpaces=async function(){const q=document.getElementById('sq').value.trim();if(!q)return;try{log(await tools.search_spaces.handler({query:q}));closeModal()}catch(e){log('❌ '+e.message)}};
+  window.closeModal=function(){document.getElementById('modalArea').innerHTML=''};
+  function updateUI(){const t=gt();document.getElementById('tokenLabel').innerHTML=t?'✅ <strong>Token set</strong> ('+t.substring(0,6)+'…'+t.substring(t.length-4)+')':'❌ No token set'}
+  const t=gt();if(t){(async()=>{try{log(await tools.token_status.handler()+'\n\n🚀 Click any button!')}catch(e){}})()}updateUI()
+  document.getElementById('showToken').addEventListener('change',function(){document.getElementById('tokenInput').type=this.checked?'text':'password'});
+})();
+</script>
+</body>
+</html>