<%!-- Header Section --%>
<.link navigate={PhoenixKit.Utils.Routes.path("/admin/modules")} class="btn btn-outline btn-primary btn-sm absolute left-0 top-0 -mb-12" > <.icon name="hero-arrow-left" class="w-4 h-4" /> Back to Modules

AI Module

Manage AI providers and text processing configuration

<%= if @has_accounts do %> <%!-- Configuration State: Main Tabs --%>
<%!-- Model Configuration Tab --%> <%= if @active_tab == "slots" do %> <%!-- Model Type Sub-tabs --%>
<%= for model_type <- @model_types do %> <% end %>

<%= case @slot_type do %> <% :text -> %> Text Processing Configuration <% :vision -> %> Vision Processing Configuration <% :image_gen -> %> Image Generation Configuration <% :embeddings -> %> Embeddings Configuration <% end %>

<.link navigate={PhoenixKit.Utils.Routes.path("/admin/ai/accounts")} class="btn btn-ghost btn-sm" > <.icon name="hero-key" class="w-4 h-4 mr-1" /> Manage Accounts

<%= case @slot_type do %> <% :text -> %> Configure up to 3 presets for text/chat completion. These can be used as selectable options or as a fallback chain. <% :vision -> %> Configure up to 3 presets for vision/multimodal models. These models can analyze images and provide text responses. <% :image_gen -> %> Configure up to 3 presets for image generation. These models create images from text prompts. <% :embeddings -> %> Configure up to 3 presets for text embeddings. Used for semantic search, RAG, and similarity matching. <% end %>

<%= for {slot, index} <- Enum.with_index(@slots) do %>

Slot {index + 1}: {slot["name"] || "Unnamed"}

<%!-- Name --%>
<%!-- Account Selection --%>
<%!-- Model Selection --%> <% has_account = slot["account_id"] != nil %> <% cache_key = {slot["account_id"], @slot_type} %> <% account_cache = @models_cache[cache_key] %> <% slot_models = (account_cache && account_cache.models) || [] %> <% slot_models_grouped = (account_cache && account_cache.grouped) || [] %> <% model_info = Enum.find(slot_models, fn m -> m["id"] == slot["model"] end) %> <% has_model = slot["model"] != nil && slot["model"] != "" %> <% is_loading = @models_loading_for != nil && @models_loading_for == slot["account_id"] %>
<%= if length(slot_models) > 0 do %> <%!-- Model Info Display --%> <%= if model_info do %>
<.icon name="hero-document-text" class="w-4 h-4 text-base-content/50" /> Context: {format_number(model_info["context_length"] || 0)}
<%= if model_info["max_completion_tokens"] do %>
<.icon name="hero-arrow-right-circle" class="w-4 h-4 text-base-content/50" /> Max output: {format_number(model_info["max_completion_tokens"])}
<% end %> <%= if model_info["pricing"] do %>
<.icon name="hero-currency-dollar" class="w-4 h-4 text-base-content/50" /> Price: ${Float.round( (model_info["pricing"]["prompt"] || 0) * 1.0 * 1_000_000, 2 )}/M in, ${Float.round( (model_info["pricing"]["completion"] || 0) * 1.0 * 1_000_000, 2 )}/M out
<% end %>
<%= if model_info["supported_parameters"] && length(model_info["supported_parameters"]) > 0 do %>
Supports: <%= for param <- Enum.take(model_info["supported_parameters"], 8) do %> {param} <% end %> <%= if length(model_info["supported_parameters"]) > 8 do %> +{length(model_info["supported_parameters"]) - 8} more <% end %>
<% end %>
<% end %> <% else %> <%!-- Fallback: show loading, text input, or prompt to select account --%> <%= if is_loading do %>
Loading models...
<% else %> <%= if has_account do %> <%= if @models_error do %> <% end %> <% else %>
Select an account to load available models
<% end %> <% end %> <% end %>
<%!-- Type-specific parameters - only show when model is selected --%> <%= if has_model do %> <%= case @slot_type do %> <% type when type in [:text, :vision] -> %> <%!-- Collapsible Model Parameters --%>
<.icon name="hero-adjustments-horizontal" class="w-4 h-4 mr-2" /> Model Parameters
<%!-- Temperature --%>
Precise Creative
<%!-- Max Tokens --%> <% max_tokens_limit = (model_info && model_info["max_completion_tokens"]) || 128_000 %> <% display_max_tokens = slot["max_tokens"] || (model_info && model_info["max_completion_tokens"]) %>
<%!-- Top P --%>
<%!-- Top K --%>
<%!-- Frequency Penalty --%>
<%!-- Presence Penalty --%>
<%!-- Repetition Penalty --%>
<%!-- Seed --%>
<%!-- Stop Sequences --%>
<% :image_gen -> %> <%!-- Image Size --%>
<%!-- Quality --%>
<% :embeddings -> %> <%!-- Dimensions --%>
<%!-- Empty div for grid alignment --%>
<% end %> <% end %>
<% end %>
<% end %> <%!-- Usage Tab --%> <%= if @active_tab == "usage" do %> <%= if @usage_loaded do %> <%!-- Stats Cards --%>
<%!-- Today Stats --%>
Today
{format_number(@usage_stats.today.total_requests)}
{PhoenixKit.AI.Request.format_tokens(@usage_stats.today.total_tokens)} tokens
<%!-- Last 30 Days --%>
Last 30 Days
{format_number(@usage_stats.last_30_days.total_requests)}
{PhoenixKit.AI.Request.format_tokens(@usage_stats.last_30_days.total_tokens)} tokens
<%!-- Success Rate --%>
Success Rate
{@usage_stats.last_30_days.success_rate}%
{@usage_stats.last_30_days.error_count} errors
<%!-- Avg Latency --%>
Avg Latency
{PhoenixKit.AI.Request.format_latency(@usage_stats.last_30_days.avg_latency_ms)}
last 30 days
<%!-- All Time Stats --%>

<.icon name="hero-chart-bar" class="w-5 h-5" /> All Time Statistics

Total Requests
{format_number(@usage_stats.all_time.total_requests)}
Total Tokens
{PhoenixKit.AI.Request.format_tokens(@usage_stats.all_time.total_tokens)}
Successful
{format_number(@usage_stats.all_time.success_count)}
Errors
{format_number(@usage_stats.all_time.error_count)}
<%!-- Recent Requests --%>

<.icon name="hero-clock" class="w-5 h-5" /> Recent Requests

<%= if length(@usage_requests) > 0 do %>
<%= for request <- @usage_requests do %> <% end %>
Time Model Tokens Latency Status
<.time_ago datetime={request.inserted_at} /> {PhoenixKit.AI.Request.short_model_name(request.model)} {PhoenixKit.AI.Request.format_tokens(request.total_tokens)} {PhoenixKit.AI.Request.format_latency(request.latency_ms)} {PhoenixKit.AI.Request.status_label(request.status)} <%= if request.error_message do %> <.icon name="hero-exclamation-circle" class="w-4 h-4 text-error ml-1" /> <% end %>
<%= if length(@usage_requests) < @usage_total_requests do %>
<% end %> <% else %>
<.icon name="hero-information-circle" class="w-5 h-5" /> No requests yet. Usage statistics will appear here once you start making AI requests.
<% end %>
<% else %> <%!-- Loading state --%>
<% end %> <% end %> <% else %> <%!-- Setup State: No accounts yet --%>

To get started, add your first AI provider account.

<.link navigate={PhoenixKit.Utils.Routes.path("/admin/ai/accounts/new")} class="btn btn-primary" > <.icon name="hero-plus" class="w-5 h-5 mr-2" /> Add Account
<% end %>