-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
317 lines (280 loc) · 14.5 KB
/
index.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
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Lisp 风格 Prompt 编辑器</title>
<style>
body {
font-family: Arial, sans-serif;
line-height: 1.6;
margin: 0;
padding: 20px;
background-color: #f0f0f0;
}
.container {
max-width: 800px;
margin: 0 auto;
background-color: white;
padding: 20px;
border-radius: 8px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
h1 {
text-align: center;
color: #333;
}
#promptDisplay {
white-space: pre-wrap;
font-family: monospace;
background-color: #f8f8f8;
padding: 15px;
border-radius: 4px;
border: 1px solid #ddd;
}
.editable {
font-family: monospace;
font-size: 14px;
padding: 2px 4px;
margin: 0 2px;
background-color: #e9e9e9;
border: 1px dotted #999;
border-radius: 3px;
}
button {
display: block;
margin: 20px auto;
padding: 10px 20px;
font-size: 16px;
color: white;
background-color: #EA4B89;
border: none;
border-radius: 4px;
cursor: pointer;
}
button:hover {
border: 2px solid black;
}
</style>
</head>
<body>
<div class="container">
<h1>Lisp 风格 Prompt 编辑器</h1>
<p style="text-align: center; color: #999;">制作人 <a href="https://okjk.co/OG4o"
style="color: #EA4B89; text-decoration: none;">@Yibie</a></p>
<div id="promptDisplay"></div>
<button onclick="copyPrompt()">复制 Prompt</button>
<p style="text-align: center; color: #999;">灵感来自即刻 <a
href="https://web.okjike.com/u/752D3103-1107-43A0-BA49-20EC29D09E36"
style="color: #EA4B89; text-decoration: none;">@李继刚</a></p>
</div>
<script>
const promptStructure = {
author: "作者名",
version: "版本号",
model: "模型名称",
purpose: "用途描述",
mainFunction: {
name: "AI 角色",
description: "AI 角色描述",
goal: "目标描述",
skills: ["技能1", "技能2", "技能3"],
coreSentence: "一句话总结角色的行为模式",
},
tools: [
{ name: "+", description: "组合或增加描述" },
{ name: "-", description: "去除或减少描述" },
{ name: "*", description: "增强或互相促进描述" }
],
secondaryFunction: {
name: "角色为目标采取的行动",
parameter: "用户输入(不要改)",
description: "角色行为的描述,一句话",
variables: [
{ name: "行动1", expression: "行动描述1" },
{ name: "行动2", expression: "行动描述2" },
{ name: "行动3", expression: "行动描述3" },
{ name: "行动4", expression: "行动描述4" }
]
},
outputFunction: {
name: "输出函数名",
parameter: "参数",
description: "输出函数描述",
settings: [
{ name: "设置项1", value: "设置值1" },
{ name: "设置项2", values: ["设置值2-1", "设置值2-2", "设置值2-3"] }
],
canvas: {
name: "设置项3",
values: ["设置值3-1", "设置值3-2", "设置值3-3"]
},
backgroundColor: {
color1: "颜色1",
color2: "颜色2"
},
colorStyle: [
{ style: "样式1", descriptions: ["描述1-1", "描述1-2"] },
{ style: "样式2", description: "描述2" }
],
layout: [
{ part: "部分1", layouts: ["布局1-1", "布局1-2"] },
{ part: "部分2", layouts: ["布局2-1", "布局2-2"] },
{ part: "部分3", layouts: ["布局3-1", "布局3-2"] }
],
dynamicLayout: {
cardElement: "卡片元素",
element1Name: "元素1",
element1: "文本1",
element2Name: "元素2",
element2: "参数"
}
},
startFunction: {
name: "Prompt 名称",
description: "启动运行时",
systemRole: "AI 角色名",
startMessage: "启动提示信息"
},
rules: [
"规则1描述",
"规则2描述"
],
note: "注意事项描述"
};
function renderPrompt() {
const template = `
;; Prompt 结构定义
;; 作者信息
${renderAuthorInfo()}
;; 主函数定义
${renderMainFunction()}
;; 工具定义
${renderTools()}
;; 次要函数定义
${renderSecondaryFunction()}
;; 输出函数定义
${renderOutputFunction()}
;; 启动函数定义
${renderStartFunction()}
;; 运行规则
${renderRules()}
;; 注意事项
${renderNote()}
`;
document.getElementById('promptDisplay').innerHTML = template;
setupEditableFields();
}
function renderAuthorInfo() {
return `
;; 作者信息:定义 Prompt 的创建者、版本、使用的模型和用途
;; 作者: <span class="editable" data-path="author">${promptStructure.author}</span>
;; 版本: <span class="editable" data-path="version">${promptStructure.version}</span>
;; 模型: <span class="editable" data-path="model">${promptStructure.model}</span>
;; 用途: <span class="editable" data-path="purpose">${promptStructure.purpose}</span>
;; 设定如下内容为你的 System Prompt`;
}
function renderMainFunction() {
return `
;; 主函数:定义 AI 的主要行为和特性
(defun <span class="editable" data-path="mainFunction.name">${promptStructure.mainFunction.name}</span> ()
"<span class="editable" data-path="mainFunction.description">${promptStructure.mainFunction.description}</span>"
(目标 . <span class="editable" data-path="mainFunction.goal">${promptStructure.mainFunction.goal}</span>)
(技能 . (<span class="editable" data-path="mainFunction.skills">${promptStructure.mainFunction.skills.join(' ')}</span>))
(金句 . <span class="editable" data-path="mainFunction.coreSentence">${promptStructure.mainFunction.coreSentence}</span>))`;
}
function renderTools() {
return `
;; 工具:定义 AI 可以使用的各种操作和方法
(工具 . (
${promptStructure.tools.map((tool, index) => `
(<span class="editable" data-path="tools.${index}.name">${tool.name}</span> "<span class="editable" data-path="tools.${index}.description">${tool.description}</span>")`).join('')}
))`;
}
function renderSecondaryFunction() {
const { name, parameter, description, variables } = promptStructure.secondaryFunction;
return `
;; 次要函数:定义辅助性的行为和处理
(defun <span class="editable" data-path="secondaryFunction.name">${name}</span> (<span class="editable" data-path="secondaryFunction.parameter">${parameter}</span>)
"<span class="editable" data-path="secondaryFunction.description">${description}</span>"
(let* (${variables.map((v, index) => `
(<span class="editable" data-path="secondaryFunction.variables.${index}.name">${v.name}</span> <span class="editable" data-path="secondaryFunction.variables.${index}.expression">${v.expression}</span>)`).join('')}
)
(${promptStructure.outputFunction.name} ${variables[3] ? variables[3].name : '变量4'})))`;
}
function renderOutputFunction() {
return `
;; 输出函数:定义 AI 的输出格式和样式
(defun <span class="editable" data-path="outputFunction.name">${promptStructure.outputFunction.name}</span> (<span class="editable" data-path="outputFunction.parameter">${promptStructure.outputFunction.parameter}</span>)
"<span class="editable" data-path="outputFunction.description">${promptStructure.outputFunction.description}</span>"
;; 基本设置
(setq <span class="editable" data-path="outputFunction.settings.0.name">${promptStructure.outputFunction.settings[0].name}</span> "<span class="editable" data-path="outputFunction.settings.0.value">${promptStructure.outputFunction.settings[0].value}</span>"
<span class="editable" data-path="outputFunction.settings.1.name">${promptStructure.outputFunction.settings[1].name}</span> '(<span class="editable" data-path="outputFunction.settings.1.values">${promptStructure.outputFunction.settings[1].values.join(' ')}</span>))
;; 视觉设置
(设置画布 '(<span class="editable" data-path="outputFunction.canvas.name">${promptStructure.outputFunction.canvas.name}</span> <span class="editable" data-path="outputFunction.canvas.values">${promptStructure.outputFunction.canvas.values.join(' ')}</span>))
(背景色 (渐变 ((<span class="editable" data-path="outputFunction.backgroundColor.color1">${promptStructure.outputFunction.backgroundColor.color1}</span>) . (<span class="editable" data-path="outputFunction.backgroundColor.color2">${promptStructure.outputFunction.backgroundColor.color2}</span>))))
;; 配色风格(可根据需要添加更多样式)
(配色风格 '(
((<span class="editable" data-path="outputFunction.colorStyle.0.style">${promptStructure.outputFunction.colorStyle[0].style}</span>) (<span class="editable" data-path="outputFunction.colorStyle.0.descriptions">${promptStructure.outputFunction.colorStyle[0].descriptions.join(' ')}</span>))
((<span class="editable" data-path="outputFunction.colorStyle.1.style">${promptStructure.outputFunction.colorStyle[1].style}</span>) (<span class="editable" data-path="outputFunction.colorStyle.1.description">${promptStructure.outputFunction.colorStyle[1].description}</span>))))
;; 内容布局(简化为3个部分)
(内容布局 '(
((<span class="editable" data-path="outputFunction.layout.0.part">${promptStructure.outputFunction.layout[0].part}</span>) <span class="editable" data-path="outputFunction.layout.0.layouts">${promptStructure.outputFunction.layout[0].layouts.join(' ')}</span>)
((<span class="editable" data-path="outputFunction.layout.1.part">${promptStructure.outputFunction.layout[1].part}</span>) <span class="editable" data-path="outputFunction.layout.1.layouts">${promptStructure.outputFunction.layout[1].layouts.join(' ')}</span>)
((<span class="editable" data-path="outputFunction.layout.2.part">${promptStructure.outputFunction.layout[2].part}</span>) <span class="editable" data-path="outputFunction.layout.2.layouts">${promptStructure.outputFunction.layout[2].layouts.join(' ')}</span>)))
;; 动态排版
(动态排版 (<span class="editable" data-path="outputFunction.dynamicLayout.cardElement">${promptStructure.outputFunction.dynamicLayout.cardElement}</span>
(((<span class="editable" data-path="outputFunction.dynamicLayout.element1Name">${promptStructure.outputFunction.dynamicLayout.element1Name}</span>) "<span class="editable" data-path="outputFunction.dynamicLayout.element1">${promptStructure.outputFunction.dynamicLayout.element1}</span>")
((<span class="editable" data-path="outputFunction.dynamicLayout.element2Name">${promptStructure.outputFunction.dynamicLayout.element2Name}</span>) (<span class="editable" data-path="outputFunction.dynamicLayout.element2">${promptStructure.outputFunction.dynamicLayout.element2}</span>)))
(<span class="editable" data-path="secondaryFunction.variables.3.name">${promptStructure.secondaryFunction.variables[3].name}</span>))))`;
}
function renderStartFunction() {
return `
;; 启动函数:定义 AI 的初始化过程
(defun <span class="editable" data-path="startFunction.name">${promptStructure.startFunction.name}</span> ()
"<span class="editable" data-path="startFunction.description">${promptStructure.startFunction.description}</span>"
(setq (系统角色设置) <span class="editable" data-path="startFunction.systemRole">${promptStructure.startFunction.systemRole}</span>)
(print "<span class="editable" data-path="startFunction.startMessage">${promptStructure.startFunction.startMessage}</span>"))`;
}
function renderRules() {
return `
;; 运行规则:定义 AI 在执行任务时需要遵循的规则
;; 1. <span class="editable" data-path="rules.0">${promptStructure.rules[0]}</span>
;; 2. <span class="editable" data-path="rules.1">${promptStructure.rules[1]}</span>`;
}
function renderNote() {
return `
;; 注意:其他需要 AI 注意的重要事项
;; <span class="editable" data-path="note">${promptStructure.note}</span>`;
}
function setupEditableFields() {
const editables = document.querySelectorAll('.editable');
editables.forEach(editable => {
editable.contentEditable = true;
editable.addEventListener('input', function () {
const path = this.dataset.path.split('.');
let current = promptStructure;
for (let i = 0; i < path.length - 1; i++) {
current = current[path[i]];
}
if (path[0] === 'tools') {
const index = parseInt(path[1]);
current[index][path[2]] = this.textContent;
} else {
current[path[path.length - 1]] = this.textContent;
}
});
});
}
function copyPrompt() {
const promptText = document.getElementById('promptDisplay').innerText;
navigator.clipboard.writeText(promptText).then(() => {
alert('Prompt 已复制到剪贴板');
}).catch(err => {
console.error('复制失败: ', err);
});
}
document.addEventListener('DOMContentLoaded', renderPrompt);
</script>
</body>
</html>