-
+
-
- Boost Your Website's SEO with AI-Powered Image Naming
-Stop manually renaming images for SEO. Our AI tool automatically generates SEO-friendly filenames based on your keywords and image content.
- Try It Free -
- 
+
-
+
+
+
+
+
+
+ AI-Powered
+
+ Save time! Bulk rename your images individually for better SEO performance
+Transform your image SEO workflow with AI that analyzes content and generates perfect filenames automatically. No more manual renaming - just upload, enhance, and download.
+ +
+
+
+
+
+ AI Vision Analysis
+
+
+
+ Smart Keyword Enhancement
+
+
+
+ Instant ZIP Download
+
+
+
+
+ 10k+
+ Images Processed
+
+
+ 95%
+ Time Saved
+
+
+
+
+
+
+
+
+
+ Drop your images here
+or click to browse files
+ + +
+ Supports: JPG, PNG, WEBP, GIF
+
+
-
Rename Your Images with AI
-Upload your images, provide keywords, and let our AI generate SEO-optimized filenames.
- -
-
-
-
-
Drag & Drop your images here
-or
- - +
+
-
+
+
+
+
+ Step 1: Add Your Keywords
+Help our AI understand your content better
+
+
+
+
+
+
+
-
-
- Enter Keywords for Your Images
-Provide keywords that describe your images to help our AI generate better filenames.
- -
-
-
-
-
-
-
-
-
-
Your Images
-
-
-
-
-
-
+
@@ -88,30 +136,40 @@
+
+
+
+
+
+ Step 2: Review & Download
+Your AI-generated filenames are ready
+
+
+
+
+
+
+
-
Powerful Features for Better SEO
-Our AI-powered tool helps you optimize your images for search engines without the manual work.
+
+
Powerful Features for Better SEO
+Everything you need to optimize your images for search engines
+
-
+
+
+
AI-Powered Naming
-Our advanced AI generates SEO-friendly filenames that help your images rank higher in search results.
+Advanced AI generates SEO-friendly filenames that help your images rank higher in search results.
-
+
+
+
Image Recognition
AI analyzes your images to understand content and context for more accurate naming.
-
+
+
+
Keyword Enhancement
Enhance your keywords with AI-suggested synonyms for better SEO performance.
-
+
@@ -121,8 +179,10 @@
+
+
Easy Download
Download all your renamed images in a single ZIP file for easy implementation.
-
How It Works
-Get better SEO for your images in just three simple steps.
+
+
How It Works
+Get better SEO for your images in just three simple steps
+
@@ -148,8 +208,10 @@
diff --git a/styles.css b/styles.css
index d9c322c..fcfb787 100644
--- a/styles.css
+++ b/styles.css
@@ -5,281 +5,577 @@
box-sizing: border-box;
}
+:root {
+ /* Modern color palette */
+ --primary: #6366f1;
+ --primary-light: #818cf8;
+ --primary-dark: #4f46e5;
+ --secondary: #06b6d4;
+ --success: #10b981;
+ --warning: #f59e0b;
+ --danger: #ef4444;
+
+ /* Neutral colors */
+ --gray-50: #f9fafb;
+ --gray-100: #f3f4f6;
+ --gray-200: #e5e7eb;
+ --gray-300: #d1d5db;
+ --gray-400: #9ca3af;
+ --gray-500: #6b7280;
+ --gray-600: #4b5563;
+ --gray-700: #374151;
+ --gray-800: #1f2937;
+ --gray-900: #111827;
+
+ /* Typography */
+ --font-sans: 'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif;
+ --font-mono: 'JetBrains Mono', 'SF Mono', Consolas, monospace;
+
+ /* Spacing */
+ --space-xs: 0.25rem;
+ --space-sm: 0.5rem;
+ --space-md: 1rem;
+ --space-lg: 1.5rem;
+ --space-xl: 2rem;
+ --space-2xl: 3rem;
+ --space-3xl: 4rem;
+
+ /* Border radius */
+ --radius-sm: 0.25rem;
+ --radius-md: 0.5rem;
+ --radius-lg: 0.75rem;
+ --radius-xl: 1rem;
+ --radius-2xl: 1.5rem;
+
+ /* Shadows */
+ --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
+ --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
+ --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
+ --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
+}
+
+@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap');
+
body {
- font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+ font-family: var(--font-sans);
line-height: 1.6;
- color: #333;
- background-color: #f8f9fa;
+ color: var(--gray-800);
+ background-color: white;
+ font-size: 16px;
+ -webkit-font-smoothing: antialiased;
+ -moz-osx-font-smoothing: grayscale;
}
.container {
- width: 90%;
+ width: 100%;
max-width: 1200px;
margin: 0 auto;
- padding: 0 15px;
+ padding: 0 var(--space-lg);
}
-/* Header styles */
+/* Button styles */
+.btn {
+ display: inline-flex;
+ align-items: center;
+ justify-content: center;
+ gap: var(--space-sm);
+ padding: var(--space-sm) var(--space-lg);
+ border-radius: var(--radius-lg);
+ text-decoration: none;
+ font-weight: 500;
+ font-size: 0.875rem;
+ cursor: pointer;
+ transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
+ border: none;
+ outline: none;
+ position: relative;
+ overflow: hidden;
+}
+
+.btn:disabled {
+ opacity: 0.5;
+ cursor: not-allowed;
+ transform: none !important;
+}
+
+.btn-primary {
+ background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
+ color: white;
+ box-shadow: var(--shadow-sm);
+}
+
+.btn-primary:hover:not(:disabled) {
+ transform: translateY(-1px);
+ box-shadow: var(--shadow-lg);
+ background: linear-gradient(135deg, var(--primary-light) 0%, var(--primary) 100%);
+}
+
+.btn-outline {
+ background: transparent;
+ color: var(--gray-700);
+ border: 2px solid var(--gray-200);
+}
+
+.btn-outline:hover:not(:disabled) {
+ background: var(--gray-50);
+ border-color: var(--gray-300);
+ transform: translateY(-1px);
+}
+
+.btn-success {
+ background: linear-gradient(135deg, var(--success) 0%, #059669 100%);
+ color: white;
+ box-shadow: var(--shadow-sm);
+}
+
+.btn-success:hover:not(:disabled) {
+ transform: translateY(-1px);
+ box-shadow: var(--shadow-lg);
+ background: linear-gradient(135deg, #34d399 0%, var(--success) 100%);
+}
+
+.btn-large {
+ padding: var(--space-md) var(--space-xl);
+ font-size: 1rem;
+ font-weight: 600;
+}
+
+/* Header */
header {
- background-color: #fff;
- box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
position: sticky;
top: 0;
z-index: 100;
+ background: rgba(255, 255, 255, 0.95);
+ backdrop-filter: blur(10px);
+ border-bottom: 1px solid var(--gray-100);
}
header .container {
display: flex;
- justify-content: space-between;
align-items: center;
- padding: 20px 0;
+ justify-content: space-between;
+ padding: var(--space-lg);
}
.logo h1 {
- font-size: 1.8rem;
+ font-size: 1.5rem;
font-weight: 700;
- color: #2c3e50;
+ color: var(--gray-900);
+ display: flex;
+ align-items: center;
+ gap: var(--space-sm);
+}
+
+.logo h1 i {
+ color: var(--primary);
}
nav ul {
display: flex;
+ align-items: center;
+ gap: var(--space-xl);
list-style: none;
}
-nav ul li {
- margin-left: 30px;
-}
-
nav ul li a {
text-decoration: none;
- color: #333;
+ color: var(--gray-600);
font-weight: 500;
- transition: color 0.3s;
+ transition: color 0.2s;
}
nav ul li a:hover {
- color: #3498db;
+ color: var(--primary);
}
-.btn {
- display: inline-block;
- padding: 10px 20px;
- border-radius: 5px;
- text-decoration: none;
- font-weight: 600;
+.mobile-menu {
+ display: none;
+ font-size: 1.5rem;
+ color: var(--gray-600);
cursor: pointer;
- transition: all 0.3s;
- border: none;
- font-size: 1rem;
-}
-
-.btn-primary {
- background-color: #3498db;
- color: white;
-}
-
-.btn-primary:hover {
- background-color: #2980b9;
- transform: translateY(-2px);
- box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
-}
-
-.btn-secondary {
- background-color: #2c3e50;
- color: white;
-}
-
-.btn-secondary:hover {
- background-color: #1a252f;
- transform: translateY(-2px);
- box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
-}
-
-.btn-large {
- padding: 15px 30px;
- font-size: 1.1rem;
}
/* Hero section */
.hero {
- padding: 80px 0;
- background: linear-gradient(135deg, #3498db 0%, #2c3e50 100%);
- color: white;
- text-align: center;
+ padding: var(--space-3xl) 0;
+ background: linear-gradient(135deg,
+ rgba(99, 102, 241, 0.03) 0%,
+ rgba(6, 182, 212, 0.02) 50%,
+ rgba(16, 185, 129, 0.03) 100%);
+ position: relative;
+ overflow: hidden;
}
-.hero .container {
- display: flex;
- flex-direction: column;
+.hero::before {
+ content: '';
+ position: absolute;
+ top: 0;
+ left: 0;
+ right: 0;
+ bottom: 0;
+ background: radial-gradient(ellipse at top left, rgba(99, 102, 241, 0.1) 0%, transparent 50%),
+ radial-gradient(ellipse at bottom right, rgba(6, 182, 212, 0.08) 0%, transparent 50%);
+ pointer-events: none;
+}
+
+.hero-grid {
+ display: grid;
+ grid-template-columns: 1fr 1fr;
+ gap: var(--space-3xl);
align-items: center;
+ position: relative;
+ z-index: 1;
}
.hero-content {
- max-width: 800px;
- margin-bottom: 40px;
+ display: flex;
+ flex-direction: column;
+ gap: var(--space-lg);
+}
+
+.hero-badge {
+ display: inline-flex;
+ align-items: center;
+ gap: var(--space-sm);
+ background: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%);
+ color: white;
+ padding: var(--space-sm) var(--space-md);
+ border-radius: var(--radius-2xl);
+ font-size: 0.875rem;
+ font-weight: 600;
+ width: fit-content;
+ box-shadow: var(--shadow-md);
}
.hero h1 {
- font-size: 2.5rem;
- margin-bottom: 20px;
- font-weight: 700;
+ font-size: clamp(2.5rem, 5vw, 3.5rem);
+ font-weight: 800;
+ line-height: 1.1;
+ color: var(--gray-900);
+ letter-spacing: -0.02em;
}
.hero p {
- font-size: 1.2rem;
- margin-bottom: 30px;
- opacity: 0.9;
+ font-size: 1.125rem;
+ color: var(--gray-600);
+ line-height: 1.7;
+ max-width: 500px;
}
-.hero-image {
- max-width: 600px;
- width: 100%;
- border-radius: 10px;
- overflow: hidden;
- box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
+.hero-features {
+ display: flex;
+ flex-wrap: wrap;
+ gap: var(--space-lg);
+ margin: var(--space-md) 0;
}
-.hero-image img {
- width: 100%;
- height: auto;
- display: block;
+.mini-feature {
+ display: flex;
+ align-items: center;
+ gap: var(--space-sm);
+ color: var(--gray-700);
+ font-size: 0.875rem;
+ font-weight: 500;
}
-/* Upload section */
-.upload-section {
- padding: 80px 0;
- background-color: #fff;
-}
-
-.upload-section h2 {
+.mini-feature i {
+ color: var(--primary);
+ font-size: 1rem;
+ width: 20px;
text-align: center;
- font-size: 2.2rem;
- margin-bottom: 15px;
- color: #2c3e50;
}
-.section-description {
- text-align: center;
- font-size: 1.1rem;
- color: #7f8c8d;
- max-width: 700px;
- margin: 0 auto 50px;
+.hero-stats {
+ display: flex;
+ gap: var(--space-xl);
+ margin-top: var(--space-lg);
+}
+
+.stat {
+ display: flex;
+ flex-direction: column;
+ gap: var(--space-xs);
+}
+
+.stat-number {
+ font-size: 2rem;
+ font-weight: 700;
+ color: var(--gray-900);
+ line-height: 1;
+}
+
+.stat-label {
+ font-size: 0.875rem;
+ color: var(--gray-500);
+ font-weight: 500;
+}
+
+/* Hero upload area */
+.hero-upload {
+ display: flex;
+ justify-content: center;
+ align-items: center;
}
.drop-area {
- border: 3px dashed #3498db;
- border-radius: 10px;
- padding: 60px 20px;
- text-align: center;
- background-color: #f8f9fa;
- transition: all 0.3s;
+ width: 100%;
+ max-width: 480px;
+ min-height: 320px;
+ border: 2px dashed var(--gray-300);
+ border-radius: var(--radius-2xl);
+ background: white;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
cursor: pointer;
+ position: relative;
+ overflow: hidden;
}
-.drop-area:hover, .drop-area.dragover {
- background-color: #e3f2fd;
- border-color: #2980b9;
+.drop-area::before {
+ content: '';
+ position: absolute;
+ top: 0;
+ left: 0;
+ right: 0;
+ bottom: 0;
+ background: linear-gradient(135deg,
+ rgba(99, 102, 241, 0.02) 0%,
+ rgba(6, 182, 212, 0.01) 100%);
+ opacity: 0;
+ transition: opacity 0.3s;
}
-.drop-area-content i {
- color: #3498db;
- margin-bottom: 20px;
+.drop-area:hover::before,
+.drop-area.dragover::before {
+ opacity: 1;
}
-.drop-area-content h3 {
- margin-bottom: 15px;
- color: #2c3e50;
+.drop-area:hover,
+.drop-area.dragover {
+ border-color: var(--primary);
+ transform: translateY(-4px);
+ box-shadow: var(--shadow-xl);
}
-.drop-area-content p {
- margin-bottom: 20px;
- color: #7f8c8d;
+.drop-area:hover .upload-btn,
+.drop-area.dragover .upload-btn {
+ transform: scale(1.05);
+ box-shadow: var(--shadow-lg);
}
-.keywords-section {
- margin-top: 50px;
-}
-
-.keywords-section h3 {
+.drop-area-content {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ gap: var(--space-lg);
text-align: center;
- margin-bottom: 15px;
- color: #2c3e50;
+ padding: var(--space-xl);
+ position: relative;
+ z-index: 1;
}
+.upload-icon {
+ width: 80px;
+ height: 80px;
+ background: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%);
+ border-radius: var(--radius-2xl);
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ margin-bottom: var(--space-md);
+ box-shadow: var(--shadow-lg);
+}
+
+.upload-icon i {
+ font-size: 2rem;
+ color: white;
+}
+
+.drop-area h3 {
+ font-size: 1.25rem;
+ font-weight: 600;
+ color: var(--gray-900);
+ margin-bottom: var(--space-sm);
+}
+
+.drop-area p {
+ color: var(--gray-500);
+ font-size: 0.875rem;
+ margin-bottom: var(--space-lg);
+}
+
+.upload-btn {
+ background: var(--gray-900);
+ color: white;
+ border: none;
+ padding: var(--space-md) var(--space-xl);
+ border-radius: var(--radius-lg);
+ font-weight: 600;
+ cursor: pointer;
+ transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+ display: flex;
+ align-items: center;
+ gap: var(--space-sm);
+ font-size: 0.875rem;
+}
+
+.upload-btn:hover {
+ background: var(--gray-800);
+ transform: translateY(-2px) scale(1.05);
+ box-shadow: var(--shadow-lg);
+}
+
+.supported-formats {
+ margin-top: var(--space-md);
+ padding-top: var(--space-md);
+ border-top: 1px solid var(--gray-200);
+ font-size: 0.75rem;
+ color: var(--gray-400);
+ text-transform: uppercase;
+ letter-spacing: 0.5px;
+ font-weight: 500;
+}
+
+/* Workflow section */
+.workflow-section {
+ padding: var(--space-3xl) 0;
+ background: var(--gray-50);
+}
+
+.workflow-step {
+ background: white;
+ border-radius: var(--radius-2xl);
+ padding: var(--space-2xl);
+ margin-bottom: var(--space-xl);
+ box-shadow: var(--shadow-sm);
+ border: 1px solid var(--gray-100);
+}
+
+.step-header {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ text-align: center;
+ margin-bottom: var(--space-xl);
+ gap: var(--space-md);
+}
+
+.step-header i {
+ width: 60px;
+ height: 60px;
+ background: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%);
+ color: white;
+ border-radius: var(--radius-xl);
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ font-size: 1.5rem;
+ box-shadow: var(--shadow-md);
+}
+
+.step-header h3 {
+ font-size: 1.5rem;
+ font-weight: 700;
+ color: var(--gray-900);
+}
+
+.step-header p {
+ color: var(--gray-600);
+ font-size: 1rem;
+}
+
+/* Keywords section */
.keywords-input {
display: flex;
+ gap: var(--space-md);
max-width: 600px;
- margin: 0 auto 30px;
- gap: 10px;
+ margin: 0 auto var(--space-xl);
}
.keywords-input input {
flex: 1;
- padding: 15px;
- border: 1px solid #ddd;
- border-radius: 5px;
+ padding: var(--space-md);
+ border: 2px solid var(--gray-200);
+ border-radius: var(--radius-lg);
font-size: 1rem;
+ transition: all 0.2s;
+ background: white;
}
.keywords-input input:focus {
outline: none;
- border-color: #3498db;
- box-shadow: 0 0 0 2px rgba(52, 152, 219, 0.2);
+ border-color: var(--primary);
+ box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
}
.keywords-display {
display: flex;
flex-wrap: wrap;
justify-content: center;
- gap: 10px;
- margin-top: 20px;
+ gap: var(--space-md);
+ margin-top: var(--space-lg);
}
.keyword-chip {
- background-color: #3498db;
+ background: linear-gradient(135deg, var(--primary) 0%, var(--primary-light) 100%);
color: white;
- padding: 8px 15px;
- border-radius: 20px;
+ padding: var(--space-sm) var(--space-md);
+ border-radius: var(--radius-2xl);
display: flex;
align-items: center;
- gap: 5px;
+ gap: var(--space-sm);
+ font-size: 0.875rem;
+ font-weight: 500;
+ box-shadow: var(--shadow-sm);
+ transition: all 0.2s;
+}
+
+.keyword-chip:hover {
+ transform: translateY(-1px);
+ box-shadow: var(--shadow-md);
}
.keyword-chip .remove-keyword {
- background: none;
+ background: rgba(255, 255, 255, 0.2);
border: none;
color: white;
cursor: pointer;
- font-size: 1rem;
+ border-radius: 50%;
+ width: 20px;
+ height: 20px;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ font-size: 0.75rem;
+ transition: background 0.2s;
}
-.images-preview {
- margin-top: 50px;
-}
-
-.images-preview h3 {
- text-align: center;
- margin-bottom: 30px;
- color: #2c3e50;
+.keyword-chip .remove-keyword:hover {
+ background: rgba(255, 255, 255, 0.3);
}
+/* Images container */
.images-container {
display: grid;
- grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
- gap: 30px;
- margin-bottom: 40px;
+ grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
+ gap: var(--space-xl);
+ margin-bottom: var(--space-2xl);
}
.image-card {
- background: #fff;
- border-radius: 10px;
+ background: white;
+ border-radius: var(--radius-xl);
overflow: hidden;
- box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
- transition: transform 0.3s;
+ box-shadow: var(--shadow-md);
+ transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+ border: 1px solid var(--gray-100);
}
.image-card:hover {
- transform: translateY(-5px);
+ transform: translateY(-4px);
+ box-shadow: var(--shadow-xl);
}
.image-thumbnail {
@@ -289,130 +585,242 @@ nav ul li a:hover {
}
.image-info {
- padding: 20px;
+ padding: var(--space-lg);
+ display: flex;
+ flex-direction: column;
+ gap: var(--space-md);
}
.image-info .original-name {
- font-size: 0.9rem;
- color: #7f8c8d;
- margin-bottom: 10px;
+ font-size: 0.75rem;
+ color: var(--gray-500);
+ background: var(--gray-50);
+ padding: var(--space-sm);
+ border-radius: var(--radius-md);
word-break: break-all;
+ font-weight: 500;
+ text-transform: uppercase;
+ letter-spacing: 0.5px;
}
-.image-info .new-name {
+/* Vision AI and filename highlighting styles */
+.vision-keywords {
+ font-size: 0.75rem;
+ color: var(--warning);
+ background: rgba(245, 158, 11, 0.1);
+ padding: var(--space-sm);
+ border-radius: var(--radius-md);
+ border-left: 3px solid var(--warning);
+ font-weight: 500;
+}
+
+.vision-tags {
font-weight: 600;
- color: #2c3e50;
+ color: #d97706;
+}
+
+.filename-display {
+ font-weight: 600;
+ color: var(--gray-900);
word-break: break-all;
+ padding: var(--space-md);
+ background: var(--gray-50);
+ border-radius: var(--radius-md);
+ border: 2px solid var(--gray-100);
+ line-height: 1.4;
+ font-size: 0.875rem;
+ transition: all 0.2s;
}
-.image-info input {
+.vision-highlight {
+ background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
+ color: #92400e;
+ padding: 2px 6px;
+ border-radius: var(--radius-sm);
+ font-weight: 700;
+ border: 1px solid #fbbf24;
+ box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
+ display: inline-block;
+}
+
+.new-name-container {
+ display: flex;
+ flex-direction: column;
+ gap: var(--space-sm);
+}
+
+.new-name-container label {
+ font-weight: 600;
+ color: var(--gray-700);
+ font-size: 0.875rem;
+ text-transform: uppercase;
+ letter-spacing: 0.5px;
+}
+
+.new-name-input {
width: 100%;
- padding: 10px;
- border: 1px solid #ddd;
- border-radius: 5px;
- font-size: 1rem;
- margin-top: 10px;
+ padding: var(--space-md);
+ border: 2px solid var(--gray-200);
+ border-radius: var(--radius-md);
+ font-size: 0.875rem;
+ transition: all 0.2s;
+ background: white;
}
-.image-info input:focus {
+.new-name-input:focus {
outline: none;
- border-color: #3498db;
- box-shadow: 0 0 0 2px rgba(52, 152, 219, 0.2);
+ border-color: var(--primary);
+ box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
+}
+
+.new-name-input:disabled {
+ background: var(--gray-50);
+ cursor: not-allowed;
+ opacity: 0.6;
}
.actions {
text-align: center;
+ padding: var(--space-xl) 0;
+}
+
+/* Section headers */
+.section-header {
+ text-align: center;
+ margin-bottom: var(--space-3xl);
+}
+
+.section-header h2 {
+ font-size: clamp(2rem, 4vw, 2.5rem);
+ font-weight: 700;
+ color: var(--gray-900);
+ margin-bottom: var(--space-md);
+ letter-spacing: -0.02em;
+}
+
+.section-header p {
+ font-size: 1.125rem;
+ color: var(--gray-600);
+ max-width: 600px;
+ margin: 0 auto;
}
/* Features section */
.features {
- padding: 80px 0;
- background-color: #f8f9fa;
-}
-
-.features h2 {
- text-align: center;
- font-size: 2.2rem;
- margin-bottom: 15px;
- color: #2c3e50;
+ padding: var(--space-3xl) 0;
+ background: white;
}
.features-grid {
display: grid;
- grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
- gap: 30px;
- margin-top: 50px;
+ grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
+ gap: var(--space-2xl);
}
.feature-card {
- background: #fff;
- padding: 30px;
- border-radius: 10px;
+ background: white;
+ padding: var(--space-2xl);
+ border-radius: var(--radius-2xl);
text-align: center;
- box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
- transition: transform 0.3s;
+ box-shadow: var(--shadow-sm);
+ border: 1px solid var(--gray-100);
+ transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+ position: relative;
+ overflow: hidden;
+}
+
+.feature-card::before {
+ content: '';
+ position: absolute;
+ top: 0;
+ left: 0;
+ right: 0;
+ bottom: 0;
+ background: linear-gradient(135deg,
+ rgba(99, 102, 241, 0.02) 0%,
+ rgba(6, 182, 212, 0.01) 100%);
+ opacity: 0;
+ transition: opacity 0.3s;
+}
+
+.feature-card:hover::before {
+ opacity: 1;
}
.feature-card:hover {
- transform: translateY(-10px);
+ transform: translateY(-8px);
+ box-shadow: var(--shadow-xl);
+ border-color: var(--gray-200);
}
-.feature-card i {
- color: #3498db;
- margin-bottom: 20px;
+.feature-icon {
+ width: 80px;
+ height: 80px;
+ background: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%);
+ color: white;
+ border-radius: var(--radius-2xl);
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ margin: 0 auto var(--space-lg);
+ font-size: 2rem;
+ box-shadow: var(--shadow-lg);
+ position: relative;
+ z-index: 1;
}
.feature-card h3 {
- margin-bottom: 15px;
- color: #2c3e50;
+ font-size: 1.25rem;
+ font-weight: 600;
+ color: var(--gray-900);
+ margin-bottom: var(--space-md);
+ position: relative;
+ z-index: 1;
}
.feature-card p {
- color: #7f8c8d;
+ color: var(--gray-600);
+ line-height: 1.6;
+ position: relative;
+ z-index: 1;
}
/* How it works section */
.how-it-works {
- padding: 80px 0;
- background-color: #fff;
-}
-
-.how-it-works h2 {
- text-align: center;
- font-size: 2.2rem;
- margin-bottom: 15px;
- color: #2c3e50;
+ padding: var(--space-3xl) 0;
+ background: var(--gray-50);
}
.steps {
display: flex;
justify-content: space-between;
- margin-top: 50px;
+ gap: var(--space-2xl);
flex-wrap: wrap;
}
.step {
flex: 1;
- min-width: 250px;
+ min-width: 280px;
text-align: center;
- padding: 0 20px;
+ padding: 0 var(--space-lg);
position: relative;
}
-.step:not(:last-child):after {
+.step:not(:last-child)::after {
content: "";
position: absolute;
top: 40px;
- right: 0;
- width: 50%;
+ right: calc(-1 * var(--space-lg));
+ width: var(--space-2xl);
height: 2px;
- background-color: #3498db;
+ background: linear-gradient(90deg, var(--primary) 0%, var(--secondary) 100%);
+ border-radius: 1px;
}
.step-number {
width: 80px;
height: 80px;
- background-color: #3498db;
+ background: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%);
color: white;
border-radius: 50%;
display: flex;
@@ -420,103 +828,115 @@ nav ul li a:hover {
justify-content: center;
font-size: 2rem;
font-weight: 700;
- margin: 0 auto 20px;
+ margin: 0 auto var(--space-lg);
+ box-shadow: var(--shadow-lg);
+ position: relative;
+ z-index: 1;
}
.step h3 {
- margin-bottom: 15px;
- color: #2c3e50;
+ font-size: 1.25rem;
+ font-weight: 600;
+ color: var(--gray-900);
+ margin-bottom: var(--space-md);
}
.step p {
- color: #7f8c8d;
+ color: var(--gray-600);
+ line-height: 1.6;
}
/* Pricing section */
.pricing {
- padding: 80px 0;
- background-color: #f8f9fa;
-}
-
-.pricing h2 {
- text-align: center;
- font-size: 2.2rem;
- margin-bottom: 15px;
- color: #2c3e50;
+ padding: var(--space-3xl) 0;
+ background: white;
}
.pricing-grid {
display: grid;
- grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
- gap: 30px;
- margin-top: 50px;
+ grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
+ gap: var(--space-xl);
+ max-width: 1000px;
+ margin: 0 auto;
}
.pricing-card {
- background: #fff;
- border-radius: 10px;
- padding: 40px 30px;
+ background: white;
+ border-radius: var(--radius-2xl);
+ padding: var(--space-2xl);
text-align: center;
- box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
+ box-shadow: var(--shadow-md);
position: relative;
overflow: hidden;
+ border: 2px solid var(--gray-100);
+ transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.pricing-card.featured {
transform: scale(1.05);
- box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
- border: 2px solid #3498db;
+ box-shadow: var(--shadow-xl);
+ border-color: var(--primary);
+ background: linear-gradient(135deg,
+ rgba(99, 102, 241, 0.02) 0%,
+ rgba(6, 182, 212, 0.01) 100%);
}
.featured-badge {
position: absolute;
- top: 20px;
- right: -30px;
- background-color: #3498db;
+ top: var(--space-lg);
+ right: calc(-1 * var(--space-lg));
+ background: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%);
color: white;
- padding: 5px 30px;
+ padding: var(--space-sm) var(--space-2xl);
transform: rotate(45deg);
- font-size: 0.8rem;
+ font-size: 0.75rem;
font-weight: 600;
+ text-transform: uppercase;
+ letter-spacing: 0.5px;
+ box-shadow: var(--shadow-md);
}
.pricing-card h3 {
- font-size: 1.8rem;
- margin-bottom: 20px;
- color: #2c3e50;
+ font-size: 1.5rem;
+ font-weight: 600;
+ color: var(--gray-900);
+ margin-bottom: var(--space-lg);
}
.price {
font-size: 3rem;
- font-weight: 700;
- color: #2c3e50;
- margin-bottom: 30px;
+ font-weight: 800;
+ color: var(--gray-900);
+ margin-bottom: var(--space-xl);
+ line-height: 1;
}
.price span {
font-size: 1rem;
- color: #7f8c8d;
+ color: var(--gray-500);
+ font-weight: 500;
}
.pricing-card ul {
list-style: none;
- margin-bottom: 30px;
+ margin-bottom: var(--space-xl);
text-align: left;
}
.pricing-card ul li {
- padding: 10px 0;
- border-bottom: 1px solid #eee;
+ padding: var(--space-md) 0;
+ border-bottom: 1px solid var(--gray-100);
display: flex;
align-items: center;
+ gap: var(--space-md);
}
-.pricing-card ul li:before {
+.pricing-card ul li::before {
content: "\f00c";
font-family: "Font Awesome 5 Free";
font-weight: 900;
- color: #3498db;
- margin-right: 10px;
+ color: var(--success);
+ width: 20px;
}
.pricing-card .btn {
@@ -525,46 +945,58 @@ nav ul li a:hover {
/* Footer */
footer {
- background-color: #2c3e50;
- color: white;
- padding: 60px 0 30px;
+ background: var(--gray-900);
+ color: var(--gray-300);
+ padding: var(--space-3xl) 0 var(--space-xl);
}
.footer-content {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
- margin-bottom: 40px;
+ margin-bottom: var(--space-2xl);
+ gap: var(--space-2xl);
}
.footer-logo h2 {
- font-size: 1.8rem;
- margin-bottom: 10px;
+ font-size: 1.5rem;
+ font-weight: 700;
+ color: white;
+ margin-bottom: var(--space-md);
+ display: flex;
+ align-items: center;
+ gap: var(--space-sm);
+}
+
+.footer-logo h2 i {
+ color: var(--primary);
}
.footer-logo p {
- opacity: 0.7;
+ color: var(--gray-400);
}
.footer-links {
display: flex;
- gap: 50px;
+ gap: var(--space-3xl);
}
.footer-column h4 {
- margin-bottom: 20px;
+ color: white;
+ font-weight: 600;
+ margin-bottom: var(--space-lg);
position: relative;
- padding-bottom: 10px;
+ padding-bottom: var(--space-sm);
}
-.footer-column h4:after {
+.footer-column h4::after {
content: "";
position: absolute;
bottom: 0;
left: 0;
- width: 50px;
+ width: 40px;
height: 2px;
- background-color: #3498db;
+ background: linear-gradient(90deg, var(--primary) 0%, var(--secondary) 100%);
}
.footer-column ul {
@@ -572,117 +1004,193 @@ footer {
}
.footer-column ul li {
- margin-bottom: 10px;
+ margin-bottom: var(--space-md);
}
.footer-column ul li a {
- color: #bbb;
+ color: var(--gray-400);
text-decoration: none;
- transition: color 0.3s;
+ transition: color 0.2s;
}
.footer-column ul li a:hover {
- color: #3498db;
+ color: var(--primary);
}
.footer-bottom {
text-align: center;
- padding-top: 30px;
- border-top: 1px solid rgba(255, 255, 255, 0.1);
- color: #bbb;
+ padding-top: var(--space-xl);
+ border-top: 1px solid var(--gray-800);
+ color: var(--gray-500);
+ font-size: 0.875rem;
}
/* Responsive design */
-@media (max-width: 992px) {
- .hero .container {
- flex-direction: column;
+@media (max-width: 1024px) {
+ .hero-grid {
+ grid-template-columns: 1fr;
+ gap: var(--space-2xl);
+ text-align: center;
}
- .hero-content {
- margin-bottom: 50px;
+ .hero-upload {
+ order: -1;
+ }
+
+ .drop-area {
+ max-width: 400px;
+ min-height: 280px;
}
.steps {
flex-direction: column;
- gap: 50px;
+ align-items: center;
}
- .step:not(:last-child):after {
+ .step:not(:last-child)::after {
display: none;
}
.footer-content {
flex-direction: column;
- gap: 40px;
+ gap: var(--space-xl);
}
.footer-links {
- gap: 30px;
+ gap: var(--space-xl);
}
}
@media (max-width: 768px) {
+ :root {
+ --space-3xl: 3rem;
+ }
+
+ .container {
+ padding: 0 var(--space-md);
+ }
+
header .container {
- flex-direction: column;
- gap: 20px;
+ padding: var(--space-md);
}
nav ul {
- flex-wrap: wrap;
- justify-content: center;
+ display: none;
}
- nav ul li {
- margin: 5px 10px;
+ .mobile-menu {
+ display: block;
}
.hero {
- padding: 60px 0;
+ padding: var(--space-2xl) 0;
}
- .hero h1 {
- font-size: 2rem;
+ .hero-content {
+ gap: var(--space-md);
}
- .hero p {
- font-size: 1rem;
+ .hero-features {
+ flex-direction: column;
+ gap: var(--space-md);
+ }
+
+ .hero-stats {
+ justify-content: center;
}
.keywords-input {
flex-direction: column;
}
- .pricing-card.featured {
- transform: scale(1);
- }
-}
-
-@media (max-width: 576px) {
- .container {
- width: 95%;
- }
-
- .hero {
- padding: 40px 0;
- }
-
- .hero h1 {
- font-size: 1.8rem;
- }
-
- .upload-section, .features, .how-it-works, .pricing {
- padding: 60px 0;
- }
-
- .section-description {
- font-size: 1rem;
- }
-
- .drop-area {
- padding: 40px 15px;
- }
-
.images-container {
grid-template-columns: 1fr;
}
+
+ .features-grid {
+ grid-template-columns: 1fr;
+ gap: var(--space-xl);
+ }
+
+ .pricing-card.featured {
+ transform: none;
+ }
+
+ .footer-links {
+ flex-direction: column;
+ gap: var(--space-lg);
+ }
+}
+
+@media (max-width: 480px) {
+ .container {
+ padding: 0 var(--space-sm);
+ }
+
+ .drop-area {
+ min-height: 240px;
+ }
+
+ .drop-area-content {
+ padding: var(--space-lg);
+ }
+
+ .upload-icon {
+ width: 60px;
+ height: 60px;
+ }
+
+ .upload-icon i {
+ font-size: 1.5rem;
+ }
+
+ .workflow-step {
+ padding: var(--space-lg);
+ }
+
+ .feature-card {
+ padding: var(--space-lg);
+ }
+
+ .pricing-card {
+ padding: var(--space-lg);
+ }
+}
+
+/* Utility classes */
+.hidden {
+ display: none !important;
+}
+
+.fade-in {
+ animation: fadeIn 0.5s ease-in-out;
+}
+
+@keyframes fadeIn {
+ from {
+ opacity: 0;
+ transform: translateY(10px);
+ }
+ to {
+ opacity: 1;
+ transform: translateY(0);
+ }
+}
+
+/* Custom scrollbar */
+::-webkit-scrollbar {
+ width: 8px;
+}
+
+::-webkit-scrollbar-track {
+ background: var(--gray-100);
+}
+
+::-webkit-scrollbar-thumb {
+ background: var(--gray-300);
+ border-radius: 4px;
+}
+
+::-webkit-scrollbar-thumb:hover {
+ background: var(--gray-400);
}
\ No newline at end of file
-
@@ -200,7 +262,7 @@
Simple, Transparent Pricing
-Choose the plan that works best for you.
+
+
Simple, Transparent Pricing
+Choose the plan that works best for you
+
@@ -161,7 +223,7 @@
Keyword enhancement
ZIP download
-
+
@@ -189,7 +251,7 @@
Priority support
Advanced analytics
-
+
-
diff --git a/script.js b/script.js
index 4703f02..5a9b9ef 100644
--- a/script.js
+++ b/script.js
@@ -7,6 +7,7 @@ let generatedNames = [];
const dropArea = document.getElementById('drop-area');
const fileInput = document.getElementById('file-input');
const browseBtn = document.getElementById('browse-btn');
+const workflowSection = document.getElementById('workflow-section');
const keywordsSection = document.getElementById('keywords-section');
const keywordInput = document.getElementById('keyword-input');
const enhanceBtn = document.getElementById('enhance-btn');
@@ -15,10 +16,11 @@ const imagesPreview = document.getElementById('images-preview');
const imagesContainer = document.getElementById('images-container');
const downloadBtn = document.getElementById('download-btn');
-// AI Configuration (in a real app, this would be loaded from .env)
+// AI Configuration
const AI_CONFIG = {
API_KEY: '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',
- MODEL_NAME: 'deepseek/deepseek-chat-v3-0324:free',
+ DEEPSEEK_MODEL: 'deepseek/deepseek-chat-v3-0324:free',
+ VISION_MODEL: 'meta-llama/llama-3.2-11b-vision-instruct:free',
API_URL: 'https://openrouter.ai/api/v1/chat/completions'
};
@@ -110,15 +112,23 @@ function handleFiles(files) {
size: file.size,
type: file.type,
src: e.target.result,
- newName: generateFileName(file.name)
+ newName: generateFileName(file.name),
+ visionKeywords: []
});
processedCount++;
- // Show keywords section after all files are processed
+ // Show workflow section after all files are processed
if (processedCount === imageFiles.length) {
+ workflowSection.style.display = 'block';
keywordsSection.style.display = 'block';
imagesPreview.style.display = 'block';
updateImagesPreview();
+
+ // Smooth scroll to workflow section
+ workflowSection.scrollIntoView({
+ behavior: 'smooth',
+ block: 'start'
+ });
}
};
reader.readAsDataURL(file);
@@ -169,11 +179,14 @@ async function enhanceKeywords() {
// Clear input
keywordInput.value = '';
- // Generate new filenames for images
- await generateNewFileNamesWithAI();
+ // Analyze images with vision AI and generate new filenames
+ await analyzeImagesAndGenerateNames();
} catch (error) {
console.error('Error enhancing keywords:', error);
- alert('An error occurred while enhancing keywords. Please try again.');
+ alert('An error occurred while enhancing keywords. You may have hit rate limits. Please try again in a moment.');
+
+ // Fallback to simple keyword enhancement
+ fallbackToSimpleEnhancement(keywordText);
} finally {
// Reset button
enhanceBtn.innerHTML = ' Enhance with AI';
@@ -181,6 +194,37 @@ async function enhanceKeywords() {
}
}
+// Fallback to simple keyword enhancement
+function fallbackToSimpleEnhancement(keywordText) {
+ const newKeywords = keywordText.split(/[, ]+/).filter(k => k !== '');
+ newKeywords.forEach(keyword => {
+ if (!keywords.includes(keyword)) {
+ keywords.push(keyword);
+ }
+ });
+
+ // Add some simulated AI-enhanced keywords
+ const aiKeywords = [
+ 'SEO optimized',
+ 'high quality',
+ 'professional',
+ 'digital',
+ 'modern'
+ ];
+
+ aiKeywords.forEach(keyword => {
+ if (!keywords.includes(keyword)) {
+ keywords.push(keyword);
+ }
+ });
+
+ // Update keywords display
+ updateKeywordsDisplay();
+
+ // Generate new filenames for images
+ generateNewFileNames();
+}
+
// Call AI API to enhance keywords
async function callAIKeywordEnhancement(keywords) {
const prompt = `Enhance these keywords for SEO image optimization. Provide 10 additional related keywords that would help images rank better in search engines. Return only the keywords separated by commas, nothing else. Keywords: ${keywords}`;
@@ -189,10 +233,12 @@ async function callAIKeywordEnhancement(keywords) {
method: 'POST',
headers: {
'Authorization': `Bearer ${AI_CONFIG.API_KEY}`,
- 'Content-Type': 'application/json'
+ 'Content-Type': 'application/json',
+ 'HTTP-Referer': window.location.href,
+ 'X-Title': 'SEO Image Renamer'
},
body: JSON.stringify({
- model: AI_CONFIG.MODEL_NAME,
+ model: AI_CONFIG.DEEPSEEK_MODEL,
messages: [
{
role: "user",
@@ -203,37 +249,50 @@ async function callAIKeywordEnhancement(keywords) {
});
if (!response.ok) {
- throw new Error(`API request failed with status ${response.status}`);
+ const errorText = await response.text();
+ console.error('API Error Response:', errorText);
+ throw new Error(`API request failed with status ${response.status}: ${errorText}`);
}
const data = await response.json();
return data.choices[0].message.content.trim();
}
-// Generate new filenames for images based on keywords using AI
-async function generateNewFileNamesWithAI() {
+// Analyze images with vision AI and generate new filenames
+async function analyzeImagesAndGenerateNames() {
if (keywords.length === 0) return;
// Show loading state for each image
document.querySelectorAll('.new-name-input').forEach(input => {
input.disabled = true;
- input.placeholder = 'Generating AI filename...';
+ input.placeholder = 'Analyzing image and generating filename...';
});
try {
- // Generate new filename for each image
+ // Analyze each image with vision AI and generate unique filenames
+ const usedNames = new Set();
+
for (let i = 0; i < uploadedImages.length; i++) {
const image = uploadedImages[i];
- const keywordString = keywords.slice(0, 5).join(', ');
- // Call AI to generate a descriptive filename
- const aiGeneratedName = await callAIFilenameGeneration(image.name, keywordString);
+ // Analyze image with vision AI
+ const visionKeywords = await analyzeImageWithVisionAI(image.src);
+ image.visionKeywords = visionKeywords;
+
+ // Generate unique filename
+ let newName;
+ let attempts = 0;
+ do {
+ newName = await generateUniqueFilename(image, visionKeywords, usedNames);
+ attempts++;
+ } while (usedNames.has(newName.toLowerCase()) && attempts < 10);
+
+ // Add to used names
+ usedNames.add(newName.toLowerCase());
// Update the image with the new name
- const nameWithoutExt = image.name.substring(0, image.name.lastIndexOf('.'));
const extension = image.name.substring(image.name.lastIndexOf('.'));
- const newName = `${aiGeneratedName.substring(0, 50)}${extension}`;
- image.newName = newName;
+ image.newName = `${newName.substring(0, 50)}${extension}`;
}
// Update images preview
@@ -242,11 +301,11 @@ async function generateNewFileNamesWithAI() {
// Enable download button
downloadBtn.disabled = false;
} catch (error) {
- console.error('Error generating filenames:', error);
- alert('An error occurred while generating filenames. Please try again.');
+ console.error('Error analyzing images:', error);
+ alert('An error occurred while analyzing images. You may have hit rate limits or the AI service is temporarily unavailable. Please try again in a moment.');
// Revert to simple filename generation
- generateNewFileNames();
+ fallbackToSimpleNaming();
} finally {
// Re-enable inputs
document.querySelectorAll('.new-name-input').forEach(input => {
@@ -256,18 +315,76 @@ async function generateNewFileNamesWithAI() {
}
}
-// Call AI API to generate filename
-async function callAIFilenameGeneration(originalName, keywords) {
- const prompt = `Generate an SEO-optimized filename for an image. The original filename is "${originalName}" and the keywords are: ${keywords}. Create a descriptive, SEO-friendly filename that is 3-6 words long. Use only letters, numbers, and hyphens. Do not include the file extension. Return only the filename, nothing else.`;
+// Analyze image with vision AI
+async function analyzeImageWithVisionAI(imageSrc) {
+ const prompt = "Analyze this image and provide exactly 2 keywords that describe the main subject or action in the image. Return only the two keywords separated by a space, nothing else.";
const response = await fetch(AI_CONFIG.API_URL, {
method: 'POST',
headers: {
'Authorization': `Bearer ${AI_CONFIG.API_KEY}`,
- 'Content-Type': 'application/json'
+ 'Content-Type': 'application/json',
+ 'HTTP-Referer': window.location.href,
+ 'X-Title': 'SEO Image Renamer'
},
body: JSON.stringify({
- model: AI_CONFIG.MODEL_NAME,
+ model: AI_CONFIG.VISION_MODEL,
+ messages: [
+ {
+ role: "user",
+ content: [
+ {
+ type: "text",
+ text: prompt
+ },
+ {
+ type: "image_url",
+ image_url: {
+ url: imageSrc
+ }
+ }
+ ]
+ }
+ ]
+ })
+ });
+
+ if (!response.ok) {
+ const errorText = await response.text();
+ console.error('Vision API Error Response:', errorText);
+ throw new Error(`Vision API request failed with status ${response.status}: ${errorText}`);
+ }
+
+ const data = await response.json();
+ const visionResponse = data.choices[0].message.content.trim();
+ return visionResponse.split(' ').slice(0, 2); // Get up to 2 keywords
+}
+
+// Generate unique filename
+async function generateUniqueFilename(image, visionKeywords, usedNames) {
+ const keywordString = keywords.slice(0, 5).join(', ');
+ const visionString = visionKeywords.join(' ');
+
+ const prompt = `Create a natural, descriptive filename for an image.
+ User keywords: ${keywordString}
+ Image content keywords: ${visionString}
+ Original filename: ${image.name}
+
+ Create a human-readable phrase that combines these elements naturally, like "burning car at a carshow in france".
+ Use 3-7 words, start with a capital letter, and use spaces between words.
+ Do not include the file extension.
+ Return only the filename, nothing else.`;
+
+ const response = await fetch(AI_CONFIG.API_URL, {
+ method: 'POST',
+ headers: {
+ 'Authorization': `Bearer ${AI_CONFIG.API_KEY}`,
+ 'Content-Type': 'application/json',
+ 'HTTP-Referer': window.location.href,
+ 'X-Title': 'SEO Image Renamer'
+ },
+ body: JSON.stringify({
+ model: AI_CONFIG.DEEPSEEK_MODEL,
messages: [
{
role: "user",
@@ -278,17 +395,21 @@ async function callAIFilenameGeneration(originalName, keywords) {
});
if (!response.ok) {
- throw new Error(`API request failed with status ${response.status}`);
+ const errorText = await response.text();
+ console.error('Filename generation API Error Response:', errorText);
+ throw new Error(`Filename generation API request failed with status ${response.status}: ${errorText}`);
}
const data = await response.json();
- return data.choices[0].message.content.trim().replace(/[^a-zA-Z0-9\- ]/g, '').replace(/\s+/g, '-');
+ return data.choices[0].message.content.trim();
}
-// Fallback function to generate new filenames without AI
-function generateNewFileNames() {
+// Fallback to simple naming
+function fallbackToSimpleNaming() {
if (keywords.length === 0) return;
+ const usedNames = new Set();
+
uploadedImages.forEach((image, index) => {
// Combine keywords with the original filename
const keywordString = keywords.slice(0, 3).join(' ');
@@ -296,8 +417,18 @@ function generateNewFileNames() {
const extension = image.name.substring(image.name.lastIndexOf('.'));
// Create new name
- const newName = `${keywordString} ${nameWithoutExt}`.substring(0, 50) + extension;
- image.newName = newName;
+ let newName = `${keywordString} ${nameWithoutExt}`.substring(0, 50);
+
+ // Ensure uniqueness
+ let counter = 1;
+ let uniqueName = newName;
+ while (usedNames.has(uniqueName.toLowerCase())) {
+ uniqueName = `${newName} ${counter}`;
+ counter++;
+ }
+
+ usedNames.add(uniqueName.toLowerCase());
+ image.newName = uniqueName + extension;
});
// Update images preview
@@ -307,6 +438,57 @@ function generateNewFileNames() {
downloadBtn.disabled = false;
}
+// Fallback function to generate new filenames without AI
+function generateNewFileNames() {
+ if (keywords.length === 0) return;
+
+ const usedNames = new Set();
+
+ uploadedImages.forEach((image, index) => {
+ // Combine keywords with the original filename
+ const keywordString = keywords.slice(0, 3).join(' ');
+ const nameWithoutExt = image.name.substring(0, image.name.lastIndexOf('.'));
+ const extension = image.name.substring(image.name.lastIndexOf('.'));
+
+ // Create new name
+ let newName = `${keywordString} ${nameWithoutExt}`.substring(0, 50);
+
+ // Ensure uniqueness
+ let counter = 1;
+ let uniqueName = newName;
+ while (usedNames.has(uniqueName.toLowerCase())) {
+ uniqueName = `${newName} ${counter}`;
+ counter++;
+ }
+
+ usedNames.add(uniqueName.toLowerCase());
+ image.newName = uniqueName + extension;
+ });
+
+ // Update images preview
+ updateImagesPreview();
+
+ // Enable download button
+ downloadBtn.disabled = false;
+}
+
+// Highlight vision keywords in filename
+function highlightVisionKeywords(filename, visionKeywords) {
+ if (!visionKeywords || visionKeywords.length === 0) {
+ return filename;
+ }
+
+ let highlightedName = filename;
+ visionKeywords.forEach(keyword => {
+ if (keyword && keyword.trim()) {
+ const regex = new RegExp(`\\b${keyword.trim()}\\b`, 'gi');
+ highlightedName = highlightedName.replace(regex, `${keyword}`);
+ }
+ });
+
+ return highlightedName;
+}
+
// Update keywords display
function updateKeywordsDisplay() {
keywordsDisplay.innerHTML = '';
@@ -339,12 +521,21 @@ function updateImagesPreview() {
uploadedImages.forEach((image, index) => {
const imageCard = document.createElement('div');
imageCard.className = 'image-card';
+
+ // Get filename without extension for highlighting
+ const nameWithoutExt = image.newName.substring(0, image.newName.lastIndexOf('.'));
+ const extension = image.newName.substring(image.newName.lastIndexOf('.'));
+ const highlightedName = highlightVisionKeywords(nameWithoutExt, image.visionKeywords);
+
imageCard.innerHTML = `
SEO Image Renamer
+SEO Image Renamer
AI-powered image SEO optimization
Original: ${image.name}
+ ${image.visionKeywords && image.visionKeywords.length > 0 ?
+ `Vision AI: ${image.visionKeywords.join(', ')}
` : ''}
+
${highlightedName}${extension}