VinOS Auto-Update: Strategic Sync

carousel-gen.js

@@ -98,33 +98,37 @@ class CarouselGen {
             
             // Formatting parameters
             const isHook = (slide.type || '').toLowerCase() === 'hook' || i === 0;
-            const titleFontSize = isHook ? 75 : 60;
-            const subFontSize = isHook ? 40 : 36;
-            const typeFontSize = 28;
+            const titleFontSize = isHook ? 88 : 72;
+            const subFontSize = isHook ? 38 : 34;
+            const typeFontSize = 26;
             
-            const maxTitleChars = isHook ? 20 : 26;
-            const maxSubChars = isHook ? 38 : 44;
+            const maxTitleChars = isHook ? 18 : 24;
+            const maxSubChars = isHook ? 40 : 48;
 
             const titleLines = this.wrapText(this.escapeXml(slide.title), maxTitleChars);
             const subLines = this.wrapText(this.escapeXml(slide.subtitle), maxSubChars);
 
-            // Coordinates (tuned for Canva backgrounds)
-            let currentY = 420;
-            const titleColor = templateType === 'light' ? '#1A1A1A' : '#FFFFFF';
-            const subColor = templateType === 'light' ? '#4A4A4A' : '#A0ABCB';
-            const accentColor = '#E13B6B'; // VinOS Pink
+            // Start title at a fixed Y — well below the header (TYPE + PAGE at y=200)
+            let currentY = 400;
+            const titleColor = templateType === 'light' ? '#071330' : '#FFFFFF';
+            const titleAccentColor = '#f7cb2d'; // Gold accent for hook slides
+            const subColor = templateType === 'light' ? '#3a4a6b' : '#c8d4f0';
+            const accentColor = '#f7cb2d'; // VinOS Gold
+            const bgColor = templateType === 'light' ? '#f0f3fa' : '#071330';
 
+            // Render title tspans — track exact final Y
             let titleTspans = titleLines.map(line => {
                 const span = `<tspan x="110" y="${currentY}">${line}</tspan>`;
-                currentY += (titleFontSize * 1.25);
+                currentY += Math.round(titleFontSize * 1.25);
                 return span;
             }).join('\n');
 
-            currentY += (isHook ? 70 : 50);
+            // Add a comfortable gap between title and subtitle
+            currentY += isHook ? 60 : 48;
 
             let subTspans = subLines.map(line => {
                 const span = `<tspan x="110" y="${currentY}">${line}</tspan>`;
-                currentY += (subFontSize * 1.35);
+                currentY += Math.round(subFontSize * 1.4);
                 return span;
             }).join('\n');
 
@@ -135,24 +139,42 @@ class CarouselGen {
             let svgContent = '';
             
             if (templateContent) {
-                // If we have template content, we inject our dynamic layer on top of it.
-                // We assume template is an <svg> tag. We append our elements before </svg>.
                 const closingTagIndex = templateContent.lastIndexOf('</svg>');
                 if (closingTagIndex !== -1) {
+                    const fontImport = `<defs>
+                        <style>@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@500;700;900&amp;display=swap');</style>
+                    </defs>`;
+                    
                     const dynamicLayer = `
-                <!-- Dynamic Content Layer -->
-                ${typeLabel ? `<text x="110" y="200" font-family="Arial, sans-serif" font-size="${typeFontSize}" fill="${accentColor}" font-weight="bold" letter-spacing="3">${typeLabel}</text>` : ''}
-                <text x="970" y="200" font-family="Arial, sans-serif" font-size="28" fill="${subColor}" font-weight="bold" text-anchor="end">${pageCounter}</text>
-                
-                <text font-family="Arial, sans-serif" font-size="${titleFontSize}" fill="${titleColor}" font-weight="900" letter-spacing="-1">
+                <!-- Dynamic Content Layer —— injected by carousel-gen.js -->
+                ${fontImport}
+
+                <!-- Header: TYPE tag (top-left) and PAGE counter (top-right) -->
+                ${typeLabel ? `<text x="110" y="185" font-family="'Space Grotesk', sans-serif" font-size="${typeFontSize}" fill="${accentColor}" font-weight="700" letter-spacing="4">${typeLabel}</text>` : ''}
+                <text x="970" y="185" font-family="'Space Grotesk', sans-serif" font-size="26" fill="${subColor}" font-weight="500" text-anchor="end" opacity="0.7">${pageCounter}</text>
+
+                <!-- Thin accent rule under header -->
+                <rect x="110" y="205" width="80" height="3" rx="2" fill="${accentColor}" />
+
+                <!-- Main TITLE — Space Grotesk Heavy -->
+                <text font-family="'Space Grotesk', sans-serif" font-size="${titleFontSize}" fill="${titleColor}" font-weight="900" letter-spacing="-1.5">
                     ${titleTspans}
                 </text>
-                <text font-family="Arial, sans-serif" font-size="${subFontSize}" fill="${subColor}" font-weight="400">
+
+                <!-- SUBTITLE — Vend Sans (falls back to system sans) -->
+                <text font-family="'Vend Sans', 'Space Grotesk', sans-serif" font-size="${subFontSize}" fill="${subColor}" font-weight="400" letter-spacing="0.2">
                     ${subTspans}
                 </text>
-                
-                <!-- Swipe Indicator -->
-                ${i < slides.length - 1 ? `<text x="970" y="1280" font-family="Arial, sans-serif" font-size="24" fill="${accentColor}" text-anchor="end" font-weight="bold">Swipe ➡</text>` : ''}
+
+                <!-- Footer Branding -->
+                <rect x="110" y="1260" width="860" height="1" fill="${accentColor}" opacity="0.25" />
+
+                <!-- DF Logo mark in footer -->
+                <circle cx="146" cy="1305" r="26" fill="${accentColor}" />
+                <text x="146" y="1313" font-family="'Space Grotesk', sans-serif" font-size="18" fill="#071330" font-weight="900" text-anchor="middle">DF</text>
+                <text x="186" y="1313" font-family="'Space Grotesk', sans-serif" font-size="18" fill="${subColor}" font-weight="500" opacity="0.7">@deeferdinand</text>
+
+                ${i < slides.length - 1 ? `<text x="970" y="1313" font-family="'Space Grotesk', sans-serif" font-size="22" fill="${accentColor}" text-anchor="end" font-weight="700" opacity="0.9">Swipe ➡</text>` : `<text x="970" y="1313" font-family="'Space Grotesk', sans-serif" font-size="22" fill="${accentColor}" text-anchor="end" font-weight="700" opacity="0.9">Follow for more</text>`}
                     `;
                     svgContent = templateContent.slice(0, closingTagIndex) + dynamicLayer + templateContent.slice(closingTagIndex);
                 }

claude-instagram-carousel-guide.md

@@ -24,21 +24,16 @@ Kalau user bilang "bikinin carousel tentang X" tanpa sebut brand lain, langsung
 
 | Detail | Nilai |
 |--------|-------|
-| **Nama brand** | `NAMA_BRAND_KAMU` |
-| **Handle IG** | `@handle_kamu` |
-| **Warna utama** | `#3B82F6` ← ganti dengan hex code warna brand kamu |
-| **Logo** | Inisial huruf pertama nama brand dalam lingkaran warna brand |
-| **Font** | Inter (weight 300–800) |
-| **Tone** | Casual, clean |
-| **Bahasa konten** | Indonesia casual, pakai "kamu" |
-
-<!--
-  Contoh kalau brand kamu "Warung Kopi Nusantara" dengan handle @kopinusantara:
-  | Nama brand | KOPI NUSANTARA |
-  | Handle IG  | @kopinusantara |
-  | Warna utama | #8B4513 |
-  | Logo | Inisial "K" dalam lingkaran coklat |
--->
+| **Nama brand** | `@deeferdinand` |
+| **Handle IG** | `@deeferdinand` |
+| **Warna utama** | `#071330` (Deep Navy) |
+| **Accent / CTA** | `#f7cb2d` (Gold) |
+| **Contrast teks** | `#FFFFFF` di atas navy, `#071330` di atas gold |
+| **Logo** | Inisial `DF` dalam lingkaran gold `#f7cb2d` |
+| **Font Heading** | Space Grotesk (weight 700–900) |
+| **Font Subheading** | Vend Sans (weight 400–600) |
+| **Tone** | Casual, conversational, helpful, everyday |
+| **Bahasa** | Mix Indonesia + English — pakai Inggris untuk istilah tech/bisnis yang lebih familiar |
 
 > Kalau default sudah diisi, **gak perlu tanya lagi**. Langsung gas.
 
@@ -76,16 +71,15 @@ DARK_BG         = {near-black dengan tint brand}      // Background slide gelap
 
 ---
 
-## Step 3: Setup Tipografi — Inter + Prinsip HIG
+## Step 3: Setup Tipografi — Space Grotesk + Vend Sans
 
-Font yang digunakan adalah **Inter** untuk semua elemen. Hierarki visual dicapai melalui **variasi weight, size, dan opacity** — bukan melalui font yang berbeda. Pendekatan ini mengikuti prinsip Apple Human Interface Guidelines: satu type family, banyak ekspresi.
+Font utama adalah **Space Grotesk** untuk heading dan **Vend Sans** untuk body/subtitle. Hierarchy visual dicapai melalui **variasi weight, size, dan opacity** — prinsip Apple HIG: ekspresi maksimal dari type system yang konsisten.
 
 **Import:**
 ```html
-<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap" rel="stylesheet">
+<link href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700;900&display=swap" rel="stylesheet">
 ```
-
-> Sertakan weight **800** — dipakai khusus untuk headline cover slide.
+> Vend Sans belum ada di Google Fonts — embed file manual atau gunakan Space Grotesk weight 400 sebagai fallback untuk subtitle.
 
 **Skala tipografi (mengikuti 8pt grid system):**
 
@@ -462,20 +456,12 @@ asyncio.run(export_slides())
 ## Tone & Copywriting
 
 <!--
-╔══════════════════════════════════════════════════════════════════╗
-║  🔧 SESUAIKAN BAGIAN INI DENGAN GAYA BAHASA KAMU               ║
-║                                                                  ║
-║  Section di bawah berisi panduan tone casual bahasa Indonesia.   ║
-║  Kalau kamu menulis dalam bahasa Inggris atau gaya yang beda,   ║
-║  sesuaikan prinsip dan contoh kalimatnya.                        ║
-║                                                                  ║
-║  Tipsnya: paste beberapa contoh caption/tulisan kamu yang        ║
-║  sudah ada, dan minta Claude untuk analisis pola bahasanya       ║
-║  lalu update section ini.                                        ║
-╚══════════════════════════════════════════════════════════════════╝
+  Brand voice sudah terkunci untuk @deeferdinand. Aturan di bawah mencerminkan gaya komunikasi Dee.
 -->
 
-Carousel ditulis seolah-olah pemilik brand **ngobrol langsung** sama followers-nya. Bukan bahasa formal, bukan bahasa template — tapi bahasa orang yang ngerti topiknya dan cerita ke temen.
+Carousel ditulis seolah-olah **Dee ngobrol langsung** sama followers-nya. Bukan bahasa formal, bukan AI template — tapi bahasa orang yang ngerti topiknya dan cerita ke temen deket.
+
+**Format bahasa: Mix Indonesia+English** — istilah tech/bisnis tetap Inggris kalau lebih familiar. Contoh: "workflow", "tools", "setup", "AI", "content calendar".
 
 ### Prinsip Tone
 

skills/api_caller.js

@@ -27,8 +27,26 @@ const getChatModel = () => {
     }
 };
 
+// Social content writing models (human-like, personal tone)
+const SOCIAL_MODELS = {
+    PREMIUM:  'google/gemini-2.5-flash',              // $0.30/$2.50 per 1M — hero content
+    STANDARD: 'google/gemini-2.5-flash-lite',          // $0.10/$0.40 per 1M — daily driver
+    FREE:     'meta-llama/llama-3.3-70b-instruct:free' // $0.00 — budget fallback
+};
+
+const getSocialModel = () => {
+    try {
+        const raw = fs.readFileSync(DB_PATH, 'utf8');
+        const db = JSON.parse(raw);
+        return db.user_profile_snapshot?.social_content_model || SOCIAL_MODELS.STANDARD;
+    } catch (e) {
+        return SOCIAL_MODELS.STANDARD;
+    }
+};
+
 const MODELS = {
     CHAT:       () => getChatModel(),
+    SOCIAL:     () => getSocialModel(),
     FALLBACK:   'meta-llama/llama-3.3-70b-instruct',
     INTENT:     process.env.GROQ_MODEL || 'llama-3.1-8b-instant',
     IMAGE:      'google/gemini-3.1-flash-image-preview',
@@ -50,6 +68,8 @@ const logTelegramMessage = (direction, chatId, text) => {
 module.exports = {
     logTelegramMessage,
     MODELS,
+    SOCIAL_MODELS,
+    getSocialModel,
     axiosIPv4,
 
     // OpenRouter (AI Chat & Reasoning) — with automatic fallback