refactor: gpu support component and related api routers; update template environment variables

apps/dokploy/components/dashboard/settings/servers/gpu-support.tsx

@@ -1,12 +1,18 @@
-import { Button } from '@/components/ui/button';
+import { AlertBlock } from "@/components/shared/alert-block";
-import { useState } from 'react';
+import { DialogAction } from "@/components/shared/dialog-action";
-import { api } from '@/utils/api';
+import { Button } from "@/components/ui/button";
-import { toast } from 'sonner';
+import {
-import { TRPCClientError } from '@trpc/client';
+	Card,
-import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
+	CardContent,
-import { DialogAction } from '@/components/shared/dialog-action';
+	CardDescription,
-import { AlertBlock } from '@/components/shared/alert-block';
+	CardHeader,
-import { Cpu, CheckCircle2, XCircle, Loader2 } from 'lucide-react';
+	CardTitle,
+} from "@/components/ui/card";
+import { api } from "@/utils/api";
+import { TRPCClientError } from "@trpc/client";
+import { CheckCircle2, Cpu, Loader2, XCircle } from "lucide-react";
+import { useState } from "react";
+import { toast } from "sonner";
 
 interface GPUSupportProps {
 	serverId?: string;
@@ -16,48 +22,51 @@ export function GPUSupport({ serverId }: GPUSupportProps) {
 	const [isLoading, setIsLoading] = useState(false);
 	const utils = api.useContext();
 
-  const { data: gpuStatus, isLoading: isChecking } = api.settings.checkGPUStatus.useQuery(
+	const { data: gpuStatus, isLoading: isChecking } =
+		api.settings.checkGPUStatus.useQuery(
 			{ serverId },
 			{
 				enabled: !!serverId,
-      refetchInterval: 5000
+				refetchInterval: 5000,
-    }
+			},
 		);
 
-const setupGPU = api.settings.setupGPU.useMutation({
+	const setupGPU = api.settings.setupGPU.useMutation({
 		onMutate: () => {
 			setIsLoading(true);
 		},
 		onSuccess: async () => {
-    toast.success('GPU support enabled successfully');
+			toast.success("GPU support enabled successfully");
 			setIsLoading(false);
 
 			await Promise.all([
 				utils.settings.checkGPUStatus.invalidate({ serverId }),
-      utils.server.invalidate()
+				utils.server.invalidate(),
 			]);
 		},
 		onError: (error) => {
 			if (error instanceof TRPCClientError) {
 				const errorMessage = error.message;
-      if (errorMessage.includes('permission denied')) {
+				if (errorMessage.includes("permission denied")) {
-        toast.error('Permission denied. Please ensure proper sudo access.');
+					toast.error("Permission denied. Please ensure proper sudo access.");
-      } else if (errorMessage.includes('Failed to configure GPU')) {
+				} else if (errorMessage.includes("Failed to configure GPU")) {
-        toast.error('GPU configuration failed. Please check system requirements.');
+					toast.error(
+						"GPU configuration failed. Please check system requirements.",
+					);
 				} else {
 					toast.error(errorMessage);
 				}
 			} else {
-      toast.error('Failed to enable GPU support. Please check server logs.');
+				toast.error("Failed to enable GPU support. Please check server logs.");
 			}
 
 			setIsLoading(false);
-  }
+		},
-});
+	});
 
 	const handleEnableGPU = async () => {
 		if (!serverId) {
-      toast.error('No server selected');
+			toast.error("No server selected");
 			return;
 		}
 
@@ -79,7 +88,9 @@ const setupGPU = api.settings.setupGPU.useMutation({
 									<Cpu className="size-5" />
 									<CardTitle className="text-xl">GPU Configuration</CardTitle>
 								</div>
-                <CardDescription>Configure and monitor GPU support</CardDescription>
+								<CardDescription>
+									Configure and monitor GPU support
+								</CardDescription>
 							</div>
 							<DialogAction
 								title="Enable GPU Support?"
@@ -90,13 +101,11 @@ const setupGPU = api.settings.setupGPU.useMutation({
 									isLoading={isLoading}
 									disabled={isLoading || !serverId || isChecking}
 								>
-                  {isLoading ? (
+									{isLoading
-                    'Enabling GPU...'
+										? "Enabling GPU..."
-                  ) : gpuStatus?.swarmEnabled ? (
+										: gpuStatus?.swarmEnabled
-                    'Reconfigure GPU'
+											? "Reconfigure GPU"
-                  ) : (
+											: "Enable GPU"}
-                    'Enable GPU'
-                  )}
 								</Button>
 							</DialogAction>
 						</div>
@@ -122,21 +131,27 @@ const setupGPU = api.settings.setupGPU.useMutation({
 								{/* Prerequisites Section */}
 								<div className="border rounded-lg p-4">
 									<h3 className="text-lg font-semibold mb-1">Prerequisites</h3>
-                  <p className="text-sm text-muted-foreground mb-4">Shows all software checks and available hardware</p>
+									<p className="text-sm text-muted-foreground mb-4">
+										Shows all software checks and available hardware
+									</p>
 									<div className="grid gap-2.5">
 										<StatusRow
 											label="NVIDIA Driver"
 											isEnabled={gpuStatus?.driverInstalled}
-                        description={gpuStatus?.driverVersion ? `Installed (v${gpuStatus.driverVersion})` : 'Not Installed'}
+											description={
+												gpuStatus?.driverVersion
+													? `Installed (v${gpuStatus.driverVersion})`
+													: "Not Installed"
+											}
 										/>
 										<StatusRow
 											label="GPU Model"
-                        value={gpuStatus?.gpuModel || 'Not Detected'}
+											value={gpuStatus?.gpuModel || "Not Detected"}
 											showIcon={false}
 										/>
 										<StatusRow
 											label="GPU Memory"
-                        value={gpuStatus?.memoryInfo || 'Not Available'}
+											value={gpuStatus?.memoryInfo || "Not Available"}
 											showIcon={false}
 										/>
 										<StatusRow
@@ -147,32 +162,50 @@ const setupGPU = api.settings.setupGPU.useMutation({
 										<StatusRow
 											label="CUDA Support"
 											isEnabled={gpuStatus?.cudaSupport}
-                        description={gpuStatus?.cudaVersion ? `Available (v${gpuStatus.cudaVersion})` : 'Not Available'}
+											description={
+												gpuStatus?.cudaVersion
+													? `Available (v${gpuStatus.cudaVersion})`
+													: "Not Available"
+											}
 										/>
 										<StatusRow
 											label="NVIDIA Container Runtime"
 											isEnabled={gpuStatus?.runtimeInstalled}
-                        description={gpuStatus?.runtimeInstalled ? 'Installed' : 'Not Installed'}
+											description={
+												gpuStatus?.runtimeInstalled
+													? "Installed"
+													: "Not Installed"
+											}
 										/>
 									</div>
 								</div>
 
 								{/* Configuration Status */}
 								<div className="border rounded-lg p-4">
-                  <h3 className="text-lg font-semibold mb-1">Docker Swarm GPU Status</h3>
+									<h3 className="text-lg font-semibold mb-1">
-                  <p className="text-sm text-muted-foreground mb-4">Shows the configuration state that changes with the Enable GPU</p>
+										Docker Swarm GPU Status
+									</h3>
+									<p className="text-sm text-muted-foreground mb-4">
+										Shows the configuration state that changes with the Enable
+										GPU
+									</p>
 									<div className="grid gap-2.5">
 										<StatusRow
 											label="Runtime Configuration"
 											isEnabled={gpuStatus?.runtimeConfigured}
-                        description={gpuStatus?.runtimeConfigured ? 'Default Runtime' : 'Not Default Runtime'}
+											description={
+												gpuStatus?.runtimeConfigured
+													? "Default Runtime"
+													: "Not Default Runtime"
+											}
 										/>
 										<StatusRow
 											label="Swarm GPU Support"
 											isEnabled={gpuStatus?.swarmEnabled}
-                        description={gpuStatus?.swarmEnabled 
+											description={
-                          ? `Enabled (${gpuStatus.gpuResources} GPU${gpuStatus.gpuResources !== 1 ? 's' : ''})` 
+												gpuStatus?.swarmEnabled
-                          : 'Not Enabled'
+													? `Enabled (${gpuStatus.gpuResources} GPU${gpuStatus.gpuResources !== 1 ? "s" : ""})`
+													: "Not Enabled"
 											}
 										/>
 									</div>
@@ -194,7 +227,13 @@ interface StatusRowProps {
 	showIcon?: boolean;
 }
 
-function StatusRow({ label, isEnabled, description, value, showIcon = true }: StatusRowProps) {
+function StatusRow({
+	label,
+	isEnabled,
+	description,
+	value,
+	showIcon = true,
+}: StatusRowProps) {
 	return (
 		<div className="flex items-center justify-between">
 			<span className="text-sm">{label}</span>
@@ -206,8 +245,10 @@ function StatusRow({ label, isEnabled, description, value, showIcon = true }: St
 						) : (
 							<XCircle className="size-4 text-red-500" />
 						)}
-            <span className={`text-sm ${isEnabled ? 'text-green-500' : 'text-red-500'}`}>
+						<span
-              {description || (isEnabled ? 'Installed' : 'Not Installed')}
+							className={`text-sm ${isEnabled ? "text-green-500" : "text-red-500"}`}
+						>
+							{description || (isEnabled ? "Installed" : "Not Installed")}
 						</span>
 					</>
 				) : (

apps/dokploy/server/api/routers/settings.ts

@@ -52,10 +52,7 @@ import {
 	writeMainConfig,
 	writeTraefikConfigInPath,
 } from "@dokploy/server";
-import {
+import { checkGPUStatus, setupGPUSupport } from "@dokploy/server";
-	checkGPUStatus,
-	setupGPUSupport,
-} from "@dokploy/server";
 import { generateOpenApiDocument } from "@dokploy/trpc-openapi";
 import { TRPCError } from "@trpc/server";
 import { sql } from "drizzle-orm";

apps/dokploy/templates/blender/index.ts

@@ -19,12 +19,12 @@ export function generate(schema: Schema): Template {
 	];
 
 	const envs = [
-		`PUID=1000`,
+		"PUID=1000",
-		`PGID=1000`,
+		"PGID=1000",
-		`TZ=Etc/UTC`,
+		"TZ=Etc/UTC",
-		`SUBFOLDER=/`,
+		"SUBFOLDER=/",
-		`NVIDIA_VISIBLE_DEVICES=all`,
+		"NVIDIA_VISIBLE_DEVICES=all",
-		`NVIDIA_DRIVER_CAPABILITIES=all`,
+		"NVIDIA_DRIVER_CAPABILITIES=all",
 	];
 
 	return {