From ffaa1b17c5551729c0a21c786c4e6b7c55184af6 Mon Sep 17 00:00:00 2001 From: "Timothy J. Baek" Date: Thu, 14 Dec 2023 14:24:56 -0800 Subject: [PATCH] feat: show verbose info --- package-lock.json | 42 ++++++++++++++++------ package.json | 2 +- src/lib/components/chat/Messages.svelte | 46 +++++++++++++++++++++++++ src/routes/(app)/+page.svelte | 3 ++ src/routes/(app)/c/[id]/+page.svelte | 3 ++ src/routes/+layout.svelte | 2 +- 6 files changed, 85 insertions(+), 13 deletions(-) diff --git a/package-lock.json b/package-lock.json index 5201d616..bcfc7253 100644 --- a/package-lock.json +++ b/package-lock.json @@ -11,13 +11,13 @@ "@sveltejs/adapter-node": "^1.3.1", "file-saver": "^2.0.5", "highlight.js": "^11.9.0", - "hint.css": "^3.0.0", "http-server": "^14.1.1", "idb": "^7.1.1", "js-sha256": "^0.10.1", "katex": "^0.16.9", "marked": "^9.1.0", "svelte-french-toast": "^1.2.0", + "tippy.js": "^6.3.7", "uuid": "^9.0.1" }, "devDependencies": { @@ -585,6 +585,15 @@ "resolved": "https://registry.npmjs.org/@polka/url/-/url-1.0.0-next.23.tgz", "integrity": "sha512-C16M+IYz0rgRhWZdCmK+h58JMv8vijAA61gmz2rspCSwKwzBebpdcsiUmwrtJRdphuY30i6BSLEOP8ppbNLyLg==" }, + "node_modules/@popperjs/core": { + "version": "2.11.8", + "resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.11.8.tgz", + "integrity": "sha512-P1st0aksCrn9sGZhp8GMYwBnQsbvAWsZAX44oXNNvLHGqAOcoVxmjZiohstwQ7SqKnbR47akdNi+uleWD8+g6A==", + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/popperjs" + } + }, "node_modules/@rollup/plugin-commonjs": { "version": "25.0.5", "resolved": "https://registry.npmjs.org/@rollup/plugin-commonjs/-/plugin-commonjs-25.0.5.tgz", @@ -2301,11 +2310,6 @@ "node": ">=12.0.0" } }, - "node_modules/hint.css": { - "version": "3.0.0", - "resolved": "https://registry.npmjs.org/hint.css/-/hint.css-3.0.0.tgz", - "integrity": "sha512-UoJ+yLO2kEcfsm/XMU1suAIR0sxCq4HO22pw4okJQo5TQDlA2BrJ57Eaxh4eT+9PDInIDTRm9TVzzbHHWEqASQ==" - }, "node_modules/html-encoding-sniffer": { "version": "3.0.0", "resolved": "https://registry.npmjs.org/html-encoding-sniffer/-/html-encoding-sniffer-3.0.0.tgz", @@ -4000,6 +4004,14 @@ "globrex": "^0.1.2" } }, + "node_modules/tippy.js": { + "version": "6.3.7", + "resolved": "https://registry.npmjs.org/tippy.js/-/tippy.js-6.3.7.tgz", + "integrity": "sha512-E1d3oP2emgJ9dRQZdf3Kkn0qJgI6ZLpyS5z6ZkY1DF3kaQaBsGZsndEpHwx+eC+tYM41HaSNvNtLx8tU57FzTQ==", + "dependencies": { + "@popperjs/core": "^2.9.0" + } + }, "node_modules/to-regex-range": { "version": "5.0.1", "resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-5.0.1.tgz", @@ -4576,6 +4588,11 @@ "resolved": "https://registry.npmjs.org/@polka/url/-/url-1.0.0-next.23.tgz", "integrity": "sha512-C16M+IYz0rgRhWZdCmK+h58JMv8vijAA61gmz2rspCSwKwzBebpdcsiUmwrtJRdphuY30i6BSLEOP8ppbNLyLg==" }, + "@popperjs/core": { + "version": "2.11.8", + "resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.11.8.tgz", + "integrity": "sha512-P1st0aksCrn9sGZhp8GMYwBnQsbvAWsZAX44oXNNvLHGqAOcoVxmjZiohstwQ7SqKnbR47akdNi+uleWD8+g6A==" + }, "@rollup/plugin-commonjs": { "version": "25.0.5", "resolved": "https://registry.npmjs.org/@rollup/plugin-commonjs/-/plugin-commonjs-25.0.5.tgz", @@ -5752,11 +5769,6 @@ "resolved": "https://registry.npmjs.org/highlight.js/-/highlight.js-11.9.0.tgz", "integrity": "sha512-fJ7cW7fQGCYAkgv4CPfwFHrfd/cLS4Hau96JuJ+ZTOWhjnhoeN1ub1tFmALm/+lW5z4WCAuAV9bm05AP0mS6Gw==" }, - "hint.css": { - "version": "3.0.0", - "resolved": "https://registry.npmjs.org/hint.css/-/hint.css-3.0.0.tgz", - "integrity": "sha512-UoJ+yLO2kEcfsm/XMU1suAIR0sxCq4HO22pw4okJQo5TQDlA2BrJ57Eaxh4eT+9PDInIDTRm9TVzzbHHWEqASQ==" - }, "html-encoding-sniffer": { "version": "3.0.0", "resolved": "https://registry.npmjs.org/html-encoding-sniffer/-/html-encoding-sniffer-3.0.0.tgz", @@ -6896,6 +6908,14 @@ "globrex": "^0.1.2" } }, + "tippy.js": { + "version": "6.3.7", + "resolved": "https://registry.npmjs.org/tippy.js/-/tippy.js-6.3.7.tgz", + "integrity": "sha512-E1d3oP2emgJ9dRQZdf3Kkn0qJgI6ZLpyS5z6ZkY1DF3kaQaBsGZsndEpHwx+eC+tYM41HaSNvNtLx8tU57FzTQ==", + "requires": { + "@popperjs/core": "^2.9.0" + } + }, "to-regex-range": { "version": "5.0.1", "resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-5.0.1.tgz", diff --git a/package.json b/package.json index 2764a8ba..f90b99ad 100644 --- a/package.json +++ b/package.json @@ -42,13 +42,13 @@ "@sveltejs/adapter-node": "^1.3.1", "file-saver": "^2.0.5", "highlight.js": "^11.9.0", - "hint.css": "^3.0.0", "http-server": "^14.1.1", "idb": "^7.1.1", "js-sha256": "^0.10.1", "katex": "^0.16.9", "marked": "^9.1.0", "svelte-french-toast": "^1.2.0", + "tippy.js": "^6.3.7", "uuid": "^9.0.1" } } diff --git a/src/lib/components/chat/Messages.svelte b/src/lib/components/chat/Messages.svelte index b08f1093..e25b0cda 100644 --- a/src/lib/components/chat/Messages.svelte +++ b/src/lib/components/chat/Messages.svelte @@ -2,6 +2,7 @@ import { marked } from 'marked'; import { v4 as uuidv4 } from 'uuid'; + import tippy from 'tippy.js'; import hljs from 'highlight.js'; import 'highlight.js/styles/github-dark.min.css'; import auto_render from 'katex/dist/contrib/auto-render.mjs'; @@ -29,6 +30,24 @@ renderLatex(); hljs.highlightAll(); createCopyCodeBlockButton(); + + for (const message of messages) { + if (message.info) { + tippy(`#info-${message.id}`, { + content: `total_duration: ${ + message.info.total_duration ?? 'N/A' + }
+ load_duration: ${message.info.load_duration ?? 'N/A'}
+ sample_count: ${message.info.sample_count ?? 'N/A'}
+ sample_duration: ${message.info.sample_duration ?? 'N/A'}
+ prompt_eval_count: ${message.info.prompt_eval_count ?? 'N/A'}
+ prompt_eval_duration: ${message.info.prompt_eval_duration ?? 'N/A'}
+ eval_count: ${message.info.eval_count ?? 'N/A'}
+ eval_duration: ${message.info.eval_duration ?? 'N/A'}`, + allowHTML: true + }); + } + } })(); } @@ -861,6 +880,33 @@ + {#if message.info} + + {/if} + {#if messageIdx + 1 === messages.length}