src/frontend/source/script.ts - master - Lepecin/mcnn

src/frontend/source/script.ts
116 строк4 KB
Lepecin
Add download endpoint
25 сен 2025, 19:41
25 сен 2025, 19:41f5cfab2
interface ModelRequest {
  seed: number | null;
  epochs: number;
  train_fraction: number;
  update_variance: number;
  weights_variance: number;
  epoch_per_log: number;
}

interface ModelResponse {
  accuracy: number;
}

async function downloadData(): Promise<void> {
  try {
    const response: Response = await fetch("/download", {
      method: "PUT",
    });

    if (!response.ok) {
      throw new Error(`HTTP error! status: ${response.status}`);
    }

    const result: { message: string } = await response.json();
    const statusDiv = document.getElementById("status") as HTMLDivElement;
    statusDiv.innerHTML = `<p>${result.message}</p>`;
  } catch (error: unknown) {
    const statusDiv = document.getElementById("status") as HTMLDivElement;
    statusDiv.innerHTML = `<p>Error: ${(error as Error).message}</p>`;
  }
}

async function trainModel(): Promise<void> {
  const seedInput = document.getElementById("seed") as HTMLInputElement;
  const epochsInput = document.getElementById("epochs") as HTMLInputElement;
  const trainFractionInput = document.getElementById(
    "train_fraction"
  ) as HTMLInputElement;
  const updateVarianceInput = document.getElementById(
    "update_variance"
  ) as HTMLInputElement;
  const weightsVarianceInput = document.getElementById(
    "weights_variance"
  ) as HTMLInputElement;
  const epochPerLogInput = document.getElementById(
    "epoch_per_log"
  ) as HTMLInputElement;

  const formData: ModelRequest = {
    seed: parseInt(seedInput.value) || null,
    epochs: parseInt(epochsInput.value),
    train_fraction: parseFloat(trainFractionInput.value),
    update_variance: parseFloat(updateVarianceInput.value),
    weights_variance: parseFloat(weightsVarianceInput.value),
    epoch_per_log: parseInt(epochPerLogInput.value),
  };

  try {
    const response: Response = await fetch("/model", {
      method: "PUT",
      headers: {
        "Content-Type": "application/json",
      },
      body: JSON.stringify(formData),
    });

    if (!response.ok) {
      throw new Error(`HTTP error! status: ${response.status}`);
    }

    const result: ModelResponse = await response.json();
    const accuracyDiv = document.getElementById("accuracy") as HTMLDivElement;
    accuracyDiv.innerHTML = `<p>Model Accuracy: ${result.accuracy.toFixed(
      4
    )}</p>`;
  } catch (error: unknown) {
    const accuracyDiv = document.getElementById("accuracy") as HTMLDivElement;
    accuracyDiv.innerHTML = `<p>Error: ${(error as Error).message}</p>`;
  }
}

async function generateImage(): Promise<void> {
  const widthInput = document.getElementById("image_width") as HTMLInputElement;
  const heightInput = document.getElementById(
    "image_height"
  ) as HTMLInputElement;
  const width = parseInt(widthInput.value);
  const height = parseInt(heightInput.value);
  const requestData = { image_width: width, image_height: height };

  try {
    const response: Response = await fetch("/image", {
      method: "PUT",
      headers: {
        "Content-Type": "application/json",
      },
      body: JSON.stringify(requestData),
    });

    if (!response.ok) {
      throw new Error(`HTTP error! status: ${response.status}`);
    }

    const blob: Blob = await response.blob();
    const url: string = URL.createObjectURL(blob);
    const plotImage = document.getElementById("plotImage") as HTMLImageElement;
    plotImage.src = url;
  } catch (error: unknown) {
    console.error("Error generating image:", error);
    const plotImage = document.getElementById("plotImage") as HTMLImageElement;
    plotImage.alt = "Error loading image";
  }
}

// Load initial image on page load
window.addEventListener("load", generateImage);