网站详情页版，AI尚未跑出来

1.html界面

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>建筑效果图转彩色手绘</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="container">
        <div class="header">
            <h1>建筑效果图转彩色手绘</h1>
            <p>使用介绍: 请在左侧框内上传一张建筑渲染图</p>
        </div>
        <div class="content">
            <div class="upload-section">
                <input type="file" id="file-input" hidden />
                <img id="original-image" src="" alt="" />
                <button id="upload-btn">上传参考图</button>
            </div>
            <div class="result-section">
                <img id="sketched-image" src="" alt="" />
            </div>
        </div>
    </div>
    <script src="script.js"></script>
</body>
</html>

2.style.css文件

body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    background-color: #f2f2f7;
    color: #1d1d1f;
    text-align: center;
    margin: 0;
    padding: 0;
}

.container {
    width: 80%;
    margin: 40px auto;
}

.header h1 {
    font-size: 28px;
    font-weight: normal;
}

.header p {
    font-size: 18px;
    color: #6e6e73;
}

.content {
    display: flex;
    justify-content: space-around;
    margin-top: 20px;
}

.upload-section, .result-section {
    flex: 1;
    background: #ffffff;
    border-radius: 12px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
    padding: 20px;
    margin: 0 10px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    justify-content: space-between; /* Ensure the button aligns to the bottom */
}

img {
    max-width: 100%;
    height: auto;
    border-radius: 8px;
    margin-bottom: 20px; /* Add some space above the button */
}

button {
    background-color: #007aff;
    color: #ffffff;
    padding: 10px 20px;
    font-size: 16px;
    border: none;
    border-radius: 20px;
    cursor: pointer;
    transition: background-color 0.3s ease;
    width: 100%; /* Ensure the button stretches to fill the container */
}

button:hover {
    background-color: #0051a8;
}

#file-input {
    display: none;
}

3.script.js

document.getElementById('upload-btn').addEventListener('click', function() {
    document.getElementById('file-input').click();  // 触发文件输入点击事件
});

document.getElementById('file-input').addEventListener('change', function(event) {
    const file = event.target.files[0];  // 获取用户选定的文件
    if (file) {
        const reader = new FileReader();
        reader.onload = function(e) {
            document.getElementById('original-image').src = e.target.result;  // 显示原图
            callApiAndProcessImage(e.target.result);  // 调用API并处理图片
        };
        reader.readAsDataURL(file);  // 以DataURL的形式读取文件
    }
});

async function callApiAndProcessImage(imageData) {
    // 从DataURL中提取Base64编码的图片数据
    const base64ImageContent = imageData.replace(/^data:image\/(png|jpeg|jpg);base64,/, '');

    // 构造请求体
    const requestBody = {
        prompt: "<lora:CWG_archisketch_v1:1>,Building,pre sketch,masterpiece,best quality,featuring markers,(3D:0.7)",
        negative_prompt: "blurry, lower quality, glossy finish,insufficient contrast",
        init_images: [base64ImageContent],
        steps: 30,
        width: 512,
        height: 512,
        seed: Math.floor(Math.random() * 10000000),
        alwayson_scripts: {
            ControlNet: {
                args: [
                    {
                        enabled: "true",
                        pixel_perfect: "true",
                        module: "canny",
                        model: "control_v11p_sd15_canny_fp16 [b18e0966]",
                        weight: 1,
                        image: base64ImageContent
                    },
                    {
                        enabled: "true",
                        pixel_perfect: "true",
                        module: "depth",
                        model: "control_v11f1p_sd15_depth_fp16 [4b72d323]",
                        weight: 1,
                        image: base64ImageContent
                    }
                ]
            }
        }
    };

    try {
        console.log('Sending request to API...');  // 日志输出，帮助诊断
        const response = await fetch('http://127.0.0.1:7860/sdapi/v1/txt2img', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json'
            },
            body: JSON.stringify(requestBody)  // 请求体
        });

        console.log('Response received', response);  // 日志输出，帮助诊断
        if (response.ok) {
            const responseData = await response.json();
            console.log('Response Data:', responseData);  // 日志输出，帮助诊断
            const processedImage = 'data:image/png;base64,' + responseData.images[0];
            document.getElementById('sketched-image').src = processedImage;  // 显示处理后的图片
        } else {
            console.error('API调用失败:', response.status);  // 日志输出，帮助诊断
        }
    } catch (error) {
        console.error('在API调用过程中发生错误:', error);  // 日志输出，帮助诊断
    }
}

 

posted @ 2024-04-12 16:22  不上火星不改名  阅读(23)  评论(0)    收藏  举报