DEMO | 1分钟快速实现一个AI绘画页面
通过此例子,您可以学习到如何在您的网页中快速接入一个AI绘画的过程,仅需1分钟,30行代码即可实现一个完整可用的AI绘画小demo
<html>
<head>
<meta charset="UTF-8">
<title>触站AI绘画API接入DEMO</title>
</head>
<body>
<div>
<input id="text" placeholder="AI词条" type="text"/>
<input id="submit" type="button" value="生成">
</div>
<div>
<div id="progress"></div>
<img id="img" style="width: 512px;height: 512px;display: none">
</div>
<script>
// 请联系商务获取token。
//注意!!!此示例仅供演示使用,请勿在浏览器环境中暴露您的token,可能会对您的账号造成不可预计的损失,请将token等授权流程放置在后端,此处仅做演示简化使用
const token = '<您的auth token>'
document.getElementById('submit').onclick = async function (e) {
const text = document.getElementById('text').value
if (!text) {
alert('请输入词条')
return
}
const img = document.getElementById('img')
const progress = document.getElementById('progress')
img.style.display = 'none'
progress.innerText = '0%'
e.target.disabled = 'disabled'
// 请求提交任务API,用于提交任务
const response = await fetch('https://ai.huashi6.com/aiapi/v1/draw', {
method: 'POST',
headers: {
'content-type': 'application/json',
'Auth-Token': token
},
// 详细参数请参考提交绘画任务API文档,此处仅为最小可用参数示例
body: JSON.stringify({
prompt: text,
modelStyleId: 1
})
})
const data = await response.json()
// 检查任务是否提交成功
if (data.code != 0) {
alert(data.msg)
return
}
const taskId = data.data.paintingSign
// 轮询获取当前任务进度,并且进行展示
const loop = async () => {
let lastState = null
try {
const rsp = await fetch('https://ai.huashi6.com/aiapi/v1/task/detail', {
method: 'POST',
headers: {
'content-type': 'application/json',
'Auth-Token': token
},
body: JSON.stringify({
taskId: taskId
})
})
const data = await rsp.json()
lastState = data.data.state
progress.innerText = `${data.data.progress * 100}%`
// state为success或者fail表示任务完成(成功/失败)
if (lastState === 'success') {
progress.innerText = `生成完成`
img.style.display = 'block'
// 任务成功,直接展示结果图
img.src = data.data.imgUrl
} else if (lastState === 'fail') {
progress.innerText = '生成失败'
} else if (data.data.current_image) {
img.style.display = 'block'
// 任务进行中,可以展示预览图
img.src = `data:image/jpeg;base64,${data.data.current_image}`
}
} finally {
if (lastState !== 'success' && lastState !== 'fail') {
setTimeout(loop, 3000)
} else {
e.target.attributes.removeNamedItem('disabled')
}
}
}
loop()
}
</script>
</body>
</html>
修改于 8 个月前