c81ac9ab5a
As the term token in the context of generative AI refers to text/data units, calling tokens that allow to access inference endpoints "inference token" might be confusing. For that reason, we consistently refer to such tokens as api keys.
84 lines
3.1 KiB
Plaintext
84 lines
3.1 KiB
Plaintext
<% @page_title = "Playground" %>
|
|
<% @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_endpoints.map { |ie| [ie[:url], ie[:model_name]] },
|
|
selected: @inference_endpoints.any? ? @inference_endpoints.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>
|