IndexedDb & Structured output (#82)

Migrates usage of local storage to IndexedDB.

Benefits:
- Higher storage allowance (5MiB vs unlimited?)
- Does not block main thread
- Data loss prevention on schema update with Dexie's handlers

I also abstracted the logic a bit and made things more predictable. This
enables, for example, independent conversation load states.

Also add Structured output, including a form mode!


https://github.com/user-attachments/assets/459846fe-d03c-41e0-907e-4cf7bad70b4e

.env.example

@@ -7,3 +7,5 @@ NEBIUS_API_KEY=
 NOVITA_API_KEY=
 FAL_API_KEY=
 HF_TOKEN=
+
+MODELS_FILE=

.gitignore

@@ -20,3 +20,6 @@ Thumbs.db
 vite.config.js.timestamp-*
 vite.config.ts.timestamp-*
 .aider*
+
+# Model JSON file
+models.json

package.json

@@ -48,6 +48,7 @@
 		"prettier-plugin-svelte": "^3.2.6",
 		"prettier-plugin-tailwindcss": "^0.6.11",
 		"runed": "^0.25.0",
+		"shiki": "^3.4.0",
 		"svelte": "^5.28.2",
 		"svelte-check": "^4.0.0",
 		"tailwind-merge": "^3.0.2",
@@ -61,7 +62,9 @@
 	},
 	"type": "module",
 	"dependencies": {
+		"dequal": "^2.0.3",
 		"eslint-plugin-svelte": "^3.3.1",
+		"remult": "^3.0.2",
 		"typia": "^8.0.0"
 	}
 }

pnpm-lock.yaml

@@ -8,9 +8,15 @@ importers:
 
   .:
     dependencies:
+      dequal:
+        specifier: ^2.0.3
+        version: 2.0.3
       eslint-plugin-svelte:
         specifier: ^3.3.1
         version: 3.3.1(eslint@9.22.0(jiti@2.4.2))(svelte@5.28.2)
+      remult:
+        specifier: ^3.0.2
+        version: 3.0.2
       typia:
         specifier: ^8.0.0
         version: 8.0.0(@samchon/openapi@3.0.0)(typescript@5.8.2)
@@ -114,6 +120,9 @@ importers:
       runed:
         specifier: ^0.25.0
         version: 0.25.0(svelte@5.28.2)
+      shiki:
+        specifier: ^3.4.0
+        version: 3.4.0
       svelte:
         specifier: ^5.28.2
         version: 5.28.2
@@ -683,6 +692,10 @@ packages:
   '@jridgewell/trace-mapping@0.3.25':
     resolution: {integrity: sha512-vNk6aEwybGtawWmy/PzwnGDOjCkLWSD2wqvjGGAgOAwCGWySYXfYoxt00IJkTF+8Lb57DwOb3Aa0o9CApepiYQ==}
 
+  '@noble/hashes@1.8.0':
+    resolution: {integrity: sha512-jCs9ldd7NwzpgXDIf6P3+NrHh9/sD6CQdxHyjQI+h/6rDNo88ypBxxz45UDuZHz9r3tNz7N/VInSVoVdtXEI4A==}
+    engines: {node: ^14.21.3 || >=16}
+
   '@nodelib/fs.scandir@2.1.5':
     resolution: {integrity: sha512-vq24Bq3ym5HEQm2NKCr3yXDwjc7vTsEThRDnkp2DK9p1uqLR+DHurm/NOTo0KG7HYHU7eppKZj3MyqYuMBf62g==}
     engines: {node: '>= 8'}
@@ -695,6 +708,9 @@ packages:
     resolution: {integrity: sha512-oGB+UxlgWcgQkgwo8GcEGwemoTFt3FIO9ababBmaGwXIoBKZ+GTy0pP185beGg7Llih/NSHSV2XAs1lnznocSg==}
     engines: {node: '>= 8'}
 
+  '@paralleldrive/cuid2@2.2.2':
+    resolution: {integrity: sha512-ZOBkgDwEdoYVlSeRbYYXs0S9MejQofiVYoTbKzy/6GQa39/q5tQU2IX46+shYnUkpEl3wc+J6wRlar7r2EK2xA==}
+
   '@pkgr/core@0.1.1':
     resolution: {integrity: sha512-cq8o4cWH0ibXh9VGi5P20Tu9XF/0fFXl9EUinr9QfTM7a7p0oTA4iJRCQWppXR1Pg8dSM0UCItCkPwsk9qWWYA==}
     engines: {node: ^12.20.0 || ^14.18.0 || >=16.0.0}
@@ -869,6 +885,27 @@ packages:
   '@samchon/openapi@3.0.0':
     resolution: {integrity: sha512-eVQlyKRYv1/C2Mikc1xZr7c0jMjg1vjPkeY/gheKB4c5WOOWyTNZ1uvnXR+ETpPHwaQ54I9NrQZhoNk6BEGuuw==}
 
+  '@shikijs/core@3.4.0':
+    resolution: {integrity: sha512-0YOzTSRDn/IAfQWtK791gs1u8v87HNGToU6IwcA3K7nPoVOrS2Dh6X6A6YfXgPTSkTwR5y6myk0MnI0htjnwrA==}
+
+  '@shikijs/engine-javascript@3.4.0':
+    resolution: {integrity: sha512-1ywDoe+z/TPQKj9Jw0eU61B003J9DqUFRfH+DVSzdwPUFhR7yOmfyLzUrFz0yw8JxFg/NgzXoQyyykXgO21n5Q==}
+
+  '@shikijs/engine-oniguruma@3.4.0':
+    resolution: {integrity: sha512-zwcWlZ4OQuJ/+1t32ClTtyTU1AiDkK1lhtviRWoq/hFqPjCNyLj22bIg9rB7BfoZKOEOfrsGz7No33BPCf+WlQ==}
+
+  '@shikijs/langs@3.4.0':
+    resolution: {integrity: sha512-bQkR+8LllaM2duU9BBRQU0GqFTx7TuF5kKlw/7uiGKoK140n1xlLAwCgXwSxAjJ7Htk9tXTFwnnsJTCU5nDPXQ==}
+
+  '@shikijs/themes@3.4.0':
+    resolution: {integrity: sha512-YPP4PKNFcFGLxItpbU0ZW1Osyuk8AyZ24YEFaq04CFsuCbcqydMvMUTi40V2dkc0qs1U2uZFrnU6s5zI6IH+uA==}
+
+  '@shikijs/types@3.4.0':
+    resolution: {integrity: sha512-EUT/0lGiE//7j5N/yTMNMT3eCWNcHJLrRKxT0NDXWIfdfSmFJKfPX7nMmRBrQnWboAzIsUziCThrYMMhjbMS1A==}
+
+  '@shikijs/vscode-textmate@10.0.2':
+    resolution: {integrity: sha512-83yeghZ2xxin3Nj8z1NMd/NCuca+gsYXswywDy5bHvwlWL8tpTQmzGeUuHd9FC3E/SBEMvzJRwWEOz5gGes9Qg==}
+
   '@sinclair/typebox@0.27.8':
     resolution: {integrity: sha512-+Fj43pSMwJs4KRrH/938Uf+uAELIgVBmQzg/q1YG10djyfA3TnrU8N8XzqCh/okZdszqBQTZf96idMfE5lnwTA==}
 
@@ -998,9 +1035,15 @@ packages:
   '@types/estree@1.0.6':
     resolution: {integrity: sha512-AYnb1nQyY49te+VRAVgmzfcgjYS91mY5P0TKUDCLEM+gNnA+3T6rWITXRLYCpahpqSQbN5cE+gHpnPyXjHWxcw==}
 
+  '@types/hast@3.0.4':
+    resolution: {integrity: sha512-WPs+bbQw5aCj+x6laNGWLH3wviHtoCv/P3+otBhbOhJgG8qtpdAMlTCxLtsTWA7LH1Oh/bFCHsBn0TPS5m30EQ==}
+
   '@types/json-schema@7.0.15':
     resolution: {integrity: sha512-5+fP8P8MFNC+AyZCDxrB2pkZFPGzqQWUzpSeuuVLvm8VMcorNYavBqoFcxK8bQz4Qsbn4oUEEem4wDLfcysGHA==}
 
+  '@types/mdast@4.0.4':
+    resolution: {integrity: sha512-kGaNbPh1k7AFzgpud/gMdvIm5xuECykRR+JnWKQno9TAXVa6WIVCGTPvYGekIDL4uwCZQSYbUxNBSb1aUo79oA==}
+
   '@types/node-fetch@2.6.12':
     resolution: {integrity: sha512-8nneRWKCg3rMtF69nLQJnOYUcbafYeFSjqkw3jCRLsqkWFlHaoQrr5mXmofFGOx3DKn7UfmBMyov8ySvLRVldA==}
 
@@ -1013,6 +1056,9 @@ packages:
   '@types/resolve@1.20.2':
     resolution: {integrity: sha512-60BCwRFOZCQhDncwQdxxeOEEkbc5dIMccYLwbxsS4TUNeVECQ/pBJ0j09mrHOl/JJvpRPGwO9SvE4nR2Nb/a4Q==}
 
+  '@types/unist@3.0.3':
+    resolution: {integrity: sha512-ko/gIFJRv177XgZsZcBwnqJN5x/Gien8qNOn0D5bQU/zAzVf9Zt3BlcUiLqhV9y4ARk0GbT3tnUiPNgnTXzc/Q==}
+
   '@typescript-eslint/eslint-plugin@8.26.1':
     resolution: {integrity: sha512-2X3mwqsj9Bd3Ciz508ZUtoQQYpOhU/kWoUqIf49H8Z0+Vbh6UF/y0OEYp0Q0axOGzaBGs7QxRwq0knSQ8khQNA==}
     engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
@@ -1060,6 +1106,9 @@ packages:
     resolution: {integrity: sha512-AjOC3zfnxd6S4Eiy3jwktJPclqhFHNyd8L6Gycf9WUPoKZpgM5PjkxY1X7uSy61xVpiJDhhk7XT2NVsN3ALTWg==}
     engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
 
+  '@ungap/structured-clone@1.3.0':
+    resolution: {integrity: sha512-WmoN8qaIAo7WTYWbAZuG8PYEhn5fkz7dZrqTBZ7dtt//lL2Gwms1IcnQ5yHqjDfX8Ft5j4YzDM23f87zBfDe9g==}
+
   abort-controller@3.0.0:
     resolution: {integrity: sha512-h8lQ8tacZYnR3vNQTgibj+tODHI5/+l06Au2Pcriv/Gmet0eaj4TwWH41sO9wnHDiQsEj19q0drzdWdeAHtweg==}
     engines: {node: '>=6.5'}
@@ -1148,10 +1197,19 @@ packages:
     resolution: {integrity: sha512-P8BjAsXvZS+VIDUI11hHCQEv74YT67YUi5JJFNWIqL235sBmjX4+qx9Muvls5ivyNENctx46xQLQ3aTuE7ssaQ==}
     engines: {node: '>=6'}
 
+  ccount@2.0.1:
+    resolution: {integrity: sha512-eyrF0jiFpY+3drT6383f1qhkbGsLSifNAjA61IUjZjmLCWjItY6LB9ft9YhoDgwfmclB2zhu51Lc7+95b8NRAg==}
+
   chalk@4.1.2:
     resolution: {integrity: sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==}
     engines: {node: '>=10'}
 
+  character-entities-html4@2.1.0:
+    resolution: {integrity: sha512-1v7fgQRj6hnSwFpq1Eu0ynr/CDEw0rXo2B61qXrLNdHZmPKgb7fqS1a2JwF0rISo9q77jDI8VMEHoApn8qDoZA==}
+
+  character-entities-legacy@3.0.0:
+    resolution: {integrity: sha512-RpPp0asT/6ufRm//AJVwpViZbGM/MkjQFxJccQRHmISF/22NBtsHqAWmL+/pmkPWoIUJdWyeVleTl1wydHATVQ==}
+
   chardet@0.7.0:
     resolution: {integrity: sha512-mT8iDcrh03qDGRRmoA2hmBJnxpllMR+0/0qlzjqZES6NdiWDcZkCNAk4rPFZ9Q85r27unkiNNg8ZOiwZXBHwcA==}
 
@@ -1201,6 +1259,9 @@ packages:
     resolution: {integrity: sha512-FQN4MRfuJeHf7cBbBMJFXhKSDq+2kAArBlmRBvcvFE5BB1HZKXtSFASDhdlz9zOYwxh8lDdnvmMOe/+5cdoEdg==}
     engines: {node: '>= 0.8'}
 
+  comma-separated-tokens@2.0.3:
+    resolution: {integrity: sha512-Fu4hJdvzeylCfQPp9SGWidpzrMs7tTrlu6Vb8XGaRGck8QSNZJJp538Wrb60Lax4fPwR64ViY468OIUTbRlGZg==}
+
   commander@10.0.1:
     resolution: {integrity: sha512-y4Mg2tXshplEbSGzx7amzPwKKOCGuoSRP/CjEdwwk0FOGlUbq6lKuoyDZTNZkmxHdJtp54hdfY/JUrdL7Xfdug==}
     engines: {node: '>=14'}
@@ -1286,6 +1347,9 @@ packages:
   devalue@5.1.1:
     resolution: {integrity: sha512-maua5KUiapvEwiEAe+XnlZ3Rh0GD+qI1J/nb9vrJc3muPXvcF/8gXYTWF76+5DAqHyDUtOIImEuo0YKE9mshVw==}
 
+  devlop@1.1.0:
+    resolution: {integrity: sha512-RWmIqhcFf1lRYBvNmr7qTNuyCt/7/ns2jbpp1+PalgE/rDQcBT0fioSMUpJ93irlUhC5hrg4cYqe6U+0ImW0rA==}
+
   diff-match-patch@1.0.5:
     resolution: {integrity: sha512-IayShXAgj/QMXgB0IWmKx+rOPuGMhqm5w6jvFxmVenXKIzRqTAAsbBPT3kWQeGANj3jGgvcvv4yK6SxqYmikgw==}
 
@@ -1594,10 +1658,19 @@ packages:
     resolution: {integrity: sha512-0hJU9SCPvmMzIBdZFqNPXWa6dqh7WdH0cII9y+CyS8rG3nL48Bclra9HmKhVVUHyPWNH5Y7xDwAB7bfgSjkUMQ==}
     engines: {node: '>= 0.4'}
 
+  hast-util-to-html@9.0.5:
+    resolution: {integrity: sha512-OguPdidb+fbHQSU4Q4ZiLKnzWo8Wwsf5bZfbvu7//a9oTYoqD/fWpe96NuHkoS9h0ccGOTe0C4NGXdtS0iObOw==}
+
+  hast-util-whitespace@3.0.0:
+    resolution: {integrity: sha512-88JUN06ipLwsnv+dVn+OIYOvAuvBMy/Qoi6O7mQHxdPXpjy+Cd6xRkWwux7DKO+4sYILtLBRIKgsdpS2gQc7qw==}
+
   highlight.js@11.11.1:
     resolution: {integrity: sha512-Xwwo44whKBVCYoliBQwaPvtd/2tYFkRQtXDWj1nackaV2JPXx3L0+Jvd8/qCJ2p+ML0/XVkJ2q+Mr+UVdpJK5w==}
     engines: {node: '>=12.0.0'}
 
+  html-void-elements@3.0.0:
+    resolution: {integrity: sha512-bEqo66MRXsUGxWHV5IP0PUiAWwoEjba4VCzg0LjFJBpchPaTfyfCKTG6bc5F8ucKec3q5y6qOdGyYTSBEvhCrg==}
+
   humanize-ms@1.2.1:
     resolution: {integrity: sha512-Fl70vYtsAFb/C06PTS9dZBo7ihau+Tu/DNCk/OyHhea07S+aeMWpFFkUaXRa8fI+ScZbEI8dfSxwY7gxZ9SAVQ==}
 
@@ -1838,6 +1911,9 @@ packages:
     resolution: {integrity: sha512-/IXtbwEk5HTPyEwyKX6hGkYXxM9nbj64B+ilVJnC/R6B0pH5G4V3b0pVbL7DBj4tkhBAppbQUlf6F6Xl9LHu1g==}
     engines: {node: '>= 0.4'}
 
+  mdast-util-to-hast@13.2.0:
+    resolution: {integrity: sha512-QGYKEuUsYT9ykKBCMOEDLsU5JRObWQusAolFMeko/tYPufNkRffBAQjIE+99jbA87xv6FgmjLtwjh9wBWajwAA==}
+
   melt@0.30.1:
     resolution: {integrity: sha512-Z3X3IMknWSbXFlzQA6On18kdGf1a+Kgqu/TxxvchjGGiS3RINd96PrlLU2Bl/SOxF+UWLLYmH1fohwiMz9UsQQ==}
     peerDependencies:
@@ -1848,6 +1924,21 @@ packages:
     resolution: {integrity: sha512-8q7VEgMJW4J8tcfVPy8g09NcQwZdbwFEqhe/WZkoIzjn/3TGDwtOCYtXGxA3O8tPzpczCCDgv+P2P5y00ZJOOg==}
     engines: {node: '>= 8'}
 
+  micromark-util-character@2.1.1:
+    resolution: {integrity: sha512-wv8tdUTJ3thSFFFJKtpYKOYiGP2+v96Hvk4Tu8KpCAsTMs6yi+nVmGh1syvSCsaxz45J6Jbw+9DD6g97+NV67Q==}
+
+  micromark-util-encode@2.0.1:
+    resolution: {integrity: sha512-c3cVx2y4KqUnwopcO9b/SCdo2O67LwJJ/UyqGfbigahfegL9myoEFoDYZgkT7f36T0bLrM9hZTAaAyH+PCAXjw==}
+
+  micromark-util-sanitize-uri@2.0.1:
+    resolution: {integrity: sha512-9N9IomZ/YuGGZZmQec1MbgxtlgougxTodVwDzzEouPKo3qFWvymFHWcnDi2vzV1ff6kas9ucW+o3yzJK9YB1AQ==}
+
+  micromark-util-symbol@2.0.1:
+    resolution: {integrity: sha512-vs5t8Apaud9N28kgCrRUdEed4UJ+wWNvicHLPxCa9ENlYuAY31M0ETy5y1vA33YoNPDFTghEbnh6efaE8h4x0Q==}
+
+  micromark-util-types@2.0.2:
+    resolution: {integrity: sha512-Yw0ECSpJoViF1qTU4DC6NwtC4aWGt1EkzaQB8KPPyCRR8z9TWeV0HbEFGTO+ZY1wB22zmxnJqhPyTpOVCpeHTA==}
+
   micromatch@4.0.8:
     resolution: {integrity: sha512-PXwfBhYu0hBCPw8Dn0E+WDYb7af3dSLVWKi3HGv84IdF4TyFoC0ysxFd0Goxw7nSv4T/PzEJQxsYsEiFCKo2BA==}
     engines: {node: '>=8.6'}
@@ -1934,6 +2025,12 @@ packages:
     resolution: {integrity: sha512-kbpaSSGJTWdAY5KPVeMOKXSrPtr8C8C7wodJbcsd51jRnmD+GZu8Y0VoU6Dm5Z4vWr0Ig/1NKuWRKf7j5aaYSg==}
     engines: {node: '>=6'}
 
+  oniguruma-parser@0.12.1:
+    resolution: {integrity: sha512-8Unqkvk1RYc6yq2WBYRj4hdnsAxVze8i7iPfQr8e4uSP3tRv0rpZcbGUDvxfQQcdwHt/e9PrMvGCsa8OqG9X3w==}
+
+  oniguruma-to-es@4.3.3:
+    resolution: {integrity: sha512-rPiZhzC3wXwE59YQMRDodUwwT9FZ9nNBwQQfsd1wfdtlKEyCdRV0avrTcSZ5xlIvGRVPd/cx6ZN45ECmS39xvg==}
+
   onnxruntime-common@1.20.1:
     resolution: {integrity: sha512-YiU0s0IzYYC+gWvqD1HzLc46Du1sXpSiwzKb63PACIJr6LfL27VsXSXQvt68EzD3V0D5Bc0vyJTjmMxp0ylQiw==}
 
@@ -2149,6 +2246,9 @@ packages:
     resolution: {integrity: sha512-Pdlw/oPxN+aXdmM9R00JVC9WVFoCLTKJvDVLgmJ+qAffBMxsV85l/Lu7sNx4zSzPyoL2euImuEwHhOXdEgNFZQ==}
     engines: {node: ^14.15.0 || ^16.10.0 || >=18.0.0}
 
+  property-information@7.0.0:
+    resolution: {integrity: sha512-7D/qOz/+Y4X/rzSB6jKxKUsQnphO046ei8qxG59mtM3RG3DHgTK81HrxrmoDVINJb8NKT5ZsRbwHvQ6B68Iyhg==}
+
   protobufjs@7.4.0:
     resolution: {integrity: sha512-mRUWCc3KUU4w1jU8sGxICXH/gNS94DvI1gxqDvBzhj1JpcsimQkYiOJfwsPUykUI5ZaspFbSgmBLER8IrQ3tqw==}
     engines: {node: '>=12.0.0'}
@@ -2178,6 +2278,21 @@ packages:
     resolution: {integrity: sha512-GDhwkLfywWL2s6vEjyhri+eXmfH6j1L7JE27WhqLeYzoh/A3DBaYGEj2H/HFZCn/kMfim73FXxEJTw06WtxQwg==}
     engines: {node: '>= 14.18.0'}
 
+  reflect-metadata@0.1.14:
+    resolution: {integrity: sha512-ZhYeb6nRaXCfhnndflDK8qI6ZQ/YcWZCISRAWICW9XYqMUwjZM9Z0DveWX/ABN01oxSHwVxKQmxeYZSsm0jh5A==}
+
+  regex-recursion@6.0.2:
+    resolution: {integrity: sha512-0YCaSCq2VRIebiaUviZNs0cBz1kg5kVS2UKUfNIx8YVs1cN3AV7NTctO5FOKBA+UT2BPJIWZauYHPqJODG50cg==}
+
+  regex-utilities@2.3.0:
+    resolution: {integrity: sha512-8VhliFJAWRaUiVvREIiW2NXXTmHs4vMNnSzuJVhscgmGav3g9VDxLrQndI3dZZVVdp0ZO/5v0xmX516/7M9cng==}
+
+  regex@6.0.1:
+    resolution: {integrity: sha512-uorlqlzAKjKQZ5P+kTJr3eeJGSVroLKoHmquUj4zHWuR+hEyNqlXsSKlYYF5F4NI6nl7tWCs0apKJ0lmfsXAPA==}
+
+  remult@3.0.2:
+    resolution: {integrity: sha512-DpXRCpjidpwrQ9bGuVOg1EmxKvM9heD9xnCJ7Z7EIuuZVyBg9wQAfK5RsGmHo/+oX7psH2vls9gf4BW3KwUU9g==}
+
   repeat-string@1.6.1:
     resolution: {integrity: sha512-PV0dzCYDNfRi1jCDbJzpW7jNNDRuCOG/jI5ctQcGKt/clZD+YcPS3yIlWuTJMmESC8aevCFmWJy5wjAFgNqN6w==}
     engines: {node: '>=0.10'}
@@ -2258,6 +2373,9 @@ packages:
     resolution: {integrity: sha512-7++dFhtcx3353uBaq8DDR4NuxBetBzC7ZQOhmTQInHEd6bSrXdiEyzCvG07Z44UYdLShWUyXt5M/yhz8ekcb1A==}
     engines: {node: '>=8'}
 
+  shiki@3.4.0:
+    resolution: {integrity: sha512-Ni80XHcqhOEXv5mmDAvf5p6PAJqbUc/RzFeaOqk+zP5DLvTPS3j0ckvA+MI87qoxTQ5RGJDVTbdl/ENLSyyAnQ==}
+
   signal-exit@3.0.7:
     resolution: {integrity: sha512-wnD2ZE+l+SPC/uoS0vXeE9L1+0wuaMqKlfz9AMUo38JsyLSBWSFcHR1Rri62LZc12vLr1gb3jl7iwQhgwpAbGQ==}
 
@@ -2272,6 +2390,9 @@ packages:
     resolution: {integrity: sha512-UXWMKhLOwVKb728IUtQPXxfYU+usdybtUrK/8uGE8CQMvrhOpwvzDBwj0QhSL7MQc7vIsISBG8VQ8+IDQxpfQA==}
     engines: {node: '>=0.10.0'}
 
+  space-separated-tokens@2.0.2:
+    resolution: {integrity: sha512-PEGlAwrG8yXGXRjW32fGbg66JAlOAwbObuqVoJpv/mRgoWDQfgH1wDPvtzWyUSNAXBGSk8h755YDbbcEy3SH2Q==}
+
   string-width@4.2.3:
     resolution: {integrity: sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==}
     engines: {node: '>=8'}
@@ -2279,6 +2400,9 @@ packages:
   string_decoder@1.3.0:
     resolution: {integrity: sha512-hkRX8U1WjJFd8LsDJ2yQ/wWWxaopEsABU1XfkM8A+j0+85JAGppt16cr1Whg6KIbb4okU6Mql6BOj+uup/wKeA==}
 
+  stringify-entities@4.0.4:
+    resolution: {integrity: sha512-IwfBptatlO+QCJUo19AqvrPNqlVMpW9YEL2LIVY+Rpv2qsjCGxaDLNRgeGsQWJhfItebuJhsGSLjaBbNSQ+ieg==}
+
   strip-ansi@6.0.1:
     resolution: {integrity: sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==}
     engines: {node: '>=8'}
@@ -2355,6 +2479,9 @@ packages:
   tr46@0.0.3:
     resolution: {integrity: sha512-N3WMsuqV66lT30CrXNbEjx4GEwlow3v6rr4mCcv6prnfwhS01rkgyFdjPNBYd9br7LpXV1+Emh01fHnq2Gdgrw==}
 
+  trim-lines@3.0.1:
+    resolution: {integrity: sha512-kRj8B+YHZCc9kQYdWfJB2/oUl9rA99qbowYYBtr4ui4mZyAQ2JpvVBd/6U2YloATfqBhBTSMhTpgBHtU0Mf3Rg==}
+
   ts-api-utils@2.0.1:
     resolution: {integrity: sha512-dnlgjFSVetynI8nzgJ+qF62efpglpWRk8isUEWZGWlJYySCTD6aKvbUDu+zbPeDakk3bg5H4XpitHukgfL1m9w==}
     engines: {node: '>=18.12'}
@@ -2420,6 +2547,21 @@ packages:
   undici-types@6.21.0:
     resolution: {integrity: sha512-iwDZqg0QAGrg9Rav5H4n0M64c3mkR59cJ6wQp+7C4nI0gsmExaedaYLNO44eT4AtBBwjbTiGPMlt2Md0T9H9JQ==}
 
+  unist-util-is@6.0.0:
+    resolution: {integrity: sha512-2qCTHimwdxLfz+YzdGfkqNlH0tLi9xjTnHddPmJwtIG9MGsdbutfTc4P+haPD7l7Cjxf/WZj+we5qfVPvvxfYw==}
+
+  unist-util-position@5.0.0:
+    resolution: {integrity: sha512-fucsC7HjXvkB5R3kTCO7kUjRdrS0BJt3M/FPxmHMBOm8JQi2BsHAHFsy27E0EolP8rp0NzXsJ+jNPyDWvOJZPA==}
+
+  unist-util-stringify-position@4.0.0:
+    resolution: {integrity: sha512-0ASV06AAoKCDkS2+xw5RXJywruurpbC4JZSm7nr7MOt1ojAzvyyaO+UxZf18j8FCF6kmzCZKcAgN/yu2gm2XgQ==}
+
+  unist-util-visit-parents@6.0.1:
+    resolution: {integrity: sha512-L/PqWzfTP9lzzEa6CKs0k2nARxTdZduw3zyh8d2NVBnsyvHjSX4TWse388YrrQKbvI8w20fGjGlhgT96WwKykw==}
+
+  unist-util-visit@5.0.0:
+    resolution: {integrity: sha512-MR04uvD+07cwl/yhVuVWAtw+3GOR/knlL55Nd/wAdblk27GCVt3lqpTivy/tkJcZoNPzTwS1Y+KMojlLDhoTzg==}
+
   unplugin-icons@22.1.0:
     resolution: {integrity: sha512-ect2ZNtk1Zgwb0NVHd0C1IDW/MV+Jk/xaq4t8o6rYdVS3+L660ZdD5kTSQZvsgdwCvquRw+/wYn75hsweRjoIA==}
     peerDependencies:
@@ -2457,6 +2599,16 @@ packages:
   util-deprecate@1.0.2:
     resolution: {integrity: sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw==}
 
+  uuid@8.3.2:
+    resolution: {integrity: sha512-+NYs2QeMWy+GWFOEm9xnn6HCDp0l7QBD7ml8zLUmJ+93Q5NF0NocErnwkTkXVFNiX3/fpC6afS8Dhb/gz7R7eg==}
+    hasBin: true
+
+  vfile-message@4.0.2:
+    resolution: {integrity: sha512-jRDZ1IMLttGj41KcZvlrYAaI3CfqpLpfpf+Mfig13viT6NKvRzWZ+lXz0Y5D60w6uJIBAOGq9mSHf0gktF0duw==}
+
+  vfile@6.0.3:
+    resolution: {integrity: sha512-KzIbH/9tXat2u30jf+smMwFCsno4wHVdNmzFyL+T/L3UGqqk6JKfVqOFOZEpZSHADH1k40ab6NUIXZq422ov3Q==}
+
   vite@5.4.14:
     resolution: {integrity: sha512-EK5cY7Q1D8JNhSaPKVK4pwBFvaTmZxEnoKXLG/U9gmdDcihQGNzFlgIvaxezFR4glP1LsuiedwMBqCXH3wZccA==}
     engines: {node: ^18.0.0 || >=20.0.0}
@@ -2594,6 +2746,9 @@ packages:
   zimmerframe@1.1.2:
     resolution: {integrity: sha512-rAbqEGa8ovJy4pyBxZM70hg4pE6gDgaQ0Sl9M3enG3I0d6H4XSAM3GeNGLKnsBpuijUow064sf7ww1nutC5/3w==}
 
+  zwitch@2.0.4:
+    resolution: {integrity: sha512-bXE4cR/kVZhKZX/RjPEflHaKVhUVl85noU3v6b8apfQEc1x4A+zBxjZ4lN8LqGd6WZ3dl98pY4o717VFmoPp+A==}
+
 snapshots:
 
   '@alloc/quick-lru@5.2.0': {}
@@ -2971,6 +3126,8 @@ snapshots:
       '@jridgewell/resolve-uri': 3.1.2
       '@jridgewell/sourcemap-codec': 1.5.0
 
+  '@noble/hashes@1.8.0': {}
+
   '@nodelib/fs.scandir@2.1.5':
     dependencies:
       '@nodelib/fs.stat': 2.0.5
@@ -2983,6 +3140,10 @@ snapshots:
       '@nodelib/fs.scandir': 2.1.5
       fastq: 1.19.1
 
+  '@paralleldrive/cuid2@2.2.2':
+    dependencies:
+      '@noble/hashes': 1.8.0
+
   '@pkgr/core@0.1.1': {}
 
   '@polka/url@1.0.0-next.28': {}
@@ -3135,6 +3296,39 @@ snapshots:
 
   '@samchon/openapi@3.0.0': {}
 
+  '@shikijs/core@3.4.0':
+    dependencies:
+      '@shikijs/types': 3.4.0
+      '@shikijs/vscode-textmate': 10.0.2
+      '@types/hast': 3.0.4
+      hast-util-to-html: 9.0.5
+
+  '@shikijs/engine-javascript@3.4.0':
+    dependencies:
+      '@shikijs/types': 3.4.0
+      '@shikijs/vscode-textmate': 10.0.2
+      oniguruma-to-es: 4.3.3
+
+  '@shikijs/engine-oniguruma@3.4.0':
+    dependencies:
+      '@shikijs/types': 3.4.0
+      '@shikijs/vscode-textmate': 10.0.2
+
+  '@shikijs/langs@3.4.0':
+    dependencies:
+      '@shikijs/types': 3.4.0
+
+  '@shikijs/themes@3.4.0':
+    dependencies:
+      '@shikijs/types': 3.4.0
+
+  '@shikijs/types@3.4.0':
+    dependencies:
+      '@shikijs/vscode-textmate': 10.0.2
+      '@types/hast': 3.0.4
+
+  '@shikijs/vscode-textmate@10.0.2': {}
+
   '@sinclair/typebox@0.27.8': {}
 
   '@sveltejs/acorn-typescript@1.0.5(acorn@8.14.0)':
@@ -3263,8 +3457,16 @@ snapshots:
 
   '@types/estree@1.0.6': {}
 
+  '@types/hast@3.0.4':
+    dependencies:
+      '@types/unist': 3.0.3
+
   '@types/json-schema@7.0.15': {}
 
+  '@types/mdast@4.0.4':
+    dependencies:
+      '@types/unist': 3.0.3
+
   '@types/node-fetch@2.6.12':
     dependencies:
       '@types/node': 22.14.1
@@ -3280,6 +3482,8 @@ snapshots:
 
   '@types/resolve@1.20.2': {}
 
+  '@types/unist@3.0.3': {}
+
   '@typescript-eslint/eslint-plugin@8.26.1(@typescript-eslint/parser@8.26.1(eslint@9.22.0(jiti@2.4.2))(typescript@5.8.2))(eslint@9.22.0(jiti@2.4.2))(typescript@5.8.2)':
     dependencies:
       '@eslint-community/regexpp': 4.12.1
@@ -3357,6 +3561,8 @@ snapshots:
       '@typescript-eslint/types': 8.26.1
       eslint-visitor-keys: 4.2.0
 
+  '@ungap/structured-clone@1.3.0': {}
+
   abort-controller@3.0.0:
     dependencies:
       event-target-shim: 5.0.1
@@ -3437,11 +3643,17 @@ snapshots:
 
   callsites@3.1.0: {}
 
+  ccount@2.0.1: {}
+
   chalk@4.1.2:
     dependencies:
       ansi-styles: 4.3.0
       supports-color: 7.2.0
 
+  character-entities-html4@2.1.0: {}
+
+  character-entities-legacy@3.0.0: {}
+
   chardet@0.7.0: {}
 
   chokidar@4.0.3:
@@ -3482,6 +3694,8 @@ snapshots:
     dependencies:
       delayed-stream: 1.0.0
 
+  comma-separated-tokens@2.0.3: {}
+
   commander@10.0.1: {}
 
   comment-json@4.2.5:
@@ -3540,6 +3754,10 @@ snapshots:
 
   devalue@5.1.1: {}
 
+  devlop@1.1.0:
+    dependencies:
+      dequal: 2.0.3
+
   diff-match-patch@1.0.5: {}
 
   diff-sequences@29.6.3: {}
@@ -3898,8 +4116,28 @@ snapshots:
     dependencies:
       function-bind: 1.1.2
 
+  hast-util-to-html@9.0.5:
+    dependencies:
+      '@types/hast': 3.0.4
+      '@types/unist': 3.0.3
+      ccount: 2.0.1
+      comma-separated-tokens: 2.0.3
+      hast-util-whitespace: 3.0.0
+      html-void-elements: 3.0.0
+      mdast-util-to-hast: 13.2.0
+      property-information: 7.0.0
+      space-separated-tokens: 2.0.2
+      stringify-entities: 4.0.4
+      zwitch: 2.0.4
+
+  hast-util-whitespace@3.0.0:
+    dependencies:
+      '@types/hast': 3.0.4
+
   highlight.js@11.11.1: {}
 
+  html-void-elements@3.0.0: {}
+
   humanize-ms@1.2.1:
     dependencies:
       ms: 2.1.3
@@ -4109,6 +4347,18 @@ snapshots:
 
   math-intrinsics@1.1.0: {}
 
+  mdast-util-to-hast@13.2.0:
+    dependencies:
+      '@types/hast': 3.0.4
+      '@types/mdast': 4.0.4
+      '@ungap/structured-clone': 1.3.0
+      devlop: 1.1.0
+      micromark-util-sanitize-uri: 2.0.1
+      trim-lines: 3.0.1
+      unist-util-position: 5.0.0
+      unist-util-visit: 5.0.0
+      vfile: 6.0.3
+
   melt@0.30.1(@floating-ui/dom@1.6.13)(svelte@5.28.2):
     dependencies:
       '@floating-ui/dom': 1.6.13
@@ -4120,6 +4370,23 @@ snapshots:
 
   merge2@1.4.1: {}
 
+  micromark-util-character@2.1.1:
+    dependencies:
+      micromark-util-symbol: 2.0.1
+      micromark-util-types: 2.0.2
+
+  micromark-util-encode@2.0.1: {}
+
+  micromark-util-sanitize-uri@2.0.1:
+    dependencies:
+      micromark-util-character: 2.1.1
+      micromark-util-encode: 2.0.1
+      micromark-util-symbol: 2.0.1
+
+  micromark-util-symbol@2.0.1: {}
+
+  micromark-util-types@2.0.2: {}
+
   micromatch@4.0.8:
     dependencies:
       braces: 3.0.3
@@ -4182,6 +4449,14 @@ snapshots:
     dependencies:
       mimic-fn: 2.1.0
 
+  oniguruma-parser@0.12.1: {}
+
+  oniguruma-to-es@4.3.3:
+    dependencies:
+      oniguruma-parser: 0.12.1
+      regex: 6.0.1
+      regex-recursion: 6.0.2
+
   onnxruntime-common@1.20.1: {}
 
   onnxruntime-common@1.22.0-dev.20250306-aafa8d170a: {}
@@ -4346,6 +4621,8 @@ snapshots:
       ansi-styles: 5.2.0
       react-is: 18.3.1
 
+  property-information@7.0.0: {}
+
   protobufjs@7.4.0:
     dependencies:
       '@protobufjs/aspromise': 1.1.2
@@ -4382,6 +4659,25 @@ snapshots:
 
   readdirp@4.1.2: {}
 
+  reflect-metadata@0.1.14: {}
+
+  regex-recursion@6.0.2:
+    dependencies:
+      regex-utilities: 2.3.0
+
+  regex-utilities@2.3.0: {}
+
+  regex@6.0.1:
+    dependencies:
+      regex-utilities: 2.3.0
+
+  remult@3.0.2:
+    dependencies:
+      '@paralleldrive/cuid2': 2.2.2
+      reflect-metadata: 0.1.14
+      tslib: 2.8.1
+      uuid: 8.3.2
+
   repeat-string@1.6.1: {}
 
   resolve-from@4.0.0: {}
@@ -4490,6 +4786,17 @@ snapshots:
 
   shebang-regex@3.0.0: {}
 
+  shiki@3.4.0:
+    dependencies:
+      '@shikijs/core': 3.4.0
+      '@shikijs/engine-javascript': 3.4.0
+      '@shikijs/engine-oniguruma': 3.4.0
+      '@shikijs/langs': 3.4.0
+      '@shikijs/themes': 3.4.0
+      '@shikijs/types': 3.4.0
+      '@shikijs/vscode-textmate': 10.0.2
+      '@types/hast': 3.0.4
+
   signal-exit@3.0.7: {}
 
   simple-swizzle@0.2.2:
@@ -4504,6 +4811,8 @@ snapshots:
 
   source-map-js@1.2.1: {}
 
+  space-separated-tokens@2.0.2: {}
+
   string-width@4.2.3:
     dependencies:
       emoji-regex: 8.0.0
@@ -4514,6 +4823,11 @@ snapshots:
     dependencies:
       safe-buffer: 5.2.1
 
+  stringify-entities@4.0.4:
+    dependencies:
+      character-entities-html4: 2.1.0
+      character-entities-legacy: 3.0.0
+
   strip-ansi@6.0.1:
     dependencies:
       ansi-regex: 5.0.1
@@ -4602,6 +4916,8 @@ snapshots:
 
   tr46@0.0.3: {}
 
+  trim-lines@3.0.1: {}
+
   ts-api-utils@2.0.1(typescript@5.8.2):
     dependencies:
       typescript: 5.8.2
@@ -4665,6 +4981,29 @@ snapshots:
 
   undici-types@6.21.0: {}
 
+  unist-util-is@6.0.0:
+    dependencies:
+      '@types/unist': 3.0.3
+
+  unist-util-position@5.0.0:
+    dependencies:
+      '@types/unist': 3.0.3
+
+  unist-util-stringify-position@4.0.0:
+    dependencies:
+      '@types/unist': 3.0.3
+
+  unist-util-visit-parents@6.0.1:
+    dependencies:
+      '@types/unist': 3.0.3
+      unist-util-is: 6.0.0
+
+  unist-util-visit@5.0.0:
+    dependencies:
+      '@types/unist': 3.0.3
+      unist-util-is: 6.0.0
+      unist-util-visit-parents: 6.0.1
+
   unplugin-icons@22.1.0(svelte@5.28.2):
     dependencies:
       '@antfu/install-pkg': 1.0.0
@@ -4693,6 +5032,18 @@ snapshots:
 
   util-deprecate@1.0.2: {}
 
+  uuid@8.3.2: {}
+
+  vfile-message@4.0.2:
+    dependencies:
+      '@types/unist': 3.0.3
+      unist-util-stringify-position: 4.0.0
+
+  vfile@6.0.3:
+    dependencies:
+      '@types/unist': 3.0.3
+      vfile-message: 4.0.2
+
   vite@5.4.14(@types/node@22.14.1)(lightningcss@1.29.1):
     dependencies:
       esbuild: 0.21.5
@@ -4762,3 +5113,5 @@ snapshots:
   yocto-queue@1.2.0: {}
 
   zimmerframe@1.1.2: {}
+
+  zwitch@2.0.4: {}

src/app.css

@@ -93,6 +93,14 @@
 	@apply focus-outline;
 }
 
+/** utility that adds a fade on top and bottom using clip-path or something similar */
+@utility fade-y {
+	--start: 2.5%;
+	--end: calc(100% - var(--start));
+	-webkit-mask-image: linear-gradient(to bottom, transparent, black var(--start), black var(--end), transparent);
+	mask-image: linear-gradient(to bottom, transparent, black var(--start), black var(--end), transparent);
+}
+
 /* Elements & Classes */
 html {
 	font-size: 15px;

src/lib/components/debug-menu.svelte

@@ -1,16 +1,14 @@
 <script lang="ts">
 	import { dev } from "$app/environment";
-	import { session } from "$lib/state/session.svelte.js";
+	import { models } from "$lib/state/models.svelte";
 	import { token } from "$lib/state/token.svelte.js";
 	import { compareStr } from "$lib/utils/compare.js";
 	import { Popover } from "melt/builders";
+	import { openCustomModelConfig } from "./inference-playground/custom-model-config.svelte";
 	import { prompt } from "./prompts.svelte";
 	import { showQuotaModal } from "./quota-modal.svelte";
 	import type { ToastData } from "./toaster.svelte.js";
 	import { addToast } from "./toaster.svelte.js";
-	import { models } from "$lib/state/models.svelte";
-	import { last } from "$lib/utils/array.js";
-	import { openCustomModelConfig } from "./inference-playground/custom-model-config.svelte";
 
 	let innerWidth = $state<number>();
 	let innerHeight = $state<number>();
@@ -27,20 +25,7 @@
 	};
 
 	const actions: Action[] = [
-		{
-			label: "Set long text",
-			cb: () => {
-				const conv = session.project.conversations[0]!;
-				last(conv.messages)!.content = "This is a lot of text. ".repeat(10000);
-			},
-		},
 		{ label: "Toggle Theme", cb: toggleTheme },
-		{
-			label: "Log session to console",
-			cb: () => {
-				console.log(session.$);
-			},
-		},
 		{
 			label: "Log models to console",
 			cb: () => {

src/lib/components/inference-playground/checkpoints-menu.svelte

@@ -1,8 +1,9 @@
 <script lang="ts">
 	import { clickOutside } from "$lib/actions/click-outside.js";
 	import { checkpoints } from "$lib/state/checkpoints.svelte";
-	import { session } from "$lib/state/session.svelte.js";
+	import { projects } from "$lib/state/projects.svelte";
 	import { iterate } from "$lib/utils/array.js";
+	import { formatDateTime } from "$lib/utils/date.js";
 	import { Popover } from "melt/builders";
 	import { Tooltip } from "melt/components";
 	import { fly } from "svelte/transition";
@@ -23,7 +24,7 @@
 	});
 	let dialog = $state<HTMLDialogElement>();
 
-	const projCheckpoints = $derived(checkpoints.for(session.project.id));
+	const projCheckpoints = $derived(checkpoints.for(projects.activeId));
 </script>
 
 <button class="btn relative size-[32px] p-0" {...popover.trigger}>
@@ -48,15 +49,15 @@
 			<h3 class="text-sm font-medium dark:text-white">Checkpoints</h3>
 			<button
 				class="rounded-lg bg-blue-600 px-2 py-1 text-xs font-medium text-white transition-colors hover:bg-blue-700"
-				onclick={() => checkpoints.commit(session.project.id)}
+				onclick={() => checkpoints.commit(projects.activeId)}
 			>
 				Create new
 			</button>
 		</div>
 
 		{#each projCheckpoints as checkpoint (checkpoint.id)}
-			{@const state = checkpoint.projectState}
-			{@const multiple = state.conversations.length > 1}
+			{@const conversations = checkpoint.conversations}
+			{@const multiple = conversations.length > 1}
 			<Tooltip
 				openDelay={0}
 				floatingConfig={{
@@ -71,20 +72,23 @@
 			>
 				{#snippet children(tooltip)}
 					<div
-						class="mb-2 flex w-full items-center rounded-md px-3 py-2 hover:bg-gray-100 dark:hover:bg-gray-700"
+						class="mb-2 flex w-full items-center rounded-md px-3 hover:bg-gray-100 dark:hover:bg-gray-700"
 						{...tooltip.trigger}
 					>
 						<button
-							class="flex flex-1 flex-col text-left text-sm transition-colors"
-							onclick={() => checkpoints.restore(session.project.id, checkpoint)}
+							class="flex flex-1 flex-col py-2 text-left text-sm transition-colors"
+							onclick={e => {
+								e.stopPropagation();
+								checkpoints.restore(checkpoint);
+							}}
 						>
-							<span class="font-medium text-gray-400">{checkpoint.timestamp}</span>
+							<span class="font-medium text-gray-400">{formatDateTime(checkpoint.timestamp)}</span>
 
 							<p class="mt-0.5 flex items-center gap-2 text-sm">
 								{#if multiple}
 									<IconCompare class="text-xs text-gray-400" />
 								{/if}
-								{#each state.conversations as { messages }, i}
+								{#each conversations as { messages }, i}
 									<span class={["text-gray-800 dark:text-gray-200"]}>
 										{messages.length} message{messages.length === 1 ? "" : "s"}
 									</span>
@@ -99,7 +103,7 @@
 							class="mr-0.5 grid place-items-center rounded-md p-1 text-xs hover:bg-gray-300 dark:hover:bg-gray-600"
 							onclick={e => {
 								e.stopPropagation();
-								checkpoints.toggleFavorite(session.project.id, checkpoint);
+								checkpoints.toggleFavorite(checkpoint);
 							}}
 						>
 							{#if checkpoint.favorite}
@@ -112,7 +116,7 @@
 							class="grid place-items-center rounded-md p-1 text-xs hover:bg-gray-300 dark:hover:bg-gray-600"
 							onclick={e => {
 								e.stopPropagation();
-								checkpoints.delete(session.project.id, checkpoint);
+								checkpoints.delete(checkpoint);
 							}}
 						>
 							<IconDelete />
@@ -131,7 +135,7 @@
 								class="size-4 rounded-tl border-t border-l border-gray-200 dark:border-gray-700"
 								{...tooltip.arrow}
 							></div>
-							{#each state.conversations as conversation, i}
+							{#each conversations as conversation, i}
 								{@const msgs = conversation.messages}
 								{@const sliced = msgs.slice(0, 4)}
 								<div

src/lib/components/inference-playground/code-snippets.svelte

@@ -1,31 +1,33 @@
 <script lang="ts">
-	import { emptyModel } from "$lib/state/session.svelte.js";
+	import { emptyModel, type ConversationClass } from "$lib/state/conversations.svelte";
 	import { token } from "$lib/state/token.svelte.js";
-	import { isConversationWithCustomModel, isCustomModel, PipelineTag, type Conversation } from "$lib/types.js";
+	import { isCustomModel, PipelineTag } from "$lib/types.js";
 	import { copyToClipboard } from "$lib/utils/copy.js";
-	import { entries, fromEntries, keys } from "$lib/utils/object.js";
+	import { entries, fromEntries, keys } from "$lib/utils/object.svelte.js";
 	import type { InferenceProvider } from "@huggingface/inference";
 	import hljs from "highlight.js/lib/core";
 	import http from "highlight.js/lib/languages/http";
 	import javascript from "highlight.js/lib/languages/javascript";
 	import python from "highlight.js/lib/languages/python";
-	import { createEventDispatcher } from "svelte";
 	import IconExternal from "~icons/carbon/arrow-up-right";
 	import IconCopy from "~icons/carbon/copy";
 	import LocalToasts from "../local-toasts.svelte";
-	import { getInferenceSnippet, type GetInferenceSnippetReturn, type InferenceSnippetLanguage } from "./utils.js";
+	import {
+		getInferenceSnippet,
+		type GetInferenceSnippetReturn,
+		type InferenceSnippetLanguage,
+	} from "./utils.svelte.js";
 
 	hljs.registerLanguage("javascript", javascript);
 	hljs.registerLanguage("python", python);
 	hljs.registerLanguage("http", http);
 
 	interface Props {
-		conversation: Conversation;
+		conversation: ConversationClass;
+		onCloseCode: () => void;
 	}
 
-	let { conversation }: Props = $props();
-
-	const dispatch = createEventDispatcher<{ closeCode: void }>();
+	const { conversation, onCloseCode }: Props = $props();
 
 	const labelsByLanguage = {
 		javascript: "JavaScript",
@@ -39,11 +41,21 @@
 
 	type GetSnippetArgs = {
 		tokenStr: string;
-		conversation: Conversation;
+		conversation: ConversationClass;
 		lang: InferenceSnippetLanguage;
 	};
 	function getSnippet({ tokenStr, conversation, lang }: GetSnippetArgs) {
 		const model = conversation.model;
+		const data = conversation.data;
+		const opts = {
+			messages: data.messages,
+			streaming: data.streaming,
+			max_tokens: data.config.max_tokens,
+			temperature: data.config.temperature,
+			top_p: data.config.top_p,
+			structured_output: data.structuredOutput,
+		};
+
 		if (isCustomModel(model)) {
 			const snippets = getInferenceSnippet(
 				{
@@ -56,13 +68,7 @@
 				"hf-inference",
 				lang,
 				tokenStr,
-				{
-					messages: conversation.messages,
-					streaming: conversation.streaming,
-					max_tokens: conversation.config.max_tokens,
-					temperature: conversation.config.temperature,
-					top_p: conversation.config.top_p,
-				}
+				opts
 			);
 			return snippets
 				.filter(s => s.client.startsWith("open") || lang === "curl")
@@ -76,13 +82,7 @@
 				});
 		}
 
-		return getInferenceSnippet(model, conversation.provider as InferenceProvider, lang, tokenStr, {
-			messages: conversation.messages,
-			streaming: conversation.streaming,
-			max_tokens: conversation.config.max_tokens,
-			temperature: conversation.config.temperature,
-			top_p: conversation.config.top_p,
-		});
+		return getInferenceSnippet(model, data.provider as InferenceProvider, lang, tokenStr, opts);
 	}
 
 	// { javascript: 0, python: 0, http: 0 } at first
@@ -106,7 +106,7 @@
 	}
 
 	const tokenStr = $derived.by(() => {
-		if (isConversationWithCustomModel(conversation)) {
+		if (isCustomModel(conversation.model)) {
 			const t = conversation.model.accessToken;
 
 			return t && showToken ? t : "YOUR_ACCESS_TOKEN";
@@ -168,9 +168,7 @@
 			{/each}
 			<li class="ml-auto self-center max-sm:hidden">
 				<button
-					onclick={() => {
-						dispatch("closeCode");
-					}}
+					onclick={onCloseCode}
 					class="flex size-7 items-center justify-center rounded-lg px-3 py-2.5 text-xs font-medium text-gray-900 focus:ring-4 focus:ring-gray-100 focus:outline-hidden dark:border-gray-600 dark:bg-gray-800 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white dark:focus:ring-gray-700"
 				>
 					✕
@@ -233,7 +231,7 @@
 	{/if}
 
 	<div class="flex items-center justify-between px-2 pt-6 pb-4">
-		{#if conversation.streaming}
+		{#if conversation.data.streaming}
 			<h2 class="font-semibold">Streaming API</h2>
 		{:else}
 			<h2 class="font-semibold">Non-Streaming API</h2>

src/lib/components/inference-playground/conversation-header.svelte

@@ -1,8 +1,9 @@
 <script lang="ts">
-	import { isConversationWithHFModel, type Conversation, type Model } from "$lib/types.js";
+	import { isHFModel, type Model } from "$lib/types.js";
 
 	import { createEventDispatcher } from "svelte";
 
+	import type { ConversationClass } from "$lib/state/conversations.svelte";
 	import { models } from "$lib/state/models.svelte.js";
 	import IconCog from "~icons/carbon/settings";
 	import Avatar from "../avatar.svelte";
@@ -11,7 +12,7 @@
 	import ProviderSelect from "./provider-select.svelte";
 
 	interface Props {
-		conversation: Conversation;
+		conversation: ConversationClass;
 		conversationIdx: number;
 	}
 
@@ -26,8 +27,7 @@
 		if (!model) {
 			return;
 		}
-		conversation.model = model;
-		conversation.provider = undefined;
+		conversation.update({ modelId: model.id, provider: undefined });
 	}
 
 	let nameSpace = $derived(conversation.model.id.split("/")[0] ?? "");
@@ -58,20 +58,21 @@
 	>
 		<IconCog />
 		<GenerationConfig
-			bind:conversation
-			classNames="absolute top-7 min-w-[250px] z-10 right-3 bg-white dark:bg-gray-900 p-4 rounded-xl border border-gray-200 dark:border-gray-800 hidden group-focus:flex hover:flex"
+			{conversation}
+			classNames="absolute top-7 min-w-[250px] z-40 right-3 bg-white dark:bg-gray-900 p-4 rounded-xl border border-gray-200 dark:border-gray-800 hidden group-focus:flex hover:flex"
 		/>
 	</button>
 </div>
 
-{#if isConversationWithHFModel(conversation)}
+{#if isHFModel(conversation.model)}
 	<div
 		class="{conversationIdx === 0
 			? 'mr-4 max-sm:ml-4'
 			: 'mx-4'}  mt-2 h-11 text-sm leading-none whitespace-nowrap max-sm:mt-4"
 	>
+		<!-- eslint-disable @typescript-eslint/no-explicit-any -->
 		<ProviderSelect
-			bind:conversation
+			conversation={conversation as any}
 			class="rounded-lg border border-gray-200/80 bg-white dark:border-white/5 dark:bg-gray-800/70 dark:hover:bg-gray-800"
 		/>
 	</div>

src/lib/components/inference-playground/conversation.svelte

@@ -1,22 +1,19 @@
 <script lang="ts">
-	import { type Conversation } from "$lib/types.js";
-
 	import { ScrollState } from "$lib/spells/scroll-state.svelte";
+	import { type ConversationClass } from "$lib/state/conversations.svelte";
 	import { watch } from "runed";
 	import { tick } from "svelte";
 	import IconPlus from "~icons/carbon/add";
 	import CodeSnippets from "./code-snippets.svelte";
 	import Message from "./message.svelte";
-	import { iterate } from "$lib/utils/array.js";
-	import { session } from "$lib/state/session.svelte";
 
 	interface Props {
-		conversation: Conversation;
-		loading: boolean;
+		conversation: ConversationClass;
 		viewCode: boolean;
+		onCloseCode: () => void;
 	}
 
-	let { conversation = $bindable(), loading, viewCode }: Props = $props();
+	const { conversation, viewCode, onCloseCode }: Props = $props();
 	let messageContainer: HTMLDivElement | null = $state(null);
 	const scrollState = new ScrollState({
 		element: () => messageContainer,
@@ -25,7 +22,7 @@
 	const atBottom = $derived(scrollState.arrived.bottom);
 
 	watch(
-		() => conversation.messages.at(-1)?.content,
+		() => conversation.data.messages.at(-1)?.content,
 		() => {
 			const shouldScroll = atBottom && !scrollState.isScrolling;
 			if (!shouldScroll) return;
@@ -40,58 +37,55 @@
 	);
 
 	function addMessage() {
-		const msgs = conversation.messages.slice();
-		conversation.messages = [
-			...msgs,
-			{
-				role: msgs.at(-1)?.role === "user" ? "assistant" : "user",
-				content: "",
-			},
-		];
-		conversation = conversation;
-	}
-
-	function deleteMessage(idx: number) {
-		conversation.messages = conversation.messages.slice(0, idx);
+		const msgs = conversation.data.messages.slice();
+		conversation.update({
+			...conversation.data,
+			messages: [
+				...msgs,
+				{
+					role: msgs.at(-1)?.role === "user" ? "assistant" : "user",
+					content: "",
+				},
+			],
+		});
 	}
 
-	function regenMessage(idx: number) {
-		const msg = conversation.messages[idx];
+	async function regenMessage(idx: number) {
+		// TODO: migrate to new logic
+		const msg = conversation.data.messages[idx];
 		if (!msg) return;
 		if (msg.role === "user") {
-			conversation.messages = conversation.messages.slice(0, idx + 1);
+			await conversation.deleteMessages(idx + 1);
 		} else {
-			conversation.messages = conversation.messages.slice(0, idx);
+			await conversation.deleteMessages(idx);
 		}
 
-		session.stopGenerating();
-		session.run(conversation);
+		conversation.stopGenerating();
+		conversation.genNextMessage();
 	}
 </script>
 
 <div
 	class="@container flex flex-col overflow-x-hidden overflow-y-auto"
-	class:animate-pulse={loading && !conversation.streaming}
+	class:animate-pulse={conversation.generating && !conversation.data.streaming}
 	bind:this={messageContainer}
-	id="test-this"
 >
 	{#if !viewCode}
-		{#each iterate(conversation.messages) as [_msg, { isLast }], idx}
+		{#each conversation.data.messages as message, index}
 			<Message
-				bind:message={conversation.messages[idx]!}
+				{message}
+				{index}
 				{conversation}
-				autofocus={idx === conversation.messages.length - 1}
-				{loading}
-				onDelete={() => deleteMessage(idx)}
-				onRegen={() => regenMessage(idx)}
-				{isLast}
+				autofocus={index === conversation.data.messages.length - 1}
+				onDelete={() => conversation.deleteMessage(index)}
+				onRegen={() => regenMessage(index)}
 			/>
 		{/each}
 
 		<button
 			class="flex px-3.5 py-6 hover:bg-gray-50 md:px-6 dark:hover:bg-gray-800/50"
 			onclick={addMessage}
-			disabled={loading}
+			disabled={conversation.generating}
 		>
 			<div class="flex items-center gap-2 p-0! text-sm font-semibold">
 				<div class="text-lg">
@@ -101,6 +95,6 @@
 			</div>
 		</button>
 	{:else}
-		<CodeSnippets {conversation} on:closeCode />
+		<CodeSnippets {conversation} {onCloseCode} />
 	{/if}
 </div>

src/lib/components/inference-playground/custom-model-config.svelte

@@ -21,21 +21,21 @@
 
 <script lang="ts">
 	import { autofocus } from "$lib/actions/autofocus.js";
-	import IconCaret from "~icons/carbon/chevron-down";
 	import { clickOutside } from "$lib/actions/click-outside.js";
 	import { models } from "$lib/state/models.svelte";
 	import { PipelineTag, pipelineTagLabel, type Conversation, type CustomModel } from "$lib/types.js";
+	import { createFieldValidation } from "$lib/utils/form.svelte.js";
+	import { keys } from "$lib/utils/object.svelte.js";
+	import { isValidURL } from "$lib/utils/url.js";
+	import { Select } from "melt/components";
+	import { watch } from "runed";
 	import type { HTMLFormAttributes } from "svelte/elements";
 	import { fade, scale } from "svelte/transition";
-	import IconCross from "~icons/carbon/close";
 	import typia from "typia";
-	import { handleNonStreamingResponse } from "./utils.js";
-	import { watch } from "runed";
+	import IconCaret from "~icons/carbon/chevron-down";
+	import IconCross from "~icons/carbon/close";
 	import Tooltip from "../tooltip.svelte";
-	import { createFieldValidation } from "$lib/utils/form.svelte.js";
-	import { isValidURL } from "$lib/utils/url.js";
-	import { Select } from "melt/components";
-	import { keys } from "$lib/utils/object.js";
+	import { handleNonStreamingResponse } from "./utils.svelte.js";
 
 	let dialog: HTMLDialogElement | undefined = $state();
 	const exists = $derived(!!models.custom.find(m => m._id === model?._id));
@@ -243,6 +243,24 @@
 						</Select>
 					</div>
 
+					<div class="relative flex items-start">
+						<div class="flex h-5 items-center">
+							<input
+								id="strict"
+								name="strict"
+								type="checkbox"
+								class="h-4 w-4 rounded border-gray-700 bg-gray-800 text-blue-600 focus:ring-blue-500"
+								bind:checked={model.supports_response_schema}
+							/>
+						</div>
+						<div class="ml-3 text-sm">
+							<label for="strict" class="font-medium text-gray-300">Supports Structured Output</label>
+							<p id="strict-description" class="text-gray-500">
+								If checked, will allow you to define a JSON response schema.
+							</p>
+						</div>
+					</div>
+
 					{#if message}
 						<div
 							class={[

src/lib/components/inference-playground/generation-config.svelte

@@ -1,28 +1,47 @@
 <script lang="ts">
-	import { type Conversation } from "$lib/types.js";
-	import { watch } from "runed";
-	import { GENERATION_CONFIG_KEYS, GENERATION_CONFIG_SETTINGS } from "./generation-config-settings.js";
-	import { maxAllowedTokens } from "./utils.js";
+	import type { ConversationClass } from "$lib/state/conversations.svelte.js";
 	import { isNumber } from "$lib/utils/is.js";
+	import { watch } from "runed";
 	import IconX from "~icons/carbon/close";
+	import { GENERATION_CONFIG_KEYS, GENERATION_CONFIG_SETTINGS } from "./generation-config-settings.js";
+	import StructuredOutputModal from "./structured-output-modal.svelte";
+	import { maxAllowedTokens } from "./utils.svelte.js";
 
 	interface Props {
-		conversation: Conversation;
+		conversation: ConversationClass;
 		classNames?: string;
 	}
 
-	let { conversation = $bindable(), classNames = "" }: Props = $props();
+	const { conversation, classNames = "" }: Props = $props();
 
 	const maxTokens = $derived(maxAllowedTokens(conversation));
 
 	watch(
 		() => maxTokens,
 		() => {
-			const curr = conversation.config.max_tokens;
+			const curr = conversation.data.config.max_tokens;
 			if (!curr || curr <= maxTokens) return;
-			conversation.config.max_tokens = maxTokens;
+			conversation.update({
+				config: {
+					...conversation.data.config,
+					max_tokens: maxTokens,
+				},
+			});
 		}
 	);
+
+	type Config = (typeof conversation)["data"]["config"];
+	function updateConfigKey<K extends keyof Config>(k: K, v: Config[K]) {
+		conversation.update({
+			...conversation.data,
+			config: {
+				...conversation.data.config,
+				[k]: v,
+			},
+		});
+	}
+
+	let editingStructuredOutput = $state(false);
 </script>
 
 <div class="flex flex-col gap-y-7 {classNames}">
@@ -37,44 +56,67 @@
 					{label}
 				</label>
 				<div class="flex items-center gap-2">
-					{#if !isMaxTokens || isNumber(conversation.config[key])}
+					{#if !isMaxTokens || isNumber(conversation.data.config[key])}
 						<input
 							type="number"
 							class="w-20 rounded-sm border bg-transparent px-1 py-0.5 text-right text-sm dark:border-gray-700"
 							{min}
 							{max}
 							{step}
-							bind:value={conversation.config[key]}
+							bind:value={() => conversation.data.config[key], v => updateConfigKey(key, v)}
 						/>
 					{/if}
-					{#if isMaxTokens && isNumber(conversation.config[key])}
-						<button class="btn-mini" onclick={() => (conversation.config[key] = undefined)}> <IconX /> </button>
+					{#if isMaxTokens && isNumber(conversation.data.config[key])}
+						<button class="btn-mini" onclick={() => updateConfigKey(key, undefined)}> <IconX /> </button>
 					{:else if isMaxTokens}
-						<button class="btn-mini" onclick={() => (conversation.config[key] = maxTokens / 2)}> set </button>
+						<button class="btn-mini" onclick={() => updateConfigKey(key, maxTokens / 2)}> set </button>
 					{/if}
 				</div>
 			</div>
-			{#if !isMaxTokens || isNumber(conversation.config[key])}
+			{#if !isMaxTokens || isNumber(conversation.data.config[key])}
 				<input
 					id={key}
 					type="range"
 					{min}
 					{max}
 					{step}
-					bind:value={conversation.config[key]}
+					bind:value={() => conversation.data.config[key], v => updateConfigKey(key, v)}
 					class="h-2 w-full cursor-pointer appearance-none rounded-lg bg-gray-200 accent-black dark:bg-gray-700 dark:accent-blue-500"
 				/>
 			{/if}
 		</div>
 	{/each}
 
-	<div class="mt-2">
-		<label class="flex cursor-pointer items-center justify-between">
-			<input type="checkbox" bind:checked={conversation.streaming} class="peer sr-only" />
-			<span class="text-sm font-medium text-gray-900 dark:text-gray-300">Streaming</span>
+	<label class="mt-2 flex cursor-pointer items-center justify-between">
+		<input
+			type="checkbox"
+			bind:checked={() => conversation.data.streaming, v => conversation.update({ streaming: v })}
+			class="peer sr-only"
+		/>
+		<span class="text-sm font-medium text-gray-900 dark:text-gray-300">Streaming</span>
+		<div
+			class="peer relative h-5 w-9 rounded-full bg-gray-200 peer-checked:bg-black peer-focus:outline-hidden after:absolute after:start-[2px] after:top-[2px] after:h-4 after:w-4 after:rounded-full after:border after:border-gray-300 after:bg-white after:transition-all after:content-[''] peer-checked:after:translate-x-full peer-checked:after:border-white dark:border-gray-600 dark:bg-gray-700 dark:peer-checked:bg-blue-600"
+		></div>
+	</label>
+
+	<label class="mt-2 flex cursor-pointer items-center justify-between" for="structured-output">
+		<span class="text-sm font-medium text-gray-900 dark:text-gray-300">Structured Output</span>
+		<div class="flex items-center gap-2">
+			<input
+				type="checkbox"
+				bind:checked={
+					() => conversation.data.structuredOutput?.enabled,
+					v => conversation.update({ structuredOutput: { ...conversation.data.structuredOutput, enabled: v ?? false } })
+				}
+				class="peer sr-only"
+				id="structured-output"
+			/>
+			<button class="btn-mini" type="button" onclick={() => (editingStructuredOutput = true)}> edit </button>
 			<div
 				class="peer relative h-5 w-9 rounded-full bg-gray-200 peer-checked:bg-black peer-focus:outline-hidden after:absolute after:start-[2px] after:top-[2px] after:h-4 after:w-4 after:rounded-full after:border after:border-gray-300 after:bg-white after:transition-all after:content-[''] peer-checked:after:translate-x-full peer-checked:after:border-white dark:border-gray-600 dark:bg-gray-700 dark:peer-checked:bg-blue-600"
 			></div>
-		</label>
-	</div>
+		</div>
+	</label>
 </div>
+
+<StructuredOutputModal {conversation} bind:open={editingStructuredOutput} />

src/lib/components/inference-playground/message.svelte

@@ -2,34 +2,36 @@
 	import { autofocus as autofocusAction } from "$lib/actions/autofocus.js";
 	import Tooltip from "$lib/components/tooltip.svelte";
 	import { TextareaAutosize } from "$lib/spells/textarea-autosize.svelte.js";
-	import { PipelineTag, type Conversation, type ConversationMessage } from "$lib/types.js";
+	import { type ConversationClass } from "$lib/state/conversations.svelte.js";
+	import { images } from "$lib/state/images.svelte";
+	import { PipelineTag, type ConversationMessage } from "$lib/types.js";
 	import { copyToClipboard } from "$lib/utils/copy.js";
-	import { fileToDataURL } from "$lib/utils/file.js";
 	import { FileUpload } from "melt/builders";
 	import { fade } from "svelte/transition";
 	import IconCopy from "~icons/carbon/copy";
 	import IconImage from "~icons/carbon/image-reference";
 	import IconMaximize from "~icons/carbon/maximize";
 	import IconCustom from "../icon-custom.svelte";
-	import ImgPreview from "./img-preview.svelte";
 	import LocalToasts from "../local-toasts.svelte";
+	import ImgPreview from "./img-preview.svelte";
+	import { AsyncQueue } from "$lib/utils/queue.js";
 
 	type Props = {
-		conversation: Conversation;
+		conversation: ConversationClass;
 		message: ConversationMessage;
-		loading?: boolean;
+		index: number;
 		autofocus?: boolean;
 		onDelete?: () => void;
 		onRegen?: () => void;
-		isLast?: boolean;
 	};
 
-	let { message = $bindable(), conversation, loading, autofocus, onDelete, onRegen, isLast }: Props = $props();
+	const { index, conversation, message, autofocus, onDelete, onRegen }: Props = $props();
+	const isLast = $derived(index === conversation.data.messages.length - 1);
 
 	let element = $state<HTMLTextAreaElement>();
 	const autosized = new TextareaAutosize({
 		element: () => element,
-		input: () => message.content ?? "",
+		input: () => message?.content ?? "",
 	});
 	const shouldStick = $derived(autosized.textareaHeight > 92);
 
@@ -38,18 +40,27 @@
 			"pipeline_tag" in conversation.model &&
 			conversation.model.pipeline_tag === PipelineTag.ImageTextToText
 	);
+
+	const fileQueue = new AsyncQueue();
 	const fileUpload = new FileUpload({
 		accept: "image/*",
+		multiple: true,
 		async onAccept(file) {
-			if (!message.images) message.images = [];
-
-			const dataUrl = await fileToDataURL(file);
-			if (message.images.includes(dataUrl)) return;
-
-			message.images.push(await fileToDataURL(file));
-			// We're dealing with files ourselves, so we don't want fileUpload to have any internal state,
-			// to avoid conflicts
-			fileUpload.clear();
+			if (!message?.images) {
+				conversation.updateMessage({ index, message: { images: [] } });
+			}
+
+			fileQueue.add(async () => {
+				console.log("queue item start");
+				const key = await images.upload(file);
+
+				const prev = message.images ?? [];
+				await conversation.updateMessage({ index, message: { images: [...prev, key] } });
+				// We're dealing with files ourselves, so we don't want fileUpload to have any internal state,
+				// to avoid conflicts
+				if (fileQueue.queue.length <= 1) fileUpload.clear();
+				console.log("queue item end");
+			});
 		},
 		disabled: () => !canUploadImgs,
 	});
@@ -57,7 +68,7 @@
 	let previewImg = $state<string>();
 
 	const regenLabel = $derived.by(() => {
-		if (message.role === "assistant") return "Regenerate";
+		if (message?.role === "assistant") return "Regenerate";
 		return isLast ? "Generate from here" : "Regenerate from here";
 	});
 </script>
@@ -65,7 +76,7 @@
 <div
 	class="group/message group relative flex flex-col items-start gap-x-4 gap-y-2 border-b bg-white px-3.5 pt-4 pb-6 hover:bg-gray-100/70
 	 @2xl:px-6 dark:border-gray-800 dark:bg-gray-900 dark:hover:bg-gray-800/30"
-	class:pointer-events-none={loading}
+	class:pointer-events-none={conversation.generating}
 	{...fileUpload.dropzone}
 	onclick={undefined}
 >
@@ -86,14 +97,20 @@
 				shouldStick && "@min-2xl:sticky",
 			]}
 		>
-			{message.role}
+			{message?.role}
 		</div>
 		<div class="flex w-full gap-4">
 			<textarea
 				bind:this={element}
 				use:autofocusAction={autofocus}
-				bind:value={message.content}
-				placeholder="Enter {message.role} message"
+				value={message?.content}
+				onchange={e => {
+					const el = e.target as HTMLTextAreaElement;
+					const content = el?.value;
+					if (!message || !content) return;
+					conversation.updateMessage({ index, message: { ...message, content } });
+				}}
+				placeholder="Enter {message?.role} message"
 				class="grow resize-none overflow-hidden rounded-lg bg-transparent px-2 py-2.5 ring-gray-100 outline-none group-hover/message:ring-3 hover:bg-white focus:bg-white focus:ring-3 @2xl:px-3 dark:ring-gray-600 dark:hover:bg-gray-900 dark:focus:bg-gray-900"
 				rows="1"
 				data-message
@@ -195,35 +212,41 @@
 		</div>
 	</div>
 
-	{#if message.images?.length}
-		<div class="mt-2">
-			<div class="flex items-center gap-2">
-				{#each message.images as img (img)}
+	<div class="mt-2">
+		<div class="flex items-center gap-2">
+			{#each message.images ?? [] as imgKey (imgKey)}
+				{#await images.get(imgKey)}
+					<!-- nothing -->
+				{:then imgSrc}
 					<div class="group/img relative">
 						<button
 							aria-label="expand"
 							class="absolute inset-0 z-10 grid place-items-center bg-gray-800/70 opacity-0 group-hover/img:opacity-100"
-							onclick={() => (previewImg = img)}
+							onclick={() => (previewImg = imgSrc)}
 						>
 							<IconMaximize />
 						</button>
-						<img src={img} alt="uploaded" class="size-12 object-cover" />
+						<img src={imgSrc} alt="uploaded" class="size-12 rounded-md object-cover" />
 						<button
 							aria-label="remove"
 							type="button"
-							onclick={e => {
+							onclick={async e => {
 								e.stopPropagation();
-								message.images = message.images?.filter(i => i !== img);
+								await conversation.updateMessage({
+									index,
+									message: { images: message.images?.filter(i => i !== imgKey) },
+								});
+								images.delete(imgKey);
 							}}
 							class="invisible absolute -top-1 -right-1 z-20 grid size-5 place-items-center rounded-full bg-gray-800 text-xs text-white group-hover/img:visible hover:bg-gray-700"
 						>
 							✕
 						</button>
 					</div>
-				{/each}
-			</div>
+				{/await}
+			{/each}
 		</div>
-	{/if}
+	</div>
 </div>
 
 <ImgPreview bind:img={previewImg} />

src/lib/components/inference-playground/model-selector-modal.svelte

@@ -1,7 +1,8 @@
 <script lang="ts">
 	import { autofocus } from "$lib/actions/autofocus.js";
+	import type { ConversationClass } from "$lib/state/conversations.svelte";
 	import { models } from "$lib/state/models.svelte.js";
-	import type { Conversation, CustomModel, Model } from "$lib/types.js";
+	import type { CustomModel, Model } from "$lib/types.js";
 	import { noop } from "$lib/utils/noop.js";
 	import fuzzysearch from "$lib/utils/search.js";
 	import { sleep } from "$lib/utils/sleep.js";
@@ -20,7 +21,7 @@
 	interface Props {
 		onModelSelect?: (model: string) => void;
 		onClose?: () => void;
-		conversation: Conversation;
+		conversation: ConversationClass;
 	}
 
 	let { onModelSelect, onClose, conversation }: Props = $props();

src/lib/components/inference-playground/model-selector.svelte

@@ -1,17 +1,18 @@
 <script lang="ts">
+	import type { ConversationClass } from "$lib/state/conversations.svelte";
 	import { models } from "$lib/state/models.svelte.js";
-	import { isConversationWithHFModel, isCustomModel, type Conversation, type Model } from "$lib/types.js";
+	import { isCustomModel, isHFModel, type Model } from "$lib/types.js";
 	import IconCaret from "~icons/carbon/chevron-down";
 	import Avatar from "../avatar.svelte";
 	import ModelSelectorModal from "./model-selector-modal.svelte";
 	import ProviderSelect from "./provider-select.svelte";
-	import { defaultSystemMessage } from "./utils.js";
+	import { defaultSystemMessage } from "./utils.svelte.js";
 
 	interface Props {
-		conversation: Conversation;
+		conversation: ConversationClass;
 	}
 
-	let { conversation = $bindable() }: Props = $props();
+	const { conversation }: Props = $props();
 
 	let showModelPickerModal = $state(false);
 
@@ -21,9 +22,11 @@
 		if (!model) {
 			return;
 		}
-		conversation.model = model;
-		conversation.systemMessage = { role: "system", content: defaultSystemMessage?.[modelId] ?? "" };
-		conversation.provider = undefined;
+		conversation.update({
+			modelId: model.id,
+			systemMessage: { role: "system", content: defaultSystemMessage?.[modelId] ?? "" },
+			provider: undefined,
+		});
 	}
 
 	const model = $derived(conversation.model);
@@ -61,6 +64,7 @@
 	<ModelSelectorModal {conversation} onModelSelect={changeModel} onClose={() => (showModelPickerModal = false)} />
 {/if}
 
-{#if isConversationWithHFModel(conversation)}
-	<ProviderSelect bind:conversation />
+{#if isHFModel(conversation.model)}
+	<!-- eslint-disable-next-line @typescript-eslint/no-explicit-any -->
+	<ProviderSelect conversation={conversation as any} />
 {/if}

src/lib/components/inference-playground/playground.svelte

@@ -1,14 +1,9 @@
 <script lang="ts">
 	import { observe, observed, ObservedElements } from "$lib/actions/observe.svelte.js";
-	import { models } from "$lib/state/models.svelte.js";
-	import { session } from "$lib/state/session.svelte.js";
 	import { token } from "$lib/state/token.svelte.js";
-	import { isConversationWithHFModel, type ConversationMessage, type Model, type Project } from "$lib/types.js";
 	import { cmdOrCtrl, optOrAlt } from "$lib/utils/platform.js";
 	import { Popover } from "melt/components";
-	import typia from "typia";
 	import { default as IconDelete } from "~icons/carbon/trash-can";
-	import { showShareModal } from "../share-modal.svelte";
 	import Toaster from "../toaster.svelte";
 	import Tooltip from "../tooltip.svelte";
 	import PlaygroundConversationHeader from "./conversation-header.svelte";
@@ -18,8 +13,11 @@
 	import ModelSelectorModal from "./model-selector-modal.svelte";
 	import ModelSelector from "./model-selector.svelte";
 	import ProjectSelect from "./project-select.svelte";
-	import { isSystemPromptSupported } from "./utils.js";
+	import { isSystemPromptSupported } from "./utils.svelte.js";
 
+	import { conversations } from "$lib/state/conversations.svelte";
+	import { projects } from "$lib/state/projects.svelte";
+	import { isHFModel } from "$lib/types.js";
 	import { iterate } from "$lib/utils/array.js";
 	import IconChatLeft from "~icons/carbon/align-box-bottom-left";
 	import IconChatRight from "~icons/carbon/align-box-bottom-right";
@@ -30,43 +28,29 @@
 	import IconCompare from "~icons/carbon/compare";
 	import IconInfo from "~icons/carbon/information";
 	import IconSettings from "~icons/carbon/settings";
+	import { showShareModal } from "../share-modal.svelte";
 	import IconShare from "~icons/carbon/share";
 
-	const multiple = $derived(session.project.conversations.length > 1);
-
-	const startMessageUser: ConversationMessage = { role: "user", content: "" };
+	const multiple = $derived(conversations.active.length > 1);
 
 	let viewCode = $state(false);
 	let viewSettings = $state(false);
-	const loading = $derived(session.generating);
+	const loading = $derived(conversations.generating);
 
 	let selectCompareModelOpen = $state(false);
 
-	const systemPromptSupported = $derived(
-		session.project.conversations.some(conversation => isSystemPromptSupported(conversation.model))
-	);
-	const compareActive = $derived(session.project.conversations.length === 2);
-
-	function reset() {
-		const c = session.project.conversations.map(conversation => {
-			return {
-				...conversation,
-				systemMessage: { role: "system", content: "" },
-				messages: [{ ...startMessageUser }],
-			};
-		});
-		if (typia.is<Project["conversations"]>(c)) session.project.conversations = c;
-	}
+	const systemPromptSupported = $derived(conversations.active.some(c => isSystemPromptSupported(c.model)));
+	const compareActive = $derived(conversations.active.length === 2);
 
 	function onKeydown(event: KeyboardEvent) {
 		if ((event.ctrlKey || event.metaKey) && event.key === "Enter") {
-			session.run();
+			conversations.genNextMessages();
 		}
 		if ((event.ctrlKey || event.metaKey) && event.altKey && event.key === "l") {
-			session.run("left");
+			conversations.genNextMessages("left");
 		}
 		if ((event.ctrlKey || event.metaKey) && event.altKey && event.key === "r") {
-			session.run("right");
+			conversations.genNextMessages("right");
 		}
 	}
 
@@ -83,23 +67,6 @@
 			alert("Please provide a valid HF token.");
 		}
 	}
-
-	function addCompareModel(modelId: Model["id"]) {
-		const model = models.all.find(m => m.id === modelId);
-		if (!model || session.project.conversations.length === 2) {
-			return;
-		}
-		const newConversation = { ...JSON.parse(JSON.stringify(session.project.conversations[0])), model };
-		session.project.conversations = [...session.project.conversations, newConversation];
-		session.generationStats = [session.generationStats[0], { latency: 0, generatedTokensCount: 0 }];
-	}
-
-	function removeCompareModal(conversationIdx: number) {
-		session.project.conversations.splice(conversationIdx, 1)[0];
-		session.$ = session.$;
-		session.generationStats.splice(conversationIdx, 1)[0];
-		session.generationStats = session.generationStats;
-	}
 </script>
 
 {#if token.showModal}
@@ -138,12 +105,11 @@
 				placeholder={systemPromptSupported
 					? "Enter a custom prompt"
 					: "System prompt is not supported with the chosen model."}
-				value={systemPromptSupported ? session.project.conversations[0]?.systemMessage.content : ""}
+				value={systemPromptSupported ? conversations.active[0]?.data.systemMessage.content : ""}
 				oninput={e => {
-					for (const conversation of session.project.conversations) {
-						conversation.systemMessage.content = e.currentTarget.value;
+					for (const c of conversations.active) {
+						c.update({ ...c.data, systemMessage: { ...c.data.systemMessage, content: e.currentTarget.value } });
 					}
-					session.$ = session.$;
 				}}
 				class="absolute inset-x-0 bottom-0 h-full resize-none bg-transparent px-3 pt-10 text-sm outline-hidden"
 			></textarea>
@@ -156,24 +122,16 @@
 		<div
 			class="flex flex-1 divide-x divide-gray-200 overflow-x-auto overflow-y-hidden *:w-full max-sm:w-dvw md:pt-3 dark:divide-gray-800"
 		>
-			{#each session.project.conversations as conversation, conversationIdx (conversation)}
+			{#each conversations.active as conversation, conversationIdx (conversation)}
 				<div class="flex h-full flex-col overflow-hidden max-sm:min-w-full">
 					{#if compareActive}
 						<PlaygroundConversationHeader
 							{conversationIdx}
-							bind:conversation={session.project.conversations[conversationIdx]!}
-							on:close={() => removeCompareModal(conversationIdx)}
+							{conversation}
+							on:close={() => conversations.delete(conversation.data)}
 						/>
 					{/if}
-					<PlaygroundConversation
-						{loading}
-						bind:conversation={
-							() => session.project.conversations[conversationIdx]!,
-							v => (session.project.conversations[conversationIdx] = v)
-						}
-						{viewCode}
-						on:closeCode={() => (viewCode = false)}
-					/>
+					<PlaygroundConversation {conversation} {viewCode} onCloseCode={() => (viewCode = false)} />
 				</div>
 			{/each}
 		</div>
@@ -197,7 +155,7 @@
 				{/if}
 				<Tooltip>
 					{#snippet trigger(tooltip)}
-						<button type="button" onclick={reset} class="btn size-[39px]" {...tooltip.trigger}>
+						<button type="button" onclick={conversations.reset} class="btn size-[39px]" {...tooltip.trigger}>
 							<IconDelete />
 						</button>
 					{/snippet}
@@ -207,13 +165,13 @@
 			<div
 				class="pointer-events-none absolute inset-0 flex flex-1 shrink-0 items-center justify-around gap-x-8 text-center text-sm text-gray-500 max-xl:hidden"
 			>
-				{#each iterate(session.generationStats) as [{ latency, generatedTokensCount }, isLast]}
+				{#each iterate(conversations.generationStats) as [{ latency, tokens }, isLast]}
 					{@const baLeft = observed["bottom-actions"].rect.left}
 					{@const tceRight = observed["token-count-end"].offset.right}
 					<span
 						style:translate={isLast ? (baLeft - 12 < tceRight ? baLeft - tceRight - 12 + "px" : "") : undefined}
 						use:observe={{ name: isLast ? ObservedElements.TokenCountEnd : ObservedElements.TokenCountStart }}
-						>{generatedTokensCount} tokens · Latency {latency}ms</span
+						>{tokens} tokens · Latency {latency}ms</span
 					>
 				{/each}
 			</div>
@@ -231,7 +189,7 @@
 					<button
 						onclick={() => {
 							viewCode = false;
-							session.runOrStop();
+							conversations.genOrStop();
 						}}
 						type="button"
 						class={[
@@ -244,7 +202,7 @@
 						{#if loading}
 							<div class="flex flex-none items-center gap-[3px]">
 								<span class="mr-2">
-									{#if session.project.conversations[0]?.streaming || session.project.conversations[1]?.streaming}
+									{#if conversations.active.some(c => c.data.streaming)}
 										Stop
 									{:else}
 										Cancel
@@ -296,7 +254,7 @@
 										class="group py-1 text-sm"
 										onclick={() => {
 											viewCode = false;
-											session.runOrStop("left");
+											conversations.genOrStop("left");
 											popover.open = false;
 										}}
 									>
@@ -315,7 +273,7 @@
 										class="group py-1 text-sm"
 										onclick={() => {
 											viewCode = false;
-											session.runOrStop("right");
+											conversations.genOrStop("right");
 											popover.open = false;
 										}}
 									>
@@ -352,7 +310,7 @@
 					class="flex flex-1 flex-col gap-6 overflow-y-hidden rounded-xl border border-gray-200/80 bg-white bg-linear-to-b from-white via-white p-3 shadow-xs dark:border-white/5 dark:bg-gray-900 dark:from-gray-800/40 dark:via-gray-800/40"
 				>
 					<div class="flex flex-col gap-2">
-						<ModelSelector bind:conversation={session.project.conversations[0]!} />
+						<ModelSelector conversation={conversations.active[0]!} />
 						<div class="flex items-center gap-2 self-end px-2 text-xs whitespace-nowrap">
 							<button
 								class="flex items-center gap-0.5 text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-300"
@@ -361,10 +319,10 @@
 								<IconCompare />
 								Compare
 							</button>
-							{#if isConversationWithHFModel(session.project.conversations[0])}
+							{#if isHFModel(conversations.active[0]?.model)}
 								<a
-									href="https://huggingface.co/{session.project.conversations[0]?.model.id}?inference_provider={session
-										.project.conversations[0]?.provider}"
+									href="https://huggingface.co/{conversations.active[0]?.model.id}?inference_provider={conversations
+										.active[0].data.provider}"
 									target="_blank"
 									class="flex items-center gap-0.5 text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-300"
 								>
@@ -375,11 +333,11 @@
 						</div>
 					</div>
 
-					<GenerationConfig bind:conversation={session.project.conversations[0]!} />
+					<GenerationConfig conversation={conversations.active[0]!} />
 
 					<div class="mt-auto flex items-center justify-end gap-4 whitespace-nowrap">
 						<button
-							onclick={() => showShareModal(session.project)}
+							onclick={() => projects.current && showShareModal(projects.current)}
 							class="flex items-center gap-1 text-sm text-gray-500 underline decoration-gray-300 hover:text-gray-800 dark:text-gray-400 dark:decoration-gray-600 dark:hover:text-gray-200"
 						>
 							<IconShare class="text-xs" />
@@ -458,8 +416,16 @@
 
 {#if selectCompareModelOpen}
 	<ModelSelectorModal
-		conversation={session.project.conversations[0]!}
-		onModelSelect={addCompareModel}
+		conversation={conversations.active[0]!}
+		onModelSelect={m => {
+			const data = {
+				...conversations.active[0]?.data,
+				projectId: projects.activeId,
+				modelId: m,
+			};
+			delete data.id;
+			conversations.create(data);
+		}}
 		onClose={() => (selectCompareModelOpen = false)}
 	/>
 {/if}

src/lib/components/inference-playground/project-select.svelte

@@ -1,7 +1,6 @@
 <script lang="ts">
 	import { autofocus } from "$lib/actions/autofocus.js";
 	import { checkpoints } from "$lib/state/checkpoints.svelte";
-	import { session } from "$lib/state/session.svelte.js";
 	import { cn } from "$lib/utils/cn.js";
 	import { Select } from "melt/builders";
 	import type { EventHandler } from "svelte/elements";
@@ -15,6 +14,7 @@
 	import { prompt } from "../prompts.svelte";
 	import Tooltip from "../tooltip.svelte";
 	import CheckpointsMenu from "./checkpoints-menu.svelte";
+	import { projects } from "$lib/state/projects.svelte";
 
 	interface Props {
 		class?: string;
@@ -22,12 +22,12 @@
 
 	let { class: classNames = "" }: Props = $props();
 
-	const isDefault = $derived(session.$.activeProjectId === "default");
+	const isDefault = $derived(projects.activeId === "default");
 
 	const select = new Select({
-		value: () => session.$.activeProjectId,
+		value: () => projects.activeId,
 		onValueChange(v) {
-			if (v) session.$.activeProjectId = v;
+			if (v) projects.activeId = v;
 		},
 		sameWidth: true,
 	});
@@ -45,7 +45,7 @@
 	};
 
 	let sdState = $state(defaultSdState);
-	const projectPlaceholder = $derived(`Project #${session.$.projects.length}`);
+	const projectPlaceholder = $derived(`Project #${projects.all.length}`);
 
 	function openSaveDialog() {
 		sdState = { ...defaultSdState, open: true };
@@ -53,7 +53,7 @@
 
 	const saveDialog = async function (e) {
 		e.preventDefault();
-		session.saveProject({
+		projects.saveProject({
 			...sdState,
 			name: sdState.name || projectPlaceholder,
 		});
@@ -71,7 +71,7 @@
 		)}
 	>
 		<div class="flex items-center gap-1 text-sm">
-			{session.project.name}
+			{projects.current?.name}
 		</div>
 		<div
 			class="absolute right-2 grid size-4 flex-none place-items-center rounded-sm bg-gray-100 text-xs dark:bg-gray-600"
@@ -89,16 +89,12 @@
 						<IconSave />
 					</button>
 				{/snippet}
-				Save as Project
+				Save as project
 			</Tooltip>
 		{:else}
 			<Tooltip>
 				{#snippet trigger(tooltip)}
-					<button
-						class="btn size-[32px] p-0"
-						{...tooltip.trigger}
-						onclick={() => (session.$.activeProjectId = "default")}
-					>
+					<button class="btn size-[32px] p-0" {...tooltip.trigger} onclick={() => (projects.activeId = "default")}>
 						<IconCross />
 					</button>
 				{/snippet}
@@ -109,7 +105,7 @@
 </div>
 
 <div {...select.content} class="rounded-lg border bg-gray-100 dark:border-gray-700 dark:bg-gray-800">
-	{#each session.$.projects as { name, id } (id)}
+	{#each projects.all as { name, id } (id)}
 		{@const option = select.getOption(id)}
 		{@const hasCheckpoints = checkpoints.for(id).length > 0}
 		<div {...option} class="group block w-full p-1 text-sm dark:text-white">
@@ -133,7 +129,7 @@
 							class="grid place-items-center rounded-md p-1 text-xs hover:bg-gray-300 dark:hover:bg-gray-600"
 							onclick={async e => {
 								e.stopPropagation();
-								session.updateProject(id, { name: (await prompt("Edit project name", name)) || name });
+								projects.update({ id, name: (await prompt("Edit project name", name)) || name });
 							}}
 						>
 							<IconEdit />
@@ -142,7 +138,7 @@
 							class="grid place-items-center rounded-md p-1 text-xs hover:bg-gray-300 dark:hover:bg-gray-600"
 							onclick={e => {
 								e.stopPropagation();
-								session.deleteProject(id);
+								projects.delete(id);
 							}}
 						>
 							<IconDelete />

src/lib/components/inference-playground/provider-select.svelte

@@ -1,25 +1,29 @@
 <script lang="ts">
-	import { run } from "svelte/legacy";
-
-	import type { ConversationWithHFModel } from "$lib/types.js";
-
+	import type { ConversationClass } from "$lib/state/conversations.svelte";
+	import { models } from "$lib/state/models.svelte";
+	import type { Model } from "$lib/types.js";
 	import { randomPick } from "$lib/utils/array.js";
 	import { cn } from "$lib/utils/cn.js";
 	import { Select } from "melt/builders";
+	import { run } from "svelte/legacy";
 	import IconCaret from "~icons/carbon/chevron-down";
 	import IconProvider from "../icon-provider.svelte";
 
 	interface Props {
-		conversation: ConversationWithHFModel;
+		conversation: ConversationClass & { model: Model };
 		class?: string | undefined;
 	}
 
-	let { conversation = $bindable(), class: classes = undefined }: Props = $props();
+	const { conversation, class: classes = undefined }: Props = $props();
 
 	function reset(providers: typeof conversation.model.inferenceProviderMapping) {
-		const validProvider = providers.find(p => p.provider === conversation.provider);
+		const validProvider = providers.find(p => p.provider === conversation.data.provider);
 		if (validProvider) return;
-		conversation.provider = randomPick(providers)?.provider;
+		if (providers) {
+			conversation.update({ provider: randomPick(providers)?.provider });
+		} else {
+			conversation.update({ modelId: randomPick(models.all)?.id });
+		}
 	}
 
 	let providers = $derived(conversation.model.inferenceProviderMapping);
@@ -28,9 +32,9 @@
 	});
 
 	const select = new Select<string, false>({
-		value: () => conversation.provider,
+		value: () => conversation.data.provider,
 		onValueChange(v) {
-			conversation.provider = v;
+			conversation.update({ provider: v });
 		},
 	});
 
@@ -84,8 +88,8 @@
 		)}
 	>
 		<div class="flex items-center gap-1 text-sm">
-			<IconProvider provider={conversation.provider} />
-			{formatName(conversation.provider ?? "") ?? "loading"}
+			<IconProvider provider={conversation.data.provider} />
+			{formatName(conversation.data.provider ?? "") ?? "loading"}
 		</div>
 		<div
 			class="absolute right-2 grid size-4 flex-none place-items-center rounded-sm bg-gray-100 text-xs dark:bg-gray-600"

src/lib/components/inference-playground/snippets/curl.svelte.ts

@@ -0,0 +1,191 @@
+import type { ConversationEntityMembers } from "$lib/state/conversations.svelte";
+import type { ChatCompletionInputMessage, GenerationParameters, PipelineType } from "@huggingface/tasks";
+import {
+	HF_HUB_INFERENCE_PROXY_TEMPLATE,
+	type InferenceSnippet,
+	type ModelDataMinimal,
+	type SnippetInferenceProvider,
+	getModelInputSnippet,
+	stringifyGenerationConfig,
+	stringifyMessages,
+} from "@huggingface/tasks";
+
+export const snippetBasic = (
+	model: ModelDataMinimal,
+	accessToken: string,
+	provider: SnippetInferenceProvider
+): InferenceSnippet[] => {
+	if (provider !== "hf-inference") {
+		return [];
+	}
+	return [
+		{
+			client: "curl",
+			content: `\
+curl https://router.huggingface.co/hf-inference/models/${model.id} \\
+	-X POST \\
+	-d '{"inputs": ${getModelInputSnippet(model, true)}}' \\
+	-H 'Content-Type: application/json' \\
+	-H 'Authorization: Bearer ${accessToken || `{API_TOKEN}`}'`,
+		},
+	];
+};
+
+export const snippetTextGeneration = (
+	model: ModelDataMinimal,
+	accessToken: string,
+	provider: SnippetInferenceProvider,
+	providerModelId?: string,
+	opts?: {
+		streaming?: boolean;
+		messages?: ChatCompletionInputMessage[];
+		temperature?: GenerationParameters["temperature"];
+		max_tokens?: GenerationParameters["max_tokens"];
+		top_p?: GenerationParameters["top_p"];
+		structured_output?: ConversationEntityMembers["structuredOutput"];
+	}
+): InferenceSnippet[] => {
+	if (model.tags.includes("conversational")) {
+		const baseUrl =
+			provider === "hf-inference"
+				? `https://router.huggingface.co/hf-inference/models/${model.id}/v1/chat/completions`
+				: HF_HUB_INFERENCE_PROXY_TEMPLATE.replace("{{PROVIDER}}", provider) + "/v1/chat/completions";
+		const modelId = providerModelId ?? model.id;
+
+		// Conversational model detected, so we display a code snippet that features the Messages API
+		const streaming = opts?.streaming ?? true;
+		const exampleMessages = getModelInputSnippet(model) as ChatCompletionInputMessage[];
+		const messages = opts?.messages ?? exampleMessages;
+
+		const config = {
+			...(opts?.temperature ? { temperature: opts.temperature } : undefined),
+			max_tokens: opts?.max_tokens ?? 500,
+			...(opts?.top_p ? { top_p: opts.top_p } : undefined),
+			...(opts?.structured_output?.enabled
+				? {
+						response_format: JSON.stringify(
+							{
+								type: "json_schema",
+								json_schema: JSON.parse(opts.structured_output.schema ?? ""),
+							},
+							null,
+							6
+						),
+					}
+				: undefined),
+		};
+		return [
+			{
+				client: "curl",
+				content: `curl '${baseUrl}' \\
+-H 'Authorization: Bearer ${accessToken || `{API_TOKEN}`}' \\
+-H 'Content-Type: application/json' \\
+--data '{
+    "model": "${modelId}",
+    "messages": ${stringifyMessages(messages, {
+			indent: "\t",
+			attributeKeyQuotes: true,
+			customContentEscaper: str => str.replace(/'/g, "'\\''"),
+		})},
+    ${stringifyGenerationConfig(config, {
+			indent: "\n    ",
+			attributeKeyQuotes: true,
+			attributeValueConnector: ": ",
+		})}
+    "stream": ${!!streaming}
+}'`,
+			},
+		];
+	} else {
+		return snippetBasic(model, accessToken, provider);
+	}
+};
+
+export const snippetZeroShotClassification = (
+	model: ModelDataMinimal,
+	accessToken: string,
+	provider: SnippetInferenceProvider
+): InferenceSnippet[] => {
+	if (provider !== "hf-inference") {
+		return [];
+	}
+	return [
+		{
+			client: "curl",
+			content: `curl https://router.huggingface.co/hf-inference/models/${model.id} \\
+	-X POST \\
+	-d '{"inputs": ${getModelInputSnippet(model, true)}, "parameters": {"candidate_labels": ["refund", "legal", "faq"]}}' \\
+	-H 'Content-Type: application/json' \\
+	-H 'Authorization: Bearer ${accessToken || `{API_TOKEN}`}'`,
+		},
+	];
+};
+
+export const snippetFile = (
+	model: ModelDataMinimal,
+	accessToken: string,
+	provider: SnippetInferenceProvider
+): InferenceSnippet[] => {
+	if (provider !== "hf-inference") {
+		return [];
+	}
+	return [
+		{
+			client: "curl",
+			content: `curl https://router.huggingface.co/hf-inference/models/${model.id} \\
+	-X POST \\
+	--data-binary '@${getModelInputSnippet(model, true, true)}' \\
+	-H 'Authorization: Bearer ${accessToken || `{API_TOKEN}`}'`,
+		},
+	];
+};
+
+export const curlSnippets: Partial<
+	Record<
+		PipelineType,
+		(
+			model: ModelDataMinimal,
+			accessToken: string,
+			provider: SnippetInferenceProvider,
+			providerModelId?: string,
+			opts?: Record<string, unknown>
+		) => InferenceSnippet[]
+	>
+> = {
+	// Same order as in tasks/src/pipelines.ts
+	"text-classification": snippetBasic,
+	"token-classification": snippetBasic,
+	"table-question-answering": snippetBasic,
+	"question-answering": snippetBasic,
+	"zero-shot-classification": snippetZeroShotClassification,
+	"translation": snippetBasic,
+	"summarization": snippetBasic,
+	"feature-extraction": snippetBasic,
+	"text-generation": snippetTextGeneration,
+	"image-text-to-text": snippetTextGeneration,
+	"text2text-generation": snippetBasic,
+	"fill-mask": snippetBasic,
+	"sentence-similarity": snippetBasic,
+	"automatic-speech-recognition": snippetFile,
+	"text-to-image": snippetBasic,
+	"text-to-speech": snippetBasic,
+	"text-to-audio": snippetBasic,
+	"audio-to-audio": snippetFile,
+	"audio-classification": snippetFile,
+	"image-classification": snippetFile,
+	"image-to-text": snippetFile,
+	"object-detection": snippetFile,
+	"image-segmentation": snippetFile,
+};
+
+export function getCurlInferenceSnippet(
+	model: ModelDataMinimal,
+	accessToken: string,
+	provider: SnippetInferenceProvider,
+	providerModelId?: string,
+	opts?: Record<string, unknown>
+): InferenceSnippet[] {
+	return model.pipeline_tag && model.pipeline_tag in curlSnippets
+		? (curlSnippets[model.pipeline_tag]?.(model, accessToken, provider, providerModelId, opts) ?? [])
+		: [];
+}

src/lib/components/inference-playground/snippets/index.svelte.ts

@@ -0,0 +1,5 @@
+import * as curl from "./curl.svelte.js";
+import * as python from "./python.svelte.js";
+import * as js from "./js.svelte.js";
+
+export const snippets = { curl, python, js };

src/lib/components/inference-playground/snippets/js.svelte.ts

@@ -0,0 +1,489 @@
+import type { ConversationEntityMembers } from "$lib/state/conversations.svelte";
+import type { ChatCompletionInputMessage, GenerationParameters, PipelineType, WidgetType } from "@huggingface/tasks";
+import {
+	getModelInputSnippet,
+	openAIbaseUrl,
+	stringifyGenerationConfig,
+	stringifyMessages,
+	type InferenceSnippet,
+	type ModelDataMinimal,
+	type SnippetInferenceProvider,
+} from "@huggingface/tasks";
+
+const HFJS_METHODS: Partial<Record<WidgetType, string>> = {
+	"text-classification": "textClassification",
+	"token-classification": "tokenClassification",
+	"table-question-answering": "tableQuestionAnswering",
+	"question-answering": "questionAnswering",
+	"translation": "translation",
+	"summarization": "summarization",
+	"feature-extraction": "featureExtraction",
+	"text-generation": "textGeneration",
+	"text2text-generation": "textGeneration",
+	"fill-mask": "fillMask",
+	"sentence-similarity": "sentenceSimilarity",
+};
+
+export const snippetBasic = (
+	model: ModelDataMinimal,
+	accessToken: string,
+	provider: SnippetInferenceProvider
+): InferenceSnippet[] => {
+	return [
+		...(model.pipeline_tag && model.pipeline_tag in HFJS_METHODS
+			? [
+					{
+						client: "huggingface.js",
+						content: `\
+import { HfInference } from "@huggingface/inference";
+
+const client = new HfInference("${accessToken || `{API_TOKEN}`}");
+
+const output = await client.${HFJS_METHODS[model.pipeline_tag]}({
+	model: "${model.id}",
+	inputs: ${getModelInputSnippet(model)},
+	provider: "${provider}",
+});
+
+console.log(output);
+`,
+					},
+				]
+			: []),
+		{
+			client: "fetch",
+			content: `\
+async function query(data) {
+	const response = await fetch(
+		"https://router.huggingface.co/hf-inference/models/${model.id}",
+		{
+			headers: {
+				Authorization: "Bearer ${accessToken || `{API_TOKEN}`}",
+				"Content-Type": "application/json",
+			},
+			method: "POST",
+			body: JSON.stringify(data),
+		}
+	);
+	const result = await response.json();
+	return result;
+}
+
+query({"inputs": ${getModelInputSnippet(model)}}).then((response) => {
+	console.log(JSON.stringify(response));
+});`,
+		},
+	];
+};
+
+export const snippetTextGeneration = (
+	model: ModelDataMinimal,
+	accessToken: string,
+	provider: SnippetInferenceProvider,
+	providerModelId?: string,
+	opts?: {
+		streaming?: boolean;
+		messages?: ChatCompletionInputMessage[];
+		temperature?: GenerationParameters["temperature"];
+		max_tokens?: GenerationParameters["max_tokens"];
+		top_p?: GenerationParameters["top_p"];
+		structured_output?: ConversationEntityMembers["structuredOutput"];
+	}
+): InferenceSnippet[] => {
+	if (model.tags.includes("conversational")) {
+		// Conversational model detected, so we display a code snippet that features the Messages API
+		const streaming = opts?.streaming ?? true;
+		const exampleMessages = getModelInputSnippet(model) as ChatCompletionInputMessage[];
+		const messages = opts?.messages ?? exampleMessages;
+		const messagesStr = stringifyMessages(messages, { indent: "\t" });
+
+		const config = {
+			...(opts?.temperature ? { temperature: opts.temperature } : undefined),
+			max_tokens: opts?.max_tokens ?? 500,
+			...(opts?.top_p ? { top_p: opts.top_p } : undefined),
+			...(opts?.structured_output?.enabled
+				? {
+						response_format: JSON.stringify(
+							{
+								type: "json_schema",
+								json_schema: JSON.parse(opts.structured_output.schema ?? ""),
+							},
+							null,
+							6
+						),
+					}
+				: undefined),
+		};
+		const configStr = stringifyGenerationConfig(config, {
+			indent: "\n\t",
+			attributeValueConnector: ": ",
+		});
+
+		if (streaming) {
+			return [
+				{
+					client: "huggingface.js",
+					content: `import { HfInference } from "@huggingface/inference";
+
+const client = new HfInference("${accessToken || `{API_TOKEN}`}");
+
+let out = "";
+
+const stream = client.chatCompletionStream({
+	model: "${model.id}",
+	messages: ${messagesStr},
+	provider: "${provider}",
+	${configStr}
+});
+
+for await (const chunk of stream) {
+	if (chunk.choices && chunk.choices.length > 0) {
+		const newContent = chunk.choices[0].delta.content;
+		out += newContent;
+		console.log(newContent);
+	}
+}`,
+				},
+				{
+					client: "openai",
+					content: `import { OpenAI } from "openai";
+
+const client = new OpenAI({
+	baseURL: "${openAIbaseUrl(provider)}",
+	apiKey: "${accessToken || `{API_TOKEN}`}"
+});
+data.
+let out = "";
+
+const stream = await client.chat.completions.create({
+	model: "${providerModelId ?? model.id}",
+	messages: ${messagesStr},
+	${configStr}
+	stream: true,
+});
+
+for await (const chunk of stream) {
+	if (chunk.choices && chunk.choices.length > 0) {
+		const newContent = chunk.choices[0].delta.content;
+		out += newContent;
+		console.log(newContent);
+	}
+}`,
+				},
+			];
+		} else {
+			return [
+				{
+					client: "huggingface.js",
+					content: `import { HfInference } from "@huggingface/inference";
+
+const client = new HfInference("${accessToken || `{API_TOKEN}`}");
+
+const chatCompletion = await client.chatCompletion({
+	model: "${model.id}",
+	messages: ${messagesStr},
+	provider: "${provider}",
+	${configStr}
+});
+
+console.log(chatCompletion.choices[0].message);
+`,
+				},
+				{
+					client: "openai",
+					content: `import { OpenAI } from "openai";
+
+const client = new OpenAI({
+	baseURL: "${openAIbaseUrl(provider)}",
+	apiKey: "${accessToken || `{API_TOKEN}`}"
+});
+
+const chatCompletion = await client.chat.completions.create({
+	model: "${providerModelId ?? model.id}",
+	messages: ${messagesStr},
+	${configStr}
+});
+
+console.log(chatCompletion.choices[0].message);
+`,
+				},
+			];
+		}
+	} else {
+		return snippetBasic(model, accessToken, provider);
+	}
+};
+
+export const snippetZeroShotClassification = (model: ModelDataMinimal, accessToken: string): InferenceSnippet[] => {
+	return [
+		{
+			client: "fetch",
+			content: `async function query(data) {
+			const response = await fetch(
+				"https://router.huggingface.co/hf-inference/models/${model.id}",
+				{
+					headers: {
+						Authorization: "Bearer ${accessToken || `{API_TOKEN}`}",
+						"Content-Type": "application/json",
+					},
+					method: "POST",
+					body: JSON.stringify(data),
+				}
+			);
+			const result = await response.json();
+			return result;
+		}
+
+		query({"inputs": ${getModelInputSnippet(
+			model
+		)}, "parameters": {"candidate_labels": ["refund", "legal", "faq"]}}).then((response) => {
+			console.log(JSON.stringify(response));
+		});`,
+		},
+	];
+};
+
+export const snippetTextToImage = (
+	model: ModelDataMinimal,
+	accessToken: string,
+	provider: SnippetInferenceProvider
+): InferenceSnippet[] => {
+	return [
+		{
+			client: "huggingface.js",
+			content: `\
+import { HfInference } from "@huggingface/inference";
+
+const client = new HfInference("${accessToken || `{API_TOKEN}`}");
+
+const image = await client.textToImage({
+	model: "${model.id}",
+	inputs: ${getModelInputSnippet(model)},
+	parameters: { num_inference_steps: 5 },
+	provider: "${provider}",
+});
+/// Use the generated image (it's a Blob)
+`,
+		},
+		...(provider === "hf-inference"
+			? [
+					{
+						client: "fetch",
+						content: `async function query(data) {
+	const response = await fetch(
+		"https://router.huggingface.co/hf-inference/models/${model.id}",
+		{
+			headers: {
+				Authorization: "Bearer ${accessToken || `{API_TOKEN}`}",
+				"Content-Type": "application/json",
+			},
+			method: "POST",
+			body: JSON.stringify(data),
+		}
+	);
+	const result = await response.blob();
+	return result;
+}
+query({"inputs": ${getModelInputSnippet(model)}}).then((response) => {
+	// Use image
+});`,
+					},
+				]
+			: []),
+	];
+};
+
+export const snippetTextToVideo = (
+	model: ModelDataMinimal,
+	accessToken: string,
+	provider: SnippetInferenceProvider
+): InferenceSnippet[] => {
+	return ["fal-ai", "replicate"].includes(provider)
+		? [
+				{
+					client: "huggingface.js",
+					content: `\
+import { HfInference } from "@huggingface/inference";
+
+const client = new HfInference("${accessToken || `{API_TOKEN}`}");
+
+const video = await client.textToVideo({
+	model: "${model.id}",
+	provider: "${provider}",
+	inputs: ${getModelInputSnippet(model)},
+	parameters: { num_inference_steps: 5 },
+});
+// Use the generated video (it's a Blob)
+`,
+				},
+			]
+		: [];
+};
+
+export const snippetTextToAudio = (
+	model: ModelDataMinimal,
+	accessToken: string,
+	provider: SnippetInferenceProvider
+): InferenceSnippet[] => {
+	if (provider !== "hf-inference") {
+		return [];
+	}
+	const commonSnippet = `async function query(data) {
+		const response = await fetch(
+			"https://router.huggingface.co/hf-inference/models/${model.id}",
+			{
+				headers: {
+					Authorization: "Bearer ${accessToken || `{API_TOKEN}`}",
+					"Content-Type": "application/json",
+				},
+				method: "POST",
+				body: JSON.stringify(data),
+			}
+		);`;
+	if (model.library_name === "transformers") {
+		return [
+			{
+				client: "fetch",
+				content:
+					commonSnippet +
+					`
+			const result = await response.blob();
+			return result;
+		}
+		query({"inputs": ${getModelInputSnippet(model)}}).then((response) => {
+			// Returns a byte object of the Audio wavform. Use it directly!
+		});`,
+			},
+		];
+	} else {
+		return [
+			{
+				client: "fetch",
+				content:
+					commonSnippet +
+					`
+			const result = await response.json();
+			return result;
+		}
+
+		query({"inputs": ${getModelInputSnippet(model)}}).then((response) => {
+			console.log(JSON.stringify(response));
+		});`,
+			},
+		];
+	}
+};
+
+export const snippetAutomaticSpeechRecognition = (
+	model: ModelDataMinimal,
+	accessToken: string,
+	provider: SnippetInferenceProvider
+): InferenceSnippet[] => {
+	return [
+		{
+			client: "huggingface.js",
+			content: `\
+import { HfInference } from "@huggingface/inference";
+
+const client = new HfInference("${accessToken || `{API_TOKEN}`}");
+
+const data = fs.readFileSync(${getModelInputSnippet(model)});
+
+const output = await client.automaticSpeechRecognition({
+	data,
+	model: "${model.id}",
+	provider: "${provider}",
+});
+
+console.log(output);
+`,
+		},
+		...(provider === "hf-inference" ? snippetFile(model, accessToken, provider) : []),
+	];
+};
+
+export const snippetFile = (
+	model: ModelDataMinimal,
+	accessToken: string,
+	provider: SnippetInferenceProvider
+): InferenceSnippet[] => {
+	if (provider !== "hf-inference") {
+		return [];
+	}
+	return [
+		{
+			client: "fetch",
+			content: `async function query(filename) {
+	const data = fs.readFileSync(filename);
+	const response = await fetch(
+		"https://router.huggingface.co/hf-inference/models/${model.id}",
+		{
+			headers: {
+				Authorization: "Bearer ${accessToken || `{API_TOKEN}`}",
+				"Content-Type": "application/json",
+			},
+			method: "POST",
+			body: data,
+		}
+	);
+	const result = await response.json();
+	return result;
+}
+
+query(${getModelInputSnippet(model)}).then((response) => {
+	console.log(JSON.stringify(response));
+});`,
+		},
+	];
+};
+
+export const jsSnippets: Partial<
+	Record<
+		PipelineType,
+		(
+			model: ModelDataMinimal,
+			accessToken: string,
+			provider: SnippetInferenceProvider,
+			providerModelId?: string,
+			opts?: Record<string, unknown>
+		) => InferenceSnippet[]
+	>
+> = {
+	// Same order as in tasks/src/pipelines.ts
+	"text-classification": snippetBasic,
+	"token-classification": snippetBasic,
+	"table-question-answering": snippetBasic,
+	"question-answering": snippetBasic,
+	"zero-shot-classification": snippetZeroShotClassification,
+	"translation": snippetBasic,
+	"summarization": snippetBasic,
+	"feature-extraction": snippetBasic,
+	"text-generation": snippetTextGeneration,
+	"image-text-to-text": snippetTextGeneration,
+	"text2text-generation": snippetBasic,
+	"fill-mask": snippetBasic,
+	"sentence-similarity": snippetBasic,
+	"automatic-speech-recognition": snippetAutomaticSpeechRecognition,
+	"text-to-image": snippetTextToImage,
+	"text-to-video": snippetTextToVideo,
+	"text-to-speech": snippetTextToAudio,
+	"text-to-audio": snippetTextToAudio,
+	"audio-to-audio": snippetFile,
+	"audio-classification": snippetFile,
+	"image-classification": snippetFile,
+	"image-to-text": snippetFile,
+	"object-detection": snippetFile,
+	"image-segmentation": snippetFile,
+};
+
+export function getJsInferenceSnippet(
+	model: ModelDataMinimal,
+	accessToken: string,
+	provider: SnippetInferenceProvider,
+	providerModelId?: string,
+	opts?: Record<string, unknown>
+): InferenceSnippet[] {
+	return model.pipeline_tag && model.pipeline_tag in jsSnippets
+		? (jsSnippets[model.pipeline_tag]?.(model, accessToken, provider, providerModelId, opts) ?? [])
+		: [];
+}

src/lib/components/inference-playground/snippets/python.svelte.ts

@@ -0,0 +1,534 @@
+import type { ConversationEntityMembers } from "$lib/state/conversations.svelte";
+import type { ChatCompletionInputMessage, GenerationParameters, PipelineType, WidgetType } from "@huggingface/tasks";
+import {
+	getModelInputSnippet,
+	openAIbaseUrl,
+	stringifyGenerationConfig,
+	stringifyMessages,
+	type InferenceSnippet,
+	type ModelDataMinimal,
+	type SnippetInferenceProvider,
+} from "@huggingface/tasks";
+
+const HFH_INFERENCE_CLIENT_METHODS: Partial<Record<WidgetType, string>> = {
+	"audio-classification": "audio_classification",
+	"audio-to-audio": "audio_to_audio",
+	"automatic-speech-recognition": "automatic_speech_recognition",
+	"text-to-speech": "text_to_speech",
+	"image-classification": "image_classification",
+	"image-segmentation": "image_segmentation",
+	"image-to-image": "image_to_image",
+	"image-to-text": "image_to_text",
+	"object-detection": "object_detection",
+	"text-to-image": "text_to_image",
+	"text-to-video": "text_to_video",
+	"zero-shot-image-classification": "zero_shot_image_classification",
+	"document-question-answering": "document_question_answering",
+	"visual-question-answering": "visual_question_answering",
+	"feature-extraction": "feature_extraction",
+	"fill-mask": "fill_mask",
+	"question-answering": "question_answering",
+	"sentence-similarity": "sentence_similarity",
+	"summarization": "summarization",
+	"table-question-answering": "table_question_answering",
+	"text-classification": "text_classification",
+	"text-generation": "text_generation",
+	"token-classification": "token_classification",
+	"translation": "translation",
+	"zero-shot-classification": "zero_shot_classification",
+	"tabular-classification": "tabular_classification",
+	"tabular-regression": "tabular_regression",
+};
+
+const snippetImportInferenceClient = (accessToken: string, provider: SnippetInferenceProvider): string =>
+	`\
+from huggingface_hub import InferenceClient
+
+client = InferenceClient(
+	provider="${provider}",
+	api_key="${accessToken || "{API_TOKEN}"}"
+)`;
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+function toPythonDict(obj: any, indent: number = 6, level: number = 0): string {
+	const pad = (lvl: number) => " ".repeat(indent * lvl);
+
+	if (obj === null) {
+		return "None";
+	}
+	if (typeof obj === "string") {
+		// Escape single quotes and backslashes
+		return `'${obj.replace(/\\/g, "\\\\").replace(/'/g, "\\'")}'`;
+	}
+	if (typeof obj === "number" || typeof obj === "bigint") {
+		return obj.toString();
+	}
+	if (typeof obj === "boolean") {
+		return obj ? "True" : "False";
+	}
+	if (Array.isArray(obj)) {
+		if (obj.length === 0) return "[]";
+		const items = obj.map(item => `${pad(level + 1)}${toPythonDict(item, indent, level + 1)}`).join(",\n");
+		return `[\n${items}\n${pad(level)}]`;
+	}
+	if (typeof obj === "object") {
+		const keys = Object.keys(obj);
+		if (keys.length === 0) return "{}";
+		const items = keys
+			.map(key => `${pad(level + 1)}'${key}': ${toPythonDict(obj[key], indent, level + 1)}`)
+			.join(",\n");
+		return `{\n${items}\n${pad(level)}}`;
+	}
+	// Fallback for undefined or functions
+	return "None";
+}
+
+export const snippetConversational = (
+	model: ModelDataMinimal,
+	accessToken: string,
+	provider: SnippetInferenceProvider,
+	providerModelId?: string,
+	opts?: {
+		streaming?: boolean;
+		messages?: ChatCompletionInputMessage[];
+		temperature?: GenerationParameters["temperature"];
+		max_tokens?: GenerationParameters["max_tokens"];
+		top_p?: GenerationParameters["top_p"];
+		structured_output?: ConversationEntityMembers["structuredOutput"];
+	}
+): InferenceSnippet[] => {
+	const streaming = opts?.streaming ?? true;
+	const exampleMessages = getModelInputSnippet(model) as ChatCompletionInputMessage[];
+	const messages = opts?.messages ?? exampleMessages;
+	const messagesStr = stringifyMessages(messages, { attributeKeyQuotes: true });
+
+	const config = {
+		...(opts?.temperature ? { temperature: opts.temperature } : undefined),
+		max_tokens: opts?.max_tokens ?? 500,
+		...(opts?.top_p ? { top_p: opts.top_p } : undefined),
+		...(opts?.structured_output?.enabled
+			? {
+					response_format: toPythonDict(
+						{
+							type: "json_schema",
+							json_schema: JSON.parse(opts.structured_output.schema ?? ""),
+						},
+						6
+					),
+				}
+			: undefined),
+	};
+	const configStr = stringifyGenerationConfig(config, {
+		indent: "\n\t",
+		attributeValueConnector: "=",
+	});
+
+	if (streaming) {
+		return [
+			{
+				client: "huggingface_hub",
+				content: `\
+${snippetImportInferenceClient(accessToken, provider)}
+
+messages = ${messagesStr}
+
+stream = client.chat.completions.create(
+	model="${model.id}",
+	messages=messages,
+	${configStr}
+	stream=True
+)
+
+for chunk in stream:
+    print(chunk.choices[0].delta.content, end="")`,
+			},
+			{
+				client: "openai",
+				content: `\
+from openai import OpenAI
+
+client = OpenAI(
+	base_url="${openAIbaseUrl(provider)}",
+	api_key="${accessToken || "{API_TOKEN}"}"
+)
+
+messages = ${messagesStr}
+
+stream = client.chat.completions.create(
+    model="${providerModelId ?? model.id}",
+	messages=messages,
+	${configStr}
+	stream=True
+)
+
+for chunk in stream:
+	print(chunk.choices[0].delta.content, end="")`,
+			},
+		];
+	} else {
+		return [
+			{
+				client: "huggingface_hub",
+				content: `\
+${snippetImportInferenceClient(accessToken, provider)}
+
+messages = ${messagesStr}
+
+completion = client.chat.completions.create(
+    model="${model.id}",
+	messages=messages,
+	${configStr}
+)
+
+print(completion.choices[0].message)`,
+			},
+			{
+				client: "openai",
+				content: `\
+from openai import OpenAI
+
+client = OpenAI(
+	base_url="${openAIbaseUrl(provider)}",
+	api_key="${accessToken || "{API_TOKEN}"}"
+)
+
+messages = ${messagesStr}
+
+completion = client.chat.completions.create(
+	model="${providerModelId ?? model.id}",
+	messages=messages,
+	${configStr}
+)
+
+print(completion.choices[0].message)`,
+			},
+		];
+	}
+};
+
+export const snippetZeroShotClassification = (model: ModelDataMinimal): InferenceSnippet[] => {
+	return [
+		{
+			client: "requests",
+			content: `\
+def query(payload):
+	response = requests.post(API_URL, headers=headers, json=payload)
+	return response.json()
+
+output = query({
+    "inputs": ${getModelInputSnippet(model)},
+    "parameters": {"candidate_labels": ["refund", "legal", "faq"]},
+})`,
+		},
+	];
+};
+
+export const snippetZeroShotImageClassification = (model: ModelDataMinimal): InferenceSnippet[] => {
+	return [
+		{
+			client: "requests",
+			content: `\
+def query(data):
+	with open(data["image_path"], "rb") as f:
+		img = f.read()
+	payload={
+		"parameters": data["parameters"],
+		"inputs": base64.b64encode(img).decode("utf-8")
+	}
+	response = requests.post(API_URL, headers=headers, json=payload)
+	return response.json()
+
+output = query({
+	"image_path": ${getModelInputSnippet(model)},
+	"parameters": {"candidate_labels": ["cat", "dog", "llama"]},
+})`,
+		},
+	];
+};
+
+export const snippetBasic = (
+	model: ModelDataMinimal,
+	accessToken: string,
+	provider: SnippetInferenceProvider
+): InferenceSnippet[] => {
+	return [
+		...(model.pipeline_tag && model.pipeline_tag in HFH_INFERENCE_CLIENT_METHODS
+			? [
+					{
+						client: "huggingface_hub",
+						content: `\
+${snippetImportInferenceClient(accessToken, provider)}
+
+result = client.${HFH_INFERENCE_CLIENT_METHODS[model.pipeline_tag]}(
+	model="${model.id}",
+	inputs=${getModelInputSnippet(model)},
+	provider="${provider}",
+)
+
+print(result)
+`,
+					},
+				]
+			: []),
+		{
+			client: "requests",
+			content: `\
+def query(payload):
+	response = requests.post(API_URL, headers=headers, json=payload)
+	return response.json()
+
+output = query({
+	"inputs": ${getModelInputSnippet(model)},
+})`,
+		},
+	];
+};
+
+export const snippetFile = (model: ModelDataMinimal): InferenceSnippet[] => {
+	return [
+		{
+			client: "requests",
+			content: `\
+def query(filename):
+	with open(filename, "rb") as f:
+		data = f.read()
+	response = requests.post(API_URL, headers=headers, data=data)
+	return response.json()
+
+output = query(${getModelInputSnippet(model)})`,
+		},
+	];
+};
+
+export const snippetTextToImage = (
+	model: ModelDataMinimal,
+	accessToken: string,
+	provider: SnippetInferenceProvider,
+	providerModelId?: string
+): InferenceSnippet[] => {
+	return [
+		{
+			client: "huggingface_hub",
+			content: `\
+${snippetImportInferenceClient(accessToken, provider)}
+
+# output is a PIL.Image object
+image = client.text_to_image(
+	${getModelInputSnippet(model)},
+	model="${model.id}"
+)`,
+		},
+		...(provider === "fal-ai"
+			? [
+					{
+						client: "fal-client",
+						content: `\
+import fal_client
+
+result = fal_client.subscribe(
+	"${providerModelId ?? model.id}",
+	arguments={
+		"prompt": ${getModelInputSnippet(model)},
+	},
+)
+print(result)
+`,
+					},
+				]
+			: []),
+		...(provider === "hf-inference"
+			? [
+					{
+						client: "requests",
+						content: `\
+def query(payload):
+	response = requests.post(API_URL, headers=headers, json=payload)
+	return response.content
+
+image_bytes = query({
+	"inputs": ${getModelInputSnippet(model)},
+})
+
+# You can access the image with PIL.Image for example
+import io
+from PIL import Image
+image = Image.open(io.BytesIO(image_bytes))`,
+					},
+				]
+			: []),
+	];
+};
+
+export const snippetTextToVideo = (
+	model: ModelDataMinimal,
+	accessToken: string,
+	provider: SnippetInferenceProvider
+): InferenceSnippet[] => {
+	return ["fal-ai", "replicate"].includes(provider)
+		? [
+				{
+					client: "huggingface_hub",
+					content: `\
+${snippetImportInferenceClient(accessToken, provider)}
+
+video = client.text_to_video(
+	${getModelInputSnippet(model)},
+	model="${model.id}"
+)`,
+				},
+			]
+		: [];
+};
+
+export const snippetTabular = (model: ModelDataMinimal): InferenceSnippet[] => {
+	return [
+		{
+			client: "requests",
+			content: `\
+def query(payload):
+	response = requests.post(API_URL, headers=headers, json=payload)
+	return response.content
+
+response = query({
+	"inputs": {"data": ${getModelInputSnippet(model)}},
+})`,
+		},
+	];
+};
+
+export const snippetTextToAudio = (model: ModelDataMinimal): InferenceSnippet[] => {
+	// Transformers TTS pipeline and api-inference-community (AIC) pipeline outputs are diverged
+	// with the latest update to inference-api (IA).
+	// Transformers IA returns a byte object (wav file), whereas AIC returns wav and sampling_rate.
+	if (model.library_name === "transformers") {
+		return [
+			{
+				client: "requests",
+				content: `\
+def query(payload):
+	response = requests.post(API_URL, headers=headers, json=payload)
+	return response.content
+
+audio_bytes = query({
+	"inputs": ${getModelInputSnippet(model)},
+})
+# You can access the audio with IPython.display for example
+from IPython.display import Audio
+Audio(audio_bytes)`,
+			},
+		];
+	} else {
+		return [
+			{
+				client: "requests",
+				content: `\
+def query(payload):
+	response = requests.post(API_URL, headers=headers, json=payload)
+	return response.json()
+
+audio, sampling_rate = query({
+	"inputs": ${getModelInputSnippet(model)},
+})
+# You can access the audio with IPython.display for example
+from IPython.display import Audio
+Audio(audio, rate=sampling_rate)`,
+			},
+		];
+	}
+};
+
+export const snippetDocumentQuestionAnswering = (model: ModelDataMinimal): InferenceSnippet[] => {
+	return [
+		{
+			client: "requests",
+			content: `\
+def query(payload):
+	with open(payload["image"], "rb") as f:
+		img = f.read()
+		payload["image"] = base64.b64encode(img).decode("utf-8")
+	response = requests.post(API_URL, headers=headers, json=payload)
+	return response.json()
+
+output = query({
+    "inputs": ${getModelInputSnippet(model)},
+})`,
+		},
+	];
+};
+
+export const pythonSnippets: Partial<
+	Record<
+		PipelineType,
+		(
+			model: ModelDataMinimal,
+			accessToken: string,
+			provider: SnippetInferenceProvider,
+			providerModelId?: string,
+			opts?: Record<string, unknown>
+		) => InferenceSnippet[]
+	>
+> = {
+	// Same order as in tasks/src/pipelines.ts
+	"text-classification": snippetBasic,
+	"token-classification": snippetBasic,
+	"table-question-answering": snippetBasic,
+	"question-answering": snippetBasic,
+	"zero-shot-classification": snippetZeroShotClassification,
+	"translation": snippetBasic,
+	"summarization": snippetBasic,
+	"feature-extraction": snippetBasic,
+	"text-generation": snippetBasic,
+	"text2text-generation": snippetBasic,
+	"image-text-to-text": snippetConversational,
+	"fill-mask": snippetBasic,
+	"sentence-similarity": snippetBasic,
+	"automatic-speech-recognition": snippetFile,
+	"text-to-image": snippetTextToImage,
+	"text-to-video": snippetTextToVideo,
+	"text-to-speech": snippetTextToAudio,
+	"text-to-audio": snippetTextToAudio,
+	"audio-to-audio": snippetFile,
+	"audio-classification": snippetFile,
+	"image-classification": snippetFile,
+	"tabular-regression": snippetTabular,
+	"tabular-classification": snippetTabular,
+	"object-detection": snippetFile,
+	"image-segmentation": snippetFile,
+	"document-question-answering": snippetDocumentQuestionAnswering,
+	"image-to-text": snippetFile,
+	"zero-shot-image-classification": snippetZeroShotImageClassification,
+};
+
+export function getPythonInferenceSnippet(
+	model: ModelDataMinimal,
+	accessToken: string,
+	provider: SnippetInferenceProvider,
+	providerModelId?: string,
+	opts?: Record<string, unknown>
+): InferenceSnippet[] {
+	if (model.tags.includes("conversational")) {
+		// Conversational model detected, so we display a code snippet that features the Messages API
+		return snippetConversational(model, accessToken, provider, providerModelId, opts);
+	} else {
+		const snippets =
+			model.pipeline_tag && model.pipeline_tag in pythonSnippets
+				? (pythonSnippets[model.pipeline_tag]?.(model, accessToken, provider, providerModelId) ?? [])
+				: [];
+
+		return snippets.map(snippet => {
+			return {
+				...snippet,
+				content:
+					snippet.client === "requests"
+						? `\
+import requests
+
+API_URL = "${openAIbaseUrl(provider)}"
+headers = {"Authorization": ${accessToken ? `"Bearer ${accessToken}"` : `f"Bearer {API_TOKEN}"`}}
+
+${snippet.content}`
+						: snippet.content,
+			};
+		});
+	}
+}

src/lib/components/inference-playground/structured-output-modal.svelte

@@ -0,0 +1,386 @@
+<script lang="ts">
+	import { Synced } from "$lib/spells/synced.svelte";
+	import { TextareaAutosize } from "$lib/spells/textarea-autosize.svelte";
+	import type { ConversationClass } from "$lib/state/conversations.svelte.js";
+	import { safeParse } from "$lib/utils/json.js";
+	import { keys } from "$lib/utils/object.svelte";
+	import { onchange, oninput } from "$lib/utils/template.js";
+	import { RadioGroup } from "melt/builders";
+	import { codeToHtml } from "shiki";
+	import typia from "typia";
+	import IconX from "~icons/carbon/close";
+	import Dialog from "../dialog.svelte";
+
+	interface Props {
+		conversation: ConversationClass;
+		open: boolean;
+	}
+
+	let { conversation, open = $bindable(false) }: Props = $props();
+
+	let tempSchema = $derived(conversation.data.structuredOutput?.schema ?? "");
+
+	const modes = ["form", "code"] as const;
+	const radioGroup = new RadioGroup({
+		value: modes[0],
+	});
+
+	type Schema = {
+		name?: string;
+		description?: string;
+		schema?: {
+			type?: string;
+			properties?: { [key: string]: { type: string; description?: string } };
+			required?: string[];
+			additionalProperties?: boolean;
+		};
+		strict?: boolean;
+	};
+
+	export function parseJsonSchema(): Schema {
+		const parsed = safeParse(conversation.data.structuredOutput?.schema ?? "");
+		const baseSchema = {
+			schema: {
+				type: "object",
+				properties: {},
+				required: [],
+				additionalProperties: true,
+			},
+			strict: false,
+		} satisfies Schema;
+
+		if (typia.is<Schema>(parsed)) {
+			return {
+				...baseSchema,
+				...parsed,
+				schema: {
+					...baseSchema.schema,
+					...parsed.schema,
+					properties: {
+						...baseSchema.schema.properties,
+						...parsed.schema?.properties,
+					},
+					required: Array.from(new Set([...(baseSchema.schema.required || []), ...(parsed.schema?.required || [])])),
+				},
+			};
+		}
+
+		return baseSchema;
+	}
+
+	const schemaObj = new Synced<Schema>({
+		value: parseJsonSchema,
+		onChange(v) {
+			const required = Array.from(new Set(v.schema?.required)).filter(name =>
+				keys(v.schema?.properties ?? {}).includes(name)
+			);
+			const validated: Schema = {
+				name: v.name,
+				description: v.description,
+				schema: {
+					...v.schema,
+					required,
+				},
+				strict: v.strict,
+			};
+			conversation.update({
+				structuredOutput: { ...conversation.data.structuredOutput, schema: JSON.stringify(validated, null, 2) },
+			});
+		},
+	});
+
+	function updateSchema(obj: Partial<Schema>) {
+		schemaObj.current = { ...schemaObj.current, ...obj };
+	}
+
+	function updateSchemaNested(nestedObj: Partial<Schema["schema"]>) {
+		updateSchema({
+			schema: {
+				...schemaObj.current.schema,
+				...nestedObj,
+			},
+		});
+	}
+
+	let textarea = $state<HTMLTextAreaElement>();
+	new TextareaAutosize({
+		element: () => textarea,
+		input: () => tempSchema,
+	});
+</script>
+
+<Dialog title="Edit Structured Output" {open} onClose={() => (open = false)}>
+	<div class="flex justify-end">
+		<div
+			class="flex items-center gap-0.5 rounded-md border bg-gray-900 p-0.5 text-sm dark:border-gray-600 dark:bg-gray-800"
+			{...radioGroup.root}
+		>
+			{#each modes as mode}
+				{@const item = radioGroup.getItem(mode)}
+				<div
+					class={[
+						"rounded px-2 py-0.5 capitalize select-none",
+						item.checked ? " dark:bg-gray-700" : "hover:bg-gray-700/70",
+					]}
+					{...item.attrs}
+				>
+					{mode}
+				</div>
+			{/each}
+		</div>
+	</div>
+
+	{#if radioGroup.value === "form"}
+		<div class="fade-y -mx-2 mt-2 -mb-4 max-h-200 space-y-4 overflow-auto px-2 py-4 text-left">
+			<!-- Top-level properties -->
+			<div>
+				<label for="schema-name" class="block text-sm font-medium text-gray-300">Name</label>
+				<input
+					type="text"
+					id="schema-name"
+					class="mt-1 block w-full rounded-md border-gray-700 bg-gray-800 px-2 py-1 text-white shadow-sm focus:border-blue-500 focus:ring-blue-500"
+					value={schemaObj.current.name}
+					{...onchange(value => updateSchema({ name: value }))}
+				/>
+			</div>
+
+			<div>
+				<label for="schema-description" class="block text-sm font-medium text-gray-300">Description</label>
+				<textarea
+					id="schema-description"
+					rows="3"
+					class="mt-1 block w-full rounded-md border-gray-700 bg-gray-800 px-2 py-1 text-white shadow-sm focus:border-blue-500 focus:ring-blue-500"
+					value={schemaObj.current.description}
+					{...onchange(value => updateSchema({ description: value }))}
+				></textarea>
+			</div>
+
+			<!-- Properties Section -->
+			<div class="border-t border-gray-700 pt-4">
+				<h3 class="text-lg leading-6 font-medium text-gray-100">Properties</h3>
+				{#if schemaObj.current.schema?.properties}
+					<div class="mt-3 space-y-3">
+						{#each Object.entries(schemaObj.current.schema.properties) as [propertyName, propertyDefinition], index (index)}
+							<div class="relative space-y-2 rounded-md border border-gray-700 p-3">
+								<div>
+									<label for="{propertyName}-name" class="block text-xs font-medium text-gray-400"> Name </label>
+									<input
+										type="text"
+										id="{propertyName}-name"
+										class="mt-1 block w-full rounded-md border-gray-700 bg-gray-800 px-2 py-1 text-sm text-white shadow-sm focus:border-blue-500 focus:ring-blue-500"
+										value={propertyName}
+										{...onchange(value => {
+											const updatedProperties = { ...schemaObj.current.schema?.properties };
+											if (!updatedProperties || !updatedProperties[propertyName]) return;
+											updatedProperties[value] = updatedProperties[propertyName];
+											delete updatedProperties[propertyName];
+											updateSchemaNested({ properties: updatedProperties });
+										})}
+									/>
+								</div>
+
+								<button
+									type="button"
+									class="absolute top-2 right-2 text-red-400 hover:text-red-500"
+									onclick={() => {
+										const updatedProperties = { ...schemaObj.current.schema?.properties };
+										if (!updatedProperties || !updatedProperties[propertyName]) return;
+										delete updatedProperties[propertyName];
+										updateSchemaNested({ properties: updatedProperties });
+									}}
+									aria-label="delete"
+								>
+									<IconX />
+								</button>
+
+								<div>
+									<label for="{propertyName}-type" class="block text-xs font-medium text-gray-400">Type</label>
+									<select
+										id="{propertyName}-type"
+										class="mt-1 block w-full rounded-md border-gray-700 bg-gray-800 px-2 py-1 text-sm text-white shadow-sm focus:border-blue-500 focus:ring-blue-500"
+										bind:value={
+											() => propertyDefinition.type,
+											value => {
+												const updatedProperties = { ...schemaObj.current.schema?.properties };
+												if (updatedProperties && updatedProperties[propertyName]) {
+													updatedProperties[propertyName].type = value;
+													updateSchemaNested({ properties: updatedProperties });
+												}
+											}
+										}
+									>
+										<option value="string">string</option>
+										<option value="integer">integer</option>
+										<option value="number">number</option>
+										<option value="boolean">boolean</option>
+										<option value="array">array</option>
+										<option value="object">object</option>
+										<option value="enum">enum</option>
+										<option value="null">null</option>
+									</select>
+								</div>
+
+								<div>
+									<label for="{propertyName}-description" class="block text-xs font-medium text-gray-400"
+										>Description</label
+									>
+									<input
+										type="text"
+										id="{propertyName}-description"
+										class="mt-1 block w-full rounded-md border-gray-700 bg-gray-800 px-2 py-1 text-sm text-white shadow-sm focus:border-blue-500 focus:ring-blue-500"
+										value={propertyDefinition.description}
+										{...onchange(value => {
+											const updatedProperties = { ...schemaObj.current.schema?.properties };
+											if (!updatedProperties || !updatedProperties[propertyName]) return;
+											updatedProperties[propertyName].description = value;
+											updateSchemaNested({ properties: updatedProperties });
+										})}
+									/>
+								</div>
+
+								<div class="flex items-start">
+									<div class="flex h-5 items-center">
+										<input
+											id="required-{propertyName}"
+											aria-describedby="required-{propertyName}-description"
+											name="required-{propertyName}"
+											type="checkbox"
+											class="h-4 w-4 rounded border-gray-700 bg-gray-800 text-blue-600 focus:ring-blue-500"
+											checked={schemaObj.current.schema?.required?.includes(propertyName)}
+											onchange={e => {
+												let updatedRequired = [...(schemaObj.current.schema?.required || [])];
+												if (e.currentTarget.checked) {
+													if (!updatedRequired.includes(propertyName)) {
+														updatedRequired.push(propertyName);
+													}
+												} else {
+													updatedRequired = updatedRequired.filter(name => name !== propertyName);
+												}
+												updateSchemaNested({ required: updatedRequired });
+											}}
+										/>
+									</div>
+									<div class="ml-3 text-sm">
+										<label for="required-{propertyName}" class="font-medium text-gray-300">Required</label>
+									</div>
+								</div>
+							</div>
+						{:else}
+							<p class="mt-3 text-sm text-gray-500">No properties defined yet.</p>
+						{/each}
+					</div>
+				{:else}
+					<p class="mt-3 text-sm text-gray-500">No properties defined yet.</p>
+				{/if}
+
+				<button
+					type="button"
+					class="btn-sm mt-4 flex w-full items-center justify-center rounded-md"
+					onclick={() => {
+						const newPropertyName = `newProperty${Object.keys(schemaObj.current.schema?.properties || {}).length + 1}`;
+						const updatedProperties = {
+							...(schemaObj.current.schema?.properties || {}),
+							[newPropertyName]: { type: "string", description: "" },
+						};
+						updateSchemaNested({ properties: updatedProperties });
+					}}
+				>
+					Add Property
+				</button>
+			</div>
+
+			<!-- Strict and Additional Properties -->
+			<div class="border-t border-gray-700 pt-4">
+				<h3 class="text-lg leading-6 font-medium text-gray-100">Options</h3>
+				<div class="mt-3 space-y-2">
+					<div class="relative flex items-start">
+						<div class="flex h-5 items-center">
+							<input
+								id="additionalProperties"
+								name="additionalProperties"
+								type="checkbox"
+								class="h-4 w-4 rounded border-gray-700 bg-gray-800 text-blue-600 focus:ring-blue-500"
+								checked={schemaObj.current.schema?.additionalProperties !== undefined
+									? schemaObj.current.schema.additionalProperties
+									: true}
+								onchange={e => updateSchemaNested({ additionalProperties: e.currentTarget.checked })}
+							/>
+						</div>
+						<div class="ml-3 text-sm">
+							<label for="additionalProperties" class="font-medium text-gray-300">Allow additional properties</label>
+							<p id="additionalProperties-description" class="text-gray-500">
+								If unchecked, only properties defined in the schema are allowed.
+							</p>
+						</div>
+					</div>
+
+					<div class="relative flex items-start">
+						<div class="flex h-5 items-center">
+							<input
+								id="strict"
+								name="strict"
+								type="checkbox"
+								class="h-4 w-4 rounded border-gray-700 bg-gray-800 text-blue-600 focus:ring-blue-500"
+								checked={schemaObj.current.strict !== undefined ? schemaObj.current.strict : false}
+								onchange={e => updateSchema({ strict: e.currentTarget.checked })}
+							/>
+						</div>
+						<div class="ml-3 text-sm">
+							<label for="strict" class="font-medium text-gray-300">Strict mode</label>
+							<p id="strict-description" class="text-gray-500">Enforces stricter validation rules.</p>
+						</div>
+					</div>
+				</div>
+			</div>
+		</div>
+	{:else}
+		<!-- inside dialogs its a-ok -->
+		<!-- svelte-ignore a11y_autofocus  -->
+		<div
+			class="relative mt-2 max-h-120 overflow-x-clip overflow-y-auto rounded-lg bg-gray-800 text-left ring-gray-100 focus-within:ring-3 dark:ring-gray-600"
+		>
+			<div class="shiki-container pointer-events-none absolute inset-0" aria-hidden="true">
+				{#await codeToHtml(tempSchema, { lang: "json", theme: "catppuccin-macchiato" })}
+					<!-- nothing -->
+				{:then rendered}
+					{@html rendered}
+				{/await}
+			</div>
+			<textarea
+				bind:this={textarea}
+				autofocus
+				value={conversation.data.structuredOutput?.schema ?? ""}
+				{...onchange(v => {
+					conversation.update({ structuredOutput: { ...conversation.data.structuredOutput, schema: v } });
+				})}
+				{...oninput(v => (tempSchema = v))}
+				class="relative z-10 h-120 w-full resize-none overflow-hidden rounded-lg bg-transparent whitespace-pre-wrap text-transparent caret-white outline-none @2xl:px-3"
+			></textarea>
+		</div>
+	{/if}
+
+	{#snippet footer()}
+		<button class="btn ml-auto" onclick={() => (open = false)}>Save</button>
+	{/snippet}
+</Dialog>
+
+<style>
+	.shiki-container > :global(pre),
+	.shiki-container + textarea {
+		padding-block: 10px;
+		padding-inline: 8px;
+		font-family: var(--font-mono) !important;
+		font-size: 15px;
+	}
+
+	.shiki-container > :global(*) {
+		background-color: transparent !important;
+		font-family: var(--font-mono) !important;
+	}
+
+	.shiki-container > :global(pre) {
+		border-radius: 8px;
+		height: 100%;
+		white-space: pre-wrap;
+	}
+</style>

src/lib/components/inference-playground/{utils.ts → utils.svelte.ts}

@@ -1,4 +1,5 @@
 import ctxLengthData from "$lib/data/context_length.json";
+import { ConversationClass, type ConversationEntityMembers } from "$lib/state/conversations.svelte";
 import { token } from "$lib/state/token.svelte";
 import {
 	isCustomModel,
@@ -8,29 +9,35 @@ import {
 	type CustomModel,
 	type Model,
 } from "$lib/types.js";
-import { tryGet } from "$lib/utils/object.js";
-import { HfInference, snippets, type InferenceProvider } from "@huggingface/inference";
+import { safeParse } from "$lib/utils/json.js";
+import { omit, tryGet } from "$lib/utils/object.svelte.js";
+import { HfInference, type InferenceProvider } from "@huggingface/inference";
+import { snippets } from "./snippets/index.svelte.js";
 import type { ChatCompletionInputMessage, InferenceSnippet } from "@huggingface/tasks";
 import { type ChatCompletionOutputMessage } from "@huggingface/tasks";
 import { AutoTokenizer, PreTrainedTokenizer } from "@huggingface/transformers";
 import OpenAI from "openai";
+import { images } from "$lib/state/images.svelte.js";
 
 type ChatCompletionInputMessageChunk =
 	NonNullable<ChatCompletionInputMessage["content"]> extends string | (infer U)[] ? U : never;
 
-function parseMessage(message: ConversationMessage): ChatCompletionInputMessage {
+async function parseMessage(message: ConversationMessage): Promise<ChatCompletionInputMessage> {
 	if (!message.images) return message;
+
+	const urls = await Promise.all(message.images?.map(k => images.get(k)) ?? []);
+
 	return {
-		...message,
+		...omit(message, "images"),
 		content: [
 			{
 				type: "text",
 				text: message.content ?? "",
 			},
-			...message.images.map(img => {
+			...message.images.map((_imgKey, i) => {
 				return {
 					type: "image_url",
-					image_url: { url: img },
+					image_url: { url: urls[i] as string },
 				} satisfies ChatCompletionInputMessageChunk;
 			}),
 		],
@@ -51,9 +58,11 @@ type OpenAICompletionMetadata = {
 
 type CompletionMetadata = HFCompletionMetadata | OpenAICompletionMetadata;
 
-export function maxAllowedTokens(conversation: Conversation) {
+export function maxAllowedTokens(conversation: ConversationClass) {
 	const ctxLength = (() => {
-		const { provider, model } = conversation;
+		const model = conversation.model;
+		const { provider } = conversation.data;
+
 		if (!provider || !isHFModel(model)) return;
 
 		const idOnProvider = model.inferenceProviderMapping.find(data => data.provider === provider)?.providerId;
@@ -69,13 +78,19 @@ export function maxAllowedTokens(conversation: Conversation) {
 	return ctxLength;
 }
 
-function getCompletionMetadata(conversation: Conversation, signal?: AbortSignal): CompletionMetadata {
-	const { model, systemMessage } = conversation;
+async function getCompletionMetadata(
+	conversation: ConversationClass | Conversation,
+	signal?: AbortSignal
+): Promise<CompletionMetadata> {
+	const data = conversation instanceof ConversationClass ? conversation.data : conversation;
+	const model = conversation.model;
+	const { systemMessage } = data;
 
 	const messages = [
 		...(isSystemPromptSupported(model) && systemMessage.content?.length ? [systemMessage] : []),
-		...conversation.messages,
+		...data.messages,
 	];
+	const parsed = await Promise.all(messages.map(parseMessage));
 
 	// Handle OpenAI-compatible models
 	if (isCustomModel(model)) {
@@ -88,38 +103,62 @@ function getCompletionMetadata(conversation: Conversation, signal?: AbortSignal)
 			},
 		});
 
+		const args = {
+			messages: parsed,
+			...data.config,
+			model: model.id,
+			// eslint-disable-next-line @typescript-eslint/no-explicit-any
+		} as any;
+
+		if (data.structuredOutput?.enabled) {
+			const json = safeParse(data.structuredOutput.schema ?? "");
+			if (json) {
+				args.response_format = {
+					type: "json_schema",
+					json_schema: json,
+				};
+			}
+		}
+
 		return {
 			type: "openai",
 			client: openai,
-			args: {
-				messages: messages.map(parseMessage) as OpenAI.ChatCompletionMessageParam[],
-				...conversation.config,
-				model: model.id,
-			},
+			args,
 		};
 	}
+	const args = {
+		model: model.id,
+		messages: parsed,
+		provider: data.provider,
+		...data.config,
+		// max_tokens: maxAllowedTokens(conversation) - currTokens,
+		// eslint-disable-next-line @typescript-eslint/no-explicit-any
+	} as any;
+
+	if (data.structuredOutput?.enabled) {
+		const json = safeParse(data.structuredOutput.schema ?? "");
+		if (json) {
+			args.response_format = {
+				type: "json_schema",
+				json_schema: json,
+			};
+		}
+	}
 
 	// Handle HuggingFace models
-
 	return {
 		type: "huggingface",
 		client: new HfInference(token.value),
-		args: {
-			model: model.id,
-			messages: messages.map(parseMessage),
-			provider: conversation.provider,
-			...conversation.config,
-			// max_tokens: maxAllowedTokens(conversation) - currTokens,
-		},
+		args,
 	};
 }
 
 export async function handleStreamingResponse(
-	conversation: Conversation,
+	conversation: ConversationClass | Conversation,
 	onChunk: (content: string) => void,
 	abortController: AbortController
 ): Promise<void> {
-	const metadata = getCompletionMetadata(conversation, abortController.signal);
+	const metadata = await getCompletionMetadata(conversation, abortController.signal);
 
 	if (metadata.type === "openai") {
 		const stream = await metadata.client.chat.completions.create({
@@ -148,9 +187,9 @@ export async function handleStreamingResponse(
 }
 
 export async function handleNonStreamingResponse(
-	conversation: Conversation
+	conversation: ConversationClass | Conversation
 ): Promise<{ message: ChatCompletionOutputMessage; completion_tokens: number }> {
-	const metadata = getCompletionMetadata(conversation);
+	const metadata = await getCompletionMetadata(conversation);
 
 	if (metadata.type === "openai") {
 		const response = await metadata.client.chat.completions.create({
@@ -262,7 +301,14 @@ export function getInferenceSnippet(
 	provider: InferenceProvider,
 	language: InferenceSnippetLanguage,
 	accessToken: string,
-	opts?: Record<string, unknown>
+	opts?: {
+		messages?: ConversationEntityMembers["messages"];
+		streaming?: ConversationEntityMembers["streaming"];
+		max_tokens?: ConversationEntityMembers["config"]["max_tokens"];
+		temperature?: ConversationEntityMembers["config"]["temperature"];
+		top_p?: ConversationEntityMembers["config"]["top_p"];
+		structured_output?: ConversationEntityMembers["structuredOutput"];
+	}
 ): GetInferenceSnippetReturn {
 	// If it's a custom model, we don't generate inference snippets
 	if (isCustomModel(model)) {

src/lib/components/share-modal.svelte

@@ -1,7 +1,7 @@
 <script lang="ts" module>
-	let project = $state<Project>();
+	let project = $state<ProjectEntity>();
 
-	export function showShareModal(p: Project) {
+	export function showShareModal(p: ProjectEntity) {
 		project = p;
 	}
 
@@ -12,8 +12,7 @@
 
 <script lang="ts">
 	import { clickOutside } from "$lib/actions/click-outside.js";
-	import { session } from "$lib/state/session.svelte";
-	import type { Project } from "$lib/types.js";
+	import { ProjectEntity, projects, type ProjectEntityMembers } from "$lib/state/projects.svelte";
 	import { copyToClipboard } from "$lib/utils/copy.js";
 	import { decodeString, encodeObject } from "$lib/utils/encode.js";
 	import { fade, scale } from "svelte/transition";
@@ -23,11 +22,44 @@
 	import IconSave from "~icons/carbon/save";
 	import LocalToasts from "./local-toasts.svelte";
 	import { addToast as addToastGlobally } from "./toaster.svelte.js";
+	import { conversations, type ConversationEntityMembers } from "$lib/state/conversations.svelte";
+	import { omit } from "$lib/utils/object.svelte";
+	import { watch } from "runed";
+	import { sleep } from "$lib/utils/sleep.js";
 
 	let dialog: HTMLDialogElement | undefined = $state();
 
 	const open = $derived(!!project);
-	const encoded = $derived(encodeObject(project));
+
+	type ParsedConversation = Omit<ConversationEntityMembers, "createdAt"> & {
+		createdAt: string;
+	};
+
+	type ParsedProject = Omit<FullProject, "conversations"> & {
+		conversations: ParsedConversation[];
+	};
+
+	type FullProject = ProjectEntityMembers & {
+		conversations: ConversationEntityMembers[];
+	};
+
+	const fullProject: FullProject | undefined = $derived.by(() => {
+		if (!project) return;
+		return {
+			...project,
+			conversations: conversations.for(project.id).map(c => c.data),
+		};
+	});
+	let encoded = $state("");
+	watch(
+		() => fullProject,
+		() => {
+			(async function () {
+				await sleep(100);
+				encoded = encodeObject(fullProject);
+			})();
+		}
+	);
 	let pasted = $state("");
 
 	$effect(() => {
@@ -41,7 +73,8 @@
 		}
 	});
 
-	const isProject = typia.createIs<Project>();
+	const isProject = typia.createIs<ParsedProject>();
+	let saving = $state(false);
 </script>
 
 <dialog class="backdrop:bg-transparent" bind:this={dialog} onclose={() => close()}>
@@ -110,14 +143,28 @@
 						{#snippet children({ addToast, trigger })}
 							<form
 								class="mt-4 flex gap-2"
-								onsubmit={e => {
+								onsubmit={async e => {
 									e.preventDefault();
+									saving = true;
+
 									const decoded = decodeString(pasted);
 									if (!isProject(decoded)) {
 										addToast({ data: { content: "String isn't valid", variant: "danger" } });
+										saving = false;
 										return;
 									}
-									session.addProject({ ...decoded, name: `Saved - ${decoded.name}`, id: crypto.randomUUID() });
+									const projectId = await projects.create(`Saved - ${decoded.name}`);
+									await Promise.allSettled(
+										decoded.conversations.map(c => {
+											conversations.create({
+												...omit(c, "id", "createdAt"),
+												projectId,
+											});
+										})
+									);
+									projects.activeId = projectId;
+									saving = false;
+
 									addToastGlobally({
 										variant: "success",
 										title: "Saved project",
@@ -132,8 +179,25 @@
 									bind:value={pasted}
 								/>
 								<button {...trigger} class="btn flex items-center gap-2" type="submit">
-									<IconSave />
-									Save
+									{#if saving}
+										<svg
+											class="mr-2 h-4 w-4 animate-spin text-white"
+											xmlns="http://www.w3.org/2000/svg"
+											fill="none"
+											viewBox="0 0 24 24"
+										>
+											<circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
+											<path
+												class="opacity-75"
+												fill="currentColor"
+												d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
+											></path>
+										</svg>
+										Saving...
+									{:else}
+										<IconSave />
+										Save
+									{/if}
 								</button>
 							</form>
 						{/snippet}

src/lib/components/toaster.svelte

@@ -3,9 +3,9 @@
 	import { toaster } from "./toaster.svelte.js";
 	import { Progress } from "melt/components";
 	import Close from "~icons/carbon/close";
-	import { omit } from "$lib/utils/object.js";
-	import { session } from "$lib/state/session.svelte.js";
+	import { omit } from "$lib/utils/object.svelte.js";
 	import { AnimationFrames } from "runed";
+	import { conversations } from "$lib/state/conversations.svelte.js";
 
 	let toastHeights = $state<number[]>([]);
 	new AnimationFrames(() => {
@@ -16,7 +16,7 @@
 		toastHeights = toastEls.map(el => el.clientHeight);
 	});
 
-	const isComparing = $derived(session.project.conversations.length > 1);
+	const isComparing = $derived(conversations.active.length > 1);
 
 	const GAP = 8;
 

src/lib/data/context_length.json

@@ -1,11 +1,11 @@
 {
 	"replicate": {},
 	"sambanova": {
-		"DeepSeek-R1": 16384,
+		"DeepSeek-R1": 32768,
 		"DeepSeek-R1-Distill-Llama-70B": 131072,
-		"DeepSeek-V3-0324": 16384,
+		"DeepSeek-V3-0324": 32768,
 		"E5-Mistral-7B-Instruct": 4096,
-		"Llama-4-Maverick-17B-128E-Instruct": 8192,
+		"Llama-4-Maverick-17B-128E-Instruct": 131072,
 		"Llama-4-Scout-17B-16E-Instruct": 8192,
 		"Meta-Llama-3.1-405B-Instruct": 16384,
 		"Meta-Llama-3.1-8B-Instruct": 16384,
@@ -63,7 +63,7 @@
 		"aaditya/Llama3-OpenBioLLM-8B": 8192,
 		"aaditya/Llama3-OpenBioLLM-70B": 8192,
 		"BAAI/bge-en-icl": 32768,
-		"BAAI/bge-multilingual-gemma2": 4096,
+		"BAAI/bge-multilingual-gemma2": 8192,
 		"intfloat/e5-mistral-7b-instruct": 32768,
 		"cognitivecomputations/dolphin-2.9.2-mixtral-8x22b": 65536,
 		"microsoft/Phi-3.5-MoE-instruct": 131072,
@@ -83,10 +83,16 @@
 		"deepseek-ai/DeepSeek-R1-fast": 163840,
 		"Qwen/QwQ-32B-fast": 131072,
 		"Qwen/QwQ-32B": 131072,
+		"Qwen/Qwen3-235B-A22B": 40960,
+		"Qwen/Qwen3-30B-A3B": 40960,
+		"Qwen/Qwen3-30B-A3B-fast": 40960,
+		"Qwen/Qwen3-32B": 40960,
+		"Qwen/Qwen3-14B": 40960,
+		"Qwen/Qwen3-4B-fast": 40960,
 		"nvidia/Llama-3_3-Nemotron-Super-49B-v1": 131072,
 		"mistralai/Mistral-Small-3.1-24B-Instruct-2503": 131072,
-		"google/gemma-3-27b-it": 131072,
-		"google/gemma-3-27b-it-fast": 131072,
+		"google/gemma-3-27b-it": 110000,
+		"google/gemma-3-27b-it-fast": 110000,
 		"Qwen/Qwen2.5-VL-72B-Instruct": 32000,
 		"deepseek-ai/DeepSeek-V3-0324": 163840,
 		"deepseek-ai/DeepSeek-V3-0324-fast": 163840,
@@ -185,25 +191,27 @@
 		"rerank-v3.5": 4096,
 		"embed-v4.0": 8192,
 		"rerank-english-v3.0": 4096,
-		"command-r": 128000,
+		"command-r-08-2024": 132096,
 		"embed-english-light-v3.0-image": 0,
 		"embed-english-v3.0-image": 0,
 		"command-a-03-2025": 288000,
 		"command-nightly": 288000,
-		"command-r7b-12-2024": 128000,
-		"command-r-plus": 128000,
+		"command-r-plus-08-2024": 132096,
 		"c4ai-aya-vision-32b": 16384,
+		"command-r": 132096,
+		"command-r7b-12-2024": 132000,
 		"command-r7b-arabic-02-2025": 128000,
 		"command-light-nightly": 4096,
 		"embed-english-v3.0": 512,
 		"embed-multilingual-light-v3.0-image": 0,
 		"embed-multilingual-v3.0-image": 0,
 		"c4ai-aya-expanse-32b": 128000,
-		"command": 4096,
-		"c4ai-aya-vision-8b": 16384
+		"command": 4096
 	},
 	"together": {
-		"meta-llama/Llama-3.3-70B-Instruct-Turbo": 131072,
+		"Qwen/QwQ-32B": 131072,
+		"meta-llama/Llama-4-Scout-17B-16E-Instruct": 1048576,
+		"meta-llama/Llama-Guard-4-12B": 1048576,
 		"togethercomputer/m2-bert-80M-32k-retrieval": 32768,
 		"google/gemma-2-9b-it": 8192,
 		"cartesia/sonic": 0,
@@ -212,51 +220,53 @@
 		"meta-llama-llama-2-70b-hf": 4096,
 		"BAAI/bge-base-en-v1.5": 512,
 		"Gryphe/MythoMax-L2-13b": 4096,
+		"deepseek-ai/DeepSeek-V3": 131072,
+		"mistralai/Mistral-7B-Instruct-v0.1": 32768,
+		"mistralai/Mixtral-8x7B-Instruct-v0.1": 32768,
 		"google/gemma-2-27b-it": 8192,
 		"Qwen/Qwen2-VL-72B-Instruct": 32768,
 		"meta-llama/LlamaGuard-2-8b": 8192,
 		"cartesia/sonic-2": 0,
 		"togethercomputer/m2-bert-80M-8k-retrieval": 8192,
 		"meta-llama/Llama-3.3-70B-Instruct-Turbo-Free": 131072,
-		"arcee-ai/maestro-reasoning": 131072,
-		"Qwen/QwQ-32B": 131072,
+		"scb10x/scb10x-llama3-1-typhoon2-70b-instruct": 8192,
+		"togethercomputer/Refuel-Llm-V2-Small": 8192,
 		"togethercomputer/MoA-1": 32768,
-		"mistralai/Mistral-7B-Instruct-v0.2": 32768,
 		"meta-llama/Meta-Llama-3-70B-Instruct-Turbo": 8192,
+		"Qwen/Qwen3-235B-A22B-fp8-tput": 40960,
 		"google/gemma-2b-it": 8192,
-		"mistralai/Mistral-Small-24B-Instruct-2501": 32768,
+		"meta-llama/Llama-3.2-11B-Vision-Instruct-Turbo": 131072,
 		"Gryphe/MythoMax-L2-13b-Lite": 4096,
-		"meta-llama/Meta-Llama-Guard-3-8B": 8192,
 		"scb10x/scb10x-llama3-1-typhoon2-8b-instruct": 8192,
-		"Qwen/Qwen3-235B-A22B-fp8-tput": 40960,
-		"meta-llama/Llama-3-8b-chat-hf": 8192,
+		"meta-llama/Meta-Llama-Guard-3-8B": 8192,
+		"intfloat/multilingual-e5-large-instruct": 514,
+		"deepseek-ai/DeepSeek-R1": 163840,
+		"arcee-ai/arcee-blitz": 32768,
+		"arcee_ai/arcee-spotlight": 131072,
 		"arcee-ai/caller": 32768,
+		"arcee-ai/coder-large": 32768,
+		"arcee-ai/maestro-reasoning": 131072,
+		"arcee-ai/virtuoso-large": 131072,
+		"arcee-ai/virtuoso-medium-v2": 131072,
+		"mistralai/Mistral-Small-24B-Instruct-2501": 32768,
+		"meta-llama/Llama-3-8b-chat-hf": 8192,
+		"meta-llama/Llama-4-Maverick-17B-128E-Instruct-FP8": 1048576,
 		"togethercomputer/MoA-1-Turbo": 32768,
-		"mistralai/Mistral-7B-Instruct-v0.1": 32768,
+		"meta-llama/Llama-3.3-70B-Instruct-Turbo": 131072,
+		"Qwen/Qwen3-235B-A22B-fp8": 40960,
 		"NousResearch/Nous-Hermes-2-Mixtral-8x7B-DPO": 32768,
-		"scb10x/scb10x-llama3-1-typhoon2-70b-instruct": 8192,
-		"meta-llama/Meta-Llama-3.1-8B-Instruct-Turbo": 131072,
-		"meta-llama/Llama-3.2-11B-Vision-Instruct-Turbo": 131072,
 		"deepseek-ai/DeepSeek-R1-Distill-Llama-70B": 131072,
-		"arcee-ai/virtuoso-medium-v2": 131072,
-		"arcee-ai/coder-large": 32768,
-		"arcee-ai/virtuoso-large": 131072,
 		"deepseek-ai/DeepSeek-R1-Distill-Qwen-1.5B": 131072,
 		"meta-llama/Meta-Llama-3-8B-Instruct-Lite": 8192,
 		"meta-llama/Llama-3.2-90B-Vision-Instruct-Turbo": 131072,
-		"meta-llama/Llama-4-Maverick-17B-128E-Instruct-FP8": 1048576,
 		"meta-llama/Meta-Llama-3.1-70B-Instruct-Turbo": 131072,
 		"mistralai/Mixtral-8x7B-v0.1": 32768,
-		"meta-llama/Llama-4-Scout-17B-16E-Instruct": 1048576,
-		"meta-llama/Meta-Llama-3.1-405B-Instruct-Turbo": 130815,
-		"deepseek-ai/DeepSeek-R1": 163840,
-		"arcee-ai/arcee-blitz": 32768,
+		"meta-llama/Meta-Llama-3.1-8B-Instruct-Turbo": 131072,
+		"mistralai/Mistral-7B-Instruct-v0.2": 32768,
 		"deepseek-ai/DeepSeek-V3-p-dp": 131072,
 		"deepseek-ai/DeepSeek-R1-Distill-Qwen-14B": 131072,
-		"deepseek-ai/DeepSeek-V3": 131072,
 		"Qwen/Qwen2.5-Coder-32B-Instruct": 16384,
 		"Qwen/Qwen2-72B-Instruct": 32768,
-		"mistralai/Mixtral-8x7B-Instruct-v0.1": 32768,
 		"meta-llama/Llama-3-70b-chat-hf": 8192,
 		"mistralai/Mistral-7B-Instruct-v0.3": 32768,
 		"Salesforce/Llama-Rank-V1": 8192,
@@ -264,36 +274,35 @@
 		"meta-llama/Llama-Vision-Free": 131072,
 		"meta-llama/Llama-Guard-3-11B-Vision-Turbo": 131072,
 		"meta-llama/Llama-3.2-3B-Instruct-Turbo": 131072,
+		"meta-llama/Meta-Llama-3.1-405B-Instruct-Turbo": 130815,
+		"togethercomputer/Refuel-Llm-V2": 16384,
+		"Alibaba-NLP/gte-modernbert-base": 8192,
 		"Qwen/Qwen2.5-72B-Instruct-Turbo": 131072,
-		"arcee_ai/arcee-spotlight": 131072,
+		"perplexity-ai/r1-1776": 163840,
 		"meta-llama/Llama-2-70b-hf": 4096,
 		"Qwen/Qwen2.5-VL-72B-Instruct": 32768
 	},
 	"fireworks-ai": {
 		"accounts/fireworks/models/qwq-32b": 131072,
-		"accounts/fireworks/models/qwen2-vl-72b-instruct": 32768,
+		"accounts/fireworks/models/llama4-maverick-instruct-basic": 1048576,
+		"accounts/fireworks/models/qwen3-30b-a3b": 40000,
+		"accounts/fireworks/models/llama4-scout-instruct-basic": 1048576,
+		"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/llama-v3p2-90b-vision-instruct": 131072,
-		"accounts/fireworks/models/llama-v3-70b-instruct": 8192,
 		"accounts/fireworks/models/deepseek-v3-0324": 163840,
-		"accounts/fireworks/models/qwen2p5-vl-32b-instruct": 128000,
-		"accounts/fireworks/models/llama4-maverick-instruct-basic": 1048576,
-		"accounts/fireworks/models/qwen3-30b-a3b": 131072,
-		"accounts/fireworks/models/llama4-scout-instruct-basic": 1048576,
+		"accounts/fireworks/models/qwen3-235b-a22b": 128000,
 		"accounts/fireworks/models/deepseek-r1-basic": 163840,
-		"accounts/fireworks/models/qwen-qwq-32b-preview": 32768,
-		"accounts/fireworks/models/phi-3-vision-128k-instruct": 32064,
-		"accounts/fireworks/models/firesearch-ocr-v6": 131072,
 		"accounts/fireworks/models/llama-v3p3-70b-instruct": 131072,
 		"accounts/fireworks/models/deepseek-r1": 163840,
-		"accounts/yi-01-ai/models/yi-large": 32768,
-		"accounts/fireworks/models/llama-v3p1-405b-instruct": 131072,
+		"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,
 		"accounts/fireworks/models/mixtral-8x22b-instruct": 65536,
-		"accounts/fireworks/models/qwen2p5-72b-instruct": 32768,
-		"accounts/perplexity/models/r1-1776": 163840
+		"accounts/fireworks/models/qwen2p5-72b-instruct": 32768
 	}
 }

src/lib/remult.ts

@@ -0,0 +1,106 @@
+import { JsonDataProvider, Remult, remult, type JsonEntityStorage } from "remult";
+import { createSubscriber } from "svelte/reactivity";
+
+// To be done once in the application.
+export function initRemultSvelteReactivity() {
+	// Auth reactivity (remult.user, remult.authenticated(), ...)
+	{
+		let update = () => {};
+		const s = createSubscriber(u => {
+			update = u;
+		});
+		remult.subscribeAuth({
+			reportObserved: () => s(),
+			reportChanged: () => update(),
+		});
+	}
+
+	// Entities reactivity
+	{
+		Remult.entityRefInit = x => {
+			let update = () => {};
+			const s = createSubscriber(u => {
+				update = u;
+			});
+			x.subscribe({
+				reportObserved: () => s(),
+				reportChanged: () => update(),
+			});
+		};
+	}
+}
+
+export class JsonEntityIndexedDbStorage implements JsonEntityStorage {
+	constructor(
+		private dbName: string = "db",
+		private storeName: string = "jsonStore"
+	) {}
+	supportsRawJson = true;
+	//@internal
+	db?: IDBDatabase;
+	async getItem(entityDbName: string) {
+		// eslint-disable-next-line no-async-promise-executor
+		return new Promise<string>(async (resolve, reject) => {
+			const transaction = (await this.init()).transaction([this.storeName], "readonly");
+			const store = transaction.objectStore(this.storeName);
+			const request = store.get(entityDbName);
+
+			request.onerror = _event => reject(request.error);
+			request.onsuccess = _event => {
+				if (request.result) {
+					resolve(request.result);
+				} else {
+					resolve(null!);
+				}
+			};
+		});
+	}
+	//@internal
+	async init() {
+		if (!this.db) {
+			this.db = await new Promise<IDBDatabase>((resolve, reject) => {
+				let db: IDBDatabase;
+				const request = indexedDB.open(this.dbName, 1);
+
+				request.onerror = _event => reject(request.error);
+
+				request.onsuccess = _event => {
+					db = request.result;
+					resolve(db);
+				};
+
+				request.onupgradeneeded = _event => {
+					db = request.result;
+					db.createObjectStore(this.storeName);
+				};
+			});
+		}
+		return this.db;
+	}
+
+	async setItem(entityDbName: string, json: string) {
+		// eslint-disable-next-line no-async-promise-executor
+		return new Promise<void>(async (resolve, reject) => {
+			const transaction = (await this.init()).transaction([this.storeName], "readwrite");
+			const store = transaction.objectStore(this.storeName);
+			const request = store.put(json, entityDbName);
+
+			request.onerror = _event => reject(request.error);
+			request.onsuccess = _event => resolve();
+		});
+	}
+
+	async deleteItem(entityDbName: string) {
+		// eslint-disable-next-line no-async-promise-executor
+		return new Promise<void>(async (resolve, reject) => {
+			const transaction = (await this.init()).transaction([this.storeName], "readwrite");
+			const store = transaction.objectStore(this.storeName);
+			const request = store.delete(entityDbName);
+
+			request.onerror = _event => reject(request.error);
+			request.onsuccess = _event => resolve();
+		});
+	}
+}
+
+export const idb = new JsonDataProvider(new JsonEntityIndexedDbStorage());

src/lib/server/api.ts

@@ -0,0 +1,3 @@
+import { remultApi } from "remult/remult-sveltekit";
+
+export const api = remultApi({});

src/lib/spells/scroll-state.svelte.ts

@@ -281,6 +281,7 @@ export class ScrollState {
 			(this.element as Window)?.document?.documentElement ||
 			(this.element as Document)?.documentElement ||
 			(this.element as Element);
+		if (!scrollContainer) return;
 		this.scrollTo(undefined, scrollContainer.scrollHeight);
 	}
 

src/lib/spells/synced.svelte.ts

@@ -0,0 +1,55 @@
+import type { MaybeGetter } from "$lib/types.js";
+import { isFunction } from "$lib/utils/is.js";
+import { extract } from "./extract.svelte";
+
+type SyncedArgs<T> =
+	| {
+			value: MaybeGetter<T>;
+			onChange?: (value: T) => void;
+	  }
+	| {
+			value: MaybeGetter<T | undefined>;
+			onChange?: (value: T) => void;
+			defaultValue: T;
+	  };
+
+/**
+ * Setting `current` calls the `onChange` callback with the new value.
+ *
+ * If the value arg is static, it will be used as the default value,
+ * and subsequent sets will set an internal state that gets read as `current`.
+ *
+ * Otherwise, if it is a getter, it will be called every time `current` is read,
+ * and no internal state is used.
+ */
+export class Synced<T> {
+	#internalValue = $state<T>() as T;
+
+	#valueArg: SyncedArgs<T>["value"];
+	#onChange?: SyncedArgs<T>["onChange"];
+	#defaultValue?: T;
+
+	constructor({ value, onChange, ...args }: SyncedArgs<T>) {
+		this.#valueArg = value;
+		this.#onChange = onChange;
+		this.#defaultValue = "defaultValue" in args ? args?.defaultValue : undefined;
+		this.#internalValue = extract(value, this.#defaultValue) as T;
+	}
+
+	get current() {
+		return isFunction(this.#valueArg)
+			? (this.#valueArg() ?? this.#defaultValue ?? this.#internalValue)
+			: this.#internalValue;
+	}
+
+	set current(value: T) {
+		if (this.current === value) return;
+		if (isFunction(this.#valueArg)) {
+			this.#onChange?.(value);
+			return;
+		}
+
+		this.#internalValue = value;
+		this.#onChange?.(value);
+	}
+}

src/lib/state/checkpoints.svelte.ts

@@ -1,79 +1,147 @@
-import type { Project } from "$lib/types.js";
-import { PersistedState } from "runed";
-import { session } from "./session.svelte";
+import { idb } from "$lib/remult.js";
+import { snapshot } from "$lib/utils/object.svelte";
+import { dequal } from "dequal";
+import { Entity, Fields, repo } from "remult";
+import { conversations, type ConversationEntityMembers } from "./conversations.svelte";
+import { ProjectEntity, projects } from "./projects.svelte";
 
-const ls_key = "checkpoints";
+@Entity("checkpoint")
+export class Checkpoint {
+	@Fields.cuid()
+	id!: string;
 
-type Checkpoint = {
-	id: string;
-	timestamp: string;
-	projectState: Project;
-	favorite?: boolean;
-};
+	@Fields.boolean()
+	favorite: boolean = false;
+
+	@Fields.createdAt()
+	timestamp!: Date;
+
+	@Fields.json()
+	conversations: ConversationEntityMembers[] = [];
+
+	@Fields.string()
+	projectId!: string;
+}
+
+const checkpointsRepo = repo(Checkpoint, idb);
 
 class Checkpoints {
-	#checkpoints = new PersistedState<Record<Project["id"], Checkpoint[]>>(
-		ls_key,
-		{},
-		{
-			serializer: {
-				serialize: JSON.stringify,
-				deserialize: v => {
-					return JSON.parse(v);
+	#checkpoints: Record<ProjectEntity["id"], Checkpoint[]> = $state({});
+
+	for(projectId: ProjectEntity["id"]) {
+		// Async load from db
+		checkpointsRepo
+			.find({
+				where: {
+					projectId,
 				},
-			},
-		}
-	);
+			})
+			.then(c => {
+				// Dequal to avoid infinite loops
+				if (dequal(c, this.#checkpoints[projectId])) return;
+				this.#checkpoints[projectId] = c;
+			});
 
-	for(projectId: Project["id"]) {
 		return (
-			this.#checkpoints.current[projectId]?.toSorted((a, b) => {
-				return b.timestamp.localeCompare(a.timestamp);
+			this.#checkpoints[projectId]?.toSorted((a, b) => {
+				const aTime = a.timestamp?.getTime() ?? new Date().getTime();
+				const bTime = b.timestamp?.getTime() ?? new Date().getTime();
+				return bTime - aTime;
 			}) ?? []
 		);
 	}
 
-	commit(projectId: Project["id"]) {
-		const project = session.$.projects.find(p => p.id == projectId);
+	async commit(projectId: ProjectEntity["id"]) {
+		const project = projects.all.find(p => p.id == projectId);
 		if (!project) return;
-		const prev: Checkpoint[] = this.#checkpoints.current[projectId] ?? [];
-		this.#checkpoints.current[projectId] = [
-			...prev,
-			{ projectState: project, timestamp: new Date().toLocaleString(), id: crypto.randomUUID() },
-		];
+
+		const newCheckpoint = await checkpointsRepo.save(
+			snapshot({
+				conversations: conversations.for(project.id).map(c => c.data),
+				timestamp: new Date(),
+				projectId: project.id,
+			})
+		);
+
+		const prev: Checkpoint[] = this.#checkpoints[projectId] ?? [];
+		this.#checkpoints[projectId] = [...prev, newCheckpoint];
 	}
 
-	restore(projectId: Project["id"], checkpoint: Checkpoint) {
-		const project = session.$.projects.find(p => p.id == projectId);
+	restore(checkpoint: Checkpoint) {
+		const cloned = snapshot(checkpoint);
+		const modified = {
+			...cloned,
+			conversations: cloned.conversations.map(c => ({
+				...c,
+				projectId: cloned.projectId,
+			})),
+		};
+
+		const project = projects.all.find(p => p.id == modified.projectId);
 		if (!project) return;
 
-		session.$.activeProjectId = projectId;
-		session.project = checkpoint.projectState;
+		projects.activeId = modified.projectId;
+
+		// conversations.deleteAllFrom(cloned.projectId);
+		const prev = conversations.for(modified.projectId);
+		modified.conversations.forEach((c, i) => {
+			const p = prev[i];
+			if (p) return p.update(c);
+			conversations.create({
+				...c,
+				projectId: modified.projectId,
+			});
+		});
+
+		if (modified.conversations.length < prev.length) {
+			prev.forEach((p, i) => {
+				if (i < modified.conversations.length) return;
+				conversations.delete(p.data);
+			});
+		}
 	}
 
-	toggleFavorite(projectId: Project["id"], checkpoint: Checkpoint) {
-		const prev: Checkpoint[] = this.#checkpoints.current[projectId] ?? [];
-		this.#checkpoints.current[projectId] = prev.map(c => {
-			if (c.id == checkpoint.id) {
-				return { ...c, favorite: !c.favorite };
-			}
-			return c;
+	async toggleFavorite({ id, projectId }: Checkpoint) {
+		if (!id) return;
+
+		const p = await checkpointsRepo.findFirst({ id });
+		if (!p) return;
+
+		await checkpointsRepo.update(id, { favorite: !p.favorite });
+		const prev: Checkpoint[] = snapshot(this.#checkpoints[projectId] ?? []);
+
+		this.#checkpoints[projectId] = prev.map(c => {
+			if (c.id !== id) return c;
+			return { ...c, favorite: !c.favorite };
 		});
 	}
 
-	delete(projectId: Project["id"], checkpoint: Checkpoint) {
-		const prev: Checkpoint[] = this.#checkpoints.current[projectId] ?? [];
-		this.#checkpoints.current[projectId] = prev.filter(c => c.id != checkpoint.id);
+	async delete({ id, projectId }: Checkpoint) {
+		if (!id) return;
+
+		await checkpointsRepo.delete(id);
+
+		const prev: Checkpoint[] = this.#checkpoints[projectId] ?? [];
+		this.#checkpoints[projectId] = prev.filter(c => c.id != id);
 	}
 
-	clear(projectId: Project["id"]) {
-		this.#checkpoints.current[projectId] = [];
+	async clear(projectId: ProjectEntity["id"]) {
+		await checkpointsRepo.deleteMany({ where: { projectId } });
+		this.#checkpoints[projectId] = [];
 	}
 
-	migrate(from: Project["id"], to: Project["id"]) {
-		const fromArr = this.#checkpoints.current[from] ?? [];
-		this.#checkpoints.current[to] = [...fromArr];
-		this.#checkpoints.current[from] = [];
+	async migrate(from: ProjectEntity["id"], to: ProjectEntity["id"]) {
+		await checkpointsRepo.updateMany({ where: { projectId: from }, set: { projectId: to } });
+
+		const fromArr = snapshot(this.#checkpoints[from] ?? []);
+		this.#checkpoints[to] = [
+			...fromArr.map(c => ({
+				...c,
+				projectId: to,
+				conversations: c.conversations.map(cn => ({ ...cn, projectId: to })),
+			})),
+		];
+		this.#checkpoints[from] = [];
 	}
 }
 

src/lib/state/conversations.svelte.ts

@@ -0,0 +1,421 @@
+import {
+	defaultGenerationConfig,
+	type GenerationConfig,
+} from "$lib/components/inference-playground/generation-config-settings.js";
+import {
+	handleNonStreamingResponse,
+	handleStreamingResponse,
+} from "$lib/components/inference-playground/utils.svelte.js";
+import { addToast } from "$lib/components/toaster.svelte.js";
+import { AbortManager } from "$lib/spells/abort-manager.svelte";
+import { PipelineTag, type ConversationMessage, type GenerationStatistics, type Model } from "$lib/types.js";
+import { omit, snapshot } from "$lib/utils/object.svelte";
+import { models } from "./models.svelte";
+import { DEFAULT_PROJECT_ID, ProjectEntity, projects } from "./projects.svelte";
+import { token } from "./token.svelte";
+// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+// @ts-ignore - Svelte imports are broken in TS files
+import { showQuotaModal } from "$lib/components/quota-modal.svelte";
+import { idb } from "$lib/remult.js";
+import { poll } from "$lib/utils/poll.js";
+import { Entity, Fields, repo, type MembersOnly } from "remult";
+import { images } from "./images.svelte";
+import { isString } from "$lib/utils/is.js";
+import { createInit } from "$lib/spells/create-init.svelte";
+
+@Entity("conversation")
+export class ConversationEntity {
+	@Fields.autoIncrement()
+	id!: number;
+
+	@Fields.json()
+	config: GenerationConfig = {};
+
+	@Fields.json()
+	structuredOutput?: {
+		enabled?: boolean;
+		schema?: string;
+	};
+
+	@Fields.json()
+	messages!: ConversationMessage[];
+
+	@Fields.json()
+	systemMessage: ConversationMessage = { role: "system" };
+
+	@Fields.boolean()
+	streaming = false;
+
+	@Fields.string()
+	provider?: string;
+
+	@Fields.string()
+	projectId!: string;
+
+	@Fields.string()
+	modelId!: string;
+
+	@Fields.createdAt()
+	createdAt!: Date;
+}
+
+export type ConversationEntityMembers = MembersOnly<ConversationEntity>;
+
+const conversationsRepo = repo(ConversationEntity, idb);
+
+const startMessageUser: ConversationMessage = { role: "user", content: "" };
+const systemMessage: ConversationMessage = {
+	role: "system",
+	content: "",
+};
+
+export const emptyModel: Model = {
+	_id: "",
+	inferenceProviderMapping: [],
+	pipeline_tag: PipelineTag.TextGeneration,
+	trendingScore: 0,
+	tags: ["text-generation"],
+	id: "",
+	config: {
+		architectures: [] as string[],
+		model_type: "",
+		tokenizer_config: {},
+	},
+};
+
+function getDefaultConversation(projectId: string) {
+	return {
+		projectId,
+		modelId: models.trending[0]?.id ?? models.remote[0]?.id ?? emptyModel.id,
+		config: { ...defaultGenerationConfig },
+		messages: [{ ...startMessageUser }],
+		systemMessage,
+		streaming: true,
+		createdAt: new Date(),
+	} satisfies Partial<ConversationEntityMembers>;
+}
+
+export class ConversationClass {
+	#data = $state.raw() as ConversationEntityMembers;
+	readonly model = $derived(models.all.find(m => m.id === this.data.modelId) ?? emptyModel);
+
+	abortManager = new AbortManager();
+	generationStats = $state({ latency: 0, tokens: 0 }) as GenerationStatistics;
+	generating = $state(false);
+
+	constructor(data: ConversationEntityMembers) {
+		this.#data = data;
+	}
+
+	get data() {
+		return this.#data;
+	}
+
+	async update(data: Partial<ConversationEntityMembers>) {
+		if (this.data.id === -1) return;
+		// if (this.data.id === undefined) return;
+		const cloned = snapshot({ ...this.data, ...data });
+
+		if (this.data.id === undefined) {
+			const saved = await conversationsRepo.save(omit(cloned, "id"));
+			this.#data = { ...cloned, id: saved.id };
+		} else {
+			await conversationsRepo.update(this.data.id, cloned);
+			this.#data = cloned;
+		}
+	}
+
+	async addMessage(message: ConversationMessage) {
+		this.update({
+			...this.data,
+			messages: [...this.data.messages, snapshot(message)],
+		});
+	}
+
+	async updateMessage(args: { index: number; message: Partial<ConversationMessage> }) {
+		const prev = await poll(() => this.data.messages[args.index], { interval: 10, maxAttempts: 200 });
+
+		if (!prev) return;
+
+		await this.update({
+			...this.data,
+			messages: [
+				...this.data.messages.slice(0, args.index),
+				snapshot({ ...prev, ...args.message }),
+				...this.data.messages.slice(args.index + 1),
+			],
+		});
+	}
+
+	async deleteMessage(idx: number) {
+		const imgKeys = this.data.messages.flatMap(m => m.images).filter(isString);
+		await Promise.all([
+			...imgKeys.map(k => images.delete(k)),
+			this.update({
+				...this.data,
+				messages: this.data.messages.slice(0, idx),
+			}),
+		]);
+	}
+
+	async deleteMessages(from: number) {
+		const sliced = this.data.messages.slice(0, from);
+		const notSliced = this.data.messages.slice(from);
+
+		const imgKeys = notSliced.flatMap(m => m.images).filter(isString);
+		await Promise.all([
+			...imgKeys.map(k => images.delete(k)),
+			this.update({
+				...this.data,
+				messages: sliced,
+			}),
+		]);
+	}
+
+	async genNextMessage() {
+		this.generating = true;
+		const startTime = performance.now();
+
+		try {
+			if (this.data.streaming) {
+				let addedMessage = false;
+				const streamingMessage = { role: "assistant", content: "" };
+				const index = this.data.messages.length;
+
+				await handleStreamingResponse(
+					this,
+					content => {
+						if (!streamingMessage) return;
+						streamingMessage.content = content;
+
+						if (!addedMessage) {
+							this.addMessage(streamingMessage);
+							addedMessage = true;
+						} else {
+							this.updateMessage({ index, message: streamingMessage });
+						}
+					},
+					this.abortManager.createController()
+				);
+			} else {
+				const { message: newMessage, completion_tokens: newTokensCount } = await handleNonStreamingResponse(this);
+				this.addMessage(newMessage);
+				this.generationStats.tokens += newTokensCount;
+			}
+		} catch (error) {
+			if (error instanceof Error) {
+				const msg = error.message;
+				if (msg.toLowerCase().includes("montly") || msg.toLowerCase().includes("pro")) {
+					showQuotaModal();
+				}
+
+				if (error.message.includes("token seems invalid")) {
+					token.reset();
+				}
+
+				if (error.name !== "AbortError") {
+					addToast({ title: "Error", description: error.message, variant: "error" });
+				}
+			} else {
+				addToast({ title: "Error", description: "An unknown error occurred", variant: "error" });
+			}
+		}
+
+		const endTime = performance.now();
+		this.generationStats.latency = Math.round(endTime - startTime);
+		this.generating = false;
+	}
+
+	stopGenerating = () => {
+		this.abortManager.abortAll();
+		this.generating = false;
+	};
+}
+
+class Conversations {
+	#conversations: Record<ProjectEntity["id"], ConversationClass[]> = $state.raw({});
+	generationStats = $derived(this.active.map(c => c.generationStats));
+	loaded = $state(false);
+
+	#active = $derived(this.for(projects.activeId));
+
+	init = createInit(() => {
+		const searchParams = new URLSearchParams(window.location.search);
+		const searchProvider = searchParams.get("provider") ?? "";
+		const searchModelId = searchParams.get("modelId") ?? "";
+
+		const searchModel = models.remote.find(m => m.id === searchModelId);
+		if (!searchModel) return;
+
+		conversationsRepo
+			.upsert({
+				where: { projectId: DEFAULT_PROJECT_ID },
+				set: {
+					modelId: searchModelId,
+					provider: searchProvider,
+				},
+			})
+			.then(res => {
+				this.#conversations = { ...this.#conversations, [DEFAULT_PROJECT_ID]: [new ConversationClass(res)] };
+			});
+	});
+
+	get conversations() {
+		return this.#conversations;
+	}
+
+	get generating() {
+		return this.#active.some(c => c.generating);
+	}
+
+	get active() {
+		return this.#active;
+	}
+
+	async create(args: { projectId: ProjectEntity["id"]; modelId?: Model["id"] } & Partial<ConversationEntityMembers>) {
+		const conv = snapshot({
+			...getDefaultConversation(args.projectId),
+			...args,
+		});
+		if (args.modelId) conv.modelId = args.modelId;
+
+		const { id } = await conversationsRepo.save(conv);
+		const prev = this.#conversations[args.projectId] ?? [];
+		this.#conversations = {
+			...this.#conversations,
+			[args.projectId]: [...prev, new ConversationClass({ ...conv, id })],
+		};
+
+		return id;
+	}
+
+	for(projectId: ProjectEntity["id"]): ConversationClass[] {
+		// Async load from db
+		if (!this.#conversations[projectId]?.length) {
+			conversationsRepo.find({ where: { projectId } }).then(c => {
+				if (!c.length) {
+					const dc = conversationsRepo.create(getDefaultConversation(projectId));
+					c.push(dc);
+				}
+				this.#conversations = { ...this.#conversations, [projectId]: c.map(c => new ConversationClass(c)) };
+			});
+		}
+
+		let res = this.#conversations[projectId];
+		if (res?.length === 0 || !res) {
+			// We set id to -1 because it is temporary, there should always be a conversation.
+			const dc = { ...getDefaultConversation(projectId), id: -1 };
+			res = [new ConversationClass(dc)];
+		}
+
+		return res.slice(0, 2).toSorted((a, b) => {
+			return a.data.createdAt.getTime() - b.data.createdAt.getTime();
+		});
+	}
+
+	async delete({ id, projectId }: ConversationEntityMembers) {
+		if (!id) return;
+
+		await conversationsRepo.delete(id);
+
+		const prev = this.#conversations[projectId] ?? [];
+		this.#conversations = { ...this.#conversations, [projectId]: prev.filter(c => c.data.id != id) };
+	}
+
+	async deleteAllFrom(projectId: string) {
+		this.for(projectId).forEach(c => this.delete(c.data));
+	}
+
+	async reset() {
+		this.active.forEach(c => this.delete(c.data));
+		this.create(getDefaultConversation(projects.activeId));
+	}
+
+	async migrate(from: ProjectEntity["id"], to: ProjectEntity["id"]) {
+		const fromArr = this.#conversations[from] ?? [];
+		await Promise.allSettled(fromArr.map(c => c.update({ projectId: to })));
+		this.#conversations = {
+			...this.#conversations,
+			[to]: [...fromArr],
+			[from]: [],
+		};
+	}
+
+	async duplicate(from: ProjectEntity["id"], to: ProjectEntity["id"]) {
+		const fromArr = this.#conversations[from] ?? [];
+		await Promise.allSettled(
+			fromArr.map(async c => {
+				conversations.create({ ...c.data, projectId: to });
+			})
+		);
+	}
+
+	async genNextMessages(conv: "left" | "right" | "both" | ConversationClass = "both") {
+		if (!token.value) {
+			token.showModal = true;
+			return;
+		}
+
+		const conversations = (() => {
+			if (typeof conv === "string") {
+				return this.active.filter((_, idx) => {
+					return conv === "both" || (conv === "left" ? idx === 0 : idx === 1);
+				});
+			}
+			return [conv];
+		})();
+
+		for (let idx = 0; idx < conversations.length; idx++) {
+			const conversation = conversations[idx];
+			if (!conversation || conversation.data.messages.at(-1)?.role !== "assistant") continue;
+
+			let prefix = "";
+			if (this.active.length === 2) {
+				prefix = `Error on ${idx === 0 ? "left" : "right"} conversation. `;
+			}
+			return addToast({
+				title: "Failed to run inference",
+				description: `${prefix}Messages must alternate between user/assistant roles.`,
+				variant: "error",
+			});
+		}
+
+		(document.activeElement as HTMLElement).blur();
+
+		try {
+			const promises = conversations.map(c => c.genNextMessage());
+			await Promise.all(promises);
+		} catch (error) {
+			if (error instanceof Error) {
+				const msg = error.message;
+				if (msg.toLowerCase().includes("montly") || msg.toLowerCase().includes("pro")) {
+					showQuotaModal();
+				}
+
+				if (error.message.includes("token seems invalid")) {
+					token.reset();
+				}
+
+				if (error.name !== "AbortError") {
+					addToast({ title: "Error", description: error.message, variant: "error" });
+				}
+			} else {
+				addToast({ title: "Error", description: "An unknown error occurred", variant: "error" });
+			}
+		}
+	}
+
+	stopGenerating = () => {
+		this.active.forEach(c => c.abortManager.abortAll());
+	};
+
+	genOrStop = (c?: Parameters<typeof this.genNextMessages>[0]) => {
+		if (this.generating) {
+			this.stopGenerating();
+		} else {
+			this.genNextMessages(c);
+		}
+	};
+}
+
+export const conversations = new Conversations();

src/lib/state/generation-stats.svelte.ts

@@ -1,31 +0,0 @@
-import { getTokens } from "$lib/components/inference-playground/utils.js";
-import { watch } from "runed";
-import { session } from "./session.svelte";
-
-export interface GenerationStats {
-	latency: number;
-	generatedTokensCount: number;
-}
-
-function createGenerationStats() {
-	let stats = $state([] as Array<GenerationStats>);
-
-	const init = () => {
-		watch(
-			() => $state.snapshot(session.project),
-			() => {
-				session.project.conversations.forEach(async (c, i) => {
-					generationStats[i] = { latency: 0, ...generationStats[i], generatedTokensCount: await getTokens(c) };
-				});
-			}
-		);
-	};
-
-	const set = (s: Array<GenerationStats>) => {
-		stats = s;
-	};
-
-	return Object.assign(stats, { set, init });
-}
-
-export const generationStats = createGenerationStats();

src/lib/state/images.svelte.ts

@@ -0,0 +1,26 @@
+import { compressBase64Image, fileToDataURL } from "$lib/utils/file.js";
+import { JsonEntityIndexedDbStorage } from "$lib/remult.js";
+
+const store = new JsonEntityIndexedDbStorage();
+
+class Images {
+	async upload(file: File) {
+		const dataUrl = await fileToDataURL(file);
+		const compressed = await compressBase64Image({ base64: dataUrl, maxSizeKB: 400 });
+
+		const key = `image-${crypto.randomUUID()}`;
+		store.setItem(key, compressed);
+
+		return key;
+	}
+
+	async get(key: string): Promise<string> {
+		return await store.getItem(key);
+	}
+
+	async delete(key: string) {
+		return await store.deleteItem(key);
+	}
+}
+
+export const images = new Images();

src/lib/state/models.svelte.ts

@@ -1,14 +1,17 @@
 import { page } from "$app/state";
-import type { CustomModel, Model } from "$lib/types.js";
+import { type CustomModel } from "$lib/types.js";
 import { edit, randomPick } from "$lib/utils/array.js";
 import { safeParse } from "$lib/utils/json.js";
 import typia from "typia";
-import { session } from "./session.svelte";
+import type { PageData } from "../../routes/$types.js";
+import { conversations } from "./conversations.svelte";
 
 const LOCAL_STORAGE_KEY = "hf_inference_playground_custom_models";
 
+const pageData = $derived(page.data as PageData);
+
 class Models {
-	remote = $derived(page.data.models as Model[]);
+	remote = $derived(pageData.models);
 	trending = $derived(this.remote.toSorted((a, b) => b.trendingScore - a.trendingScore).slice(0, 5));
 	nonTrending = $derived(this.remote.filter(m => !this.trending.includes(m)));
 	all = $derived([...this.remote, ...this.custom]);
@@ -59,9 +62,9 @@ class Models {
 
 	removeCustom(uuid: CustomModel["_id"]) {
 		this.custom = this.custom.filter(m => m._id !== uuid);
-		session.project.conversations.forEach((c, i) => {
+		conversations.active.forEach(c => {
 			if (c.model._id !== uuid) return;
-			session.project.conversations[i]!.model = randomPick(models.trending)!;
+			c.update({ modelId: randomPick(models.trending)?.id });
 		});
 	}
 }

src/lib/state/projects.svelte.ts

@@ -0,0 +1,107 @@
+import { idb } from "$lib/remult.js";
+import { dequal } from "dequal";
+import { Entity, Fields, repo, type MembersOnly } from "remult";
+import { conversations } from "./conversations.svelte";
+import { PersistedState } from "runed";
+import { checkpoints } from "./checkpoints.svelte";
+
+@Entity("project")
+export class ProjectEntity {
+	@Fields.cuid()
+	id!: string;
+
+	@Fields.string()
+	name!: string;
+}
+
+export type ProjectEntityMembers = MembersOnly<ProjectEntity>;
+
+const projectsRepo = repo(ProjectEntity, idb);
+
+const LOCAL_STORAGE_KEY = "hf_inf_pg_active_pid";
+export const DEFAULT_PROJECT_ID = "default";
+const defaultProj = projectsRepo.create({ id: DEFAULT_PROJECT_ID, name: "Default" });
+
+class Projects {
+	#projects: Record<ProjectEntity["id"], ProjectEntity> = $state({ default: defaultProj });
+	#activeId = new PersistedState(LOCAL_STORAGE_KEY, "default");
+
+	get activeId() {
+		return this.#activeId.current;
+	}
+
+	set activeId(id: string) {
+		this.#activeId.current = id;
+	}
+
+	constructor() {
+		projectsRepo.find().then(res => {
+			if (!res.some(p => p.id === this.activeId)) this.activeId === DEFAULT_PROJECT_ID;
+
+			res.forEach(p => {
+				if (dequal(this.#projects[p.id], p)) return;
+				this.#projects[p.id] = p;
+			});
+		});
+	}
+
+	async create(name: string): Promise<string> {
+		const { id } = await projectsRepo.save({ name });
+		this.#projects[id] = { name, id };
+		return id;
+	}
+
+	saveProject = async (args: { name: string; moveCheckpoints?: boolean }) => {
+		const defaultProject = this.all.find(p => p.id === DEFAULT_PROJECT_ID);
+		if (!defaultProject) return;
+
+		const id = await this.create(args.name);
+
+		if (args.moveCheckpoints) {
+			checkpoints.migrate(defaultProject.id, id);
+		}
+
+		// conversations.migrate(defaultProject.id, id).then(_ => (this.#activeId.current = id));
+		conversations.migrate(defaultProject.id, id).then(() => {
+			this.activeId = id;
+		});
+
+		return id;
+	};
+
+	setCurrent = async (id: string) => {
+		await checkpoints.migrate(id, this.activeId);
+		conversations.migrate(this.activeId, id).then(() => {
+			this.#activeId.current = id;
+		});
+		this.activeId = id;
+	};
+
+	get current() {
+		return this.#projects[this.activeId];
+	}
+
+	get all() {
+		return Object.values(this.#projects);
+	}
+
+	async update(data: ProjectEntity) {
+		if (!data.id) return;
+		await projectsRepo.update(data.id, data);
+		this.#projects[data.id] = { ...data };
+	}
+
+	async delete(id: string) {
+		if (!id) return;
+
+		await projectsRepo.delete(id);
+		await conversations.deleteAllFrom(id);
+		delete this.#projects[id];
+
+		if (this.activeId === id) {
+			this.activeId = DEFAULT_PROJECT_ID;
+		}
+	}
+}
+
+export const projects = new Projects();

src/lib/state/session.svelte.ts

@@ -1,332 +0,0 @@
-import { defaultGenerationConfig } from "$lib/components/inference-playground/generation-config-settings.js";
-// eslint-disable-next-line @typescript-eslint/ban-ts-comment
-// @ts-ignore - Svelte imports are broken in TS files
-import { showQuotaModal } from "$lib/components/quota-modal.svelte";
-import { createInit } from "$lib/spells/create-init.svelte.js";
-import {
-	PipelineTag,
-	type Conversation,
-	type ConversationMessage,
-	type DefaultProject,
-	type Model,
-	type Project,
-	type Session,
-} from "$lib/types.js";
-import { safeParse } from "$lib/utils/json.js";
-import typia from "typia";
-import { models } from "./models.svelte";
-import { checkpoints } from "./checkpoints.svelte";
-import { handleNonStreamingResponse, handleStreamingResponse } from "$lib/components/inference-playground/utils.js";
-import { AbortManager } from "$lib/spells/abort-manager.svelte";
-import { addToast } from "$lib/components/toaster.svelte.js";
-import { token } from "./token.svelte";
-
-const LOCAL_STORAGE_KEY = "hf_inference_playground_session";
-
-interface GenerationStatistics {
-	latency: number;
-	generatedTokensCount: number;
-}
-
-const startMessageUser: ConversationMessage = { role: "user", content: "" };
-const systemMessage: ConversationMessage = {
-	role: "system",
-	content: "",
-};
-
-export const emptyModel: Model = {
-	_id: "",
-	inferenceProviderMapping: [],
-	pipeline_tag: PipelineTag.TextGeneration,
-	trendingScore: 0,
-	tags: ["text-generation"],
-	id: "",
-	config: {
-		architectures: [] as string[],
-		model_type: "",
-		tokenizer_config: {},
-	},
-};
-
-function getDefaults() {
-	const defaultModel = models.trending[0] ?? models.remote[0] ?? emptyModel;
-
-	const defaultConversation: Conversation = {
-		model: defaultModel,
-		config: { ...defaultGenerationConfig },
-		messages: [{ ...startMessageUser }],
-		systemMessage,
-		streaming: true,
-	};
-
-	const defaultProject: DefaultProject = {
-		name: "Default",
-		id: "default",
-		conversations: [defaultConversation],
-	};
-
-	return { defaultProject, defaultConversation };
-}
-
-class SessionState {
-	#value = $state<Session>({} as Session);
-
-	generationStats = $state([{ latency: 0, generatedTokensCount: 0 }] as
-		| [GenerationStatistics]
-		| [GenerationStatistics, GenerationStatistics]);
-	generating = $state(false);
-
-	#abortManager = new AbortManager();
-
-	// Call once in layout
-	init = createInit(() => {
-		const { defaultConversation, defaultProject } = getDefaults();
-
-		// Get saved session from localStorage if available
-		let savedSession: Session = {
-			projects: [defaultProject],
-			activeProjectId: defaultProject.id,
-		};
-
-		const savedData = localStorage.getItem(LOCAL_STORAGE_KEY);
-		if (savedData) {
-			const parsed = safeParse(savedData);
-			const res = typia.validate<Session>(parsed);
-			if (res.success) {
-				savedSession = parsed;
-			} else {
-				localStorage.setItem(LOCAL_STORAGE_KEY, JSON.stringify(savedSession));
-			}
-		}
-
-		// Merge query params with savedSession's default project
-		// Query params models and providers take precedence over savedSession's.
-		// In any case, we try to merge the two, and the amount of conversations
-		// is the maximum between the two.
-		const dp = savedSession.projects.find(p => p.id === "default");
-		if (typia.is<DefaultProject>(dp)) {
-			// Parse URL query parameters
-			const searchParams = new URLSearchParams(window.location.search);
-			const searchProviders = searchParams.getAll("provider");
-			const searchModelIds = searchParams.getAll("modelId");
-			const modelsFromSearch = searchModelIds.map(id => models.remote.find(model => model.id === id)).filter(Boolean);
-			if (modelsFromSearch.length > 0) {
-				savedSession.activeProjectId = "default";
-
-				let min = Math.min(dp.conversations.length, modelsFromSearch.length, searchProviders.length);
-				min = Math.max(1, min);
-				const convos = dp.conversations.slice(0, min);
-				if (typia.is<Project["conversations"]>(convos)) dp.conversations = convos;
-
-				for (let i = 0; i < min; i++) {
-					const conversation = dp.conversations[i] ?? defaultConversation;
-					dp.conversations[i] = {
-						...conversation,
-						model: modelsFromSearch[i] ?? conversation.model,
-						provider: searchProviders[i] ?? conversation.provider,
-					};
-				}
-			}
-		}
-
-		this.$ = savedSession;
-		session.generationStats = session.project.conversations.map(_ => ({ latency: 0, generatedTokensCount: 0 })) as
-			| [GenerationStatistics]
-			| [GenerationStatistics, GenerationStatistics];
-		this.#abortManager.init();
-	});
-
-	constructor() {
-		$effect.root(() => {
-			$effect(() => {
-				if (!this.init.called) return;
-				const v = $state.snapshot(this.#value);
-				try {
-					localStorage.setItem(LOCAL_STORAGE_KEY, JSON.stringify(v));
-				} catch (e) {
-					console.error("Failed to save session to localStorage:", e);
-				}
-			});
-		});
-	}
-
-	get $() {
-		return this.#value;
-	}
-
-	set $(v: Session) {
-		this.#value = v;
-	}
-
-	#setAnySession(s: unknown) {
-		if (typia.is<Session>(s)) this.$ = s;
-	}
-
-	saveProject = (args: { name: string; moveCheckpoints?: boolean }) => {
-		const defaultProject = this.$.projects.find(p => p.id === "default");
-		if (!defaultProject) return;
-
-		const project: Project = {
-			...defaultProject,
-			name: args.name,
-			id: crypto.randomUUID(),
-		};
-
-		if (args.moveCheckpoints) {
-			checkpoints.migrate(defaultProject.id, project.id);
-		}
-
-		defaultProject.conversations = [getDefaults().defaultConversation];
-
-		this.addProject(project);
-	};
-
-	addProject = (project: Project) => {
-		this.$ = { ...this.$, projects: [...this.$.projects, project], activeProjectId: project.id };
-	};
-
-	deleteProject = (id: string) => {
-		// Can't delete default project!
-		if (id === "default") return;
-
-		const projects = this.$.projects.filter(p => p.id !== id);
-		if (projects.length === 0) {
-			const { defaultProject } = getDefaults();
-			this.#setAnySession({ ...this.$, projects: [defaultProject], activeProjectId: defaultProject.id });
-		}
-
-		const currProject = projects.find(p => p.id === this.$.activeProjectId);
-		this.#setAnySession({ ...this.$, projects, activeProjectId: currProject?.id ?? projects[0]?.id });
-		checkpoints.clear(id);
-	};
-
-	updateProject = (id: string, data: Partial<Project>) => {
-		const projects = this.$.projects.map(p => (p.id === id ? { ...p, ...data } : p));
-		this.#setAnySession({ ...this.$, projects });
-	};
-
-	get project() {
-		return this.$.projects.find(p => p.id === this.$.activeProjectId) ?? this.$.projects[0];
-	}
-
-	set project(np: Project) {
-		const projects = this.$.projects.map(p => (p.id === np.id ? np : p));
-		this.#setAnySession({ ...this.$, projects });
-	}
-
-	async #runInference(conversation: Conversation) {
-		const idx = session.project.conversations.indexOf(conversation);
-
-		const startTime = performance.now();
-
-		if (conversation.streaming) {
-			let addedMessage = false;
-			const streamingMessage = $state({ role: "assistant", content: "" });
-
-			await handleStreamingResponse(
-				conversation,
-				content => {
-					if (!streamingMessage) return;
-					streamingMessage.content = content;
-					if (!addedMessage) {
-						conversation.messages = [...conversation.messages, streamingMessage];
-						addedMessage = true;
-					}
-				},
-				this.#abortManager.createController()
-			);
-		} else {
-			const { message: newMessage, completion_tokens: newTokensCount } = await handleNonStreamingResponse(conversation);
-			conversation.messages = [...conversation.messages, newMessage];
-			const c = session.generationStats[idx];
-			if (c) c.generatedTokensCount += newTokensCount;
-		}
-
-		const endTime = performance.now();
-		const c = session.generationStats[idx];
-		if (c) c.latency = Math.round(endTime - startTime);
-	}
-
-	async run(conv: "left" | "right" | "both" | Conversation = "both") {
-		if (!token.value) {
-			token.showModal = true;
-			return;
-		}
-
-		const conversations = (() => {
-			if (typeof conv === "string") {
-				return session.project.conversations.filter((_, idx) => {
-					return conv === "both" || (conv === "left" ? idx === 0 : idx === 1);
-				});
-			}
-			return [conv];
-		})();
-
-		for (let idx = 0; idx < conversations.length; idx++) {
-			const conversation = conversations[idx];
-			if (!conversation || conversation.messages.at(-1)?.role !== "assistant") continue;
-
-			let prefix = "";
-			if (session.project.conversations.length === 2) {
-				prefix = `Error on ${idx === 0 ? "left" : "right"} conversation. `;
-			}
-			return addToast({
-				title: "Failed to run inference",
-				description: `${prefix}Messages must alternate between user/assistant roles.`,
-				variant: "error",
-			});
-		}
-
-		(document.activeElement as HTMLElement).blur();
-		session.generating = true;
-
-		try {
-			const promises = conversations.map(c => this.#runInference(c));
-			await Promise.all(promises);
-		} catch (error) {
-			for (const conversation of conversations) {
-				if (conversation.messages.at(-1)?.role === "assistant" && !conversation.messages.at(-1)?.content?.trim()) {
-					conversation.messages.pop();
-					conversation.messages = [...conversation.messages];
-				}
-				// eslint-disable-next-line no-self-assign
-				session.$ = session.$;
-			}
-
-			if (error instanceof Error) {
-				const msg = error.message;
-				if (msg.toLowerCase().includes("montly") || msg.toLowerCase().includes("pro")) {
-					showQuotaModal();
-				}
-
-				if (error.message.includes("token seems invalid")) {
-					token.reset();
-				}
-
-				if (error.name !== "AbortError") {
-					addToast({ title: "Error", description: error.message, variant: "error" });
-				}
-			} else {
-				addToast({ title: "Error", description: "An unknown error occurred", variant: "error" });
-			}
-		} finally {
-			session.generating = false;
-			this.#abortManager.clear();
-		}
-	}
-
-	stopGenerating = () => {
-		this.#abortManager.abortAll();
-		session.generating = false;
-	};
-
-	runOrStop = (c?: Parameters<typeof this.run>[0]) => {
-		if (session.generating) {
-			this.stopGenerating();
-		} else {
-			this.run(c);
-		}
-	};
-}
-
-export const session = new SessionState();

src/lib/types.ts

@@ -1,6 +1,7 @@
 import type { GenerationConfig } from "$lib/components/inference-playground/generation-config-settings.js";
 import type { ChatCompletionInputMessage } from "@huggingface/tasks";
 import typia from "typia";
+import type { ConversationEntityMembers } from "./state/conversations.svelte";
 
 export type ConversationMessage = Pick<ChatCompletionInputMessage, "name" | "role" | "tool_calls"> & {
 	content?: string;
@@ -14,7 +15,7 @@ export type Conversation = {
 	systemMessage: ConversationMessage;
 	streaming: boolean;
 	provider?: string;
-};
+} & Pick<ConversationEntityMembers, "structuredOutput">;
 
 export type ConversationWithCustomModel = Conversation & {
 	model: CustomModel;
@@ -24,28 +25,9 @@ export type ConversationWithHFModel = Conversation & {
 	model: Model;
 };
 
-export const isConversationWithHFModel = typia.createIs<ConversationWithHFModel>();
-export const isConversationWithCustomModel = typia.createIs<ConversationWithCustomModel>();
-
 export const isHFModel = typia.createIs<Model>();
 export const isCustomModel = typia.createIs<CustomModel>();
 
-export type Project = {
-	conversations: [Conversation] | [Conversation, Conversation];
-	id: string;
-	name: string;
-};
-
-export type DefaultProject = Project & {
-	id: "default";
-	name: "Default";
-};
-
-export type Session = {
-	projects: [DefaultProject, ...Project[]];
-	activeProjectId: string;
-};
-
 interface TokenizerConfig {
 	chat_template?: string | Array<{ name: string; template: string }>;
 	model_max_length?: number;
@@ -74,6 +56,7 @@ export type CustomModel = {
 	accessToken?: string;
 	/** @default "text-generation" */
 	pipeline_tag?: PipelineTag;
+	supports_response_schema?: boolean;
 };
 
 export type Config = {
@@ -207,3 +190,41 @@ export const pipelineTagLabel: Record<PipelineTag, string> = {
 export type MaybeGetter<T> = T | (() => T);
 
 export type ValueOf<T> = T[keyof T];
+
+export interface GenerationStatistics {
+	latency: number;
+	tokens: number;
+}
+
+export type ModelsJson = {
+	[modelId: string]: ModelJsonSpec;
+};
+
+export interface ModelJsonSpec {
+	max_tokens?: number;
+	max_input_tokens?: number;
+	max_output_tokens?: number;
+	input_cost_per_token?: number;
+	output_cost_per_token?: number;
+	output_cost_per_reasoning_token?: number;
+	litellm_provider: string;
+	mode?: string;
+	supports_function_calling?: boolean;
+	supports_parallel_function_calling?: boolean;
+	supports_vision?: boolean;
+	supports_audio_input?: boolean;
+	supports_audio_output?: boolean;
+	supports_prompt_caching?: boolean;
+	supports_response_schema?: boolean;
+	supports_system_messages?: boolean;
+	supports_reasoning?: boolean;
+	supports_web_search?: boolean;
+	search_context_cost_per_query?: SearchContextCostPerQuery;
+	deprecation_date?: string;
+}
+
+export interface SearchContextCostPerQuery {
+	search_context_size_low: number;
+	search_context_size_medium: number;
+	search_context_size_high: number;
+}

src/lib/utils/date.ts

@@ -0,0 +1,52 @@
+/**
+ * Formats a Date object into a human-readable string.
+ * @param date The Date object to format.
+ * @param locale The locale to use for formatting (e.g., 'en-US', 'fr-FR'). Defaults to the system's locale.
+ * @param options Optional formatting options for toLocaleDateString.
+ * @returns The formatted date string.
+ */
+export function formatDate(date: Date, locale?: string, options?: Intl.DateTimeFormatOptions): string {
+	// Provide a default locale and options if not provided
+	const effectiveLocale = locale || undefined; // Using undefined will use the system's locale
+	const effectiveOptions: Intl.DateTimeFormatOptions = options || {
+		year: "numeric",
+		month: "long",
+		day: "numeric",
+	};
+
+	try {
+		return date.toLocaleDateString(effectiveLocale, effectiveOptions);
+	} catch (error) {
+		console.error("Error formatting date:", error);
+		// Fallback to a simple format if toLocaleDateString fails
+		return `${date.getFullYear()}-${(date.getMonth() + 1).toString().padStart(2, "0")}-${date.getDate().toString().padStart(2, "0")}`;
+	}
+}
+/**
+ * Formats a Date object into a human-readable string including both date and time.
+ * @param date The Date object to format.
+ * @param locale The locale to use for formatting (e.g., 'en-US', 'fr-FR'). Defaults to the system's locale.
+ * @param options Optional formatting options for toLocaleString.
+ * @returns The formatted date and time string.
+ */
+export function formatDateTime(date: Date, locale?: string, options?: Intl.DateTimeFormatOptions): string {
+	// Provide a default locale and options if not provided
+	const effectiveLocale = locale || undefined; // Using undefined will use the system's locale
+	const effectiveOptions: Intl.DateTimeFormatOptions = options || {
+		year: "numeric",
+		month: "long",
+		day: "numeric",
+		hour: "numeric",
+		minute: "numeric",
+		second: "numeric",
+		// timeZoneName: "short", // Optionally include the time zone name
+	};
+
+	try {
+		return date.toLocaleString(effectiveLocale, effectiveOptions);
+	} catch (error) {
+		console.error("Error formatting date and time:", error);
+		// Fallback to a simple format if toLocaleString fails
+		return `${date.getFullYear()}-${(date.getMonth() + 1).toString().padStart(2, "0")}-${date.getDate().toString().padStart(2, "0")} ${date.getHours().toString().padStart(2, "0")}:${date.getMinutes().toString().padStart(2, "0")}:${date.getSeconds().toString().padStart(2, "0")}`;
+	}
+}

src/lib/utils/file.ts

@@ -13,3 +13,90 @@ export function fileToDataURL(file: File): Promise<string> {
 		reader.readAsDataURL(file);
 	});
 }
+
+interface CompressBase64Options {
+	base64: string;
+	maxSizeKB: number;
+	outputFormat?: string; // 'image/jpeg' | 'image/webp'
+	minQuality?: number; // default: 0.1
+	maxQuality?: number; // default: 1.0
+	maxIterations?: number; // default: 10
+}
+
+export async function compressBase64Image(options: CompressBase64Options): Promise<string> {
+	const {
+		base64,
+		maxSizeKB,
+		outputFormat = "image/jpeg",
+		minQuality = 0.1,
+		maxQuality = 1.0,
+		maxIterations = 10,
+	} = options;
+
+	const img = await new Promise<HTMLImageElement>((resolve, reject) => {
+		const image = new Image();
+		image.crossOrigin = "Anonymous";
+		image.onload = () => resolve(image);
+		image.onerror = reject;
+		image.src = base64;
+	});
+
+	const canvas = document.createElement("canvas");
+	canvas.width = img.width;
+	canvas.height = img.height;
+	const ctx = canvas.getContext("2d");
+	if (!ctx) throw new Error("Could not get canvas context");
+	ctx.drawImage(img, 0, 0);
+
+	let minQ = minQuality;
+	let maxQ = maxQuality;
+	let bestBase64 = "";
+
+	for (let i = 0; i < maxIterations; i++) {
+		const q = (minQ + maxQ) / 2;
+		const b64 = canvas.toDataURL(outputFormat, q);
+		const size = getBase64ImageSize(b64).kilobytes;
+
+		if (size > maxSizeKB) {
+			maxQ = q;
+		} else {
+			minQ = q;
+			bestBase64 = b64;
+		}
+	}
+
+	// If no quality produced a small enough image, return the lowest quality result
+	if (!bestBase64) {
+		bestBase64 = canvas.toDataURL(outputFormat, minQuality);
+	}
+
+	return bestBase64;
+}
+
+/**
+ * Get the size of a Base64 image string in bytes and kilobytes.
+ * @param base64 - The Base64 image string (with or without data URL prefix).
+ * @returns { bytes: number, kilobytes: number, megabytes: number }
+ */
+export function getBase64ImageSize(base64: string): { bytes: number; kilobytes: number; megabytes: number } {
+	// Remove data URL prefix if present
+	const cleanedBase64 = base64.split(",")[1] || base64;
+
+	// Calculate padding
+	const padding = (cleanedBase64.match(/=+$/) || [""])[0].length;
+
+	// Calculate size in bytes
+	const bytes = (cleanedBase64.length * 3) / 4 - padding;
+
+	// Convert to kilobytes
+	const kilobytes = bytes / 1024;
+
+	// Convert to megabytes (optional)
+	const megabytes = kilobytes / 1024;
+
+	return {
+		bytes: Math.round(bytes),
+		kilobytes: parseFloat(kilobytes.toFixed(2)),
+		megabytes: parseFloat(megabytes.toFixed(2)),
+	};
+}

src/lib/utils/{object.ts → object.svelte.ts}

@@ -1,8 +1,8 @@
 import type { ValueOf } from "$lib/types.js";
 
 // typed Object.keys
-export function keys<T extends object>(o: T): (keyof T)[] {
-	return Object.keys(o) as (keyof T)[];
+export function keys<T extends object>(o: T) {
+	return Object.keys(o) as Array<`${keyof T & (string | number | boolean | null | undefined)}`>;
 }
 
 // typed Object.entries
@@ -33,6 +33,11 @@ export function pick<T extends Record<string, unknown>, K extends keyof T>(obj:
 	return result;
 }
 
+// $state.snapshot but types are preserved
+export function snapshot<T>(s: T): T {
+	return $state.snapshot(s) as T;
+}
+
 /**
  * Try and get a value from an object, or return undefined.
  * The key does not need to match the type of the object, so the
@@ -41,3 +46,41 @@ export function pick<T extends Record<string, unknown>, K extends keyof T>(obj:
 export function tryGet<T extends Record<string, unknown>>(obj: T, key: string): T[keyof T] | undefined {
 	return obj[key as keyof T];
 }
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+type DeepMergeable = { [key: string]: any };
+
+function isPlainObject(value: unknown): value is Record<string, unknown> {
+	return value !== null && typeof value === "object" && Object.getPrototypeOf(value) === Object.prototype;
+}
+
+export function deepMerge<T extends DeepMergeable, U extends DeepMergeable>(target: T, source: U): T & U {
+	const result: DeepMergeable = { ...target };
+
+	for (const key in source) {
+		if (Object.prototype.hasOwnProperty.call(source, key)) {
+			const sourceValue = source[key];
+			const targetValue = result[key];
+
+			// Handle arrays - merge them
+			if (Array.isArray(sourceValue)) {
+				result[key] = Array.isArray(targetValue) ? [...targetValue, ...sourceValue] : [...sourceValue];
+				continue;
+			}
+
+			// Handle plain objects (not null, not arrays, not class instances)
+			if (isPlainObject(sourceValue)) {
+				result[key] =
+					Object.prototype.hasOwnProperty.call(result, key) && isPlainObject(result[key])
+						? deepMerge(result[key], sourceValue)
+						: deepMerge({}, sourceValue);
+				continue;
+			}
+
+			// Handle primitives and everything else
+			result[key] = sourceValue;
+		}
+	}
+
+	return result as T & U;
+}

src/lib/utils/poll.ts

@@ -0,0 +1,19 @@
+/**
+ * Polls a predicate function until it returns a truthy value or times out.
+ * @param predicate - Function to evaluate. Should return a value or a Promise.
+ * @param options - Polling options.
+ * @returns The truthy value returned by predicate, or undefined if timed out.
+ */
+export async function poll<T>(
+	predicate: () => T | Promise<T>,
+	options: { interval?: number; maxAttempts?: number } = {}
+): Promise<T | undefined> {
+	const { interval = 10, maxAttempts = 200 } = options;
+
+	for (let attempt = 0; attempt < maxAttempts; attempt++) {
+		const result = await predicate();
+		if (result) return result;
+		await new Promise(resolve => setTimeout(resolve, interval));
+	}
+	return undefined;
+}

src/lib/utils/queue.ts

@@ -0,0 +1,43 @@
+type AsyncQueueFunction<T> = () => Promise<T>;
+
+interface QueueItem<T> {
+	asyncFunction: AsyncQueueFunction<T>;
+	resolve: (value: T | PromiseLike<T>) => void;
+	reject: (reason?: unknown) => void;
+}
+
+export class AsyncQueue<T> {
+	queue: QueueItem<T>[] = [];
+	private isProcessing = false;
+
+	public add(asyncFunction: AsyncQueueFunction<T>): Promise<T> {
+		return new Promise<T>((resolve, reject) => {
+			this.queue.push({ asyncFunction, resolve, reject });
+			this.processQueue();
+		});
+	}
+
+	private async processQueue(): Promise<void> {
+		if (this.isProcessing) {
+			return;
+		}
+
+		this.isProcessing = true;
+
+		while (this.queue.length > 0) {
+			const queueItem = this.queue.shift()!;
+
+			try {
+				const { asyncFunction, resolve } = queueItem;
+				const result = await asyncFunction();
+				resolve(result);
+			} catch (error) {
+				console.error("Error processing queue item:", error);
+				const { reject } = queueItem;
+				reject(error);
+			}
+		}
+
+		this.isProcessing = false;
+	}
+}

src/lib/utils/template.ts

@@ -0,0 +1,19 @@
+export function onchange(cb: (value: string, e: Event) => void): { onchange: (e: Event) => void } {
+	return {
+		onchange: (e: Event) => {
+			const el = e.target as HTMLInputElement;
+			if (!el) return;
+			cb(el.value, e);
+		},
+	};
+}
+
+export function oninput(cb: (value: string, e: Event) => void): { oninput: (e: Event) => void } {
+	return {
+		oninput: (e: Event) => {
+			const el = e.target as HTMLInputElement;
+			if (!el) return;
+			cb(el.value, e);
+		},
+	};
+}

src/routes/+layout.svelte

@@ -1,20 +1,18 @@
 <script lang="ts">
-	import CustomModelConfig from "$lib/components/inference-playground/custom-model-config.svelte";
 	import DebugMenu from "$lib/components/debug-menu.svelte";
+	import CustomModelConfig from "$lib/components/inference-playground/custom-model-config.svelte";
 	import Prompts from "$lib/components/prompts.svelte";
 	import QuotaModal from "$lib/components/quota-modal.svelte";
 	import ShareModal from "$lib/components/share-modal.svelte";
+	import { conversations } from "$lib/state/conversations.svelte";
 	import "../app.css";
-	import { session } from "$lib/state/session.svelte";
-	import { generationStats } from "$lib/state/generation-stats.svelte";
 
 	interface Props {
 		children?: import("svelte").Snippet;
 	}
 
 	let { children }: Props = $props();
-	session.init();
-	generationStats.init();
+	conversations.init();
 </script>
 
 {@render children?.()}

src/routes/+page.ts

@@ -1,8 +1,8 @@
-import type { Model } from "$lib/types.js";
 import type { PageLoad } from "./$types.js";
+import type { ApiModelsResponse } from "./api/models/+server.js";
 
 export const load: PageLoad = async ({ fetch }) => {
 	const res = await fetch("/api/models");
-	const models: Model[] = await res.json();
-	return { models };
+	const json: ApiModelsResponse = await res.json();
+	return json;
 };

src/routes/api/[...remult]/+server.ts

@@ -0,0 +1,3 @@
+import { api } from "$lib/server/api.js";
+
+export const { GET, POST, PUT, DELETE } = api;

src/routes/api/models/+server.ts

@@ -88,6 +88,14 @@ function buildApiUrl(params: ApiQueryParams): string {
 	return url.toString();
 }
 
+export type ApiModelsResponse = {
+	models: Model[];
+};
+
+function createResponse(data: ApiModelsResponse): Response {
+	return json(data);
+}
+
 export const GET: RequestHandler = async ({ fetch }) => {
 	const timestamp = Date.now();
 
@@ -98,7 +106,7 @@ export const GET: RequestHandler = async ({ fetch }) => {
 	// Use cache if it's still valid and has data
 	if (elapsed < cacheRefreshTime && cache.data?.length) {
 		console.log(`Using ${cache.status} cache (${Math.floor(elapsed / 1000 / 60)} min old)`);
-		return json(cache.data);
+		return createResponse({ models: cache.data });
 	}
 
 	try {
@@ -168,7 +176,7 @@ export const GET: RequestHandler = async ({ fetch }) => {
 			cache.status = CacheStatus.ERROR;
 			cache.timestamp = timestamp; // Update timestamp to avoid rapid retry loops
 			cache.failedApiCalls = newFailedApiCalls;
-			return json(cache.data);
+			return createResponse({ models: cache.data });
 		}
 
 		// For API calls we didn't need to make, use cached models
@@ -182,7 +190,9 @@ export const GET: RequestHandler = async ({ fetch }) => {
 				.map(model => model as Model);
 		}
 
-		const models: Model[] = [...textGenModels, ...imgText2TextModels];
+		const models: Model[] = [...textGenModels, ...imgText2TextModels].filter(
+			m => m.inferenceProviderMapping.length > 0
+		);
 		models.sort((a, b) => a.id.toLowerCase().localeCompare(b.id.toLowerCase()));
 
 		// Determine cache status based on failures
@@ -202,7 +212,7 @@ export const GET: RequestHandler = async ({ fetch }) => {
 				`API failures: text=${newFailedApiCalls.textGeneration}, img=${newFailedApiCalls.imageTextToText}`
 		);
 
-		return json(models);
+		return createResponse({ models });
 	} catch (error) {
 		console.error("Error fetching models:", error);
 
@@ -214,7 +224,7 @@ export const GET: RequestHandler = async ({ fetch }) => {
 				textGeneration: true,
 				imageTextToText: true,
 			};
-			return json(cache.data);
+			return createResponse({ models: cache.data });
 		}
 
 		// No cache available, return empty array
@@ -224,6 +234,6 @@ export const GET: RequestHandler = async ({ fetch }) => {
 			textGeneration: true,
 			imageTextToText: true,
 		};
-		return json([]);
+		return createResponse({ models: [] });
 	}
 };

tsconfig.json

@@ -16,7 +16,8 @@
 			}
 		],
 		"strictNullChecks": true,
-		"moduleResolution": "bundler"
+		"moduleResolution": "bundler",
+		"experimentalDecorators": true
 	},
 	"exclude": ["vite.config.ts"]
 	// Path aliases are handled by https://kit.svelte.dev/docs/configuration#alias