JSFiddle - React, Tailwind, and code Playground

by velo_ninja

HTML

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Universal Image Upscaler (Fixed AI Version)</title>
<style>
  body {
    font-family: system-ui, sans-serif;
    background: #f5f6fa;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 20px;
  }
  h1 { color: #333; margin-bottom: 16px; }
  #controls {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    align-items: center;
    margin-bottom: 20px;
  }
  select, input[type="number"], button {
    padding: 6px 10px;
    border-radius: 6px;
    border: 1px solid #ccc;
    font-size: 14px;
  }
  button {
    background: #2563eb; color: white; border: none;
    cursor: pointer; transition: background 0.2s;
  }
  button:hover { background: #1d4ed8; }
  .image-container {
    display: flex; gap: 20px; flex-wrap: wrap; justify-content: center;
  }
  .image-box {
    background: white; padding: 10px; border-radius: 10px;
    box-shadow: 0 2px 6px rgba(0,0,0,0.1); text-align: center;
  }
  img { max-width: 320px; border-radius: 6px; }
</style>
</head>
<body>

<h1>🪄 Universal Image Upscaler</h1>

<div id="controls">
  <input type="file" id="imageInput" accept="image/*">
  <label>Scale:</label>
  <input type="number" id="scaleInput" value="2" min="1" step="0.5">
  <label>Mode:</label>
  <select id="modeSelect">
    <option value="canvas">Canvas (Standard)</option>
    <option value="canvas-sharpen">Canvas + Sharpen</option>
    <option value="ai">AI Upscaling (TensorFlow.js)</option>
  </select>
  <button id="upscaleBtn">Upscale</button>
</div>

<div class="image-container">
  <div class="image-box">
    <h3>Original</h3>
    <img id="originalImg" alt="Original">
  </div>
  <div class="image-box">
    <h3>Upscaled</h3>
    <img id="upscaledImg" alt="Upscaled">
  </div>
</div>

<!-- ✅ TensorFlow.js + Super-Resolution Model (CORS-safe) -->
<script...