99 lines
2.7 KiB
HTML
99 lines
2.7 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="en">
|
||
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title>Document</title>
|
||
<style>
|
||
* {
|
||
margin: 0;
|
||
padding: 0;
|
||
list-style: none;
|
||
text-decoration: none;
|
||
}
|
||
|
||
.list {
|
||
column-count: 5;
|
||
column-gap: 10px;
|
||
}
|
||
|
||
.list li {
|
||
margin-bottom: 10px;
|
||
}
|
||
|
||
.list li img {
|
||
width: 100%;
|
||
}
|
||
</style>
|
||
</head>
|
||
|
||
<body>
|
||
|
||
<input class="search" type="text" value="牛仔裤" placeholder="输入关键词" />
|
||
<button class="submit">搜索</button>
|
||
|
||
<ul class="list">
|
||
|
||
</ul>
|
||
|
||
</body>
|
||
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
|
||
<script src="https://cdn.bootcdn.net/ajax/libs/axios/1.5.0/axios.js"></script>
|
||
<script>
|
||
let pcursorNum = '', feedsList = [], filterList = [], intervalId = 0;
|
||
|
||
axios.defaults.baseURL = 'http://127.0.0.1:8000/api/v1';
|
||
axios.interceptors.response.use(response => response.data, error => Promise.reject(error));
|
||
|
||
// 点击 搜索按钮 使用【视频预览图地址】进行 视频&文字的多模态搜索，
|
||
// 会在后端进行 ai批量任务计算，接口返回 task_id
|
||
$(".submit").click(async () => {
|
||
let { task_id } = await axios.post('/ai/text_search_video', {
|
||
keyWord: $(".search").val(),
|
||
imgList: feedsList.map(v => v.photo.coverUrl)
|
||
})
|
||
checkTaskStatus(task_id)
|
||
})
|
||
|
||
// 使用 task_id 轮询，查询 任务计算 结果，如果为 true
|
||
// 结束 轮询，根据后端返回的 搜索结果 index 下标集合从原始数据中，
|
||
// 取出数据，存储 filterList 并渲染页面
|
||
async function checkTaskStatus(task_id) {
|
||
intervalId = setInterval(async () => {
|
||
let { status, index } = await axios.get('/ai/task_status', {
|
||
params: { task_id }
|
||
});
|
||
if (status) {
|
||
clearInterval(intervalId)
|
||
renderItem(index.map(v => feedsList[v]))
|
||
}
|
||
}, 3000)
|
||
}
|
||
|
||
async function getIndex() {
|
||
let { feeds, pcursor } = await axios.get('/ks/like', {
|
||
params: { pcursor: pcursorNum }
|
||
})
|
||
|
||
pcursorNum = pcursor
|
||
feedsList = feeds
|
||
renderItem(feedsList)
|
||
}
|
||
|
||
function renderItem(data) {
|
||
$(".list").empty()
|
||
data.forEach((v, i) => {
|
||
$(".list").append(`
|
||
<li>
|
||
<img src="${v.photo.coverUrl}" alt="">
|
||
</li>
|
||
`)
|
||
});
|
||
}
|
||
|
||
getIndex()
|
||
|
||
</script>
|
||
|
||
</html> |