This folder contains samples for interacting with GitHub Models using JavaScript.
Multiple model-specific SDKs are compatible with the endpoint served under the GitHub Models catalog, such as openai and mistralai packages for their respective models. This makes it easy to port your existing code using one of those SDKs.
You can also use the azure-ai-inference package for a cross-model unified SDK.
To run a JavaScript sample, a command like the following in your terminal:
node samples/js/azure_ai_inference/multi_turn.js<div class="container">
<h1>Fashion & Accessories</h1>
<!-- Filters Section -->
<div class="filters">
<div class="filter-group">
<label for="category">Category:</label>
<select id="category">
<option value="all">All</option>
<option value="dresses">Dresses</option>
<option value="underwear">Underwear</option>
<option value="bags">Bags</option>
<option value="jewelry">Jewelry</option>
<option value="shoes">Shoes</option>
</select>
</div>
<div class="filter-group">
<label for="price">Price Range:</label>
<select id="price">
<option value="all">All</option>
<option value="0-50">$0 - $50</option>
<option value="50-100">$50 - $100</option>
<option value="100-200">$100 - $200</option>
</select>
</div>
<div class="filter-group">
<label for="sort">Sort By:</label>
<select id="sort">
<option value="popular">Most Popular</option>
<option value="price-low">Price: Low to High</option>
<option value="price-high">Price: High to Low</option>
</select>
</div>
</div>
<!-- Product Grid -->
<div class="product-grid" id="productGrid">
<!-- Placeholder Products -->
<div class="product-card" data-category="dresses" data-price="60">
<img src="https://via.placeholder.com/250" alt="Dress">
<h3>Elegant Evening Dress</h3>
<p>Perfect for special occasions</p>
<p class="price">$60</p>
<button class="add-to-cart">Add to Cart</button>
</div>
<div class="product-card" data-category="underwear" data-price="25">
<img src="https://via.placeholder.com/250" alt="Underwear">
<h3>Silk Lingerie Set</h3>
<p>Soft & comfortable</p>
<p class="price">$25</p>
<button class="add-to-cart">Add to Cart</button>
</div>
<div class="product-card" data-category="bags" data-price="120">
<img src="https://via.placeholder.com/250" alt="Bag">
<h3>Luxury Handbag</h3>
<p>Elegant & stylish</p>
<p class="price">$120</p>
<button class="add-to-cart">Add to Cart</button>
</div>
<div class="product-card" data-category="jewelry" data-price="80">
<img src="https://via.placeholder.com/250" alt="Jewelry">
<h3>Diamond Necklace</h3>
<p>Timeless elegance</p>
<p class="price">$80</p>
<button class="add-to-cart">Add to Cart</button>
</div>
<div class="product-card" data-category="shoes" data-price="60">
<img src="https://via.placeholder.com/250" alt="Shoes">
<h3>Fashion Sneakers</h3>
<p>Trendy & comfortable</p>
<p class="price">$60</p>
<button class="add-to-cart">Add to Cart</button>
</div>
</div>
</div>
<script>
document.getElementById("category").addEventListener("change", filterProducts);
document.getElementById("price").addEventListener("change", filterProducts);
document.getElementById("sort").addEventListener("change", sortProducts);
function filterProducts() {
let category = document.getElementById("category").value;
let priceRange = document.getElementById("price").value;
let products = document.querySelectorAll(".product-card");
products.forEach(product => {
let productCategory = product.getAttribute("data-category");
let productPrice = parseInt(product.getAttribute("data-price"));
let priceMatch = false;
if (priceRange === "all") {
priceMatch = true;
} else {
let [min, max] = priceRange.split("-").map(Number);
priceMatch = productPrice >= min && productPrice <= max;
}
if ((category === "all" || productCategory === category) && priceMatch) {
product.style.display = "block";
} else {
product.style.display = "none";
}
});
}
function sortProducts() {
let sortValue = document.getElementById("sort").value;
let productGrid = document.getElementById("productGrid");
let products = Array.from(productGrid.children);
products.sort((a, b) => {
let priceA = parseInt(a.getAttribute("data-price"));
let priceB = parseInt(b.getAttribute("data-price"));
if (sortValue === "price-low") return priceA - priceB;
if (sortValue === "price-high") return priceB - priceA;
return 0;
});
productGrid.innerHTML = "";
products.forEach(product => productGrid.appendChild(product));
}
</script>