'commit'

1 year ago · c496f0918a
parent 516465ad49
commit c496f0918a
4 changed files with 2 additions and 767 deletions
--- a/QingLong/WebRoot/AdminUploadImage.html
+++ b/QingLong/WebRoot/AdminUploadImage.html
@ -1,206 +0,0 @@
 <!DOCTYPE html>
 <html>
 <head>
    <meta charset="utf-8">
    <title>图片上传示例</title>
    <link rel="stylesheet" href="./component/layui/css/layui.css" media="all">
    <style>
        .upload-area {
            margin: 20px 0;
        }
        /* 添加到你的样式表中 */
        .delete-button {
            display: block; /* 使按钮宽度填满其容器 */
            margin-top: 10px; /* 按钮与图片之间的间距 */
            padding: 8px 16px;
            font-size: 14px; /* 根据需要调整字体大小 */
            color: #fff; /* 文字颜色 */
            background-color: #f44336; /* 背景颜色 */
            border: none; /* 无边框 */
            border-radius: 4px; /* 圆角边框 */
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); /* 阴影效果 */
            cursor: pointer; /* 鼠标悬停时显示手形图标 */
            transition: all 0.3s ease; /* 平滑过渡效果 */
        }
        .delete-button:hover {
            background-color: #e53935; /* 鼠标悬停时的背景颜色 */
        }
        /* 父元素的样式 */
        .ew-datagrid-item {
            display: flex;
            justify-content: center; /* 水平居中 */
            align-items: center; /* 垂直居中 */
            /* 其他样式... */
        }
        .project-list-item {
            display: flex;
            flex-direction: column; /* 设置为垂直布局 */
            align-items: center; /* 水平居中 */
            margin-bottom: 10px; /* 根据需要添加底部外边距 */
        }
        .project-list-item-cover {
            cursor: pointer; /* 当鼠标悬停在图片上时显示小手形状 */
            /* 其他样式... */
        }
        /* 自定义关闭按钮的样式 */
        .layui-layer-title {
            background-color: #333; /* 标题栏背景色 */
            color: #fff; /* 标题栏文字颜色 */
        }
        /* 增强关闭按钮的可见性 */
        .layui-layer-close1 {
            color: #fff; /* 关闭按钮文字颜色 */
            text-shadow: none; /* 取消文字阴影 */
        }
        .layui-layer-close1:hover {
            color: #f00; /* 鼠标悬停时关闭按钮文字颜色 */
        }
    </style>
 </head>
 <body>
 <div class="upload-area">
    <form class="layui-form" action="/upload" method="post" enctype="multipart/form-data">
        <div class="layui-form-item">
            <label class="layui-form-label">上传图片:</label>
            <div class="layui-input-inline">
                <button type="button" class="layui-btn" id="uploadImage">
                    <i class="layui-icon">&#xe67c;</i>上传图片
                </button>
            </div>
        </div>
    </form>
 </div>
 <div class="layui-row layui-col-space10">
    <div class="layui-col-md12">
        <div class="layui-card">
            <div class="layui-card-body">
                <fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
                    <legend>图片列表</legend>
                </fieldset>
                <div class="layui-row layui-col-space30" style="height: 300px; overflow:auto" id="LAY_Images">
                </div>
            </div>
        </div>
    </div>
 </div>
 <script src="./component/layui/layui.js"></script>
 <script>
    layui.use(['form', 'upload', 'jquery'], function () {
        var form = layui.form;
        var upload = layui.upload;
        var $ = layui.jquery;
        //放大图片
        function ImgClick(obj) {
            var img_url = obj.src.split("?")[0];
            var id = obj.id;
            window.location.href = 'ManageImg.html?img_url=' + img_url + '&id=' + id;
        }
        //删除图片
        function deleteImg(id, img_url) {
            // 弹出确认框
            layer.confirm('确定要删除这个图片吗？', {
                title: '提示'
                , btn: ['确定', '取消'] // 按钮
                , icon: 3 // 图标
            }, function (index) {
                //删除
                $.ajax({
                    type: "POST",
                    url: "/QingLong/HuiYa/AdminDeleteInputImage",
                    dataType: 'json',
                    data: {
                        "id": id
                    },
                    async: false,
                    success: function (res) {
                        // 假设删除成功后，可以在这里做一些UI上的反馈，如提示用户删除成功
                        layer.msg('删除成功！', {icon: 1});
                        // 关闭确认框
                        layer.close(index);
                        // 刷新
                        AdminImageList();
                    }
                });
            }, function (index) {
                // 关闭确认框
                layer.close(index);
            });
        }
        function AdminImageList() {
            $.ajax({
                type: "GET",
                url: "/QingLong/HuiYa/AdminImageList",
                async: false,
                success: function (data) {
                    $("#LAY_Images").empty();
                    $.each(data, function (index, item) {
                        $("#LAY_Images").append(
                            "<div class='layui-col-md2 ew-datagrid-item'>" +
                            "<div class='project-list-item'>" +
                            "<img class='project-list-item-cover' id='" + item.id + "' src='" + item.img_url + "?x-oss-process=image/resize,w_362,limit_0" + "' />" +
                            "<button class='delete-button' id='" + item.id + "' data-img-url='" + item.img_url + "'>删除</button>" +
                            "</div>" +
                            "</div>"
                        );
                    });
                    // 使用事件委托为图片和删除按钮绑定事件
                    $("#LAY_Images").on('click', '.project-list-item-cover', function () {
                        ImgClick(this);
                    }).on('click', '[data-img-url]', function () {
                        var imgUrl = $(this).data('img-url');
                        var id = $(this).attr('id');
                        deleteImg(id, imgUrl);
                    });
                    // 如果需要，重新渲染 Layui 组件
                    form.render(); // 确保调用正确的 Layui 方法
                }
            });
        }
        AdminImageList();
        // 图片上传配置
        var uploadImage = upload.render({
            elem: '#uploadImage' // 绑定元素
            , multiple: true
            , url: '/QingLong/HuiYa/AdminUpload' // 上传接口
            , accept: 'file' //普通文件
            , number: 10//上传个数
            , acceptMime: 'image/jpeg, image/png'
            , exts: 'jpg|png|bmp|jpeg' //只允许上传压缩文件
            , done: function (res) { // 上传成功后的回调
                AdminImageList();
            }
            , error: function () {
                // 请求异常回调
            }
        });
        // 监听提交
        form.on('submit(upload)', function (data) {
            // 发送数据到服务器
            // 这里需要根据实际情况调整，例如使用AJAX发送表单数据
            //console.log(data.field); // 表单数据
            AdminImageList();
            return false; // 阻止表单跳转
        });
    });
 </script>
 </body>
 </html>
--- a/QingLong/WebRoot/ManageImg.html
+++ b/QingLong/WebRoot/ManageImg.html
@ -1,140 +0,0 @@
 <!DOCTYPE html>
 <html>
 <head>
    <meta charset="utf-8">
    <title>绘鸭AI相机演示效果图</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            list-style-type: none;
        }
        a, img {
            border: 0;
        }
        a {
            color: #000;
            text-decoration: none;
        }
        a:hover {
            color: #F60 !important;
            text-decoration: none;
        }
        body {
            font: 12px/180% Arial, Helvetica, sans-serif, "新宋体";
        }
        .iframe, html, body {
            width: 100%;
            height: 100%;
            border: none;
        }
        /* jump */
        #jump {
            position: fixed;
            top: 300px;
            right: 30px;
            width: 40px;
            z-index: 400;
        }
        * html #jump {
            position: absolute;
            top: expression(documentElement.scrollTop + "px");
            margin: 300px 0 0 0;
        }
        #jump li {
            height: 50px;
            overflow: hidden;
        }
        #top, #historyback, #locationreload,
        #weixin {
            display: block;
            width: 40px;
            height: 42px;
            overflow: hidden;
            cursor: pointer;
        }
        #top {
            background: url(./images/top.png) no-repeat;
        }
        #historyback {
            background: url(./images/back.png) no-repeat;
        }
        #top:hover {
            background: url(./images/toped.png) no-repeat;
        }
        #historyback:hover {
            background: url(./images/backd.png) no-repeat;
        }
        #locationreload {
            background: url(./images/ceping.png) no-repeat;
        }
        #locationreload:hover {
            background: url(./images/cepinged.png) no-repeat;
        }
        #EWM img {
            width: 150px;
            height: 150px;
        }
    </style>
    <!--引用Jquery-->
    <script src="./component/jquery-3.5.1.min.js"></script>
 </head>
 <body>
 <iframe src="" class="iframe" id="iframe1"></iframe>
 <ul id="jump">
    <li style="display: none;"><a id="top" href="#top"></a></li>
    <li><a id="historyback" href="#" target="_blank" onclick="history.back();return false;"></a></li>
    <li><a id="locationreload" href="" target="_blank"
           onclick="document.getElementById('iframe1').contentWindow.location.reload();;return false;"></a></li>
 </ul>
 <script type="text/javascript">
    $(document).ready(function () {
        const params = new URLSearchParams(window.location.search);
        var source_img_url = params.get('img_url'); // 获取 param1 的值
        var id = params.get('id');
        if (id == null) {
            id = "1";
        }
        //系统用户默认图像
        if (source_img_url == null) {
            source_img_url = "http://hzkc.oss-cn-beijing.aliyuncs.com/Images/Upload/mote.png";
        }
        document.getElementById("iframe1").src = "ManageImgImpl.html?img_url=" + source_img_url + "&id=" + id;
        $(window).scroll(function () {
            if ($(window).scrollTop() > 300) {
                $('#jump li:eq(0)').fadeIn(800);
            } else {
                $('#jump li:eq(0)').fadeOut(800);
            }
        });
        $("#top").click(function () {
            $('body,html').animate({
                    scrollTop: 0
                },
                1000);
            return false;
        });
    });
 </script>
 </body>
 </html>
--- a/QingLong/WebRoot/ManageImgImpl.html
+++ b/QingLong/WebRoot/ManageImgImpl.html
@ -1,419 +0,0 @@
 <!DOCTYPE html>
 <html>
 <head>
    <meta charset="utf-8">
    <title>绘鸭AI相机演示效果图</title>
    <link rel="stylesheet" href="./component/layui/css/layui.css" media="all">
    <style>
        .gallery-item {
            display: inline-block;
            vertical-align: top;
            text-align: center;
        }
        img {
            margin: 0 5px; /* 上下0像素，左右5像素 */
        }
        .layui-card-body img {
            width: 150px; /* 缩略图的宽度 */
            height: auto;
            cursor: pointer;
        }
        .model-name,
        .model-star,
        .model-memo {
            font-size: 20px;
            font-weight: bold;
        }
        .layui-layer-photos img {
            max-width: 100%; /* 确保图片不会超出弹出窗口的宽度 */
            max-height: 100%; /* 确保图片不会超出弹出窗口的高度 */
        }
        .image-container {
            position: relative;
            display: inline-block;
        }
        .image-container img {
            display: block; /* 使图片宽度自动适应容器宽度 */
            width: 100%; /* 或者指定具体宽度，如 max-width: 300px; */
            max-width: 100%; /* 确保图片不会超出容器 */
            height: auto;
        }
        .delete-button {
            position: absolute; /* 绝对定位相对于.image-container */
            top: 2px; /* 距离图片顶部10px */
            right: 2px; /* 距离图片右侧10px */
            cursor: pointer;
            background-color: red;
            color: white;
            border: none;
            border-radius: 5px;
            padding: 5px 10px;
            font-size: 14px;
        }
        .delete-button:hover {
            background-color: darkred;
        }
        .cover-button {
            position: absolute; /* 绝对定位相对于.image-container */
            top: 2px; /* 距离图片顶部10px */
            right: 60px; /* 距离图片右侧10px */
            cursor: pointer;
            background-color: burlywood;
            color: white;
            border: none;
            border-radius: 5px;
            padding: 5px 10px;
            font-size: 14px;
        }
        .cover-selected-button {
            position: absolute; /* 绝对定位相对于.image-container */
            top: 2px; /* 距离图片顶部10px */
            right: 60px; /* 距离图片右侧10px */
            cursor: pointer;
            background-color: greenyellow;
            color: white;
            border: none;
            border-radius: 5px;
            padding: 5px 10px;
            font-size: 14px;
        }
        .cover-button:hover {
            background-color: darkorange;
        }
        .addTask-button {
            top: 2px; /* 距离图片顶部10px */
            right: 2px; /* 距离图片右侧10px */
            cursor: pointer;
            background-color: orange;
            color: white;
            border: none;
            border-radius: 5px;
            padding: 5px 10px;
            font-size: 14px;
        }
        .addTask-button:hover {
            background-color: darkorange;
        }
    </style>
    <!--引用Jquery-->
    <script src="./component/jquery-3.5.1.min.js"></script>
 </head>
 <body>
 <div class="layui-container" id="galleryContainer">
 </div>
 <script src="./component/layui/layui.js" charset="utf-8"></script>
 <script>
    const params = new URLSearchParams(window.location.search);
    var source_img_url = params.get('img_url'); // 获取 param1 的值
    //系统用户默认图像
    if (source_img_url == null) {
        source_img_url = "http://hzkc.oss-cn-beijing.aliyuncs.com/Images/Upload/mote.png";
    }
    // 系统用户ID
    var user_id = "16380C30-B1EA-4BFF-B5E6-4F3928CE36F3";
    // 用户的分类代号
    var task_type_code = "System"
    //用户分类的ID
    var task_type_id = 1;
    //生成一张
    function addImage(model_id, count) {
        $.ajax({
            type: "POST",
            url: "/QingLong/HuiYa/AdminAddImage",
            dataType: 'json',
            data: {
                "model_id": model_id,
                "user_id": user_id,
                "source_img_url": source_img_url,
                "count": count,
                "task_type_id": task_type_id,
                "task_type_code": task_type_code
            },
            async: false,
            success: function (res) {
                layer.msg('任务创建成功！', {icon: 1, time: 2000}, function () {
                    location.reload(true);
                });
            }
        });
    }
    //删除图片
    function deleteImage(button, id) {
        // 找到按钮所在的图片容器
        var container = button.parentNode;
        // 调用layer.confirm创建确认框
        layer.confirm('您确定要删除掉这张图片吗？', {
            title: '删除确认',
            btn: ['确定', '取消'], // 按钮
            icon: 3, // 弹层中图标，这里使用了一个问号图标
        }, function (index) {
            // 确定按钮的回调函数
            layer.close(index); // 关闭确认框
            // 从DOM中移除图片容器
            container.remove();
            //删除
            $.ajax({
                type: "POST",
                url: "/QingLong/HuiYa/AdminDeleteImage",
                dataType: 'json',
                data: {
                    "id": id
                },
                async: false,
                success: function (res) {
                    // 假设删除成功后，可以在这里做一些UI上的反馈，如提示用户删除成功
                    layer.msg('删除成功！', {icon: 1},function (){
                        // 刷新本页面
                        location.reload(true);
                    });
                }
            });
        }, function (index) {
            // 取消按钮的回调函数
            layer.close(index); // 关闭确认框
        });
    }
    //设置封面
    function setCover(button, id) {
        // 调用layer.confirm创建确认框
        layer.confirm('您确定要设置这张图片成为此模型封面吗？', {
            title: '确认',
            btn: ['确定', '取消'], // 按钮
            icon: 3, // 弹层中图标，这里使用了一个问号图标
        }, function (index) {
            // 确定按钮的回调函数
            layer.close(index); // 关闭确认框
            // 从DOM中移除图片容器
            // container.remove();
            // 设置封面
            $.ajax({
                type: "POST",
                url: "/QingLong/HuiYa/AdminSetCover",
                dataType: 'json',
                data: {
                    "id": id
                },
                async: false,
                success: function (res) {
                    // 假设成功后，可以在这里做一些UI上的反馈，如提示用户删除成功
                    layer.msg('设置成功！', {icon: 1},function (){
                        // 刷新本页面
                        location.reload(true);
                    });
                }
            });
        }, function (index) {
            // 取消按钮的回调函数
            layer.close(index); // 关闭确认框
        });
    }
    layui.use(['laytpl', 'layer'], function () {
        var laytpl = layui.laytpl;
        var $ = layui.$;
        var layer = layui.layer;
        var data;
        function render() {
            // 模拟从服务器获取数据
            $.ajax({
                type: "GET",
                url: "/QingLong/HuiYa/AdminGetData?page=1&limit=100&source_img_url=" + source_img_url,
                async: false,
                success: function (res) {
                    data = res.data;
                    var row = {};
                    //第一行
                    row['model_id'] = 0;
                    row['update_time'] = "2024-05-13 00:00:00";
                    row['model_name'] = "模拟用户上传人像";
                    row['star'] = 0;
                    row['img_count'] = 0;
                    row['memo'] = "【半身】";
                    row['img_list'] = [];
                    var record = {};
                    record['img_url'] = source_img_url;
                    record['img_url_preview'] = source_img_url + "?x-oss-process=image/resize,w_362,limit_0";
                    record['sort_id'] = 0;
                    record['id'] = 0;
                    record['hidden'] = 1;
                    row['img_list'].push(record);
                    data.unshift(row);
                    renderGallery(data);
                }
            });
        }
        render();
        function renderGallery(items) {
            var galleryHtml = '<div class="gallery-row">'; // 开始新的一行
            galleryHtml += items.map(renderImages).join('');
            galleryHtml += '</div>'; // 结束这一行
            $('#galleryContainer').html(galleryHtml);
            bindImgClickEvent();
        }
        function renderImages(item) {
            var imgListHtml = item.img_list.map(function (img) {
                if (img.img_url == undefined || img.img_url == null || img.img_url.length == 0) {
                    img.img_url = 'http://hzkc.oss-cn-beijing.aliyuncs.com/Images/System/loading.png';
                    img.img_url_preview = 'http://hzkc.oss-cn-beijing.aliyuncs.com/Images/System/loading.png?x-oss-process=image/resize,w_362,limit_0';
                }
                if (item.model_id > 0) {
                    if (img.is_cover == 0) {
                        return `<div class="image-container">
                            <img src="${img.img_url_preview}" alt="Image" data-full="${img.img_url}" />
                            <button class="cover-button" onclick="setCover(this,'${img.id}')">封面</button>
                            <button class="delete-button" onclick="deleteImage(this,'${img.id}')">删除</button>
                            </div>
                            `;
                    } else {
                        return `<div class="image-container">
                            <img src="${img.img_url_preview}" alt="Image" data-full="${img.img_url}" />
                            <button class="cover-selected-button" onclick="setCover(this,'${img.id}')">封面</button>
                            <button class="delete-button" onclick="deleteImage(this,'${img.id}')">删除</button>
                        </div>
                        `;
                    }
                } else {
                    return `<div class="image-container">
                    <img src="${img.img_url_preview}" alt="Image" data-full="${img.img_url}" />
                </div>
                `;
                }
            }).join('');
            if (item.model_id > 0) {
                if (item.model_type_id == 1) {
                    item.mode_type_name = 'WEBUI';
                    return `
                <div class="gallery-item">
                    <div class="layui-card">
                        <div class="layui-card-header">
                            <span class="model-name">编号：${item.model_id}</span>
                            <span class="model-name">名称：${item.model_name}</span>
                            <span class="model-star">星值：${item.star}</span>
                            <span class="model-name">类型：${item.mode_type_name}</span>
                            <button class="addTask-button" onclick="addImage(${item.model_id},1)">生成1张</button>
                            <button class="addTask-button" onclick="addImage(${item.model_id},2)">生成2张</button>
                            <button class="addTask-button" onclick="addImage(${item.model_id},3)">生成3张</button>
                        </div>
                        <div class="layui-card-body">
                            ${imgListHtml}
                        </div>
                    </div>
                </div>
            `;
                } else {
                    if (item.model_type_id == 2) {
                        item.mode_type_name = 'ComfyUI';
                    }
                    if (item.model_type_id == 3) {
                        item.mode_type_name = 'Midjourney';
                    }
                    return `
                <div class="gallery-item">
                    <div class="layui-card">
                        <div class="layui-card-header">
                            <span class="model-name">编号：${item.model_id}</span>
                            <span class="model-name">名称：${item.model_name}</span>
                            <span class="model-star">星值：${item.star}</span>
                            <span class="model-name">类型：${item.mode_type_name}</span>
                            <button class="addTask-button" onclick="addImage(${item.model_id},1)">生成1张</button>
                        </div>
                        <div class="layui-card-body">
                            ${imgListHtml}
                        </div>
                    </div>
                </div>
            `;
                }
            } else {
                return `
                <div class="gallery-item">
                    <div class="layui-card">
                        <div class="layui-card-header">
                            <span class="model-name">模板：${item.model_name}</span>
                            <span class="model-star">星值：${item.star}</span>
                        </div>
                        <div class="layui-card-body">
                            ${imgListHtml}
                        </div>
                    </div>
                </div>
            `;
            }
        }
        function lookPicture(resourcesUrl) {
            // resourcesUrl：接受的图片地址，resourcesType之前定义的数据类型（可省略）
            if (resourcesUrl == "") {
                layer.msg("没有发现图片！");
                return;
            }
            var img = new Image();
            img.onload = function () {//避免图片还未加载完成无法获取到图片的大小。
                //避免图片太大，导致弹出展示超出了网页显示访问，所以图片大于浏览器时下窗口可视区域时，进行等比例缩小。
                var max_height = $(window).height() - 100;
                var max_width = $(window).width();
                //rate1，rate2，rate3 三个比例中取最小的。
                var rate1 = max_height / img.height;
                var rate2 = max_width / img.width;
                var rate3 = 1;
                var rate = Math.min(rate1, rate2, rate3);
                //等比例缩放
                var imgHeight = img.height * rate; //获取图片高度
                var imgWidth = img.width * rate; //获取图片宽度
                var imgHtml = "<img src='" + resourcesUrl + "' width='" + imgWidth + "px' height='" + imgHeight + "px'/>";
                //弹出层
                layer.open({
                    type: 1,//可传入的值有：0（信息框，默认）1（页面层）2（iframe层）3（加载层）4（tips层）
                    shade: 0.6,
                    maxmin: true,
                    anim: 1,
                    title: '图片预览',
                    area: ['auto', 'auto'],
                    // skin: 'layui-layer-nobg', //没有背景色
                    shadeClose: true,
                    content: imgHtml
                });
            }
            img.src = resourcesUrl;
        }
        // 绑定缩略图的点击事件
        function bindImgClickEvent() {
            $('.gallery-item img').on('click', function () {
                var fullImgSrc = $(this).data('full');
                lookPicture(fullImgSrc);
            });
        }
    });
 </script>
 </body>
 </html>
--- a/QingLong/src/main/java/com/dsideal/QingLong/HuiYa/Model/HuiYaModel.java
+++ b/QingLong/src/main/java/com/dsideal/QingLong/HuiYa/Model/HuiYaModel.java
@ -417,7 +417,7 @@ public class HuiYaModel {
    public String getImgByModelPrompt(int model_id, int prompt_id, boolean is_thumb) {
        String url = "http://hzkc.oss-cn-beijing.aliyuncs.com/Images/System/" + model_id + "/" + prompt_id + ".png";
-        if (is_thumb) url += "?x-oss-process=image/resize,w_362,limit_0";
+        if (is_thumb) url += "?x-oss-process=image/resize,w_512,limit_0";
        return url;
    }
@ -425,7 +425,7 @@ public class HuiYaModel {
        Record r = new Record();
        r.set("prompt_id", prompt_id);
        String img_url = "http://hzkc.oss-cn-beijing.aliyuncs.com/Images/System/" + model_id + "/" + prompt_id + ".png";
-        r.set("img_url_thumb", img_url + "?x-oss-process=image/resize,w_362,limit_0" + "&r=" + UUID.randomUUID());
+        r.set("img_url_thumb", img_url + "?x-oss-process=image/resize,w_512,limit_0" + "&r=" + UUID.randomUUID());
        r.set("img_url", img_url);
        return r;
    }