{% extends "base.html" %}
{# AI models: Ollama on this PC and on your saved machines (the hosts behind
   your AI agents and AI > Local Models), a chat with any of those models,
   pulling and removing models, and installing Ollama on a fleet device. #}
{% block title %}AI models{% endblock %}
{% block page_id %}ai-models{% endblock %}
{% block head %}
<style>
  .m-chat { display: flex; flex-direction: column; gap: 10px; max-height: 60vh; min-height: 120px; overflow-y: auto;
            margin: 10px 0; padding: 10px; background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius-sm); }
  .m-msg { max-width: 92%; padding: 8px 12px; border-radius: 12px; background: var(--bg-3); border: 1px solid var(--line); }
  .m-msg.m-user { align-self: flex-end; background: var(--accent-soft); border-color: transparent; }
  .m-who { font-size: .75rem; color: var(--muted); margin-bottom: 2px; }
  .m-text { white-space: pre-wrap; overflow-wrap: anywhere; }
  .m-pending .m-text:empty::after { content: "thinking..."; color: var(--faint); }
  .m-chat-row { display: flex; gap: 8px; align-items: flex-end; }
  .m-chat-input { min-height: 48px; font-family: var(--font); font-size: 14px; }
  .m-chat-empty { margin: auto; text-align: center; max-width: 420px; }
</style>
{% endblock %}
{% block content %}
<div class="a-page-head">
  <h1><i class="fa-solid fa-brain" aria-hidden="true"></i> AI models</h1>
  <div class="a-sub">Local models run on your own hardware: this PC, or a machine you saved in AidaIDE. The camera wall and bot training use these.</div>
</div>
<div class="a-col" id="m-root"></div>
{% endblock %}
{% block scripts %}
<script src="{{ aida_rel('static/js/ai_models.js') }}"></script>
{% endblock %}