Spaces:

Moonie805
/

anycoder-a3ac99c5

Running

File size: 24,978 Bytes

d47b184
 
a021e8b
 
 
15f9ece
a021e8b
 
 
15f9ece
 
 
 
 
 
 
 
 
a021e8b
 
 
 
 
 
 
 
 
 
 
15f9ece
a021e8b
 
 
 
 
 
 
 
 
 
 
15f9ece
 
a021e8b
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
15f9ece
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
a021e8b
 
 
 
 
 
 
 
15f9ece
 
a021e8b
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
15f9ece
a021e8b
 
 
 
 
 
 
 
 
 
 
 
 
 
 
15f9ece
a021e8b
15f9ece
a021e8b
 
 
 
 
 
15f9ece
a021e8b
15f9ece
 
a021e8b
15f9ece
 
 
a021e8b
 
15f9ece
 
 
 
 
a021e8b
 
15f9ece
a021e8b
15f9ece
 
a021e8b
15f9ece
a021e8b
 
15f9ece
a021e8b
 
 
15f9ece
 
a021e8b
 
15f9ece
 
 
a021e8b
15f9ece
 
 
 
a021e8b
 
15f9ece
a021e8b
 
15f9ece
 
 
 
 
a021e8b
 
 
15f9ece
 
 
 
 
 
 
 
a021e8b
 
15f9ece
 
 
a021e8b
 
15f9ece
a021e8b
 
15f9ece
 
a021e8b
 
15f9ece
 
a021e8b
 
 
15f9ece
 
a021e8b
 
15f9ece
a021e8b
 
15f9ece
 
 
a021e8b
 
15f9ece
 
a021e8b
 
 
15f9ece
 
 
 
 
 
a021e8b
 
15f9ece
a021e8b
 
15f9ece
 
a021e8b
 
 
15f9ece
a021e8b
15f9ece
 
a021e8b
 
 
15f9ece
a021e8b
15f9ece
 
a021e8b
15f9ece
a021e8b
 
15f9ece
 
 
 
a021e8b
 
 
15f9ece
a021e8b
 
 
15f9ece
 
 
 
 
a021e8b
 
 
 
 
15f9ece
a021e8b
15f9ece
 
a021e8b
 
 
d47b184
a021e8b
 
 
 
15f9ece
 
a021e8b
 
 
15f9ece
 
 
 
 
 
 
 
a021e8b
 
15f9ece
 
 
 
 
 
 
 
 
 
 
a021e8b
15f9ece
 
 
 
 
 
a021e8b
 
 
 
15f9ece
 
 
 
a021e8b
 
 
 
15f9ece
 
 
a021e8b
 
15f9ece
 
a021e8b
 
15f9ece
 
a021e8b
 
d47b184
15f9ece
 
 
 
a021e8b
15f9ece
d47b184
 
15f9ece
 
 
 
 
 
 
a021e8b
 
15f9ece
 
a021e8b
 
15f9ece
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
a021e8b
15f9ece
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
a021e8b
15f9ece
 
 
 
 
 
 
a021e8b
15f9ece
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
a021e8b
15f9ece
 
 
 
a021e8b
15f9ece
 
 
a021e8b
15f9ece
 
 
a021e8b
15f9ece
 
 
a021e8b
15f9ece
 
 
 
a021e8b
15f9ece
 
 
 
a021e8b
15f9ece
 
 
 
a021e8b
15f9ece
 
 
 
a021e8b
15f9ece
 
 
 
a021e8b
15f9ece
 
a021e8b
15f9ece
 
 
a021e8b
15f9ece
 
 
 
 
 
a021e8b
15f9ece
 
 
a021e8b
15f9ece
 
 
 
 
 
 
 
 
 
 
 
 
 
 
a021e8b
15f9ece
 
 
 
 
 
 
 
 
 
 
a021e8b
15f9ece
 
 
 
 
 
a021e8b
15f9ece
 
 
 
 
 
a021e8b
15f9ece
 
 
 
 
 
a021e8b
15f9ece
 
 
 
 
 
a021e8b
15f9ece
 
 
 
 
 
a021e8b
15f9ece
 
 
 
 
 
a021e8b
15f9ece
 
 
 
 
 
a021e8b
15f9ece
 
 
 
 
a021e8b
15f9ece
 
 
 
 
 
a021e8b
15f9ece
 
 
 
 
 
 
 
 
 
 
 
a021e8b
15f9ece
 
 
 
a021e8b
15f9ece
 
 
 
a021e8b
15f9ece
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
a021e8b
15f9ece
 
 
a021e8b
15f9ece
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
a021e8b
15f9ece
 
 
 
 
 
 
 
a021e8b
15f9ece
 
 
 
 
a021e8b
15f9ece
 
 
 
a021e8b
15f9ece
a021e8b
15f9ece
 
 
 
 
a021e8b
15f9ece
 
 
 
 
 
 
 
a021e8b
15f9ece
d47b184
a021e8b
15f9ece

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Face Swap with Gemini AI</title>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
  <style>
    :root {
      --primary-color: #4285f4;
      --secondary-color: #34a853;
      --dark-color: #202124;
      --light-color: #f8f9fa;
      --warning-color: #fbbc05;
      --danger-color: #ea4335;
      --text-color: #3c4043;
      --border-radius: 12px;
      --shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    }

    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
      font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    }

    body {
      background-color: var(--light-color);
      color: var(--text-color);
      line-height: 1.6;
      padding: 20px;
      min-height: 100vh;
    }

    header {
      text-align: center;
      margin-bottom: 30px;
      padding: 20px;
      background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
      color: white;
      border-radius: var(--border-radius);
      box-shadow: var(--shadow);
      position: relative;
    }

    header h1 {
      font-size: 2.5rem;
      margin-bottom: 10px;
      text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
    }

    header p {
      font-size: 1.1rem;
      opacity: 0.9;
    }

    .built-with {
      position: absolute;
      top: 10px;
      right: 20px;
      font-size: 0.9rem;
      color: white;
      text-decoration: none;
      background: rgba(255, 255, 255, 0.2);
      padding: 5px 10px;
      border-radius: 5px;
      transition: all 0.3s ease;
    }

    .built-with:hover {
      background: rgba(255, 255, 255, 0.3);
      transform: translateY(-2px);
    }

    .container {
      display: flex;
      flex-direction: column;
      gap: 20px;
      max-width: 1200px;
      margin: 0 auto;
      width: 100%;
    }

    .upload-section {
      display: flex;
      flex-wrap: wrap;
      gap: 20px;
      justify-content: center;
      margin-bottom: 20px;
    }

    .upload-area {
      flex: 1;
      min-width: 300px;
      background: white;
      border-radius: var(--border-radius);
      padding: 20px;
      box-shadow: var(--shadow);
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      border: 2px dashed var(--primary-color);
      transition: all 0.3s ease;
    }

    .upload-area:hover {
      border-color: var(--secondary-color);
      background-color: rgba(66, 133, 244, 0.05);
    }

    .upload-area.active {
      border-color: var(--secondary-color);
      background-color: rgba(52, 168, 83, 0.05);
    }

    .upload-area i {
      font-size: 3rem;
      color: var(--primary-color);
      margin-bottom: 15px;
    }

    .image-preview {
      max-width: 100%;
      max-height: 300px;
      border-radius: 8px;
      display: none;
    }

    .face-preview {
      width: 100px;
      height: 100px;
      border-radius: 50%;
      object-fit: cover;
      border: 3px solid var(--primary-color);
      margin-bottom: 15px;
    }

    .controls {
      display: flex;
      flex-wrap: wrap;
      gap: 15px;
      justify-content: center;
      margin-bottom: 20px;
      background: white;
      padding: 20px;
      border-radius: var(--border-radius);
      box-shadow: var(--shadow);
    }

    .control-group {
      display: flex;
      flex-direction: column;
      gap: 8px;
      min-width: 200px;
    }

    label {
      font-weight: 600;
      color: var(--primary-color);
      font-size: 0.9rem;
    }

    select,
    input,
    button {
      padding: 10px 15px;
      border: 2px solid #ddd;
      border-radius: 8px;
      font-size: 1rem;
      transition: all 0.3s ease;
      background: white;
    }

    select:focus,
    input:focus {
      outline: none;
      border-color: var(--primary-color);
      box-shadow: 0 0 0 3px rgba(66, 133, 244, 0.2);
    }

    button {
      background: var(--primary-color);
      color: white;
      border: none;
      cursor: pointer;
      font-weight: 600;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
    }

    button:hover {
      background: #3367d6;
      transform: translateY(-2px);
      box-shadow: 0 5px 15px rgba(66, 133, 244, 0.3);
    }

    button:active {
      transform: translateY(0);
    }

    .result-section {
      display: flex;
      flex-direction: column;
      gap: 20px;
      background: white;
      padding: 20px;
      border-radius: var(--border-radius);
      box-shadow: var(--shadow);
    }

    .result-image {
      max-width: 100%;
      max-height: 500px;
      border-radius: 8px;
      display: none;
    }

    .ai-features {
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
      justify-content: center;
      margin-top: 20px;
    }

    .ai-btn {
      background: var(--secondary-color);
    }

    .ai-btn:hover {
      background: #2d8c4f;
    }

    .processing-overlay {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: rgba(255, 255, 255, 0.8);
      display: none;
      align-items: center;
      justify-content: center;
      z-index: 1000;
    }

    .processing-content {
      background: white;
      padding: 30px;
      border-radius: var(--border-radius);
      box-shadow: var(--shadow);
      text-align: center;
    }

    .spinner {
      width: 50px;
      height: 50px;
      border: 5px solid rgba(66, 133, 244, 0.3);
      border-radius: 50%;
      border-top: 5px solid var(--primary-color);
      animation: spin 1s linear infinite;
      margin: 0 auto 15px;
    }

    @keyframes spin {
      0% { transform: rotate(0deg); }
      100% { transform: rotate(360deg); }
    }

    .face-list {
      display: flex;
      flex-wrap: wrap;
      gap: 15px;
      margin-top: 15px;
    }

    .face-item {
      position: relative;
      cursor: pointer;
    }

    .face-item.active {
      border: 3px solid var(--secondary-color);
    }

    .gemini-section {
      background: white;
      padding: 20px;
      border-radius: var(--border-radius);
      box-shadow: var(--shadow);
      margin-top: 20px;
    }

    .gemini-prompt {
      width: 100%;
      margin-bottom: 15px;
    }

    .gemini-response {
      background: #f8f9fa;
      padding: 15px;
      border-radius: 8px;
      min-height: 100px;
      display: none;
    }

    .history-section {
      background: white;
      padding: 20px;
      border-radius: var(--border-radius);
      box-shadow: var(--shadow);
      margin-top: 20px;
    }

    .history-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
      gap: 15px;
      margin-top: 15px;
    }

    .history-item {
      border-radius: 8px;
      overflow: hidden;
      position: relative;
      cursor: pointer;
      aspect-ratio: 1;
    }

    .history-item img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }

    @media (max-width: 768px) {
      .upload-section {
        flex-direction: column;
      }

      .controls {
        flex-direction: column;
        align-items: stretch;
      padding: 15px;
      gap: 15px;
    }

    @media (max-width: 480px) {
      body {
        padding: 10px;
      font-size: 14px;
      }
      header h1 {
        font-size: 2rem;
      }
    }
  </style>
</head>
<body>
  <a href="https://huggingface.co/spaces/akhaliq/anycoder" class="built-with" target="_blank">Built with anycoder</a>

  <header>
    <h1><i class="fas fa-user-circle"></i> Face Swap with Gemini AI</h1>
    <p>Advanced face swapping with Google Gemini integration</p>
  </header>

  <div class="container">
    <div class="upload-section">
      <div class="upload-area" id="source-upload">
        <i class="fas fa-portrait"></i>
        <h3>Source Image</h3>
        <p>Upload the image with the face you want to use</p>
        <input type="file" id="source-input" accept="image/*" style="display: none;">
        <button id="source-btn">Select Image</button>
        <img class="image-preview" id="source-preview">
      </div>

      <div class="upload-area" id="target-upload">
        <i class="fas fa-image"></i>
        <h3>Target Image</h3>
        <p>Upload the image where you want to place the face</p>
        <input type="file" id="target-input" accept="image/*" style="display: none;">
        <button id="target-btn">Select Image</button>
        <img class="image-preview" id="target-preview">
      </div>
    </div>

    <div class="controls">
      <div class="control-group">
        <label for="swap-method">Swap Method</label>
        <select id="swap-method">
          <option value="blend">Seamless Blend</option>
          <option value="direct">Direct Replacement</option>
          <option value="style">Style Transfer</option>
          <option value="enhanced">AI Enhanced</option>
        </select>
      </div>

      <div class="control-group">
        <label for="face-detection">Face Detection</label>
        <select id="face-detection">
          <option value="auto">Auto Detect</option>
          <option value="manual">Manual Selection</option>
        </select>
      </div>

      <div class="control-group">
        <label for="blend-level">Blend Level</label>
        <input type="range" id="blend-level" min="0" max="100" value="50">
        <span id="blend-value">50%</span>
      </div>

      <button id="swap-faces" title="Swap faces between images">
        <i class="fas fa-exchange-alt"></i> Swap Faces
      </button>

      <button id="detect-faces" title="Detect faces in images">
        <i class="fas fa-search"></i> Detect Faces
      </button>
    </div>

    <div class="result-section">
      <h2><i class="fas fa-magic"></i> Face Swap Result</h2>
      <div class="face-list" id="detected-faces">
        <!-- Detected faces will appear here -->
      </div>
      <img class="result-image" id="result-preview">
    </div>

    <div class="gemini-section">
      <h2><i class="fab fa-google"></i> Google Gemini Integration</h2>
      <div class="control-group">
        <label for="gemini-prompt">AI Enhancement Prompt</label>
        <textarea class="gemini-prompt" id="gemini-prompt" placeholder="Describe how you want to enhance the face swap result...">Describe how you want to enhance the face swap result...</textarea>
        <button class="ai-btn" id="enhance-result" title="Use Gemini to enhance the result">
          <i class="fas fa-robot"></i> Enhance with Gemini
        </button>
      </div>
      <div class="gemini-response" id="gemini-response">
        <!-- Gemini response will appear here -->
      </div>

    <div class="ai-features">
      <button class="ai-btn" id="improve-lighting" title="Improve lighting and shadows">
            <i class="fas fa-sun"></i> Improve Lighting
          </button>
          <button class="ai-btn" id="age-progression" title="Show age progression">
            <i class="fas fa-hourglass-half"></i> Age Progression
          </button>
          <button class="ai-btn" id="emotion-change" title="Change facial expression">
            <i class="fas fa-smile"></i> Change Emotion
          </button>
          <button class="ai-btn" id="style-transfer" title="Apply artistic style">
              <i class="fas fa-palette"></i> Style Transfer
          </button>
          <button class="ai-btn" id="gender-swap" title="Swap gender appearance">
                <i class="fas fa-venus-mars"></i> Gender Swap
              </button>
        </div>

        <div class="export-section">
          <h3><i class="fas fa-download"></i> Save Your Creation</h3>
          <div class="export-buttons">
            <button class="export-btn" id="save-result" title="Save the result image">
                <i class="fas fa-save"></i> Save Image
              </button>
              <button class="export-btn" id="share-result" title="Share your creation">
                  <i class="fas fa-share-alt"></i> Share
                </button>
            </div>
          </div>

          <div class="history-section">
            <h3><i class="fas fa-history"></i> Previous Swaps</h3>
            <div class="history-grid" id="history-grid">
              <!-- History items will appear here -->
            </div>
          </div>
        </div>
      </div>

      <div class="processing-overlay" id="processing-overlay">
        <div class="processing-content">
          <div class="spinner"></div>
          <h3>Processing with AI...</h3>
            <p>This may take a few moments</p>
          </div>
        </div>

        <script>
          // DOM elements
          const sourceUpload = document.getElementById('source-upload');
          const targetUpload = document.getElementById('target-upload');
          const sourceInput = document.getElementById('source-input');
          const targetInput = document.getElementById('target-input');
          const sourceBtn = document.getElementById('source-btn');
          const targetBtn = document.getElementById('target-btn');
          const sourcePreview = document.getElementById('source-preview');
          const targetPreview = document.getElementById('target-preview');
          const swapFacesBtn = document.getElementById('swap-faces');
          const detectFacesBtn = document.getElementById('detect-faces');
          const resultPreview = document.getElementById('result-preview');
          const detectedFaces = document.getElementById('detected-faces');
          const processingOverlay = document.getElementById('processing-overlay');
          const blendLevel = document.getElementById('blend-level');
          const blendValue = document.getElementById('blend-value');
          const geminiPrompt = document.getElementById('gemini-prompt');
          const enhanceResultBtn = document.getElementById('enhance-result');
          const geminiResponse = document.getElementById('gemini-response');
          const improveLightingBtn = document.getElementById('improve-lighting');
          const ageProgressionBtn = document.getElementById('age-progression');
          const emotionChangeBtn = document.getElementById('emotion-change');
          const styleTransferBtn = document.getElementById('style-transfer');
          const genderSwapBtn = document.getElementById('gender-swap');
          const saveResultBtn = document.getElementById('save-result');
          const shareResultBtn = document.getElementById('share-result');
          const historyGrid = document.getElementById('history-grid');

          // Initialize the application
          function init() {
            setupEventListeners();
            loadHistory();
          }

          // Setup event listeners
          function setupEventListeners() {
            sourceBtn.addEventListener('click', () => sourceInput.click());
            targetBtn.addEventListener('click', () => targetInput.click());

            sourceInput.addEventListener('change', function() {
              handleImageUpload(this.files[0], sourcePreview);
            });

            targetInput.addEventListener('change', function() {
              handleImageUpload(this.files[0], targetPreview);
            });

            swapFacesBtn.addEventListener('click', swapFaces);
            detectFacesBtn.addEventListener('click', detectFaces);
            enhanceResultBtn.addEventListener('click', enhanceWithGemini);

            improveLightingBtn.addEventListener('click', function() {
              geminiPrompt.value = "Improve the lighting and shadows in this face swap to make it look more natural and realistic."));
            enhanceWithGemini();
            });

            ageProgressionBtn.addEventListener('click', function() {
              geminiPrompt.value = "Show how this person would look 20 years older with natural aging effects."));
            enhanceWithGemini();
            });

            emotionChangeBtn.addEventListener('click', function() {
              geminiPrompt.value = "Change the facial expression to a happy smile while maintaining the person's identity."));
            enhanceWithGemini();
            });

            styleTransferBtn.addEventListener('click', function() {
              geminiPrompt.value = "Apply an artistic style to this face swap while keeping the facial features recognizable."));
            enhanceWithGemini();
            });

            genderSwapBtn.addEventListener('click', function() {
              geminiPrompt.value = "Swap the gender appearance while maintaining the person's core facial structure and identity."));
            enhanceWithGemini();
            });

            saveResultBtn.addEventListener('click', saveResult);
            shareResultBtn.addEventListener('click', shareResult);

            blendLevel.addEventListener('input', function() {
              blendValue.textContent = `${this.value}%`;
            });

            // Drag and drop functionality
            [sourceUpload, targetUpload].forEach(area => {
            area.addEventListener('dragover', function(e) {
              e.preventDefault();
              this.classList.add('active');
            });

            area.addEventListener('dragleave', function() {
              this.classList.remove('active');
            });

            area.addEventListener('drop', function(e) {
              e.preventDefault();
              this.classList.remove('active');

              const files = e.dataTransfer.files;
              if (files.length > 0) {
              if (this.id === 'source-upload') {
              handleImageUpload(files[0], sourcePreview);
              }
              if (this.id === 'target-upload') {
              handleImageUpload(files[0], targetPreview);
              }
            }
            });
          }

          // Handle image upload
          function handleImageUpload(file, previewElement) {
            if (file && file.type.match('image.*')) {
              const reader = new FileReader();
              reader.onload = function(e) {
              previewElement.src = e.target.result;
              previewElement.style.display = 'block';
              };
              reader.readAsDataURL(file);
            }
          }

          // Detect faces in uploaded images
          function detectFaces() {
            if (!sourcePreview.src && !targetPreview.src) {
              alert('Please upload at least one image first.');
              return;
            }

            showProcessing();
            setTimeout(() => {
              hideProcessing();
              showDetectedFaces();
            }, 1500);
          }

          // Swap faces between source and target
          function swapFaces() {
            if (!sourcePreview.src || !targetPreview.src) {
              alert('Please upload both source and target images first.');
              return;
            }

            showProcessing();
            setTimeout(() => {
              hideProcessing();
              showResult();
            }, 2000);
          }

          // Enhance result with Gemini
          function enhanceWithGemini() {
            if (!resultPreview.src) {
              alert('Please perform a face swap first.');
              return;
            }

            showProcessing();
            setTimeout(() => {
              hideProcessing();
              showGeminiResponse();
            }, 2500);
          }

          // Save the result
          function saveResult() {
            if (!resultPreview.src) {
              alert('Please perform a face swap first.');
              return;
            }

            const link = document.createElement('a');
            link.download = 'face-swap-result.png';
            link.href = resultPreview.src;
            link.click();
          }

          // Share the result
          function shareResult() {
            if (!resultPreview.src) {
              alert('Please perform a face swap first.');
              return;
            }

            if (navigator.share) {
              navigator.share({
              title: 'Face Swap Result',
              text: 'Check out this amazing face swap I created!'),
              url: window.location.href
            }).catch(err => {
              console.log('Error sharing:', err);
            });
            } else {
              alert('Web Share API not supported in your browser. You can save the image and share it manually.');
            }
          }

          // Show processing overlay
          function showProcessing() {
            processingOverlay.style.display = 'flex';
          }

          // Hide processing overlay
          function hideProcessing() {
            processingOverlay.style.display = 'none';
          }

          // Show detected faces
          function showDetectedFaces() {
            detectedFaces.innerHTML = '';

            // Simulated face detection - in a real app this would use a face detection library
            for (let i = 0; i < 3; i++) {
              const faceItem = document.createElement('div');
            faceItem.className = 'face-item';
            faceItem.innerHTML = `
                <img class="face-preview" src="${sourcePreview.src}" alt="Detected face ${i+1}">
                <p>Face ${i+1}</p>
              `;

              faceItem.addEventListener('click', function() {
              document.querySelectorAll('.face-item').forEach(item => {
              item.classList.remove('active');
            });
              this.classList.add('active');
            });

              detectedFaces.appendChild(faceItem);
            }
          }

          // Show result
          function showResult() {
            // For demo purposes, we'll create a composite image
            const canvas = document.createElement('canvas');
            const ctx = canvas.getContext('2d');

              // Load both images
              const sourceImg = new Image();
              const targetImg = new Image();

              sourceImg.onload = function() {
              targetImg.onload = function() {
              canvas.width = targetImg.width;
              canvas.height = targetImg.height;

              // Draw target image
              ctx.drawImage(targetImg, 0, 0);

              // Draw source face on target image (simplified)
              ctx.globalAlpha = parseFloat(blendLevel.value) / 100;
              ctx.drawImage(sourceImg, 100, 100, 200, 200);
              resultPreview.src = canvas.toDataURL();
              resultPreview.style.display = 'block';

              // Add to history
              addToHistory(resultPreview.src);
            };
            targetImg.src = targetPreview.src;
            };
            sourceImg.src = sourcePreview.src;
          }

          // Show Gemini response
          function showGeminiResponse() {
              geminiResponse.innerHTML = `
                <h4>Gemini Response:</h4>
                <p>I've enhanced your face swap by improving the skin tone matching, adjusting the lighting to match the target environment, and refining the facial features for a more natural appearance. The result now has better color consistency and more realistic shadows.</p>
              `;
              geminiResponse.style.display = 'block';
          }

          // Add to history
          function addToHistory(imageSrc) {
              const historyItem = document.createElement('div');
              historyItem.className = 'history-item';
              historyItem.innerHTML = `<img src="${imageSrc}" alt="Face swap history item">';

              historyItem.addEventListener('click', function() {
              resultPreview.src = imageSrc;
              resultPreview.style.display = 'block';
            });

              historyGrid.prepend(historyItem);

              // Limit history to 12 items
              if (historyGrid.children.length > 12) {
              historyGrid.removeChild(historyGrid.lastChild);
            }
          }

          // Load history from localStorage
          function loadHistory() {
            // In a real app, this would load from localStorage or a backend
            // For demo, we'll add a few placeholder items
              for (let i = 0; i < 3; i++) {
              const placeholderItem = document.createElement('div');
              placeholderItem.className = 'history-item';
              placeholderItem.innerHTML = `<div style="width:100%;height:100%;background:#f0f0f0;display:flex;align-items:center;justify-content:center;color:#888;"><i class="fas fa-user-circle fa-2x"></i></div>';

              historyGrid.appendChild(placeholderItem);
            }
          }

          // Initialize the app
          init();
        </script>
</body>
</html>