Spaces:

dokii
/

cli-sim-1

Running

App Files Files Community

dokii commited on 22 days ago

Commit

16d238f

verified ·

1 Parent(s): 2a2081e

Add 3 files

Browse files

Files changed (3) hide show

README.md +7 -5
index.html +480 -19
prompts.txt +1 -0

README.md CHANGED Viewed

@@ -1,10 +1,12 @@
 ---
-title: Cli Sim 1
-emoji: 🏢
-colorFrom: blue
-colorTo: indigo
 sdk: static
 pinned: false
 ---
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

 ---
+title: cli-sim-1
+emoji: ⚛️
+colorFrom: red
+colorTo: red
 sdk: static
 pinned: false
+tags:
+  - QwenSite
 ---
+Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

index.html CHANGED Viewed

@@ -1,19 +1,480 @@
-<!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>CLI Terminal Simulator</title>
+  <script src="https://cdn.tailwindcss.com"></script>
+  <link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@300;400;500;700&display=swap" rel="stylesheet">
+  <style>
+    body, html {
+      font-family: 'JetBrains Mono', monospace;
+      background-color: #0d1117;
+      color: #c9d1d9;
+      height: 100%;
+      margin: 0;
+      padding: 0;
+      overflow: hidden;
+    }
+    #output-area {
+      height: calc(100vh - 40px);
+      overflow-y: auto;
+      padding: 1rem;
+      font-size: 0.9rem;
+      white-space: pre-wrap;
+      display: flex;
+      flex-direction: column;
+    }
+    #input-line {
+      display: flex;
+      align-items: center;
+      padding: 0 1rem 1rem 1rem;
+      color: #58a6ff;
+    }
+    #prompt {
+      color: #58a6ff;
+    }
+    #command-input {
+      background: transparent;
+      border: none;
+      color: #c9d1d9;
+      outline: none;
+      font-family: 'JetBrains Mono', monospace;
+      font-size: 0.9rem;
+      width: 100%;
+    }
+    .cursor {
+      display: inline-block;
+      width: 8px;
+      height: 1em;
+      background-color: #c9d1d9;
+      animation: blink 1s step-end infinite;
+      margin-left: 2px;
+    }
+    @keyframes blink {
+      0%, 100% { opacity: 1; }
+      50% { opacity: 0; }
+    }
+    .cmd-user { color: #58a6ff; }
+    .cmd-output { color: #c9d1d9; margin-left: 2rem; white-space: pre-wrap; }
+    .cmd-error { color: #f85149; margin-left: 2rem; }
+    .highlight-green { color: #3fb950; }
+    .highlight-blue { color: #58a6ff; }
+    .highlight-yellow { color: #d29922; }
+  </style>
+</head>
+<body class="text-sm leading-tight">
+  <div id="app" class="h-full flex flex-col">
+    <!-- Output Area -->
+    <div id="output-area" class="flex-1 font-mono"></div>
+    <!-- Input Area -->
+    <div id="input-line">
+      <span id="prompt" class="mr-2">$</span>
+      <div id="command-input" contenteditable="true" spellcheck="false" autofocus></div>
+      <div class="cursor"></div>
+    </div>
+  </div>
+  <script>
+    document.addEventListener('DOMContentLoaded', () => {
+      const outputArea = document.getElementById('output-area');
+      const inputLine = document.getElementById('command-input');
+      const prompt = document.getElementById('prompt');
+      // Virtual File System (in-memory)
+      let vfs = {
+        '/': {
+          type: 'directory',
+          children: {
+            home: {
+              type: 'directory',
+              children: {
+                user: {
+                  type: 'directory',
+                  children: {
+                    'profile.txt': {
+                      type: 'file',
+                      content: 'Hello, I am a simulated user profile.\nEnjoy the CLI experience!'
+                    },
+                    'notes.md': {
+                      type: 'file',
+                      content: '# My Notes\n- This is a simulated file system.\n- Try using `ls`, `cd`, `cat`, etc.'
+                    }
+                  }
+                }
+              }
+            },
+            'README.txt': {
+              type: 'file',
+              content: 'Welcome to the Web CLI Simulator v1.0\nType `help` to see available commands.'
+            }
+          }
+        }
+      };
+      // State
+      let currentPath = '/';
+      let commandHistory = JSON.parse(localStorage.getItem('cli-command-history') || '[]');
+      let historyIndex = -1; // For navigating history with arrow keys
+      let lastCommandScroll = null;
+      // DOM Utility Functions
+      const appendOutput = (text, className = '') => {
+        const line = document.createElement('div');
+        line.className = className;
+        line.textContent = text;
+        outputArea.appendChild(line);
+        outputArea.scrollTop = outputArea.scrollHeight; // Auto-scroll
+        lastCommandScroll = outputArea.scrollHeight;
+      };
+      const clearOutput = () => {
+        outputArea.innerHTML = '';
+      };
+      // Path Utilities
+      const resolvePath = (path) => {
+        if (path === '/') return '/';
+        const parts = path.split('/').filter(p => p && p !== '.');
+        const resolved = [];
+        for (const part of parts) {
+          if (part === '..') {
+            resolved.pop();
+          } else {
+            resolved.push(part);
+          }
+        }
+        return '/' + resolved.join('/');
+      };
+      const navigateToPath = (path) => {
+        const resolved = resolvePath(path);
+        const segments = resolved.slice(1).split('/').filter(p => p);
+        let curr = vfs['/'];
+        for (const seg of segments) {
+          if (curr.type !== 'directory' || !curr.children[seg]) {
+            return null;
+          }
+          curr = curr.children[seg];
+        }
+        currentPath = resolved;
+        return curr;
+      };
+      const listDirectory = (dir) => {
+        const items = Object.keys(dir.children || {});
+        return items.length > 0 ? items.join('  ') : '(empty)';
+      };
+      const getCurrentDir = () => {
+        return navigateToPath(currentPath);
+      };
+      const getAbsolutePath = (path) => {
+        if (path.startsWith('/')) {
+          return path;
+        }
+        return resolvePath(currentPath + '/' + path);
+      };
+      // Commands
+      const commands = {
+        help: () => {
+          const helpText = `
+Available commands:
+  help              - Show this help message
+  ls [dir]          - List files and directories
+  cd <dir>          - Change directory (.. for parent)
+  cat <file>        - Display file content
+  echo <text>       - Print the given text
+  clear             - Clear the terminal screen
+  mkdir <dir>       - Create a new directory
+  touch <file>      - Create an empty file
+  rm <file/dir>     - Remove a file or directory
+  pwd               - Print working directory
+  history           - Show command history
+  whoami            - Display current user
+  date              - Show current date and time
+  `.trim();
+          appendOutput(helpText, 'cmd-output');
+        },
+        ls: (args) => {
+          const targetPath = args.length > 0 ? getAbsolutePath(args[0]) : currentPath;
+          const dir = navigateToPath(targetPath);
+          if (!dir) {
+            appendOutput(`ls: cannot access '${args[0]}': No such file or directory`, 'cmd-error');
+            return;
+          }
+          if (dir.type !== 'directory') {
+            appendOutput(`ls: ${args[0]} is not a directory`, 'cmd-error');
+            return;
+          }
+          const items = Object.keys(dir.children || {});
+          if (items.length === 0) {
+            appendOutput('(empty)', 'cmd-output');
+            return;
+          }
+          const formatted = items.map(name => {
+            const item = dir.children[name];
+            if (item.type === 'directory') return `<span class="highlight-blue">${name}/</span>`;
+            return name;
+          }).join('  ');
+          const div = document.createElement('div');
+          div.className = 'cmd-output';
+          div.innerHTML = formatted;
+          outputArea.appendChild(div);
+          outputArea.scrollTop = outputArea.scrollHeight;
+        },
+        cd: (args) => {
+          if (args.length === 0) {
+            appendOutput('cd: missing operand', 'cmd-error');
+            return;
+          }
+          const target = args[0];
+          const newPath = getAbsolutePath(target);
+          const dir = navigateToPath(newPath);
+          if (!dir) {
+            appendOutput(`cd: no such directory: ${target}`, 'cmd-error');
+            return;
+          }
+          if (dir.type !== 'directory') {
+            appendOutput(`cd: not a directory: ${target}`, 'cmd-error');
+            return;
+          }
+          currentPath = newPath;
+          updatePrompt();
+        },
+        cat: (args) => {
+          if (args.length === 0) {
+            appendOutput('cat: missing file operand', 'cmd-error');
+            return;
+          }
+          const filePath = getAbsolutePath(args[0]);
+          const segments = filePath.slice(1).split('/').filter(p => p);
+          let curr = vfs['/'];
+          for (let i = 0; i < segments.length - 1; i++) {
+            if (curr.type !== 'directory' || !curr.children[segments[i]]) {
+              appendOutput(`cat: ${args[0]}: No such file or directory`, 'cmd-error');
+              return;
+            }
+            curr = curr.children[segments[i]];
+          }
+          const fileName = segments[segments.length - 1];
+          if (!curr.children[fileName]) {
+            appendOutput(`cat: ${args[0]}: No such file or directory`, 'cmd-error');
+            return;
+          }
+          const file = curr.children[fileName];
+          if (file.type !== 'file') {
+            appendOutput(`cat: ${args[0]}: Is a directory`, 'cmd-error');
+            return;
+          }
+          appendOutput(file.content, 'cmd-output');
+        },
+        echo: (args) => {
+          appendOutput(args.join(' '), 'cmd-output');
+        },
+        clear: () => {
+          clearOutput();
+        },
+        mkdir: (args) => {
+          if (args.length === 0) {
+            appendOutput('mkdir: missing operand', 'cmd-error');
+            return;
+          }
+          const dirPath = getAbsolutePath(args[0]);
+          const segments = dirPath.slice(1).split('/').filter(p => p);
+          const dirName = segments.pop();
+          let parentPath = '/' + segments.join('/');
+          if (segments.length === 0) parentPath = '/';
+          const parentDir = navigateToPath(parentPath);
+          if (!parentDir) {
+            appendOutput(`mkdir: cannot create directory '${args[0]}': No such file or directory`, 'cmd-error');
+            return;
+          }
+          if (parentDir.children[dirName]) {
+            appendOutput(`mkdir: cannot create directory '${args[0]}': File exists`, 'cmd-error');
+            return;
+          }
+          parentDir.children[dirName] = {
+            type: 'directory',
+            children: {}
+          };
+          appendOutput('', 'cmd-output'); // Blank line
+        },
+        touch: (args) => {
+          if (args.length === 0) {
+            appendOutput('touch: missing file operand', 'cmd-error');
+            return;
+          }
+          const filePath = getAbsolutePath(args[0]);
+          const segments = filePath.slice(1).split('/').filter(p => p);
+          const fileName = segments.pop();
+          let parentPath = '/' + segments.join('/');
+          if (segments.length === 0) parentPath = '/';
+          const parentDir = navigateToPath(parentPath);
+          if (!parentDir) {
+            appendOutput(`touch: cannot create file '${args[0]}': No such file or directory`, 'cmd-error');
+            return;
+          }
+          if (parentDir.children[fileName] && parentDir.children[fileName].type === 'directory') {
+            appendOutput(`touch: cannot create file '${args[0]}': Is a directory`, 'cmd-error');
+            return;
+          }
+          parentDir.children[fileName] = {
+            type: 'file',
+            content: ''
+          };
+          appendOutput('', 'cmd-output'); // Blank line
+        },
+        rm: (args) => {
+          if (args.length === 0) {
+            appendOutput('rm: missing operand', 'cmd-error');
+            return;
+          }
+          const targetPath = getAbsolutePath(args[0]);
+          const segments = targetPath.slice(1).split('/').filter(p => p);
+          const name = segments.pop();
+          let parentPath = '/' + segments.join('/');
+          if (segments.length === 0) parentPath = '/';
+          const parentDir = navigateToPath(parentPath);
+          if (!parentDir) {
+            appendOutput(`rm: failed to delete '${args[0]}': No such file or directory`, 'cmd-error');
+            return;
+          }
+          if (!parentDir.children[name]) {
+            appendOutput(`rm: cannot remove '${args[0]}': No such file or directory`, 'cmd-error');
+            return;
+          }
+          delete parentDir.children[name];
+          appendOutput('', 'cmd-output');
+        },
+        pwd: () => {
+          appendOutput(currentPath, 'cmd-output');
+        },
+        history: () => {
+          commandHistory.forEach((cmd, i) => {
+            appendOutput(`${i+1}  ${cmd}`, 'cmd-output');
+          });
+        },
+        whoami: () => {
+          appendOutput('web-user', 'cmd-output');
+        },
+        date: () => {
+          const now = new Date();
+          appendOutput(now.toString(), 'cmd-output');
+        }
+      };
+      // Update prompt to show current path
+      const updatePrompt = () => {
+        prompt.textContent = `$ ${currentPath}`;
+      };
+      // Command Execution
+      const executeCommand = (input) => {
+        const trimmed = input.trim();
+        if (!trimmed) return;
+        // Add to history
+        commandHistory.push(trimmed);
+        localStorage.setItem('cli-command-history', JSON.stringify(commandHistory));
+        historyIndex = -1; // Reset history index
+        // Show command in output
+        appendOutput(`$ ${trimmed}`, 'cmd-user');
+        // Parse command
+        const [cmd, ...args] = trimmed.split(' ');
+        const commandFunc = commands[cmd];
+        if (commandFunc) {
+          commandFunc(args);
+        } else {
+          appendOutput(`Command not found: ${cmd}. Type 'help' for a list of commands.`, 'cmd-error');
+        }
+      };
+      // Event Listeners
+      inputLine.addEventListener('keydown', (e) => {
+        if (e.key === 'Enter') {
+          e.preventDefault();
+          const value = inputLine.textContent || '';
+          executeCommand(value);
+          inputLine.textContent = '';
+        } else if (e.key === 'ArrowUp') {
+          e.preventDefault();
+          if (historyIndex < commandHistory.length - 1) {
+            historyIndex++;
+            inputLine.textContent = commandHistory[commandHistory.length - 1 - historyIndex] || '';
+            inputLine.selectionStart = inputLine.selectionEnd = inputLine.textContent.length;
+          }
+        } else if (e.key === 'ArrowDown') {
+          e.preventDefault();
+          if (historyIndex > 0) {
+            historyIndex--;
+            inputLine.textContent = commandHistory[commandHistory.length - 1 - historyIndex] || '';
+          } else if (historyIndex === 0) {
+            historyIndex = -1;
+            inputLine.textContent = '';
+          }
+        }
+      });
+      // Focus input on click
+      outputArea.addEventListener('click', () => {
+        inputLine.focus();
+      });
+      // Initial welcome
+      appendOutput('Welcome to the Web CLI Simulator!', 'cmd-output');
+      appendOutput('Type `help` to get started.', 'cmd-output');
+      updatePrompt();
+      inputLine.focus();
+      // Save VFS to localStorage every 2 seconds (optional persistence)
+      setInterval(() => {
+        try {
+          localStorage.setItem('cli-vfs', JSON.stringify(vfs));
+        } catch (e) {
+          console.warn('Could not save VFS to localStorage:', e);
+        }
+      }, 2000);
+      // Load VFS from localStorage on start
+      try {
+        const saved = localStorage.getItem('cli-vfs');
+        if (saved) {
+          vfs = JSON.parse(saved);
+        }
+      } catch (e) {
+        console.warn('Could not load VFS from localStorage:', e);
+      }
+    });
+  </script>
+<p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-qwensite.hf.space/logo.svg" alt="qwensite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-qwensite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >QwenSite</a> - 🧬 <a href="https://enzostvs-qwensite.hf.space?remix=dokii/cli-sim-1" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
+</html>

prompts.txt ADDED Viewed

	@@ -0,0 +1 @@

+ ## Stand-alone Web App CLI Simulation (React+Three.js) ### 1. Introduction This document outlines the specifications for a stand-alone web application designed to simulate a Command Line Interface (CLI) experience within a web browser. The application will be purely conceptual, requiring no backend infrastructure, and will leverage client-side technologies to mimic the look, feel, and basic functionality of a CLI. ### 2. Requirements * **Stand-alone:** The application must function entirely within the user's browser without requiring a server or backend connection. * **Web-based:** Accessible via a standard web browser. * **CLI Simulation:** Visually and interactively emulate a terminal or command-line environment. * **No Backend:** All processing, state management, and data storage must occur client-side. * **Conceptual:** Focus on demonstrating the *concept* of a web-based CLI, not on replicating a full-featured OS or complex application. ### 3. User Interface (UI) * **Layout:** A single-page application layout. * **Output Area:** A scrollable, read-only area displaying command history, outputs, and system messages. This area should visually resemble terminal output (e.g., monospace font, distinct text colors for commands, output, and errors). * **Input Area:** A text input field at the bottom, mimicking a command prompt, where users can type commands. It should display a prompt symbol (e.g., `> ` or `$ `). * **Cursor:** A blinking cursor within the input field. * **Styling:** CSS will be used to achieve a terminal-like appearance, including: * Background color (e.g., dark grey, black). * Text color (e.g., light grey, green, white). * Monospace font (e.g., Consolas, Monaco, Courier New). * Input field styling to blend with the output area. * **Interactivity:** * User input is captured upon pressing `Enter`. * The entered command is displayed in the output area, prefixed with the prompt symbol. * The input field is cleared after `Enter` is pressed. * Command output (or error messages) is displayed below the entered command in the output area. * Support for basic navigation (e.g., up/down arrow keys for command history). ### 4. Core Functionality & Data Flow * **Client-Side Technologies:** * **HTML:** Structure of the page (output area, input field). * **CSS:** Styling for terminal appearance. * **JavaScript:** Handles all logic: * **Input Parsing:** Capturing and parsing user commands. * **Command Mapping:** Associating command strings with specific JavaScript functions. * **State Management:** Maintaining application state (e.g., current directory, simulated file system, command history) in memory. * **Output Rendering:** Dynamically updating the DOM to display results. * **Virtual File System (VFS):** * A JavaScript object (e.g., nested objects or a Map) will simulate a file system structure (directories and files). * Operations like `ls`, `cd`, `cat`, `mkdir`, `touch`, `rm` will be implemented as JavaScript functions that manipulate this in-memory VFS. * **Command Execution Flow:** 1. User types a command in the input field and presses `Enter`. 2. JavaScript captures the command string. 3. The command is added to the command history and displayed in the output area. 4. The command string is parsed to identify the command name and its arguments. 5. A command handler function (mapped via JavaScript object/Map) is invoked. 6. The handler function interacts with the VFS and application state. 7. The handler function returns output (text, error message, or status). 8. The returned output is displayed in the output area. 9. Application state is updated if necessary. * **State Persistence (Optional):** * `localStorage` or `sessionStorage` can be used to persist the VFS and command history across page reloads, enhancing the simulation. ### 5. Conceptual Technical Insights * **No Backend:** Emphasizes client-side JavaScript's capability to manage complex application logic and state without server intervention. This is achieved through in-memory data structures and browser storage APIs. * **SQL-like Conceptualization:** While no actual SQL database is used, the *logic* of data manipulation (storing command history, managing state, representing file structures) can be conceptually mapped to SQL operations (INSERT, SELECT, UPDATE, DELETE on tables like `CommandHistory`, `AppState`, `FileSystem`). This provides a familiar paradigm for understanding data management, even in a client-side context. * **Libraries:** Libraries like `xterm.js` can be integrated to provide a more robust and feature-rich terminal emulation experience, handling rendering, input, and advanced terminal behaviors. * **SPA Architecture:** The application will follow a Single Page Application pattern, where JavaScript dynamically updates the content of a single HTML page, eliminating the need for full page reloads and providing a seamless user experience. ### 6. Example Commands (Conceptual) * `help`: Displays a list of available commands. * `ls`: Lists files and directories in the current VFS directory. * `cd <directory>`: Changes the current directory in the VFS. * `cat <file>`: Displays the content of a file in the VFS. * `echo <text>`: Prints the provided text to the output. * `clear`: Clears the output area. * `history`: Displays the command history.