🎨 免费开源！零代码搭建AI文生图工具（附完整代码）

无需编程基础！无需付费API！一段代码搞定AI图片生成，自媒体配图、设计灵感、趣味创作全搞定！效果预览👇
（此处插入生成的效果图GIF，展示输入文字到出图的过程）

📥 如何快速使用？3步搞定！

复制下方完整代码（手机长按全选，电脑Ctrl+A全选）
保存为HTML文件
新建文本文件 → 粘贴代码 → 重命名为AI图片生成器.html
双击运行
用浏览器打开文件，输入文字立即生成！

🚀 完整代码（直接复制）

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>AI 文生图工具</title>
    <style>
        body {
            max-width: 800px;
            margin: 20px auto;
            padding: 40px 30px;
            font-family: system-ui, -apple-system, sans-serif;
            background: linear-gradient(135deg, #e6f7ff 0%, #f0ebff 100%);
            border-radius: 24px;
            box-shadow: 0 12px 40px rgba(24,144,255,0.15);
        }
        .control-group {
            margin-bottom: 20px;
        }
        label {
            display: block;
            margin-bottom: 5px;
            font-weight: bold;
        }
        input[type="text"],
        input[type="number"],
        textarea {
            min-height: 10px;
            width: 100%;
            padding: 12px;
            margin-bottom: 15px;
            border: 2px solid #69c0ff;
            border-radius: 12px;
            background: rgba(255,255,255,0.95);
            box-shadow: 0 4px 16px rgba(24,144,255,0.15);
            transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
        }
        button {
            background: linear-gradient(135deg, #1890ff, #096dd9);
            color: white;
            padding: 12px 24px;
            border: none;
            border-radius: 25px;
            cursor: pointer;
            font-size: 16px;
            box-shadow: 0 4px 12px rgba(24,144,255,0.3);
            transition: all 0.2s;
        }
        button:hover {
            transform: translateY(-2px);
            box-shadow: 0 6px 16px rgba(24,144,255,0.4);
        }
        button:active {
            transform: translateY(0);
        }
        button:disabled {
            background: #d9d9d9;
            cursor: not-allowed;
        }
        #preview {
            margin-top: 20px;
            text-align: center;
        }
        #imageContainer {
            max-width: 100%;
            margin-top: 20px;
            border: 2px solid #bae7ff;
            padding: 20px;
            border-radius: 16px;
            background: rgba(255,255,255,0.95);
            box-shadow: 0 8px 32px rgba(24,144,255,0.1);
            transition: transform 0.3s ease;
        }
        #imageContainer:hover {
            transform: translateY(-4px);
        }
    </style>
</head>
<body>
    <h2>AI 图片生成器</h2>
    <div class="control-group">
        <label for="prompt">提示词:</label>
        <textarea id="prompt" placeholder="例：赛博朋克风格的山脉与飞车" rows="4"></textarea>
    </div>
    <div class="control-group">
        <label for="width">宽度:</label>
        <input type="number" id="width" value="1024" min="100" max="2048">
    </div>
    <div class="control-group">
        <label for="height">高度:</label>
        <input type="number" id="height" value="576" min="100" max="2048">
    </div>
    <div class="control-group">
        <label for="seed">随机种子:</label>
        <input type="number" id="seed" value="100" min="0">
    </div>
    <button onclick="generateImage()">生成图片</button>
    <div id="preview">
        <h3>图片预览</h3>
        <div id="imageContainer">
            <img id="generatedImage" style="max-width: 100%">
        </div>
    </div>
    <script>
        function generateImage() {
            const prompt = document.getElementById('prompt').value;
            const width = document.getElementById('width').value;
            const height = document.getElementById('height').value;
            const seedInput = document.getElementById('seed');
            let seed = parseInt(seedInput.value);
            if (!prompt) {
                alert('⚠️ 请输入描述文字！');
                return;
            }
            const encodedPrompt = encodeURIComponent(prompt);
            const imageUrl = `https://image.pollinations.ai/prompt/${encodedPrompt}?width=${width}&height=${height}&seed=${seed}&model=flux&nologo=true`;
            seedInput.value = seed + 1;
            document.getElementById('generatedImage').src = imageUrl;
        }
    </script>
</body>
</html>

🎯 使用技巧

描述越详细，效果越好
✅ 正确示例：”莫奈油画风格的夏日花园，有明亮的睡莲和柔光”
❌ 错误示例：”风景图”
修改随机种子：点击生成后，种子值会自动+1，微调数值可生成相似风格的不同变体。
高清尺寸推荐：宽度1024×高度576（默认值），最高支持2048px！

❗ 常见问题

图片加载失败？ 检查网络是否畅通，或尝试简化描述词。
能否商用？ 当前为无logo版本，但需遵守pollinations.ai的版权政策。
支持中文描述吗？ 支持！但复杂词汇建议搭配英文关键词（如”中国龙 Chinese dragon”）

💻 进阶玩法

自定义界面：修改代码中的linear-gradient(135deg, #e6f7ff...)调整背景渐变色
添加快捷功能：在<button>下方添加此代码，一键保存图片：

🚀 进阶玩法-动手能力强的可以自己添加

<button onclick="saveImage()" style="margin-left:10px;">保存图片</button>
<script>
function saveImage() {
const image = document.getElementById('generatedImage');
const link = document.createElement('a');
link.download = 'AI生成图.png';
link.href = image.src;
link.click();
}
</script>

声明：本站为非盈利性赞助网站，本站所有软件来自互联网，版权属原著所有，如有需要请购买正版。如有侵权，敬请来信联系我们，我们立即删除。