adrien/Jade
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Multiple model selection working

Browse Source
This commit is contained in:
adrien
2024-05-01 17:18:57 +02:00
parent 765ebd3c29
commit 642fd8bb52
24 changed files with 1011 additions and 648 deletions
Download Patch File Download Diff File Expand all files Collapse all files
views/partials/content-bot.html
+7
View File
@@ -0,0 +1,7 @@
<div class="message-content" {% if message.Hidden %}style="display: none;" {% endif %}>
<div class="message-body">
<div class="content">
{{ message.Content | safe }}
</div>
</div>
</div>
views/partials/message-bot.html
+82 -20
View File
@@ -1,22 +1,84 @@
<div class="message-user mt-3" style="display: flex; align-items: flex-start;" {% if IsPlaceholder %}
hx-get="/generateOpenai" hx-trigger="load" hx-swap="outerHTML" hx-indicator="#spinner" {% endif %}>
<figure class="image is-48x48 mr-2" style="flex-shrink: 0;">
<img src="icons/openai.png" alt="User Image">
</figure>
<article class="message">
<div class="message-header">
<p>User</p>
<form>
<input type="hidden">
<button class="delete" aria-label="delete"></button>
</form>
<div class="message-bot mt-3">
<div class="columns">
<div class="column is-vcentered is-1" id="icon-column">
<div class='rows'>
{% for message in Messages %}
<div class='row is-full mt-1 is-vcentered'>
<a href="#" hx-get="/messageContent?id={{ message.Id }}" class="is-clickable"
hx-target="#content-text-{{ ConversationAreaId }}" onclick="toggleGrayscale(this)">
<figure class=" image is-48x48 mr-2" style="flex-shrink: 0;">
<img src="icons/{{ message.Icon }}.png" alt="User Image" if {% if message.Hidden %}
style="filter: grayscale(100%);" {% endif %}>
</figure>
</a>
</div>
{% endfor %}
{% if IsPlaceholder %}
<div class='row is-full mt-1'>
<figure class="image is-48x48 mr-2" style="flex-shrink: 0;">
<img src="icons/bouvai2.png" alt="User Image">
</figure>
</div>
{% endif %}
</div>
</div>
<div class="message-body">
{% if IsPlaceholder %}
<img id="spinner" class="htmx-indicator" src="/puff.svg" />
{% else %}
{{ Content }}
{% endif %}
<div class="column" id="content-column">
<div class="is-flex">
{% for message in Messages %}
{% if not message.Hidden %}
<!-- Name of the model as title -->
<div class="message-content">
<div class="message-header">
<p>Hello World</p>
</div>
<div class="message-body">
<ct class="content" id="content-text-{{ ConversationAreaId }}">
{{ message.Content | safe }}
</ct>
</div>
</div>
{% endif %}
{% endfor %}
{% if IsPlaceholder %}
<hx hx-get="/generateMultipleMessages" hx-trigger="load" hx-swap="outerHTML" hx-indicator="#spinner"
hx-target="#chat-container">
</hx>
<div class="message-content" {% if message.Hidden %}style="display: none;" {% endif %}>
<div class="message-body">
<div class="content">
<img id="spinner" class="htmx-indicator" src="/puff.svg" />
</div>
</div>
</div>
{% endif %}
</div>
</div>
</article>
</div>
</div>
</div>
<script>
function toggleGrayscale(link) {
var imgElement = link.querySelector('img');
var allImages = link.closest('.rows').querySelectorAll('img');
var rowElement = link.closest('.row');
if (imgElement.style.filter === 'grayscale(100%)') {
imgElement.style.filter = 'none';
allImages.forEach(function (img) {
if (img !== imgElement) {
img.style.filter = 'grayscale(100%)';
}
});
rowElement.parentNode.insertBefore(rowElement, rowElement.parentNode.firstChild);
} else {
imgElement.style.filter = 'grayscale(100%)';
allImages.forEach(function (img) {
img.style.filter = 'grayscale(100%)';
});
}
}
</script>
views/partials/message-user.html
+20 -14
View File
@@ -1,17 +1,23 @@
<div class="message-user mt-3" style="display: flex; align-items: flex-start;">
<figure class="image is-48x48 mr-2" style="flex-shrink: 0;">
<img src="icons/huggingface.png" alt="User Image">
</figure>
<article class="message">
<div class="message-header">
<p>User</p>
<form>
<input type="hidden">
<button class="delete" aria-label="delete"></button>
</form>
<div class="message-user mt-3" id="{{ ID }}">
<div class="columns is-vcentered">
<div class="column is-centered is-1" id="icon-column">
<figure class="image is-48x48 mr-2" style="flex-shrink: 0;">
<img src="icons/bouvai2.png" alt="User Image">
</figure>
</div>
<div class="message-body">
{{ Content }}
<div class="column" id="content-column">
<div class="is-flex">
<div class="message-content" style="position: relative; padding-right: 30px;">
<div class="message-body">
<div class="content">
{{ Content|safe }}
</div>
</div>
<button hx-post="/deleteMessage?id={{ ID }}" style="position: absolute; top: 3; right: 3;"
hx-swap="outerHTML" hx-target="#chat-container" class="delete" aria-label="delete"></button>
</div>
</div>
</div>
</article>
</div>
</div>
views/partials/navbar.html
+1
View File
@@ -14,6 +14,7 @@
</a>
</div>
<div class="navbar-end">
<img id="spinner" class="htmx-indicator" src="/puff.svg" />
</div>
</div>
</nav>
views/partials/popover.html
+27
View File
@@ -0,0 +1,27 @@
<div class="dropdown is-hoverable is-up">
<div class="dropdown-trigger">
<button class="button" aria-haspopup="true" aria-controls="dropdown-menu4">
<span>Models</span>
</button>
</div>
<div class="dropdown-menu" id="dropdown-menu4" role="menu">
<div class="dropdown-content">
<div class="dropdown-item">
{% for CompanyInfo in CompanyInfos %}
<div class="content">
<h5 class="subtitle is-5">{{ CompanyInfo.Name }}</h5>
{% for ModelInfo in CompanyInfo.ModelInfos %}
<div class="field">
<label class="checkbox">
<input {%if ModelInfo.ID in CheckedModels %}checked{% endif %} type="checkbox"
name="model-check-{{ ModelInfo.ID }}" value="{{ ModelInfo.ID }}" />
{{ ModelInfo.Name }}
</label>
</div>
{% endfor %}
</div>
{% endfor %}
</div>
</div>
</div>
</div>