Scott.Idem/OSIT-AE-App-Svelte
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Now with basic AI summary for Journal Entries

Browse Source
This commit is contained in:
Scott Idem
2025-09-11 18:41:16 -04:00
parent bbf9411213
commit b78cb8eac2
4 changed files with 280 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

254
src/routes/journals/ae_comp__journal_entry_obj_id_view.svelte
View File

@@ -4,15 +4,16 @@ import { goto } from '$app/navigation';
// import { tick } from 'svelte';
import { marked } from 'marked';
import { Modal } from 'flowbite-svelte';
import {
ArrowDown01, ArrowDown10, ArrowDownUp,
BookHeart, BriefcaseBusiness,
BookHeart, Bot, BotMessageSquare, BriefcaseBusiness,
CalendarClock, CalendarOff, Clock, CodeXml, Copy,
Eye, EyeOff,
Flag, FlagOff, FileDown, FileX, Fingerprint,
Globe, Group,
Hash, History,
LockKeyhole, LockKeyholeOpen,
Loader, LockKeyhole, LockKeyholeOpen,
MessageSquareWarning, Menu, Minus,
NotebookPen, NotebookText, NotepadTextDashed,
Pencil, PenLine, Plus,
@@ -26,6 +27,26 @@ import {
} from '@lucide/svelte';
// Import OpenAI, but use it with local LLM server (ollama)
import OpenAI from "openai";
// import { Configuration, OpenAIApi } from 'openai';
let llm_api_token = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpZCI6IjVhYjI2MzdlLThiMjktNGM2Zi05MzVhLWFkYjU1MDkwMGU5MCJ9.zc2u8vVH1yNt_mDHF8m9f_ONHfRXHjjC9gb-Y9jYwI0';
// api_model = 'DgrZone DeepSeek (8b quick)';
let llm_api_model = 'dgrzone-deepseek-8b-quick';
let llm_api_base_url = 'http://localhost:3000/api';
// const configuration = new Configuration({
// apiKey: llm_api_token,
// });
// const openai = new OpenAI({
// apiKey: llm_api_token,
// baseURL: llm_api_base_url,
// });
// import E_app_codemirror from '$lib/e_app_codemirror.svelte';
// import E_app_codemirror_v4 from '$lib/e_app_codemirror_v4.svelte';
import E_app_codemirror_v5 from '$lib/e_app_codemirror_v5.svelte';
@@ -1668,6 +1689,98 @@ $effect(() => {
</div>
{/if}
<!-- Button to call OpenAI API endpoint to summarize the content. -->
<div
class="
flex flex-row-reverse flex-wrap gap-1 items-center justify-center
"
>
<button
type="button"
onclick={async () => {
const ai_client = new OpenAI({
apiKey: llm_api_token,
baseURL: llm_api_base_url,
dangerouslyAllowBrowser: true,
});
// let resp__models = ai_client.models.list();
// console.log('AI API Response (models)', resp__models);
let msg_role_system_content = $journals_loc?.entry?.ai__system_prompt || 'You are a helpful assistant that helps people find information.';
// let msg_role_user_content = 'Why is the sky blue?';
let msg_role_user_content = tmp_entry_obj?.content;
try {
ae_promises = ai_client.chat.completions.create(
{
model: llm_api_model,
messages: [
{ role: 'system', content: msg_role_system_content },
{ role: "user", content: msg_role_user_content }
],
// max_tokens: 512,
// temperature: 0.7,
// stream: true,
}
)
.then ((resp__chat) => {
console.log('AI API Response (chat)', resp__chat);
console.log('AI API Response (chat)', resp__chat);
console.log('resp msg 0 = ', resp__chat?.choices?.[0]?.message?.content);
$journals_sess.entry.ai_summary = resp__chat?.choices?.[0]?.message?.content || 'No summary available';
$journals_sess.entry.show__ai_summary = true;
return;
});
} catch (err) {
console.error('Error from chat completion:', err);
alert('Error from chat completion: ' + (err?.message || err));
}
}}
class="
btn btn-sm
preset-outlined-warning-200-800
"
title="Generate AI summary of this journal entry"
>
{#await ae_promises}
<Loader class="inline-block mr-1 animate-spin" />
<span class="text-sm">Summarizing...</span>
{:then}
<BotMessageSquare class="inline-block mr-1" />
<span class="text-sm">Summarize</span>
{:catch error}
<span class="text-sm">Error</span>
{/await}
</button>
{#if !$journals_sess?.entry?.show__ai_summary && $journals_sess?.entry?.ai_summary}
<button
type="button"
onclick={() => {
$journals_sess.entry.show__ai_summary = true;
}}
class="
btn btn-sm
preset-outlined-warning-200-800
"
title="Show AI summary of this journal entry"
>
<Bot class="inline-block mr-1" />
<span class="text-sm">
Show</span>
</button>
{/if}
</div>
<div class="divider my-2"></div>
<!-- Core Object Properties -->
@@ -1971,6 +2084,92 @@ tabindex={$ae_loc.edit_mode ? 0 : -1} -->
class:bg-yellow-50={$journals_loc.entry.edit_kv[$lq__journal_entry_obj?.journal_entry_id] == 'current'}
class:dark:bg-yellow-950={$journals_loc.entry.edit_kv[$lq__journal_entry_obj?.journal_entry_id] == 'current'}
>
{#if $journals_sess?.entry?.ai_summary}
<button
type="button"
onclick={() => {
$journals_sess.entry.show__ai_summary = !$journals_sess.entry.show__ai_summary;
}}
class="btn btn-sm preset-tonal-primary hover:preset-filled-primary-500 transition-all absolute top-2 right-2 z-10"
title="Toggle AI Summary"
>
<Bot class="inline-block mr-1" />
<span class="hidden sm:inline">AI Summary</span>
{#if $journals_sess?.entry?.ai_summary}
<span class="badge badge-sm badge-secondary ml-1">
{$journals_sess?.entry?.ai_summary.split(' ').length} words
</span>
{/if}
</button>
{:else}
<button
type="button"
onclick={() => {
const ai_client = new OpenAI({
apiKey: llm_api_token,
baseURL: llm_api_base_url,
dangerouslyAllowBrowser: true,
});
// let resp__models = ai_client.models.list();
// console.log('AI API Response (models)', resp__models);
let msg_role_system_content = $journals_loc?.entry?.ai__system_prompt || 'You are a helpful assistant that helps people find information.';
// let msg_role_user_content = 'Why is the sky blue?';
let msg_role_user_content = tmp_entry_obj?.content;
try {
ae_promises = ai_client.chat.completions.create(
{
model: llm_api_model,
messages: [
{ role: 'system', content: msg_role_system_content },
{ role: "user", content: msg_role_user_content }
],
// max_tokens: 512,
// temperature: 0.7,
// stream: true,
}
)
.then ((resp__chat) => {
console.log('AI API Response (chat)', resp__chat);
console.log('AI API Response (chat)', resp__chat);
console.log('resp msg 0 = ', resp__chat?.choices?.[0]?.message?.content);
$journals_sess.entry.ai_summary = resp__chat?.choices?.[0]?.message?.content || 'No summary available';
$journals_sess.entry.show__ai_summary = true;
return;
});
} catch (err) {
console.error('Error from chat completion:', err);
alert('Error from chat completion: ' + (err?.message || err));
}
}}
class="btn btn-sm preset-tonal-primary hover:preset-filled-primary-500 transition-all absolute top-2 right-2 z-10"
title="Generate AI summary of this journal entry"
>
{#await ae_promises}
<Loader class="inline-block mr-1 animate-spin" />
<span class="text-sm">Summarizing...</span>
{:then}
<BotMessageSquare class="inline-block mr-1" />
<span class="text-sm">Summarize</span>
{:catch error}
<span class="text-sm">Error</span>
{/await}
</button>
{/if}
{#if (!$journals_loc.entry.edit_kv[$lq__journal_entry_obj?.journal_entry_id])}
{#if $lq__journal_obj?.cfg_json?.pref_viewer == 'codemirror'}
@@ -2473,9 +2672,58 @@ zzzz
{/if}
</span>
</section>
{#if $journals_sess?.entry?.show__ai_summary && $journals_sess?.entry?.ai_summary}
<Modal
title="AI Summary"
bind:open={$journals_sess.entry.show__ai_summary}
autoclose={false}
placement="top-center"
size="md"
class="top-center bg-white dark:bg-gray-800 text-gray-800 dark:text-gray-200 rounded-lg border-gray-200 dark:border-gray-700 divide-gray-200 dark:divide-gray-700 shadow-md relative mx-auto w-full divide-y"
>
<div class="modal-box flex flex-col gap-2 items-center justify-center">
<button
type="button"
onclick={() => {
$journals_sess.entry.show__ai_summary = !$journals_sess.entry.show__ai_summary;
}}
class="btn btn-sm preset-tonal-primary hover:preset-filled-primary-500 transition *:hover:inline"
title="Toggle AI Summary"
>
<Bot class="inline-block mr-1" />
<span class="hidden sm:inline">AI Summary</span>
{#if $journals_sess?.entry?.ai_summary}
<span class="badge badge-sm badge-secondary ml-1">
{$journals_sess?.entry?.ai_summary.split(' ').length} words
</span>
{/if}
</button>
<!-- <pre class="text-wrap">
{@html $journals_sess.entry.ai_summary}
</pre> -->
<E_app_codemirror_v5
editable={false}
readonly={true}
content={$journals_sess.entry.ai_summary ?? ''}
bind:new_content={$journals_sess.entry.ai_summary}
bind:theme_mode={$ae_loc.theme_mode}
placeholder="Write using Markdown here..."
class="
p-2
preset-outlined-success-400-600
hover:preset-tonal-surface
shadow-lg rounded-lg
"
/>
</div>
</Modal>
{/if}
{:else}
<section class="ae_meta flex flex-row flex-wrap gap-1 items-center justify-center w-full">
<span class="text-lg text-orange-900 dark:text-orange-100">