AddEvent has developed a proprietary ecosystem of calendar, event and appointments scheduling management APIs that are used by thousands of companies around the world

AddEvent

addevent

If you've ever worked in vanilla Javascript, you might be familiar with adding event listeners to elements using the following formula: let element = document.querySelector('#button');

element.addEventListener('click', () => {
    console.log('some event content here...')
}) The above code will, of course, trigger a function that fires when is fired. Sometimes, though, you need to add an event listener to multiple elements - say, every button that exists on a page. You might have found that even if you have multiple elements on a page, the above approach only adds your event to one element - the first one. What gives? #button The issue is is only good for adding an event to one DOM element - and only matches one element too. So how do you add an event listener to multiple elements on a page? Let's look at the solution. addEventListener querySelector Adding Event Listeners to Multiple Elements Instead of using , we're going to use to match all elements on our page. The following code returns an item of type , consisting of all DOM elements matching . , we're going to need to loop through every matched element from our , and add events to each: querySelector querySelectorAll NodeList .button To add events to every element querySelector let elements = document.querySelectorAll('.button'); Javascript is weird because it doesn't return DOM elements as a simple array - it returns them as a . . NodeList If you want to learn about NodeLists in more detail, read my guide on that here In modern browsers, s behave a lot like arrays, so we can use to loop through each. To add an event to each then, we need to loop through it using . So adding a event to all elements looks like this: NodeList forEach .button forEach click .button let elements = document.querySelectorAll('.button');

elements.forEach((item) => {
    item.addEventListener('click', () => {
        console.log('some event content here...')
    })
}); , in older browsers like Internet Explorer, doesn't exist on s. Although this is not an issue in the modern day, you may find code where the result of is changed into an array and looped through. This achieves the same thing, but it means that we are looping through arrays, not s. However forEach NodeList querySelectorAll NodeList let elements = document.querySelectorAll('.button');
Array.prototype.forEach.call(elements, (item) => {
    item.addEventListener('click', function(e) {
        console.log('some event content here...')
    });
}); Also Published Here

Add Event Listener to Multiple Elements in Javascript 

Customizing Dashboards: Building a Custom Extensions Engine for Your Apps

"How Many Colors Can the Human Eye See?": The Application

Using MinIO and Python to Create Scalable and Efficient Event-driven Applications

স্কেলযোগ্য এবং দক্ষ ইভেন্ট-চালিত অ্যাপ্লিকেশন তৈরি করতে MinIO এবং Python ব্যবহার করে

Verwenden von MinIO und Python zum Erstellen skalierbarer und effizienter ereignisgesteuerter Anwendungen

Uso de MinIO y Python para crear aplicaciones basadas en eventos escalables y eficientes

Utiliser MinIO et Python pour créer des applications événementielles évolutives et efficaces

स्केलेबल और कुशल इवेंट-संचालित एप्लिकेशन बनाने के लिए मिनियो और पायथन का उपयोग करना

MinIO と Python を使用してスケーラブルで効率的なイベント駆動型アプリケーションを作成する

MinIO 및 Python을 사용하여 확장 가능하고 효율적인 이벤트 기반 애플리케이션 만들기

Usando MinIO e Python para criar aplicativos orientados a eventos escalonáveis e eficientes

Использование MinIO и Python для создания масштабируемых и эффективных приложений, управляемых событиями

Ölçeklenebilir ve Verimli Olay Odaklı Uygulamalar Oluşturmak için MinIO ve Python'u Kullanmak

Sử dụng MinIO và Python để tạo các ứng dụng hướng sự kiện có khả năng mở rộng và hiệu quả

使用 MinIO 和 Python 创建可扩展且高效的事件驱动应用程序

on how to integrate the into any React application with automatic reacquisition of a lock using . TLDR: LIVE demo 🚀 Screen Wake Lock API react-use-wake-lock Historically, browsers didn't support any APIs to control sleep settings. Devices usually turn off displays after some time to improve power usage, improve security, and prolong the life of hardware in general. However, this behavior does not always provide the best UX for users. In some cases, browsers are smart enough to prevent sleep by using heuristics like playing video. Some libraries utilize this to hack solutions for this problem (e.g., ). However, this comes with an extra penalty hit on performance and battery. NoSleep.js Modern browsers now support an official API to manage this process. This provides more reliable control over the sleep functionality. In certain scenarios, it's perfectly reasonable to prevent the device from locking (for instance, in systems like navigation, photo galleries, calling, etc.), which significantly enhances the overall user experience. Although this API is not fully standardized and is still in the stage, it has extensive browser support. This is particularly noteworthy since it is now also supported by Safari version 16.4 and above (including mobile Safari). As such, this API is currently . Working Draft supported by the majority of major browsers Let's take a closer look at how to use it in practice and what are its limitations. Screen Wake Lock API There are 3 important limitations when you are allowed to use this API: Your app should be in an active tab. Your app should be served from the . Secure Context Using this feature is not blocked by the Permissions Policy The API itself is quite straightforward and involves two steps: requesting a lock and releasing it. Being Promise-based, you need to wait for the promise to resolve in order to acquire the lock. There are two main parts in the API: - Interface that can be used to request the lock from the browser. WakeLock - Interface to the underlying lock that can be used to release the lock WakeLockSentinel So, let's connect all the pieces together. Requesting a Lock To request a lock, we need to use and invoke method. You need to provide the type of lock, but only type is supported at this moment. navigator.wakelock request() screen const requestScreenWakeLock = async () => {
  // Check if wakelock API is available
  if (!("wakeLock" in navigator)) {
    console.error("Screen Wake Lock API is not supported by the browser");
    return;
  }

  try {
    const wakeLock = await navigator.wakeLock.request("screen");
  } catch (err) {
    // There are various reason why lock might not be acquired such as tab is not active, low battery on a device, permissions
    console.error(`WakeLock request error: ${err.message}`);
  }
}; It's important to note that the browser might reject the request for several reasons, such as low battery level or page visibility, among others. Therefore, it's crucial to ensure that the Promise has been resolved to ensure success. Releasing a Lock Once you have a from API,  you can use it to release a lock. For this, you can simply call method on it and wait for the to resolve. You can also check the status of a lock in a property and . WakeLockSentinel request() release() Promise released type The simplest snippet: try {
  console.log('Released state before: 'wakeLock.released); // false

  await wakeLock.release();

  console.log('Released state after: 'wakeLock.released); // true
} catch (err) {
  console.error(`WakeLock release error: ${err.message}`);
} It's important to note that the browser might decide to release the lock even without a specific request from you. Therefore, to keep the state of the app in sync with the lock status, it's crucial to listen for the wake lock release event. wakeLock.addEventListener("release", () => {
  // the wake lock has been released
  console.log('Wake Lock has been released');
}); While the API itself appears quite straightforward, there are some nuances to consider when implementing it. For instance, since the lock will be auto-released when the browser is no longer active, you'll need to manage this aspect yourself. This involves listening for visibility changes in order to reacquire the lock. For pure JS implementation, you can check the and . MDN example source code However, in order to integrate it into a React-based app, it would be much easier to have a wrapper that provides a hook-based API to work with Screen Wake Lock API. Using Screen Wake Lock API in React I have wrapped this API into a React hook to make it much easier to use in any React application. The library offers a simple way to hide the complexities of handling the async nature of Screen Wake Lock API as well as automatically incorporate automatic reacquisition of a lock in case the app loses visibility (becomes inactive). react-use-wake-lock Additionally, it also supports TypeScript and has 100% test-coverage. Let's take a look at the simplest example. First, you need to install this library by running (or / depending on your preference) npm install react-use-wake-lock --save pnpm yarn Then, just add it to your React files as shown in a minimal example below import useWakeLock from "react-use-wake-lock";

function MinimalExampleComponent() {
  const { isSupported, isLocked, request, release } = useWakeLock();

  // isSupported: boolean - checks feature is supported by the browser
  // isLocked: boolean    - checks lock is currently active
  // request: () => void  - request lock, once successfully acquired isLocked will change to TRUE
  // release: () => void  - release the lock, once successfully released isLocked will change to FALSE

  return (
    <div>
      <h3>Screen Wake Lock API supported: {isSupported ? "Yes" : "No"}</h3>
      <h3>Locked: {`${isLocked ? "Yes" : "No"}`}</h3>
      <button type="button" onClick={() => (isLocked ? release() : request())}>
        {isLocked ? "Release" : "Request"}
      </button>
    </div>
  );
} This is just a . However, the library offers more control and error handling by specifying extra options to the hook. Feel free to check the or . minimal example full example code official documentation You can check this example or check the . minimal demo full example with support for events and error handling End-to-end demo on iOS (Safari) Conclusion Leveraging modern browser APIs is a powerful strategy that allows us to construct a superior user experience, effectively bridging the gap between web and native applications by bringing an app-like feel to the web. This article serves as a hands-on guide detailing how to utilize the modern Screen Wake Lock API within any application built on React. You can find the complete source code as well as demo and installation instructions for this example on GitHub . https://github.com/dlitsman/react-use-wake-lock

How to Use Screen Wake Lock API in React to Manage Screen Locking/Dimming in a Browser

In nearly all of my recent explorations of Generative AI, I've come to realize how important prompts are. That hasn't necessarily translated me into writing better prompts all the time, but being aware of the problem is at least one step towards correcting it, right? One of the things that I thought would help me personally would be to have a tool to quickly compare and contrast different prompts. Obviously, I could just open up multiple tabs in a browser, but I really wanted something more direct and simplified for my purposes. With that in mind, let me share what I've built. Prompt Tester Prompt Tester is my incredibly imaginatively named tool to... um... test prompts. It begins with one prompt: The idea is that you enter your initial prompt, and then click one or more times to add more prompts. When ready, you can then just click "Generate Results": Before showing some example results, let me talk a bit about how it was built. The Code The backend is an simple Node.js server that handles throwing up the static HTML and responding to the front-end API requests. Once again, I thank Todd Sharp for sharing his initial code with me. Here's the boring simple handling portion: incredibly async function handler(req, res) {
	console.log('Entered handler.', req.method, req.url);

	if(req.method === 'GET' && req.url.indexOf('favicon.ico') === -1) {
		res.writeHead(200, { 'Content-Type':'text/html' });
		res.write(fs.readFileSync('./demo.html'));
		res.end();
	} else if(req.method === 'POST' && req.url === '/api') {

		let body = '';
		req.on('data', chunk => {
			body += chunk.toString();
		});

		req.on('end', async () => {
			body = JSON.parse(body);
			console.log('BODY:\n', JSON.stringify(body, null, '\t'));

			let result = await callGemini(body.prompt);
			res.writeHead(200, { 'Content-Type':'application/json' });
			res.write(JSON.stringify(result));
			res.end();

		});

	}

}

const server = http.createServer(handler);
server.listen(3000);
console.log('Listening on port 3000'); And the part which just passes the prompt off to Google's . In theory, this could be changed to ChatGPT or any other service. callGemini Gemini API const MODEL_NAME = "gemini-pro";
const API_KEY = process.env.GOOGLE_AI_KEY;

const genAI = new GoogleGenerativeAI(API_KEY);
const model = genAI.getGenerativeModel({ model: MODEL_NAME });

async function callGemini(text) {

	const generationConfig = {
		temperature: 0.9,
		topK: 1,
		topP: 1,
		maxOutputTokens: 2048,
	};

	const safetySettings = [
		{ category: HarmCategory.HARM_CATEGORY_HARASSMENT, threshold: HarmBlockThreshold.BLOCK_MEDIUM_AND_ABOVE, },
		{ category: HarmCategory.HARM_CATEGORY_HATE_SPEECH,	threshold: HarmBlockThreshold.BLOCK_MEDIUM_AND_ABOVE, },
		{ category: HarmCategory.HARM_CATEGORY_SEXUALLY_EXPLICIT, threshold: HarmBlockThreshold.BLOCK_MEDIUM_AND_ABOVE, },
		{ category: HarmCategory.HARM_CATEGORY_DANGEROUS_CONTENT, threshold: HarmBlockThreshold.BLOCK_MEDIUM_AND_ABOVE, },
	];

	const parts = [
    	{text},
  	];

	const result = await model.generateContent({
		contents: [{ role: "user", parts }],
		generationConfig,
		safetySettings,
	});

	try {

		if(result.response.promptFeedback && result.response.promptFeedback.blockReason) {

			return { error: `Blocked for ${result.response.promptFeedback.blockReason}` };
		}
		const response = result.response.candidates[0].content.parts[0].text;
		return { response };
	} catch(e) {
		// better handling
		return {
			error:e.message
		}
	}
	
} I'm proud to say that I'm now, finally, doing some basic error handling and trying to expose to the user (me) why a prompt was blocked. The front end is relatively simple. I used for the core CSS (again, thank you Todd) and some vanilla JavaScript to handle adding new prompts and making the calls. Here's the HTML (minus the inline CSS): Milligram <h1>Prompt Tester</h1>

<p>
This tool helps you see the result of multiple prompts at the same time. The idea is to use similar prompts with different phrasing 
to see how it impacts the result.
</p>

<div id="prompts">
</div>

<template id="promptRow">
<div class="row">
	<div class="column column-33"><textarea placeholder="Enter your prompt."></textarea></div>
	<div class="column column-67 result"></div>
</div>
<hr>
</template>


<div class="float-right">
<button id="addPrompt">Add Prompt</button> <button id="generateResults">Generate Results</button>
</div> And then the JavaScript. Notice I used above to handle the prompt layout. This is the first time I've used that tag, and it was relatively easy. <template> let $template, $prompts, $addPromptsBtn, $generateResultsBtn;
let promptCount = 0;

document.addEventListener('DOMContentLoaded', init, false);
async function init() {
	
	$addPromptsBtn = document.querySelector('#addPrompt');
	$addPromptsBtn.addEventListener('click',  addPrompt, false);
	$generateResultsBtn = document.querySelector('#generateResults')
	$generateResultsBtn.addEventListener('click',  generateResults, false);
	$template = document.querySelector('#promptRow');
	$prompts = document.querySelector('#prompts');

	addPrompt();
}

function addPrompt() {
	promptCount++;
	const newPrompt = $template.content.cloneNode(true);
	$prompts.append(newPrompt);
}

async function generateResults() {
	// disable add prompt and generate
	$addPromptsBtn.setAttribute('disabled', 'disabled');
	$generateResultsBtn.setAttribute('disabled', 'disabled');

	let $results = document.querySelectorAll('div.result');
	// clear any previous results
	$results.forEach(r => r.innerHTML = '');

	/*
	gather prompts from the inputs
	*/
	let prompts = [];
	let $fields = document.querySelectorAll('#prompts textarea');
	for(f of $fields) prompts.push(f.value);

	let promises = [];
	for(p of prompts) promises.push(getResult(p));
	let results = await Promise.all(promises);

	// assign results to result area for each, handle errors - later
	// there's a one to one correspondance between our array of results and the result div
	for(let i=0;i<results.length;i++) {
		if(results[i].response) $results[i].innerHTML = marked.parse(results[i].response);
		else if(results[i].error) $results[i].innerHTML = `<strong>Error with Prompt: </strong> ${results[i].error}`;
	}

	$addPromptsBtn.removeAttribute('disabled');
	$generateResultsBtn.removeAttribute('disabled');

}

async function getResult(p) {
	console.log('get result for',p);
	// quick return on empty prompt
	if(p.trim() === '') return { response:'<strong>Enter a prompt.</strong>' };
	let req = await fetch('/api', { method:'POST', body: JSON.stringify({prompt:p.trim()})});
	let result = await req.json();
	return result;
} I that's all pretty simple DOM manipulation and API calling, but definitely let me know in a comment below if something doesn't make sense. Notice I fire off all my API calls at once and wait for them to finish. think Promise.all Also, note I use the library. The results from Google typically have Markdown, and this helps render them nicely in my little web app. marked All of this isn't terribly interesting I think, but let's look at some testing. As I said, I the style of prompt was important. Having it presented directly to me in a tool went a of a long way to reinforcing that. knew heck Sample Result - Gravity Let's start with a simple idea - explaining gravity but for different age groups. Because of the large size of the results, I'm going to use a bit of CSS here to help keep things sane. Prompt: explain gravity to me but make it appropriate for a child in 1st grade Gravity is a superpower that our planet has! It's like an invisible force that makes everything on Earth stay on the ground. Imagine you have a ball in your hand. When you drop it, what happens? It falls down, right? That's because of gravity. Gravity pulls the ball towards the center of the Earth, and so it falls to the ground. Gravity is also what keeps us on the ground. It's what keeps our feet planted firmly on the Earth and prevents us from floating away! Gravity is a very important force. It keeps everything in place and helps things work the way they do. Without gravity, we would all be floating around in space, and things would be very chaotic! Here's a fun way to think about gravity: imagine that the Earth is a giant magnet, and everything on Earth is made of metal. The magnet pulls the metal objects towards it, and that's what keeps them on the ground. Gravity is a very important and interesting force. It's one of the things that makes our planet such a unique and special place to live! Prompt: explain gravity to me but make it appropriate for a child in 7th grade Imagine you're playing with a ball. You toss it up in the air, and it comes back down to you. This is because of gravity. Gravity is a force that pulls things toward each other. It's what keeps you on the ground and what makes things fall down. The amount of gravity between two objects depends on their mass. The more mass an object has, the stronger its gravity is. That's why things like planets and stars have more gravity than things like people and cars. Gravity is also what keeps the planets in orbit around the sun. The sun's gravity is much stronger than the Earth's, so it pulls the Earth towards it. This keeps the Earth moving in a circle around the sun. Gravity is a very important force in our universe. It keeps things in place and makes things move. Without gravity, the planets would fly off into space, and we would all float away. Here are some fun facts about gravity: Gravity is responsible for the tides. The moon's gravity pulls on Earth's oceans, causing them to rise and fall. Gravity is the reason why we have an atmosphere. Without gravity, the air would just float away into space. Gravity is what makes it possible for us to walk. When we walk, our feet push against the ground, and the ground pushes back. This is what propels us forward. Gravity is the reason why we don't float away into space. Earth's gravity pulls us towards its center, keeping us on the ground. Note the typo in the prompt below. Gemini handled it just fine. Prompt: explain gravity to me but make it appropriate for a college-aged student Gravity: The Force of Attraction Gravity is a fundamental force in the universe responsible for keeping celestial bodies, such as planets, moons, and stars, in motion. It is also what keeps us firmly planted to the ground and allows objects to fall when dropped. Newton's Law of Universal Gravitation: The law of universal gravitation states that every object in the universe attracts every other object with a force proportional to the product of their masses and inversely proportional to the square of the distance between them. Mathematically, it can be expressed as: F = Gm1m2/r^2 Where: F is the gravitational force between two objects. G is the gravitational constant (6.674 × 10^-11 N m^2/kg^2). m1 and m2 are the masses of the two objects. r is the distance between the centers of the two objects. Significance of Gravity: The gravitational pull of larger celestial bodies keeps smaller ones revolving around them. For example, Earth's gravity keeps the moon in orbit, while Sun's gravity keeps Earth and other planets in their respective orbits. Keeps Celestial Bodies in Orbit: Gravity between the Earth and the moon causes ocean tides. As the moon orbits Earth, its gravitational pull creates a bulge in the ocean's water on the side facing the moon. Another bulge forms on the opposite side of Earth due to the inertial forces. As the Earth rotates, these bulges move across the planet's surface, resulting in high and low tides. Responsible for Tides: Gravity pulls objects towards Earth's center, preventing them from floating away. This phenomenon allows us to walk, stand, and interact with our environment. Keeps Objects on Earth: Gravity plays a crucial role in the formation of stars and galaxies. The gravitational collapse of massive clouds of gas and dust leads to the creation of new stars. Similarly, the gravitational pull of galaxies keeps them bound together, preventing them from dispersing. Formation of Stars and Galaxies: Albert Einstein's general relativity theory provides a more comprehensive understanding of gravity. It explains that gravity is not a force but rather a curvature of spacetime caused by the presence of mass or energy. This curvature affects the motion of objects, causing them to follow curved paths rather than straight lines. Relativity Theory: In conclusion, gravity is a fundamental force responsible for keeping celestial bodies in motion, tides, and the behavior of objects on Earth. It is a complex phenomenon that has been studied extensively over the centuries, and it continues to fascinate scientists and researchers to this day. Sample Result - Pets For my second test, I started with a basic prompt and then a better version that asked for specific types of details: (Quick editorial note - the tabular data below is a bit messy, but was messy in the original output.) not Prompt: why are cats so much better than dogs? Cats and dogs are both popular pets, and there is no definitive answer to the question of which one is better. Both cats and dogs have their own unique set of advantages and disadvantages, and the best pet for you will depend on your individual needs and preferences. Some people prefer cats because they are generally more independent than dogs. Cats are typically happy to entertain themselves, and they don't need to be walked or taken outside for exercise. This can be a big advantage for people who live in apartments or who have busy schedules. Cats are also known for being clean and tidy animals. They groom themselves regularly, and they typically use the litter box without any problems. This can be a big advantage for people who don't want to deal with the mess and smell of a dog. Of course, there are also some disadvantages to having a cat. Cats can be more expensive than dogs, and they can be more difficult to train. Cats are also more likely to scratch furniture and other household items. Ultimately, the decision of whether to get a cat or a dog is a personal one. There is no right or wrong answer, and the best pet for you will depend on your individual needs and preferences. Here is a table summarizing the key differences between cats and dogs: Characteristic Cat Dog Independence More independent Less independent Exercise needs Does not need to be walked or taken outside Needs to be walked or taken outside Cleanliness Cleans itself regularly Needs to be bathed regularly Training Can be difficult to train Easier to train Scratching May scratch furniture and other household items Does not typically scratch furniture Cost More expensive Less expensive Prompt: why are cats so much better than dogs? explain with a bulleted list of reasons that cover emotional well being and financial aspects Emotional well-being: Independence: Cats are more independent than dogs, which can be a good thing for people who want a pet that doesn't require a lot of attention. Low maintenance: Cats are generally lower maintenance than dogs. They don't need to be walked or groomed as often, and they can be left alone for longer periods of time. Quiet: Cats are generally quieter than dogs, which can be ideal for people who live in apartments or have noise-sensitive neighbors. Therapeutic: Studies have shown that cats can have a calming effect on humans, and they can help to reduce stress and anxiety. Financial aspects: Lower cost: Cats are generally less expensive to own than dogs. They eat less food, they need fewer vet visits, and they don't require as much grooming. Easier to travel with: Cats are easier to travel with than dogs. They can be transported in a carrier, and they don't need to be walked or exercised while you're away. Longer lifespan: Cats have a longer lifespan than dogs, on average. This means that you can enjoy your cat's companionship for many years to come. Sample Result - Chain of Thought Prompting The following test came from an presentation from AWS re:Invent: . I found a lot of great advice from this session, including a good overview of Chain of Thought prompting, where the idea is you provide information about the steps used to solve a problem to help the GenAI engine better solve a prompt. excellent AWS re:Invent 2023 - Prompt engineering best practices for LLMs on Amazon Bedrock (AIM377) Now, the example given in that presentation went like so: Q: Roger has 5 tennis balls. he buys 2 more cans of tennis balls. Each 
can has 3 tennis balls. How many tennis balls does he have now?

A: The answer is 11.

Q. The cafeteria had 23 apples. If they used 20 to make lunch and 
bought 6 more, how many apples do they have? In the presentation, the model in use incorrectly returned 27. In my test, it worked correctly, but I absolutely saw issues with math back when I built my last November. generative AI blackjack advice demo As I said, Gemini handled it fine: But in Prompt Tester, I tried the suggested CoT prompt: A: The answer is 9. Q: Roger has 5 tennis balls. he buys 2 more cans of tennis balls. Each 
can has 3 tennis balls. How many tennis balls does he have now?

A: Roger started with 5 balls. 2 cans of 3 tennis balls each is 6 
tennis balls. 5 + 6 = 11. The answer is 11.

Q. The cafeteria had 23 apples. If they used 20 to make lunch and 
bought 6 more, how many apples do they have? And the result was improved, showing how it got to the answer: A: The cafeteria had 23 apples. They used 20 apples for lunch, which 
means they have 3 apples left. They then bought 6 more apples, so 
they now have a total of 3 + 6 = 9 apples.

The answer is 9. The difference is pretty significant. The Code If this seems useful to you at all, feel free to grab the code from here: . As I mentioned, it shouldn't be that difficult to add or some such and use a different service. If you do, let me know! https://github.com/cfjedimaster/ai-testingzone/tree/main/prompt_tester callChatGPT

How to Test Multiple Variations of Generative AI Prompts

জেনারেটিভ এআই প্রম্পটগুলির একাধিক বৈচিত্র কীভাবে পরীক্ষা করবেন

So testen Sie mehrere Variationen generativer KI-Eingabeaufforderungen

Cómo probar múltiples variaciones de indicaciones de IA generativa

Comment tester plusieurs variantes d'invites d'IA générative

जेनरेटिव एआई प्रॉम्प्ट के एकाधिक विविधताओं का परीक्षण कैसे करें

生成 AI プロンプトの複数のバリエーションをテストする方法

Generative AI 프롬프트의 다양한 변형을 테스트하는 방법

Como testar múltiplas variações de prompts de IA generativos

Как протестировать несколько вариантов подсказок генеративного ИИ

Üretken Yapay Zeka İstemlerinin Çoklu Varyasyonlarını Test Etme

Cách kiểm tra nhiều biến thể của lời nhắc AI sáng tạo

如何测试生成式 AI 提示的多种变体

Coding Patterns Revealed 

Want to Master Javascript Design Patterns? Here's Everything You Need to Know!

জাভাস্ক্রিপ্ট ডিজাইন প্যাটার্নস আয়ত্ত করতে চান? আপনার যা জানা দরকার তা এখানে!

Möchten Sie Javascript-Designmuster beherrschen? Hier finden Sie alles, was Sie wissen müssen!

¿Quieres dominar los patrones de diseño de Javascript? ¡Aquí está todo lo que necesita saber!

Vous voulez maîtriser les modèles de conception Javascript ? Voici tout ce que vous devez savoir !

क्या आप जावास्क्रिप्ट डिज़ाइन पैटर्न में महारत हासिल करना चाहते हैं? यहां वह सब कुछ है जो आपको जानना आवश्यक है!

JavaScript デザインパターンをマスターしたいですか?知っておくべきことはすべてここにあります!

Javascript 디자인 패턴을 마스터하고 싶으십니까? 여기에 당신이 알아야 할 모든 것이 있습니다!

Quer dominar os padrões de design Javascript? Aqui está tudo o que você precisa saber!

Хотите освоить шаблоны проектирования Javascript? Вот все, что вам нужно знать!

Javascript Tasarım Desenlerinde Uzmanlaşmak İster misiniz? İşte Bilmeniz Gereken Her Şey!

Bạn muốn nắm vững các mẫu thiết kế Javascript? Đây là tất cả mọi thứ bạn cần biết!

想掌握 Javascript 设计模式吗？这是您需要了解的一切！

How to Write Your Own Typesafe React Router in 500 Lines

কিভাবে 500 লাইনে আপনার নিজের টাইপসেফ রিঅ্যাক্ট রাউটার লিখবেন

So schreiben Sie Ihren eigenen typsicheren React-Router in 500 Zeilen

Cómo escribir su propio enrutador Typesafe React en 500 líneas

Comment écrire votre propre routeur Typesafe React en 500 lignes

500 पंक्तियों में अपना खुद का टाइपसेफ रिएक्ट राउटर कैसे लिखें

独自のタイプセーフな React Router を 500 行で書く方法

500줄로 나만의 Typesafe React Router를 작성하는 방법

Como escrever seu próprio roteador Typesafe React em 500 linhas

Как написать свой собственный Typesafe React Router в 500 строк

Kendi Typesafe React Router'ınızı 500 Satırda Nasıl Yazabilirsiniz?

Cách viết Bộ định tuyến React Typesafe của riêng bạn trong 500 dòng

如何用 500 行代码编写自己的类型安全 React 路由器

Hey everyone! I recently tackled the task of integrating Webflow OAuth into my app, and as someone who doesn't code, I wanted to share my approach using Xano as a backend and Webflow as a frontend. If you're a coding pro, please bear with me—no throwing rotten tomatoes! This is one no-coder to another, hoping to smoothen your journey a bit. TLDR: I've compiled every step into a video for those who prefer visual learning, but you'll find a detailed text version of the process below. https://youtu.be/bTUatl6eTec?embedable=true Understanding OAuth Let's quickly grasp the fundamental concept of how OAuth operates. Picture this: you're on holiday and want to rent an apartment in a foreign country. You find an apartment building where you can rent a unit. Upon arrival, instead of being given keys to all the flats, the owner sends you a one-time code to access your specific flat's key lockbox. You use this code to open the lockbox and retrieve a key card, granting you access to the apartment during your stay. In this analogy, Webflow represents the apartment owner, the one-time code serves as an access code, and the key card is analogous to an access token. If you need access to any information about a user's Webflow projects—such as lists of pages, assets, collections, or forms—you'll require an access token. This token is used with any API requests sent to Webflow on behalf of the user. In the example below, I'll demonstrate building a simple Webflow app that displays information about the user's project without storing the access token in my database (although in real-world scenarios, it's advisable to store tokens associated with users). Step 1: Create a New Webflow App Navigate to your Webflow dashboard's "Apps & Integrations" tab and create a new app. Provide general information about your app, including its name, description, and home page URL. Specify the required permissions—I'll use a data client app in my example, granting "Read" access to "Sites." You can adjust these permissions later if needed. The crucial pieces of information we need here are the and , automatically generated for your app. Leave the Redirect URL field blank for now; we'll revisit it in the next step. Client ID Client Secret Step 2: Setting Up a New Webflow Project as the Frontend Create a new Webflow project with two pages: Home and Sites. On the Home page, add a button labeled "Show Sites," which will trigger a request to Webflow for the access code. Set the button's URL to , replacing YOUR_CLIENT_ID with the actual Client ID obtained earlier. Adjust the URL if your app requires additional permissions. https://webflow.com/oauth/authorize?response_type=code&client_id=YOUR_CLIENT_ID&scope=sites%3Aread Clicking this button will display a permissions screen to the user, allowing them to choose which projects to grant access to. Upon authorizing the app, they'll be redirected to the Redirect URL—remember to copy the URL of the Sites page (the second page you created) and paste it into the Redirect URL field of your app. Upon completing this step, clicking "Show Sites" will redirect users to the Sites page, with the access code included in the URL. Step 3: Setting Up a Xano Project and Creating the First API Create a new project in Xano, and navigate to the APIs tab. Add a new API Group, and then within that group, add a new API Endpoint—let's call it "getToken." In the "getToken" endpoint: Add a text input named "accessCode" to receive the access code from the frontend. Make a POST request to with body parameters: https://api.webflow.com/oauth/access_token client_id: Your Client ID client_secret: Your Client Secret grant_type: authorization_code code: accessCode (using the variable from the input) Define the output of the first API request as "accessToken," which will be the access token associated with the user. Make a second API request (for demonstration purposes) to retrieve the user's site list—a GET request to . Include the following headers: https://api.webflow.com/v2/sites accept: application/json authorization: accessToken.response.result.access_token Define the output of the second API as "siteList," which represents the list of Webflow projects. Return the "siteList" in the response. Copy the API endpoint URL for later use. Step 4: Configuring a Frontend Request From Your Webflow Project Return to the Webflow project and open the Sites page—the page where users are redirected after granting access to their Webflow projects. Here, add the following JavaScript functions in the custom code area before the </body> tag. First, let's create the function to retrieve the sites: getSites() function getSites() {
  const url = window.location.search;
  const params = new URLSearchParams(url);
  const accessCode = params.get('code');
  const options = {
    method: 'POST',
    headers: {accept: 'application/json', 'content-type': 'application/json'},
    body: JSON.stringify({accessCode: accessCode})
  };
  fetch('YOUR_API_ENDPOINT', options)
    .then(response => response.json())
    .then(response => {
      const siteList = response.response.result.sites;
      showSites(siteList);
    })
    .catch(err => console.log(err));
} Then, let's create the function to display the retrieved sites: showSites() function showSites(sites) {
  const container = document.querySelector('#result');
  sites.forEach(site => {
    const siteDiv = document.createElement('div');
    siteDiv.classList.add('site');
    const siteContent = 
      `<h2>${site.displayName}</h2>
       <p><strong>ID:</strong> ${site.id}</p>
       <p><strong>Workspace ID:</strong> ${site.workspaceId}</p>
       <p><strong>Short Name:</strong> ${site.shortName}</p>
       <p><strong>Time Zone:</strong> ${site.timeZone}</p>
       <p><strong>Created On:</strong> ${site.createdOn}</p>
       <p><strong>Last Updated:</strong> ${site.lastUpdated}</p>
       <p><strong>Last Published:</strong> ${site.lastPublished}</p>
       <img src="${site.previewUrl}" alt="Preview">
     `;
    siteDiv.innerHTML = siteContent;
    container.appendChild(siteDiv);
  });
} Lastly, ensure that the function runs on page load: getSites() document.addEventListener('DOMContentLoaded', function() {
  getSites();
}); And there you have it! I hope this guide proves helpful for my fellow no-coders! Feel free to reach out if you have any questions or need further clarification. Happy coding!

No-Code Webflow OAuth: Make Authenticated Requests to the Webflow API Using Xano

নো-কোড ওয়েবফ্লো OAuth: Xano ব্যবহার করে Webflow API-তে প্রমাণীকৃত অনুরোধ করুন

No-Code-Webflow-OAuth: Stellen Sie mit Xano authentifizierte Anfragen an die Webflow-API

Webflow OAuth sin código: realice solicitudes autenticadas a la API de Webflow utilizando Xano

No-Code Webflow OAuth : effectuez des requêtes authentifiées à l'API Webflow à l'aide de Xano

नो-कोड वेबफ़्लो OAuth: Xano का उपयोग करके वेबफ़्लो API के लिए प्रमाणित अनुरोध करें

ノーコード Webflow OAuth: Xano を使用して Webflow API への認証済みリクエストを行う

코드 없는 Webflow OAuth: Xano를 사용하여 Webflow API에 인증된 요청 만들기

No-Code Webflow OAuth: Faça solicitações autenticadas para a API Webflow usando Xano

OAuth Webflow без кода: выполнение аутентифицированных запросов к API Webflow с помощью Xano

Kodsuz Webflow OAuth: Xano Kullanarak Webflow API'sine Kimliği Doğrulanmış İstekler Yapın

OAuth luồng web không mã: Thực hiện các yêu cầu được xác thực đối với API luồng web bằng Xano

无代码 Webflow OAuth：使用 Xano 向 Webflow API 发出经过身份验证的请求

Everybody wants to access web apps from their mobile phone and that’s why developers must create their React apps in a mobile-first fashion. There are multiple problems when comes to building apps for various devices such as many display resolutions, screen orientation, and touch events. Today, I’ll show you how to handle touch events in like a pro without any NPM libraries. Obviously, libraries can make your lives easier but did you know it only takes 50 lines of code to create your own component to handle mobile swipe events? I will teach you how to do so. React As always, my articles are based on the problems I was solving in real life. Recently I decided to migrate my version of the 2048 Game to Next.js and React 18 and this inspired me to rethink some parts of the initial design. To eliminate confusion, I will only focus on handling touch events in React and show you the best practices when comes to creating React apps that support mobile devices. open-source If you are intrigued by how to build the 2048 game from scratch, you should consider enrolling to my React course on Udemy. Link below. I will walk you through the entire process of creating the 2048 Game with animations. In the end, learning should bring us joy and fulfillment and nothing is more satisfying than making a complete game from scratch. Quick intro In early 2020, I released the very first version of my 2048 game. I wrote a short article describing my decision process and why I designed my code in a different way than other open-source versions. Immediately my article went viral on Reddit and FreeCodeCamp since it completely changed the perspective on this problem. My implementation was different than others because it supported mobile devices and had awesome animations. Other open source implementations of 2048 in React were janky and incomplete. Despite my efforts, the initial version wasn’t perfect and that’s why I decided to refresh it. I updated it to React 18, changed the build process by migrating it to Next.js, and rewrote styles from LESS to classic CSS. Still, I wasn’t happy about the fact I used a lot of NPM libraries - especially libraries responsible for dealing with mobile touch events. I used a library called and it was perfect to support multi-gesture touch events in JavaScript. Unfortunately, doesn’t support React and it forced me to create my own React wrapper for this library. But I found yet another problem - the NPM library hadn’t been updated for the last 8 years and it puzzled me. is downloaded more than 1.4 million times weekly but nobody is maintaining it. hammerjs hammerjs hammerjs Technically, my project wasn’t critical so I still could take advantage of this library. I always prioritize high quality of code but usage of unmaintained library cannot be considered as good practice. That’s why I created my component from scratch. Custom React Component - MobileSwiper I decided to call this component and declared two props as its arguments – and : MobileSwiper children onSwipe export default function MobileSwiper({ children, onSwipe }) {
	return null   
} Let me briefly explain them: allow me to inject any HTML elements inside this component. children is a callback that will be triggered each time user swipes within a given area. In my case, I want to enable mobile swipes on the game board only. All other parts of app should be scrollable. onSwipe To detect the swipeable area I created a reference to the DOM element. Basically, only this element will allow custom touch events. I did it by using the hook, and using it to reference a element: useRef div import { useRef } from "react"

export default function MobileSwiper({ children, onSwipe }) {
	const wrapperRef = useRef(null)

    return <div ref={wrapperRef}>{children}</div>
} Once I declared the area I was ready to focus on handling swipes. The easiest way to detect them is by comparing the starting and ending positions of the user's finger. This means I needed to store the initial position of the user's finger in state ( and coordinates) and compare it with the last known finger position (before the user lifts the finger off their screen): x y import { useState, useRef } from "react"

export default function MobileSwiper({ children, onSwipe }) {
	const wrapperRef = useRef(null)
	const [startX, setStartX] = useState(0)
	const [startY, setStartY] = useState(0)    

    return <div ref={wrapperRef}>{children}</div>
} Then I was ready to implement finger tracking, I created two callbacks using standard JavaScript touch events: used to set the starting position of the user's finger. handleTouchStart handling the final position of the user's finger and calculating the shift (delta) from the starting point. handleTouchEnd Let's look into the event handler first: handleTouchStart import { useCallback, useState, useRef } from "react"

export default function MobileSwiper({ children, onSwipe }) {
	const wrapperRef = useRef(null)
	const [startX, setStartX] = useState(0)
	const [startY, setStartY] = useState(0)    

	const handleTouchStart = useCallback((e) => {
        if (!wrapperRef.current.contains(e.target)) {
      		return
    	}

    	e.preventDefault()

	    setStartX(e.touches[0].clientX)
    	setStartY(e.touches[0].clientY)
  	}, [])
    
    return <div ref={wrapperRef}>{children}</div>
} Let me explain it: I wrapped this helper into the hook to improve the performance (caching). useCallback The statement checks if user is swiping within a declared area. If they do it outside of it,  the event will not be triggered and user will simply scroll the application. if disables the default scrolling event. e.preventDefault() The last two lines store and coordinates in state. x y Now let's focus the event handler: handleTouchEnd import { useCallback, useState, useRef } from "react"

export default function MobileSwiper({ children, onSwipe }) {
	const wrapperRef = useRef(null)
	const [startX, setStartX] = useState(0)
	const [startY, setStartY] = useState(0)    

	const handleTouchStart = useCallback((e) => {
        if (!wrapperRef.current.contains(e.target)) {
      		return
    	}

    	e.preventDefault()

	    setStartX(e.touches[0].clientX)
    	setStartY(e.touches[0].clientY)
    }, [])
    
  	const handleTouchEnd = useCallback((e) => {
        if (!wrapperRef.current.contains(e.target)) {
            return
        }
        
        e.preventDefault()
        
        const endX = e.changedTouches[0].clientX
        const endY = e.changedTouches[0].clientY
        const deltaX = endX - startX
        const deltaY = endY - startY
        
        onSwipe({ deltaX, deltaY })
    }, [startX, startY, onSwipe])
    
    return <div ref={wrapperRef}>{children}</div>
} As you can see, I’m taking the final and coordinates of user's finger and deduct the starting and coordinates from the final ones. Thanks to that I am able to calculate horizontal and vertical shift of the finger (aka deltas). x y x y Then I passed calculated deltas onto the callback which will be coming from other components to promote reusability. PS. If you remember, I declared the callback in the component's props. onSwipe onSwipe In the end, I needed to take advantage of created event callbacks and hook them into the event listener: import { useCallback, useEffect, useState, useRef } from "react"

export default function MobileSwiper({ children, onSwipe }) {
	const wrapperRef = useRef(null)
	const [startX, setStartX] = useState(0)
	const [startY, setStartY] = useState(0)    

	const handleTouchStart = useCallback((e) => {
        if (!wrapperRef.current.contains(e.target)) {
      		return
    	}

    	e.preventDefault()

	    setStartX(e.touches[0].clientX)
    	setStartY(e.touches[0].clientY)
  	}, [])
    
  	const handleTouchEnd = useCallback(
    (e) => {
        if (!wrapperRef.current.contains(e.target)) {
            return
        }
        
        e.preventDefault()
        
        const endX = e.changedTouches[0].clientX
        const endY = e.changedTouches[0].clientY
        const deltaX = endX - startX
        const deltaY = endY - startY
        
        onSwipe({ deltaX, deltaY })
    }, [startX, startY, onSwipe])   
    
 	useEffect(() => {
        window.addEventListener("touchstart", handleTouchStart)
        window.addEventListener("touchend", handleTouchEnd)
        
        return () => {
            window.removeEventListener("touchstart", handleTouchStart)
            window.removeEventListener("touchend", handleTouchEnd)
        }
  	}, [handleTouchStart, handleTouchEnd])
    
    return <div ref={wrapperRef}>{children}</div>
} Let’s use it The component is ready now and I can use it with my other components. As I mentioned at the beginning, I created this component to handle mobile swipes on the game board of my 2048 Game, and that’s where this example code comes from. MobileSwiper If you want to use it in your project feel free to copy & paste the function and hook it as I did it on the game board: handleSwipe import { useCallback, useContext, useEffect, useRef } from "react"
import { Tile as TileModel } from "@/models/tile"
import styles from "@/styles/board.module.css"
import Tile from "./tile"
import { GameContext } from "@/context/game-context"
import MobileSwiper from "./mobile-swiper"

export default function Board() {
	const { getTiles, moveTiles, startGame } = useContext(GameContext);
	
    // ... removed irrelevant parts ...
    
    const handleSwipe = useCallback(({ deltaX, deltaY }) => {
    	if (Math.abs(deltaX) > Math.abs(deltaY)) {
            if (deltaX > 0) {
            	moveTiles("move_right")
            } else {
            	moveTiles("move_left")
            }
        } else {
            if (deltaY > 0) {
                moveTiles("move_down")
            } else {
                moveTiles("move_up")
            }
        }
    }, [moveTiles])

 	// ... removed irrelevant parts ...

	return (
    	<MobileSwiper onSwipe={handleSwipe}>
      		<div className={styles.board}>
        		<div className={styles.tiles}>{renderTiles()}</div>
        		<div className={styles.grid}>{renderGrid()}</div>
      		</div>
    	</MobileSwiper>
  	)
} Let's focus on the handler first. As you can see, I‘m comparing if is greater than to estimate if the user swiped horizontally (left/right) or vertically (top/bottom). handleSwipe deltaX deltaY If it was a horizontal swipe, then: negative means they swiped to the left. deltaX positive means they swiped to the right. deltaX If it was a vertical swipe, then: negative means they swiped up. deltaY positive means they swiped down. deltaY Now, let's move on to the statement of the Board component. As you can see, here’s where my custom MobileSwiper component comes into play. I am passing the helper to the property, and wrapping the HTML code of the game board to enable swiping on it. return handleSwipe onSwipe It works but unfortunately, the result isn't perfect - scrolling events are mixed up with swipes: This is happening because modern browsers use passive event listeners to improve the scrolling experience on mobile devices. it means that the I added that event handlers never take effect. preventDefault To fix scrolling behavior, I disabled passive listeners on the component by setting flag to : MobileSwiper passive false import { useCallback, useEffect, useState, useRef } from "react"

export default function MobileSwiper({ children, onSwipe }) {
	// ... removed to improve visibility ...
    
 	useEffect(() => {
        window.addEventListener("touchstart", handleTouchStart, { passive: false })
        window.addEventListener("touchend", handleTouchEnd, { passive: false })
        // ... removed to improve visibility ...
  	}, [handleTouchStart, handleTouchEnd])
    
	// ... removed to improve visibility ...
} Now the scrolling behavior is gone and my 2048 Game works like a charm: Conclusion I am not against using libraries because they can speed up your work but sometimes you can build your custom solution in 50 lines of code just like I showed you today. That’s why i believe that you don’t need any library to handle mobile events in React. Wanna learn more tricks like this one? If you wish to learn more React tricks like this one, or simply you want to say ‘thank you’, consider joining my course on Udemy where I will teach you how to . You will not only learn clever tricks like that one but also find solutions to the most common mistakes that React developers make. create the 2048 game in React (special discount for HackerNoon readers) 🧑‍🎓 Join React 18 course on Udemy Believe it or not, this is the most up-to-date React 18 and Next.js course on Udemy. I released in January 2024 and I’ll keep updating it.

You Don't Need NPM Libraries To Handle Mobile Events

So far, most of my playing with Generative AI has been on the prompt side, with no real look at the various settings you can tweak in your calls. As I'm still very new to this, I'm trying my best to take things slowly. But every time I open and see the settings on the right, I keep nagging myself to take a deeper look. Google AI Studio You can also see the various settings options in the default code Studio spits out: const generationConfig = {
	temperature: 0.9,
	topK: 1,
	topP: 1,
	maxOutputTokens: 2048,
};

const safetySettings = [
	{ category: HarmCategory.HARM_CATEGORY_HARASSMENT, threshold: HarmBlockThreshold.BLOCK_MEDIUM_AND_ABOVE, },
	{ category: HarmCategory.HARM_CATEGORY_HATE_SPEECH,	threshold: HarmBlockThreshold.BLOCK_MEDIUM_AND_ABOVE, },
	{ category: HarmCategory.HARM_CATEGORY_SEXUALLY_EXPLICIT, threshold: HarmBlockThreshold.BLOCK_MEDIUM_AND_ABOVE, },
	{ category: HarmCategory.HARM_CATEGORY_DANGEROUS_CONTENT, threshold: HarmBlockThreshold.BLOCK_MEDIUM_AND_ABOVE, },
]; I thought today I'd take a look at , as I had a rough idea of what it implied. Temperature, at a high level, refers to how 'varied' a particular generated response can be. As an example, if I were to say, "I like ____", then you could make a list of what the next word would be, rated by how likely it is: temperature very Cats (VERY LIKELY) Star Wars (LIKELY) Books (LIKELY) Vegetables (UNLIKELY) At the highest temperature value, there will be a of variety. At the lowest level, no variety. Now, from what I know, that does mean that every response will be the same. Just very similar. This post, , does a great job explaining temperature (and other settings). lot not "Creatively Deterministic: What are Temperature and Top_P in Generative AI?" While it's relatively easy in AI Studio to adjust the temperature setting you see above, what I really wanted was a tool to help me see multiple results at once. So, I built one. :) Temperature Testing Tool My tool begins with a simple prompt: This is pretty vanilla HTML, so I won't share the code here (I've got a link to everything down below). Upon hitting the button, that's where the magic begins. Here's the JavaScript: // Testing ranges for temperature
const tempRanges = [0, 0.3, 0.6, 1];

// How many times to test per temp.
const perTemp = 2;

let $status, $results;

document.addEventListener('DOMContentLoaded', init, false);
async function init() {
	document.querySelector('#submitBtn').addEventListener('click', handleSubmit, false);
	$status = document.querySelector('#status i');
	$results = document.querySelector('#results');
} I begin with some variable declarations and a listener for . The first two variable sections are the crucial ones. Temperature values go from 0 (focus on only the highest probable response) to 1 (be more creative), and I decided to test four values in that range. DOMContentLoaded For each range in the array of temperatures, I do two tests. My thinking was that two results would be enough to see the variance in one particular temperature value. Carrying on... async function handleSubmit(e) {
	e.preventDefault();
	$results.innerHTML = '';

	let prompt = document.querySelector('#prompt').value.trim();
	if(prompt === '') return;

	/*
	We are going to loop perTemp times for each tempRange. In order to not
	get stopped by Gemini for too many requests, and to provide feedback to the user, 
	I'll report after each tempRange
	*/
	for(temp of tempRanges) {
		$status.innerText = `Getting results for temperature ${temp}.`;
		let promises = [];
		for(let i=0; i<perTemp; i++) {
			promises.push(getResult(prompt, temp));
		}

		let results = await Promise.all(promises);
		let html = `<h2>Temperature ${temp}</h2>`;
		for(let i=0; i < results.length; i++) {
			html += `
<p>
Result #${i+1}:<br/>
${results[i]}
</p>`;
		}
		$results.innerHTML += html;
		console.log(results);
	}

	$status.innerText = ``;
	
}

async function getResult(prompt, temperature) {
	console.log(`Calling getResult with prompt ${prompt} and ${temperature}`);
	let body = {
		prompt, 
		temperature
	};
	let req = await fetch('/api', { method: 'POST', body: JSON.stringify(body)});
	return await req.json();
} In this code, I loop over the range of temperatures and then make my two sample calls. When done, I render it out to the screen. The last function simply passes my prompt and temperature to the backend API. I'll share a screenshot, but it's a wall of text. This is only a small portion: long The backend is a lightweight Node.js server that basically handles outputting my HTML and responding to the request by the client-side JavaScript. Let's take a look at that, specifically the portion handling the Google Gemini call: POST import { GoogleGenerativeAI, HarmCategory, HarmBlockThreshold } from '@google/generative-ai';

const MODEL_NAME = "gemini-pro";
const API_KEY = process.env.GOOGLE_AI_KEY;

const genAI = new GoogleGenerativeAI(API_KEY);
const model = genAI.getGenerativeModel({ model: MODEL_NAME });

async function callGemini(text, temperature) {

	const generationConfig = {
		temperature,
		topK: 1,
		topP: 1,
		maxOutputTokens: 2048,
	};

	const safetySettings = [
		{ category: HarmCategory.HARM_CATEGORY_HARASSMENT, threshold: HarmBlockThreshold.BLOCK_MEDIUM_AND_ABOVE, },
		{ category: HarmCategory.HARM_CATEGORY_HATE_SPEECH,	threshold: HarmBlockThreshold.BLOCK_MEDIUM_AND_ABOVE, },
		{ category: HarmCategory.HARM_CATEGORY_SEXUALLY_EXPLICIT, threshold: HarmBlockThreshold.BLOCK_MEDIUM_AND_ABOVE, },
		{ category: HarmCategory.HARM_CATEGORY_DANGEROUS_CONTENT, threshold: HarmBlockThreshold.BLOCK_MEDIUM_AND_ABOVE, },
	];

	const parts = [
    	{text},
  	];

	const result = await model.generateContent({
		contents: [{ role: "user", parts }],
		generationConfig,
		safetySettings,
	});

	const response = result.response.candidates[0].content.parts[0].text;
	
	return response;
} This is pretty much the exact code spit out by Studio but wrapped into a function where the prompt and temperature can be passed in. This function has error handling, and that absolutely bit me in the butt. I'm going to be taking a look at those errors, and how to handle them, in a future blog post. no So what did I find? Results Here are the results of using the prompt: "Tell me a story about cats." First, temperature 0. Result 1 Once upon a time, in a quaint little town nestled amidst rolling hills, there lived a mischievous cat named Mittens. Mittens was known throughout the neighborhood for her playful antics and her insatiable curiosity. One sunny afternoon, as Mittens was basking in the warmth of the sunbeam that streamed through the window, she noticed a peculiar sound coming from the kitchen. Intrigued, she hopped off the window sill and tiptoed towards the source of the noise. Upon entering the kitchen, Mittens discovered a group of kittens huddled around a bowl of milk. Their tiny paws were eagerly reaching for the sweet liquid, and their eyes sparkled with delight. Mittens, being the adventurous cat she was, couldn't resist joining in on the fun. With a playful leap, Mittens landed gracefully in the midst of the kittens. She purred loudly, her tail swishing back and forth as she rubbed against their soft fur. The kittens, initially startled by the sudden intrusion, soon warmed up to Mittens' friendly presence. Together, they formed a circle around the bowl of milk, their whiskers twitching as they lapped up the delicious treat. Mittens, being the eldest and most experienced cat, took it upon herself to teach the kittens proper table manners. She showed them how to take turns and how to avoid spilling the milk. As the kittens learned and grew, they developed a deep bond with Mittens. They looked up to her as their mentor and protector. Mittens, in turn, cherished her role as the leader of the pack. She spent her days playing with the kittens, teaching them valuable life lessons and keeping them safe from harm. Word of Mittens' extraordinary kindness and wisdom spread throughout the town. People would often bring their cats to her, seeking her advice and guidance. Mittens welcomed each and every cat with open paws, offering them comfort, support, and a sense of belonging. And so, Mittens became known as the "Guardian Cat" of the town. She was loved and respected by all, both humans and cats alike. Her legacy lived on for generations, inspiring countless cats to follow in her paw prints and spread joy and kindness wherever they went. Result 2 Once upon a time, in a quaint little town nestled amidst rolling hills, there lived a mischievous cat named Mittens. Mittens was known throughout the neighborhood for her playful antics and her insatiable curiosity. One sunny afternoon, as Mittens was basking in the warmth of the sunbeam that streamed through the window, she noticed a peculiar sound coming from the kitchen. Intrigued, she hopped off the window sill and tiptoed towards the source of the noise. Upon entering the kitchen, Mittens discovered a group of kittens huddled around a bowl of milk. Their tiny paws were eagerly lapping up the delicious liquid, their whiskers quivering with delight. Mittens, unable to resist the temptation, joined the kittens and began to partake in the feast. As they drank, Mittens couldn't help but notice that one of the kittens was smaller and weaker than the others. It struggled to keep up with its siblings, and its eyes held a look of longing. Mittens, being the compassionate cat that she was, decided to help the little kitten. With a gentle nudge, Mittens pushed the other kittens aside and made room for the weaker one. She then curled her tail around the kitten, providing it with warmth and comfort. The little kitten, grateful for Mittens' kindness, nuzzled against her fur and began to purr softly. As the kittens continued to drink their milk, Mittens couldn't help but feel a sense of fulfillment. She had not only satisfied her own hunger but had also brought joy and comfort to a fellow creature. From that day forward, Mittens became known as the neighborhood's guardian angel. She would often be seen playing with the kittens, teaching them how to climb trees and chase butterflies. She would also bring them food and shelter when they were in need. The kittens, in turn, adored Mittens and would follow her everywhere she went. They would purr and rub against her legs, showing their affection and gratitude. And so, Mittens lived a long and happy life, surrounded by the love and companionship of her feline friends. She taught the town's residents the importance of kindness and compassion, and her legacy lived on long after she was gone. Notice that both start off the same and then diverge. To save on space, I'll skip to temperature 1 next. Result 1 Once upon a time, in a bustling city called Willow Brook, there lived a calico cat named Mittens. Mittens had a reputation for being a fearless explorer, always curious and eager for adventure. One day, Mittens embarked on her biggest expedition yet. She had heard rumors of a secret garden hidden deep within the city park, and she was determined to find it. When nightfall came, Mittens began her adventure, carefully sneaking out of her home and into the park. The park was silent, illuminated only by the soft glow of the moon. As she tiptoed through the winding paths, a faint scent of flowers carried by the wind caught her attention. Mittens followed the scent until she stumbled upon a large tree. Its branches were laden with bountiful blooms, and a gentle breeze sent petals raining down on her. Suddenly, a soft voice whispered, "Welcome, little traveler." Mittens looked around, her eyes widening in astonishment. Sitting on a branch was a beautiful cat; its fur shimmered like the night sky. "I am Esmerelda," the cat said, "and you are Mittens, the brave calico." Mittens was amazed. She had heard stories about Esmerelda, a magical cat said to hold the secret to unlocking the hidden garden. "Yes, Mittens," Esmerelda continued, "you have found the Enchanted Garden. But to enter, you must pass three challenges." Without hesitation, Mittens agreed. Her first challenge was to find a golden key hidden within the roots of an oak tree. With her sharp claws and determined spirit, Mittens discovered the key, its surface glowing brightly. Next, Esmerelda asked Mittens to gather dewdrops from the heart of a moonflower blossom. As Mittens gracefully leaped and climbed the tall stems, she carefully collected the sparkling dew in a tiny seashell. Finally, Mittens' last challenge was to sing a song that would make the trees sway and the flowers bloom. As Mittens lifted her voice, her melodious' tune enchanted the garden, which sprang to life with vibrant colors and dazzling lights. Esmeralda smiled, "Well done, little traveler. You have passed the challenges." With a gentle paw, Esmerelda touched the large oak tree, causing it to slowly open like a door, revealing an awe-inspiring paradise. Inside the Enchanted Garden, Mittens found lush meadows, sparkling fountains, and exotic creatures playing among the trees. It was a place of wonder and joy as if every storybook she had ever heard had come true. Mittens spent the entire night exploring the magical realm, amazed by its beauty. As dawn broke, she turned to Esmerelda and said, " Thank you for sharing this incredible place with me. Esmerelda purred softly. "You are welcome, Mittens. As long as you believe in magic, the garden will always be here for you to explore." From that day forward, Mittens became the guardian of the Enchanted Garden, a place where she could always find solace, friendship, and a sense of belonging among the natural beauty of Willow Brook. And so, the legend of the brave calico and the Enchanting Garden lived on, brought to life of the belief in magic and the wonders that can be found when one dares to explore beyond the ordinary. Result 2 Once upon a time, in a small and charming town called Willow Creek, nestled amidst rolling hills and blooming meadows, there lived two extraordinary cats. One was a sleek and graceful Siamese named Luna, whose shimmering white fur and piercing blue eyes radiated elegance and mystique. Her every movement exuded nimbleness, gliding through the streets of Willow Creek with an air of regal composure. Meet the second cat, a tabby by the name of Max, a playful and mischievous soul adorned with a coat of orange and black stripes. His sparkling green eyes twinkled with a mischievous glint; ears always perked, ever alert to the adventures that awaited him. His playful antics had become a legend among the townspeople, who were often greeted by his friendly antics and joyful meows. The companionship between Luna and Max was a sight to behold. They were inseparable, roaming the cobblestone streets together, their playful pursuits leading them to alleyways and secret paths known only to them. Their friendship was a true testament to the unwavering spirit and unbreakable bond between cats. During the day, they would bask lazily in the warm sunlight that bathed the town square, absorbing the melody of children playing and the laughter of friends sharing stories. At night, under the velvet sky adorned with shimmering stars, they would chase elusive fireflies and embark on daring expeditions, exploring the town's hidden nooks and crannies, their soft paw steps barely disturbing the tranquil silence. Many a local came to rely on the presence of Luna and Max, knowing that their playful chases and affectionate purrs brought an unexplainable joy and warmth to the heart. The elderly, feeling isolated, found solace in their presence, witnessing a simple yet profound beauty in their interactions. Children were captivated by their antics, watching in delight as they climbed trees or chased each other through the flowerbeds. One day, a traveling circus arrived in Willow Creek, filled with fanfare and vibrant colors. Luna and Max, captivated by the excitement, couldn't resist exploring the wonders this circus held. As they ventured into the largest tent, they were greeted with the mesmerising spectacle of trained cats, performing incredible feats of agility and balance. Inspired by their newfound passion, Luna and Max made a daring decision - they ran away to join the circus! They honed their skills tirelessly, practicing their balancing acts and performing stunning leaps. Their dedication and unwavering friendship caught the attention of the ringmaster, who recognized their talent and potential. Finally, the moment arrived when Luna and Max took center stage, their hearts pounding with excitement and anticipation. The audience, holding their breath in anticipation, witnessed an extraordinary performance, a mesmerizing ballet of agility and grace. Luna's elegant poise and Max's playful energy combined to create a symphony of motion that left the spectators awe-inspired. News of Luna and Max's incredible talents spread like wildfire, and they became stars of the circus, sharing their joy and laughter with audiences of all ages. Their unwavering friendship remained the heart of their performances, a symbol of the magical bond between cats that touched the hearts of all who witnessed their amazing journey. And so, Luna and Max, once ordinary cats roaming the streets of Willow Creek, found their destined path in the spotlight of the circus ring, leaving behind a legacy of a friendship that defied the ordinary and inspired the extraordinary in others. As you can tell, even if you only skimmed it, these are much more varied. I found having all these variations on screen at once, from the same prompt, a easy way to help me understand the impact of temperature. If you want to try this yourself, you can grab the bits here: real https://github.com/cfjedimaster/ai-testingzone/tree/main/temp_tester Download the code, the required bits, and set an environment variable for your Google API key. Run the script ( ) and it will open up a web server on port 3000. Lastly, just open that up with your browser. npm i node script.js As always, let me know what you think. I've got some ideas for other tools like this as a way of learning generative AI! Also published . here

Testing Generative AI Temperature Settings with Some Cat Stories

Hey there, fellow coders! Today, we'll learn how to create a fully responsive dropdown menu using HTML, CSS, and JavaScript. Our goal? To showcase a sleek and versatile dropdown menu that adapts seamlessly to different screen sizes, enhancing user experience without the need for extensive tutorials. Overview: In this project showcase, we'll dive into the creation of a dropdown menu that's not just visually appealing but also functional across various devices. By leveraging HTML for structure, CSS for styling, and JavaScript for interactivity, we'll craft a dynamic menu that reflects modern web design principles. Key Highlights: We'll lay the groundwork with HTML, structuring our navbar and dropdown menu components to create a solid foundation for our project. HTML Structure: With CSS, we'll add style and finesse to our dropdown menu, ensuring it looks polished and professional on any screen. CSS Styling: : Using JavaScript, we'll inject interactivity into our dropdown menu, allowing users to seamlessly navigate their way through our site. JavaScript Functionality Let's Dive In: From its humble beginnings in HTML to its stylish makeover with CSS and JavaScript magic, we'll showcase the evolution of our menu in action. Dropdown Menu Html Code: <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Drop Down Menu</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <nav class="navbar">
        <div class="logo">
            <img src="./navbar-icon.png" alt="">
        </div>
        <div class="toggle-btn">
            <div class="icon"></div>
        </div>
        <ul class="menu">
            <li><a href="#">home</a></li>
            <li><a href="#">About</a></li>
            <li class="submenu-wrapper">
                <a href="#">Skills<span> > </span>
                </a>
                <ul class="submenu">
                    <li><a href="#">HTML</a></li>
                    <li><a href="#">CSS</a></li>
                    <li><a href="#">JavaScript</a></li>
                    <li><a href="#">React.js</a></li>
                    <li><a href="#">Node.js</a></li>
                </ul>
            </li>
            <li><a href="#">Background</a></li>
            <li><a href="#">Blog</a></li>
            <li><a href="#">About</a></li>
        </ul>
    </nav>
    <script src="./script.js"></script>
</body>
</html> Dropdown Menu CSS Code: @import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');

*,
::before,
::after{
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}

html{
    font-size:13px;
}

body{
    font-family: "Poppins", sans-serif;
    font-size:1rem;
    background: #222f37;
    color:#d6e0f9;
}

.navbar{
    width:100%;
    position:fixed;
    top:0;
    left:0;
    background: #101d23;
    padding:0 5%;
    display:flex;
    align-items: center;
    justify-content: space-between;
}

.logo{
    width:5rem
}

.logo img{
    width:100%;
}

.menu{
    list-style: none;
}

.menu li{
    position: relative;
    float:left;
}

.menu li a{
    font-family: "Poppins", sans-serif;
    font-size:1.2rem;
    color:#d6e0f9;
    display:block;
    text-decoration: none;
    padding:1rem 1.5rem;
}

.menu li a:hover{
    background: #495ca8;
}

.submenu{
    position: absolute;
    left:0;
    background: #101d23;
    display:none;
    transition: all .3s ease-in-out;
}

.submenu-wrapper:hover .submenu,
.submenu-wrapper:focus-within .submenu{
    display: initial;
}

.submenu li{
    width:100%;
    border-top:.1rem solid #222f37;
    list-style: none;
}

.toggle-btn {
    display: none; /* Initially hide the toggle button */
    z-index:1000;
}

.icon {
    position: relative;
    width: 1.5rem;
    height: .8rem;
    cursor: pointer;
    z-index:100;
}

.icon::before {
    top: 0;
    right:0;
    content: '';
    position: absolute;
    width: 2rem;
    height: .2rem;
    background-color: #d6e0f9;
    transition: all 0.3s ease-in-out;
}

.icon::after {
    bottom: 0;
    right:0;
    content: '';
    position: absolute;
    width: 1.5rem;
    height: .2rem;
    background-color: #d6e0f9;
    transition: transform 0.3s ease-in-out;
}

/* Rotate the before and after lines to create the close icon effect */
.icon.active::before {
    width:1.5rem;
    transform: rotate(-45deg) translate(-0.21rem, 0.21rem);
}

.icon.active::after {
    transform: rotate(45deg) translate(-0.21rem, -0.21rem);
}


@media (max-width: 991px){
    .toggle-btn{
        display: block;
    }

    .menu{
        width:100%;
        position:absolute;
        top:100%;
        left:0;
        background: #101d23;
        border-top: .1rem solid #222f37;
        display:none;
    }

    .menu.active{
        display:initial
    }

    .menu li{
        width:100%;
        border-top: .1rem solid #222f37;
    }

    .submenu{
        position: relative;
        width:100%;
    }

    .submenu li{
        background: #222f37;
        border-top: .1rem solid #101d23;
    }

    .submenu li a{
        padding-left:2rem;
    }
} Dropdown Menu JavaScript Code: const icon = document.querySelector('.icon');
    const menu = document.querySelector('.menu');
    const span = document.querySelector('.span')

    function toggleNavbar() {
        menu.classList.toggle('active');
        icon.classList.toggle('active');
    }

    document.querySelector('.toggle-btn').addEventListener('click', function () {
        toggleNavbar();
    }); On Large Screens On Small Screens: Check out the live demo and code: CodePen: GitHub Repo: Link to CodePen Link to GitHub Repo Also published . here

How To Build a Dropdown Menu With HTML, CSS and JavaScript

International Draughts is a fun board game that's a bit like checkers but with more pieces and on a bigger board. It's all about moving your pieces, capturing your opponent, and trying to outsmart them. When one of your pieces reaches the other side, it becomes a 'king,' which is powerful. You win by capturing all your opponent's pieces or blocking them so they can't move. Now, imagine trying to make a computer play this game. It's pretty hard because there are so many moves to think about. That's where the minimax and alpha-beta search algorithm come in. It's a smart way to help computers play games like International Draughts and Checkers. The "minimax" part comes from maximizing your gains while minimizing your opponent's gains. The alpha-beta algorithm is like a shortcut for the computer. Instead of looking at every move, it ignores the ones that don't matter much. This way, the computer doesn't waste time on bad moves and can think more about the good ones. It's like if you were playing and only focused on your best moves. By using this algorithm, computers can play well. They can think ahead and make smart choices without taking too long. So, the alpha-beta algorithm helps computers be tough opponents in games like International Draughts, making the game exciting and challenging. Draughts International Draughts is a cool board game that's a bit like checkers but bigger and with more pieces. It's played on a big 10x10 board, each player starting with 20 pieces. The game is about diagonally moving your pieces and trying to capture your opponent's pieces by jumping over them. Here's how it works: you move your pieces forward on the dark squares. If you see an opponent's piece next to yours and there's a space just past it, you can jump over their piece and capture it. If you can keep jumping over more pieces, you can capture them, too! The game gets exciting when one of your pieces reaches the other side of the board. Then it turns into a "king," which can move forward and backward, making it super powerful. You win the game if you capture all your opponent's pieces or if they can't move anymore. International Draughts is fun because it's easy to learn but makes you think hard about your moves. It's a popular game worldwide; there are even big tournaments where people compete to be the best. Minimax The essence of the algorithm comes down to a simple thing: find the move that will bring us the greatest increase in points and, at the same time, minimize the potential number of points of the opponent. This algorithm is often used in games in conjunction with alpha-beta search Alpha-Beta Search The alpha-beta search algorithm is a significant concept in computer AI, particularly in board games like Checkers. At its core, this algorithm is a smarter, more efficient version of the minimax algorithm, which is used to determine the best move in a game by considering all possible moves. The alpha-beta algorithm enhances the minimax process by "pruning" or cutting off branches in the game tree that it deems unnecessary to explore. Essentially, it skips analyzing moves that won't affect the final decision, reducing the number of calculations the computer has to make. This is especially important in games like checkers, where the number of possible moves can be very large. By employing this algorithm, AI in games can analyze possible moves more quickly and deeply, leading to stronger play. In practice, this means that an AI using alpha-beta search can be a formidable opponent, capable of foreseeing several moves ahead and making strategically sound decisions, all within a reasonable amount of computing time. Scoring For the algorithm to work correctly, we will need to evaluate the quality of each move, and for this, we will use the following scoring functions: Score by piece count: we count the left items on the deck. Score by defensive position: the deeper we move to the enemy’s side, the more points we get. For each next row, we get an extra 0.5 points. Score by offensive positioning: The more first cells we have occupied by our checkers, the more points. This prevented the enemy from transferring his checker to the king. Score by mobility: The more moves we can make, the more points The final score for each color is a sum of all scores Prepare First, we need to initialize the project. I’m a little bit lazy, I’m going to use vite package yarn create vite client --template vanilla-ts Also we need checkers engine yarn add @jortvl/draughts And d3.js for render yarn add d3
yarn add @types/d3 --dev That’s enough for our project =) Calculations On each move we get FEN from the game engine FEN The initial position of the checkers board. This is used to record partial games (starting at some initial position). It is also necessary for some draughts variants where the initial position is not always the same as traditional checkers. If a FEN tag is used, a separate tag pair "SetUp" is required and have its value set to "1". as said wiki. Example of fen: B:W27,32,33,34,35,36,37,38,39,40,41,42,43,44,45,46,47,48,49,50:B1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20 If we can simplify - it current board positions export function getFen(fen: string): FEN {
    const regex = /^(B|W):(W(.*)):(B(.*))$/;

    let m = regex.exec(fen)

    if (!m) {
        throw new Error('Invalid FEN')
    }

    return {
        move: m[1] === "B" ? "B" : "W",
        white: m[3].split(','),
        black: m[5].split(','),
    }
} convert fen to our purposes: Count checkers for each color export function scoreByPieceCount(board: FEN) {
    const KING_WEIGHT = 1.5; // Kings are usually more valuable
    let white_player_score = board.white.reduce((acc, row) => acc + (row.startsWith('K') ? KING_WEIGHT : 1), 0);
    let black_player_score = board.black.reduce((acc, row) => acc + (row.startsWith('K') ? KING_WEIGHT : 1), 0);

    return [white_player_score, black_player_score];
} Score by defensive position. Each next row add 0.5 points to color and if we have king - it weight 6 points, for reason is king can be everywhere and not going to turn into king griffindor export function scoreByDefensivePositioning(board: FEN) {
    let white_score = board.white.reduce((acc, row) => acc + (row.startsWith('K') ? 6 : (Math.floor((50 - parseInt(row, 10)) / 5) + 1) * 0.5), 0);
    let black_score = board.black.reduce((acc, row) => acc + (row.startsWith('K') ? 6 : (Math.floor(parseInt(row, 10) / 5) + 1) * 0.5), 0);

    return [white_score, black_score];
} Offensive: we check initial positions for checkers export function scoreByOffensivePositioning(board: FEN) {
    let white_score = ['46', '47', '48', '49', '50', 'K46', 'K47', 'K48', 'K49', 'K50'].filter((x) => board.white.includes(x)).length;
    let black_score = ['1', '2', '3', '4', '5', 'K1', 'K2', 'K3', 'K4', 'K5'].filter((x) => board.black.includes(x)).length;

    return [white_score, black_score];
} Score by mobility: we check how much moves we can make. if we can take checker, it give us addition 10 points export function scoreByMobility(fen: FEN) {
    let d1 = new Draughts();
    d1.load(`B:W${fen.white.join(',')}:B${fen.black.join(',')}`);

    let black_score = d1.moves().reduce((acc, cap) => acc + 1 + (cap.takes.length * 10), 0)
    d1.load(`W:W${fen.white.join(',')}:B${fen.black.join(',')}`);
    let white_score = d1.moves().reduce((acc, cap) => acc + 1 + (cap.takes.length * 10), 0)

    return [white_score, black_score];
} And the most interesting thing is why I started writing this article: function isGameOver(gameState: FEN) {
    return gameState.black.length === 0 || gameState.white.length === 0;
}

function getLegalMoves(gameState: FEN) {
    const d1 = new Draughts();
    d1.load(`${gameState.move}:W${gameState.white.join(',')}:B${gameState.black.join(',')}`);

    return d1.moves().map((x) => `${x.from}-${x.to}`).sort(() => Math.random() - 0.5);
}

function applyMove(gameState: FEN, move: string) {
    const d1 = new Draughts();
    d1.load(`${gameState.move}:W${gameState.white.join(',')}:B${gameState.black.join(',')}`);
    d1.move(move);
    return getFen(d1.fen());
}

export function alphaBeta(
    gameState: FEN,
    depth: number,
    paths: ABScore = {
        score: 0,
        path: []
    },
    alpha: number = -Infinity,
    beta: number = Infinity,
    maximizingPlayer: "B" | "W"
):
    ABScore {
    if (depth === 0 || isGameOver(gameState)) {
        return {
            score: combinedScore(gameState)[maximizingPlayer === "B" ? 1 : 0],
            path: paths.path
        };
    }

    if (gameState.move === maximizingPlayer) {
        let maxEval = {score: -Infinity, path: []};
        for (const move of getLegalMoves(gameState)) {
            const ev = alphaBeta(
                applyMove(gameState, move), depth - 1, {
                    score: 0,
                    path: paths.path.concat(move)
                }, alpha, beta, maximizingPlayer === "B" ? "W" : "B"
            );
            if (ev.score > maxEval.score) {
                maxEval = ev;
            }

            if (ev.score > alpha) {
                alpha = ev.score;
            }

            if (beta <= alpha) {
                break;
            }
        }
        return maxEval;
    } else {
        let minEval = {score: Infinity, path: []};
        for (const move of getLegalMoves(gameState)) {
            const ev = alphaBeta(
                applyMove(gameState, move),
                depth - 1,
                {
                    score: 0,
                    path: paths.path.concat(move)
                },
                alpha, beta,
                maximizingPlayer === "B" ? "W" : "B"
            );

            if (ev.score < minEval.score) {
                minEval = ev;
            }

            if (ev.score < beta) {
                beta = ev.score;
            }

            if (beta <= alpha) {
                break;
            }
        }
        return minEval;
    }
} The basic principle by which the search works: at the first stage, find the move that will give us the highest score, then we look at all the opponent’s moves and see which moves will give him the minimum score and again look at our moves and discard the least relevant moves Game Basic markup <!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8"/>
    <link rel="icon" type="image/svg+xml" href="/vite.svg"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    <title>Vite + TS</title>
</head>
<body>
<div id="app"></div>
<div>
    <label for="depth">
        <input id="depth" value="2"/>
    </label>
    <button id="game">Run game</button>
</div>
<script type="module" src="/src/main.ts"></script>
</body>
</html> Main game class: export class Board {
    _board: Draughts
    _el: string;
    _moves: number;

    constructor(element: string) {
        this._board = Draughts()
        this._el = element;
        this._container = d3.select(element);
        this._moves = 0;
    }

    gameOver() {
        return this._board.gameOver();
    }

    fen() {
        return this._board.fen();
    }
} Draw initial board export class Board {
    constructor(element: string) {
				...
				this.drawBoard();
    }

		drawBoard() {
        const svg = this._container.append("svg")
            .attr("width", 600)
            .attr("height", 400);

        const gameBoard = svg.append('g')

        const checkers = svg.append('g')
        checkers.attr('class', 'checkers');

        let position_index = 0;
        for (let i = 0; i < 100; i += 1) {
            if ((i % 2) != Math.floor(i / 10) % 2) {
                position_index += 1;

                const cell = gameBoard.append('g').attr('class', `tile`).attr('transform', `translate(${(i % 10) * 40}, ${Math.floor(i / 10) * 40})`)
                cell.append('rect').attr('width', 40).attr('height', 40).attr("rx", 4).attr("ry", 4).style('fill', 'gray')
                cell.append('text').text(position_index).attr("x", 0).attr("y", 12);
            }
        }

        const score = svg.append('g').attr('class', 'score').attr('transform', `translate(410, 0)`);

        score.append('text').text('white').attr("x", 80).attr("y", 12);
        score.append('text').text('black').attr("x", 150).attr("y", 12);
        score.append('text').text('piece:').attr("x", 10).attr("y", 48);
        score.append('text').attr('class', 'white-piece').text('0').attr("x", 80).attr("y", 48);
        score.append('text').attr('class', 'black-piece').text('0').attr("x", 150).attr("y", 48);
        score.append('text').text('def:').attr("x", 10).attr("y", 84);
        score.append('text').attr('class', 'white-def').text('0').attr("x", 80).attr("y", 84);
        score.append('text').attr('class', 'black-def').text('0').attr("x", 150).attr("y", 84);
        score.append('text').text('mobility:').attr("x", 10).attr("y", 120);
        score.append('text').attr('class', 'white-mobility').text('0').attr("x", 80).attr("y", 120);
        score.append('text').attr('class', 'black-mobility').text('0').attr("x", 150).attr("y", 120);
        score.append('text').text('offensive:').attr("x", 10).attr("y", 156);
        score.append('text').attr('class', 'white-offensive').text('0').attr("x", 80).attr("y", 156);
        score.append('text').attr('class', 'black-offensive').text('0').attr("x", 150).attr("y", 156);
        score.append('text').text('total:').attr("x", 10).attr("y", 192);
        score.append('text').attr('class', 'white-total').text('0').attr("x", 80).attr("y", 192);
        score.append('text').attr('class', 'black-total').text('0').attr("x", 150).attr("y", 192);
        score.append('text').text('move:').attr("x", 10).attr("y", 228);
        score.append('text').attr('class', 'moves').text('0').attr("x", 80).attr("y", 228);
    }
} Draw checkers (we redraw them after each move) export class Board {
    constructor(element: string) {
				...
				this.draw();
    }

		draw() {
        d3.selectAll('g.checker').remove()
        const checkers = d3.select('g.checkers')
        const external_position = this._board.position();
        let position_index = 0;
        for (let row = 0; row < 10; row++) {
            const shifted = row % 2 !== 0 ? 1 : 0
            for (let col = 0; col < 10; col++) {
                if ((col + shifted) % 2 === 1) {
                    position_index += 1;
                    const pieceGroup = checkers.append('g')
                        .attr('transform', `translate(${col * 40 + 20}, ${row * 40 + 20})`)
                        .attr('class', `checker ${external_position[position_index]}`)
                        .attr('data-index', position_index)

                    switch (external_position[position_index]) {
                        case 'b':
                            pieceGroup.append('circle').attr('r', 10).style('fill', 'black')
                            break;
                        case 'B':
                            pieceGroup.append('circle').attr('r', 10).style('fill', 'black').style('opacity', 0.4)
                            break;
                        case 'w':
                            pieceGroup.append('circle').attr('r', 10).style('fill', 'white')
                            break;
                        case 'W':
                            pieceGroup.append('circle').attr('r', 10).style('fill', 'white').style('opacity', 0.4)
                            break;
                    }
                }
            }
        }
    }
} Make move: export class Board {
  	move(depth: number) {
        if (this._board.gameOver()) {
            console.log('game over')
            return;
        }

        let ab1 = alphaBeta(getFen(this._board.fen()), depth, {
                score: 0,
                path: []
            },
            -Infinity,
            Infinity,
            this._board.turn().toUpperCase()
        );

        let path = ab1.path.length ? ab1.path[0] : this.getRandomeMove();
        this._board.move(path);
        this.draw()
        this._moves += 1;
    }
} And initialize game =) const game = new Board('#app');

document.querySelector('#game').addEventListener('click', async () => {
    const depth = parseInt((document.querySelector('#depth') as HTMLInputElement).value, 10);

    let i = 1;
    while (!game.gameOver() && i < 300) {
        game.move(depth);
        game.drawScore();
        await new Promise((resolve) => setTimeout(resolve, 1000));
        i += 1;

    }
}); Basic game is done =) If I forget something, working example on GitHub Results Depth: 1 Depth: 2 Depth: 3 As the search depth increases, moves become more meaningful and less random, although the time spent calculating each move increases. Conclusion In the article, we quickly went over the minimax alpha-.beta search. Maybe I forgot something, but I’ll hope not =) Next time, I’ll try to add a couple of genetic algorithms here and see the results. The game’s code is available on . Github

Teaching a Machine to Play International Draughts Through Alpha-Beta Search

5 Integrations in React: Contentful, Tilda, Hubspot, Typeform, Builder.io

A Complete Guide to React Hooks

Let's be honest, what other use is there for generative AI than working with cats? If you read my on Google's Gemini AI launch, you may have seen my test prompts asking it to identify the kind of cat shown in a picture. previous post I decided to turn this into a proper web application as a real example of the API in action. Here's what I came up with. The Front End For the front end, I decided to make use of a native web platform feature to access the user's camera via a simple HTML form field. By using on an tag, you directly get access to the device camera. capture="camera" input There are more advanced ways of doing this, but for quick and simple, it works fine. Even better, on a desktop, it simply acts as a file selector. My thinking was - to provide a way to get an image (either via camera or file selection), display the image, and send it off to the back end. While incredibly simple and vanilla JS would have been fine, I went ahead and used for the interactivity. Alpine.js First, the HTML needs to provide the UI for the image, a place to display the image, and another place to display the result. <!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<link rel="stylesheet" href="app.css">
	<title></title>
</head>
<body>

<h2>🐈 Detector</h2>
<div x-data="catDetector">
	<input type="file" capture="camera" accept="image/*" @change="gotPic" :disabled="working">
	<template x-if="imageSrc">
		<p>
		<img :src="imageSrc">
		</p>
	</template>
	<div x-html="status"></div>
</div>


<script defer src="https://unpkg.com/alpinejs@3.x.x/dist/cdn.min.js"></script>
<script src="app.js"></script>
</body>
</html> Now, let's turn to JavaScript. I'm going to begin by sharing the initial version as it's simpler than explaining how it failed. All I needed to do, initially, was notice when a file was selected, or a picture taken, and render it out to the DOM. (I used a bit of CSS not shared here to keep the visible size in check. More on that in a bit.) I also needed to send a base64 version of the file to the server-side code. Here's the initial version: //const IMG_FUNC = 'http://localhost:8787/';
const IMG_FUNC = 'https://catdetector.raymondcamden.workers.dev';

document.addEventListener('alpine:init', () => {
  Alpine.data('catDetector', () => ({
	imageSrc:null,
	working:false,
	status:'',
    async init() {
		console.log('init');
    },
	async gotPic(e) {
		let file = e.target.files[0];
		if(!file) return;
		
		let reader = new FileReader();
		reader.readAsDataURL(file);
		reader.onload = async e => {
			this.imageSrc = e.target.result;
			this.working = true;
			this.status = '<i>Sending image data to Google Gemini...</i>';

			let body = {
				imgdata:this.imageSrc
			}

			let resp = await fetch(IMG_FUNC, {
				method:'POST', 
				body: JSON.stringify(body)
			});

			let result = await resp.json();
			this.working = false;
			this.status = result.text;

		}

	}
  }))
}); The method is fired whenever the field fires an event. I take the file/image used, read it as a data URL (base64), and then assign it to the image in the DOM and send it to the server. Nice and simple, right? gotPic input onchange Well, everything worked fine on the desktop, but when I switched to my camera, the Samsung S22 Ultra Magnus Extreme 200 Camera Lens Edition (not the real name), I ran into issues where Google's API complained that I was sending too much data. I then remembered that my camera takes detailed pictures, and I needed to resize the image before sending it on. really I was already resizing in CSS, but obviously, that's not the same as resizing. I found this excellent article on ImageKit's site: In this article, they describe using an HTML element to do the resizing. really How to resize images in Javascript? canvas I had not used Canvas in probably close to a decade, but I was able to repurpose their code into my front end well enough: //const IMG_FUNC = 'http://localhost:8787/';
const IMG_FUNC = 'https://catdetector.raymondcamden.workers.dev';

// Resize logic: https://imagekit.io/blog/how-to-resize-image-in-javascript/
const MAX_WIDTH = 400;
const MAX_HEIGHT = 400;

document.addEventListener('alpine:init', () => {
  Alpine.data('catDetector', () => ({
	imageSrc:null,
	working:false,
	status:'',
    async init() {
		console.log('init');
    },
	async gotPic(e) {

		let file = e.target.files[0];
		if(!file) return;
		
		let reader = new FileReader();
		reader.readAsDataURL(file);
		reader.onload = async e => {
			let img = document.createElement('img');
			img.onload = async e => {
				let width = img.width;
				let height = img.height;

				if(width > height) {
					if(width > MAX_WIDTH) {
						height = height * (MAX_WIDTH / width);
						width = MAX_WIDTH;
					}
				} else {
					if (height > MAX_HEIGHT) {
						width = width * (MAX_HEIGHT / height);
						height = MAX_HEIGHT;
					}
				}

				let canvas = document.createElement('canvas');
				canvas.width = width;
				canvas.height = height;
				let ctx = canvas.getContext('2d');
				ctx.drawImage(img, 0, 0, width, height);

				this.imageSrc = canvas.toDataURL(file.type);

				this.working = true;
				this.status = '<i>Sending image data to Google Gemini...</i>';

				let body = {
					imgdata:this.imageSrc
				}

				let resp = await fetch(IMG_FUNC, {
					method:'POST', 
					body: JSON.stringify(body)
				});

				let result = await resp.json();
				this.working = false;
				this.status = result.text;

			};
			img.src = e.target.result;

		}

	}
  }))
}); You'll notice the code uses a max dimension for both width and height and correctly handles resizing while keeping the same aspect ratio. Again, I can't take credit for any of that, thanks to for his blog post. Manu Chaudhary The net result of this change is that now I'm sending a much smaller image to the back end service, and it's finally time to take a look at that. The Back End For my back end, I decided to use again. I was a bit hesitant as it's had some issues with NPM packages and my demos before, but it didn't have any issues this time. If you remember from my , Google's AI Studio lets you easily output sample code from your prompts, so all I had to do was incorporate that into the Cloudflare Worker. Cloudflare Workers last post Here's the entirety of the code: const {
  GoogleGenerativeAI,
  HarmCategory,
  HarmBlockThreshold,
} = require("@google/generative-ai");

const MODEL_NAME = "gemini-pro-vision";


export default {
	async fetch(request, env, ctx) {

		const API_KEY = env.GEMINI_KEY;

		console.log('begin serverless logic');

		const corsHeaders = {
			"Access-Control-Allow-Origin": "*",
			"Access-Control-Allow-Methods": "GET,HEAD,POST,OPTIONS",
			"Access-Control-Max-Age": "86400",
	    };

		let { imgdata } = await request.json();
		imgdata = imgdata.replace(/data:.*?;base64,/, '');

		const genAI = new GoogleGenerativeAI(API_KEY);
		const model = genAI.getGenerativeModel({ model: MODEL_NAME });

		const generationConfig = {
			temperature: 0.4,
			topK: 32,
			topP: 1,
			maxOutputTokens: 4096,
		};

		const safetySettings = [
			{
			category: HarmCategory.HARM_CATEGORY_HARASSMENT,
			threshold: HarmBlockThreshold.BLOCK_MEDIUM_AND_ABOVE,
			},
			{
			category: HarmCategory.HARM_CATEGORY_HATE_SPEECH,
			threshold: HarmBlockThreshold.BLOCK_MEDIUM_AND_ABOVE,
			},
			{
			category: HarmCategory.HARM_CATEGORY_SEXUALLY_EXPLICIT,
			threshold: HarmBlockThreshold.BLOCK_MEDIUM_AND_ABOVE,
			},
			{
			category: HarmCategory.HARM_CATEGORY_DANGEROUS_CONTENT,
			threshold: HarmBlockThreshold.BLOCK_MEDIUM_AND_ABOVE,
			},
		];

		const parts = [
			{text: "Look at this picture and if you see a cat, return the breed of the cat."},
			{
			inlineData: {
				mimeType: "image/jpeg",
				data: imgdata
			}
			}			
		];

		console.log('calling google');
		const result = await model.generateContent({
			contents: [{ role: "user", parts }],
			generationConfig,
			safetySettings,
		});

		const response = result.response;
		let finalResult = { text: response.text() };

		return new Response(JSON.stringify(finalResult), { headers: {...corsHeaders}});

	},
}; The majority of the code is boilerplate from the AI Studio export, except now, I get my image data from the information POSTed to the worker. I want to especially call out the prompt: Look at this picture and if you see a cat, return the breed of the cat. Initially, I tried hard to get a result in JSON and have it return a blank string if the picture wasn't a cat. But then I noticed something cool - Gemini did a good job of handling pictures that weren't of cats. Like... shockingly good. really I actually really appreciated that the app wouldn't just say "Not a Cat", but explained what it was instead. Obviously, there's room for both styles for an application like this, but I went and kept Google's verbose and helpful responses. Now, for the fun part... the results. The Results Let's start with a few pictures of cats. First up is Pig, my favorite cat who is not fat and doesn't look like Jabba the Hut at all: Next, a picture of Luna. In this case, the breed is incorrect - but at least close. Now, let's throw Google a curveball: This surprised me. The description is 100% accurate, and honestly, if I had seen this picture and didn't know, I would have recognized it as a sculpture of a cat, not as a watering can. I mean, I guess it's of obvious, but I honestly don't think I would have noticed that myself. really kind Now, let's go totally crazy: Yep, that's right Google. How about AI-generated cat images? I think it handled that pretty well. Next... Yep, that's Bigfoot alright. Just think, all those Bigfoot "researchers" could retire and simply connect their trail cams to AI! I've got to say - I'm impressed Google not only recognized the franchise but the actual character as well, but to be fair, Skeletor has a pretty distinct look to him. And finally, since I (unfairly of course) compared my cat to Jabba, let's see how it's handled: Oh, I know I said I was done, but of course, I had to test a dog: Dang good job, Gemini. Unfortunately, I won't be hosting this demo live (the Cloudflare 'live' URL earlier in the code won't work), but I can share the code.

I Used Generative AI to Detect Cat Breeds: Here's How It Went

আমি বিড়ালের জাত সনাক্ত করতে জেনারেটিভ এআই ব্যবহার করেছি: এটি কীভাবে হয়েছিল তা এখানে

Ich habe generative KI verwendet, um Katzenrassen zu erkennen: So lief es

Utilicé IA generativa para detectar razas de gatos: así fue como fue

J'ai utilisé l'IA générative pour détecter les races de chats : voici comment cela s'est passé

मैंने बिल्ली की नस्लों का पता लगाने के लिए जेनरेटिव एआई का उपयोग किया: यहां बताया गया है कि यह कैसे हुआ

生成 AI を使用して猫の品種を検出してみた: その様子は次のとおりです

고양이 품종을 감지하기 위해 생성 AI를 사용했습니다. 진행 과정은 다음과 같습니다.

Usei IA generativa para detectar raças de gatos: foi assim que aconteceu

Я использовал генеративный искусственный интеллект для определения пород кошек: вот как все прошло

Kedi Irklarını Tespit Etmek İçin Üretken Yapay Zeka Kullandım: İşte Nasıl Oldu

Tôi đã sử dụng AI sáng tạo để phát hiện các giống mèo: Đây là cách nó diễn ra

我使用生成式人工智能来检测猫的品种：它是这样的

Detecting Scroll Direction in React: a StackOverflow Answer Turned NPM Package

প্রতিক্রিয়ায় স্ক্রোল দিক সনাক্ত করা: একটি স্ট্যাকওভারফ্লো উত্তর NPM প্যাকেজ পরিণত হয়েছে

Erkennen der Bildlaufrichtung in React: Eine StackOverflow-Antwort wurde zum NPM-Paket

Detectando la dirección de desplazamiento en React: una respuesta de StackOverflow convertida en paquete NPM

Détection de la direction de défilement dans React : une réponse StackOverflow transformée en package NPM

प्रतिक्रिया में स्क्रॉल दिशा का पता लगाना: एक स्टैक ओवरफ़्लो उत्तर एनपीएम पैकेज बन गया

React でのスクロール方向の検出: StackOverflow から NPM パッケージになったもの

React에서 스크롤 방향 감지: StackOverflow 응답이 NPM 패키지로 전환됨

Detectando a direção da rolagem no React: uma resposta StackOverflow transformada em pacote NPM

Определение направления прокрутки в React: ответ StackOverflow превратил пакет NPM

React'te Kaydırma Yönünü Algılamak: StackOverflow Yanıtı NPM Paketine Döndü

Phát hiện hướng cuộn trong React: Câu trả lời StackOverflow đã chuyển gói NPM

在 React 中检测滚动方向：StackOverflow 答案转向 NPM 包

Stories, News & Mentions about ADDEVENT

Addevent’s Stories on HackerNoon