php-chatgpt-openai-api-demo
/
createimage.html

<!DOCTYPE html>
<html>
<head>
  <title>ChatGPT智能图片(免费版)</title>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
  <script src="js/createimage.js?v=1.0.0"></script>
  <script src="js/effect.js"></script>
  <style>
    hr {
      margin-top: -8px;
    }
    #submit {
      height: 40px;
      width: 200px;
      background-color: #007bff;
      color: white;
      font-weight: bold;
      border: none;
      margin-left: 70px;
    }
    #submit:hover {
      cursor: pointer;
    }

    input:invalid {
      border-color: red;
    }
    .form-label {
      display: inline-block;
      width: 80px;
      text-align: right;
      margin-right: 10px;
    }
    input[type="text"],
    input[type="number"] {
      width: 150px;
      padding: 5px;
      border: 1px solid #ccc;
    }
    .img-datail {
      margin-bottom: 10px;
      margin-left: 100px;
    }

    .jump-link {
      width:100%; font-size:13px; display:block; padding:10px; line-height:22px; border-top:1px dotted #ccc; border-bottom:1px dotted #ccc;color: #9e9e9e;font-family:宋体;
    }
    .jump-link  a {
      text-decoration:none;
    }
    .jump-link  a:visited {
      color: inherit;
    }
  </style>
</head>
<body>

<h2>chatGPT智能图片</h2>
<hr />

<form id="createImageForm">
  <label class="form-label" for="prompt">关键词:</label>
  <input type="text" id="prompt" name="prompt" placeholder="一只可爱的狗" required>
  <br><br>
  <label class="form-label"  for="size_wide">图片宽度:</label>
  <div class="img-datail"><label><input type="radio" name="size" value="256x256" checked>256x256</label></div>
  <div class="img-datail"><label><input type="radio" name="size" value="512x512">512x512</label></div>
  <div class="img-datail"><label><input type="radio" name="size" value="1024x1024">1024x1024</label></div>
  <button type="submit" id="submit" title="图片宽高不能大于2000">生成图片</button>
  <br><br>
</form>
<div id="imageContainer" style="text-align:center"></div>

<br/>
<br/>
<div class="jump-link">
  单击此处跳转：<a href="conversation.html"  style="color: #2196f3">chatGPT智能聊天问答</a>
  <br/>
  单击此处跳转：<a href="index.html"  style="color: #2196f3">chatGPT智能应用首页</a>
</div>

<div style="color:#9a9595; font-size:12px;line-height:18px;font-family:宋体;padding:10px;">
  1.本案例仅为测试demo，免费版本速度没有很快，请见谅（以后会升级为付费版本）  <br/>
  2.chatGPT对接/科学上网/网站小程序开发/微信公众号对接等，请加微信:adminiluzi
</div>
</body>
</html>