<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>AI创作，视觉无界</title>
<style>
*{margin:0;padding:0;box-sizing:border-box;font-family:Arial;}
body{background:#080a28;color:#fff;padding:20px;}
.box{max-width:700px;margin:0 auto;}
h1{text-align:center;margin:20px 0;}
textarea,select{width:100%;padding:12px;margin:8px 0;border-radius:8px;background:#1a1c44;color:#fff;border:0;}
button{width:100%;padding:14px;background:#6c46ff;border:0;border-radius:8px;color:#fff;font-size:16px;}
#res{margin-top:20px;text-align:center;}
</style>
</head>
<body>
<div class="box">
    <h1>AI创作，视觉无界</h1>
    <textarea id="p" placeholder="正向提示词">二次元少女，唯美，高清</textarea>
    <select id="m">
        <option value="flux">Flux</option>
        <option value="meina">Meina</option>
        <option value="sdxl">SDXL</option>
        <option value="gpt-image-2">GPT-image-2</option>
    </select>
    <button onclick="go()">执行渲染</button>
    <div id="res"></div>
</div>
<script>
async function go(){
    document.getElementById("res").innerText = "生成中...";
    let r = await fetch(location.href,{
        method:"POST",
        headers:{"Content-Type":"application/json"},
        body:JSON.stringify({prompt:document.getElementById("p").value,model:document.getElementById("m").value})
    });
    let j = await r.json();
    if(j.data && j.data[0].url){
        document.getElementById("res").innerHTML = `< img src="${j.data[0].url}" style="max-width:100%;">`;
    }else{
        document.getElementById("res").innerText = JSON.stringify(j,null,2);
    }
}
</script>
</body>
</html>