feat: set google/gemma-4-31B-it as the default model and add support for it in the backend and frontend

backend_api.py

@@ -100,7 +100,8 @@ def get_cached_client(model_id: str, provider: str = "auto"):
 
 # Define models and languages here to avoid importing Gradio UI
 AVAILABLE_MODELS = [
-    {"name": "GLM-5.1 🚀", "id": "zai-org/GLM-5.1", "description": "GLM-5.1 - Latest powerful model via HuggingFace Router with Novita provider (Default)", "supports_images": False},
+    {"name": "Gemma-4-31B ✨", "id": "google/gemma-4-31B-it", "description": "Gemma-4-31B-it - Latest powerful model via HuggingFace Router with fastest provider (Default)", "supports_images": True},
+    {"name": "GLM-5.1 🚀", "id": "zai-org/GLM-5.1", "description": "GLM-5.1 - Powerful model via HuggingFace Router with Novita provider", "supports_images": False},
     {"name": "Qwen3.5-397B 🤖", "id": "Qwen/Qwen3.5-397B-A17B", "description": "Qwen3.5-397B-A17B - Latest powerful model via HuggingFace Router", "supports_images": True},
     {"name": "MiniMax-M2.5 🤖", "id": "MiniMaxAI/MiniMax-M2.5", "description": "MiniMax-M2.5 - Latest powerful coder model via HuggingFace Router with fastest provider", "supports_images": False},
     {"name": "GLM-5 🧠", "id": "zai-org/GLM-5", "description": "GLM-5 - New powerful reasoning model via HuggingFace Router", "supports_images": False},
@@ -201,7 +202,7 @@ async def startup_event():
 class CodeGenerationRequest(BaseModel):
     query: str
     language: str = "html"
-    model_id: str = "zai-org/GLM-5.1"
+    model_id: str = "google/gemma-4-31B-it"
     provider: str = "auto"
     history: List[List[str]] = []
     agent_mode: bool = False

backend_models.py

@@ -69,6 +69,14 @@ def get_inference_client(model_id: str, provider: str = "auto"):
             default_headers={"X-HF-Bill-To": "huggingface"}
         )
     
+    elif model_id.startswith("google/gemma"):
+        # Gemma models via HuggingFace Router
+        return OpenAI(
+            base_url="https://router.huggingface.co/v1",
+            api_key=os.getenv("HF_TOKEN"),
+            default_headers={"X-HF-Bill-To": "huggingface"}
+        )
+    
     elif model_id.startswith("Qwen/Qwen3.5"):
         # Qwen 3.5 models via HuggingFace Router
         return OpenAI(
@@ -139,6 +147,9 @@ def get_real_model_id(model_id: str) -> str:
         # Qwen3-Coder-Next needs Novita provider
         return "Qwen/Qwen3-Coder-Next:novita"
     
+    elif model_id == "google/gemma-4-31B-it":
+        return "google/gemma-4-31B-it:fastest"
+    
     elif model_id == "Qwen/Qwen3.5-397B-A17B":
         # Qwen3.5-397B-A17B needs fastest provider
         return "Qwen/Qwen3.5-397B-A17B:fastest"

frontend/src/app/page.tsx

@@ -17,7 +17,7 @@ export default function Home() {
 
   const [generatedCode, setGeneratedCode] = useState('');
   const [selectedLanguage, setSelectedLanguage] = useState<Language>('html');
-  const [selectedModel, setSelectedModel] = useState('zai-org/GLM-5.1');
+  const [selectedModel, setSelectedModel] = useState('google/gemma-4-31B-it');
   const [models, setModels] = useState<Model[]>([]);
   const [isGenerating, setIsGenerating] = useState(false);
   const [isAuthenticated, setIsAuthenticated] = useState(false);

frontend/src/components/ControlPanel.tsx

@@ -89,6 +89,7 @@ export default function ControlPanel({
   };
 
   const formatModelName = (name: string, id: string) => {
+    if (id === 'google/gemma-4-31B-it') return 'Gemma-4-31B ✨';
     if (id === 'zai-org/GLM-5.1') return 'GLM-5.1 🚀';
     if (id === 'Qwen/Qwen3.5-397B-A17B') return 'Qwen3.5-397B-A17B 🤖';
     return name;
@@ -201,7 +202,7 @@ export default function ControlPanel({
                   >
                     <div className="flex items-center justify-between gap-2">
                       <span className="text-sm text-[#f5f5f7]">{formatModelName(model.name, model.id)}</span>
-                      {['zai-org/GLM-5.1', 'Qwen/Qwen3.5-397B-A17B', 'MiniMaxAI/MiniMax-M2.5'].includes(model.id) && (
+                      {['google/gemma-4-31B-it', 'zai-org/GLM-5.1', 'Qwen/Qwen3.5-397B-A17B', 'MiniMaxAI/MiniMax-M2.5'].includes(model.id) && (
                         <span className="px-1.5 py-0.5 bg-gradient-to-r from-purple-500 to-pink-500 text-white text-[9px] font-bold rounded uppercase flex-shrink-0">
                           NEW
                         </span>

frontend/src/components/LandingPage.tsx

@@ -31,7 +31,7 @@ export default function LandingPage({
   onImport,
   isAuthenticated,
   initialLanguage = 'html',
-  initialModel = 'zai-org/GLM-5.1',
+  initialModel = 'google/gemma-4-31B-it',
   onAuthChange,
   setPendingPR,
   pendingPRRef
@@ -282,6 +282,7 @@ export default function LandingPage({
   };
 
   const formatModelName = (name: string, id: string) => {
+    if (id === 'google/gemma-4-31B-it') return 'Gemma-4-31B ✨';
     if (id === 'zai-org/GLM-5.1') return 'GLM-5.1 🚀';
     if (id === 'Qwen/Qwen3.5-397B-A17B') return 'Qwen3.5-397B-A17B 🤖';
     return name;
@@ -520,8 +521,8 @@ ${isGradio ? '\n\nIMPORTANT: Only output app.py with the redesigned UI (themes,
               if (onStart) {
                 // Pass duplicated space ID so auto-deploy updates it
                 console.log('[Redesign] Calling onStart with duplicated repo ID:', duplicatedRepoId);
-                console.log('[Redesign] Using zai-org/GLM-5.1 for redesign');
-                onStart(redesignPrompt, result.language || 'html', 'zai-org/GLM-5.1', undefined, duplicatedRepoId);
+                console.log('[Redesign] Using google/gemma-4-31B-it for redesign');
+                onStart(redesignPrompt, result.language || 'html', 'google/gemma-4-31B-it', undefined, duplicatedRepoId);
               }
             }, 100);
 
@@ -565,8 +566,8 @@ Note: After generating the redesign, I will create a Pull Request on the origina
 
             if (onStart) {
               console.log('[Redesign] Will create PR - not passing repo ID');
-              console.log('[Redesign] Using zai-org/GLM-5.1 for redesign');
-              onStart(redesignPrompt, result.language || 'html', 'zai-org/GLM-5.1', undefined, repoId, true); // Pass true for shouldCreatePR
+              console.log('[Redesign] Using google/gemma-4-31B-it for redesign');
+              onStart(redesignPrompt, result.language || 'html', 'google/gemma-4-31B-it', undefined, repoId, true); // Pass true for shouldCreatePR
             }
 
             console.log('[Redesign] Will create PR after code generation completes');