khondokar/opal-ios-studio
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Initial release of Google Opal AI iOS Web Studio

Browse Source
This commit is contained in:
Amirul Islam Redwan71
2026-09-01 09:01:09 +06:00
commit b85c5cf065
10 changed files with 1839 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
index.html
+318
View File
@@ -0,0 +1,318 @@
<!DOCTYPE html>
<html lang="bn">
<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>
<!-- 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>">
<!-- Google Fonts & QR Code Library -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<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">
</head>
<body>
<!-- Top App Header -->
<header class="app-header">
<div class="brand-group">
<div class="logo-box">💎</div>
<div class="brand-titles">
<h1>Opal AI <span>Studio</span></h1>
<p>Google DeepMind • iOS Edition</p>
</div>
</div>
<div class="header-actions">
<button id="langToggleBtn" class="pill-btn">🌐 বাং</button>
</div>
</header>
<!-- 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">
<div class="card-header">
<span class="icon">🎨</span>
<div>
<h2>3D Commercial Poster Lab</h2>
<p>আসল প্রডাক্টের ছবি, ৩ডি মার্বেল পোডিয়াম ও WhatsApp QR সহ বিজ্ঞাপন পোস্টার বানান</p>
</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">
</div>
<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-row">
<label class="file-upload-btn" for="photoFileInput">
📸 <span>iPhone গ্যালারি থেকে ছবি সিলেক্ট করুন</span>
<input type="file" id="photoFileInput" accept="image/*">
</label>
<button id="clearPhotoBtn" class="icon-btn danger-btn hidden" title="Clear Photo">✖</button>
</div>
<div id="photoPreviewContainer" class="photo-preview-box hidden">
<img id="attachedPhotoImg" src="" alt="Attached Photo">
<span class="badge-attached">✅ Photo Attached</span>
</div>
<button id="generatePosterBtn" class="btn-primary">
<span class="btn-icon">🚀</span> Generate 3D Facebook Ad Poster (1080x1080)
</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 class="result-header">
<h3>✨ 100% Commercial Ad Poster (1080x1080)</h3>
<span class="gold-badge">3D Marble & Gold</span>
</div>
<div class="canvas-wrapper">
<canvas id="posterCanvas" width="1080" height="1080"></canvas>
</div>
<div class="action-buttons-row">
<button id="downloadPosterBtn" class="btn-action success-btn">
💾 Save to Photos
</button>
<button id="shareWhatsAppBtn" class="btn-action whatsapp-btn">
💬 WhatsApp Order
</button>
</div>
<button id="autoPostN8nBtn" class="btn-primary" style="margin-top: 10px; 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">
<div class="section-title-row">
<h2>✨ Curated Opal Mini-Apps</h2>
<span class="badge-count">6 Apps</span>
</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>
</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>
</div>
</section>
<!-- TAB 3: Customer Care & Inbox AI Dedicated Studio -->
<section id="tabInboxAI" class="tab-page">
<div class="card glass-card">
<div class="card-header">
<span class="icon">💬</span>
<div>
<h2>Glamour's Touch Customer Care & Inbox 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>
</div>
<div class="form-group">
<label for="inboxStoreContext">দোকানের পলিসি ও হটলাইন (Store Info):</label>
<input type="text" id="inboxStoreContext" value="Store: Glamour's Touch (glamourstouch.com), Hotline: 01712-426871, 100% Authentic Korean Skincare, Delivery: Dhaka ৳70, Outside Dhaka ৳130, Free delivery on ৳2000+">
</div>
<button id="generateInboxReplyBtn" class="btn-primary">
<span class="btn-icon">⚡</span> Generate 3 Ready-to-Send Replies with Gemma AI
</button>
<p id="inboxStatusMsg" class="status-msg hidden"></p>
</div>
<!-- Generated Replies Container -->
<div id="inboxRepliesCard" class="card glass-card hidden">
<div class="reply-block">
<div class="reply-header">
<h4>⚡ ১. দ্রুত ও মিষ্টি উত্তর (Instant Polite Reply)</h4>
<button class="copy-chip-btn" onclick="copyText('replyText1')">📋 Copy</button>
</div>
<p id="replyText1" class="reply-content"></p>
</div>
<div class="reply-block">
<div class="reply-header">
<h4>🛍️ ২. সেলস অর্ডার কনফার্মেশন (Order Booking Closer)</h4>
<button class="copy-chip-btn" onclick="copyText('replyText2')">📋 Copy</button>
</div>
<p id="replyText2" class="reply-content"></p>
</div>
<div class="reply-block">
<div class="reply-header">
<h4>💬 ৩. ১-ক্লিক WhatsApp লিঙ্ক (Direct Order Link)</h4>
<button class="copy-chip-btn" onclick="copyText('replyText3')">📋 Copy</button>
</div>
<p id="replyText3" class="reply-content"></p>
</div>
</div>
</section>
<!-- TAB 4: History -->
<section id="tabHistory" class="tab-page">
<div class="section-title-row">
<h2>📜 Saved 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>
</div>
</div>
</section>
<!-- TAB 5: Settings & Free Gemma/Gemini Model Selection -->
<section id="tabSettings" class="tab-page">
<div class="card glass-card">
<div class="card-header">
<span class="icon">⚙️</span>
<div>
<h2>Settings & Free AI Engine</h2>
<p>গুগল জেমিনি ও গ্যামা ওপেন মডেল সেটআপ</p>
</div>
</div>
<div class="form-group">
<label for="apiKeyInput">Google Gemini API Key (100% Free):</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>
</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>
</select>
</div>
<div class="form-group">
<label for="n8nWebhookInput">n8n Auto-Post Webhook URL (Aura Ajentic AI):</label>
<input type="text" id="n8nWebhookInput" placeholder="https://n8n.auraajenticai.cloud/webhook/gt-auto-post" value="https://n8n.auraajenticai.cloud/webhook/gt-auto-post">
<small class="hint-text">Pre-configured with your n8n cloud instance at n8n.auraajenticai.cloud</small>
</div>
<button id="saveApiKeyBtn" class="btn-primary">
💾 Save Settings & Test Connection
</button>
<p id="settingsStatusMsg" class="status-msg hidden"></p>
</div>
<div class="card glass-card info-card">
<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>
<div class="safari-hint">
<strong>📲 iPhone টিপস:</strong> Safari-এর নিচে থাকা <strong>Share (📤)</strong> বাটনে ট্যাপ করে <strong>"Add to Home Screen"</strong> চাপুন। তাহলে এটি আপনার আইফোনে একদম আসল অ্যাপের মতো ফুল-স্ক্রিনে চলবে!
</div>
</div>
</section>
</main>
<!-- 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">
<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>
</button>
</nav>
<!-- Hidden container for generating QR code SVG/Canvas -->
<div id="qrcodeHidden" style="display:none;"></div>
<script src="app.js"></script>
<script>
if ('serviceWorker' in navigator) {
window.addEventListener('load', () => {
navigator.serviceWorker.register('sw.js').catch(err => console.log('SW reg error:', err));
});
}
</script>
</body>
</html>