设为首页收藏本站
切换到窄版

 找回密码
 立即注册
搜索
热搜: 活动 交友 discuz
青春不迷茫»论坛 › 幸福生活 › 龙虾 › 豆包AI超能模式编程一个网页
返回列表 发新帖
查看: 18|回复: 0

[AI] 豆包AI超能模式编程一个网页

[复制链接]
admin

1922

主题

543

回帖

7753

积分

管理员

积分
7753
发表于 2026-5-1 16:44:31 | 显示全部楼层 |阅读模式
  1. 做一个 chatgpt 一样的 html 页面，要求如下：
  2. 【一、功能】
  3. 1、文生图：用户输入文字描述，生成图片
  4. 2、图生图：用户上传 1 张参考图 + 输入文字描述，生成图片
  5. 【二、配置区】
  6. 1、BaseURL 输入框
  7. 2、API Key 输入框，密码类型显示
  8. 3、模型默认 gpt-image-2
  9. 三个值都浏览器本地保存，刷新不丢失
  10. 调用接口时，完整 URL = BaseURL + 接口路径
  11. 请求头必须带：Authorization: Bearer {APIKey}
  12. 【三、文生图接口】
  13. 路径：POST {baseURL}/v1/images/generations
  14. Content-Type: application/json
  15. 请求体参数：
  16. {
  17. "model": "gpt-image-2", // 用户选择的模型
  18. "prompt": "用户输入的文字",
  19. "n": 1, // 永远传 1，不要其他值
  20. "size": "1024x1024", // 用户可选 2024x1024 / 1536x1024 / 1024x1536
  21. "quality": "high" // 用户可选 auto /high/medium /low
  22. }
  23. 【四、图生图接口】
  24. 路径：POST {baseURL}/v1/images/edits
  25. Content-Type: multipart/form-data（用 FormData 提交，不要手动设置 Content-Type，让浏览器自动加）
  26. FormData 字段：
  27. model: "gpt-image-2"（用户选择的模型）
  28. image: 用户上传的图片文件（File 对象，字段名必须是 image，不是 image []）
  29. prompt: 用户输入的文字
  30. n: "1"（字符串 "1"，永远传 1）
  31. size: "1024x1024"（用户可选）
  32. 【五、生成数量说明】
  33. 用户可以选择生成数量：1 张 / 2 张 / 4 张 / 6 张
  34. 但调用 API 时，n 参数永远传 1
  35. 通过 Promise.all 同时发起 N 次请求实现批量生成
  36. 每张图独立显示的状态和结果，某一张失败不影响其他
  37. 【六、响应处理】
  38. 接口返回格式：
  39. {
  40. "created": 1713833628,
  41. "data": [{"b64_json": "一张的 base64 字符串..."}],
  42. "usage": {"total_tokens": 100, "input_tokens": 50, "output_tokens": 50 }
  43. }
  44. 处理方式：
  45. 取 response.data [0].b64_json
  46. 拼接成 data:image/png;base64,${b64_json} 作为 img 的 src
  47. 显示在结果区域
  48. 【七、图片展示】
  49. 多张图片用网格布局（grid），自适应排列
  50. 每张图片要同时显示「放大」「下载」两个按钮
  51. 点击图片放大按钮：弹出全屏弹窗，居中显示原图，点击遮罩关闭
  52. 点击下载按钮：直接下载图片，文件名 image_时间戳.png
  53. 生成中显示加载或 loading 动画
  54. 【八、错误处理】
  55. API 报错时，把后端返回的 error.message 显示在对应图片位置
  56. 网络错误显示「网络异常，请检查 BaseURL 是否正确」
  57. API Key 为空时同步直接返回，显示「请先填写 API Key」
  58. 【九、技术栈】
  59. 原生 HTML + JavaScript + Tailwind CSS（CDN 引入）
  60. 不要使用 React/Vue 等任何框架
  61. 所有代码放在一个 HTML 文件里
  62. UI 风格参考 ChatGPT，深色主题，简约现代
复制代码

豆包选择【超能模式】，然后发送上面的指令。

然后自动会生成网页代码：
你只需要把下面的代码完整复制，保存为一个 .html 文件，直接用浏览器打开就能用了！
  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <title>AI 绘图工具 | 文生图 & 图生图</title>
  7.     <script src="https://cdn.tailwindcss.com"></script>
  8.     <script>
  9.         tailwind.config = {
  10.             theme: {
  11.                 extend: {
  12.                     colors: {
  13.                         sidebar: '#202123',
  14.                         main: '#343541',
  15.                         input: '#40414f',
  16.                     },
  17.                 }
  18.             }
  19.         }
  20.     </script>
  21.     <style type="text/tailwindcss">
  22.         @layer utilities {
  23.             .content-auto {
  24.                 content-visibility: auto;
  25.             }
  26.             .scrollbar-thin {
  27.                 scrollbar-width: thin;
  28.                 scrollbar-color: #565869 transparent;
  29.             }
  30.             .spinner {
  31.                 border: 3px solid rgba(255, 255, 255, 0.3);
  32.                 border-radius: 50%;
  33.                 border-top: 3px solid #fff;
  34.                 width: 24px;
  35.                 height: 24px;
  36.                 animation: spin 1s linear infinite;
  37.             }
  38.             @keyframes spin {
  39.                 0% { transform: rotate(0deg); }
  40.                 100% { transform: rotate(360deg); }
  41.             }
  42.         }
  43.     </style>
  44. </head>
  45. <body class="bg-main text-gray-100 h-screen flex overflow-hidden">
  46.     <!-- 左侧侧边栏 - 配置区 -->
  47.     <aside class="w-72 bg-sidebar p-4 flex flex-col overflow-y-auto scrollbar-thin">
  48.         <div class="mb-6">
  49.             <h1 class="text-xl font-bold flex items-center gap-2">
  50.                 <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-blue-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
  51.                     <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z" />
  52.                 </svg>
  53.                 AI 绘图工具
  54.             </h1>
  55.             <p class="text-gray-400 text-sm mt-1">文生图 & 图生图</p>
  56.         </div>

  58.         <div class="space-y-4 flex-1">
  59.             <h2 class="text-sm font-semibold text-gray-400 uppercase tracking-wider">API 配置</h2>
  60.             
  61.             <div>
  62.                 <label class="block text-sm font-medium text-gray-300 mb-1">Base URL</label>
  63.                 <input
  64.                     type="text"
  65.                     id="baseUrl"
  66.                     placeholder="https://api.openai.com"
  67.                     class="w-full bg-input border-0 rounded-lg px-3 py-2 text-sm focus:ring-2 focus:ring-blue-500 focus:outline-none"
  68.                 >
  69.             </div>

  71.             <div>
  72.                 <label class="block text-sm font-medium text-gray-300 mb-1">API Key</label>
  73.                 <input
  74.                     type="password"
  75.                     id="apiKey"
  76.                     placeholder="sk-xxxxxx"
  77.                     class="w-full bg-input border-0 rounded-lg px-3 py-2 text-sm focus:ring-2 focus:ring-blue-500 focus:outline-none"
  78.                 >
  79.             </div>

  81.             <div>
  82.                 <label class="block text-sm font-medium text-gray-300 mb-1">模型</label>
  83.                 <input
  84.                     type="text"
  85.                     id="model"
  86.                     value="gpt-image-2"
  87.                     class="w-full bg-input border-0 rounded-lg px-3 py-2 text-sm focus:ring-2 focus:ring-blue-500 focus:outline-none"
  88.                 >
  89.             </div>
  90.         </div>

  92.         <div class="mt-6 pt-4 border-t border-gray-700">
  93.             <p class="text-xs text-gray-500">
  94.                 配置自动保存在本地浏览器中
  95.             </p>
  96.         </div>
  97.     </aside>

  99.     <!-- 右侧主内容区 -->
  100.     <main class="flex-1 flex flex-col overflow-hidden">
  101.         <div class="flex-1 overflow-y-auto p-4 md:p-6 scrollbar-thin">
  102.             <!-- 标签页切换 -->
  103.             <div class="flex gap-1 mb-6 bg-input rounded-lg p-1 w-fit">
  104.                 <button
  105.                     id="tabTextToImage"
  106.                     class="px-4 py-2 rounded-md text-sm font-medium bg-blue-600 text-white transition-all"
  107.                     onclick="switchTab('text')"
  108.                 >
  109.                     文生图
  110.                 </button>
  111.                 <button
  112.                     id="tabImageToImage"
  113.                     class="px-4 py-2 rounded-md text-sm font-medium text-gray-300 hover:text-white transition-all"
  114.                     onclick="switchTab('image')"
  115.                 >
  116.                     图生图
  117.                 </button>
  118.             </div>

  120.             <!-- 文生图输入区 -->
  121.             <div id="textToImagePanel" class="max-w-3xl mx-auto">
  122.                 <div class="bg-gray-800 rounded-xl p-4 mb-6">
  123.                     <label class="block text-sm font-medium text-gray-300 mb-2">图片描述</label>
  124.                     <textarea
  125.                         id="textPrompt"
  126.                         rows="3"
  127.                         placeholder="描述你想要生成的图片，例如：一只可爱的猫咪在草地上晒太阳，卡通风格，高清..."
  128.                         class="w-full bg-input border-0 rounded-lg px-4 py-3 text-sm focus:ring-2 focus:ring-blue-500 focus:outline-none resize-none"
  129.                     ></textarea>

  131.                     <!-- 参数选项 -->
  132.                     <div class="flex flex-wrap gap-4 mt-4">
  133.                         <div>
  134.                             <label class="block text-xs text-gray-400 mb-1">生成数量</label>
  135.                             <select id="textCount" class="bg-input border-0 rounded-lg px-3 py-2 text-sm focus:ring-2 focus:ring-blue-500 focus:outline-none">
  136.                                 <option value="1">1 张</option>
  137.                                 <option value="2">2 张</option>
  138.                                 <option value="4" selected>4 张</option>
  139.                                 <option value="6">6 张</option>
  140.                             </select>
  141.                         </div>
  142.                         <div>
  143.                             <label class="block text-xs text-gray-400 mb-1">图片尺寸</label>
  144.                             <select id="textSize" class="bg-input border-0 rounded-lg px-3 py-2 text-sm focus:ring-2 focus:ring-blue-500 focus:outline-none">
  145.                                 <option value="1024x1024" selected>1024×1024</option>
  146.                                 <option value="2024x1024">2024×1024</option>
  147.                                 <option value="1536x1024">1536×1024</option>
  148.                                 <option value="1024x1536">1024×1536</option>
  149.                             </select>
  150.                         </div>
  151.                         <div>
  152.                             <label class="block text-xs text-gray-400 mb-1">图片质量</label>
  153.                             <select id="textQuality" class="bg-input border-0 rounded-lg px-3 py-2 text-sm focus:ring-2 focus:ring-blue-500 focus:outline-none">
  154.                                 <option value="auto">Auto</option>
  155.                                 <option value="high" selected>High</option>
  156.                                 <option value="medium">Medium</option>
  157.                                 <option value="low">Low</option>
  158.                             </select>
  159.                         </div>
  160.                     </div>

  162.                     <button
  163.                         id="textGenerateBtn"
  164.                         onclick="generateTextToImage()"
  165.                         class="w-full mt-4 bg-blue-600 hover:bg-blue-700 text-white font-medium py-3 rounded-lg transition-all flex items-center justify-center gap-2 disabled:opacity-50 disabled:cursor-not-allowed"
  166.                     >
  167.                         <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
  168.                             <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z" />
  169.                         </svg>
  170.                         开始生成
  171.                     </button>
  172.                 </div>
  173.             </div>

  175.             <!-- 图生图输入区 -->
  176.             <div id="imageToImagePanel" class="max-w-3xl mx-auto hidden">
  177.                 <div class="bg-gray-800 rounded-xl p-4 mb-6">
  178.                     <label class="block text-sm font-medium text-gray-300 mb-2">参考图片</label>
  179.                     <div id="imageUploadArea" class="border-2 border-dashed border-gray-600 rounded-lg p-8 text-center cursor-pointer hover:border-blue-500 transition-all">
  180.                         <input type="file" id="imageInput" accept="image/*" class="hidden" onchange="handleImageUpload(event)">
  181.                         <svg xmlns="http://www.w3.org/2000/svg" class="h-12 w-12 mx-auto text-gray-500 mb-2" fill="none" viewBox="0 0 24 24" stroke="currentColor">
  182.                             <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z" />
  183.                         </svg>
  184.                         <p class="text-gray-400 text-sm">点击上传图片，或拖拽到这里</p>
  185.                         <p class="text-gray-500 text-xs mt-1">支持 JPG、PNG 格式</p>
  186.                     </div>
  187.                     <div id="imagePreview" class="hidden mt-3">
  188.                         <img id="previewImg" class="max-h-48 rounded-lg mx-auto" alt="预览">
  189.                     </div>

  191.                     <label class="block text-sm font-medium text-gray-300 mb-2 mt-4">图片描述</label>
  192.                     <textarea
  193.                         id="imagePrompt"
  194.                         rows="3"
  195.                         placeholder="基于参考图，描述你想要修改/生成的效果..."
  196.                         class="w-full bg-input border-0 rounded-lg px-4 py-3 text-sm focus:ring-2 focus:ring-blue-500 focus:outline-none resize-none"
  197.                     ></textarea>

  199.                     <!-- 参数选项 -->
  200.                     <div class="flex flex-wrap gap-4 mt-4">
  201.                         <div>
  202.                             <label class="block text-xs text-gray-400 mb-1">生成数量</label>
  203.                             <select id="imageCount" class="bg-input border-0 rounded-lg px-3 py-2 text-sm focus:ring-2 focus:ring-blue-500 focus:outline-none">
  204.                                 <option value="1">1 张</option>
  205.                                 <option value="2">2 张</option>
  206.                                 <option value="4" selected>4 张</option>
  207.                                 <option value="6">6 张</option>
  208.                             </select>
  209.                         </div>
  210.                         <div>
  211.                             <label class="block text-xs text-gray-400 mb-1">图片尺寸</label>
  212.                             <select id="imageSize" class="bg-input border-0 rounded-lg px-3 py-2 text-sm focus:ring-2 focus:ring-blue-500 focus:outline-none">
  213.                                 <option value="1024x1024" selected>1024×1024</option>
  214.                                 <option value="2024x1024">2024×1024</option>
  215.                                 <option value="1536x1024">1536×1024</option>
  216.                                 <option value="1024x1536">1024×1536</option>
  217.                             </select>
  218.                         </div>
  219.                     </div>

  221.                     <button
  222.                         id="imageGenerateBtn"
  223.                         onclick="generateImageToImage()"
  224.                         class="w-full mt-4 bg-blue-600 hover:bg-blue-700 text-white font-medium py-3 rounded-lg transition-all flex items-center justify-center gap-2 disabled:opacity-50 disabled:cursor-not-allowed"
  225.                     >
  226.                         <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
  227.                             <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z" />
  228.                         </svg>
  229.                         开始生成
  230.                     </button>
  231.                 </div>
  232.             </div>

  234.             <!-- 结果展示区 -->
  235.             <div id="resultsArea" class="max-w-5xl mx-auto hidden">
  236.                 <h3 class="text-lg font-medium mb-4">生成结果</h3>
  237.                 <div id="resultsGrid" class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
  238.                     <!-- 动态生成结果卡片 -->
  239.                 </div>
  240.             </div>
  241.         </div>
  242.     </main>

  244.     <!-- 图片放大弹窗 -->
  245.     <div id="imageModal" class="fixed inset-0 bg-black/80 z-50 hidden items-center justify-center p-4" onclick="closeModal(event)">
  246.         <button class="absolute top-4 right-4 text-white hover:text-gray-300" onclick="closeModal()">
  247.             <svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8" fill="none" viewBox="0 0 24 24" stroke="currentColor">
  248.                 <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
  249.             </svg>
  250.         </button>
  251.         <img id="modalImage" class="max-w-full max-h-full rounded-lg" alt="大图预览">
  252.     </div>

  254.     <script>
  255.         // 全局变量
  256.         let uploadedImage = null;

  258.         // 页面加载时读取本地配置
  259.         document.addEventListener('DOMContentLoaded', function() {
  260.             loadConfig();
  261.             bindConfigSave();
  262.             // 上传区域点击触发文件选择
  263.             document.getElementById('imageUploadArea').addEventListener('click', () => {
  264.                 document.getElementById('imageInput').click();
  265.             });
  266.         });

  268.         // 加载本地配置
  269.         function loadConfig() {
  270.             const baseUrl = localStorage.getItem('ai_draw_baseUrl');
  271.             const apiKey = localStorage.getItem('ai_draw_apiKey');
  272.             const model = localStorage.getItem('ai_draw_model');

  274.             if (baseUrl) document.getElementById('baseUrl').value = baseUrl;
  275.             if (apiKey) document.getElementById('apiKey').value = apiKey;
  276.             if (model) document.getElementById('model').value = model;
  277.         }

  279.         // 配置变更自动保存
  280.         function bindConfigSave() {
  281.             const inputs = ['baseUrl', 'apiKey', 'model'];
  282.             inputs.forEach(id => {
  283.                 document.getElementById(id).addEventListener('input', function() {
  284.                     localStorage.setItem(`ai_draw_${id}`, this.value);
  285.                 });
  286.             });
  287.         }

  289.         // 切换标签页
  290.         function switchTab(tab) {
  291.             const textTab = document.getElementById('tabTextToImage');
  292.             const imageTab = document.getElementById('tabImageToImage');
  293.             const textPanel = document.getElementById('textToImagePanel');
  294.             const imagePanel = document.getElementById('imageToImagePanel');

  296.             if (tab === 'text') {
  297.                 textTab.classList.add('bg-blue-600', 'text-white');
  298.                 textTab.classList.remove('text-gray-300');
  299.                 imageTab.classList.remove('bg-blue-600', 'text-white');
  300.                 imageTab.classList.add('text-gray-300');
  301.                 textPanel.classList.remove('hidden');
  302.                 imagePanel.classList.add('hidden');
  303.             } else {
  304.                 imageTab.classList.add('bg-blue-600', 'text-white');
  305.                 imageTab.classList.remove('text-gray-300');
  306.                 textTab.classList.remove('bg-blue-600', 'text-white');
  307.                 textTab.classList.add('text-gray-300');
  308.                 imagePanel.classList.remove('hidden');
  309.                 textPanel.classList.add('hidden');
  310.             }
  311.         }

  313.         // 处理图片上传
  314.         function handleImageUpload(event) {
  315.             const file = event.target.files[0];
  316.             if (!file) return;

  318.             uploadedImage = file;
  319.             const reader = new FileReader();
  320.             reader.onload = function(e) {
  321.                 document.getElementById('previewImg').src = e.target.result;
  322.                 document.getElementById('imagePreview').classList.remove('hidden');
  323.                 document.getElementById('imageUploadArea').classList.add('hidden');
  324.             };
  325.             reader.readAsDataURL(file);
  326.         }

  328.         // 获取配置
  329.         function getConfig() {
  330.             return {
  331.                 baseUrl: document.getElementById('baseUrl').value.trim().replace(/\/$/, ''),
  332.                 apiKey: document.getElementById('apiKey').value.trim(),
  333.                 model: document.getElementById('model').value.trim()
  334.             };
  335.         }

  337.         // 文生图
  338.         async function generateTextToImage() {
  339.             const config = getConfig();
  340.             const prompt = document.getElementById('textPrompt').value.trim();
  341.             const count = parseInt(document.getElementById('textCount').value);
  342.             const size = document.getElementById('textSize').value;
  343.             const quality = document.getElementById('textQuality').value;

  345.             if (!config.apiKey) {
  346.                 alert('请先填写 API Key');
  347.                 return;
  348.             }
  349.             if (!prompt) {
  350.                 alert('请输入图片描述');
  351.                 return;
  352.             }

  354.             // 禁用按钮
  355.             const btn = document.getElementById('textGenerateBtn');
  356.             btn.disabled = true;

  358.             // 初始化结果区
  359.             initResults(count);

  361.             try {
  362.                 const promises = [];
  363.                 for (let i = 0; i < count; i++) {
  364.                     promises.push(
  365.                         callTextToImageApi(config, prompt, size, quality, i)
  366.                     );
  367.                 }
  368.                 await Promise.all(promises);
  369.             } finally {
  370.                 btn.disabled = false;
  371.             }
  372.         }

  374.         // 调用文生图API
  375.         async function callTextToImageApi(config, prompt, size, quality, index) {
  376.             const card = document.getElementById(`result-card-${index}`);
  377.             
  378.             try {
  379.                 const response = await fetch(`${config.baseUrl}/v1/images/generations`, {
  380.                     method: 'POST',
  381.                     headers: {
  382.                         'Authorization': `Bearer ${config.apiKey}`,
  383.                         'Content-Type': 'application/json'
  384.                     },
  385.                     body: JSON.stringify({
  386.                         model: config.model,
  387.                         prompt: prompt,
  388.                         n: 1,
  389.                         size: size,
  390.                         quality: quality
  391.                     })
  392.                 });

  394.                 const data = await response.json();

  396.                 if (!response.ok) {
  397.                     throw new Error(data.error?.message || `请求失败: ${response.status}`);
  398.                 }

  400.                 // 处理结果
  401.                 const b64 = data.data[0].b64_json;
  402.                 const imgSrc = `data:image/png;base64,${b64}`;
  403.                 renderResultCard(card, imgSrc);

  405.             } catch (error) {
  406.                 let errorMsg = error.message;
  407.                 if (error.message.includes('Failed to fetch') || error.message.includes('NetworkError')) {
  408.                     errorMsg = '网络异常，请检查BaseURL是否正确';
  409.                 }
  410.                 renderErrorCard(card, errorMsg);
  411.             }
  412.         }

  414.         // 图生图
  415.         async function generateImageToImage() {
  416.             const config = getConfig();
  417.             const prompt = document.getElementById('imagePrompt').value.trim();
  418.             const count = parseInt(document.getElementById('imageCount').value);
  419.             const size = document.getElementById('imageSize').value;

  421.             if (!config.apiKey) {
  422.                 alert('请先填写 API Key');
  423.                 return;
  424.             }
  425.             if (!uploadedImage) {
  426.                 alert('请先上传参考图片');
  427.                 return;
  428.             }
  429.             if (!prompt) {
  430.                 alert('请输入图片描述');
  431.                 return;
  432.             }

  434.             // 禁用按钮
  435.             const btn = document.getElementById('imageGenerateBtn');
  436.             btn.disabled = true;

  438.             // 初始化结果区
  439.             initResults(count);

  441.             try {
  442.                 const promises = [];
  443.                 for (let i = 0; i < count; i++) {
  444.                     promises.push(
  445.                         callImageToImageApi(config, prompt, size, i)
  446.                     );
  447.                 }
  448.                 await Promise.all(promises);
  449.             } finally {
  450.                 btn.disabled = false;
  451.             }
  452.         }

  454.         // 调用图生图API
  455.         async function callImageToImageApi(config, prompt, size, index) {
  456.             const card = document.getElementById(`result-card-${index}`);
  457.             
  458.             try {
  459.                 const formData = new FormData();
  460.                 formData.append('model', config.model);
  461.                 formData.append('image', uploadedImage);
  462.                 formData.append('prompt', prompt);
  463.                 formData.append('n', "1");
  464.                 formData.append('size', size);

  466.                 const response = await fetch(`${config.baseUrl}/v1/images/edits`, {
  467.                     method: 'POST',
  468.                     headers: {
  469.                         'Authorization': `Bearer ${config.apiKey}`
  470.                         // 不要手动设置 Content-Type，让浏览器自动处理 FormData
  471.                     },
  472.                     body: formData
  473.                 });

  475.                 const data = await response.json();

  477.                 if (!response.ok) {
  478.                     throw new Error(data.error?.message || `请求失败: ${response.status}`);
  479.                 }

  481.                 // 处理结果
  482.                 const b64 = data.data[0].b64_json;
  483.                 const imgSrc = `data:image/png;base64,${b64}`;
  484.                 renderResultCard(card, imgSrc);

  486.             } catch (error) {
  487.                 let errorMsg = error.message;
  488.                 if (error.message.includes('Failed to fetch') || error.message.includes('NetworkError')) {
  489.                     errorMsg = '网络异常，请检查BaseURL是否正确';
  490.                 }
  491.                 renderErrorCard(card, errorMsg);
  492.             }
  493.         }

  495.         // 初始化结果区
  496.         function initResults(count) {
  497.             const resultsArea = document.getElementById('resultsArea');
  498.             const resultsGrid = document.getElementById('resultsGrid');
  499.             
  500.             resultsGrid.innerHTML = '';
  501.             resultsArea.classList.remove('hidden');

  503.             for (let i = 0; i < count; i++) {
  504.                 const card = document.createElement('div');
  505.                 card.id = `result-card-${i}`;
  506.                 card.className = 'bg-gray-800 rounded-xl overflow-hidden';
  507.                 card.innerHTML = `
  508.                     <div class="aspect-square flex items-center justify-center">
  509.                         <div class="text-center">
  510.                             <div class="spinner mx-auto mb-2"></div>
  511.                             <p class="text-gray-400 text-sm">生成中...</p>
  512.                         </div>
  513.                     </div>
  514.                 `;
  515.                 resultsGrid.appendChild(card);
  516.             }

  518.             // 滚动到结果区
  519.             resultsArea.scrollIntoView({ behavior: 'smooth' });
  520.         }

  522.         // 渲染成功的结果卡片
  523.         function renderResultCard(card, imgSrc) {
  524.             const timestamp = Date.now();
  525.             card.innerHTML = `
  526.                 <div class="relative group">
  527.                     <img src="${imgSrc}" class="w-full aspect-square object-cover" alt="生成的图片">
  528.                     <div class="absolute inset-0 bg-black/50 opacity-0 group-hover:opacity-100 transition-opacity flex items-center justify-center gap-2">
  529.                         <button
  530.                             onclick="openModal('${imgSrc}')"
  531.                             class="p-2 bg-white/20 hover:bg-white/30 rounded-lg text-white transition-all"
  532.                             title="放大"
  533.                         >
  534.                             <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
  535.                                 <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0zM10 7v3m0 0v3m0-3h3m-3 0H7" />
  536.                             </svg>
  537.                         </button>
  538.                         <button
  539.                             onclick="downloadImage('${imgSrc}', '${timestamp}')"
  540.                             class="p-2 bg-white/20 hover:bg-white/30 rounded-lg text-white transition-all"
  541.                             title="下载"
  542.                         >
  543.                             <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
  544.                                 <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4" />
  545.                             </svg>
  546.                         </button>
  547.                     </div>
  548.                 </div>
  549.             `;
  550.         }

  552.         // 渲染错误卡片
  553.         function renderErrorCard(card, errorMsg) {
  554.             card.innerHTML = `
  555.                 <div class="aspect-square flex items-center justify-center p-4">
  556.                     <div class="text-center">
  557.                         <svg xmlns="http://www.w3.org/2000/svg" class="h-10 w-10 mx-auto text-red-500 mb-2" fill="none" viewBox="0 0 24 24" stroke="currentColor">
  558.                             <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
  559.                         </svg>
  560.                         <p class="text-red-400 text-sm">${errorMsg}</p>
  561.                     </div>
  562.                 </div>
  563.             `;
  564.         }

  566.         // 打开放大弹窗
  567.         function openModal(imgSrc) {
  568.             const modal = document.getElementById('imageModal');
  569.             const modalImg = document.getElementById('modalImage');
  570.             modalImg.src = imgSrc;
  571.             modal.classList.remove('hidden');
  572.             modal.classList.add('flex');
  573.             document.body.style.overflow = 'hidden';
  574.         }

  576.         // 关闭弹窗
  577.         function closeModal(event) {
  578.             if (event && event.target !== event.currentTarget) return;
  579.             const modal = document.getElementById('imageModal');
  580.             modal.classList.add('hidden');
  581.             modal.classList.remove('flex');
  582.             document.body.style.overflow = '';
  583.         }

  585.         // 下载图片
  586.         function downloadImage(imgSrc, timestamp) {
  587.             const link = document.createElement('a');
  588.             link.href = imgSrc;
  589.             link.download = `image_${timestamp}.png`;
  590.             document.body.appendChild(link);
  591.             link.click();
  592.             document.body.removeChild(link);
  593.         }

  595.         // ESC 键关闭弹窗
  596.         document.addEventListener('keydown', function(e) {
  597.             if (e.key === 'Escape') {
  598.                 closeModal();
  599.             }
  600.         });
  601.     </script>
  602. </body>
  603. </html>
复制代码

📌 使用说明
  • 保存文件：把上面的代码复制，保存为 ai-draw.html
  • 打开使用：直接用浏览器打开这个文件就行
  • 配置 API：
    • 左边填入你的 API 服务商的 Base URL
    • 填入你的 API Key
    • 模型默认是 gpt-image-2，可以根据你的服务商修改

  • 配置自动保存：你填的配置会自动存在浏览器里，下次打开不用重新填
  • 开始绘图：
    • 文生图：输入描述，选参数，点生成
    • 图生图：上传参考图，输入描述，点生成


回复

举报

返回列表 发新帖
高级模式
B Color Image Link Quote Code Smilies
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

快速回复 返回顶部 返回列表