若你想用HTML+JS+PHP和DeepSeek的API来做一个根据文字生成图片的网站。首先，需要确认各个技术部分如何配合。前端用HTML和jQuery处理用户输入和显示结果，后端用PHP调用API，然后返回生成的图片链接。
如果你对前端比较熟悉，但后端和API调用可能不太了解。需要分步骤解释，先做前端界面，再处理后端逻辑。可能要注意跨域问题，所以用PHP作为中间层，而不是直接在前端调用API，这样可以隐藏API密钥，更安全。
需要获取DeepSeek的API密钥，如果你不知道如何申请，我需要提醒你去官网注册账号。然后，前端用jQuery的Ajax发送用户输入到PHP后端，PHP再用curl请求DeepSeek的API，获取图片URL后返回给前端显示。
可能要考虑错误处理，比如API调用失败的情况，给用户提示。还有加载状态，比如生成图片时显示“生成中...”。界面设计要简洁，输入框和按钮，下面显示图片。
另外需要处理响应格式，确保PHP正确解析API返回的数据，提取图片URL。用户可能需要调整参数，比如图片尺寸，所以可以在HTML里加个下拉菜单选择尺寸，虽然示例里没有，但用户可能后续需要扩展。
最后，测试整个流程，确保前端发送请求，后端正确处理，并返回图片。提醒用户替换API密钥，部署到支持PHP的服务器。最后还需要考虑性能，比如限制请求频率，或者添加加载动画提升用户体验。
话不多说，先看演示示例：
https://h5.sumer.work/deepseek/image.html
演示截图：
暗黑风格：
以下是详细代码：
HTML端：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>AI图片生成器</title>
<link rel="stylesheet" href="styles.css">
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="script.js"></script>
</head>
<body>
<div class="container">
<h1>AI图片生成器</h1>
<textarea id="description" placeholder="请输入图片描述文字..." rows="4" cols="50"></textarea>
<div class="options">
<label for="style">图片风格：</label>
<select id="style">
<!-- 预设风格选项，如二次元、素描等，可按需添加 -->
<option value="anime">二次元</option>
<option value="sketch">素描</option>
<option value="3d">3D</option>
<!-- 更多风格... -->
</select>
<label for="ratio">图片尺寸比例：</label>
<select id="ratio">
<option value="3:4">3:4</option>
<option value="16:9">16:9</option>
<option value="1:1">正方形</option>
<!-- 更多比例... -->
</select>
</div>
<button id="generateBtn">生成图片</button>
<div id="loading" class="loading">生成中...</div>
<div id="result" class="result"></div>
</div>
</body>
</html>
CSS端：
body {
font-family: Arial, sans-serif;
background-color: #f4f4f4;
margin: 0;
padding: 20px;
}
.container {
max-width: 600px;
margin: 0 auto;
background: #fff;
padding: 20px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
textarea {
width: 100%;
padding: 10px;
margin-bottom: 10px;
border: 1px solid #ccc;
border-radius: 4px;
}
.options {
margin-bottom: 10px;
}
label {
margin-right: 10px;
}
select {
padding: 5px;
border: 1px solid #ccc;
border-radius: 4px;
}
button {
padding: 10px 20px;
background-color: #007bff;
color: #fff;
border: none;
border-radius: 4px;
cursor: pointer;
}
button:hover {
background-color: #0056b3;
}
.loading {
display: none;
color: #666;
margin-top: 10px;
}
.result {
display: none;
margin-top: 20px;
text-align: center;
}
.result img {
max-width: 100%;
height: auto;
}
JS端：
$(document).ready(function() {
$('#generateBtn').click(function() {
var description = $('#description').val();
var style = $('#style').val();
var ratio = $('#ratio').val();
if (!description) {
alert('请输入图片描述文字！');
return;
}
$('#loading').show();
$('.result').hide();
$.ajax({
type: 'POST',
url: 'generate.php',
data: {
description: description,
style: style,
ratio: ratio
},
success: function(response) {
if (response.success) {
$('#result').html('<img src="' + response.data.url + '" alt="Generated Image">');
$('.result').show();
} else {
alert('生成图片失败：' + response.error);
}
},
error: function() {
alert('请求失败，请稍后再试！');
},
complete: function() {
$('#loading').hide();
}
});
});
});
PHP端：
<?php
header('Content-Type: application/json');
// 替换为您的DeepSeek API密钥
$apiKey = 'YOUR_DEEPSEEK_API_KEY';
$description = $_POST['description'] ?? '';
$style = $_POST['style'] ?? 'default'; // 默认风格
$ratio = $_POST['ratio'] ?? '3:4'; // 默认比例
if (empty($description)) {
echo json_encode(['success' => false, 'error' => '描述文字不能为空！']);
exit;
}
$data =
'prompt' => $description,
'style' => $style, // 假设DeepSeek API支持该参数，具体需参考API文档
'size' => $ratio, // 假设DeepSeek API支持该参数或需转换为具体尺寸，如'1024x768'
// 其他可能的参数，如'n' => 1（生成数量）等，根据API文档添加
];
$ch = curl_init();
curl_setopt($ch, CURLOPT_URL, 'https://api.deepseek.com/v1/images/generations'); // 假设的API端点，需替换为实际端点
curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);
curl_setopt($ch, CURLOPT_POST, true);
curl_setopt($ch, CURLOPT_POSTFIELDS, json_encode($data));
curl_setopt($ch, CURLOPT_HTTPHEADER,
'Content-Type: application/json',
'Authorization: Bearer ' . $apiKey
]);
$response = curl_exec($ch);
$httpCode = curl_getinfo($ch, CURLINFO_HTTP_CODE);
curl_close($ch);
if ($httpCode !== 200) {
echo json_encode(['success' => false, 'error' => 'API请求失败！']);
exit;
}
$result = json_decode($response, true);
// 假设API返回的数据结构中有'data.url'作为生成的图片URL
echo json_encode([
'success' => true,
'data' =>
'url' => $result['data']['url'] ?? '' // 根据实际API返回的数据结构修改
]
]);
?>注意事项：
API文档：确保您已阅读并理解了DeepSeek API的文档，以便正确设置请求参数和解析响应数据。
API密钥：将YOUR_DEEPSEEK_API_KEY替换为您的实际API密钥。
错误处理：根据需要添加更多的错误处理逻辑，以处理可能的异常情况。
安全性：考虑在生产环境中添加额外的安全措施，如输入验证、API请求限制等。
样式调整：根据需要调整CSS样式以匹配您的网站设计。
跨域问题：如果前端和后端部署在不同的域上，可能需要处理跨域资源共享（CORS）问题。
源码下载：
下载地址：点击下载
示例演示：
演示地址：点击预览
参考文献：
1、基于Uni-app前端框架的SUMER UI3.0组件库
2、uniapp精仿支付宝UI界面源码下载，基于SumerUI一款仿支付宝APP
3、uniapp精仿微信源码，基于SumerUI一款仿微信APP应用
SUMER UI【用于开发APP、小程序、H5网站、毕业设计…】
评论