Spaces:

GenieLamp
/

Terminal

Running

App Files Files Community

clone3 commited on May 17

Commit

5ac74dc

verified ·

1 Parent(s): 1856f3a

Init

Browse files

Files changed (6) hide show

Dockerfile +25 -0
README.md +11 -11
package.json +14 -0
public/index.html +32 -0
public/script.js +48 -0
src/server.js +87 -0

Dockerfile ADDED Viewed

	@@ -0,0 +1,25 @@

+# Use Node.js 18 base image
+FROM node:18
+# Install build tools for node-pty
+RUN apt-get update && apt-get install -y \
+  python3 \
+  make \
+  g++ \
+  && rm -rf /var/lib/apt/lists/*
+# Set working directory
+WORKDIR /app
+# Copy package.json and install dependencies
+COPY package.json .
+RUN npm install
+# Copy application files
+COPY . .
+# Expose port 7860
+EXPOSE 7860
+# Start the application
+CMD ["npm", "start"]

README.md CHANGED Viewed

@@ -1,11 +1,11 @@
----
-title: Terminal
-emoji: 📚
-colorFrom: purple
-colorTo: blue
-sdk: docker
-pinned: false
-license: mit
----
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

+---
+title: Terminal
+emoji: 💻
+colorFrom: gray
+colorTo: gray
+sdk: docker
+pinned: false
+license: mit
+---
+Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

package.json ADDED Viewed

	@@ -0,0 +1,14 @@

+{
+  "name": "web-terminal",
+  "version": "1.0.1",
+  "description": "Web terminal using WebSocket in Hugging Face Space",
+  "main": "src/server.js",
+  "scripts": {
+    "start": "node src/server.js"
+  },
+  "dependencies": {
+    "express": "^4.21.0",
+    "ws": "^8.18.0",
+    "node-pty": "^1.0.0"
+  }
+}

public/index.html ADDED Viewed

	@@ -0,0 +1,32 @@

+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Web Terminal</title>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/css/xterm.css" />
+  <script src="https://cdn.jsdelivr.net/npm/[email protected]/lib/xterm.js"></script>
+  <script src="https://cdn.jsdelivr.net/npm/[email protected]/lib/xterm-addon-fit.js"></script>
+  <style>
+    /* Ensure the HTML and body take up the full viewport */
+    html, body {
+      margin: 0;
+      padding: 0;
+      width: 100%;
+      height: 100vh;
+      overflow: hidden;
+      background: #000; /* Ensure background is black to match terminal */
+    }
+    /* Make the terminal container full-screen */
+    #terminal {
+      width: 100%;
+      height: 100vh;
+      display: block;
+    }
+  </style>
+</head>
+<body>
+  <div id="terminal"></div>
+  <script src="/script.js"></script>
+</body>
+</html>

public/script.js ADDED Viewed

	@@ -0,0 +1,48 @@

+document.addEventListener('DOMContentLoaded', () => {
+  const term = new Terminal({
+    cursorBlink: true,
+    theme: {
+      background: '#000000', // Ensure terminal background is black
+    },
+  });
+  const fitAddon = new FitAddon.FitAddon();
+  term.loadAddon(fitAddon);
+  term.open(document.getElementById('terminal'));
+  term.write('Connecting to server...\r\n');
+  // Connect to WebSocket server
+  const protocol = window.location.protocol === 'https:' ? 'wss:' : 'ws:';
+  const ws = new WebSocket(`${protocol}//${window.location.host}/`);
+  ws.onopen = () => {
+    console.log('Connected to WebSocket server');
+    term.write('Connected! Type commands below.\r\n');
+    fitAddon.fit(); // Fit terminal to container on connection
+  };
+  ws.onmessage = (event) => {
+    term.write(event.data);
+  };
+  term.onData((data) => {
+    ws.send(data);
+  });
+  ws.onclose = () => {
+    console.log('WebSocket connection closed');
+    term.write('\r\nConnection closed.\r\n');
+  };
+  ws.onerror = (error) => {
+    console.error('WebSocket error:', error);
+    term.write('\r\nWebSocket error occurred.\r\n');
+  };
+  // Resize terminal on window resize
+  window.addEventListener('resize', () => {
+    fitAddon.fit();
+  });
+  // Initial fit after opening terminal
+  fitAddon.fit();
+});

src/server.js ADDED Viewed

	@@ -0,0 +1,87 @@

+const WebSocket = require('ws');
+const pty = require('node-pty');
+const http = require('http');
+const express = require('express');
+const path = require('path');
+console.log('===== Application Startup =====');
+// Initialize Express for serving static files and health check
+const app = express();
+// Serve static files from the public directory
+app.use(express.static(path.join(__dirname, '../public')));
+// Health check endpoint
+app.get('/health', (req, res) => {
+  res.status(200).json({ status: 'OK', timestamp: new Date().toISOString() });
+});
+// Create HTTP server
+const server = http.createServer(app);
+// Initialize WebSocket server
+const wss = new WebSocket.Server({ server });
+wss.on('connection', (ws) => {
+  console.log('New WebSocket client connected');
+  try {
+    // Spawn a new shell (bash) for the connection
+    const shell = pty.spawn('bash', [], {
+      name: 'xterm-color',
+      env: process.env,
+    });
+    // Relay terminal output to the client
+    shell.onData((data) => {
+      ws.send(data);
+    });
+    // Handle input from the client
+    ws.on('message', (message) => {
+      shell.write(message.toString());
+    });
+    // Handle terminal exit
+    shell.onExit(({ exitCode }) => {
+      console.log(`Shell exited with code ${exitCode}`);
+      ws.close();
+    });
+    // Handle WebSocket close
+    ws.on('close', () => {
+      shell.kill();
+      console.log('WebSocket client disconnected');
+    });
+  } catch (error) {
+    console.error('Error spawning shell:', error.message);
+    ws.send(`Error: Failed to spawn shell - ${error.message}\r\n`);
+    ws.close();
+  }
+});
+wss.on('error', (error) => {
+  console.error('WebSocket server error:', error.message);
+});
+// Start the server on port 7860
+const PORT = process.env.PORT || 7860;
+server.listen(PORT, () => {
+  console.log(`Server running on port ${PORT}`);
+  console.log(`Health check available at http://localhost:${PORT}/health`);
+});
+server.on('error', (error) => {
+  console.error('HTTP server error:', error.message);
+});
+// Log Node.js and dependency versions for debugging
+console.log(`Node.js version: ${process.version}`);
+try {
+  console.log(`ws version: ${require('ws/package.json').version}`);
+  console.log(`node-pty version: ${require('node-pty/package.json').version}`);
+  console.log(`express version: ${require('express/package.json').version}`);
+} catch (error) {
+  console.error('Error loading dependency versions:', error.message);
+};