|
|
<!DOCTYPE html>
|
|
|
<html lang="zh-CN">
|
|
|
<head>
|
|
|
<meta charset="UTF-8">
|
|
|
<title>WT - Copilot</title>
|
|
|
<style>
|
|
|
body {
|
|
|
margin: 0;
|
|
|
display: flex;
|
|
|
height: 100vh;
|
|
|
font-family: "PingFang SC", "Microsoft YaHei", serif;
|
|
|
background-color: #f5f5f5;
|
|
|
}
|
|
|
|
|
|
|
|
|
#sidebar {
|
|
|
width: 280px;
|
|
|
background: #fff;
|
|
|
border-right: 1px solid #ddd;
|
|
|
padding: 20px;
|
|
|
display: flex;
|
|
|
flex-direction: column;
|
|
|
gap: 15px;
|
|
|
box-shadow: 2px 0 5px rgba(0, 0, 0, 0.05);
|
|
|
z-index: 10;
|
|
|
}
|
|
|
|
|
|
.setting-item {
|
|
|
display: flex;
|
|
|
flex-direction: column;
|
|
|
gap: 5px;
|
|
|
}
|
|
|
|
|
|
.setting-item label {
|
|
|
font-size: 12px;
|
|
|
color: #666;
|
|
|
font-weight: bold;
|
|
|
}
|
|
|
|
|
|
input {
|
|
|
padding: 8px;
|
|
|
border: 1px solid #ccc;
|
|
|
border-radius: 4px;
|
|
|
}
|
|
|
|
|
|
|
|
|
#main-container {
|
|
|
flex: 1;
|
|
|
padding: 40px;
|
|
|
display: flex;
|
|
|
justify-content: center;
|
|
|
overflow-y: auto;
|
|
|
}
|
|
|
|
|
|
#editor {
|
|
|
width: 100%;
|
|
|
max-width: 800px;
|
|
|
min-height: 85vh;
|
|
|
background: white;
|
|
|
padding: 40px;
|
|
|
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
|
|
|
outline: none;
|
|
|
font-size: 18px;
|
|
|
line-height: 1.8;
|
|
|
color: #333;
|
|
|
white-space: pre-wrap;
|
|
|
word-wrap: break-word;
|
|
|
|
|
|
display: block;
|
|
|
}
|
|
|
|
|
|
|
|
|
.ghost-text {
|
|
|
color: #aaa;
|
|
|
user-select: none;
|
|
|
pointer-events: none;
|
|
|
font-style: italic;
|
|
|
}
|
|
|
|
|
|
.status-box {
|
|
|
font-size: 12px;
|
|
|
margin-top: auto;
|
|
|
color: #888;
|
|
|
background: #f9f9f9;
|
|
|
padding: 10px;
|
|
|
border-radius: 5px;
|
|
|
}
|
|
|
|
|
|
.kbd {
|
|
|
background: #eee;
|
|
|
padding: 2px 4px;
|
|
|
border-radius: 3px;
|
|
|
border: 1px solid #ccc;
|
|
|
color: #333;
|
|
|
}
|
|
|
</style>
|
|
|
</head>
|
|
|
<body>
|
|
|
|
|
|
<div id="sidebar">
|
|
|
<h3>WTC - WebUI</h3>
|
|
|
<div class="setting-item">
|
|
|
<label>API Endpoint</label>
|
|
|
<input type="text" id="api-url" value="http://localhost:8080/v1/chat/completions">
|
|
|
</div>
|
|
|
<div class="setting-item">
|
|
|
<label>Temperature</label>
|
|
|
<input type="number" id="temp" value="0.7" step="0.1" min="0" max="2">
|
|
|
</div>
|
|
|
<div class="setting-item">
|
|
|
<label>Max Tokens</label>
|
|
|
<input type="number" id="max-tokens" value="150">
|
|
|
</div>
|
|
|
|
|
|
<div class="status-box">
|
|
|
<p>✨ <span class="kbd">Tab</span> 触发续写</p>
|
|
|
<p>🤝 <span class="kbd">Tab</span> 接受建议</p>
|
|
|
<p>Powered by WT-Copilot™ | Trina AI Lab</p>
|
|
|
<hr>
|
|
|
<p id="info-display">状态：就绪</p>
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
<div id="main-container">
|
|
|
<div id="editor" contenteditable="true" spellcheck="false">在这里输入故事开头...</div>
|
|
|
</div>
|
|
|
|
|
|
<script>
|
|
|
const editor = document.getElementById('editor');
|
|
|
const infoDisplay = document.getElementById('info-display');
|
|
|
let isFetching = false;
|
|
|
editor.addEventListener('paste', (e) => {
|
|
|
e.preventDefault();
|
|
|
const text = (e.originalEvent || e).clipboardData.getData('text/plain');
|
|
|
document.execCommand('insertText', false, text);
|
|
|
});
|
|
|
|
|
|
function periodicSanitize() {
|
|
|
if (isFetching) return;
|
|
|
|
|
|
const ghost = editor.querySelector('.ghost-text');
|
|
|
if (!ghost) {
|
|
|
const hasComplexHTML = Array.from(editor.childNodes).some(node =>
|
|
|
node.nodeType === 1 && node.tagName !== 'SPAN' && node.tagName !== 'BR'
|
|
|
);
|
|
|
if (hasComplexHTML) {
|
|
|
const selection = window.getSelection();
|
|
|
const offset = selection.focusOffset;
|
|
|
editor.innerText = editor.innerText;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
|
|
|
setInterval(periodicSanitize, 5000);
|
|
|
|
|
|
function getContext() {
|
|
|
const tempDiv = document.createElement('div');
|
|
|
tempDiv.innerHTML = editor.innerHTML;
|
|
|
const ghost = tempDiv.querySelector('.ghost-text');
|
|
|
if (ghost) ghost.remove();
|
|
|
|
|
|
const fullText = tempDiv.innerText;
|
|
|
return fullText.slice(-1000);
|
|
|
}
|
|
|
|
|
|
function removeGhost() {
|
|
|
const ghost = editor.querySelector('.ghost-text');
|
|
|
if (ghost) ghost.remove();
|
|
|
}
|
|
|
|
|
|
function acceptGhost() {
|
|
|
const ghost = editor.querySelector('.ghost-text');
|
|
|
if (ghost) {
|
|
|
const text = ghost.innerText;
|
|
|
removeGhost();
|
|
|
document.execCommand('insertText', false, text);
|
|
|
}
|
|
|
}
|
|
|
|
|
|
async function fetchCompletion() {
|
|
|
if (isFetching) return;
|
|
|
|
|
|
const context = getContext();
|
|
|
const apiUrl = document.getElementById('api-url').value;
|
|
|
const temp = parseFloat(document.getElementById('temp').value);
|
|
|
const maxTokens = parseInt(document.getElementById('max-tokens').value);
|
|
|
|
|
|
isFetching = true;
|
|
|
infoDisplay.innerText = "状态：AI 正在思考...";
|
|
|
|
|
|
try {
|
|
|
const response = await fetch(apiUrl, {
|
|
|
method: 'POST',
|
|
|
headers: {'Content-Type': 'application/json'},
|
|
|
body: JSON.stringify({
|
|
|
"messages": [{"role": "user", "content": `续写：${context}\n/no_think`}],
|
|
|
"temperature": temp,
|
|
|
"max_tokens": maxTokens
|
|
|
})
|
|
|
});
|
|
|
const data = await response.json();
|
|
|
let rawContent = data.choices[0].message.content;
|
|
|
const cleanContent = rawContent.replace(/<think>[\s\S]*?<\/think>/g, '').trimStart();
|
|
|
|
|
|
if (cleanContent) {
|
|
|
showGhost(cleanContent);
|
|
|
infoDisplay.innerText = "状态：已生成 (Tab 接受)";
|
|
|
} else {
|
|
|
infoDisplay.innerText = "状态：未生成有效补全";
|
|
|
}
|
|
|
} catch (error) {
|
|
|
infoDisplay.innerText = "状态：API 连接失败";
|
|
|
} finally {
|
|
|
isFetching = false;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
function showGhost(text) {
|
|
|
removeGhost();
|
|
|
const selection = window.getSelection();
|
|
|
if (selection.rangeCount > 0) {
|
|
|
const range = selection.getRangeAt(0);
|
|
|
const ghostSpan = document.createElement('span');
|
|
|
ghostSpan.className = 'ghost-text';
|
|
|
ghostSpan.innerText = text;
|
|
|
|
|
|
range.insertNode(ghostSpan);
|
|
|
range.setStartBefore(ghostSpan);
|
|
|
range.collapse(true);
|
|
|
}
|
|
|
}
|
|
|
|
|
|
editor.addEventListener('keydown', (e) => {
|
|
|
const hasGhost = !!editor.querySelector('.ghost-text');
|
|
|
|
|
|
if (e.key === 'Tab') {
|
|
|
e.preventDefault();
|
|
|
if (hasGhost) {
|
|
|
acceptGhost();
|
|
|
} else {
|
|
|
fetchCompletion();
|
|
|
}
|
|
|
return;
|
|
|
}
|
|
|
if (hasGhost && !['Control', 'Alt', 'Shift', 'Meta'].includes(e.key)) {
|
|
|
removeGhost();
|
|
|
infoDisplay.innerText = "状态：就绪";
|
|
|
}
|
|
|
});
|
|
|
editor.addEventListener('focus', function () {
|
|
|
if (this.innerText === '在这里输入故事开头...') {
|
|
|
this.innerText = '';
|
|
|
}
|
|
|
}, {once: true});
|
|
|
</script>
|
|
|
|
|
|
</body>
|
|
|
</html> |
