From aa73c5f7b079460a8fb9401d4b003b8dee68bf2b Mon Sep 17 00:00:00 2001 From: Paul Ccari <46382556+paulclindo@users.noreply.github.com> Date: Thu, 22 Aug 2024 19:30:52 -0500 Subject: [PATCH] feat: improve local models UI + bump shinkai node (#414) * fix: remove warning banner on initial screen * improvements: models * add provider logos * fixes * bump shinkai node and apps version --- .github/workflows/pr-ci-healchecks.yml | 2 +- .github/workflows/release-dev.yml | 2 +- .github/workflows/release-prod.yml | 2 +- README.md | 6 +- .../components/model-capability-tag.tsx | 6 +- .../ollama-model-install-button.tsx | 53 +++- .../shinkai-node-manager/ollama-models.tsx | 159 ++++++----- .../lib/shinkai-node-manager/ollama-models.ts | 12 +- .../shinkai-desktop/src/pages/get-started.tsx | 11 - libs/shinkai-i18n/src/lib/default/index.ts | 3 +- libs/shinkai-ui/src/assets/icons/index.tsx | 1 + .../src/assets/icons/llm-provider.tsx | 265 ++++++++++++++++++ libs/shinkai-ui/src/components/badge.tsx | 1 + libs/shinkai-ui/src/hooks/use-fill-ids.ts | 25 ++ package-lock.json | 4 +- package.json | 2 +- 16 files changed, 447 insertions(+), 107 deletions(-) create mode 100644 libs/shinkai-ui/src/assets/icons/llm-provider.tsx create mode 100644 libs/shinkai-ui/src/hooks/use-fill-ids.ts diff --git a/.github/workflows/pr-ci-healchecks.yml b/.github/workflows/pr-ci-healchecks.yml index 9406844db..48104fa71 100644 --- a/.github/workflows/pr-ci-healchecks.yml +++ b/.github/workflows/pr-ci-healchecks.yml @@ -37,7 +37,7 @@ jobs: - name: Download side binaries env: ARCH: x86_64-unknown-linux-gnu - SHINKAI_NODE_VERSION: v0.7.29 + SHINKAI_NODE_VERSION: v0.7.30 OLLAMA_VERSION: v0.3.6 run: | npx ts-node ./ci-scripts/download-side-binaries.ts diff --git a/.github/workflows/release-dev.yml b/.github/workflows/release-dev.yml index 039c1336f..e08502aa1 100644 --- a/.github/workflows/release-dev.yml +++ b/.github/workflows/release-dev.yml @@ -208,7 +208,7 @@ jobs: - name: Download side binaries env: ARCH: ${{ matrix.arch }} - SHINKAI_NODE_VERSION: v0.7.29 + SHINKAI_NODE_VERSION: v0.7.30 OLLAMA_VERSION: v0.3.6 run: | npx ts-node ./ci-scripts/download-side-binaries.ts diff --git a/.github/workflows/release-prod.yml b/.github/workflows/release-prod.yml index 1231f95bc..d96689d79 100644 --- a/.github/workflows/release-prod.yml +++ b/.github/workflows/release-prod.yml @@ -206,7 +206,7 @@ jobs: - name: Download side binaries env: ARCH: ${{ matrix.arch }} - SHINKAI_NODE_VERSION: v0.7.29 + SHINKAI_NODE_VERSION: v0.7.30 OLLAMA_VERSION: v0.3.6 run: | npx ts-node ./ci-scripts/download-side-binaries.ts diff --git a/README.md b/README.md index 7a63b1eff..5dcf2fe77 100644 --- a/README.md +++ b/README.md @@ -47,7 +47,7 @@ $ git clone https://github.com/dcSpark/shinkai-apps ``` ARCH="aarch64-apple-darwin" \ OLLAMA_VERSION="v0.3.6" \ -SHINKAI_NODE_VERSION="v0.7.29" \ +SHINKAI_NODE_VERSION="v0.7.30" \ npx ts-node ./ci-scripts/download-side-binaries.ts ``` @@ -55,14 +55,14 @@ npx ts-node ./ci-scripts/download-side-binaries.ts ``` ARCH="x86_64-unknown-linux-gnu" \ OLLAMA_VERSION="v0.3.6"\ -SHINKAI_NODE_VERSION="v0.7.29" \ +SHINKAI_NODE_VERSION="v0.7.30" \ npx ts-node ./ci-scripts/download-side-binaries.ts ``` #### Windows ``` $ENV:OLLAMA_VERSION="v0.3.6" -$ENV:SHINKAI_NODE_VERSION="v0.7.29" +$ENV:SHINKAI_NODE_VERSION="v0.7.30" $ENV:ARCH="x86_64-pc-windows-msvc" npx ts-node ./ci-scripts/download-side-binaries.ts ``` diff --git a/apps/shinkai-desktop/src/components/shinkai-node-manager/components/model-capability-tag.tsx b/apps/shinkai-desktop/src/components/shinkai-node-manager/components/model-capability-tag.tsx index 602f5533d..d1d900394 100644 --- a/apps/shinkai-desktop/src/components/shinkai-node-manager/components/model-capability-tag.tsx +++ b/apps/shinkai-desktop/src/components/shinkai-node-manager/components/model-capability-tag.tsx @@ -19,18 +19,18 @@ export const ModelCapabilityTag = ({ [key in OllamaModelCapability]: { text: string; icon: ReactNode }; } = { [OllamaModelCapability.ImageToText]: { - icon: , + icon: , text: t('shinkaiNode.models.labels.visionCapability'), }, [OllamaModelCapability.TextGeneration]: { - icon: , + icon: , text: t('shinkaiNode.models.labels.textCapability'), }, }; return ( { {isOllamaListLoading ? ( ) : installedOllamaModelsMap.has(model) ? ( - - ) : pullingModelsMap?.get(model) ? ( + /> + ) : // + pullingModelsMap?.get(model) ? (
{getProgress(pullingModelsMap.get(model) as ProgressResponse) + '%'} @@ -154,3 +160,30 @@ export const OllamaModelInstallButton = ({ model }: { model: string }) => {
); }; + +const MotionButton = motion(Button); + +function RemoveAIModelButton({ onClick }: { onClick: () => void }) { + const { t } = useTranslation(); + const [isHovered, setIsHovered] = useState(false); + return ( + setIsHovered(true)} + onMouseLeave={() => setIsHovered(false)} + size="auto" + variant="outline" + > + {isHovered ? ( + + ) : ( + + )} + {isHovered ? t('common.remove') : t('common.installed')} + + ); +} diff --git a/apps/shinkai-desktop/src/components/shinkai-node-manager/ollama-models.tsx b/apps/shinkai-desktop/src/components/shinkai-node-manager/ollama-models.tsx index 22cf40b61..2dc256f6b 100644 --- a/apps/shinkai-desktop/src/components/shinkai-node-manager/ollama-models.tsx +++ b/apps/shinkai-desktop/src/components/shinkai-node-manager/ollama-models.tsx @@ -3,19 +3,28 @@ import { Badge, Button, ScrollArea, - Separator, + Tooltip, + TooltipContent, + TooltipPortal, + TooltipProvider, + TooltipTrigger, } from '@shinkai_network/shinkai-ui'; import { Card, CardContent, CardDescription, - CardFooter, CardHeader, CardTitle, } from '@shinkai_network/shinkai-ui'; +import { + GoogleIcon, + MetaIcon, + MicrosoftIcon, + MistralIcon, +} from '@shinkai_network/shinkai-ui/assets'; import { cn } from '@shinkai_network/shinkai-ui/utils'; -import { BookOpenText, Database, List, Star } from 'lucide-react'; -import { useState } from 'react'; +import { BookOpenText, Database, Star, StarIcon } from 'lucide-react'; +import { useMemo, useState } from 'react'; import AutoSizer from 'react-virtualized-auto-sizer'; import { OLLAMA_MODELS } from '../../lib/shinkai-node-manager/ollama-models'; @@ -43,6 +52,15 @@ export const OllamaModels = () => { return defaultModel === model; }; + const providerLogoMap = useMemo(() => { + return { + Microsoft: , + Google: , + Meta: , + Mistral: , + }; + }, []); + if (!isShinkaiNodeRunning) { return (
@@ -65,79 +83,84 @@ export const OllamaModels = () => { } return ( -
+
{!showAllOllamaModels && ( - -
+ +
{OLLAMA_MODELS.map((model) => { return ( - - - + + + + + {model.provider + ? providerLogoMap[ + model?.provider as keyof typeof providerLogoMap + ] + : null} + + {model.name} - -
{isDefaultModel(model.fullName) && ( - - {t('common.recommended')} - + + + + + + + + + + {t('common.recommended')} + + + + )} -
- + + {model.description} +
+ +
- -
+ +
{model.capabilities.map((capability) => ( ))} + + + + + + {t('shinkaiNode.models.labels.bookPages', { + pages: Math.round( + (model.contextLength * 0.75) / 380, + ), + })} + + + + + {model.size} GB +
-
- -
- - - - - - {t('shinkaiNode.models.labels.bookPages', { - pages: Math.round((model.contextLength * 0.75) / 380), - })} - - - - - - {model.size} GB - - - - - ); })} @@ -154,24 +177,20 @@ export const OllamaModels = () => {
)} + + {t('shinkaiNode.models.poweredByOllama')} + - - - {t('shinkaiNode.models.poweredByOllama')} -
); }; diff --git a/apps/shinkai-desktop/src/lib/shinkai-node-manager/ollama-models.ts b/apps/shinkai-desktop/src/lib/shinkai-node-manager/ollama-models.ts index 238edec68..d7c0c24db 100644 --- a/apps/shinkai-desktop/src/lib/shinkai-node-manager/ollama-models.ts +++ b/apps/shinkai-desktop/src/lib/shinkai-node-manager/ollama-models.ts @@ -28,6 +28,7 @@ export interface OllamaModel { capabilities: OllamaModelCapability[]; size: number; // Size in GB fullName: string; + provider?: string; } export type OllamaModelDefinition = (typeof FILTERED_OLLAMA_MODELS_REPOSITORY)[0]; @@ -43,26 +44,28 @@ export const OLLAMA_MODELS: OllamaModel[] = [ tag: '2b-instruct-q4_1', name: 'Gemma2 2b', description: - 'Google Gemma 2 is a high-performing and efficient model by now available in three sizes: 2B, 9B, and 27B.', + 'Google Gemma 2 is a high-performing and efficient model for generating text', contextLength: 8000, quality: OllamaModelQuality.Low, speed: OllamaModelSpeed.VeryFast, capabilities: [OllamaModelCapability.TextGeneration], size: 1.8, fullName: '', + provider: 'Google', }, { model: 'llama3.1', tag: '8b-instruct-q4_1', name: 'Llama 3.1 8b', description: - 'Llama 3.1 is a new state-of-the-art model from Meta available in 8B, 70B and 405B parameter sizes.', + 'A powerful AI model for understanding and generating text, optimized for tasks like writing and processing language', contextLength: 8000, quality: OllamaModelQuality.Medium, speed: OllamaModelSpeed.Fast, capabilities: [OllamaModelCapability.TextGeneration], size: 4.7, fullName: '', + provider: 'Meta', }, { model: 'mistral-nemo', @@ -76,12 +79,14 @@ export const OLLAMA_MODELS: OllamaModel[] = [ capabilities: [OllamaModelCapability.TextGeneration], size: 7.1, fullName: '', + provider: 'Mistral', }, { model: 'llava-phi3', tag: '3.8b-mini-q4_0', name: 'LLaVA Phi 3', - description: 'A new small LLaVA model fine-tuned from Phi 3 Mini. It offers vision capabilities to do image to text.', + description: + 'A model that can understand and generate both text and images, useful for tasks that require processing both types of data', contextLength: 4000, quality: OllamaModelQuality.Medium, speed: OllamaModelSpeed.Average, @@ -91,6 +96,7 @@ export const OLLAMA_MODELS: OllamaModel[] = [ ], size: 2.9, fullName: '', + provider: 'Microsoft', }, ].map((model) => { model.fullName = `${model.model}:${model.tag}` as const; diff --git a/apps/shinkai-desktop/src/pages/get-started.tsx b/apps/shinkai-desktop/src/pages/get-started.tsx index 252e629ee..0e8d947d8 100644 --- a/apps/shinkai-desktop/src/pages/get-started.tsx +++ b/apps/shinkai-desktop/src/pages/get-started.tsx @@ -12,12 +12,7 @@ import { useState } from 'react'; import { useForm } from 'react-hook-form'; import { Link, useNavigate } from 'react-router-dom'; -import { ResourcesBanner } from '../components/hardware-capabilities/resources-banner'; import { ResetStorageBeforeConnectConfirmationPrompt } from '../components/reset-storage-before-connect-confirmation-prompt'; -import { - RequirementsStatus, - useHardwareGetSummaryQuery, -} from '../lib/hardware.ts/hardware-client'; import { useShinkaiNodeSpawnMutation } from '../lib/shinkai-node-manager/shinkai-node-manager-client'; import { useShinkaiNodeEventsToast } from '../lib/shinkai-node-manager/shinkai-node-manager-hooks'; import { useAuth } from '../store/auth'; @@ -41,7 +36,6 @@ const GetStartedPage = () => { }, }); - const { data: hardwareSummary } = useHardwareGetSummaryQuery(); const { mutateAsync: submitRegistrationNoCode } = useSubmitRegistrationNoCode( { onSuccess: (response, setupPayload) => { @@ -120,17 +114,12 @@ const GetStartedPage = () => {
-
{/**/} {/* */} diff --git a/libs/shinkai-i18n/src/lib/default/index.ts b/libs/shinkai-i18n/src/lib/default/index.ts index f043fa8a4..7c30de80e 100644 --- a/libs/shinkai-i18n/src/lib/default/index.ts +++ b/libs/shinkai-i18n/src/lib/default/index.ts @@ -376,7 +376,7 @@ export default { signUpShinkaiHosting: 'Sign up For Shinkai Hosting', quickConnect: 'Quick Connect', alreadyHaveNode: 'Already have a Node?', - shinkaiPrivate: 'Shinkai Private (Local)', + shinkaiPrivate: 'Setup Your Local AI (Shinkai)', seeOptions: 'See Options', termsAndConditionsText: 'I agree to our Terms of Service and Privacy Policy', @@ -387,6 +387,7 @@ export default { done: 'Done', resetFilters: 'Reset Filters', folderLocation: 'Folder Location:', + installed: 'Installed', }, quickConnection: { label: 'Quick Connection', diff --git a/libs/shinkai-ui/src/assets/icons/index.tsx b/libs/shinkai-ui/src/assets/icons/index.tsx index 267d683a1..c7448a47c 100644 --- a/libs/shinkai-ui/src/assets/icons/index.tsx +++ b/libs/shinkai-ui/src/assets/icons/index.tsx @@ -1,2 +1,3 @@ export * from './general'; export * from './file'; +export * from './llm-provider'; diff --git a/libs/shinkai-ui/src/assets/icons/llm-provider.tsx b/libs/shinkai-ui/src/assets/icons/llm-provider.tsx new file mode 100644 index 000000000..0c7429a94 --- /dev/null +++ b/libs/shinkai-ui/src/assets/icons/llm-provider.tsx @@ -0,0 +1,265 @@ +import { useFillIds } from '../../hooks/use-fill-ids'; +import { cn } from '../../utils'; + +export const MistralIcon = ({ className }: { className?: string }) => { + return ( + + Mistral + + + + + + + + + + ); +}; + +export const GoogleIcon = ({ className }: { className?: string }) => { + return ( + + Google + + + + + + + + ); +}; + +export const MetaIcon = ({ className }: { className?: string }) => { + return ( + + Meta + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + ); +}; + +export const MicrosoftIcon = ({ className }: { className?: string }) => { + return ( + + Azure + + + + + + ); +}; diff --git a/libs/shinkai-ui/src/components/badge.tsx b/libs/shinkai-ui/src/components/badge.tsx index c9611eb9d..da25291cc 100644 --- a/libs/shinkai-ui/src/components/badge.tsx +++ b/libs/shinkai-ui/src/components/badge.tsx @@ -17,6 +17,7 @@ const badgeVariants = cva( outline: 'text-foreground', inputAdornment: 'bg-gray-600 px-2 font-medium text-white', gradient: 'bg-brand-gradient border-brand px-2 font-medium text-white', + tags: 'rounded-full border-gray-300 bg-gray-400 px-2 py-1 font-normal capitalize text-gray-50', }, }, defaultVariants: { diff --git a/libs/shinkai-ui/src/hooks/use-fill-ids.ts b/libs/shinkai-ui/src/hooks/use-fill-ids.ts new file mode 100644 index 000000000..dcd9d9356 --- /dev/null +++ b/libs/shinkai-ui/src/hooks/use-fill-ids.ts @@ -0,0 +1,25 @@ +import { useMemo } from 'react'; + +export const useFillId = (namespace: string) => { + const id = `lobe-icons-${namespace.toLowerCase()}-fill`; + return useMemo( + () => ({ + fill: `url(#${id})`, + id, + }), + [namespace], + ); +}; + +export const useFillIds = (namespace: string, length: number) => { + return useMemo(() => { + const ids = Array.from({ length }, (_, i) => { + const id = `lobe-icons-${namespace.toLowerCase()}-fill-${i}`; + return { + fill: `url(#${id})`, + id, + }; + }); + return ids; + }, [namespace]); +}; diff --git a/package-lock.json b/package-lock.json index 03009fb60..884507205 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,12 +1,12 @@ { "name": "@shinkai/source", - "version": "0.7.34", + "version": "0.7.35", "lockfileVersion": 3, "requires": true, "packages": { "": { "name": "@shinkai/source", - "version": "0.7.34", + "version": "0.7.35", "hasInstallScript": true, "license": "SEE LICENSE IN LICENSE", "workspaces": [ diff --git a/package.json b/package.json index c92cff209..d851b220c 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "@shinkai/source", - "version": "0.7.34", + "version": "0.7.35", "license": "SEE LICENSE IN LICENSE", "files": [ "LICENSE"