优化结果
This commit is contained in:
246
InfoGenie-frontend/public/aimodelapp/AI写诗小助手/index.html
Normal file
246
InfoGenie-frontend/public/aimodelapp/AI写诗小助手/index.html
Normal file
@@ -0,0 +1,246 @@
|
||||
<!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: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Helvetica Neue', Arial, sans-serif;
|
||||
background: linear-gradient(135deg, #87CEEB 0%, #98FB98 100%);
|
||||
min-height: 100vh;
|
||||
padding: 20px;
|
||||
color: #1D1D1F;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
}
|
||||
|
||||
.container {
|
||||
max-width: 600px;
|
||||
margin: 0 auto;
|
||||
background: rgba(255, 255, 255, 0.85);
|
||||
border-radius: 24px;
|
||||
padding: 32px;
|
||||
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12), 0 2px 8px rgba(0, 0, 0, 0.08);
|
||||
backdrop-filter: blur(20px) saturate(180%);
|
||||
border: 1px solid rgba(255, 255, 255, 0.2);
|
||||
}
|
||||
|
||||
.header {
|
||||
text-align: center;
|
||||
margin-bottom: 32px;
|
||||
}
|
||||
|
||||
.title {
|
||||
font-size: 2.25rem;
|
||||
color: #1D1D1F;
|
||||
margin-bottom: 8px;
|
||||
font-weight: 600;
|
||||
letter-spacing: -0.02em;
|
||||
}
|
||||
|
||||
.subtitle {
|
||||
color: #86868B;
|
||||
font-size: 1.0625rem;
|
||||
margin-bottom: 24px;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
.form-group {
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
|
||||
.form-label {
|
||||
display: block;
|
||||
margin-bottom: 8px;
|
||||
font-weight: 600;
|
||||
color: #1D1D1F;
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
.form-input {
|
||||
width: 100%;
|
||||
padding: 16px;
|
||||
border: 1px solid rgba(0, 0, 0, 0.1);
|
||||
border-radius: 12px;
|
||||
font-size: 1rem;
|
||||
transition: all 0.2s ease;
|
||||
background: rgba(255, 255, 255, 0.8);
|
||||
backdrop-filter: blur(10px);
|
||||
}
|
||||
|
||||
.form-input:focus {
|
||||
outline: none;
|
||||
border-color: #007AFF;
|
||||
background: rgba(255, 255, 255, 0.95);
|
||||
box-shadow: 0 0 0 4px rgba(0, 122, 255, 0.1);
|
||||
}
|
||||
|
||||
.textarea {
|
||||
resize: vertical;
|
||||
min-height: 120px;
|
||||
font-family: inherit;
|
||||
}
|
||||
|
||||
.btn {
|
||||
width: 100%;
|
||||
padding: 16px;
|
||||
background: #007AFF;
|
||||
color: white;
|
||||
border: none;
|
||||
border-radius: 12px;
|
||||
font-size: 1.0625rem;
|
||||
font-weight: 600;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s ease;
|
||||
margin-bottom: 24px;
|
||||
box-shadow: 0 2px 8px rgba(0, 122, 255, 0.25);
|
||||
}
|
||||
|
||||
.btn:hover {
|
||||
background: #0056CC;
|
||||
transform: translateY(-1px);
|
||||
box-shadow: 0 4px 16px rgba(0, 122, 255, 0.35);
|
||||
}
|
||||
|
||||
.btn:active {
|
||||
transform: translateY(0);
|
||||
background: #004499;
|
||||
}
|
||||
|
||||
.btn:disabled {
|
||||
opacity: 0.5;
|
||||
cursor: not-allowed;
|
||||
transform: none;
|
||||
background: #86868B;
|
||||
}
|
||||
|
||||
.result-section {
|
||||
margin-top: 32px;
|
||||
}
|
||||
|
||||
.result-title {
|
||||
font-size: 1.25rem;
|
||||
color: #1D1D1F;
|
||||
margin-bottom: 16px;
|
||||
text-align: center;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.poem-output {
|
||||
background: rgba(255, 255, 255, 0.6);
|
||||
border: 1px solid rgba(0, 0, 0, 0.08);
|
||||
border-radius: 16px;
|
||||
padding: 28px;
|
||||
min-height: 200px;
|
||||
white-space: pre-wrap;
|
||||
font-family: 'PingFang SC', 'Hiragino Sans GB', 'KaiTi', '楷体', serif;
|
||||
font-size: 1.1875rem;
|
||||
line-height: 1.8;
|
||||
text-align: center;
|
||||
color: #1D1D1F;
|
||||
letter-spacing: 0.5px;
|
||||
backdrop-filter: blur(10px);
|
||||
}
|
||||
|
||||
.loading {
|
||||
display: none;
|
||||
text-align: center;
|
||||
color: #007AFF;
|
||||
font-style: normal;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.error {
|
||||
color: #FF3B30;
|
||||
background: rgba(255, 59, 48, 0.1);
|
||||
border: 1px solid rgba(255, 59, 48, 0.2);
|
||||
padding: 16px;
|
||||
border-radius: 12px;
|
||||
margin-top: 16px;
|
||||
font-weight: 500;
|
||||
backdrop-filter: blur(10px);
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
body {
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.container {
|
||||
padding: 20px;
|
||||
margin: 10px;
|
||||
}
|
||||
|
||||
.title {
|
||||
font-size: 2rem;
|
||||
}
|
||||
|
||||
.form-input {
|
||||
padding: 12px;
|
||||
}
|
||||
|
||||
.btn {
|
||||
padding: 12px;
|
||||
}
|
||||
|
||||
.poem-output {
|
||||
padding: 20px;
|
||||
font-size: 1.1rem;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 480px) {
|
||||
.title {
|
||||
font-size: 1.8rem;
|
||||
letter-spacing: 1px;
|
||||
}
|
||||
|
||||
.container {
|
||||
padding: 15px;
|
||||
}
|
||||
|
||||
.poem-output {
|
||||
font-size: 1rem;
|
||||
padding: 15px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="container">
|
||||
<div class="header">
|
||||
<h1 class="title">AI古诗生成器</h1>
|
||||
<p class="subtitle">让人工智能为您创作优美的中国古诗</p>
|
||||
</div>
|
||||
|
||||
<!-- GitHub令牌已内置，无需用户输入 -->
|
||||
|
||||
<div class="form-group">
|
||||
<label class="form-label" for="theme">作诗主题：</label>
|
||||
<textarea
|
||||
id="theme"
|
||||
class="form-input textarea"
|
||||
placeholder="请输入您想要的古诗主题，例如：春天的江南水乡、秋日的思乡之情、雪夜的孤独等..."
|
||||
>春天的江南水乡</textarea>
|
||||
</div>
|
||||
|
||||
<button id="generateBtn" class="btn">生成古诗</button>
|
||||
|
||||
<div class="result-section">
|
||||
<h3 class="result-title">生成的古诗</h3>
|
||||
<div id="loading" class="loading">正在创作中，请稍候...</div>
|
||||
<div id="poemOutput" class="poem-output">点击"生成古诗"按钮，AI将为您创作优美的古诗</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script src="env.js"></script>
|
||||
<script src="script.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
109
InfoGenie-frontend/public/aimodelapp/AI写诗小助手/script.js
Normal file
109
InfoGenie-frontend/public/aimodelapp/AI写诗小助手/script.js
Normal file
@@ -0,0 +1,109 @@
|
||||
// 从配置文件导入设置
|
||||
// 配置在 env.js 文件中定义
|
||||
|
||||
// DOM 元素
|
||||
const generateBtn = document.getElementById('generateBtn');
|
||||
const loading = document.getElementById('loading');
|
||||
const poemOutput = document.getElementById('poemOutput');
|
||||
const themeInput = document.getElementById('theme');
|
||||
|
||||
// 调用后端API
|
||||
async function callBackendAPI(theme) {
|
||||
try {
|
||||
const response = await fetch('http://127.0.0.1:5002/api/aimodelapp/poetry', {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json'
|
||||
},
|
||||
body: JSON.stringify({
|
||||
theme: theme
|
||||
})
|
||||
});
|
||||
|
||||
if (!response.ok) {
|
||||
const errorData = await response.json();
|
||||
throw new Error(errorData.error || `API请求失败: ${response.status} ${response.statusText}`);
|
||||
}
|
||||
|
||||
const data = await response.json();
|
||||
if (data.success) {
|
||||
return data.poem;
|
||||
} else {
|
||||
throw new Error(data.error || 'API响应格式异常');
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('API调用错误:', error);
|
||||
throw error;
|
||||
}
|
||||
}
|
||||
|
||||
// 显示错误信息
|
||||
function showErrorMessage(message) {
|
||||
// 清除之前的错误信息
|
||||
const existingError = document.querySelector('.error');
|
||||
if (existingError) {
|
||||
existingError.remove();
|
||||
}
|
||||
|
||||
const errorDiv = document.createElement('div');
|
||||
errorDiv.className = 'error';
|
||||
errorDiv.textContent = `生成失败：${message}。请检查网络连接。`;
|
||||
poemOutput.parentNode.appendChild(errorDiv);
|
||||
}
|
||||
|
||||
// 显示加载状态
|
||||
function showLoading(show) {
|
||||
loading.style.display = show ? 'block' : 'none';
|
||||
generateBtn.disabled = show;
|
||||
generateBtn.textContent = show ? '创作中...' : '生成古诗';
|
||||
}
|
||||
|
||||
// 生成古诗
|
||||
async function generatePoem() {
|
||||
const theme = themeInput.value.trim();
|
||||
|
||||
if (!theme) {
|
||||
alert('请输入作诗主题');
|
||||
return;
|
||||
}
|
||||
|
||||
showLoading(true);
|
||||
poemOutput.textContent = '';
|
||||
|
||||
// 清除之前的错误信息
|
||||
const existingError = document.querySelector('.error');
|
||||
if (existingError) {
|
||||
existingError.remove();
|
||||
}
|
||||
|
||||
try {
|
||||
const poem = await callBackendAPI(theme);
|
||||
poemOutput.textContent = poem.trim();
|
||||
} catch (error) {
|
||||
console.error('生成古诗失败:', error);
|
||||
showErrorMessage(error.message);
|
||||
poemOutput.textContent = '生成失败，请重试';
|
||||
} finally {
|
||||
showLoading(false);
|
||||
}
|
||||
}
|
||||
|
||||
// 事件监听器
|
||||
generateBtn.addEventListener('click', generatePoem);
|
||||
|
||||
// 回车键生成
|
||||
themeInput.addEventListener('keypress', (e) => {
|
||||
if (e.key === 'Enter' && !e.shiftKey) {
|
||||
e.preventDefault();
|
||||
generatePoem();
|
||||
}
|
||||
});
|
||||
|
||||
// 页面加载完成后的初始化
|
||||
document.addEventListener('DOMContentLoaded', () => {
|
||||
// 设置默认占位符
|
||||
poemOutput.textContent = '点击"生成古诗"按钮，AI将为您创作优美的古诗';
|
||||
});
|
||||
|
||||
// 导出函数供HTML调用
|
||||
window.generatePoem = generatePoem;
|
||||
43
InfoGenie-frontend/public/aimodelapp/AI变量命名助手/index.html
Normal file
43
InfoGenie-frontend/public/aimodelapp/AI变量命名助手/index.html
Normal file
@@ -0,0 +1,43 @@
|
||||
<!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 rel="stylesheet" href="styles.css">
|
||||
</head>
|
||||
<body>
|
||||
<div class="container">
|
||||
<div class="header">
|
||||
<h1 class="title">AI变量命名助手</h1>
|
||||
<p class="subtitle">让AI帮您生成规范的变量名</p>
|
||||
</div>
|
||||
|
||||
<div class="form-section">
|
||||
<div class="form-group">
|
||||
<label class="form-label" for="description">变量描述：</label>
|
||||
<textarea
|
||||
id="description"
|
||||
class="form-input textarea"
|
||||
placeholder="请描述变量的用途，例如：用户的姓名、商品的价格、数据库连接状态等..."
|
||||
>用户的姓名</textarea>
|
||||
</div>
|
||||
|
||||
<!-- 命名规范选择已移除，将生成所有5种规范的建议 -->
|
||||
|
||||
<button id="generateBtn" class="btn">生成变量名</button>
|
||||
</div>
|
||||
|
||||
<div class="result-section">
|
||||
<h3 class="result-title">推荐的变量名</h3>
|
||||
<div id="loading" class="loading">正在生成中，请稍候...</div>
|
||||
<div id="suggestions" class="suggestions-container">
|
||||
<div class="placeholder">点击"生成变量名"按钮，AI将为您推荐合适的变量名</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script src="env.js"></script>
|
||||
<script src="script.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
244
InfoGenie-frontend/public/aimodelapp/AI变量命名助手/script.js
Normal file
244
InfoGenie-frontend/public/aimodelapp/AI变量命名助手/script.js
Normal file
@@ -0,0 +1,244 @@
|
||||
// 从配置文件导入设置
|
||||
// 配置在 env.js 文件中定义
|
||||
|
||||
// DOM 元素
|
||||
const descriptionInput = document.getElementById('description');
|
||||
const generateBtn = document.getElementById('generateBtn');
|
||||
const loadingDiv = document.getElementById('loading');
|
||||
const suggestionsContainer = document.getElementById('suggestions');
|
||||
|
||||
// 命名规范转换函数
|
||||
const namingConventions = {
|
||||
camelCase: (words) => {
|
||||
if (words.length === 0) return '';
|
||||
return words[0].toLowerCase() + words.slice(1).map(word =>
|
||||
word.charAt(0).toUpperCase() + word.slice(1).toLowerCase()
|
||||
).join('');
|
||||
},
|
||||
|
||||
PascalCase: (words) => {
|
||||
return words.map(word =>
|
||||
word.charAt(0).toUpperCase() + word.slice(1).toLowerCase()
|
||||
).join('');
|
||||
},
|
||||
|
||||
snake_case: (words) => {
|
||||
return words.map(word => word.toLowerCase()).join('_');
|
||||
},
|
||||
|
||||
'kebab-case': (words) => {
|
||||
return words.map(word => word.toLowerCase()).join('-');
|
||||
},
|
||||
|
||||
CONSTANT_CASE: (words) => {
|
||||
return words.map(word => word.toUpperCase()).join('_');
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
|
||||
// 调用后端API
|
||||
async function callBackendAPI(description) {
|
||||
try {
|
||||
const response = await fetch('http://127.0.0.1:5002/api/aimodelapp/variable-naming', {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json'
|
||||
},
|
||||
body: JSON.stringify({
|
||||
description: description
|
||||
})
|
||||
});
|
||||
|
||||
if (!response.ok) {
|
||||
const errorData = await response.json();
|
||||
throw new Error(errorData.error || `API请求失败: ${response.status} ${response.statusText}`);
|
||||
}
|
||||
|
||||
const data = await response.json();
|
||||
if (data.success) {
|
||||
return data.suggestions;
|
||||
} else {
|
||||
throw new Error(data.error || 'API响应格式异常');
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('API调用错误:', error);
|
||||
throw error;
|
||||
}
|
||||
}
|
||||
|
||||
// 解析AI响应
|
||||
function parseAIResponse(response) {
|
||||
try {
|
||||
// 尝试直接解析JSON
|
||||
const parsed = JSON.parse(response);
|
||||
return parsed.suggestions || {};
|
||||
} catch (error) {
|
||||
// 如果直接解析失败，尝试提取JSON部分
|
||||
const jsonMatch = response.match(/\{[\s\S]*\}/);
|
||||
if (jsonMatch) {
|
||||
try {
|
||||
const parsed = JSON.parse(jsonMatch[0]);
|
||||
return parsed.suggestions || {};
|
||||
} catch (e) {
|
||||
console.error('JSON解析失败:', e);
|
||||
}
|
||||
}
|
||||
|
||||
// 如果JSON解析失败，返回空对象
|
||||
console.error('无法解析AI响应:', response);
|
||||
return {};
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
// 显示建议
|
||||
function displaySuggestions(suggestions) {
|
||||
suggestionsContainer.innerHTML = '';
|
||||
|
||||
if (!suggestions || Object.keys(suggestions).length === 0) {
|
||||
suggestionsContainer.innerHTML = '<div class="placeholder">暂无建议，请尝试重新生成</div>';
|
||||
return;
|
||||
}
|
||||
|
||||
// 命名规范的显示名称
|
||||
const conventionNames = {
|
||||
'camelCase': 'camelCase (驼峰命名法)',
|
||||
'PascalCase': 'PascalCase (帕斯卡命名法)',
|
||||
'snake_case': 'snake_case (下划线命名法)',
|
||||
'kebab-case': 'kebab-case (短横线命名法)',
|
||||
'CONSTANT_CASE': 'CONSTANT_CASE (常量命名法)'
|
||||
};
|
||||
|
||||
// 按命名规范分组显示
|
||||
Object.keys(suggestions).forEach(convention => {
|
||||
if (suggestions[convention] && suggestions[convention].length > 0) {
|
||||
// 创建分组标题
|
||||
const groupTitle = document.createElement('div');
|
||||
groupTitle.className = 'convention-group-title';
|
||||
groupTitle.textContent = conventionNames[convention] || convention;
|
||||
suggestionsContainer.appendChild(groupTitle);
|
||||
|
||||
// 显示该规范下的建议
|
||||
suggestions[convention].forEach(suggestion => {
|
||||
const suggestionElement = document.createElement('div');
|
||||
suggestionElement.className = 'suggestion-item';
|
||||
suggestionElement.innerHTML = `
|
||||
<div class="variable-name">${suggestion.name}</div>
|
||||
<div class="variable-description">${suggestion.description}</div>
|
||||
<button class="copy-btn" onclick="copyToClipboard('${suggestion.name}', this)">复制</button>
|
||||
`;
|
||||
suggestionsContainer.appendChild(suggestionElement);
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// 复制到剪贴板
|
||||
function copyToClipboard(text, button) {
|
||||
navigator.clipboard.writeText(text).then(() => {
|
||||
showSuccessToast('已复制到剪贴板');
|
||||
button.textContent = '已复制';
|
||||
setTimeout(() => {
|
||||
button.textContent = '复制';
|
||||
}, 2000);
|
||||
}).catch(err => {
|
||||
console.error('复制失败:', err);
|
||||
// 备用复制方法
|
||||
const textArea = document.createElement('textarea');
|
||||
textArea.value = text;
|
||||
document.body.appendChild(textArea);
|
||||
textArea.select();
|
||||
try {
|
||||
document.execCommand('copy');
|
||||
showSuccessToast('已复制到剪贴板');
|
||||
button.textContent = '已复制';
|
||||
setTimeout(() => {
|
||||
button.textContent = '复制';
|
||||
}, 2000);
|
||||
} catch (e) {
|
||||
showErrorMessage('复制失败，请手动复制');
|
||||
}
|
||||
document.body.removeChild(textArea);
|
||||
});
|
||||
}
|
||||
|
||||
// 显示成功提示
|
||||
function showSuccessToast(message) {
|
||||
const toast = document.createElement('div');
|
||||
toast.className = 'success-toast';
|
||||
toast.textContent = message;
|
||||
document.body.appendChild(toast);
|
||||
|
||||
setTimeout(() => {
|
||||
toast.classList.add('show');
|
||||
}, 100);
|
||||
|
||||
setTimeout(() => {
|
||||
toast.classList.remove('show');
|
||||
setTimeout(() => {
|
||||
document.body.removeChild(toast);
|
||||
}, 300);
|
||||
}, 2000);
|
||||
}
|
||||
|
||||
// 显示错误信息
|
||||
function showErrorMessage(message) {
|
||||
const errorDiv = document.createElement('div');
|
||||
errorDiv.className = 'error';
|
||||
errorDiv.textContent = message;
|
||||
suggestionsContainer.innerHTML = '';
|
||||
suggestionsContainer.appendChild(errorDiv);
|
||||
}
|
||||
|
||||
// 显示加载状态
|
||||
function showLoading(show) {
|
||||
loadingDiv.style.display = show ? 'block' : 'none';
|
||||
generateBtn.disabled = show;
|
||||
generateBtn.textContent = show ? '生成中...' : '生成变量名';
|
||||
}
|
||||
|
||||
// 生成变量名建议
|
||||
async function generateSuggestions() {
|
||||
const description = descriptionInput.value.trim();
|
||||
|
||||
if (!description) {
|
||||
showErrorMessage('请输入变量描述');
|
||||
return;
|
||||
}
|
||||
|
||||
showLoading(true);
|
||||
suggestionsContainer.innerHTML = '';
|
||||
|
||||
try {
|
||||
const suggestions = await callBackendAPI(description);
|
||||
displaySuggestions(suggestions);
|
||||
} catch (error) {
|
||||
console.error('生成建议失败:', error);
|
||||
showErrorMessage(`生成失败: ${error.message}`);
|
||||
} finally {
|
||||
showLoading(false);
|
||||
}
|
||||
}
|
||||
|
||||
// 事件监听器
|
||||
generateBtn.addEventListener('click', generateSuggestions);
|
||||
|
||||
// 回车键生成
|
||||
descriptionInput.addEventListener('keypress', (e) => {
|
||||
if (e.key === 'Enter' && !e.shiftKey) {
|
||||
e.preventDefault();
|
||||
generateSuggestions();
|
||||
}
|
||||
});
|
||||
|
||||
// 页面加载完成后的初始化
|
||||
document.addEventListener('DOMContentLoaded', () => {
|
||||
// 设置默认占位符
|
||||
suggestionsContainer.innerHTML = '<div class="placeholder">请输入变量描述，然后点击生成按钮获取所有命名规范的建议</div>';
|
||||
});
|
||||
|
||||
// 导出函数供HTML调用
|
||||
window.copyToClipboard = copyToClipboard;
|
||||
window.generateSuggestions = generateSuggestions;
|
||||
386
InfoGenie-frontend/public/aimodelapp/AI变量命名助手/styles.css
Normal file
386
InfoGenie-frontend/public/aimodelapp/AI变量命名助手/styles.css
Normal file
@@ -0,0 +1,386 @@
|
||||
/* 全局样式重置 */
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
/* 主体样式 - iOS风格 */
|
||||
body {
|
||||
font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Helvetica Neue', Arial, sans-serif;
|
||||
background: linear-gradient(135deg, #87CEEB 0%, #98FB98 100%);
|
||||
min-height: 100vh;
|
||||
padding: 20px;
|
||||
color: #1D1D1F;
|
||||
line-height: 1.47;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
}
|
||||
|
||||
/* 容器样式 - iOS毛玻璃效果 */
|
||||
.container {
|
||||
max-width: 700px;
|
||||
margin: 0 auto;
|
||||
background: rgba(255, 255, 255, 0.85);
|
||||
border-radius: 24px;
|
||||
padding: 32px;
|
||||
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12), 0 2px 8px rgba(0, 0, 0, 0.08);
|
||||
backdrop-filter: blur(20px) saturate(180%);
|
||||
border: 1px solid rgba(255, 255, 255, 0.2);
|
||||
}
|
||||
|
||||
/* 头部样式 - iOS风格 */
|
||||
.header {
|
||||
text-align: center;
|
||||
margin-bottom: 32px;
|
||||
}
|
||||
|
||||
.title {
|
||||
font-size: 2.25rem;
|
||||
color: #1D1D1F;
|
||||
margin-bottom: 8px;
|
||||
font-weight: 600;
|
||||
letter-spacing: -0.02em;
|
||||
}
|
||||
|
||||
.subtitle {
|
||||
color: #86868B;
|
||||
font-size: 1.0625rem;
|
||||
margin-bottom: 24px;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
/* 表单样式 - iOS风格 */
|
||||
.form-section {
|
||||
margin-bottom: 32px;
|
||||
}
|
||||
|
||||
.form-group {
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
|
||||
.form-label {
|
||||
display: block;
|
||||
margin-bottom: 8px;
|
||||
font-weight: 600;
|
||||
color: #1D1D1F;
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
.form-input {
|
||||
width: 100%;
|
||||
padding: 16px;
|
||||
border: 1px solid rgba(0, 0, 0, 0.1);
|
||||
border-radius: 12px;
|
||||
font-size: 1rem;
|
||||
transition: all 0.2s ease;
|
||||
background: rgba(255, 255, 255, 0.8);
|
||||
font-family: inherit;
|
||||
backdrop-filter: blur(10px);
|
||||
}
|
||||
|
||||
.form-input:focus {
|
||||
outline: none;
|
||||
border-color: #007AFF;
|
||||
background: rgba(255, 255, 255, 0.95);
|
||||
box-shadow: 0 0 0 4px rgba(0, 122, 255, 0.1);
|
||||
}
|
||||
|
||||
.textarea {
|
||||
resize: vertical;
|
||||
min-height: 120px;
|
||||
}
|
||||
|
||||
.select {
|
||||
cursor: pointer;
|
||||
appearance: none;
|
||||
background-image: url('data:image/svg+xml;charset=US-ASCII,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 4 5"><path fill="%23666" d="M2 0L0 2h4zm0 5L0 3h4z"/></svg>');
|
||||
background-repeat: no-repeat;
|
||||
background-position: right 15px center;
|
||||
background-size: 12px;
|
||||
padding-right: 40px;
|
||||
}
|
||||
|
||||
/* 按钮样式 - iOS风格 */
|
||||
.btn {
|
||||
width: 100%;
|
||||
padding: 16px;
|
||||
background: #007AFF;
|
||||
color: white;
|
||||
border: none;
|
||||
border-radius: 12px;
|
||||
font-size: 1.0625rem;
|
||||
font-weight: 600;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s ease;
|
||||
margin-bottom: 24px;
|
||||
box-shadow: 0 2px 8px rgba(0, 122, 255, 0.25);
|
||||
}
|
||||
|
||||
.btn:hover {
|
||||
background: #0056CC;
|
||||
transform: translateY(-1px);
|
||||
box-shadow: 0 4px 16px rgba(0, 122, 255, 0.35);
|
||||
}
|
||||
|
||||
.btn:active {
|
||||
transform: translateY(0);
|
||||
background: #004499;
|
||||
}
|
||||
|
||||
.btn:disabled {
|
||||
opacity: 0.5;
|
||||
cursor: not-allowed;
|
||||
transform: none;
|
||||
background: #86868B;
|
||||
}
|
||||
|
||||
/* 结果区域样式 - iOS风格 */
|
||||
.result-section {
|
||||
margin-top: 32px;
|
||||
}
|
||||
|
||||
.result-title {
|
||||
font-size: 1.25rem;
|
||||
color: #1D1D1F;
|
||||
margin-bottom: 16px;
|
||||
text-align: center;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.loading {
|
||||
display: none;
|
||||
text-align: center;
|
||||
color: #007AFF;
|
||||
font-style: normal;
|
||||
padding: 24px;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.suggestions-container {
|
||||
background: rgba(255, 255, 255, 0.6);
|
||||
border: 1px solid rgba(0, 0, 0, 0.08);
|
||||
border-radius: 16px;
|
||||
padding: 24px;
|
||||
min-height: 150px;
|
||||
backdrop-filter: blur(10px);
|
||||
}
|
||||
|
||||
.placeholder {
|
||||
text-align: center;
|
||||
color: #86868B;
|
||||
font-style: normal;
|
||||
padding: 40px 20px;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
/* 分组标题样式 - iOS风格 */
|
||||
.convention-group-title {
|
||||
font-size: 1.0625rem;
|
||||
font-weight: 600;
|
||||
color: white;
|
||||
margin: 20px 0 12px 0;
|
||||
padding: 12px 16px;
|
||||
background: #007AFF;
|
||||
border-radius: 12px;
|
||||
text-align: center;
|
||||
box-shadow: 0 2px 8px rgba(0, 122, 255, 0.25);
|
||||
}
|
||||
|
||||
.convention-group-title:first-child {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
/* 建议项样式 - iOS风格 */
|
||||
.suggestion-item {
|
||||
background: rgba(255, 255, 255, 0.9);
|
||||
border: 1px solid rgba(0, 0, 0, 0.06);
|
||||
border-radius: 12px;
|
||||
padding: 16px;
|
||||
margin-bottom: 12px;
|
||||
transition: all 0.2s ease;
|
||||
cursor: pointer;
|
||||
position: relative;
|
||||
backdrop-filter: blur(10px);
|
||||
}
|
||||
|
||||
.suggestion-item:hover {
|
||||
border-color: rgba(0, 122, 255, 0.3);
|
||||
box-shadow: 0 4px 16px rgba(0, 122, 255, 0.1);
|
||||
background: rgba(255, 255, 255, 0.95);
|
||||
}
|
||||
|
||||
.suggestion-item:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.variable-name {
|
||||
font-family: 'SF Mono', 'Monaco', 'Consolas', 'Courier New', monospace;
|
||||
font-size: 1.0625rem;
|
||||
font-weight: 600;
|
||||
color: #1D1D1F;
|
||||
margin-bottom: 6px;
|
||||
}
|
||||
|
||||
.variable-description {
|
||||
font-size: 0.9375rem;
|
||||
color: #86868B;
|
||||
line-height: 1.47;
|
||||
}
|
||||
|
||||
.copy-btn {
|
||||
position: absolute;
|
||||
top: 12px;
|
||||
right: 12px;
|
||||
background: #007AFF;
|
||||
color: white;
|
||||
border: none;
|
||||
border-radius: 8px;
|
||||
padding: 6px 12px;
|
||||
font-size: 0.8125rem;
|
||||
font-weight: 600;
|
||||
cursor: pointer;
|
||||
opacity: 0;
|
||||
transition: all 0.2s ease;
|
||||
box-shadow: 0 2px 4px rgba(0, 122, 255, 0.25);
|
||||
}
|
||||
|
||||
.suggestion-item:hover .copy-btn {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.copy-btn:hover {
|
||||
background: #0056CC;
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
|
||||
/* 错误样式 - iOS风格 */
|
||||
.error {
|
||||
color: #FF3B30;
|
||||
background: rgba(255, 59, 48, 0.1);
|
||||
border: 1px solid rgba(255, 59, 48, 0.2);
|
||||
padding: 16px;
|
||||
border-radius: 12px;
|
||||
margin-top: 16px;
|
||||
font-weight: 500;
|
||||
backdrop-filter: blur(10px);
|
||||
}
|
||||
|
||||
/* 成功提示 - iOS风格 */
|
||||
.success-toast {
|
||||
position: fixed;
|
||||
top: 20px;
|
||||
right: 20px;
|
||||
background: #34C759;
|
||||
color: white;
|
||||
padding: 12px 20px;
|
||||
border-radius: 12px;
|
||||
box-shadow: 0 8px 24px rgba(52, 199, 89, 0.3);
|
||||
z-index: 1000;
|
||||
opacity: 0;
|
||||
transform: translateX(100%);
|
||||
transition: all 0.3s ease;
|
||||
font-weight: 600;
|
||||
backdrop-filter: blur(20px);
|
||||
}
|
||||
|
||||
.success-toast.show {
|
||||
opacity: 1;
|
||||
transform: translateX(0);
|
||||
}
|
||||
|
||||
/* 响应式设计 */
|
||||
@media (max-width: 768px) {
|
||||
body {
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.container {
|
||||
padding: 20px;
|
||||
margin: 10px;
|
||||
}
|
||||
|
||||
.title {
|
||||
font-size: 2rem;
|
||||
}
|
||||
|
||||
.form-input {
|
||||
padding: 12px;
|
||||
}
|
||||
|
||||
.btn {
|
||||
padding: 12px;
|
||||
}
|
||||
|
||||
.suggestions-container {
|
||||
padding: 15px;
|
||||
}
|
||||
|
||||
.suggestion-item {
|
||||
padding: 12px;
|
||||
}
|
||||
|
||||
.copy-btn {
|
||||
position: static;
|
||||
opacity: 1;
|
||||
margin-top: 8px;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 480px) {
|
||||
.title {
|
||||
font-size: 1.8rem;
|
||||
letter-spacing: 1px;
|
||||
}
|
||||
|
||||
.container {
|
||||
padding: 15px;
|
||||
}
|
||||
|
||||
.form-input {
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.suggestion-item {
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.variable-name {
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
.variable-description {
|
||||
font-size: 0.85rem;
|
||||
}
|
||||
}
|
||||
|
||||
/* 动画效果 */
|
||||
@keyframes fadeIn {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(10px);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
.suggestion-item {
|
||||
animation: fadeIn 0.3s ease;
|
||||
}
|
||||
|
||||
/* 加载动画 */
|
||||
@keyframes pulse {
|
||||
0%, 100% {
|
||||
opacity: 1;
|
||||
}
|
||||
50% {
|
||||
opacity: 0.5;
|
||||
}
|
||||
}
|
||||
|
||||
.loading {
|
||||
animation: pulse 1.5s ease-in-out infinite;
|
||||
}
|
||||
57
InfoGenie-frontend/public/aimodelapp/AI姓名评测/index.html
Normal file
57
InfoGenie-frontend/public/aimodelapp/AI姓名评测/index.html
Normal file
@@ -0,0 +1,57 @@
|
||||
<!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 rel="stylesheet" href="styles.css">
|
||||
</head>
|
||||
<body>
|
||||
<div class="container">
|
||||
<div class="header">
|
||||
<h1 class="title">AI姓名评测</h1>
|
||||
<p class="subtitle">智能分析姓名的稀有度、音韵美感与寓意内涵</p>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label class="form-label" for="nameInput">请输入姓名：</label>
|
||||
<input
|
||||
type="text"
|
||||
id="nameInput"
|
||||
class="form-input"
|
||||
placeholder="请输入要分析的姓名，例如：张三、李雅婷、王子轩等..."
|
||||
maxlength="10"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<button id="analyzeBtn" class="btn">开始分析</button>
|
||||
|
||||
<div class="result-section">
|
||||
<h3 class="result-title">分析结果</h3>
|
||||
<div id="loading" class="loading">正在分析中，请稍候...</div>
|
||||
|
||||
<div id="resultContainer" class="result-container">
|
||||
<div class="result-card">
|
||||
<h4 class="card-title">稀有度评分</h4>
|
||||
<div id="rarityScore" class="score-display">--%</div>
|
||||
<div id="rarityDesc" class="score-desc">点击"开始分析"查看结果</div>
|
||||
</div>
|
||||
|
||||
<div class="result-card">
|
||||
<h4 class="card-title">音韵评价</h4>
|
||||
<div id="phoneticScore" class="score-display">--%</div>
|
||||
<div id="phoneticDesc" class="score-desc">点击"开始分析"查看结果</div>
|
||||
</div>
|
||||
|
||||
<div class="result-card">
|
||||
<h4 class="card-title">含义解读</h4>
|
||||
<div id="meaningAnalysis" class="meaning-content">点击"开始分析"查看姓名的深层寓意</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script src="env.js"></script>
|
||||
<script src="script.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
251
InfoGenie-frontend/public/aimodelapp/AI姓名评测/script.js
Normal file
251
InfoGenie-frontend/public/aimodelapp/AI姓名评测/script.js
Normal file
@@ -0,0 +1,251 @@
|
||||
// 从配置文件导入设置
|
||||
// 配置在 env.js 文件中定义
|
||||
|
||||
// DOM 元素
|
||||
const nameInput = document.getElementById('nameInput');
|
||||
const analyzeBtn = document.getElementById('analyzeBtn');
|
||||
const loading = document.getElementById('loading');
|
||||
const rarityScore = document.getElementById('rarityScore');
|
||||
const rarityDesc = document.getElementById('rarityDesc');
|
||||
const phoneticScore = document.getElementById('phoneticScore');
|
||||
const phoneticDesc = document.getElementById('phoneticDesc');
|
||||
const meaningAnalysis = document.getElementById('meaningAnalysis');
|
||||
|
||||
|
||||
|
||||
// 解析AI返回的分析结果
|
||||
function parseAnalysisResult(content) {
|
||||
const result = {
|
||||
rarityScore: '--%',
|
||||
rarityDesc: '解析失败',
|
||||
phoneticScore: '--%',
|
||||
phoneticDesc: '解析失败',
|
||||
meaningAnalysis: '解析失败'
|
||||
};
|
||||
|
||||
try {
|
||||
// 过滤掉DeepSeek的思考标签内容
|
||||
let cleanContent = content.replace(/<think>[\s\S]*?<\/think>/gi, '');
|
||||
cleanContent = cleanContent.replace(/<think>[\s\S]*$/gi, ''); // 处理未闭合的think标签
|
||||
cleanContent = cleanContent.trim();
|
||||
|
||||
console.log('清理后的内容:', cleanContent);
|
||||
|
||||
// 提取稀有度评分（百分比格式）
|
||||
const rarityMatch = cleanContent.match(/【稀有度评分】[\s\S]*?评分：(\d+)%[\s\S]*?评价：([\s\S]*?)(?=【|$)/);
|
||||
if (rarityMatch) {
|
||||
result.rarityScore = rarityMatch[1] + '%';
|
||||
result.rarityDesc = rarityMatch[2].trim();
|
||||
}
|
||||
|
||||
// 提取音韵评价（百分比格式）
|
||||
const phoneticMatch = cleanContent.match(/【音韵评价】[\s\S]*?评分：(\d+)%[\s\S]*?评价：([\s\S]*?)(?=【|$)/);
|
||||
if (phoneticMatch) {
|
||||
result.phoneticScore = phoneticMatch[1] + '%';
|
||||
result.phoneticDesc = phoneticMatch[2].trim();
|
||||
}
|
||||
|
||||
// 提取含义解读
|
||||
const meaningMatch = cleanContent.match(/【含义解读】[\s\S]*?\n([\s\S]+)$/);
|
||||
if (meaningMatch) {
|
||||
result.meaningAnalysis = meaningMatch[1].trim();
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('解析结果时出错:', error);
|
||||
}
|
||||
|
||||
return result;
|
||||
}
|
||||
|
||||
// 简单的markdown解析函数
|
||||
function parseMarkdown(text) {
|
||||
if (!text || typeof text !== 'string') return text;
|
||||
|
||||
// 处理加粗 **text** 或 __text__
|
||||
let parsed = text.replace(/\*\*(.*?)\*\*/g, '<strong>$1</strong>');
|
||||
parsed = parsed.replace(/__(.*?)__/g, '<strong>$1</strong>');
|
||||
|
||||
// 处理斜体 *text* 或 _text_
|
||||
parsed = parsed.replace(/\*(.*?)\*/g, '<em>$1</em>');
|
||||
parsed = parsed.replace(/_(.*?)_/g, '<em>$1</em>');
|
||||
|
||||
// 处理无序列表
|
||||
const lines = parsed.split('\n');
|
||||
let inList = false;
|
||||
let result = [];
|
||||
|
||||
for (let i = 0; i < lines.length; i++) {
|
||||
const line = lines[i].trim();
|
||||
|
||||
// 检查是否是列表项（以 - 开头，后面跟空格）
|
||||
if (line.match(/^-\s+/)) {
|
||||
if (!inList) {
|
||||
result.push('<ul>');
|
||||
inList = true;
|
||||
}
|
||||
// 移除开头的 "- " 并包装为 <li>
|
||||
const listContent = line.replace(/^-\s+/, '');
|
||||
result.push(`<li>${listContent}</li>`);
|
||||
} else {
|
||||
if (inList) {
|
||||
result.push('</ul>');
|
||||
inList = false;
|
||||
}
|
||||
if (line) {
|
||||
result.push(line);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 如果最后还在列表中，需要关闭列表
|
||||
if (inList) {
|
||||
result.push('</ul>');
|
||||
}
|
||||
|
||||
// 重新组合，用 <br> 连接非列表行
|
||||
parsed = result.join('<br>');
|
||||
|
||||
// 清理多余的 <br> 标签（在列表前后）
|
||||
parsed = parsed.replace(/<br><ul>/g, '<ul>');
|
||||
parsed = parsed.replace(/<\/ul><br>/g, '</ul>');
|
||||
parsed = parsed.replace(/<br><li>/g, '<li>');
|
||||
parsed = parsed.replace(/<\/li><br>/g, '</li>');
|
||||
|
||||
return parsed;
|
||||
}
|
||||
|
||||
// 更新显示结果
|
||||
function updateResults(result) {
|
||||
rarityScore.textContent = result.rarityScore;
|
||||
rarityDesc.innerHTML = parseMarkdown(result.rarityDesc);
|
||||
phoneticScore.textContent = result.phoneticScore;
|
||||
phoneticDesc.innerHTML = parseMarkdown(result.phoneticDesc);
|
||||
meaningAnalysis.innerHTML = parseMarkdown(result.meaningAnalysis);
|
||||
}
|
||||
|
||||
// 重置结果显示
|
||||
function resetResults() {
|
||||
rarityScore.textContent = '--%';
|
||||
rarityDesc.innerHTML = '点击"开始分析"查看结果';
|
||||
phoneticScore.textContent = '--%';
|
||||
phoneticDesc.innerHTML = '点击"开始分析"查看结果';
|
||||
meaningAnalysis.innerHTML = '点击"开始分析"查看姓名的深层寓意';
|
||||
}
|
||||
|
||||
// 显示错误信息
|
||||
function showError(message) {
|
||||
// 清除之前的错误信息
|
||||
const existingError = document.querySelector('.error');
|
||||
if (existingError) {
|
||||
existingError.remove();
|
||||
}
|
||||
|
||||
// 创建新的错误信息
|
||||
const errorDiv = document.createElement('div');
|
||||
errorDiv.className = 'error';
|
||||
errorDiv.textContent = `分析失败：${message}。`;
|
||||
document.querySelector('.result-section').appendChild(errorDiv);
|
||||
}
|
||||
|
||||
// 姓名验证
|
||||
function validateName(name) {
|
||||
if (!name) {
|
||||
return '请输入姓名';
|
||||
}
|
||||
if (name.length < 2) {
|
||||
return '姓名至少需要2个字符';
|
||||
}
|
||||
if (name.length > 10) {
|
||||
return '姓名不能超过10个字符';
|
||||
}
|
||||
if (!/^[\u4e00-\u9fa5a-zA-Z]+$/.test(name)) {
|
||||
return '姓名只能包含中文或英文字符';
|
||||
}
|
||||
return null;
|
||||
}
|
||||
|
||||
// 主要分析函数
|
||||
async function analyzeName() {
|
||||
const name = nameInput.value.trim();
|
||||
|
||||
// 验证输入
|
||||
const validationError = validateName(name);
|
||||
if (validationError) {
|
||||
alert(validationError);
|
||||
return;
|
||||
}
|
||||
|
||||
// 显示加载状态
|
||||
analyzeBtn.disabled = true;
|
||||
analyzeBtn.textContent = '分析中...';
|
||||
loading.style.display = 'block';
|
||||
resetResults();
|
||||
|
||||
// 清除之前的错误信息
|
||||
const existingError = document.querySelector('.error');
|
||||
if (existingError) {
|
||||
existingError.remove();
|
||||
}
|
||||
|
||||
const requestBody = {
|
||||
name: name
|
||||
};
|
||||
|
||||
try {
|
||||
// 调用后端API
|
||||
const response = await fetch('http://127.0.0.1:5002/api/aimodelapp/name-analysis', {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json'
|
||||
},
|
||||
body: JSON.stringify(requestBody)
|
||||
});
|
||||
|
||||
// 检查HTTP状态码
|
||||
if (response.status === 429) {
|
||||
throw new Error('短时间内请求次数过多，请休息一下！');
|
||||
}
|
||||
|
||||
if (!response.ok) {
|
||||
const errorData = await response.json();
|
||||
throw new Error(errorData.error || `请求失败: ${response.status} ${response.statusText}`);
|
||||
}
|
||||
|
||||
const data = await response.json();
|
||||
|
||||
if (data.success && data.analysis) {
|
||||
const analysisResult = parseAnalysisResult(data.analysis.trim());
|
||||
updateResults(analysisResult);
|
||||
} else {
|
||||
throw new Error(data.error || 'AI响应格式异常');
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('分析姓名时出错:', error);
|
||||
showError(error.message);
|
||||
resetResults();
|
||||
} finally {
|
||||
// 恢复按钮状态
|
||||
analyzeBtn.disabled = false;
|
||||
analyzeBtn.textContent = '开始分析';
|
||||
loading.style.display = 'none';
|
||||
}
|
||||
}
|
||||
|
||||
// 事件监听器
|
||||
analyzeBtn.addEventListener('click', analyzeName);
|
||||
|
||||
// 回车键快捷分析
|
||||
nameInput.addEventListener('keypress', (e) => {
|
||||
if (e.key === 'Enter') {
|
||||
e.preventDefault();
|
||||
analyzeName();
|
||||
}
|
||||
});
|
||||
|
||||
// 输入框内容变化时清除错误信息
|
||||
nameInput.addEventListener('input', () => {
|
||||
const existingError = document.querySelector('.error');
|
||||
if (existingError) {
|
||||
existingError.remove();
|
||||
}
|
||||
});
|
||||
265
InfoGenie-frontend/public/aimodelapp/AI姓名评测/styles.css
Normal file
265
InfoGenie-frontend/public/aimodelapp/AI姓名评测/styles.css
Normal file
@@ -0,0 +1,265 @@
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Helvetica Neue', Arial, sans-serif;
|
||||
background: linear-gradient(135deg, #87CEEB 0%, #98FB98 100%);
|
||||
min-height: 100vh;
|
||||
padding: 20px;
|
||||
color: #1D1D1F;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
}
|
||||
|
||||
.container {
|
||||
max-width: 700px;
|
||||
margin: 0 auto;
|
||||
background: rgba(255, 255, 255, 0.85);
|
||||
border-radius: 24px;
|
||||
padding: 32px;
|
||||
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12), 0 2px 8px rgba(0, 0, 0, 0.08);
|
||||
backdrop-filter: blur(20px) saturate(180%);
|
||||
border: 1px solid rgba(255, 255, 255, 0.2);
|
||||
}
|
||||
|
||||
.header {
|
||||
text-align: center;
|
||||
margin-bottom: 32px;
|
||||
}
|
||||
|
||||
.title {
|
||||
font-size: 2.25rem;
|
||||
color: #1D1D1F;
|
||||
margin-bottom: 8px;
|
||||
font-weight: 600;
|
||||
letter-spacing: -0.02em;
|
||||
}
|
||||
|
||||
.subtitle {
|
||||
color: #86868B;
|
||||
font-size: 1.0625rem;
|
||||
margin-bottom: 24px;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
.form-group {
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
|
||||
.form-label {
|
||||
display: block;
|
||||
margin-bottom: 8px;
|
||||
font-weight: 600;
|
||||
color: #1D1D1F;
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
.form-input {
|
||||
width: 100%;
|
||||
padding: 16px;
|
||||
border: 1px solid rgba(0, 0, 0, 0.1);
|
||||
border-radius: 12px;
|
||||
font-size: 1rem;
|
||||
transition: all 0.2s ease;
|
||||
background: rgba(255, 255, 255, 0.8);
|
||||
text-align: center;
|
||||
backdrop-filter: blur(10px);
|
||||
}
|
||||
|
||||
.form-input:focus {
|
||||
outline: none;
|
||||
border-color: #007AFF;
|
||||
background: rgba(255, 255, 255, 0.95);
|
||||
box-shadow: 0 0 0 4px rgba(0, 122, 255, 0.1);
|
||||
}
|
||||
|
||||
.btn {
|
||||
width: 100%;
|
||||
padding: 16px;
|
||||
background: #007AFF;
|
||||
color: white;
|
||||
border: none;
|
||||
border-radius: 12px;
|
||||
font-size: 1.0625rem;
|
||||
font-weight: 600;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s ease;
|
||||
margin-bottom: 24px;
|
||||
box-shadow: 0 2px 8px rgba(0, 122, 255, 0.25);
|
||||
}
|
||||
|
||||
.btn:hover {
|
||||
background: #0056CC;
|
||||
transform: translateY(-1px);
|
||||
box-shadow: 0 4px 16px rgba(0, 122, 255, 0.35);
|
||||
}
|
||||
|
||||
.btn:active {
|
||||
transform: translateY(0);
|
||||
background: #004499;
|
||||
}
|
||||
|
||||
.btn:disabled {
|
||||
opacity: 0.5;
|
||||
cursor: not-allowed;
|
||||
transform: none;
|
||||
background: #86868B;
|
||||
}
|
||||
|
||||
.result-section {
|
||||
margin-top: 32px;
|
||||
}
|
||||
|
||||
.result-title {
|
||||
font-size: 1.25rem;
|
||||
color: #1D1D1F;
|
||||
margin-bottom: 20px;
|
||||
text-align: center;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.loading {
|
||||
display: none;
|
||||
text-align: center;
|
||||
color: #007AFF;
|
||||
font-style: normal;
|
||||
margin-bottom: 20px;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.result-container {
|
||||
display: grid;
|
||||
gap: 16px;
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.result-card {
|
||||
background: rgba(255, 255, 255, 0.6);
|
||||
border: 1px solid rgba(0, 0, 0, 0.08);
|
||||
border-radius: 16px;
|
||||
padding: 24px;
|
||||
transition: all 0.2s ease;
|
||||
backdrop-filter: blur(10px);
|
||||
}
|
||||
|
||||
.result-card:hover {
|
||||
border-color: rgba(0, 122, 255, 0.3);
|
||||
box-shadow: 0 4px 16px rgba(0, 122, 255, 0.1);
|
||||
background: rgba(255, 255, 255, 0.8);
|
||||
}
|
||||
|
||||
.card-title {
|
||||
font-size: 1.0625rem;
|
||||
color: #1D1D1F;
|
||||
margin-bottom: 16px;
|
||||
text-align: center;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.score-display {
|
||||
font-size: 2.25rem;
|
||||
font-weight: 700;
|
||||
text-align: center;
|
||||
margin-bottom: 12px;
|
||||
background: linear-gradient(135deg, #007AFF 0%, #5856D6 100%);
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
background-clip: text;
|
||||
}
|
||||
|
||||
.score-desc {
|
||||
text-align: center;
|
||||
color: #86868B;
|
||||
font-size: 0.9375rem;
|
||||
line-height: 1.47;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
.meaning-content {
|
||||
color: #1D1D1F;
|
||||
line-height: 1.6;
|
||||
font-size: 1rem;
|
||||
text-align: left;
|
||||
white-space: pre-wrap;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
.error {
|
||||
color: #FF3B30;
|
||||
background: rgba(255, 59, 48, 0.1);
|
||||
border: 1px solid rgba(255, 59, 48, 0.2);
|
||||
padding: 16px;
|
||||
border-radius: 12px;
|
||||
margin-top: 16px;
|
||||
font-weight: 500;
|
||||
backdrop-filter: blur(10px);
|
||||
}
|
||||
|
||||
/* 平板和桌面端优化 */
|
||||
@media (min-width: 768px) {
|
||||
.result-container {
|
||||
grid-template-columns: 1fr 1fr;
|
||||
}
|
||||
|
||||
.result-card:last-child {
|
||||
grid-column: 1 / -1;
|
||||
}
|
||||
}
|
||||
|
||||
/* 手机端优化 */
|
||||
@media (max-width: 768px) {
|
||||
body {
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.container {
|
||||
padding: 20px;
|
||||
margin: 10px;
|
||||
}
|
||||
|
||||
.title {
|
||||
font-size: 2rem;
|
||||
}
|
||||
|
||||
.form-input {
|
||||
padding: 12px;
|
||||
}
|
||||
|
||||
.btn {
|
||||
padding: 12px;
|
||||
}
|
||||
|
||||
.result-card {
|
||||
padding: 15px;
|
||||
}
|
||||
|
||||
.score-display {
|
||||
font-size: 2rem;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 480px) {
|
||||
.title {
|
||||
font-size: 1.8rem;
|
||||
letter-spacing: 1px;
|
||||
}
|
||||
|
||||
.container {
|
||||
padding: 15px;
|
||||
}
|
||||
|
||||
.result-card {
|
||||
padding: 12px;
|
||||
}
|
||||
|
||||
.score-display {
|
||||
font-size: 1.8rem;
|
||||
}
|
||||
|
||||
.meaning-content {
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
}
|
||||
66
InfoGenie-frontend/public/aimodelapp/AI文章转文言文/index.html
Normal file
66
InfoGenie-frontend/public/aimodelapp/AI文章转文言文/index.html
Normal file
@@ -0,0 +1,66 @@
|
||||
<!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 rel="stylesheet" href="styles.css">
|
||||
</head>
|
||||
<body>
|
||||
<div class="container">
|
||||
<div class="header">
|
||||
<h1 class="title">AI现代文转文言文助手</h1>
|
||||
<p class="subtitle">古韵今声，文白互译</p>
|
||||
</div>
|
||||
|
||||
<div class="form-section">
|
||||
<div class="form-group">
|
||||
<label class="form-label" for="modernText">请输入现代文内容：</label>
|
||||
<textarea
|
||||
id="modernText"
|
||||
class="form-input textarea"
|
||||
placeholder="请输入您想要转换为文言文的现代文章内容..."
|
||||
>今天天气很好，阳光明媚，我和朋友一起去公园游玩。公园里花开得很美，鸟儿在枝头歌唱，让人心情愉悦。</textarea>
|
||||
</div>
|
||||
|
||||
<div class="form-row">
|
||||
<div class="form-group half-width">
|
||||
<label class="form-label" for="styleSelect">文言文风格：</label>
|
||||
<select id="styleSelect" class="form-input select">
|
||||
<option value="classical">经典文言文</option>
|
||||
<option value="elegant">雅致文言文</option>
|
||||
<option value="formal">正式文言文</option>
|
||||
<option value="poetic">诗意文言文</option>
|
||||
<option value="historical">史书文言文</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div class="form-group half-width">
|
||||
<label class="form-label" for="articleTypeSelect">文章类型：</label>
|
||||
<select id="articleTypeSelect" class="form-input select">
|
||||
<option value="narrative">记叙文</option>
|
||||
<option value="argumentative">议论文</option>
|
||||
<option value="expository">说明文</option>
|
||||
<option value="descriptive">描写文</option>
|
||||
<option value="lyrical">抒情文</option>
|
||||
<option value="official">公文体</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<button id="convertBtn" class="btn">开始转换</button>
|
||||
</div>
|
||||
|
||||
<div class="result-section">
|
||||
<h3 class="result-title">文言文转换结果</h3>
|
||||
<div id="loading" class="loading">正在转换中，请稍候...</div>
|
||||
<div id="conversionResult" class="conversion-container">
|
||||
<div class="placeholder">点击"开始转换"按钮，AI将为您提供精准的文言文转换</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script src="env.js"></script>
|
||||
<script src="script.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
288
InfoGenie-frontend/public/aimodelapp/AI文章转文言文/script.js
Normal file
288
InfoGenie-frontend/public/aimodelapp/AI文章转文言文/script.js
Normal file
@@ -0,0 +1,288 @@
|
||||
// 从配置文件导入设置
|
||||
// 配置在 env.js 文件中定义
|
||||
|
||||
// DOM 元素
|
||||
const modernTextInput = document.getElementById('modernText');
|
||||
const styleSelect = document.getElementById('styleSelect');
|
||||
const articleTypeSelect = document.getElementById('articleTypeSelect');
|
||||
const convertBtn = document.getElementById('convertBtn');
|
||||
const loadingDiv = document.getElementById('loading');
|
||||
const conversionResultContainer = document.getElementById('conversionResult');
|
||||
|
||||
// 调用后端API
|
||||
async function callBackendAPI(modernText, style, articleType) {
|
||||
try {
|
||||
const response = await fetch('http://127.0.0.1:5002/api/aimodelapp/classical_conversion', {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json'
|
||||
},
|
||||
body: JSON.stringify({
|
||||
modern_text: modernText,
|
||||
style: style,
|
||||
article_type: articleType
|
||||
})
|
||||
});
|
||||
|
||||
if (!response.ok) {
|
||||
const errorData = await response.json();
|
||||
throw new Error(errorData.error || `API请求失败: ${response.status} ${response.statusText}`);
|
||||
}
|
||||
|
||||
const data = await response.json();
|
||||
if (data.success) {
|
||||
return data.conversion_result;
|
||||
} else {
|
||||
throw new Error(data.error || 'API响应格式异常');
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('API调用错误:', error);
|
||||
throw error;
|
||||
}
|
||||
}
|
||||
|
||||
// 解析AI响应
|
||||
function parseAIResponse(response) {
|
||||
try {
|
||||
// 尝试直接解析JSON
|
||||
const parsed = JSON.parse(response);
|
||||
return parsed;
|
||||
} catch (error) {
|
||||
// 如果直接解析失败，尝试提取JSON部分
|
||||
const jsonMatch = response.match(/\{[\s\S]*\}/);
|
||||
if (jsonMatch) {
|
||||
try {
|
||||
const parsed = JSON.parse(jsonMatch[0]);
|
||||
return parsed;
|
||||
} catch (e) {
|
||||
console.error('JSON解析失败:', e);
|
||||
}
|
||||
}
|
||||
|
||||
// 如果JSON解析失败，返回空对象
|
||||
console.error('无法解析AI响应:', response);
|
||||
return {};
|
||||
}
|
||||
}
|
||||
|
||||
// 显示转换结果
|
||||
function displayConversionResult(result) {
|
||||
conversionResultContainer.innerHTML = '';
|
||||
|
||||
if (!result || !result.classical_text) {
|
||||
conversionResultContainer.innerHTML = '<div class="placeholder">转换失败，请尝试重新转换</div>';
|
||||
return;
|
||||
}
|
||||
|
||||
// 创建结果容器
|
||||
const resultDiv = document.createElement('div');
|
||||
resultDiv.className = 'conversion-result';
|
||||
|
||||
// 转换信息
|
||||
const infoDiv = document.createElement('div');
|
||||
infoDiv.className = 'conversion-info';
|
||||
infoDiv.innerHTML = `
|
||||
<div class="info-item">
|
||||
<span class="label">转换风格：</span>
|
||||
<span class="value">${result.style || '经典文言文'}</span>
|
||||
</div>
|
||||
<div class="info-item">
|
||||
<span class="label">文章类型：</span>
|
||||
<span class="value">${result.article_type || '记叙文'}</span>
|
||||
</div>
|
||||
`;
|
||||
resultDiv.appendChild(infoDiv);
|
||||
|
||||
// 原文显示
|
||||
const originalDiv = document.createElement('div');
|
||||
originalDiv.className = 'original-text';
|
||||
originalDiv.innerHTML = `
|
||||
<div class="text-header">
|
||||
<span class="label">原现代文：</span>
|
||||
<button class="copy-btn" onclick="copyToClipboard('${(result.original_text || '').replace(/'/g, "\\'")}')">复制</button>
|
||||
</div>
|
||||
<div class="text-content">${result.original_text || modernTextInput.value}</div>
|
||||
`;
|
||||
resultDiv.appendChild(originalDiv);
|
||||
|
||||
// 文言文结果
|
||||
const classicalDiv = document.createElement('div');
|
||||
classicalDiv.className = 'classical-text';
|
||||
classicalDiv.innerHTML = `
|
||||
<div class="text-header">
|
||||
<span class="label">文言文转换：</span>
|
||||
<button class="copy-btn" onclick="copyToClipboard('${result.classical_text.replace(/'/g, "\\'")}')">复制</button>
|
||||
</div>
|
||||
<div class="text-content classical">${result.classical_text}</div>
|
||||
`;
|
||||
resultDiv.appendChild(classicalDiv);
|
||||
|
||||
// 关键转换说明
|
||||
if (result.key_transformations && result.key_transformations.length > 0) {
|
||||
const transformationsDiv = document.createElement('div');
|
||||
transformationsDiv.className = 'transformations';
|
||||
transformationsDiv.innerHTML = '<div class="transformations-title">关键转换说明：</div>';
|
||||
|
||||
result.key_transformations.forEach((transformation, index) => {
|
||||
if (transformation && transformation.trim()) {
|
||||
const transformDiv = document.createElement('div');
|
||||
transformDiv.className = 'transformation-item';
|
||||
transformDiv.innerHTML = `<span class="number">${index + 1}.</span><span class="text">${transformation}</span>`;
|
||||
transformationsDiv.appendChild(transformDiv);
|
||||
}
|
||||
});
|
||||
|
||||
resultDiv.appendChild(transformationsDiv);
|
||||
}
|
||||
|
||||
// 文言文特色分析
|
||||
if (result.classical_features) {
|
||||
const featuresDiv = document.createElement('div');
|
||||
featuresDiv.className = 'classical-features';
|
||||
featuresDiv.innerHTML = '<div class="features-title">文言文特色分析：</div>';
|
||||
|
||||
if (result.classical_features.sentence_patterns) {
|
||||
const patternDiv = document.createElement('div');
|
||||
patternDiv.className = 'feature-item';
|
||||
patternDiv.innerHTML = `<span class="feature-label">句式特点：</span><span class="feature-text">${result.classical_features.sentence_patterns}</span>`;
|
||||
featuresDiv.appendChild(patternDiv);
|
||||
}
|
||||
|
||||
if (result.classical_features.vocabulary) {
|
||||
const vocabDiv = document.createElement('div');
|
||||
vocabDiv.className = 'feature-item';
|
||||
vocabDiv.innerHTML = `<span class="feature-label">词汇运用：</span><span class="feature-text">${result.classical_features.vocabulary}</span>`;
|
||||
featuresDiv.appendChild(vocabDiv);
|
||||
}
|
||||
|
||||
if (result.classical_features.grammar) {
|
||||
const grammarDiv = document.createElement('div');
|
||||
grammarDiv.className = 'feature-item';
|
||||
grammarDiv.innerHTML = `<span class="feature-label">语法特色：</span><span class="feature-text">${result.classical_features.grammar}</span>`;
|
||||
featuresDiv.appendChild(grammarDiv);
|
||||
}
|
||||
|
||||
resultDiv.appendChild(featuresDiv);
|
||||
}
|
||||
|
||||
// 转换说明
|
||||
if (result.explanation) {
|
||||
const explanationDiv = document.createElement('div');
|
||||
explanationDiv.className = 'explanation';
|
||||
explanationDiv.innerHTML = `<span class="label">转换说明：</span><div class="explanation-text">${result.explanation}</div>`;
|
||||
resultDiv.appendChild(explanationDiv);
|
||||
}
|
||||
|
||||
// 发音指导
|
||||
if (result.pronunciation_guide) {
|
||||
const pronunciationDiv = document.createElement('div');
|
||||
pronunciationDiv.className = 'pronunciation';
|
||||
pronunciationDiv.innerHTML = `<span class="label">古音指导：</span><span class="value">${result.pronunciation_guide}</span>`;
|
||||
resultDiv.appendChild(pronunciationDiv);
|
||||
}
|
||||
|
||||
conversionResultContainer.appendChild(resultDiv);
|
||||
}
|
||||
|
||||
// 复制到剪贴板
|
||||
function copyToClipboard(text) {
|
||||
navigator.clipboard.writeText(text).then(() => {
|
||||
showSuccessToast('已复制到剪贴板');
|
||||
}).catch(err => {
|
||||
console.error('复制失败:', err);
|
||||
// 备用复制方法
|
||||
const textArea = document.createElement('textarea');
|
||||
textArea.value = text;
|
||||
document.body.appendChild(textArea);
|
||||
textArea.select();
|
||||
try {
|
||||
document.execCommand('copy');
|
||||
showSuccessToast('已复制到剪贴板');
|
||||
} catch (e) {
|
||||
showErrorMessage('复制失败，请手动复制');
|
||||
}
|
||||
document.body.removeChild(textArea);
|
||||
});
|
||||
}
|
||||
|
||||
// 显示成功提示
|
||||
function showSuccessToast(message) {
|
||||
const toast = document.createElement('div');
|
||||
toast.className = 'success-toast';
|
||||
toast.textContent = message;
|
||||
document.body.appendChild(toast);
|
||||
|
||||
setTimeout(() => {
|
||||
toast.classList.add('show');
|
||||
}, 100);
|
||||
|
||||
setTimeout(() => {
|
||||
toast.classList.remove('show');
|
||||
setTimeout(() => {
|
||||
document.body.removeChild(toast);
|
||||
}, 300);
|
||||
}, 2000);
|
||||
}
|
||||
|
||||
// 显示错误信息
|
||||
function showErrorMessage(message) {
|
||||
const errorDiv = document.createElement('div');
|
||||
errorDiv.className = 'error';
|
||||
errorDiv.textContent = message;
|
||||
conversionResultContainer.innerHTML = '';
|
||||
conversionResultContainer.appendChild(errorDiv);
|
||||
}
|
||||
|
||||
// 显示加载状态
|
||||
function showLoading(show) {
|
||||
loadingDiv.style.display = show ? 'block' : 'none';
|
||||
convertBtn.disabled = show;
|
||||
convertBtn.textContent = show ? '转换中...' : '开始转换';
|
||||
}
|
||||
|
||||
// 执行转换
|
||||
async function performConversion() {
|
||||
const modernText = modernTextInput.value.trim();
|
||||
const style = styleSelect.value;
|
||||
const articleType = articleTypeSelect.value;
|
||||
|
||||
if (!modernText) {
|
||||
showErrorMessage('请输入要转换的现代文内容');
|
||||
return;
|
||||
}
|
||||
|
||||
showLoading(true);
|
||||
conversionResultContainer.innerHTML = '';
|
||||
|
||||
try {
|
||||
const result = await callBackendAPI(modernText, style, articleType);
|
||||
const parsedResult = parseAIResponse(result);
|
||||
displayConversionResult(parsedResult);
|
||||
} catch (error) {
|
||||
console.error('转换失败:', error);
|
||||
showErrorMessage(`转换失败: ${error.message}`);
|
||||
} finally {
|
||||
showLoading(false);
|
||||
}
|
||||
}
|
||||
|
||||
// 事件监听器
|
||||
convertBtn.addEventListener('click', performConversion);
|
||||
|
||||
// 回车键转换
|
||||
modernTextInput.addEventListener('keypress', (e) => {
|
||||
if (e.key === 'Enter' && e.ctrlKey) {
|
||||
e.preventDefault();
|
||||
performConversion();
|
||||
}
|
||||
});
|
||||
|
||||
// 页面加载完成后的初始化
|
||||
document.addEventListener('DOMContentLoaded', () => {
|
||||
// 设置默认占位符
|
||||
conversionResultContainer.innerHTML = '<div class="placeholder">请输入现代文内容，选择转换风格和文章类型，然后点击转换按钮</div>';
|
||||
});
|
||||
|
||||
// 导出函数供HTML调用
|
||||
window.copyToClipboard = copyToClipboard;
|
||||
window.performConversion = performConversion;
|
||||
603
InfoGenie-frontend/public/aimodelapp/AI文章转文言文/styles.css
Normal file
603
InfoGenie-frontend/public/aimodelapp/AI文章转文言文/styles.css
Normal file
@@ -0,0 +1,603 @@
|
||||
/* 全局样式重置 */
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
/* 主体样式 - iOS风格 */
|
||||
body {
|
||||
font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Helvetica Neue', Arial, sans-serif;
|
||||
background: linear-gradient(135deg, #8B4513 0%, #D2691E 50%, #F4A460 100%);
|
||||
min-height: 100vh;
|
||||
padding: 20px;
|
||||
color: #1D1D1F;
|
||||
line-height: 1.47;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
}
|
||||
|
||||
/* 容器样式 - iOS毛玻璃效果 */
|
||||
.container {
|
||||
max-width: 900px;
|
||||
margin: 0 auto;
|
||||
background: rgba(255, 255, 255, 0.85);
|
||||
border-radius: 24px;
|
||||
padding: 32px;
|
||||
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12), 0 2px 8px rgba(0, 0, 0, 0.08);
|
||||
backdrop-filter: blur(20px) saturate(180%);
|
||||
border: 1px solid rgba(255, 255, 255, 0.2);
|
||||
}
|
||||
|
||||
/* 头部样式 - iOS风格 */
|
||||
.header {
|
||||
text-align: center;
|
||||
margin-bottom: 32px;
|
||||
}
|
||||
|
||||
.title {
|
||||
font-size: 2.25rem;
|
||||
color: #8B4513;
|
||||
margin-bottom: 8px;
|
||||
font-weight: 600;
|
||||
letter-spacing: -0.02em;
|
||||
}
|
||||
|
||||
.subtitle {
|
||||
color: #D2691E;
|
||||
font-size: 1.0625rem;
|
||||
margin-bottom: 24px;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
/* 表单样式 - iOS风格 */
|
||||
.form-section {
|
||||
margin-bottom: 32px;
|
||||
}
|
||||
|
||||
.form-group {
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
|
||||
.form-row {
|
||||
display: flex;
|
||||
gap: 16px;
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
|
||||
.half-width {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.form-label {
|
||||
display: block;
|
||||
margin-bottom: 8px;
|
||||
font-weight: 600;
|
||||
color: #1D1D1F;
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
.form-input {
|
||||
width: 100%;
|
||||
padding: 16px;
|
||||
border: 1px solid rgba(0, 0, 0, 0.1);
|
||||
border-radius: 12px;
|
||||
font-size: 1rem;
|
||||
transition: all 0.2s ease;
|
||||
background: rgba(255, 255, 255, 0.8);
|
||||
font-family: inherit;
|
||||
backdrop-filter: blur(10px);
|
||||
}
|
||||
|
||||
.form-input:focus {
|
||||
outline: none;
|
||||
border-color: #D2691E;
|
||||
background: rgba(255, 255, 255, 0.95);
|
||||
box-shadow: 0 0 0 4px rgba(210, 105, 30, 0.1);
|
||||
}
|
||||
|
||||
.textarea {
|
||||
resize: vertical;
|
||||
min-height: 150px;
|
||||
font-family: 'SF Mono', 'Monaco', 'Consolas', 'Courier New', monospace;
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
.select {
|
||||
cursor: pointer;
|
||||
appearance: none;
|
||||
background-image: url('data:image/svg+xml;charset=US-ASCII,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 4 5"><path fill="%23666" d="M2 0L0 2h4zm0 5L0 3h4z"/></svg>');
|
||||
background-repeat: no-repeat;
|
||||
background-position: right 15px center;
|
||||
background-size: 12px;
|
||||
padding-right: 40px;
|
||||
}
|
||||
|
||||
/* 按钮样式 - iOS风格 */
|
||||
.btn {
|
||||
width: 100%;
|
||||
padding: 16px;
|
||||
background: #D2691E;
|
||||
color: white;
|
||||
border: none;
|
||||
border-radius: 12px;
|
||||
font-size: 1.0625rem;
|
||||
font-weight: 600;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s ease;
|
||||
margin-bottom: 24px;
|
||||
box-shadow: 0 2px 8px rgba(210, 105, 30, 0.25);
|
||||
}
|
||||
|
||||
.btn:hover {
|
||||
background: #B8860B;
|
||||
transform: translateY(-1px);
|
||||
box-shadow: 0 4px 16px rgba(210, 105, 30, 0.35);
|
||||
}
|
||||
|
||||
.btn:active {
|
||||
transform: translateY(0);
|
||||
background: #A0522D;
|
||||
}
|
||||
|
||||
.btn:disabled {
|
||||
opacity: 0.5;
|
||||
cursor: not-allowed;
|
||||
transform: none;
|
||||
background: #86868B;
|
||||
}
|
||||
|
||||
/* 结果区域样式 - iOS风格 */
|
||||
.result-section {
|
||||
margin-top: 32px;
|
||||
}
|
||||
|
||||
.result-title {
|
||||
font-size: 1.25rem;
|
||||
color: #8B4513;
|
||||
margin-bottom: 16px;
|
||||
text-align: center;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.loading {
|
||||
display: none;
|
||||
text-align: center;
|
||||
color: #D2691E;
|
||||
font-style: normal;
|
||||
padding: 24px;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.conversion-container {
|
||||
background: rgba(255, 255, 255, 0.6);
|
||||
border: 1px solid rgba(0, 0, 0, 0.08);
|
||||
border-radius: 16px;
|
||||
padding: 24px;
|
||||
min-height: 200px;
|
||||
backdrop-filter: blur(10px);
|
||||
}
|
||||
|
||||
.placeholder {
|
||||
text-align: center;
|
||||
color: #86868B;
|
||||
font-style: normal;
|
||||
padding: 40px 20px;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
/* 转换结果样式 */
|
||||
.conversion-result {
|
||||
animation: fadeIn 0.3s ease;
|
||||
}
|
||||
|
||||
.conversion-info {
|
||||
background: rgba(139, 69, 19, 0.1);
|
||||
border: 1px solid rgba(139, 69, 19, 0.2);
|
||||
border-radius: 12px;
|
||||
padding: 16px;
|
||||
margin-bottom: 20px;
|
||||
display: flex;
|
||||
gap: 24px;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.info-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.info-item .label {
|
||||
font-weight: 600;
|
||||
color: #8B4513;
|
||||
}
|
||||
|
||||
.info-item .value {
|
||||
color: #1D1D1F;
|
||||
background: rgba(255, 255, 255, 0.8);
|
||||
padding: 4px 12px;
|
||||
border-radius: 8px;
|
||||
font-size: 0.9375rem;
|
||||
}
|
||||
|
||||
/* 文本显示区域 */
|
||||
.original-text,
|
||||
.classical-text {
|
||||
background: rgba(255, 255, 255, 0.9);
|
||||
border: 1px solid rgba(0, 0, 0, 0.06);
|
||||
border-radius: 12px;
|
||||
padding: 20px;
|
||||
margin-bottom: 20px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.classical-text {
|
||||
background: rgba(244, 164, 96, 0.1);
|
||||
border: 1px solid rgba(244, 164, 96, 0.3);
|
||||
}
|
||||
|
||||
.text-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.text-header .label {
|
||||
font-weight: 600;
|
||||
color: #1D1D1F;
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
.text-content {
|
||||
font-size: 1.125rem;
|
||||
color: #1D1D1F;
|
||||
line-height: 1.8;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
.text-content.classical {
|
||||
font-family: 'STKaiti', 'KaiTi', '楷体', serif;
|
||||
font-size: 1.25rem;
|
||||
line-height: 2;
|
||||
color: #8B4513;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
/* 转换说明区域 */
|
||||
.transformations {
|
||||
background: rgba(255, 255, 255, 0.8);
|
||||
border: 1px solid rgba(0, 0, 0, 0.06);
|
||||
border-radius: 12px;
|
||||
padding: 20px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.transformations-title {
|
||||
font-weight: 600;
|
||||
color: #1D1D1F;
|
||||
margin-bottom: 16px;
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
.transformation-item {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
gap: 8px;
|
||||
padding: 8px 0;
|
||||
border-bottom: 1px solid rgba(0, 0, 0, 0.05);
|
||||
}
|
||||
|
||||
.transformation-item:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
.transformation-item .number {
|
||||
color: #D2691E;
|
||||
font-weight: 600;
|
||||
min-width: 20px;
|
||||
}
|
||||
|
||||
.transformation-item .text {
|
||||
color: #1D1D1F;
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
/* 文言文特色分析 */
|
||||
.classical-features {
|
||||
background: rgba(210, 105, 30, 0.1);
|
||||
border: 1px solid rgba(210, 105, 30, 0.2);
|
||||
border-radius: 12px;
|
||||
padding: 20px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.features-title {
|
||||
font-weight: 600;
|
||||
color: #D2691E;
|
||||
margin-bottom: 16px;
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
.feature-item {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
gap: 12px;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.feature-item:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.feature-label {
|
||||
font-weight: 600;
|
||||
color: #8B4513;
|
||||
min-width: 80px;
|
||||
font-size: 0.9375rem;
|
||||
}
|
||||
|
||||
.feature-text {
|
||||
color: #1D1D1F;
|
||||
line-height: 1.6;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.explanation {
|
||||
background: rgba(139, 69, 19, 0.1);
|
||||
border: 1px solid rgba(139, 69, 19, 0.2);
|
||||
border-radius: 12px;
|
||||
padding: 20px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.explanation .label {
|
||||
font-weight: 600;
|
||||
color: #8B4513;
|
||||
margin-bottom: 12px;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.explanation-text {
|
||||
color: #1D1D1F;
|
||||
line-height: 1.6;
|
||||
font-size: 0.9375rem;
|
||||
}
|
||||
|
||||
.pronunciation {
|
||||
background: rgba(255, 149, 0, 0.1);
|
||||
border: 1px solid rgba(255, 149, 0, 0.2);
|
||||
border-radius: 12px;
|
||||
padding: 16px;
|
||||
margin-bottom: 16px;
|
||||
font-size: 0.9375rem;
|
||||
}
|
||||
|
||||
.pronunciation .label {
|
||||
font-weight: 600;
|
||||
color: #FF9500;
|
||||
margin-right: 8px;
|
||||
}
|
||||
|
||||
.pronunciation .value {
|
||||
color: #1D1D1F;
|
||||
font-family: 'SF Mono', 'Monaco', 'Consolas', 'Courier New', monospace;
|
||||
}
|
||||
|
||||
/* 复制按钮样式 */
|
||||
.copy-btn {
|
||||
background: #D2691E;
|
||||
color: white;
|
||||
border: none;
|
||||
border-radius: 8px;
|
||||
padding: 8px 16px;
|
||||
font-size: 0.8125rem;
|
||||
font-weight: 600;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s ease;
|
||||
box-shadow: 0 2px 4px rgba(210, 105, 30, 0.25);
|
||||
}
|
||||
|
||||
.copy-btn:hover {
|
||||
background: #B8860B;
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
|
||||
.copy-btn-small {
|
||||
background: #D2691E;
|
||||
color: white;
|
||||
border: none;
|
||||
border-radius: 6px;
|
||||
padding: 4px 8px;
|
||||
font-size: 0.75rem;
|
||||
font-weight: 600;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s ease;
|
||||
box-shadow: 0 1px 2px rgba(210, 105, 30, 0.25);
|
||||
}
|
||||
|
||||
.copy-btn-small:hover {
|
||||
background: #B8860B;
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
|
||||
/* 错误样式 - iOS风格 */
|
||||
.error {
|
||||
color: #FF3B30;
|
||||
background: rgba(255, 59, 48, 0.1);
|
||||
border: 1px solid rgba(255, 59, 48, 0.2);
|
||||
padding: 16px;
|
||||
border-radius: 12px;
|
||||
margin-top: 16px;
|
||||
font-weight: 500;
|
||||
backdrop-filter: blur(10px);
|
||||
}
|
||||
|
||||
/* 成功提示 - iOS风格 */
|
||||
.success-toast {
|
||||
position: fixed;
|
||||
top: 20px;
|
||||
right: 20px;
|
||||
background: #34C759;
|
||||
color: white;
|
||||
padding: 12px 20px;
|
||||
border-radius: 12px;
|
||||
box-shadow: 0 8px 24px rgba(52, 199, 89, 0.3);
|
||||
z-index: 1000;
|
||||
opacity: 0;
|
||||
transform: translateX(100%);
|
||||
transition: all 0.3s ease;
|
||||
font-weight: 600;
|
||||
backdrop-filter: blur(20px);
|
||||
}
|
||||
|
||||
.success-toast.show {
|
||||
opacity: 1;
|
||||
transform: translateX(0);
|
||||
}
|
||||
|
||||
/* 响应式设计 */
|
||||
@media (max-width: 768px) {
|
||||
body {
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.container {
|
||||
padding: 20px;
|
||||
margin: 10px;
|
||||
}
|
||||
|
||||
.title {
|
||||
font-size: 2rem;
|
||||
}
|
||||
|
||||
.form-row {
|
||||
flex-direction: column;
|
||||
gap: 0;
|
||||
}
|
||||
|
||||
.form-input {
|
||||
padding: 12px;
|
||||
}
|
||||
|
||||
.btn {
|
||||
padding: 12px;
|
||||
}
|
||||
|
||||
.conversion-container {
|
||||
padding: 15px;
|
||||
}
|
||||
|
||||
.original-text,
|
||||
.classical-text {
|
||||
padding: 15px;
|
||||
}
|
||||
|
||||
.text-header {
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.copy-btn {
|
||||
align-self: flex-end;
|
||||
}
|
||||
|
||||
.conversion-info {
|
||||
flex-direction: column;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.feature-item {
|
||||
flex-direction: column;
|
||||
gap: 4px;
|
||||
}
|
||||
|
||||
.feature-label {
|
||||
min-width: auto;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 480px) {
|
||||
.title {
|
||||
font-size: 1.8rem;
|
||||
letter-spacing: 1px;
|
||||
}
|
||||
|
||||
.container {
|
||||
padding: 15px;
|
||||
}
|
||||
|
||||
.form-input {
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.original-text,
|
||||
.classical-text {
|
||||
padding: 12px;
|
||||
}
|
||||
|
||||
.text-content {
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
.text-content.classical {
|
||||
font-size: 1.125rem;
|
||||
}
|
||||
}
|
||||
|
||||
/* 动画效果 */
|
||||
@keyframes fadeIn {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(10px);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
.conversion-result {
|
||||
animation: fadeIn 0.3s ease;
|
||||
}
|
||||
|
||||
/* 加载动画 */
|
||||
@keyframes pulse {
|
||||
0%, 100% {
|
||||
opacity: 1;
|
||||
}
|
||||
50% {
|
||||
opacity: 0.5;
|
||||
}
|
||||
}
|
||||
|
||||
.loading {
|
||||
animation: pulse 1.5s ease-in-out infinite;
|
||||
}
|
||||
|
||||
/* 古典风格装饰 */
|
||||
.classical-text::before {
|
||||
content: '「';
|
||||
position: absolute;
|
||||
top: 15px;
|
||||
left: 15px;
|
||||
font-size: 1.5rem;
|
||||
color: #D2691E;
|
||||
opacity: 0.6;
|
||||
}
|
||||
|
||||
.classical-text::after {
|
||||
content: '」';
|
||||
position: absolute;
|
||||
bottom: 15px;
|
||||
right: 15px;
|
||||
font-size: 1.5rem;
|
||||
color: #D2691E;
|
||||
opacity: 0.6;
|
||||
}
|
||||
|
||||
.classical-text .text-content {
|
||||
margin: 0 20px;
|
||||
}
|
||||
50
InfoGenie-frontend/public/aimodelapp/AI生成Linux命令/index.html
Normal file
50
InfoGenie-frontend/public/aimodelapp/AI生成Linux命令/index.html
Normal file
@@ -0,0 +1,50 @@
|
||||
<!doctype html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>AI Linux命令生成器</title>
|
||||
<link rel="stylesheet" href="styles.css">
|
||||
</head>
|
||||
<body>
|
||||
<div class="container">
|
||||
<div class="header">
|
||||
<h1 class="title">AI Linux命令生成器</h1>
|
||||
<p class="subtitle">让AI为您的Linux操作生成准确的命令</p>
|
||||
</div>
|
||||
|
||||
<div class="form-section">
|
||||
<div class="form-group">
|
||||
<label class="form-label" for="task-input">任务描述：</label>
|
||||
<textarea
|
||||
id="task-input"
|
||||
class="form-input textarea"
|
||||
placeholder="请描述您想要在Linux系统中执行的操作，例如：切换到根目录、查看当前目录下的文件、创建新文件夹等..."
|
||||
>切换到根目录</textarea>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label class="form-label" for="level-select">技能水平：</label>
|
||||
<select id="level-select" class="form-input select">
|
||||
<option value="beginner">初学者 - 基础命令和详细解释</option>
|
||||
<option value="intermediate">中级用户 - 常用命令和选项</option>
|
||||
<option value="advanced">高级用户 - 高效命令和高级用法</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<button id="generateBtn" class="btn">生成命令</button>
|
||||
</div>
|
||||
|
||||
<div class="result-section">
|
||||
<h3 class="result-title">推荐的Linux命令</h3>
|
||||
<div id="loading" class="loading">正在生成中，请稍候...</div>
|
||||
<div id="commands" class="commands-container">
|
||||
<div class="placeholder">点击"生成命令"按钮，AI将为您推荐合适的Linux命令</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script src="env.js"></script>
|
||||
<script src="script.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
351
InfoGenie-frontend/public/aimodelapp/AI生成Linux命令/script.js
Normal file
351
InfoGenie-frontend/public/aimodelapp/AI生成Linux命令/script.js
Normal file
@@ -0,0 +1,351 @@
|
||||
// 从配置文件导入设置
|
||||
// 配置在 env.js 文件中定义
|
||||
|
||||
// DOM 元素
|
||||
const taskInput = document.getElementById('task-input');
|
||||
const levelSelect = document.getElementById('level-select');
|
||||
const generateBtn = document.getElementById('generateBtn');
|
||||
const loadingDiv = document.getElementById('loading');
|
||||
const commandsContainer = document.getElementById('commands');
|
||||
|
||||
// 调用后端API
|
||||
async function callBackendAPI(taskDescription, difficultyLevel) {
|
||||
try {
|
||||
const response = await fetch('http://127.0.0.1:5002/api/aimodelapp/linux-command', {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json'
|
||||
},
|
||||
body: JSON.stringify({
|
||||
task_description: taskDescription,
|
||||
difficulty_level: difficultyLevel
|
||||
})
|
||||
});
|
||||
|
||||
if (!response.ok) {
|
||||
const errorData = await response.json();
|
||||
throw new Error(errorData.error || `API请求失败: ${response.status} ${response.statusText}`);
|
||||
}
|
||||
|
||||
const data = await response.json();
|
||||
if (data.success) {
|
||||
return data.command_result;
|
||||
} else {
|
||||
throw new Error(data.error || 'API响应格式异常');
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('API调用错误:', error);
|
||||
throw error;
|
||||
}
|
||||
}
|
||||
|
||||
// 解析AI响应
|
||||
function parseAIResponse(response) {
|
||||
try {
|
||||
// 尝试直接解析JSON
|
||||
const parsed = JSON.parse(response);
|
||||
return parsed;
|
||||
} catch (error) {
|
||||
// 如果直接解析失败，尝试提取JSON部分
|
||||
const jsonMatch = response.match(/\{[\s\S]*\}/);
|
||||
if (jsonMatch) {
|
||||
try {
|
||||
const parsed = JSON.parse(jsonMatch[0]);
|
||||
return parsed;
|
||||
} catch (e) {
|
||||
console.error('JSON解析失败:', e);
|
||||
}
|
||||
}
|
||||
|
||||
// 如果JSON解析失败，返回空对象
|
||||
console.error('无法解析AI响应:', response);
|
||||
return {};
|
||||
}
|
||||
}
|
||||
|
||||
// 获取安全等级颜色
|
||||
function getSafetyLevelColor(safetyLevel) {
|
||||
const colors = {
|
||||
'safe': '#34C759',
|
||||
'caution': '#FF9500',
|
||||
'dangerous': '#FF3B30'
|
||||
};
|
||||
return colors[safetyLevel] || '#86868B';
|
||||
}
|
||||
|
||||
// 获取安全等级文本
|
||||
function getSafetyLevelText(safetyLevel) {
|
||||
const texts = {
|
||||
'safe': '安全',
|
||||
'caution': '谨慎',
|
||||
'dangerous': '危险'
|
||||
};
|
||||
return texts[safetyLevel] || '未知';
|
||||
}
|
||||
|
||||
// 显示命令建议
|
||||
function displayCommands(commandData) {
|
||||
commandsContainer.innerHTML = '';
|
||||
|
||||
if (!commandData || !commandData.commands || commandData.commands.length === 0) {
|
||||
commandsContainer.innerHTML = '<div class="placeholder">暂无命令建议，请尝试重新生成</div>';
|
||||
return;
|
||||
}
|
||||
|
||||
// 显示命令列表
|
||||
if (commandData.commands && commandData.commands.length > 0) {
|
||||
const commandsTitle = document.createElement('div');
|
||||
commandsTitle.className = 'section-title';
|
||||
commandsTitle.textContent = '推荐命令';
|
||||
commandsContainer.appendChild(commandsTitle);
|
||||
|
||||
commandData.commands.forEach((command, index) => {
|
||||
const commandElement = document.createElement('div');
|
||||
commandElement.className = 'command-item';
|
||||
|
||||
const safetyColor = getSafetyLevelColor(command.safety_level);
|
||||
const safetyText = getSafetyLevelText(command.safety_level);
|
||||
|
||||
commandElement.innerHTML = `
|
||||
<div class="command-content">
|
||||
<div class="command-header">
|
||||
<div class="command-code">${command.command}</div>
|
||||
<div class="safety-badge" style="background-color: ${safetyColor}">${safetyText}</div>
|
||||
</div>
|
||||
<div class="command-description">${command.description}</div>
|
||||
<div class="command-explanation">
|
||||
<strong>详细说明：</strong>${command.explanation}
|
||||
</div>
|
||||
${command.example_output ? `<div class="command-output"><strong>预期输出：</strong><code>${command.example_output}</code></div>` : ''}
|
||||
${command.alternatives && command.alternatives.length > 0 ? `
|
||||
<div class="command-alternatives">
|
||||
<strong>替代命令：</strong>
|
||||
${command.alternatives.map(alt => `<code class="alt-command" onclick="copyToClipboard('${alt}', this)">${alt}</code>`).join(' ')}
|
||||
</div>
|
||||
` : ''}
|
||||
</div>
|
||||
<button class="copy-btn" onclick="copyToClipboard('${command.command}', this)">复制命令</button>
|
||||
`;
|
||||
commandsContainer.appendChild(commandElement);
|
||||
});
|
||||
}
|
||||
|
||||
// 显示安全警告
|
||||
if (commandData.safety_warnings && commandData.safety_warnings.length > 0) {
|
||||
const warningsTitle = document.createElement('div');
|
||||
warningsTitle.className = 'section-title warning';
|
||||
warningsTitle.textContent = '⚠️ 安全提示';
|
||||
commandsContainer.appendChild(warningsTitle);
|
||||
|
||||
const warningsContainer = document.createElement('div');
|
||||
warningsContainer.className = 'warnings-container';
|
||||
commandData.safety_warnings.forEach(warning => {
|
||||
const warningElement = document.createElement('div');
|
||||
warningElement.className = 'warning-item';
|
||||
warningElement.textContent = warning;
|
||||
warningsContainer.appendChild(warningElement);
|
||||
});
|
||||
commandsContainer.appendChild(warningsContainer);
|
||||
}
|
||||
|
||||
// 显示前置条件
|
||||
if (commandData.prerequisites && commandData.prerequisites.length > 0) {
|
||||
const prereqTitle = document.createElement('div');
|
||||
prereqTitle.className = 'section-title info';
|
||||
prereqTitle.textContent = '📋 前置条件';
|
||||
commandsContainer.appendChild(prereqTitle);
|
||||
|
||||
const prereqContainer = document.createElement('div');
|
||||
prereqContainer.className = 'prerequisites-container';
|
||||
commandData.prerequisites.forEach(prereq => {
|
||||
const prereqElement = document.createElement('div');
|
||||
prereqElement.className = 'prerequisite-item';
|
||||
prereqElement.textContent = prereq;
|
||||
prereqContainer.appendChild(prereqElement);
|
||||
});
|
||||
commandsContainer.appendChild(prereqContainer);
|
||||
}
|
||||
|
||||
// 显示相关概念
|
||||
if (commandData.related_concepts && commandData.related_concepts.length > 0) {
|
||||
const conceptsTitle = document.createElement('div');
|
||||
conceptsTitle.className = 'section-title info';
|
||||
conceptsTitle.textContent = '💡 相关概念';
|
||||
commandsContainer.appendChild(conceptsTitle);
|
||||
|
||||
const conceptsContainer = document.createElement('div');
|
||||
conceptsContainer.className = 'concepts-container';
|
||||
commandData.related_concepts.forEach(concept => {
|
||||
const conceptElement = document.createElement('div');
|
||||
conceptElement.className = 'concept-item';
|
||||
conceptElement.textContent = concept;
|
||||
conceptsContainer.appendChild(conceptElement);
|
||||
});
|
||||
commandsContainer.appendChild(conceptsContainer);
|
||||
}
|
||||
}
|
||||
|
||||
// 复制到剪贴板
|
||||
function copyToClipboard(text, button) {
|
||||
navigator.clipboard.writeText(text).then(() => {
|
||||
showSuccessToast('已复制到剪贴板');
|
||||
const originalText = button.textContent;
|
||||
button.textContent = '已复制';
|
||||
button.classList.add('copied');
|
||||
setTimeout(() => {
|
||||
button.textContent = originalText;
|
||||
button.classList.remove('copied');
|
||||
}, 2000);
|
||||
}).catch(err => {
|
||||
console.error('复制失败:', err);
|
||||
// 备用复制方法
|
||||
const textArea = document.createElement('textarea');
|
||||
textArea.value = text;
|
||||
document.body.appendChild(textArea);
|
||||
textArea.select();
|
||||
try {
|
||||
document.execCommand('copy');
|
||||
showSuccessToast('已复制到剪贴板');
|
||||
const originalText = button.textContent;
|
||||
button.textContent = '已复制';
|
||||
button.classList.add('copied');
|
||||
setTimeout(() => {
|
||||
button.textContent = originalText;
|
||||
button.classList.remove('copied');
|
||||
}, 2000);
|
||||
} catch (e) {
|
||||
showErrorMessage('复制失败，请手动复制');
|
||||
}
|
||||
document.body.removeChild(textArea);
|
||||
});
|
||||
}
|
||||
|
||||
// 显示成功提示
|
||||
function showSuccessToast(message) {
|
||||
const toast = document.createElement('div');
|
||||
toast.className = 'success-toast';
|
||||
toast.textContent = message;
|
||||
document.body.appendChild(toast);
|
||||
|
||||
setTimeout(() => {
|
||||
toast.classList.add('show');
|
||||
}, 100);
|
||||
|
||||
setTimeout(() => {
|
||||
toast.classList.remove('show');
|
||||
setTimeout(() => {
|
||||
document.body.removeChild(toast);
|
||||
}, 300);
|
||||
}, 2000);
|
||||
}
|
||||
|
||||
// 显示错误信息
|
||||
function showErrorMessage(message) {
|
||||
const errorDiv = document.createElement('div');
|
||||
errorDiv.className = 'error';
|
||||
errorDiv.textContent = message;
|
||||
commandsContainer.innerHTML = '';
|
||||
commandsContainer.appendChild(errorDiv);
|
||||
}
|
||||
|
||||
// 显示加载状态
|
||||
function showLoading(show) {
|
||||
loadingDiv.style.display = show ? 'block' : 'none';
|
||||
generateBtn.disabled = show;
|
||||
generateBtn.textContent = show ? '生成中...' : '生成命令';
|
||||
}
|
||||
|
||||
// 生成命令建议
|
||||
async function generateCommands() {
|
||||
const taskDescription = taskInput.value.trim();
|
||||
const difficultyLevel = levelSelect.value;
|
||||
|
||||
if (!taskDescription) {
|
||||
showErrorMessage('请输入任务描述');
|
||||
return;
|
||||
}
|
||||
|
||||
showLoading(true);
|
||||
commandsContainer.innerHTML = '';
|
||||
|
||||
try {
|
||||
const commandResult = await callBackendAPI(taskDescription, difficultyLevel);
|
||||
const commandData = parseAIResponse(commandResult);
|
||||
displayCommands(commandData);
|
||||
} catch (error) {
|
||||
console.error('生成命令失败:', error);
|
||||
showErrorMessage(`生成失败: ${error.message}`);
|
||||
} finally {
|
||||
showLoading(false);
|
||||
}
|
||||
}
|
||||
|
||||
// 事件监听器
|
||||
generateBtn.addEventListener('click', generateCommands);
|
||||
|
||||
// 回车键生成
|
||||
taskInput.addEventListener('keypress', (e) => {
|
||||
if (e.key === 'Enter' && !e.shiftKey) {
|
||||
e.preventDefault();
|
||||
generateCommands();
|
||||
}
|
||||
});
|
||||
|
||||
// 技能水平变化时的提示
|
||||
levelSelect.addEventListener('change', (e) => {
|
||||
const levelDescriptions = {
|
||||
'beginner': '将提供基础命令和详细解释',
|
||||
'intermediate': '将提供常用命令和选项',
|
||||
'advanced': '将提供高效命令和高级用法'
|
||||
};
|
||||
|
||||
const description = levelDescriptions[e.target.value];
|
||||
if (description) {
|
||||
console.log(`已选择技能水平: ${e.target.value} - ${description}`);
|
||||
}
|
||||
});
|
||||
|
||||
// 页面加载完成后的初始化
|
||||
document.addEventListener('DOMContentLoaded', () => {
|
||||
// 设置默认占位符
|
||||
commandsContainer.innerHTML = '<div class="placeholder">请输入要执行的Linux操作，然后点击生成按钮获取相应的命令</div>';
|
||||
|
||||
// 设置默认任务描述
|
||||
if (!taskInput.value.trim()) {
|
||||
taskInput.value = '切换到根目录';
|
||||
}
|
||||
});
|
||||
|
||||
// 导出函数供HTML调用
|
||||
window.copyToClipboard = copyToClipboard;
|
||||
window.generateCommands = generateCommands;
|
||||
|
||||
// 添加一些实用的辅助函数
|
||||
function getRandomCommand(commands) {
|
||||
if (commands && commands.length > 0) {
|
||||
const randomIndex = Math.floor(Math.random() * commands.length);
|
||||
return commands[randomIndex];
|
||||
}
|
||||
return null;
|
||||
}
|
||||
|
||||
// 命令使用统计（可选功能）
|
||||
function trackCommandUsage(command) {
|
||||
const usage = JSON.parse(localStorage.getItem('commandUsage') || '{}');
|
||||
usage[command] = (usage[command] || 0) + 1;
|
||||
localStorage.setItem('commandUsage', JSON.stringify(usage));
|
||||
}
|
||||
|
||||
// 获取常用命令（可选功能）
|
||||
function getPopularCommands(limit = 5) {
|
||||
const usage = JSON.parse(localStorage.getItem('commandUsage') || '{}');
|
||||
return Object.entries(usage)
|
||||
.sort(([,a], [,b]) => b - a)
|
||||
.slice(0, limit)
|
||||
.map(([command]) => command);
|
||||
}
|
||||
|
||||
// 导出辅助函数
|
||||
window.getRandomCommand = getRandomCommand;
|
||||
window.trackCommandUsage = trackCommandUsage;
|
||||
window.getPopularCommands = getPopularCommands;
|
||||
576
InfoGenie-frontend/public/aimodelapp/AI生成Linux命令/styles.css
Normal file
576
InfoGenie-frontend/public/aimodelapp/AI生成Linux命令/styles.css
Normal file
@@ -0,0 +1,576 @@
|
||||
/* 全局样式重置 */
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
/* 主体样式 - iOS风格 */
|
||||
body {
|
||||
font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Helvetica Neue', Arial, sans-serif;
|
||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||
min-height: 100vh;
|
||||
padding: 20px;
|
||||
color: #1D1D1F;
|
||||
line-height: 1.47;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
}
|
||||
|
||||
/* 容器样式 - iOS毛玻璃效果 */
|
||||
.container {
|
||||
max-width: 900px;
|
||||
margin: 0 auto;
|
||||
background: rgba(255, 255, 255, 0.85);
|
||||
border-radius: 24px;
|
||||
padding: 32px;
|
||||
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12), 0 2px 8px rgba(0, 0, 0, 0.08);
|
||||
backdrop-filter: blur(20px) saturate(180%);
|
||||
border: 1px solid rgba(255, 255, 255, 0.2);
|
||||
}
|
||||
|
||||
/* 头部样式 - iOS风格 */
|
||||
.header {
|
||||
text-align: center;
|
||||
margin-bottom: 32px;
|
||||
}
|
||||
|
||||
.title {
|
||||
font-size: 2.25rem;
|
||||
color: #1D1D1F;
|
||||
margin-bottom: 8px;
|
||||
font-weight: 600;
|
||||
letter-spacing: -0.02em;
|
||||
}
|
||||
|
||||
.subtitle {
|
||||
color: #86868B;
|
||||
font-size: 1.0625rem;
|
||||
margin-bottom: 24px;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
/* 表单样式 - iOS风格 */
|
||||
.form-section {
|
||||
margin-bottom: 32px;
|
||||
}
|
||||
|
||||
.form-group {
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
|
||||
.form-label {
|
||||
display: block;
|
||||
margin-bottom: 8px;
|
||||
font-weight: 600;
|
||||
color: #1D1D1F;
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
.form-input {
|
||||
width: 100%;
|
||||
padding: 16px;
|
||||
border: 1px solid rgba(0, 0, 0, 0.1);
|
||||
border-radius: 12px;
|
||||
font-size: 1rem;
|
||||
transition: all 0.2s ease;
|
||||
background: rgba(255, 255, 255, 0.8);
|
||||
font-family: inherit;
|
||||
backdrop-filter: blur(10px);
|
||||
}
|
||||
|
||||
.form-input:focus {
|
||||
outline: none;
|
||||
border-color: #667eea;
|
||||
background: rgba(255, 255, 255, 0.95);
|
||||
box-shadow: 0 0 0 4px rgba(102, 126, 234, 0.1);
|
||||
}
|
||||
|
||||
.textarea {
|
||||
resize: vertical;
|
||||
min-height: 120px;
|
||||
}
|
||||
|
||||
.select {
|
||||
cursor: pointer;
|
||||
appearance: none;
|
||||
background-image: url('data:image/svg+xml;charset=US-ASCII,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 4 5"><path fill="%23666" d="M2 0L0 2h4zm0 5L0 3h4z"/></svg>');
|
||||
background-repeat: no-repeat;
|
||||
background-position: right 15px center;
|
||||
background-size: 12px;
|
||||
padding-right: 40px;
|
||||
}
|
||||
|
||||
/* 按钮样式 - iOS风格 */
|
||||
.btn {
|
||||
width: 100%;
|
||||
padding: 16px;
|
||||
background: #667eea;
|
||||
color: white;
|
||||
border: none;
|
||||
border-radius: 12px;
|
||||
font-size: 1.0625rem;
|
||||
font-weight: 600;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s ease;
|
||||
margin-bottom: 24px;
|
||||
box-shadow: 0 2px 8px rgba(102, 126, 234, 0.25);
|
||||
}
|
||||
|
||||
.btn:hover {
|
||||
background: #5a67d8;
|
||||
transform: translateY(-1px);
|
||||
box-shadow: 0 4px 16px rgba(102, 126, 234, 0.35);
|
||||
}
|
||||
|
||||
.btn:active {
|
||||
transform: translateY(0);
|
||||
background: #4c51bf;
|
||||
}
|
||||
|
||||
.btn:disabled {
|
||||
opacity: 0.5;
|
||||
cursor: not-allowed;
|
||||
transform: none;
|
||||
background: #86868B;
|
||||
}
|
||||
|
||||
/* 结果区域样式 - iOS风格 */
|
||||
.result-section {
|
||||
margin-top: 32px;
|
||||
}
|
||||
|
||||
.result-title {
|
||||
font-size: 1.25rem;
|
||||
color: #1D1D1F;
|
||||
margin-bottom: 16px;
|
||||
text-align: center;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.loading {
|
||||
display: none;
|
||||
text-align: center;
|
||||
color: #667eea;
|
||||
font-style: normal;
|
||||
padding: 24px;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.commands-container {
|
||||
background: rgba(255, 255, 255, 0.6);
|
||||
border: 1px solid rgba(0, 0, 0, 0.08);
|
||||
border-radius: 16px;
|
||||
padding: 24px;
|
||||
min-height: 150px;
|
||||
backdrop-filter: blur(10px);
|
||||
}
|
||||
|
||||
.placeholder {
|
||||
text-align: center;
|
||||
color: #86868B;
|
||||
font-style: normal;
|
||||
padding: 40px 20px;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
/* 分组标题样式 - iOS风格 */
|
||||
.section-title {
|
||||
font-size: 1.125rem;
|
||||
font-weight: 600;
|
||||
color: white;
|
||||
margin: 20px 0 12px 0;
|
||||
padding: 12px 16px;
|
||||
background: #667eea;
|
||||
border-radius: 12px;
|
||||
text-align: center;
|
||||
box-shadow: 0 2px 8px rgba(102, 126, 234, 0.25);
|
||||
}
|
||||
|
||||
.section-title:first-child {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
.section-title.warning {
|
||||
background: #FF9500;
|
||||
box-shadow: 0 2px 8px rgba(255, 149, 0, 0.25);
|
||||
}
|
||||
|
||||
.section-title.info {
|
||||
background: #34C759;
|
||||
box-shadow: 0 2px 8px rgba(52, 199, 89, 0.25);
|
||||
}
|
||||
|
||||
/* 命令项样式 - iOS风格 */
|
||||
.command-item {
|
||||
background: rgba(255, 255, 255, 0.9);
|
||||
border: 1px solid rgba(0, 0, 0, 0.06);
|
||||
border-radius: 12px;
|
||||
padding: 20px;
|
||||
margin-bottom: 16px;
|
||||
transition: all 0.2s ease;
|
||||
position: relative;
|
||||
backdrop-filter: blur(10px);
|
||||
}
|
||||
|
||||
.command-item:hover {
|
||||
border-color: rgba(102, 126, 234, 0.3);
|
||||
box-shadow: 0 4px 16px rgba(102, 126, 234, 0.1);
|
||||
background: rgba(255, 255, 255, 0.95);
|
||||
}
|
||||
|
||||
.command-item:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.command-content {
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.command-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 12px;
|
||||
flex-wrap: wrap;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.command-code {
|
||||
font-family: 'SF Mono', 'Monaco', 'Consolas', 'Courier New', monospace;
|
||||
background: #f8f9fa;
|
||||
padding: 8px 12px;
|
||||
border-radius: 8px;
|
||||
font-size: 0.9375rem;
|
||||
color: #2d3748;
|
||||
border: 1px solid #e2e8f0;
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
word-break: break-all;
|
||||
}
|
||||
|
||||
.safety-badge {
|
||||
padding: 4px 12px;
|
||||
border-radius: 20px;
|
||||
font-size: 0.8125rem;
|
||||
font-weight: 600;
|
||||
color: white;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.command-description {
|
||||
font-size: 1rem;
|
||||
color: #2d3748;
|
||||
margin-bottom: 12px;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.command-explanation {
|
||||
font-size: 0.9375rem;
|
||||
color: #4a5568;
|
||||
margin-bottom: 12px;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.command-output {
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.command-output code {
|
||||
font-family: 'SF Mono', 'Monaco', 'Consolas', 'Courier New', monospace;
|
||||
background: #2d3748;
|
||||
color: #e2e8f0;
|
||||
padding: 8px 12px;
|
||||
border-radius: 6px;
|
||||
font-size: 0.875rem;
|
||||
display: block;
|
||||
margin-top: 4px;
|
||||
white-space: pre-wrap;
|
||||
word-break: break-all;
|
||||
}
|
||||
|
||||
.command-alternatives {
|
||||
margin-top: 12px;
|
||||
}
|
||||
|
||||
.alt-command {
|
||||
font-family: 'SF Mono', 'Monaco', 'Consolas', 'Courier New', monospace;
|
||||
background: #e2e8f0;
|
||||
color: #2d3748;
|
||||
padding: 4px 8px;
|
||||
border-radius: 4px;
|
||||
font-size: 0.8125rem;
|
||||
margin: 2px 4px 2px 0;
|
||||
display: inline-block;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
|
||||
.alt-command:hover {
|
||||
background: #cbd5e0;
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
|
||||
.copy-btn {
|
||||
background: #667eea;
|
||||
color: white;
|
||||
border: none;
|
||||
border-radius: 8px;
|
||||
padding: 10px 20px;
|
||||
font-size: 0.875rem;
|
||||
font-weight: 600;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s ease;
|
||||
box-shadow: 0 2px 4px rgba(102, 126, 234, 0.25);
|
||||
position: absolute;
|
||||
top: 20px;
|
||||
right: 20px;
|
||||
}
|
||||
|
||||
.copy-btn:hover {
|
||||
background: #5a67d8;
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
|
||||
.copy-btn.copied {
|
||||
background: #34C759;
|
||||
}
|
||||
|
||||
/* 警告容器样式 */
|
||||
.warnings-container {
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.warning-item {
|
||||
background: rgba(255, 149, 0, 0.1);
|
||||
border: 1px solid rgba(255, 149, 0, 0.2);
|
||||
border-radius: 8px;
|
||||
padding: 12px 16px;
|
||||
margin-bottom: 8px;
|
||||
color: #b45309;
|
||||
font-size: 0.9375rem;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.warning-item:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
/* 前置条件容器样式 */
|
||||
.prerequisites-container {
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.prerequisite-item {
|
||||
background: rgba(52, 199, 89, 0.1);
|
||||
border: 1px solid rgba(52, 199, 89, 0.2);
|
||||
border-radius: 8px;
|
||||
padding: 12px 16px;
|
||||
margin-bottom: 8px;
|
||||
color: #166534;
|
||||
font-size: 0.9375rem;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.prerequisite-item:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
/* 相关概念容器样式 */
|
||||
.concepts-container {
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.concept-item {
|
||||
background: rgba(59, 130, 246, 0.1);
|
||||
border: 1px solid rgba(59, 130, 246, 0.2);
|
||||
border-radius: 8px;
|
||||
padding: 12px 16px;
|
||||
margin-bottom: 8px;
|
||||
color: #1e40af;
|
||||
font-size: 0.9375rem;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.concept-item:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
/* 错误样式 - iOS风格 */
|
||||
.error {
|
||||
color: #FF3B30;
|
||||
background: rgba(255, 59, 48, 0.1);
|
||||
border: 1px solid rgba(255, 59, 48, 0.2);
|
||||
padding: 16px;
|
||||
border-radius: 12px;
|
||||
margin-top: 16px;
|
||||
font-weight: 500;
|
||||
backdrop-filter: blur(10px);
|
||||
}
|
||||
|
||||
/* 成功提示 - iOS风格 */
|
||||
.success-toast {
|
||||
position: fixed;
|
||||
top: 20px;
|
||||
right: 20px;
|
||||
background: #34C759;
|
||||
color: white;
|
||||
padding: 12px 20px;
|
||||
border-radius: 12px;
|
||||
box-shadow: 0 8px 24px rgba(52, 199, 89, 0.3);
|
||||
z-index: 1000;
|
||||
opacity: 0;
|
||||
transform: translateX(100%);
|
||||
transition: all 0.3s ease;
|
||||
font-weight: 600;
|
||||
backdrop-filter: blur(20px);
|
||||
}
|
||||
|
||||
.success-toast.show {
|
||||
opacity: 1;
|
||||
transform: translateX(0);
|
||||
}
|
||||
|
||||
/* 响应式设计 - 移动端优化 */
|
||||
@media (max-width: 768px) {
|
||||
body {
|
||||
padding: 16px;
|
||||
}
|
||||
|
||||
.container {
|
||||
padding: 24px;
|
||||
border-radius: 20px;
|
||||
}
|
||||
|
||||
.title {
|
||||
font-size: 1.875rem;
|
||||
}
|
||||
|
||||
.subtitle {
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
.form-input {
|
||||
padding: 14px;
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
.btn {
|
||||
padding: 16px;
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
.commands-container {
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.command-item {
|
||||
padding: 16px;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.command-header {
|
||||
flex-direction: column;
|
||||
align-items: stretch;
|
||||
}
|
||||
|
||||
.command-code {
|
||||
margin-bottom: 8px;
|
||||
font-size: 0.875rem;
|
||||
}
|
||||
|
||||
.copy-btn {
|
||||
position: static;
|
||||
width: 100%;
|
||||
margin-top: 12px;
|
||||
}
|
||||
|
||||
.safety-badge {
|
||||
align-self: flex-start;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 480px) {
|
||||
.title {
|
||||
font-size: 1.75rem;
|
||||
}
|
||||
|
||||
.container {
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.form-input {
|
||||
padding: 12px;
|
||||
}
|
||||
|
||||
.command-item {
|
||||
padding: 12px;
|
||||
}
|
||||
|
||||
.command-code {
|
||||
font-size: 0.8125rem;
|
||||
padding: 6px 8px;
|
||||
}
|
||||
|
||||
.command-description,
|
||||
.command-explanation {
|
||||
font-size: 0.875rem;
|
||||
}
|
||||
}
|
||||
|
||||
/* 动画效果 */
|
||||
@keyframes fadeIn {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(10px);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
.command-item {
|
||||
animation: fadeIn 0.3s ease;
|
||||
}
|
||||
|
||||
/* 加载动画 */
|
||||
@keyframes pulse {
|
||||
0%, 100% {
|
||||
opacity: 1;
|
||||
}
|
||||
50% {
|
||||
opacity: 0.5;
|
||||
}
|
||||
}
|
||||
|
||||
.loading {
|
||||
animation: pulse 1.5s ease-in-out infinite;
|
||||
}
|
||||
|
||||
/* 代码字体优化 */
|
||||
.command-code,
|
||||
.alt-command,
|
||||
code {
|
||||
font-family: 'SF Mono', 'Monaco', 'Consolas', 'Courier New', monospace;
|
||||
font-variant-ligatures: none;
|
||||
}
|
||||
|
||||
/* 滚动条样式 */
|
||||
::-webkit-scrollbar {
|
||||
width: 8px;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-track {
|
||||
background: rgba(0, 0, 0, 0.1);
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb {
|
||||
background: rgba(102, 126, 234, 0.3);
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb:hover {
|
||||
background: rgba(102, 126, 234, 0.5);
|
||||
}
|
||||
52
InfoGenie-frontend/public/aimodelapp/AI生成表情包/index.html
Normal file
52
InfoGenie-frontend/public/aimodelapp/AI生成表情包/index.html
Normal file
@@ -0,0 +1,52 @@
|
||||
<!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 rel="stylesheet" href="styles.css">
|
||||
</head>
|
||||
<body>
|
||||
<div class="container">
|
||||
<div class="header">
|
||||
<h1 class="title">AI表情制作器</h1>
|
||||
<p class="subtitle">让AI为您的文字生成生动的表情符号</p>
|
||||
</div>
|
||||
|
||||
<div class="form-section">
|
||||
<div class="form-group">
|
||||
<label class="form-label" for="text-input">输入文字：</label>
|
||||
<textarea
|
||||
id="text-input"
|
||||
class="form-input textarea"
|
||||
placeholder="请输入您想要表达的短语或句子，例如：开心、生气、无奈、加油等..."
|
||||
>开心</textarea>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label class="form-label" for="style-select">表情风格：</label>
|
||||
<select id="style-select" class="form-input select">
|
||||
<option value="mixed">混合风格（推荐）</option>
|
||||
<option value="emoji">仅Emoji表情</option>
|
||||
<option value="kaomoji">仅颜文字</option>
|
||||
<option value="cute">可爱风格</option>
|
||||
<option value="cool">酷炫风格</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<button id="generateBtn" class="btn">生成表情</button>
|
||||
</div>
|
||||
|
||||
<div class="result-section">
|
||||
<h3 class="result-title">推荐的表情</h3>
|
||||
<div id="loading" class="loading">正在生成中，请稍候...</div>
|
||||
<div id="expressions" class="expressions-container">
|
||||
<div class="placeholder">点击"生成表情"按钮，AI将为您推荐合适的表情符号</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script src="env.js"></script>
|
||||
<script src="script.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
298
InfoGenie-frontend/public/aimodelapp/AI生成表情包/script.js
Normal file
298
InfoGenie-frontend/public/aimodelapp/AI生成表情包/script.js
Normal file
@@ -0,0 +1,298 @@
|
||||
// 从配置文件导入设置
|
||||
// 配置在 env.js 文件中定义
|
||||
|
||||
// DOM 元素
|
||||
const textInput = document.getElementById('text-input');
|
||||
const styleSelect = document.getElementById('style-select');
|
||||
const generateBtn = document.getElementById('generateBtn');
|
||||
const loadingDiv = document.getElementById('loading');
|
||||
const expressionsContainer = document.getElementById('expressions');
|
||||
|
||||
// 调用后端API
|
||||
async function callBackendAPI(text, style) {
|
||||
try {
|
||||
const response = await fetch('http://127.0.0.1:5002/api/aimodelapp/expression-maker', {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json'
|
||||
},
|
||||
body: JSON.stringify({
|
||||
text: text,
|
||||
style: style
|
||||
})
|
||||
});
|
||||
|
||||
if (!response.ok) {
|
||||
const errorData = await response.json();
|
||||
throw new Error(errorData.error || `API请求失败: ${response.status} ${response.statusText}`);
|
||||
}
|
||||
|
||||
const data = await response.json();
|
||||
if (data.success) {
|
||||
return data.expressions;
|
||||
} else {
|
||||
throw new Error(data.error || 'API响应格式异常');
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('API调用错误:', error);
|
||||
throw error;
|
||||
}
|
||||
}
|
||||
|
||||
// 解析AI响应
|
||||
function parseAIResponse(response) {
|
||||
try {
|
||||
// 尝试直接解析JSON
|
||||
const parsed = JSON.parse(response);
|
||||
return parsed.expressions || {};
|
||||
} catch (error) {
|
||||
// 如果直接解析失败，尝试提取JSON部分
|
||||
const jsonMatch = response.match(/\{[\s\S]*\}/);
|
||||
if (jsonMatch) {
|
||||
try {
|
||||
const parsed = JSON.parse(jsonMatch[0]);
|
||||
return parsed.expressions || {};
|
||||
} catch (e) {
|
||||
console.error('JSON解析失败:', e);
|
||||
}
|
||||
}
|
||||
|
||||
// 如果JSON解析失败，返回空对象
|
||||
console.error('无法解析AI响应:', response);
|
||||
return {};
|
||||
}
|
||||
}
|
||||
|
||||
// 显示表情建议
|
||||
function displayExpressions(expressions) {
|
||||
expressionsContainer.innerHTML = '';
|
||||
|
||||
if (!expressions || Object.keys(expressions).length === 0) {
|
||||
expressionsContainer.innerHTML = '<div class="placeholder">暂无表情建议，请尝试重新生成</div>';
|
||||
return;
|
||||
}
|
||||
|
||||
// 表情分类的显示名称
|
||||
const categoryNames = {
|
||||
'emoji': 'Emoji表情',
|
||||
'kaomoji': '颜文字',
|
||||
'combination': '组合表情'
|
||||
};
|
||||
|
||||
// 按分类显示表情
|
||||
Object.keys(expressions).forEach(category => {
|
||||
if (expressions[category] && expressions[category].length > 0) {
|
||||
// 创建分组标题
|
||||
const groupTitle = document.createElement('div');
|
||||
groupTitle.className = 'expression-group-title';
|
||||
groupTitle.textContent = categoryNames[category] || category;
|
||||
expressionsContainer.appendChild(groupTitle);
|
||||
|
||||
// 显示该分类下的表情
|
||||
expressions[category].forEach(expression => {
|
||||
const expressionElement = document.createElement('div');
|
||||
expressionElement.className = 'expression-item';
|
||||
|
||||
// 获取情感强度颜色
|
||||
const intensityColor = CONFIG.intensityLevels[expression.intensity]?.color || '#86868B';
|
||||
|
||||
expressionElement.innerHTML = `
|
||||
<div class="expression-content">
|
||||
<div class="expression-symbol ${CONFIG.expressionCategories[category]?.className || 'emoji'}">${expression.symbol}</div>
|
||||
<div class="expression-info">
|
||||
<div class="expression-text">${expression.symbol}</div>
|
||||
<div class="expression-description">
|
||||
${expression.description}<br>
|
||||
<span style="color: ${intensityColor}; font-weight: 600;">强度: ${expression.intensity}</span>
|
||||
${expression.usage ? ` | ${expression.usage}` : ''}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<button class="copy-btn" onclick="copyToClipboard('${expression.symbol}', this)">复制</button>
|
||||
`;
|
||||
expressionsContainer.appendChild(expressionElement);
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// 复制到剪贴板
|
||||
function copyToClipboard(text, button) {
|
||||
navigator.clipboard.writeText(text).then(() => {
|
||||
showSuccessToast('已复制到剪贴板');
|
||||
button.textContent = '已复制';
|
||||
setTimeout(() => {
|
||||
button.textContent = '复制';
|
||||
}, 2000);
|
||||
}).catch(err => {
|
||||
console.error('复制失败:', err);
|
||||
// 备用复制方法
|
||||
const textArea = document.createElement('textarea');
|
||||
textArea.value = text;
|
||||
document.body.appendChild(textArea);
|
||||
textArea.select();
|
||||
try {
|
||||
document.execCommand('copy');
|
||||
showSuccessToast('已复制到剪贴板');
|
||||
button.textContent = '已复制';
|
||||
setTimeout(() => {
|
||||
button.textContent = '复制';
|
||||
}, 2000);
|
||||
} catch (e) {
|
||||
showErrorMessage('复制失败，请手动复制');
|
||||
}
|
||||
document.body.removeChild(textArea);
|
||||
});
|
||||
}
|
||||
|
||||
// 显示成功提示
|
||||
function showSuccessToast(message) {
|
||||
const toast = document.createElement('div');
|
||||
toast.className = 'success-toast';
|
||||
toast.textContent = message;
|
||||
document.body.appendChild(toast);
|
||||
|
||||
setTimeout(() => {
|
||||
toast.classList.add('show');
|
||||
}, 100);
|
||||
|
||||
setTimeout(() => {
|
||||
toast.classList.remove('show');
|
||||
setTimeout(() => {
|
||||
document.body.removeChild(toast);
|
||||
}, 300);
|
||||
}, 2000);
|
||||
}
|
||||
|
||||
// 显示错误信息
|
||||
function showErrorMessage(message) {
|
||||
const errorDiv = document.createElement('div');
|
||||
errorDiv.className = 'error';
|
||||
errorDiv.textContent = message;
|
||||
expressionsContainer.innerHTML = '';
|
||||
expressionsContainer.appendChild(errorDiv);
|
||||
}
|
||||
|
||||
// 显示加载状态
|
||||
function showLoading(show) {
|
||||
loadingDiv.style.display = show ? 'block' : 'none';
|
||||
generateBtn.disabled = show;
|
||||
generateBtn.textContent = show ? '生成中...' : '生成表情';
|
||||
}
|
||||
|
||||
// 生成表情建议
|
||||
async function generateExpressions() {
|
||||
const text = textInput.value.trim();
|
||||
const style = styleSelect.value;
|
||||
|
||||
if (!text) {
|
||||
showErrorMessage('请输入要表达的文字内容');
|
||||
return;
|
||||
}
|
||||
|
||||
showLoading(true);
|
||||
expressionsContainer.innerHTML = '';
|
||||
|
||||
try {
|
||||
const expressions = await callBackendAPI(text, style);
|
||||
displayExpressions(expressions);
|
||||
} catch (error) {
|
||||
console.error('生成表情失败:', error);
|
||||
showErrorMessage(`生成失败: ${error.message}`);
|
||||
} finally {
|
||||
showLoading(false);
|
||||
}
|
||||
}
|
||||
|
||||
// 初始化样式选择器
|
||||
function initializeStyleSelector() {
|
||||
// 清空现有选项
|
||||
styleSelect.innerHTML = '';
|
||||
|
||||
// 添加样式选项
|
||||
Object.keys(CONFIG.expressionStyles).forEach(styleKey => {
|
||||
const option = document.createElement('option');
|
||||
option.value = styleKey;
|
||||
option.textContent = `${CONFIG.expressionStyles[styleKey].name} - ${CONFIG.expressionStyles[styleKey].description}`;
|
||||
styleSelect.appendChild(option);
|
||||
});
|
||||
|
||||
// 设置默认选项
|
||||
styleSelect.value = 'mixed';
|
||||
}
|
||||
|
||||
// 事件监听器
|
||||
generateBtn.addEventListener('click', generateExpressions);
|
||||
|
||||
// 回车键生成
|
||||
textInput.addEventListener('keypress', (e) => {
|
||||
if (e.key === 'Enter' && !e.shiftKey) {
|
||||
e.preventDefault();
|
||||
generateExpressions();
|
||||
}
|
||||
});
|
||||
|
||||
// 样式选择变化时的提示
|
||||
styleSelect.addEventListener('change', (e) => {
|
||||
const selectedStyle = CONFIG.expressionStyles[e.target.value];
|
||||
if (selectedStyle) {
|
||||
// 可以在这里添加样式变化的提示
|
||||
console.log(`已选择样式: ${selectedStyle.name} - ${selectedStyle.description}`);
|
||||
}
|
||||
});
|
||||
|
||||
// 页面加载完成后的初始化
|
||||
document.addEventListener('DOMContentLoaded', () => {
|
||||
// 初始化样式选择器
|
||||
initializeStyleSelector();
|
||||
|
||||
// 设置默认占位符
|
||||
expressionsContainer.innerHTML = '<div class="placeholder">请输入要表达的文字，然后点击生成按钮获取相应的表情符号</div>';
|
||||
|
||||
// 设置默认文本
|
||||
if (!textInput.value.trim()) {
|
||||
textInput.value = '开心';
|
||||
}
|
||||
});
|
||||
|
||||
// 导出函数供HTML调用
|
||||
window.copyToClipboard = copyToClipboard;
|
||||
window.generateExpressions = generateExpressions;
|
||||
|
||||
// 添加一些实用的辅助函数
|
||||
function getRandomExpression(expressions) {
|
||||
const allExpressions = [];
|
||||
Object.values(expressions).forEach(categoryExpressions => {
|
||||
if (Array.isArray(categoryExpressions)) {
|
||||
allExpressions.push(...categoryExpressions);
|
||||
}
|
||||
});
|
||||
|
||||
if (allExpressions.length > 0) {
|
||||
const randomIndex = Math.floor(Math.random() * allExpressions.length);
|
||||
return allExpressions[randomIndex];
|
||||
}
|
||||
|
||||
return null;
|
||||
}
|
||||
|
||||
// 表情使用统计（可选功能）
|
||||
function trackExpressionUsage(expression) {
|
||||
const usage = JSON.parse(localStorage.getItem('expressionUsage') || '{}');
|
||||
usage[expression] = (usage[expression] || 0) + 1;
|
||||
localStorage.setItem('expressionUsage', JSON.stringify(usage));
|
||||
}
|
||||
|
||||
// 获取常用表情（可选功能）
|
||||
function getPopularExpressions(limit = 5) {
|
||||
const usage = JSON.parse(localStorage.getItem('expressionUsage') || '{}');
|
||||
return Object.entries(usage)
|
||||
.sort(([,a], [,b]) => b - a)
|
||||
.slice(0, limit)
|
||||
.map(([expression]) => expression);
|
||||
}
|
||||
|
||||
// 导出辅助函数
|
||||
window.getRandomExpression = getRandomExpression;
|
||||
window.trackExpressionUsage = trackExpressionUsage;
|
||||
window.getPopularExpressions = getPopularExpressions;
|
||||
436
InfoGenie-frontend/public/aimodelapp/AI生成表情包/styles.css
Normal file
436
InfoGenie-frontend/public/aimodelapp/AI生成表情包/styles.css
Normal file
@@ -0,0 +1,436 @@
|
||||
/* 全局样式重置 */
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
/* 主体样式 - iOS风格 */
|
||||
body {
|
||||
font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Helvetica Neue', Arial, sans-serif;
|
||||
background: linear-gradient(135deg, #FFB6C1 0%, #FFE4E1 100%);
|
||||
min-height: 100vh;
|
||||
padding: 20px;
|
||||
color: #1D1D1F;
|
||||
line-height: 1.47;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
}
|
||||
|
||||
/* 容器样式 - iOS毛玻璃效果 */
|
||||
.container {
|
||||
max-width: 700px;
|
||||
margin: 0 auto;
|
||||
background: rgba(255, 255, 255, 0.85);
|
||||
border-radius: 24px;
|
||||
padding: 32px;
|
||||
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12), 0 2px 8px rgba(0, 0, 0, 0.08);
|
||||
backdrop-filter: blur(20px) saturate(180%);
|
||||
border: 1px solid rgba(255, 255, 255, 0.2);
|
||||
}
|
||||
|
||||
/* 头部样式 - iOS风格 */
|
||||
.header {
|
||||
text-align: center;
|
||||
margin-bottom: 32px;
|
||||
}
|
||||
|
||||
.title {
|
||||
font-size: 2.25rem;
|
||||
color: #1D1D1F;
|
||||
margin-bottom: 8px;
|
||||
font-weight: 600;
|
||||
letter-spacing: -0.02em;
|
||||
}
|
||||
|
||||
.subtitle {
|
||||
color: #86868B;
|
||||
font-size: 1.0625rem;
|
||||
margin-bottom: 24px;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
/* 表单样式 - iOS风格 */
|
||||
.form-section {
|
||||
margin-bottom: 32px;
|
||||
}
|
||||
|
||||
.form-group {
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
|
||||
.form-label {
|
||||
display: block;
|
||||
margin-bottom: 8px;
|
||||
font-weight: 600;
|
||||
color: #1D1D1F;
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
.form-input {
|
||||
width: 100%;
|
||||
padding: 16px;
|
||||
border: 1px solid rgba(0, 0, 0, 0.1);
|
||||
border-radius: 12px;
|
||||
font-size: 1rem;
|
||||
transition: all 0.2s ease;
|
||||
background: rgba(255, 255, 255, 0.8);
|
||||
font-family: inherit;
|
||||
backdrop-filter: blur(10px);
|
||||
}
|
||||
|
||||
.form-input:focus {
|
||||
outline: none;
|
||||
border-color: #FF69B4;
|
||||
background: rgba(255, 255, 255, 0.95);
|
||||
box-shadow: 0 0 0 4px rgba(255, 105, 180, 0.1);
|
||||
}
|
||||
|
||||
.textarea {
|
||||
resize: vertical;
|
||||
min-height: 120px;
|
||||
}
|
||||
|
||||
.select {
|
||||
cursor: pointer;
|
||||
appearance: none;
|
||||
background-image: url('data:image/svg+xml;charset=US-ASCII,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 4 5"><path fill="%23666" d="M2 0L0 2h4zm0 5L0 3h4z"/></svg>');
|
||||
background-repeat: no-repeat;
|
||||
background-position: right 15px center;
|
||||
background-size: 12px;
|
||||
padding-right: 40px;
|
||||
}
|
||||
|
||||
/* 按钮样式 - iOS风格 */
|
||||
.btn {
|
||||
width: 100%;
|
||||
padding: 16px;
|
||||
background: #FF69B4;
|
||||
color: white;
|
||||
border: none;
|
||||
border-radius: 12px;
|
||||
font-size: 1.0625rem;
|
||||
font-weight: 600;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s ease;
|
||||
margin-bottom: 24px;
|
||||
box-shadow: 0 2px 8px rgba(255, 105, 180, 0.25);
|
||||
}
|
||||
|
||||
.btn:hover {
|
||||
background: #FF1493;
|
||||
transform: translateY(-1px);
|
||||
box-shadow: 0 4px 16px rgba(255, 105, 180, 0.35);
|
||||
}
|
||||
|
||||
.btn:active {
|
||||
transform: translateY(0);
|
||||
background: #DC143C;
|
||||
}
|
||||
|
||||
.btn:disabled {
|
||||
opacity: 0.5;
|
||||
cursor: not-allowed;
|
||||
transform: none;
|
||||
background: #86868B;
|
||||
}
|
||||
|
||||
/* 结果区域样式 - iOS风格 */
|
||||
.result-section {
|
||||
margin-top: 32px;
|
||||
}
|
||||
|
||||
.result-title {
|
||||
font-size: 1.25rem;
|
||||
color: #1D1D1F;
|
||||
margin-bottom: 16px;
|
||||
text-align: center;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.loading {
|
||||
display: none;
|
||||
text-align: center;
|
||||
color: #FF69B4;
|
||||
font-style: normal;
|
||||
padding: 24px;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.expressions-container {
|
||||
background: rgba(255, 255, 255, 0.6);
|
||||
border: 1px solid rgba(0, 0, 0, 0.08);
|
||||
border-radius: 16px;
|
||||
padding: 24px;
|
||||
min-height: 150px;
|
||||
backdrop-filter: blur(10px);
|
||||
}
|
||||
|
||||
.placeholder {
|
||||
text-align: center;
|
||||
color: #86868B;
|
||||
font-style: normal;
|
||||
padding: 40px 20px;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
/* 表情分组标题样式 - iOS风格 */
|
||||
.expression-group-title {
|
||||
font-size: 1.0625rem;
|
||||
font-weight: 600;
|
||||
color: white;
|
||||
margin: 20px 0 12px 0;
|
||||
padding: 12px 16px;
|
||||
background: #FF69B4;
|
||||
border-radius: 12px;
|
||||
text-align: center;
|
||||
box-shadow: 0 2px 8px rgba(255, 105, 180, 0.25);
|
||||
}
|
||||
|
||||
.expression-group-title:first-child {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
/* 表情项样式 - iOS风格 */
|
||||
.expression-item {
|
||||
background: rgba(255, 255, 255, 0.9);
|
||||
border: 1px solid rgba(0, 0, 0, 0.06);
|
||||
border-radius: 12px;
|
||||
padding: 16px;
|
||||
margin-bottom: 12px;
|
||||
transition: all 0.2s ease;
|
||||
cursor: pointer;
|
||||
position: relative;
|
||||
backdrop-filter: blur(10px);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.expression-item:hover {
|
||||
border-color: rgba(255, 105, 180, 0.3);
|
||||
box-shadow: 0 4px 16px rgba(255, 105, 180, 0.1);
|
||||
background: rgba(255, 255, 255, 0.95);
|
||||
}
|
||||
|
||||
.expression-item:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.expression-content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.expression-symbol {
|
||||
font-size: 2.5rem;
|
||||
margin-bottom: 12px;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.expression-info {
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.expression-text {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.expression-description {
|
||||
font-size: 0.9375rem;
|
||||
color: #86868B;
|
||||
line-height: 1.47;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.copy-btn {
|
||||
background: #FF69B4;
|
||||
color: white;
|
||||
border: none;
|
||||
border-radius: 8px;
|
||||
padding: 8px 16px;
|
||||
font-size: 0.8125rem;
|
||||
font-weight: 600;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s ease;
|
||||
box-shadow: 0 2px 4px rgba(255, 105, 180, 0.25);
|
||||
margin-top: 8px;
|
||||
align-self: center;
|
||||
}
|
||||
|
||||
.copy-btn:hover {
|
||||
background: #FF1493;
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
|
||||
/* 错误样式 - iOS风格 */
|
||||
.error {
|
||||
color: #FF3B30;
|
||||
background: rgba(255, 59, 48, 0.1);
|
||||
border: 1px solid rgba(255, 59, 48, 0.2);
|
||||
padding: 16px;
|
||||
border-radius: 12px;
|
||||
margin-top: 16px;
|
||||
font-weight: 500;
|
||||
backdrop-filter: blur(10px);
|
||||
}
|
||||
|
||||
/* 成功提示 - iOS风格 */
|
||||
.success-toast {
|
||||
position: fixed;
|
||||
top: 20px;
|
||||
right: 20px;
|
||||
background: #34C759;
|
||||
color: white;
|
||||
padding: 12px 20px;
|
||||
border-radius: 12px;
|
||||
box-shadow: 0 8px 24px rgba(52, 199, 89, 0.3);
|
||||
z-index: 1000;
|
||||
opacity: 0;
|
||||
transform: translateX(100%);
|
||||
transition: all 0.3s ease;
|
||||
font-weight: 600;
|
||||
backdrop-filter: blur(20px);
|
||||
}
|
||||
|
||||
.success-toast.show {
|
||||
opacity: 1;
|
||||
transform: translateX(0);
|
||||
}
|
||||
|
||||
/* 响应式设计 - 移动端优化 */
|
||||
@media (max-width: 768px) {
|
||||
body {
|
||||
padding: 16px;
|
||||
}
|
||||
|
||||
.container {
|
||||
padding: 24px;
|
||||
border-radius: 20px;
|
||||
}
|
||||
|
||||
.title {
|
||||
font-size: 1.875rem;
|
||||
}
|
||||
|
||||
.subtitle {
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
.form-input {
|
||||
padding: 14px;
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
.btn {
|
||||
padding: 16px;
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
.expressions-container {
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.expression-item {
|
||||
padding: 16px;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.expression-content {
|
||||
width: 100%;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.expression-symbol {
|
||||
font-size: 3rem;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.expression-description {
|
||||
font-size: 0.875rem;
|
||||
margin-bottom: 16px;
|
||||
padding: 0 8px;
|
||||
}
|
||||
|
||||
.copy-btn {
|
||||
padding: 10px 20px;
|
||||
font-size: 0.875rem;
|
||||
margin-top: 12px;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 480px) {
|
||||
.title {
|
||||
font-size: 1.8rem;
|
||||
letter-spacing: 1px;
|
||||
}
|
||||
|
||||
.container {
|
||||
padding: 15px;
|
||||
}
|
||||
|
||||
.form-input {
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.expression-item {
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.expression-text {
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
.expression-description {
|
||||
font-size: 0.85rem;
|
||||
}
|
||||
|
||||
.expression-symbol {
|
||||
font-size: 1.2rem;
|
||||
}
|
||||
}
|
||||
|
||||
/* 动画效果 */
|
||||
@keyframes fadeIn {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(10px);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
.expression-item {
|
||||
animation: fadeIn 0.3s ease;
|
||||
}
|
||||
|
||||
/* 加载动画 */
|
||||
@keyframes pulse {
|
||||
0%, 100% {
|
||||
opacity: 1;
|
||||
}
|
||||
50% {
|
||||
opacity: 0.5;
|
||||
}
|
||||
}
|
||||
|
||||
.loading {
|
||||
animation: pulse 1.5s ease-in-out infinite;
|
||||
}
|
||||
|
||||
/* 表情符号特殊样式 */
|
||||
.emoji {
|
||||
font-family: 'Apple Color Emoji', 'Segoe UI Emoji', 'Noto Color Emoji', sans-serif;
|
||||
}
|
||||
|
||||
.kaomoji {
|
||||
font-family: 'SF Mono', 'Monaco', 'Consolas', 'Courier New', monospace;
|
||||
font-weight: normal;
|
||||
}
|
||||
62
InfoGenie-frontend/public/aimodelapp/AI语言翻译助手/index.html
Normal file
62
InfoGenie-frontend/public/aimodelapp/AI语言翻译助手/index.html
Normal file
@@ -0,0 +1,62 @@
|
||||
<!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 rel="stylesheet" href="styles.css">
|
||||
</head>
|
||||
<body>
|
||||
<div class="container">
|
||||
<div class="header">
|
||||
<h1 class="title">AI语言翻译助手</h1>
|
||||
<p class="subtitle">智能翻译，信达雅兼备</p>
|
||||
</div>
|
||||
|
||||
<div class="form-section">
|
||||
<div class="form-group">
|
||||
<label class="form-label" for="sourceText">请输入要翻译的内容：</label>
|
||||
<textarea
|
||||
id="sourceText"
|
||||
class="form-input textarea"
|
||||
placeholder="请输入单词、短语或句子，系统将自动检测语言..."
|
||||
>Hello, how are you today?</textarea>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label class="form-label" for="targetLanguage">目标语言：</label>
|
||||
<select id="targetLanguage" class="form-input select">
|
||||
<option value="zh-CN">中文（简体）</option>
|
||||
<option value="zh-TW">中文（繁体）</option>
|
||||
<option value="en">英语</option>
|
||||
<option value="ja">日语</option>
|
||||
<option value="ko">韩语</option>
|
||||
<option value="fr">法语</option>
|
||||
<option value="de">德语</option>
|
||||
<option value="es">西班牙语</option>
|
||||
<option value="it">意大利语</option>
|
||||
<option value="pt">葡萄牙语</option>
|
||||
<option value="ru">俄语</option>
|
||||
<option value="ar">阿拉伯语</option>
|
||||
<option value="hi">印地语</option>
|
||||
<option value="th">泰语</option>
|
||||
<option value="vi">越南语</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<button id="translateBtn" class="btn">开始翻译</button>
|
||||
</div>
|
||||
|
||||
<div class="result-section">
|
||||
<h3 class="result-title">翻译结果</h3>
|
||||
<div id="loading" class="loading">正在翻译中，请稍候...</div>
|
||||
<div id="translationResult" class="translation-container">
|
||||
<div class="placeholder">点击"开始翻译"按钮，AI将为您提供高质量的翻译结果</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script src="env.js"></script>
|
||||
<script src="script.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
239
InfoGenie-frontend/public/aimodelapp/AI语言翻译助手/script.js
Normal file
239
InfoGenie-frontend/public/aimodelapp/AI语言翻译助手/script.js
Normal file
@@ -0,0 +1,239 @@
|
||||
// 从配置文件导入设置
|
||||
// 配置在 env.js 文件中定义
|
||||
|
||||
// DOM 元素
|
||||
const sourceTextInput = document.getElementById('sourceText');
|
||||
const targetLanguageSelect = document.getElementById('targetLanguage');
|
||||
const translateBtn = document.getElementById('translateBtn');
|
||||
const loadingDiv = document.getElementById('loading');
|
||||
const translationResultContainer = document.getElementById('translationResult');
|
||||
|
||||
// 调用后端API
|
||||
async function callBackendAPI(sourceText, targetLanguage) {
|
||||
try {
|
||||
const response = await fetch('http://127.0.0.1:5002/api/aimodelapp/translation', {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json'
|
||||
},
|
||||
body: JSON.stringify({
|
||||
source_text: sourceText,
|
||||
target_language: targetLanguage
|
||||
})
|
||||
});
|
||||
|
||||
if (!response.ok) {
|
||||
const errorData = await response.json();
|
||||
throw new Error(errorData.error || `API请求失败: ${response.status} ${response.statusText}`);
|
||||
}
|
||||
|
||||
const data = await response.json();
|
||||
if (data.success) {
|
||||
return data.translation_result;
|
||||
} else {
|
||||
throw new Error(data.error || 'API响应格式异常');
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('API调用错误:', error);
|
||||
throw error;
|
||||
}
|
||||
}
|
||||
|
||||
// 解析AI响应
|
||||
function parseAIResponse(response) {
|
||||
try {
|
||||
// 尝试直接解析JSON
|
||||
const parsed = JSON.parse(response);
|
||||
return parsed;
|
||||
} catch (error) {
|
||||
// 如果直接解析失败，尝试提取JSON部分
|
||||
const jsonMatch = response.match(/\{[\s\S]*\}/);
|
||||
if (jsonMatch) {
|
||||
try {
|
||||
const parsed = JSON.parse(jsonMatch[0]);
|
||||
return parsed;
|
||||
} catch (e) {
|
||||
console.error('JSON解析失败:', e);
|
||||
}
|
||||
}
|
||||
|
||||
// 如果JSON解析失败，返回空对象
|
||||
console.error('无法解析AI响应:', response);
|
||||
return {};
|
||||
}
|
||||
}
|
||||
|
||||
// 显示翻译结果
|
||||
function displayTranslationResult(result) {
|
||||
translationResultContainer.innerHTML = '';
|
||||
|
||||
if (!result || !result.translation) {
|
||||
translationResultContainer.innerHTML = '<div class="placeholder">翻译失败，请尝试重新翻译</div>';
|
||||
return;
|
||||
}
|
||||
|
||||
// 创建结果容器
|
||||
const resultDiv = document.createElement('div');
|
||||
resultDiv.className = 'translation-result';
|
||||
|
||||
// 检测到的源语言
|
||||
if (result.detected_language) {
|
||||
const detectedLangDiv = document.createElement('div');
|
||||
detectedLangDiv.className = 'detected-language';
|
||||
detectedLangDiv.innerHTML = `<span class="label">检测到的语言：</span><span class="value">${result.detected_language}</span>`;
|
||||
resultDiv.appendChild(detectedLangDiv);
|
||||
}
|
||||
|
||||
// 主要翻译结果
|
||||
const mainTranslationDiv = document.createElement('div');
|
||||
mainTranslationDiv.className = 'main-translation';
|
||||
mainTranslationDiv.innerHTML = `
|
||||
<div class="translation-header">
|
||||
<span class="label">翻译结果：</span>
|
||||
<button class="copy-btn" onclick="copyToClipboard('${result.translation.replace(/'/g, "\\'")}')">复制</button>
|
||||
</div>
|
||||
<div class="translation-text">${result.translation}</div>
|
||||
`;
|
||||
resultDiv.appendChild(mainTranslationDiv);
|
||||
|
||||
// 发音指导
|
||||
if (result.pronunciation) {
|
||||
const pronunciationDiv = document.createElement('div');
|
||||
pronunciationDiv.className = 'pronunciation';
|
||||
pronunciationDiv.innerHTML = `<span class="label">发音：</span><span class="value">${result.pronunciation}</span>`;
|
||||
resultDiv.appendChild(pronunciationDiv);
|
||||
}
|
||||
|
||||
// 备选翻译
|
||||
if (result.alternative_translations && result.alternative_translations.length > 0) {
|
||||
const alternativesDiv = document.createElement('div');
|
||||
alternativesDiv.className = 'alternatives';
|
||||
alternativesDiv.innerHTML = '<div class="alternatives-title">备选翻译：</div>';
|
||||
|
||||
result.alternative_translations.forEach((alt, index) => {
|
||||
if (alt && alt.trim()) {
|
||||
const altDiv = document.createElement('div');
|
||||
altDiv.className = 'alternative-item';
|
||||
altDiv.innerHTML = `
|
||||
<span class="alternative-text">${alt}</span>
|
||||
<button class="copy-btn-small" onclick="copyToClipboard('${alt.replace(/'/g, "\\'")}')">复制</button>
|
||||
`;
|
||||
alternativesDiv.appendChild(altDiv);
|
||||
}
|
||||
});
|
||||
|
||||
resultDiv.appendChild(alternativesDiv);
|
||||
}
|
||||
|
||||
// 翻译说明
|
||||
if (result.explanation) {
|
||||
const explanationDiv = document.createElement('div');
|
||||
explanationDiv.className = 'explanation';
|
||||
explanationDiv.innerHTML = `<span class="label">翻译说明：</span><div class="explanation-text">${result.explanation}</div>`;
|
||||
resultDiv.appendChild(explanationDiv);
|
||||
}
|
||||
|
||||
translationResultContainer.appendChild(resultDiv);
|
||||
}
|
||||
|
||||
// 复制到剪贴板
|
||||
function copyToClipboard(text) {
|
||||
navigator.clipboard.writeText(text).then(() => {
|
||||
showSuccessToast('已复制到剪贴板');
|
||||
}).catch(err => {
|
||||
console.error('复制失败:', err);
|
||||
// 备用复制方法
|
||||
const textArea = document.createElement('textarea');
|
||||
textArea.value = text;
|
||||
document.body.appendChild(textArea);
|
||||
textArea.select();
|
||||
try {
|
||||
document.execCommand('copy');
|
||||
showSuccessToast('已复制到剪贴板');
|
||||
} catch (e) {
|
||||
showErrorMessage('复制失败，请手动复制');
|
||||
}
|
||||
document.body.removeChild(textArea);
|
||||
});
|
||||
}
|
||||
|
||||
// 显示成功提示
|
||||
function showSuccessToast(message) {
|
||||
const toast = document.createElement('div');
|
||||
toast.className = 'success-toast';
|
||||
toast.textContent = message;
|
||||
document.body.appendChild(toast);
|
||||
|
||||
setTimeout(() => {
|
||||
toast.classList.add('show');
|
||||
}, 100);
|
||||
|
||||
setTimeout(() => {
|
||||
toast.classList.remove('show');
|
||||
setTimeout(() => {
|
||||
document.body.removeChild(toast);
|
||||
}, 300);
|
||||
}, 2000);
|
||||
}
|
||||
|
||||
// 显示错误信息
|
||||
function showErrorMessage(message) {
|
||||
const errorDiv = document.createElement('div');
|
||||
errorDiv.className = 'error';
|
||||
errorDiv.textContent = message;
|
||||
translationResultContainer.innerHTML = '';
|
||||
translationResultContainer.appendChild(errorDiv);
|
||||
}
|
||||
|
||||
// 显示加载状态
|
||||
function showLoading(show) {
|
||||
loadingDiv.style.display = show ? 'block' : 'none';
|
||||
translateBtn.disabled = show;
|
||||
translateBtn.textContent = show ? '翻译中...' : '开始翻译';
|
||||
}
|
||||
|
||||
// 执行翻译
|
||||
async function performTranslation() {
|
||||
const sourceText = sourceTextInput.value.trim();
|
||||
const targetLanguage = targetLanguageSelect.value;
|
||||
|
||||
if (!sourceText) {
|
||||
showErrorMessage('请输入要翻译的内容');
|
||||
return;
|
||||
}
|
||||
|
||||
showLoading(true);
|
||||
translationResultContainer.innerHTML = '';
|
||||
|
||||
try {
|
||||
const result = await callBackendAPI(sourceText, targetLanguage);
|
||||
const parsedResult = parseAIResponse(result);
|
||||
displayTranslationResult(parsedResult);
|
||||
} catch (error) {
|
||||
console.error('翻译失败:', error);
|
||||
showErrorMessage(`翻译失败: ${error.message}`);
|
||||
} finally {
|
||||
showLoading(false);
|
||||
}
|
||||
}
|
||||
|
||||
// 事件监听器
|
||||
translateBtn.addEventListener('click', performTranslation);
|
||||
|
||||
// 回车键翻译
|
||||
sourceTextInput.addEventListener('keypress', (e) => {
|
||||
if (e.key === 'Enter' && !e.shiftKey) {
|
||||
e.preventDefault();
|
||||
performTranslation();
|
||||
}
|
||||
});
|
||||
|
||||
// 页面加载完成后的初始化
|
||||
document.addEventListener('DOMContentLoaded', () => {
|
||||
// 设置默认占位符
|
||||
translationResultContainer.innerHTML = '<div class="placeholder">请输入要翻译的内容，然后选择目标语言并点击翻译按钮</div>';
|
||||
});
|
||||
|
||||
// 导出函数供HTML调用
|
||||
window.copyToClipboard = copyToClipboard;
|
||||
window.performTranslation = performTranslation;
|
||||
488
InfoGenie-frontend/public/aimodelapp/AI语言翻译助手/styles.css
Normal file
488
InfoGenie-frontend/public/aimodelapp/AI语言翻译助手/styles.css
Normal file
@@ -0,0 +1,488 @@
|
||||
/* 全局样式重置 */
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
/* 主体样式 - iOS风格 */
|
||||
body {
|
||||
font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Helvetica Neue', Arial, sans-serif;
|
||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||
min-height: 100vh;
|
||||
padding: 20px;
|
||||
color: #1D1D1F;
|
||||
line-height: 1.47;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
}
|
||||
|
||||
/* 容器样式 - iOS毛玻璃效果 */
|
||||
.container {
|
||||
max-width: 800px;
|
||||
margin: 0 auto;
|
||||
background: rgba(255, 255, 255, 0.85);
|
||||
border-radius: 24px;
|
||||
padding: 32px;
|
||||
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12), 0 2px 8px rgba(0, 0, 0, 0.08);
|
||||
backdrop-filter: blur(20px) saturate(180%);
|
||||
border: 1px solid rgba(255, 255, 255, 0.2);
|
||||
}
|
||||
|
||||
/* 头部样式 - iOS风格 */
|
||||
.header {
|
||||
text-align: center;
|
||||
margin-bottom: 32px;
|
||||
}
|
||||
|
||||
.title {
|
||||
font-size: 2.25rem;
|
||||
color: #1D1D1F;
|
||||
margin-bottom: 8px;
|
||||
font-weight: 600;
|
||||
letter-spacing: -0.02em;
|
||||
}
|
||||
|
||||
.subtitle {
|
||||
color: #86868B;
|
||||
font-size: 1.0625rem;
|
||||
margin-bottom: 24px;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
/* 表单样式 - iOS风格 */
|
||||
.form-section {
|
||||
margin-bottom: 32px;
|
||||
}
|
||||
|
||||
.form-group {
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
|
||||
.form-label {
|
||||
display: block;
|
||||
margin-bottom: 8px;
|
||||
font-weight: 600;
|
||||
color: #1D1D1F;
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
.form-input {
|
||||
width: 100%;
|
||||
padding: 16px;
|
||||
border: 1px solid rgba(0, 0, 0, 0.1);
|
||||
border-radius: 12px;
|
||||
font-size: 1rem;
|
||||
transition: all 0.2s ease;
|
||||
background: rgba(255, 255, 255, 0.8);
|
||||
font-family: inherit;
|
||||
backdrop-filter: blur(10px);
|
||||
}
|
||||
|
||||
.form-input:focus {
|
||||
outline: none;
|
||||
border-color: #007AFF;
|
||||
background: rgba(255, 255, 255, 0.95);
|
||||
box-shadow: 0 0 0 4px rgba(0, 122, 255, 0.1);
|
||||
}
|
||||
|
||||
.textarea {
|
||||
resize: vertical;
|
||||
min-height: 120px;
|
||||
}
|
||||
|
||||
.select {
|
||||
cursor: pointer;
|
||||
appearance: none;
|
||||
background-image: url('data:image/svg+xml;charset=US-ASCII,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 4 5"><path fill="%23666" d="M2 0L0 2h4zm0 5L0 3h4z"/></svg>');
|
||||
background-repeat: no-repeat;
|
||||
background-position: right 15px center;
|
||||
background-size: 12px;
|
||||
padding-right: 40px;
|
||||
}
|
||||
|
||||
/* 按钮样式 - iOS风格 */
|
||||
.btn {
|
||||
width: 100%;
|
||||
padding: 16px;
|
||||
background: #007AFF;
|
||||
color: white;
|
||||
border: none;
|
||||
border-radius: 12px;
|
||||
font-size: 1.0625rem;
|
||||
font-weight: 600;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s ease;
|
||||
margin-bottom: 24px;
|
||||
box-shadow: 0 2px 8px rgba(0, 122, 255, 0.25);
|
||||
}
|
||||
|
||||
.btn:hover {
|
||||
background: #0056CC;
|
||||
transform: translateY(-1px);
|
||||
box-shadow: 0 4px 16px rgba(0, 122, 255, 0.35);
|
||||
}
|
||||
|
||||
.btn:active {
|
||||
transform: translateY(0);
|
||||
background: #004499;
|
||||
}
|
||||
|
||||
.btn:disabled {
|
||||
opacity: 0.5;
|
||||
cursor: not-allowed;
|
||||
transform: none;
|
||||
background: #86868B;
|
||||
}
|
||||
|
||||
/* 结果区域样式 - iOS风格 */
|
||||
.result-section {
|
||||
margin-top: 32px;
|
||||
}
|
||||
|
||||
.result-title {
|
||||
font-size: 1.25rem;
|
||||
color: #1D1D1F;
|
||||
margin-bottom: 16px;
|
||||
text-align: center;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.loading {
|
||||
display: none;
|
||||
text-align: center;
|
||||
color: #007AFF;
|
||||
font-style: normal;
|
||||
padding: 24px;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.translation-container {
|
||||
background: rgba(255, 255, 255, 0.6);
|
||||
border: 1px solid rgba(0, 0, 0, 0.08);
|
||||
border-radius: 16px;
|
||||
padding: 24px;
|
||||
min-height: 150px;
|
||||
backdrop-filter: blur(10px);
|
||||
}
|
||||
|
||||
.placeholder {
|
||||
text-align: center;
|
||||
color: #86868B;
|
||||
font-style: normal;
|
||||
padding: 40px 20px;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
/* 翻译结果样式 */
|
||||
.translation-result {
|
||||
animation: fadeIn 0.3s ease;
|
||||
}
|
||||
|
||||
.detected-language {
|
||||
background: rgba(52, 199, 89, 0.1);
|
||||
border: 1px solid rgba(52, 199, 89, 0.2);
|
||||
border-radius: 12px;
|
||||
padding: 12px 16px;
|
||||
margin-bottom: 16px;
|
||||
font-size: 0.9375rem;
|
||||
}
|
||||
|
||||
.detected-language .label {
|
||||
font-weight: 600;
|
||||
color: #34C759;
|
||||
margin-right: 8px;
|
||||
}
|
||||
|
||||
.detected-language .value {
|
||||
color: #1D1D1F;
|
||||
}
|
||||
|
||||
.main-translation {
|
||||
background: rgba(255, 255, 255, 0.9);
|
||||
border: 1px solid rgba(0, 0, 0, 0.06);
|
||||
border-radius: 12px;
|
||||
padding: 20px;
|
||||
margin-bottom: 16px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.translation-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.translation-header .label {
|
||||
font-weight: 600;
|
||||
color: #1D1D1F;
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
.translation-text {
|
||||
font-size: 1.125rem;
|
||||
color: #1D1D1F;
|
||||
line-height: 1.6;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.pronunciation {
|
||||
background: rgba(255, 149, 0, 0.1);
|
||||
border: 1px solid rgba(255, 149, 0, 0.2);
|
||||
border-radius: 12px;
|
||||
padding: 12px 16px;
|
||||
margin-bottom: 16px;
|
||||
font-size: 0.9375rem;
|
||||
}
|
||||
|
||||
.pronunciation .label {
|
||||
font-weight: 600;
|
||||
color: #FF9500;
|
||||
margin-right: 8px;
|
||||
}
|
||||
|
||||
.pronunciation .value {
|
||||
color: #1D1D1F;
|
||||
font-family: 'SF Mono', 'Monaco', 'Consolas', 'Courier New', monospace;
|
||||
}
|
||||
|
||||
.alternatives {
|
||||
background: rgba(255, 255, 255, 0.8);
|
||||
border: 1px solid rgba(0, 0, 0, 0.06);
|
||||
border-radius: 12px;
|
||||
padding: 16px;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.alternatives-title {
|
||||
font-weight: 600;
|
||||
color: #1D1D1F;
|
||||
margin-bottom: 12px;
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
.alternative-item {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 8px 12px;
|
||||
margin-bottom: 8px;
|
||||
background: rgba(255, 255, 255, 0.6);
|
||||
border-radius: 8px;
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
|
||||
.alternative-item:hover {
|
||||
background: rgba(255, 255, 255, 0.9);
|
||||
}
|
||||
|
||||
.alternative-item:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.alternative-text {
|
||||
color: #1D1D1F;
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
.explanation {
|
||||
background: rgba(0, 122, 255, 0.1);
|
||||
border: 1px solid rgba(0, 122, 255, 0.2);
|
||||
border-radius: 12px;
|
||||
padding: 16px;
|
||||
}
|
||||
|
||||
.explanation .label {
|
||||
font-weight: 600;
|
||||
color: #007AFF;
|
||||
margin-bottom: 8px;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.explanation-text {
|
||||
color: #1D1D1F;
|
||||
line-height: 1.6;
|
||||
font-size: 0.9375rem;
|
||||
}
|
||||
|
||||
/* 复制按钮样式 */
|
||||
.copy-btn {
|
||||
background: #007AFF;
|
||||
color: white;
|
||||
border: none;
|
||||
border-radius: 8px;
|
||||
padding: 8px 16px;
|
||||
font-size: 0.8125rem;
|
||||
font-weight: 600;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s ease;
|
||||
box-shadow: 0 2px 4px rgba(0, 122, 255, 0.25);
|
||||
}
|
||||
|
||||
.copy-btn:hover {
|
||||
background: #0056CC;
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
|
||||
.copy-btn-small {
|
||||
background: #007AFF;
|
||||
color: white;
|
||||
border: none;
|
||||
border-radius: 6px;
|
||||
padding: 4px 8px;
|
||||
font-size: 0.75rem;
|
||||
font-weight: 600;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s ease;
|
||||
box-shadow: 0 1px 2px rgba(0, 122, 255, 0.25);
|
||||
}
|
||||
|
||||
.copy-btn-small:hover {
|
||||
background: #0056CC;
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
|
||||
/* 错误样式 - iOS风格 */
|
||||
.error {
|
||||
color: #FF3B30;
|
||||
background: rgba(255, 59, 48, 0.1);
|
||||
border: 1px solid rgba(255, 59, 48, 0.2);
|
||||
padding: 16px;
|
||||
border-radius: 12px;
|
||||
margin-top: 16px;
|
||||
font-weight: 500;
|
||||
backdrop-filter: blur(10px);
|
||||
}
|
||||
|
||||
/* 成功提示 - iOS风格 */
|
||||
.success-toast {
|
||||
position: fixed;
|
||||
top: 20px;
|
||||
right: 20px;
|
||||
background: #34C759;
|
||||
color: white;
|
||||
padding: 12px 20px;
|
||||
border-radius: 12px;
|
||||
box-shadow: 0 8px 24px rgba(52, 199, 89, 0.3);
|
||||
z-index: 1000;
|
||||
opacity: 0;
|
||||
transform: translateX(100%);
|
||||
transition: all 0.3s ease;
|
||||
font-weight: 600;
|
||||
backdrop-filter: blur(20px);
|
||||
}
|
||||
|
||||
.success-toast.show {
|
||||
opacity: 1;
|
||||
transform: translateX(0);
|
||||
}
|
||||
|
||||
/* 响应式设计 */
|
||||
@media (max-width: 768px) {
|
||||
body {
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.container {
|
||||
padding: 20px;
|
||||
margin: 10px;
|
||||
}
|
||||
|
||||
.title {
|
||||
font-size: 2rem;
|
||||
}
|
||||
|
||||
.form-input {
|
||||
padding: 12px;
|
||||
}
|
||||
|
||||
.btn {
|
||||
padding: 12px;
|
||||
}
|
||||
|
||||
.translation-container {
|
||||
padding: 15px;
|
||||
}
|
||||
|
||||
.main-translation {
|
||||
padding: 15px;
|
||||
}
|
||||
|
||||
.translation-header {
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.copy-btn {
|
||||
align-self: flex-end;
|
||||
}
|
||||
|
||||
.alternative-item {
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.copy-btn-small {
|
||||
align-self: flex-end;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 480px) {
|
||||
.title {
|
||||
font-size: 1.8rem;
|
||||
letter-spacing: 1px;
|
||||
}
|
||||
|
||||
.container {
|
||||
padding: 15px;
|
||||
}
|
||||
|
||||
.form-input {
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.main-translation {
|
||||
padding: 12px;
|
||||
}
|
||||
|
||||
.translation-text {
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
.alternative-text {
|
||||
font-size: 0.9375rem;
|
||||
}
|
||||
}
|
||||
|
||||
/* 动画效果 */
|
||||
@keyframes fadeIn {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(10px);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
.translation-result {
|
||||
animation: fadeIn 0.3s ease;
|
||||
}
|
||||
|
||||
/* 加载动画 */
|
||||
@keyframes pulse {
|
||||
0%, 100% {
|
||||
opacity: 1;
|
||||
}
|
||||
50% {
|
||||
opacity: 0.5;
|
||||
}
|
||||
}
|
||||
|
||||
.loading {
|
||||
animation: pulse 1.5s ease-in-out infinite;
|
||||
}
|
||||
228
InfoGenie-frontend/public/aimodelapp/API测试页面.html
Normal file
228
InfoGenie-frontend/public/aimodelapp/API测试页面.html
Normal file
@@ -0,0 +1,228 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>API超时修复测试</title>
|
||||
<style>
|
||||
body {
|
||||
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
|
||||
max-width: 800px;
|
||||
margin: 0 auto;
|
||||
padding: 20px;
|
||||
background: #f5f5f7;
|
||||
}
|
||||
.container {
|
||||
background: white;
|
||||
border-radius: 12px;
|
||||
padding: 30px;
|
||||
box-shadow: 0 4px 20px rgba(0,0,0,0.1);
|
||||
}
|
||||
h1 {
|
||||
color: #1d1d1f;
|
||||
text-align: center;
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
.test-section {
|
||||
margin-bottom: 30px;
|
||||
padding: 20px;
|
||||
border: 1px solid #e5e5e7;
|
||||
border-radius: 8px;
|
||||
}
|
||||
.test-section h3 {
|
||||
color: #333;
|
||||
margin-top: 0;
|
||||
}
|
||||
input, select, button {
|
||||
width: 100%;
|
||||
padding: 12px;
|
||||
margin: 8px 0;
|
||||
border: 1px solid #d2d2d7;
|
||||
border-radius: 8px;
|
||||
font-size: 16px;
|
||||
}
|
||||
button {
|
||||
background: #007aff;
|
||||
color: white;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
transition: background 0.3s;
|
||||
}
|
||||
button:hover {
|
||||
background: #0056b3;
|
||||
}
|
||||
button:disabled {
|
||||
background: #ccc;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
.result {
|
||||
margin-top: 15px;
|
||||
padding: 15px;
|
||||
border-radius: 8px;
|
||||
white-space: pre-wrap;
|
||||
font-family: monospace;
|
||||
font-size: 14px;
|
||||
}
|
||||
.success {
|
||||
background: #d4edda;
|
||||
border: 1px solid #c3e6cb;
|
||||
color: #155724;
|
||||
}
|
||||
.error {
|
||||
background: #f8d7da;
|
||||
border: 1px solid #f5c6cb;
|
||||
color: #721c24;
|
||||
}
|
||||
.loading {
|
||||
background: #fff3cd;
|
||||
border: 1px solid #ffeaa7;
|
||||
color: #856404;
|
||||
}
|
||||
.status {
|
||||
font-weight: bold;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="container">
|
||||
<h1>🔧 API超时修复测试</h1>
|
||||
|
||||
<div class="test-section">
|
||||
<h3>🎭 表情制作器API测试</h3>
|
||||
<input type="text" id="expressionText" placeholder="输入要生成表情的文字" value="开心">
|
||||
<select id="expressionStyle">
|
||||
<option value="mixed">混合风格</option>
|
||||
<option value="emoji">仅Emoji</option>
|
||||
<option value="kaomoji">仅颜文字</option>
|
||||
<option value="cute">可爱风格</option>
|
||||
<option value="cool">酷炫风格</option>
|
||||
</select>
|
||||
<button onclick="testExpressionAPI()">测试表情API</button>
|
||||
<div id="expressionResult"></div>
|
||||
</div>
|
||||
|
||||
<div class="test-section">
|
||||
<h3>📝 变量命名API测试</h3>
|
||||
<input type="text" id="variableDesc" placeholder="输入变量描述" value="用户的年龄">
|
||||
<button onclick="testVariableAPI()">测试变量命名API</button>
|
||||
<div id="variableResult"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
async function testExpressionAPI() {
|
||||
const text = document.getElementById('expressionText').value.trim();
|
||||
const style = document.getElementById('expressionStyle').value;
|
||||
const resultDiv = document.getElementById('expressionResult');
|
||||
|
||||
if (!text) {
|
||||
showResult(resultDiv, '请输入文字内容', 'error');
|
||||
return;
|
||||
}
|
||||
|
||||
showResult(resultDiv, '正在调用表情制作API...\n请耐心等待（最多90秒）', 'loading');
|
||||
|
||||
const startTime = Date.now();
|
||||
|
||||
try {
|
||||
const response = await fetch('http://127.0.0.1:5002/api/aimodelapp/expression-maker', {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json'
|
||||
},
|
||||
body: JSON.stringify({
|
||||
text: text,
|
||||
style: style
|
||||
})
|
||||
});
|
||||
|
||||
const endTime = Date.now();
|
||||
const duration = ((endTime - startTime) / 1000).toFixed(2);
|
||||
|
||||
if (!response.ok) {
|
||||
const errorData = await response.json();
|
||||
throw new Error(errorData.error || `HTTP ${response.status}`);
|
||||
}
|
||||
|
||||
const data = await response.json();
|
||||
|
||||
if (data.success) {
|
||||
let resultText = `✅ API调用成功！\n耗时: ${duration}秒\n\n`;
|
||||
resultText += `表情结果:\n${JSON.stringify(data.expressions, null, 2)}`;
|
||||
showResult(resultDiv, resultText, 'success');
|
||||
} else {
|
||||
throw new Error(data.error || '未知错误');
|
||||
}
|
||||
|
||||
} catch (error) {
|
||||
const endTime = Date.now();
|
||||
const duration = ((endTime - startTime) / 1000).toFixed(2);
|
||||
showResult(resultDiv, `❌ API调用失败\n耗时: ${duration}秒\n错误: ${error.message}`, 'error');
|
||||
}
|
||||
}
|
||||
|
||||
async function testVariableAPI() {
|
||||
const description = document.getElementById('variableDesc').value.trim();
|
||||
const resultDiv = document.getElementById('variableResult');
|
||||
|
||||
if (!description) {
|
||||
showResult(resultDiv, '请输入变量描述', 'error');
|
||||
return;
|
||||
}
|
||||
|
||||
showResult(resultDiv, '正在调用变量命名API...\n请耐心等待（最多90秒）', 'loading');
|
||||
|
||||
const startTime = Date.now();
|
||||
|
||||
try {
|
||||
const response = await fetch('http://127.0.0.1:5002/api/aimodelapp/variable-naming', {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json'
|
||||
},
|
||||
body: JSON.stringify({
|
||||
description: description
|
||||
})
|
||||
});
|
||||
|
||||
const endTime = Date.now();
|
||||
const duration = ((endTime - startTime) / 1000).toFixed(2);
|
||||
|
||||
if (!response.ok) {
|
||||
const errorData = await response.json();
|
||||
throw new Error(errorData.error || `HTTP ${response.status}`);
|
||||
}
|
||||
|
||||
const data = await response.json();
|
||||
|
||||
if (data.success) {
|
||||
let resultText = `✅ API调用成功！\n耗时: ${duration}秒\n\n`;
|
||||
resultText += `变量建议:\n${JSON.stringify(data.suggestions, null, 2)}`;
|
||||
showResult(resultDiv, resultText, 'success');
|
||||
} else {
|
||||
throw new Error(data.error || '未知错误');
|
||||
}
|
||||
|
||||
} catch (error) {
|
||||
const endTime = Date.now();
|
||||
const duration = ((endTime - startTime) / 1000).toFixed(2);
|
||||
showResult(resultDiv, `❌ API调用失败\n耗时: ${duration}秒\n错误: ${error.message}`, 'error');
|
||||
}
|
||||
}
|
||||
|
||||
function showResult(element, message, type) {
|
||||
element.innerHTML = `<div class="result ${type}"><div class="status">${getStatusText(type)}</div>${message}</div>`;
|
||||
}
|
||||
|
||||
function getStatusText(type) {
|
||||
switch(type) {
|
||||
case 'success': return '✅ 成功';
|
||||
case 'error': return '❌ 错误';
|
||||
case 'loading': return '⏳ 加载中';
|
||||
default: return '';
|
||||
}
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
12
InfoGenie-frontend/public/aimodelapp/生成要求.txt
Normal file
12
InfoGenie-frontend/public/aimodelapp/生成要求.txt
Normal file
@@ -0,0 +1,12 @@
|
||||
1.写一个静态网页来调用github model 来完成应用功能
|
||||
2.网页清新风格，颜色随意，app风格，适配手机端和电脑端，优先优化手机端用户体验
|
||||
3.默认github的调用密钥是：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
|
||||
4.默认调用AI模型为 "openai/gpt-4o-mini"
|
||||
5.把js，css，html分开储存，每个功能分每个模块，避免单个文件过大问题
|
||||
6.默认github ai调用模型地址是：'https://models.github.ai/inference/chat/completions'
|
||||
比如这样：
|
||||
// GitHub API 配置
|
||||
const GITHUB_TOKEN = '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';
|
||||
const endpoint = 'https://models.github.ai/inference/chat/completions';
|
||||
const model = 'deepseek/DeepSeek-V3-0324';
|
||||
|
||||
Reference in New Issue
Block a user