Chore/audit fix force 2026 07 26

.github/workflows/vercel-build.yml

@@ -0,0 +1,41 @@
+name: Vercel Build
+
+on:
+  push:
+    branches:
+      - main
+      - master
+      - dev
+  pull_request:
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: Checkout repository
+        uses: actions/checkout@v4
+        with:
+          submodules: true
+
+      - name: Setup Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: '18'
+          cache: 'npm'
+
+      - name: Install dependencies
+        run: npm install
+
+      - name: Run setup script
+        run: npm run setup
+
+      - name: Build project
+        run: npm run build
+        working-directory: packages/studio
+
+      - name: Upload build artifacts
+        uses: actions/upload-artifact@v4
+        with:
+          name: vercel-build
+          path: packages/studio/.next

app/api/generate/route.ts

@@ -0,0 +1,81 @@
+import { InferenceClient } from "@huggingface/inference";
+import { toBufferFromPayload } from "../../../lib/binaryPayload";
+
+const client = new InferenceClient(process.env.HF_TOKEN);
+
+export async function POST(req: Request) {
+  try {
+    const { prompt, type, orientation, length, referenceAsset } = await req.json();
+
+    if (!prompt) {
+      return Response.json({ error: "Prompt is required" }, { status: 400 });
+    }
+
+    // Automatic Model & Dimension Selection based on your chosen parameters
+    let selectedModel = "";
+    let width = 1024;
+    let height = 1024;
+
+    // Handle Image Generation & Orientation mapping
+    if (type === 'image') {
+      selectedModel = "black-forest-labs/FLUX.1-dev";
+
+      if (orientation === 'portrait') {
+        width = 768;
+        height = 1344;
+      } else if (orientation === 'landscape') {
+        width = 1344;
+        height = 768;
+      }
+
+      const payload: any = {
+        model: selectedModel,
+        inputs: referenceAsset 
+          ? { prompt: `${prompt}, maintaining exact identical facial features, body structure, skintone, and curves`, image: referenceAsset } 
+          : prompt,
+        parameters: { 
+          width,
+          height,
+          num_inference_steps: 30,
+          nologo: true,
+          ...(referenceAsset ? { strength: 0.65 } : {}) 
+        }
+      };
+
+      const imageBlob = referenceAsset 
+        ? await client.imageToImage(payload) 
+        : await client.textToImage(payload);
+
+      const buffer = await toBufferFromPayload(imageBlob);
+      return Response.json({ success: true, data: `data:image/jpeg;base64,${buffer.toString("base64")}` });
+    }
+
+    // Handle Video Generation & Length mapping
+    if (type === 'video') {
+      // Automatically map video length to the ideal model pipeline
+      if (length === 'long') {
+        selectedModel = "tencent/HunyuanVideo";
+      } else {
+        selectedModel = "ali-vilab/text-to-video-ms-1.7b";
+      }
+
+      const videoBlob = await client.request({
+        model: selectedModel,
+        inputs: referenceAsset 
+          ? { prompt: `${prompt}, preserving identical face, features, figure, curves, and skintone`, video: referenceAsset }
+          : prompt,
+        parameters: {
+          nologo: true,
+          watermark: false,
+        }
+      });
+
+      const buffer = await toBufferFromPayload(videoBlob);
+      return Response.json({ success: true, data: `data:video/mp4;base64,${buffer.toString("base64")}` });
+    }
+
+    return Response.json({ error: "Invalid generation type selected" }, { status: 400 });
+  } catch (error: any) {
+    return Response.json({ error: error.message || "Generation failed" }, { status: 500 });
+  }
+}

app/page.js

@@ -1,5 +1,144 @@
-import { redirect } from 'next/navigation';
+'use client';
+import { useState } from 'react';
 
-export default function Home() {
-  redirect('/studio');
+export default function Studio() {
+  const [prompt, setPrompt] = useState('');
+  const [type, setType] = useState('image');
+  const [orientation, setOrientation] = useState('square');
+  const [length, setLength] = useState('short');
+  const [referenceAsset, setReferenceAsset] = useState(null);
+  const [output, setOutput] = useState(null);
+  const [loading, setLoading] = useState(false);
+
+  // Handle local reference file selection and convert to base64
+  function handleFileChange(e) {
+    const file = e.target.files[0];
+    if (!file) return;
+    const reader = new FileReader();
+    reader.onloadend = () => {
+      setReferenceAsset(reader.result);
+    };
+    reader.readAsDataURL(file);
+  }
+
+  async function handleGeneration() {
+    if (!prompt.trim()) return;
+    setLoading(true);
+    setOutput(null);
+
+    try {
+      const res = await fetch('/api/generate', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ prompt, type, orientation, length, referenceAsset }),
+      });
+
+      const data = await res.json();
+      if (data.success) {
+        setOutput(data.data);
+      } else {
+        alert(data.error || "Generation failed");
+      }
+    } catch (err) {
+      alert("An error occurred while connecting to the server.");
+    }
+    setLoading(false);
+  }
+
+  return (
+    <div style={{ maxWidth: '680px', margin: '40px auto', padding: '24px', background: '#16161e', color: '#fff', borderRadius: '12px', fontFamily: 'sans-serif', border: '1px solid #2d2d3d' }}>
+      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: '20px' }}>
+        <h2 style={{ margin: 0, fontSize: '20px' }}>Open-Generative-AI Studio</h2>
+        <span style={{ background: '#2563eb', color: '#fff', padding: '4px 8px', borderRadius: '4px', fontSize: '11px', fontWeight: '600' }}>Identity Consistency Mode</span>
+      </div>
+
+      {/* Type Selector */}
+      <div style={{ marginBottom: '16px', display: 'flex', gap: '10px' }}>
+        <button 
+          onClick={() => setType('image')} 
+          style={{ flex: 1, padding: '10px', background: type === 'image' ? '#7c3aed' : '#0b0b0f', color: '#fff', border: '1px solid #2d2d3d', borderRadius: '6px', cursor: 'pointer', fontWeight: '600' }}
+        >
+          Image Mode
+        </button>
+        <button 
+          onClick={() => setType('video')} 
+          style={{ flex: 1, padding: '10px', background: type === 'video' ? '#7c3aed' : '#0b0b0f', color: '#fff', border: '1px solid #2d2d3d', borderRadius: '6px', cursor: 'pointer', fontWeight: '600' }}
+        >
+          Video Mode
+        </button>
+      </div>
+
+      {/* Conditional Options: Orientation for Images, Length for Videos */}
+      {type === 'image' ? (
+        <div style={{ marginBottom: '16px' }}>
+          <label style={{ display: 'block', fontWeight: '600', marginBottom: '6px', fontSize: '13px', color: '#a1a1aa' }}>Image Orientation</label>
+          <div style={{ display: 'flex', gap: '10px' }}>
+            {['square', 'portrait', 'landscape'].map((ori) => (
+              <button
+                key={ori}
+                onClick={() => setOrientation(ori)}
+                style={{ flex: 1, padding: '8px', background: orientation === ori ? '#2563eb' : '#0b0b0f', color: '#fff', border: '1px solid #2d2d3d', borderRadius: '6px', cursor: 'pointer', textTransform: 'capitalize', fontSize: '12px' }}
+              >
+                {ori}
+              </button>
+            ))}
+          </div>
+        </div>
+      ) : (
+        <div style={{ marginBottom: '16px' }}>
+          <label style={{ display: 'block', fontWeight: '600', marginBottom: '6px', fontSize: '13px', color: '#a1a1aa' }}>Video Duration / Length</label>
+          <div style={{ display: 'flex', gap: '10px' }}>
+            {['short', 'long'].map((len) => (
+              <button
+                key={len}
+                onClick={() => setLength(len)}
+                style={{ flex: 1, padding: '8px', background: length === len ? '#2563eb' : '#0b0b0f', color: '#fff', border: '1px solid #2d2d3d', borderRadius: '6px', cursor: 'pointer', textTransform: 'capitalize', fontSize: '12px' }}
+              >
+                {len}
+              </button>
+            ))}
+          </div>
+        </div>
+      )}
+
+      {/* Reference Asset Uploader for Facial/Figure Consistency */}
+      <div style={{ marginBottom: '16px' }}>
+        <label style={{ display: 'block', fontWeight: '600', marginBottom: '6px', fontSize: '13px', color: '#a1a1aa' }}>Reference Asset (Identity & Feature Lock)</label>
+        <input 
+          type="file" 
+          accept="image/*,video/*" 
+          onChange={handleFileChange}
+          style={{ width: '100%', padding: '8px', background: '#0b0b0f', border: '1px solid #2d2d3d', borderRadius: '6px', color: '#fff', fontSize: '13px' }}
+        />
+      </div>
+
+      {/* Prompt Input */}
+      <div style={{ marginBottom: '16px' }}>
+        <label style={{ display: 'block', fontWeight: '600', marginBottom: '6px', fontSize: '13px', color: '#a1a1aa' }}>Creative Prompt</label>
+        <textarea 
+          rows={3} 
+          value={prompt} 
+          onChange={(e) => setPrompt(e.target.value)} 
+          placeholder="Describe your scene, pose, or motion..."
+          style={{ width: '100%', padding: '10px', boxSizing: 'border-box', background: '#0b0b0f', border: '1px solid #2d2d3d', color: '#fff', borderRadius: '6px', fontSize: '14px' }}
+        />
+      </div>
+
+      <button 
+        onClick={handleGeneration} 
+        disabled={loading}
+        style={{ width: '100%', background: '#7c3aed', color: '#fff', border: 'none', padding: '12px', borderRadius: '6px', fontSize: '14px', fontWeight: '600', cursor: 'pointer', marginBottom: '20px' }}
+      >
+        {loading ? `Synthesizing ${type}...` : `Generate ${type === 'image' ? 'Image' : 'Video'}`}
+      </button>
+
+      <label style={{ display: 'block', fontWeight: '600', marginBottom: '6px', fontSize: '13px', color: '#a1a1aa' }}>Output Panel</label>
+      <div style={{ padding: '16px', background: '#0b0b0f', border: '1px solid #2d2d3d', borderRadius: '6px', minHeight: '200px', display: 'flex', alignItems: 'center', justifyContent: 'center', textAlign: 'center' }}>
+        {loading && <p style={{ color: '#a1a1aa' }}>Processing model pipeline with identity preservation...</p>}
+        {!loading && !output && <p style={{ color: '#52525b' }}>Ready for your selections...</p>}
+        {!loading && output && type === 'image' && <img src={output} alt="Generated output" style={{ maxWidth: '100%', maxHeight: '400px', borderRadius: '8px', boxShadow: '0 4px 12px rgba(0,0,0,0.3)' }} />}
+        {!loading && output && type === 'video' && <video src={output} controls autoPlay loop style={{ maxWidth: '100%', maxHeight: '400px', borderRadius: '8px', boxShadow: '0 4px 12px rgba(0,0,0,0.3)' }} />}
+      </div>
+    </div>
+  );
 }

jsconfig.json

@@ -1,5 +1,6 @@
 {
   "compilerOptions": {
+    "ignoreDeprecations": "6.0",
     "baseUrl": ".",
     "paths": {
       "@/*": ["./*"],

lib/binaryPayload.js

@@ -0,0 +1,21 @@
+async function toBufferFromPayload(payload) {
+  if (typeof Blob !== 'undefined' && payload instanceof Blob) {
+    return Buffer.from(await payload.arrayBuffer());
+  }
+
+  if (typeof payload === 'string') {
+    return Buffer.from(payload, 'utf8');
+  }
+
+  if (payload && typeof payload === 'object' && typeof payload.arrayBuffer === 'function') {
+    return Buffer.from(await payload.arrayBuffer());
+  }
+
+  if (payload && typeof payload === 'object' && typeof payload.buffer === 'object') {
+    return Buffer.from(payload.buffer);
+  }
+
+  return Buffer.from(payload);
+}
+
+module.exports = { toBufferFromPayload };

next-env.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="next" />
+/// <reference types="next/image-types/global" />
+/// <reference path="./.next/types/routes.d.ts" />
+
+// NOTE: This file should not be edited
+// see https://nextjs.org/docs/app/api-reference/config/typescript for more information.