5cc0a71f31
Create model cards for the visible inference router models alongside the inference endpoints.
85 lines
3.2 KiB
Plaintext
85 lines
3.2 KiB
Plaintext
<% @page_title = "Playground" %>
|
|
<%== render("components/free_quota") %>
|
|
<% @enable_marked = true %>
|
|
<%== render("inference/tabbar") %>
|
|
<div class="overflow-hidden rounded-lg shadow ring-1 ring-black ring-opacity-5 bg-white divide-y divide-gray-200">
|
|
<div class="px-4 py-5 sm:p-6 grid gap-6">
|
|
<div class="flex gap-10 text-gray-900">
|
|
<div class="flex items-center gap-2">
|
|
<label for="inference_endpoint" class="text-sm font-medium leading-6">Inference Endpoint</label>
|
|
<%== render(
|
|
"components/form/select",
|
|
locals: {
|
|
name: "inference_endpoint",
|
|
placeholder: "Pick an endpoint",
|
|
options: @inference_models.map { |ie| [ie[:url], ie[:model_name]] },
|
|
selected: @inference_models.any? ? @inference_models.first[:url] : nil
|
|
}
|
|
) %>
|
|
</div>
|
|
<div class="flex items-center gap-2">
|
|
<label for="inference_api_key" class="text-sm font-medium leading-6">Inference API Key</label>
|
|
<%== render(
|
|
"components/form/select",
|
|
locals: {
|
|
name: "inference_api_key",
|
|
placeholder: "Pick a key",
|
|
options: @inference_api_keys.map { |it| [it[:key], it[:id]] },
|
|
selected: @inference_api_keys.any? ? @inference_api_keys.first[:key] : nil
|
|
}
|
|
) %>
|
|
</div>
|
|
</div>
|
|
<div class="shadow-md rounded-lg p-2 bg-gray-50">
|
|
<%== render(
|
|
"components/form/textarea",
|
|
locals: {
|
|
name: "inference_prompt",
|
|
attributes: {
|
|
"autofocus" => true,
|
|
"placeholder" => "User prompt to be submitted to the inference endpoint"
|
|
}
|
|
}
|
|
) %>
|
|
<%== render(
|
|
"components/button",
|
|
locals: {
|
|
text: "Submit",
|
|
attributes: {
|
|
"name" => "inference_submit",
|
|
"id" => "inference_submit",
|
|
"type" => "button"
|
|
},
|
|
extra_class: "mt-2"
|
|
}
|
|
) %>
|
|
</div>
|
|
<div class="border-b border-gray-200">
|
|
<ul class="flex flex-wrap -mb-px text-sm font-medium text-center text-gray-500 dark:text-gray-400">
|
|
<% [
|
|
["raw", "hero-code-bracket"],
|
|
["preview", "hero-eye"]
|
|
].each do |name, icon| %>
|
|
<li class="me-2 group inference-tab <%= (name == "raw") ? "active" : "" %>" data-target="<%= name %>">
|
|
<a
|
|
id="inference_tab_<%= name %>"
|
|
href="#"
|
|
class="inline-flex items-center justify-center p-4 border-b-2 rounded-t-lg group-[.active]:text-orange-600 group-[.active]:border-orange-600 group-[:not(.active)]:hover:text-gray-600 group-[:not(.active)]:hover:border-gray-300"
|
|
>
|
|
<%== render("components/icon", locals: { name: icon, classes: "h-4 w-4 mr-1" }) %>
|
|
<%= name.capitalize %>
|
|
</a>
|
|
</li>
|
|
<% end %>
|
|
</ul>
|
|
</div>
|
|
<div class="mt-1 text-gray-900">
|
|
<span
|
|
id="inference_response_raw"
|
|
class="inference-response whitespace-pre-line flex flex-col-reverse overflow-y-auto leading-7"
|
|
></span>
|
|
<span id="inference_response_preview" class="inference-response prose"></span>
|
|
</div>
|
|
</div>
|
|
</div>
|