devbox
盐析白兔
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

对接腾讯云接口实现AI绘画PHP代码_php 腾讯云文生图接口

作者：盐析白兔 | 2024-02-22 09:34:55

赞

踩

php 腾讯云文生图接口

前些时候发现腾讯云新出了个AI绘画，就想试着能否写一个网页代码实现AI绘画的功能

在AI 的帮助下，实现了此功能，但是有些地方有待完善，目前可以实现文生图的功能。

本项目Github地址：suyin101/tencentaidraw: 对接腾讯云官方接口AI绘画做的 (github.com)

演示地址：苏音 | 苏音资源网 - 提供免费资源分享-我爱分享网 (suyin66.com) 

先放出代码吧~

代码

index.php

  1. <?php
  2. ?>
  3. <!DOCTYPE html>
  4. <html>
  5.  
  6. <head>
  7.     <title>AI绘画--苏音</title>
  8.     <style>
  9.        body {
  10.             font-family: Arial, sans-serif;
  11.             margin: 0;
  12.             padding: 0;
  13.             background-color: #f1f1f1;
  14.         }
  15.  
  16.         .container {
  17.             max-width: 500px;
  18.             margin: 0 auto;
  19.             padding: 20px;
  20.             background-color: #fff;
  21.             border-radius: 5px;
  22.             box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  23.         }
  24.  
  25.         h1 {
  26.             font-size: 24px;
  27.             text-align: center;
  28.             margin-bottom: 20px;
  29.         }
  30.  
  31.         .form-group {
  32.             margin-bottom: 20px;
  33.         }
  34.  
  35.         .form-group label {
  36.             display: block;
  37.             font-size: 16px;
  38.             margin-bottom: 5px;
  39.         }
  40.  
  41.         .form-group input[type="text"] {
  42.             width: 100%;
  43.             padding: 10px;
  44.             font-size: 16px;
  45.             border: 1px solid #ccc;
  46.             border-radius: 4px;
  47.         }
  48.  
  49.         .form-group button {
  50.             display: block;
  51.             width: 100%;
  52.             padding: 10px;
  53.             font-size: 16px;
  54.             background-color: #4caf50;
  55.             color: #fff;
  56.             border: none;
  57.             border-radius: 4px;
  58.             cursor: pointer;
  59.         }
  60.  
  61.         .styled-select {
  62.             position: relative;
  63.             display: block;
  64.             width: 100%;
  65.             height: 40px;
  66.             background-color: #fff;
  67.             border: 1px solid #ccc;
  68.             border-radius: 4px;
  69.             padding: 0 10px;
  70.             font-size: 16px;
  71.             color: #333;
  72.             cursor: pointer;
  73.         }
  74.  
  75.         .styled-select::after {
  76.             content: "\25BC";
  77.             position: absolute;
  78.             top: 50%;
  79.             right: 10px;
  80.             transform: translateY(-50%);
  81.             font-size: 16px;
  82.         }
  83.  
  84.         .styled-select select {
  85.             position: absolute;
  86.             top: 0;
  87.             left: 0;
  88.             width: 100%;
  89.             height: 100%;
  90.             opacity: 0;
  91.             cursor: pointer;
  92.         }
  93.  
  94.         #result {
  95.             text-align: center;
  96.             margin-top: 30px;
  97.         }
  98.  
  99.         #result .loader {
  100.             display: none;
  101.             margin: 0 auto;
  102.             width: 50px;
  103.             height: 50px;
  104.             border: 5px solid #f3f3f3;
  105.             border-top: 5px solid #3498db;
  106.             border-radius: 50%;
  107.             animation: spin 2s linear infinite;
  108.         }
  109.  
  110.         #result img {
  111.             max-width: 100%;
  112.             height: auto;
  113.             display: none;
  114.             margin-top: 20px;
  115.         }
  116.  
  117.         @media only screen and (max-width: 600px) {
  118.             .container {
  119.                 max-width: 100%;
  120.                 border-radius: 0;
  121.                 box-shadow: none;
  122.                 padding: 10px;
  123.             }
  124.  
  125.             .form-group input[type="text"],
  126.             .form-group button {
  127.                 font-size: 14px;
  128.             }
  129.         }
  130.  
  131.         @keyframes spin {
  132.             0% {
  133.                 transform: rotate(0deg);
  134.             }
  135.  
  136.             100% {
  137.                 transform: rotate(360deg);
  138.             }
  139.         }
  140.     </style>
  141. </head>
  142.  
  143. <body>
  144.     <div class="container">
  145.         <h1>AI绘画苏音</h1>
  146.         <div class="form-group">
  147.             <label for="prompt">请输入关键词：</label>
  148.             <input type="text" id="prompt" placeholder="AI绘画描述词，越详细越好" />
  149.         </div>
  150.         <div class="form-group">
  151.             <label for="styles">选择风格：</label>
  152.             <select id="styles" class="styled-select">
  153.                   <option value="101">水墨画</option>
  154.                 <option value="102">概念艺术</option>
  155.                 <option value="103">油画</option>
  156.                 <option value="104">水彩画</option>
  157.                 <option value="106">厚涂风格</option>
  158.                 <option value="107">插画</option>
  159.                 <option value="108">剪纸风格</option>
  160.                 <option value="109">印象派</option>
  161.                 <option value="110">2.5D</option>
  162.                 <option value="111">肖像画</option>
  163.                 <option value="112">黑白素描画</option>
  164.                 <option value="113">赛博朋克</option>
  165.                 <option value="114">科幻风格</option>
  166.                 <option value="115">暗黑风格</option>
  167.                 <option value="201">日系动漫</option>
  168.                 <option value="202">怪兽风格</option>
  169.                 <option value="301">游戏卡通手绘</option>
  170.                 <option value="401">通用写实风格</option>
  171.             </select>
  172.         </div>
  173.         <div class="form-group">
  174.             <button onclick="callAPI()">开始生成</button>
  175.         </div>
  176.         <div id="result">
  177.             <div class="loader"></div>
  178.             <img id="result-image" />
  179.         </div>
  180.         <div id="remaining-count">
  181.             剩余次数: <span id="count"></span>
  182.         </div>
  183.     </div>
  185.     <script>
  186.         // 从localStorage获取剩余次数，如果不存在则设置为初始值3
  187.         var remainingCount = localStorage.getItem("remainingCount") || 20;
  189.         function callAPI() {
  190.             if (remainingCount <= 0) {
  191.                 alert("每个IP只能成功调用三十次接口。");
  192.                 return;
  193.             }
  194.  
  195.             var userPrompt = document.getElementById("prompt").value;
  196.             var stylesSelect = document.getElementById("styles");
  197.             var selectedStyle = stylesSelect.value;
  198.  
  199.             if (userPrompt.trim() === "") {
  200.                 alert("请输入关键词");
  201.                 return;
  202.             }
  203.  
  204.             if (!isValidStyle(selectedStyle)) {
  205.                 alert("请选择有效的风格");
  206.                 return;
  207.             }
  208.  
  209.             var url =
  210.                 "你的网站/proxy.php?prompt=" +
  211.                 encodeURIComponent(userPrompt) +
  212.                 "&Styles=" +
  213.                 selectedStyle;
  214.  
  215.             var loader = document.querySelector("#result .loader");
  216.             loader.style.display = "block";
  217.  
  218.             var xhr = new XMLHttpRequest();
  219.             xhr.onreadystatechange = function() {
  220.                 if (xhr.readyState === XMLHttpRequest.DONE) {
  221.                     loader.style.display = "none";
  222.  
  223.                     if (xhr.status === 200) {
  224.                         var response = JSON.parse(xhr.responseText);
  225.                         var resultImage = response.ResultImage;
  226.                         displayImage(resultImage);
  227.  
  228.                         // 减少剩余次数并更新页面上的显示
  229.                         remainingCount--;
  230.                         document.getElementById("count").innerText = remainingCount;
  231.  
  232.                         // 将剩余次数存储在localStorage中
  233.                         localStorage.setItem("remainingCount", remainingCount);
  234.                     } else {
  235.                         console.error("请求发生错误");
  236.                     }
  237.                 }
  238.             };
  239.  
  240.             xhr.open("GET", url, true);
  241.             xhr.send();
  242.         }
  243.  
  244.         function displayImage(base64Data) {
  245.             var image = document.getElementById("result-image");
  246.             image.src = "data:image/png;base64," + base64Data;
  247.             image.style.display = "block";
  248.         }
  249.  
  250.         function isValidStyle(style) {
  251.             return /^[0-9]+$/.test(style);
  252.         }
  253.     </script>
  254. </body>
  255.  
  256. </html>

draw.php

  1. <?php
  2. require_once 'vendor/autoload.php';
  3.  
  4. use TencentCloud\Common\Credential;
  5. use TencentCloud\Common\Profile\ClientProfile;
  6. use TencentCloud\Common\Profile\HttpProfile;
  7. use TencentCloud\Common\Exception\TencentCloudSDKException;
  8. use TencentCloud\Aiart\V20221229\AiartClient;
  9. use TencentCloud\Aiart\V20221229\Models\TextToImageRequest;
  10.  
  11. try {
  12.     // 实例化一个认证对象，入参需要传入腾讯云账户 SecretId 和 SecretKey
  13.     // 请注意保密密钥，不要将真实密钥泄露在代码中
  14.     $cred = new Credential("你的SecretId", "你的SecretKey");
  15.  
  16.     // 实例化一个 HTTP 选项，可选的，没有特殊需求可以跳过
  17.     $httpProfile = new HttpProfile();
  18.     $httpProfile->setEndpoint("aiart.tencentcloudapi.com");
  19.  
  20.     // 实例化一个 ClientProfile 对象，可选的，没有特殊需求可以跳过
  21.     $clientProfile = new ClientProfile();
  22.     $clientProfile->setHttpProfile($httpProfile);
  23.  
  24.     // 实例化要请求产品的 Client 对象
  25.     $client = new AiartClient($cred, "ap-shanghai", $clientProfile);
  26.  
  27.     // 实例化一个 TextToImageRequest 对象
  28.     $req = new TextToImageRequest();
  29.     $userInput = $_GET['prompt'];
  30.     $styles = $_GET['Styles'];
  31.  
  32.     // 检查风格参数是否为整数数字
  33.     if (!is_numeric($styles)) {
  34.         // 风格参数无效，返回错误响应
  35.         $response = array(
  36.             'error' => 'Invalid Styles parameter'
  37.         );
  38.         header('Content-Type: application/json');
  39.         echo json_encode($response);
  40.         exit;
  41.     }
  42.  
  43.     $params = array(
  44.         "Prompt" => $userInput,
  45.         "Styles" => array(strval($styles)) // 将风格参数转换为字符串
  46.     );
  47.     $req->fromJsonString(json_encode($params));
  48.  
  49.     // 返回的 resp 是一个 TextToImageResponse 对象，与请求对象对应
  50.     $resp = $client->TextToImage($req);
  51.  
  52.     // 输出 json 格式的字符串响应
  53.     header('Content-Type: application/json');
  54.     echo $resp->toJsonString();
  55. } catch (TencentCloudSDKException $e) {
  56.     echo $e;
  57. }

proxy.php

  1. <?php
  2.  
  3. //
  4. $apiUrl = '你的网站/draw.php';
  5. $prompt = $_GET['prompt'];
  6. $styles = $_GET['Styles'];
  7.  
  8. // 检查风格参数是否为整数数字
  9. if (!is_numeric($styles)) {
  10.     // 风格参数无效，返回错误响应
  11.     $response = array(
  12.         'error' => 'Invalid Styles parameter'
  13.     );
  14.     header('Content-Type: application/json');
  15.     echo json_encode($response);
  16.     exit;
  17. }
  18.  
  19. // 构建请求 URL，包括风格参数
  20. $requestUrl = $apiUrl . '?prompt=' . urlencode($prompt) . '&Styles=' . urlencode($styles);
  21.  
  22. // 发起请求并获取响应
  23. $response = file_get_contents($requestUrl);
  24.  
  25. // 将响应发送回前端
  26. header('Content-Type: application/json');
  27. echo $response;

代码目录

index.php 首页文件

draw.php 接口代码

proxy.php 代理接口文件

部署教程

把以上三个文件都放到网站中，并修改相应内容

image-20230825224141296

image-20230825224928037

image-20230825224946476

且需要安装Composer依赖

具体可以参考腾讯云的文档和这个

API Explorer - 云 API - 控制台 (tencent.com)

PHP-SDK 中心-腾讯云 (tencent.com)

宝塔Linux面板安装Composer依赖管理工具与PHP依赖包的方法宝塔面板安装composer苏音资源的博客-CSDN博客

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/盐析白兔/article/detail/129509
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号