UT框架官网

开发方式

代码开发

可视化开发

开发资源

衍生系统

文档有错误？
发信:usualtool@qq.com

定位至目录

代码开发百科目录

使用ut-ai构建AI能力

第一步：安装ut-ai依赖：composer require usualtool/ut-ai
第二步：进入vendor/usualtool/ut-ai/src/.env配置AI接口

至此，框架已具备AI能力，命令行使用：php usualtool ai

编程使用（PHP）
创建接口

聊天界面

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>AI 聊天</title>
<style>
* { margin:0; padding:0; box-sizing:border-box; }
body { font-family:"Microsoft YaHei",system-ui,sans-serif; background:#f2f4f7; height:100vh; display:flex; justify-content:center; }
.chat-box { width:100%; max-width:760px; display:flex; flex-direction:column; background:#fff; box-shadow:0 0 12px rgba(0,0,0,.08); }
.chat-head { padding:12px 16px; border-bottom:1px solid #eee; display:flex; align-items:center; gap:12px; }
.chat-head b { font-size:16px; }
.chat-head select { padding:4px 8px; border:1px solid #ddd; border-radius:4px; font-size:13px; }
.chat-head button { margin-left:auto; padding:4px 12px; border:1px solid #ddd; background:#fff; border-radius:4px; cursor:pointer; font-size:13px; }
.chat-head button:hover { background:#f5f5f5; }
#list { flex:1; overflow-y:auto; padding:16px; display:flex; flex-direction:column; gap:14px; }
.msg { max-width:85%; padding:10px 14px; border-radius:10px; font-size:14px; line-height:1.7; white-space:pre-wrap; word-break:break-word; }
.msg.user { align-self:flex-end; background:#1a73e8; color:#fff; border-bottom-right-radius:2px; }
.msg.ai { align-self:flex-start; background:#f4f5f7; color:#222; border-bottom-left-radius:2px; }
.msg.ai .think { color:#999; font-size:12px; border-left:2px solid #ddd; padding-left:8px; margin-bottom:6px; }
.msg.ai.error { background:#fdecea; color:#c0392b; }
.msg code { background:rgba(0,0,0,.06); padding:1px 4px; border-radius:3px; font-family:Consolas,monospace; }
.msg pre { background:#282c34; color:#abb2bf; padding:10px; border-radius:6px; overflow-x:auto; margin:6px 0; }
.msg pre code { background:none; padding:0; color:inherit; }
.cursor { display:inline-block; width:8px; height:14px; background:#666; vertical-align:-2px; animation:blink 1s infinite; }
@keyframes blink { 50% { opacity:0; } }
.form { display:flex; gap:10px; padding:12px 16px; border-top:1px solid #eee; }
#input { flex:1; resize:none; height:52px; padding:10px; border:1px solid #ddd; border-radius:8px; font-size:14px; font-family:inherit; outline:none; }
#input:focus { border-color:#1a73e8; }
#send { width:76px; border:none; background:#1a73e8; color:#fff; border-radius:8px; font-size:14px; cursor:pointer; }
#send:disabled { background:#a8c7fa; cursor:not-allowed; }
</style>
</head>
<body>
<div class="chat-box">
  <div class="chat-head">
    <b>AI 助手</b>
    <select id="model"></select>
    <button id="clear">清空对话</button>
  </div>
  <div id="list"></div>
  <div class="form">
    <textarea id="input" placeholder="输入消息，Enter 发送，Shift+Enter 换行"></textarea>
    <button id="send">发送</button>
  </div>
</div>
<script>
const list = document.getElementById('list');
const input = document.getElementById('input');
const sendBtn = document.getElementById('send');
const modelSel = document.getElementById('model');
const esc = s => s.replace(/&/g,'&').replace(/</g,'<').replace(/>/g,'>');
function render(text){
  let html = esc(text);
  html = html.replace(/```(\w*)\n([\s\S]*?)```/g, (m,l,c)=>'<pre><code>'+c.replace(/\n$/,'')+'</code></pre>');
  html = html.replace(/`([^`\n]+)`/g, '<code>$1</code>');
  html = html.replace(/\*\*([^*\n]+)\*\*/g, '<b>$1</b>');
  return html;
}
function addMsg(role, text){
  const div = document.createElement('div');
  div.className = 'msg ' + (role === 'user' ? 'user' : 'ai');
  div.innerHTML = render(text);
  list.appendChild(div);
  list.scrollTop = list.scrollHeight;
  return div;
}
let messages = [];
let busy = false;

async function loadModels(){
  try {
    const r = await fetch('?p=api&action=models');
    const d = await r.json();
    (d.data || []).forEach(m => {
      const o = document.createElement('option');
      o.value = o.textContent = m.id;
      modelSel.appendChild(o);
    });
  } catch(e) { modelSel.innerHTML = '<option>默认模型</option>'; }
}

async function send(){
  const text = input.value.trim();
  if (!text || busy) return;
  busy = true; sendBtn.disabled = true;
  input.value = '';
  addMsg('user', text);
  messages.push({ role:'user', content:text });

const div = addMsg('ai', '');
  const bubble = div;
  let answer = '', think = '', thinkEl = null;
  const cursor = document.createElement('span');
  cursor.className = 'cursor';

const paint = () => {
    bubble.innerHTML = (think ? '<div class="think">' + render(think) + '</div>' : '') + render(answer);
    if (busy) bubble.appendChild(cursor);
    list.scrollTop = list.scrollHeight;
  };

try {
    const resp = await fetch('?p=api', {
      method:'POST',
      headers:{ 'Content-Type':'application/json' },
      body: JSON.stringify({ messages, model: modelSel.value, sessionId: '' })
    });
    const ct = resp.headers.get('Content-Type') || '';
    if (ct.includes('application/json')) {
      const d = await resp.json();
      answer = (d.error && d.error.message) ? d.error.message : JSON.stringify(d);
      div.classList.add('error');
    } else {
      const reader = resp.body.getReader();
      const decoder = new TextDecoder();
      let buf = '';
      while (true) {
        const { done, value } = await reader.read();
        if (done) break;
        buf += decoder.decode(value, { stream:true });
        let idx;
        while ((idx = buf.indexOf('\n\n')) !== -1) {
          const frame = buf.slice(0, idx);
          buf = buf.slice(idx + 2);
          for (const line of frame.split('\n')) {
            if (!line.startsWith('data:')) continue;
            const raw = line.slice(5).trim();
            if (!raw || raw === '[DONE]') continue;
            let evt; try { evt = JSON.parse(raw); } catch(e) { continue; }
            if (evt.error) { answer += (answer ? '\n' : '') + '错误：' + (evt.error.message || JSON.stringify(evt.error)); continue; }
            const delta = (evt.choices && evt.choices[0] && evt.choices[0].delta) || {};
            if (delta.reasoning_content) think += delta.reasoning_content;
            if (delta.content) answer += delta.content;
          }
          paint();
        }
      }
    }
  } catch(e) {
    div.classList.add('error');
    answer = '请求失败：' + e.message;
  }
  paint();
  if (answer) {
    messages.push({ role:'assistant', content:answer });
  } else {
    bubble.textContent = bubble.textContent || '（空回复）';
  }
  busy = false; sendBtn.disabled = false; input.focus();
}

sendBtn.onclick = send;
input.addEventListener('keydown', e => {
  if (e.key === 'Enter' && !e.shiftKey) { e.preventDefault(); send(); }
});
document.getElementById('clear').onclick = () => {
  messages = []; list.innerHTML = '';
};
loadModels();
input.focus();
</script>
</body>
</html>

对话效果