ginskill-init 1.0.0

package/skills/ai-asset-generator/generate-ginbrowser-assets.mjs

@@ -0,0 +1,242 @@
+#!/usr/bin/env node
+
+/**
+ * GinBrowser Asset Generator
+ *
+ * Generates hero images, feature illustrations, and hero background video
+ * using the KIE AI API (nano-banana-pro for images, bytedance for video).
+ *
+ * Usage:
+ *   node tools/generate-ginbrowser-assets.mjs              # generate all
+ *   node tools/generate-ginbrowser-assets.mjs --images     # images only
+ *   node tools/generate-ginbrowser-assets.mjs --video <url> # video only
+ */
+
+import { join, dirname } from "path";
+import { fileURLToPath } from "url";
+import { loadEnv } from "./lib/env.mjs";
+import { createTask, pollUntilDone, downloadFile, log } from "./lib/kie-client.mjs";
+
+const __dirname = dirname(fileURLToPath(import.meta.url));
+const ROOT = join(__dirname, "..");
+const OUTPUT_DIR = join(ROOT, "public", "images");
+
+// ─── Prompt Engineering ─────────────────────────────────────
+const IMAGE_ASSETS = [
+  {
+    name: "hero-bg",
+    filename: "hero-bg.png",
+    aspect_ratio: "16:9",
+    resolution: "2K",
+    prompt: [
+      "Cinematic ultra-wide establishing shot of a dark digital fortress environment.",
+      "Pure black void (#0A0E1A) as the base.",
+      "In the center, a massive translucent shield construct made of hexagonal grid panels",
+      "glowing with soft emerald (#10B981) and cyan (#06B6D4) light,",
+      "surrounded by orbiting data streams and encrypted packet visualizations.",
+      "Thousands of tiny luminous particles form fingerprint-like patterns",
+      "that dissolve into digital noise and scatter outward.",
+      "Multiple browser window silhouettes float in the background,",
+      "each with slightly different configurations, representing multiple identities.",
+      "Soft volumetric emerald light radiates from behind the central shield.",
+      "Center has ample dark negative space for UI overlay.",
+      "Ultra high quality photorealistic 3D render with volumetric lighting and depth of field.",
+      "Absolutely no text, no typography, no logos, no people, no UI elements, no watermarks.",
+      "Dark moody atmosphere, premium cybersecurity aesthetic.",
+    ].join(" "),
+  },
+  {
+    name: "feature-fingerprint",
+    filename: "feature-fingerprint.png",
+    aspect_ratio: "1:1",
+    resolution: "1K",
+    prompt: [
+      "Abstract premium technology illustration on a pure black background.",
+      "A large translucent holographic fingerprint floating in dark space,",
+      "constructed from glowing emerald (#10B981) digital circuit traces",
+      "and fine data-stream lines with tiny pulsing encrypted nodes.",
+      "The fingerprint gradually dissolves into scattered pixels and noise",
+      "on the right side, symbolizing digital fingerprint masking.",
+      "Tiny shield icons and lock symbols orbit around the fingerprint.",
+      "Clean minimal composition with generous dark breathing room.",
+      "Emerald and cyan accent lighting on pure black.",
+      "Ultra high quality 3D render. Photorealistic volumetric light.",
+      "No text, no typography, no logos, no people, no watermarks.",
+      "Premium cybersecurity illustration style.",
+    ].join(" "),
+  },
+  {
+    name: "feature-profiles",
+    filename: "feature-profiles.png",
+    aspect_ratio: "1:1",
+    resolution: "1K",
+    prompt: [
+      "Abstract premium technology illustration on a pure black background.",
+      "Multiple floating translucent browser window shapes arranged in a fan formation,",
+      "each glowing with different subtle color tints - emerald, cyan, blue, teal.",
+      "Each browser window has a unique abstract avatar silhouette inside it.",
+      "Thin luminous connection threads link the windows to a central hub node.",
+      "The windows have frosted glass appearance with soft inner glow.",
+      "Tiny data particles flow between the windows and the central node.",
+      "Clean minimal composition with generous negative space.",
+      "Emerald and teal accent colors on pure black.",
+      "Ultra high quality 3D render. Photorealistic volumetric light.",
+      "No text, no typography, no logos, no people, no watermarks.",
+      "Premium multi-identity management illustration style.",
+    ].join(" "),
+  },
+  {
+    name: "feature-stealth",
+    filename: "feature-stealth.png",
+    aspect_ratio: "1:1",
+    resolution: "1K",
+    prompt: [
+      "Abstract premium technology illustration on a pure black background.",
+      "A crystalline transparent eye shape floating in dark space,",
+      "constructed from hundreds of tiny emerald (#10B981) and cyan data points.",
+      "The eye is crossed out by an elegant glowing slash line,",
+      "symbolizing undetectable browsing and anti-tracking.",
+      "Around the eye, scattered detection radar waves dissolve into noise.",
+      "Faint grid lines recede into the background suggesting the web.",
+      "Small shield fragments and pixel dust float around the composition.",
+      "Clean minimal composition with generous negative space.",
+      "Emerald and cyan accent colors on pure black.",
+      "Ultra high quality 3D render. Photorealistic volumetric light.",
+      "No text, no typography, no logos, no people, no watermarks.",
+      "Premium anti-detection stealth illustration style.",
+    ].join(" "),
+  },
+];
+
+const VIDEO_PROMPT = [
+  "Extremely slow, hypnotic forward camera drift through the scene.",
+  "The hexagonal shield panels pulse gently with soft emerald bioluminescent light in slow waves.",
+  "Fingerprint particle patterns continuously dissolve and reform in mesmerizing cycles.",
+  "Translucent encrypted data streams shimmer and slowly orbit the central shield.",
+  "Microscopic particles drift past the lens creating dreamy bokeh.",
+  "Volumetric fog shifts almost imperceptibly in the background.",
+  "Ultra smooth, meditative cinematic motion.",
+  "No sudden movements, no flashes, no camera shake.",
+  "Premium atmospheric cybersecurity ambience.",
+].join(" ");
+
+// ─── Main ───────────────────────────────────────────────────
+async function generateImages() {
+  log("\n--- Phase 1: Submitting image tasks ---\n");
+
+  const jobs = await Promise.all(
+    IMAGE_ASSETS.map(async (asset) => {
+      log(`  [submit] ${asset.name}  (${asset.aspect_ratio} ${asset.resolution})`);
+      const taskId = await createTask({
+        model: "nano-banana-pro",
+        input: {
+          prompt: asset.prompt,
+          aspect_ratio: asset.aspect_ratio,
+          resolution: asset.resolution,
+          output_format: "png",
+        },
+      });
+      log(`  [queued] ${asset.name}  taskId=${taskId}`);
+      return { ...asset, taskId };
+    })
+  );
+
+  log(`\n--- Phase 2: Polling ${jobs.length} image tasks ---\n`);
+
+  const results = await Promise.all(
+    jobs.map(async (job) => {
+      const url = await pollUntilDone(job.taskId, job.name);
+      return { ...job, resultUrl: url };
+    })
+  );
+
+  log("\n--- Phase 3: Downloading images ---\n");
+
+  for (const r of results) {
+    await downloadFile(r.resultUrl, join(OUTPUT_DIR, r.filename));
+  }
+
+  return results;
+}
+
+async function generateVideo(heroImageUrl) {
+  log("\n--- Phase 4: Submitting video task ---\n");
+
+  log(`  [submit] hero-bg-video  (720p 5s)`);
+  log(`  [source] ${heroImageUrl}`);
+
+  const taskId = await createTask({
+    model: "bytedance/v1-pro-image-to-video",
+    input: {
+      prompt: VIDEO_PROMPT,
+      image_url: heroImageUrl,
+      resolution: "720p",
+      duration: "5",
+      camera_fixed: false,
+      seed: -1,
+      enable_safety_checker: true,
+    },
+  });
+
+  log(`  [queued] hero-bg-video  taskId=${taskId}`);
+  log("\n--- Phase 5: Polling video task (may take several minutes) ---\n");
+
+  const videoUrl = await pollUntilDone(taskId, "hero-bg-video", 600_000);
+
+  log("\n--- Phase 6: Downloading video ---\n");
+  await downloadFile(videoUrl, join(OUTPUT_DIR, "hero-bg.mp4"));
+}
+
+async function main() {
+  await loadEnv();
+
+  if (!process.env.KIE_AI_API_KEY) {
+    console.error("Error: KIE_AI_API_KEY not found. Check .env or .env.local");
+    process.exit(1);
+  }
+
+  const args = process.argv.slice(2);
+  const imagesOnly = args.includes("--images");
+  const videoOnly = args.includes("--video");
+
+  console.log("\n========================================");
+  console.log("  GinBrowser Asset Generator");
+  console.log("========================================");
+
+  if (videoOnly) {
+    const urlArg = args.find((a) => a.startsWith("http"));
+    if (!urlArg) {
+      console.error("Video-only mode requires a hero image URL argument.");
+      console.error("Usage: node tools/generate-ginbrowser-assets.mjs --video <hero-image-url>");
+      process.exit(1);
+    }
+    await generateVideo(urlArg);
+  } else {
+    const results = await generateImages();
+
+    if (!imagesOnly) {
+      const heroResult = results.find((r) => r.name === "hero-bg");
+      if (heroResult?.resultUrl) {
+        await generateVideo(heroResult.resultUrl);
+      } else {
+        log("\n  [skip] Video generation: hero-bg image not available");
+      }
+    }
+  }
+
+  console.log("\n========================================");
+  console.log("  All done!");
+  console.log("========================================");
+  console.log("\nGenerated assets in public/images/:");
+  console.log("  - hero-bg.png             (hero background)");
+  console.log("  - hero-bg.mp4             (hero video)");
+  console.log("  - feature-fingerprint.png (fingerprint masking)");
+  console.log("  - feature-profiles.png    (multi-profile management)");
+  console.log("  - feature-stealth.png     (stealth/anti-detection)");
+  console.log("");
+}
+
+main().catch((err) => {
+  console.error(`\nFatal: ${err.message}`);
+  process.exit(1);
+});

package/skills/ai-asset-generator/generate-sty-icon.mjs

@@ -0,0 +1,149 @@
+#!/usr/bin/env node
+
+/**
+ * Sty Credit Icon Generator
+ *
+ * Generates ONE unified credit/coin icon for the entire app.
+ * This icon replaces the inconsistent SVG StyIcon + coin-reward.png.
+ *
+ * Pipeline:
+ *   1. Generate via KIE AI API (nano-banana-pro)
+ *   2. Remove background via Sty AI API
+ *   3. Convert to WebP via ffmpeg (lightweight)
+ *   4. Output multiple sizes: @1x (24px), @2x (48px), @3x (72px), hero (160px)
+ *
+ * Usage:
+ *   node tools/generate-sty-icon.mjs
+ */
+
+import { writeFile, readFile } from "fs/promises";
+import { join, dirname } from "path";
+import { fileURLToPath } from "url";
+import { execSync } from "child_process";
+import { loadEnv } from "./lib/env.mjs";
+import { createTask, pollUntilDone, downloadFile, log } from "./lib/kie-client.mjs";
+import { removeBackground } from "./lib/bg-remove.mjs";
+
+const __dirname = dirname(fileURLToPath(import.meta.url));
+const OUTPUT_DIR = join(__dirname, "..", "styai-mobile", "src", "assets", "images", "credits");
+
+// ─── ffmpeg helpers ─────────────────────────────────────────
+function hasFFmpeg() {
+  try { execSync("which ffmpeg", { stdio: "pipe" }); return true; } catch { return false; }
+}
+
+function ffmpegResize(input, output, size) {
+  execSync(`ffmpeg -y -i "${input}" -vf "scale=${size}:${size}:flags=lanczos" "${output}"`, { stdio: "pipe" });
+  log(`  [resized] ${output} (${size}x${size})`);
+}
+
+function ffmpegToWebP(input, output) {
+  try {
+    execSync(`ffmpeg -y -i "${input}" -c:v libwebp -quality 90 -lossless 0 "${output}"`, { stdio: "pipe" });
+    log(`  [webp] ${output}`);
+  } catch {
+    log(`  [skip] WebP not available, keeping PNG: ${input}`);
+  }
+}
+
+// ─── Main ───────────────────────────────────────────────────
+async function main() {
+  await loadEnv();
+
+  if (!process.env.KIE_AI_API_KEY) {
+    console.error("Error: KIE_AI_API_KEY not found. Check .env");
+    process.exit(1);
+  }
+
+  const useFFmpeg = hasFFmpeg();
+  if (!useFFmpeg) {
+    log("[warn] ffmpeg not found — skipping resize and WebP conversion");
+    log("[warn] Install with: brew install ffmpeg");
+  }
+
+  console.log("\n========================================");
+  console.log("  Sty Credit Icon Generator");
+  console.log("  One icon to rule them all");
+  console.log("========================================\n");
+
+  // ─── Phase 1: Generate high-res icon ──────────────────────
+  const prompt = [
+    "A single flat coin icon on a solid pure white #FFFFFF background, centered, no shadows on background.",
+    "The coin is a perfect circle, viewed straight-on (flat, no tilt, no perspective).",
+    "Coin color: vibrant rose-pink gradient from #EC4899 to #DB2777, smooth metallic finish.",
+    "On the coin face: a bold clean letter S in white, centered, modern sans-serif font, slightly embossed.",
+    "The coin has a thin clean rim, slightly lighter rose-pink #F87198.",
+    "One subtle diagonal highlight across the coin for a polished metallic look.",
+    "NO particles, NO sparkles, NO glow, NO halo, NO floating elements around the coin.",
+    "NO shadows on the background. The coin edges must be crisp and clean against the white background.",
+    "Solid pure white background only. Clean, minimal, flat icon style.",
+    "High quality digital illustration, app icon style, crisp vector-like rendering.",
+    "No text besides the S. No watermarks, no people, no extra elements.",
+  ].join(" ");
+
+  log("--- Phase 1: Generating high-res coin icon ---\n");
+  log("  [submit] sty-coin  (1:1 2K)");
+
+  const taskId = await createTask({
+    model: "nano-banana-pro",
+    input: {
+      prompt,
+      aspect_ratio: "1:1",
+      resolution: "2K",
+      output_format: "png",
+    },
+  });
+
+  log(`  [queued] sty-coin  taskId=${taskId}`);
+  log("\n--- Phase 2: Polling ---\n");
+
+  const resultUrl = await pollUntilDone(taskId, "sty-coin");
+
+  // ─── Phase 3: Download ────────────────────────────────────
+  log("\n--- Phase 3: Downloading ---\n");
+  const rawPath = join(OUTPUT_DIR, "sty-coin-raw.png");
+  await downloadFile(resultUrl, rawPath);
+
+  // ─── Phase 4: Remove background ──────────────────────────
+  log("\n--- Phase 4: Removing background ---\n");
+  const noBgPath = join(OUTPUT_DIR, "sty-coin.png");
+  try {
+    await removeBackground(rawPath, noBgPath);
+  } catch (err) {
+    log(`  [warn] Background removal failed: ${err.message}`);
+    log("  [fallback] Using raw image as sty-coin.png");
+    await writeFile(noBgPath, await readFile(rawPath));
+  }
+
+  // ─── Phase 5: Generate sizes + WebP via ffmpeg ────────────
+  if (useFFmpeg) {
+    log("\n--- Phase 5: Generating sizes + WebP ---\n");
+
+    ffmpegResize(noBgPath, join(OUTPUT_DIR, "sty-coin-hero.png"), 160);
+    ffmpegResize(noBgPath, join(OUTPUT_DIR, "sty-coin@3x.png"), 72);
+    ffmpegResize(noBgPath, join(OUTPUT_DIR, "sty-coin@2x.png"), 48);
+
+    // WebP versions for lightweight loading
+    ffmpegToWebP(join(OUTPUT_DIR, "sty-coin-hero.png"), join(OUTPUT_DIR, "sty-coin-hero.webp"));
+    ffmpegToWebP(join(OUTPUT_DIR, "sty-coin@3x.png"), join(OUTPUT_DIR, "sty-coin@3x.webp"));
+  }
+
+  console.log("\n========================================");
+  console.log("  All done!");
+  console.log("========================================");
+  console.log(`\nGenerated in ${OUTPUT_DIR}:`);
+  console.log("  - sty-coin.png        (full-res, transparent bg)");
+  if (useFFmpeg) {
+    console.log("  - sty-coin@2x.png     (48px)");
+    console.log("  - sty-coin@3x.png     (72px)");
+    console.log("  - sty-coin-hero.png   (160px, for hero section)");
+    console.log("  - sty-coin-hero.webp  (160px, lightweight)");
+    console.log("  - sty-coin@3x.webp    (72px, lightweight)");
+  }
+  console.log("");
+}
+
+main().catch((err) => {
+  console.error(`\nFatal: ${err.message}`);
+  process.exit(1);
+});

package/skills/ai-asset-generator/lib/bg-remove.mjs

@@ -0,0 +1,34 @@
+/**
+ * Shared background removal via Sty AI API.
+ */
+
+import { writeFile, readFile } from "fs/promises";
+import { log } from "./kie-client.mjs";
+
+export async function removeBackground(inputPath, outputPath) {
+  const fileBuffer = await readFile(inputPath);
+  const blob = new Blob([fileBuffer], { type: "image/png" });
+
+  const formData = new FormData();
+  formData.append("file", blob, "image.png");
+  formData.append("cropToForeground", "true");
+  formData.append("outputFormat", "png");
+
+  const res = await fetch("https://api.styai.app/api/v1/media/remove-background", {
+    method: "POST",
+    headers: {
+      accept: "application/json",
+      "X-API-Key": "pat_lJ8bAVjHn2_moLH1zxdTm9NnU8rvUcw8HyiQtuHg",
+    },
+    body: formData,
+  });
+
+  const json = await res.json();
+  if (!json.sucess && !json.success) {
+    throw new Error("Background removal failed");
+  }
+
+  const buffer = Buffer.from(json.buffer, "base64");
+  await writeFile(outputPath, buffer);
+  log(`  [bg-removed] ${outputPath}`);
+}

package/skills/ai-asset-generator/lib/env.mjs

@@ -0,0 +1,38 @@
+/**
+ * Shared .env loader for ai-asset-generator scripts.
+ * Looks for .env in ai-asset-generator/ first, then workspace root.
+ */
+
+import { readFile } from "fs/promises";
+import { join, dirname } from "path";
+import { fileURLToPath } from "url";
+
+const __dirname = dirname(fileURLToPath(import.meta.url));
+const GENERATOR_DIR = join(__dirname, "..");
+const ROOT = join(__dirname, "..", "..", "..", "..");
+
+export async function loadEnv() {
+  // Look in ai-asset-generator/ first, then workspace root as fallback
+  const searchPaths = [GENERATOR_DIR, ROOT];
+  const envFiles = [".env", ".env.local"];
+
+  for (const dir of searchPaths) {
+    for (const envFile of envFiles) {
+      try {
+        const raw = await readFile(join(dir, envFile), "utf8");
+        for (const line of raw.split("\n")) {
+          const trimmed = line.trim();
+          if (!trimmed || trimmed.startsWith("#")) continue;
+          const eq = trimmed.indexOf("=");
+          if (eq === -1) continue;
+          const key = trimmed.slice(0, eq).trim();
+          const val = trimmed.slice(eq + 1).trim();
+          if (!process.env[key]) process.env[key] = val;
+        }
+        console.log(`  [env] Loaded ${envFile}`);
+      } catch {
+        // File may not exist, continue
+      }
+    }
+  }
+}

package/skills/ai-asset-generator/lib/kie-client.mjs

@@ -0,0 +1,88 @@
+/**
+ * Shared KIE AI API client.
+ *
+ * Provides: createTask, queryTask, pollUntilDone, downloadFile
+ * All scripts use the same API base and auth pattern.
+ */
+
+import { writeFile, mkdir } from "fs/promises";
+import { existsSync } from "fs";
+import { dirname } from "path";
+
+// ─── Helpers ────────────────────────────────────────────────
+export const sleep = (ms) => new Promise((r) => setTimeout(r, ms));
+export const log = (msg) => console.log(msg);
+
+// ─── API Client ─────────────────────────────────────────────
+const API = "https://api.kie.ai/api/v1/jobs";
+
+function headers() {
+  return {
+    "Content-Type": "application/json",
+    Authorization: `Bearer ${process.env.KIE_AI_API_KEY}`,
+  };
+}
+
+export async function createTask(payload) {
+  const res = await fetch(`${API}/createTask`, {
+    method: "POST",
+    headers: headers(),
+    body: JSON.stringify(payload),
+  });
+  const json = await res.json();
+  if (json.code !== 200) {
+    throw new Error(`createTask failed (${json.code}): ${json.message}`);
+  }
+  return json.data.taskId;
+}
+
+export async function queryTask(taskId) {
+  const res = await fetch(`${API}/recordInfo?taskId=${taskId}`, {
+    headers: { Authorization: `Bearer ${process.env.KIE_AI_API_KEY}` },
+  });
+  const json = await res.json();
+  if (json.code !== 200) {
+    throw new Error(`queryTask failed (${json.code}): ${json.message}`);
+  }
+  return json.data;
+}
+
+/**
+ * Poll a task until it reaches success/fail.
+ * Uses increasing delay: 5s → 8s → 12s → … capped at 30s.
+ */
+export async function pollUntilDone(taskId, label, timeoutMs = 300_000) {
+  const t0 = Date.now();
+  let delay = 5_000;
+
+  while (Date.now() - t0 < timeoutMs) {
+    const task = await queryTask(taskId);
+
+    if (task.state === "success") {
+      const urls = JSON.parse(task.resultJson).resultUrls;
+      log(`  [done] ${label}`);
+      return urls[0];
+    }
+
+    if (task.state === "fail") {
+      throw new Error(`${label} failed: ${task.failMsg || "unknown"}`);
+    }
+
+    const elapsed = Math.round((Date.now() - t0) / 1000);
+    log(`  [${task.state}] ${label}  (${elapsed}s, next poll in ${Math.round(delay / 1000)}s)`);
+    await sleep(delay);
+    delay = Math.min(Math.round(delay * 1.5), 30_000);
+  }
+
+  throw new Error(`${label} timed out after ${timeoutMs / 1000}s`);
+}
+
+export async function downloadFile(url, dest) {
+  const dir = dirname(dest);
+  if (!existsSync(dir)) await mkdir(dir, { recursive: true });
+  const res = await fetch(url);
+  if (!res.ok) throw new Error(`Download failed: ${res.status} ${url}`);
+  const buf = Buffer.from(await res.arrayBuffer());
+  await writeFile(dest, buf);
+  log(`  [saved] ${dest}`);
+}