Open WebUI App for Dashboard

packages/playground/public/info/openwebui.md

@@ -0,0 +1,5 @@
+---
+title: Open WebUI
+---
+
+Open WebUI is an extensible, feature-rich, and user-friendly self-hosted AI platform designed to operate entirely offline. It supports various LLM runners like Ollama and OpenAI-compatible APIs, with built-in inference engine for RAG, making it a powerful AI deployment solution. For more details, check [Open WebUI documentation](https://www.manual.grid.tf/documentation/dashboard/solutions/openwebui.html).

packages/playground/src/components/vm_deployment_table.vue

@@ -334,6 +334,7 @@ const filteredHeaders = computed(() => {
     ProjectName.Presearch,
     ProjectName.Umbrel,
     ProjectName.Nextcloud,
+    ProjectName.Openwebui,
     ProjectName.Funkwhale,
     ProjectName.Casperlabs,
     ProjectName.Mattermost,
@@ -358,6 +359,7 @@ const filteredHeaders = computed(() => {
     ProjectName.Presearch,
     ProjectName.Umbrel,
     ProjectName.Nextcloud,
+    ProjectName.Openwebui,
     ProjectName.Funkwhale,
     ProjectName.Casperlabs,
     ProjectName.Mattermost,

packages/playground/src/constants/deployment_list.ts

@@ -89,6 +89,11 @@ export const deploymentListEnvironments = {
     MATTERMOST_DOMAIN: false,
   },
 
+  openwebui: {
+    SSH_KEY: _ssh,
+    OPENWEBUI_DOMAIN: "Open WebUI Domain",
+  },
+
   owncloud: {
     SSH_KEY: _ssh,
     OWNCLOUD_DOMAIN: "Owncloud Domain",

packages/playground/src/router/index.ts

@@ -143,6 +143,28 @@ function createApplicationsRoutes(): RouteRecordRaw[] {
         },
       },
     },
+    {
+      path: DashboardRoutes.Applications.Openwebui,
+      component: () => import("../views/openwebui_view.vue"),
+      meta: {
+        title: "Open WebUI",
+        info: { page: "info/openwebui.md" },
+        navbarConfig: {
+          back: true,
+          path: [
+            { title: "Deploy" },
+            {
+              title: "Applications",
+              disabled: false,
+              to: DashboardRoutes.Deploy.Applications,
+            },
+            {
+              title: "Open WebUI",
+            },
+          ],
+        },
+      },
+    },
     // {
     //   path: DashboardRoutes.Applications.Owncloud,
     //   component: () => import("../views/owncloud_view.vue"),

packages/playground/src/router/routes.ts

@@ -60,6 +60,7 @@ enum ApplicationRoutes {
   Discourse = "/deploy/applications/discourse/",
   Taiga = "/deploy/applications/taiga/",
   Owncloud = "/deploy/applications/owncloud/",
+  Openwebui = "/deploy/applications/openwebui/",
   Nextcloud = "/deploy/applications/nextcloud/",
   Presearch = "/deploy/applications/presearch/",
   Subsquid = "/deploy/applications/subsquid/",

packages/playground/src/types/index.ts

@@ -109,6 +109,7 @@ export enum ProjectName {
   Funkwhale = "Funkwhale",
   Mastodon = "Mastodon",
   Mattermost = "Mattermost",
+  Openwebui = "Openwebui",
   Owncloud = "Owncloud",
   Nextcloud = "Nextcloud",
   Peertube = "Peertube",
@@ -141,6 +142,7 @@ export enum SolutionCode {
   funkwhale = "fw",
   taiga = "tg",
   discourse = "dc",
+  openwebui = "oi",
   owncloud = "oc",
   nextcloud = "nc",
   mattermost = "mm",
@@ -179,6 +181,7 @@ export const solutionType: { [key: string]: string } = {
   kubernetes: "Kubernetes",
   mattermost: "Mattermost",
   nodepilot: "Node Pilot",
+  openwebui: "Open WebUI",
   owncloud: "Owncloud",
   nextcloud: "Nextcloud",
   peertube: "Peertube",

packages/playground/src/utils/delete_deployment.ts

@@ -94,6 +94,7 @@ export function solutionHasGateway(projectName: ProjectName) {
     ProjectName.Taiga,
     ProjectName.Wordpress,
     ProjectName.Nextcloud,
+    ProjectName.Openwebui,
     ProjectName.Gitea,
     ProjectName.Jenkins,
     ProjectName.Jitsi,

packages/playground/src/views/openwebui_view.vue

@@ -0,0 +1,26 @@
+<template>
+  <view-layout>
+    <TfOpenwebui />
+
+    <template #list>
+      <TfDeploymentList title="Open WebUI Instances" :project-name="name" />
+    </template>
+  </view-layout>
+</template>
+
+<script lang="ts">
+import { ProjectName } from "../types";
+import TfDeploymentList from "../weblets/tf_deployment_list.vue";
+import TfOpenwebui from "../weblets/tf_openwebui.vue";
+
+export default {
+  name: "OpenwebuiView",
+  components: {
+    TfOpenwebui,
+    TfDeploymentList,
+  },
+  setup() {
+    return { name: ProjectName.Openwebui };
+  },
+};
+</script>

packages/playground/src/views/solutions_view.vue

@@ -99,6 +99,13 @@ export default {
         route: DashboardRoutes.Applications.StaticWebsite,
         releaseDate: new Date("2024-11-13"),
       },
+      {
+        title: "Open WebUI",
+        excerpt:
+          "Open WebUI is an extensible, feature-rich, and user-friendly self-hosted AI platform designed to operate entirely offline.",
+        icon: "openwebui.png",
+        route: DashboardRoutes.Applications.Openwebui,
+      },
       {
         title: "Nextcloud",
         excerpt:

packages/playground/src/weblets/tf_deployment_list.vue

@@ -199,6 +199,20 @@
           <IconActionBtn tooltip="Visit" icon="mdi-web" color="anchor" :href="'https://' + item.env.OWNCLOUD_DOMAIN" />
         </template>
 
+        <template #Openwebui-actions="{ item }">
+          <IconActionBtn
+            tooltip="Show Details"
+            icon="mdi-eye-outline"
+            @click="openDialog(tabs[activeTab].value, item)"
+          />
+          <IconActionBtn
+            tooltip="Open Open WebUI"
+            color="anchor"
+            icon="mdi-web"
+            :href="'https://' + item.env.OPENWEBUI_DOMAIN"
+          />
+        </template>
+
         <template #Nextcloud-actions="{ item }">
           <IconActionBtn
             tooltip="Show Details"
@@ -470,6 +484,7 @@ const tabs: Tab[] = [
   { title: "Discourse", value: "Discourse", imgPath: "images/icons/discourse.png" },
   { title: "Taiga", value: "Taiga", imgPath: "images/icons/taiga.png" },
   { title: "Owncloud", value: "Owncloud", imgPath: "images/icons/owncloud.png" },
+  { title: "Open WebUI", value: "Openwebui", imgPath: "images/icons/openwebui.png" },
   { title: "Nextcloud", value: "Nextcloud", imgPath: "images/icons/nextcloud.png" },
   { title: "Presearch", value: "Presearch", imgPath: "images/icons/presearch.png" },
   { title: "Subsquid", value: "Subsquid", imgPath: "images/icons/subsquid.png" },