Hardcode interfaces instead of pulling from daemon

src/modules/service-detail/components/ServiceDetail.tsx

@@ -27,8 +27,7 @@ const ServiceDetail = () => {
   const navigate = useNavigate();
   const { data: service, isLoading, refetch } = useService(serviceId!);
 
-  const { data: appResponse } = useInterfaces();
-  const interfaces = appResponse?.data || [];
+  const { data: interfaces } = useInterfaces();
 
   const refetchServices = useCallback(() => {
     refetch();
@@ -69,7 +68,7 @@ const ServiceDetail = () => {
             status={status}
             refetch={refetchServices}
             isDetailView={true}
-            interfaces={interfaces.filter((app) => service.interfaces?.includes(app.id))}
+            interfaces={interfaces?.filter((app) => service.interfaces?.includes(app.id)) ?? []}
             needsUpdate={service.needsUpdate}
             memoryRequirements={service.modelInfo?.memoryRequirements}
           />

src/modules/service/api/getInterfaces.ts

@@ -1,10 +1,67 @@
-import type { AxiosResponse } from "axios";
-import api from "shared/api/v1";
-
 import type { App } from "../types";
 
-const getInterfaces = async (): Promise<AxiosResponse<App[]>> => {
-  return api().get<App[]>("v1/interfaces/");
+const getInterfaces = async (): Promise<App[]> => {
+  return [
+    {
+      id: "chat",
+      name: "Chat",
+      playground: true,
+      documentation: "# Chat",
+      icon: "/assets/apps/chat.svg",
+    },
+    {
+      id: "embeddings",
+      name: "Embeddings",
+      playground: false,
+      documentation:
+        '# Embeddings\n\n## Description\n\nEmbeddings are all the services used to transform unstructured text in a vector representation. A vector representation is a vector of numbers that represents the most important features of the text. For example, a sentence can be represented as a vector of numbers. The vector is obtained using a neural network that is trained to extract the most important features of the sentence. Embeddings are used in many NLP tasks, such as text classification, text clustering, text similarity, and so on. In order to give memory to ChatGPT, we need to transform the text in a vector representation and store them in a vectorstore for later retrieval.\n\nAll the services compatible with Prem Embeddings interface expose an API that can be used directly with Langchain python library. You can find the library [here](https://python.langchain.com/en/latest/index.html).\n\n## Getting Started\n\n```python\nimport os\n\nfrom langchain.embeddings import OpenAIEmbeddings\n\nos.environ["OPENAI_API_KEY"] = "random-string"\n\n# assuming the service is running on localhost\nembeddings = OpenAIEmbeddings(openai_api_base="http://localhost:8000/api/v1")\n\ntext = "Prem is an easy to use open source AI platform."\nquery_result = embeddings.embed_query(text)\ndoc_result = embeddings.embed_documents([text])\n```\n\n',
+      icon: "/assets/apps/embeddings.svg",
+    },
+    {
+      id: "vector-store",
+      name: "Vector Store",
+      playground: false,
+      documentation:
+        "# Vector Store\n\n## Description\n\nVector Store are all the services that expose a vector database. A vector database is used to store embeddings. An embedding is a vector representation of a piece of data. For example, a sentence can be represented as a vector of numbers. The vector is obtained using a neural network that is trained to extract the most important features of the sentence.\n\n## Installation & Usage\n\nWe don't have a standard interface for what concerns Vector Store services. However, we suggest to connect to the services using [Langchain](https://python.langchain.com/en/latest/index.html) python library or [Llama Index](https://gpt-index.readthedocs.io/en/latest/index.html).\n",
+      icon: "/assets/apps/store.svg",
+    },
+    {
+      id: "coder",
+      name: "Coder",
+      playground: true,
+      documentation:
+        "# Coder\n\n## Description\n\nCoder are all the services that expose endpoints for code completion functionalities. As an example, you can think about GitHub Copilot as the main centralized alternative.\n\n## Installation & Usage\n\nWe don't have a standard interface for what concerns Coder services. However, right now we mostly support services based on Tabby Docker images. In order to use Tabby services, you will need to install and use Tabby extension. You can find the extension [here](https://marketplace.visualstudio.com/items?itemName=TabbyML.vscode-tabby).\n",
+      icon: "/assets/apps/coder.svg",
+    },
+    {
+      id: "diffuser",
+      name: "Diffuser",
+      playground: true,
+      documentation: "# Prem Diffuser",
+      icon: "/assets/apps/diffuser.svg",
+    },
+    {
+      id: "upscaler",
+      name: "Upscaler",
+      playground: true,
+      documentation: "# Prem Upscaler",
+      icon: "/assets/apps/upscaler.svg",
+    },
+    {
+      id: "text-to-audio",
+      name: "Text to Audio",
+      playground: true,
+      documentation: "# Prem Text to Audio",
+      icon: "/assets/apps/tta.svg",
+    },
+    {
+      id: "audio-to-text",
+      name: "Audio to Text",
+      playground: true,
+      documentation: "# Prem Audio to Text",
+      icon: "/assets/apps/att.svg",
+    },
+  ];
 };
 
 export default getInterfaces;

src/modules/service/components/Service.tsx

@@ -17,18 +17,16 @@ const Service = () => {
   const { appId } = useParams();
 
   const { data: services, isLoading: isServicesLoading, refetch: refetchServices } = useServices();
-  const { data: appResponse } = useInterfaces();
+  const { data: apps } = useInterfaces();
   const serviceDownloadsInProgress = useSettingStore((state) => state.serviceDownloadsInProgress);
   const { download, progresses } = useDownloadServiceStream();
 
   const [filter, setFilter] = useState(new Map<string, boolean>());
 
-  const apps = useMemo(() => appResponse?.data || [], [appResponse?.data]);
-
   const filteredApps = useMemo(() => {
     if (filter.size === 0) return apps;
     if (![...filter.values()].includes(true)) return apps;
-    return apps.filter((app) => filter.get(app.id) as boolean);
+    return apps?.filter((app) => filter.get(app.id) as boolean);
   }, [apps, filter]);
 
   const isDevMode = isDeveloperMode();
@@ -55,7 +53,7 @@ const Service = () => {
   }, [services]);
 
   const ServicesComponents = useMemo(() => {
-    return filteredApps.map((app) => {
+    return filteredApps?.map((app) => {
       const filteredServices =
         services?.filter((service) => service?.interfaces?.includes(app.id)) ?? [];
       return (
@@ -86,7 +84,7 @@ const Service = () => {
     });
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [
-    filteredApps.length,
+    filteredApps?.length,
     // eslint-disable-next-line react-hooks/exhaustive-deps
     JSON.stringify(progresses),
     isDevMode,
@@ -98,7 +96,7 @@ const Service = () => {
       <div className="mask-heading mb-5 md:-mx-6 xl:-mx-10">
         <h2 className="md:!mt-10 max-md:!mt-4">Dashboard</h2>
       </div>
-      {apps.length > 0 && (
+      {apps && apps.length > 0 && (
         <SearchFilter onFilterChange={setFilter} appId={appId as string} apps={apps} />
       )}
       {ServicesComponents}

src/modules/service/components/ServiceCard.tsx

@@ -19,8 +19,7 @@ const ServiceCard = ({ className, icon, service }: ServiceCardProps) => {
   const serviceType = service.type;
   const status = getServiceStatus(service);
   const title = service.name;
-  const { data: response } = useInterfaces();
-  const interfaces = response?.data || [];
+  const { data: interfaces } = useInterfaces();
 
   const refetch = useCallback(() => {
     queryClient.refetchQueries([SERVICES_KEY]);
@@ -43,7 +42,7 @@ const ServiceCard = ({ className, icon, service }: ServiceCardProps) => {
           serviceId={serviceId}
           serviceType={serviceType}
           status={status}
-          interfaces={interfaces.filter((app) => service.interfaces?.includes(app.id))}
+          interfaces={interfaces?.filter((app) => service.interfaces?.includes(app.id)) ?? []}
           needsUpdate={service.needsUpdate}
           memoryRequirements={service.modelInfo?.memoryRequirements}
         />