Spaces:

malcolmrey
/

browser

Running

App Files Files Community

browser / index.html

malcolmrey

Upload 7 files

06fca79 verified 16 days ago

raw

history blame

8.31 kB

	<!DOCTYPE html>
	<head>
	<script type="text/javascript" src="data-civitai.js"></script>
	<style>
	body {
	color: whitesmoke;
	background-color: rgb(13, 46, 11);
	}

	.mainContent {
	position: absolute;
	margin-top: 20px;
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	}

	.searchBox {
	margin-top: 15px;
	margin-left: 20px;
	}

	.found {
	width: 30px;
	}

	.element {
	padding: 0;
	margin: 3px;
	border: 1px solid rgb(5, 90, 0);
	display: inline-block;
	position: relative;
	width: 192px;
	height: 283px;
	}

	.element .modelType {
	position: absolute;
	padding: 2px;
	padding-left: 4px;
	padding-right: 4px;
	right: 0;
	background-color: rgba(0, 0, 0, 0.5);
	bottom: 22px;
	}

	.element .modelName {
	background-color: rgba(50, 217, 8, 0.15);
	text-overflow: ellipsis;
	overflow: hidden;
	white-space: nowrap;
	padding-left: 2px;
	}

	.element .modelCreator {
	position: absolute;
	background-color: rgba(0, 0, 0, 0.5);
	padding: 2px;
	padding-left: 4px;
	padding-right: 4px;
	bottom: 22px;
	}

	.statsBox {
	position: relative;
	top: -26px;
	height: 22px;
	background-color: rgba(0, 0, 0, 0.5);
	}

	.statsBox .statsDownloadCount {
	position: absolute;
	top: 0;
	left: 0;
	}

	.statsBox .statsFavoriteCount {
	position: absolute;
	top: 0;
	left: 52px;
	}

	.statsBox .statsCommentCount {
	position: absolute;
	top: 0;
	left: 105px;
	}

	.statsBox .statsRating {
	position: absolute;
	top: 0;
	left: 141px;
	}
	</style>
	</head>
	<body>
	<input
	class="searchBox"
	id="search"
	type="text"
	onkeyup="javascript:searchModels(this.value);"
	placeholder="search"
	/>
	<button
	onclick="javascript:clearCurrentSearchValue(); javascript:searchModels(getCurrentSearchValue())"
	>
	Clear
	</button>

	Found: <input class="found" id="found" type="text" readonly />

	<label>
	<input
	id="groupByType"
	type="checkbox"
	onclick="javascript:searchModels(getCurrentSearchValue());"
	/>
	Group
	</label>

	<label>
	<input
	id="selectedLora"
	type="checkbox"
	onclick="javascript:regenerateData(); searchModels(getCurrentSearchValue());"
	checked
	/>
	LoRA
	</label>

	<label>
	<input
	id="selectedLocon"
	type="checkbox"
	onclick="javascript:regenerateData(); searchModels(getCurrentSearchValue());"
	checked
	/>
	LoCon
	</label>

	<label>
	<input
	id="selectedEmbedding"
	type="checkbox"
	onclick="javascript:regenerateData(); searchModels(getCurrentSearchValue());"
	checked
	/>
	Embedding
	</label>

	<label>
	<input
	id="selectedCheckpoint"
	type="checkbox"
	onclick="javascript:regenerateData(); searchModels(getCurrentSearchValue());"
	/>
	Checkpoint
	</label>

	<label>
	<input
	id="selectedFlux"
	type="checkbox"
	onclick="javascript:regenerateData(); searchModels(getCurrentSearchValue());"
	/>
	Flux
	</label>

	<label>
	<input
	id="selectedWan"
	type="checkbox"
	onclick="javascript:regenerateData(); searchModels(getCurrentSearchValue());"
	/>
	WAN
	</label>

	<div id="mainContent" class="mainContent"></div>

	<script type="text/javascript">
	let allElements = [
	...models.loras,
	...models.checkpoints,
	...models.lycorises,
	...models.embeddings,
	...models.fluxes,
	...models.wans,
	].sort(compare);
	let allElementsGroupped = [
	...models.loras.sort(compare),
	...models.checkpoints.sort(compare),
	...models.lycorises.sort(compare),
	...models.embeddings.sort(compare),
	...models.fluxes.sort(compare),
	...models.wans.sort(compare),
	];
	const creator = 'malcolmrey';

	function regenerateData() {
	allElements = [
	...(document.getElementById('selectedLora').checked
	? models.loras
	: []),
	...(document.getElementById('selectedCheckpoint').checked
	? models.checkpoints
	: []),
	...(document.getElementById('selectedLocon').checked
	? models.lycorises
	: []),
	...(document.getElementById('selectedEmbedding').checked
	? models.embeddings
	: []),
	...(document.getElementById('selectedFlux').checked
	? models.fluxes
	: []),
	...(document.getElementById('selectedWan').checked
	? models.wans
	: []),
	].sort(compare);

	allElementsGroupped = [
	...(document.getElementById('selectedLora').checked
	? models.loras
	: []
	).sort(compare),
	...(document.getElementById('selectedCheckpoint').checked
	? models.checkpoints
	: []
	).sort(compare),
	...(document.getElementById('selectedLocon').checked
	? models.lycorises
	: []
	).sort(compare),
	...(document.getElementById('selectedEmbedding').checked
	? models.embeddings
	: []
	).sort(compare),
	...(document.getElementById('selectedFlux').checked
	? models.fluxes
	: []
	).sort(compare),
	...(document.getElementById('selectedWan').checked
	? models.wans
	: []
	).sort(compare),
	];
	}

	function clearCurrentSearchValue() {
	document.getElementById('search').value = '';
	}

	function getCurrentSearchValue() {
	return document.getElementById('search').value;
	}

	function escapeHtml(unsafe) {
	return unsafe
	.replace(/&/g, '&')
	.replace(/</g, '<')
	.replace(/>/g, '>')
	.replace(/"/g, '"')
	.replace(/'/g, ''');
	}

	function formatNumber(num) {
	return Math.abs(num) > 999
	? Math.sign(num) * (Math.abs(num) / 1000).toFixed(1) + 'k'
	: Math.sign(num) * Math.abs(num);
	}

	function compare(a, b) {
	if (a.name < b.name) {
	return -1;
	}
	if (a.name > b.name) {
	return 1;
	}
	return 0;
	}

	function searchModels(value) {
	const lowerCaseValue = value.toLowerCase();

	const elementsToFilter = document.getElementById('groupByType').checked
	? allElementsGroupped
	: allElements;

	const filtered = elementsToFilter.filter((element) => {
	return (
	element.name.toLowerCase().includes(lowerCaseValue) \|\| value === '*'
	);
	});

	document.getElementById('found').value = filtered.length;

	let htmlContent = '';
	filtered.forEach((element) => {
	htmlContent += `<div class="element">
	<div class="modelName" title="${escapeHtml(element.name)}">${
	element.name
	}</div>
	<div class="modelType">${
	element.type === 'TextualInversion' ? 'Embedding' : element.type
	}</div>
	<div class="modelCreator" title="${creator}">${creator}</div>
	<div><a href='${element.url}' target='_blank'><img src='${
	element.imageUrl
	}' height="264" width="192" title='[${element.id}] ${
	element.url
	}'/></a></div>
	<div class="statsBox">
	<div class="statsDownloadCount" title="⬇️${
	element.stats.downloadCount
	}">⬇️${formatNumber(element.stats.downloadCount)}</div>
	<div class="statsFavoriteCount" title="❤️${
	element.stats.favoriteCount
	}">❤️${element.stats.favoriteCount}</div>
	<div class="statsCommentCount" title="📃${
	element.stats.commentCount
	}">📃${element.stats.commentCount}</div>
	<div class="statsRating" title="📈${
	element.stats.ratingCount
	} / ⭐${element.stats.rating}">⭐${element.stats.rating}</div>
	</div>
	</div>`;
	});

	const contentDiv = document.getElementById('mainContent');
	contentDiv.innerHTML = htmlContent;
	}

	searchModels(getCurrentSearchValue());
	</script>
	</body>