a876d6d52c
Provide free quota for AI inference. Projects without valid billing info will have requests rejected after the free quota is exhausted.
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_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>
|