rixty/SillyTavern
1
0
Fork 0
mirror of https://github.com/SillyTavern/SillyTavern.git synced 2025-06-05 21:59:27 +02:00
Code Issues Packages Projects Releases Wiki Activity

Merge branch 'staging' of https://github.com/Yokayo/SillyTavern into ru-l10n

Browse Source
This commit is contained in:
Cohee
2024-05-20 21:45:18 +03:00
parent 0c36d4e67d d6a02e3c47
commit 6ed7729b18
10 changed files with 89 additions and 84 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
public/locales/ru-ru.json
View File

@ -1266,5 +1266,12 @@
"Message Content": "Внутри сообщения", "Message Content": "Внутри сообщения",
"Prepend character names to message contents.": "Предварять сообщения именем персонажа.", "Prepend character names to message contents.": "Предварять сообщения именем персонажа.",
"Character Names Behavior": "Вставка имени персонажа", "Character Names Behavior": "Вставка имени персонажа",
"Restrictions apply: only Latin alphanumerics and underscores. Doesn't work for all sources, notably: Claude, MistralAI, Google.": "Только латинские буквы, цифры и знак подчёркивания. Работает не для всех бэкендов, в частности для Claude, MistralAI, Google." "Restrictions apply: only Latin alphanumerics and underscores. Doesn't work for all sources, notably: Claude, MistralAI, Google.": "Только латинские буквы, цифры и знак подчёркивания. Работает не для всех бэкендов, в частности для Claude, MistralAI, Google.",
"and pick a character.": "и выберите персонажа.",
"Record a snapshot of your current settings.": "Сделать снимок текущих настроек.",
"Restore this snapshot": "Откатиться к этому снимку",
"To change your user avatar, use the buttons below or select a default persona in the Persona Management menu.": "Чтобы сменить аватарку, используйте кнопки ниже, либо выберите персону по умолчанию в меню управления персоной.",
"These characters are the winners of character design contests and have outstandable quality.": "Персонажи наивысшего качества, одержавшие победу в конкурсе персонажей.",
"Featured Characters": "Рекомендуемые персонажи",
"These characters are the finalists of character design contests and have remarkable quality.": "Персонажи отличного качества, финалисты конкурса персонажей."
} }

107
public/scripts/PromptManager.js
View File

@ -6,7 +6,6 @@ import { Message, TokenHandler } from './openai.js';
import { power_user } from './power-user.js'; import { power_user } from './power-user.js';
import { debounce, waitUntilCondition, escapeHtml } from './utils.js'; import { debounce, waitUntilCondition, escapeHtml } from './utils.js';
import { debounce_timeout } from './constants.js'; import { debounce_timeout } from './constants.js';
import { renderTemplateAsync } from './templates.js'
function debouncePromise(func, delay) { function debouncePromise(func, delay) {
let timeoutId; let timeoutId;
@ -703,14 +702,16 @@ class PromptManager {
this.tryGenerate().finally(() => { this.tryGenerate().finally(() => {
this.profileEnd('filling context'); this.profileEnd('filling context');
this.profileStart('render'); this.profileStart('render');
this.renderPromptManager().then(() => this.renderPromptManagerListItems()); this.renderPromptManager();
this.renderPromptManagerListItems();
this.makeDraggable(); this.makeDraggable();
this.profileEnd('render'); this.profileEnd('render');
}); });
} else { } else {
// Executed during live communication // Executed during live communication
this.profileStart('render'); this.profileStart('render');
this.renderPromptManager().then(() => this.renderPromptManagerListItems()); this.renderPromptManager();
this.renderPromptManagerListItems();
this.makeDraggable(); this.makeDraggable();
this.profileEnd('render'); this.profileEnd('render');
} }
@ -1337,7 +1338,7 @@ class PromptManager {
/** /**
* Empties, then re-assembles the container containing the prompt list. * Empties, then re-assembles the container containing the prompt list.
*/ */
async renderPromptManager() { renderPromptManager() {
let selectedPromptIndex = 0; let selectedPromptIndex = 0;
const existingAppendSelect = document.getElementById(`${this.configuration.prefix}prompt_manager_footer_append_prompt`); const existingAppendSelect = document.getElementById(`${this.configuration.prefix}prompt_manager_footer_append_prompt`);
if (existingAppendSelect instanceof HTMLSelectElement) { if (existingAppendSelect instanceof HTMLSelectElement) {
@ -1353,9 +1354,19 @@ class PromptManager {
`; `;
const totalActiveTokens = this.tokenUsage; const totalActiveTokens = this.tokenUsage;
const headerHtml = await renderTemplateAsync('promptManagerHeader', {error: this.error, errorDiv, prefix: this.configuration.prefix, totalActiveTokens}); promptManagerDiv.insertAdjacentHTML('beforeend', `
promptManagerDiv.insertAdjacentHTML('beforeend', headerHtml); <div class="range-block">
${this.error ? errorDiv : ''}
<div class="${this.configuration.prefix}prompt_manager_header">
<div class="${this.configuration.prefix}prompt_manager_header_advanced">
<span data-i18n="Prompts">Prompts</span>
</div>
<div>Total Tokens: ${totalActiveTokens} </div>
</div>
<ul id="${this.configuration.prefix}prompt_manager_list" class="text_pole"></ul>
</div>
`);
this.listElement = promptManagerDiv.querySelector(`#${this.configuration.prefix}prompt_manager_list`); this.listElement = promptManagerDiv.querySelector(`#${this.configuration.prefix}prompt_manager_list`);
@ -1373,9 +1384,22 @@ class PromptManager {
selectedPromptIndex = 0; selectedPromptIndex = 0;
} }
const footerHtml = `
<div class="${this.configuration.prefix}prompt_manager_footer">
<select id="${this.configuration.prefix}prompt_manager_footer_append_prompt" class="text_pole" name="append-prompt">
${promptsHtml}
</select>
<a class="menu_button fa-chain fa-solid" title="Insert prompt" data-i18n="[title]Insert prompt"></a>
<a class="caution menu_button fa-x fa-solid" title="Delete prompt" data-i18n="[title]Delete prompt"></a>
<a class="menu_button fa-file-import fa-solid" id="prompt-manager-import" title="Import a prompt list" data-i18n="[title]Import a prompt list"></a>
<a class="menu_button fa-file-export fa-solid" id="prompt-manager-export" title="Export this prompt list" data-i18n="[title]Export this prompt list"></a>
<a class="menu_button fa-undo fa-solid" id="prompt-manager-reset-character" title="Reset current character" data-i18n="[title]Reset current character"></a>
<a class="menu_button fa-plus-square fa-solid" title="New prompt" data-i18n="[title]New prompt"></a>
</div>
`;
const rangeBlockDiv = promptManagerDiv.querySelector('.range-block'); const rangeBlockDiv = promptManagerDiv.querySelector('.range-block');
const headerDiv = promptManagerDiv.querySelector('.completion_prompt_manager_header'); const headerDiv = promptManagerDiv.querySelector('.completion_prompt_manager_header');
const footerHtml = await renderTemplateAsync('promptManagerFooter', {promptsHtml, prefix: this.configuration.prefix});
headerDiv.insertAdjacentHTML('afterend', footerHtml); headerDiv.insertAdjacentHTML('afterend', footerHtml);
rangeBlockDiv.querySelector('#prompt-manager-reset-character').addEventListener('click', this.handleCharacterReset); rangeBlockDiv.querySelector('#prompt-manager-reset-character').addEventListener('click', this.handleCharacterReset);
@ -1386,9 +1410,23 @@ class PromptManager {
footerDiv.querySelector('select').selectedIndex = selectedPromptIndex; footerDiv.querySelector('select').selectedIndex = selectedPromptIndex;
// Add prompt export dialogue and options // Add prompt export dialogue and options
const exportForCharacter = `
const exportForCharacter = await renderTemplateAsync('promptManagerExportForCharacter'); <div class="row">
let exportPopup = await renderTemplateAsync('promptManagerExportPopup', {isGlobalStrategy: 'global' === this.configuration.promptOrder.strategy, exportForCharacter}); <a class="export-promptmanager-prompts-character list-group-item" data-i18n="Export for character">Export for character</a>
<span class="tooltip fa-solid fa-info-circle" title="Export prompts for this character, including their order."></span>
</div>`;
const exportPopup = `
<div id="prompt-manager-export-format-popup" class="list-group">
<div class="prompt-manager-export-format-popup-flex">
<div class="row">
<a class="export-promptmanager-prompts-full list-group-item" data-i18n="Export all">Export all</a>
<span class="tooltip fa-solid fa-info-circle" title="Export all your prompts to a file"></span>
</div>
${'global' === this.configuration.promptOrder.strategy ? '' : exportForCharacter}
</div>
</div>
`;
rangeBlockDiv.insertAdjacentHTML('beforeend', exportPopup); rangeBlockDiv.insertAdjacentHTML('beforeend', exportPopup);
// Destroy previous popper instance if it exists // Destroy previous popper instance if it exists
@ -1422,36 +1460,43 @@ class PromptManager {
/** /**
* Empties, then re-assembles the prompt list * Empties, then re-assembles the prompt list
*/ */
async renderPromptManagerListItems() { renderPromptManagerListItems() {
if (!this.serviceSettings.prompts) return; if (!this.serviceSettings.prompts) return;
const promptManagerList = this.listElement; const promptManagerList = this.listElement;
promptManagerList.innerHTML = ''; promptManagerList.innerHTML = '';
const { prefix } = this.configuration; const { prefix } = this.configuration;
const that = this; let listItemHtml = `
<li class="${prefix}prompt_manager_list_head">
let listItem = await renderTemplateAsync('promptManagerListHeader', {prefix}); <span data-i18n="Name">Name</span>
<span></span>
this.getPromptsForCharacter(this.activeCharacter).forEach(async function(prompt) { <span class="prompt_manager_prompt_tokens" data-i18n="Tokens">Tokens</span>
</li>
<li class="${prefix}prompt_manager_list_separator">
<hr>
</li>
`;
this.getPromptsForCharacter(this.activeCharacter).forEach(prompt => {
if (!prompt) return; if (!prompt) return;
const listEntry = that.getPromptOrderEntry(that.activeCharacter, prompt.identifier); const listEntry = this.getPromptOrderEntry(this.activeCharacter, prompt.identifier);
const enabledClass = listEntry.enabled ? '' : `${prefix}prompt_manager_prompt_disabled`; const enabledClass = listEntry.enabled ? '' : `${prefix}prompt_manager_prompt_disabled`;
const draggableClass = `${prefix}prompt_manager_prompt_draggable`; const draggableClass = `${prefix}prompt_manager_prompt_draggable`;
const markerClass = prompt.marker ? `${prefix}prompt_manager_marker` : ''; const markerClass = prompt.marker ? `${prefix}prompt_manager_marker` : '';
const tokens = that.tokenHandler?.getCounts()[prompt.identifier] ?? 0; const tokens = this.tokenHandler?.getCounts()[prompt.identifier] ?? 0;
// Warn the user if the chat history goes below certain token thresholds. // Warn the user if the chat history goes below certain token thresholds.
let warningClass = ''; let warningClass = '';
let warningTitle = ''; let warningTitle = '';
const tokenBudget = that.serviceSettings.openai_max_context - that.serviceSettings.openai_max_tokens; const tokenBudget = this.serviceSettings.openai_max_context - this.serviceSettings.openai_max_tokens;
if (that.tokenUsage > tokenBudget * 0.8 && if (this.tokenUsage > tokenBudget * 0.8 &&
'chatHistory' === prompt.identifier) { 'chatHistory' === prompt.identifier) {
const warningThreshold = that.configuration.warningTokenThreshold; const warningThreshold = this.configuration.warningTokenThreshold;
const dangerThreshold = that.configuration.dangerTokenThreshold; const dangerThreshold = this.configuration.dangerTokenThreshold;
if (tokens <= dangerThreshold) { if (tokens <= dangerThreshold) {
warningClass = 'fa-solid tooltip fa-triangle-exclamation text_danger'; warningClass = 'fa-solid tooltip fa-triangle-exclamation text_danger';
@ -1465,7 +1510,7 @@ class PromptManager {
const calculatedTokens = tokens ? tokens : '-'; const calculatedTokens = tokens ? tokens : '-';
let detachSpanHtml = ''; let detachSpanHtml = '';
if (that.isPromptDeletionAllowed(prompt)) { if (this.isPromptDeletionAllowed(prompt)) {
detachSpanHtml = ` detachSpanHtml = `
<span title="Remove" class="prompt-manager-detach-action caution fa-solid fa-chain-broken"></span> <span title="Remove" class="prompt-manager-detach-action caution fa-solid fa-chain-broken"></span>
`; `;
@ -1474,7 +1519,7 @@ class PromptManager {
} }
let editSpanHtml = ''; let editSpanHtml = '';
if (that.isPromptEditAllowed(prompt)) { if (this.isPromptEditAllowed(prompt)) {
editSpanHtml = ` editSpanHtml = `
<span title="edit" class="prompt-manager-edit-action fa-solid fa-pencil"></span> <span title="edit" class="prompt-manager-edit-action fa-solid fa-pencil"></span>
`; `;
@ -1483,7 +1528,7 @@ class PromptManager {
} }
let toggleSpanHtml = ''; let toggleSpanHtml = '';
if (that.isPromptToggleAllowed(prompt)) { if (this.isPromptToggleAllowed(prompt)) {
toggleSpanHtml = ` toggleSpanHtml = `
<span class="prompt-manager-toggle-action ${listEntry.enabled ? 'fa-solid fa-toggle-on' : 'fa-solid fa-toggle-off'}"></span> <span class="prompt-manager-toggle-action ${listEntry.enabled ? 'fa-solid fa-toggle-on' : 'fa-solid fa-toggle-off'}"></span>
`; `;
@ -1496,9 +1541,9 @@ class PromptManager {
const isImportantPrompt = !prompt.marker && prompt.system_prompt && prompt.injection_position !== INJECTION_POSITION.ABSOLUTE && prompt.forbid_overrides; const isImportantPrompt = !prompt.marker && prompt.system_prompt && prompt.injection_position !== INJECTION_POSITION.ABSOLUTE && prompt.forbid_overrides;
const isUserPrompt = !prompt.marker && !prompt.system_prompt && prompt.injection_position !== INJECTION_POSITION.ABSOLUTE; const isUserPrompt = !prompt.marker && !prompt.system_prompt && prompt.injection_position !== INJECTION_POSITION.ABSOLUTE;
const isInjectionPrompt = !prompt.marker && prompt.injection_position === INJECTION_POSITION.ABSOLUTE; const isInjectionPrompt = !prompt.marker && prompt.injection_position === INJECTION_POSITION.ABSOLUTE;
const isOverriddenPrompt = Array.isArray(that.overriddenPrompts) && that.overriddenPrompts.includes(prompt.identifier); const isOverriddenPrompt = Array.isArray(this.overriddenPrompts) && this.overriddenPrompts.includes(prompt.identifier);
const importantClass = isImportantPrompt ? `${prefix}prompt_manager_important` : ''; const importantClass = isImportantPrompt ? `${prefix}prompt_manager_important` : '';
listItem += ` listItemHtml += `
<li class="${prefix}prompt_manager_prompt ${draggableClass} ${enabledClass} ${markerClass} ${importantClass}" data-pm-identifier="${prompt.identifier}"> <li class="${prefix}prompt_manager_prompt ${draggableClass} ${enabledClass} ${markerClass} ${importantClass}" data-pm-identifier="${prompt.identifier}">
<span class="${prefix}prompt_manager_prompt_name" data-pm-name="${encodedName}"> <span class="${prefix}prompt_manager_prompt_name" data-pm-name="${encodedName}">
${prompt.marker ? '<span class="fa-fw fa-solid fa-thumb-tack" title="Marker"></span>' : ''} ${prompt.marker ? '<span class="fa-fw fa-solid fa-thumb-tack" title="Marker"></span>' : ''}
@ -1506,7 +1551,7 @@ class PromptManager {
${isImportantPrompt ? '<span class="fa-fw fa-solid fa-star" title="Important Prompt"></span>' : ''} ${isImportantPrompt ? '<span class="fa-fw fa-solid fa-star" title="Important Prompt"></span>' : ''}
${isUserPrompt ? '<span class="fa-fw fa-solid fa-user" title="User Prompt"></span>' : ''} ${isUserPrompt ? '<span class="fa-fw fa-solid fa-user" title="User Prompt"></span>' : ''}
${isInjectionPrompt ? '<span class="fa-fw fa-solid fa-syringe" title="In-Chat Injection"></span>' : ''} ${isInjectionPrompt ? '<span class="fa-fw fa-solid fa-syringe" title="In-Chat Injection"></span>' : ''}
${that.isPromptInspectionAllowed(prompt) ? `<a class="prompt-manager-inspect-action">${encodedName}</a>` : encodedName} ${this.isPromptInspectionAllowed(prompt) ? `<a class="prompt-manager-inspect-action">${encodedName}</a>` : encodedName}
${isInjectionPrompt ? `<small class="prompt-manager-injection-depth">@ ${prompt.injection_depth}</small>` : ''} ${isInjectionPrompt ? `<small class="prompt-manager-injection-depth">@ ${prompt.injection_depth}</small>` : ''}
${isOverriddenPrompt ? '<small class="fa-solid fa-address-card prompt-manager-overridden" title="Pulled from a character card"></small>' : ''} ${isOverriddenPrompt ? '<small class="fa-solid fa-address-card prompt-manager-overridden" title="Pulled from a character card"></small>' : ''}
</span> </span>
@ -1523,7 +1568,7 @@ class PromptManager {
`; `;
}); });
promptManagerList.insertAdjacentHTML('beforeend', listItem); promptManagerList.insertAdjacentHTML('beforeend', listItemHtml);
// Now that the new elements are in the DOM, you can add the event listeners. // Now that the new elements are in the DOM, you can add the event listeners.
Array.from(promptManagerList.getElementsByClassName('prompt-manager-detach-action')).forEach(el => { Array.from(promptManagerList.getElementsByClassName('prompt-manager-detach-action')).forEach(el => {

4
public/scripts/extensions/assets/market.html
View File

@ -1,6 +1,6 @@
<div class="flex-container flexFlowColumn padding5"> <div class="flex-container flexFlowColumn padding5">
<div class="contestWinners flex-container flexFlowColumn"> <div class="contestWinners flex-container flexFlowColumn">
<h3 class="flex-container alignItemsBaseline justifyCenter" title="These characters are the winners of character design contests and have outstandable quality."> <h3 class="flex-container alignItemsBaseline justifyCenter" data-i18n="[title]These characters are the winners of character design contests and have outstandable quality." title="These characters are the winners of character design contests and have outstandable quality.">
<span data-i18n="Contest Winners">Contest Winners</span> <span data-i18n="Contest Winners">Contest Winners</span>
<i class="fa-solid fa-star"></i> <i class="fa-solid fa-star"></i>
</h3> </h3>
@ -9,7 +9,7 @@
</div> </div>
<hr> <hr>
<div class="featuredCharacters flex-container flexFlowColumn"> <div class="featuredCharacters flex-container flexFlowColumn">
<h3 class="flex-container alignItemsBaseline justifyCenter" title="These characters are the finalists of character design contests and have remarkable quality."> <h3 class="flex-container alignItemsBaseline justifyCenter" data-i18n="[title]These characters are the finalists of character design contests and have remarkable quality." title="These characters are the finalists of character design contests and have remarkable quality.">
<span data-i18n="Featured Characters">Featured Characters</span> <span data-i18n="Featured Characters">Featured Characters</span>
<i class="fa-solid fa-thumbs-up"></i> <i class="fa-solid fa-thumbs-up"></i>
</h3> </h3>

4
public/scripts/templates/promptManagerExportForCharacter.html
View File

@ -1,4 +0,0 @@
<div class="row">
<a class="export-promptmanager-prompts-character list-group-item" data-i18n="Export for character">Export for character</a>
<span class="tooltip fa-solid fa-info-circle" data-i18n="[title]Export prompts for this character, including their order." title="Export prompts for this character, including their order."></span>
</div>

12
public/scripts/templates/promptManagerExportPopup.html
View File

@ -1,12 +0,0 @@
<div id="prompt-manager-export-format-popup" class="list-group">
<div class="prompt-manager-export-format-popup-flex">
<div class="row">
<a class="export-promptmanager-prompts-full list-group-item" data-i18n="Export all">Export all</a>
<span class="tooltip fa-solid fa-info-circle" data-i18n="[title]Export all your prompts to a file" title="Export all your prompts to a file"></span>
</div>
{{#if isGlobalStrategy}}
{{else}}
{{exportForCharacter}}
{{/if}}
</div>
</div>

11
public/scripts/templates/promptManagerFooter.html
View File

@ -1,11 +0,0 @@
<div class="{{prefix}}prompt_manager_footer">
<select id="{{prefix}}prompt_manager_footer_append_prompt" class="text_pole" name="append-prompt">
{{promptsHtml}}
</select>
<a class="menu_button fa-chain fa-solid" title="Insert prompt" data-i18n="[title]Insert prompt"></a>
<a class="caution menu_button fa-x fa-solid" title="Delete prompt" data-i18n="[title]Delete prompt"></a>
<a class="menu_button fa-file-import fa-solid" id="prompt-manager-import" title="Import a prompt list" data-i18n="[title]Import a prompt list"></a>
<a class="menu_button fa-file-export fa-solid" id="prompt-manager-export" title="Export this prompt list" data-i18n="[title]Export this prompt list"></a>
<a class="menu_button fa-undo fa-solid" id="prompt-manager-reset-character" title="Reset current character" data-i18n="[title]Reset current character"></a>
<a class="menu_button fa-plus-square fa-solid" title="New prompt" data-i18n="[title]New prompt"></a>
</div>

12
public/scripts/templates/promptManagerHeader.html
View File

@ -1,12 +0,0 @@
<div class="range-block">
{{#if error}}
{{errorDiv}}
{{/if}}
<div class="{{prefix}}prompt_manager_header">
<div class="{{prefix}}prompt_manager_header_advanced">
<span data-i18n="Prompts">Prompts</span>
</div>
<div><span data-i18n="Total Tokens:">Total Tokens:</span> {{totalActiveTokens}} </div>
</div>
<ul id="{{prefix}}prompt_manager_list" class="text_pole"></ul>
</div>

8
public/scripts/templates/promptManagerListHeader.html
View File

@ -1,8 +0,0 @@
<li class="${prefix}prompt_manager_list_head">
<span data-i18n="Name">Name</span>
<span></span>
<span class="prompt_manager_prompt_tokens" data-i18n="Tokens;prompt_manager_tokens">Tokens</span>
</li>
<li class="${prefix}prompt_manager_list_separator">
<hr>
</li>

4
public/scripts/templates/snapshotsView.html
View File

@ -1,7 +1,7 @@
<div class="padding5"> <div class="padding5">
<h3 class="title_restorable"> <h3 class="title_restorable">
<span data-i18n="Settings Snapshots">Settings Snapshots</span> <span data-i18n="Settings Snapshots">Settings Snapshots</span>
<div class="makeSnapshotButton menu_button menu_button_icon" title="Record a snapshot of your current settings."> <div class="makeSnapshotButton menu_button menu_button_icon" data-i18n="[title]Record a snapshot of your current settings." title="Record a snapshot of your current settings.">
<i class="fa-fw fa-solid fa-camera"></i> <i class="fa-fw fa-solid fa-camera"></i>
<span data-i18n="Make a Snapshot">Make a Snapshot</span> <span data-i18n="Make a Snapshot">Make a Snapshot</span>
</div> </div>
@ -20,7 +20,7 @@
</div> </div>
</div> </div>
<div class="expander"></div> <div class="expander"></div>
<div class="menu_button fa-solid fa-recycle snapshotRestoreButton" title="Restore this snapshot"></div> <div class="menu_button fa-solid fa-recycle snapshotRestoreButton" data-i18n="[title]Restore this snapshot" title="Restore this snapshot"></div>
<div class="fa-solid fa-circle-chevron-down inline-drawer-icon down"></div> <div class="fa-solid fa-circle-chevron-down inline-drawer-icon down"></div>
</div> </div>
<div class="inline-drawer-content"> <div class="inline-drawer-content">

2
public/scripts/templates/userProfile.html
View File

@ -16,7 +16,7 @@
</h3> </h3>
<div class="flex-container flexGap10"> <div class="flex-container flexGap10">
<div class="flex-container flexFlowColumn alignItemsCenter flexNoGap"> <div class="flex-container flexFlowColumn alignItemsCenter flexNoGap">
<div class="avatar" title="To change your user avatar, use the buttons below or select a default persona in the Persona Management menu."> <div class="avatar" data-i18n="[title]To change your user avatar, use the buttons below or select a default persona in the Persona Management menu." title="To change your user avatar, use the buttons below or select a default persona in the Persona Management menu.">
<img src="img/ai4.png" alt="avatar"> <img src="img/ai4.png" alt="avatar">
</div> </div>
<div class="flex-container alignItemsCenter"> <div class="flex-container alignItemsCenter">