Multiple model selection working
This commit is contained in:
+19
-8
@@ -1,12 +1,23 @@
|
||||
<div class="chat-container">
|
||||
<h1 class="title is-1">Chat Page</h1>
|
||||
<div hx-get="/loadChat" hx-trigger="load" hx-swap="outerHTML"></div>
|
||||
<div class="chat-container mt-5">
|
||||
<hx hx-get="/loadChat" hx-trigger="load" hx-swap="outerHTML"></hx>
|
||||
|
||||
<div class="columns is-centered">
|
||||
<div class="column is-8">
|
||||
<form hx-put="/chat" hx-swap="beforeend" hx-target="#chat-messages">
|
||||
<input class="input mx-5" type="text" placeholder="Type your message here..." name="message" />
|
||||
|
||||
<div class="chat-input-container">
|
||||
<div class="buttons">
|
||||
<hx hx-get="/loadModelSelection" hx-trigger="load" hx-swap="outerHTML"></hx>
|
||||
</div>
|
||||
<div class="field has-addons mx-5">
|
||||
<form class="control is-expanded" hx-post="/requestMultipleMessages" hx-swap="beforeend settle:200ms"
|
||||
hx-target="#chat-messages" id="chat-input-form" class="chat-input"
|
||||
hx-include="[name='message'], [name^='model-check-']">
|
||||
<input class="input" type="text" placeholder="Type your message here..." name="message" />
|
||||
</form>
|
||||
<div class="control">
|
||||
<button class="button is-primary" hx-post="/requestMultipleMessages" hx-swap="beforeend settle:200ms"
|
||||
hx-target="#chat-messages" class="chat-input"
|
||||
hx-include="[name='message'], [name^='model-check-']">Send</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
@@ -6,6 +6,47 @@
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>JADE 2.0</title>
|
||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@1.0.0/css/bulma.min.css">
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css">
|
||||
|
||||
<style>
|
||||
body,
|
||||
html {
|
||||
height: 100%;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.chat-input-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
position: fixed;
|
||||
bottom: 10px;
|
||||
left: 0;
|
||||
right: 0;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.chat-input-container .field.has-addons {
|
||||
width: 100%;
|
||||
/* Ensure the field container takes full width */
|
||||
}
|
||||
|
||||
.chat-input-container form.control.is-expanded {
|
||||
flex-grow: 1;
|
||||
/* Make the form (input container) grow to fill available space */
|
||||
}
|
||||
|
||||
.image.is-32x32 {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
box-sizing: border-box;
|
||||
border-radius: 6px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
@@ -29,6 +70,66 @@
|
||||
}
|
||||
</style>
|
||||
|
||||
<!-- Style stuff -->
|
||||
|
||||
<style>
|
||||
.message-content {
|
||||
background-color: #303030;
|
||||
border-radius: 5px;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.content {
|
||||
font-size: 14px;
|
||||
line-height: 1.5;
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
.content pre {
|
||||
font-family: monospace;
|
||||
background-color: #363636 !important;
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
#chat-messages {
|
||||
max-width: 800px;
|
||||
margin: auto;
|
||||
width: 95%;
|
||||
}
|
||||
|
||||
#chat-input-form {
|
||||
max-width: 900px;
|
||||
margin: auto;
|
||||
width: 98%;
|
||||
}
|
||||
|
||||
:root {
|
||||
--bulma-body-background-color: #202020;
|
||||
--bulma-primary: #126d0f;
|
||||
}
|
||||
</style>
|
||||
|
||||
<!-- Animations stuff -->
|
||||
<style>
|
||||
.message-bot.htmx-added {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.message-bot {
|
||||
opacity: 1;
|
||||
transition: opacity 1s ease-out;
|
||||
}
|
||||
|
||||
.message-user.htmx-added {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.message-user {
|
||||
opacity: 1;
|
||||
transition: opacity 1s ease-out;
|
||||
}
|
||||
</style>
|
||||
|
||||
</body>
|
||||
|
||||
</html>
|
||||
@@ -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>
|
||||
@@ -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>
|
||||
@@ -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>
|
||||
@@ -14,6 +14,7 @@
|
||||
</a>
|
||||
</div>
|
||||
<div class="navbar-end">
|
||||
<img id="spinner" class="htmx-indicator" src="/puff.svg" />
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
@@ -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>
|
||||
@@ -1,6 +1,5 @@
|
||||
<div class="columns">
|
||||
<div class="column">
|
||||
<h1 class="title is-1">Welcome to JADE 2.0!</h1>
|
||||
<h1 hx-get="/isMongoDBConnected" hx-trigger="load" hx-swap="outerHTML"></h1>
|
||||
</div>
|
||||
</div>
|
||||
Reference in New Issue
Block a user