```html
<html><head><title>Pixel Art Generator</title>
<style>
@import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&family=Roboto:wght@300;400;700&display=swap');

:root {
  --primary-color: #4a4a4a;
  --secondary-color: #f0f0f0;
  --accent-color: #ff6b6b;
  --bg-color: #ffffff;
}

body {
  font-family: 'Roboto', sans-serif;
  background-color: var(--bg-color);
  color: var(--primary-color);
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 2rem;
}

h1 {
  font-family: 'Press Start 2P', cursive;
  text-align: center;
  color: var(--accent-color);
  font-size: 2.5rem;
  margin-bottom: 2rem;
  text-shadow: 3px 3px 0px var(--primary-color);
}

#container {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 2rem;
}

#left, #right {
  flex: 1;
  min-width: 300px;
}

h3 {
  font-family: 'Press Start 2P', cursive;
  font-size: 1rem;
  margin-bottom: 1rem;
  color: var(--primary-color);
}

canvas {
  border: 4px solid var(--primary-color);
  border-radius: 8px;
  width: 100%;
  height: auto;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

#controls {
  margin-top: 2rem;
  background-color: var(--secondary-color);
  padding: 2rem;
  border-radius: 8px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

#fileInput {
  width: 100%;
  padding: 0.5rem;
  margin-bottom: 1rem;
  border: 2px solid var(--primary-color);
  border-radius: 4px;
}

#params {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 1rem;
}

#params label {
  display: flex;
  flex-direction: column;
  font-weight: bold;
}

#params input[type="range"], #params select {
  width: 100%;
  margin-top: 0.5rem;
}

#params input[type="checkbox"] {
  margin-right: 0.5rem;
}

button {
  font-family: 'Press Start 2P', cursive;
  background-color: var(--accent-color);
  color: white;
  border: none;
  padding: 0.75rem 1.5rem;
  font-size: 1rem;
  cursor: pointer;
  transition: background-color 0.3s ease;
  border-radius: 4px;
  margin-top: 1rem;
}

button:hover {
  background-color: #ff4757;
}

@media (max-width: 768px) {
  #container {
    flex-direction: column;
  }
  
  #left, #right {
    width: 100%;
  }
}

/* Custom range input styles */
input[type="range"] {
  -webkit-appearance: none;
  width: 100%;
  height: 10px;
  border-radius: 5px;
  background: #d3d3d3;
  outline: none;
  opacity: 0.7;
  transition: opacity .2s;
}

input[type="range"]:hover {
  opacity: 1;
}

input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--accent-color);
  cursor: pointer;
}

input[type="range"]::-moz-range-thumb {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--accent-color);
  cursor: pointer;
}

select {
  appearance: none;
  background-color: white;
  border: 2px solid var(--primary-color);
  border-radius: 4px;
  padding: 0.5rem;
  font-size: 1rem;
  cursor: pointer;
}

select:focus {
  outline: none;
  border-color: var(--accent-color);
}

/* Animation for the title */
@keyframes pixelate {
  0% { transform: scale(1); }
  50% { transform: scale(1.05); }
  100% { transform: scale(1); }
}

h1 {
  animation: pixelate 2s infinite;
}
</style>
</head>
<body>
  <div class="container">
    <h1>Pixel Art Generator</h1>
    <div id="container">
      <div id="left">
        <h3>Original Image</h3>
        <canvas id="originalCanvas"></canvas>
      </div>
      <div id="right">
        <h3>Pixelized Image</h3>
        <canvas id="resultCanvas"></canvas>
      </div>
    </div>
    <div id="controls">
      <input type="file" id="fileInput" accept="image/*">
      <div id="params">
        <label>
          Pixel Size: <span id="pixelSizeValue">16</span>
          <input type="range" id="pixelSize" min="2" max="64" value="16">
        </label>
        <label>
          Contrast: <span id="contrastValue">1.0</span>
          <input type="range" id="contrast" min="0.5" max="2.0" step="0.1" value="1.0">
        </label>
        <label>
          Saturation: <span id="saturationValue">1.0</span>
          <input type="range" id="saturation" min="0.5" max="2.0" step="0.1" value="1.0">
        </label>
        <label>
          Number of Colors: <span id="colorsValue">32</span>
          <input type="range" id="colors" min="2" max="64" value="32">
        </label>
        <label>
          Downscale Mode:
          <select id="mode">
            <option value="nearest">Nearest Neighbor</option>
            <option value="bicubic">Bicubic</option>
            <option value="center">Center Pixel</option>
            <option value="contrast">Contrast Based</option>
            <option value="k-centroid">K-Centroid</option>
          </select>
        </label>
        <label>
          <input type="checkbox" id="outline" checked> Apply Outline Expansion
        </label>
        <label>
          Outline Thickness: <span id="thicknessValue">2</span>
          <input type="range" id="thickness" min="0" max="10" value="2">
        </label>
      </div>
      <button id="convertBtn">Convert</button>
      <button id="saveBtn">Save Result</button>
    </div>
  </div>

  <script src="https://cdnjs.cloudflare.com/ajax/libs/js-yaml/4.1.0/js-yaml.min.js"></script>
  <script>
    // Update value displays for range inputs
    const rangeInputs = document.querySelectorAll('input[type="range"]');
    rangeInputs.forEach(input => {
      const valueDisplay = document.getElementById(`${input.id}Value`);
      input.addEventListener('input', () => {
        valueDisplay.textContent = input.value;
      });
    });

    // File input preview
    const fileInput = document.getElementById('fileInput');
    const originalCanvas = document.getElementById('originalCanvas');
    const resultCanvas = document.getElementById('resultCanvas');
    const ctx = originalCanvas.getContext('2d');
    const resultCtx = resultCanvas.getContext('2d');

    fileInput.addEventListener('change', function(e) {
      const file = e.target.files[0];
      const reader = new FileReader();

      reader.onload = function(event) {
        const img = new Image();
        img.onload = function() {
          originalCanvas.width = img.width;
          originalCanvas.height = img.height;
          ctx.drawImage(img, 0, 0);
        }
        img.src = event.target.result;
      }
      reader.readAsDataURL(file);
    });

    // Convert button functionality (placeholder)
    document.getElementById('convertBtn').addEventListener('click', function() {
      // For demonstration, we'll just copy the original image to the result canvas
      resultCanvas.width = originalCanvas.width;
      resultCanvas.height = originalCanvas.height;
      resultCtx.drawImage(originalCanvas, 0, 0);
      
      // Apply a simple pixelation effect
      const pixelSize = parseInt(document.getElementById('pixelSize').value);
      const w = resultCanvas.width;
      const h = resultCanvas.height;
      
      resultCtx.imageSmoothingEnabled = false;
      resultCtx.drawImage(resultCanvas, 0, 0, w / pixelSize, h / pixelSize);
      resultCtx.drawImage(resultCanvas, 0, 0, w / pixelSize, h / pixelSize, 0, 0, w, h);
    });

    // Save button functionality
    document.getElementById('saveBtn').addEventListener('click', function() {
      const link = document.createElement('a');
      link.download = 'pixelized_image.png';
      link.href = resultCanvas.toDataURL();
      link.click();
    });
  </script>
</body>
</html>
```
上面是一个设计精美的网页


```html
<!DOCTYPE html>
<html>
<head>
    <title>Pixel Art Generator</title>
    <style>
        body {
            font-family: Arial, sans-serif;
        }
        #container {
            display: flex;
            justify-content: space-between;
        }
        #left, #right {
            width: 48%;
        }
        #controls {
            margin-top: 20px;
        }
        canvas {
            border: 1px solid #ccc;
            width: 100%;
            height: auto;
        }
        #params {
            margin-top: 20px;
        }
        #params label {
            display: block;
            margin-bottom: 5px;
        }
        #params input, #params select {
            margin-bottom: 10px;
        }
    </style>
</head>
<body>
    <h1>PixelOE - Pixel Art Generator</h1>
    <div id="container">
        <div id="left">
            <h3>Original Image</h3>
            <canvas id="originalCanvas"></canvas>
        </div>
        <div id="right">
            <h3>Pixelized Image</h3>
            <canvas id="resultCanvas"></canvas>
        </div>
    </div>
    <div id="controls">
        <input type="file" id="fileInput" accept="image/*">
        <div id="params">
            <label for="pixelSize">Pixel Size: <span id="pixelSizeValue">16</span></label>
            <input type="range" id="pixelSize" min="2" max="64" value="16">
            <br>
            <label for="contrast">Contrast: <span id="contrastValue">1.0</span></label>
            <input type="range" id="contrast" min="0.5" max="2.0" step="0.1" value="1.0">
            <br>
            <label for="saturation">Saturation: <span id="saturationValue">1.0</span></label>
            <input type="range" id="saturation" min="0.5" max="2.0" step="0.1" value="1.0">
            <br>
            <label for="colors">Number of Colors: <span id="colorsValue">32</span></label>
            <input type="range" id="colors" min="2" max="64" value="32">
            <br>
            <label for="mode">Downscale Mode:</label>
            <select id="mode">
                <option value="nearest">Nearest Neighbor</option>
                <option value="bicubic">Bicubic</option>
                <option value="center">Center Pixel</option>
                <option value="contrast">Contrast Based</option>
                <option value="k-centroid">K-Centroid</option>
            </select>
            <br>
            <label><input type="checkbox" id="outline" checked> Apply Outline Expansion</label>
            <br>
            <label for="thickness">Outline Thickness: <span id="thicknessValue">2</span></label>
            <input type="range" id="thickness" min="0" max="10" value="2">
        </div>
        <button id="convertBtn">Convert</button>
        <button id="saveBtn">Save Result</button>
    </div>

    <script src="script.js"></script>
</body>
</html>
```
上面是一个实用的网页，已经实现了所有代码逻辑，在script.js中。

请你把设计精美的网页里的设计迁移到实用的网页中，不需要迁移代码，只需要迁移设计。
最终生成的网页应该保留实用的网页中的所有id和值，避免破坏代码功能。