Creating a UI

import { StrictMode } from 'react';
import { createRoot } from 'react-dom/client';
import './index.css';
import App from './App.jsx';

createRoot(document.getElementById('root')).render(
  <StrictMode>
    <App />
  </StrictMode>
);

VITE v5.4.11  ready in 105 ms

  +  Local:    http://localhost:5173/
  +  Network:  use --host to expose
  press h + enter to show help

import { useState } from 'react';
import './App.css';

function App() {
  const [selectedImage, setSelectedImage] = useState(null);
  const [quality, setQuality] = useState(80);
  const [loading, setLoading] = useState(false);

  const handleSubmit = async (e) => {
    e.preventDefault();

    if (!selectedImage) {
      alert('Please select an image first');
      return;
    }

    const formData = new FormData();
    formData.append('image', selectedImage);
    formData.append('quality', String(quality));

    setLoading(true);
    try {
      const response = await fetch('YOUR_API_ENDPOINT', {
        method: 'POST',
        body: formData,
      });

      if (!response.ok) {
        console.error('Upload failed', response.status, response.statusText);
        alert('Upload failed. See console for details.');
        return;
      }

      // If your backend returns JSON metadata (e.g., a result URL)
      const contentType = response.headers.get('content-type') || '';
      if (contentType.includes('application/json')) {
        const data = await response.json();
        console.log('Upload successful:', data);
        // Optionally: show the optimized image preview or download link from data
      } else {
        // If backend returns image binary data, use response.blob()
        const blob = await response.blob();
        const url = URL.createObjectURL(blob);
        // Example: open the optimized image in a new tab
        window.open(url, '_blank');
      }
    } catch (error) {
      console.error('Error uploading image:', error);
      alert('An error occurred while uploading. Check the console for details.');
    } finally {
      setLoading(false);
    }
  };

  return (
    <div className="container">
      <header className="header">
        <h1>Image Optimizer</h1>
      </header>

      <main className="main-content">
        <form onSubmit={handleSubmit} className="upload-form">
          <div className="upload-section">
            <label htmlFor="image-upload">Upload Image</label>
            <input
              id="image-upload"
              name="image"
              type="file"
              accept="image/*"
              onChange={(e) => setSelectedImage(e.target.files?.[0] || null)}
            />
          </div>

          <div className="quality-section">
            <label htmlFor="quality">Quality: {quality}%</label>
            <input
              type="range"
              id="quality"
              min="0"
              max="100"
              value={quality}
              onChange={(e) => setQuality(parseInt(e.target.value, 10))}
            />
          </div>

          <div className="button-section">
            <button type="submit" disabled={loading}>
              {loading ? 'Optimizing...' : 'Optimize Image'}
            </button>
          </div>
        </form>
      </main>
    </div>
  );
}

export default App;

/* Global box-sizing for consistent layouts */
*, *:before, *:after {
  box-sizing: border-box;
}

body {
  background-color: #f3f6ff;
  margin: 0;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
  color: #222;
}

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

.header {
  text-align: center;
  margin-bottom: 2.5rem;
}

.main-content {
  display: grid;
  place-items: center;
}

/* Form layout */
.upload-form {
  display: grid;
  gap: 1.25rem;
  width: 100%;
  max-width: 600px;
  padding: 2rem;
  background: #ffffff;
  border-radius: 8px;
  box-shadow: 0 6px 20px rgba(20, 25, 40, 0.08);
}

/* Sections inside the form */
.upload-section,
.quality-section,
.button-section {
  display: grid;
  gap: 0.5rem;
  width: 100%;
}

/* File input styling */
.upload-section input[type="file"] {
  padding: 0.5rem;
  border: 2px dashed #d1d5db;
  border-radius: 6px;
  width: 100%;
  cursor: pointer;
  background: #fafafa;
}

/* Range input full width */
.quality-section input[type="range"] {
  width: 100%;
}

/* Button styling */
.button-section button {
  background: #646cff;
  color: white;
  padding: 0.85rem 1.25rem;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  font-weight: 600;
}

.button-section button:hover {
  background: #535bf2;
}

/* Labels */
label {
  font-weight: 600;
  color: #333;
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .container {
    padding: 1rem;
  }

  .upload-form {
    padding: 1rem;
  }
}