master

分支 (1)

管理

管理

master

fe_aigc_text_to_image
/
index.html

<!DOCTYPE html>
<html lang="zh-cn">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>aigc-文字生成图片</title>
    <!-- zui -->
    <link href="zui/css/zui.min.css" rel="stylesheet">
    <link href="css/main.css" rel="stylesheet">
</head>

<body>
    <h1 style="text-align: center">aigc-文字生成图片</h1>
    <hr>

    <div class="container">
        <div>
            <form class="form-horizontal" id="promptForm">
                <div class="form-group">
                    <label for="prompt" class="col-sm-2">描述文字</label>
                    <div class="col-md-6 col-sm-10">
                        <textarea class="form-control" id="prompt" name="prompt" placeholder="请输入描述"></textarea>
                    </div>
                </div>
                <div class="form-group">
                    <label for="style_id" class="col-sm-2">风格</label>
                    <div class="col-sm-3">
                        <select class="form-control" name="style_id" id="style_id">
                            <option value="1">默认</option>
                            <option value="2">二次元</option>
                            <option value="3">唯美二次元</option>
                            <option value="4">真人</option>
                            <option value="5">中国古风</option>
                            <option value="6">国风</option>
                            <option value="7">多彩阳间风</option>
                        </select>
                    </div>
                </div>
                <div class="form-group">
                    <div class="col-sm-offset-2 col-sm-10">
                        <button type="button" id="btn" class="btn btn-default">生成</button>
                        <div data-loading="正在处理..." class="load-indicator loading"
                            style="width: 100px; height: 100px; background: #eee; margin-bottom: 10px;display: none"
                            id="loadIndicator1"></div>
                    </div>
                </div>
            </form>
        </div>

        <div>
            <p>
            <h1 class="text-center">生成图片列表</h1>
            </p>
            <div class="cards">
                <!-- <div class="col-md-4 col-sm-6 col-lg-3">
                    <div class="card ">
                        <img src="images/rain.png" class="img-responsive" alt=">图片">
                    </div>
                </div> -->
            </div>
        </div>
    </div>
    <script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
    <!-- ZUI Javascript组件 -->
    <script src="zui/js/zui.min.js"></script>

    <script>
        $(function () {

            $("#btn").click(function () {
                $("#btn").hide();
                $('#loadIndicator1').show();
                var prompt = $('#prompt').val().trim();
                if (prompt == "" || prompt.length > 128) {
                    alert('描述错误,请修改');
                    return false;
                }
                var style_id = $('#style_id').val();
                if (style_id < 1 || style_id > 7) {
                    alert('风格错误,请修改');
                    return false;
                }
                var params = { "prompt": prompt, "style_id": style_id };
                var jsonData = JSON.stringify(params);
                $.ajax({
                    type: "post",
                    contentType: "application/json;charset=UTF-8",
                    dataType: "json", //预期服务器端返回的数据的类型
                    url: "/txt2img/java_api/chat/create/image",
                    data: jsonData,
                    success: function (data) {
                        console.info(data, data.status);
                        if (data && data.code == 100) {
                            var info = data.data
                            if (info) {
                                startPool(info)
                            }
                        }
                    },
                    error: function (data) {
                        alert('系统繁忙,请稍后再试')
                        $('#loadIndicator1').hide();
                        $("#btn").show();
                    }
                });
            });
        });
        function genImageHtml(imgSrc) {
            return '<div class="col-md-4 col-sm-6 col-lg-3">' +
                '     <div class="card">' +
                '         <img src="' + imgSrc + '"  class="img-responsive" alt="图片">' +
                '     </div>' +
                '    </div>'
        }
        var poolTimer
        var maxNum = 10
        var poolFinish = false
        var genSucc = false
        function startPool(id) {
            maxNum--
            if (poolTimer) {
                clearTimeout(poolTimer);
            }
            if (poolFinish || maxNum < 1) {
                //reset
                maxNum = 10
                poolFinish = false
                $("#btn").show();
                $('#loadIndicator1').hide();
                if (!genSucc) {
                    alert("生成失败,请稍后再试")
                }
                genSucc = false
                return
            }
            queryImage(id)
            poolTimer = setTimeout(function () {
                startPool(id)
            }, 3000);
        }
        function queryImage(id) {
            var req = $.ajax({
                type: "get",
                async: false,
                dataType: "json",
                url: "/txt2img/java_api/chat/query/image",
                data: 'task_id=' + id,
            });
            req.done(function (msg) {
                if ((!msg) || msg.code != 100) {
                    poolFinish = true
                    alert('生成失败')
                } else {
                    if (msg.data.image != "") {
                        console.log('生成image:', msg.data.image)
                        poolFinish = true
                        genSucc = true
                        var imgHtml = genImageHtml(msg.data.image);
                        $(".cards").prepend(imgHtml);
                        $('#loadIndicator1').hide();
                        $("#btn").show();
                    }
                }
            });
            req.fail(function (jqXHR, textStatus) {
                poolFinish = true
                alert('生成失败')
            });
        }
    </script>
</body>

</html>