add tests (#88)

.github/workflows/test.yml

@@ -0,0 +1,38 @@
+name: Test
+on:
+  pull_request:
+  push:
+    branches:
+      - main
+jobs:
+  test:
+    runs-on: ubuntu-latest
+    timeout-minutes: 10
+    steps:
+      - uses: actions/checkout@v3
+      - uses: actions/setup-node@v3
+        with:
+          node-version: "20"
+      - name: Install pnpm
+        uses: pnpm/action-setup@v2
+        with:
+          version: latest
+          run_install: false
+      - name: Get pnpm store directory
+        id: pnpm-cache
+        shell: bash
+        run: |
+          echo "STORE_PATH=$(pnpm store path)" >> $GITHUB_OUTPUT
+      - uses: actions/cache@v3
+        with:
+          path: ${{ steps.pnpm-cache.outputs.STORE_PATH }}
+          key: ${{ runner.os }}-pnpm-store-${{ hashFiles('**/pnpm-lock.yaml') }}
+          restore-keys: |
+            ${{ runner.os }}-pnpm-store-
+      - name: Install dependencies
+        run: pnpm install --frozen-lockfile
+      - name: Install Playwright Browsers
+        run: npx playwright install --with-deps
+      - name: "Running tests"
+        run: |
+          pnpm run test

.gitignore

@@ -1,3 +1,4 @@
+test-results
 node_modules
 
 # Output
@@ -23,3 +24,5 @@ vite.config.ts.timestamp-*
 
 # Model JSON file
 models.json
+
+e2e/*.json

e2e/home.test.ts

@@ -0,0 +1,63 @@
+import { expect, test } from "@playwright/test";
+
+const HF_TOKEN = "hf_aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa";
+const HF_TOKEN_STORAGE_KEY = "hf_token";
+const STORAGE_STATE_FILE = "e2e/home_test_storage_state.json";
+
+test("home page has expected token model", async ({ page }) => {
+	await page.goto("/");
+	await expect(page.getByText("Add a Hugging Face Token")).toBeVisible();
+});
+
+// Group tests that depend on sequential execution and shared state
+test.describe.serial("Token Handling and Subsequent Tests", () => {
+	// Test that sets the token and saves state
+	test("filling up token input, closes modal, and saves state", async ({ page }) => {
+		await page.goto("/");
+		await expect(page.getByText("Add a Hugging Face Token")).toBeVisible();
+
+		const input = page.getByPlaceholder("Enter HF Token");
+		await expect(input).toBeVisible();
+		await input.fill(HF_TOKEN);
+		await input.blur();
+
+		await page.getByText("Submit").click();
+		await expect(page.getByText("Add a Hugging Face Token")).not.toBeVisible();
+
+		// Save storage state
+		await page.context().storageState({ path: STORAGE_STATE_FILE });
+	});
+
+	// Nested describe for tests that use the saved state
+	test.describe("Tests requiring persisted token", () => {
+		test.use({ storageState: STORAGE_STATE_FILE });
+
+		test("can create a conversation with persisted token", async ({ page }) => {
+			await page.goto("/");
+
+			// Expect modal NOT to be visible due to persisted token
+			await expect(page.getByText("Add a Hugging Face Token")).not.toBeVisible();
+
+			// Verify token is in localStorage
+			const storedToken = await page.evaluate(
+				key => JSON.parse(window.localStorage.getItem(key) ?? ""),
+				HF_TOKEN_STORAGE_KEY
+			);
+			expect(storedToken).toBe(HF_TOKEN);
+
+			const userInput = page.getByRole("textbox", { name: "Enter user message" });
+			await expect(userInput).toBeVisible();
+			await userInput.fill("Hello Hugging Face!");
+			await userInput.blur();
+			expect(await userInput.inputValue()).toBe("Hello Hugging Face!");
+
+			// Reload the page
+			await page.reload();
+
+			// Re-select the input field and check its value
+			const userInputAfterReload = page.getByRole("textbox", { name: "Enter user message" });
+			await expect(userInputAfterReload).toBeVisible();
+			expect(await userInputAfterReload.inputValue()).toBe("Hello Hugging Face!");
+		});
+	});
+});

package.json

@@ -14,7 +14,8 @@
 		"clean": "rm -rf ./node_modules/ && rm -rf ./.svelte-kit/ && ni && echo 'Project cleaned!'",
 		"update-ctx-length": "jiti scripts/update-ctx-length.ts",
 		"test:unit": "vitest",
-		"test": "npm run test:unit -- --run"
+		"test": "npm run test:unit -- --run && npm run test:e2e",
+		"test:e2e": "playwright test"
 	},
 	"devDependencies": {
 		"@eslint/eslintrc": "^3.3.0",
@@ -26,6 +27,7 @@
 		"@huggingface/transformers": "^3.5.1",
 		"@iconify-json/carbon": "^1.2.8",
 		"@iconify-json/material-symbols": "^1.2.15",
+		"@playwright/test": "^1.49.1",
 		"@ryoppippi/unplugin-typia": "^1.0.0",
 		"@samchon/openapi": "^3.0.0",
 		"@sveltejs/adapter-auto": "^3.2.2",
@@ -37,17 +39,20 @@
 		"@testing-library/jest-dom": "^6.6.3",
 		"@testing-library/svelte": "^5.2.4",
 		"@types/node": "^22.14.1",
+		"@vitest/browser": "^3.1.4",
 		"clsx": "^2.1.1",
 		"dotenv": "^16.5.0",
 		"eslint": "^9.22.0",
 		"eslint-config-prettier": "^10.1.1",
 		"eslint-plugin-prettier": "^5.2.3",
+		"fake-indexeddb": "^6.0.1",
 		"globals": "^16.0.0",
 		"highlight.js": "^11.10.0",
 		"jiti": "^2.4.2",
 		"jsdom": "^26.0.0",
 		"melt": "^0.30.1",
 		"openai": "^4.90.0",
+		"playwright": "^1.52.0",
 		"postcss": "^8.4.38",
 		"prettier": "^3.1.1",
 		"prettier-plugin-svelte": "^3.4.0",
@@ -64,7 +69,8 @@
 		"typescript-eslint": "^8.26.1",
 		"unplugin-icons": "^22.1.0",
 		"vite": "^5.4.4",
-		"vitest": "^3.0.0"
+		"vitest": "^3.0.0",
+		"vitest-browser-svelte": "^0.1.0"
 	},
 	"type": "module",
 	"dependencies": {

playwright.config.ts

@@ -0,0 +1,10 @@
+import { defineConfig } from "@playwright/test";
+
+export default defineConfig({
+	webServer: {
+		command: "npm run build && npm run preview",
+		port: 4173,
+		timeout: 1000 * 60 * 10,
+	},
+	testDir: "e2e",
+});

pnpm-lock.yaml

@@ -48,6 +48,9 @@ importers:
       '@iconify-json/material-symbols':
         specifier: ^1.2.15
         version: 1.2.15
+      '@playwright/test':
+        specifier: ^1.49.1
+        version: 1.52.0
       '@ryoppippi/unplugin-typia':
         specifier: ^1.0.0
         version: 1.2.0(@samchon/openapi@3.0.0)(@types/node@22.14.1)(jiti@2.4.2)(lightningcss@1.29.1)(rollup@4.34.9)(yaml@2.7.0)
@@ -77,10 +80,13 @@ importers:
         version: 6.6.3
       '@testing-library/svelte':
         specifier: ^5.2.4
-        version: 5.2.8(svelte@5.30.1)(vite@5.4.14(@types/node@22.14.1)(lightningcss@1.29.1))(vitest@3.1.4(@types/node@22.14.1)(jsdom@26.1.0)(lightningcss@1.29.1))
+        version: 5.2.8(svelte@5.30.1)(vite@5.4.14(@types/node@22.14.1)(lightningcss@1.29.1))(vitest@3.1.4)
       '@types/node':
         specifier: ^22.14.1
         version: 22.14.1
+      '@vitest/browser':
+        specifier: ^3.1.4
+        version: 3.1.4(playwright@1.52.0)(vite@5.4.14(@types/node@22.14.1)(lightningcss@1.29.1))(vitest@3.1.4)
       clsx:
         specifier: ^2.1.1
         version: 2.1.1
@@ -96,6 +102,9 @@ importers:
       eslint-plugin-prettier:
         specifier: ^5.2.3
         version: 5.2.3(eslint-config-prettier@10.1.1(eslint@9.22.0(jiti@2.4.2)))(eslint@9.22.0(jiti@2.4.2))(prettier@3.5.3)
+      fake-indexeddb:
+        specifier: ^6.0.1
+        version: 6.0.1
       globals:
         specifier: ^16.0.0
         version: 16.0.0
@@ -114,6 +123,9 @@ importers:
       openai:
         specifier: ^4.90.0
         version: 4.90.0(ws@8.18.2)
+      playwright:
+        specifier: ^1.52.0
+        version: 1.52.0
       postcss:
         specifier: ^8.4.38
         version: 8.5.3
@@ -164,7 +176,10 @@ importers:
         version: 5.4.14(@types/node@22.14.1)(lightningcss@1.29.1)
       vitest:
         specifier: ^3.0.0
-        version: 3.1.4(@types/node@22.14.1)(jsdom@26.1.0)(lightningcss@1.29.1)
+        version: 3.1.4(@types/node@22.14.1)(@vitest/browser@3.1.4)(jsdom@26.1.0)(lightningcss@1.29.1)
+      vitest-browser-svelte:
+        specifier: ^0.1.0
+        version: 0.1.0(@vitest/browser@3.1.4)(svelte@5.30.1)(vitest@3.1.4)
 
 packages:
 
@@ -786,6 +801,11 @@ packages:
     resolution: {integrity: sha512-cq8o4cWH0ibXh9VGi5P20Tu9XF/0fFXl9EUinr9QfTM7a7p0oTA4iJRCQWppXR1Pg8dSM0UCItCkPwsk9qWWYA==}
     engines: {node: ^12.20.0 || ^14.18.0 || >=16.0.0}
 
+  '@playwright/test@1.52.0':
+    resolution: {integrity: sha512-uh6W7sb55hl7D6vsAeA+V2p5JnlAqzhqFyF0VcJkKZXkgnFcVG9PziERRHQfPLfNGx1C292a4JqbWzhR8L4R1g==}
+    engines: {node: '>=18'}
+    hasBin: true
+
   '@polka/url@1.0.0-next.28':
     resolution: {integrity: sha512-8LduaNlMZGwdZ6qWrKlfa+2M4gahzFkprZiAt2TF8uS0qQgBizKXpXURqvTJ4WtmupWxaLqjRb2UCTe72mu+Aw==}
 
@@ -1121,6 +1141,12 @@ packages:
       vitest:
         optional: true
 
+  '@testing-library/user-event@14.6.1':
+    resolution: {integrity: sha512-vq7fv0rnt+QTXgPxr5Hjc210p6YKq2kmdziLgnsZGgLJ9e6VAShx1pACLuRjd/AS/sr7phAR58OIIpf0LlmQNw==}
+    engines: {node: '>=12', npm: '>=6'}
+    peerDependencies:
+      '@testing-library/dom': '>=7.21.4'
+
   '@types/aria-query@5.0.4':
     resolution: {integrity: sha512-rfT93uj5s0PRL7EzccGMs3brplhcrghnDoV26NqKhCAS1hVo+WdNsPvE/yb6ilfr5hi2MEk6d5EWJTKdxg8jVw==}
 
@@ -1204,6 +1230,21 @@ packages:
   '@ungap/structured-clone@1.3.0':
     resolution: {integrity: sha512-WmoN8qaIAo7WTYWbAZuG8PYEhn5fkz7dZrqTBZ7dtt//lL2Gwms1IcnQ5yHqjDfX8Ft5j4YzDM23f87zBfDe9g==}
 
+  '@vitest/browser@3.1.4':
+    resolution: {integrity: sha512-2L4vR/tuUZBxKU72Qe+unIp1P8lZ0T5nlqPegkXxyZFR5gWqItV8VPPR261GOzl49Zw2AhzMABzMMHJagQ0a2g==}
+    peerDependencies:
+      playwright: '*'
+      safaridriver: '*'
+      vitest: 3.1.4
+      webdriverio: ^7.0.0 || ^8.0.0 || ^9.0.0
+    peerDependenciesMeta:
+      playwright:
+        optional: true
+      safaridriver:
+        optional: true
+      webdriverio:
+        optional: true
+
   '@vitest/expect@3.1.4':
     resolution: {integrity: sha512-xkD/ljeliyaClDYqHPNCiJ0plY5YIcM0OlRiZizLhlPmpXWpxnGMyTZXOHFhFeG7w9P5PBeL4IdtJ/HeQwTbQA==}
 
@@ -1714,6 +1755,10 @@ packages:
     resolution: {integrity: sha512-hMQ4CX1p1izmuLYyZqLMO/qGNw10wSv9QDCPfzXfyFrOaCSSoRfqE1Kf1s5an66J5JZC62NewG+mK49jOCtQew==}
     engines: {node: '>=4'}
 
+  fake-indexeddb@6.0.1:
+    resolution: {integrity: sha512-He2AjQGHe46svIFq5+L2Nx/eHDTI1oKgoevBP+TthnjymXiKkeJQ3+ITeWey99Y5+2OaPFbI1qEsx/5RsGtWnQ==}
+    engines: {node: '>=18'}
+
   fast-deep-equal@3.1.3:
     resolution: {integrity: sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q==}
 
@@ -1794,6 +1839,11 @@ packages:
     resolution: {integrity: sha512-0iirZp3uVDjVGt9p49aTaqjk84TrglENEDuqfdlZQ1roC9CWlPk6Avf8EEnZNcAqPonwkG35x4n3ww/1THYAeQ==}
     engines: {node: '>= 12.20'}
 
+  fsevents@2.3.2:
+    resolution: {integrity: sha512-xiqMQR4xAeHTuB9uWm+fFRcIOgKBMiOBP+eXiyT7jsgVCq1bkVygt00oASowB7EdtpOHaaPgKt812P9ab+DDKA==}
+    engines: {node: ^8.16.0 || ^10.6.0 || >=11.0.0}
+    os: [darwin]
+
   fsevents@2.3.3:
     resolution: {integrity: sha512-5xoDfX+fL7faATnagmWPpbFtwh/R77WmMMqqHGS65C3vvB0YHrgF+B1YmZ3441tMj5n63k0212XNoJwzlhffQw==}
     engines: {node: ^8.16.0 || ^10.6.0 || >=11.0.0}
@@ -2426,6 +2476,16 @@ packages:
   platform@1.3.6:
     resolution: {integrity: sha512-fnWVljUchTro6RiCFvCXBbNhJc2NijN7oIQxbwsyL0buWJPG85v81ehlHI9fXrJsMNgTofEoWIQeClKpgxFLrg==}
 
+  playwright-core@1.52.0:
+    resolution: {integrity: sha512-l2osTgLXSMeuLZOML9qYODUQoPPnUsKsb5/P6LJ2e6uPKXUdPK5WYhN4z03G+YNbWmGDY4YENauNu4ZKczreHg==}
+    engines: {node: '>=18'}
+    hasBin: true
+
+  playwright@1.52.0:
+    resolution: {integrity: sha512-JAwMNMBlxJ2oD1kce4KPtMkDeKGHQstdpFPcPH3maElAXon/QZeTvtsfXmTMRyO9TslfoYOXkSsvao2nE1ilTw==}
+    engines: {node: '>=18'}
+    hasBin: true
+
   postcss-load-config@3.1.4:
     resolution: {integrity: sha512-6DiM4E7v4coTE4uzA8U//WhtPwyhiim3eyjEMFCnUpzbrkK9wJHgKDT2mR+HbtSrd/NubVaYTOpSpjUl8NQeRg==}
     engines: {node: '>= 10'}
@@ -3074,6 +3134,14 @@ packages:
       vite:
         optional: true
 
+  vitest-browser-svelte@0.1.0:
+    resolution: {integrity: sha512-YB6ZUZZQNqU1T9NzvTEDpwpPv35Ng1NZMPBh81zDrLEdOgROGE6nJb79NWb1Eu/a8VkHifqArpOZfJfALge6xQ==}
+    engines: {node: ^18.0.0 || >=20.0.0}
+    peerDependencies:
+      '@vitest/browser': ^2.1.0 || ^3.0.0-0
+      svelte: '>3.0.0'
+      vitest: ^2.1.0 || ^3.0.0-0
+
   vitest@3.1.4:
     resolution: {integrity: sha512-Ta56rT7uWxCSJXlBtKgIlApJnT6e6IGmTYxYcmxjJ4ujuZDI59GUQgVDObXXJujOmPDBYXHK1qmaGtneu6TNIQ==}
     engines: {node: ^18.0.0 || ^20.0.0 || >=22.0.0}
@@ -3651,6 +3719,10 @@ snapshots:
 
   '@pkgr/core@0.1.1': {}
 
+  '@playwright/test@1.52.0':
+    dependencies:
+      playwright: 1.52.0
+
   '@polka/url@1.0.0-next.28': {}
 
   '@protobufjs/aspromise@1.1.2': {}
@@ -3979,13 +4051,17 @@ snapshots:
       lodash: 4.17.21
       redent: 3.0.0
 
-  '@testing-library/svelte@5.2.8(svelte@5.30.1)(vite@5.4.14(@types/node@22.14.1)(lightningcss@1.29.1))(vitest@3.1.4(@types/node@22.14.1)(jsdom@26.1.0)(lightningcss@1.29.1))':
+  '@testing-library/svelte@5.2.8(svelte@5.30.1)(vite@5.4.14(@types/node@22.14.1)(lightningcss@1.29.1))(vitest@3.1.4)':
     dependencies:
       '@testing-library/dom': 10.4.0
       svelte: 5.30.1
     optionalDependencies:
       vite: 5.4.14(@types/node@22.14.1)(lightningcss@1.29.1)
-      vitest: 3.1.4(@types/node@22.14.1)(jsdom@26.1.0)(lightningcss@1.29.1)
+      vitest: 3.1.4(@types/node@22.14.1)(@vitest/browser@3.1.4)(jsdom@26.1.0)(lightningcss@1.29.1)
+
+  '@testing-library/user-event@14.6.1(@testing-library/dom@10.4.0)':
+    dependencies:
+      '@testing-library/dom': 10.4.0
 
   '@types/aria-query@5.0.4': {}
 
@@ -4099,6 +4175,25 @@ snapshots:
 
   '@ungap/structured-clone@1.3.0': {}
 
+  '@vitest/browser@3.1.4(playwright@1.52.0)(vite@5.4.14(@types/node@22.14.1)(lightningcss@1.29.1))(vitest@3.1.4)':
+    dependencies:
+      '@testing-library/dom': 10.4.0
+      '@testing-library/user-event': 14.6.1(@testing-library/dom@10.4.0)
+      '@vitest/mocker': 3.1.4(vite@5.4.14(@types/node@22.14.1)(lightningcss@1.29.1))
+      '@vitest/utils': 3.1.4
+      magic-string: 0.30.17
+      sirv: 3.0.1
+      tinyrainbow: 2.0.0
+      vitest: 3.1.4(@types/node@22.14.1)(@vitest/browser@3.1.4)(jsdom@26.1.0)(lightningcss@1.29.1)
+      ws: 8.18.2
+    optionalDependencies:
+      playwright: 1.52.0
+    transitivePeerDependencies:
+      - bufferutil
+      - msw
+      - utf-8-validate
+      - vite
+
   '@vitest/expect@3.1.4':
     dependencies:
       '@vitest/spy': 3.1.4
@@ -4620,6 +4715,8 @@ snapshots:
       iconv-lite: 0.4.24
       tmp: 0.0.33
 
+  fake-indexeddb@6.0.1: {}
+
   fast-deep-equal@3.1.3: {}
 
   fast-diff@1.3.0: {}
@@ -4698,6 +4795,9 @@ snapshots:
       node-domexception: 1.0.0
       web-streams-polyfill: 4.0.0-beta.3
 
+  fsevents@2.3.2:
+    optional: true
+
   fsevents@2.3.3:
     optional: true
 
@@ -5317,6 +5417,14 @@ snapshots:
 
   platform@1.3.6: {}
 
+  playwright-core@1.52.0: {}
+
+  playwright@1.52.0:
+    dependencies:
+      playwright-core: 1.52.0
+    optionalDependencies:
+      fsevents: 2.3.2
+
   postcss-load-config@3.1.4(postcss@8.5.3):
     dependencies:
       lilconfig: 2.1.0
@@ -5916,7 +6024,13 @@ snapshots:
     optionalDependencies:
       vite: 5.4.14(@types/node@22.14.1)(lightningcss@1.29.1)
 
-  vitest@3.1.4(@types/node@22.14.1)(jsdom@26.1.0)(lightningcss@1.29.1):
+  vitest-browser-svelte@0.1.0(@vitest/browser@3.1.4)(svelte@5.30.1)(vitest@3.1.4):
+    dependencies:
+      '@vitest/browser': 3.1.4(playwright@1.52.0)(vite@5.4.14(@types/node@22.14.1)(lightningcss@1.29.1))(vitest@3.1.4)
+      svelte: 5.30.1
+      vitest: 3.1.4(@types/node@22.14.1)(@vitest/browser@3.1.4)(jsdom@26.1.0)(lightningcss@1.29.1)
+
+  vitest@3.1.4(@types/node@22.14.1)(@vitest/browser@3.1.4)(jsdom@26.1.0)(lightningcss@1.29.1):
     dependencies:
       '@vitest/expect': 3.1.4
       '@vitest/mocker': 3.1.4(vite@5.4.14(@types/node@22.14.1)(lightningcss@1.29.1))
@@ -5941,6 +6055,7 @@ snapshots:
       why-is-node-running: 2.3.0
     optionalDependencies:
       '@types/node': 22.14.1
+      '@vitest/browser': 3.1.4(playwright@1.52.0)(vite@5.4.14(@types/node@22.14.1)(lightningcss@1.29.1))(vitest@3.1.4)
       jsdom: 26.1.0
     transitivePeerDependencies:
       - less

scripts/setup-playwright-arch.sh

@@ -0,0 +1,23 @@
+#!/bin/bash
+
+sudo ln /usr/lib/libpcre.so.1 /usr/lib/libpcre.so.3
+
+git clone https://github.com/festvox/flite.git
+cd flite
+./configure --enable-shared
+make
+make get_voices
+
+sudo cp build/x86_64-linux-gnu/lib/libflite.so.1 /usr/lib
+sudo cp build/x86_64-linux-gnu/lib/libflite_cmu_grapheme_lang.so.1 /usr/lib
+sudo cp build/x86_64-linux-gnu/lib/libflite_cmu_grapheme_lex.so.1 /usr/lib
+sudo cp build/x86_64-linux-gnu/lib/libflite_cmu_indic_lang.so.1 /usr/lib
+sudo cp build/x86_64-linux-gnu/lib/libflite_cmu_indic_lex.so.1 /usr/lib
+sudo cp build/x86_64-linux-gnu/lib/libflite_cmu_time_awb.so.1 /usr/lib
+sudo cp build/x86_64-linux-gnu/lib/libflite_cmu_us_awb.so.1 /usr/lib
+sudo cp build/x86_64-linux-gnu/lib/libflite_cmu_us_kal.so.1 /usr/lib
+sudo cp build/x86_64-linux-gnu/lib/libflite_cmu_us_kal16.so.1 /usr/lib
+sudo cp build/x86_64-linux-gnu/lib/libflite_cmu_us_rms.so.1 /usr/lib
+sudo cp build/x86_64-linux-gnu/lib/libflite_cmu_us_slt.so.1 /usr/lib
+sudo cp build/x86_64-linux-gnu/lib/libflite_cmulex.so.1 /usr/lib
+sudo cp build/x86_64-linux-gnu/lib/libflite_usenglish.so.1 /usr/lib

src/app.html

@@ -4,6 +4,7 @@
 		<meta charset="utf-8" />
 		<link rel="icon" href="%sveltekit.assets%/favicon.png" />
 		<meta name="viewport" content="width=device-width, initial-scale=1" />
+		<title>Hugging Face Playground</title>
 		%sveltekit.head%
 	</head>
 
@@ -47,6 +48,7 @@
 				});
 			})();
 		</script>
-		<div style="display: contents">%sveltekit.body%</div>
+
+		<div>%sveltekit.body%</div>
 	</body>
 </html>

src/lib/data/context_length.json

@@ -215,7 +215,6 @@
 		"togethercomputer/m2-bert-80M-32k-retrieval": 32768,
 		"cartesia/sonic": 0,
 		"scb10x/scb10x-llama3-1-typhoon2-8b-instruct": 8192,
-		"meta-llama/Meta-Llama-3.1-405B-Instruct-Turbo": 130815,
 		"Qwen/Qwen2.5-7B-Instruct-Turbo": 32768,
 		"deepseek-ai/DeepSeek-R1-Distill-Llama-70B-free": 8192,
 		"meta-llama-llama-2-70b-hf": 4096,
@@ -230,22 +229,20 @@
 		"cartesia/sonic-2": 0,
 		"togethercomputer/m2-bert-80M-8k-retrieval": 8192,
 		"meta-llama/Llama-3.3-70B-Instruct-Turbo-Free": 131072,
+		"togethercomputer/Refuel-Llm-V2": 16384,
 		"deepseek-ai/DeepSeek-V3": 131072,
-		"scb10x/scb10x-llama3-1-typhoon2-70b-instruct": 8192,
 		"togethercomputer/Refuel-Llm-V2-Small": 8192,
 		"togethercomputer/MoA-1": 32768,
 		"meta-llama/Meta-Llama-3-70B-Instruct-Turbo": 8192,
 		"google/gemma-2b-it": 8192,
 		"meta-llama/Llama-3.2-11B-Vision-Instruct-Turbo": 131072,
 		"Gryphe/MythoMax-L2-13b-Lite": 4096,
-		"Qwen/Qwen3-235B-A22B-fp8": 40960,
 		"meta-llama/Meta-Llama-Guard-3-8B": 8192,
 		"marin-community/marin-8b-instruct": 131072,
 		"deepseek-ai/DeepSeek-R1": 163840,
 		"meta-llama/Meta-Llama-3.1-8B-Instruct-Turbo": 131072,
 		"Qwen/Qwen2.5-VL-72B-Instruct": 32768,
 		"arcee-ai/arcee-blitz": 32768,
-		"arcee_ai/arcee-spotlight": 131072,
 		"arcee-ai/caller": 32768,
 		"arcee-ai/coder-large": 32768,
 		"arcee-ai/maestro-reasoning": 131072,
@@ -254,15 +251,20 @@
 		"meta-llama/Llama-3.2-90B-Vision-Instruct-Turbo": 131072,
 		"meta-llama/Llama-3-8b-chat-hf": 8192,
 		"mistralai/Mistral-Small-24B-Instruct-2501": 32768,
-		"Qwen/Qwen3-235B-A22B-fp8-tput": 40960,
-		"perplexity-ai/r1-1776": 163840,
 		"meta-llama/Llama-4-Maverick-17B-128E-Instruct-FP8": 1048576,
 		"togethercomputer/MoA-1-Turbo": 32768,
 		"meta-llama/Llama-3.3-70B-Instruct-Turbo": 131072,
+		"perplexity-ai/r1-1776": 163840,
 		"NousResearch/Nous-Hermes-2-Mixtral-8x7B-DPO": 32768,
 		"deepseek-ai/DeepSeek-R1-Distill-Llama-70B": 131072,
 		"deepseek-ai/DeepSeek-R1-Distill-Qwen-1.5B": 131072,
 		"meta-llama/Meta-Llama-3-8B-Instruct-Lite": 8192,
+		"Qwen/Qwen3-235B-A22B-fp8": 40960,
+		"Qwen/Qwen3-235B-A22B-fp8-tput": 40960,
+		"nvidia/Llama-3.1-Nemotron-70B-Instruct-HF": 32768,
+		"arcee_ai/arcee-spotlight": 131072,
+		"meta-llama/Meta-Llama-3.1-405B-Instruct-Turbo": 130815,
+		"scb10x/scb10x-llama3-1-typhoon2-70b-instruct": 8192,
 		"meta-llama/Meta-Llama-3.1-70B-Instruct-Turbo": 131072,
 		"mistralai/Mistral-7B-Instruct-v0.2": 32768,
 		"deepseek-ai/DeepSeek-V3-p-dp": 131072,
@@ -272,11 +274,9 @@
 		"meta-llama/Llama-3-70b-chat-hf": 8192,
 		"mistralai/Mistral-7B-Instruct-v0.3": 32768,
 		"Salesforce/Llama-Rank-V1": 8192,
-		"nvidia/Llama-3.1-Nemotron-70B-Instruct-HF": 32768,
 		"meta-llama/Llama-Vision-Free": 131072,
 		"meta-llama/Llama-Guard-3-11B-Vision-Turbo": 131072,
 		"meta-llama/Llama-3.2-3B-Instruct-Turbo": 131072,
-		"togethercomputer/Refuel-Llm-V2": 16384,
 		"Qwen/Qwen2.5-72B-Instruct-Turbo": 131072,
 		"meta-llama/Llama-2-70b-hf": 4096
 	},
@@ -284,19 +284,19 @@
 		"accounts/fireworks/models/qwq-32b": 131072,
 		"accounts/fireworks/models/llama4-maverick-instruct-basic": 1048576,
 		"accounts/fireworks/models/qwen3-30b-a3b": 40000,
+		"accounts/fireworks/models/deepseek-r1-basic": 163840,
+		"accounts/fireworks/models/llama-guard-3-8b": 131072,
+		"accounts/fireworks/models/qwen2p5-vl-32b-instruct": 128000,
 		"accounts/fireworks/models/llama4-scout-instruct-basic": 1048576,
+		"accounts/fireworks/models/qwen2-vl-72b-instruct": 32768,
 		"accounts/fireworks/models/firesearch-ocr-v6": 131072,
 		"accounts/fireworks/models/deepseek-v3": 131072,
 		"accounts/fireworks/models/llama-v3p1-8b-instruct": 131072,
 		"accounts/fireworks/models/llama-v3p1-70b-instruct": 131072,
 		"accounts/fireworks/models/deepseek-v3-0324": 163840,
 		"accounts/fireworks/models/qwen3-235b-a22b": 128000,
-		"accounts/fireworks/models/deepseek-r1-basic": 163840,
 		"accounts/fireworks/models/llama-v3p3-70b-instruct": 131072,
 		"accounts/fireworks/models/deepseek-r1": 163840,
-		"accounts/fireworks/models/qwen2p5-vl-32b-instruct": 128000,
-		"accounts/fireworks/models/qwen2-vl-72b-instruct": 32768,
-		"accounts/fireworks/models/llama-guard-3-8b": 131072,
 		"accounts/sentientfoundation/models/dobby-unhinged-llama-3-3-70b-new": 131072,
 		"accounts/perplexity/models/r1-1776": 163840,
 		"accounts/fireworks/models/llama-v3p1-405b-instruct": 131072,

src/lib/state/images.svelte.test.ts

@@ -0,0 +1,91 @@
+import { describe, it, expect, vi, beforeEach, type Mock } from "vitest";
+import { images } from "./images.svelte";
+import { fileToDataURL, compressBase64Image } from "$lib/utils/file.js";
+import { JsonEntityIndexedDbStorage } from "$lib/remult.js";
+
+// Mock dependencies
+vi.mock("$lib/utils/file.js", () => ({
+	fileToDataURL: vi.fn(),
+	compressBase64Image: vi.fn(),
+}));
+
+vi.mock("$lib/remult.js", () => {
+	const mockStoreInstance = {
+		setItem: vi.fn(),
+		getItem: vi.fn(),
+		deleteItem: vi.fn(),
+		init: vi.fn().mockResolvedValue(undefined), // Mock init if it's called internally
+	};
+	return {
+		JsonEntityIndexedDbStorage: vi.fn(() => mockStoreInstance),
+	};
+});
+
+// Helper to get the mocked store instance
+const getMockedStore = () => new JsonEntityIndexedDbStorage();
+
+describe("Images", () => {
+	beforeEach(() => {
+		vi.clearAllMocks();
+		// Mock crypto.randomUUID
+		vi.spyOn(window.crypto, "randomUUID").mockReturnValue("123e4567-e89b-12d3-a456-426614174000");
+	});
+
+	describe("upload", () => {
+		it("should process a file, store it, and return a key", async () => {
+			const mockFile = new File(["dummy content"], "test.png", { type: "image/png" });
+			const mockDataUrl = "data:image/png;base64,dummy";
+			const mockCompressedDataUrl = "data:image/jpeg;base64,compresseddummy";
+
+			(fileToDataURL as Mock).mockResolvedValue(mockDataUrl);
+			(compressBase64Image as Mock).mockResolvedValue(mockCompressedDataUrl);
+			const store = getMockedStore();
+
+			const key = await images.upload(mockFile);
+
+			expect(fileToDataURL).toHaveBeenCalledWith(mockFile);
+			expect(compressBase64Image).toHaveBeenCalledWith({
+				base64: mockDataUrl,
+				maxSizeKB: 400,
+			});
+			expect(store.setItem).toHaveBeenCalledWith(`image-123e4567-e89b-12d3-a456-426614174000`, mockCompressedDataUrl);
+			expect(key).toBe(`image-123e4567-e89b-12d3-a456-426614174000`);
+		});
+	});
+
+	describe("get", () => {
+		it("should retrieve an item from the store", async () => {
+			const mockKey = "image-123";
+			const mockStoredData = "data:image/jpeg;base64,somedata";
+			const store = getMockedStore();
+			(store.getItem as Mock).mockResolvedValue(mockStoredData);
+
+			const result = await images.get(mockKey);
+
+			expect(store.getItem).toHaveBeenCalledWith(mockKey);
+			expect(result).toBe(mockStoredData);
+		});
+
+		it("should return undefined if item not found (or whatever getItem returns)", async () => {
+			const mockKey = "image-not-found";
+			const store = getMockedStore();
+			(store.getItem as Mock).mockResolvedValue(undefined); // Simulate item not found
+
+			const result = await images.get(mockKey);
+
+			expect(store.getItem).toHaveBeenCalledWith(mockKey);
+			expect(result).toBeUndefined();
+		});
+	});
+
+	describe("delete", () => {
+		it("should delete an item from the store", async () => {
+			const mockKey = "image-to-delete";
+			const store = getMockedStore();
+
+			await images.delete(mockKey);
+
+			expect(store.deleteItem).toHaveBeenCalledWith(mockKey);
+		});
+	});
+});

vite.config.ts

@@ -20,7 +20,19 @@ export default defineConfig({
 				plugins: [svelteTesting()],
 				test: {
 					name: "client",
-					environment: "jsdom",
+					environment: "browser",
+					browser: {
+						enabled: true,
+						provider: "playwright",
+						instances: [
+							{
+								browser: "chromium",
+							},
+							{
+								browser: "firefox",
+							},
+						],
+					},
 					clearMocks: true,
 					include: ["src/**/*.svelte.{test,spec}.{js,ts}"],
 					exclude: ["src/lib/server/**"],

vitest-setup-client.ts

@@ -1,18 +1,22 @@
-import "@testing-library/jest-dom/vitest";
-import { vi } from "vitest";
+/// <reference types="@vitest/browser/matchers" />
+/// <reference types="@vitest/browser/providers/playwright" />
 
-// required for svelte5 + jsdom as jsdom does not support matchMedia
-Object.defineProperty(window, "matchMedia", {
-	writable: true,
-	enumerable: true,
-	value: vi.fn().mockImplementation(query => ({
-		matches: false,
-		media: query,
-		onchange: null,
-		addEventListener: vi.fn(),
-		removeEventListener: vi.fn(),
-		dispatchEvent: vi.fn(),
-	})),
-});
-
-// add more mocks here if you need them
+// import "@testing-library/jest-dom/vitest";
+// import { vi } from "vitest";
+// import fakeIndexedDB from "fake-indexeddb";
+//
+// // required for svelte5 + jsdom as jsdom does not support matchMedia
+// Object.defineProperty(window, "matchMedia", {
+// 	writable: true,
+// 	enumerable: true,
+// 	value: vi.fn().mockImplementation(query => ({
+// 		matches: false,
+// 		media: query,
+// 		onchange: null,
+// 		addEventListener: vi.fn(),
+// 		removeEventListener: vi.fn(),
+// 		dispatchEvent: vi.fn(),
+// 	})),
+// });
+//
+// globalThis.indexedDB = fakeIndexedDB;