Hugging Face's logo

Spaces:
broadfield
/
hf-module
Running

App Files Community
hf-module
File size: 14,176 Bytes
8ec1ecd
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
<!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>