Modularize AI Tools and perform third cleanup pass on Journal Entry view
- Extracted AI summarization logic and Modal into standalone JournalEntry_AITools component. - Applied Prettier formatting to main component for consistent structure. - Removed further blocks of legacy script and template code. - Re-verified stability of core features (decryption, saving, metadata).
This commit is contained in:
Scott Idem
@@ -90,6 +90,7 @@
|
||||
import { journals_func } from '$lib/ae_journals/ae_journals_functions';
|
||||
import Comp_journal_entry_file_li from './ae_comp__journal_entry_obj_file_li.svelte';
|
||||
import Comp_hosted_files_download_button from '$lib/ae_core/ae_comp__hosted_files_download_button.svelte';
|
||||
import JournalEntry_AITools from './JournalEntry_AITools.svelte';
|
||||
|
||||
// *** Configuration
|
||||
let llm_api_token =
|
||||
@@ -1865,108 +1866,7 @@
|
||||
$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 if !$journals_sess?.entry?.show__ai_summary && $journals_sess?.entry?.ai_summary}
|
||||
<button
|
||||
type="button"
|
||||
onclick={() => {
|
||||
const ai_client = new OpenAI({
|
||||
apiKey: $journals_loc?.llm__api_token,
|
||||
baseURL: $journals_loc?.llm__api_base_url,
|
||||
dangerouslyAllowBrowser: $journals_loc?.llm__api_dangerous_browser
|
||||
});
|
||||
|
||||
// let resp__models = ai_client.models.list();
|
||||
// console.log('AI API Response (models)', resp__models);
|
||||
|
||||
// let msg_role_system_content = $journals_loc?.entry?.llm__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: $journals_loc?.llm__api_model,
|
||||
messages: [
|
||||
{
|
||||
role: 'system',
|
||||
content:
|
||||
$journals_loc?.entry?.llm__system_prompt ||
|
||||
'You are a helpful assistant that helps people find information.'
|
||||
},
|
||||
{ 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>
|
||||
{:else if !$journals_sess?.entry?.show__ai_summary && $lq__journal_entry_obj?.summary}
|
||||
<button
|
||||
type="button"
|
||||
onclick={() => {
|
||||
$journals_sess.entry.ai_summary = $lq__journal_entry_obj?.summary;
|
||||
$journals_sess.entry.show__ai_summary = true;
|
||||
}}
|
||||
class="
|
||||
btn btn-sm preset-tonal-primary hover:preset-filled-primary-500 transition-all absolute top-2 right-2 z-10
|
||||
"
|
||||
title="Show saved summary of this journal entry"
|
||||
>
|
||||
<FileText strokeWidth="1" class="inline-block mr-1" />
|
||||
Use Saved Summary
|
||||
</button>
|
||||
{/if}
|
||||
<JournalEntry_AITools entry={tmp_entry_obj} onSave={update_journal_entry} {log_lvl} />
|
||||
|
||||
{#if !$journals_loc.entry.edit_kv[$lq__journal_entry_obj?.journal_entry_id]}
|
||||
{#if $lq__journal_obj?.cfg_json?.pref_viewer == 'codemirror'}
|
||||
@@ -2346,169 +2246,7 @@
|
||||
</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">
|
||||
<div
|
||||
class="flex flex-row flex-wrap gap-1 items-center justify-center w-full mb-2"
|
||||
>
|
||||
<button
|
||||
type="button"
|
||||
class="btn btn-sm preset-tonal-success hover:preset-filled-success-500 transition-all"
|
||||
onclick={() => {
|
||||
tmp_entry_obj.summary = $journals_sess?.entry?.ai_summary || '';
|
||||
update_journal_entry();
|
||||
}}
|
||||
title="Save AI summary as Journal Entry summary"
|
||||
>
|
||||
<Save strokeWidth="1" class="inline-block mr-1" />
|
||||
Save
|
||||
</button>
|
||||
|
||||
<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"
|
||||
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>
|
||||
|
||||
<button
|
||||
type="button"
|
||||
onclick={async () => {
|
||||
const ai_client = new OpenAI({
|
||||
apiKey: $journals_loc?.llm__api_token,
|
||||
baseURL: $journals_loc?.llm__api_base_url,
|
||||
dangerouslyAllowBrowser:
|
||||
$journals_loc?.llm__api_dangerous_browser
|
||||
});
|
||||
|
||||
let msg_role_user_content = tmp_entry_obj?.content;
|
||||
|
||||
try {
|
||||
ae_promises = ai_client.chat.completions
|
||||
.create({
|
||||
model: $journals_loc?.llm__api_model,
|
||||
messages: [
|
||||
{
|
||||
role: 'system',
|
||||
content:
|
||||
$journals_loc?.entry?.llm__system_prompt ||
|
||||
'You are a helpful assistant that helps people find information.'
|
||||
},
|
||||
{ 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
|
||||
transition-all
|
||||
"
|
||||
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">Re-Summarize</span>
|
||||
{:catch error}
|
||||
<span class="text-sm">Error</span>
|
||||
{/await}
|
||||
</button>
|
||||
|
||||
<!-- Change System Prompt: -->
|
||||
<button
|
||||
type="button"
|
||||
class="btn btn-sm preset-outlined-primary-400-600 hover:preset-filled-secondary-500 transition"
|
||||
onclick={() => {
|
||||
$journals_sess.entry.hide__ai_summary =
|
||||
!$journals_sess.entry.hide__ai_summary;
|
||||
}}
|
||||
>
|
||||
<FilePenLine strokeWidth="1.5" class="inline-block mr-1" />
|
||||
Prompt
|
||||
</button>
|
||||
|
||||
<label
|
||||
class:hidden={!$journals_sess.entry.hide__ai_summary}
|
||||
class="flex flex-col items-start justify-start gap-1 h-24"
|
||||
>
|
||||
LLM System Prompt for Journal Entry summarization:
|
||||
<E_app_codemirror_v5
|
||||
editable={true}
|
||||
readonly={false}
|
||||
content={$journals_loc?.entry?.llm__system_prompt}
|
||||
bind:new_content={$journals_loc.entry.llm__system_prompt}
|
||||
show_line_numbers={false}
|
||||
placeholder="LLM System Prompt"
|
||||
class="
|
||||
p-1
|
||||
preset-outlined-success-400-600
|
||||
shadow-lg rounded-lg
|
||||
"
|
||||
/>
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<E_app_codemirror_v5
|
||||
editable={true}
|
||||
readonly={false}
|
||||
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">
|
||||
|
||||
Reference in New Issue
Block a user