实际上就是把智慧之泉的API调用
和屑文本对比的网页合并了
UI是极其难受 输入框超级小 
像我这样提示1700补全1000的 用500次就欠费了
代码
<!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>
<link href="https://fonts.googleapis.com/css2?family=Ma+Shan+Zheng&family=Noto+Serif+SC:wght@400;700&display=swap" rel="stylesheet">
<style>
:root {
--primary-color: #8e44ad;
--secondary-color: #3498db;
--background-color: #ecf0f1;
--text-color: #34495e;
--accent-color: #e74c3c;
--border-radius: 15px;
}
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
font-family: 'Noto Serif SC', serif;
line-height: 1.6;
color: var(--text-color);
background: linear-gradient(135deg, var(--background-color), #bdc3c7);
padding: 20px;
min-height: 100vh;
}
.container {
max-width: 1200px;
margin: 0 auto;
display: grid;
grid-template-columns: 2fr 1fr;
gap: 30px;
}
.chat-container, .compare-container {
background-color: rgba(255, 255, 255, 0.9);
border-radius: var(--border-radius);
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
overflow: hidden;
transition: all 0.3s ease;
}
.chat-container:hover, .compare-container:hover {
transform: translateY(-5px);
box-shadow: 0 15px 30px rgba(0, 0, 0, 0.15);
}
.chat-header, .compare-header {
background: linear-gradient(45deg, var(--primary-color), var(--secondary-color));
color: #fff;
padding: 20px;
font-size: 1.5em;
font-weight: 700;
text-align: center;
font-family: 'Ma Shan Zheng', cursive;
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
}
.chat-window, .compare-window {
height: 500px;
overflow-y: auto;
padding: 20px;
background: url('https://www.transparenttextures.com/patterns/rice-paper-3.png');
}
.message, .compare-text {
margin-bottom: 20px;
padding: 15px;
border-radius: var(--border-radius);
max-width: 80%;
animation: fadeIn 0.5s ease-out;
box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1);
}
@keyframes fadeIn {
from { opacity: 0; transform: translateY(20px); }
to { opacity: 1; transform: translateY(0); }
}
.user-message {
background: linear-gradient(45deg, var(--primary-color), var(--secondary-color));
color: #fff;
align-self: flex-end;
margin-left: auto;
}
.ai-message {
background: linear-gradient(45deg, #f1f1f1, #e1e1e1);
align-self: flex-start;
}
.input-area {
display: flex;
padding: 20px;
background-color: rgba(255, 255, 255, 0.9);
border-top: 1px solid #e0e0e0;
}
#user-input, .compare-input {
flex-grow: 1;
padding: 15px;
border: 2px solid var(--primary-color);
border-radius: var(--border-radius);
font-size: 16px;
transition: all 0.3s ease;
}
#user-input:focus, .compare-input:focus {
outline: none;
box-shadow: 0 0 10px rgba(142, 68, 173, 0.5);
}
button {
padding: 15px 30px;
background: linear-gradient(45deg, var(--primary-color), var(--secondary-color));
color: #fff;
border: none;
border-radius: var(--border-radius);
cursor: pointer;
font-size: 16px;
font-weight: 700;
transition: all 0.3s ease;
margin-left: 10px;
text-transform: uppercase;
letter-spacing: 1px;
}
button:hover {
background: linear-gradient(45deg, var(--secondary-color), var(--primary-color));
transform: translateY(-2px);
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
}
.settings-panel {
background-color: rgba(255, 255, 255, 0.9);
border-radius: var(--border-radius);
padding: 30px;
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
}
.settings-panel h2 {
margin-bottom: 20px;
color: var(--primary-color);
font-family: 'Ma Shan Zheng', cursive;
font-size: 2em;
text-align: center;
}
.settings-panel input {
width: 100%;
padding: 15px;
margin-bottom: 15px;
border: 2px solid var(--secondary-color);
border-radius: var(--border-radius);
font-size: 16px;
transition: all 0.3s ease;
}
.settings-panel input:focus {
outline: none;
border-color: var(--primary-color);
box-shadow: 0 0 10px rgba(52, 152, 219, 0.5);
}
.compare-container {
display: none;
margin-top: 30px;
}
.compare-toggle {
display: flex;
align-items: center;
margin-bottom: 20px;
}
.compare-toggle input {
margin-right: 10px;
}
.diff {
background-color: #ffeaa7;
padding: 2px 0;
}
@media (max-width: 768px) {
.container {
grid-template-columns: 1fr;
}
}
</style>
</head>
<body>
<div class="container">
<div class="chat-container">
<div class="chat-header">智慧之泉 - 与AI共舞</div>
<div class="chat-window" id="chat-window">
<!-- 消息将在这里添加 -->
</div>
<div class="input-area">
<input type="text" id="user-input" placeholder="在此倾诉你的思绪...">
<button onclick="sendMessage()">启迪灵感</button>
</div>
</div>
<div class="settings-panel">
<h2>智慧之源</h2>
<input type="text" id="api-url" placeholder="AI智慧之门" value="这里应该填写API站点链接">
<input type="text" id="api-key" placeholder="开启智慧之钥" value="请填写属于你的api key">
<input type="text" id="model-name" placeholder="选择你的智慧导师" value="可以自由填写你想对话的人物哦">
<button onclick="saveSettings()">珍藏智慧</button>
<div class="compare-toggle">
<input type="checkbox" id="compare-toggle" onchange="toggleCompareContainer()">
<label for="compare-toggle">启用文本对比工具</label>
</div>
</div>
</div>
<div class="compare-container" id="compare-container">
<div class="compare-header">文本对比 - 洞察差异之美</div>
<div class="input-area">
<textarea class="compare-input" id="text1" placeholder="输入第一段文本，让智慧之泉品鉴其中奥妙"></textarea>
</div>
<div class="input-area">
<textarea class="compare-input" id="text2" placeholder="输入第二段文本，让智慧之泉探寻其中玄机"></textarea>
</div>
<div class="input-area">
<input type="text" id="compare-prompt" placeholder="请输入对比提示，如：分析文风差异">
<button onclick="compareTexts()">启迪对比之眼</button>
</div>
<div class="compare-window" id="compare-window">
<!-- 对比结果将在这里显示 -->
</div>
</div>
<script>
window.onload = function() {
loadSettings();
addMessage("欢迎来到智慧之泉，让我们一起探索思想的深邃与灵感的闪耀。", 'ai-message');
}
async function sendMessage() {
const userInput = document.getElementById('user-input');
const chatWindow = document.getElementById('chat-window');
if (!userInput.value.trim()) return;
addMessage(userInput.value, 'user-message');
const apiUrl = document.getElementById('api-url').value;
const apiKey = document.getElementById('api-key').value;
const modelName = document.getElementById('model-name').value;
if (!apiUrl || !apiKey || !modelName) {
addMessage('请先在智慧之源中填写必要的信息，以开启我们的对话之旅。', 'ai-message');
return;
}
const userMessage = userInput.value;
userInput.value = '';
try {
const response = await fetch(`${apiUrl}/v1/chat/completions`, {
method: 'POST',
headers: {
'Content-Type': 'application/json',
'Authorization': `Bearer ${apiKey}`
},
body: JSON.stringify({
model: modelName,
messages: [{ role: 'user', content: userMessage }]
})
});
if (!response.ok) {
throw new Error('智慧之泉暂时沉寂，请稍后再试。');
}
const data = await response.json();
typeWriterEffect(data.choices[0].message.content, 'ai-message');
} catch (error) {
console.error('Error:', error);
addMessage('抱歉，智慧之泉暂时无法回应。请检查你的连接，或稍后再来。', 'ai-message');
}
}
function addMessage(content, className) {
const chatWindow = document.getElementById('chat-window');
const messageDiv = document.createElement('div');
messageDiv.className = `message ${className}`;
messageDiv.textContent = content;
chatWindow.appendChild(messageDiv);
chatWindow.scrollTop = chatWindow.scrollHeight;
}
function typeWriterEffect(text, className, speed = 30) {
const chatWindow = document.getElementById('chat-window');
const messageDiv = document.createElement('div');
messageDiv.className = `message ${className}`;
chatWindow.appendChild(messageDiv);
let i = 0;
function type() {
if (i < text.length) {
messageDiv.textContent += text.charAt(i);
i++;
chatWindow.scrollTop = chatWindow.scrollHeight;
setTimeout(type, speed);
}
}
type();
}
function saveSettings() {
const apiUrl = document.getElementById('api-url').value;
const apiKey = document.getElementById('api-key').value;
const modelName = document.getElementById('model-name').value;
localStorage.setItem('apiUrl', apiUrl);
localStorage.setItem('apiKey', apiKey);
localStorage.setItem('modelName', modelName);
addMessage('你的智慧设置已经被珍藏。让我们继续我们的思想之旅吧！', 'ai-message');
}
function loadSettings() {
const apiUrl = localStorage.getItem('apiUrl');
const apiKey = localStorage.getItem('apiKey');
const modelName = localStorage.getItem('modelName');
if (apiUrl) document.getElementById('api-url').value = apiUrl;
if (apiKey) document.getElementById('api-key').value = apiKey;
if (modelName) document.getElementById('model-name').value = modelName;
}
function toggleCompareContainer() {
const compareContainer = document.getElementById('compare-container');
compareContainer.style.display = document.getElementById('compare-toggle').checked ? 'block' : 'none';
}
async function compareTexts() {
const text1 = document.getElementById('text1').value;
const text2 = document.getElementById('text2').value;
const comparePrompt = document.getElementById('compare-prompt').value;
const compareWindow = document.getElementById('compare-window');
if (!text1 || !text2) {
compareWindow.innerHTML = '<div class="message ai-message">请在两个文本框中都输入内容，让智慧之泉为你揭示其中奥秘。</div>';
return;
}
const apiUrl = document.getElementById('api-url').value;
const apiKey = document.getElementById('api-key').value;
const modelName = document.getElementById('model-name').value;
if (!apiUrl || !apiKey || !modelName) {
compareWindow.innerHTML = '<div class="message ai-message">请先在智慧之源中填写必要的信息，以开启我们的对比之旅。</div>';
return;
}
compareWindow.innerHTML = '<div class="message ai-message">智慧之泉正在深思熟虑，请稍候...</div>';
try {
const response = await fetch(`${apiUrl}/v1/chat/completions`, {
method: 'POST',
headers: {
'Content-Type': 'application/json',
'Authorization': `Bearer ${apiKey}`
},
body: JSON.stringify({
model: modelName,
messages: [
{ role: 'system', content: '你是一个精通文本分析和对比的AI助手。' },
{ role: 'user', content: `请分析以下两段文本，${comparePrompt}:\n\n文本1: ${text1}\n\n文本2: ${text2}` }
]
})
});
if (!response.ok) {
throw new Error('智慧之泉暂时无法回应，请稍后再试。');
}
const data = await response.json();
const analysis = data.choices[0].message.content;
compareWindow.innerHTML = `<div class="message ai-message">${analysis}</div>`;
} catch (error) {
console.error('Error:', error);
compareWindow.innerHTML = '<div class="message ai-message">抱歉，智慧之泉暂时无法完成对比。请检查你的连接，或稍后再来。</div>';
}
}
</script>
</body>
</html>
技术贴+福利帖
