@@ -120,7 +153,7 @@
diff --git a/frontend/admin.js b/frontend/admin.js
index e7e1c31..c98bbac 100644
--- a/frontend/admin.js
+++ b/frontend/admin.js
@@ -6,10 +6,13 @@ const API_BASE = CONFIG ? CONFIG.API_BASE : 'http://localhost:5000/api';
let platforms = [];
let editingPlatformKey = null;
let formatCounter = 0;
+let platformPatterns = {};
+let aspectRatioPatterns = {};
// Initialize
document.addEventListener('DOMContentLoaded', () => {
loadPlatforms();
+ loadNamingConventions();
setupEventListeners();
});
@@ -25,6 +28,12 @@ function setupEventListeners() {
document.getElementById('cancelBtn').addEventListener('click', closeModal);
document.getElementById('addFormatBtn').addEventListener('click', addFormatConfig);
document.getElementById('platformForm').addEventListener('submit', savePlatform);
+
+ // Naming conventions
+ document.getElementById('addPlatformPatternBtn').addEventListener('click', addPlatformPattern);
+ document.getElementById('addAspectRatioPatternBtn').addEventListener('click', addAspectRatioPattern);
+ document.getElementById('saveNamingBtn').addEventListener('click', saveNamingConventions);
+ document.getElementById('testNamingBtn').addEventListener('click', testNaming);
}
// Load Platforms
@@ -443,3 +452,207 @@ function showMessage(message, type = 'success') {
messageDiv.remove();
}, 5000);
}
+
+// ============================================================================
+// NAMING CONVENTIONS
+// ============================================================================
+
+// Load Naming Conventions
+async function loadNamingConventions() {
+ try {
+ const response = await fetch(`${API_BASE}/admin/naming-conventions`);
+ const data = await response.json();
+
+ if (data.success) {
+ platformPatterns = data.platform_patterns || {};
+ aspectRatioPatterns = data.aspect_ratio_patterns || {};
+
+ renderPlatformPatterns();
+ renderAspectRatioPatterns();
+ }
+ } catch (error) {
+ console.error('Error loading naming conventions:', error);
+ }
+}
+
+// Render Platform Patterns
+function renderPlatformPatterns() {
+ const container = document.getElementById('platformPatternsList');
+ container.innerHTML = '';
+
+ Object.keys(platformPatterns).forEach(platformKey => {
+ const patterns = platformPatterns[platformKey];
+ patterns.forEach((pattern, index) => {
+ addPlatformPatternRow(platformKey, pattern, index);
+ });
+ });
+
+ // Add empty row for new pattern
+ if (platforms.length > 0 && Object.keys(platformPatterns).length === 0) {
+ addPlatformPatternRow();
+ }
+}
+
+// Render Aspect Ratio Patterns
+function renderAspectRatioPatterns() {
+ const container = document.getElementById('aspectRatioPatternsList');
+ container.innerHTML = '';
+
+ Object.keys(aspectRatioPatterns).forEach(ratio => {
+ const patterns = aspectRatioPatterns[ratio];
+ patterns.forEach((pattern, index) => {
+ addAspectRatioPatternRow(ratio, pattern, index);
+ });
+ });
+
+ // Add empty row for new pattern
+ if (Object.keys(aspectRatioPatterns).length === 0) {
+ addAspectRatioPatternRow();
+ }
+}
+
+// Add Platform Pattern Row
+function addPlatformPatternRow(platformKey = '', pattern = '', index = 0) {
+ const container = document.getElementById('platformPatternsList');
+ const itemId = `platform-pattern-${Date.now()}-${index}`;
+
+ const itemDiv = document.createElement('div');
+ itemDiv.className = 'pattern-item';
+ itemDiv.id = itemId;
+ itemDiv.innerHTML = `
+
+
+
+ `;
+ container.appendChild(itemDiv);
+}
+
+// Add Aspect Ratio Pattern Row
+function addAspectRatioPatternRow(ratio = '', pattern = '', index = 0) {
+ const container = document.getElementById('aspectRatioPatternsList');
+ const itemId = `ratio-pattern-${Date.now()}-${index}`;
+
+ const itemDiv = document.createElement('div');
+ itemDiv.className = 'pattern-item';
+ itemDiv.id = itemId;
+ itemDiv.innerHTML = `
+
+
+
+ `;
+ container.appendChild(itemDiv);
+}
+
+// Add Pattern Button Handlers
+function addPlatformPattern() {
+ addPlatformPatternRow();
+}
+
+function addAspectRatioPattern() {
+ addAspectRatioPatternRow();
+}
+
+// Remove Pattern Item
+function removePatternItem(itemId) {
+ const item = document.getElementById(itemId);
+ if (item) {
+ item.remove();
+ }
+}
+
+// Save Naming Conventions
+async function saveNamingConventions() {
+ try {
+ // Collect platform patterns
+ const newPlatformPatterns = {};
+ const platformItems = document.querySelectorAll('#platformPatternsList .pattern-item');
+
+ platformItems.forEach(item => {
+ const platformKey = item.querySelector('.platform-select-pattern').value;
+ const pattern = item.querySelector('.platform-pattern-value').value.trim();
+
+ if (platformKey && pattern) {
+ if (!newPlatformPatterns[platformKey]) {
+ newPlatformPatterns[platformKey] = [];
+ }
+ newPlatformPatterns[platformKey].push(pattern);
+ }
+ });
+
+ // Collect aspect ratio patterns
+ const newAspectRatioPatterns = {};
+ const ratioItems = document.querySelectorAll('#aspectRatioPatternsList .pattern-item');
+
+ ratioItems.forEach(item => {
+ const ratio = item.querySelector('.aspect-ratio-select').value.trim();
+ const pattern = item.querySelector('.aspect-ratio-pattern-value').value.trim();
+
+ if (ratio && pattern) {
+ if (!newAspectRatioPatterns[ratio]) {
+ newAspectRatioPatterns[ratio] = [];
+ }
+ newAspectRatioPatterns[ratio].push(pattern);
+ }
+ });
+
+ // Save to backend
+ const response = await fetch(`${API_BASE}/admin/naming-conventions`, {
+ method: 'POST',
+ headers: {
+ 'Content-Type': 'application/json'
+ },
+ body: JSON.stringify({
+ platform_patterns: newPlatformPatterns,
+ aspect_ratio_patterns: newAspectRatioPatterns
+ })
+ });
+
+ const result = await response.json();
+
+ if (result.success) {
+ platformPatterns = newPlatformPatterns;
+ aspectRatioPatterns = newAspectRatioPatterns;
+ showMessage('Naming conventions saved successfully!', 'success');
+ } else {
+ showMessage('Error saving: ' + result.error, 'error');
+ }
+ } catch (error) {
+ showMessage('Error saving naming conventions: ' + error.message, 'error');
+ }
+}
+
+// Test Naming Patterns
+function testNaming() {
+ const filename = prompt('Enter a filename to test pattern detection:');
+ if (!filename) return;
+
+ let detectedPlatform = null;
+ let detectedRatio = null;
+
+ // Test platform patterns
+ Object.keys(platformPatterns).forEach(platformKey => {
+ platformPatterns[platformKey].forEach(pattern => {
+ if (filename.toLowerCase().includes(pattern.toLowerCase())) {
+ detectedPlatform = platformKey;
+ }
+ });
+ });
+
+ // Test aspect ratio patterns
+ Object.keys(aspectRatioPatterns).forEach(ratio => {
+ aspectRatioPatterns[ratio].forEach(pattern => {
+ if (filename.toLowerCase().includes(pattern.toLowerCase())) {
+ detectedRatio = ratio;
+ }
+ });
+ });
+
+ const message = `Filename: "${filename}"\n\n` +
+ `Detected Platform: ${detectedPlatform || 'None'}\n` +
+ `Detected Aspect Ratio: ${detectedRatio || 'None'}`;
+
+ alert(message);
+}
diff --git a/frontend/index.html b/frontend/index.html
index 4134860..4f27769 100644
--- a/frontend/index.html
+++ b/frontend/index.html
@@ -3,7 +3,7 @@
-
Video Optimizer - L'Oréal Creative Optimization
+
Video Optimizer - Social Media Platform Tool
@@ -14,7 +14,7 @@
@@ -141,7 +141,7 @@