first commit

.eslintrc.cjs

@@ -0,0 +1,21 @@
+module.exports = {
+  root: true,
+  env: { browser: true, es2020: true },
+  extends: [
+    'eslint:recommended',
+    'plugin:react/recommended',
+    'plugin:react/jsx-runtime',
+    'plugin:react-hooks/recommended',
+  ],
+  ignorePatterns: ['dist', '.eslintrc.cjs'],
+  parserOptions: { ecmaVersion: 'latest', sourceType: 'module' },
+  settings: { react: { version: '18.2' } },
+  plugins: ['react-refresh'],
+  rules: {
+    'react/jsx-no-target-blank': 'off',
+    'react-refresh/only-export-components': [
+      'warn',
+      { allowConstantExport: true },
+    ],
+  },
+}

.gitignore

@@ -0,0 +1,24 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?

README.md

@@ -0,0 +1,8 @@
+# React + Vite
+
+This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
+
+Currently, two official plugins are available:
+
+- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react/README.md) uses [Babel](https://babeljs.io/) for Fast Refresh
+- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh

backup/Page.jsx

@@ -0,0 +1,104 @@
+import React, { useState, useRef, useEffect } from 'react';
+import './App.css';
+
+import imageData from './data.json'; // Adjust path as necessary
+
+function App() {
+  const [sourceImage, setSourceImage] = useState(null);
+  const [targetImage, setTargetImage] = useState(null);
+  const [enhance, setEnhance] = useState(false);
+  const [resultImage, setResultImage] = useState('');
+  const [imageCaptured, setImageCaptured] = useState(false);
+  const videoRef = useRef(null);
+  const canvasRef = useRef(null);
+
+  useEffect(() => {
+    navigator.mediaDevices.getUserMedia({ video: true })
+      .then(stream => {
+        videoRef.current.srcObject = stream;
+      })
+      .catch(err => console.error("error:", err));
+  }, []);
+
+  const captureImage = () => {
+    const canvas = canvasRef.current;
+    const video = videoRef.current;
+    canvas.width = video.videoWidth;
+    canvas.height = video.videoHeight;
+    canvas.getContext('2d').drawImage(video, 0, 0, canvas.width, canvas.height);
+    canvas.toBlob(blob => {
+      setSourceImage(new File([blob], "webcam.jpg", { type: "image/jpeg" }));
+      setImageCaptured(true);
+    }, 'image/jpeg');
+  };
+
+  const selectRandomImage = (imagesArray) => {
+    const randomIndex = Math.floor(Math.random() * imagesArray.length);
+    const selectedImage = imagesArray[randomIndex];
+    fetch(selectedImage)
+      .then(res => res.blob())
+      .then(blob => {
+        const file = new File([blob], `selectedImage_${randomIndex}.jpg`, { type: "image/jpeg" });
+        setTargetImage(file);
+      });
+  };
+
+  const handleSubmit = async (e) => {
+    e.preventDefault();
+    if (!targetImage) {
+      alert("Please select a target image first.");
+      return;
+    }
+    const formData = new FormData();
+    formData.append('targetImage', sourceImage);
+    formData.append('sourceImage', targetImage);
+    formData.append('enhance', enhance);
+
+    try {
+      const response = await fetch('https://8c66-106-51-185-121.ngrok-free.app/api/swap-face/', {
+        method: 'POST',
+        body: formData,
+      });
+      if (!response.ok) {
+        throw new Error('Something went wrong');
+      }
+      const blob = await response.blob();
+      const imageObjectURL = URL.createObjectURL(blob);
+      setResultImage(imageObjectURL);
+    } catch (error) {
+      console.error('Error:', error);
+    }
+  };
+
+  return (
+    <div className="App">
+      <header className="App-header">
+        <h2>Face Swap App</h2>
+        <video ref={videoRef} autoPlay style={{ display: 'block' }}></video>
+        <canvas ref={canvasRef} style={{ display: 'block' }}></canvas>
+        <button onClick={captureImage}>Capture Image</button>
+        <form onSubmit={handleSubmit}>
+          <button type="button" onClick={() => selectRandomImage(imageData.imagesArray1)}>
+            ball catch
+          </button>
+          <button type="button" onClick={() => selectRandomImage(imageData.imagesArray2)}>
+          century celebration
+          </button>
+          <button type="button" onClick={() => selectRandomImage(imageData.imagesArray3)}>
+            Use Image Set 3
+          </button>
+          <div>
+            <label>
+              <input type="checkbox" checked={enhance} onChange={() => setEnhance(!enhance)} />
+              Enhance Image
+            </label>
+          </div>
+          <button type="submit">Swap Faces</button>
+        </form>
+        {resultImage && <img src={resultImage} alt="Result" style={{ marginTop: '20px' }} />}
+      </header>
+    </div>
+  );
+}
+
+export default App;