Forem: Hamza Ahmed

Tree of Thoughts: A New Way to Prompt AI

Hamza Ahmed — Mon, 04 Sep 2023 19:07:43 +0000

What's Tree of Thoughts (ToT) Prompting All About?

ToT prompting is a fresh take on how to work with prompts in AI. Instead of just giving a single question to the AI like in zero-shot prompting, or a list of questions to go through one by one like in chain-of-thought, ToT prompting uses a tree-like set of questions and answers. You can add more branches, cut them off, or go back and change earlier ones as needed.

"The image shows different ways to tackle problems using language models. Each box stands for a thought, which is a complete set of words that helps in solving the problem." credit: https://arxiv.org/pdf/2305.10601.pdf

Why ToT Prompting is Useful

ToT prompting helps the AI come up with multiple and logical solutions. It can also self-improve or get better based on feedback. The research shows that ToT is better than zero-shot and chain-of-thought methods for new tasks that need some planning or searching, like the Game of 24, writing creatively, and solving Mini Crosswords.

ToT Prompting in Creative Writing - A Simple Example

Say you need to write a story about a Mowgli.The ToT prompt could look like this:



1. Write a story featuring Mowgli.   
    *Choice 1: Mowgli is lonely and wants friends.    
    *Choice 2: Mowgli is adventurous and 
      wants to explore the villages.   
    *Choice 3: Mowgli is curious and wants 
      to learn about the human kingdom               
2. Pick one choice and keep writing the story.  
3. Check your story for how creative, clear, 
   and well-written it is.

ToT Prompting for Online Searches - A Simple Example



1. Imagine you're trying to find a good place to go on vacation. 
   Your needs are:
   *Find a good vacation spot. Keep in mind: 
   *Must be in India. 
   *Good for families. 
   *Has fun outdoor activities. 
   *Has interesting historical places. 
   *Summer weather should be bearable.

2. Choices for looking up places: 
   *Choice 1: Look at places in Northern India. 
     *More choices: Himachal Pradesh or Uttarakhand. 
   *Choice 2: Look at places in Southern India. 
     *More choices: Kerala or Tamil Nadu. 
   *Choice 3: Look at places in Western India. 
     *More choices: Goa or Rajasthan.

3. Pick a choice and dig deeper.
4. Compare all the places you found based on your needs.

Here, you can use a 'browser' tool to help you look for
info along the path you chose. The AI can follow a path,  do
the searching, and check how good the options are based on
what you need.  This way of solving problems can give you more
complete and fitting answers.

Using ToT Prompting with Web-Enabled GPT-4 : An Example



Three experts with exceptional logical thinking and
experienced programming skills are collaboratively answering a
question using a tree of thoughts method. Each expert be allowed
one web search and then use that search data with their own
thought and share process in detail.  Each expert will share their
thought process in detail, taking into account the previous
thoughts of others and admitting any errors.  They will iteratively
refine and expand upon each other's ideas, giving credit where
it's due. The process continues until a conclusive answer is
found.  Use step by step thinking & organize the entire response
in detailed steps in a {{markdown table format}}.  Once this
table is complete, provide a summary of the proposed
recommendations. 
My question is how to learn and get advanced in chess?

You can also give expert a character, example:



1 of the expert is a seasoned digital marketing analyst
with 10 years of experience, the other one is a programmer who
is an optmizing enthusiast,  he strives to follow the beast
practice,  find best design pattern and follow clean code principles
...etc

You can also fine tune the prompt to make sure when asking the follow-up it dont get data from same article.

the prompt can also be used without internet by removing the below line. [Recommended].

Remember with using GPT-4 with browsing capablity it produce unexpected result and most of the time the results is heavily dependent on the plugin, same question with different plugin will generate different quality content. So use it with caution



Each expert be allowed one web search and then use that
search data with their own thought and share process in detail.

*For the full chat, check *
OFFLINE
ONLINE

To Wrap Up

ToT prompting brings a new layer to how we solve problems. It lets us have a more open and branching chat instead of a straight line of orders. This can make the AI come up with new, smart, and clear answers and lets it get better from feedback. ToT prompting can be used for many things like writing stories, learning stuff, or hard research. It shows how AI can do more than just follow orders; it can actually help us think and make choices.

Angular Devs Beware: Are You Guilty of This Performance-Killing Practice?

Hamza Ahmed — Wed, 05 Apr 2023 18:56:15 +0000

Hello, fellow Angular enthusiasts! Today, we'll dive into an essential Angular optimization technique that can make your application run smoother and faster. As an Angular aficionado, I've seen countless developers get tripped up by direct function calls in templates. But fear not, we'll unravel this enigma together and have a bit of fun along the way. So, grab your favorite beverage, get comfy, and let's get cracking!

The Problem: Direct Function Calls in Templates

Picture this: you're building an Angular app with a simple search box that filters a list of items. In your component's template, you call a function to filter the items based on the search input. It seems harmless at first, but little do you know that this decision will come back to haunt you.

You see, direct function calls in Angular templates can lead to performance issues, especially in complex applications. When Angular runs change detection, it executes these functions every single time, even if nothing has changed. This can lead to a bloated, sluggish app that leaves your users scratching their heads in frustration.

That's where our hero comes in: properties and observables! These trusty sidekicks can help you manage your data more efficiently and give your app the performance boost it needs.

The Solution: Embrace Properties and Observables

We'll explore how to replace direct function calls in Angular templates with properties and observables. Along the way, we'll uncover some advanced techniques to keep your app running smoothly and efficiently.

Step 1: Set up your component

First, let's create a component that displays a list of items and includes a search input box. To keep things simple, we'll use an array of strings as our data source.

import { Component } from '@angular/core';

@Component({
  selector: 'app-search',
  templateUrl: './search.component.html',
  styleUrls: ['./search.component.scss']
})
export class SearchComponent {
  items = [
    'Apple',
    'Banana',
    'Orange',
    'Pineapple',
    'Strawberry',
    'Grape',
    'Mango',
    'Watermelon'
  ];

  searchText = '';
  filteredItems: string[] = [];

  constructor() {
    this.filteredItems = this.items;
  }
}

In this example, we've initialized the filteredItemsarray with the original items array. This will be our starting point for the filtering process.

Step 2: Create a method to filter the items

Now that our component is set up, we need a way to filter the items based on the search input. To do this, let's create a method called onSearchTextChange() that updates the filteredItems array when the search text changes.

onSearchTextChange() {
  const searchText = this.searchText.toLowerCase();
  this.filteredItems = this.items.filter(item =>
    item.toLowerCase().includes(searchText)
  );
}

This method takes the current searchText, converts it to lowercase, and then filters the items based on whether they contain the search text.

Step 3: Update the template to avoid direct function calls

In our component's template, we'll start by binding the searchTextproperty to the input box using [(ngModel)]. This two-way binding ensures that our searchTextproperty stays in sync with the input value.

Next, we'll use the (input) event to call the onSearchTextChange() method we created earlier. This ensures that our method is only called when the search input actually changes, rather than on every change detection cycle.

Finally, we'll use the *ngFor directive to loop through the filteredItems array and display the results.

Here's the updated template:

<input
  [(ngModel)]="searchText"
  (input)="onSearchTextChange()"
  placeholder="Search items"
/>

<ul>
  <li *ngFor="let item of filteredItems">
    {{ item }}
  </li>
</ul>

Step 4: Embrace the power of observables

Now that we've set up our component to avoid direct function calls in the template, let's take it one step further and harness the power of observables. Observables are a fantastic tool in Angular's arsenal, enabling us to efficiently manage and react to data changes.

First, we'll need to import Subject and Observable from the rxjs library:

import { Subject, Observable } from 'rxjs';

Next, create a Subject called searchTextChanged$ that will emit a new value whenever the search text changes:

typescript
private searchTextChanged$ = new Subject<string>();

Now, update the onSearchTextChange() method to emit the current searchText value whenever it's called:

onSearchTextChange() {
  this.searchTextChanged$.next(this.searchText);
}

Finally, we'll create an Observable called filteredItems$ that listens for changes to searchTextChanged$ and updates the filteredItems array accordingly. To do this, we'll use the debounceTimeand distinctUntilChangedoperators from rxjs, which help ensure that we're only processing new and unique search text values.

filteredItems$: Observable<string[]>;

constructor() {
  this.filteredItems$ = this.searchTextChanged$.pipe(
    debounceTime(300),
    distinctUntilChanged(),
    map(searchText =>
      this.items.filter(item =>
        item.toLowerCase().includes(searchText.toLowerCase())
      )
    )
  );
}

And that's it! With these changes, our search component now avoids direct function calls in the template, and efficiently updates the filteredItems array using observables.

Step 5: Use the `async pipe` for cleaner templates

While our search component works well, we can make our template even cleaner by using the async pipe. The async pipe subscribes to an observable and automatically updates the view whenever new data arrives. It also takes care of unsubscribing from the observable when the component is destroyed, preventing memory leaks.

Let's update our template to use the async pipe with the filteredItems$ observable:

<input
  [(ngModel)]="searchText"
  (input)="onSearchTextChange()"
  placeholder="Search items"
/>

<ul>
  <li *ngFor="let item of filteredItems$ | async">
    {{ item }}
  </li>
</ul>

Now our template is even cleaner and more readable!

Comparision of `onSearchTextChange()` for the direct and observable based approach

Direct function call in the template with onSearchTextChange(): When using a direct function call in the template, Angular runs the function during each change detection cycle. Even though the function is bound to the input event, Angular will still check the function call for changes each time it runs change detection. This can lead to poor performance, especially if the function is computationally expensive [in this case it is filtering in every change detection] or the application has frequent updates.
Observable-based onSearchTextChange(): In this case, the function onSearchTextChange() is called only when the input event is emitted, thanks to event binding. The function itself doesn't perform any filtering logic. Instead, it emits a new value to the searchTextChanged$ subject, which triggers the observable pipeline to perform the filtering. This ensures that filtering only occurs when the input value changes, leading to better performance compared to direct function calls in templates.

Now, let's explore some advanced techniques and best practices to make our Angular apps even more efficient and performant.

Step 6: Pure pipes for better performance

Angular provides a number of built-in pipes for transforming data in templates. By default, these pipes are "pure," meaning they only recompute their output when their input values change. This can lead to significant performance improvements, as Angular won't need to re-evaluate the pipe's output during every change detection cycle.

Consider creating custom pure pipes when you have a data transformation that is computationally expensive, but its output is solely determined by its input. Here's an example of a custom pure pipe that filters a list of items based on a search term:

import { Pipe, PipeTransform } from '@angular/core';

@Pipe({
  name: 'filterItems',
  pure: true,
})
export class FilterItemsPipe implements PipeTransform {
  transform(items: string[], searchText: string): string[] {
    return items.filter(item =>
      item.toLowerCase().includes(searchText.toLowerCase())
    );
  }
}

To use our custom pipe in the template, simply replace the *ngFor directive with the following:

<li *ngFor="let item of items | filterItems: searchText">
  {{ item }}
</li>

Now our filtering logic is encapsulated within a custom, pure pipe, making our component even more efficient!

Now, let's compare the observable-based onSearchTextChange() with the custom pure pipe solution.

Observable-based onSearchTextChange(): In this case, the function is called when the input event is emitted. The function itself doesn't perform any filtering logic. Instead, it emits a new value to the searchTextChanged$ subject, which triggers the observable pipeline to perform the filtering. This ensures that filtering only occurs when the input value changes, leading to better performance compared to direct function calls in templates.
Custom pure pipe solution: In this case, we use a custom pure pipe to handle the filtering logic. Pure pipes are more efficient because Angular only recomputes their output when their input values change. This means that the filtering logic is only executed when the input value or the list of items change. This approach eliminates the need for a separate method like onSearchTextChange() and encapsulates the filtering logic within the pipe.

Wrapping up

Congratulations! You've completed the article on avoiding direct function calls in Angular templates. We've covered everything from the basics of property binding and event handling to advanced techniques with observables and pure pipes. By implementing these best practices, you're well on your way to building high-performance Angular applications.

Remember, Angular is a vast and powerful framework with endless possibilities. Keep exploring, learning, and sharing your knowledge with the community. As a fellow Angular enthusiast, I can't wait to see what you create! Happy coding!

#Angular Adventure: Deep Dive into Angular's View Encapsulation 🚀

Hamza Ahmed — Tue, 04 Apr 2023 20:39:14 +0000

Hey there, fellow Angular enthusiasts! Welcome to my Second post! Today, we'll dive into the fascinating world of Angular's view encapsulation. We'll explore the different encapsulation strategies, unravel the mysteries of Emulated and Shadow DOM, and learn some best practices along the way. Let's get started!

The Angular Encapsulation Trio

In Angular, there are three encapsulation strategies: None, Emulated, and ShadowDom. Each has its unique characteristics and use cases. Here's a quick rundown:

None: This strategy disables encapsulation, allowing styles to leak out and affect the entire application.
Emulated: The default strategy in Angular, Emulated encapsulation mimics the behavior of Shadow DOM without using the native implementation. This ensures compatibility with older browsers that don't support Shadow DOM.
ShadowDom: This strategy uses the native Shadow DOM, providing true style encapsulation and other benefits. However, it's not supported by all browsers, so use it with caution.

Emulated Encapsulation Unveiled

When using Emulated encapsulation, Angular adds unique attributes to your HTML elements and modifies your CSS selectors accordingly. This prevents styles from leaking out of your components. Let's look at an example:

<!-- app.component.html -->
<app-custom-element>
  <h2>Angular is Amazing!</h2>
</app-custom-element>

With Emulated encapsulation, the h2 element inside the app-custom-element will get a unique attribute like _ngcontent-abc123. Angular will also modify the CSS selector for the h2 element to h2[_ngcontent-abc123]. This ensures that the styles applied to this h2 element don't affect other h2 elements in the app.

However, there's a caveat! Emulated encapsulation doesn't allow you to apply styles to projected content (e.g., content inserted using ng-content). So, if you need to style projected content, consider using the ShadowDom encapsulation.

The Shadow DOM Saga

Shadow DOM encapsulation offers true style encapsulation but doesn't support global styles. When using Shadow DOM, Angular creates a shadow-root for your component, and styles are applied within this isolated scope. This means styles defined inside the component won't leak out, and global styles won't affect the component.

For instance, if you have a global style for h2 elements and you use Shadow DOM encapsulation for your app-custom-element, the global style won't apply to the h2 element inside the component.

However, Shadow DOM encapsulation enables you to style projected content, which isn't possible with Emulated encapsulation.

Best Practices for Encapsulation Enthusiasts

As an Angular aficionado, it's essential to follow best practices when working with view encapsulation. Here are a few tips to get you started:

Choose the right encapsulation strategy: Understand the pros and cons of each strategy and select the one that fits your project's requirements.
Leverage Angular's component architecture: Components are the building blocks of Angular apps. Use encapsulation to create modular, maintainable, and scalable code.

That's all, folks! I hope you enjoyed this little adventure into Angular's view encapsulation. Stay tuned for more Angular-related content, and happy coding! 🎉

#Angular Adventure: Mastering Secure Local Storage in Angular with Crypto-js

Hamza Ahmed — Tue, 04 Apr 2023 14:41:52 +0000

Hey there, fellow Angular enthusiasts! I'm super excited to share my very first post with you all, and I hope you'll enjoy it as much as I enjoyed writing it. Today, we're going to talk about local storage, an essential aspect of web applications, and how to use it in Angular like a pro. We'll also delve a little into some advanced topics like using crypto-js to encrypt and decrypt data. So, let's dive right in, shall we? 😄

Part 1: What is Local Storage, and why should we care?

Local storage is like a little treasure chest for your web apps, giving them a place to store all kinds of data client-side. Unlike its cousin, session storage, which disappears when you close your browser tab, local storage hangs around for the long haul (or at least until you clear it). It's super handy for storing things like JSON web tokens, user preferences, and app settings. However, it's important to remember that local storage can only store up to 5MB of data per domain.

Now, let's talk about how to work with local storage in Angular. First, I'll show you some plain ol' JavaScript methods to store, retrieve, remove, and clear data. Then, we'll sprinkle some Angular magic on top to create a service wrapper for our local storage API. Ready to learn? Let's do this!

Part 2: Working with Local Storage in Angular

Alright, now that we've got a basic understanding of local storage, let's see how to use it in Angular. First, we'll create a new Angular application using the Angular CLI:

ng new local-app

Once your Angular app is up and running, create a new Angular service with this command:

ng g service local

Our service is going to be a simple wrapper for the local storage API, with methods to add, get, remove, and clear data. Here's what our LocalService looks like:

import { Injectable } from '@angular/core';

@Injectable({
  providedIn: 'root'
})
export class LocalService {

  constructor() { }

  public saveData(key: string, value: string) {
    localStorage.setItem(key, value);
  }

  public getData(key: string) {
    return localStorage.getItem(key)
  }
  public removeData(key: string) {
    localStorage.removeItem(key);
  }

  public clearData() {
    localStorage.clear();
  }
}

To use our shiny new LocalService in our app, we'll inject it into a component. For this example, let's use the app.component.ts file. Import LocalService, and create an instance of it in the constructor method:

import { Component } from '@angular/core';
import { LocalService } from './local.service';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {

  constructor(private localStore: LocalService) {

  }
}

Now that we've got our service set up, let's talk about something a little more advanced: encrypting and decrypting data with crypto-js.

Part 3: Encrypting and Decrypting Data with Crypto-js

Local storage is great and all, but it's not the most secure place to store sensitive data. To add an extra layer of protection, we can use a library called crypto-js to encrypt and decrypt our data before storing and fetching it from local storage.

First, let's install crypto-js in our Angular project using npm:

npm install crypto-js
npm i --save-dev @types/crypto-js

With crypto-js installed, we can import it into our LocalService:

import * as CryptoJS from 'crypto-js';

Now we'll add two new methods to our service to handle encryption and decryption:

private encrypt(txt: string): string {
  return CryptoJS.AES.encrypt(txt, this.key).toString();
}

private decrypt(txtToDecrypt: string) {
  return CryptoJS.AES.decrypt(txtToDecrypt, this.key).toString(CryptoJS.enc.Utf8);
}

With these methods in place, we can update our saveData and getData methods to use encryption and decryption:

public saveData(key: string, value: string) {
  localStorage.setItem(key, this.encrypt(value));
}

public getData(key: string) {
  let data = localStorage.getItem(key) || "";
  return this.decrypt(data);
}

And here's the complete local.service.ts file:

import { Injectable } from '@angular/core';
import * as CryptoJS from 'crypto-js';

@Injectable({
  providedIn: 'root'
})
export class LocalService {

  key = "123";

  constructor() { }

  public saveData(key: string, value: string) {
    localStorage.setItem(key, this.encrypt(value));
  }

  public getData(key: string) {
    let data = localStorage.getItem(key) || "";
    return this.decrypt(data);
  }
  public removeData(key: string) {
    localStorage.removeItem(key);
  }

  public clearData() {
    localStorage.clear();
  }

  private encrypt(txt: string): string {
    return CryptoJS.AES.encrypt(txt, this.key).toString();
  }

  private decrypt(txtToDecrypt: string) {
    return CryptoJS.AES.decrypt(txtToDecrypt, this.key).toString(CryptoJS.enc.Utf8);
  }
}

To test our new encrypted local storage functionality, let's store some data in our app.component.ts file:

import { Component } from '@angular/core';
import { LocalService } from './local.service';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'local-app';

  constructor(private localStore: LocalService) {}

  ngOnInit(): void {
    this.localStore.saveData('id', 'jk123');
    console.log('decrypted data', this.localStore.getData('id'));
  }
}

After saving and running the Angular app, you'll see that the data is now encrypted in local storage. Type localStorage in the browser console, and you'll see something like this:

{
  "id": "U2FsdGVkX1+xovPDV0m0um6MPlrb+p5aG8Rb09TSWaM="
}

Pretty cool, huh? The data is encrypted, and only our app can decrypt it. When accessing local storage data within the application, you'll get the decrypted data, as shown in the console.log call in the ngOnInit method above.

Remember to always think about security when using local storage, especially when handling sensitive data. Local storage is a powerful tool, but with great power comes great responsibility. Happy coding!