DEV Community: alessiochiffi

Another LLM wrapper

alessiochiffi — Sun, 16 Feb 2025 17:51:58 +0000

Like many of us, I have been fascinated by the capabilities of tools like ChatGPT, Google Gemini, Claude and so on. As someone who loves coding and trying new tools, I wanted to explore what these models can offer via their APIs.

I previously experimented with OpenAI so I wanted to try something different. I opted for Google Gemini AI mainly because of its generous free tier and low costs.

My aim was to create a simple proof-of-concept (POC) page to check grammatical errors by pasting or typing text into a text box and receiving feedback from the AI. I quickly set up the app with the following tech stack:

Nuxt 3 (Vue)
Typescript
SCSS

I then started by creating an API endpoint - using Nuxt’s server/api folder - to manage all LLM interactions server side.

🔌 11 lines of code to connect to the model

Surprisingly I only needed these 11 lines of code to get started, using the javascript SDK provided by Google https://www.npmjs.com/package/@google/generative-ai

import { GoogleGenerativeAI, SchemaType } from '@google/generative-ai';

const genAI = new GoogleGenerativeAI(process.env.GEMINI_API_KEY);

const model = genAI.getGenerativeModel({
  model: 'gemini-1.5-flash',
  generationConfig: {
    responseMimeType: 'application/json',
    responseSchema: schema,
    maxOutputTokens: 800,
    temperature: 0.1,
  },
});

After defining the model, I could send instructions to the model, along with the text provided by the user in the frontend app.

Below is a simplified version of the function that initiates a chat with the model.

const chat = model.startChat({
  history: [
    {
      role: 'user',
      parts: [
        {
          text: 'Instructions to check grammar correctness goes here',
        },
      ],
    },
    ...textToCheck,
  ],
});

const result = await chat.sendMessage(text);
const structuredResponse = result.response;

return structuredResponse;

🖌️ Frontend

The frontend is made by a simple form with a textbox and a 'Submit' button where the user can type or paste text.

We then send a request to the API endpoint created, which processes it with Gemini AI and returns the results back to the frontend.

On the dashboard’s right panel, the response provides a summary and suggested changes, when available

⚒️ Shaping the response

One standout feature of Google Gemini's API is its support for custom response schemas.

Using this feature, I could configure the model to indicate whether a sentence is grammatically correct and, if not, to provide a corrected version.

Here’s the schema I used:

const schema = {
  type: 'object' as SchemaType.OBJECT,
  properties: {
    feedback: { type: 'string' as SchemaType.STRING },
    suggested_response: {
      type: 'string' as SchemaType.STRING,
      description: "",
      nullable: true,
    },
  },
  required: ['feedback'],
};

For example, when evaluating the sentence: “Their going to be here soon.” the model returns:

{
    "feedback": "The sentence has a grammatical error. \"Their\" should be \"They're\" (They are). Also, there should be a space after \"going\".",
    "suggested_response": "They're going to be here soon."
}

This structured output makes it easy to process and display results in the frontend.

It's interesting that you can also describe each property and what you expect from the response using the description key within the schema object.

You can find out more at this link https://ai.google.dev/gemini-api/docs/structured-output?lang=node

Final thoughts

It certainly feels like writing this short post to share my journey took longer than implementing the LLM model itself.

Although my knowledge of AI is limited, I see immense potential in this technology. With much of the complexity abstracted away, we can focus on building products and exploring endless opportunities for innovation. Whether it’s a tool that simplifies our day-to-day tasks or a larger, more ambitious project, we can only embrace the possibilities this technology offers.

If you think this grammar checker could be useful to you, feel free to try it out here https://grammaco.alessioch.com/

Cover image from Novoto Studio

Building charts and Dev UX

alessiochiffi — Sun, 16 Jun 2024 18:03:50 +0000

As a developer one of the frequent decisions I face is selecting the right library for charts on my projects.
It’s a critical choice, as the library can significantly impact both the ease of development and the end-user experience.

For a long time, I relied on Chart.js due to its simplicity and quick setup. However, I quickly encountered limitations. One major issue was the difficulty in customizing tooltips. While Chart.js does offer ways to create custom tooltips, including HTML tooltips, it’s not straightforward. Implementing custom HTML tooltips requires significant manual effort to manage tooltip elements.
Moreover, adapting Chart.js to work seamlessly with responsive designs posed another challenge. Customizing charts with media queries isn’t natively supported, and achieving the desired responsiveness required workarounds that felt more like hacks than solutions.

These limitations led me to explore other options, and that’s when I discovered Apache ECharts
https://echarts.apache.org/en/index.html
This library felt like a breath of fresh air. ECharts offers out-of-the-box support for advanced customizations and responsive designs.
The ability to easily integrate HTML content in tooltips without cumbersome workarounds made a huge difference in the workflow. Additionally, its responsive features are intuitive, making it easier to ensure that charts look great on all devices.

Code for a custom HTML tooltip

It not only enhanced the functionality and aesthetics of my charts but also streamlined my development process. If you’re facing similar issues with your charts, I highly recommend giving ECharts a try.

Vue Composition API and React Hooks comparison

alessiochiffi — Mon, 26 Oct 2020 11:36:37 +0000

With the release of Vue 3 we can now make use of the new Composition API, a set of additive, function-based APIs that allow flexible composition of component logic.

Using Composition API will give you multiple benefits like extraction and reuse of logic between components, Typescript support, local and global state management (you can read more here about State Management with Composition API)

Here is a brief comparison between React and Vue hooks

Basic Hooks

useState

React:

const [currentState, setCurrentState] = useState("");

Vue

const currentState = ref("");

With Vue 3 we have ref (used for primitives) and reactive (used for objects). Vue creates a reactive object where we can set/get the value.

// to set a value
currentState.value = "New value"

// to read the value
currentState.value

It is also possible to share the state with other components using provide and inject (more info here)

useEffect

React:

useEffect(() => {
 console.log(`${currentState}`);
});

Vue

watchEffect(() => console.log(currentState))

// or watch
watch(currentState, (currentState, prevCurrentState) => {
  console.log(currentState, prevCurrentState)
})

Vue 3 introduces watchEffect, useful when you want to keep track of multiple source changes and when you don't need to know the old values.
You can also use watch to track a single source lazily. The main difference between the two is that watchEffect runs immediately while watch runs lazily.
watchEffect also doesn't require separating the watched data source and the side effect callback.

Computed and useMemo

In Vue 3, computed is a function that returns a reactive value based on one or more reactive sources. It can be used to derive a new value from existing reactive data without triggering unnecessary re-renders. When any of the reactive sources change, the computed value is automatically updated.

In React, useMemo is a hook that takes a function and an array of dependencies, and returns a memoized value that is only recalculated when one of the dependencies changes. It can be used to improve the performance of a component by avoiding expensive calculations on every render.

Vue

<template>
  <div>
    <p>Sum of all numbers: {{ sum }}</p>
    <p>Numbers greater than {{ threshold }}:</p>
    <ul>
      <li v-for="num in filteredNumbers" :key="num">{{ num }}</li>
    </ul>
    <input type="number" v-model.number="threshold" />
  </div>
</template>

<script setup>
import { ref, computed } from 'vue';

const numbers = ref([1, 2, 3, 4, 5]);
const threshold = ref(3);

const sum = computed(() => {
  return numbers.value.reduce((acc, num) => acc + num, 0);
});

const filteredNumbers = computed(() => {
  return numbers.value.filter(num => num > threshold.value);
});
</script>

React

import { useState, useMemo } from 'react';

function NumberList({ numbers }) {
  const [threshold, setThreshold] = useState(10);

  const sum = useMemo(() => {
    return numbers.reduce((acc, num) => acc + num, 0);
  }, [numbers]);

  const filteredNumbers = useMemo(() => {
    return numbers.filter(num => num > threshold);
  }, [numbers, threshold]);

  return (
    <div>
      <p>Sum of all numbers: {sum}</p>
      <p>Numbers greater than {threshold}:</p>
      <ul>
        {filteredNumbers.map(num => <li key={num}>{num}</li>)}
      </ul>
      <input type="number" value={threshold} onChange={e => setThreshold(parseInt(e.target.value))} />
    </div>
  );
}

Custom Hooks / Extraction and Reuse of logic

We can easily create custom hooks. Here is an example of a function returning the mouse position

React

import { useEffect, useState } from "react";

export const useMousePosition = () => {
  const [position, setPosition] = useState({ x: 0, y: 0 });

  useEffect(() => {
    const update = e => setPosition({ x: e.clientX, y: e.clientY });
    window.addEventListener("mousemove", update);

    return () => {
      window.removeEventListener("mousemove", update);
    };
  }, []);

  return position;
};

Vue

import { ref, onMounted, onUnmounted } from 'vue'

export function useMousePosition() {
  const x = ref(0)
  const y = ref(0)

  function update(e) {
    x.value = e.pageX
    y.value = e.pageY
  }

  onMounted(() => {
    window.addEventListener('mousemove', update)
  })

  onUnmounted(() => {
    window.removeEventListener('mousemove', update)
  })

  return { x, y }
}

That's all for now! I will try to keep updated this post with new examples.