Tag: javaScript

How to run HugginFace models in JavaScript

How to run HuggingFace models in Javascript


Hugging Face

Hugging face is a machine learning community where you can share pre trained models and explore other trained models, which are suited for many use cases.

Many of the models already trained well and ready to use. Without delay get started!

Initialize a node project

Initialize a node project by creating and run npm init on the terminal, this will create the basic package.json file.

Make sure that you are registered on HuggingFace and copied the TOCKEN.

No create mistel.js file for running mistrel lang model.

// mstrel.js
import { HfInference } from "@huggingface/inference";

const HF_TOKEN = "Your HugginFaceTocken";

const hf = new HfInference(HF_TOKEN);
 
const prompt ="Who am Christopher"
const res= await hf.textGeneration({
  model:"mistralai/Mixtral-8x7B-Instruct-v0.1", inputs:prompt 
})
console.log(res);

In the package.json add new script for running the file.

{
  "name": "hf",
  "type": "module",
  "version": "1.0.0",
  "description": "",
  "main": "test.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "dev1": "node mistrel.js"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "@huggingface/inference": "^2.6.4"
  }
}

In this example we are using mistralai/Mixtral-8x7B-Instruct-v0.1 model. Make sure the dependency (@huggingface/inference) installed correctly using np install or yarn install

Now we are ready to test the script.

npm run dev

mistrel model will complete the sentence for you.

In this way we can accommodate ML in our React / or any JavaScript Framework projects

Zustand, a minimal store for Rreactjs

In search for a minimal store for React applications.


I have been depending on Context for passing state through components in React and eventually thinks complicated when data is become complex. Move on to beautiful Redux is a bit expensive.

For learning Redux I have spent lots of time and Redux Toolkit, easy to use Redux, saved me a lot.

Even though RTK is ok, it is not a simple library. I am fan of Svelte store and Vuex, Pinia store. Is there any such library for React?

I recently found Zustand a minimal store for React. Love it. 😍

  1. Create a store
  2. Binding
  3. Updating the state

Create a store

Create a store using the create and export the custom hook.

import create from 'zustand'

const useBearStore = create((set) => ({
  bears: 0,
  increasePopulation: () => set((state) => ({ bears: state.bears + 1 })),
  removeAllBears: () => set({ bears: 0 }),
}))

Binding

In your component use the hook. The hook accepts a n arrow functions which will access to the state.

const paw = useBearStore ((state)=>state.bears;

The above statement is Reactive, which means that the changes occurs to the state will reflects. For non reactive purposes us the getState() method.

const paw = useBearStore.getState().bears

Updating the state

For updating the state we can use the setState method.

useBearStore.setState({ bears: 1})

Layout roots in Remix

Layout routes in Remix, how to apply layouts in Remix.


Under the route folder we can create our folder-based route in Remix. The home route can be found named as index.jsx.

Sometimes we need to display same UI for all pages, for instance a navbar for every route or sidebar links for every marketing page. This is where layouts come into play.

Root

Root layout is the default layout. If you need different layout for every page leave the root.jsx alone. 


//root layout
export default function App() {
  return (
    <html lang="en">
      ...
        <Nav3/>   
        <Outlet />
        ....
    </html>
  );
}

Every layout should have <Outlet/> component this is similar to <Slot/> in Vuejs and Svelte, <NuxtPage/> in Nuxt. Outlet will render the route content says, index.jsx

Folder based route / dynamic route

In Remix route blog/index.jsx we can add blog.jsx for adding route layout. The layout should saved same level as the blog 📂. All routes under the blog would apply the layout. 


// blog layout
export default function Blog() {
  return (
    
    <div className="flex justify-center">       
      <div className="prose lg:prose-xl py-10">
        <Outlet />
      </div>
    </div>
  );
}

Remix also supports delimiter-based route. For more documentation on Layout please refer Remix Doc

Not found page UI in Nextjs 13

Setup a Not Found Page Nextjs 13


Nextjs 13 comes with lots of experimental features, one of them was the appDir. Let’s talk about the setup a not found page.

Suppose we want to show not found page for the non-existing route. Nextjs allow you to define a custom Not Found page in app directory.

Create a not-found.jsx/tsx file in the route path and export a component with some cool UI and that’s it.

Each time a wrong path is navigated, the page will show up.

//posts/loading.jsx
export default  function Loading() {
 
  return(
<div>
Data is loading 
</div>
  )
}

Async Data fetching in Remix

How to async data fetching in Remix


Remix is another JavaScript framework for building beautiful web app. May be a better Nextjs killer framework.

So let’s talk about the data fetching in Remix route.

In Remix we can fetch date from API with useLoaderData hook. First up all define and export a loader function in the route.



export const loader = async () => {
  const res = await client.fetch(
    `*[_type == "qset"]{_id,quizes[]->{_id,question,options,category->{name} }} | order(_createdAt desc)`
  );

  const data = await res;
  return data;
};

and in the component we can use the useLoaderData hook for accessing the data.

import { useLoaderData } from "@remix-run/react"
.....

export default function Index() {
  const data = useLoaderData();
  return (
    <div>
      <Status played={2} count={1} />
      <div className="grid grid-cols-2">
        <QContainer>
          {data?.map((set, index) => (
            <Card key={index} data={set?.quizes} />
          ))}
        </QContainer>
      </div>
    </div>
  );
}

Implementing a loading UI in Nextjs 13

Loading UI in Nextjs


Nextjs 13 comes with lots of experimental features, one of them was the appDir. Let’s talk about the loading UI.

Suppose we want to show some UI, may be some cool spinner while data is fetching from the server.

Usually, such UI can be implemented by checking the loading status or wrapping the JSX within a suspense block.

In Next’s latest version they have provided a loading UI, which handle the task.

Create loading.jsx file in the route and export a default component. The loading component will render while data is fetching. No additional coding is required.

//posts/loading.jsx
export default  function Loading() {
 
  return(
<div>
Data is loading 
</div>
  )
}

How to fetch data in Nextjs 13 appDir

How to fetch data in Next 13 app route


Nextjs 13 comes with lots of experimental features, one of them was the appDir. Let’s talk about the data fetching in Nextjs 13.

In the older version we have fetched data in Next app with static props function and passes it down to component as props.

Things have been changed a lot. In appDir data fetching is done at server side and will be available to client. It also improvises the performance.

Do you know that, in Next 13 we can create client and server components. ?

GetData

Define a getData function at the route (page.jsx) and use it in the home component as follows



async function getData() {

  const res = await client.fetch(
    `*[_type == "post"]{title,_createdAt,slug,_id,summary,featured_image} | order(_createdAt desc)`
  );
  const data = await res;
  return data;
}

export default async function Home() {
 
  const posts = await getData();

Try Next 13 experimental App feature

How to create a Nextjs project with experimental appDir feature


Recently Nextjs has introduced new features including a app routing system in version 13, which can be found other frameworks such as SvelteKit.

One of the replacement on both frameworks is that of the index file from the routes to page.jsx / +page.svelte respectively.

How to create Nextjs 13 project with app feature ?

To create a Nextjs 13 project with new features which is run under beta, have to use the experimental-app flag.

npx create-next-app@latest --experimental-app

Try my new blog built with Svelte and sanity

Graphgql :Querying single document in Prismic

Querying single document in Prismic using Graphql query


Prismic CMS

Prismic is a headless CMS that help developers and content managers alike. It is a cloud based service, which allows users to create powerful backend for web and mobile apps with out touching the a single database.

Querying document

Unlike a REST API Graphql API allow us to minimize the load by only fetch the information we needed.

Let’s jump into the topic now. How do we query a single document in Prismic ?

The following code will fetch all documents which is marked as a sticky Post, for my Svelte blog which is hosted on prismic and vercel.

export const STICKY_POST=`query  {
    allPost_types(sortBy: meta_lastPublicationDate_ASC, where: {sticky_post: true}) {
      totalCount
      edges {
        node {
          _meta {
            uid
            firstPublicationDate
          }
          title
          post_excerpt
          featured_img_link {
            ... on _ExternalLink {
              url
            }
          }
        }
      }
    }
  }`;

 const sticky= client.request(STICKY_POST).then(res=>res.allPost_types.edges)

Querying a single document

The above code is fetching a all documents, but how do we fetch single one ? We can achieve this goal by providing first parameter as follows.

Source code

    allPost_types(first:1,sortBy: meta_lastPublicationDate_ASC, where: {sticky_post: true}) {
....

Prismic slices and Dynamic tag in Solidjs

Dynamic tag in Solidjs and Prismic Slice use case.


According to the official docs, Dynamic component lets you insert an arbitrary Component.

It allows to use repeatable component and loop through it. It can be compared to Switch statement which check some criteria and insert component.

<Switch fallback={<BlueThing />}>
  <Match when={selected() === 'red'}><RedThing /></Match>
  <Match when={selected() === 'green'}><GreenThing /></Match>
</Switch>

Here is Dynamic component part

 <Dynamic component={options[selected()]} />

How simple it is. 😆

Prismic CMS use case

I fiund it is useful when dealing with Prismic Slices. First, I need to create a component registry and loop through slices.

The registry will look like following 

const Slices = {
  heading_slice: Heading1,
  code_slice: Code,
  paragraph_slice: Paragraph
};


//Heading1.jsx
export default function Heading1(props) {

    return (
        <div>
            <h1 class="text-xl text-yellow-600 py-3">{props?.content.header_rich_text_field[0].text || "Heading 1"}</h1>
        </div>
    )
}

Here Heading1, Code etc are declared in JavaScript modules. In our content section we have Prismic slices. Let’s loop through it.

<For each={props.post?.body}>
              {(post) => (
                <Dynamic
                  component={Slices[post.type]}
                  content={post.primary}
                ></Dynamic>
              )}
            </For>

Also note that we can pass props to each component, which is identical. Otherwise, you need a different logic.