Community tools

chart/env/prod.yaml

@@ -349,53 +349,48 @@ envVars:
   TOOLS: >
     [
       {
+        "_id": "000000000000000000000001",
         "displayName": "Image Generation",
         "description" : "Use this tool to generate images based on a prompt.",
         "color" : "yellow",
-        "icon" : "image",
+        "icon" : "camera",
         "isOnByDefault" : true,
         "baseUrl" : "ByteDance/Hyper-SDXL-1Step-T2I" ,
-        "functions" : [
+        "name" : "image_generation",
+        "endpoint" : "/process_image",
+        "inputs" : [
           {
-            "name" : "image_generation",
-            "displayName" : "Image Generation",
-            "description" : "Generate an image based on a prompt.",
-            "endpoint" : "/process_image",
-            "inputs" : [
-              {
-              "name" : "numberOfImages", 
-              "description" : "Number of images to generate, between 1 and 8",
-              "required" : false,
-              "default" : 1,
-              "type" : "int"
-              },
-              {
-                "name": "width",
-                "description": "Width of the generated image",
-                "required": false,
-                "default": 512,
-                "type": "int"
-              },
-              {
-                "name": "height",
-                "description": "Height of the generated image",
-                "required": false,
-                "default": 512,
-                "type": "int"
-              },
-              {
-                "name": "prompt",
-                "description": "A prompt to generate an image from",
-                "required": true,
-                "type": "str"
-              },
-            ],
-            "outputPath": "$[*][*].image.url",
-            "outputType": "file",
-            "outputMimeType": "image/webp", 
-            "showOutput": true
-          }
-        ]
+          "name" : "num_images", 
+          "description" : "Number of images to generate, between 1 and 8",
+          "paramType" : "optional",
+          "default" : 1,
+          "type" : "int"
+          },
+          {
+            "name": "height",
+            "description": "Height of the generated image",
+            "paramType": "optional",
+            "default": 512,
+            "type": "int"
+          },
+                    {
+            "name": "width",
+            "description": "Width of the generated image",
+            "paramType": "optional",
+            "default": 512,
+            "type": "int"
+          },
+          {
+            "name": "prompt",
+            "description": "A prompt to generate an image from",
+            "paramType": "required",
+            "type": "str"
+          },
+        ],
+        "outputPath": "$[*][*].image.url",
+        "outputType": "file",
+        "outputMimeType": "image/webp", 
+        "showOutput": true
       }
     ]
 externalSecrets:

scripts/populate.ts

@@ -14,6 +14,7 @@ import type { User } from "../src/lib/types/User";
 import type { Assistant } from "../src/lib/types/Assistant";
 import type { Conversation } from "../src/lib/types/Conversation";
 import type { Settings } from "../src/lib/types/Settings";
+import type { CommunityToolDB, ToolLogoColor, ToolLogoIcon } from "../src/lib/types/Tool";
 import { defaultEmbeddingModel } from "../src/lib/server/embeddingModels.ts";
 import { Message } from "../src/lib/types/Message.ts";
 
@@ -29,7 +30,7 @@ rl.on("close", function () {
 	process.exit(0);
 });
 
-const possibleFlags = ["reset", "all", "users", "settings", "assistants", "conversations"];
+const possibleFlags = ["reset", "all", "users", "settings", "assistants", "conversations", "tools"];
 const argv = minimist(process.argv.slice(2));
 const flags = argv["_"].filter((flag) => possibleFlags.includes(flag));
 
@@ -113,6 +114,7 @@ async function seed() {
 		await collections.settings.deleteMany({});
 		await collections.assistants.deleteMany({});
 		await collections.conversations.deleteMany({});
+		await collections.tools.deleteMany({});
 		console.log("Reset done");
 	}
 
@@ -239,6 +241,78 @@ async function seed() {
 		);
 		console.log("Done creating conversations.");
 	}
+
+	// generate Community Tools
+	if (flags.includes("tools") || flags.includes("all")) {
+		const tools = await Promise.all(
+			faker.helpers.multiple(
+				() => {
+					const _id = new ObjectId();
+					const displayName = faker.company.catchPhrase();
+					const description = faker.company.catchPhrase();
+					const color = faker.helpers.arrayElement([
+						"purple",
+						"blue",
+						"green",
+						"yellow",
+						"red",
+					]) satisfies ToolLogoColor;
+					const icon = faker.helpers.arrayElement([
+						"wikis",
+						"tools",
+						"camera",
+						"code",
+						"email",
+						"cloud",
+						"terminal",
+						"game",
+						"chat",
+						"speaker",
+						"video",
+					]) satisfies ToolLogoIcon;
+					const baseUrl = faker.helpers.arrayElement([
+						"stabilityai/stable-diffusion-3-medium",
+						"multimodalart/cosxl",
+						"gokaygokay/SD3-Long-Captioner",
+						"xichenhku/MimicBrush",
+					]);
+
+					// keep empty for populate for now
+
+					const user: User = faker.helpers.arrayElement(users);
+					const createdById = user._id;
+					const createdByName = user.username ?? user.name;
+
+					return {
+						type: "community" as const,
+						_id,
+						createdById,
+						createdByName,
+						displayName,
+						name: displayName.toLowerCase().replace(" ", "_"),
+						endpoint: "/test",
+						description,
+						color,
+						icon,
+						baseUrl,
+						inputs: [],
+						outputPath: null,
+						outputType: "str" as const,
+						showOutput: false,
+						useCount: faker.number.int({ min: 0, max: 100000 }),
+						last24HoursUseCount: faker.number.int({ min: 0, max: 1000 }),
+						createdAt: faker.date.recent({ days: 30 }),
+						updatedAt: faker.date.recent({ days: 30 }),
+						searchTokens: generateSearchTokens(displayName),
+						featured: faker.datatype.boolean(),
+					};
+				},
+				{ count: faker.number.int({ min: 10, max: 200 }) }
+			)
+		);
+
+		await collections.tools.insertMany(tools satisfies CommunityToolDB[]);
+	}
 }
 
 // run seed

src/lib/buildPrompt.ts

@@ -1,10 +1,10 @@
 import type { EndpointParameters } from "./server/endpoints/endpoints";
 import type { BackendModel } from "./server/models";
-import type { ToolFunction, ToolResult } from "./types/Tool";
+import type { Tool, ToolResult } from "./types/Tool";
 
 type buildPromptOptions = Pick<EndpointParameters, "messages" | "preprompt" | "continueMessage"> & {
 	model: BackendModel;
-	tools?: ToolFunction[];
+	tools?: Tool[];
 	toolResults?: ToolResult[];
 };
 

src/lib/components/NavMenu.svelte

@@ -134,12 +134,18 @@
 			class="flex h-9 flex-none items-center gap-1.5 rounded-lg pl-2.5 pr-2 text-gray-500 hover:bg-gray-100 dark:text-gray-400 dark:hover:bg-gray-700"
 		>
 			Assistants
-			<span
-				class="ml-auto rounded-full border border-gray-300 px-2 py-0.5 text-xs text-gray-500 dark:border-gray-500 dark:text-gray-400"
-				>New</span
-			>
 		</a>
 	{/if}
+	<a
+		href="{base}/tools"
+		class="flex h-9 flex-none items-center gap-1.5 rounded-lg pl-2.5 pr-2 text-gray-500 hover:bg-gray-100 dark:text-gray-400 dark:hover:bg-gray-700"
+	>
+		Tools
+		<span
+			class="ml-auto rounded-full border border-purple-300 px-2 py-0.5 text-xs text-purple-500 dark:border-purple-500 dark:text-purple-400"
+			>New</span
+		>
+	</a>
 
 	<a
 		href="{base}/settings"

src/lib/components/ToolLogo.svelte

@@ -0,0 +1,101 @@
+<script lang="ts">
+	import CarbonWikis from "~icons/carbon/wikis";
+	import CarbonTools from "~icons/carbon/tools";
+	import CarbonCamera from "~icons/carbon/camera";
+	import CarbonCode from "~icons/carbon/code";
+	import CarbonEmail from "~icons/carbon/email";
+	import CarbonCloud from "~icons/carbon/cloud-upload";
+	import CarbonTerminal from "~icons/carbon/terminal";
+	import CarbonGame from "~icons/carbon/game-console";
+	import CarbonChat from "~icons/carbon/chat-bot";
+	import CarbonSpeaker from "~icons/carbon/volume-up";
+	import CarbonVideo from "~icons/carbon/video";
+
+	export let color: string;
+	export let icon: string;
+	export let size: "md" | "lg" = "md";
+
+	$: gradientColor = (() => {
+		switch (color) {
+			case "purple":
+				return "#653789";
+			case "blue":
+				return "#375889";
+			case "green":
+				return "#37894E";
+			case "yellow":
+				return "#897C37";
+			case "red":
+				return "#893737";
+			default:
+				console.log("Unknown color", color);
+				return "#FFF";
+		}
+	})();
+
+	let iconEl = CarbonWikis;
+
+	switch (icon) {
+		case "wikis":
+			iconEl = CarbonWikis;
+			break;
+		case "tools":
+			iconEl = CarbonTools;
+			break;
+		case "camera":
+			iconEl = CarbonCamera;
+			break;
+		case "code":
+			iconEl = CarbonCode;
+			break;
+		case "email":
+			iconEl = CarbonEmail;
+			break;
+		case "cloud":
+			iconEl = CarbonCloud;
+			break;
+		case "terminal":
+			iconEl = CarbonTerminal;
+			break;
+		case "game":
+			iconEl = CarbonGame;
+			break;
+		case "chat":
+			iconEl = CarbonChat;
+			break;
+		case "speaker":
+			iconEl = CarbonSpeaker;
+			break;
+		case "video":
+			iconEl = CarbonVideo;
+			break;
+	}
+
+	$: sizeClass = (() => {
+		switch (size) {
+			case "md":
+				return "size-14";
+			case "lg":
+				return "size-24";
+		}
+	})();
+</script>
+
+<div class="flex {sizeClass} items-center justify-center">
+	<svg xmlns="http://www.w3.org/2000/svg" class="absolute {sizeClass} h-full" viewBox="0 0 52 58">
+		<defs>
+			<linearGradient id="gradient-{gradientColor}" gradientTransform="rotate(90)">
+				<stop offset="0%" stop-color="#0E1523" />
+				<stop offset="100%" stop-color={gradientColor} />
+			</linearGradient>
+			<mask id="mask">
+				<path
+					d="M22.3043 1.2486C23.4279 0.603043 24.7025 0.263184 26 0.263184C27.2975 0.263184 28.5721 0.603043 29.6957 1.2486L48.3043 11.9373C49.4279 12.5828 50.361 13.5113 51.0097 14.6294C51.6584 15.7475 52 17.0158 52 18.3069V39.6902C52 40.9813 51.6584 42.2496 51.0097 43.3677C50.361 44.4858 49.4279 45.4143 48.3043 46.0598L29.6957 56.7514C28.5721 57.397 27.2975 57.7369 26 57.7369C24.7025 57.7369 23.4279 57.397 22.3043 56.7514L3.6957 46.0598C2.57209 45.4143 1.63904 44.4858 0.990308 43.3677C0.341578 42.2496 3.34785e-05 40.9813 5.18628e-07 39.6902V18.3099C-0.000485629 17.0183 0.340813 15.7494 0.989568 14.6307C1.63832 13.512 2.57166 12.5831 3.6957 11.9373L22.3043 1.2486Z"
+					fill="white"
+				/>
+			</mask>
+		</defs>
+		<rect width="100%" height="100%" fill="url(#gradient-{gradientColor})" mask="url(#mask)" />
+	</svg>
+	<svelte:component this={iconEl} class="relative {sizeClass} scale-50 text-clip text-gray-200" />
+</div>