|
|
@@ -1,771 +1,66 @@
|
|
|
-<!doctype html>
|
|
|
-<html lang="zh-CN">
|
|
|
-<head>
|
|
|
- <meta charset="UTF-8">
|
|
|
- <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
|
|
|
- <meta http-equiv="X-UA-Compatible" content="ie=edge">
|
|
|
- <title>生成模板 - 文生图</title>
|
|
|
- <!-- 引入Font Awesome图标 -->
|
|
|
- <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
|
|
|
- <!-- 引入自定义CSS -->
|
|
|
- <link rel="shortcut icon" href="__CDN__/assets/img/favicon.ico"/>
|
|
|
- <style>
|
|
|
- /* 自定义提示框样式 */
|
|
|
- .custom-alert {
|
|
|
- position: fixed;
|
|
|
- top: 10%;
|
|
|
- left: 50%;
|
|
|
- transform: translate(-50%, -50%);
|
|
|
- padding: 15px 25px;
|
|
|
- border-radius: 8px;
|
|
|
- color: white;
|
|
|
- font-size: 14px;
|
|
|
- font-weight: 500;
|
|
|
- z-index: 10000;
|
|
|
- box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
|
|
|
- opacity: 0;
|
|
|
- visibility: hidden;
|
|
|
- transition: all 0.3s ease;
|
|
|
- max-width: 80%;
|
|
|
- text-align: center;
|
|
|
- }
|
|
|
- .custom-alert.show {
|
|
|
- opacity: 1;
|
|
|
- visibility: visible;
|
|
|
- }
|
|
|
- .custom-alert.error {
|
|
|
- background-color: #e74c3c;
|
|
|
- }
|
|
|
- .custom-alert.success {
|
|
|
- background-color: #28a745;
|
|
|
- }
|
|
|
- .custom-alert.warning {
|
|
|
- background-color: #ffc107;
|
|
|
- color: #333;
|
|
|
- }
|
|
|
- .custom-alert.info {
|
|
|
- background-color: #17a2b8;
|
|
|
- }
|
|
|
-
|
|
|
- * {
|
|
|
- margin: 0;
|
|
|
- padding: 0;
|
|
|
- box-sizing: border-box;
|
|
|
- }
|
|
|
- /* 标题样式 */
|
|
|
- .page-title {
|
|
|
- font-size: 24px;
|
|
|
- font-weight: bold;
|
|
|
- margin-bottom: 25px;
|
|
|
- color: #333;
|
|
|
- }
|
|
|
- /* 内容区域 */
|
|
|
- .content-area {
|
|
|
- display: grid;
|
|
|
- grid-template-columns: 1fr 1fr;
|
|
|
- gap: 30px;
|
|
|
- }
|
|
|
- /* 左侧输入区域 */
|
|
|
- .input-section {
|
|
|
- background-color: #fff;
|
|
|
- border-radius: 8px;
|
|
|
- padding: 20px;
|
|
|
- box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
|
|
|
- }
|
|
|
- /* 右侧预览区域 */
|
|
|
- .preview-section {
|
|
|
- background-color: #fff;
|
|
|
- border-radius: 8px;
|
|
|
- padding: 20px;
|
|
|
- box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
|
|
|
- }
|
|
|
- /* 表单组样式 */
|
|
|
- .form-group {
|
|
|
- margin-bottom: 20px;
|
|
|
- }
|
|
|
- .form-group label {
|
|
|
- display: block;
|
|
|
- font-size: 14px;
|
|
|
- font-weight: bold;
|
|
|
- color: #333;
|
|
|
- margin-bottom: 8px;
|
|
|
- }
|
|
|
- /* 文本输入区域 */
|
|
|
- .prompt-textarea {
|
|
|
- width: 100%;
|
|
|
- height: 150px;
|
|
|
- padding: 12px;
|
|
|
- border: 1px solid #ddd;
|
|
|
- border-radius: 8px;
|
|
|
- resize: vertical;
|
|
|
- font-size: 14px;
|
|
|
- line-height: 1.5;
|
|
|
- }
|
|
|
- /* 参数设置区域 */
|
|
|
- .params-grid {
|
|
|
- display: grid;
|
|
|
- grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
|
|
|
- gap: 15px;
|
|
|
- }
|
|
|
- .param-item {
|
|
|
- margin-bottom: 15px;
|
|
|
- }
|
|
|
- .param-item label {
|
|
|
- display: block;
|
|
|
- font-size: 13px;
|
|
|
- font-weight: bold;
|
|
|
- color: #333;
|
|
|
- margin-bottom: 5px;
|
|
|
- }
|
|
|
- .param-item select, .param-item input[type="number"] {
|
|
|
- width: 100%;
|
|
|
- padding: 8px 12px;
|
|
|
- border: 1px solid #ddd;
|
|
|
- border-radius: 4px;
|
|
|
- font-size: 14px;
|
|
|
- }
|
|
|
- /* 提示词示例 */
|
|
|
- .prompt-examples {
|
|
|
- background-color: #f8f9fa;
|
|
|
- border-radius: 8px;
|
|
|
- padding: 15px;
|
|
|
- margin-bottom: 20px;
|
|
|
- }
|
|
|
- .prompt-examples h4 {
|
|
|
- font-size: 14px;
|
|
|
- font-weight: bold;
|
|
|
- margin-bottom: 10px;
|
|
|
- color: #333;
|
|
|
- }
|
|
|
- .example-list {
|
|
|
- display: flex;
|
|
|
- flex-wrap: wrap;
|
|
|
- gap: 8px;
|
|
|
- }
|
|
|
- .example-tag {
|
|
|
- font-size: 12px;
|
|
|
- background-color: #e9ecef;
|
|
|
- color: #666;
|
|
|
- padding: 4px 10px;
|
|
|
- border-radius: 4px;
|
|
|
- cursor: pointer;
|
|
|
- transition: background-color 0.2s;
|
|
|
- }
|
|
|
- .example-tag:hover {
|
|
|
- background-color: #dee2e6;
|
|
|
- }
|
|
|
- /* 按钮样式 */
|
|
|
- .button-group {
|
|
|
- display: flex;
|
|
|
- gap: 10px;
|
|
|
- }
|
|
|
- .btn {
|
|
|
- padding: 12px 24px;
|
|
|
- border: none;
|
|
|
- border-radius: 8px;
|
|
|
- font-size: 14px;
|
|
|
- cursor: pointer;
|
|
|
- transition: background-color 0.2s;
|
|
|
- }
|
|
|
- .btn-primary {
|
|
|
- background-color: #007bff;
|
|
|
- color: #fff;
|
|
|
- }
|
|
|
- .btn-primary:hover {
|
|
|
- background-color: #0056b3;
|
|
|
- }
|
|
|
- .btn-secondary {
|
|
|
- background-color: #6c757d;
|
|
|
- color: #fff;
|
|
|
- }
|
|
|
- .btn-secondary:hover {
|
|
|
- background-color: #545b62;
|
|
|
- }
|
|
|
- /* 预览区域 */
|
|
|
- .preview-container {
|
|
|
- width: 100%;
|
|
|
- min-height: 300px;
|
|
|
- background-color: #f8f9fa;
|
|
|
- border-radius: 8px;
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- justify-content: center;
|
|
|
- margin-bottom: 20px;
|
|
|
- overflow: hidden;
|
|
|
- }
|
|
|
- .preview-image {
|
|
|
- max-width: 100%;
|
|
|
- max-height: 100%;
|
|
|
- object-fit: contain;
|
|
|
- }
|
|
|
- .preview-placeholder {
|
|
|
- font-size: 14px;
|
|
|
- color: #666;
|
|
|
- text-align: center;
|
|
|
- }
|
|
|
- /* 模板信息 */
|
|
|
- .template-info {
|
|
|
- margin-bottom: 20px;
|
|
|
- }
|
|
|
- .template-info h4 {
|
|
|
- font-size: 14px;
|
|
|
- font-weight: bold;
|
|
|
- margin-bottom: 10px;
|
|
|
- color: #333;
|
|
|
- }
|
|
|
- .template-form input {
|
|
|
- width: 100%;
|
|
|
- padding: 10px 12px;
|
|
|
- border: 1px solid #ddd;
|
|
|
- border-radius: 8px;
|
|
|
- font-size: 14px;
|
|
|
- margin-bottom: 10px;
|
|
|
- }
|
|
|
- /* 响应式设计 */
|
|
|
- @media (max-width: 768px) {
|
|
|
- .content-area {
|
|
|
- grid-template-columns: 1fr;
|
|
|
- }
|
|
|
- .clear-btn, .optimize-btn, .arrow-btn {
|
|
|
- flex: 1;
|
|
|
- }
|
|
|
- }
|
|
|
- .optimize-btn {
|
|
|
- background-color: #ffffff;
|
|
|
- color: #4b5563;
|
|
|
- padding: 10px 18px;
|
|
|
- border: 1px solid #d1d5db;
|
|
|
- border-radius: 8px;
|
|
|
- font-size: 14px;
|
|
|
- font-weight: 500;
|
|
|
- cursor: pointer;
|
|
|
- transition: all 0.3s ease;
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- gap: 6px;
|
|
|
- }
|
|
|
-
|
|
|
- .optimize-btn:hover {
|
|
|
- background-color: #f9fafb;
|
|
|
- border-color: #9ca3af;
|
|
|
- transform: translateY(-1px);
|
|
|
- }
|
|
|
- .clear-btn {
|
|
|
- background-color: #ffffff;
|
|
|
- color: #dc3545;
|
|
|
- border: 1px solid #f87171;
|
|
|
- border-radius: 8px;
|
|
|
- font-size: 14px;
|
|
|
- font-weight: 500;
|
|
|
- cursor: pointer;
|
|
|
- transition: all 0.3s ease;
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- gap: 6px;
|
|
|
- }
|
|
|
-
|
|
|
- .clear-btn:hover {
|
|
|
- background-color: #fee2e2;
|
|
|
- border-color: #ef4444;
|
|
|
- transform: translateY(-1px);
|
|
|
- }
|
|
|
- /* 操作按钮 */
|
|
|
- .prompt-actions {
|
|
|
- gap: 8px;
|
|
|
- }
|
|
|
-
|
|
|
- .clear-btn, .optimize-btn {
|
|
|
- padding: 8px 12px;
|
|
|
- font-size: 13px;
|
|
|
- }
|
|
|
-
|
|
|
- /* 菜单样式 */
|
|
|
- .menu-container {
|
|
|
- background-color: #f5f7fa;
|
|
|
- border-radius: 8px;
|
|
|
- padding: 10px;
|
|
|
- margin-bottom: 20px;
|
|
|
- display: flex;
|
|
|
- gap: 10px;
|
|
|
- }
|
|
|
-
|
|
|
- .menu-item {
|
|
|
- flex: 1;
|
|
|
- }
|
|
|
-
|
|
|
- .menu-item a {
|
|
|
- display: block;
|
|
|
- padding: 12px;
|
|
|
- background-color: white;
|
|
|
- border: 1px solid #e1e8ed;
|
|
|
- border-radius: 6px;
|
|
|
- text-align: center;
|
|
|
- text-decoration: none;
|
|
|
- color: #657786;
|
|
|
- font-size: 14px;
|
|
|
- font-weight: 500;
|
|
|
- transition: all 0.3s ease;
|
|
|
- }
|
|
|
-
|
|
|
- .menu-item a:hover {
|
|
|
- background-color: #e8f0fe;
|
|
|
- border-color: #1da1f2;
|
|
|
- color: #1da1f2;
|
|
|
- }
|
|
|
-
|
|
|
- .menu-item.active a {
|
|
|
- background-color: #1da1f2;
|
|
|
- border-color: #1da1f2;
|
|
|
- color: white;
|
|
|
- }
|
|
|
-
|
|
|
- .menu-item i {
|
|
|
- margin-right: 6px;
|
|
|
- font-size: 16px;
|
|
|
- }
|
|
|
- </style>
|
|
|
-</head>
|
|
|
-<body>
|
|
|
- <div class="container">
|
|
|
- <!-- 菜单功能区 -->
|
|
|
- <div class="menu-container">
|
|
|
- <div class="menu-item active">
|
|
|
- <a href="{:url('user/index')}">
|
|
|
- <i class="fas fa-image"></i>
|
|
|
- 文生图
|
|
|
- </a>
|
|
|
- </div>
|
|
|
- <div class="menu-item">
|
|
|
- <a href="{:url('user/text_to_video')}">
|
|
|
- <i class="fas fa-video"></i>
|
|
|
- 文生视频
|
|
|
- </a>
|
|
|
- </div>
|
|
|
-
|
|
|
- </div>
|
|
|
-
|
|
|
- <div class="content-area">
|
|
|
- <!-- 左侧输入区域 -->
|
|
|
- <div class="input-section">
|
|
|
- <h3 style="font-size: 18px; font-weight: bold; margin-bottom: 15px; color: #333;">文生图生成参数设置</h3>
|
|
|
-
|
|
|
- <!-- 提示词示例 -->
|
|
|
- <div class="prompt-examples">
|
|
|
- <label for="prompt">提示词</label>
|
|
|
- <textarea id="prompt" class="prompt-textarea" placeholder="请输入您想要生成的图像描述,越详细越好..."></textarea>
|
|
|
- </div>
|
|
|
-
|
|
|
- <!-- 生成参数 -->
|
|
|
- <div class="form-group">
|
|
|
- <label>生成参数</label>
|
|
|
- <div class="params-grid">
|
|
|
- <div class="param-item">
|
|
|
- <label for="style">风格</label>
|
|
|
- <select id="style">
|
|
|
- <option value="">默认</option>
|
|
|
- <option value="anime">动漫</option>
|
|
|
- <option value="oil">油画</option>
|
|
|
- <option value="landscape">风景</option>
|
|
|
- <option value="portrait">人像</option>
|
|
|
- </select>
|
|
|
- </div>
|
|
|
- <div class="param-item">
|
|
|
- <label for="imageSize">尺寸</label>
|
|
|
- <select id="imageSize">
|
|
|
- <option value="1:1">1:1</option>
|
|
|
- <option value="4:3">4:3</option>
|
|
|
- <option value="3:4">3:4</option>
|
|
|
- <option value="16:9">16:9</option>
|
|
|
- <option value="9:16">9:16</option>
|
|
|
- </select>
|
|
|
+<style>
|
|
|
+ .basicinfo {
|
|
|
+ margin: 15px 0;
|
|
|
+ }
|
|
|
+
|
|
|
+ .basicinfo .row > .col-xs-4 {
|
|
|
+ padding-right: 0;
|
|
|
+ }
|
|
|
+
|
|
|
+ .basicinfo .row > div {
|
|
|
+ margin: 5px 0;
|
|
|
+ }
|
|
|
+</style>
|
|
|
+<div id="content-container" class="container">
|
|
|
+ <div class="row">
|
|
|
+ <div class="col-md-9">
|
|
|
+ <div class="panel panel-default">
|
|
|
+ <div class="panel-body">
|
|
|
+ <h2 class="page-header">
|
|
|
+ {:__('Member center')}
|
|
|
+ <a href="{:url('user/profile')}" class="btn btn-primary pull-right"><i class="fa fa-pencil"></i> {:__('Profile')}</a>
|
|
|
+ </h2>
|
|
|
+ <div class="row user-baseinfo">
|
|
|
+ <div class="col-md-3 col-sm-3 col-xs-3 text-center user-center">
|
|
|
+ <a href="{:url('user/profile')}" title="{:__('Click to edit')}">
|
|
|
+ <span class="avatar-img"><img src="{$user.avatar|htmlentities|cdnurl}" alt=""></span>
|
|
|
+ </a>
|
|
|
+ </div>
|
|
|
+ <div class="col-md-9 col-sm-9 col-xs-9">
|
|
|
+ <div class="ui-content">
|
|
|
+ <h4><a href="{:url('user/profile')}">{$user.nickname|htmlentities}</a></h4>
|
|
|
+ <p class="text-muted">
|
|
|
+ {$user.bio|default=__("This guy hasn't written anything yet")|htmlentities}
|
|
|
+ </p>
|
|
|
</div>
|
|
|
</div>
|
|
|
- </div>
|
|
|
-
|
|
|
- <div class="button-group">
|
|
|
- <button class="clear-btn" onclick="clearPrompt()">
|
|
|
- <i class="fas fa-trash"></i>
|
|
|
- 清空
|
|
|
- </button>
|
|
|
- <button class="optimize-btn" onclick="optimizePrompt()">
|
|
|
- <i class="fas fa-magic"></i>
|
|
|
- 一键优化
|
|
|
- </button>
|
|
|
- <button class="btn btn-primary" id="generateBtn" onclick="generateImage()">
|
|
|
- <i class="fas fa-arrow-up"></i>
|
|
|
- 生成图像
|
|
|
- </button>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
|
|
|
- <!-- 右侧预览区域 -->
|
|
|
- <div class="preview-section">
|
|
|
- <h3 style="font-size: 18px; font-weight: bold; margin-bottom: 15px; color: #333;">图像预览</h3>
|
|
|
-
|
|
|
- <!-- 预览容器 -->
|
|
|
- <div id="imageResult" class="preview-container">
|
|
|
- <div class="preview-placeholder">
|
|
|
- <p>点击"生成图像"按钮开始创建您的模板</p>
|
|
|
- <p style="font-size: 12px; margin-top: 10px; color: #999;">生成时间可能需要几秒到几十秒不等</p>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
+ <div class="col-md-9 col-sm-9 col-xs-12">
|
|
|
+ <div class="ui-content">
|
|
|
+ <div class="basicinfo">
|
|
|
+ <div class="row">
|
|
|
+ <div class="col-xs-4 col-md-2">{:__('Money')}</div>
|
|
|
+ <div class="col-xs-8 col-md-4">
|
|
|
+ <a href="javascript:;" class="viewmoney">{$user.money}</a>
|
|
|
+ </div>
|
|
|
+ <div class="col-xs-4 col-md-2">{:__('Score')}</div>
|
|
|
+ <div class="col-xs-8 col-md-4">
|
|
|
+ <a href="javascript:;" class="viewscore">{$user.score}</a>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="row">
|
|
|
+ <div class="col-xs-4 col-md-2">{:__('Logintime')}</div>
|
|
|
+ <div class="col-xs-8 col-md-4">{$user.logintime|date="Y-m-d H:i:s",###}</div>
|
|
|
+ <div class="col-xs-4 col-md-2">{:__('Prevtime')}</div>
|
|
|
+ <div class="col-xs-8 col-md-4">{$user.prevtime|date="Y-m-d H:i:s",###}</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
|
|
|
- <!-- 模板信息 -->
|
|
|
- <div class="template-info">
|
|
|
- <h4>模板信息</h4>
|
|
|
- <div class="template-form">
|
|
|
- <input type="text" id="templateName" placeholder="请输入模板名称">
|
|
|
</div>
|
|
|
</div>
|
|
|
-
|
|
|
- <!-- 保存按钮 -->
|
|
|
- <div class="button-group">
|
|
|
- <button class="btn btn-primary" id="saveBtn" disabled onclick="saveTemplate()">保存为模板</button>
|
|
|
- <button class="btn btn-secondary" id="downloadBtn" disabled onclick="downloadImage()">下载图像</button>
|
|
|
- </div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
-
|
|
|
- <script>
|
|
|
- // 自定义提示框函数
|
|
|
- function showAlert(message, type = 'info', duration = 3000) {
|
|
|
- // 检查是否已存在提示框容器,如果不存在则创建
|
|
|
- let alertElement = document.getElementById('customAlert');
|
|
|
- if (!alertElement) {
|
|
|
- alertElement = document.createElement('div');
|
|
|
- alertElement.id = 'customAlert';
|
|
|
- alertElement.className = 'custom-alert';
|
|
|
- document.body.appendChild(alertElement);
|
|
|
- }
|
|
|
- alertElement.textContent = message;
|
|
|
- alertElement.className = `custom-alert ${type}`;
|
|
|
- // 显示提示框
|
|
|
- alertElement.classList.add('show');
|
|
|
- // 自动隐藏
|
|
|
- setTimeout(() => {
|
|
|
- alertElement.classList.remove('show');
|
|
|
- }, duration);
|
|
|
- }
|
|
|
-
|
|
|
- // 生成图片函数
|
|
|
- function generateImage() {
|
|
|
- const promptText = document.querySelector('.prompt-textarea').value.trim();
|
|
|
- const imageStyle = document.getElementById('style').value;
|
|
|
- const imageSize = document.getElementById('imageSize').value;
|
|
|
- const imageResultDiv = document.getElementById('imageResult');
|
|
|
-
|
|
|
- // 检查是否有提示词
|
|
|
- if (!promptText) {
|
|
|
- showAlert('请先输入图片描述', 'warning');
|
|
|
- return;
|
|
|
- }
|
|
|
-
|
|
|
- // 显示加载状态
|
|
|
- imageResultDiv.innerHTML = `
|
|
|
- <div class="image-loading">
|
|
|
- <i class="fas fa-spinner fa-spin"></i>
|
|
|
- <p>正在生成图片,请稍候...</p>
|
|
|
- <p style="font-size: 12px; margin-top: 10px; color: #999;">生成时间可能需要几秒到几十秒不等</p>
|
|
|
- </div>
|
|
|
- `;
|
|
|
-
|
|
|
- // 拼接风格和尺寸到提示词末尾
|
|
|
- let fullPrompt = promptText;
|
|
|
- if (imageStyle) {
|
|
|
- fullPrompt += '风格:' + imageStyle;
|
|
|
- }
|
|
|
- if (imageSize) {
|
|
|
- fullPrompt += '尺寸比例:' + imageSize;
|
|
|
- }
|
|
|
-
|
|
|
- // 发送请求到文生图接口
|
|
|
- $.ajax({
|
|
|
- url: '/index.php/api/work_order/GetTxtToImg',
|
|
|
- type: 'POST',
|
|
|
- dataType: 'json',
|
|
|
- data: {
|
|
|
- status_val: '文生图',
|
|
|
- prompt: fullPrompt,
|
|
|
- model: 'gemini-3-pro-image-preview',
|
|
|
- style: imageStyle,
|
|
|
- size: imageSize
|
|
|
- },
|
|
|
- success: function(response) {
|
|
|
- // 处理成功响应
|
|
|
- if (response.code === 0 && response.data && response.data.url) {
|
|
|
- // 显示生成的图片
|
|
|
- imageResultDiv.innerHTML = `
|
|
|
- <div class="image-container">
|
|
|
- <img src="${response.data.url}" alt="生成的图片" class="generated-image" id="previewImage" style="max-width: 100%; height: auto; max-height: 600px; cursor: pointer;">
|
|
|
- </div>
|
|
|
- `;
|
|
|
-
|
|
|
- // 启用下载和保存按钮
|
|
|
- document.getElementById('downloadBtn').disabled = false;
|
|
|
- document.getElementById('saveBtn').disabled = false;
|
|
|
-
|
|
|
- // 添加图片放大模态框(如果还不存在)
|
|
|
- if (!document.getElementById('imageModal')) {
|
|
|
- const modal = document.createElement('div');
|
|
|
- modal.id = 'imageModal';
|
|
|
- modal.style.cssText = `
|
|
|
- display: none;
|
|
|
- position: fixed;
|
|
|
- z-index: 9999;
|
|
|
- left: 0;
|
|
|
- top: 0;
|
|
|
- width: 100%;
|
|
|
- height: 100%;
|
|
|
- overflow: auto;
|
|
|
- background-color: rgba(0, 0, 0, 0.9);
|
|
|
- justify-content: center;
|
|
|
- align-items: center;
|
|
|
- `;
|
|
|
- modal.style.display = 'flex';
|
|
|
- modal.style.display = 'none';
|
|
|
-
|
|
|
- const modalContent = document.createElement('img');
|
|
|
- modalContent.id = 'modalImage';
|
|
|
- modalContent.style.cssText = `
|
|
|
- max-width: 90%;
|
|
|
- max-height: 90%;
|
|
|
- margin: auto;
|
|
|
- `;
|
|
|
-
|
|
|
- const closeBtn = document.createElement('span');
|
|
|
- closeBtn.innerHTML = '×';
|
|
|
- closeBtn.style.cssText = `
|
|
|
- position: absolute;
|
|
|
- top: 20px;
|
|
|
- right: 35px;
|
|
|
- color: #f1f1f1;
|
|
|
- font-size: 40px;
|
|
|
- font-weight: bold;
|
|
|
- transition: 0.3s;
|
|
|
- cursor: pointer;
|
|
|
- `;
|
|
|
-
|
|
|
- closeBtn.onclick = function() {
|
|
|
- modal.style.display = 'none';
|
|
|
- };
|
|
|
-
|
|
|
- modal.appendChild(closeBtn);
|
|
|
- modal.appendChild(modalContent);
|
|
|
- document.body.appendChild(modal);
|
|
|
-
|
|
|
- // 点击模态框背景关闭
|
|
|
- modal.onclick = function(event) {
|
|
|
- if (event.target.id === 'imageModal') {
|
|
|
- this.style.display = 'none';
|
|
|
- }
|
|
|
- };
|
|
|
- }
|
|
|
-
|
|
|
- // 为生成的图片添加点击事件
|
|
|
- const generatedImage = imageResultDiv.querySelector('.generated-image');
|
|
|
- generatedImage.onclick = function() {
|
|
|
- const modal = document.getElementById('imageModal');
|
|
|
- const modalImage = document.getElementById('modalImage');
|
|
|
- modalImage.src = this.src;
|
|
|
- modal.style.display = 'flex';
|
|
|
- };
|
|
|
-
|
|
|
- // 键盘ESC键关闭
|
|
|
- document.addEventListener('keydown', function(event) {
|
|
|
- if (event.key === 'Escape') {
|
|
|
- const modal = document.getElementById('imageModal');
|
|
|
- if (modal && modal.style.display === 'flex') {
|
|
|
- modal.style.display = 'none';
|
|
|
- }
|
|
|
- }
|
|
|
- });
|
|
|
- } else {
|
|
|
- // 显示错误信息
|
|
|
- imageResultDiv.innerHTML = `
|
|
|
- <div class="image-error">
|
|
|
- <i class="fas fa-exclamation-triangle"></i>
|
|
|
- <p>图片生成失败:${response.msg || '未知错误'}</p>
|
|
|
- </div>
|
|
|
- `;
|
|
|
- }
|
|
|
- },
|
|
|
- error: function(xhr, status, error) {
|
|
|
- // 处理网络错误
|
|
|
- imageResultDiv.innerHTML = `
|
|
|
- <div class="image-error">
|
|
|
- <i class="fas fa-exclamation-triangle"></i>
|
|
|
- <p>图像生成失败</p>
|
|
|
- </div>
|
|
|
- `;
|
|
|
- }
|
|
|
- });
|
|
|
- }
|
|
|
-
|
|
|
- // 一键优化提示词功能
|
|
|
- function optimizePrompt() {
|
|
|
- const textarea = document.querySelector('.prompt-textarea');
|
|
|
- const optimizeBtn = document.querySelector('.optimize-btn');
|
|
|
-
|
|
|
- if (textarea && textarea.value.trim() !== '') {
|
|
|
- // 显示加载状态
|
|
|
- const originalBtnText = optimizeBtn.innerHTML;
|
|
|
- optimizeBtn.innerHTML = '<i class="fas fa-spinner fa-spin"></i> 优化中...';
|
|
|
- optimizeBtn.disabled = true;
|
|
|
-
|
|
|
- // 构造请求参数
|
|
|
- const params = {
|
|
|
- status_val: '文生文',
|
|
|
- prompt: textarea.value,
|
|
|
- model: 'gemini-2.0-flash'
|
|
|
- };
|
|
|
-
|
|
|
- // 发送AJAX请求
|
|
|
- $.ajax({
|
|
|
- url: '/index.php/api/work_order/GetTxtToTxt',
|
|
|
- type: 'POST',
|
|
|
- data: params,
|
|
|
- dataType: 'json',
|
|
|
- success: function(data) {
|
|
|
- console.log(data);
|
|
|
- // 恢复按钮状态
|
|
|
- optimizeBtn.innerHTML = originalBtnText;
|
|
|
- optimizeBtn.disabled = false;
|
|
|
-
|
|
|
- // 优化成功,更新文本框内容
|
|
|
- textarea.value = data.content;
|
|
|
- textarea.scrollTop = textarea.scrollHeight;
|
|
|
- updateCharCount();
|
|
|
-
|
|
|
- // 显示优化成功提示
|
|
|
- const alert = document.createElement('div');
|
|
|
- alert.className = 'alert alert-success';
|
|
|
- alert.innerHTML = '提示词已优化!';
|
|
|
- alert.style.position = 'fixed';
|
|
|
- alert.style.top = '20px';
|
|
|
- alert.style.right = '20px';
|
|
|
- alert.style.zIndex = '9999';
|
|
|
- document.body.appendChild(alert);
|
|
|
-
|
|
|
- // 3秒后移除提示
|
|
|
- setTimeout(() => {
|
|
|
- alert.remove();
|
|
|
- }, 3000);
|
|
|
-
|
|
|
- }
|
|
|
- });
|
|
|
- } else {
|
|
|
- showAlert('请先输入提示词!', 'warning');
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- // 清空提示词功能
|
|
|
- function clearPrompt() {
|
|
|
- const textarea = document.querySelector('.prompt-textarea');
|
|
|
- if (textarea) {
|
|
|
- textarea.value = '';
|
|
|
- textarea.focus();
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
-
|
|
|
- // 保存模板函数
|
|
|
- function saveTemplate() {
|
|
|
- // 获取所有需要的参数
|
|
|
- const templateName = document.getElementById('templateName').value;
|
|
|
- const prompt = document.getElementById('prompt').value.trim();
|
|
|
- const style = document.getElementById('style').value;
|
|
|
- const imageSize = document.getElementById('imageSize').value;
|
|
|
- const previewImage = document.getElementById('previewImage');
|
|
|
-
|
|
|
- // 验证必填项
|
|
|
- if (!templateName.trim()) {
|
|
|
- showAlert('请输入模板名称', 'error');
|
|
|
- return;
|
|
|
- }
|
|
|
-
|
|
|
- if (!prompt) {
|
|
|
- showAlert('请输入提示词', 'error');
|
|
|
- return;
|
|
|
- }
|
|
|
-
|
|
|
- if (!previewImage || !previewImage.src) {
|
|
|
- showAlert('请先生成图片', 'error');
|
|
|
- return;
|
|
|
- }
|
|
|
-
|
|
|
- // 准备请求参数
|
|
|
- // 将完整URL转换为相对路径
|
|
|
- let imageUrl = previewImage.src;
|
|
|
- try {
|
|
|
- const url = new URL(imageUrl);
|
|
|
- imageUrl = url.pathname;
|
|
|
- } catch (e) {
|
|
|
- // 如果已经是相对路径,直接使用
|
|
|
- }
|
|
|
-
|
|
|
- const params = {
|
|
|
- chinese_description: prompt,
|
|
|
- template_image_url: imageUrl,
|
|
|
- template_name: templateName,
|
|
|
- style: style,
|
|
|
- size: imageSize,
|
|
|
- type: '文生图' // 固定为文生图类型
|
|
|
- };
|
|
|
-
|
|
|
- // 显示加载状态
|
|
|
- const saveBtn = document.getElementById('saveBtn');
|
|
|
- const originalText = saveBtn.innerHTML;
|
|
|
- saveBtn.innerHTML = '<i class="fas fa-spinner fa-spin"></i> 保存中...';
|
|
|
- saveBtn.disabled = true;
|
|
|
-
|
|
|
- // 发送AJAX请求
|
|
|
- $.ajax({
|
|
|
- url: '/index.php/api/work_order/Add_Product_Template',
|
|
|
- type: 'POST',
|
|
|
- dataType: 'json',
|
|
|
- data: params,
|
|
|
- success: function(response) {
|
|
|
- if (response.code === 0) {
|
|
|
- showAlert('模板保存成功!', 'success');
|
|
|
- // 清空模板名称输入框
|
|
|
- document.getElementById('templateName').value = '';
|
|
|
- } else {
|
|
|
- showAlert('模板保存失败:' + (response.msg || '未知错误'), 'error');
|
|
|
- }
|
|
|
- },
|
|
|
- error: function(xhr, status, error) {
|
|
|
- console.error('AJAX请求失败:', error);
|
|
|
- showAlert('网络错误,模板保存失败', 'error');
|
|
|
- },
|
|
|
- complete: function() {
|
|
|
- // 恢复按钮状态
|
|
|
- saveBtn.innerHTML = originalText;
|
|
|
- saveBtn.disabled = false;
|
|
|
- }
|
|
|
- });
|
|
|
- }
|
|
|
-
|
|
|
- // 下载图像函数
|
|
|
- function downloadImage() {
|
|
|
- const previewImage = document.getElementById('previewImage');
|
|
|
- if (previewImage && previewImage.src) {
|
|
|
- // 创建临时链接下载图片
|
|
|
- const link = document.createElement('a');
|
|
|
- link.href = previewImage.src;
|
|
|
-
|
|
|
- // 生成更有意义的文件名
|
|
|
- const timestamp = new Date().getTime();
|
|
|
- const promptText = document.querySelector('.prompt-textarea').value.trim();
|
|
|
- // 从提示词中提取前20个字符作为文件名的一部分
|
|
|
- const promptPart = promptText.substring(0, 20).replace(/[^\w\u4e00-\u9fa5]/g, '') || 'image';
|
|
|
- // 组合文件名:提示词部分_时间戳.jpg
|
|
|
- const fileName = `${promptPart}_${timestamp}.jpg`;
|
|
|
-
|
|
|
- link.download = fileName;
|
|
|
- link.click();
|
|
|
- }
|
|
|
- }
|
|
|
- </script>
|
|
|
-</body>
|
|
|
-</html>
|
|
|
+</div>
|