File size: 8,094 Bytes
8746765 8a7b312 8746765 b4f85f2 7a00178 f266945 7a00178 3b4fa66 e92b993 8746765 e92b993 8746765 b4f85f2 8746765 b4f85f2 8746765 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 |
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>Pong</title>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<!-- Socket.IO client library (CDN) -->
<script src="https://cdn.socket.io/4.5.4/socket.io.min.js"></script>
<style>
html, body { margin:0; height:100%; background:#111; color:#eee; font-family: system-ui, sans-serif; }
#overlay {
position: fixed; inset: 0; display: flex; align-items: center; justify-content: center;
background: rgba(0,0,0,0.8); z-index: 9999; transition: opacity 200ms ease;
}
#overlay.hidden { opacity: 0; pointer-events: none; }
.spinner {
width: 64px; height: 64px; border: 6px solid #444; border-top-color: #09f; border-radius: 50%;
animation: spin 0.9s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
#statusText { margin-top: 12px; color: #aaa; text-align: center; font-size: 14px; white-space: pre-line; }
#app { padding: 16px; }
button { padding: 8px 12px; background:#09f; color:#fff; border:none; border-radius:8px; cursor:pointer; }
button:disabled { opacity: .5; cursor: not-allowed; }
img#frame { image-rendering: pixelated; width: 240px; height: 240px; background:#222; display:block; margin-top:12px; }
</style>
</head>
<body>
<div id="overlay">
<div>
<div class="spinner"></div>
<div id="statusText">Loading model…</div>
</div>
</div>
<div id="app">
<h1>Pong</h1>
<div style="margin-bottom: 12px;">
<label style="display: block; margin-bottom: 8px;">
FPS: <input type="number" id="fpsInput" value="12" min="1" max="30" step="1" style="width: 60px; padding: 4px; margin-left: 8px;" />
<span style="color: #aaa; font-size: 12px; margin-left: 8px;">frames per second</span>
</label>
<label style="display: block; margin-bottom: 8px;">
Steps: <input type="number" id="stepsInput" value="4" min="1" max="10" step="1" style="width: 60px; padding: 4px; margin-left: 8px;" />
<span style="color: #aaa; font-size: 12px; margin-left: 8px;">diffusion steps</span>
</label>
</div>
<div>
<button id="startBtn" disabled>Start Stream</button>
<button id="stopBtn" disabled>Stop Stream</button>
</div>
<img id="frame" alt="Latest frame" />
<div id="actionDisplay" style="margin-top: 12px; font-size: 16px; font-family: monospace;">
Action: <span id="actionValue">-</span>
</div>
<div id="fpsDisplay" style="margin-top: 8px; font-size: 16px; font-family: monospace;">
Achieved FPS: <span id="fpsValue">-</span>
</div>
<div id="waitingMessage" style="margin-top: 12px; padding: 8px; background: #333; border-radius: 4px; display: none; color: #ffa500;">
⏳ Another player is currently using the stream. Please wait for them to finish.
</div>
<div style="margin-top: 12px; padding: 8px; background: #222; border-radius: 4px; border-left: 3px solid #09f; color: #ccc; font-size: 13px;">
💡 <strong>Tip:</strong> Click anywhere on this page to enable keyboard controls. Use <strong>↑/↓ Arrow Keys</strong> or <strong>W/S</strong> to control the paddle.
</div>
<div style="margin-top: 12px; font-size: 14px; color: #aaa; line-height: 1.5;">
This demo uses a small transformer model trained with rectified flow matching to simulate Pong game frames conditioned on user inputs. The model generates 24×24 pixel frames in real-time using diffusion sampling with configurable steps. Performance targets ~16 FPS with 4 diffusion steps on GPU hardware.
</div>
</div>
<script>
// If you serve socket.io client at /socket.io/socket.io.js you can use global io():
const socket = io({ transports: ['websocket', 'polling'] });
const overlay = document.getElementById('overlay');
const statusText = document.getElementById('statusText');
const startBtn = document.getElementById('startBtn');
const stopBtn = document.getElementById('stopBtn');
const frameImg = document.getElementById('frame');
function setStatus(isReady) {
if (!isReady) {
// Model is still loading
overlay.classList.remove('hidden');
startBtn.disabled = true;
stopBtn.disabled = true;
statusText.textContent = 'Loading model…';
} else {
// Server is ready and available
overlay.classList.add('hidden');
startBtn.disabled = false;
stopBtn.disabled = false;
statusText.textContent = 'Ready';
}
}
// Initial state: assume not ready (show spinner)
setStatus(false);
socket.on('connect', () => {
// server will immediately emit 'server_status' with current readiness
console.log('connected');
});
// Backend broadcasts readiness changes
socket.on('server_status', (payload) => {
const ready = !!(payload && payload.ready);
console.log('Server status:', { ready });
setStatus(ready);
});
// Start/stop controls
startBtn.addEventListener('click', () => {
const fps = parseInt(document.getElementById('fpsInput').value) || 16;
const n_steps = parseInt(document.getElementById('stepsInput').value) || 1;
socket.emit('start_stream', { n_steps: n_steps, cfg: 0.0, fps: fps, clamp: true });
});
stopBtn.addEventListener('click', () => {
socket.emit('stop_stream');
});
const actionValue = document.getElementById('actionValue');
const fpsValue = document.getElementById('fpsValue');
const waitingMessage = document.getElementById('waitingMessage');
// Handle stream busy/available events
socket.on('stream_busy', (data) => {
console.log('Stream is busy:', data);
waitingMessage.style.display = 'block';
startBtn.disabled = true;
});
socket.on('stream_available', (data) => {
console.log('Stream is available:', data);
waitingMessage.style.display = 'none';
startBtn.disabled = false;
});
// Incoming frames
socket.on('frame', ({ frame, frame_index, action, fps }) => {
frameImg.src = `data:image/png;base64,${frame}`;
// Display action: 0=NOOP, 1=UP, 2=DOWN
const actionLabels = ['START','NOOP', 'UP', 'DOWN'];
actionValue.textContent = `${action} (${actionLabels[action] || 'UNKNOWN'})`;
// Display achieved FPS
if (fps !== undefined) {
fpsValue.textContent = fps.toFixed(1);
}
});
socket.on('error', (e) => {
console.warn('server error', e);
if (e && e.message) {
console.error('Server error message:', e.message);
// Show error message to user
if (e.message.includes('Another player') || e.message.includes('not the current player')) {
waitingMessage.style.display = 'block';
waitingMessage.textContent = '⏳ ' + e.message;
startBtn.disabled = true;
} else {
alert('Error: ' + e.message);
}
}
});
// Keyboard controls for paddle
// Actions: 0=NOOP, 1=UP, 2=DOWN
document.addEventListener('keydown', (e) => {
let action = null;
if (e.key === 'ArrowUp' || e.key === 'w' || e.key === 'W') {
action = 2; // UP
} else if (e.key === 'ArrowDown' || e.key === 's' || e.key === 'S') {
action = 3; // DOWN
}
if (action !== null) {
socket.emit('action', { action });
e.preventDefault();
}
});
document.addEventListener('keyup', (e) => {
if (['ArrowUp', 'ArrowDown', 'w', 'W', 's', 'S'].includes(e.key)) {
socket.emit('action', { action: 1 }); // NOOP when key released
e.preventDefault();
}
});
</script>
</body>
</html>
|