| <!DOCTYPE html> |
| <html lang="en"> |
| <head> |
| <meta charset="UTF-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| <title>Microstock Image Analyzer | Gemini-Powered SEO Metadata</title> |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> |
| <style> |
| :root { |
| --primary: #4a6bff; |
| --secondary: #f8f9fa; |
| --dark: #343a40; |
| --light: #ffffff; |
| --success: #28a745; |
| --info: #17a2b8; |
| --warning: #ffc107; |
| --danger: #dc3545; |
| --gemini-color: #0468d7; |
| } |
| |
| * { |
| margin: 0; |
| padding: 0; |
| box-sizing: border-box; |
| font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; |
| } |
| |
| body { |
| background-color: #f5f7ff; |
| color: var(--dark); |
| line-height: 1.6; |
| } |
| |
| .container { |
| max-width: 1200px; |
| margin: 0 auto; |
| padding: 2rem; |
| } |
| |
| header { |
| text-align: center; |
| margin-bottom: 2rem; |
| position: relative; |
| } |
| |
| h1 { |
| color: var(--primary); |
| margin-bottom: 0.5rem; |
| font-weight: 700; |
| } |
| |
| .subtitle { |
| color: #6c757d; |
| font-size: 1.1rem; |
| margin-bottom: 1.5rem; |
| } |
| |
| .upload-container { |
| background-color: var(--light); |
| border-radius: 10px; |
| padding: 2rem; |
| box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08); |
| margin-bottom: 2rem; |
| } |
| |
| .upload-area { |
| border: 2px dashed #d3d3d3; |
| border-radius: 8px; |
| padding: 3rem 2rem; |
| text-align: center; |
| cursor: pointer; |
| transition: all 0.3s ease; |
| margin-bottom: 1.5rem; |
| } |
| |
| .upload-area:hover { |
| border-color: var(--primary); |
| background-color: rgba(74, 107, 255, 0.05); |
| } |
| |
| .upload-area i { |
| font-size: 3rem; |
| color: var(--primary); |
| margin-bottom: 1rem; |
| } |
| |
| .upload-area h3 { |
| margin-bottom: 0.5rem; |
| } |
| |
| .upload-area p { |
| color: #6c757d; |
| margin-bottom: 1rem; |
| } |
| |
| #file-input { |
| display: none; |
| } |
| |
| .btn { |
| display: inline-block; |
| padding: 0.6rem 1.2rem; |
| background-color: var(--primary); |
| color: white; |
| border: none; |
| border-radius: 5px; |
| cursor: pointer; |
| font-size: 1rem; |
| font-weight: 500; |
| transition: all 0.3s ease; |
| text-align: center; |
| } |
| |
| .btn:hover { |
| background-color: #3a56d4; |
| transform: translateY(-2px); |
| box-shadow: 0 4px 12px rgba(74, 107, 255, 0.3); |
| } |
| |
| .btn-secondary { |
| background-color: #6c757d; |
| } |
| |
| .btn-secondary:hover { |
| background-color: #5a6268; |
| } |
| |
| .btn-warning { |
| background-color: var(--warning); |
| color: var(--dark); |
| } |
| |
| .btn-warning:hover { |
| background-color: #e0a800; |
| } |
| |
| .btn-success { |
| background-color: var(--success); |
| } |
| |
| .btn-success:hover { |
| background-color: #218838; |
| } |
| |
| .btn-gemini { |
| background-color: var(--gemini-color); |
| } |
| |
| .btn-gemini:hover { |
| background-color: #0352a8; |
| } |
| |
| .btn-block { |
| display: block; |
| width: 100%; |
| } |
| |
| .settings-panel { |
| background-color: var(--secondary); |
| border-radius: 8px; |
| padding: 1.5rem; |
| margin-bottom: 1.5rem; |
| } |
| |
| .settings-grid { |
| display: grid; |
| grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); |
| gap: 1rem; |
| } |
| |
| .form-group { |
| margin-bottom: 1rem; |
| } |
| |
| label { |
| display: block; |
| margin-bottom: 0.5rem; |
| font-weight: 500; |
| } |
| |
| select, input[type="text"], textarea { |
| width: 100%; |
| padding: 0.6rem; |
| border: 1px solid #ced4da; |
| border-radius: 5px; |
| background-color: var(--light); |
| } |
| |
| textarea { |
| min-height: 100px; |
| resize: vertical; |
| } |
| |
| .preview-container { |
| background-color: var(--light); |
| border-radius: 10px; |
| padding: 2rem; |
| box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08); |
| margin-bottom: 2rem; |
| } |
| |
| .result-grid { |
| display: grid; |
| grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); |
| gap: 2rem; |
| } |
| |
| .image-card { |
| background-color: var(--secondary); |
| border-radius: 8px; |
| overflow: hidden; |
| box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05); |
| transition: transform 0.3s ease; |
| } |
| |
| .image-card:hover { |
| transform: translateY(-5px); |
| box-shadow: 0 6px 15px rgba(0, 0, 0, 0.1); |
| } |
| |
| .image-preview { |
| width: 100%; |
| height: 200px; |
| object-fit: contain; |
| background-color: #e9ecef; |
| } |
| |
| .card-body { |
| padding: 1.5rem; |
| } |
| |
| .card-title { |
| font-size: 1.25rem; |
| margin-bottom: 0.75rem; |
| color: var(--dark); |
| } |
| |
| .card-text { |
| color: #6c757d; |
| margin-bottom: 1rem; |
| font-size: 0.9rem; |
| } |
| |
| .card-keywords { |
| display: flex; |
| flex-wrap: wrap; |
| gap: 0.5rem; |
| margin-bottom: 1rem; |
| } |
| |
| .keyword-chip { |
| background-color: var(--primary); |
| color: white; |
| padding: 0.3rem 0.6rem; |
| border-radius: 20px; |
| font-size: 0.75rem; |
| display: inline-block; |
| } |
| |
| .card-actions { |
| display: flex; |
| gap: 0.75rem; |
| margin-top: 1rem; |
| } |
| |
| .copy-btn { |
| background-color: var(--success); |
| padding: 0.5rem 1rem; |
| border-radius: 5px; |
| color: white; |
| border: none; |
| cursor: pointer; |
| display: flex; |
| align-items: center; |
| gap: 0.5rem; |
| font-size: 0.85rem; |
| } |
| |
| .regenerate-btn { |
| background-color: var(--info); |
| padding: 0.5rem 1rem; |
| border-radius: 5px; |
| color: white; |
| border: none; |
| cursor: pointer; |
| display: flex; |
| align-items: center; |
| gap: 0.5rem; |
| font-size: 0.85rem; |
| } |
| |
| .action-bar { |
| display: flex; |
| justify-content: space-between; |
| align-items: center; |
| margin-bottom: 1.5rem; |
| } |
| |
| .loading { |
| display: none; |
| text-align: center; |
| padding: 2rem; |
| } |
| |
| .spinner { |
| width: 50px; |
| height: 50px; |
| border: 5px solid rgba(74, 107, 255, 0.2); |
| border-radius: 50%; |
| border-top-color: var(--primary); |
| animation: spin 1s ease-in-out infinite; |
| margin: 0 auto 1rem; |
| } |
| |
| @keyframes spin { |
| to { transform: rotate(360deg); } |
| } |
| |
| .download-all { |
| background-color: var(--success); |
| margin-bottom: 2rem; |
| } |
| |
| .file-list { |
| list-style-type: none; |
| margin-bottom: 1rem; |
| max-height: 200px; |
| overflow-y: auto; |
| border: 1px solid #eee; |
| border-radius: 5px; |
| padding: 0.5rem; |
| } |
| |
| .file-list li { |
| padding: 0.5rem; |
| border-bottom: 1px solid #eee; |
| display: flex; |
| justify-content: space-between; |
| } |
| |
| .file-list li:last-child { |
| border-bottom: none; |
| } |
| |
| .file-name { |
| white-space: nowrap; |
| overflow: hidden; |
| text-overflow: ellipsis; |
| max-width: 80%; |
| } |
| |
| .file-size { |
| color: #6c757d; |
| font-size: 0.8rem; |
| } |
| |
| .remove-file { |
| color: #dc3545; |
| cursor: pointer; |
| margin-left: 0.5rem; |
| } |
| |
| .api-settings { |
| background-color: #fff8e1; |
| border: 1px solid #ffe0b2; |
| border-radius: 8px; |
| padding: 1.5rem; |
| margin-bottom: 1.5rem; |
| } |
| |
| .api-toggle { |
| display: flex; |
| align-items: center; |
| margin-bottom: 1rem; |
| } |
| |
| .api-toggle label { |
| margin-bottom: 0; |
| margin-left: 0.5rem; |
| cursor: pointer; |
| } |
| |
| .api-credentials { |
| display: none; |
| margin-top: 1rem; |
| } |
| |
| .api-credentials.active { |
| display: block; |
| } |
| |
| .tab-container { |
| margin-bottom: 1.5rem; |
| } |
| |
| .tabs { |
| display: flex; |
| border-bottom: 1px solid #ddd; |
| margin-bottom: 1rem; |
| } |
| |
| .tab { |
| padding: 0.75rem 1.5rem; |
| cursor: pointer; |
| border-bottom: 3px solid transparent; |
| transition: all 0.2s ease; |
| } |
| |
| .tab.active { |
| border-bottom: 3px solid var(--primary); |
| color: var(--primary); |
| font-weight: 500; |
| } |
| |
| .tab-content { |
| display: none; |
| } |
| |
| .tab-content.active { |
| display: block; |
| } |
| |
| .bulk-edit-container { |
| margin-top: 1.5rem; |
| } |
| |
| .alert { |
| padding: 1rem; |
| border-radius: 5px; |
| margin-bottom: 1rem; |
| display: flex; |
| align-items: flex-start; |
| gap: 0.75rem; |
| } |
| |
| .alert-info { |
| background-color: #e7f5ff; |
| border-left: 3px solid var(--info); |
| color: var(--dark); |
| } |
| |
| .alert-warning { |
| background-color: #fff4e6; |
| border-left: 3px solid var(--warning); |
| color: var(--dark); |
| } |
| |
| .alert-success { |
| background-color: #e6f5ea; |
| border-left: 3px solid var(--success); |
| color: var(--dark); |
| } |
| |
| .alert-error { |
| background-color: #fee; |
| border-left: 3px solid var(--danger); |
| color: var(--dark); |
| } |
| |
| .badge { |
| display: inline-block; |
| padding: 0.25rem 0.5rem; |
| border-radius: 20px; |
| font-size: 0.75rem; |
| font-weight: 500; |
| } |
| |
| .badge-gemini { |
| background-color: var(--gemini-color); |
| color: white; |
| } |
| |
| .badge-basic { |
| background-color: #6c757d; |
| color: white; |
| } |
| |
| .powered-by { |
| display: flex; |
| align-items: center; |
| justify-content: center; |
| gap: 0.5rem; |
| margin-top: 1rem; |
| color: var(--gemini-color); |
| font-weight: 500; |
| } |
| |
| footer { |
| text-align: center; |
| margin-top: 3rem; |
| color: #6c757d; |
| font-size: 0.9rem; |
| } |
| |
| @media (max-width: 768px) { |
| .container { |
| padding: 1rem; |
| } |
| |
| .settings-grid { |
| grid-template-columns: 1fr; |
| } |
| |
| .result-grid { |
| grid-template-columns: 1fr; |
| } |
| |
| .action-bar { |
| flex-direction: column; |
| align-items: flex-start; |
| gap: 1rem; |
| } |
| } |
| </style> |
| </head> |
| <body> |
| <div class="container"> |
| <header> |
| <h1>AI Microstock Image Analyzer</h1> |
| <p class="subtitle">Generate SEO-optimized metadata with Google Gemini AI for your stock photos</p> |
| </header> |
| |
| <div class="api-settings"> |
| <h3> |
| <i class="fas fa-key" style="color: var(--gemini-color);"></i> |
| Gemini API Configuration |
| </h3> |
| <div class="api-toggle"> |
| <input type="checkbox" id="use-gemini-api" checked> |
| <label for="use-gemini-api">Enable Google Gemini API Image Analysis</label> |
| </div> |
| |
| <div class="api-credentials active" id="api-credentials"> |
| <div class="form-group"> |
| <label for="api-key">Gemini API Key</label> |
| <input type="text" id="api-key" placeholder="Enter your Google Gemini API key (required)"> |
| <small>Get your API key from <a href="https://ai.google.dev/" target="_blank" style="color: var(--gemini-color);">Google AI Studio</a></small> |
| </div> |
| <button id="test-api-btn" class="btn btn-gemini"> |
| <i class="fas fa-plug"></i> Test API Connection |
| </button> |
| <button id="save-api-btn" class="btn"> |
| <i class="fas fa-save"></i> Save Settings |
| </button> |
| </div> |
| </div> |
| |
| <div class="tab-container"> |
| <div class="tabs"> |
| <div class="tab active" data-tab="upload">Upload Images</div> |
| <div class="tab" data-tab="bulk-edit">Bulk Edit</div> |
| </div> |
| |
| <div class="tab-content active" id="upload-tab"> |
| <div class="upload-container"> |
| <div class="upload-area" id="upload-area"> |
| <i class="fas fa-cloud-upload-alt"></i> |
| <h3>Upload Your Microstock Images</h3> |
| <p>Drag & drop your files here or click to browse</p> |
| <button class="btn">Select Files</button> |
| <input type="file" id="file-input" accept="image/*" multiple> |
| </div> |
| |
| <div class="file-list-container" id="file-list-container" style="display: none;"> |
| <h4>Selected Files (<span id="file-count">0</span>)</h4> |
| <ul class="file-list" id="file-list"></ul> |
| </div> |
| </div> |
| |
| <div class="settings-panel"> |
| <h3>Generation Settings</h3> |
| <div class="settings-grid"> |
| <div class="form-group"> |
| <label for="image-category">Image Category</label> |
| <select id="image-category"> |
| <option value="general">General</option> |
| <option value="business">Business</option> |
| <option value="technology">Technology</option> |
| <option value="nature">Nature</option> |
| <option value="people">People</option> |
| <option value="food">Food</option> |
| <option value="travel">Travel</option> |
| <option value="health">Health</option> |
| <option value="education">Education</option> |
| <option value="holiday">Holiday</option> |
| </select> |
| </div> |
| |
| <div class="form-group"> |
| <label for="image-style">Image Style</label> |
| <select id="image-style"> |
| <option value="realistic">Realistic</option> |
| <option value="flat">Flat Design</option> |
| <option value="3d">3D Rendering</option> |
| <option value="illustration">Illustration</option> |
| <option value="hand-drawn">Hand Drawn</option> |
| <option value="vector">Vector</option> |
| <option value="minimal">Minimal</option> |
| <option value="isometric">Isometric</option> |
| </select> |
| </div> |
| |
| <div class="form-group"> |
| <label for="language">Content Language</label> |
| <select id="language"> |
| <option value="en">English</option> |
| <option value="es">Spanish</option> |
| <option value="fr">French</option> |
| <option value="de">German</option> |
| <option value="pt">Portuguese</option> |
| </select> |
| </div> |
| |
| <div class="form-group"> |
| <label for="target-platform">Target Platform</label> |
| <select id="target-platform"> |
| <option value="all">All Platforms</option> |
| <option value="freepik">Freepik</option> |
| <option value="shutterstock">Shutterstock</option> |
| <option value="adobe">Adobe Stock</option> |
| <option value="iconscout">IconScout</option> |
| </select> |
| </div> |
| </div> |
| </div> |
| |
| <button id="generate-btn" class="btn btn-block btn-gemini"> |
| <i class="fas fa-magic"></i> Generate SEO Metadata with Gemini |
| </button> |
| |
| <div class="alert alert-info"> |
| <i class="fas fa-info-circle"></i> |
| <div> |
| <strong>Gemini AI Tip:</strong> For best results, describe the image category, style, and target platform above. |
| Gemini will generate highly relevant metadata based on your visual content and these specifications. |
| </div> |
| </div> |
| |
| <div class="loading" id="loading"> |
| <div class="spinner"></div> |
| <p id="loading-text">Gemini is analyzing your images and generating SEO metadata...</p> |
| <div class="powered-by"> |
| <img src="https://www.gstatic.com/lamda/images/gemini_sparkle_v002_d4735304ff6292a690345.svg" alt="Gemini" width="20"> |
| Powered by Google Gemini AI |
| </div> |
| </div> |
| |
| <div class="preview-container" id="results-container" style="display: none;"> |
| <div class="action-bar"> |
| <h3>Generated Results</h3> |
| <div> |
| <button id="download-all" class="btn download-all"> |
| <i class="fas fa-download"></i> Download All as CSV |
| </button> |
| <button id="regenerate-all" class="btn btn-warning"> |
| <i class="fas fa-sync-alt"></i> Regenerate All |
| </button> |
| </div> |
| </div> |
| |
| <div class="result-grid" id="result-grid"></div> |
| </div> |
| </div> |
| |
| <div class="tab-content" id="bulk-edit-tab"> |
| <div class="alert alert-warning"> |
| <i class="fas fa-exclamation-triangle"></i> |
| <div> |
| <strong>Notice:</strong> Please upload files first, then you can edit all metadata in bulk here. |
| Bulk edits will override existing metadata. |
| </div> |
| </div> |
| |
| <div class="bulk-edit-container" id="bulk-edit-fields" style="display: none;"> |
| <div class="form-group"> |
| <label for="bulk-title">Bulk Edit Title</label> |
| <input type="text" id="bulk-title" placeholder="Will be applied to all images"> |
| </div> |
| |
| <div class="form-group"> |
| <label for="bulk-description">Bulk Edit Description</label> |
| <textarea id="bulk-description" placeholder="Will be applied to all images"></textarea> |
| </div> |
| |
| <div class="form-group"> |
| <label for="bulk-keywords">Bulk Edit Keywords (comma separated)</label> |
| <textarea id="bulk-keywords" placeholder="Will replace all keywords for all images"></textarea> |
| </div> |
| |
| <button id="apply-bulk-edit" class="btn">Apply Bulk Changes to All Images</button> |
| </div> |
| </div> |
| </div> |
| |
| <div class="alert alert-info" id="api-status" style="display: none;"> |
| <i class="fas fa-info-circle"></i> |
| <div id="api-status-text"></div> |
| </div> |
| </div> |
| |
| <footer> |
| <p>AI Microstock Image Analyzer © 2023 | Powered by Google Gemini AI</p> |
| </footer> |
| |
| <script> |
| |
| const uploadArea = document.getElementById('upload-area'); |
| const fileInput = document.getElementById('file-input'); |
| const fileListContainer = document.getElementById('file-list-container'); |
| const fileList = document.getElementById('file-list'); |
| const fileCount = document.getElementById('file-count'); |
| const generateBtn = document.getElementById('generate-btn'); |
| const loadingIndicator = document.getElementById('loading'); |
| const loadingText = document.getElementById('loading-text'); |
| const resultsContainer = document.getElementById('results-container'); |
| const resultGrid = document.getElementById('result-grid'); |
| const downloadAllBtn = document.getElementById('download-all'); |
| const regenerateAllBtn = document.getElementById('regenerate-all'); |
| const applyBulkEditBtn = document.getElementById('apply-bulk-edit'); |
| const useGeminiApiCheckbox = document.getElementById('use-gemini-api'); |
| const apiCredentialsSection = document.getElementById('api-credentials'); |
| const saveApiBtn = document.getElementById('save-api-btn'); |
| const testApiBtn = document.getElementById('test-api-btn'); |
| const apiKeyInput = document.getElementById('api-key'); |
| const tabs = document.querySelectorAll('.tab'); |
| const tabContents = document.querySelectorAll('.tab-content'); |
| const bulkEditFields = document.getElementById('bulk-edit-fields'); |
| const apiStatusEl = document.getElementById('api-status'); |
| const apiStatusText = document.getElementById('api-status-text'); |
| |
| |
| let uploadedFiles = []; |
| let geminiApiKey = ''; |
| let useGeminiApi = true; |
| let apiConnected = false; |
| |
| |
| function init() { |
| |
| const savedApiKey = localStorage.getItem('geminiApiKey'); |
| const savedApiEnabled = localStorage.getItem('useGeminiApi'); |
| |
| if (savedApiKey) { |
| apiKeyInput.value = savedApiKey; |
| geminiApiKey = savedApiKey; |
| } |
| |
| if (savedApiEnabled !== null) { |
| useGeminiApi = savedApiEnabled === 'true'; |
| useGeminiApiCheckbox.checked = useGeminiApi; |
| apiCredentialsSection.classList.toggle('active', useGeminiApi); |
| } |
| |
| |
| if (geminiApiKey) { |
| showApiStatus('Using saved Gemini API key. Click "Test Connection" to verify.', 'info'); |
| } |
| } |
| |
| |
| uploadArea.addEventListener('click', () => fileInput.click()); |
| uploadArea.addEventListener('dragover', (e) => { |
| e.preventDefault(); |
| uploadArea.style.borderColor = 'var(--primary)'; |
| uploadArea.style.backgroundColor = 'rgba(74, 107, 255, 0.05)'; |
| }); |
| |
| uploadArea.addEventListener('dragleave', () => { |
| uploadArea.style.borderColor = '#d3d3d3'; |
| uploadArea.style.backgroundColor = 'transparent'; |
| }); |
| |
| uploadArea.addEventListener('drop', (e) => { |
| e.preventDefault(); |
| uploadArea.style.borderColor = '#d3d3d3'; |
| uploadArea.style.backgroundColor = 'transparent'; |
| |
| if (e.dataTransfer.files.length) { |
| handleFiles(e.dataTransfer.files); |
| } |
| }); |
| |
| fileInput.addEventListener('change', () => { |
| if (fileInput.files.length) { |
| handleFiles(fileInput.files); |
| } |
| }); |
| |
| generateBtn.addEventListener('click', generateMetadata); |
| downloadAllBtn.addEventListener('click', downloadAllAsCSV); |
| regenerateAllBtn.addEventListener('click', regenerateAllMetadata); |
| applyBulkEditBtn.addEventListener('click', applyBulkEdit); |
| |
| useGeminiApiCheckbox.addEventListener('change', toggleGeminiApi); |
| saveApiBtn.addEventListener('click', saveApiSettings); |
| testApiBtn.addEventListener('click', testApiConnection); |
| |
| |
| tabs.forEach(tab => { |
| tab.addEventListener('click', () => { |
| const tabId = tab.getAttribute('data-tab'); |
| |
| |
| tabs.forEach(t => t.classList.remove('active')); |
| tab.classList.add('active'); |
| |
| |
| tabContents.forEach(content => content.classList.remove('active')); |
| document.getElementById(`${tabId}-tab`).classList.add('active'); |
| |
| |
| if (tabId === 'bulk-edit' && uploadedFiles.length > 0) { |
| bulkEditFields.style.display = 'block'; |
| } |
| }); |
| }); |
| |
| |
| function showApiStatus(message, type = 'info') { |
| apiStatusEl.style.display = 'flex'; |
| apiStatusText.innerHTML = message; |
| |
| |
| apiStatusEl.className = 'alert'; |
| if (type === 'info') apiStatusEl.classList.add('alert-info'); |
| else if (type === 'error') apiStatusEl.classList.add('alert-error'); |
| else if (type === 'success') apiStatusEl.classList.add('alert-success'); |
| } |
| |
| |
| function hideApiStatus() { |
| apiStatusEl.style.display = 'none'; |
| } |
| |
| |
| function handleFiles(files) { |
| |
| if (files.length > 20) { |
| alert('For demo purposes, please upload up to 20 files at a time.'); |
| return; |
| } |
| |
| uploadedFiles = Array.from(files).filter(file => file.type.startsWith('image/')); |
| updateFileList(); |
| |
| if (uploadedFiles.length > 0) { |
| fileListContainer.style.display = 'block'; |
| |
| |
| if (document.querySelector('.tab.active').dataset.tab === 'bulk-edit') { |
| bulkEditFields.style.display = 'block'; |
| } |
| } else { |
| fileListContainer.style.display = 'none'; |
| bulkEditFields.style.display = 'none'; |
| } |
| } |
| |
| |
| function updateFileList() { |
| fileList.innerHTML = ''; |
| fileCount.textContent = uploadedFiles.length; |
| |
| uploadedFiles.forEach((file, index) => { |
| const li = document.createElement('li'); |
| |
| const nameSpan = document.createElement('span'); |
| nameSpan.className = 'file-name'; |
| nameSpan.textContent = file.name; |
| |
| const sizeSpan = document.createElement('span'); |
| sizeSpan.className = 'file-size'; |
| sizeSpan.textContent = formatFileSize(file.size); |
| |
| const removeSpan = document.createElement('span'); |
| removeSpan.className = 'remove-file'; |
| removeSpan.innerHTML = '<i class="fas fa-times"></i>'; |
| removeSpan.addEventListener('click', () => removeFile(index)); |
| |
| li.appendChild(nameSpan); |
| li.appendChild(sizeSpan); |
| li.appendChild(removeSpan); |
| fileList.appendChild(li); |
| }); |
| } |
| |
| |
| function removeFile(index) { |
| uploadedFiles.splice(index, 1); |
| updateFileList(); |
| |
| if (uploadedFiles.length === 0) { |
| fileListContainer.style.display = 'none'; |
| bulkEditFields.style.display = 'none'; |
| resultsContainer.style.display = 'none'; |
| } |
| } |
| |
| |
| function formatFileSize(bytes) { |
| if (bytes === 0) return '0 Bytes'; |
| |
| const k = 1024; |
| const sizes = ['Bytes', 'KB', 'MB', 'GB']; |
| const i = Math.floor(Math.log(bytes) / Math.log(k)); |
| |
| return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i]; |
| } |
| |
| |
| function toggleGeminiApi() { |
| useGeminiApi = useGeminiApiCheckbox.checked; |
| apiCredentialsSection.classList.toggle('active', useGeminiApi); |
| |
| if (!useGeminiApi) { |
| showApiStatus('Gemini API is disabled. Using basic image analysis.', 'warning'); |
| } else { |
| if (geminiApiKey) { |
| showApiStatus('Gemini API is enabled but not verified. Click "Test Connection" to verify.', 'info'); |
| } else { |
| showApiStatus('Gemini API is not configured. Please enter your API key.', 'error'); |
| } |
| } |
| } |
| |
| |
| function saveApiSettings() { |
| const apiKey = apiKeyInput.value.trim(); |
| |
| if (useGeminiApi && !apiKey) { |
| showApiStatus('Please enter your Gemini API key', 'error'); |
| return; |
| } |
| |
| geminiApiKey = apiKey; |
| localStorage.setItem('geminiApiKey', geminiApiKey); |
| localStorage.setItem('useGeminiApi', useGeminiApi); |
| |
| showApiStatus('API settings saved successfully!', 'success'); |
| setTimeout(hideApiStatus, 3000); |
| |
| |
| if (!apiConnected && useGeminiApi && geminiApiKey) { |
| showApiStatus('Settings saved. Click "Test Connection" to verify the API key.', 'info'); |
| } |
| } |
| |
| |
| async function testApiConnection() { |
| const apiKey = apiKeyInput.value.trim(); |
| |
| if (!apiKey) { |
| showApiStatus('Please enter your Gemini API key first', 'error'); |
| return; |
| } |
| |
| testApiBtn.disabled = true; |
| testApiBtn.innerHTML = '<i class="fas fa-spinner fa-spin"></i> Testing...'; |
| |
| try { |
| |
| await callGeminiAPI( |
| apiKey, |
| "What is 2 + 2?", |
| false |
| ); |
| |
| apiConnected = true; |
| showApiStatus('✅ Gemini API connection successful! You can now analyze images.', 'success'); |
| testApiBtn.innerHTML = '<i class="fas fa-check-circle"></i> Connection Verified'; |
| testApiBtn.className = 'btn btn-success'; |
| |
| |
| setTimeout(() => { |
| testApiBtn.innerHTML = '<i class="fas fa-plug"></i> Test API Connection'; |
| testApiBtn.className = 'btn btn-gemini'; |
| testApiBtn.disabled = false; |
| }, 5000); |
| |
| } catch (error) { |
| apiConnected = false; |
| console.error('API test failed:', error); |
| testApiBtn.innerHTML = '<i class="fas fa-exclamation-circle"></i> Connection Failed'; |
| testApiBtn.className = 'btn btn-secondary'; |
| |
| let errorMessage = 'Failed to connect to Gemini API. '; |
| if (error.message.includes('API_KEY_INVALID')) { |
| errorMessage += 'The API key is invalid. Please check and try again.'; |
| } else if (error.message.includes('quota')) { |
| errorMessage += 'You may have exceeded your quota or the API may not be enabled.'; |
| } else { |
| errorMessage += 'Please check your network connection and try again.'; |
| } |
| |
| showApiStatus(errorMessage, 'error'); |
| |
| |
| setTimeout(() => { |
| testApiBtn.innerHTML = '<i class="fas fa-plug"></i> Test API Connection'; |
| testApiBtn.className = 'btn btn-gemini'; |
| testApiBtn.disabled = false; |
| }, 5000); |
| } |
| } |
| |
| |
| async function callGeminiAPI(apiKey, prompt, includeImage, imageBase64 = null) { |
| const apiUrl = `https://generativelanguage.googleapis.com/v1beta/models/gemini-pro-vision:generateContent?key=${apiKey}`; |
| |
| |
| let requestBody = { |
| contents: [{ |
| parts: [ |
| { text: prompt } |
| ] |
| }] |
| }; |
| |
| if (includeImage && imageBase64) { |
| requestBody.contents[0].parts.push({ |
| inlineData: { |
| mimeType: "image/jpeg", |
| data: imageBase64.split(',')[1] |
| } |
| }); |
| } |
| |
| const response = await fetch(apiUrl, { |
| method: 'POST', |
| headers: { |
| 'Content-Type': 'application/json' |
| }, |
| body: JSON.stringify(requestBody) |
| }); |
| |
| if (!response.ok) { |
| const errorData = await response.json(); |
| throw new Error(errorData.error?.message || 'Unknown API error'); |
| } |
| |
| const data = await response.json(); |
| return data; |
| } |
| |
| |
| async function generateMetadata() { |
| if (uploadedFiles.length === 0) { |
| showApiStatus('Please upload at least one image first.', 'error'); |
| return; |
| } |
| |
| if (useGeminiApi && !geminiApiKey) { |
| showApiStatus('Gemini API is enabled but no API key is provided. Please enter your API key.', 'error'); |
| return; |
| } |
| |
| loadingIndicator.style.display = 'block'; |
| resultsContainer.style.display = 'none'; |
| generateBtn.disabled = true; |
| |
| |
| resultGrid.innerHTML = ''; |
| |
| |
| for (let i = 0; i < uploadedFiles.length; i++) { |
| loadingText.textContent = `Analyzing images with ${useGeminiApi ? 'Gemini AI' : 'basic analysis'} (${i+1}/${uploadedFiles.length})...`; |
| |
| try { |
| await processSingleImage(uploadedFiles[i], i); |
| } catch (error) { |
| console.error(`Error processing image ${i}:`, error); |
| |
| |
| if (useGeminiApi) { |
| loadingText.textContent = `Gemini API failed, falling back to basic analysis (${i+1}/${uploadedFiles.length})...`; |
| uploadedFiles[i].metadata = generateDummyMetadata(uploadedFiles[i]); |
| createImageCard(uploadedFiles[i], i); |
| } |
| } |
| } |
| |
| loadingIndicator.style.display = 'none'; |
| resultsContainer.style.display = 'block'; |
| generateBtn.disabled = false; |
| |
| |
| window.scrollTo({ |
| top: resultsContainer.offsetTop - 20, |
| behavior: 'smooth' |
| }); |
| } |
| |
| |
| async function processSingleImage(file, index) { |
| return new Promise((resolve) => { |
| const reader = new FileReader(); |
| |
| reader.onload = async function(e) { |
| const imageDataUrl = e.target.result; |
| |
| |
| let metadata; |
| let source = ''; |
| |
| if (useGeminiApi && geminiApiKey) { |
| try { |
| metadata = await generateMetadataWithGemini(imageDataUrl, file); |
| source = 'gemini'; |
| } catch (error) { |
| console.error('Gemini API error, falling back to basic analysis:', error); |
| metadata = generateDummyMetadata(file); |
| source = 'basic'; |
| } |
| } else { |
| metadata = generateDummyMetadata(file); |
| source = 'basic'; |
| } |
| |
| |
| uploadedFiles[index].metadata = metadata; |
| uploadedFiles[index].source = source; |
| |
| createImageCard(uploadedFiles[index], index); |
| resolve(); |
| }; |
| |
| reader.readAsDataURL(file); |
| }); |
| } |
| |
| |
| function createImageCard(file, index) { |
| const metadata = file.metadata; |
| const imageDataUrl = URL.createObjectURL(file); |
| |
| const card = document.createElement('div'); |
| card.className = 'image-card'; |
| card.innerHTML = ` |
| <img src="${imageDataUrl}" alt="Preview" class="image-preview"> |
| <div class="card-body"> |
| <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 0.5rem;"> |
| <h4 class="card-title">${metadata.title}</h4> |
| <span class="badge ${file.source === 'gemini' ? 'badge-gemini' : 'badge-basic'}"> |
| ${file.source === 'gemini' ? 'Gemini AI' : 'Basic'} |
| </span> |
| </div> |
| <p class="card-text">${metadata.description}</p> |
| |
| <div class="card-keywords"> |
| ${metadata.keywords.slice(0, 5).map(keyword => |
| `<span class="keyword-chip">${keyword.trim()}</span>` |
| ).join('')} |
| ${metadata.keywords.length > 5 ? '<span class="keyword-chip">+'+ (metadata.keywords.length - 5) +'</span>' : ''} |
| </div> |
| |
| <div class="card-actions"> |
| <button class="copy-btn" onclick="copyMetadata(${index})"> |
| <i class="fas fa-copy"></i> Copy |
| </button> |
| <button class="regenerate-btn" onclick="regenerateMetadata(${index})"> |
| <i class="fas fa-sync-alt"></i> Regenerate |
| </button> |
| </div> |
| </div> |
| `; |
| |
| resultGrid.appendChild(card); |
| } |
| |
| |
| async function generateMetadataWithGemini(imageDataUrl, file) { |
| const category = document.getElementById('image-category').value; |
| const style = document.getElementById('image-style').value; |
| const platform = document.getElementById('target-platform').value; |
| const language = document.getElementById('language').value; |
| |
| const prompt = ` |
| Act as a professional microstock image analyst. Analyze this image and generate comprehensive metadata. |
| |
| Please provide: |
| 1. A title (60-100 characters) that is SEO-friendly, contains relevant keywords, and accurately describes the image |
| 2. A concise description (70-150 characters) that highlights key visual elements and potential use cases |
| 3. A list of 50 relevant keywords (comma-separated) that would help this image be discovered on stock platforms |
| |
| Important considerations: |
| - Image category: ${category} |
| - Visual style: ${style} |
| - Target platform: ${platform === 'all' ? 'general stock platforms' : platform} |
| - Preferred language: ${language} |
| - Keywords should be in English but relevant for the target language |
| |
| Format your response as a valid JSON object with these fields: |
| - "title": string |
| - "description": string |
| - "keywords": array of strings (maximum 50) |
| `; |
| |
| |
| const response = await callGeminiAPI(geminiApiKey, prompt, true, imageDataUrl); |
| |
| |
| if (!response.candidates || !response.candidates[0].content.parts[0].text) { |
| throw new Error('Invalid response from Gemini API'); |
| } |
| |
| |
| const responseText = response.candidates[0].content.parts[0].text; |
| let metadata; |
| |
| try { |
| |
| const jsonMatch = responseText.match(/\{[\s\S]*\}/); |
| if (jsonMatch) { |
| metadata = JSON.parse(jsonMatch[0]); |
| } else { |
| metadata = JSON.parse(responseText); |
| } |
| |
| |
| if (!metadata.title || !metadata.description || !metadata.keywords) { |
| throw new Error('Missing required fields in Gemini response'); |
| } |
| |
| |
| if (Array.isArray(metadata.keywords)) { |
| metadata.keywords = metadata.keywords.map(k => k.trim()); |
| } else if (typeof metadata.keywords === 'string') { |
| metadata.keywords = metadata.keywords.split(',').map(k => k.trim()); |
| } |
| |
| |
| if (metadata.keywords.length > 50) { |
| metadata.keywords = metadata.keywords.slice(0, 50); |
| } |
| |
| return metadata; |
| |
| } catch (error) { |
| console.error('Error parsing Gemini response:', error); |
| console.log('Original response:', responseText); |
| throw new Error('Failed to parse metadata from Gemini response'); |
| } |
| } |
| |
| |
| function generateDummyMetadata(file) { |
| |
| |
| const category = document.getElementById('image-category').value; |
| const style = document.getElementById('image-style').value; |
| const platform = document.getElementById('target-platform').value; |
| |
| const baseName = file.name.replace(/\.[^/.]+$/, "").replace(/[^a-zA-Z0-9]/g, ' ').trim(); |
| |
| |
| const title = `${capitalizeWords(baseName)} ${style} ${category} image for ${platform} stock`.substring(0, 75); |
| |
| |
| const description = `High-quality ${style} ${category} stock image featuring ${baseName}. Perfect for ${platform} and commercial use in ${category} projects.`; |
| |
| |
| let keywords = [ |
| ...baseName.toLowerCase().split(' '), |
| category, style, platform, |
| 'stock photo', 'royalty free', 'commercial use', |
| 'high resolution', 'premium', 'content', 'resource' |
| ]; |
| |
| |
| for (let i = keywords.length; i < 50; i++) { |
| keywords.push(`keyword${i + 1}`); |
| } |
| |
| |
| keywords = [...new Set(keywords)].slice(0, 50); |
| |
| return { |
| title: title, |
| description: description, |
| keywords: keywords |
| }; |
| } |
| |
| |
| function copyMetadata(index) { |
| const file = uploadedFiles[index]; |
| const metadata = file.metadata; |
| |
| const textToCopy = `Title: ${metadata.title}\n\n` + |
| `Description: ${metadata.description}\n\n` + |
| `Keywords: ${metadata.keywords.join(', ')}`; |
| |
| navigator.clipboard.writeText(textToCopy).then(() => { |
| showApiStatus('Metadata copied to clipboard!', 'success'); |
| setTimeout(hideApiStatus, 3000); |
| }).catch(err => { |
| console.error('Failed to copy: ', err); |
| showApiStatus('Failed to copy metadata', 'error'); |
| }); |
| } |
| |
| |
| async function regenerateMetadata(index) { |
| const category = document.getElementById('image-category').value; |
| const style = document.getElementById('image-style').value; |
| const platform = document.getElementById('target-platform').value; |
| const language = document.getElementById('language').value; |
| |
| if (useGeminiApi && !geminiApiKey) { |
| showApiStatus('Gemini API is enabled but no API key is provided.', 'error'); |
| return; |
| } |
| |
| let newMetadata; |
| let source = ''; |
| |
| if (useGeminiApi && geminiApiKey) { |
| try { |
| const reader = new FileReader(); |
| |
| await new Promise((resolve) => { |
| reader.onload = async function(e) { |
| const imageDataUrl = e.target.result; |
| newMetadata = await generateMetadataWithGemini(imageDataUrl, uploadedFiles[index]); |
| source = 'gemini'; |
| resolve(); |
| }; |
| |
| reader.readAsDataURL(uploadedFiles[index]); |
| }); |
| } catch (error) { |
| console.error('Gemini API error, falling back to basic analysis:', error); |
| newMetadata = generateDummyMetadata(uploadedFiles[index]); |
| source = 'basic'; |
| } |
| } else { |
| newMetadata = generateDummyMetadata(uploadedFiles[index]); |
| source = 'basic'; |
| } |
| |
| uploadedFiles[index].metadata = newMetadata; |
| uploadedFiles[index].source = source; |
| |
| |
| const cards = document.querySelectorAll('.image-card'); |
| if (cards[index]) { |
| const cardBody = cards[index].querySelector('.card-body'); |
| if (cardBody) { |
| cardBody.querySelector('.card-title').textContent = newMetadata.title; |
| cardBody.querySelector('.card-text').textContent = newMetadata.description; |
| cardBody.querySelector('.badge').className = `badge ${source === 'gemini' ? 'badge-gemini' : 'badge-basic'}`; |
| cardBody.querySelector('.badge').textContent = source === 'gemini' ? 'Gemini AI' : 'Basic'; |
| |
| const keywordsContainer = cardBody.querySelector('.card-keywords'); |
| keywordsContainer.innerHTML = ` |
| ${newMetadata.keywords.slice(0, 5).map(keyword => |
| `<span class="keyword-chip">${keyword.trim()}</span>` |
| ).join('')} |
| ${newMetadata.keywords.length > 5 ? '<span class="keyword-chip">+'+ (newMetadata.keywords.length - 5) +'</span>' : ''} |
| `; |
| } |
| } |
| |
| showApiStatus(`${source === 'gemini' ? 'Gemini' : 'Basic'} metadata regenerated for this image.`, 'success'); |
| setTimeout(hideApiStatus, 3000); |
| } |
| |
| |
| async function regenerateAllMetadata() { |
| if (uploadedFiles.length === 0) return; |
| |
| if (useGeminiApi && !geminiApiKey) { |
| showApiStatus('Gemini API is enabled but no API key is provided.', 'error'); |
| return; |
| } |
| |
| loadingIndicator.style.display = 'block'; |
| loadingText.textContent = 'Regenerating metadata for all images...'; |
| generateBtn.disabled = true; |
| regenerateAllBtn.disabled = true; |
| |
| |
| for (let i = 0; i < uploadedFiles.length; i++) { |
| await regenerateMetadata(i); |
| } |
| |
| loadingIndicator.style.display = 'none'; |
| generateBtn.disabled = false; |
| regenerateAllBtn.disabled = false; |
| } |
| |
| |
| function applyBulkEdit() { |
| const bulkTitle = document.getElementById('bulk-title').value.trim(); |
| const bulkDescription = document.getElementById('bulk-description').value.trim(); |
| const bulkKeywords = document.getElementById('bulk-keywords').value.trim(); |
| |
| if (!bulkTitle && !bulkDescription && !bulkKeywords) { |
| showApiStatus('Please enter at least one field to apply bulk changes', 'error'); |
| return; |
| } |
| |
| uploadedFiles.forEach((file, index) => { |
| if (!file.metadata) { |
| file.metadata = generateDummyMetadata(file); |
| } |
| |
| if (bulkTitle) { |
| file.metadata.title = bulkTitle; |
| } |
| |
| if (bulkDescription) { |
| file.metadata.description = bulkDescription; |
| } |
| |
| if (bulkKeywords) { |
| file.metadata.keywords = bulkKeywords.split(',').map(k => k.trim()).filter(k => k); |
| } |
| |
| |
| file.source = 'manual'; |
| |
| |
| const cards = document.querySelectorAll('.image-card'); |
| if (cards[index]) { |
| const cardBody = cards[index].querySelector('.card-body'); |
| if (cardBody) { |
| if (bulkTitle) { |
| cardBody.querySelector('.card-title').textContent = file.metadata.title; |
| } |
| if (bulkDescription) { |
| cardBody.querySelector('.card-text').textContent = file.metadata.description; |
| } |
| if (bulkKeywords) { |
| const keywordsContainer = cardBody.querySelector('.card-keywords'); |
| keywordsContainer.innerHTML = ` |
| ${file.metadata.keywords.slice(0, 5).map(keyword => |
| `<span class="keyword-chip">${keyword.trim()}</span>` |
| ).join('')} |
| ${file.metadata.keywords.length > 5 ? '<span class="keyword-chip">+'+ (file.metadata.keywords.length - 5) +'</span>' : ''} |
| `; |
| } |
| cardBody.querySelector('.badge').className = 'badge badge-basic'; |
| cardBody.querySelector('.badge').textContent = 'Manual'; |
| } |
| } |
| }); |
| |
| showApiStatus('Bulk changes applied to all images!', 'success'); |
| setTimeout(hideApiStatus, 3000); |
| } |
| |
| |
| function downloadAllAsCSV() { |
| let csvContent = "data:text/csv;charset=utf-8,"; |
| |
| |
| csvContent += "Filename,Title,Description,Keywords,Source\n"; |
| |
| |
| uploadedFiles.forEach(file => { |
| if (!file.metadata) { |
| file.metadata = generateDummyMetadata(file); |
| } |
| |
| const metadata = file.metadata; |
| const row = [ |
| file.name, |
| `"${metadata.title}"`, |
| `"${metadata.description}"`, |
| `"${metadata.keywords.join(', ')}"`, |
| file.source || 'basic' |
| ].join(','); |
| |
| csvContent += row + "\n"; |
| }); |
| |
| |
| const encodedUri = encodeURI(csvContent); |
| const link = document.createElement("a"); |
| link.setAttribute("href", encodedUri); |
| link.setAttribute("download", "microstock_metadata.csv"); |
| document.body.appendChild(link); |
| |
| |
| link.click(); |
| document.body.removeChild(link); |
| } |
| |
| |
| function capitalizeWords(str) { |
| return str.split(' ').map(word => |
| word.charAt(0).toUpperCase() + word.slice(1) |
| ).join(' '); |
| } |
| |
| |
| init(); |
| </script> |
| </body> |
| </html> |
