add collect important information to make the gpt introduce more percisely

[clean99]

Now when we are ask GPT to introduce an element, we only give gpt the information of this element, we can give GPT more information to make the introduction has more context:

1. title of the website.
2. cloest sematic parent tag of this element, like:
   , , ...

[clean99]

HTML5 semantic elements:

• main - represents the main content of the document
• header - represents the header of a section or page
• nav - represents a navigation block containing links to other pages or parts of the same page
• section - represents a standalone section of content that is thematically related and can be treated as an independent unit
• article - represents a self-contained piece of content that can be distributed and reused, such as a news article or blog post
• aside - represents content that is tangentially related to the content surrounding it, such as a sidebar or pull quote
• footer - represents the footer of a section or page, typically containing metadata or additional navigation
• figcaption - represents a caption for a figure element, typically an image or illustration
• figure - represents content that is referenced from the main content, such as an image or illustration with a caption
• details - represents a disclosure widget from which the user can obtain additional information
• summary - represents a summary, caption, or legend for a details element
• mark - represents highlighted text, such as search results or emphasized phrases

implementation(time complexity(O(h) or O(1) if use stop number)):

import $ from 'jquery';

function findSemanticParent(element: HTMLElement, maxDepth: number = 5): string | null {
  const semanticTags = [
    'main', 'header', 'nav', 'section', 'article', 'aside', 'footer',
    'figcaption', 'figure', 'details', 'summary', 'mark'
  ];

  let currentElement = $(element).parent();
  let depth = 0;
  while (currentElement.length > 0 && depth < maxDepth) {
    const tagName = currentElement.prop('tagName').toLowerCase();
    if (semanticTags.includes(tagName)) {
      return tagName;
    }
    currentElement = currentElement.parent();
    depth++;
  }

  return null;
}

[clean99]

Roles: ARIA roles help define the purpose or function of an element, such as a button, link, or widget. They can make it clearer for assistive technologies to understand the role of an element. Examples of ARIA roles include button, link, tabpanel, listbox, menu, and slider.

Properties: ARIA properties describe the characteristics of an element that are not conveyed using native HTML attributes. They can provide additional context for assistive technologies. Examples of ARIA properties include aria-labelledby, aria-describedby, aria-required, aria-haspopup, and aria-multiselectable.

States: ARIA states represent the current state or condition of an element, such as whether it's expanded or collapsed, checked or unchecked, or disabled. Examples of ARIA states include aria-expanded, aria-selected, aria-checked, and aria-disabled.

[clean99]

bring url of link, guess and tell user where they will go