Changed HTML to use djlint
This commit is contained in:
@@ -1,96 +1,148 @@
|
||||
<div class="dropdown is-up is-right" id="models-dropdown">
|
||||
<div class="dropdown-trigger">
|
||||
<button class="button is-small to-reduce-opacity" aria-haspopup="true" aria-controls="dropdown-menu3"
|
||||
<div class="dropdown-trigger">
|
||||
<button class="button is-small to-reduce-opacity"
|
||||
aria-haspopup="true"
|
||||
aria-controls="dropdown-menu3"
|
||||
onclick="this.parentElement.parentElement.classList.toggle('is-active')">
|
||||
<span class="icon"><i class="fa-solid fa-robot"></i></span>
|
||||
</button>
|
||||
</div>
|
||||
<div class="dropdown-menu" id="dropdown-menu3" role="menu">
|
||||
<div class="dropdown-content">
|
||||
<div class="dropdown-item" id="models-list">
|
||||
<div id="llm-list">
|
||||
{% for LLM in LLMs %}
|
||||
<div class="icon-text has-text unselected icon-llm" data-id="{{ LLM.ID.String() }}"
|
||||
style="cursor: pointer;" onclick="toggleSelection(this)">
|
||||
<span class="icon">
|
||||
<img src="{{ LLM.Model.Company.Icon }}" />
|
||||
</span>
|
||||
<span>{{ LLM.Name }}</span>
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
<div class="is-flex is-justify-content-space-between mt-4">
|
||||
<button disabled class="button is-small is-danger" hx-get="/deleteLLM" hx-swap="outerHTML"
|
||||
hx-target="#models-dropdown" hx-confirm="Are you sure?" hx-trigger="click"
|
||||
hx-vals="js:{selectedLLMIds: getSelectedModelsIDs()}" id="delete-model-button">
|
||||
<span class="icon">
|
||||
<i class="fa-solid fa-trash"></i>
|
||||
</span>
|
||||
</button>
|
||||
<div>
|
||||
<!--button disabled class="button is-small is-primary mr-2 ml-5">
|
||||
<span class="icon"><i class="fa-solid fa-robot"></i></span>
|
||||
</button>
|
||||
</div>
|
||||
<div class="dropdown-menu" id="dropdown-menu3" role="menu">
|
||||
<div class="dropdown-content">
|
||||
<div class="dropdown-item" id="models-list">
|
||||
<div id="llm-list">
|
||||
{% for LLM in LLMs %}
|
||||
<div class="icon-text has-text unselected icon-llm"
|
||||
data-id="{{ LLM.ID.String() }}"
|
||||
style="cursor: pointer"
|
||||
onclick="toggleSelection(this)">
|
||||
<span class="icon">
|
||||
<img src="{{ LLM.Model.Company.Icon }}" />
|
||||
</span>
|
||||
<span>{{ LLM.Name }}</span>
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
<div class="is-flex is-justify-content-space-between mt-4">
|
||||
<button disabled
|
||||
class="button is-small is-danger"
|
||||
hx-get="/deleteLLM"
|
||||
hx-swap="outerHTML"
|
||||
hx-target="#models-dropdown"
|
||||
hx-confirm="Are you sure?"
|
||||
hx-trigger="click"
|
||||
hx-vals="js:{selectedLLMIds: getSelectedModelsIDs()}"
|
||||
id="delete-model-button">
|
||||
<span class="icon">
|
||||
<i class="fa-solid fa-trash"></i>
|
||||
</span>
|
||||
</button>
|
||||
<div>
|
||||
<!--button disabled class="button is-small is-primary mr-2 ml-5">
|
||||
<span class="icon">
|
||||
<i class="fa-solid fa-pen"></i>
|
||||
</span>
|
||||
</button-->
|
||||
<button class="button is-small is-success is-outlined" id="create-model-button">
|
||||
<span class="icon">
|
||||
<i class="fa-solid fa-plus"></i>
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="dropdown-item is-hidden" id="models-creation">
|
||||
<form id="create-model-form" hx-post="/createLLM" hx-target="#models-dropdown" hx-swap="outerHTML">
|
||||
<input class="input is-small mb-3" type="text" id="model-name-input" name="model-name-input"
|
||||
placeholder="Model name" autocomplete="off">
|
||||
<div class="select is-fullwidth is-small mb-3" id="model-id-input">
|
||||
<select name="selectedLLMId">
|
||||
{% for modelInfo in ModelInfos %}
|
||||
<option value="{{ modelInfo.ModelID }}">{{ modelInfo.Company.Name }} - {{ modelInfo.Name }}</option>
|
||||
{% endfor %}
|
||||
<option value="{% if IsPremium %}custom{% else %}none{% endif %}">Custom Endpoints</option>
|
||||
</select>
|
||||
</div>
|
||||
<p class="is-hidden" style="color: red;" id="endpoint-error">
|
||||
<small>Need premium subscription</small>
|
||||
</p>
|
||||
<input class="input is-small mb-3 is-hidden" type="text" id="model-cid-input" name="model-cid-input"
|
||||
placeholder="Model id" autocomplete="off">
|
||||
<input class="input is-small mb-3 is-hidden" type="text" id="model-url-input" name="model-url-input"
|
||||
placeholder="URL (with /v1/chat/completions)" autocomplete="off">
|
||||
<input class="input is-small mb-3 is-hidden" type="text" id="model-key-input" name="model-key-input"
|
||||
placeholder="Token" autocomplete="off">
|
||||
<p><small>Temperature:</small></p>
|
||||
<input class="slider is-small mb-3" step="0.05" min="0" max="2" value="0" type="range"
|
||||
id="temperature-slider" name="temperature-slider">
|
||||
<output id="temperature-slider-output">0</output>
|
||||
<p><small>Max token (optional):</small></p>
|
||||
<input class="input is-small mb-3" type="number" id="max-token-input" name="max-token-input"
|
||||
placeholder="" autocomplete="off">
|
||||
<p><small>System prompt (optional):</small></p>
|
||||
<textarea class="textarea is-small mb-5 has-fixed-size" id="model-prompt-input"
|
||||
name="model-prompt-input"></textarea>
|
||||
<div class="is-flex is-justify-content-flex-end">
|
||||
<button class="button is-small is-danger is-outlined mr-3" id="cancel-create-model-button"
|
||||
type="button">
|
||||
<span class="icon">
|
||||
<i class="fa-solid fa-xmark"></i>
|
||||
</span>
|
||||
</button>
|
||||
<button disabled class="button is-small is-success" id="confirm-create-model-button"
|
||||
type="submit">
|
||||
<span class="icon">
|
||||
<i class="fa-solid fa-check"></i>
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</button -->
|
||||
<button class="button is-small is-success is-outlined"
|
||||
id="create-model-button">
|
||||
<span class="icon">
|
||||
<i class="fa-solid fa-plus"></i>
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="dropdown-item is-hidden" id="models-creation">
|
||||
<form id="create-model-form"
|
||||
hx-post="/createLLM"
|
||||
hx-target="#models-dropdown"
|
||||
hx-swap="outerHTML">
|
||||
<input class="input is-small mb-3"
|
||||
type="text"
|
||||
id="model-name-input"
|
||||
name="model-name-input"
|
||||
placeholder="Model name"
|
||||
autocomplete="off">
|
||||
<div class="select is-fullwidth is-small mb-3" id="model-id-input">
|
||||
<select name="selectedLLMId">
|
||||
{% for modelInfo in ModelInfos %}
|
||||
<option value="{{ modelInfo.ModelID }}">
|
||||
{{ modelInfo.Company.Name }} - {{ modelInfo.Name }}
|
||||
</option>
|
||||
{% endfor %}
|
||||
<option value="{% if IsPremium %}custom{% else %}none{% endif %}">Custom Endpoints</option>
|
||||
</select>
|
||||
</div>
|
||||
<p class="is-hidden" style="color: red;" id="endpoint-error">
|
||||
<small>Need premium subscription</small>
|
||||
</p>
|
||||
<input class="input is-small mb-3 is-hidden"
|
||||
type="text"
|
||||
id="model-cid-input"
|
||||
name="model-cid-input"
|
||||
placeholder="Model id"
|
||||
autocomplete="off">
|
||||
<input class="input is-small mb-3 is-hidden"
|
||||
type="text"
|
||||
id="model-url-input"
|
||||
name="model-url-input"
|
||||
placeholder="URL (with /v1/chat/completions)"
|
||||
autocomplete="off">
|
||||
<input class="input is-small mb-3 is-hidden"
|
||||
type="text"
|
||||
id="model-key-input"
|
||||
name="model-key-input"
|
||||
placeholder="Token"
|
||||
autocomplete="off">
|
||||
<p>
|
||||
<small>Temperature:</small>
|
||||
</p>
|
||||
<input class="slider is-small mb-3"
|
||||
step="0.05"
|
||||
min="0"
|
||||
max="2"
|
||||
value="0"
|
||||
type="range"
|
||||
id="temperature-slider"
|
||||
name="temperature-slider">
|
||||
<output id="temperature-slider-output">0</output>
|
||||
<p>
|
||||
<small>Max token (optional):</small>
|
||||
</p>
|
||||
<input class="input is-small mb-3"
|
||||
type="number"
|
||||
id="max-token-input"
|
||||
name="max-token-input"
|
||||
placeholder=""
|
||||
autocomplete="off">
|
||||
<p>
|
||||
<small>System prompt (optional):</small>
|
||||
</p>
|
||||
<textarea class="textarea is-small mb-5 has-fixed-size"
|
||||
id="model-prompt-input"
|
||||
name="model-prompt-input"></textarea>
|
||||
<div class="is-flex is-justify-content-flex-end">
|
||||
<button class="button is-small is-danger is-outlined mr-3"
|
||||
id="cancel-create-model-button"
|
||||
type="button">
|
||||
<span class="icon">
|
||||
<i class="fa-solid fa-xmark"></i>
|
||||
</span>
|
||||
</button>
|
||||
<button disabled
|
||||
class="button is-small is-success"
|
||||
id="confirm-create-model-button"
|
||||
type="submit">
|
||||
<span class="icon">
|
||||
<i class="fa-solid fa-check"></i>
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
<script>
|
||||
</div>
|
||||
<script>
|
||||
var sortable = new Sortable(document.getElementById('llm-list'), {
|
||||
animation: 150,
|
||||
onEnd: function (evt) {
|
||||
@@ -173,5 +225,5 @@
|
||||
event.preventDefault();
|
||||
}
|
||||
});
|
||||
</script>
|
||||
</script>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user