Phantom Desktop UI

📸 Screenshots

Modern dashboard showcasing system stats, key features, API endpoints, and technology stack

🚀 Overview

Phantom Desktop UI is a cutting-edge application that bridges the gap between Large Language Models (LLMs)—such as OpenAI, Ollama, and others—and your desktop environment. By enabling LLMs to interact with your desktop, this tool unlocks unparalleled productivity, automation, and collaboration opportunities.

✨ Key Features

• Universal LLM Integration: Seamlessly connects with any LLM (OpenAI, Ollama, etc.) to expose desktop capabilities.
• Secure Desktop Control: Empowers LLMs to interact with files, applications, and system resources while maintaining robust security protocols.
• Multi-LLM Collaboration: Supports simultaneous connections of multiple LLMs to a single desktop session for enhanced collaborative workflows.
• Real-Time Interaction: Facilitates seamless human-AI collaboration by allowing users to log into desktop sessions and work alongside LLMs.
• Modern and Responsive UI: Built with Angular 15 and Tailwind CSS to deliver a sleek, intuitive, and responsive user experience.
• Python FastAPI Backend: Ensures efficient communication between the UI and desktop environment, enabling smooth integration with LLMs.

🛠️ Technology Stack

Frontend

• Angular 15 - Modern web framework
• Angular Material - UI component library
• Tailwind CSS - Utility-first CSS framework
• TypeScript - Type-safe JavaScript
• RxJS - Reactive programming

Backend

• Python 3.9+ - Programming language
• FastAPI - Modern, fast web framework
• Uvicorn - ASGI server
• Pydantic - Data validation

📁 Project Structure

phantom-desktop-ui/
├── src/                        # Frontend source code
│   ├── app/
│   │   ├── components/        # Angular components
│   │   │   ├── dashboard/    # Dashboard component
│   │   │   ├── file-manager/ # File management component
│   │   │   ├── header/       # Navigation header
│   │   │   ├── login/        # Authentication component
│   │   │   └── settings/     # Settings component
│   │   ├── services/         # Angular services
│   │   │   ├── api.service.ts      # API communication
│   │   │   ├── auth.service.ts     # Authentication
│   │   │   └── theme.service.ts    # Theme management
│   │   ├── app.module.ts           # Main Angular module
│   │   └── app-routing.module.ts   # Routing configuration
│   ├── assets/               # Static assets
│   ├── styles.css           # Global styles
│   └── index.html           # HTML entry point
├── desktop_api.py           # Python FastAPI backend
├── test_api.py             # Backend tests
├── angular.json            # Angular configuration
├── package.json            # Node dependencies
├── requirements.txt        # Python dependencies
├── tsconfig.json          # TypeScript configuration
├── tailwind.config.js     # Tailwind configuration
├── Dockerfile             # Frontend Docker image
├── Dockerfile.backend     # Backend Docker image
└── docker-compose.yml     # Docker Compose configuration

🚦 Getting Started

Prerequisites

• Node.js 16+ and npm
• Python 3.9+
• Angular CLI (install with npm install -g @angular/cli)

Installation

1. Clone the repository

   git clone https://github.com/Artifact-Virtual/PHANTOMui.git
   cd PHANTOMui

2. Install Frontend Dependencies

   npm install

3. Install Backend Dependencies

   pip install -r requirements.txt

Running the Application

Option 1: Run Both Services Separately

1. Start the Backend Server

   python3 desktop_api.py

   The API will be available at http://localhost:8000 API Documentation: http://localhost:8000/docs

2. Start the Frontend Development Server

   ng serve

   The application will be available at http://localhost:4200

Option 2: Using Docker Compose

docker-compose up

This will start both frontend and backend services.

Default Credentials

For testing purposes, use these default credentials:

• Username: admin or user
• Password: password

⚠️ Note: Change these credentials in production environments!

📚 API Documentation

The backend provides a comprehensive REST API with the following endpoints:

Desktop Operations

• GET /desktop/list - List all files on desktop
• GET /desktop/file?path={path} - Download a file
• POST /desktop/upload - Upload a file
• DELETE /desktop/delete?path={path} - Delete a file
• GET /desktop/search?query={query} - Search for files
• GET /desktop/preview?path={path} - Preview file contents
• POST /desktop/zip?path={path} - Create ZIP archive
• POST /desktop/unzip?path={path} - Extract ZIP archive
• POST /desktop/set-wallpaper?path={path} - Set desktop wallpaper

System Information

• GET /admin/system-info - Get system information
• GET /health - Health check endpoint

LLM Integration

• GET /llm/describe-path?path={path} - Describe a file/directory for LLM

Tools

• POST /tools/add?a={number}&b={number} - Example addition tool

🧪 Testing

Backend Tests

Run the Python backend tests:

python3 test_api.py

Or using pytest:

pytest test_api.py -v

Frontend Tests

Run Angular tests:

ng test

🔒 Security Features

• Path Traversal Prevention: All file operations are restricted to the Desktop directory
• File Type Validation: Executable files (.exe, .sh, .bat, etc.) are blocked
• CORS Configuration: Controlled cross-origin resource sharing
• Input Sanitization: All inputs are validated and sanitized
• Secure Error Handling: Detailed errors logged, generic messages to clients

🎨 Features Showcase

Dashboard

• Real-time system information
• Quick statistics (files, uploads, connections)
• Quick action buttons
• Responsive card-based layout

File Manager

• File upload/download
• File deletion with confirmation
• Search functionality
• Preview support for text files
• Clean table-based interface

Settings

• Dark/Light theme toggle
• API configuration
• User preferences
• About information

Responsive Design

• Mobile-friendly interface
• Adaptive layouts
• Touch-optimized controls

🔧 Configuration

Backend Configuration

Edit desktop_api.py to configure:

• BASE_DIR - Base directory for file operations (default: Desktop)
• ALLOWED_EXTENSIONS - Allowed file types
• MAX_FILE_SIZE - Maximum upload size

Frontend Configuration

Edit src/app/services/api.service.ts to configure:

• baseUrl - Backend API URL (default: http://localhost:8000)

📦 Building for Production

Frontend

ng build --configuration production

The build artifacts will be stored in the dist/ directory.

Backend

The backend can be run directly or containerized using the provided Dockerfile.

🐳 Docker Deployment

Build and Run with Docker Compose

docker-compose up --build

Individual Container Build

# Frontend
docker build -t phantom-ui .

# Backend
docker build -f Dockerfile.backend -t phantom-api .

🤝 Contributing

We welcome contributions from the community! Please see our Contributing Guidelines for detailed instructions.

Development Workflow

1. Fork the repository
2. Create a feature branch (git checkout -b feature/AmazingFeature)
3. Commit your changes (git commit -m 'Add some AmazingFeature')
4. Push to the branch (git push origin feature/AmazingFeature)
5. Open a Pull Request

📝 License

Phantom Desktop UI is open-source software licensed under the MIT License.

🙏 Acknowledgments

• Angular Team for the excellent framework
• FastAPI for the modern Python web framework
• Tailwind CSS for the utility-first CSS framework
• Material Design for the component library

📞 Support

For issues, questions, or suggestions:

• Create an issue on GitHub
• Contact the development team

---

Phantom Desktop UI - Redefining desktop interaction by enabling seamless collaboration between humans and AI, paving the way for innovative workflows and enhanced productivity.

🎯 Roadmap

• Add authentication with JWT tokens
• Implement WebSocket for real-time updates
• Add support for multiple desktop sessions
• Enhance LLM integration capabilities
• Add file preview for images and PDFs
• Implement drag-and-drop file upload
• Add internationalization (i18n)
• Create mobile application
• Add plugin system for extensions

📊 System Requirements

Minimum Requirements

• OS: Windows 10/11, macOS 10.15+, Ubuntu 20.04+
• RAM: 4GB
• CPU: Dual-core processor
• Disk Space: 500MB

Recommended Requirements

• OS: Windows 11, macOS 12+, Ubuntu 22.04+
• RAM: 8GB+
• CPU: Quad-core processor
• Disk Space: 1GB