Upload folder using huggingface_hub

app.py

@@ -0,0 +1,136 @@
+import os
+import pty
+import asyncio
+import struct
+import fcntl
+import termios
+import json
+
+from fastapi import FastAPI, WebSocket, WebSocketDisconnect
+from fastapi.responses import FileResponse
+from fastapi.staticfiles import StaticFiles
+
+app = FastAPI()
+
+app.mount("/static", StaticFiles(directory="static"), name="static")
+
+
+@app.get("/")
+async def index():
+    return FileResponse("static/index.html")
+
+
+@app.websocket("/ws")
+async def terminal(websocket: WebSocket):
+
+    await websocket.accept()
+
+    master_fd, slave_fd = pty.openpty()
+
+    proc = await asyncio.create_subprocess_exec(
+        "/bin/bash",
+        stdin=slave_fd,
+        stdout=slave_fd,
+        stderr=slave_fd,
+        env={
+            **os.environ,
+            "TERM": "xterm-256color",
+            "HOME": "/home/ubuntu",
+            "USER": "ubuntu"
+        }
+    )
+
+    os.close(slave_fd)
+
+    loop = asyncio.get_event_loop()
+
+    # Read terminal output
+    async def read_pty():
+
+        while True:
+
+            try:
+
+                data = await loop.run_in_executor(
+                    None,
+                    lambda: os.read(master_fd, 4096)
+                )
+
+                if data:
+
+                    try:
+                        text = data.decode("utf-8")
+
+                    except UnicodeDecodeError:
+                        text = data.decode(
+                            "utf-8",
+                            errors="ignore"
+                        )
+
+                    await websocket.send_text(text)
+
+            except OSError:
+                break
+
+    read_task = asyncio.create_task(read_pty())
+
+    try:
+
+        while True:
+
+            message = await websocket.receive_text()
+
+            try:
+
+                msg = json.loads(message)
+
+                if msg.get("type") == "input":
+
+                    os.write(
+                        master_fd,
+                        msg["data"].encode("utf-8")
+                    )
+
+                elif msg.get("type") == "resize":
+
+                    cols = msg.get("cols", 80)
+                    rows = msg.get("rows", 24)
+
+                    fcntl.ioctl(
+                        master_fd,
+                        termios.TIOCSWINSZ,
+                        struct.pack(
+                            "HHHH",
+                            rows,
+                            cols,
+                            0,
+                            0
+                        )
+                    )
+
+            except (json.JSONDecodeError, OSError):
+                break
+
+    except (WebSocketDisconnect, Exception):
+        pass
+
+    finally:
+
+        read_task.cancel()
+
+        try:
+            proc.terminate()
+
+            await asyncio.wait_for(
+                proc.wait(),
+                timeout=2
+            )
+
+        except Exception:
+            proc.kill()
+
+        try:
+            os.close(master_fd)
+
+        except Exception:
+            pass

requirements.txt

@@ -0,0 +1,6 @@
+fastapi==0.111.0
+uvicorn[standard]==0.30.0
+websockets==12.0
+python-multipart==0.0.9
+huggingface_hub==0.23.0
+httptools==0.6.1

startup.sh

@@ -0,0 +1,80 @@
+#!/bin/bash
+
+echo "===== Application Startup at $(date) ====="
+
+# Install huggingface_hub if not present
+pip3 install --no-cache-dir -q huggingface_hub==0.23.0 --break-system-packages
+
+# Pull persistent data from HF Dataset repo if token is set
+if [ -n "$HF_TOKEN" ] && [ -n "$HF_USERNAME" ]; then
+    echo "[Storage] Pulling persistent data from HF Dataset..."
+    python3 -c "
+import os
+from huggingface_hub import snapshot_download, HfApi
+import shutil
+
+token = os.environ.get('HF_TOKEN')
+username = os.environ.get('HF_USERNAME')
+repo_id = f'{username}/vps-storage'
+
+try:
+    api = HfApi()
+    # Check if repo exists
+    api.repo_info(repo_id=repo_id, repo_type='dataset', token=token)
+    
+    # Download all files from dataset repo to /persistent
+    snapshot_download(
+        repo_id=repo_id,
+        repo_type='dataset',
+        local_dir='/persistent',
+        token=token,
+        ignore_patterns=['.gitattributes', 'README.md']
+    )
+    print('[Storage] Data restored successfully!')
+except Exception as e:
+    print(f'[Storage] No existing data or error: {e}')
+    print('[Storage] Starting fresh...')
+"
+else
+    echo "[Storage] HF_TOKEN or HF_USERNAME not set — skipping restore"
+fi
+
+# Create /persistent directory if it doesn't exist
+mkdir -p /persistent
+
+# Start auto-save in background (every 5 minutes)
+python3 -c "
+import os, time, subprocess, threading
+
+def auto_save():
+    while True:
+        time.sleep(300)  # every 5 minutes
+        token = os.environ.get('HF_TOKEN')
+        username = os.environ.get('HF_USERNAME')
+        if token and username:
+            try:
+                from huggingface_hub import HfApi
+                api = HfApi()
+                repo_id = f'{username}/vps-storage'
+                api.upload_folder(
+                    folder_path='/persistent',
+                    repo_id=repo_id,
+                    repo_type='dataset',
+                    token=token,
+                    commit_message='Auto-save from VPS'
+                )
+                print(f'[Storage] Auto-saved at {__import__(\"datetime\").datetime.now()}')
+            except Exception as e:
+                print(f'[Storage] Auto-save failed: {e}')
+
+t = threading.Thread(target=auto_save, daemon=True)
+t.start()
+" &
+
+# Start the FastAPI app
+exec uvicorn app:app \
+  --host 0.0.0.0 \
+  --port 7860 \
+  --ws websockets \
+  --proxy-headers \
+  --forwarded-allow-ips="*"

static/index.html

@@ -0,0 +1,425 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8"/>
+  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
+  <title>Ubuntu 24.04 Web Terminal</title>
+
+  <link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;700&display=swap" rel="stylesheet"/>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/xterm@5.3.0/css/xterm.css"/>
+
+  <script src="https://cdn.jsdelivr.net/npm/xterm@5.3.0/lib/xterm.js"></script>
+  <script src="https://cdn.jsdelivr.net/npm/xterm-addon-fit@0.8.0/lib/xterm-addon-fit.js"></script>
+
+  <style>
+    *, *::before, *::after {
+      box-sizing: border-box;
+      margin: 0;
+      padding: 0;
+    }
+
+    body {
+      background: #090c10;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      min-height: 100vh;
+      padding: 24px 16px;
+      font-family: 'JetBrains Mono', monospace;
+    }
+
+    h1 {
+      color: #27c93f;
+      font-size: 15px;
+      letter-spacing: 2px;
+      margin-bottom: 16px;
+      opacity: 0.7;
+    }
+
+    #term-wrap {
+      width: 100%;
+      max-width: 960px;
+      background: #0d1117;
+      border-radius: 12px;
+      overflow: hidden;
+      border: 1px solid #30363d;
+      display: flex;
+      flex-direction: column;
+      box-shadow: 0 8px 40px rgba(0,0,0,0.6);
+    }
+
+    #titlebar {
+      background: #1c2128;
+      padding: 11px 16px;
+      display: flex;
+      align-items: center;
+      gap: 8px;
+      border-bottom: 1px solid #30363d;
+      user-select: none;
+    }
+
+    .dot {
+      width: 13px;
+      height: 13px;
+      border-radius: 50%;
+    }
+
+    .dot.r { background: #ff5f56; }
+    .dot.y { background: #ffbd2e; }
+    .dot.g { background: #27c93f; }
+
+    #title-text {
+      color: #768390;
+      font-size: 12px;
+      margin-left: 10px;
+    }
+
+    #copy-btn {
+      margin-left: auto;
+      background: #27c93f22;
+      border: 1px solid #27c93f55;
+      border-radius: 6px;
+      color: #27c93f;
+      font-size: 11px;
+      padding: 4px 12px;
+      cursor: pointer;
+    }
+
+    #copy-btn:hover {
+      background: #27c93f44;
+    }
+
+    #status-bar {
+      background: #161b22;
+      padding: 6px 16px;
+      display: flex;
+      align-items: center;
+      gap: 10px;
+      border-bottom: 1px solid #21262d;
+    }
+
+    #status-dot {
+      width: 8px;
+      height: 8px;
+      border-radius: 50%;
+      background: #ff5f56;
+    }
+
+    #status-dot.connected {
+      background: #27c93f;
+    }
+
+    #status-text {
+      color: #768390;
+      font-size: 11px;
+    }
+
+    #reconnect-btn {
+      margin-left: auto;
+      background: #27c93f22;
+      border: 1px solid #27c93f55;
+      border-radius: 6px;
+      color: #27c93f;
+      font-size: 11px;
+      padding: 4px 10px;
+      cursor: pointer;
+      display: none;
+    }
+
+    #reconnect-btn.visible {
+      display: block;
+    }
+
+    #terminal-container {
+      padding: 8px;
+      min-height: 500px;
+      background: #0d1117;
+    }
+
+    .xterm {
+      padding: 8px;
+    }
+
+    #ctx-menu {
+      display: none;
+      position: fixed;
+      background: #1c2128;
+      border: 1px solid #30363d;
+      border-radius: 8px;
+      padding: 4px;
+      z-index: 9999;
+      min-width: 140px;
+    }
+
+    #ctx-menu button {
+      display: block;
+      width: 100%;
+      background: none;
+      border: none;
+      color: #e6edf3;
+      padding: 8px 12px;
+      text-align: left;
+      cursor: pointer;
+      border-radius: 4px;
+      font-family: inherit;
+    }
+
+    #ctx-menu button:hover {
+      background: #27c93f22;
+      color: #27c93f;
+    }
+
+    #footer {
+      margin-top: 14px;
+      color: #444c56;
+      font-size: 11px;
+      text-align: center;
+      line-height: 1.8;
+    }
+  </style>
+</head>
+
+<body>
+
+<h1>⬛ Ubuntu 24.04 LTS — Web Terminal</h1>
+
+<div id="term-wrap">
+
+  <div id="titlebar">
+    <div class="dot r"></div>
+    <div class="dot y"></div>
+    <div class="dot g"></div>
+
+    <span id="title-text">ubuntu@space: ~</span>
+
+    <button id="copy-btn">
+      ⎘ Copy Selection
+    </button>
+  </div>
+
+  <div id="status-bar">
+    <div id="status-dot"></div>
+
+    <span id="status-text">
+      Connecting...
+    </span>
+
+    <button id="reconnect-btn">
+      ↺ Reconnect
+    </button>
+  </div>
+
+  <div id="terminal-container"></div>
+</div>
+
+<div id="ctx-menu">
+  <button id="ctx-copy">⎘ Copy</button>
+  <button id="ctx-paste">⎙ Paste</button>
+  <button id="ctx-clear">✕ Clear</button>
+</div>
+
+<div id="footer">
+  Real Ubuntu shell running on Hugging Face Space
+</div>
+
+<script>
+  let ws = null;
+  let reconnectTimeout = null;
+
+  const term = new Terminal({
+    cursorBlink: true,
+    fontSize: 13,
+    fontFamily: "'JetBrains Mono', monospace",
+    allowTransparency: false,
+    scrollback: 3000,
+    disableStdin: false,
+    macOptionIsMeta: true,
+    theme: {
+      background: '#0d1117',
+      foreground: '#e6edf3',
+      cursor: '#27c93f'
+    }
+  });
+
+  const fitAddon = new FitAddon.FitAddon();
+
+  term.loadAddon(fitAddon);
+
+  term.open(document.getElementById('terminal-container'));
+
+  fitAddon.fit();
+
+  term.focus();
+
+  const statusDot = document.getElementById('status-dot');
+  const statusText = document.getElementById('status-text');
+  const reconnectBtn = document.getElementById('reconnect-btn');
+
+  function setStatus(connected, text) {
+    statusDot.className = connected ? 'connected' : '';
+    statusText.textContent = text;
+
+    reconnectBtn.className = connected ? '' : 'visible';
+  }
+
+  function getWsUrl() {
+    const protocol = location.protocol === 'https:' ? 'wss' : 'ws';
+    return `${protocol}://${location.host}/ws`;
+  }
+
+  function connect() {
+
+    if (ws) {
+      ws.close();
+      ws = null;
+    }
+
+    setStatus(false, 'Connecting...');
+
+    ws = new WebSocket(getWsUrl());
+
+    ws.onopen = () => {
+      setStatus(true, 'Connected');
+      sendResize();
+      term.focus();
+    };
+
+    ws.onmessage = (event) => {
+      term.write(event.data);
+    };
+
+    ws.onerror = () => {
+      setStatus(false, 'Connection error');
+    };
+
+    ws.onclose = () => {
+      setStatus(false, 'Disconnected');
+
+      clearTimeout(reconnectTimeout);
+
+      reconnectTimeout = setTimeout(() => {
+        connect();
+      }, 2000);
+    };
+  }
+
+  function sendResize() {
+
+    if (!ws || ws.readyState !== WebSocket.OPEN) {
+      return;
+    }
+
+    ws.send(JSON.stringify({
+      type: 'resize',
+      cols: term.cols,
+      rows: term.rows
+    }));
+  }
+
+  term.onData((data) => {
+
+    if (!ws || ws.readyState !== WebSocket.OPEN) {
+      return;
+    }
+
+    if (typeof data !== 'string') {
+      return;
+    }
+
+    ws.send(JSON.stringify({
+      type: 'input',
+      data: data
+    }));
+  });
+
+  term.onResize(() => {
+    sendResize();
+  });
+
+  window.addEventListener('resize', () => {
+    fitAddon.fit();
+    sendResize();
+  });
+
+  reconnectBtn.addEventListener('click', connect);
+
+  document.getElementById('copy-btn').addEventListener('click', async () => {
+
+    const selection = term.getSelection();
+
+    if (!selection) return;
+
+    await navigator.clipboard.writeText(selection);
+
+    const btn = document.getElementById('copy-btn');
+
+    btn.textContent = '✓ Copied';
+
+    setTimeout(() => {
+      btn.textContent = '⎘ Copy Selection';
+    }, 1500);
+  });
+
+  const ctxMenu = document.getElementById('ctx-menu');
+
+  document.getElementById('terminal-container')
+    .addEventListener('contextmenu', (e) => {
+
+      e.preventDefault();
+
+      ctxMenu.style.display = 'block';
+
+      ctxMenu.style.left = `${e.pageX}px`;
+      ctxMenu.style.top = `${e.pageY}px`;
+    });
+
+  document.addEventListener('click', () => {
+    ctxMenu.style.display = 'none';
+  });
+
+  document.getElementById('ctx-copy')
+    .addEventListener('click', async () => {
+
+      const selection = term.getSelection();
+
+      if (!selection) return;
+
+      await navigator.clipboard.writeText(selection);
+    });
+
+  document.getElementById('ctx-paste')
+    .addEventListener('click', async () => {
+
+      try {
+
+        const text = await navigator.clipboard.readText();
+
+        term.paste(text);
+
+      } catch (err) {
+        console.error(err);
+      }
+    });
+
+  document.getElementById('ctx-clear')
+    .addEventListener('click', () => {
+      term.clear();
+    });
+
+  // Prevent duplicate paste bubbling
+  setTimeout(() => {
+
+    if (term.textarea) {
+
+      term.textarea.addEventListener('paste', (e) => {
+        e.stopPropagation();
+      });
+    }
+
+  }, 500);
+
+  connect();
+</script>
+
+</body>
+</html>