Skip to content

C
chatgpt-prompts

AI原吾 / chatgpt-prompts

通知 2
Star 144
Fork 27
C
chatgpt-prompts
提交 18b13a78 编写于 作者: 6 62cacc1fcf7e861cf6c3b88a
浏览文件
操作

UPDATE

上级 af5fa1b0
隐藏空白更改
内联 并排
Showing with 225 addition and 1 deletion
main.py
浏览文件 @ 18b13a78
print('欢迎来到 InsCode') #!/usr/bin/env python
\ No newline at end of file # -*- coding: utf-8 -*-
from flask import Flask, render_template, jsonify
import dataset
app = Flask(__name__)
# 连接到SQLite数据库
db = dataset.connect('sqlite:///resources/urls.db')
@app.route('/')
def index():
return render_template('index.html')
@app.route('/api/prompts')
def get_cards():
# 获取 cards 表中的所有数据
cards = db['cards'].all()
print(list(cards))
# 将数据转换为 JSON 格式，并返回
return jsonify(cards=list(cards))
if __name__ == '__main__':
app.run(debug=True,host="0.0.0.0",port=5001)
\ No newline at end of file
resources/urls.db 0 → 100644
浏览文件 @ 18b13a78
文件已添加
templates/index.html 0 → 100644
浏览文件 @ 18b13a78
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Prompts导航站</title>
<link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.6.0/css/bootstrap.min.css">
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.imagesloaded/4.1.4/imagesloaded.pkgd.min.js"></script>
<!-- 引入Masonry.js库 -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/masonry/4.2.2/masonry.pkgd.min.js"></script>
<!-- 引入Clipboard.js库 -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/2.0.8/clipboard.min.js"></script>
<!-- 引入jQuery Tag Cloud Plugin -->
<script src="https://cdn.jsdelivr.net/gh/mistic100/jQCloud@2.0.3/dist/jqcloud.min.js"></script>
<style>
#card-container {
margin-top: 20px;
}
</style>
</head>
<body>
<div class="container">
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container">
<a class="navbar-brand" href="#">Prompts导航站</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav"
aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link active" href="#" data-filter="all">全部</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#" data-filter="常用">常用</a>
</li>
</ul>
</div>
</div>
</nav>
<!-- 标签云容器 -->
<div id="tag-cloud" style="height:300px"></div>
<div id="card-container" class="row"></div>
</div>
<script>
// 使用 Ajax 获取数据，并渲染卡片列表
$.ajax({
url: '/api/prompts',
type: 'GET',
dataType: 'json',
success: function (data) {
var allCards = [];
var allTags = new Set(); // 创建一个空集合用于存储所有标签
// 遍历卡片列表，生成 HTML 代码，并添加到页面中
data.cards.forEach(function (card) {
var html = '<div class="col-md-4 mb-3" data-tags="' + card.tags +
'"><div class="card"><div class="card-body"><h5 class="card-title">' + card
.title + '</h5><p class="card-text">' + card.intro +
'</p><p class="card-text">' + card.desc +
'</p><button type="button" class="btn btn-primary" data-clipboard-text="' +
card.desc + '">复制</button></div><ul class="list-group list-group-flush">';
card.tags.split(",").forEach(function (tag) {
html += '<li class="list-group-item">' + tag + '</li>';
allTags.add(tag.trim()); // 添加标签到集合中
});
html += '</ul></div></div>';
var cardElement = $(html);
$('#card-container').append(cardElement);
allCards.push(cardElement);
});
// 初始化复制按钮
new ClipboardJS('.btn');
// 使用瀑布流插件
var $cardContainer = $('#card-container');
$cardContainer.imagesLoaded(function () {
$cardContainer.masonry({
itemSelector: '.col-md-4',
columnWidth: '.col-md-4',
percentPosition: true
});
});
$('ul.navbar-nav a').on('click', function () {
var $this = $(this);
if (!$this.hasClass('active')) {
// 移除其他标签的激活状态
$('ul.navbar-nav a').removeClass('active');
// 激活当前标签
$this.addClass('active');
// 获取筛选条件
var filter = $this.data('filter');
// 移除所有卡片
$cardContainer.masonry('remove', allCards);
// 筛选卡片并添加匹配的卡片
var filteredCards = filter === 'all' ? allCards : allCards.filter(function (
card) {
return card.attr('data-tags').includes(filter);
});
console.log(filteredCards);
// 清空瀑布流布局
$cardContainer.empty();
// 加入筛选后元素
$cardContainer.append(filteredCards);
$cardContainer.masonry('appended', filteredCards);
// 重新布局瀑布流
$cardContainer.masonry('layout');
}
});
// 将标签集合转换为数组并处理
var tagData = Array.from(allTags).map(function (tag) {
return {
text: tag,
weight: Math.floor(Math.random() * 20) + 1,
filter: tag
};
});
console.log("tagData",tagData);
// 生成随机颜色
function getRandomColor() {
var letters = '0123456789ABCDEF';
var color = '#';
for (var i = 0; i < 6; i++) {
color += letters[Math.floor(Math.random() * 16)];
}
return color;
}
// 将随机颜色应用到词元素块
for (var i = 0; i < tagData.length; i++) {
tagData[i].color = getRandomColor();
}
// 初始化标签云
$('#tag-cloud').jQCloud(tagData, {
shape: 'rectangular',
autoResize: true,
fontSize: {
from: 0.1,
to: 0.02
},
afterCloudRender: function () {
// 遍历词元素块，为每个元素添加 data-filter 属性
$('#tag-cloud span').each(function (i) {
var tag = $(this).text();
$(this).attr('data-filter', tagData[i]['filter']);
});
}
});
// 绑定标签点击事件
$('#tag-cloud').on('click', "span",function () {
// 获取对应的筛选值
var filter = $(this).data('filter');
// 移除所有卡片
$cardContainer.masonry('remove', allCards);
// 筛选卡片并添加匹配的卡片
var filteredCards = filter === 'all' ? allCards : allCards.filter(function (
card) {
return card.attr('data-tags').includes(filter);
});
console.log(filteredCards);
// 清空瀑布流布局
$cardContainer.empty();
// 加入筛选后元素
$cardContainer.append(filteredCards);
$cardContainer.masonry('appended', filteredCards);
// 重新布局瀑布流
$cardContainer.masonry('layout');
});
},
error: function (xhr, status, error) {
alert('获取数据失败：' + error);
}
});
</script>
</body>
</html>
\ No newline at end of file
urls.db 0 → 100644
浏览文件 @ 18b13a78
文件已添加
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或