Wiring up Our Project

jeremy@Jeremys-Mac-Studio imageoptimizer.app % ls
__pycache__    requirements.txt    venv    run.py
(venv) jeremy@Jeremys-Mac-Studio imageoptimizer.app % flask run
 * Serving Flask app 'run.py'
 * Debug mode: off
WARN:werkzeug:WARNING: This is a development server. Do not use it in a producti
on deployment. Use a production WSGI server instead.
 * Running on https://127.0.0.1:5173/ (Press CTRL+C to quit)
Nov/2024 14:19:371 "POST /upload HTTP/1.1" 200 -
Nov/2024 14:19:421 "POST /upload HTTP/1.1" 200 -

async function handleSubmit(e) {
  e.preventDefault();

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

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

  try {
    const response = await fetch('http://127.0.0.1:5000/upload', {
      method: 'POST',
      body: formData,
    });

    if (response.ok) {
      const data = await response.json();
      console.log('Upload successful:', data);
    } else {
      console.error('Upload failed');
    }
  } catch (error) {
    console.error('Error uploading image:', error);
  }
}

import React, { useState, useEffect } from 'react';

function App() {
  const [selectedImage, setSelectedImage] = useState(null);
  const [quality, setQuality] = useState(80);
  const [optimizedImageUrl, setOptimizedImageUrl] = useState(null);
  const [selectedImageSize, setSelectedImageSize] = useState(null);
  const [optimizedImageSize, setOptimizedImageSize] = useState(null);

  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', quality);

    try {
      const response = await fetch('http://127.0.0.1:5000/upload', {
        method: 'POST',
        body: formData,
      });

      if (response.ok) {
        // When the API returns binary image data
        const blob = await response.blob();
        const imageUrl = URL.createObjectURL(blob);
        setOptimizedImageUrl(imageUrl);
        setOptimizedImageSize(blob.size);
      } else {
        console.error('Upload failed');
      }
    } catch (error) {
      console.error('Error uploading image:', error);
    }
  };

  const handleImageSelect = (e) => {
    const file = e.target.files[0];
    if (file) {
      setSelectedImage(file);
      setSelectedImageSize(file.size);
    }
  };

  // Cleanup object URLs to prevent memory leaks.
  useEffect(() => {
    return () => {
      if (optimizedImageUrl) URL.revokeObjectURL(optimizedImageUrl);
    };
  }, [optimizedImageUrl]);

  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"
              type="file"
              accept="image/*"
              onChange={handleImageSelect}
            />
          </div>
          <button type="submit">Optimize Image</button>
        </form>
        {/* Image Preview Section */}
        {selectedImage && (
          <div className="preview-section">
            <h2>Original Image:</h2>
            <p>File size: {selectedImageSize} bytes</p>
            <img
              src={URL.createObjectURL(selectedImage)}
              alt="Original"
              style={{ maxWidth: '100%', height: 'auto' }}
            />
          </div>
        )}
        {optimizedImageUrl && (
          <div className="preview-section">
            <h2>Optimized Image:</h2>
            <p>File size: {optimizedImageSize} bytes</p>
            <img
              src={optimizedImageUrl}
              alt="Optimized version"
              style={{ maxWidth: '100%', height: 'auto' }}
            />
          </div>
        )}
      </main>
    </div>
  );
}

export default App;

jeremy@Jeremy’s-Mac-Studio imageoptimizer.app % pip install flask-cors

from flask import Flask
from flask_cors import CORS

def create_app():
    app = Flask(__name__)
    app.config['DEBUG'] = True
    CORS(app, resources={
        r"/": {
            "origins": ["http://localhost:5173"],
            "methods": ["GET", "POST", "OPTIONS"],
            "allow_headers": ["Content-Type"]
        }
    })

    from . import routes
    app.register_blueprint(routes.bp)

    return app