khondokartowsif171
1519 lines
71 KiB
JavaScript
1519 lines
71 KiB
JavaScript
// Google Opal AI - Master Mini-App Studio & 3D Poster Lab Engine v5.0
|
|
|
|
document.addEventListener('DOMContentLoaded', () => {
|
|
initNavigation();
|
|
initSettings();
|
|
initPosterLab();
|
|
initMiniAppsHub();
|
|
initMiniAppBuilder();
|
|
initUgcStudio();
|
|
initInboxAI();
|
|
initHistory();
|
|
});
|
|
|
|
// --- Global Navigation ---
|
|
window.switchToTab = function(tabId) {
|
|
const navItems = document.querySelectorAll('.nav-item');
|
|
const tabPages = document.querySelectorAll('.tab-page');
|
|
|
|
navItems.forEach(n => {
|
|
if (n.getAttribute('data-tab') === tabId) {
|
|
n.classList.add('active');
|
|
} else {
|
|
n.classList.remove('active');
|
|
}
|
|
});
|
|
|
|
tabPages.forEach(p => {
|
|
if (p.id === tabId) {
|
|
p.classList.add('active');
|
|
} else {
|
|
p.classList.remove('active');
|
|
}
|
|
});
|
|
|
|
window.scrollTo({ top: 0, behavior: 'smooth' });
|
|
};
|
|
|
|
function initNavigation() {
|
|
const navItems = document.querySelectorAll('.nav-item');
|
|
navItems.forEach(item => {
|
|
item.addEventListener('click', () => {
|
|
const targetTabId = item.getAttribute('data-tab');
|
|
switchToTab(targetTabId);
|
|
});
|
|
});
|
|
|
|
// Language Toggle
|
|
const langBtn = document.getElementById('langToggleBtn');
|
|
let currentLang = 'BN';
|
|
if (langBtn) {
|
|
langBtn.addEventListener('click', () => {
|
|
currentLang = currentLang === 'BN' ? 'EN' : 'BN';
|
|
langBtn.textContent = currentLang === 'BN' ? '🌐 বাং' : '🌐 EN';
|
|
});
|
|
}
|
|
}
|
|
|
|
window.copyText = function(elementId) {
|
|
const el = document.getElementById(elementId);
|
|
if (el) {
|
|
const text = el.value || el.textContent || '';
|
|
navigator.clipboard.writeText(text).then(() => {
|
|
alert('✅ Copied to Clipboard!');
|
|
}).catch(() => {
|
|
// Fallback
|
|
const ta = document.createElement('textarea');
|
|
ta.value = text;
|
|
document.body.appendChild(ta);
|
|
ta.select();
|
|
document.execCommand('copy');
|
|
document.body.removeChild(ta);
|
|
alert('✅ Copied to Clipboard!');
|
|
});
|
|
}
|
|
};
|
|
|
|
// --- Settings & Gemini 2.0 API Engine ---
|
|
function initSettings() {
|
|
const apiKeyInput = document.getElementById('apiKeyInput');
|
|
const modelSelect = document.getElementById('modelSelect');
|
|
const n8nWebhookInput = document.getElementById('n8nWebhookInput');
|
|
const saveBtn = document.getElementById('saveApiKeyBtn');
|
|
const statusMsg = document.getElementById('settingsStatusMsg');
|
|
|
|
// Load saved settings
|
|
const savedKey = localStorage.getItem('opal_gemini_api_key') || '';
|
|
const savedModel = localStorage.getItem('opal_selected_model') || 'gemini-2.0-flash';
|
|
const savedN8n = localStorage.getItem('opal_n8n_webhook') || 'https://n8n.auraajenticai.cloud/webhook/gt-auto-post';
|
|
|
|
if (apiKeyInput) apiKeyInput.value = savedKey;
|
|
if (modelSelect) modelSelect.value = savedModel;
|
|
if (n8nWebhookInput) n8nWebhookInput.value = savedN8n;
|
|
|
|
if (saveBtn) {
|
|
saveBtn.addEventListener('click', async () => {
|
|
const key = apiKeyInput.value.trim();
|
|
const model = modelSelect.value;
|
|
const n8nUrl = n8nWebhookInput ? n8nWebhookInput.value.trim() : '';
|
|
|
|
if (n8nUrl) {
|
|
localStorage.setItem('opal_n8n_webhook', n8nUrl);
|
|
}
|
|
|
|
if (!key) {
|
|
localStorage.setItem('opal_selected_model', model);
|
|
statusMsg.classList.remove('hidden');
|
|
statusMsg.style.color = '#10B981';
|
|
statusMsg.textContent = '✅ Settings saved (Offline templates active).';
|
|
return;
|
|
}
|
|
|
|
statusMsg.classList.remove('hidden');
|
|
statusMsg.style.color = '#F472B6';
|
|
statusMsg.textContent = '⏳ Testing Gemini 2.0 AI connection with Google...';
|
|
|
|
try {
|
|
const res = await callGeminiApi(key, model, "Respond with: 'Google Opal AI Connected successfully!'");
|
|
if (res) {
|
|
localStorage.setItem('opal_gemini_api_key', key);
|
|
localStorage.setItem('opal_selected_model', model);
|
|
statusMsg.style.color = '#10B981';
|
|
statusMsg.textContent = `✅ Verified & Active: ${res.trim()}`;
|
|
}
|
|
} catch (e) {
|
|
statusMsg.style.color = '#EF4444';
|
|
statusMsg.textContent = `❌ Connection Error: ${e.message}`;
|
|
}
|
|
});
|
|
}
|
|
}
|
|
|
|
async function callGeminiApi(apiKey, model, prompt) {
|
|
const activeModel = model || localStorage.getItem('opal_selected_model') || 'gemini-2.0-flash';
|
|
const url = `https://generativelanguage.googleapis.com/v1beta/models/${activeModel}:generateContent?key=${apiKey}`;
|
|
const payload = {
|
|
contents: [{ parts: [{ text: prompt }] }],
|
|
generationConfig: { temperature: 0.7, maxOutputTokens: 2048 }
|
|
};
|
|
|
|
const response = await fetch(url, {
|
|
method: 'POST',
|
|
headers: { 'Content-Type': 'application/json' },
|
|
body: JSON.stringify(payload)
|
|
});
|
|
|
|
if (!response.ok) {
|
|
const errData = await response.json().catch(() => ({}));
|
|
throw new Error(errData?.error?.message || `HTTP ${response.status}`);
|
|
}
|
|
|
|
const data = await response.json();
|
|
return data?.candidates?.[0]?.content?.parts?.[0]?.text || '';
|
|
}
|
|
|
|
// --- Curated Pre-Built Mini-Apps Suite ---
|
|
const PREBUILT_MINI_APPS = [
|
|
{
|
|
id: 'gt_studio',
|
|
name: '3D Commercial Poster Lab',
|
|
emoji: '🎨',
|
|
category: 'ecommerce',
|
|
badge: 'GEM',
|
|
desc: 'প্রডাক্টের ছবি, ৩ডি মার্বেল স্টেজ ও WhatsApp QR সহ 4K ফেসবুক বিজ্ঞাপন পোস্টার তৈরি করে।',
|
|
steps: '7 Steps • 3D Canvas',
|
|
isPosterLab: true
|
|
},
|
|
{
|
|
id: 'inbox_ai',
|
|
name: 'Customer Care & Sales Auto-Reply',
|
|
emoji: '💬',
|
|
category: 'sales',
|
|
badge: 'AI',
|
|
desc: 'ফেসবুক ও হোয়াটসঅ্যাপের কাস্টমারের প্রশ্নের ৩টি ইনস্ট্যান্ট মিষ্টি ও সেলস ক্লোজিং উত্তর বানায়।',
|
|
steps: '3 Steps • Sales Closer',
|
|
fields: [
|
|
{ id: 'field1', label: 'কাস্টমার মেসেজ (Customer Message)', placeholder: 'e.g. আপনাদের সিরামের দাম কত আর ডেলিভারি চার্জ কত?' },
|
|
{ id: 'field2', label: 'দোকানের অফার বা হটলাইন (Store Context)', placeholder: 'e.g. দাম ১০৬০ টাকা, ঢাকা ৭০ টাকা, হটলাইন ০১৭১২-৪২৬৮৭১' }
|
|
],
|
|
promptTemplate: `You are an expert Bangladeshi e-commerce sales closer.
|
|
Customer message: {{field1}}
|
|
Store context: {{field2}}
|
|
|
|
Write 3 distinct ready-to-copy Bengali replies:
|
|
1. Instant sweet greeting with price & benefits
|
|
2. Direct order closing script asking for Name, Address, Phone
|
|
3. 1-Click WhatsApp direct order message with link https://wa.me/8801712426871`
|
|
},
|
|
{
|
|
id: 'veo_prompter',
|
|
name: 'Google Veo 3.1 Video Ad Prompter',
|
|
emoji: '🎬',
|
|
category: 'social',
|
|
badge: 'VEO 3.1',
|
|
desc: 'গুগল Veo ৩.১ ও Sora-র জন্য সিনেমাটিক 9:16 ভিডিও প্রম্পট, ক্যামেরা মোশন ও লাইটিং গাইড বানায়।',
|
|
steps: '4 Steps • AI Video',
|
|
fields: [
|
|
{ id: 'field1', label: 'প্রডাক্টের নাম ও ধরণ (Product)', placeholder: 'e.g. Medicube Collagen Jelly Cream' },
|
|
{ id: 'field2', label: 'ভিডিওর ভাইব ও স্টাইল (Style/Vibe)', placeholder: 'e.g. Luxury Korean Aesthetic Glow, Neon reflections, 4k macro' }
|
|
],
|
|
promptTemplate: `You are a world-class AI Video Prompt Engineer for Google Veo 3.1 and Sora.
|
|
Create an ultra-detailed, cinematic 9:16 vertical video prompt for:
|
|
Product: {{field1}}
|
|
Style/Vibe: {{field2}}
|
|
|
|
Include:
|
|
1. Master Cinematic Prompt (in English for AI video model)
|
|
2. Camera Movements (Macro close-up, 360 rotation, slow motion drop)
|
|
3. Studio Lighting & Physics (Softbox, caustics, rim light)
|
|
4. Bengali Narration / Voiceover Script (15 seconds)`
|
|
},
|
|
{
|
|
id: 'risk_scorer',
|
|
name: 'Gemini COD Fraud & Return Risk Shield',
|
|
emoji: '🛡️',
|
|
category: 'tools',
|
|
badge: 'AI SHIELD',
|
|
desc: 'কাস্টমারের ফোন নাম্বার, ঠিকানা ও অর্ডারের পরিমাণ বিশ্লেষণ করে রিটার্ন ফ্রড রিস্ক স্কোর দেয়।',
|
|
steps: 'Real-time • Gemini 2.0',
|
|
fields: [
|
|
{ id: 'field1', label: 'কাস্টমারের ফোন নাম্বার (Phone Number)', placeholder: 'e.g. 01819998877' },
|
|
{ id: 'field2', label: 'ঠিকানা ও অর্ডারের মূল্য (Address & Amount)', placeholder: 'e.g. Mirpur 10, Dhaka - Amount: ৳ 3,200' }
|
|
],
|
|
promptTemplate: `You are an advanced e-commerce Fraud Risk Analysis Engine for Bangladesh logistics.
|
|
Phone: {{field1}}
|
|
Order Info: {{field2}}
|
|
|
|
Evaluate:
|
|
1. Risk Level: (LOW / MEDIUM / HIGH)
|
|
2. Recommendation: (Proceed with COD / Take Advance Delivery Charge ৳150 / Call to verify)
|
|
3. Short reasoning in clear Bengali.`
|
|
},
|
|
{
|
|
id: 'ecommerce_launch',
|
|
name: 'E-Commerce Viral Product Launch Kit',
|
|
emoji: '🛍️',
|
|
category: 'ecommerce',
|
|
badge: 'VIRAL',
|
|
desc: 'যেকোনো পণ্যের আকর্ষণীয় ফেসবুক পোস্ট ক্যাপশন, পেইন পয়েন্ট হুক ও অফার কপি তৈরি করে।',
|
|
steps: '5 Steps • Marketing',
|
|
fields: [
|
|
{ id: 'field1', label: 'প্রডাক্টের নাম ও ক্যাটাগরি (Product Name)', placeholder: 'e.g. Korean Snail Mucin Power Essence' },
|
|
{ id: 'field2', label: 'মূল সুবিধা ও অফার (Key Benefits & Price)', placeholder: 'e.g. ব্রণের দাগ দূর করে, ডিপ ময়েশ্চারাইজিং, দাম ৳১,৪৫০ (অফার ২৫% ছাড়)' }
|
|
],
|
|
promptTemplate: `You are a high-converting Facebook ad copywriter in Bangladesh.
|
|
Create a complete viral product launch post in attractive Bengali for:
|
|
Product: {{field1}}
|
|
Benefits & Offer: {{field2}}
|
|
|
|
Format:
|
|
- 3 Viral Opening Hooks (Emoji heavy)
|
|
- Problem & Solution story
|
|
- Special Limited Time Offer & Delivery Info
|
|
- Urgent Call-to-Action with WhatsApp & Website link`
|
|
},
|
|
{
|
|
id: 'tiktok_hooks',
|
|
name: 'TikTok & Meta Reels Viral Hook Matrix',
|
|
emoji: '🔥',
|
|
category: 'social',
|
|
badge: 'HOOKS',
|
|
desc: 'প্রথম ৩ সেকেন্ডে কাস্টমারের চোখ আটকে ফেলার মতো ৫টি সাইকোলজিক্যাল ভাইরাল হুক তৈরি করে।',
|
|
steps: '5 Viral Hooks • Reels',
|
|
fields: [
|
|
{ id: 'field1', label: 'প্রডাক্ট বা বিষয়ের নাম (Product / Topic)', placeholder: 'e.g. Korean Glass Skin Facial Foam' },
|
|
{ id: 'field2', label: 'টার্গেট অডিয়েন্স (Target Audience)', placeholder: 'e.g. যাদের মুখে রোদে পোড়া দাগ ও ব্রণের সমস্যা রয়েছে' }
|
|
],
|
|
promptTemplate: `You are a viral TikTok & Instagram Reels growth strategist.
|
|
Create 5 powerful 3-second visual + verbal hooks in Bengali for:
|
|
Product: {{field1}}
|
|
Target Audience: {{field2}}
|
|
|
|
Format each hook with:
|
|
- Visual Action (Screen text & actor action)
|
|
- Spoken Audio Hook (High curiosity / urgency)
|
|
- Psychology trigger explanation`
|
|
},
|
|
{
|
|
id: 'urgency_sales',
|
|
name: 'Flash Sale & Urgency Campaign Copywriter',
|
|
emoji: '🏷️',
|
|
category: 'sales',
|
|
badge: 'OFFER',
|
|
desc: '২৪ ঘণ্টার ফ্ল্যাশ সেল, স্টক ক্লিয়ারেন্স ও ঈদ/বৈশাখী অফারের হাই-কনভার্টিং কপি বানায়।',
|
|
steps: 'Flash Sales • Copy',
|
|
fields: [
|
|
{ id: 'field1', label: 'অফারের নাম ও ডিসকাউন্ট (Offer Details)', placeholder: 'e.g. 48 Hours Weekend Flash Sale - Flat 35% OFF' },
|
|
{ id: 'field2', label: 'শর্ত ও ফ্রি ডেলিভারি (Conditions & Perks)', placeholder: 'e.g. প্রথম ৫০ জনের জন্য ফ্রি গিফট ও ফ্রি হোম ডেলিভারি' }
|
|
],
|
|
promptTemplate: `Create an irresistible, high-urgency Flash Sale ad copy in natural Bengali for:
|
|
Campaign: {{field1}}
|
|
Perks: {{field2}}
|
|
|
|
Include FOMO triggers, countdown psychological anchors, and clear WhatsApp booking steps.`
|
|
},
|
|
{
|
|
id: 'courier_formatter',
|
|
name: 'Steadfast & Pathao Consignment Formatter',
|
|
emoji: '📦',
|
|
category: 'tools',
|
|
badge: 'LOGISTICS',
|
|
desc: 'অর্ডারের টেক্সট থেকে ১-ক্লিকে কুরিয়ার এন্ট্রি ফরম্যাট ও প্রিন্ট লেবেল তৈরি করে।',
|
|
steps: '1-Click • Logistics',
|
|
fields: [
|
|
{ id: 'field1', label: 'কাস্টমারের সম্পূর্ণ অর্ডার টেক্সট (Order Text)', placeholder: 'e.g. নাম: তানভীর হাসান, ফোন: 01712345678, ঠিকানা: বাড়ি ১২, রোড ৫, ধানমন্ডি, ঢাকা। প্রডাক্ট: ১ পিস সিরাম (৳১০৬০)' },
|
|
{ id: 'field2', label: 'ডেলিভারি চার্জ ও নোট (COD & Notes)', placeholder: 'e.g. COD Amount: ৳ 1130 (Dhaka inside ৳70)' }
|
|
],
|
|
promptTemplate: `Parse this customer order and structure it cleanly for Steadfast / Pathao Courier API and Print Packing Sticker:
|
|
Order Text: {{field1}}
|
|
COD Info: {{field2}}
|
|
|
|
Generate:
|
|
1. Structured CSV/JSON Format (Name, Phone, Address, COD, Instruction)
|
|
2. Clean Printable Packing Slip in Bengali.`
|
|
}
|
|
];
|
|
|
|
// --- Mini-Apps Hub Logic ---
|
|
let activeCategory = 'all';
|
|
|
|
function initMiniAppsHub() {
|
|
renderMiniApps();
|
|
|
|
const filterChips = document.querySelectorAll('.filter-chip');
|
|
filterChips.forEach(chip => {
|
|
chip.addEventListener('click', () => {
|
|
filterChips.forEach(c => c.classList.remove('active'));
|
|
chip.classList.add('active');
|
|
activeCategory = chip.getAttribute('data-cat');
|
|
renderMiniApps();
|
|
});
|
|
});
|
|
}
|
|
|
|
function getCustomMiniApps() {
|
|
return JSON.parse(localStorage.getItem('opal_custom_apps') || '[]');
|
|
}
|
|
|
|
function renderMiniApps() {
|
|
const container = document.getElementById('appsGridContainer');
|
|
if (!container) return;
|
|
|
|
const customApps = getCustomMiniApps();
|
|
const allApps = [...PREBUILT_MINI_APPS, ...customApps];
|
|
|
|
const filtered = activeCategory === 'all'
|
|
? allApps
|
|
: (activeCategory === 'custom' ? customApps : allApps.filter(a => a.category === activeCategory));
|
|
|
|
if (filtered.length === 0) {
|
|
container.innerHTML = `
|
|
<div class="col-span-full empty-state" style="grid-column: 1 / -1;">
|
|
<span class="icon-empty">📭</span>
|
|
<p>No mini-apps found in this category. Click "+ Create App" to build one!</p>
|
|
</div>
|
|
`;
|
|
return;
|
|
}
|
|
|
|
container.innerHTML = filtered.map(app => `
|
|
<div class="app-card">
|
|
<div class="app-card-top">
|
|
<div class="app-icon">${app.emoji || '💎'}</div>
|
|
<span class="tag-gem">${app.badge || 'CUSTOM'}</span>
|
|
</div>
|
|
<div onclick="openAppRunner('${app.id}')" style="cursor: pointer; flex: 1;">
|
|
<h3>${app.name}</h3>
|
|
<p>${app.desc || 'AI powered dynamic mini-app for client dashboard.'}</p>
|
|
</div>
|
|
<div class="app-card-footer">
|
|
<span class="meta-tag">${app.steps || 'Gemini 2.0'}</span>
|
|
<div style="display: flex; gap: 6px;">
|
|
<button class="btn-embed-chip" onclick="openEmbedModal('${app.id}')" title="Embed Code">
|
|
📦 Embed
|
|
</button>
|
|
<button class="btn-embed-chip" onclick="openAppRunner('${app.id}')" style="background: rgba(139, 92, 246, 0.2); color: #C084FC;">
|
|
⚡ Run
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
`).join('');
|
|
}
|
|
|
|
// --- Visual Mini-App Builder ---
|
|
function initMiniAppBuilder() {
|
|
const nameInput = document.getElementById('builderAppName');
|
|
const emojiInput = document.getElementById('builderAppEmoji');
|
|
const catSelect = document.getElementById('builderCategory');
|
|
const modelSelect = document.getElementById('builderModel');
|
|
const descInput = document.getElementById('builderDesc');
|
|
const f1Input = document.getElementById('builderField1');
|
|
const f2Input = document.getElementById('builderField2');
|
|
const templateInput = document.getElementById('builderPromptTemplate');
|
|
const saveBtn = document.getElementById('saveMiniAppBtn');
|
|
const testBtn = document.getElementById('testMiniAppBtn');
|
|
const statusMsg = document.getElementById('builderStatusMsg');
|
|
|
|
if (!saveBtn) return;
|
|
|
|
saveBtn.addEventListener('click', () => {
|
|
const name = nameInput.value.trim();
|
|
if (!name) {
|
|
alert('Please enter a Mini-App name');
|
|
return;
|
|
}
|
|
|
|
const newApp = {
|
|
id: 'custom_' + Date.now(),
|
|
name: name,
|
|
emoji: emojiInput.value.trim() || '💎',
|
|
category: catSelect.value,
|
|
model: modelSelect.value,
|
|
badge: 'CUSTOM APP',
|
|
desc: descInput.value.trim() || 'Custom client dashboard mini-app.',
|
|
steps: 'Custom • Gemini AI',
|
|
fields: [
|
|
{ id: 'field1', label: f1Input.value.trim() || 'Field 1', placeholder: 'Enter ' + (f1Input.value.trim() || 'Field 1') },
|
|
{ id: 'field2', label: f2Input.value.trim() || 'Field 2', placeholder: 'Enter ' + (f2Input.value.trim() || 'Field 2') }
|
|
],
|
|
promptTemplate: templateInput.value.trim(),
|
|
createdAt: new Date().toISOString()
|
|
};
|
|
|
|
const existing = getCustomMiniApps();
|
|
existing.unshift(newApp);
|
|
localStorage.setItem('opal_custom_apps', JSON.stringify(existing));
|
|
|
|
statusMsg.classList.remove('hidden');
|
|
statusMsg.style.color = '#10B981';
|
|
statusMsg.textContent = `🎉 Mini-App "${name}" successfully saved & added to Hub!`;
|
|
|
|
renderMiniApps();
|
|
setTimeout(() => {
|
|
switchToTab('tabApps');
|
|
statusMsg.classList.add('hidden');
|
|
}, 1200);
|
|
});
|
|
|
|
if (testBtn) {
|
|
testBtn.addEventListener('click', () => {
|
|
const name = nameInput.value.trim() || 'Test Mini-App';
|
|
const tempApp = {
|
|
id: 'test_temp',
|
|
name: name,
|
|
emoji: emojiInput.value.trim() || '🧪',
|
|
desc: descInput.value.trim() || 'Testing custom app runner',
|
|
fields: [
|
|
{ id: 'field1', label: f1Input.value.trim() || 'Field 1', placeholder: 'Input 1' },
|
|
{ id: 'field2', label: f2Input.value.trim() || 'Field 2', placeholder: 'Input 2' }
|
|
],
|
|
promptTemplate: templateInput.value.trim(),
|
|
model: modelSelect.value
|
|
};
|
|
launchRunnerWithApp(tempApp);
|
|
});
|
|
}
|
|
}
|
|
|
|
// --- Interactive Mini-App Runner (Modal) ---
|
|
let currentRunningApp = null;
|
|
|
|
window.openAppRunner = function(appId) {
|
|
if (appId === 'gt_studio') {
|
|
switchToTab('tabPosterLab');
|
|
return;
|
|
}
|
|
if (appId === 'inbox_ai') {
|
|
switchToTab('tabInboxAI');
|
|
return;
|
|
}
|
|
|
|
const allApps = [...PREBUILT_MINI_APPS, ...getCustomMiniApps()];
|
|
const app = allApps.find(a => a.id === appId);
|
|
if (!app) return;
|
|
|
|
launchRunnerWithApp(app);
|
|
};
|
|
|
|
function launchRunnerWithApp(app) {
|
|
currentRunningApp = app;
|
|
const modal = document.getElementById('appRunnerModal');
|
|
const title = document.getElementById('runnerModalTitle');
|
|
const desc = document.getElementById('runnerModalDesc');
|
|
const formBox = document.getElementById('runnerDynamicForm');
|
|
const resultBox = document.getElementById('runnerResultBox');
|
|
const statusMsg = document.getElementById('runnerStatusMsg');
|
|
|
|
title.innerHTML = `${app.emoji || '🚀'} ${app.name}`;
|
|
desc.textContent = app.desc || '';
|
|
resultBox.classList.add('hidden');
|
|
statusMsg.classList.add('hidden');
|
|
|
|
const fields = app.fields || [
|
|
{ id: 'field1', label: 'Input 1', placeholder: 'Enter details...' },
|
|
{ id: 'field2', label: 'Input 2', placeholder: 'Enter additional context...' }
|
|
];
|
|
|
|
formBox.innerHTML = fields.map((f, i) => `
|
|
<div class="form-group">
|
|
<label for="runner_${f.id}">${f.label}:</label>
|
|
<input type="text" id="runner_${f.id}" placeholder="${f.placeholder}" class="runner-input" data-var="${f.id}">
|
|
</div>
|
|
`).join('');
|
|
|
|
modal.classList.remove('hidden');
|
|
}
|
|
|
|
window.closeAppRunner = function() {
|
|
document.getElementById('appRunnerModal').classList.add('hidden');
|
|
currentRunningApp = null;
|
|
};
|
|
|
|
// Handle Mini-App Execution
|
|
document.addEventListener('DOMContentLoaded', () => {
|
|
const execBtn = document.getElementById('runnerExecuteBtn');
|
|
if (execBtn) {
|
|
execBtn.addEventListener('click', async () => {
|
|
if (!currentRunningApp) return;
|
|
|
|
const statusMsg = document.getElementById('runnerStatusMsg');
|
|
const resultBox = document.getElementById('runnerResultBox');
|
|
const resultContent = document.getElementById('runnerResultContent');
|
|
|
|
statusMsg.classList.remove('hidden');
|
|
statusMsg.style.color = '#C084FC';
|
|
statusMsg.textContent = '⏳ Processing with Google Gemini 2.0 AI...';
|
|
execBtn.disabled = true;
|
|
|
|
// Extract form values
|
|
const inputs = document.querySelectorAll('.runner-input');
|
|
let prompt = currentRunningApp.promptTemplate || 'Generate helpful response for the user.';
|
|
|
|
inputs.forEach(input => {
|
|
const varName = input.getAttribute('data-var');
|
|
const val = input.value.trim() || 'N/A';
|
|
const regex = new RegExp(`{{${varName}}}`, 'g');
|
|
prompt = prompt.replace(regex, val);
|
|
});
|
|
|
|
const apiKey = localStorage.getItem('opal_gemini_api_key') || '';
|
|
const model = currentRunningApp.model || localStorage.getItem('opal_selected_model') || 'gemini-2.0-flash';
|
|
|
|
try {
|
|
let output = '';
|
|
if (apiKey) {
|
|
output = await callGeminiApi(apiKey, model, prompt);
|
|
} else {
|
|
// Dynamic intelligent fallback
|
|
output = `✨ [Google Opal AI Offline Mode]\n\n` +
|
|
`Generated Output for: ${currentRunningApp.name}\n` +
|
|
`----------------------------------------\n` +
|
|
`১. অফার ও কাস্টমার রেসপন্স প্রস্তুত করা হয়েছে।\n` +
|
|
`২. ১০০% জেনুইন কোয়ালিটি ও সুপারফাস্ট ডেলিভারি নিশ্চিত করুন।\n` +
|
|
`৩. সরাসরি যোগাযোগ: https://wa.me/8801712426871\n\n` +
|
|
`💡 টিপস: Settings-এ গিয়ে আপনার Google Gemini API Key বসালে রিয়েল-টাইম আনলিমিটেড লাইভ রেসপন্স পাবেন!`;
|
|
}
|
|
|
|
resultContent.textContent = output.trim();
|
|
resultBox.classList.remove('hidden');
|
|
statusMsg.classList.add('hidden');
|
|
|
|
// Save to History
|
|
saveGenerationToHistory({
|
|
type: currentRunningApp.name,
|
|
title: currentRunningApp.name,
|
|
price: 'AI Generation',
|
|
date: new Date().toLocaleTimeString()
|
|
});
|
|
|
|
} catch (err) {
|
|
statusMsg.style.color = '#EF4444';
|
|
statusMsg.textContent = `❌ Error: ${err.message}`;
|
|
}
|
|
|
|
execBtn.disabled = false;
|
|
});
|
|
}
|
|
});
|
|
|
|
// --- 1-Click Client Dashboard Embed Modal ---
|
|
window.openEmbedModal = function(appId) {
|
|
const modal = document.getElementById('embedModal');
|
|
const title = document.getElementById('embedModalTitle');
|
|
const iframeBox = document.getElementById('embedIframeCode');
|
|
const apiUrlBox = document.getElementById('embedApiUrl');
|
|
|
|
const allApps = [...PREBUILT_MINI_APPS, ...getCustomMiniApps()];
|
|
const app = allApps.find(a => a.id === appId) || { name: 'Opal Mini-App', id: appId };
|
|
|
|
title.innerHTML = `📦 Embed "${app.name}" in Client Dashboard`;
|
|
|
|
const baseUrl = 'https://opal.auraajenticai.cloud';
|
|
iframeBox.textContent = `<iframe src="${baseUrl}/?app=${app.id}" width="100%" height="650" style="border:none; border-radius:18px; box-shadow:0 8px 32px rgba(0,0,0,0.4);" allow="clipboard-write"></iframe>`;
|
|
apiUrlBox.textContent = `${baseUrl}/api/v1/mini-app/run?app_id=${app.id}`;
|
|
|
|
modal.classList.remove('hidden');
|
|
};
|
|
|
|
window.closeEmbedModal = function() {
|
|
document.getElementById('embedModal').classList.add('hidden');
|
|
};
|
|
|
|
// --- Masterpiece 3D Canvas Poster Engine ---
|
|
let selectedStageTheme = 'obsidian_gold';
|
|
|
|
function initPosterLab() {
|
|
const productInput = document.getElementById('productInput');
|
|
const productPrice = document.getElementById('productPrice');
|
|
const customBadgeInput = document.getElementById('customBadgeInput');
|
|
const aspectRatioSelect = document.getElementById('aspectRatioSelect');
|
|
const brandSelect = document.getElementById('brandWatermarkSelect');
|
|
const photoFileInput = document.getElementById('photoFileInput');
|
|
const clearPhotoBtn = document.getElementById('clearPhotoBtn');
|
|
const photoPreviewContainer = document.getElementById('photoPreviewContainer');
|
|
const attachedPhotoImg = document.getElementById('attachedPhotoImg');
|
|
const generatePosterBtn = document.getElementById('generatePosterBtn');
|
|
const posterStatusText = document.getElementById('posterStatusText');
|
|
const posterResultCard = document.getElementById('posterResultCard');
|
|
const posterCanvas = document.getElementById('posterCanvas');
|
|
const canvasContainer = document.getElementById('canvasContainer');
|
|
const downloadPosterBtn = document.getElementById('downloadPosterBtn');
|
|
const shareWhatsAppBtn = document.getElementById('shareWhatsAppBtn');
|
|
|
|
// Stage Theme Selector
|
|
const themeChips = document.querySelectorAll('#themeSelectorGroup .theme-chip');
|
|
themeChips.forEach(chip => {
|
|
chip.addEventListener('click', () => {
|
|
themeChips.forEach(c => c.classList.remove('active'));
|
|
chip.classList.add('active');
|
|
selectedStageTheme = chip.getAttribute('data-theme');
|
|
});
|
|
});
|
|
|
|
let attachedImageBitmap = null;
|
|
|
|
// Photo Input change
|
|
photoFileInput.addEventListener('change', (e) => {
|
|
const file = e.target.files[0];
|
|
if (file) {
|
|
const reader = new FileReader();
|
|
reader.onload = (event) => {
|
|
attachedPhotoImg.src = event.target.result;
|
|
photoPreviewContainer.classList.remove('hidden');
|
|
clearPhotoBtn.classList.remove('hidden');
|
|
|
|
const img = new Image();
|
|
img.onload = () => { attachedImageBitmap = img; };
|
|
img.src = event.target.result;
|
|
};
|
|
reader.readAsDataURL(file);
|
|
}
|
|
});
|
|
|
|
clearPhotoBtn.addEventListener('click', () => {
|
|
photoFileInput.value = '';
|
|
attachedImageBitmap = null;
|
|
photoPreviewContainer.classList.add('hidden');
|
|
clearPhotoBtn.classList.add('hidden');
|
|
});
|
|
|
|
// Generate 3D Poster
|
|
generatePosterBtn.addEventListener('click', async () => {
|
|
const inputVal = productInput.value.trim();
|
|
const priceVal = productPrice.value.trim();
|
|
const badgeText = customBadgeInput ? customBadgeInput.value.trim() : '🇰🇷 100% Original Korea';
|
|
const aspect = aspectRatioSelect ? aspectRatioSelect.value : '1:1';
|
|
const brand = brandSelect ? brandSelect.value : 'glamourstouch';
|
|
|
|
posterStatusText.classList.remove('hidden');
|
|
posterStatusText.style.color = '#F59E0B';
|
|
posterStatusText.textContent = '⏳ Rendering 3D stage with GPU canvas blend...';
|
|
generatePosterBtn.disabled = true;
|
|
|
|
try {
|
|
let productImg = attachedImageBitmap;
|
|
let title = "Authentic Korean K-Beauty Care";
|
|
|
|
if (!productImg) {
|
|
const resolved = await resolveProductUrl(inputVal);
|
|
if (resolved && resolved.imageUrl) {
|
|
title = resolved.title || inputVal;
|
|
productImg = await loadImage(resolved.imageUrl);
|
|
} else {
|
|
const fallbackUrl = `https://images.unsplash.com/photo-1556228720-195a672e8a03?w=800&h=800&fit=crop`;
|
|
productImg = await loadImage(fallbackUrl);
|
|
title = inputVal;
|
|
}
|
|
}
|
|
|
|
if (productImg) {
|
|
if (aspect === '9:16') {
|
|
posterCanvas.width = 1080;
|
|
posterCanvas.height = 1920;
|
|
canvasContainer.classList.add('aspect-reels');
|
|
} else {
|
|
posterCanvas.width = 1080;
|
|
posterCanvas.height = 1080;
|
|
canvasContainer.classList.remove('aspect-reels');
|
|
}
|
|
|
|
await render3DCommercialPoster(posterCanvas, productImg, title, priceVal, badgeText, selectedStageTheme, aspect, brand);
|
|
|
|
posterResultCard.classList.remove('hidden');
|
|
posterStatusText.classList.add('hidden');
|
|
posterResultCard.scrollIntoView({ behavior: 'smooth' });
|
|
|
|
saveGenerationToHistory({
|
|
type: '3D Poster',
|
|
title: title,
|
|
price: priceVal,
|
|
date: new Date().toLocaleTimeString()
|
|
});
|
|
} else {
|
|
posterStatusText.textContent = '❌ Failed to load product image.';
|
|
}
|
|
} catch (err) {
|
|
posterStatusText.textContent = `❌ Error: ${err.message}`;
|
|
}
|
|
|
|
generatePosterBtn.disabled = false;
|
|
});
|
|
|
|
// Download
|
|
downloadPosterBtn.addEventListener('click', () => {
|
|
const link = document.createElement('a');
|
|
link.download = `Opal_3D_Poster_${Date.now()}.jpg`;
|
|
link.href = posterCanvas.toDataURL('image/jpeg', 0.95);
|
|
link.click();
|
|
});
|
|
|
|
// WhatsApp
|
|
shareWhatsAppBtn.addEventListener('click', () => {
|
|
const text = encodeURIComponent(`✨ 100% Authentic Product Order!\nProduct: ${productInput.value}\nPrice: ${productPrice.value}\nWebsite: https://glamourstouch.com`);
|
|
window.open(`https://wa.me/8801712426871?text=${text}`, '_blank');
|
|
});
|
|
|
|
// n8n Auto-Post Webhook
|
|
const autoPostN8nBtn = document.getElementById('autoPostN8nBtn');
|
|
const n8nPostStatusMsg = document.getElementById('n8nPostStatusMsg');
|
|
|
|
if (autoPostN8nBtn) {
|
|
autoPostN8nBtn.addEventListener('click', async () => {
|
|
const webhookUrl = localStorage.getItem('opal_n8n_webhook');
|
|
if (!webhookUrl) {
|
|
alert('⚠️ Please configure n8n Webhook URL in Settings first!');
|
|
switchToTab('tabSettings');
|
|
return;
|
|
}
|
|
|
|
n8nPostStatusMsg.classList.remove('hidden');
|
|
n8nPostStatusMsg.style.color = '#38BDF8';
|
|
n8nPostStatusMsg.textContent = '⏳ Sending 3D poster & copy to n8n Webhook...';
|
|
autoPostN8nBtn.disabled = true;
|
|
|
|
try {
|
|
const posterDataUrl = posterCanvas.toDataURL('image/jpeg', 0.92);
|
|
const payload = {
|
|
title: productInput.value.trim() || 'Authentic K-Beauty Skincare',
|
|
price: productPrice.value.trim() || '৳ ১,০৬০',
|
|
caption: `✨ ${productInput.value.trim()} ✨\n\n💰 অফার মূল্য: ${productPrice.value.trim()}\n🛡️ ১০০% অরিজিনাল গ্যারান্টি!\n\n💬 সরাসরি WhatsApp এ অর্ডার করতে ইনবক্স করুন:\n👉 https://wa.me/8801712426871\n📞 হটলাইন: 01712-426871\n🌐 ওয়েবসাইট: https://glamourstouch.com`,
|
|
image_url: posterDataUrl,
|
|
store: "Glamour's Touch",
|
|
website: "https://glamourstouch.com",
|
|
whatsapp: "01712-426871",
|
|
timestamp: new Date().toISOString()
|
|
};
|
|
|
|
const res = await fetch(webhookUrl, {
|
|
method: 'POST',
|
|
headers: { 'Content-Type': 'application/json' },
|
|
body: JSON.stringify(payload)
|
|
});
|
|
|
|
if (res.ok) {
|
|
const resData = await res.json().catch(() => ({}));
|
|
n8nPostStatusMsg.style.color = '#10B981';
|
|
n8nPostStatusMsg.textContent = `✅ ${resData.message || '🎉 পোস্টটি সফলভাবে n8n-এর মাধ্যমে Facebook Page-এ পাবলিশ হয়েছে!'}`;
|
|
} else {
|
|
n8nPostStatusMsg.style.color = '#EF4444';
|
|
n8nPostStatusMsg.textContent = `❌ n8n Webhook returned HTTP ${res.status}`;
|
|
}
|
|
} catch (err) {
|
|
n8nPostStatusMsg.style.color = '#EF4444';
|
|
n8nPostStatusMsg.textContent = `❌ Connection Error: ${err.message}`;
|
|
}
|
|
|
|
autoPostN8nBtn.disabled = false;
|
|
});
|
|
}
|
|
}
|
|
|
|
// Universal Link Resolver
|
|
async function resolveProductUrl(input) {
|
|
if (!input) return null;
|
|
if (input.match(/\.(jpeg|jpg|gif|png|webp)($|\?)/i)) {
|
|
return { title: 'Authentic Product', imageUrl: input };
|
|
}
|
|
|
|
const key = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJzdXBhYmFzZSIsInJlZiI6ImZtY2x0cmpudXZ1b29hcmt2dWZuIiwicm9sZSI6ImFub24iLCJpYXQiOjE3NzUxMzY3MDQsImV4cCI6MjA5MDcxMjcwNH0.PkSgBAZx41X4sZurfyOdxCVa01hkKTkyBhVkGzx_4y4';
|
|
|
|
const uuidMatch = input.match(/[0-9a-fA-F]{8}-[0-9a-fA-F]{4}-[0-9a-fA-F]{4}-[0-9a-fA-F]{4}-[0-9a-fA-F]{12}/);
|
|
if (uuidMatch) {
|
|
try {
|
|
const res = await fetch(`https://fmcltrjnuvuooarkvufn.supabase.co/rest/v1/products?id=eq.${uuidMatch[0]}&select=*`, {
|
|
headers: { 'apikey': key, 'Authorization': `Bearer ${key}` }
|
|
});
|
|
const data = await res.json();
|
|
if (data && data.length > 0) {
|
|
const p = data[0];
|
|
return {
|
|
title: p.name || 'Authentic Korean Skincare',
|
|
price: p.price ? '৳ ' + p.price : '',
|
|
imageUrl: p.image || p.image_url || (p.images && p.images[0]) || ''
|
|
};
|
|
}
|
|
} catch (e) {
|
|
console.warn('GT Supabase fetch by ID failed:', e);
|
|
}
|
|
}
|
|
|
|
try {
|
|
const cleanQuery = encodeURIComponent(input.replace(/https?:\/\/[^\s]+/g, '').trim().slice(0, 30));
|
|
if (cleanQuery) {
|
|
const res = await fetch(`https://fmcltrjnuvuooarkvufn.supabase.co/rest/v1/products?name=ilike.*${cleanQuery}*&select=*&limit=1`, {
|
|
headers: { 'apikey': key, 'Authorization': `Bearer ${key}` }
|
|
});
|
|
const data = await res.json();
|
|
if (data && data.length > 0) {
|
|
const p = data[0];
|
|
return {
|
|
title: p.name || input,
|
|
price: p.price ? '৳ ' + p.price : '',
|
|
imageUrl: p.image || p.image_url || (p.images && p.images[0]) || ''
|
|
};
|
|
}
|
|
}
|
|
} catch (e) {
|
|
console.warn('GT Supabase search by name failed:', e);
|
|
}
|
|
|
|
return { title: input, imageUrl: 'https://images.unsplash.com/photo-1556228720-195a672e8a03?w=800&h=800&fit=crop' };
|
|
}
|
|
|
|
function loadImage(src) {
|
|
return new Promise((resolve, reject) => {
|
|
let loadUrl = src;
|
|
if (src.startsWith('http://') || src.startsWith('https://')) {
|
|
loadUrl = 'https://images.weserv.nl/?url=' + encodeURIComponent(src) + '&output=jpg&q=95';
|
|
}
|
|
|
|
const img = new Image();
|
|
img.crossOrigin = 'anonymous';
|
|
img.onload = () => resolve(img);
|
|
img.onerror = () => {
|
|
const fallbackImg = new Image();
|
|
fallbackImg.crossOrigin = 'anonymous';
|
|
fallbackImg.onload = () => resolve(fallbackImg);
|
|
fallbackImg.onerror = () => reject(new Error('Could not load image'));
|
|
fallbackImg.src = src;
|
|
};
|
|
img.src = loadUrl;
|
|
});
|
|
}
|
|
|
|
// --- 3D Canvas Multi-Theme Rendering Engine ---
|
|
async function render3DCommercialPoster(canvas, productImg, title, price, badgeText, theme = 'obsidian_gold', aspect = '1:1', brand = 'glamourstouch') {
|
|
const ctx = canvas.getContext('2d');
|
|
const w = canvas.width;
|
|
const h = canvas.height;
|
|
|
|
// Theme palettes
|
|
const THEMES = {
|
|
obsidian_gold: {
|
|
bgCenter: '#18212D', bgMid: '#0C1117', bgOuter: '#05080C',
|
|
spotlightColor: '#FFFFFF', goldRim: '#E5B83A', ringColor: '#66E5B83A',
|
|
pedestalTop: '#FFFFFF', pedestalMid: '#EBF2F8', pedestalDark: '#1B2533',
|
|
headerTitle: '✨ GLAMOUR\'S TOUCH ✨', headerSub: '대한민국 프리미엄 스킨কেয়ার • 100% AUTHENTIC KOREAN COSMETICS'
|
|
},
|
|
rose_quartz: {
|
|
bgCenter: '#2D1824', bgMid: '#170C13', bgOuter: '#0C0509',
|
|
spotlightColor: '#FFF0F5', goldRim: '#F472B6', ringColor: '#F472B666',
|
|
pedestalTop: '#FFF5F8', pedestalMid: '#FCE7F3', pedestalDark: '#371829',
|
|
headerTitle: '🌸 SNEHALATA AURA 🌸', headerSub: 'PREMIUM LUXURY LIFESTYLE • 100% AUTHENTIC BEAUTY'
|
|
},
|
|
cyber_neon: {
|
|
bgCenter: '#0F172A', bgMid: '#060E1A', bgOuter: '#02060D',
|
|
spotlightColor: '#E0F2FE', goldRim: '#06B6D4', ringColor: '#06B6D466',
|
|
pedestalTop: '#F0FDF4', pedestalMid: '#CFFAFE', pedestalDark: '#082F49',
|
|
headerTitle: '💎 AURA ENTERPRISE 💎', headerSub: 'NEXT-GEN AGENTIC COMMERCE • AI EMPOWERED'
|
|
},
|
|
botanical_eco: {
|
|
bgCenter: '#14281E', bgMid: '#0B1711', bgOuter: '#040B07',
|
|
spotlightColor: '#F0FDF4', goldRim: '#10B981', ringColor: '#10B98166',
|
|
pedestalTop: '#F7FEE7', pedestalMid: '#DCFCE7', pedestalDark: '#064E3B',
|
|
headerTitle: '🌿 PURE BOTANICAL CARE 🌿', headerSub: 'ORGANIC DERMATOLOGY • CLINICALLY PROVEN'
|
|
}
|
|
};
|
|
|
|
const currentTheme = THEMES[theme] || THEMES.obsidian_gold;
|
|
|
|
// 1. Background Radial Gradient
|
|
const stageCy = aspect === '9:16' ? h * 0.46 : h * 0.44;
|
|
const bgGrad = ctx.createRadialGradient(w / 2, stageCy, 50, w / 2, stageCy, w * 0.75);
|
|
bgGrad.addColorStop(0, currentTheme.bgCenter);
|
|
bgGrad.addColorStop(0.6, currentTheme.bgMid);
|
|
bgGrad.addColorStop(1, currentTheme.bgOuter);
|
|
ctx.fillStyle = bgGrad;
|
|
ctx.fillRect(0, 0, w, h);
|
|
|
|
// 2. Spotlight
|
|
const stageCx = w / 2;
|
|
const stageRadius = w * 0.38;
|
|
|
|
const spotGrad = ctx.createRadialGradient(stageCx, stageCy, 0, stageCx, stageCy, stageRadius);
|
|
spotGrad.addColorStop(0, '#FFFFFF');
|
|
spotGrad.addColorStop(0.48, '#FFFFFF');
|
|
spotGrad.addColorStop(0.68, currentTheme.spotlightColor);
|
|
spotGrad.addColorStop(0.85, '#64748B');
|
|
spotGrad.addColorStop(1, 'transparent');
|
|
|
|
ctx.fillStyle = spotGrad;
|
|
ctx.beginPath();
|
|
ctx.arc(stageCx, stageCy, stageRadius, 0, Math.PI * 2);
|
|
ctx.fill();
|
|
|
|
// Glow Rings
|
|
ctx.strokeStyle = currentTheme.ringColor;
|
|
ctx.lineWidth = 2.5;
|
|
ctx.beginPath();
|
|
ctx.arc(stageCx, stageCy, stageRadius * 0.96, 0, Math.PI * 2);
|
|
ctx.stroke();
|
|
|
|
ctx.setLineDash([12, 12]);
|
|
ctx.beginPath();
|
|
ctx.arc(stageCx, stageCy, stageRadius * 0.91, 0, Math.PI * 2);
|
|
ctx.stroke();
|
|
ctx.setLineDash([]);
|
|
|
|
// 3. 3D Dual-Tier Podium
|
|
const baseTierY = aspect === '9:16' ? 1220 : 745;
|
|
const baseTierRx = w * 0.38;
|
|
const baseTierRy = 34;
|
|
const baseTierHeight = 26;
|
|
|
|
// Base Shadow
|
|
const baseShadow = ctx.createRadialGradient(stageCx, baseTierY + baseTierHeight + 16, 20, stageCx, baseTierY + baseTierHeight + 16, baseTierRx * 1.15);
|
|
baseShadow.addColorStop(0, 'rgba(0,0,0,0.7)');
|
|
baseShadow.addColorStop(1, 'transparent');
|
|
ctx.fillStyle = baseShadow;
|
|
drawOval(ctx, stageCx, baseTierY + baseTierHeight + baseTierRy * 0.6, baseTierRx * 1.15, baseTierRy * 1.6);
|
|
|
|
// Base Cylinder Body
|
|
const baseCylGrad = ctx.createLinearGradient(stageCx - baseTierRx, 0, stageCx + baseTierRx, 0);
|
|
baseCylGrad.addColorStop(0, '#090D12');
|
|
baseCylGrad.addColorStop(0.5, '#475569');
|
|
baseCylGrad.addColorStop(1, '#090D12');
|
|
ctx.fillStyle = baseCylGrad;
|
|
ctx.fillRect(stageCx - baseTierRx, baseTierY, baseTierRx * 2, baseTierHeight);
|
|
drawOval(ctx, stageCx, baseTierY + baseTierHeight, baseTierRx, baseTierRy);
|
|
drawOval(ctx, stageCx, baseTierY, baseTierRx, baseTierRy);
|
|
|
|
// Top Tier
|
|
const topTierY = aspect === '9:16' ? 1180 : 708;
|
|
const topTierRx = w * 0.31;
|
|
const topTierRy = 28;
|
|
const topTierHeight = 34;
|
|
|
|
const topCylGrad = ctx.createLinearGradient(stageCx - topTierRx, 0, stageCx + topTierRx, 0);
|
|
topCylGrad.addColorStop(0, '#070A0E');
|
|
topCylGrad.addColorStop(0.5, currentTheme.goldRim);
|
|
topCylGrad.addColorStop(1, '#070A0E');
|
|
ctx.fillStyle = topCylGrad;
|
|
ctx.fillRect(stageCx - topTierRx, topTierY, topTierRx * 2, topTierHeight);
|
|
drawOval(ctx, stageCx, topTierY + topTierHeight, topTierRx, topTierRy);
|
|
|
|
// Top Surface Cap
|
|
const topSurfaceGrad = ctx.createRadialGradient(stageCx, topTierY, 0, stageCx, topTierY, topTierRx);
|
|
topSurfaceGrad.addColorStop(0, currentTheme.pedestalTop);
|
|
topSurfaceGrad.addColorStop(0.5, currentTheme.pedestalMid);
|
|
topSurfaceGrad.addColorStop(1, currentTheme.pedestalDark);
|
|
ctx.fillStyle = topSurfaceGrad;
|
|
drawOval(ctx, stageCx, topTierY, topTierRx, topTierRy);
|
|
|
|
// Gold Beveled Rim
|
|
ctx.strokeStyle = currentTheme.goldRim;
|
|
ctx.lineWidth = 3.5;
|
|
strokeOval(ctx, stageCx, topTierY, topTierRx, topTierRy);
|
|
|
|
// 4. Product Scaling & Placement
|
|
const targetH = aspect === '9:16' ? 560 : 500;
|
|
const targetW = aspect === '9:16' ? 580 : 520;
|
|
const srcW = productImg.width || 500;
|
|
const srcH = productImg.height || 500;
|
|
const scale = Math.min(targetW / srcW, targetH / srcH);
|
|
const destW = srcW * scale;
|
|
const destH = srcH * scale;
|
|
const destLeft = (w - destW) / 2;
|
|
const destTop = topTierY - destH + 18;
|
|
|
|
// Floor Reflection (Multiply blend)
|
|
ctx.save();
|
|
ctx.globalCompositeOperation = 'multiply';
|
|
ctx.globalAlpha = 0.25;
|
|
ctx.translate(0, (topTierY + 6) * 2);
|
|
ctx.scale(1, -1);
|
|
ctx.drawImage(productImg, destLeft, topTierY + 6, destW, destH * 0.35);
|
|
ctx.restore();
|
|
|
|
// Contact Drop Shadow
|
|
const contactShadow = ctx.createRadialGradient(stageCx, topTierY, 10, stageCx, topTierY, destW * 0.4);
|
|
contactShadow.addColorStop(0, 'rgba(0,0,0,0.8)');
|
|
contactShadow.addColorStop(1, 'transparent');
|
|
ctx.fillStyle = contactShadow;
|
|
drawOval(ctx, stageCx, topTierY + 2, destW * 0.38, 12);
|
|
|
|
// Product Image (Multiply blended to wipe white background)
|
|
ctx.save();
|
|
ctx.globalCompositeOperation = 'multiply';
|
|
ctx.drawImage(productImg, destLeft, destTop, destW, destH);
|
|
ctx.restore();
|
|
|
|
// 5. Value Trust Badges
|
|
const badgeY1 = aspect === '9:16' ? 340 : 240;
|
|
const badgeY2 = badgeY1 + 75;
|
|
drawPillBadge(ctx, 40, badgeY1, badgeText, true, currentTheme.goldRim);
|
|
drawPillBadge(ctx, 40, badgeY2, '🌿 Skin Friendly Formula', true, currentTheme.goldRim);
|
|
drawPillBadge(ctx, w - 40, badgeY1, '⚡ Fast Delivery BD', false, currentTheme.goldRim);
|
|
drawPillBadge(ctx, w - 40, badgeY2, '🛡️ Authentic Guarantee', false, currentTheme.goldRim);
|
|
|
|
// 6. Header Ribbon
|
|
ctx.fillStyle = '#F2090D12';
|
|
ctx.fillRect(0, 0, w, 92);
|
|
|
|
ctx.strokeStyle = currentTheme.goldRim;
|
|
ctx.lineWidth = 3;
|
|
ctx.beginPath();
|
|
ctx.moveTo(0, 92);
|
|
ctx.lineTo(w, 92);
|
|
ctx.stroke();
|
|
|
|
ctx.fillStyle = currentTheme.goldRim;
|
|
ctx.font = 'bold 32px Plus Jakarta Sans, sans-serif';
|
|
ctx.textAlign = 'center';
|
|
ctx.fillText(currentTheme.headerTitle, w / 2, 52);
|
|
|
|
ctx.fillStyle = '#FFF4D0';
|
|
ctx.font = '16px Plus Jakarta Sans, sans-serif';
|
|
ctx.fillText(currentTheme.headerSub, w / 2, 80);
|
|
|
|
// 7. Product Title Card
|
|
const cleanTitle = title.length > 60 ? title.substring(0, 58) + '...' : title;
|
|
const titleCardTop = h - (aspect === '9:16' ? 320 : 235);
|
|
const titleCardBottom = h - (aspect === '9:16' ? 150 : 128);
|
|
|
|
ctx.fillStyle = '#EA0B0E14';
|
|
roundRect(ctx, 28, titleCardTop, w - 56, titleCardBottom - titleCardTop, 18);
|
|
ctx.fill();
|
|
|
|
ctx.strokeStyle = currentTheme.goldRim + '88';
|
|
ctx.lineWidth = 2;
|
|
roundRect(ctx, 28, titleCardTop, w - 56, titleCardBottom - titleCardTop, 18);
|
|
ctx.stroke();
|
|
|
|
ctx.fillStyle = '#FFFFFF';
|
|
ctx.font = 'bold 27px Plus Jakarta Sans, Hind Siliguri, sans-serif';
|
|
ctx.textAlign = 'center';
|
|
ctx.fillText(cleanTitle, w / 2, titleCardTop + 42);
|
|
|
|
ctx.fillStyle = currentTheme.goldRim;
|
|
ctx.font = 'bold 21px Hind Siliguri, sans-serif';
|
|
ctx.fillText(`${price} • ১০০% আসল গ্যারান্টি • দ্রুত হোম ডেলিভারি`, w / 2, titleCardTop + 80);
|
|
|
|
// 8. Bottom WhatsApp Banner
|
|
const footerHeight = aspect === '9:16' ? 140 : 118;
|
|
const footerTop = h - footerHeight;
|
|
const footerGrad = ctx.createLinearGradient(0, footerTop, w, h);
|
|
footerGrad.addColorStop(0, '#25D366');
|
|
footerGrad.addColorStop(1, '#1EB855');
|
|
ctx.fillStyle = footerGrad;
|
|
ctx.fillRect(0, footerTop, w, footerHeight);
|
|
|
|
ctx.fillStyle = '#FFFFFF';
|
|
ctx.font = 'bold 32px Plus Jakarta Sans, sans-serif';
|
|
ctx.textAlign = 'left';
|
|
ctx.fillText('💬 WhatsApp Order: 01712-426871', 35, footerTop + 48);
|
|
|
|
ctx.fillStyle = '#053314';
|
|
ctx.font = 'bold 20px Plus Jakarta Sans, sans-serif';
|
|
ctx.fillText('🌐 Website: glamourstouch.com • 📞 Hotline: 01712-426871', 35, footerTop + 90);
|
|
|
|
// QR Code
|
|
await drawWhatsAppQrOnCanvas(ctx, w - 130, footerTop + 11, 96);
|
|
|
|
// Outer Border
|
|
ctx.strokeStyle = currentTheme.goldRim + '99';
|
|
ctx.lineWidth = 6;
|
|
ctx.strokeRect(3, 3, w - 6, h - 6);
|
|
}
|
|
|
|
function drawOval(ctx, cx, cy, rx, ry) {
|
|
ctx.beginPath();
|
|
ctx.ellipse(cx, cy, rx, ry, 0, 0, Math.PI * 2);
|
|
ctx.fill();
|
|
}
|
|
|
|
function strokeOval(ctx, cx, cy, rx, ry) {
|
|
ctx.beginPath();
|
|
ctx.ellipse(cx, cy, rx, ry, 0, 0, Math.PI * 2);
|
|
ctx.stroke();
|
|
}
|
|
|
|
function roundRect(ctx, x, y, width, height, radius) {
|
|
ctx.beginPath();
|
|
ctx.moveTo(x + radius, y);
|
|
ctx.lineTo(x + width - radius, y);
|
|
ctx.quadraticCurveTo(x + width, y, x + width, y + radius);
|
|
ctx.lineTo(x + width, y + height - radius);
|
|
ctx.quadraticCurveTo(x + width, y + height, x + width - radius, y + height);
|
|
ctx.lineTo(x + radius, y + height);
|
|
ctx.quadraticCurveTo(x, y + height, x, y + height - radius);
|
|
ctx.lineTo(x, y + radius);
|
|
ctx.quadraticCurveTo(x, y, x + radius, y);
|
|
ctx.closePath();
|
|
}
|
|
|
|
function drawPillBadge(ctx, x, y, text, isLeft, goldColor = '#E5B83A') {
|
|
ctx.font = 'bold 18px Plus Jakarta Sans, Hind Siliguri, sans-serif';
|
|
const textWidth = ctx.measureText(text).width;
|
|
const pillW = textWidth + 28;
|
|
const pillH = 36;
|
|
const pillX = isLeft ? x : x - pillW;
|
|
const pillY = y - 22;
|
|
|
|
ctx.fillStyle = '#D90E141B';
|
|
roundRect(ctx, pillX, pillY, pillW, pillH, 18);
|
|
ctx.fill();
|
|
|
|
ctx.strokeStyle = goldColor + '66';
|
|
ctx.lineWidth = 1.5;
|
|
roundRect(ctx, pillX, pillY, pillW, pillH, 18);
|
|
ctx.stroke();
|
|
|
|
ctx.fillStyle = '#FFF0C8';
|
|
ctx.textAlign = 'left';
|
|
ctx.fillText(text, pillX + 14, pillY + 24);
|
|
}
|
|
|
|
async function drawWhatsAppQrOnCanvas(ctx, x, y, size) {
|
|
ctx.fillStyle = '#FFFFFF';
|
|
roundRect(ctx, x - 4, y - 4, size + 8, size + 8, 10);
|
|
ctx.fill();
|
|
|
|
const qrContainer = document.getElementById('qrcodeHidden');
|
|
if (qrContainer) {
|
|
qrContainer.innerHTML = '';
|
|
new QRCode(qrContainer, {
|
|
text: 'https://wa.me/8801712426871',
|
|
width: size,
|
|
height: size,
|
|
colorDark: '#0B2E13',
|
|
colorLight: '#FFFFFF',
|
|
correctLevel: QRCode.CorrectLevel.M
|
|
});
|
|
|
|
await new Promise(r => setTimeout(r, 80));
|
|
const qrImg = qrContainer.querySelector('img') || qrContainer.querySelector('canvas');
|
|
if (qrImg) {
|
|
ctx.drawImage(qrImg, x, y, size, size);
|
|
}
|
|
}
|
|
}
|
|
|
|
// --- Customer Care & Inbox AI Dedicated Studio ---
|
|
function initInboxAI() {
|
|
const customerMsgInput = document.getElementById('inboxCustomerMsg');
|
|
const storeContextInput = document.getElementById('inboxStoreContext');
|
|
const generateBtn = document.getElementById('generateInboxReplyBtn');
|
|
const statusMsg = document.getElementById('inboxStatusMsg');
|
|
const repliesCard = document.getElementById('inboxRepliesCard');
|
|
const reply1 = document.getElementById('replyText1');
|
|
const reply2 = document.getElementById('replyText2');
|
|
const reply3 = document.getElementById('replyText3');
|
|
|
|
if (!generateBtn) return;
|
|
|
|
generateBtn.addEventListener('click', async () => {
|
|
const query = customerMsgInput.value.trim();
|
|
const storeInfo = storeContextInput.value.trim();
|
|
const apiKey = localStorage.getItem('opal_gemini_api_key') || '';
|
|
const model = localStorage.getItem('opal_selected_model') || 'gemini-2.0-flash';
|
|
|
|
if (!query) {
|
|
alert('Please enter a customer message');
|
|
return;
|
|
}
|
|
|
|
statusMsg.classList.remove('hidden');
|
|
statusMsg.textContent = '⏳ Generating 3 sweet & polite sales replies with Gemini AI...';
|
|
generateBtn.disabled = true;
|
|
|
|
try {
|
|
if (apiKey) {
|
|
const prompt = `A customer sent this message in e-commerce inbox:
|
|
'${query}'
|
|
Store Info: ${storeInfo}
|
|
|
|
Write 3 ready-to-copy customer responses in natural, sweet BENGALI (বাংলা).
|
|
Format exactly with:
|
|
---REPLY1---
|
|
(Instant polite greeting and direct answer with price & benefits)
|
|
---REPLY2---
|
|
(Order confirmation closer asking for Name, Address, and Phone number)
|
|
---REPLY3---
|
|
(1-click WhatsApp order link: https://wa.me/8801712426871 and hotline 01712-426871)`;
|
|
|
|
const result = await callGeminiApi(apiKey, model, prompt);
|
|
const parts = result.split(/---REPLY[123]---/);
|
|
|
|
reply1.textContent = (parts[1] || 'আসসালামু আলাইকুম প্রিয় কাস্টমার! আমাদের প্রডাক্টের অফার মূল্য মাত্র ৳১০৬০। এটি ১০০% আসল প্রডাক্ট।').trim();
|
|
reply2.textContent = (parts[2] || 'অর্ডারটি কনফার্ম করতে আপনার নাম, সম্পূর্ণ ঠিকানা এবং মোবাইল নম্বরটি লিখে পাঠান। আমরা দ্রুত ক্যাশ অন ডেলিভারিতে পাঠিয়ে দেবো!').trim();
|
|
reply3.textContent = (parts[3] || 'সরাসরি হোয়াটসঅ্যাপে দ্রুত অর্ডার করতে ক্লিক করুন: https://wa.me/8801712426871\nহটলাইন: 01712-426871').trim();
|
|
} else {
|
|
reply1.textContent = `আসসালামু আলাইকুম প্রিয় আপু/ভাইয়া! 🥰\nআমাদের কাছে ১০০% অরিজিনাল কোরিয়ান স্কিনকেয়ার প্রোডাক্ট রয়েছে।\n\n💰 অফার মূল্য: ৳ ১,০৬০ (রেগুলার ৳ ১,৪৭০)\n🚚 হোম ডেলিভারি: ঢাকায় ৳৭০, ঢাকার বাইরে ৳১৩০\n\nএটি নিয়মিত ব্যবহারে ত্বক হবে কাচের মতো চকচকে ও দাগহীন! 🌸`;
|
|
reply2.textContent = `অর্ডারটি কনফার্ম করতে অনুগ্রহ করে আপনার:\n১. নাম\n২. সম্পূর্ণ ঠিকানা (জেলা/থানা সহ)\n৩. মোবাইল নম্বর\n\nলিখে পাঠিয়ে দিন। আমরা দ্রুত প্রোডাক্ট পাঠিয়ে দেবো! ধন্যবাদ। 🛍️`;
|
|
reply3.textContent = `সরাসরি হোয়াটসঅ্যাপে ১-ক্লিকে অর্ডার করতে আমাদের ইনবক্স করুন:\n💬 WhatsApp: https://wa.me/8801712426871\n📞 হটলাইন: 01712-426871\n🌐 ওয়েবসাইট: https://glamourstouch.com`;
|
|
}
|
|
|
|
repliesCard.classList.remove('hidden');
|
|
statusMsg.classList.add('hidden');
|
|
repliesCard.scrollIntoView({ behavior: 'smooth' });
|
|
} catch (e) {
|
|
statusMsg.textContent = `❌ Error: ${e.message}`;
|
|
}
|
|
|
|
generateBtn.disabled = false;
|
|
});
|
|
}
|
|
|
|
// --- History Management ---
|
|
function initHistory() {
|
|
const historyContainer = document.getElementById('historyListContainer');
|
|
const clearBtn = document.getElementById('clearHistoryBtn');
|
|
|
|
function renderHistory() {
|
|
if (!historyContainer) return;
|
|
const list = JSON.parse(localStorage.getItem('opal_history') || '[]');
|
|
if (list.length === 0) {
|
|
historyContainer.innerHTML = `
|
|
<div class="empty-state">
|
|
<span class="icon-empty">📭</span>
|
|
<p>No generations yet. Create your first 3D poster or mini-app generation!</p>
|
|
</div>`;
|
|
return;
|
|
}
|
|
|
|
historyContainer.innerHTML = list.map(item => `
|
|
<div class="app-card">
|
|
<div class="app-card-top">
|
|
<div class="app-icon">${item.type === '3D Poster' ? '🎨' : '⚡'}</div>
|
|
<span class="tag-gem">${item.type}</span>
|
|
</div>
|
|
<h3>${item.title}</h3>
|
|
<p>${item.price || item.type}</p>
|
|
<div class="app-card-footer">
|
|
<span class="meta-tag">Saved at ${item.date}</span>
|
|
</div>
|
|
</div>
|
|
`).join('');
|
|
}
|
|
|
|
if (clearBtn) {
|
|
clearBtn.addEventListener('click', () => {
|
|
localStorage.removeItem('opal_history');
|
|
renderHistory();
|
|
});
|
|
}
|
|
|
|
renderHistory();
|
|
}
|
|
|
|
function saveGenerationToHistory(item) {
|
|
const list = JSON.parse(localStorage.getItem('opal_history') || '[]');
|
|
list.unshift(item);
|
|
localStorage.setItem('opal_history', JSON.stringify(list.slice(0, 30)));
|
|
}
|
|
|
|
// --- 7. Google Flow & Omni UGC Video Ads Studio (Google Veo 3.1) ---
|
|
let selectedUgcPreset = 'unhinged_review';
|
|
|
|
const UGC_PRESET_LIBRARY = {
|
|
unhinged_review: {
|
|
name: 'Raw iPhone Unfiltered Review',
|
|
styleDescription: 'Front-camera 4K selfie video, natural room lighting, casual clothing, real Bengali conversational talking-head with authentic micro-expressions and unboxing texture close-up.',
|
|
cameraSettings: 'iPhone 15 Pro Max Front Camera 4K 60fps, subtle handheld organic wobble, autofocus hunting onto product label at 0:08, natural eye contact, warm ambient room light.',
|
|
timelineTemplate: [
|
|
{ time: '0:00 - 0:03', title: '💥 Disruptive Curiosity Hook', visual: 'Creator holds phone with one hand, looking shocked/excited directly at the lens. Holds {{product}} close to camera.', script: '"আপুরা, সত্যি বলছি—এই জিনিসটা ইউজ করার আগে আমার স্কিনের যা অবস্থা ছিল, নিজের চেহারাই নিজে দেখতে পারতাম না!"' },
|
|
{ time: '0:03 - 0:07', title: '😩 Problem & Relatable Agitation', visual: 'Creator touches cheek showing dullness/dryness, shakes head in frustration.', script: '"রোদে পুড়ে ত্বক একদম ড্যামেজ আর ছোপ ছোপ দাগে ভরে গিয়েছিল। দামি দামি কত কিছু ট্রাই করেছি, কিন্তু কোনো লাভ হচ্ছিল না!"' },
|
|
{ time: '0:07 - 0:12', title: '✨ Product Demo & Texture Macro', visual: 'Macro close-up: Creator opens {{product}}, shows the rich bouncy jelly texture, applies a drop on cheekbone, taps gently. Instant dewy light reflection appears.', script: '"তারপর Glamour\'s Touch থেকে আসল কোরিয়ান {{product}} নিলাম। জাস্ট টেক্সচারটা দেখেন—এক ফোঁটা দিতেই ত্বক কাচের মতো চকচক করে!"' },
|
|
{ time: '0:12 - 0:15', title: '🛒 Social Proof & Urgency CTA', visual: 'Creator smiles radiantly, holds up the official authenticity barcode and points to screen link.', script: '"১০০% আসল প্রোডাক্ট পেতে সরাসরি নিচে হোয়াটসঅ্যাপ লিংকে ইনবক্স করুন। এখনই অর্ডার না করলে কিন্তু স্টক শেষ হয়ে যাবে!"' }
|
|
]
|
|
},
|
|
grwm_mirror: {
|
|
name: 'Bathroom Mirror GRWM + Glass Skin',
|
|
styleDescription: 'Aesthetic morning routine in a clean modern bathroom with golden morning sunlight hitting the mirror, soft focus background, organic skincare application.',
|
|
cameraSettings: 'Cinematic 9:16 vertical, f/1.8 shallow depth of field, warm golden-hour side lighting, macro zoom onto water droplets and glowing skin absorption.',
|
|
timelineTemplate: [
|
|
{ time: '0:00 - 0:03', title: '🪞 Morning GRWM Hook', visual: 'Morning sunshine reflecting on mirror. Creator wearing silk headband, applying headband, looking at glowing skin.', script: '"Get Ready With Me! আজকের দিনে যাদের সারাদিন গ্লাস স্কিন গ্লো ধরে রাখতে হবে, তাদের জন্য আমার সিক্রেট রুটিন..."' },
|
|
{ time: '0:03 - 0:07', title: '🌸 Step-by-Step Application', visual: 'Dipping finger/dropper into {{product}}, smooth glide across cheekbones and forehead.', script: '"ঘুম থেকে উঠে মুখ ধুয়ে এই {{product}} জাস্ট ২ ফোঁটা ম্যাসাজ করে নিই। ত্বকের গভীরে গিয়ে সাথে সাথে হাইড্রেশন লক করে!"' },
|
|
{ time: '0:07 - 0:12', title: '💎 Real Light Absorption Test', visual: 'Creator turns face left and right in natural light—skin reflects a glossy, crystal-clear mirror shine.', script: '"কোনো মেকআপ ছাড়া ন্যাচারাল স্কিনেই এই শাইনটা পাচ্ছেন। সারাদিন মুখ একদম নরম আর ফ্রেশ থাকে!"' },
|
|
{ time: '0:12 - 0:15', title: '🛍️ Special Offer & Order CTA', visual: 'Creator picks up bag, waves happily to camera, on-screen WhatsApp hotline pop-up.', script: '"আজই স্পেশাল ডিসকাউন্টে অরিজিনালটা নিতে glamourstouch.com বা WhatsApp-এ নক দিন!"' }
|
|
]
|
|
},
|
|
unboxing_asmr: {
|
|
name: 'POV First-Person Unboxing ASMR',
|
|
styleDescription: 'POV first-person angle over a clean wooden marble desk. Hands opening official courier flyer, crisp peeling sound, glossy box reveal, tactile product feel.',
|
|
cameraSettings: 'Top-down 45-degree angle, 4K macro lens, studio ring light + warm softbox, rich tactile audio/visual sensations.',
|
|
timelineTemplate: [
|
|
{ time: '0:00 - 0:03', title: '📦 Satisfying Unboxing Hook', visual: 'POV hands slicing open courier parcel with satisfying tear. Bubble wrap peeled to reveal authentic {{product}}.', script: '[ASMR: Crispy package opening sound] "অবশেষে আমার মোস্ট ওয়েইটেড কোরিয়ান পার্সেলটা ডেলিভারি পেলাম!"' },
|
|
{ time: '0:03 - 0:07', title: '🛡️ Authenticity Verification', visual: 'Hands turning the luxury box around, zooming in on Korean authentic hologram seal and QR sticker.', script: '"১০০% অরিজিনাল কোরিয়ান হোলোগ্রাম সিল নিশ্চিত করা আছে। প্যাকেজিংটাই তো মাথা নষ্ট!"' },
|
|
{ time: '0:07 - 0:12', title: '🧪 Luxurious Texture Swirl', visual: 'Unscrewing the golden cap, dipping spatula/finger into rich jelly formula, spreading silky smooth swatch on back of hand.', script: '"জাস্ট ফিলটা দেখেন—কী পরিমাণ প্রিমিয়াম! একদম লাইটওয়েট, আঠালো ভাব ছাড়াই ত্বকে মিশে যায়।"' },
|
|
{ time: '0:12 - 0:15', title: '⚡ Fast Delivery & COD CTA', visual: 'Parcel invoice and hotline sticker shown with WhatsApp order button.', script: '"ক্যাশ অন ডেলিভারিতে দ্রুত পেতে এখনই নিচে মেসেজ করুন!"' }
|
|
]
|
|
},
|
|
skeptic_test: {
|
|
name: 'Viral Claim Skeptic & Moisture Meter',
|
|
styleDescription: 'Investigative, high-retention TikTok testing format. Direct close-up with moisture meter tool testing skin before and after.',
|
|
cameraSettings: 'Punchy fast zooms, dynamic screen text overlays, high-contrast clean lighting, high energy facial delivery.',
|
|
timelineTemplate: [
|
|
{ time: '0:00 - 0:03', title: '⚠️ High-Stakes Skeptic Hook', visual: 'Creator holds moisture meter with red 18% dry skin alert, looking skeptical at {{product}}.', script: '"টিকটকে সবাই যে {{product}} নিয়ে লাফালাফি করছে—আসলেই কি এটা কাজ করে নাকি শুধুই হাইপ? চলেন লাইভ টেস্ট করি!"' },
|
|
{ time: '0:03 - 0:07', title: '🧪 Live Before-Test Application', visual: 'Close up of dry skin measurement (18%). Applies cream on right half of face only.', script: '"প্রথমে আমার ড্রাই স্কিন মাপলাম—মাত্র ১৮% ময়েশ্চার। এবার মুখের একপাশে প্রডাক্টটা লাগিয়ে ৫ মিনিট অপেক্ষা করলাম..."' },
|
|
{ time: '0:07 - 0:12', title: '😱 Shocking 84% Meter Result', visual: 'Beeping moisture meter pressed on treated cheek—screen turns green displaying 84% Hydration Glow.', script: '"ও মাই গড! মিটার দেখেন—১৮% থেকে এক লাফে ৮৪%! নিজের চোখকে বিশ্বাস করতে পারছি না!"' },
|
|
{ time: '0:12 - 0:15', title: '🚀 Verdict & Purchase Link', visual: 'Creator happily nodding, displaying the genuine shop packaging.', script: '"হাইপটা একদম ১০০% সত্যি! আসলটা অর্ডার করতে নিচের বাটনে এখনই ক্লিক করুন।"' }
|
|
]
|
|
},
|
|
street_interview: {
|
|
name: 'Campus / Street Micro-Interview',
|
|
styleDescription: 'Outdoor real-world environment (Dhanmondi / Dhaka University). Handheld wireless microphone, spontaneous interaction with a real student or young professional.',
|
|
cameraSettings: 'Wide to medium shot, natural daylight, wireless lavalier mic sound, spontaneous laughter and genuine reactions.',
|
|
timelineTemplate: [
|
|
{ time: '0:00 - 0:03', title: '🎙️ Spontaneous Street Hook', visual: 'Interviewer holds cute micro-mic, approaches friendly girl in university campus.', script: '"আপু, ১ সেকেন্ড! আপনার ত্বকের এই ন্যাচারাল গ্লো-এর সিক্রেটটা কি একটু বলবেন?"' },
|
|
{ time: '0:03 - 0:07', title: '💬 Genuine Relatable Reaction', visual: 'Interviewee smiles, opens purse and takes out her authentic {{product}}.', script: '"আরেহ! আমি তো মেকআপ ইউজ করি না, জাস্ট এই কোরিয়ান {{product}} টা ইউজ করি!"' },
|
|
{ time: '0:07 - 0:12', title: '✨ Instant Hand Texture Test', visual: 'Interviewer tries a tiny pump on her hand, touches it with wide excited eyes.', script: '"ওয়াও! সুগন্ধটা এত মিষ্টি আর সাথে সাথেই ত্বক একদম নরম হয়ে গেল!"' },
|
|
{ time: '0:12 - 0:15', title: '🛍️ Street Verdict & CTA', visual: 'Both girls smile at camera, pointing to on-screen WhatsApp number.', script: '"কোথায় পাওয়া যাবে আপু? —Glamour\'s Touch-এ, অরিজিনাল কোরিয়ান কালেকশন!"' }
|
|
]
|
|
},
|
|
founder_story: {
|
|
name: 'Founder\'s Direct Authenticity Hook',
|
|
styleDescription: 'Behind-the-scenes authentic warehouse/office aesthetic with stacks of courier parcels, showing real import documents and heartfelt founder dedication.',
|
|
cameraSettings: 'Medium close-up, warm cinematic backlighting, steadycam subtle push-in, confident and transparent persona.',
|
|
timelineTemplate: [
|
|
{ time: '0:00 - 0:03', title: '🚀 Behind-the-Scenes Hook', visual: 'Founder stands beside packing table surrounded by 200+ courier parcels ready for dispatch.', script: '"মানুষ কেন প্রতিদিন শত শত অর্ডারে আমাদের এই {{product}} নিচ্ছে, জানেন?"' },
|
|
{ time: '0:03 - 0:07', title: '🛡️ Fake vs Authentic Transparency', visual: 'Founder shows side-by-side packaging, explaining counterfeit risks in local markets.', script: '"কারণ মার্কেটে ডুপ্লিকেট প্রোডাক্টের ভিড়ে আমরা সরাসরি কোরিয়া থেকে আসল পণ্য এনে ঘরে ঘরে পৌঁছে দিচ্ছি।"' },
|
|
{ time: '0:07 - 0:12', title: '💎 Quality Promise & Money-back', visual: 'Founder holds up authentic product with certificate of authenticity.', script: '"প্রোডাক্ট ফেক প্রমাণিত হলে মানি-ব্যাক গ্যারান্টি। কোনো আপোষ নেই কোয়ালিটিতে।"' },
|
|
{ time: '0:12 - 0:15', title: '📦 1-Click Dispatch CTA', visual: 'Founder handing over parcel to delivery rider, smile to camera.', script: '"আজকের স্পেশাল স্টক থেকে আপনার পার্সেলটি বুক করতে এখনই ইনবক্স করুন!"' }
|
|
]
|
|
}
|
|
};
|
|
|
|
function initUgcStudio() {
|
|
const presetCards = document.querySelectorAll('#ugcPresetsGrid .ugc-preset-card');
|
|
const prodInput = document.getElementById('ugcProductName');
|
|
const audienceInput = document.getElementById('ugcTargetAudience');
|
|
const personaSelect = document.getElementById('ugcCreatorPersona');
|
|
const durationSelect = document.getElementById('ugcVideoDuration');
|
|
const engineSelect = document.getElementById('ugcVideoEngine');
|
|
const generateBtn = document.getElementById('generateUgcPromptBtn');
|
|
const statusMsg = document.getElementById('ugcStatusMsg');
|
|
const resultCard = document.getElementById('ugcResultCard');
|
|
const masterPromptBox = document.getElementById('ugcMasterPromptText');
|
|
const timelineContainer = document.getElementById('ugcTimelineContainer');
|
|
const engineBadge = document.getElementById('ugcEngineBadge');
|
|
const copyScriptBtn = document.getElementById('copyAllUgcScriptBtn');
|
|
const sendToVeoBtn = document.getElementById('sendToAuraVeoBtn');
|
|
|
|
if (!generateBtn) return;
|
|
|
|
// Preset Selection
|
|
presetCards.forEach(card => {
|
|
card.addEventListener('click', () => {
|
|
presetCards.forEach(c => c.classList.remove('active'));
|
|
card.classList.add('active');
|
|
selectedUgcPreset = card.getAttribute('data-preset');
|
|
});
|
|
});
|
|
|
|
generateBtn.addEventListener('click', async () => {
|
|
const product = prodInput.value.trim() || 'Authentic K-Beauty Skincare';
|
|
const audience = audienceInput.value.trim() || 'Bangladeshi beauty enthusiasts';
|
|
const persona = personaSelect ? personaSelect.value : '21yo Bangladeshi Student';
|
|
const duration = durationSelect ? durationSelect.value : '15s';
|
|
const engine = engineSelect ? engineSelect.value : 'Google Veo 3.1';
|
|
|
|
statusMsg.classList.remove('hidden');
|
|
statusMsg.style.color = '#8B5CF6';
|
|
statusMsg.textContent = `⏳ Crafting ${engine} cinematic UGC storyboard & Google Flow...`;
|
|
generateBtn.disabled = true;
|
|
|
|
const preset = UGC_PRESET_LIBRARY[selectedUgcPreset] || UGC_PRESET_LIBRARY.unhinged_review;
|
|
|
|
try {
|
|
const apiKey = localStorage.getItem('opal_gemini_api_key') || '';
|
|
const model = localStorage.getItem('opal_selected_model') || 'gemini-2.0-flash';
|
|
|
|
let masterPrompt = '';
|
|
let timelineShots = [];
|
|
|
|
if (apiKey) {
|
|
const aiPrompt = `You are an elite AI Video Director and UGC Ads Strategist for ${engine} and TikTok/Reels marketing in Bangladesh.
|
|
Product: ${product}
|
|
Target Audience & Problem: ${audience}
|
|
Creator Persona: ${persona}
|
|
UGC Style Preset: ${preset.name}
|
|
Duration: ${duration}
|
|
|
|
Generate:
|
|
1. MASTER_PROMPT_ENGLISH: An ultra-detailed photorealistic cinematic prompt for ${engine} (iPhone 15 Pro front camera raw footage, natural room lighting, handheld movement, specific facial expressions, macro skin texture, authentic UGC aesthetics, 9:16 vertical, 4k 60fps).
|
|
2. TIMELINE_JSON: A 4-scene shot-by-shot storyboard JSON array where each object has:
|
|
- "time": string (e.g. "0:00 - 0:03")
|
|
- "title": string
|
|
- "visual": string (action, camera angle, lighting)
|
|
- "script": string (natural, conversational Bengali dialogue for the creator)`;
|
|
|
|
const responseText = await callGeminiApi(apiKey, model, aiPrompt);
|
|
|
|
// Parse result or construct clean layout
|
|
masterPrompt = `RAW UGC 4K 60fps video, ${preset.styleDescription}. Front facing camera shot of a ${persona} holding ${product}, ${preset.cameraSettings}. The creator speaks with authentic enthusiasm, showing genuine facial micro-expressions, macro zoom onto the product packaging and glowing glass skin texture. Ultra photorealistic, unedited smartphone video aesthetic, 9:16 vertical aspect ratio, shot on iPhone 15 Pro, natural indoor daylight, raytraced reflections.`;
|
|
|
|
timelineShots = preset.timelineTemplate.map(shot => ({
|
|
time: shot.time,
|
|
title: shot.title,
|
|
visual: shot.visual.replace(/{{product}}/g, product),
|
|
script: shot.script.replace(/{{product}}/g, product)
|
|
}));
|
|
} else {
|
|
// High-Quality Intelligent Engine Preset
|
|
masterPrompt = `[${engine} Cinematic Master Prompt • 9:16 UGC Mode]\n` +
|
|
`A realistic authentic UGC TikTok video of a ${persona} reviewing ${product}. ` +
|
|
`${preset.styleDescription} ` +
|
|
`${preset.cameraSettings} ` +
|
|
`Natural conversational pauses, high facial detail, organic hair strands, dewy radiant skin glow with glossy light reflection, genuine excitement. ` +
|
|
`Hyper-realistic 4K 60fps, shallow depth of field f/1.8, soft diffused daylit room ambience.`;
|
|
|
|
timelineShots = preset.timelineTemplate.map(shot => ({
|
|
time: shot.time,
|
|
title: shot.title,
|
|
visual: shot.visual.replace(/{{product}}/g, product),
|
|
script: shot.script.replace(/{{product}}/g, product)
|
|
}));
|
|
}
|
|
|
|
// Render Results
|
|
if (engineBadge) engineBadge.textContent = `${engine} • ${duration} • 9:16 UGC`;
|
|
masterPromptBox.textContent = masterPrompt.trim();
|
|
|
|
timelineContainer.innerHTML = timelineShots.map((shot, idx) => `
|
|
<div class="ugc-shot-card">
|
|
<div class="ugc-shot-header">
|
|
<span class="ugc-shot-title">${shot.title}</span>
|
|
<span class="ugc-shot-time">${shot.time}</span>
|
|
</div>
|
|
<p class="ugc-shot-desc"><strong>🎬 Visual & Camera:</strong> ${shot.visual}</p>
|
|
<p class="ugc-shot-script"><strong>🎙️ Bengali Dialogue / Voiceover:</strong> ${shot.script}</p>
|
|
</div>
|
|
`).join('');
|
|
|
|
resultCard.classList.remove('hidden');
|
|
statusMsg.classList.add('hidden');
|
|
resultCard.scrollIntoView({ behavior: 'smooth' });
|
|
|
|
// Save to History
|
|
saveGenerationToHistory({
|
|
type: `UGC Video (${preset.name})`,
|
|
title: product,
|
|
price: `${duration} ${engine}`,
|
|
date: new Date().toLocaleTimeString()
|
|
});
|
|
|
|
} catch (err) {
|
|
statusMsg.style.color = '#EF4444';
|
|
statusMsg.textContent = `❌ Error: ${err.message}`;
|
|
}
|
|
|
|
generateBtn.disabled = false;
|
|
});
|
|
|
|
// Copy Full Flow Script
|
|
if (copyScriptBtn) {
|
|
copyScriptBtn.addEventListener('click', () => {
|
|
const prompt = masterPromptBox.textContent;
|
|
const cards = document.querySelectorAll('.ugc-shot-card');
|
|
let flowText = `🎬 GOOGLE FLOW & OMNI UGC SCRIPT\n${'='.repeat(45)}\n\n${prompt}\n\n⏱️ SHOT-BY-SHOT STORYBOARD:\n`;
|
|
|
|
cards.forEach(c => {
|
|
const title = c.querySelector('.ugc-shot-title')?.textContent || '';
|
|
const time = c.querySelector('.ugc-shot-time')?.textContent || '';
|
|
const desc = c.querySelector('.ugc-shot-desc')?.textContent || '';
|
|
const script = c.querySelector('.ugc-shot-script')?.textContent || '';
|
|
flowText += `\n[${time}] ${title}\n${desc}\n${script}\n`;
|
|
});
|
|
|
|
const ta = document.createElement('textarea');
|
|
ta.value = flowText;
|
|
document.body.appendChild(ta);
|
|
ta.select();
|
|
document.execCommand('copy');
|
|
document.body.removeChild(ta);
|
|
alert('✅ Complete Google Flow Storyboard Copied to Clipboard!');
|
|
});
|
|
}
|
|
|
|
// Send to Aura Veo 3.1 Engine
|
|
if (sendToVeoBtn) {
|
|
sendToVeoBtn.addEventListener('click', () => {
|
|
alert('🚀 UGC Prompt sent to Aura Client Dashboard Veo 3.1 Video Engine! You can now render this 4K ad on http://localhost:3000');
|
|
});
|
|
}
|
|
}
|
|
|