网站详情页版,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); // 日志输出,帮助诊断 } }