ExternalVendorCode/lollms-webui
1
0
Fork 0
mirror of https://github.com/ParisNeo/lollms-webui.git synced 2024-12-19 20:37:51 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

upgraded ui

Browse Source
This commit is contained in:
Saifeddine ALOUI 2024-10-23 01:21:23 +02:00
parent 21897b615f
commit 7256925d44
6 changed files with 295 additions and 265 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
web/dist/assets/index-BpT69KYd.css vendored Normal file
View File

File diff suppressed because one or more lines are too long

422
web/dist/assets/index-BtP_01Rk.js → web/dist/assets/index-C2ppRpsB.js vendored
View File

File diff suppressed because one or more lines are too long

8
web/dist/assets/index-DTcuNyAe.css vendored
View File

File diff suppressed because one or more lines are too long

4
web/dist/index.html vendored
View File

@ -6,8 +6,8 @@
<script src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-svg.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>LoLLMS WebUI</title>
<script type="module" crossorigin src="/assets/index-BtP_01Rk.js"></script>
<link rel="stylesheet" crossorigin href="/assets/index-DTcuNyAe.css">
<script type="module" crossorigin src="/assets/index-C2ppRpsB.js"></script>
<link rel="stylesheet" crossorigin href="/assets/index-BpT69KYd.css">
</head>
<body>
<div id="app"></div>

116
web/src/components/Message.vue
View File

@ -36,48 +36,6 @@
<div class="overflow-x-auto w-full overflow-y-auto scrollbar-thin scrollbar-track-bg-light-tone scrollbar-thumb-bg-light-tone-panel hover:scrollbar-thumb-primary dark:scrollbar-track-bg-dark-tone dark:scrollbar-thumb-bg-dark-tone-panel dark:hover:scrollbar-thumb-primary active:scrollbar-thumb-secondary">
<!-- MESSAGE CONTENT -->
<details v-show="message != undefined && message.steps != undefined && message.steps.length>0" class="flex w-full cursor-pointer rounded-xl border border-gray-200 bg-white shadow-sm dark:border-gray-800 dark:bg-gray-900 mb-3.5 max-w-full">
<summary class="grid min-w-80 select-none grid-cols-[50px,1fr] items-center gap-3 p-3 bg-gray-50 dark:bg-gray-800 rounded-lg shadow-sm hover:shadow-md transition-all duration-300">
<div class="relative grid aspect-square place-content-center overflow-hidden rounded-full bg-gradient-to-br from-blue-400 to-purple-500">
<svg v-if="message.status_message !== 'Done' && message.status_message !== 'Generation canceled'" class="w-8 h-8 text-white animate-spin" 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>
<svg v-if="message.status_message === 'Generation canceled'" class="w-8 h-8 text-red-500" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
</svg>
<svg v-if="message.status_message === 'Done'" class="w-8 h-8 text-green-500" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
</svg>
</div>
<dl class="leading-5">
<dd class="text-lg font-semibold text-gray-800 dark:text-gray-200">Processing Info</dd>
<dt class="flex items-center gap-1 truncate whitespace-nowrap text-sm text-gray-500 dark:text-gray-400">
<span class="inline-block w-2 h-2 rounded-full" :class="{
'bg-blue-500 animate-pulse': message.status_message !== 'Done' && message.status_message !== 'Generation canceled',
'bg-red-500': message.status_message === 'Generation canceled',
'bg-green-500': message.status_message === 'Done'
}"></span>
{{ message === undefined ? '' : message.status_message }}
</dt>
</dl>
</summary>
<div class="content px-5 pb-5 pt-4">
<ol class="list-none">
<div v-for="(step, index) in message.steps" :key="'step-' + message.id + '-' + index" class="group border-l pb-6 last:!border-transparent last:pb-0 dark:border-gray-800" :style="{ backgroundColor: step.done ? 'transparent' : 'inherit' }">
<Step :done="step.done" :text="step.text" :status="step.status" :step_type = "step.step_type"/>
</div>
</ol>
</div>
</details>
<div class="flex flex-col items-start w-full">
</div>
<div class="flex flex-col items-start w-full overflow-y-auto scrollbar-thin scrollbar-track-bg-light-tone scrollbar-thumb-bg-light-tone-panel hover:scrollbar-thumb-primary dark:scrollbar-track-bg-dark-tone dark:scrollbar-thumb-bg-dark-tone-panel dark:hover:scrollbar-thumb-primary active:scrollbar-thumb-secondary">
<div v-for="(html_js, index) in message.html_js_s" :key="'htmljs-' + message.id + '-' + index" class="htmljs font-bold" :style="{ backgroundColor: step.done ? 'transparent' : 'inherit' }">
<RenderHTMLJS :htmlContent="html_js" />
</div>
</div>
<MarkdownRenderer ref="mdRender" v-if="!editMsgMode" :host="host" :markdown-text="message.content" :message_id="message.id" :discussion_id="message.discussion_id" :client_id="this.$store.state.client_id">
</MarkdownRenderer>
@ -100,6 +58,50 @@
<source :src="audio_url" type="audio/wav" ref="audio_player" >
Your browser does not support the audio element.
</audio>
<div class="message-details">
<details
v-if="message && message.steps && message.steps.length > 0"
class="flex w-full cursor-pointer rounded-xl border border-gray-200 bg-white shadow-sm dark:border-gray-800 dark:bg-gray-900 mb-3.5 max-w-full transition-all duration-300 ease-in-out"
>
<summary class="grid min-w-80 select-none grid-cols-[50px,1fr] items-center gap-3 p-3 bg-gray-50 dark:bg-gray-800 rounded-lg shadow-sm hover:shadow-md transition-all duration-300">
<div class="relative grid aspect-square place-content-center overflow-hidden rounded-full bg-gradient-to-br from-blue-400 to-purple-500 transform transition-transform duration-300 hover:scale-105">
<StatusIcon :status="message.status_message" />
</div>
<dl class="leading-5">
<dd class="text-lg font-semibold text-gray-800 dark:text-gray-200">Processing Info</dd>
<dt class="flex items-center gap-1 truncate whitespace-nowrap text-sm text-gray-500 dark:text-gray-400">
<StatusIndicator :status="message.status_message" />
{{ message.status_message }}
</dt>
</dl>
</summary>
<div class="px-5 pb-5 pt-4 transition-all duration-300 ease-in-out">
<ol class="list-none">
<li
v-for="(step, index) in message.steps"
:key="`step-${message.id}-${index}`"
class="group border-l pb-6 last:!border-transparent last:pb-0 dark:border-gray-800 transition-all duration-300 ease-in-out"
:class="{ 'bg-transparent': step.done }"
:style="{ animationDelay: `${index * 100}ms` }"
>
<Step :done="step.done" :text="step.text" :status="step.status" :step_type="step.step_type" />
</li>
</ol>
</div>
</details>
<div class="flex flex-col items-start w-full overflow-y-auto scrollbar-thin scrollbar-track-bg-light-tone scrollbar-thumb-bg-light-tone-panel hover:scrollbar-thumb-primary dark:scrollbar-track-bg-dark-tone dark:scrollbar-thumb-bg-dark-tone-panel dark:hover:scrollbar-thumb-primary active:scrollbar-thumb-secondary">
<div
v-for="(html_js, index) in message.html_js_s"
:key="`htmljs-${message.id}-${index}`"
class="font-bold animate-fadeIn"
:style="{ animationDelay: `${index * 200}ms` }"
>
<RenderHTMLJS :htmlContent="html_js" />
</div>
</div>
</div>
</div>
<!-- MESSAGE CONTROLS -->
<div class="flex-row justify-end mx-2">
@ -944,4 +946,32 @@ export default {
}
</script>
</script>
<style>
@keyframes fadeIn {
from { opacity: 0; transform: translateY(10px); }
to { opacity: 1; transform: translateY(0); }
}
.animate-fadeIn {
animation: fadeIn 0.5s ease-out forwards;
}
details[open] summary ~ * {
animation: slideDown 0.3s ease-in-out;
}
details summary::marker {
display: none;
}
details summary::-webkit-details-marker {
display: none;
}
@keyframes slideDown {
from { opacity: 0; transform: translateY(-10px); }
to { opacity: 1; transform: translateY(0); }
}
</style>

2
zoos/personalities_zoo

@ -1 +1 @@
Subproject commit 96cff88ab4f0d0a70f93b1b138a7c233df707f43
Subproject commit f615876f83a8f3901fe64268aa6a3babcd348ae0