DEV Community: gagaisyou

Train an obedient AI! I made a free AI prompt optimizer!

gagaisyou — Tue, 08 Jul 2025 13:07:00 +0000

Hello everyone, I'm Gaga.

Lately, I've noticed that AI has become quite unhelpful in my work. It often generates a lot of useless information or completely misunderstands what I mean.

This happens because the problem isn't described clearly enough. It's like two strangers trying to communicate: if one speaks in riddles, the other will struggle to understand. However, we humans always hope the other person can read our minds, requiring minimal language for them to grasp our thoughts.

That's why I created a prompt optimization tool.

It can analyze our needs and tell us what information the AI requires to produce better results.

Let me give you an example.
If I directly ask Gemini to "generate a picture of a beautiful woman," the result is this:

HolyShit!!
As you can see, Gemini doesn't know what kind of woman I prefer, so it can only guess. Now, let's try with an optimized prompt:

It's only a slight improvement, but the optimizer provides an analysis of the problem. For instance, it tells us which variables are needed to generate a picture of a beautiful woman. We can then modify this structured prompt based on our preferences, like making her wear pink pants.

Technical Implementation

LangChain
LangChain is a powerful development framework for integrating AI models. Currently, I've connected two free models, Gemini and Cloudflare AI, through LangChain. It's quite convenient to use. You can build a pipeline like this to execute large language models and then choose streaming output.

try {
  const { modelName = "gemini", prompt = defaultPrompt } = options;
  const promptTemplate = ChatPromptTemplate.fromTemplate(prompt);
  const model = modelName === "cloudflare" ? this.cloudflareModel : this.googleModel;
  console.log("Creating RunnableSequence chain");
  const chain = RunnableSequence.from([
    {
      query: new RunnablePassthrough(),
    },
    promptTemplate,
    model,
    new StringOutputParser(),
  ]);
  const result = await chain.invote(query);
  return result;
} catch (error) {}

Draw a sunny rainbow small triangle with Javascript

gagaisyou — Tue, 08 Jul 2025 13:00:51 +0000

Hello everyone! Recently, I came across the graphics code I wrote two or three years ago and realized I've forgotten quite a bit. So, I'm writing this article to review it. Here are the previous results:
https://github.com/925558718/CanvasRender

Prepare the rendering environment: Canvas

const canvas = document.querySelector<HTMLCanvasElement>("#canvas")!;
const ctx = canvas.getContext("2d")!;

const buffer = new Uint8ClampedArray(500 * 500 * 4);

ctx.putImageData(new ImageData(buffer, 500, 500), 0, 0);

We create a buffer, modify it, and then render it to the canvas.

Triangle Data Definition

We can store three vertices in an array, like [p1, p2, p3].

Our current canvas is 500x500, so we define a triangle as [[0,0], [250,500], [500,500]], which makes its bounding box the entire canvas.

The origin of the canvas coordinate system is at the top-left, so our goal is to render a triangle with its tip pointing to the left.

Two Ways to Draw a Triangle

Scanline Algorithm

This method involves scanning vertically from top to bottom, finding the two intersection points of a horizontal line with the triangle, and then iterating through the pixels between these two intersection points to color them.
First, sort the vertices to ensure the higher vertex is first.

  // Sort vertices by y-coordinate
  const sortedVertices = [...points].sort((a, b) => a[1] - b[1]);
  const [p0, p1, p2] = sortedVertices;

For easier manipulation, we operate on the upper and lower regions separately.

Start iterating:

  // Calculate intersection points, which is essentially interpolation. Given the y-value of the midpoint, find the x-component.
  function interpolate(y: number, y0: number, x0: number, y1: number, x1: number): number {
    if (y1 === y0) return x0;
    return x0 + (x1 - x0) * (y - y0) / (y1 - y0);
  }
  function fillUpperTriangle() {
    if (p1[1] === p0[1]) return; // Avoid division by zero
    
    for (let y = p0[1]; y <= p1[1]; y++) {
      // Calculate x-coordinates of the left and right boundaries
      const x1 = interpolate(y, p0[1], p0[0], p1[1], p1[0]); // Edge from p0 to p1
      const x2 = interpolate(y, p0[1], p0[0], p2[1], p2[0]); // Edge from p0 to p2
      
      // Ensure xLeft < xRight
      const xLeft = Math.min(x1, x2);
      const xRight = Math.max(x1, x2);
      
      // Fill the row
      for (let x = Math.ceil(xLeft); x <= Math.floor(xRight); x++) {
        setPixel(x, y, color[0], color[1], color[2], color[3]);
      }
    }
  }
    // Helper function to set pixel color
  function setPixel(x: number, y: number, r: number, g: number, b: number, a: number) {
    if (x < 0 || x >= 500 || y < 0 || y >= 500) return;
    
    const index = (Math.floor(y) * 500 + Math.floor(x)) * 4;
    buffer[index] = r;     // Red
    buffer[index + 1] = g; // Green
    buffer[index + 2] = b; // Blue
    buffer[index + 3] = a; // Alpha
  }

The lower part uses a similar operation, just iterating through the lower region.

Iteration + Barycentric Coordinates

The scanline algorithm is fast, but its capabilities are limited. What if I want to render a colored triangle?

To render a colored triangle, we can define the colors of the three vertices, but how do we define the color of points in between? This is where barycentric coordinates come in handy.

What are Barycentric Coordinates?

Simply put, any point P within a triangle can be expressed as P=αP +βP +γP , where α+β+γ=1 and α,β,γ≥0. These three coefficients can then be multiplied by the colors to calculate the interpolated color of that point.

How to Calculate Barycentric Coordinates

Area Method

When point P is connected to the other three vertices, it forms three sub-regions within the triangle. The ratio of each sub-region's area to the total area of the triangle gives its corresponding coefficient. For example, for point P 3, its coefficient is Area(P,P2,P1)/Area(P1,P2,P3), which is precisely the percentage of the total area occupied by the region formed by the other two points and point P.

  function getBarycentricCoordinates(px: number, py: number): [number, number, number] {
    // Calculate barycentric coordinates using the area method
    const denominator = (p1[1] - p2[1]) * (p0[0] - p2[0]) + (p2[0] - p1[0]) * (p0[1] - p2[1]);
    
    if (Math.abs(denominator) < 1e-10) {
      return [0, 0, 0]; // Degenerate triangle
    }
    
    // Barycentric coordinates u, v, w (corresponding to vertices p0, p1, p2)
    const u = ((p1[1] - p2[1]) * (px - p2[0]) + (p2[0] - p1[0]) * (py - p2[1])) / denominator;
    const v = ((p2[1] - p0[1]) * (px - p2[0]) + (p0[0] - p2[0]) * (py - p2[1])) / denominator;
    const w = 1 - u - v;
    
    return [u, v, w];
  }

Then, we start iterating through the entire bounding box:

  // Iterate over all pixels within the bounding box
  for (let y = minY; y <= maxY; y++) {
    for (let x = minX; x <= maxX; x++) {
      // Calculate the barycentric coordinates for the current pixel
      const [u, v, w] = getBarycentricCoordinates(x + 0.5, y + 0.5); // +0.5 for sampling the pixel center
      
      // If the point is inside the triangle, fill it
      if (isInsideTriangle(u, v, w)) {
        // Use barycentric coordinates to interpolate the color
        const [r, g, b, a] = interpolateColor(u, v, w);
        setPixel(x, y, r, g, b, a);
      }
    }
  }

However, iterating through every point in the bounding box and then calculating barycentric coordinates is quite inefficient. We can add some optimization to check if a point is inside the triangle before calculating barycentric coordinates, but I won't go into detail here. Let's just look at the results.

How Many State Management Libraries Are In Your Project?

gagaisyou — Sun, 08 Jun 2025 12:41:13 +0000

Hey everyone!

In today's front-end development, facing increasingly complex and diverse application scenarios, it seems we all share a "sweet burden": having to install multiple state management libraries. How many do you typically include in your projects? In my own, I frequently use Jotai, Zustand, React-Query, and sometimes even my own custom publish-subscribe implementations (or event-driven libraries like RxJS and Alien-Signals).

Exploring Each Library's Strengths and Use Cases

Jotai

Jotai is an atomic state management tool. It excels at handling small-scale, component-level state sharing.

For instance, if you need to control the display/hide state of a modal, you can simply export an atom from within the modal component itself and import it wherever needed (or manage it via a proxy pattern). There's no need to lift it to a page-level global state.

While Jotai also offers advanced capabilities like derived state, trying to handle complex page-level state logic with it can lead to disorganized code.

Zustand

Zustand is a versatile and well-balanced state management library. It provides a moderate yet efficient solution for various state management challenges, performing well with global state, local state, and integrations with other React features.

React-Query

React-Query is specifically designed to manage server-side state, and it doubles as an excellent task execution manager. It's tightly integrated with many libraries in the React ecosystem, often being installed as a dependency when you include them. Since it's already there, why not leverage its powerful features?

"Server-side state" is a concept that has gained traction recently, primarily referring to caching API data via hashing. This means you no longer need to write an extra layer of logic, as you might with Zustand, to handle incoming API data. React-Query automatically manages data fetching, caching, updating, and synchronization for you, greatly simplifying the data layer development.

Event-Driven Solutions

Some business logic is inherently event-driven, and managing it solely with React's dependency arrays can become incredibly challenging.

For example, our business's login flow might require not only receiving a JWT Token from SSO (Single Sign-On) but also completing certain tasks before successful entry into the system. This involves two dependencies. If we use useEffect, it might execute the effect function twice, and we'd have to worry about unexpected scenarios, even though it's fundamentally a single "login event" that triggers the logic. Event-driven libraries, on the other hand, offer better decoupling and management for such complex, multi-step event flows.

By selectively combining these different state management tools, we can choose the most suitable solution based on our project's specific needs and scenarios, thereby building clearer and more maintainable front-end applications.

How do you choose and combine these state management libraries in your projects? Does this "blooming" state management ecosystem make your development easier, or do you also feel it's a bit of a "sweet burden"?

I Built Limgx, an Image Conversion Powerhouse, with FFmpeg.wasm!

gagaisyou — Sat, 07 Jun 2025 10:17:51 +0000

Hello everyone!

This March, I experienced a career transition – I was laid off by my company. After working for so long, I felt quite exhausted and had also been contemplating a career shift. It was time to create something of my own.

Although I felt momentarily lost and unsure where to start, I decided to begin with a simple tool website. By summarizing my daily work needs for tools, I found that the most frequent scenarios involved image compression and format conversion. And so, a picture converter project was born!

Limgx：My Image Conversion Marvel

I named this product Limgx.

L stands for local (local processing)
img represents image
X symbolizes the conversion function

A simple, straightforward, and powerful name!

Welcome to visit my work: https://limgx.com

Rolling Up Sleeves to Code!

Implementation Plan: The Pleasant Surprise of FFmpeg.WASM

When brainstorming the implementation, I initially considered traditional front-end Canvas local processing or building a server for conversions. However, during my research, I unexpectedly discovered an exciting piece of cutting-edge technology: FFmpeg actually has a WASM version! https://ffmpegwasm.netlify.app/

Although the WASM version may not match the performance of the local native FFmpeg, it is definitely much faster than Canvas conversion! The only "drawback" is that the WASM package size reaches 30MB. Nevertheless, through careful optimization of the user experience and browser caching mechanisms, I believe this is not a major issue.

Using FFmpeg.wasm is incredibly intuitive, as simple as piecing together parameters in the command line:

JavaScript

const transcode = async () => {  
  const ffmpeg = ffmpegRef.current;  
  // Write the input file  
  await ffmpeg.writeFile('input.webm', await fetchFile('https://raw.githubusercontent.com/ffmpegwasm/testdata/master/Big_Buck_Bunny_180_10s.webm'));  
  // Execute the conversion command  
  await ffmpeg.exec(['-i', 'input.webm', 'output.mp4']);  
  // Read the output result  
  const data = await ffmpeg.readFile('output.mp4');  
}

To allow users to flexibly choose input and output quality, we need to dynamically pass these parameters. Since different image formats require different codecs and parameters, to keep the code clean and maintainable, I adopted the strategy pattern. Here’s an example of a strategy for handling WebP conversion:

JavaScript

/**  
 * WebP Conversion Strategy  
 * Handles image conversion and compression for the WebP format  
 */  
export class WebPConversionStrategy implements ConversionStrategy {  
  getArgs(inputFileName: string, outputName: string, quality: number, width?: number, height?: number): string[] {  
    const args = ['-i', inputFileName];  

    // Resolution scaling  
    if (width || height) {  
      let scaleArg = 'scale=';  
      scaleArg += width ? `${width}:` : '-1:';  
      scaleArg += height ? `${height}` : '-1';  
      args.push('-vf', scaleArg);  
    }  

    // Explicitly specify the use of the libwebp encoder  
    args.push('-c:v', 'libwebp');  

    // WebP quality control (directly using a quality value between 0-100)  
    args.push('-quality', String(quality));  

    // Ensure lossy compression is used  
    args.push('-lossless', '0');  

    // Use the best compression method  
    args.push('-method', '6');  

    args.push(outputName);  
    return args;  
  }  
}

FFmpeg’s power extends far beyond image conversion. It can easily be expanded to more interesting application scenarios, such as WebP or GIF animated image generators.

Technology Stack Selection and Considerations

After finalizing the plan, I began selecting the appropriate technology stack. Eventually, I chose a combination of Next.js + Tailwind CSS + Shadcn UI + next-intl + ffmpeg.wasm.

For the deployment platform, I selected Cloudflare. Although Next.js pairs more "officially" with Vercel, Cloudflare’s unlimited free traffic was extremely appealing to me, and it also integrates domain management and other functions, allowing me to unify my operations and maintenance work on the Cloudflare platform.

SEO: The Lifeline of Website Traffic

For a website built by an individual, a large portion of traffic comes from SEO (Search Engine Optimization), making it a top priority.

Server-Side Rendering (SSR): For SEO considerations, my framework had to support SSR, so I chose Next.js. However, if I were to start over now, I might lean more toward SolidStart. The reason is simple: my website has minimal dependency on the React ecosystem, and Solid.js pages may outperform React pages in performance metrics (such as TTFB and TTI) in some cases, which could help me achieve higher SEO rankings.
Internationalization (i18n): I used the next-intl library to implement internationalization. It supports i18n routing and can dynamically generate translated metadata based on language, which is very friendly to global users and search engines.

Style and Design: Balancing Aesthetics and Efficiency

I chose a combination of Shadcn UI and Tailwind CSS. Shadcn UI provides a unique design style and reusable components while allowing me to deeply customize them as needed.

For the overall website design, I experimented with AI assistance. Although the results were sometimes random, I personally think the final effect turned out quite good!

Summary

Currently, website traffic is low, and it is speculated that this may be because Google has not yet crawled the new content. After submitting the Sitemap for a new website, it takes time to take effect, so I plan to observe for one month first.

May I ask if you all have any optimization suggestions?