BuildTools
4 weeks ago
commit
03bf8450e2
@ -0,0 +1,6 @@
|
|||||||
|
## Information
|
||||||
|
you can use this code at your own risk.
|
||||||
|
|
||||||
|
## markup.umd.js
|
||||||
|
This file is downloaded from [https://github.com/markedjs/marked](https://github.com/markedjs/marked) which is used unter its MIT license.
|
||||||
|
|
||||||
@ -0,0 +1,10 @@
|
|||||||
|
|
||||||
|
# KaI - Ollama Chat
|
||||||
|
|
||||||
|
a simple webpage which will connect to a remote ollama instance and allowes you to talk to any model aviable in ollama.
|
||||||
|
|
||||||
|
## configuration
|
||||||
|
|
||||||
|
all configuration is done in the file default.php
|
||||||
|
|
||||||
|
|
||||||
@ -0,0 +1,53 @@
|
|||||||
|
<?php
|
||||||
|
// CHANGE THIS to your remote Ollama server IP or domain (e.g., http://192.168.1.50:11434)
|
||||||
|
define('OLLAMA_URL', 'http://10.2.0.3:11434');
|
||||||
|
|
||||||
|
header('Content-Type: application/json');
|
||||||
|
|
||||||
|
// 1. Handle fetching available models
|
||||||
|
if (isset($_GET['action']) && $_GET['action'] === 'models') {
|
||||||
|
$ch = curl_init(OLLAMA_URL . '/api/tags');
|
||||||
|
curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);
|
||||||
|
$response = curl_exec($ch);
|
||||||
|
|
||||||
|
if (curl_errno($ch)) {
|
||||||
|
echo json_encode(['error' => 'Could not connect to Ollama server.']);
|
||||||
|
} else {
|
||||||
|
echo $response;
|
||||||
|
}
|
||||||
|
curl_close($ch);
|
||||||
|
exit;
|
||||||
|
}
|
||||||
|
|
||||||
|
// 2. Handle sending chat messages
|
||||||
|
if ($_SERVER['REQUEST_METHOD'] === 'POST') {
|
||||||
|
$input = json_decode(file_get_contents('php://input'), true);
|
||||||
|
|
||||||
|
$model = $input['model'] ?? 'llama3';
|
||||||
|
$messages = $input['messages'] ?? [];
|
||||||
|
|
||||||
|
$payload = json_encode([
|
||||||
|
'model' => $model,
|
||||||
|
'messages' => $messages,
|
||||||
|
'stream' => false
|
||||||
|
]);
|
||||||
|
|
||||||
|
$ch = curl_init(OLLAMA_URL . '/api/chat');
|
||||||
|
curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);
|
||||||
|
curl_setopt($ch, CURLOPT_POST, true);
|
||||||
|
curl_setopt($ch, CURLOPT_POSTFIELDS, $payload);
|
||||||
|
curl_setopt($ch, CURLOPT_HTTPHEADER, ['Content-Type: application/json']);
|
||||||
|
|
||||||
|
$response = curl_exec($ch);
|
||||||
|
|
||||||
|
if (curl_errno($ch)) {
|
||||||
|
echo json_encode(['error' => 'Error communicating with remote Ollama: ' . curl_error($ch)]);
|
||||||
|
} else {
|
||||||
|
echo $response;
|
||||||
|
}
|
||||||
|
curl_close($ch);
|
||||||
|
exit;
|
||||||
|
}
|
||||||
|
|
||||||
|
echo json_encode(['error' => 'Invalid request']);
|
||||||
|
|
||||||
@ -0,0 +1,66 @@
|
|||||||
|
<?php
|
||||||
|
|
||||||
|
header('Content-Type: application/json');
|
||||||
|
require_once __DIR__ . '/default.php';
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
function readConfig() {
|
||||||
|
if (!file_exists(CONFIG_FILE)) {
|
||||||
|
return ['defaultModel' => ''];
|
||||||
|
}
|
||||||
|
|
||||||
|
$content = file_get_contents(CONFIG_FILE);
|
||||||
|
if ($content === false) {
|
||||||
|
return ['defaultModel' => ''];
|
||||||
|
}
|
||||||
|
|
||||||
|
$data = json_decode($content, true);
|
||||||
|
if (!is_array($data)) {
|
||||||
|
return ['defaultModel' => ''];
|
||||||
|
}
|
||||||
|
|
||||||
|
return [
|
||||||
|
'defaultModel' => isset($data['defaultModel']) ? (string) $data['defaultModel'] : ''
|
||||||
|
];
|
||||||
|
}
|
||||||
|
|
||||||
|
function writeConfig($config) {
|
||||||
|
$data = json_encode($config, JSON_PRETTY_PRINT | JSON_UNESCAPED_UNICODE);
|
||||||
|
return file_put_contents(CONFIG_FILE, $data) !== false;
|
||||||
|
}
|
||||||
|
|
||||||
|
$action = $_GET['action'] ?? '';
|
||||||
|
|
||||||
|
switch ($action) {
|
||||||
|
case 'load':
|
||||||
|
echo json_encode(readConfig());
|
||||||
|
exit;
|
||||||
|
|
||||||
|
case 'save':
|
||||||
|
if ($_SERVER['REQUEST_METHOD'] !== 'POST') {
|
||||||
|
echo json_encode(['error' => 'POST required.']);
|
||||||
|
exit;
|
||||||
|
}
|
||||||
|
|
||||||
|
$input = json_decode(file_get_contents('php://input'), true);
|
||||||
|
if (!is_array($input)) {
|
||||||
|
echo json_encode(['error' => 'Invalid JSON.']);
|
||||||
|
exit;
|
||||||
|
}
|
||||||
|
|
||||||
|
$config = readConfig();
|
||||||
|
$config['defaultModel'] = isset($input['defaultModel']) ? (string) $input['defaultModel'] : '';
|
||||||
|
|
||||||
|
if (!writeConfig($config)) {
|
||||||
|
echo json_encode(['error' => 'Unable to save config.']);
|
||||||
|
exit;
|
||||||
|
}
|
||||||
|
|
||||||
|
echo json_encode(['success' => true, 'defaultModel' => $config['defaultModel']]);
|
||||||
|
exit;
|
||||||
|
|
||||||
|
default:
|
||||||
|
echo json_encode(['error' => 'Unknown action.']);
|
||||||
|
exit;
|
||||||
|
}
|
||||||
@ -0,0 +1,301 @@
|
|||||||
|
* {
|
||||||
|
box-sizing: border-box;
|
||||||
|
margin:0;
|
||||||
|
padding:0;
|
||||||
|
font-family:'Segoe UI',Tahoma,Geneva,Verdana,sans-serif;
|
||||||
|
}
|
||||||
|
|
||||||
|
body {
|
||||||
|
background:#1e1e2e;
|
||||||
|
color:#cdd6f4;
|
||||||
|
min-height:100vh;
|
||||||
|
overflow:hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.layout {
|
||||||
|
display:flex;
|
||||||
|
height:100vh;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ==========================
|
||||||
|
LEFT SIDEBAR
|
||||||
|
========================== */
|
||||||
|
|
||||||
|
.sidebar {
|
||||||
|
width:280px;
|
||||||
|
background:#11111b;
|
||||||
|
border-right:1px solid #313244;
|
||||||
|
display:flex;
|
||||||
|
flex-direction:column;
|
||||||
|
}
|
||||||
|
|
||||||
|
.sidebar-header {
|
||||||
|
padding:15px;
|
||||||
|
font-size:18px;
|
||||||
|
font-weight:bold;
|
||||||
|
border-bottom:1px solid #313244;
|
||||||
|
}
|
||||||
|
|
||||||
|
#history-list {
|
||||||
|
flex:1;
|
||||||
|
overflow-y:auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.history-item {
|
||||||
|
padding:12px;
|
||||||
|
cursor:pointer;
|
||||||
|
border-bottom:1px solid #313244;
|
||||||
|
transition:background .2s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.history-item:hover {
|
||||||
|
background:#313244;
|
||||||
|
}
|
||||||
|
|
||||||
|
.history-item.active {
|
||||||
|
background:#45475a;
|
||||||
|
}
|
||||||
|
|
||||||
|
.history-title {
|
||||||
|
font-size:14px;
|
||||||
|
font-weight:bold;
|
||||||
|
color:#cdd6f4;
|
||||||
|
margin-bottom:4px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.history-date {
|
||||||
|
font-size:11px;
|
||||||
|
color:#888;
|
||||||
|
}
|
||||||
|
|
||||||
|
.chat-container {
|
||||||
|
flex:1;
|
||||||
|
display:flex;
|
||||||
|
flex-direction:column;
|
||||||
|
overflow:hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.chat-header {
|
||||||
|
padding:15px 20px;
|
||||||
|
background:#11111b;
|
||||||
|
display:flex;
|
||||||
|
justify-content:space-between;
|
||||||
|
align-items:center;
|
||||||
|
border-bottom:1px solid #313244;
|
||||||
|
}
|
||||||
|
|
||||||
|
.controls {
|
||||||
|
display:flex;
|
||||||
|
gap:10px;
|
||||||
|
align-items:center;
|
||||||
|
}
|
||||||
|
|
||||||
|
select,
|
||||||
|
button {
|
||||||
|
background:#313244;
|
||||||
|
color:#cdd6f4;
|
||||||
|
border:1px solid #45475a;
|
||||||
|
padding:8px 12px;
|
||||||
|
border-radius:6px;
|
||||||
|
cursor:pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
button.new-chat-btn {
|
||||||
|
background:#f38ba8;
|
||||||
|
color:#11111b;
|
||||||
|
font-weight:bold;
|
||||||
|
border:none;
|
||||||
|
}
|
||||||
|
|
||||||
|
button.send-btn {
|
||||||
|
background:#89b4fa;
|
||||||
|
color:#11111b;
|
||||||
|
font-weight:bold;
|
||||||
|
border:none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.chat-messages {
|
||||||
|
flex:1;
|
||||||
|
overflow-y:auto;
|
||||||
|
padding:20px;
|
||||||
|
display:flex;
|
||||||
|
flex-direction:column;
|
||||||
|
gap:15px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.message {
|
||||||
|
max-width:90%;
|
||||||
|
padding:12px 16px;
|
||||||
|
border-radius:8px;
|
||||||
|
word-break:break-word;
|
||||||
|
line-height:1.5;
|
||||||
|
white-space: pre-wrap;
|
||||||
|
}
|
||||||
|
|
||||||
|
.message.user {
|
||||||
|
align-self:flex-end;
|
||||||
|
background:#89b4fa;
|
||||||
|
color:#11111b;
|
||||||
|
}
|
||||||
|
|
||||||
|
.message.system {
|
||||||
|
align-self:center;
|
||||||
|
color:#999;
|
||||||
|
background:transparent;
|
||||||
|
font-style:italic;
|
||||||
|
}
|
||||||
|
|
||||||
|
.message pre {
|
||||||
|
background:#11111b;
|
||||||
|
padding:10px;
|
||||||
|
overflow:auto;
|
||||||
|
border-radius:5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.message code {
|
||||||
|
background:#11111b;
|
||||||
|
padding:2px 5px;
|
||||||
|
border-radius:3px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.message ul,
|
||||||
|
.message ol {
|
||||||
|
margin-left:20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.chat-input-area {
|
||||||
|
display:flex;
|
||||||
|
gap:10px;
|
||||||
|
padding:15px;
|
||||||
|
background:#11111b;
|
||||||
|
border-top:1px solid #313244;
|
||||||
|
}
|
||||||
|
|
||||||
|
textarea {
|
||||||
|
flex:1;
|
||||||
|
resize:none;
|
||||||
|
height:60px;
|
||||||
|
background:#313244;
|
||||||
|
color:white;
|
||||||
|
border:1px solid #45475a;
|
||||||
|
border-radius:6px;
|
||||||
|
padding:12px;
|
||||||
|
}
|
||||||
|
|
||||||
|
textarea:focus {
|
||||||
|
outline:none;
|
||||||
|
border-color:#89b4fa;
|
||||||
|
}
|
||||||
|
|
||||||
|
@property --border-angle {
|
||||||
|
syntax:'<angle>';
|
||||||
|
inherits:false;
|
||||||
|
initial-value:0deg;
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes rotate-border {
|
||||||
|
to {
|
||||||
|
--border-angle:360deg;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.message.assistant {
|
||||||
|
align-self: flex-start;
|
||||||
|
background-color: #313244;
|
||||||
|
color: #cdd6f4;
|
||||||
|
border-bottom-left-radius: 2px;
|
||||||
|
border: 3px solid transparent; /* Platzhalter für den Rahmen */
|
||||||
|
}
|
||||||
|
|
||||||
|
.message.assistant.thinking-state {
|
||||||
|
background-image: linear-gradient(#313244, #313244),
|
||||||
|
conic-gradient(from var(--border-angle), #00ffff, #000000, #ff00ff, #000000, #ffffff, #000000, #00ffff);
|
||||||
|
background-origin: border-box;
|
||||||
|
background-clip: padding-box, border-box;
|
||||||
|
animation: rotate-border 1s linear infinite; /* Von 3s auf 1s verkürzt für mehr Speed */
|
||||||
|
}
|
||||||
|
|
||||||
|
.thinking-text span {
|
||||||
|
animation:blink 1.4s infinite both;
|
||||||
|
}
|
||||||
|
|
||||||
|
.thinking-text span:nth-child(2){
|
||||||
|
animation-delay:.2s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.thinking-text span:nth-child(3){
|
||||||
|
animation-delay:.4s;
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes blink{
|
||||||
|
0%{opacity:.2;}
|
||||||
|
20%{opacity:1;}
|
||||||
|
100%{opacity:.2;}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media screen and (max-width: 900px) {
|
||||||
|
body {
|
||||||
|
overflow:auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.layout {
|
||||||
|
flex-direction:column;
|
||||||
|
height:auto;
|
||||||
|
min-height:100vh;
|
||||||
|
}
|
||||||
|
|
||||||
|
.sidebar {
|
||||||
|
width:100%;
|
||||||
|
max-height:320px;
|
||||||
|
border-right:none;
|
||||||
|
border-bottom:1px solid #313244;
|
||||||
|
}
|
||||||
|
|
||||||
|
.chat-container {
|
||||||
|
height:auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.chat-header {
|
||||||
|
flex-wrap:wrap;
|
||||||
|
gap:10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.controls {
|
||||||
|
width:100%;
|
||||||
|
justify-content:space-between;
|
||||||
|
flex-wrap:wrap;
|
||||||
|
}
|
||||||
|
|
||||||
|
.chat-messages {
|
||||||
|
padding:16px;
|
||||||
|
min-height:280px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.chat-input-area {
|
||||||
|
flex-direction:column;
|
||||||
|
gap:10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
textarea {
|
||||||
|
height:100px;
|
||||||
|
}
|
||||||
|
|
||||||
|
button.send-btn,
|
||||||
|
button.new-chat-btn,
|
||||||
|
select {
|
||||||
|
width:100%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Monospace font for inline code and pre blocks */
|
||||||
|
code,
|
||||||
|
pre,
|
||||||
|
kbd,
|
||||||
|
samp,
|
||||||
|
tt,
|
||||||
|
.message code,
|
||||||
|
.message pre {
|
||||||
|
font-family: Consolas, "Andale Mono", "Lucida Console", Monaco, "Courier New", monospace;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
@ -0,0 +1,8 @@
|
|||||||
|
<?php
|
||||||
|
|
||||||
|
header('Content-Type: application/json');
|
||||||
|
|
||||||
|
define('CONFIG_PATH', '/home/www/data/kai-ollama');
|
||||||
|
define('CONFIG_FILE', CONFIG_PATH . '/config.json');
|
||||||
|
define('CHAT_HISTORY_FILE', CONFIG_PATH . '/chat.history.data');
|
||||||
|
|
||||||
@ -0,0 +1,379 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<link rel="stylesheet" type="text/css" href="default.css">
|
||||||
|
<title>KaI (Ollama Remote Chat)</title>
|
||||||
|
<script src="marked.umd.js"></script>
|
||||||
|
</head>
|
||||||
|
|
||||||
|
<body>
|
||||||
|
|
||||||
|
<div class="layout">
|
||||||
|
<div class="sidebar">
|
||||||
|
<div class="sidebar-header">
|
||||||
|
Chat History
|
||||||
|
</div>
|
||||||
|
<div id="history-list">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="chat-container">
|
||||||
|
<div class="chat-header">
|
||||||
|
<h2>I'm KaI your - Ollama Chat</h2>
|
||||||
|
<div class="controls">
|
||||||
|
<select id="model-select">
|
||||||
|
<option>Loading models...</option>
|
||||||
|
</select>
|
||||||
|
<button
|
||||||
|
class="new-chat-btn"
|
||||||
|
id="new-chat-btn">
|
||||||
|
New Chat
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="chat-messages" id="chat-messages">
|
||||||
|
<div class="message system">Conversation started.</div>
|
||||||
|
</div>
|
||||||
|
<div class="chat-input-area">
|
||||||
|
<textarea id="user-input" placeholder="Type your message..."></textarea>
|
||||||
|
<button class="send-btn" id="send-btn">Send</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
|
||||||
|
const chatMessages = document.getElementById('chat-messages');
|
||||||
|
const historyList = document.getElementById('history-list');
|
||||||
|
|
||||||
|
const userInput = document.getElementById('user-input');
|
||||||
|
const sendBtn = document.getElementById('send-btn');
|
||||||
|
const newChatBtn = document.getElementById('new-chat-btn');
|
||||||
|
const modelSelect = document.getElementById('model-select');
|
||||||
|
|
||||||
|
let chatHistory = [];
|
||||||
|
let currentChatId = null;
|
||||||
|
|
||||||
|
marked.setOptions({
|
||||||
|
breaks:true
|
||||||
|
});
|
||||||
|
|
||||||
|
|
||||||
|
/* ==========================================================
|
||||||
|
Message Output
|
||||||
|
========================================================== */
|
||||||
|
|
||||||
|
function appendMessage(role, text) {
|
||||||
|
const msgDiv = document.createElement("div");
|
||||||
|
msgDiv.classList.add("message", role);
|
||||||
|
|
||||||
|
if (role === "assistant") {
|
||||||
|
msgDiv.innerHTML = marked.parse(text);
|
||||||
|
} else {
|
||||||
|
msgDiv.textContent = text;
|
||||||
|
}
|
||||||
|
|
||||||
|
chatMessages.appendChild(msgDiv);
|
||||||
|
chatMessages.scrollTop = chatMessages.scrollHeight;
|
||||||
|
|
||||||
|
return msgDiv;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ==========================================================
|
||||||
|
Models
|
||||||
|
========================================================== */
|
||||||
|
|
||||||
|
async function loadConfig() {
|
||||||
|
try {
|
||||||
|
const response = await fetch("config.php?action=load");
|
||||||
|
const data = await response.json();
|
||||||
|
return data.defaultModel || "";
|
||||||
|
} catch (err) {
|
||||||
|
console.error(err);
|
||||||
|
return "";
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
async function saveConfig(defaultModel) {
|
||||||
|
try {
|
||||||
|
await fetch("config.php?action=save", {
|
||||||
|
method: "POST",
|
||||||
|
headers: { "Content-Type": "application/json" },
|
||||||
|
body: JSON.stringify({ defaultModel })
|
||||||
|
});
|
||||||
|
} catch (err) {
|
||||||
|
console.error(err);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
async function loadModels() {
|
||||||
|
try {
|
||||||
|
const response = await fetch("chat.php?action=models");
|
||||||
|
const data = await response.json();
|
||||||
|
const defaultModel = await loadConfig();
|
||||||
|
|
||||||
|
modelSelect.innerHTML = "";
|
||||||
|
|
||||||
|
if (data.models) {
|
||||||
|
let selectedModel = "";
|
||||||
|
|
||||||
|
data.models.forEach(model => {
|
||||||
|
const option = document.createElement("option");
|
||||||
|
option.value = model.name;
|
||||||
|
option.textContent = model.name;
|
||||||
|
modelSelect.appendChild(option);
|
||||||
|
|
||||||
|
if (!selectedModel && model.name === defaultModel) {
|
||||||
|
selectedModel = model.name;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
const fallbackModel = selectedModel || (data.models[0] && data.models[0].name) || "";
|
||||||
|
if (fallbackModel) {
|
||||||
|
modelSelect.value = fallbackModel;
|
||||||
|
} else {
|
||||||
|
modelSelect.innerHTML = "<option>No Models</option>";
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
modelSelect.innerHTML = "<option>No Models</option>";
|
||||||
|
}
|
||||||
|
}
|
||||||
|
catch {
|
||||||
|
modelSelect.innerHTML = "<option>Connection failed</option>";
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ==========================================================
|
||||||
|
History
|
||||||
|
========================================================== */
|
||||||
|
async function loadHistory() {
|
||||||
|
try {
|
||||||
|
const response = await fetch("savechat.php?action=list");
|
||||||
|
const chats = await response.json();
|
||||||
|
|
||||||
|
historyList.innerHTML = "";
|
||||||
|
chats.forEach(chat => {
|
||||||
|
const item = document.createElement("div");
|
||||||
|
item.className = "history-item";
|
||||||
|
if (chat.id === currentChatId) item.classList.add("active");
|
||||||
|
|
||||||
|
item.innerHTML = `<div class="history-title">${chat.title}</div>`;
|
||||||
|
|
||||||
|
const historyDateDiv = document.createElement("div");
|
||||||
|
const historyDate = chat.created || '';
|
||||||
|
historyDateDiv.textContent = historyDate;
|
||||||
|
historyDateDiv.className = "history-date";
|
||||||
|
item.appendChild(historyDateDiv);
|
||||||
|
|
||||||
|
const historyModelSpan = document.createElement("span");
|
||||||
|
historyModelSpan.textContent = `${chat.model}`;
|
||||||
|
historyModelSpan.style.display = "inline-block";
|
||||||
|
historyModelSpan.style.marginLeft = "10px";
|
||||||
|
historyModelSpan.style.float = "right";
|
||||||
|
historyModelSpan.className = "history-date";
|
||||||
|
item.appendChild(historyModelSpan);
|
||||||
|
item.appendChild(historyDateDiv);
|
||||||
|
|
||||||
|
item.onclick = () => {
|
||||||
|
loadChat(chat.id);
|
||||||
|
};
|
||||||
|
|
||||||
|
// add a delete button here
|
||||||
|
const deleteBtn = document.createElement("button");
|
||||||
|
deleteBtn.textContent = 'Delete';
|
||||||
|
deleteBtn.onclick = async () => {
|
||||||
|
// remove the chat from the list and from the database
|
||||||
|
historyList.removeChild(item);
|
||||||
|
await fetch('savechat.php?action=delete&id=' + encodeURIComponent(chat.id));
|
||||||
|
loadHistory(); // reload the history to update the list
|
||||||
|
};
|
||||||
|
|
||||||
|
item.appendChild(deleteBtn);
|
||||||
|
historyList.appendChild(item);
|
||||||
|
});
|
||||||
|
} catch (err) {
|
||||||
|
console.error(err);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ==========================================================
|
||||||
|
Load Chat
|
||||||
|
========================================================== */
|
||||||
|
async function loadChat(id) {
|
||||||
|
try {
|
||||||
|
const response =
|
||||||
|
await fetch(
|
||||||
|
"savechat.php?action=load&id="
|
||||||
|
+ encodeURIComponent(id)
|
||||||
|
);
|
||||||
|
|
||||||
|
const chat = await response.json();
|
||||||
|
|
||||||
|
if (chat.error) {
|
||||||
|
alert(chat.error);
|
||||||
|
return;
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
currentChatId = chat.id;
|
||||||
|
chatHistory = chat.messages;
|
||||||
|
chatMessages.innerHTML = "";
|
||||||
|
chat.messages.forEach(msg => {
|
||||||
|
appendMessage(
|
||||||
|
msg.role,
|
||||||
|
msg.content
|
||||||
|
);
|
||||||
|
});
|
||||||
|
loadHistory();
|
||||||
|
}
|
||||||
|
catch(err) {
|
||||||
|
console.error(err);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ==========================================================
|
||||||
|
Save Chat
|
||||||
|
========================================================== */
|
||||||
|
async function saveChat() {
|
||||||
|
if (chatHistory.length === 0) return;
|
||||||
|
|
||||||
|
try {
|
||||||
|
const response = await fetch( "savechat.php?action=save", {
|
||||||
|
method: "POST",
|
||||||
|
headers: {"Content-Type":"application/json"},
|
||||||
|
body: JSON.stringify({id: currentChatId, model: modelSelect.value, messages: chatHistory})});
|
||||||
|
|
||||||
|
const result = await response.json();
|
||||||
|
if (result.id) currentChatId = result.id;
|
||||||
|
loadHistory();
|
||||||
|
}
|
||||||
|
catch(err) {
|
||||||
|
console.error(err);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ==========================================================
|
||||||
|
Send Message
|
||||||
|
========================================================== */
|
||||||
|
|
||||||
|
async function sendMessage() {
|
||||||
|
const text = userInput.value.trim();
|
||||||
|
|
||||||
|
if (!text) return;
|
||||||
|
|
||||||
|
if (!modelSelect.value) {
|
||||||
|
alert("Please select a model.");
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
appendMessage("user", text);
|
||||||
|
chatHistory.push({role: "user", content: text});
|
||||||
|
userInput.value = "";
|
||||||
|
|
||||||
|
const thinking =
|
||||||
|
appendMessage( "assistant",'<div class="thinking-text">Thinking<span>.</span><span>.</span><span>.</span></div>');
|
||||||
|
|
||||||
|
thinking.classList.add("thinking-state");
|
||||||
|
const startTime = performance.now();
|
||||||
|
try {
|
||||||
|
const response =
|
||||||
|
await fetch("chat.php", {
|
||||||
|
method: "POST",
|
||||||
|
headers: { "Content-Type":"application/json" },
|
||||||
|
body: JSON.stringify({ model: modelSelect.value, messages: chatHistory})
|
||||||
|
});
|
||||||
|
|
||||||
|
thinking.classList.remove("thinking-state");
|
||||||
|
|
||||||
|
const data = await response.json();
|
||||||
|
const endTime = performance.now();
|
||||||
|
const totalDuration = ((endTime-startTime)/1000).toFixed(2);
|
||||||
|
|
||||||
|
if (data.error) {
|
||||||
|
thinking.textContent = data.error;
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
const html = marked.parse(data.message.content);
|
||||||
|
const tokens = data.eval_count || 0;
|
||||||
|
const promptTokens = data.prompt_eval_count || 0;
|
||||||
|
const generationSeconds = data.eval_duration ? data.eval_duration / 1000000000 : 0;
|
||||||
|
const tps = (tokens>0 && generationSeconds>0) ? (tokens/generationSeconds).toFixed(1) : 0;
|
||||||
|
|
||||||
|
let footer = "Time: " + totalDuration + " sec";
|
||||||
|
if(tokens>0){
|
||||||
|
footer += " | Prompt " + promptTokens + " t | Answer " + tokens
|
||||||
|
+ " t (" + tps + " t/s)";
|
||||||
|
}
|
||||||
|
|
||||||
|
thinking.innerHTML =
|
||||||
|
html +
|
||||||
|
'<div style="margin-top:8px;font-size:11px;color:#999;text-align:right;font-style:italic;">'
|
||||||
|
+ footer +
|
||||||
|
'</div>';
|
||||||
|
|
||||||
|
chatHistory.push({
|
||||||
|
|
||||||
|
role:"assistant",
|
||||||
|
content:data.message.content
|
||||||
|
|
||||||
|
});
|
||||||
|
|
||||||
|
await saveChat();
|
||||||
|
|
||||||
|
}
|
||||||
|
catch(err){
|
||||||
|
|
||||||
|
console.error(err);
|
||||||
|
|
||||||
|
thinking.classList.remove("thinking-state");
|
||||||
|
|
||||||
|
thinking.textContent =
|
||||||
|
"Backend connection failed.";
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ==========================================================
|
||||||
|
New Chat
|
||||||
|
========================================================== */
|
||||||
|
newChatBtn.addEventListener("click", () => {
|
||||||
|
currentChatId = null;
|
||||||
|
chatHistory = [];
|
||||||
|
chatMessages.innerHTML = "";
|
||||||
|
appendMessage("system","Conversation started.");
|
||||||
|
loadHistory();
|
||||||
|
});
|
||||||
|
|
||||||
|
modelSelect.addEventListener("change", () => {
|
||||||
|
if (modelSelect.value && modelSelect.value !== "Loading models..." && modelSelect.value !== "No Models" && modelSelect.value !== "Connection failed") {
|
||||||
|
saveConfig(modelSelect.value);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
/* ==========================================================
|
||||||
|
Keyboard
|
||||||
|
========================================================== */
|
||||||
|
|
||||||
|
sendBtn.addEventListener("click",sendMessage);
|
||||||
|
userInput.addEventListener("keydown", function(e){
|
||||||
|
if(e.key==="Enter" && !e.shiftKey){
|
||||||
|
e.preventDefault();
|
||||||
|
sendMessage();
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
/* ==========================================================
|
||||||
|
Startup
|
||||||
|
========================================================== */
|
||||||
|
|
||||||
|
loadModels();
|
||||||
|
loadHistory();
|
||||||
|
|
||||||
|
</script>
|
||||||
|
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
|
|
||||||
File diff suppressed because one or more lines are too long
@ -0,0 +1,241 @@
|
|||||||
|
<?php
|
||||||
|
|
||||||
|
header('Content-Type: application/json');
|
||||||
|
|
||||||
|
require_once __DIR__ . '/default.php';
|
||||||
|
|
||||||
|
/*----------------------------------------------------------
|
||||||
|
- Create storage file if necessary
|
||||||
|
----------------------------------------------------------*/
|
||||||
|
if (!file_exists(CHAT_HISTORY_FILE)) {
|
||||||
|
if (@file_put_contents(CHAT_HISTORY_FILE, '') === false) {
|
||||||
|
http_response_code(500);
|
||||||
|
echo json_encode([
|
||||||
|
'error' => 'Cannot create history file.'
|
||||||
|
]);
|
||||||
|
exit;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/*----------------------------------------------------------
|
||||||
|
- Helper
|
||||||
|
----------------------------------------------------------*/
|
||||||
|
function readChats() {
|
||||||
|
$result = [];
|
||||||
|
|
||||||
|
$fp = fopen(CHAT_HISTORY_FILE, 'c+');
|
||||||
|
if (!$fp) {
|
||||||
|
return [];
|
||||||
|
}
|
||||||
|
|
||||||
|
flock($fp, LOCK_SH);
|
||||||
|
while (($line = fgets($fp)) !== false) {
|
||||||
|
|
||||||
|
$line = trim($line);
|
||||||
|
if ($line === '') {
|
||||||
|
continue;
|
||||||
|
}
|
||||||
|
|
||||||
|
$obj = json_decode($line, true);
|
||||||
|
if (is_array($obj)) {
|
||||||
|
$result[] = $obj;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
flock($fp, LOCK_UN);
|
||||||
|
fclose($fp);
|
||||||
|
|
||||||
|
return $result;
|
||||||
|
}
|
||||||
|
|
||||||
|
function writeChats($chats) {
|
||||||
|
$fp = fopen(CHAT_HISTORY_FILE, 'w');
|
||||||
|
|
||||||
|
if (!$fp) {
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
|
||||||
|
flock($fp, LOCK_EX);
|
||||||
|
foreach ($chats as $chat) {
|
||||||
|
fwrite($fp, json_encode($chat, JSON_UNESCAPED_UNICODE) . PHP_EOL);
|
||||||
|
}
|
||||||
|
|
||||||
|
fflush($fp);
|
||||||
|
|
||||||
|
flock($fp, LOCK_UN);
|
||||||
|
fclose($fp);
|
||||||
|
|
||||||
|
return true;
|
||||||
|
}
|
||||||
|
|
||||||
|
function createTitle($messages) {
|
||||||
|
foreach ($messages as $msg) {
|
||||||
|
if (($msg['role'] ?? '') === 'user') {
|
||||||
|
$title = trim($msg['content']);
|
||||||
|
if (mb_strlen($title) > 60) {
|
||||||
|
$title = mb_substr($title, 0, 60) . "...";
|
||||||
|
}
|
||||||
|
return $title;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
return "Untitled Chat";
|
||||||
|
}
|
||||||
|
|
||||||
|
/*----------------------------------------------------------
|
||||||
|
- Action
|
||||||
|
----------------------------------------------------------*/
|
||||||
|
|
||||||
|
$action = $_GET['action'] ?? '';
|
||||||
|
switch ($action) {
|
||||||
|
/*------------------------------------------------------
|
||||||
|
- LIST
|
||||||
|
------------------------------------------------------*/
|
||||||
|
case 'list':
|
||||||
|
$chats = readChats();
|
||||||
|
$list = [];
|
||||||
|
foreach ($chats as $chat) {
|
||||||
|
$list[] = [
|
||||||
|
'id' => $chat['id'],
|
||||||
|
'title' => $chat['title'],
|
||||||
|
'created' => $chat['created'],
|
||||||
|
'model' => $chat['model'] ?? ''
|
||||||
|
];
|
||||||
|
}
|
||||||
|
|
||||||
|
usort($list, function($a, $b) {
|
||||||
|
return strcmp($b['created'], $a['created']);
|
||||||
|
});
|
||||||
|
|
||||||
|
echo json_encode($list);
|
||||||
|
exit;
|
||||||
|
|
||||||
|
/*------------------------------------------------------
|
||||||
|
- LOAD
|
||||||
|
------------------------------------------------------*/
|
||||||
|
case 'load':
|
||||||
|
$id = $_GET['id'] ?? '';
|
||||||
|
if ($id == '') {
|
||||||
|
echo json_encode([
|
||||||
|
'error' => 'Missing id.'
|
||||||
|
]);
|
||||||
|
exit;
|
||||||
|
}
|
||||||
|
|
||||||
|
$chats = readChats();
|
||||||
|
foreach ($chats as $chat) {
|
||||||
|
if ($chat['id'] === $id) {
|
||||||
|
echo json_encode($chat);
|
||||||
|
exit;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
echo json_encode([
|
||||||
|
'error' => 'Chat not found.'
|
||||||
|
]);
|
||||||
|
exit;
|
||||||
|
/*------------------------------------------------------
|
||||||
|
- SAVE
|
||||||
|
------------------------------------------------------*/
|
||||||
|
case 'save':
|
||||||
|
if ($_SERVER['REQUEST_METHOD'] !== 'POST') {
|
||||||
|
echo json_encode([
|
||||||
|
'error' => 'POST required.'
|
||||||
|
]);
|
||||||
|
exit;
|
||||||
|
}
|
||||||
|
|
||||||
|
$input = json_decode(file_get_contents('php://input'), true);
|
||||||
|
if (!is_array($input)) {
|
||||||
|
echo json_encode([
|
||||||
|
'error' => 'Invalid JSON.'
|
||||||
|
]);
|
||||||
|
exit;
|
||||||
|
}
|
||||||
|
|
||||||
|
$messages = $input['messages'] ?? [];
|
||||||
|
if (!is_array($messages) || count($messages) == 0) {
|
||||||
|
echo json_encode([
|
||||||
|
'error' => 'No messages.'
|
||||||
|
]);
|
||||||
|
exit;
|
||||||
|
}
|
||||||
|
|
||||||
|
$id = $input['id'] ?? '';
|
||||||
|
if ($id == '') {
|
||||||
|
$id = uniqid('', true);
|
||||||
|
}
|
||||||
|
|
||||||
|
$title = createTitle($messages);
|
||||||
|
$model = $input['model'] ?? '';
|
||||||
|
$chat = [
|
||||||
|
'id' => $id,
|
||||||
|
'title' => $title,
|
||||||
|
'created' => date('Y-m-d H:i:s'),
|
||||||
|
'model' => $model,
|
||||||
|
'messages' => $messages
|
||||||
|
];
|
||||||
|
|
||||||
|
$chats = readChats();
|
||||||
|
$found = false;
|
||||||
|
foreach ($chats as &$existing) {
|
||||||
|
if ($existing['id'] === $id) {
|
||||||
|
$existing = $chat;
|
||||||
|
$found = true;
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
if (!$found) {
|
||||||
|
$chats[] = $chat;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (!writeChats($chats)) {
|
||||||
|
echo json_encode([
|
||||||
|
'error' => 'Unable to save.'
|
||||||
|
]);
|
||||||
|
exit;
|
||||||
|
}
|
||||||
|
|
||||||
|
echo json_encode([
|
||||||
|
'success' => true,
|
||||||
|
'id' => $id,
|
||||||
|
'title' => $title
|
||||||
|
]);
|
||||||
|
exit;
|
||||||
|
|
||||||
|
/*------------------------------------------------------
|
||||||
|
- DELETE
|
||||||
|
------------------------------------------------------*/
|
||||||
|
case 'delete':
|
||||||
|
$id = $_GET['id'] ?? '';
|
||||||
|
|
||||||
|
if ($id == '') {
|
||||||
|
echo json_encode([
|
||||||
|
'error' => 'Missing id.'
|
||||||
|
]);
|
||||||
|
exit;
|
||||||
|
}
|
||||||
|
|
||||||
|
$chats = readChats();
|
||||||
|
$newChats = [];
|
||||||
|
|
||||||
|
foreach ($chats as $chat) {
|
||||||
|
if ($chat['id'] !== $id) {
|
||||||
|
$newChats[] = $chat;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
writeChats($newChats);
|
||||||
|
echo json_encode([
|
||||||
|
'success' => true
|
||||||
|
]);
|
||||||
|
exit;
|
||||||
|
/*------------------------------------------------------
|
||||||
|
- DEFAULT
|
||||||
|
------------------------------------------------------*/
|
||||||
|
|
||||||
|
default:
|
||||||
|
echo json_encode([
|
||||||
|
'error' => 'Unknown action.'
|
||||||
|
]);
|
||||||
|
exit;
|
||||||
|
}
|
||||||
Loading…
Reference in new issue