needware-cli 1.7.1 → 1.7.3

package/dist/commands/system-prompt.js

@@ -358,7 +358,7 @@ Since the codebase is a template, you should not assume they have set up anythin
 
 - Then list what features you'll implement in this first version. It's a first version so the user will be able to iterate on it. Don't do too much, but make it look good.
 
-- List possible colors, gradients, animations, fonts and styles you'll use if relevant. Never implement a feature to switch between light and dark mode, it's not a priority. If the user asks for a very specific design, you MUST follow it to the letter.
+- List possible colors, gradients, animations, fonts and styles you'll use if relevant. Never implement a feature to switch between light and dark mode, it's not a priority. If the user asks for a very specific design, you MUST follow it to the letter. IMPORTANT: Do NOT use purple as the primary color theme unless explicitly requested by the user.
 
 - When implementing:
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "needware-cli",
-  "version": "1.7.1",
+  "version": "1.7.3",
   "description": "一个功能强大的 Node.js 命令行工具",
   "type": "module",
   "main": "dist/index.js",

package/skills/ai-integration/SKILL.md

@@ -491,19 +491,18 @@ export function ChatInterface() {
 }
 ```
 
-### Image Generation Specialized Template
+### Image Input Template (Virtual Try-On Example) 👗
 
-**CRITICAL: Use `gemini-3-pro-image-preview` model for image generation tasks.**
+**Use Case:** When AI needs to process images and generate a new composite image. This example demonstrates a virtual try-on feature that combines a person photo with clothing.
 
-Use this template when users need to generate images from text descriptions.
+**CRITICAL: Use `google/gemini-3-pro-image-preview` model with `modalities: ["text", "image"]` for multi-image generation tasks.**
 
-**File Location:** `supabase/functions/generate-image/index.ts`
+**File Location:** `supabase/functions/virtual-try-on/index.ts`
 
 ```typescript
-// supabase/functions/generate-image/index.ts
+// supabase/functions/virtual-try-on/index.ts
 import { serve } from "https://deno.land/std@0.190.0/http/server.ts";
 
-// CORS headers for cross-origin requests
 const corsHeaders = {
   "Access-Control-Allow-Origin": "*",
   "Access-Control-Allow-Headers":
@@ -512,100 +511,192 @@ const corsHeaders = {
   "Access-Control-Max-Age": "86400",
 };
 
-// Request interface
-interface ImageGenerationRequest {
-  prompt: string;
-  options?: {
-    size?: string;
-    quality?: string;
-    style?: string;
-  };
+interface VirtualTryOnRequest {
+  personImage: string;
+  clothingImage: string;
 }
 
 const handler = async (req: Request): Promise<Response> => {
-  // Handle CORS preflight requests
   if (req.method === "OPTIONS") {
-    return new Response(null, { 
+    return new Response(null, {
       status: 200,
-      headers: corsHeaders 
+      headers: corsHeaders
     });
   }
 
   try {
-    const { prompt, options }: ImageGenerationRequest = await req.json();
+    const { personImage, clothingImage }: VirtualTryOnRequest = await req.json();
 
-    // Validate input
-    if (!prompt) {
+    if (!personImage) {
       return new Response(
-        JSON.stringify({ error: "No prompt provided" }),
-        { 
-          status: 400, 
-          headers: { "Content-Type": "application/json", ...corsHeaders } 
-        }
+        JSON.stringify({ error: "Please upload a person photo" }),
+        { status: 400, headers: { "Content-Type": "application/json", ...corsHeaders } }
+      );
+    }
+
+    if (!clothingImage) {
+      return new Response(
+        JSON.stringify({ error: "Please select a clothing image" }),
+        { status: 400, headers: { "Content-Type": "application/json", ...corsHeaders } }
       );
     }
 
-    console.log("Generating image with prompt:", prompt);
+    console.log("Processing virtual try-on request with two images");
 
-    // Call AI Gateway API with image generation model
+    const prompt = `You are a virtual try-on AI. I'm giving you two images:
+1. First image: A photo of a person
+2. Second image: A clothing item
+
+Your task: Generate a new image showing the person from image 1 wearing the clothing from image 2.
+
+Requirements:
+- Keep the person's face, body, pose, skin tone, and hair exactly the same
+- Replace their current clothing with the clothing from image 2
+- The clothing should fit naturally on the person's body
+- Maintain realistic lighting and shadows
+- Keep the same background as the original person photo
+- Output only the final edited image, no text explanation needed`;
+
+    // Call AI Gateway API with multi-image input
     const response = await fetch("https://www.needware.dev/v1/chat/completions", {
       method: "POST",
       headers: {
         "Content-Type": "application/json",
       },
       body: JSON.stringify({
-        model: "gemini-3-pro-image-preview", // 🎨 Use image generation model
+        model: "google/gemini-3-pro-image-preview", // 🎨 Image generation model
+        modalities: ["text", "image"], // Enable image output
         messages: [
-          {
-            role: "system",
-            content: "You are a professional image generation assistant. Generate high-quality images based on user descriptions."
-          },
           {
             role: "user",
-            content: prompt
+            content: [
+              {
+                type: "text",
+                text: prompt
+              },
+              {
+                type: "image_url",
+                image_url: personImage // First image: person photo
+              },
+              {
+                type: "image_url",
+                image_url: clothingImage // Second image: clothing
+              }
+            ]
           }
         ],
-        temperature: 0.8,
-        max_tokens: 4000,
+        temperature: 0.7,
+        max_tokens: 8192,
       }),
     });
 
     if (!response.ok) {
       const errorText = await response.text();
       console.error("AI service error:", response.status, errorText);
-      throw new Error(`Image generation failed: ${errorText}`);
+
+      if (response.status === 429) {
+        return new Response(
+          JSON.stringify({ error: "Request rate too high, please try again later" }),
+          { status: 429, headers: { "Content-Type": "application/json", ...corsHeaders } }
+        );
+      }
+
+      if (response.status === 402) {
+        return new Response(
+          JSON.stringify({ error: "AI service quota exhausted" }),
+          { status: 402, headers: { "Content-Type": "application/json", ...corsHeaders } }
+        );
+      }
+
+      let errorMessage = "AI service temporarily unavailable";
+      try {
+        const errorJson = JSON.parse(errorText);
+        errorMessage = errorJson.error?.message || errorJson.message || errorMessage;
+      } catch {
+        if (errorText) errorMessage = errorText.slice(0, 200);
+      }
+
+      return new Response(
+        JSON.stringify({ error: errorMessage }),
+        { status: 500, headers: { "Content-Type": "application/json", ...corsHeaders } }
+      );
     }
 
     const data = await response.json();
-    const result = data.choices?.[0]?.message?.content;
+    console.log("AI response:", JSON.stringify(data, null, 2));
+
+    // ⚠️ IMPORTANT: Parse image from multiple possible response formats
+    let generatedImage: string | null = null;
+    const message = data.choices?.[0]?.message;
+
+    // Format 1: content_parts (Gemini native format)
+    if (message?.content_parts && Array.isArray(message.content_parts)) {
+      for (const part of message.content_parts) {
+        if (part.inline_data?.data) {
+          const mimeType = part.inline_data.mime_type || "image/png";
+          generatedImage = `data:${mimeType};base64,${part.inline_data.data}`;
+          break;
+        }
+      }
+    }
 
-    if (!result) {
-      throw new Error("No image generated");
+    // Format 2: content array with various structures
+    if (!generatedImage && Array.isArray(message?.content)) {
+      for (const item of message.content) {
+        if (item.type === "image_url" && item.image_url?.url) {
+          generatedImage = item.image_url.url;
+          break;
+        }
+        if (item.type === "image" && item.data) {
+          generatedImage = `data:image/png;base64,${item.data}`;
+          break;
+        }
+        if (item.inline_data?.data) {
+          const mimeType = item.inline_data.mime_type || "image/png";
+          generatedImage = `data:${mimeType};base64,${item.inline_data.data}`;
+          break;
+        }
+      }
     }
 
-    console.log("Image generation completed");
+    // Format 3: Direct base64 string in content
+    if (!generatedImage && typeof message?.content === "string" && message.content) {
+      if (message.content.startsWith("data:image")) {
+        generatedImage = message.content;
+      } else if (message.content.length > 1000 && /^[A-Za-z0-9+/=\s]+$/.test(message.content)) {
+        // Looks like raw base64 data
+        generatedImage = `data:image/png;base64,${message.content.replace(/\s/g, '')}`;
+      }
+    }
+
+    if (!generatedImage) {
+      const reasoning = message?.reasoning;
+      console.error("No image in response. Full response:", JSON.stringify(data));
+
+      return new Response(
+        JSON.stringify({
+          error: "AI failed to generate try-on image, please retry or use a different photo",
+          debug: reasoning ? reasoning.slice(0, 100) : "Unable to extract image"
+        }),
+        { status: 500, headers: { "Content-Type": "application/json", ...corsHeaders } }
+      );
+    }
+
+    console.log("Virtual try-on completed successfully");
 
     return new Response(
-      JSON.stringify({ 
+      JSON.stringify({
         success: true,
-        imageUrl: result, // Image URL or base64 data
-        prompt: prompt,
-        model: "gemini-3-pro-image-preview"
+        image: generatedImage
       }),
-      { 
-        status: 200,
-        headers: { "Content-Type": "application/json", ...corsHeaders } 
-      }
+      { status: 200, headers: { "Content-Type": "application/json", ...corsHeaders } }
     );
 
   } catch (error: any) {
-    console.error("Image generation error:", error);
+    console.error("Virtual try-on error:", error);
     return new Response(
-      JSON.stringify({ error: error.message || "Unknown error" }),
-      { 
-        status: 500, 
-        headers: { "Content-Type": "application/json", ...corsHeaders } 
-      }
+      JSON.stringify({ error: error.message || "Virtual try-on failed, please retry" }),
+      { status: 500, headers: { "Content-Type": "application/json", ...corsHeaders } }
     );
   }
 };
@@ -620,46 +711,50 @@ import { useState } from 'react';
 import { supabase } from '@/lib/supabase';
 import { toast } from 'sonner';
 
-export function ImageGenerator() {
-  const [isGenerating, setIsGenerating] = useState(false);
-  const [generatedImage, setGeneratedImage] = useState<string | null>(null);
+export function VirtualTryOn() {
+  const [isProcessing, setIsProcessing] = useState(false);
+  const [resultImage, setResultImage] = useState<string | null>(null);
 
-  const handleGenerate = async (prompt: string) => {
-    setIsGenerating(true);
+  const handleTryOn = async (personImage: string, clothingImage: string) => {
+    setIsProcessing(true);
 
     try {
-      const { data, error } = await supabase.functions.invoke('generate-image', {
+      const { data, error } = await supabase.functions.invoke('virtual-try-on', {
         body: { 
-          prompt,
-          options: {
-            size: '1024x1024',
-            quality: 'high'
-          }
+          personImage,  // Base64 or URL of person photo
+          clothingImage // Base64 or URL of clothing image
         }
       });
 
       if (error) throw error;
       if (data?.error) throw new Error(data.error);
 
-      setGeneratedImage(data.imageUrl);
-      toast.success("图片生成成功！");
+      setResultImage(data.image);
+      toast.success("Virtual try-on completed!");
     } catch (error) {
-      console.error("Image generation error:", error);
-      toast.error(error instanceof Error ? error.message : "图片生成失败");
+      console.error("Virtual try-on error:", error);
+      toast.error(error instanceof Error ? error.message : "Try-on failed, please retry");
     } finally {
-      setIsGenerating(false);
+      setIsProcessing(false);
     }
   };
 
   return (
     <div>
-      {generatedImage && <img src={generatedImage} alt="Generated" />}
-      {/* UI components */}
+      {resultImage && <img src={resultImage} alt="Try-on result" />}
+      {/* Upload components for person and clothing images */}
     </div>
   );
 }
 ```
 
+**Key Points for Multi-Image Generation:**
+
+1. **modalities parameter**: Set `modalities: ["text", "image"]` to enable image output
+2. **Multiple image_url**: Include multiple `image_url` objects in the content array
+3. **Response parsing**: Handle multiple response formats (content_parts, content array, direct base64)
+4. **Higher max_tokens**: Use `max_tokens: 8192` for image generation tasks
+
 ### Image Analysis Specialized Template
 
 Use this template when users need image analysis functionality.