Upload 42 files

35aaa09 verified about 1 month ago

23.2 kB

	"""
	GUI Interface for Docking@HOME

	A modern web-based GUI using FastAPI and HTML/JavaScript for molecular docking.
	Integrates with AutoDock backend for real molecular docking simulations.

	Authors: OpenPeer AI, Riemann Computing Inc., Bleunomics, Andrew Magdy Kamal
	"""

	import os
	import json
	import asyncio
	from pathlib import Path
	from typing import Optional, List, Dict
	from datetime import datetime

	from fastapi import FastAPI, File, UploadFile, HTTPException, WebSocket, WebSocketDisconnect
	from fastapi.responses import HTMLResponse, FileResponse, JSONResponse
	from fastapi.staticfiles import StaticFiles
	from pydantic import BaseModel
	import uvicorn

	# Import the docking server components
	from .server import job_manager, initialize_server

	# Initialize FastAPI app
	app = FastAPI(
	title="Docking@HOME",
	description="Distributed Molecular Docking Platform",
	version="1.0.0"
	)

	# Data models
	class DockingJobRequest(BaseModel):
	num_runs: int = 100
	use_gpu: bool = True
	job_name: Optional[str] = None

	class JobStatus(BaseModel):
	job_id: str
	status: str
	progress: float
	message: str

	# Active WebSocket connections
	active_websockets: List[WebSocket] = []

	# File upload directory
	UPLOAD_DIR = Path("uploads")
	UPLOAD_DIR.mkdir(exist_ok=True)

	RESULTS_DIR = Path("results")
	RESULTS_DIR.mkdir(exist_ok=True)


	@app.get("/", response_class=HTMLResponse)
	async def root():
	"""Serve the main GUI page"""
	html_content = """
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Docking@HOME - Molecular Docking Platform</title>
	<style>
	* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	}

	body {
	font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
	background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
	min-height: 100vh;
	padding: 20px;
	}

	.container {
	max-width: 1200px;
	margin: 0 auto;
	}

	.header {
	background: white;
	padding: 30px;
	border-radius: 15px;
	box-shadow: 0 10px 40px rgba(0,0,0,0.1);
	margin-bottom: 30px;
	text-align: center;
	}

	.header h1 {
	color: #667eea;
	font-size: 2.5em;
	margin-bottom: 10px;
	}

	.header p {
	color: #666;
	font-size: 1.1em;
	}

	.authors {
	color: #888;
	font-size: 0.9em;
	margin-top: 10px;
	}

	.main-content {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 20px;
	}

	.card {
	background: white;
	padding: 25px;
	border-radius: 15px;
	box-shadow: 0 10px 40px rgba(0,0,0,0.1);
	}

	.card h2 {
	color: #667eea;
	margin-bottom: 20px;
	font-size: 1.5em;
	}

	.form-group {
	margin-bottom: 20px;
	}

	label {
	display: block;
	margin-bottom: 8px;
	color: #333;
	font-weight: 600;
	}

	input[type="file"],
	input[type="number"],
	select {
	width: 100%;
	padding: 12px;
	border: 2px solid #e0e0e0;
	border-radius: 8px;
	font-size: 1em;
	transition: border-color 0.3s;
	}

	input:focus, select:focus {
	outline: none;
	border-color: #667eea;
	}

	.checkbox-group {
	display: flex;
	align-items: center;
	gap: 10px;
	}

	input[type="checkbox"] {
	width: 20px;
	height: 20px;
	cursor: pointer;
	}

	.btn {
	background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
	color: white;
	padding: 15px 30px;
	border: none;
	border-radius: 8px;
	font-size: 1.1em;
	font-weight: 600;
	cursor: pointer;
	width: 100%;
	transition: transform 0.2s, box-shadow 0.2s;
	}

	.btn:hover {
	transform: translateY(-2px);
	box-shadow: 0 5px 20px rgba(102, 126, 234, 0.4);
	}

	.btn:disabled {
	opacity: 0.5;
	cursor: not-allowed;
	}

	.job-list {
	max-height: 400px;
	overflow-y: auto;
	}

	.job-item {
	background: #f8f9fa;
	padding: 15px;
	border-radius: 8px;
	margin-bottom: 15px;
	border-left: 4px solid #667eea;
	}

	.job-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 10px;
	}

	.job-id {
	font-weight: 600;
	color: #333;
	}

	.status-badge {
	padding: 5px 15px;
	border-radius: 20px;
	font-size: 0.85em;
	font-weight: 600;
	}

	.status-pending {
	background: #ffeaa7;
	color: #d63031;
	}

	.status-running {
	background: #74b9ff;
	color: #0984e3;
	}

	.status-completed {
	background: #55efc4;
	color: #00b894;
	}

	.progress-bar {
	width: 100%;
	height: 8px;
	background: #e0e0e0;
	border-radius: 4px;
	overflow: hidden;
	margin-top: 10px;
	}

	.progress-fill {
	height: 100%;
	background: linear-gradient(90deg, #667eea 0%, #764ba2 100%);
	transition: width 0.3s ease;
	}

	.stats {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 15px;
	margin-top: 20px;
	}

	.stat-card {
	background: #f8f9fa;
	padding: 15px;
	border-radius: 8px;
	text-align: center;
	}

	.stat-value {
	font-size: 2em;
	font-weight: 700;
	color: #667eea;
	}

	.stat-label {
	color: #666;
	font-size: 0.9em;
	margin-top: 5px;
	}

	.notification {
	position: fixed;
	top: 20px;
	right: 20px;
	background: white;
	padding: 20px;
	border-radius: 8px;
	box-shadow: 0 5px 20px rgba(0,0,0,0.2);
	display: none;
	min-width: 300px;
	animation: slideIn 0.3s ease;
	}

	@keyframes slideIn {
	from {
	transform: translateX(400px);
	opacity: 0;
	}
	to {
	transform: translateX(0);
	opacity: 1;
	}
	}

	.notification.success {
	border-left: 4px solid #00b894;
	}

	.notification.error {
	border-left: 4px solid #d63031;
	}

	.footer {
	text-align: center;
	color: white;
	margin-top: 30px;
	padding: 20px;
	}

	.full-width {
	grid-column: 1 / -1;
	}
	</style>
	</head>
	<body>
	<div class="container">
	<div class="header">
	<h1>🧬 Docking@HOME</h1>
	<p>Distributed Molecular Docking Platform</p>
	<div class="authors">
	OpenPeer AI · Riemann Computing Inc. · Bleunomics · Andrew Magdy Kamal
	</div>
	</div>

	<div class="main-content">
	<div class="card">
	<h2>📤 Submit Docking Job</h2>
	<form id="dockingForm">
	<div class="form-group">
	<label>Ligand File (PDBQT)</label>
	<input type="file" id="ligandFile" accept=".pdbqt,.pdb" required>
	</div>

	<div class="form-group">
	<label>Receptor File (PDBQT)</label>
	<input type="file" id="receptorFile" accept=".pdbqt,.pdb" required>
	</div>

	<div class="form-group">
	<label>Number of Runs</label>
	<input type="number" id="numRuns" value="100" min="1" max="1000" required>
	</div>

	<div class="form-group checkbox-group">
	<input type="checkbox" id="useGPU" checked>
	<label for="useGPU">Use GPU Acceleration</label>
	</div>

	<button type="submit" class="btn" id="submitBtn">
	🚀 Start Docking
	</button>
	</form>
	</div>

	<div class="card">
	<h2>📊 Active Jobs</h2>
	<div class="job-list" id="jobList">
	<p style="text-align: center; color: #999; padding: 20px;">
	No jobs yet. Submit a docking job to get started!
	</p>
	</div>
	</div>

	<div class="card full-width">
	<h2>📈 System Statistics</h2>
	<div class="stats">
	<div class="stat-card">
	<div class="stat-value" id="totalJobs">0</div>
	<div class="stat-label">Total Jobs</div>
	</div>
	<div class="stat-card">
	<div class="stat-value" id="completedJobs">0</div>
	<div class="stat-label">Completed</div>
	</div>
	<div class="stat-card">
	<div class="stat-value" id="avgTime">0s</div>
	<div class="stat-label">Avg. Time</div>
	</div>
	</div>
	</div>
	</div>

	<div class="footer">
	<p>Support: andrew@bleunomics.com \| Issues: <a href="https://huggingface.co/OpenPeerAI/DockingAtHOME/discussions" style="color: white;">HuggingFace</a></p>
	</div>
	</div>

	<div class="notification" id="notification">
	<div id="notificationMessage"></div>
	</div>

	<script>
	const API_BASE = window.location.origin;

	// WebSocket connection for real-time updates
	let ws = null;

	function connectWebSocket() {
	ws = new WebSocket(`ws://${window.location.host}/ws`);

	ws.onmessage = (event) => {
	const data = JSON.parse(event.data);
	updateJobList();
	updateStats();
	};

	ws.onerror = () => {
	setTimeout(connectWebSocket, 5000);
	};
	}

	// Submit docking job
	document.getElementById('dockingForm').addEventListener('submit', async (e) => {
	e.preventDefault();

	const ligandFile = document.getElementById('ligandFile').files[0];
	const receptorFile = document.getElementById('receptorFile').files[0];
	const numRuns = document.getElementById('numRuns').value;
	const useGPU = document.getElementById('useGPU').checked;

	if (!ligandFile \|\| !receptorFile) {
	showNotification('Please select both ligand and receptor files', 'error');
	return;
	}

	const submitBtn = document.getElementById('submitBtn');
	submitBtn.disabled = true;
	submitBtn.textContent = '⏳ Uploading...';

	try {
	// Upload ligand
	const ligandFormData = new FormData();
	ligandFormData.append('file', ligandFile);
	const ligandResponse = await fetch(`${API_BASE}/upload`, {
	method: 'POST',
	body: ligandFormData
	});
	const ligandData = await ligandResponse.json();

	// Upload receptor
	const receptorFormData = new FormData();
	receptorFormData.append('file', receptorFile);
	const receptorResponse = await fetch(`${API_BASE}/upload`, {
	method: 'POST',
	body: receptorFormData
	});
	const receptorData = await receptorResponse.json();

	// Submit job
	const jobResponse = await fetch(`${API_BASE}/api/jobs`, {
	method: 'POST',
	headers: {
	'Content-Type': 'application/json'
	},
	body: JSON.stringify({
	ligand_file: ligandData.filename,
	receptor_file: receptorData.filename,
	num_runs: parseInt(numRuns),
	use_gpu: useGPU
	})
	});

	const jobData = await jobResponse.json();

	showNotification(`Job submitted successfully! ID: ${jobData.job_id}`, 'success');

	// Reset form
	document.getElementById('dockingForm').reset();

	// Update job list
	updateJobList();
	updateStats();

	} catch (error) {
	showNotification('Error submitting job: ' + error.message, 'error');
	} finally {
	submitBtn.disabled = false;
	submitBtn.textContent = '🚀 Start Docking';
	}
	});

	// Update job list
	async function updateJobList() {
	try {
	const response = await fetch(`${API_BASE}/api/jobs`);
	const jobs = await response.json();

	const jobList = document.getElementById('jobList');

	if (jobs.length === 0) {
	jobList.innerHTML = '<p style="text-align: center; color: #999; padding: 20px;">No jobs yet. Submit a docking job to get started!</p>';
	return;
	}

	jobList.innerHTML = jobs.map(job => `
	<div class="job-item">
	<div class="job-header">
	<span class="job-id">${job.job_id}</span>
	<span class="status-badge status-${job.status}">${job.status.toUpperCase()}</span>
	</div>
	<div style="font-size: 0.9em; color: #666;">
	<div>Ligand: ${job.ligand_file}</div>
	<div>Receptor: ${job.receptor_file}</div>
	<div>Runs: ${job.num_runs} \| GPU: ${job.use_gpu ? 'Yes' : 'No'}</div>
	</div>
	<div class="progress-bar">
	<div class="progress-fill" style="width: ${job.progress * 100}%"></div>
	</div>
	<div style="margin-top: 5px; font-size: 0.85em; color: #666;">
	Progress: ${(job.progress * 100).toFixed(1)}%
	</div>
	</div>
	`).join('');

	} catch (error) {
	console.error('Error updating job list:', error);
	}
	}

	// Update statistics
	async function updateStats() {
	try {
	const response = await fetch(`${API_BASE}/api/stats`);
	const stats = await response.json();

	document.getElementById('totalJobs').textContent = stats.total_jobs;
	document.getElementById('completedJobs').textContent = stats.completed_jobs;
	document.getElementById('avgTime').textContent = stats.avg_time + 's';

	} catch (error) {
	console.error('Error updating stats:', error);
	}
	}

	// Show notification
	function showNotification(message, type) {
	const notification = document.getElementById('notification');
	const messageElement = document.getElementById('notificationMessage');

	messageElement.textContent = message;
	notification.className = `notification ${type}`;
	notification.style.display = 'block';

	setTimeout(() => {
	notification.style.display = 'none';
	}, 5000);
	}

	// Initialize
	connectWebSocket();
	updateJobList();
	updateStats();

	// Refresh job list every 2 seconds
	setInterval(() => {
	updateJobList();
	updateStats();
	}, 2000);
	</script>
	</body>
	</html>
	"""
	return HTMLResponse(content=html_content)


	@app.post("/upload")
	async def upload_file(file: UploadFile = File(...)):
	"""Upload ligand or receptor file"""
	try:
	file_path = UPLOAD_DIR / file.filename

	with open(file_path, "wb") as f:
	content = await file.read()
	f.write(content)

	return {"filename": file.filename, "path": str(file_path)}

	except Exception as e:
	raise HTTPException(status_code=500, detail=str(e))


	@app.post("/api/jobs")
	async def create_job(
	ligand_file: str,
	receptor_file: str,
	num_runs: int = 100,
	use_gpu: bool = True,
	job_name: Optional[str] = None
	):
	"""Create a new docking job with real AutoDock integration"""
	try:
	# Submit job to the docking server
	job_id = await job_manager.submit_job(
	ligand_file=ligand_file,
	receptor_file=receptor_file,
	num_runs=num_runs,
	use_gpu=use_gpu,
	job_name=job_name
	)

	# Start broadcasting updates
	asyncio.create_task(broadcast_job_updates(job_id))

	return job_manager.get_job(job_id)

	except Exception as e:
	raise HTTPException(status_code=500, detail=str(e))


	@app.get("/api/jobs")
	async def get_jobs():
	"""Get all jobs"""
	return job_manager.get_all_jobs()


	@app.get("/api/jobs/{job_id}")
	async def get_job(job_id: str):
	"""Get specific job"""
	job = job_manager.get_job(job_id)

	if not job:
	raise HTTPException(status_code=404, detail="Job not found")

	return job


	@app.get("/api/stats")
	async def get_stats():
	"""Get system statistics"""
	return job_manager.get_stats()


	@app.websocket("/ws")
	async def websocket_endpoint(websocket: WebSocket):
	"""WebSocket for real-time updates"""
	await websocket.accept()
	active_websockets.append(websocket)

	try:
	while True:
	data = await websocket.receive_text()
	# Echo back or handle commands
	await websocket.send_json({"status": "connected"})
	except WebSocketDisconnect:
	active_websockets.remove(websocket)
	except Exception as e:
	if websocket in active_websockets:
	active_websockets.remove(websocket)


	async def broadcast_job_updates(job_id: str):
	"""Broadcast job progress to all connected WebSocket clients"""

	while True:
	await asyncio.sleep(0.5) # Update every 500ms

	job = job_manager.get_job(job_id)

	if not job:
	break

	# Send update to all connected clients
	for ws in active_websockets[:]: # Copy list to avoid modification during iteration
	try:
	await ws.send_json({
	"type": "job_update",
	"job_id": job_id,
	"status": job["status"],
	"progress": job["progress"]
	})
	except Exception:
	# Remove disconnected clients
	if ws in active_websockets:
	active_websockets.remove(ws)

	# Stop broadcasting if job is complete or failed
	if job["status"] in ["completed", "failed"]:
	break


	@app.on_event("startup")
	async def startup_event():
	"""Initialize the server on startup"""
	await initialize_server()


	def start_gui(host: str = "localhost", port: int = 8080):
	"""Start the GUI server with AutoDock integration"""
	print(f"""
	╔═══════════════════════════════════════════════════════════════╗
	║ Docking@HOME GUI Server ║
	║ Real AutoDock Integration with GPU Support ║
	║ ║
	║ 🌐 Server: http://{host}:{port} ║
	║ 🧬 AutoDock: Enabled (GPU acceleration supported) ║
	║ 📧 Support: andrew@bleunomics.com ║
	║ 🤗 Issues: https://huggingface.co/OpenPeerAI/DockingAtHOME ║
	║ ║
	║ Open your browser to start docking! ║
	╚═══════════════════════════════════════════════════════════════╝
	""")

	uvicorn.run(app, host=host, port=port, log_level="info")


	if __name__ == "__main__":
	start_gui()