James Tsang

James Tsang

A developer.
github
twitter
tg_channel
HomeArchives

ARTS Check-in Day 10 - AsChild mode in React, LLM fine-tune framework, and patience in listening.

#Coding#LLM#AI#FrontEnd468
AI Translation
This post is translated from Chinese into English through AI.View Original
AI-generated summary
The first part of the text discusses a coding problem where the goal is to find the length of the last word in a given string. The provided solution uses regular expressions and the split method to split the string into words and returns the length of the last word. The second part of the text discusses the "asChild" pattern in React, which is a way to pass a component as a default component to another component. Radix UI has improved this pattern by introducing the "asChild" attribute, which determines whether to render the child component or the default component. The implementation supports rendering only one child component and includes a Slot component for handling props merging and ensuring only one child is passed. The third part of the text discusses the LLaMa-Efficient-Tuning project, which is a framework for fine-tuning open-source language models like LLaMA-2 for specific tasks. The fourth part of the text reflects on the importance of patient listening and the author's realization that they often lack patience in listening and tend to rush to express their own opinions. They recognize the need for more patience in listening and reflect on the benefits of active listening in communication and thinking.

These past few days have been so busy that I missed the daily check-in. I still owe it, so I will make it up over the weekend.

A: 58. Length of Last Word#

Given a string s consisting of some words separated by some number of spaces, return the length of the last word in the string.
A word is a maximal substring consisting of non-space characters only.
Example 1:
Input: s = "Hello World"
Output: 5
Explanation: The last word is "World" with a length of 5.
Example 2:
Input: s = " fly me to the moon "
Output: 4
Explanation: The last word is "moon" with a length of 4.

function lengthOfLastWord(s: string): number {
  const result = s.trim().split(/\s+/)
  return result[result.length - 1].length
}

The submission result is:

58/58 cases passed (68 ms)
Your runtime beats 42.36 % of typescript submissions
Your memory usage beats 93.1 % of typescript submissions (42.2 MB)

This is a very simple problem. Since the regular expression is set to greedy mode by default, the split function will split the string based on the maximum number of spaces. Therefore, it is easy to solve.

R: Implement Radix's asChild pattern in React#

Q: What is the asChild pattern?
It is difficult for a component in a UI library to meet all the requirements of users for options and components. Therefore, an as pattern was invented to pass a component as the default component and support the passing of as component attributes to the upper-level component.

<Button as={Link} />

Radix UI has made some improvements to this pattern, turning it into an asChild attribute. When it is true, the child component is rendered; otherwise, the component is rendered in its default form.

<Button asChild>
  <a href="https://www.jacobparis.com/" />
</Button>

Only rendering one child component is supported, and the implementation is as follows:

function Button({ asChild, ...props }: any) {
  const Comp = asChild ? Slot : "button"
  return <Comp {...props} />
}
function Slot({
  children,
}: {
  children?: React.ReactNode
}) {
  if (React.Children.count(children) > 1) {
    throw new Error("Only one child allowed")
  }
  if (React.isValidElement(children)) {
    return React.cloneElement(children)
  }
  return null
}

Q: What is the purpose of Slot?
The Slot component is used to render the passed-in child component, including merging props, className, and style, as well as ensuring that only one child component is passed in.

Q: What are some implementation details?

  • Type handling: When asChild is false, it needs to accept the default properties of the component; when asChild is true, it is recommended that users pass all properties to the child component.
type AsChildProps<DefaultElementProps> =
  | ({ asChild?: false } & DefaultElementProps)
  | { asChild: true; children: React.ReactNode }
type ButtonProps = AsChildProps<
  React.ButtonHTMLAttributes<HTMLButtonElement>
>
function Button({ asChild, ...props }: ButtonProps) {
  const Comp = asChild ? Slot : "button"
  return <Comp {...props} />
}
  • When merging styles, the style of the child component takes precedence over the style of the parent component, so it needs to be spread later.
  • When merging classNames, if using tailwindcss, the tailwind-merge library can be used for merging; otherwise, simple string concatenation can be used.
  • Use the React.Children.only(null) method to throw an error that only one child element is supported.

I don't quite understand this pattern at first glance, but after reading it, I don't know what it is doing. It seems like it is extracting some props from the original ability to directly render child elements and passing them to the empty shell parent element for transmission. In addition, the type definition of the props of this child component is not easy to write. Suppose some attributes are required but passed through the parent component. In this case, the related props of the child component have to be written as optional types. I don't understand it, but I am deeply impressed. Overall, it seems that the practice of renderProps is better than this.

T: LLaMa-Efficient-Tuning - Fine-Tuning framework for LLaMA-2 and other models#

Currently, to accomplish our tasks using large language models, besides using OpenAI and Anthropic's API services, another main approach is to fine-tune open-source models like LLaMA-2 to meet our specific task requirements and then deploy and use them. This project is a simple and easy-to-use engineering framework for fine-tuning these models, including LLaMA-2, BLOOM, Falcon, Baichuan, Qwen, ChatGLM2, and other popular open-source LLMs.

S: Patience in Listening#

Recently, I have been reflecting on my lack of patience in attentive listening. I always feel that I have understood what others want to say and don't want to listen to more explanations that I have already understood. As a result, I feel very anxious to express my own views when responding, and I speak quickly, which may not create a good communication experience for the other person, and my thinking is not calm enough. So I took a moment to think and realized that I seem to only have such a strong desire to express myself in areas where I am good at, but in general, I am more like a closed jar. This is not good, so I need to have more patience in listening. Here are some specific reflections:

  • I don't express myself in general because I lack the ability to express myself in many areas. Once I encounter an area where I have the ability to express myself, I lack the patience to listen and have a strong desire to express myself. This is not a good thing.
  • I need to shift from proving value through speaking to verifying value through listening.
  • Being good at listening can not only give the other person a better communication experience but also improve my "demeanor" and allow me to have more calm and meticulous thinking.
  • I remembered the sharing from Teacher Tinyfool, when discussing a problem with others, he doesn't express his own views in the first half hour, just listens to the other person's words. After the other person finishes and clarifies, then he expresses his own views, without showing targeted refutation, just saying what he thinks is correct.

Reference:

  1. ARTS Challenge
Loading...
Ownership of this post data is guaranteed by blockchain and smart contracts to the creator alone.