feat: supercharge Opal AI Studio v5 with Dynamic Mini-App Builder, 8 curated agentic tools, 4 3D stage themes, 9:16 reels canvas, and 1-click client dashboard embed hub
This commit is contained in:
+264
-104
@@ -3,14 +3,14 @@
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover">
|
||||
<title>Google Opal AI - iOS Studio & 3D Poster Lab</title>
|
||||
<title>Google Opal AI - iOS Studio & 3D Mini-App Engine</title>
|
||||
|
||||
<!-- iOS PWA Meta Tags -->
|
||||
<meta name="apple-mobile-web-app-capable" content="yes">
|
||||
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
|
||||
<meta name="apple-mobile-web-app-title" content="Opal AI">
|
||||
<link rel="manifest" href="manifest.json">
|
||||
<link rel="apple-touch-icon" href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><rect width='100' height='100' rx='20' fill='%236366F1'/><text x='50' y='65' font-size='50' text-anchor='middle' fill='white'>💎</text></svg>">
|
||||
<link rel="apple-touch-icon" href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><rect width='100' height='100' rx='20' fill='%238B5CF6'/><text x='50' y='65' font-size='50' text-anchor='middle' fill='white'>💎</text></svg>">
|
||||
|
||||
<!-- Google Fonts & QR Code Library -->
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||
@@ -18,20 +18,23 @@
|
||||
<link href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;600;700;800&family=Hind+Siliguri:wght@400;600;700&display=swap" rel="stylesheet">
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/qrcodejs/1.0.0/qrcode.min.js"></script>
|
||||
|
||||
<link rel="stylesheet" href="style.css">
|
||||
<link rel="stylesheet" href="style.css?v=5">
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<!-- Top App Header -->
|
||||
<header class="app-header">
|
||||
<div class="brand-group">
|
||||
<div class="brand-group" onclick="switchToTab('tabApps')">
|
||||
<div class="logo-box">💎</div>
|
||||
<div class="brand-titles">
|
||||
<h1>Opal AI <span>Studio</span></h1>
|
||||
<p>Google DeepMind • iOS Edition</p>
|
||||
<h1>Opal AI <span>Studio</span> <span class="brand-badge">PRO</span></h1>
|
||||
<p>Google DeepMind • Mini-App Engine</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="header-actions">
|
||||
<button class="pill-btn primary" onclick="switchToTab('tabBuilder')">
|
||||
<span>✨ + Mini-App</span>
|
||||
</button>
|
||||
<button id="langToggleBtn" class="pill-btn">🌐 বাং</button>
|
||||
</div>
|
||||
</header>
|
||||
@@ -39,33 +42,79 @@
|
||||
<!-- Main Scrollable App Container -->
|
||||
<main class="main-container">
|
||||
|
||||
<!-- TAB 1: 3D Poster Lab (Default / Hero Tool) -->
|
||||
<section id="tabPosterLab" class="tab-page active">
|
||||
<div class="card glass-card">
|
||||
<!-- TAB 1: 3D Poster Lab (Universal 3D Stage Engine) -->
|
||||
<section id="tabPosterLab" class="tab-page">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<span class="icon">🎨</span>
|
||||
<div>
|
||||
<h2>3D Commercial Poster Lab</h2>
|
||||
<p>আসল প্রডাক্টের ছবি, ৩ডি মার্বেল পোডিয়াম ও WhatsApp QR সহ বিজ্ঞাপন পোস্টার বানান</p>
|
||||
<p>আসল প্রডাক্টের ছবি, ৩ডি মার্বেল স্টেজ ও WhatsApp QR সহ বিজ্ঞাপন পোস্টার বানান</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 3D Stage Theme Selector -->
|
||||
<div class="form-group">
|
||||
<label>৩ডি স্টেজ থিম সিলেক্ট করুন (Stage Theme):</label>
|
||||
<div class="theme-selector-group" id="themeSelectorGroup">
|
||||
<div class="theme-chip active" data-theme="obsidian_gold">
|
||||
<span class="icon">👑</span>
|
||||
<span class="name">Obsidian & Gold</span>
|
||||
</div>
|
||||
<div class="theme-chip" data-theme="rose_quartz">
|
||||
<span class="icon">🌸</span>
|
||||
<span class="name">Rose Quartz Glass</span>
|
||||
</div>
|
||||
<div class="theme-chip" data-theme="cyber_neon">
|
||||
<span class="icon">💎</span>
|
||||
<span class="name">Cyberpunk Neon</span>
|
||||
</div>
|
||||
<div class="theme-chip" data-theme="botanical_eco">
|
||||
<span class="icon">🌿</span>
|
||||
<span class="name">Botanical Eco</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Aspect Ratio Switcher -->
|
||||
<div class="form-group">
|
||||
<label>পোস্টার সাইজ ও রেশিও (Aspect Ratio):</label>
|
||||
<div class="form-row">
|
||||
<select id="aspectRatioSelect">
|
||||
<option value="1:1" selected>Square (1:1 • 1080x1080) — Facebook/Instagram Feed</option>
|
||||
<option value="9:16">Portrait (9:16 • 1080x1920) — Stories & Reels</option>
|
||||
</select>
|
||||
<select id="brandWatermarkSelect">
|
||||
<option value="glamourstouch" selected>Brand: Glamour's Touch</option>
|
||||
<option value="snehalata">Brand: Snehalata</option>
|
||||
<option value="aura">Brand: Aura Enterprise</option>
|
||||
<option value="custom">Custom Merchant</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="productInput">প্রডাক্ট লিংক বা নাম (Product Link or Name):</label>
|
||||
<input type="text" id="productInput" placeholder="e.g. https://www.glamourstouch.com/product/..." value="https://www.glamourstouch.com/product/8a8ca4d8-1e7f-497c-904c-a18352cafdde">
|
||||
<input type="text" id="productInput" placeholder="e.g. https://www.glamourstouch.com/product/... অথবা প্রডাক্টের নাম" value="Medicube Collagen Jelly Cream">
|
||||
</div>
|
||||
|
||||
<div class="form-row">
|
||||
<div class="form-group">
|
||||
<label for="productPrice">মূল্য ও অফার (Price & Discount):</label>
|
||||
<input type="text" id="productPrice" placeholder="e.g. ৳ ১,০৬০ (৳ ১,৪৭০) 28% OFF" value="৳ ১,০৬০ (৳ ১,৪৭০) 28% OFF">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="customBadgeInput">কাস্টম ব্যাজ টেক্সট (Trust Badge):</label>
|
||||
<input type="text" id="customBadgeInput" placeholder="e.g. 🇰🇷 100% Original Korea" value="🇰🇷 100% Original Korea">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="form-row">
|
||||
<label class="file-upload-btn" for="photoFileInput">
|
||||
📸 <span>iPhone গ্যালারি থেকে ছবি সিলেক্ট করুন</span>
|
||||
📸 <span>iPhone / পিসি গ্যালারি থেকে ছবি আপলোড</span>
|
||||
<input type="file" id="photoFileInput" accept="image/*">
|
||||
</label>
|
||||
<button id="clearPhotoBtn" class="icon-btn danger-btn hidden" title="Clear Photo">✖</button>
|
||||
<button id="clearPhotoBtn" class="pill-btn danger-text hidden">✖ ছবি মুছুন</button>
|
||||
</div>
|
||||
<div id="photoPreviewContainer" class="photo-preview-box hidden">
|
||||
<img id="attachedPhotoImg" src="" alt="Attached Photo">
|
||||
@@ -73,19 +122,19 @@
|
||||
</div>
|
||||
|
||||
<button id="generatePosterBtn" class="btn-primary">
|
||||
<span class="btn-icon">🚀</span> Generate 3D Facebook Ad Poster (1080x1080)
|
||||
<span class="btn-icon">🚀</span> Generate 3D Commercial Poster (Canvas GPU)
|
||||
</button>
|
||||
<p id="posterStatusText" class="status-msg hidden"></p>
|
||||
</div>
|
||||
|
||||
<!-- Poster Canvas & Export Section -->
|
||||
<div id="posterResultCard" class="card glass-card result-card hidden">
|
||||
<div id="posterResultCard" class="card result-card hidden">
|
||||
<div class="result-header">
|
||||
<h3>✨ 100% Commercial Ad Poster (1080x1080)</h3>
|
||||
<span class="gold-badge">3D Marble & Gold</span>
|
||||
<h3 id="posterResultTitle">✨ Commercial Ad Poster Generated</h3>
|
||||
<span class="gold-badge" id="posterThemeBadge">3D Obsidian & Gold</span>
|
||||
</div>
|
||||
|
||||
<div class="canvas-wrapper">
|
||||
<div id="canvasContainer" class="canvas-wrapper">
|
||||
<canvas id="posterCanvas" width="1080" height="1080"></canvas>
|
||||
</div>
|
||||
|
||||
@@ -97,83 +146,136 @@
|
||||
💬 WhatsApp Order
|
||||
</button>
|
||||
</div>
|
||||
<button id="autoPostN8nBtn" class="btn-primary" style="margin-top: 10px; background: linear-gradient(135deg, #1877F2, #0A58CA);">
|
||||
|
||||
<button id="autoPostN8nBtn" class="btn-primary" style="margin-top: 12px; background: linear-gradient(135deg, #1877F2, #0A58CA);">
|
||||
<span class="btn-icon">🚀</span> 1-Click Auto Post to Facebook Page (via n8n)
|
||||
</button>
|
||||
<p id="n8nPostStatusMsg" class="status-msg hidden"></p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- TAB 2: Apps & Workflow Grid -->
|
||||
<section id="tabApps" class="tab-page">
|
||||
<!-- TAB 2: Curated & Dynamic Opal Mini-Apps Hub (DEFAULT HOME) -->
|
||||
<section id="tabApps" class="tab-page active">
|
||||
<div class="section-title-row">
|
||||
<h2>✨ Curated Opal Mini-Apps</h2>
|
||||
<span class="badge-count">6 Apps</span>
|
||||
<div>
|
||||
<h2>✨ Opal Mini-Apps Hub</h2>
|
||||
<p style="font-size: 11.5px; color: var(--text-secondary); margin-top: 2px;">
|
||||
ক্লায়েন্ট ড্যাশবোর্ডে ব্যবহারের জন্য কাস্টম এআই মিনি-অ্যাপ তৈরি ও এম্বেড করুন
|
||||
</p>
|
||||
</div>
|
||||
<button class="pill-btn primary" onclick="switchToTab('tabBuilder')">
|
||||
+ Create App
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="apps-grid">
|
||||
<!-- App 1: Glamour's Touch Studio -->
|
||||
<div class="app-card" onclick="openAppRunner('gt_studio')">
|
||||
<div class="app-icon">✨</div>
|
||||
<div class="app-info">
|
||||
<div class="app-title-row">
|
||||
<h3>Glamour's Touch 4K K-Beauty Studio</h3>
|
||||
<span class="tag-gem">GEM</span>
|
||||
</div>
|
||||
<p>glamourstouch.com এর ১০০% অরিজিনাল কোরিয়ান স্কিনকেয়ারের কমার্শিয়াল ছবি ও পোস্ট বানায়।</p>
|
||||
<span class="meta-tag">7 Steps • Business</span>
|
||||
</div>
|
||||
<!-- Category Filter Bar -->
|
||||
<div class="category-filter-bar">
|
||||
<button class="filter-chip active" data-cat="all">🔥 All Mini-Apps</button>
|
||||
<button class="filter-chip" data-cat="ecommerce">🛍️ E-Commerce</button>
|
||||
<button class="filter-chip" data-cat="social">📱 Social & Video</button>
|
||||
<button class="filter-chip" data-cat="sales">💬 Sales & Care</button>
|
||||
<button class="filter-chip" data-cat="tools">⚙️ AI Utilities</button>
|
||||
<button class="filter-chip" data-cat="custom">💎 My Custom Apps</button>
|
||||
</div>
|
||||
|
||||
<!-- App 2: Customer Care & Inbox AI -->
|
||||
<div class="app-card" onclick="openAppRunner('inbox_ai')">
|
||||
<div class="app-icon">💬</div>
|
||||
<div class="app-info">
|
||||
<div class="app-title-row">
|
||||
<h3>Customer Care & Inbox Auto-Reply</h3>
|
||||
<span class="tag-gem">AI</span>
|
||||
</div>
|
||||
<p>ফেসবুক মেসেঞ্জার ও হোয়াটসঅ্যাপে কাস্টমারের প্রশ্নের ৩টি ইনস্ট্যান্ট বিনম্র সেলস রিপ্লাই তৈরি করে।</p>
|
||||
<span class="meta-tag">3 Steps • Sales</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- App 3: E-Commerce Product Studio -->
|
||||
<div class="app-card" onclick="openAppRunner('ecommerce')">
|
||||
<div class="app-icon">🛍️</div>
|
||||
<div class="app-info">
|
||||
<h3>E-Commerce Product Launch Kit</h3>
|
||||
<p>যেকোনো পণ্যের 4K কমার্শিয়াল ছবি ও ফেসবুক লঞ্চ কপি তৈরি করে।</p>
|
||||
<span class="meta-tag">5 Steps • Business</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- App 4: Viral Social Post Maker -->
|
||||
<div class="app-card" onclick="openAppRunner('viral_post')">
|
||||
<div class="app-icon">🔥</div>
|
||||
<div class="app-info">
|
||||
<h3>Viral Social Post & Reels Script</h3>
|
||||
<p>ফেসবুক, টিকটক ও ইনস্টাগ্রামের ভাইরাল হুক ও ভিডিও স্ক্রিপ্ট তৈরি করে।</p>
|
||||
<span class="meta-tag">4 Steps • Marketing</span>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Grid of Pre-built & Custom Mini-Apps -->
|
||||
<div id="appsGridContainer" class="apps-grid">
|
||||
<!-- Dynamically rendered by app.js -->
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- TAB 3: Customer Care & Inbox AI Dedicated Studio -->
|
||||
<!-- TAB 3: Visual Mini-App Builder (Create New Custom App) -->
|
||||
<section id="tabBuilder" class="tab-page">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<span class="icon">🛠️</span>
|
||||
<div>
|
||||
<h2>Visual Mini-App Builder</h2>
|
||||
<p>আপনার ক্লায়েন্ট ড্যাশবোর্ডের জন্য কয়েক ক্লিকে কাস্টম এআই মিনি-অ্যাপ তৈরি করুন</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="form-row">
|
||||
<div class="form-group">
|
||||
<label for="builderAppName">অ্যাপের নাম (Mini-App Name):</label>
|
||||
<input type="text" id="builderAppName" placeholder="e.g. VIP Customer Offer Generator">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="builderAppEmoji">আইকন/ইমোজি (App Icon):</label>
|
||||
<input type="text" id="builderAppEmoji" placeholder="e.g. 🎁" value="🎁">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="form-row">
|
||||
<div class="form-group">
|
||||
<label for="builderCategory">ক্যাটাগরি (Category):</label>
|
||||
<select id="builderCategory">
|
||||
<option value="ecommerce">🛍️ E-Commerce & Retail</option>
|
||||
<option value="social">📱 Social Media & Marketing</option>
|
||||
<option value="sales">💬 Sales & Customer Care</option>
|
||||
<option value="tools">⚙️ AI Utility & Automation</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="builderModel">ডিফল্ট এআই মডেল (AI Model):</label>
|
||||
<select id="builderModel">
|
||||
<option value="gemini-2.0-flash">Google Gemini 2.0 Flash (Recommended)</option>
|
||||
<option value="gemini-1.5-flash">Google Gemini 1.5 Flash</option>
|
||||
<option value="gemma-2-27b-it">Google Gemma 2 (27B Open Weights)</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="builderDesc">সংক্ষিপ্ত বিবরণ (Short Description):</label>
|
||||
<input type="text" id="builderDesc" placeholder="e.g. বিশেষ কাস্টমারদের জন্য আকর্ষণীয় অফার মেসেজ তৈরি করে।">
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label>ইনপুট ফিল্ডস (Input Fields for User):</label>
|
||||
<div class="form-row">
|
||||
<input type="text" id="builderField1" placeholder="Field 1 Label (e.g. Customer Name / Product)" value="কাস্টমারের নাম বা প্রডাক্ট">
|
||||
<input type="text" id="builderField2" placeholder="Field 2 Label (e.g. Offer / Discount / Context)" value="অফার বা ডিসকাউন্টের পরিমাণ">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="builderPromptTemplate">এআই প্রম্পট টেমপ্লেট (Prompt Template with Variables):</label>
|
||||
<textarea id="builderPromptTemplate" rows="4" placeholder="You are an expert AI copywriter. Generate a high converting message based on {{field1}} and {{field2}} in natural Bangla.">You are a professional Bangladeshi e-commerce sales assistant.
|
||||
Create 3 high-converting, sweet and polite customer messages in Bengali for:
|
||||
- Item/Subject: {{field1}}
|
||||
- Offer/Context: {{field2}}
|
||||
|
||||
Format with clear bullet points, emojis, and a call-to-action.</textarea>
|
||||
<small class="hint-text">💡 টেমপ্লেটের মধ্যে <code>{{field1}}</code> এবং <code>{{field2}}</code> স্বয়ংক্রিয়ভাবে ইউজারের ইনপুট দিয়ে প্রতিস্থাপিত হবে।</small>
|
||||
</div>
|
||||
|
||||
<div class="form-row">
|
||||
<button id="saveMiniAppBtn" class="btn-primary">
|
||||
💾 Save Mini-App & Add to Hub
|
||||
</button>
|
||||
<button id="testMiniAppBtn" class="pill-btn" style="height: 100%; justify-content: center;">
|
||||
🧪 Test Run App
|
||||
</button>
|
||||
</div>
|
||||
<p id="builderStatusMsg" class="status-msg hidden"></p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- TAB 4: Dedicated Customer Care & Inbox AI Studio -->
|
||||
<section id="tabInboxAI" class="tab-page">
|
||||
<div class="card glass-card">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<span class="icon">💬</span>
|
||||
<div>
|
||||
<h2>Glamour's Touch Customer Care & Inbox AI</h2>
|
||||
<p>কাস্টমারের মেসেজ দিলে ১-ক্লিকে ৩টি পারফেক্ট ও বিনম্র উত্তর তৈরি করে</p>
|
||||
<h2>Omnichannel Customer Care & Sales Closer AI</h2>
|
||||
<p>কাস্টমারের মেসেজ দিলে ১-ক্লিকে ৩টি মিষ্টি ও হাই-কনভার্টিং উত্তর তৈরি করে</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="inboxCustomerMsg">কাস্টমার ইনবক্সে কী লিখেছে? (Customer Query):</label>
|
||||
<textarea id="inboxCustomerMsg" rows="3" placeholder="e.g. আপনাদের কাছে কি গ্লাস স্কিন সিরাম আছে? দাম কত আর হোম ডেলিভারি হবে?">আপনাদের কাছে কি কোরিয়ান গ্লাস স্কিন সিরাম আছে? দাম কত আর হোম ডেলিভারি হবে?</textarea>
|
||||
<textarea id="inboxCustomerMsg" rows="3" placeholder="e.g. আপনাদের কাছে কি গ্লাস স্কিন সিরাম আছে? দাম কত আর ডেলিভারি চার্জ কত?">আপনাদের কাছে কি কোরিয়ান গ্লাস স্কিন সিরাম আছে? দাম কত আর হোম ডেলিভারি হবে?</textarea>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
@@ -182,16 +284,16 @@
|
||||
</div>
|
||||
|
||||
<button id="generateInboxReplyBtn" class="btn-primary">
|
||||
<span class="btn-icon">⚡</span> Generate 3 Ready-to-Send Replies with Gemma AI
|
||||
<span class="btn-icon">⚡</span> Generate 3 Ready-to-Send Replies with Gemini AI
|
||||
</button>
|
||||
<p id="inboxStatusMsg" class="status-msg hidden"></p>
|
||||
</div>
|
||||
|
||||
<!-- Generated Replies Container -->
|
||||
<div id="inboxRepliesCard" class="card glass-card hidden">
|
||||
<div id="inboxRepliesCard" class="card hidden">
|
||||
<div class="reply-block">
|
||||
<div class="reply-header">
|
||||
<h4>⚡ ১. দ্রুত ও মিষ্টি উত্তর (Instant Polite Reply)</h4>
|
||||
<h4>⚡ ১. দ্রুত ও মিষ্টি উত্তর (Instant Polite Greeting & Price)</h4>
|
||||
<button class="copy-chip-btn" onclick="copyText('replyText1')">📋 Copy</button>
|
||||
</div>
|
||||
<p id="replyText1" class="reply-content"></p>
|
||||
@@ -199,7 +301,7 @@
|
||||
|
||||
<div class="reply-block">
|
||||
<div class="reply-header">
|
||||
<h4>🛍️ ২. সেলস অর্ডার কনফার্মেশন (Order Booking Closer)</h4>
|
||||
<h4>🛍️ ২. সেলস অর্ডার কনফার্মেশন (Direct Order Closer)</h4>
|
||||
<button class="copy-chip-btn" onclick="copyText('replyText2')">📋 Copy</button>
|
||||
</div>
|
||||
<p id="replyText2" class="reply-content"></p>
|
||||
@@ -207,7 +309,7 @@
|
||||
|
||||
<div class="reply-block">
|
||||
<div class="reply-header">
|
||||
<h4>💬 ৩. ১-ক্লিক WhatsApp লিঙ্ক (Direct Order Link)</h4>
|
||||
<h4>💬 ৩. ১-ক্লিক WhatsApp লিঙ্ক (Instant WhatsApp Closer)</h4>
|
||||
<button class="copy-chip-btn" onclick="copyText('replyText3')">📋 Copy</button>
|
||||
</div>
|
||||
<p id="replyText3" class="reply-content"></p>
|
||||
@@ -215,44 +317,43 @@
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- TAB 4: History -->
|
||||
<!-- TAB 5: Saved History -->
|
||||
<section id="tabHistory" class="tab-page">
|
||||
<div class="section-title-row">
|
||||
<h2>📜 Saved History</h2>
|
||||
<h2>📜 Saved Generation History</h2>
|
||||
<button id="clearHistoryBtn" class="pill-btn danger-text">Clear All</button>
|
||||
</div>
|
||||
<div id="historyListContainer" class="history-list">
|
||||
<div class="empty-state">
|
||||
<span class="icon-empty">📭</span>
|
||||
<p>No generations yet. Create your first 3D poster or copy!</p>
|
||||
<p>No generations yet. Create your first 3D poster or mini-app generation!</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- TAB 5: Settings & Free Gemma/Gemini Model Selection -->
|
||||
<!-- TAB 6: Settings & Gemini Configuration -->
|
||||
<section id="tabSettings" class="tab-page">
|
||||
<div class="card glass-card">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<span class="icon">⚙️</span>
|
||||
<div>
|
||||
<h2>Settings & Free AI Engine</h2>
|
||||
<p>গুগল জেমিনি ও গ্যামা ওপেন মডেল সেটআপ</p>
|
||||
<h2>Settings & Google AI Configuration</h2>
|
||||
<p>গুগল জেমিনি ২.০ ও গ্যামা ওপেন মডেল সেটআপ</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="apiKeyInput">Google Gemini API Key (100% Free):</label>
|
||||
<label for="apiKeyInput">Google Gemini API Key (100% Free from AI Studio):</label>
|
||||
<input type="password" id="apiKeyInput" placeholder="Paste your AI Studio API key (AIzaSy...)">
|
||||
<small class="hint-text">API Key is saved securely in your iPhone's local storage.</small>
|
||||
<small class="hint-text">API Key is saved securely in your browser/device local storage.</small>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="modelSelect">Default AI Model (এআই মডেল):</label>
|
||||
<select id="modelSelect">
|
||||
<option value="gemini-3.6-flash">Google Gemini 3.6 Flash (Recommended, Fast & Multimodal)</option>
|
||||
<option value="gemma-4-31b-it">Google Gemma 4 (গ্যামা 31B ওপেন-ওয়েট AI)</option>
|
||||
<option value="gemma-2-27b-it">Google Gemma 2 (গ্যামা 27B লাইভ ইঞ্জিন)</option>
|
||||
<option value="gemini-3.5-flash">Google Gemini 3.5 Flash (Ultra Stable)</option>
|
||||
<option value="gemini-2.0-flash">Google Gemini 2.0 Flash (Recommended, Ultra Fast)</option>
|
||||
<option value="gemini-1.5-flash">Google Gemini 1.5 Flash (Stable)</option>
|
||||
<option value="gemma-2-27b-it">Google Gemma 2 (27B Open-Weights)</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
@@ -268,9 +369,11 @@
|
||||
<p id="settingsStatusMsg" class="status-msg hidden"></p>
|
||||
</div>
|
||||
|
||||
<div class="card glass-card info-card">
|
||||
<div class="card info-card" style="margin-top: 14px;">
|
||||
<h3>💎 About Google Opal AI (iOS Edition)</h3>
|
||||
<p>This web studio is engineered specifically for **iPhone (iOS Safari / PWA)** with 0ms latency, native 2D canvas GPU rendering, and official Google Gemma & Gemini AI integration.</p>
|
||||
<p style="font-size: 12px; color: var(--text-secondary); margin-top: 6px; line-height: 1.6;">
|
||||
This web studio is engineered specifically for <strong>iPhone (iOS Safari / PWA)</strong> and client dashboards with 0ms latency, native 2D canvas GPU rendering, and official Google Gemini 2.0 AI integration.
|
||||
</p>
|
||||
<div class="safari-hint">
|
||||
<strong>📲 iPhone টিপস:</strong> Safari-এর নিচে থাকা <strong>Share (📤)</strong> বাটনে ট্যাপ করে <strong>"Add to Home Screen"</strong> চাপুন। তাহলে এটি আপনার আইফোনে একদম আসল অ্যাপের মতো ফুল-স্ক্রিনে চলবে!
|
||||
</div>
|
||||
@@ -281,32 +384,89 @@
|
||||
|
||||
<!-- Bottom Navigation Bar (iOS 18 Style) -->
|
||||
<nav class="bottom-nav">
|
||||
<button class="nav-item active" data-tab="tabPosterLab">
|
||||
<span class="nav-icon">🎨</span>
|
||||
<span class="nav-label">পোস্টার ল্যাব</span>
|
||||
</button>
|
||||
<button class="nav-item" data-tab="tabApps">
|
||||
<button class="nav-item active" data-tab="tabApps">
|
||||
<span class="nav-icon">🏠</span>
|
||||
<span class="nav-label">অ্যাপস</span>
|
||||
<span class="nav-label">অ্যাপস হাব</span>
|
||||
</button>
|
||||
<button class="nav-item" data-tab="tabPosterLab">
|
||||
<span class="nav-icon">🎨</span>
|
||||
<span class="nav-label">৩ডি পোস্টার</span>
|
||||
</button>
|
||||
<button class="nav-item" data-tab="tabBuilder">
|
||||
<span class="nav-icon">🛠️</span>
|
||||
<span class="nav-label">অ্যাপ মেকার</span>
|
||||
</button>
|
||||
<button class="nav-item" data-tab="tabInboxAI">
|
||||
<span class="nav-icon">💬</span>
|
||||
<span class="nav-label">ইনবক্স এআই</span>
|
||||
</button>
|
||||
<button class="nav-item" data-tab="tabHistory">
|
||||
<span class="nav-icon">📜</span>
|
||||
<span class="nav-label">হিস্ট্রি</span>
|
||||
</button>
|
||||
<button class="nav-item" data-tab="tabSettings">
|
||||
<span class="nav-icon">⚙️</span>
|
||||
<span class="nav-label">সেটিংস/গ্যামা</span>
|
||||
<span class="nav-label">সেটিংস</span>
|
||||
</button>
|
||||
</nav>
|
||||
|
||||
<!-- MODAL 1: Interactive Mini-App Runner / Playground -->
|
||||
<div id="appRunnerModal" class="modal-backdrop hidden">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<h3 id="runnerModalTitle">🚀 Mini-App Runner</h3>
|
||||
<button class="btn-close-modal" onclick="closeAppRunner()">✖</button>
|
||||
</div>
|
||||
<p id="runnerModalDesc" style="font-size: 12px; color: var(--text-secondary); margin-bottom: 16px;"></p>
|
||||
|
||||
<div id="runnerDynamicForm">
|
||||
<!-- Injected dynamically based on app definition -->
|
||||
</div>
|
||||
|
||||
<button id="runnerExecuteBtn" class="btn-primary" style="margin-top: 14px;">
|
||||
⚡ Generate with AI
|
||||
</button>
|
||||
<p id="runnerStatusMsg" class="status-msg hidden"></p>
|
||||
|
||||
<div id="runnerResultBox" class="reply-block hidden" style="margin-top: 16px;">
|
||||
<div class="reply-header">
|
||||
<h4>✨ Generated Output</h4>
|
||||
<button class="copy-chip-btn" onclick="copyText('runnerResultContent')">📋 Copy</button>
|
||||
</div>
|
||||
<p id="runnerResultContent" class="reply-content"></p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- MODAL 2: 1-Click Client Dashboard Embed Code Modal -->
|
||||
<div id="embedModal" class="modal-backdrop hidden">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<h3 id="embedModalTitle">📦 Embed in Client Dashboard</h3>
|
||||
<button class="btn-close-modal" onclick="closeEmbedModal()">✖</button>
|
||||
</div>
|
||||
<p style="font-size: 12px; color: var(--text-secondary); margin-bottom: 14px;">
|
||||
আপনার ক্লায়েন্ট ড্যাশবোর্ডে (যেমন <code>aura client dashboard</code>) এই মিনি-অ্যাপটি ১-ক্লিকে যুক্ত করতে নিচের কোডটি কপি করুন:
|
||||
</p>
|
||||
|
||||
<label style="font-size: 11px; font-weight: 700; color: #CBD5E1; margin-bottom: 4px; display: block;">
|
||||
HTML / Iframe Embed Snippet:
|
||||
</label>
|
||||
<div class="code-snippet-box" id="embedIframeCode"></div>
|
||||
<button class="pill-btn primary" onclick="copyText('embedIframeCode')" style="width: 100%; justify-content: center; margin-bottom: 14px;">
|
||||
📋 Copy Iframe Code
|
||||
</button>
|
||||
|
||||
<label style="font-size: 11px; font-weight: 700; color: #CBD5E1; margin-bottom: 4px; display: block;">
|
||||
Direct Webhook / API URL:
|
||||
</label>
|
||||
<div class="code-snippet-box" id="embedApiUrl"></div>
|
||||
<button class="pill-btn" onclick="copyText('embedApiUrl')" style="width: 100%; justify-content: center;">
|
||||
📋 Copy Direct API URL
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Hidden container for generating QR code SVG/Canvas -->
|
||||
<div id="qrcodeHidden" style="display:none;"></div>
|
||||
|
||||
<script src="app.js?v=4"></script>
|
||||
<script src="app.js?v=5"></script>
|
||||
<script>
|
||||
if ('serviceWorker' in navigator) {
|
||||
window.addEventListener('load', () => {
|
||||
|
||||
Reference in New Issue
Block a user