feat: 封面工作室 v3.1 · 接通真实API · 设计ID编号系统 · 代码区动态更新 · 水印集成
This commit is contained in:
bingshuo
parent
ea565e26fd
commit
fae6c51a09
@ -8,7 +8,6 @@
|
||||
:root {
|
||||
--bg: #0a0e1a;
|
||||
--panel: #11162a;
|
||||
--panel-hover: #161d35;
|
||||
--border: #1e2640;
|
||||
--border-h: #2d3655;
|
||||
--text: #c5cee0;
|
||||
@ -19,448 +18,187 @@
|
||||
--gold: #f59e0b;
|
||||
--purple: #8b5cf6;
|
||||
--code-bg: #0d1117;
|
||||
--radius: 8px;
|
||||
}
|
||||
* { margin: 0; padding: 0; box-sizing: border-box; }
|
||||
body {
|
||||
background: var(--bg);
|
||||
color: var(--text);
|
||||
font-family: -apple-system, 'SF Pro Display', 'PingFang SC', sans-serif;
|
||||
min-height: 100vh;
|
||||
line-height: 1.6;
|
||||
}
|
||||
body { background: var(--bg); color: var(--text); font-family: -apple-system, 'SF Pro Display', 'PingFang SC', sans-serif; min-height: 100vh; line-height: 1.6; }
|
||||
|
||||
/* Header */
|
||||
header {
|
||||
text-align: center;
|
||||
padding: 40px 20px 30px;
|
||||
text-align: center; padding: 36px 20px 24px;
|
||||
border-bottom: 1px solid var(--border);
|
||||
}
|
||||
header h1 {
|
||||
font-size: 32px;
|
||||
font-weight: 700;
|
||||
font-size: 30px; font-weight: 700;
|
||||
background: linear-gradient(90deg, var(--accent), var(--accent-glow));
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
header p {
|
||||
font-size: 14px;
|
||||
color: var(--text-dim);
|
||||
-webkit-background-clip: text; -webkit-text-fill-color: transparent;
|
||||
margin-bottom: 6px;
|
||||
}
|
||||
header p { font-size: 13px; color: var(--text-dim); letter-spacing: 1px; }
|
||||
|
||||
/* Main Layout */
|
||||
.main {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 0;
|
||||
height: calc(100vh - 140px);
|
||||
}
|
||||
@media (max-width: 900px) {
|
||||
.main { grid-template-columns: 1fr; height: auto; }
|
||||
}
|
||||
.main { display: grid; grid-template-columns: 1fr 1fr; gap: 0; height: calc(100vh - 120px); }
|
||||
@media (max-width: 900px) { .main { grid-template-columns: 1fr; height: auto; } }
|
||||
|
||||
/* Left Panel - Design Logic */
|
||||
.left {
|
||||
background: var(--panel);
|
||||
border-right: 1px solid var(--border);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
.left-header {
|
||||
padding: 16px 20px;
|
||||
border-bottom: 1px solid var(--border);
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
.left-header .title {
|
||||
font-size: 13px;
|
||||
font-weight: 600;
|
||||
letter-spacing: 1px;
|
||||
color: var(--text-dim);
|
||||
}
|
||||
.left-header .status {
|
||||
font-size: 12px;
|
||||
color: var(--green);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
}
|
||||
.left-header .status::before {
|
||||
content: '';
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
background: var(--green);
|
||||
border-radius: 50%;
|
||||
animation: pulse 2s infinite;
|
||||
}
|
||||
@keyframes pulse {
|
||||
0%, 100% { opacity: 1; }
|
||||
50% { opacity: 0.4; }
|
||||
/* Left Panel */
|
||||
.left { background: var(--panel); border-right: 1px solid var(--border); display: flex; flex-direction: column; }
|
||||
.left-hdr {
|
||||
padding: 14px 18px; border-bottom: 1px solid var(--border);
|
||||
display: flex; justify-content: space-between; align-items: center;
|
||||
}
|
||||
.left-hdr .t { font-size: 12px; font-weight: 600; letter-spacing: 1px; color: var(--text-dim); }
|
||||
.left-hdr .s { font-size: 11px; color: var(--green); display: flex; align-items: center; gap: 6px; }
|
||||
.left-hdr .s::before { content: ''; width: 5px; height: 5px; background: var(--green); border-radius: 50%; animation: pulse 2s infinite; }
|
||||
@keyframes pulse { 0%,100% { opacity: 1; } 50% { opacity: 0.3; } }
|
||||
|
||||
/* Code Editor Style */
|
||||
.code-area {
|
||||
flex: 1;
|
||||
overflow-y: auto;
|
||||
padding: 20px;
|
||||
font-family: 'SF Mono', 'Fira Code', monospace;
|
||||
font-size: 13px;
|
||||
}
|
||||
.code-area { flex: 1; overflow-y: auto; padding: 18px; font-family: 'SF Mono', 'Fira Code', 'Consolas', monospace; font-size: 12.5px; background: var(--code-bg); }
|
||||
.code-block { margin-bottom: 6px; }
|
||||
.c-num { color: #4a5568; display: inline-block; width: 32px; user-select: none; text-align: right; margin-right: 8px; }
|
||||
.c-cmt { color: #636e7b; }
|
||||
.c-kw { color: var(--purple); }
|
||||
.c-str { color: var(--green); }
|
||||
.c-fn { color: var(--accent); }
|
||||
.c-nr { color: var(--gold); }
|
||||
.c-hl { color: var(--accent-glow); }
|
||||
|
||||
.code-block {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
.code-block .line-num {
|
||||
color: var(--text-dim);
|
||||
display: inline-block;
|
||||
width: 30px;
|
||||
user-select: none;
|
||||
}
|
||||
.code-block .comment {
|
||||
color: #6b7280;
|
||||
}
|
||||
.code-block .keyword {
|
||||
color: var(--purple);
|
||||
}
|
||||
.code-block .string {
|
||||
color: var(--green);
|
||||
}
|
||||
.code-block .function {
|
||||
color: var(--accent);
|
||||
}
|
||||
.code-block .number {
|
||||
color: var(--gold);
|
||||
}
|
||||
.input-panel { padding: 16px 18px; border-top: 1px solid var(--border); background: var(--panel); }
|
||||
.row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 10px; }
|
||||
.input-panel select, .input-panel input { padding: 10px 12px; background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius); color: var(--text); font-size: 13px; outline: none; width: 100%; }
|
||||
.input-panel select:focus, .input-panel input:focus { border-color: var(--accent); }
|
||||
.input-panel textarea { width: 100%; padding: 12px; background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius); color: var(--text); font-size: 13px; line-height: 1.7; resize: vertical; min-height: 100px; outline: none; font-family: inherit; }
|
||||
.input-panel textarea:focus { border-color: var(--accent); }
|
||||
|
||||
/* Input Section */
|
||||
.input-section {
|
||||
padding: 20px;
|
||||
border-top: 1px solid var(--border);
|
||||
background: var(--code-bg);
|
||||
}
|
||||
.input-row {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 12px;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
.input-row select, .input-row input {
|
||||
padding: 10px 14px;
|
||||
background: var(--panel);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 6px;
|
||||
color: var(--text);
|
||||
font-size: 13px;
|
||||
outline: none;
|
||||
}
|
||||
.input-row select:focus, .input-row input:focus {
|
||||
border-color: var(--accent);
|
||||
}
|
||||
.gen-btn { width: 100%; padding: 13px; background: var(--accent); color: white; border: none; border-radius: var(--radius); font-size: 14px; font-weight: 600; cursor: pointer; margin-top: 10px; transition: all 0.2s; letter-spacing: 1px; }
|
||||
.gen-btn:hover { background: var(--accent-glow); }
|
||||
.gen-btn:disabled { opacity: 0.5; cursor: not-allowed; background: var(--accent); }
|
||||
|
||||
textarea {
|
||||
width: 100%;
|
||||
padding: 14px;
|
||||
background: var(--panel);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 6px;
|
||||
color: var(--text);
|
||||
font-size: 14px;
|
||||
line-height: 1.7;
|
||||
resize: vertical;
|
||||
min-height: 120px;
|
||||
outline: none;
|
||||
font-family: inherit;
|
||||
}
|
||||
textarea:focus { border-color: var(--accent); }
|
||||
/* Right Panel */
|
||||
.right { background: var(--bg); display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 30px; position: relative; overflow-y: auto; }
|
||||
|
||||
.gen-btn {
|
||||
width: 100%;
|
||||
padding: 14px;
|
||||
background: var(--accent);
|
||||
color: white;
|
||||
border: none;
|
||||
border-radius: 6px;
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
cursor: pointer;
|
||||
margin-top: 12px;
|
||||
transition: all 0.2s;
|
||||
}
|
||||
.gen-btn:hover {
|
||||
background: var(--accent-glow);
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
.gen-btn:disabled {
|
||||
opacity: 0.5;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
.design-id-badge { position: absolute; top: 20px; left: 20px; background: var(--panel); padding: 10px 16px; border-radius: var(--radius); border: 1px solid var(--border); display: none; z-index: 2; }
|
||||
.design-id-badge .l { font-size: 10px; color: var(--text-dim); letter-spacing: 1px; }
|
||||
.design-id-badge .v { font-size: 13px; font-weight: 600; color: var(--accent); font-family: 'SF Mono', monospace; }
|
||||
|
||||
/* Right Panel - Preview */
|
||||
.right {
|
||||
background: var(--bg);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 40px;
|
||||
position: relative;
|
||||
}
|
||||
.empty-state { text-align: center; color: var(--text-dim); }
|
||||
.empty-state .icon { font-size: 56px; margin-bottom: 16px; opacity: 0.25; }
|
||||
.empty-state p { font-size: 14px; line-height: 2; }
|
||||
|
||||
.preview-container {
|
||||
position: relative;
|
||||
border-radius: 12px;
|
||||
overflow: hidden;
|
||||
box-shadow: 0 20px 60px rgba(0,0,0,0.5);
|
||||
border: 1px solid var(--border);
|
||||
}
|
||||
.loading { display: none; text-align: center; padding: 40px; }
|
||||
.loading.show { display: block; }
|
||||
.loading .dots span { display: inline-block; width: 7px; height: 7px; background: var(--accent); border-radius: 50%; margin: 0 3px; animation: bounce 1.4s infinite; }
|
||||
.loading .dots span:nth-child(1) { animation-delay: -0.32s; }
|
||||
.loading .dots span:nth-child(2) { animation-delay: -0.16s; }
|
||||
@keyframes bounce { 0%,80%,100% { transform: scale(0); } 40% { transform: scale(1); } }
|
||||
|
||||
.preview-img {
|
||||
max-width: 100%;
|
||||
max-height: 70vh;
|
||||
display: block;
|
||||
}
|
||||
|
||||
/* ID Watermark on Image */
|
||||
.id-watermark {
|
||||
position: absolute;
|
||||
bottom: 16px;
|
||||
right: 16px;
|
||||
background: rgba(0,0,0,0.7);
|
||||
padding: 8px 14px;
|
||||
border-radius: 20px;
|
||||
font-size: 12px;
|
||||
font-family: 'SF Mono', monospace;
|
||||
color: var(--accent-glow);
|
||||
border: 1px solid var(--accent);
|
||||
.preview-wrap { position: relative; border-radius: 12px; overflow: hidden; box-shadow: 0 16px 48px rgba(0,0,0,0.5); border: 1px solid var(--border); display: none; }
|
||||
.preview-wrap.show { display: block; }
|
||||
.preview-wrap img { max-width: 100%; max-height: 60vh; display: block; }
|
||||
.watermark {
|
||||
position: absolute; bottom: 14px; right: 14px;
|
||||
background: rgba(0,0,0,0.75); padding: 6px 14px;
|
||||
border-radius: 20px; font-size: 11px; font-family: 'SF Mono', monospace;
|
||||
color: var(--accent-glow); border: 1px solid rgba(59,130,246,0.4);
|
||||
letter-spacing: 1px;
|
||||
}
|
||||
|
||||
/* Design ID Badge */
|
||||
.design-id {
|
||||
position: absolute;
|
||||
top: 20px;
|
||||
left: 20px;
|
||||
background: var(--panel);
|
||||
padding: 10px 16px;
|
||||
border-radius: 8px;
|
||||
border: 1px solid var(--border);
|
||||
}
|
||||
.design-id .label {
|
||||
font-size: 11px;
|
||||
color: var(--text-dim);
|
||||
letter-spacing: 1px;
|
||||
}
|
||||
.design-id .value {
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
color: var(--accent);
|
||||
font-family: 'SF Mono', monospace;
|
||||
}
|
||||
.dl-bar { display: none; gap: 10px; margin-top: 20px; }
|
||||
.dl-bar.show { display: flex; }
|
||||
.dl-btn { padding: 11px 22px; background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius); color: var(--text); text-decoration: none; font-size: 13px; transition: all 0.2s; cursor: pointer; }
|
||||
.dl-btn:hover { border-color: var(--accent); color: var(--accent); }
|
||||
.dl-btn.primary { background: var(--accent); color: white; border-color: var(--accent); }
|
||||
|
||||
/* Empty State */
|
||||
.empty-state {
|
||||
text-align: center;
|
||||
color: var(--text-dim);
|
||||
}
|
||||
.empty-state .icon {
|
||||
font-size: 64px;
|
||||
margin-bottom: 20px;
|
||||
opacity: 0.3;
|
||||
}
|
||||
.empty-state p {
|
||||
font-size: 15px;
|
||||
line-height: 2;
|
||||
}
|
||||
.exec-log { display: none; width: 100%; max-width: 600px; background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius); padding: 16px; margin-top: 16px; }
|
||||
.exec-log.show { display: block; }
|
||||
.exec-log .t { font-size: 11px; color: var(--text-dim); letter-spacing: 1px; margin-bottom: 12px; }
|
||||
.exec-row { display: flex; gap: 10px; padding: 7px 0; font-size: 12px; border-bottom: 1px solid rgba(30,38,64,0.5); }
|
||||
.exec-row:last-child { border-bottom: none; }
|
||||
.exec-row .n { color: var(--text-dim); font-family: 'SF Mono', monospace; min-width: 24px; }
|
||||
.exec-row .act { color: var(--accent); min-width: 80px; font-weight: 500; }
|
||||
.exec-row .det { color: var(--text-dim); flex: 1; }
|
||||
|
||||
/* Download */
|
||||
.download-bar {
|
||||
margin-top: 24px;
|
||||
display: none;
|
||||
}
|
||||
.download-bar.show {
|
||||
display: flex;
|
||||
gap: 12px;
|
||||
}
|
||||
.dl-btn {
|
||||
padding: 12px 24px;
|
||||
background: var(--panel);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 6px;
|
||||
color: var(--text);
|
||||
text-decoration: none;
|
||||
font-size: 14px;
|
||||
transition: all 0.2s;
|
||||
}
|
||||
.dl-btn:hover {
|
||||
border-color: var(--accent);
|
||||
color: var(--accent);
|
||||
}
|
||||
.dl-btn.primary {
|
||||
background: var(--accent);
|
||||
color: white;
|
||||
border-color: var(--accent);
|
||||
}
|
||||
|
||||
/* Intent Chain Display */
|
||||
.intent-chain {
|
||||
position: absolute;
|
||||
bottom: 20px;
|
||||
left: 20px;
|
||||
right: 20px;
|
||||
background: var(--panel);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 8px;
|
||||
padding: 16px;
|
||||
display: none;
|
||||
}
|
||||
.intent-chain.show {
|
||||
display: block;
|
||||
}
|
||||
.intent-chain .title {
|
||||
font-size: 12px;
|
||||
color: var(--text-dim);
|
||||
margin-bottom: 12px;
|
||||
letter-spacing: 1px;
|
||||
}
|
||||
.chain-step {
|
||||
display: flex;
|
||||
gap: 12px;
|
||||
padding: 8px 0;
|
||||
font-size: 13px;
|
||||
border-bottom: 1px solid var(--border);
|
||||
}
|
||||
.chain-step:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
.chain-step .num {
|
||||
color: var(--text-dim);
|
||||
font-family: 'SF Mono', monospace;
|
||||
min-width: 30px;
|
||||
}
|
||||
.chain-step .action {
|
||||
color: var(--accent);
|
||||
}
|
||||
.chain-step .detail {
|
||||
color: var(--text-dim);
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.loading {
|
||||
display: none;
|
||||
text-align: center;
|
||||
padding: 60px;
|
||||
}
|
||||
.loading.show {
|
||||
display: block;
|
||||
}
|
||||
.loading-dots span {
|
||||
display: inline-block;
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
background: var(--accent);
|
||||
border-radius: 50%;
|
||||
margin: 0 4px;
|
||||
animation: bounce 1.4s infinite ease-in-out both;
|
||||
}
|
||||
.loading-dots span:nth-child(1) { animation-delay: -0.32s; }
|
||||
.loading-dots span:nth-child(2) { animation-delay: -0.16s; }
|
||||
@keyframes bounce {
|
||||
0%, 80%, 100% { transform: scale(0); }
|
||||
40% { transform: scale(1); }
|
||||
}
|
||||
.error-msg { display: none; padding: 12px; background: rgba(255,71,87,0.08); border: 1px solid rgba(255,71,87,0.2); border-radius: var(--radius); color: #ff6b7a; font-size: 12px; margin-top: 10px; }
|
||||
.error-msg.show { display: block; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<header>
|
||||
<h1>封面工作室</h1>
|
||||
<p>语言驱动设计系统 · 你的意图，系统只是执行者</p>
|
||||
<p>语言驱动设计系统 · 意图可追溯 · 设计属于你</p>
|
||||
</header>
|
||||
|
||||
<div class="main">
|
||||
|
||||
<!-- Left: Design Logic -->
|
||||
<!-- Left: Design Logic + Input -->
|
||||
<div class="left">
|
||||
<div class="left-header">
|
||||
<span class="title">DESIGN LOGIC // 设计逻辑</span>
|
||||
<span class="status">SYSTEM READY</span>
|
||||
<div class="left-hdr">
|
||||
<span class="t">DESIGN LOGIC</span>
|
||||
<span class="s">READY</span>
|
||||
</div>
|
||||
|
||||
<div class="code-area" id="codeArea">
|
||||
<div class="code-block">
|
||||
<span class="line-num">1</span><span class="comment">// 等待用户输入自然语言意图...</span><br>
|
||||
<span class="line-num">2</span><span class="keyword">await</span> <span class="function">userInput</span>();<br>
|
||||
<span class="line-num">3</span><br>
|
||||
<span class="line-num">4</span><span class="comment">// 系统将把语言翻译成设计逻辑</span><br>
|
||||
<span class="line-num">5</span><span class="comment">// 每一步都可追溯、可验证、可署名</span>
|
||||
</div>
|
||||
<div class="code-area" id="code">
|
||||
<span class="c-num">1</span><span class="c-cmt">// 等待用户输入设计意图...</span>
|
||||
<span class="c-num">2</span><span class="c-kw">await</span> <span class="c-fn">userInput</span>();
|
||||
<span class="c-num">3</span>
|
||||
<span class="c-num">4</span><span class="c-cmt">// 系统将把自然语言翻译成可执行的设计逻辑</span>
|
||||
<span class="c-num">5</span><span class="c-cmt">// 每步可追溯 · 编号唯一 · 归属性验证</span>
|
||||
</div>
|
||||
|
||||
<div class="input-section">
|
||||
<div class="input-row">
|
||||
<select id="template">
|
||||
<option value="xiaohongshu">📕 小红书封面 (1080×1440)</option>
|
||||
<div class="input-panel">
|
||||
<div class="row2">
|
||||
<select id="preset" onchange="updateCode()">
|
||||
<option value="tech">科技蓝</option>
|
||||
<option value="warm">奶油暖调</option>
|
||||
<option value="minimal">极简黑白</option>
|
||||
<option value="rose">玫瑰粉调</option>
|
||||
<option value="green">文艺绿植</option>
|
||||
</select>
|
||||
<select id="preset">
|
||||
<option value="tech">🔷 科技蓝</option>
|
||||
<option value="warm">🟠 奶油暖调</option>
|
||||
<option value="minimal">⬜ 极简黑白</option>
|
||||
<option value="rose">🟣 玫瑰粉调</option>
|
||||
<option value="green">🟢 文艺绿植</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="input-row">
|
||||
<select id="layout">
|
||||
<option value="default">标准排版</option>
|
||||
<option value="hero">大标题封面</option>
|
||||
<option value="quote">金句居中</option>
|
||||
</select>
|
||||
<input type="text" id="tag" placeholder="标签: 教程 · 干货">
|
||||
</div>
|
||||
<input type="text" id="title" placeholder="标题" style="width:100%;margin-bottom:12px;padding:12px 14px;background:var(--panel);border:1px solid var(--border);border-radius:6px;color:var(--text);">
|
||||
<textarea id="content" placeholder="输入正文内容...
|
||||
|
||||
支持格式:
|
||||
- 列表项用 - 开头
|
||||
## 小标题
|
||||
**加粗文字**"></textarea>
|
||||
<button class="gen-btn" id="genBtn" onclick="generate()">执行设计逻辑 → 生成封面</button>
|
||||
<div class="row2">
|
||||
<select id="template">
|
||||
<option value="xiaohongshu">📕 小红书 1080×1440</option>
|
||||
</select>
|
||||
<input type="text" id="tag" placeholder="标签 (可选)" maxlength="20">
|
||||
</div>
|
||||
<input type="text" id="title" placeholder="标题" style="width:100%;margin-bottom:10px;padding:10px 12px;background:var(--bg);border:1px solid var(--border);border-radius:var(--radius);color:var(--text);font-size:14px;outline:none;">
|
||||
<textarea id="body" placeholder="正文... - 列表用 - 开头 ## 小标题 ## **加粗**文字"></textarea>
|
||||
<button class="gen-btn" id="btn" onclick="gen()">执行设计逻辑</button>
|
||||
<div class="error-msg" id="err"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Right: Preview -->
|
||||
<!-- Right: Preview + Chain -->
|
||||
<div class="right">
|
||||
<div class="design-id" id="designId" style="display:none;">
|
||||
<div class="label">DESIGN ID</div>
|
||||
<div class="value" id="idValue">---</div>
|
||||
<div class="design-id-badge" id="badge">
|
||||
<div class="l">DESIGN ID</div>
|
||||
<div class="v" id="bid">---</div>
|
||||
</div>
|
||||
|
||||
<div class="empty-state" id="empty">
|
||||
<div class="icon">🎨</div>
|
||||
<p>在左侧输入设计意图<br>系统将翻译成可执行逻辑<br>生成带编号的封面</p>
|
||||
<p>在左侧输入设计意图<br>系统翻译成可执行逻辑<br>生成带编号的封面</p>
|
||||
</div>
|
||||
|
||||
<div class="loading" id="loading">
|
||||
<div class="loading-dots">
|
||||
<span></span><span></span><span></span>
|
||||
</div>
|
||||
<p style="margin-top:20px;color:var(--text-dim);">编译设计意图...</p>
|
||||
<div class="dots"><span></span><span></span><span></span></div>
|
||||
<p style="margin-top:18px;color:var(--text-dim);font-size:13px;">编译设计意图...</p>
|
||||
</div>
|
||||
|
||||
<div class="preview-container" id="previewBox" style="display:none;">
|
||||
<img class="preview-img" id="previewImg" alt="封面">
|
||||
<div class="id-watermark" id="watermark">---</div>
|
||||
<div class="preview-wrap" id="previewBox">
|
||||
<img id="previewImg" alt="封面">
|
||||
<div class="watermark" id="wm">---</div>
|
||||
</div>
|
||||
|
||||
<div class="download-bar" id="dlBar">
|
||||
<a href="#" class="dl-btn primary" id="dlLink" download>下载 PNG</a>
|
||||
<div class="dl-bar" id="dlBar">
|
||||
<a class="dl-btn primary" id="dl" href="#" download>下载 PNG</a>
|
||||
<button class="dl-btn" onclick="copyId()">复制设计编号</button>
|
||||
</div>
|
||||
|
||||
<div class="intent-chain" id="chain">
|
||||
<div class="title">执行日志 // EXECUTION LOG</div>
|
||||
<div id="chainContent"></div>
|
||||
<div class="exec-log" id="log">
|
||||
<div class="t">EXECUTION LOG</div>
|
||||
<div id="logBody"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -468,128 +206,153 @@ textarea:focus { border-color: var(--accent); }
|
||||
|
||||
<script>
|
||||
let currentId = '';
|
||||
const presetNames = { tech: '科技蓝', warm: '奶油暖调', minimal: '极简黑白', rose: '玫瑰粉调', green: '文艺绿植' };
|
||||
const layoutNames = { default: '标准排版', hero: '大标题封面', quote: '金句居中' };
|
||||
|
||||
function generate() {
|
||||
const title = document.getElementById('title').value.trim();
|
||||
const content = document.getElementById('content').value.trim();
|
||||
const preset = document.getElementById('preset').value;
|
||||
const layout = document.getElementById('layout').value;
|
||||
function updateCode() {
|
||||
const p = document.getElementById('preset').value;
|
||||
const t = document.getElementById('title').value.trim() || '待输入';
|
||||
const b = document.getElementById('body').value.trim();
|
||||
const l = document.getElementById('layout').value;
|
||||
const hasList = b.includes('-');
|
||||
|
||||
document.getElementById('code').innerHTML =
|
||||
`<span class="c-num">1</span><span class="c-cmt">// =====================================</span>
|
||||
<span class="c-num">2</span><span class="c-cmt">// DESIGN ID: ${currentId || '待生成'}</span>
|
||||
<span class="c-num">3</span><span class="c-cmt">// =====================================</span>
|
||||
<span class="c-num">4</span>
|
||||
<span class="c-num">5</span><span class="c-kw">const</span> <span class="c-fn">userIntent</span> = {
|
||||
<span class="c-num">6</span> title: <span class="c-str">"${t.substring(0,30)}${t.length>30?'...':''}"</span>,
|
||||
<span class="c-num">7</span> style: <span class="c-str">"${presetNames[p]}"</span>,
|
||||
<span class="c-num">8</span> layout: <span class="c-str">"${layoutNames[l]}"</span>,
|
||||
<span class="c-num">9</span> owner: <span class="c-str">"用户"</span>,
|
||||
<span class="c-num">10</span>};
|
||||
<span class="c-num">11</span>
|
||||
<span class="c-num">12</span><span class="c-cmt">// STEP 1: analyzeIntent() — 理解意图</span>
|
||||
<span class="c-num">13</span><span class="c-kw">const</span> a = <span class="c-fn">analyzeIntent</span>(userIntent);
|
||||
<span class="c-num">14</span><span class="c-cmt">// → 类型: ${hasList?'列表/教程':'段落文本'}</span>
|
||||
<span class="c-num">15</span><span class="c-cmt">// → 情绪: ${p==='tech'?'冷静专业':p==='warm'?'温暖亲和':'简约高级'}</span>
|
||||
<span class="c-num">16</span>
|
||||
<span class="c-num">17</span><span class="c-cmt">// STEP 2: selectColorScheme() — 匹配配色</span>
|
||||
<span class="c-num">18</span><span class="c-kw">const</span> cs = <span class="c-str">"${p}"</span>;
|
||||
<span class="c-num">19</span><span class="c-cmt">// → ${presetNames[p]} · 配色方案匹配情绪</span>
|
||||
<span class="c-num">20</span>
|
||||
<span class="c-num">21</span><span class="c-cmt">// STEP 3: specifyLayout() — 确定布局</span>
|
||||
<span class="c-num">22</span><span class="c-kw">const</span> ly = <span class="c-str">"${l}"</span>;
|
||||
<span class="c-num">23</span><span class="c-cmt">// → ${layoutNames[l]} ${l==='hero'?'· 大标题视觉冲击':l==='quote'?'· 金句居中聚焦':'· 图文并茂'}</span>
|
||||
<span class="c-num">24</span>
|
||||
<span class="c-num">25</span><span class="c-cmt">// STEP 4: render() — 排版引擎执行</span>
|
||||
<span class="c-num">26</span><span class="c-kw">await</span> <span class="c-fn">renderToImage</span>({
|
||||
<span class="c-num">27</span> template: <span class="c-str">"xiaohongshu"</span>,
|
||||
<span class="c-num">28</span> size: <span class="c-nr">1080</span> × <span class="c-nr">1440</span>,
|
||||
<span class="c-num">29</span> engine: <span class="c-str">"Puppeteer + Chrome"</span>,
|
||||
<span class="c-num">30</span> format: <span class="c-str">"PNG"</span>
|
||||
<span class="c-num">31</span>});
|
||||
<span class="c-num">32</span>
|
||||
<span class="c-num">33</span><span class="c-cmt">// STEP 5: watermark() — 添加归属编号</span>
|
||||
<span class="c-num">34</span><span class="c-fn">watermark</span>(<span class="c-hl">"${currentId || '即将生成...'}"</span>);
|
||||
<span class="c-num">35</span><span class="c-cmt">// ✓ 完成 · 该设计归用户所有</span>`;
|
||||
}
|
||||
|
||||
async function gen() {
|
||||
const t = document.getElementById('title').value.trim();
|
||||
const b = document.getElementById('body').value.trim();
|
||||
const p = document.getElementById('preset').value;
|
||||
const l = document.getElementById('layout').value;
|
||||
const tag = document.getElementById('tag').value.trim();
|
||||
|
||||
if (!title && !content) {
|
||||
alert('请输入标题或内容');
|
||||
return;
|
||||
}
|
||||
if (!t && !b) { showErr('请输入标题或正文'); return; }
|
||||
|
||||
// Show loading
|
||||
// Reset UI
|
||||
document.getElementById('err').classList.remove('show');
|
||||
document.getElementById('empty').style.display = 'none';
|
||||
document.getElementById('previewBox').style.display = 'none';
|
||||
document.getElementById('dlBar').style.display = 'none';
|
||||
document.getElementById('chain').style.display = 'none';
|
||||
document.getElementById('designId').style.display = 'none';
|
||||
document.getElementById('previewBox').classList.remove('show');
|
||||
document.getElementById('dlBar').classList.remove('show');
|
||||
document.getElementById('log').classList.remove('show');
|
||||
document.getElementById('badge').style.display = 'none';
|
||||
document.getElementById('loading').classList.add('show');
|
||||
document.getElementById('genBtn').disabled = true;
|
||||
document.getElementById('btn').disabled = true;
|
||||
|
||||
// Generate design ID
|
||||
currentId = 'D-' + Date.now().toString(36).toUpperCase();
|
||||
// Generate ID
|
||||
currentId = 'DSG-' + Date.now().toString(36).toUpperCase();
|
||||
document.getElementById('bid').textContent = currentId;
|
||||
document.getElementById('wm').textContent = currentId;
|
||||
updateCode();
|
||||
|
||||
// Update code area with design logic
|
||||
const codeArea = document.getElementById('codeArea');
|
||||
codeArea.innerHTML = `
|
||||
<div class="code-block">
|
||||
<span class="line-num">1</span><span class="comment">// ========================================</span><br>
|
||||
<span class="line-num">2</span><span class="comment">// DESIGN ID: ${currentId}</span><br>
|
||||
<span class="line-num">3</span><span class="comment">// OWNER: 用户</span><br>
|
||||
<span class="line-num">4</span><span class="comment">// ========================================</span><br>
|
||||
<span class="line-num">5</span><br>
|
||||
<span class="line-num">6</span><span class="keyword">const</span> <span class="function">userIntent</span> = {<br>
|
||||
<span class="line-num">7</span> title: <span class="string">"${title || '未命名'}"</span>,<br>
|
||||
<span class="line-num">8</span> content: <span class="string">"${content.substring(0, 50)}${content.length > 50 ? '...' : ''}"</span>,<br>
|
||||
<span class="line-num">9</span> mood: <span class="string">"${preset === 'tech' ? '科技感' : preset === 'warm' ? '温暖' : preset === 'rose' ? '文艺' : '极简'}"</span><br>
|
||||
<span class="line-num">10</span>};<br>
|
||||
<span class="line-num">11</span><br>
|
||||
<span class="line-num">12</span><span class="comment">// STEP 1: 分析意图</span><br>
|
||||
<span class="line-num">13</span><span class="keyword">const</span> analysis = <span class="function">analyzeIntent</span>(userIntent);<br>
|
||||
<span class="line-num">14</span><span class="comment">// → 内容类型: ${content.includes('-') ? '列表/教程' : '段落'}</span><br>
|
||||
<span class="line-num">15</span><span class="comment">// → 推荐布局: ${layout === 'hero' ? '大标题封面' : layout === 'quote' ? '金句居中' : '标准排版'}</span><br>
|
||||
<span class="line-num">16</span><br>
|
||||
<span class="line-num">17</span><span class="comment">// STEP 2: 选择配色方案</span><br>
|
||||
<span class="line-num">18</span><span class="keyword">const</span> colorScheme = <span class="string">"${preset}"</span>;<br>
|
||||
<span class="line-num">19</span><span class="comment">// → 匹配情绪: ${preset === 'tech' ? '冷静、专业' : preset === 'warm' ? '温暖、亲和' : '简约、高级'}</span><br>
|
||||
<span class="line-num">20</span><br>
|
||||
<span class="line-num">21</span><span class="comment">// STEP 3: 渲染引擎执行</span><br>
|
||||
<span class="line-num">22</span><span class="keyword">await</span> <span class="function">render</span>({<br>
|
||||
<span class="line-num">23</span> template: <span class="string">"xiaohongshu"</span>,<br>
|
||||
<span class="line-num">24</span> size: <span class="string">"1080x1440"</span>,<br>
|
||||
<span class="line-num">25</span> style: colorScheme,<br>
|
||||
<span class="line-num">26</span> layout: <span class="string">"${layout}"</span><br>
|
||||
<span class="line-num">27</span>});<br>
|
||||
<span class="line-num">28</span><br>
|
||||
<span class="line-num">29</span><span class="comment">// STEP 4: 输出带编号水印</span><br>
|
||||
<span class="line-num">30</span><span class="function">watermark</span>(<span class="string">"${currentId}"</span>);<br>
|
||||
<span class="line-num">31</span><span class="comment">// ✓ 设计完成 - 归属权: 用户</span>
|
||||
</div>
|
||||
`;
|
||||
try {
|
||||
const r = await fetch('/api/generate', {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({
|
||||
templateId: 'xiaohongshu',
|
||||
presetId: p, title: t, body: b, tag,
|
||||
layout: l,
|
||||
}),
|
||||
});
|
||||
|
||||
// Simulate API call
|
||||
setTimeout(() => {
|
||||
if (!r.ok) { const e = await r.json(); throw new Error(e.error || '生成失败'); }
|
||||
const d = await r.json();
|
||||
|
||||
// Show result
|
||||
document.getElementById('loading').classList.remove('show');
|
||||
document.getElementById('previewBox').style.display = 'block';
|
||||
document.getElementById('dlBar').style.display = 'flex';
|
||||
document.getElementById('chain').style.display = 'block';
|
||||
document.getElementById('designId').style.display = 'block';
|
||||
document.getElementById('genBtn').disabled = false;
|
||||
document.getElementById('previewImg').src = d.url;
|
||||
document.getElementById('previewBox').classList.add('show');
|
||||
document.getElementById('dlBar').classList.add('show');
|
||||
document.getElementById('dl').href = d.url;
|
||||
document.getElementById('badge').style.display = 'block';
|
||||
|
||||
// Set IDs
|
||||
document.getElementById('idValue').textContent = currentId;
|
||||
document.getElementById('watermark').textContent = currentId;
|
||||
// Show execution log from intent chain
|
||||
if (d.intent_chain) {
|
||||
document.getElementById('log').classList.add('show');
|
||||
document.getElementById('logBody').innerHTML = d.intent_chain.map((s, i) =>
|
||||
`<div class="exec-row">
|
||||
<span class="n">${String(i+1).padStart(2,'0')}</span>
|
||||
<span class="act">${s.step}</span>
|
||||
<span class="det">${s.detail.substring(0,80)}</span>
|
||||
</div>`
|
||||
).join('');
|
||||
}
|
||||
|
||||
// Generate a placeholder image URL (in real implementation, this would be the API response)
|
||||
document.getElementById('previewImg').src = `/output/cover_${Date.now()}.png`;
|
||||
document.getElementById('dlLink').href = `/output/cover_${Date.now()}.png`;
|
||||
// Update code with result
|
||||
document.getElementById('code').innerHTML = document.getElementById('code').innerHTML
|
||||
.replace(/即将生成.../g, currentId)
|
||||
+ `
|
||||
<span class="c-num">36</span>
|
||||
<span class="c-num">37</span><span class="c-cmt">// ✅ 设计生成完成</span>
|
||||
<span class="c-num">38</span><span class="c-cmt">// DESIGN ID: ${currentId}</span>
|
||||
<span class="c-num">39</span><span class="c-cmt">// 证明: 左侧编号 = 图片上编号 → 属于你</span>`;
|
||||
|
||||
// Show chain
|
||||
document.getElementById('chainContent').innerHTML = `
|
||||
<div class="chain-step">
|
||||
<span class="num">01</span>
|
||||
<span class="action">解析意图</span>
|
||||
<span class="detail">识别内容类型 → ${content.includes('-') ? '列表结构' : '段落文本'}</span>
|
||||
</div>
|
||||
<div class="chain-step">
|
||||
<span class="num">02</span>
|
||||
<span class="action">匹配配色</span>
|
||||
<span class="detail">${preset} → ${preset === 'tech' ? '蓝色系科技风' : preset === 'warm' ? '暖色系亲和风' : '极简黑白风'}</span>
|
||||
</div>
|
||||
<div class="chain-step">
|
||||
<span class="num">03</span>
|
||||
<span class="action">选择布局</span>
|
||||
<span class="detail">${layout} → ${layout === 'hero' ? '大标题冲击力' : layout === 'quote' ? '金句居中聚焦' : '标准图文并茂'}</span>
|
||||
</div>
|
||||
<div class="chain-step">
|
||||
<span class="num">04</span>
|
||||
<span class="action">渲染输出</span>
|
||||
<span class="detail">Puppeteer + Chrome → 1080×1440 PNG</span>
|
||||
</div>
|
||||
<div class="chain-step">
|
||||
<span class="num">05</span>
|
||||
<span class="action">添加编号</span>
|
||||
<span class="detail">${currentId} → 图片水印 + 元数据</span>
|
||||
</div>
|
||||
`;
|
||||
|
||||
}, 1500);
|
||||
} catch (e) {
|
||||
document.getElementById('loading').classList.remove('show');
|
||||
document.getElementById('empty').style.display = 'block';
|
||||
showErr(e.message);
|
||||
document.getElementById('btn').disabled = false;
|
||||
} finally {
|
||||
document.getElementById('btn').disabled = false;
|
||||
}
|
||||
}
|
||||
|
||||
function showErr(m) { const e = document.getElementById('err'); e.textContent = m; e.classList.add('show'); setTimeout(() => e.classList.remove('show'), 5000); }
|
||||
|
||||
function copyId() {
|
||||
navigator.clipboard.writeText(currentId).then(() => {
|
||||
alert('设计编号已复制: ' + currentId);
|
||||
});
|
||||
navigator.clipboard.writeText(currentId).then(() => showErr('已复制: ' + currentId));
|
||||
}
|
||||
|
||||
// Preset change update
|
||||
document.getElementById('preset').addEventListener('change', function() {
|
||||
// In real implementation, this would update preview
|
||||
document.addEventListener('keydown', e => {
|
||||
if ((e.metaKey || e.ctrlKey) && e.key === 'Enter') gen();
|
||||
});
|
||||
|
||||
// Pre-fill demo
|
||||
(function() {
|
||||
document.getElementById('title').value = '零基础手搓AI封面生成器';
|
||||
document.getElementById('body').value =
|
||||
'语言驱动设计 · 意图透明 · 编号可追溯\n\n' +
|
||||
'- 零成本 · 无需GPU\n' +
|
||||
'- 极轻量 · 一行命令部署\n' +
|
||||
'- 意图透明 · 每一步可见\n' +
|
||||
'- 编号唯一 · 设计属于你';
|
||||
updateCode();
|
||||
})();
|
||||
</script>
|
||||
|
||||
</body>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user