add image model support

backend_api.py

@@ -98,19 +98,20 @@ def get_cached_client(model_id: str, provider: str = "auto"):
 
 # Define models and languages here to avoid importing Gradio UI
 AVAILABLE_MODELS = [
-    {"name": "DeepSeek V3.2", "id": "deepseek-ai/DeepSeek-V3.2-Exp", "description": "DeepSeek V3.2 Experimental - Default model for code generation via HuggingFace Router with Novita provider"},
-    {"name": "DeepSeek R1", "id": "deepseek-ai/DeepSeek-R1-0528", "description": "DeepSeek R1 model for code generation"},
-    {"name": "Gemini 3.0 Pro", "id": "gemini-3.0-pro", "description": "Google Gemini 3.0 Pro via Poe with advanced reasoning"},
-    {"name": "Grok 4.1 Fast", "id": "x-ai/grok-4.1-fast", "description": "Grok 4.1 Fast model via OpenRouter (20 req/min on free tier)"},
-    {"name": "MiniMax M2", "id": "MiniMaxAI/MiniMax-M2", "description": "MiniMax M2 model via HuggingFace InferenceClient with Novita provider"},
-    {"name": "GPT-5.1", "id": "gpt-5.1", "description": "OpenAI GPT-5.1 model via Poe for advanced code generation and general tasks"},
-    {"name": "GPT-5.1 Instant", "id": "gpt-5.1-instant", "description": "OpenAI GPT-5.1 Instant model via Poe for fast responses"},
-    {"name": "GPT-5.1 Codex", "id": "gpt-5.1-codex", "description": "OpenAI GPT-5.1 Codex model via Poe optimized for code generation"},
-    {"name": "Claude-Opus-4.5", "id": "claude-opus-4.5", "description": "Anthropic Claude Opus 4.5 via Poe (OpenAI-compatible)"},
-    {"name": "Claude-Sonnet-4.5", "id": "claude-sonnet-4.5", "description": "Anthropic Claude Sonnet 4.5 via Poe (OpenAI-compatible)"},
-    {"name": "Claude-Haiku-4.5", "id": "claude-haiku-4.5", "description": "Anthropic Claude Haiku 4.5 via Poe (OpenAI-compatible)"},
-    {"name": "Kimi K2 Thinking", "id": "moonshotai/Kimi-K2-Thinking", "description": "Moonshot Kimi K2 Thinking model via HuggingFace with Together AI provider"},
-    {"name": "GLM-4.6", "id": "zai-org/GLM-4.6", "description": "GLM-4.6 model via HuggingFace with Cerebras provider"},
+    {"name": "GLM-4.6V 👁️", "id": "zai-org/GLM-4.6V:zai-org", "description": "GLM-4.6V vision model - supports image uploads for visual understanding (Default)", "supports_images": True},
+    {"name": "DeepSeek V3.2", "id": "deepseek-ai/DeepSeek-V3.2-Exp", "description": "DeepSeek V3.2 Experimental - Fast model for code generation via HuggingFace Router with Novita provider", "supports_images": False},
+    {"name": "DeepSeek R1", "id": "deepseek-ai/DeepSeek-R1-0528", "description": "DeepSeek R1 model for code generation", "supports_images": False},
+    {"name": "Gemini 3.0 Pro", "id": "gemini-3.0-pro", "description": "Google Gemini 3.0 Pro via Poe with advanced reasoning", "supports_images": False},
+    {"name": "Grok 4.1 Fast", "id": "x-ai/grok-4.1-fast", "description": "Grok 4.1 Fast model via OpenRouter (20 req/min on free tier)", "supports_images": False},
+    {"name": "MiniMax M2", "id": "MiniMaxAI/MiniMax-M2", "description": "MiniMax M2 model via HuggingFace InferenceClient with Novita provider", "supports_images": False},
+    {"name": "GPT-5.1", "id": "gpt-5.1", "description": "OpenAI GPT-5.1 model via Poe for advanced code generation and general tasks", "supports_images": False},
+    {"name": "GPT-5.1 Instant", "id": "gpt-5.1-instant", "description": "OpenAI GPT-5.1 Instant model via Poe for fast responses", "supports_images": False},
+    {"name": "GPT-5.1 Codex", "id": "gpt-5.1-codex", "description": "OpenAI GPT-5.1 Codex model via Poe optimized for code generation", "supports_images": False},
+    {"name": "Claude-Opus-4.5", "id": "claude-opus-4.5", "description": "Anthropic Claude Opus 4.5 via Poe (OpenAI-compatible)", "supports_images": False},
+    {"name": "Claude-Sonnet-4.5", "id": "claude-sonnet-4.5", "description": "Anthropic Claude Sonnet 4.5 via Poe (OpenAI-compatible)", "supports_images": False},
+    {"name": "Claude-Haiku-4.5", "id": "claude-haiku-4.5", "description": "Anthropic Claude Haiku 4.5 via Poe (OpenAI-compatible)", "supports_images": False},
+    {"name": "Kimi K2 Thinking", "id": "moonshotai/Kimi-K2-Thinking", "description": "Moonshot Kimi K2 Thinking model via HuggingFace with Together AI provider", "supports_images": False},
+    {"name": "GLM-4.6", "id": "zai-org/GLM-4.6", "description": "GLM-4.6 model via HuggingFace with Cerebras provider", "supports_images": False},
 ]
 
 # Cache model lookup for faster access (built after AVAILABLE_MODELS is defined)
@@ -197,12 +198,13 @@ async def startup_event():
 class CodeGenerationRequest(BaseModel):
     query: str
     language: str = "html"
-    model_id: str = "claude-opus-4.5"
+    model_id: str = "zai-org/GLM-4.6V:zai-org"
     provider: str = "auto"
     history: List[List[str]] = []
     agent_mode: bool = False
     existing_repo_id: Optional[str] = None  # For auto-deploy to update existing space
     skip_auto_deploy: bool = False  # Skip auto-deploy (for PR creation)
+    image_url: Optional[str] = None  # For vision models like GLM-4.6V
 
 
 class DeploymentRequest(BaseModel):
@@ -779,11 +781,32 @@ async def generate_code(
             actual_model_id = get_real_model_id(selected_model_id)
             
             # Prepare messages (optimized - no string concatenation in hot path)
-            user_content = f"Generate a {language} application: {query}"
-            messages = [
-                {"role": "system", "content": system_prompt},
-                {"role": "user", "content": user_content}
-            ]
+            # Check if this is a vision model and we have an image
+            if request.image_url and selected_model_id == "zai-org/GLM-4.6V:zai-org":
+                # Vision model with image - use multi-modal format
+                user_content = [
+                    {
+                        "type": "text",
+                        "text": f"Generate a {language} application: {query}"
+                    },
+                    {
+                        "type": "image_url",
+                        "image_url": {
+                            "url": request.image_url
+                        }
+                    }
+                ]
+                messages = [
+                    {"role": "system", "content": system_prompt},
+                    {"role": "user", "content": user_content}
+                ]
+            else:
+                # Regular text-only model
+                user_content = f"Generate a {language} application: {query}"
+                messages = [
+                    {"role": "system", "content": system_prompt},
+                    {"role": "user", "content": user_content}
+                ]
             
             # Stream the response
             try:

frontend/src/app/page.tsx

@@ -9,7 +9,7 @@ import CodeEditor from '@/components/CodeEditor';
 import ControlPanel from '@/components/ControlPanel';
 import { apiClient } from '@/lib/api';
 import { isAuthenticated as checkIsAuthenticated, getStoredToken } from '@/lib/auth';
-import type { Message, Language, CodeGenerationRequest } from '@/types';
+import type { Message, Language, CodeGenerationRequest, Model } from '@/types';
 
 export default function Home() {
   // Initialize messages as empty array (will load from localStorage in useEffect)
@@ -17,7 +17,8 @@ export default function Home() {
   
   const [generatedCode, setGeneratedCode] = useState('');
   const [selectedLanguage, setSelectedLanguage] = useState<Language>('html');
-  const [selectedModel, setSelectedModel] = useState('deepseek-ai/DeepSeek-V3.2-Exp');
+  const [selectedModel, setSelectedModel] = useState('zai-org/GLM-4.6V:zai-org');
+  const [models, setModels] = useState<Model[]>([]);
   const [isGenerating, setIsGenerating] = useState(false);
   const [isAuthenticated, setIsAuthenticated] = useState(false);
   const [currentRepoId, setCurrentRepoId] = useState<string | null>(null);  // Track imported/deployed space
@@ -43,14 +44,29 @@ export default function Home() {
     console.log('[App] 🔵 currentRepoId changed to:', currentRepoId);
   }, [currentRepoId]);
 
-  // Clear cache on app startup to ensure fresh data
+  // Clear cache on app startup to ensure fresh data and load models
   useEffect(() => {
     if (typeof window !== 'undefined') {
       console.log('[Cache] Clearing models and languages cache on app startup');
       localStorage.removeItem('anycoder_models');
       localStorage.removeItem('anycoder_languages');
+      
+      // Load models for checking image support
+      loadModels();
     }
   }, []); // Run once on mount
+  
+  const loadModels = async () => {
+    try {
+      const modelsList = await apiClient.getModels();
+      setModels(modelsList);
+    } catch (error) {
+      console.error('Failed to load models:', error);
+    }
+  };
+  
+  // Check if current model supports images
+  const currentModelSupportsImages = models.find(m => m.id === selectedModel)?.supports_images || false;
 
   // Load messages from localStorage on mount (client-side only to avoid hydration issues)
   useEffect(() => {
@@ -239,7 +255,7 @@ export default function Home() {
     }
   };
 
-  const handleSendMessage = async (message: string, overrideLanguage?: Language, overrideModel?: string, overrideRepoId?: string, shouldCreatePR?: boolean) => {
+  const handleSendMessage = async (message: string, imageUrl?: string, overrideLanguage?: Language, overrideModel?: string, overrideRepoId?: string, shouldCreatePR?: boolean) => {
     if (!isAuthenticated) {
       alert('Please sign in with HuggingFace first! Click the "Sign in with Hugging Face" button in the header.');
       return;
@@ -277,6 +293,7 @@ export default function Home() {
       role: 'user',
       content: message,
       timestamp: new Date().toISOString(),
+      image_url: imageUrl,
     };
     setMessages((prev) => [...prev, userMessage]);
     setIsGenerating(true);
@@ -303,6 +320,7 @@ export default function Home() {
       agent_mode: false,
       existing_repo_id: effectiveRepoId,  // Pass duplicated/imported space ID for auto-deploy
       skip_auto_deploy: !!shouldCreatePR, // Skip auto-deploy if creating PR
+      image_url: imageUrl,  // For vision models like GLM-4.6V
     };
 
     const assistantMessage: Message = {
@@ -798,7 +816,7 @@ export default function Home() {
     
     // Send the message with the selected language and model
     // Don't pass repoId to handleSendMessage when creating PR (we want to generate code first, then create PR)
-    await handleSendMessage(prompt, language, modelId, shouldCreatePR ? undefined : repoId, shouldCreatePR);
+    await handleSendMessage(prompt, undefined, language, modelId, shouldCreatePR ? undefined : repoId, shouldCreatePR);
   };
 
   // Resize handlers for chat sidebar (desktop only)
@@ -906,6 +924,7 @@ export default function Home() {
               onSendMessage={handleSendMessage}
               isGenerating={isGenerating}
               isAuthenticated={isAuthenticated}
+              supportsImages={currentModelSupportsImages}
             />
           </div>
         </div>

frontend/src/components/ChatInterface.tsx

@@ -4,16 +4,21 @@ import { useState, useRef, useEffect } from 'react';
 import type { Message } from '@/types';
 import ReactMarkdown from 'react-markdown';
 import remarkGfm from 'remark-gfm';
+import Image from 'next/image';
 
 interface ChatInterfaceProps {
   messages: Message[];
-  onSendMessage: (message: string) => void;
+  onSendMessage: (message: string, imageUrl?: string) => void;
   isGenerating: boolean;
   isAuthenticated?: boolean;
+  supportsImages?: boolean;
 }
 
-export default function ChatInterface({ messages, onSendMessage, isGenerating, isAuthenticated = false }: ChatInterfaceProps) {
+export default function ChatInterface({ messages, onSendMessage, isGenerating, isAuthenticated = false, supportsImages = false }: ChatInterfaceProps) {
   const [input, setInput] = useState('');
+  const [uploadedImageUrl, setUploadedImageUrl] = useState<string | null>(null);
+  const [uploadedImageFile, setUploadedImageFile] = useState<File | null>(null);
+  const fileInputRef = useRef<HTMLInputElement>(null);
   const messagesEndRef = useRef<HTMLDivElement>(null);
 
   const scrollToBottom = () => {
@@ -27,8 +32,32 @@ export default function ChatInterface({ messages, onSendMessage, isGenerating, i
   const handleSubmit = (e: React.FormEvent) => {
     e.preventDefault();
     if (input.trim() && !isGenerating) {
-      onSendMessage(input);
+      onSendMessage(input, uploadedImageUrl || undefined);
       setInput('');
+      setUploadedImageUrl(null);
+      setUploadedImageFile(null);
+    }
+  };
+
+  const handleImageUpload = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const file = e.target.files?.[0];
+    if (file) {
+      // Create a data URL for the image
+      const reader = new FileReader();
+      reader.onload = (event) => {
+        const imageUrl = event.target?.result as string;
+        setUploadedImageUrl(imageUrl);
+        setUploadedImageFile(file);
+      };
+      reader.readAsDataURL(file);
+    }
+  };
+
+  const removeImage = () => {
+    setUploadedImageUrl(null);
+    setUploadedImageFile(null);
+    if (fileInputRef.current) {
+      fileInputRef.current.value = '';
     }
   };
 
@@ -63,6 +92,18 @@ export default function ChatInterface({ messages, onSendMessage, isGenerating, i
                     : 'bg-[#2d2d2f] text-[#f5f5f7]'
                 }`}
               >
+                {message.image_url && message.role === 'user' && (
+                  <div className="mb-2">
+                    <Image 
+                      src={message.image_url} 
+                      alt="Uploaded image" 
+                      width={200} 
+                      height={200} 
+                      className="rounded-lg object-cover max-w-full h-auto"
+                      unoptimized
+                    />
+                  </div>
+                )}
                 <div className="text-sm leading-relaxed">
                   {message.role === 'assistant' ? (
                     <ReactMarkdown 
@@ -92,6 +133,27 @@ export default function ChatInterface({ messages, onSendMessage, isGenerating, i
 
       {/* Input */}
       <div className="border-t border-[#424245]/30 p-3 bg-[#000000]">
+        {/* Image Preview */}
+        {uploadedImageUrl && (
+          <div className="mb-2 relative inline-block">
+            <Image 
+              src={uploadedImageUrl} 
+              alt="Upload preview" 
+              width={120} 
+              height={120} 
+              className="rounded-lg object-cover"
+              unoptimized
+            />
+            <button
+              type="button"
+              onClick={removeImage}
+              className="absolute -top-2 -right-2 w-6 h-6 bg-red-500 text-white rounded-full hover:bg-red-600 transition-all flex items-center justify-center text-xs font-bold"
+            >
+              ×
+            </button>
+          </div>
+        )}
+        
         <form onSubmit={handleSubmit} className="flex items-center gap-2">
           <input
             type="text"
@@ -101,6 +163,32 @@ export default function ChatInterface({ messages, onSendMessage, isGenerating, i
             disabled={isGenerating || !isAuthenticated}
             className="flex-1 px-4 py-2.5 bg-[#2d2d2f] text-[#f5f5f7] text-sm border border-[#424245]/50 rounded-full focus:outline-none focus:border-[#424245] disabled:opacity-40 disabled:cursor-not-allowed placeholder-[#86868b]"
           />
+          
+          {/* Image Upload Button (only show if model supports images) */}
+          {supportsImages && (
+            <>
+              <input
+                ref={fileInputRef}
+                type="file"
+                accept="image/*"
+                onChange={handleImageUpload}
+                className="hidden"
+                disabled={isGenerating || !isAuthenticated}
+              />
+              <button
+                type="button"
+                onClick={() => fileInputRef.current?.click()}
+                disabled={isGenerating || !isAuthenticated}
+                className="p-2.5 bg-[#2d2d2f] text-[#f5f5f7] rounded-full hover:bg-[#424245] disabled:opacity-40 disabled:cursor-not-allowed transition-all active:scale-95 flex-shrink-0"
+                title="Upload image"
+              >
+                <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24" strokeWidth={2.5}>
+                  <path strokeLinecap="round" strokeLinejoin="round" d="M2.25 15.75l5.159-5.159a2.25 2.25 0 013.182 0l5.159 5.159m-1.5-1.5l1.409-1.409a2.25 2.25 0 013.182 0l2.909 2.909m-18 3.75h16.5a1.5 1.5 0 001.5-1.5V6a1.5 1.5 0 00-1.5-1.5H3.75A1.5 1.5 0 002.25 6v12a1.5 1.5 0 001.5 1.5zm10.5-11.25h.008v.008h-.008V8.25zm.375 0a.375.375 0 11-.75 0 .375.375 0 01.75 0z" />
+                </svg>
+              </button>
+            </>
+          )}
+          
           <button
             type="submit"
             disabled={isGenerating || !input.trim() || !isAuthenticated}

frontend/src/types/index.ts

@@ -4,12 +4,14 @@ export interface Model {
   name: string;
   id: string;
   description: string;
+  supports_images?: boolean;
 }
 
 export interface Message {
   role: 'user' | 'assistant' | 'system';
   content: string;
   timestamp?: string;
+  image_url?: string;  // For vision models
 }
 
 export interface CodeGenerationRequest {
@@ -21,6 +23,7 @@ export interface CodeGenerationRequest {
   agent_mode: boolean;
   existing_repo_id?: string;  // For auto-deploy to update existing space
   skip_auto_deploy?: boolean;  // Skip auto-deploy (for PR creation)
+  image_url?: string;  // For vision models like GLM-4.6V
 }
 
 export interface CodeGenerationResponse {