161 lines
7.0 KiB
HTML
161 lines
7.0 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="zh-CN">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title>驿来特 - 智能海报生成工作台</title>
|
||
<link rel="stylesheet" href="css/element-plus.index.css">
|
||
<link rel="stylesheet" href="css/haibao.css">
|
||
<link rel="stylesheet" href="css/scheme.css">
|
||
</head>
|
||
<body>
|
||
<div id="app" class="app-container">
|
||
<!-- Header -->
|
||
<header class="header">
|
||
<div>
|
||
<h1>🎨 驿来特智能海报生成工作台</h1>
|
||
<div class="header-subtitle">基于 AI 大模型，快速生成高质量企业宣传海报</div>
|
||
</div>
|
||
<div>
|
||
<a href="index.html">
|
||
<el-button plain>返回首页</el-button>
|
||
</a>
|
||
</div>
|
||
</header>
|
||
|
||
<!-- Main Content -->
|
||
<div class="main-layout">
|
||
<!-- Left: Input & Controls -->
|
||
<div class="input-card">
|
||
<div class="section-title">创意工坊</div>
|
||
|
||
<div>
|
||
<div style="margin-bottom: 10px; font-weight: bold;">预设主题</div>
|
||
<div class="preset-tags">
|
||
<el-tag
|
||
v-for="tag in presets"
|
||
:key="tag"
|
||
class="preset-tag"
|
||
effect="plain"
|
||
@click="usePreset(tag)"
|
||
>
|
||
{{ tag }}
|
||
</el-tag>
|
||
</div>
|
||
</div>
|
||
|
||
<div v-loading="refining" element-loading-text="AI 正在为您扩写创意..." element-loading-background="rgba(15, 23, 42, 0.8)">
|
||
<div style="margin-bottom: 10px; font-weight: bold;">提示词 (Prompt)</div>
|
||
<el-input
|
||
v-model="prompt"
|
||
:rows="6"
|
||
type="textarea"
|
||
placeholder="请输入关键词或简短描述，AI 将自动为您扩充细节。例如：清明节、未来科技感充电站..."
|
||
resize="none"
|
||
:disabled="refining"
|
||
></el-input>
|
||
</div>
|
||
|
||
<div style="display: flex; gap: 10px; margin-top: 10px;">
|
||
<el-button
|
||
type="success"
|
||
class="generate-btn"
|
||
plain
|
||
@click="handleRefine"
|
||
:loading="refining"
|
||
style="flex: 1;"
|
||
>
|
||
{{ refining ? 'AI 思考中...' : '✨ AI 创意扩写' }}
|
||
</el-button>
|
||
<el-button
|
||
type="primary"
|
||
class="generate-btn"
|
||
@click="handleGenerate"
|
||
:loading="generating"
|
||
style="flex: 1;"
|
||
>
|
||
{{ generating ? '绘制中...' : '立即生成海报' }}
|
||
</el-button>
|
||
</div>
|
||
|
||
<div style="margin-top: 10px; color: #909399; font-size: 12px;">
|
||
* 提示：点击“AI 创意扩写”可自动丰富细节，点击“立即生成海报”直接出图（如内容较短系统会自动优化）。
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Right: Preview -->
|
||
<div class="preview-card">
|
||
<div v-if="generating" class="generating-overlay">
|
||
<span class="loader"></span>
|
||
<p>AI 正在构思画面并绘制，请稍候...</p>
|
||
</div>
|
||
|
||
<div v-if="currentImage" style="width: 100%; display: flex; flex-direction: column; align-items: center;">
|
||
<div style="display: flex; gap: 20px; width: 100%; align-items: flex-start;">
|
||
<!-- Image Preview -->
|
||
<div style="flex: 1; display: flex; flex-direction: column; align-items: center;">
|
||
<img :src="currentImage.image_url" class="preview-image" alt="Generated Poster">
|
||
<div style="margin-top: 15px;">
|
||
<a :href="currentImage.image_url" target="_blank">
|
||
<el-button type="success" plain size="small">查看原图</el-button>
|
||
</a>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Scheme Text Preview -->
|
||
<div class="scheme-box" v-if="currentImage.scheme_content">
|
||
<div class="scheme-header">
|
||
<span>📋 朋友圈文案</span>
|
||
<el-button type="primary" link size="small" @click="copyScheme">复制文案</el-button>
|
||
</div>
|
||
<div class="scheme-content">
|
||
{{ currentImage.scheme_content }}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div style="margin-top: 15px; text-align: center; width: 100%;">
|
||
<p style="font-weight: bold; margin-bottom: 5px;">{{ currentImage.prompt }}</p>
|
||
<p style="color: #909399; font-size: 12px;">{{ currentImage.created_at }}</p>
|
||
</div>
|
||
</div>
|
||
|
||
<div v-else-if="!generating" class="empty-state">
|
||
<span class="empty-icon">🖼️</span>
|
||
<p>在左侧输入描述，开始创作第一张海报吧</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- History Gallery -->
|
||
<div class="history-section">
|
||
<h3 class="section-title">📜 创作历史</h3>
|
||
<div class="history-grid" v-if="historyList.length > 0">
|
||
<div
|
||
class="history-item"
|
||
v-for="item in historyList"
|
||
:key="item.id"
|
||
@click="viewHistory(item)"
|
||
>
|
||
<img :src="item.image_url" loading="lazy" class="history-img">
|
||
<div class="history-overlay">
|
||
<div class="history-prompt">{{ item.prompt }}</div>
|
||
<div class="history-time">{{ item.created_at }}</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div v-else style="text-align: center; color: #909399; padding: 20px;">
|
||
暂无历史记录
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Scripts -->
|
||
<script src="js/vue.global.js"></script>
|
||
<script src="js/element-plus.index.full.js"></script>
|
||
<script src="js/element-plus.zh-cn.min.js"></script>
|
||
<script src="js/axios.min.js"></script>
|
||
<script src="js/haibao.js"></script>
|
||
</body>
|
||
</html>
|