Based on this week’s meeting, this week and the following week I will modify my drawing page, deploy it to a virtual server, and bind it to a domain so that other people can access it—so I can collect the data I need to train my AI.

First, I will modify the original JavaScript file and add an “Upload” button in the HTML to send the collected data back to the server.

<button class="action-btn" onclick="uploadData()">
  <i data-lucide="upload"></i> Upload Data
</button>

async function uploadData() {
    const toSave = [...allSessions];
    if (isRecording && session.length > 0) toSave.push([...session]);
    if (toSave.length === 0) { alert('No data to upload!'); return; }

    // Only send JSON action data, not screenshots
    const payload = toSave.map(sess => 
        sess.map(step => {
            const meta = { ...step };
            delete meta.snapshot;
            return meta;
        })
    );

    try {
        const res = await fetch('<https://webserverUrl/upload>', {
            method: 'POST',
            headers: { 'Content-Type': 'application/json' },
            body: JSON.stringify({ sessions: payload })
        });
        if (res.ok) alert('Uploaded! Thank you for contributing data.');
        else alert('Upload failed, please try again.');
    } catch (e) {
        alert('Network error: ' + e.message);
    }
}

Result after the change:

Next is setting up a virtual server. Since I previously set up my own virtual server for the Connected Devices class, I just need to install some relevant programs.

Create a JavaScript file in the newly created folder:

const express = require('express');
const cors = require('cors');
const fs = require('fs');
const path = require('path');

const app = express();
const PORT = 3000;
const DATA_DIR = path.join(__dirname, 'data');

// Ensure the data folder exists
if (!fs.existsSync(DATA_DIR)) fs.mkdirSync(DATA_DIR);

app.use(cors());
app.use(express.json({ limit: '50mb' }));

// Receive drawing data
app.post('/upload', (req, res) => {
    const { sessions } = req.body;

    if (!sessions || sessions.length === 0) {
        return res.status(400).json({ error: 'No data received' });
    }

    const timestamp = Date.now();
    const filename = `session_${timestamp}.json`;
    const filepath = path.join(DATA_DIR, filename);

    fs.writeFileSync(filepath, JSON.stringify({
        timestamp,
        uploaded_at: new Date().toISOString(),
        sessions
    }, null, 2));

    console.log(`Saved: ${filename} (${sessions.length} sessions)`);
    res.json({ ok: true, filename });
});

// Check how much data has been collected
app.get('/stats', (req, res) => {
    const files = fs.readdirSync(DATA_DIR).filter(f => f.endsWith('.json'));
    const totalSteps = files.reduce((sum, f) => {
        const data = JSON.parse(fs.readFileSync(path.join(DATA_DIR, f)));
        return sum + data.sessions.flat().length;
    }, 0);
    res.json({ total_files: files.length, total_steps: totalSteps });
});

app.listen(PORT, () => {
    console.log(`AIdrawing server running on port ${PORT}`);
});

Now this program is running on the server, but other people still can’t access it yet—I need to set up an Nginx reverse proxy.

I’ll leave that part for next week.