From 12d7ae96b9ad6084890e123e5537bd6d0d1f3368 Mon Sep 17 00:00:00 2001 From: "Timothy J. Baek" Date: Sun, 3 Dec 2023 10:59:47 -0800 Subject: [PATCH] feat: modelfile builder tagName field added --- src/lib/stores/index.ts | 1 + src/routes/(app)/+layout.svelte | 24 ++++- src/routes/(app)/modelfiles/+page.svelte | 58 +++++++++--- .../(app)/modelfiles/create/+page.svelte | 89 +++++++++++++++---- 4 files changed, 141 insertions(+), 31 deletions(-) diff --git a/src/lib/stores/index.ts b/src/lib/stores/index.ts index 48359f1f..342e6494 100644 --- a/src/lib/stores/index.ts +++ b/src/lib/stores/index.ts @@ -9,5 +9,6 @@ export const db = writable(undefined); export const chatId = writable(''); export const chats = writable([]); export const models = writable([]); +export const modelfiles = writable([]); export const settings = writable({}); export const showSettings = writable(false); diff --git a/src/routes/(app)/+layout.svelte b/src/routes/(app)/+layout.svelte index 7ead5e40..e837741e 100644 --- a/src/routes/(app)/+layout.svelte +++ b/src/routes/(app)/+layout.svelte @@ -4,7 +4,17 @@ import { onMount, tick } from 'svelte'; import { goto } from '$app/navigation'; - import { config, user, showSettings, settings, models, db, chats, chatId } from '$lib/stores'; + import { + config, + user, + showSettings, + settings, + models, + db, + chats, + chatId, + modelfiles + } from '$lib/stores'; import SettingsModal from '$lib/components/chat/SettingsModal.svelte'; import Sidebar from '$lib/components/layout/Sidebar.svelte'; @@ -78,7 +88,7 @@ }; const getDB = async () => { - const _db = await openDB('Chats', 1, { + const DB = await openDB('Chats', 1, { upgrade(db) { const store = db.createObjectStore('chats', { keyPath: 'id', @@ -89,7 +99,7 @@ }); return { - db: _db, + db: DB, getChatById: async function (id) { return await this.db.get('chats', id); }, @@ -162,6 +172,14 @@ let _db = await getDB(); await db.set(_db); + await modelfiles.set( + JSON.parse(localStorage.getItem('modelfiles') ?? JSON.stringify($modelfiles)) + ); + + modelfiles.subscribe(async () => { + await models.set(await getModels()); + }); + await tick(); loaded = true; }); diff --git a/src/routes/(app)/modelfiles/+page.svelte b/src/routes/(app)/modelfiles/+page.svelte index 6229ec14..e8c24806 100644 --- a/src/routes/(app)/modelfiles/+page.svelte +++ b/src/routes/(app)/modelfiles/+page.svelte @@ -1,12 +1,19 @@ + +
My Modelfiles
- -
+ +
- +
diff --git a/src/routes/(app)/modelfiles/create/+page.svelte b/src/routes/(app)/modelfiles/create/+page.svelte index ec37bed3..7b8d520c 100644 --- a/src/routes/(app)/modelfiles/create/+page.svelte +++ b/src/routes/(app)/modelfiles/create/+page.svelte @@ -1,8 +1,9 @@ @@ -196,15 +219,32 @@ SYSTEM """${system}"""`.replace(/^\s*\n/gm, ''); const canvas = document.createElement('canvas'); const ctx = canvas.getContext('2d'); - // Set canvas dimensions to the original image dimensions - canvas.width = img.width; - canvas.height = img.height; + // Calculate the aspect ratio of the image + const aspectRatio = img.width / img.height; - // Draw the original image on the canvas - ctx.drawImage(img, 0, 0); + // Calculate the new width and height to fit within 100x100 + let newWidth, newHeight; + if (aspectRatio > 1) { + newWidth = 100 * aspectRatio; + newHeight = 100; + } else { + newWidth = 100; + newHeight = 100 / aspectRatio; + } + + // Set the canvas size + canvas.width = 100; + canvas.height = 100; + + // Calculate the position to center the image + const offsetX = (100 - newWidth) / 2; + const offsetY = (100 - newHeight) / 2; + + // Draw the image on the canvas + ctx.drawImage(img, offsetX, offsetY, newWidth, newHeight); // Get the base64 representation of the compressed image - const compressedSrc = canvas.toDataURL('image/jpeg', 0.1); + const compressedSrc = canvas.toDataURL('image/jpeg'); // Display the compressed image imageUrl = compressedSrc; @@ -293,16 +333,31 @@ SYSTEM """${system}"""`.replace(/^\s*\n/gm, '');
-
-
Name*
+
+
+
Name*
-
- +
+ +
+
+ +
+
Model Tag Name*
+ +
+ +