-
Notifications
You must be signed in to change notification settings - Fork 0
/
emoji_translation.html
159 lines (150 loc) · 5.68 KB
/
emoji_translation.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Emoji语句生成器</title>
<link rel="stylesheet" href="styles.css">
<style>
input {
padding: 12px;
width: 80%;
margin-bottom: 17px;
border: 1px solid #ccc;
border-radius: 18px;
font-size: 1em;
color: black;
background-color: white;
}
button.rounded-button {
background-color: #ff8000;
color: white;
border: none;
padding: 12px 20px;
font-size: 1em;
border-radius: 18px;
cursor: pointer;
transition: background-color 0.3s ease, transform 0.3s ease;
margin-bottom: 20px;
}
button.rounded-button:hover {
background-color: #ff3300;
transform: scale(1.05);
}
.result {
font-size: 24px;
margin-top: 20px;
}
.copy-button {
background-color: #4a4a4a;
color: white;
border: none;
padding: 12px 15px;
font-size: 1em;
border-radius: 18px;
cursor: pointer;
display: none; /* 初始隐藏 */
margin-top: 10px;
}
.copy-button:hover {
background-color: #666;
transform: scale(1.05);
}
footer.footer {
position: relative;
bottom: 0;
left: 0;
width: 100%;
height: 100px;
background-color: #27262b;
color: white;
display: flex;
align-items: center;
padding: 0 20px;
box-sizing: border-box;
border-top: 1px solid #4a4a4a;
justify-content: center;
font-family: 'Microsoft YaHei', Courier, monospace;
letter-spacing: 1.5px;
}
</style>
</head>
<body>
<nav class="navbar">
<div class="left-links">
<a>Red2090.github.io</a>
</div>
<div class="right-links">
<a href="/" target="_blank">🏠</a>
<a href="./ricksroll.html" target="_blank">🔥</a>
</div>
</nav>
<div class="content">
<h1 class="content-title">Emoji语句生成器</h1>
<input type="text" id="inputText" placeholder="输入一段话...">
<button class="rounded-button" id="generateButton">生成</button>
<div class="result" id="emojiResult"></div>
<button class="copy-button" id="copyButton">复制</button> <!-- 复制按钮 -->
</div>
<script>
let apiKey;
// 加载配置文件以获取 API 密钥
fetch('config.json')
.then(response => response.json())
.then(config => {
apiKey = config.api_key; // 存储 API 密钥
})
.catch(error => {
console.error('加载配置失败:', error);
});
document.getElementById('generateButton').addEventListener('click', function() {
const inputText = document.getElementById('inputText').value;
if (!inputText) {
document.getElementById('emojiResult').innerText = '😅？';
return;
}
// DeepSeek API 的实际 URL
const apiUrl = 'https://api.deepseek.com/v1/chat/completions';
fetch(apiUrl, {
method: 'POST',
headers: {
'Content-Type': 'application/json',
'Authorization': `Bearer ${apiKey}` // 使用加载的 API 密钥
},
body: JSON.stringify({
messages: [
{ role: "system", content: "你是一个文本emoji翻译器，要把接收到的话语转换为emoji语句。要求emoji丰富、详细、有序且逻辑清晰。若碰到人名、书名和特定名称，就在代表该人或物的emoji后面添加双引号，双引号里写相应名称；除此之外只能输出emoji，不得有其他内容。如果原句的句中有标点符号，在相应位置保留它，最后依据语气在句子末尾加上文本标点符号。全文不要超过50个emoji" },
{ role: "user", content: inputText } // 用户输入的内容
],
model: "deepseek-chat" // 使用的模型
})
})
.then(response => {
if (!response.ok) {
throw new Error('网络错误');
}
return response.json();
})
.then(data => {
const emojiContent = data.choices[0].message.content || '未找到相关 Emoji';
document.getElementById('emojiResult').innerText = emojiContent;
// 显示复制按钮
const copyButton = document.getElementById('copyButton');
copyButton.style.display = 'inline'; // 显示按钮
// 设置复制按钮的点击事件
copyButton.onclick = function() {
navigator.clipboard.writeText(emojiContent).then(() => {
alert('复制成功！');
}).catch(err => {
console.error('复制失败:', err);
});
};
})
.catch(error => {
console.error('Error:', error);
document.getElementById('emojiResult').innerText = '请求失败，请重试。';
});
});
</script>
</body>
</html>