Spaces:

proti0070
/

Android-studio

Runtime error

App Files Files Community

proti0070 commited on 24 days ago

Commit

67b521d

verified ·

1 Parent(s): 1bca427

Update start.sh

Browse files

Files changed (1) hide show

start.sh +197 -190

start.sh CHANGED Viewed

@@ -12,21 +12,25 @@ rm -f /tmp/.X99-lock /tmp/.X11-unix/X99
 echo "Starting Xvfb..."
 Xvfb :99 -screen 0 1280x800x16 -ac &
-sleep 2
 echo "Starting Openbox..."
 openbox --replace &
-sleep 1
 echo "Starting Android Studio..."
 /opt/android-studio/bin/studio.sh &
 echo "Starting VNC..."
-x11vnc -display :99 -nopw -forever -shared -rfbport 5900 -defer 20 -wait 20 -q &
-# Create custom index.html for HF root path
-echo "Setting up web interface at root path..."
 cat > /usr/share/novnc/index.html << 'EOF'
 <!DOCTYPE html>
 <html>
@@ -34,117 +38,27 @@ cat > /usr/share/novnc/index.html << 'EOF'
     <title>Android Studio on Hugging Face</title>
     <meta charset="utf-8">
     <style>
-        body {
-            margin: 0;
-            padding: 20px;
-            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif;
-            background: #1e1e1e;
-            color: #fff;
-            height: 100vh;
-            display: flex;
-            flex-direction: column;
-        }
-        .header {
-            display: flex;
-            justify-content: space-between;
-            align-items: center;
-            padding: 10px 20px;
-            background: #2d2d2d;
-            border-radius: 8px;
-            margin-bottom: 20px;
-            border: 1px solid #3ddc84;
-        }
-        .title {
-            display: flex;
-            align-items: center;
-            gap: 10px;
-        }
-        .title h1 {
-            margin: 0;
-            font-size: 1.5rem;
-            color: #3ddc84;
-        }
-        .badge {
-            background: #3ddc84;
-            color: #000;
-            padding: 4px 12px;
-            border-radius: 20px;
-            font-size: 0.8rem;
-            font-weight: bold;
-        }
-        .controls {
-            display: flex;
-            gap: 10px;
-        }
-        button {
-            background: #3ddc84;
-            color: #000;
-            border: none;
-            padding: 8px 16px;
-            border-radius: 4px;
-            cursor: pointer;
-            font-weight: bold;
-            transition: all 0.3s;
-        }
-        button:hover {
-            background: #2ba860;
-            transform: translateY(-2px);
-        }
-        button.secondary {
-            background: transparent;
-            color: #3ddc84;
-            border: 1px solid #3ddc84;
-        }
-        button.secondary:hover {
-            background: rgba(61, 220, 132, 0.1);
-        }
-        .vnc-container {
-            flex: 1;
-            background: #2d2d2d;
-            border-radius: 8px;
-            overflow: hidden;
-            border: 1px solid #444;
-            position: relative;
-        }
-        #vnc {
-            width: 100%;
-            height: 100%;
-        }
-        .loading {
-            position: absolute;
-            top: 50%;
-            left: 50%;
-            transform: translate(-50%, -50%);
-            text-align: center;
-            color: #666;
-        }
-        .footer {
-            margin-top: 20px;
-            text-align: center;
-            color: #666;
-            font-size: 0.8rem;
-        }
-        .footer a {
-            color: #3ddc84;
-            text-decoration: none;
-        }
-        .footer a:hover {
-            text-decoration: underline;
-        }
-        .status {
-            display: inline-block;
-            width: 10px;
-            height: 10px;
-            border-radius: 50%;
-            margin-right: 8px;
-        }
-        .status.connected {
-            background: #3ddc84;
-            box-shadow: 0 0 10px #3ddc84;
-        }
-        .status.disconnected {
-            background: #ff4444;
-        }
     </style>
 </head>
 <body>
@@ -154,66 +68,56 @@ cat > /usr/share/novnc/index.html << 'EOF'
             <h1>🤖 Android Studio</h1>
         </div>
         <div class="controls">
-            <span style="display: flex; align-items: center; margin-right: 10px;">
-                <span class="status disconnected" id="status-indicator"></span>
                 <span id="status-text">Disconnected</span>
-            </span>
-            <button onclick="rfb.viewOnly(!rfb.viewOnly)" class="secondary" id="viewOnlyBtn">View Only: OFF</button>
-            <button onclick="rfb.sendCtrlAltDel()" class="secondary">Ctrl+Alt+Del</button>
-            <button onclick="rfb.disconnect(); setTimeout(() => connect(), 1000);">Reconnect</button>
         </div>
     </div>
     <div class="vnc-container">
         <div id="vnc"></div>
-        <div class="loading" id="loading">Connecting to Android Studio...</div>
     </div>
     <div class="footer">
-        <p>⚡ Running on Hugging Face Spaces | <a href="https://developer.android.com/studio" target="_blank">Android Studio Docs</a> | <a href="#" onclick="toggleFullscreen()">Fullscreen</a></p>
     </div>
     <script src="vnc.js"></script>
     <script>
         let rfb;
         const loading = document.getElementById('loading');
-        const statusIndicator = document.getElementById('status-indicator');
         const statusText = document.getElementById('status-text');
         const viewOnlyBtn = document.getElementById('viewOnlyBtn');
-        function connect() {
-            loading.style.display = 'block';
-            // Use relative path for HF Spaces
-            const host = window.location.hostname;
-            const port = window.location.port || (window.location.protocol === 'https:' ? 443 : 80);
-            const path = window.location.pathname.replace(/\/$/, '') + '/websockify';
-            rfb = new RFB(document.getElementById('vnc'), `wss://${host}:${port}${path}`, {
-                credentials: { password: '' },
-                shared: true,
-                viewOnly: false,
-                resizeSession: true
-            });
-            rfb.addEventListener('connect', () => {
-                loading.style.display = 'none';
-                statusIndicator.className = 'status connected';
-                statusText.textContent = 'Connected';
-                console.log('Connected to Android Studio');
-            });
-            rfb.addEventListener('disconnect', () => {
-                loading.style.display = 'block';
-                loading.textContent = 'Disconnected. Reconnecting...';
-                statusIndicator.className = 'status disconnected';
-                statusText.textContent = 'Disconnected';
-                setTimeout(connect, 5000);
-            });
-            rfb.addEventListener('clipboard', (e) => {
-                console.log('Clipboard event:', e.detail.text);
-            });
         }
         function toggleFullscreen() {
@@ -225,58 +129,161 @@ cat > /usr/share/novnc/index.html << 'EOF'
             }
         }
-        // Connect on page load
         window.onload = connect;
-        // Handle resize
         window.addEventListener('resize', () => {
-            if (rfb) {
-                rfb.resizeSession();
-            }
         });
     </script>
 </body>
 </html>
 EOF
-# Create simple info page
-cat > /usr/share/novnc/info.html << 'EOF'
 <!DOCTYPE html>
 <html>
 <head>
-    <title>Android Studio Info</title>
     <style>
-        body { font-family: Arial; background: #1e1e1e; color: #fff; padding: 40px; }
-        .info { background: #2d2d2d; padding: 20px; border-radius: 8px; border-left: 4px solid #3ddc84; }
-        h1 { color: #3ddc84; }
-        code { background: #000; padding: 2px 6px; border-radius: 4px; }
     </style>
 </head>
 <body>
-    <h1>📱 Android Studio on Hugging Face</h1>
-    <div class="info">
-        <h2>Space Information</h2>
-        <ul>
-            <li><strong>Status:</strong> Running</li>
-            <li><strong>Android Studio:</strong> 2023.3.1.18</li>
-            <li><strong>VNC Port:</strong> 5900</li>
-            <li><strong>WebSocket:</strong> /websockify</li>
-        </ul>
-        <h2>Quick Tips</h2>
-        <ul>
-            <li>Use <code>Ctrl+Alt+Del</code> button for system menu</li>
-            <li>Toggle view-only mode to prevent accidental input</li>
-            <li>Fullscreen available for better experience</li>
-            <li>Clipboard support is enabled</li>
-        </ul>
-        <p><a href="/" style="color: #3ddc84;">← Back to main interface</a></p>
-    </div>
 </body>
 </html>
 EOF
-echo "Starting noVNC with root path interface..."
 cd /usr/share/novnc
-websockify --web=/usr/share/novnc 7860 localhost:5900

 echo "Starting Xvfb..."
 Xvfb :99 -screen 0 1280x800x16 -ac &
+sleep 3
 echo "Starting Openbox..."
 openbox --replace &
+sleep 2
 echo "Starting Android Studio..."
 /opt/android-studio/bin/studio.sh &
+sleep 5
 echo "Starting VNC..."
+x11vnc -display :99 -nopw -forever -shared -rfbport 5900 -defer 10 -wait 10 -q &
+# Wait for VNC to be ready
+sleep 3
+# Create the main index.html with correct HF Spaces WebSocket path
 cat > /usr/share/novnc/index.html << 'EOF'
 <!DOCTYPE html>
 <html>
     <title>Android Studio on Hugging Face</title>
     <meta charset="utf-8">
     <style>
+        body { margin: 0; padding: 0; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; background: #1e1e1e; color: #fff; height: 100vh; display: flex; flex-direction: column; }
+        .header { display: flex; justify-content: space-between; align-items: center; padding: 10px 20px; background: #2d2d2d; border-bottom: 2px solid #3ddc84; }
+        .title h1 { margin: 0; font-size: 1.3rem; color: #3ddc84; }
+        .badge { background: #3ddc84; color: #000; padding: 2px 8px; border-radius: 12px; font-size: 0.7rem; font-weight: bold; margin-left: 10px; }
+        .controls { display: flex; gap: 8px; align-items: center; }
+        button { background: #3ddc84; color: #000; border: none; padding: 6px 12px; border-radius: 4px; cursor: pointer; font-weight: bold; font-size: 0.8rem; }
+        button.secondary { background: transparent; color: #3ddc84; border: 1px solid #3ddc84; }
+        button:disabled { opacity: 0.5; cursor: not-allowed; }
+        .vnc-container { flex: 1; background: #000; position: relative; overflow: hidden; }
+        #vnc { width: 100%; height: 100%; }
+        .status { display: flex; align-items: center; gap: 5px; margin-right: 15px; font-size: 0.8rem; }
+        .status-dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }
+        .status-dot.connected { background: #3ddc84; animation: pulse 2s infinite; }
+        .status-dot.connecting { background: #ffaa00; }
+        .status-dot.disconnected { background: #ff4444; }
+        @keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(61, 220, 132, 0.7); } 70% { box-shadow: 0 0 0 6px rgba(61, 220, 132, 0); } }
+        .loading { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); text-align: center; z-index: 10; background: rgba(30,30,30,0.9); padding: 20px; border-radius: 8px; border: 1px solid #3ddc84; }
+        .spinner { border: 3px solid #f3f3f3; border-top: 3px solid #3ddc84; border-radius: 50%; width: 30px; height: 30px; animation: spin 1s linear infinite; margin: 0 auto 10px; }
+        @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }
+        .footer { text-align: center; padding: 5px; background: #2d2d2d; font-size: 0.7rem; color: #888; }
+        .footer a { color: #3ddc84; text-decoration: none; }
     </style>
 </head>
 <body>
             <h1>🤖 Android Studio</h1>
         </div>
         <div class="controls">
+            <div class="status">
+                <span class="status-dot disconnected" id="status-dot"></span>
                 <span id="status-text">Disconnected</span>
+            </div>
+            <button onclick="toggleViewOnly()" class="secondary" id="viewOnlyBtn" disabled>View Only: OFF</button>
+            <button onclick="sendCtrlAltDel()" class="secondary" id="ctrlAltDelBtn" disabled>Ctrl+Alt+Del</button>
+            <button onclick="reconnect()" id="reconnectBtn">Reconnect</button>
         </div>
     </div>
     <div class="vnc-container">
         <div id="vnc"></div>
+        <div class="loading" id="loading">
+            <div class="spinner"></div>
+            <div id="loading-text">Connecting to Android Studio...</div>
+        </div>
     </div>
     <div class="footer">
+        ⚡ Running on Hugging Face Spaces | <a href="#" onclick="toggleFullscreen()">Fullscreen</a> | <span id="ws-info"></span>
     </div>
     <script src="vnc.js"></script>
     <script>
         let rfb;
+        let retryCount = 0;
+        const maxRetries = 10;
         const loading = document.getElementById('loading');
+        const loadingText = document.getElementById('loading-text');
+        const statusDot = document.getElementById('status-dot');
         const statusText = document.getElementById('status-text');
         const viewOnlyBtn = document.getElementById('viewOnlyBtn');
+        const ctrlAltDelBtn = document.getElementById('ctrlAltDelBtn');
+        const wsInfo = document.getElementById('ws-info');
+        function setStatus(state, message) {
+            statusDot.className = 'status-dot ' + state;
+            statusText.textContent = message;
+        }
+        function toggleViewOnly() {
+            if (rfb) {
+                rfb.viewOnly = !rfb.viewOnly;
+                viewOnlyBtn.textContent = 'View Only: ' + (rfb.viewOnly ? 'ON' : 'OFF');
+            }
+        }
+        function sendCtrlAltDel() {
+            if (rfb) rfb.sendCtrlAltDel();
         }
         function toggleFullscreen() {
             }
         }
+        function reconnect() {
+            if (rfb) rfb.disconnect();
+            setTimeout(connect, 1000);
+        }
+        function connect() {
+            loading.style.display = 'block';
+            setStatus('connecting', 'Connecting...');
+            viewOnlyBtn.disabled = true;
+            ctrlAltDelBtn.disabled = true;
+            // CORRECT WebSocket URL for Hugging Face Spaces
+            const protocol = window.location.protocol === 'https:' ? 'wss:' : 'ws:';
+            const host = window.location.host;
+            // For HF Spaces, the WebSocket endpoint is at /proxy/7860/websockify
+            const wsUrl = `${protocol}//${host}/proxy/7860/websockify`;
+            wsInfo.textContent = `Endpoint: /proxy/7860/websockify`;
+            console.log('Connecting to:', wsUrl);
+            try {
+                rfb = new RFB(document.getElementById('vnc'), wsUrl, {
+                    credentials: { password: '' },
+                    shared: true,
+                    viewOnly: false,
+                    resizeSession: true,
+                    wsProtocols: ['binary']
+                });
+                rfb.addEventListener('connect', () => {
+                    loading.style.display = 'none';
+                    setStatus('connected', 'Connected');
+                    viewOnlyBtn.disabled = false;
+                    ctrlAltDelBtn.disabled = false;
+                    retryCount = 0;
+                    console.log('Connected successfully');
+                });
+                rfb.addEventListener('disconnect', (e) => {
+                    loading.style.display = 'block';
+                    setStatus('disconnected', 'Disconnected');
+                    viewOnlyBtn.disabled = true;
+                    ctrlAltDelBtn.disabled = true;
+                    if (retryCount < maxRetries) {
+                        retryCount++;
+                        const delay = Math.min(1000 * retryCount, 10000);
+                        loadingText.textContent = `Reconnecting in ${delay/1000}s... (${retryCount}/${maxRetries})`;
+                        setTimeout(connect, delay);
+                    } else {
+                        loadingText.textContent = 'Failed to connect. Click Reconnect.';
+                    }
+                });
+                rfb.addEventListener('securityfailure', (e) => {
+                    console.error('Security failure:', e.detail);
+                    loadingText.textContent = 'Security error: ' + (e.detail.message || 'Unknown');
+                });
+            } catch (error) {
+                console.error('Connection error:', error);
+                loadingText.textContent = 'Connection error: ' + error.message;
+                setStatus('disconnected', 'Error');
+            }
+        }
         window.onload = connect;
         window.addEventListener('resize', () => {
+            if (rfb) setTimeout(() => rfb.resizeSession(), 100);
         });
     </script>
 </body>
 </html>
 EOF
+# Create a diagnostic page
+cat > /usr/share/novnc/diagnostic.html << 'EOF'
 <!DOCTYPE html>
 <html>
 <head>
+    <title>HF Space Diagnostic</title>
     <style>
+        body { background: #1e1e1e; color: #fff; font-family: monospace; padding: 20px; }
+        .success { color: #3ddc84; }
+        .error { color: #ff4444; }
+        pre { background: #2d2d2d; padding: 15px; border-radius: 5px; overflow: auto; }
+        button { background: #3ddc84; color: #000; border: none; padding: 10px 20px; border-radius: 4px; cursor: pointer; margin: 5px; }
     </style>
 </head>
 <body>
+    <h1>🔧 Hugging Face Space Diagnostic Tool</h1>
+    <button onclick="testWebSocket()">Test WebSocket Connection</button>
+    <button onclick="checkVNC()">Check VNC Server</button>
+    <div id="output"></div>
+    <script>
+        const output = document.getElementById('output');
+        function log(msg, isError = false) {
+            const div = document.createElement('div');
+            div.className = isError ? 'error' : 'success';
+            div.textContent = msg;
+            output.appendChild(div);
+        }
+        async function testWebSocket() {
+            output.innerHTML = '<pre>Testing WebSocket connections...</pre>';
+            const protocol = window.location.protocol === 'https:' ? 'wss:' : 'ws:';
+            const host = window.location.host;
+            const endpoints = [
+                `/proxy/7860/websockify`,
+                `/websockify`,
+                `wss://${host}:7860/websockify`
+            ];
+            for (const endpoint of endpoints) {
+                const url = endpoint.startsWith('ws') ? endpoint : `${protocol}//${host}${endpoint}`;
+                log(`\nTesting: ${url}`);
+                try {
+                    const ws = new WebSocket(url);
+                    const result = await new Promise((resolve, reject) => {
+                        ws.onopen = () => { ws.close(); resolve('✅ SUCCESS'); };
+                        ws.onerror = () => { reject('❌ FAILED'); };
+                        setTimeout(() => reject('⏱️ TIMEOUT'), 3000);
+                    });
+                    log(`  ${result}`);
+                } catch (e) {
+                    log(`  ${e}`, true);
+                }
+            }
+        }
+        async function checkVNC() {
+            output.innerHTML += '<pre>\nChecking VNC server...</pre>';
+            log('Checking if VNC is running on port 5900...');
+            try {
+                const response = await fetch('/proxy/5900/');
+                log('✅ VNC port is accessible');
+            } catch (e) {
+                log('❌ VNC port not accessible', true);
+            }
+        }
+    </script>
 </body>
 </html>
 EOF
+echo "Starting noVNC with HF Spaces configuration..."
 cd /usr/share/novnc
+# Bind to all interfaces and use correct port
+websockify --web=/usr/share/novnc 0.0.0.0:7860 localhost:5900