pranavSIT
/

PaliOpenVocabSegmentation

Model card Files Files and versions Community

PaliOpenVocabSegmentation / big_vision /tools /lit_demo /src /playground.html

pranavSIT

added pali inference

74e8f2f 9 months ago

raw

history blame contribute delete

2.71 kB

	<!--
	@license
	Copyright Big Vision Authors

	Licensed under the Apache License, Version 2.0 (the "License");
	you may not use this file except in compliance with the License.
	You may obtain a copy of the License at

	http://www.apache.org/licenses/LICENSE-2.0

	Unless required by applicable law or agreed to in writing, software
	distributed under the License is distributed on an "AS IS" BASIS,
	WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
	See the License for the specific language governing permissions and
	limitations under the License.
	-->

	<!doctype html>

	<script src="exports_bin.js"></script>

	<p>
	A simple demonstration how to use LiT models in a JS application using global exports.
	See source code of this file for API usage.
	</p>

	<pre id="output"></pre>
	<input type="text"> <input type="text"> <input type="text"> <input type="text"> <input type="text">
	<button id="compute">compute</button>

	<div id="imgs"></div>

	<script>

	const output = document.querySelector('#output');
	const prompts = [...document.querySelectorAll('input')];
	const compute = document.querySelector('#compute');
	let imgId = null;

	async function demo() {
	// Optionally pointing to different models/images. That URL should contain
	// files like baseUrl/data/models/<name>/tfjs/model.json and
	// baseUrl/data/images/info.json
	lit.setBaseUrl('https://google-research.github.io/vision_transformer/lit');

	// Load image data.
	output.textContent = 'loading... ';
	const data = new lit.ImageData();
	await data.load();

	// Show all images.
	const imgs = document.querySelector('#imgs');
	data.rows.forEach((row, idx) => {
	const img = document.createElement('img');
	img.src = lit.getImageUrl(row.id);
	imgs.append(img);
	img.addEventListener('click', () => {
	// Select image for similarity computation.
	[...document.querySelectorAll('#imgs img')].map(e => e.className = '');
	img.className = 'selected';
	imgId = row.id;
	})
	})

	// Load model (refers to baseUrl/data/models subdirectory).
	const model = new lit.Model('tiny');
	await model.load(progress => output.textContent = 'loading... ' + Math.round(100*progress) + '%');
	output.textContent = 'ready!';

	compute.addEventListener('click', () => {
	// Compute model probabilities.
	const texts = prompts.map(e => e.value);
	const imgIdx = model.zimgIds.indexOf(imgId);
	const probs = model.computeProbabilities(texts, imgIdx);
	output.innerText = 'probs = ' + probs;
	})
	}

	demo();

	</script>

	<style>
	#imgs { margin-top: 2rem; }
	#imgs img {
	width: 64px;
	height: 64px;
	opacity: 0.5;
	cursor: pointer;
	}
	#imgs img.selected { opacity: 1.0; }
	</style>