Spaces:
Running
Running
| <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> |