fix: add fallback to vanilla and loader

src/app/api/generate/route.ts

@@ -4,11 +4,15 @@ import { constructPrompt } from "@/utils/prompt";
 import { signHtml } from "@/server/signing";
 import {
 	PRIMARY_MODEL,
+	VANILLA_MODEL,
 	PRIMARY_VISION_MODEL,
 	FALLBACK_VISION_MODEL,
 	getFallbackModel,
 } from "@/utils/model-selection";
-import { MAINTENANCE_GENERATION } from "@/lib/settings";
+import {
+	MAINTENANCE_GENERATION,
+	MAINTENANCE_USE_VANILLA_MODEL,
+} from "@/lib/settings";
 
 const client = new Groq({
 	apiKey: process.env.GROQ_API_KEY,
@@ -80,7 +84,10 @@ async function tryCompletion(prompt: string, model: string) {
 
 async function generateWithFallback(prompt: string) {
 	try {
-		const chatCompletion = await tryCompletion(prompt, PRIMARY_MODEL);
+		const chatCompletion = await tryCompletion(
+			prompt,
+			MAINTENANCE_USE_VANILLA_MODEL ? VANILLA_MODEL : PRIMARY_MODEL,
+		);
 		return chatCompletion;
 	} catch (error) {
 		console.error("Primary model failed, trying fallback model:", error);

src/app/components/studio-view.tsx

@@ -20,6 +20,7 @@ import { useSearchParams } from "next/navigation";
 import toast from "react-hot-toast";
 import AppLogo from "@/components/AppLogo";
 import { useTheme } from "next-themes";
+import { cn } from "@/lib/utils";
 
 export default function StudioView() {
 	return (
@@ -46,6 +47,8 @@ function HomeContent() {
 		setMode,
 		sessionId,
 		setStudioMode,
+		isApplying,
+		isGenerating,
 	} = useStudio();
 	const { resolvedTheme } = useTheme();
 
@@ -89,7 +92,15 @@ function HomeContent() {
 			};
 			loadSourceVersion();
 		}
-	}, [searchParams, sessionId, setCurrentHtml, setHistory, setHistoryIndex, setMode, setStudioMode]);
+	}, [
+		searchParams,
+		sessionId,
+		setCurrentHtml,
+		setHistory,
+		setHistoryIndex,
+		setMode,
+		setStudioMode,
+	]);
 
 	return (
 		<main className="h-screen flex flex-col overflow-hidden">
@@ -132,6 +143,12 @@ function HomeContent() {
 				{/* Left Column - Code View */}
 				<div className="w-1/2 p-4 border-r overflow-auto lg:block hidden">
 					<div className="relative h-full">
+						<div
+							className={cn(
+								"absolute top-0 left-0 h-[2px] bg-groq animate-loader",
+								isGenerating || isApplying ? "opacity-100" : "opacity-0",
+							)}
+						/>
 						<SyntaxHighlighter
 							language="html"
 							style={resolvedTheme === "dark" ? vscDarkPlus : vs}
@@ -196,7 +213,9 @@ function HomeContent() {
 			<div className="flex flex-col md:flex-row w-full max-w-3xl mx-auto px-4 md:px-0">
 				{/* Logo section */}
 				<div className="md:w-1/2 md:pr-4 md:border-r flex items-center justify-center md:justify-end py-2">
-					<span className="hidden md:inline text-sm text-muted-foreground">Powered by</span>
+					<span className="hidden md:inline text-sm text-muted-foreground">
+						Powered by
+					</span>
 					<AppLogo className="scale-75" size={100} />
 				</div>
 				{/* Stats section */}
@@ -207,7 +226,7 @@ function HomeContent() {
 								{(history[historyIndex].usage.total_time * 1000).toFixed(0)}ms •{" "}
 								{Math.round(
 									history[historyIndex].usage.total_tokens /
-										history[historyIndex].usage.total_time
+										history[historyIndex].usage.total_time,
 								)}{" "}
 								tokens/sec •{" "}
 								<a

src/lib/settings.ts

@@ -1,2 +1,3 @@
 export const MAINTENANCE_MODE = false;
 export const MAINTENANCE_GENERATION = false;
+export const MAINTENANCE_USE_VANILLA_MODEL = false;

src/utils/model-selection.ts

@@ -1,9 +1,12 @@
 export function getFallbackModel(): string {
-    // Randomly choose between versatile models
-    return Math.random() < 0.5 ? 'llama-3.3-70b-versatile' : 'llama-3.1-70b-versatile';
+	// Randomly choose between versatile models
+	return Math.random() < 0.5
+		? "llama-3.3-70b-versatile"
+		: "llama-3.1-70b-versatile";
 }
 
-export const PRIMARY_MODEL = 'llama-3.3-70b-specdec';
+export const PRIMARY_MODEL = "llama-3.3-70b-specdec";
+export const VANILLA_MODEL = "llama-3.3-70b-versatile";
 
-export const PRIMARY_VISION_MODEL = 'llama-3.2-90b-vision-preview';
-export const FALLBACK_VISION_MODEL = 'llama-3.2-11b-vision-preview';
+export const PRIMARY_VISION_MODEL = "llama-3.2-90b-vision-preview";
+export const FALLBACK_VISION_MODEL = "llama-3.2-11b-vision-preview";

tailwind.config.ts

@@ -9,6 +9,9 @@ const config: Config = {
 	],
 	theme: {
 		extend: {
+			animation: {
+				loader: "loader 500ms linear infinite",
+			},
 			borderRadius: {
 				lg: "var(--radius)",
 				md: "calc(var(--radius) - 2px)",
@@ -63,6 +66,13 @@ const config: Config = {
 					"5": "hsl(var(--chart-5))",
 				},
 			},
+			keyframes: {
+				loader: {
+					"0%": { left: "0", width: "0" },
+					"50%": { left: "0", width: "100%" },
+					"100%": { left: "100%", width: "0" },
+				},
+			},
 		},
 	},
 	plugins: [require("tailwindcss-animate")],