前些时候发现腾讯云新出了个AI绘画,就想试着能否写一个网页代码实现AI绘画的功能
在AI 的帮助下,实现了此功能,但是有些地方有待完善,目前可以实现文生图的功能。
本项目Github地址:suyin101/tencentaidraw: 对接腾讯云官方接口AI绘画做的 (github.com)
演示地址:苏音 | 苏音资源网 - 提供免费资源分享-我爱分享网 (suyin66.com)
先放出代码吧~
代码
index.php
<?php
?>
<!DOCTYPE html>
<html>
<head>
<title>AI绘画--苏音</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
background-color: #f1f1f1;
}
.container {
max-width: 500px;
margin: 0 auto;
padding: 20px;
background-color: #fff;
border-radius: 5px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}
h1 {
font-size: 24px;
text-align: center;
margin-bottom: 20px;
}
.form-group {
margin-bottom: 20px;
}
.form-group label {
display: block;
font-size: 16px;
margin-bottom: 5px;
}
.form-group input[type="text"] {
width: 100%;
padding: 10px;
font-size: 16px;
border: 1px solid #ccc;
border-radius: 4px;
}
.form-group button {
display: block;
width: 100%;
padding: 10px;
font-size: 16px;
background-color: #4caf50;
color: #fff;
border: none;
border-radius: 4px;
cursor: pointer;
}
.styled-select {
position: relative;
display: block;
width: 100%;
height: 40px;
background-color: #fff;
border: 1px solid #ccc;
border-radius: 4px;
padding: 0 10px;
font-size: 16px;
color: #333;
cursor: pointer;
}
.styled-select::after {
content: "\25BC";
position: absolute;
top: 50%;
right: 10px;
transform: translateY(-50%);
font-size: 16px;
}
.styled-select select {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
opacity: 0;
cursor: pointer;
}
#result {
text-align: center;
margin-top: 30px;
}
#result .loader {
display: none;
margin: 0 auto;
width: 50px;
height: 50px;
border: 5px solid #f3f3f3;
border-top: 5px solid #3498db;
border-radius: 50%;
animation: spin 2s linear infinite;
}
#result img {
max-width: 100%;
height: auto;
display: none;
margin-top: 20px;
}
@media only screen and (max-width: 600px) {
.container {
max-width: 100%;
border-radius: 0;
box-shadow: none;
padding: 10px;
}
.form-group input[type="text"],
.form-group button {
font-size: 14px;
}
}
@keyframes spin {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
</style>
</head>
<body>
<div class="container">
<h1>AI绘画苏音</h1>
<div class="form-group">
<label for="prompt">请输入关键词:</label>
<input type="text" id="prompt" placeholder="AI绘画描述词,越详细越好" />
</div>
<div class="form-group">
<label for="styles">选择风格:</label>
<select id="styles" class="styled-select">
<option value="101">水墨画</option>
<option value="102">概念艺术</option>
<option value="103">油画</option>
<option value="104">水彩画</option>
<option value="106">厚涂风格</option>
<option value="107">插画</option>
<option value="108">剪纸风格</option>
<option value="109">印象派</option>
<option value="110">2.5D</option>
<option value="111">肖像画</option>
<option value="112">黑白素描画</option>
<option value="113">赛博朋克</option>
<option value="114">科幻风格</option>
<option value="115">暗黑风格</option>
<option value="201">日系动漫</option>
<option value="202">怪兽风格</option>
<option value="301">游戏卡通手绘</option>
<option value="401">通用写实风格</option>
</select>
</div>
<div class="form-group">
<button onclick="callAPI()">开始生成</button>
</div>
<div id="result">
<div class="loader"></div>
<img id="result-image" />
</div>
<div id="remaining-count">
剩余次数: <span id="count"></span>
</div>
</div>
<script>
// 从localStorage获取剩余次数,如果不存在则设置为初始值3
var remainingCount = localStorage.getItem("remainingCount") || 20;
function callAPI() {
if (remainingCount <= 0) {
alert("每个IP只能成功调用三十次接口。");
return;
}
var userPrompt = document.getElementById("prompt").value;
var stylesSelect = document.getElementById("styles");
var selectedStyle = stylesSelect.value;
if (userPrompt.trim() === "") {
alert("请输入关键词");
return;
}
if (!isValidStyle(selectedStyle)) {
alert("请选择有效的风格");
return;
}
var url =
"你的网站/proxy.php?prompt=" +
encodeURIComponent(userPrompt) +
"&Styles=" +
selectedStyle;
var loader = document.querySelector("#result .loader");
loader.style.display = "block";
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function() {
if (xhr.readyState === XMLHttpRequest.DONE) {
loader.style.display = "none";
if (xhr.status === 200) {
var response = JSON.parse(xhr.responseText);
var resultImage = response.ResultImage;
displayImage(resultImage);
// 减少剩余次数并更新页面上的显示
remainingCount--;
document.getElementById("count").innerText = remainingCount;
// 将剩余次数存储在localStorage中
localStorage.setItem("remainingCount", remainingCount);
} else {
console.error("请求发生错误");
}
}
};
xhr.open("GET", url, true);
xhr.send();
}
function displayImage(base64Data) {
var image = document.getElementById("result-image");
image.src = "data:image/png;base64," + base64Data;
image.style.display = "block";
}
function isValidStyle(style) {
return /^[0-9]+$/.test(style);
}
</script>
</body>
</html>
draw.php
<?php
require_once 'vendor/autoload.php';
use TencentCloud\Common\Credential;
use TencentCloud\Common\Profile\ClientProfile;
use TencentCloud\Common\Profile\HttpProfile;
use TencentCloud\Common\Exception\TencentCloudSDKException;
use TencentCloud\Aiart\V20221229\AiartClient;
use TencentCloud\Aiart\V20221229\Models\TextToImageRequest;
try {
// 实例化一个认证对象,入参需要传入腾讯云账户 SecretId 和 SecretKey
// 请注意保密密钥,不要将真实密钥泄露在代码中
$cred = new Credential("你的SecretId", "你的SecretKey");
// 实例化一个 HTTP 选项,可选的,没有特殊需求可以跳过
$httpProfile = new HttpProfile();
$httpProfile->setEndpoint("aiart.tencentcloudapi.com");
// 实例化一个 ClientProfile 对象,可选的,没有特殊需求可以跳过
$clientProfile = new ClientProfile();
$clientProfile->setHttpProfile($httpProfile);
// 实例化要请求产品的 Client 对象
$client = new AiartClient($cred, "ap-shanghai", $clientProfile);
// 实例化一个 TextToImageRequest 对象
$req = new TextToImageRequest();
$userInput = $_GET['prompt'];
$styles = $_GET['Styles'];
// 检查风格参数是否为整数数字
if (!is_numeric($styles)) {
// 风格参数无效,返回错误响应
$response = array(
'error' => 'Invalid Styles parameter'
);
header('Content-Type: application/json');
echo json_encode($response);
exit;
}
$params = array(
"Prompt" => $userInput,
"Styles" => array(strval($styles)) // 将风格参数转换为字符串
);
$req->fromJsonString(json_encode($params));
// 返回的 resp 是一个 TextToImageResponse 对象,与请求对象对应
$resp = $client->TextToImage($req);
// 输出 json 格式的字符串响应
header('Content-Type: application/json');
echo $resp->toJsonString();
} catch (TencentCloudSDKException $e) {
echo $e;
}
proxy.php
<?php
//
$apiUrl = '你的网站/draw.php';
$prompt = $_GET['prompt'];
$styles = $_GET['Styles'];
// 检查风格参数是否为整数数字
if (!is_numeric($styles)) {
// 风格参数无效,返回错误响应
$response = array(
'error' => 'Invalid Styles parameter'
);
header('Content-Type: application/json');
echo json_encode($response);
exit;
}
// 构建请求 URL,包括风格参数
$requestUrl = $apiUrl . '?prompt=' . urlencode($prompt) . '&Styles=' . urlencode($styles);
// 发起请求并获取响应
$response = file_get_contents($requestUrl);
// 将响应发送回前端
header('Content-Type: application/json');
echo $response;
代码目录
index.php 首页文件
draw.php 接口代码
proxy.php 代理接口文件
部署教程
把以上三个文件都放到网站中,并修改相应内容
且需要安装Composer依赖
具体可以参考腾讯云的文档和这个
API Explorer - 云 API - 控制台 (tencent.com)
宝塔Linux面板安装Composer依赖管理工具与PHP依赖包的方法宝塔面板安装composer苏音资源的博客-CSDN博客