Forem: Duoc95

Too lazy to watch entire meeting record on google drive

Duoc95 — Sat, 14 Mar 2026 03:42:56 +0000

I created the chrome extension to extract all subtitle of an video on google drive and use AI to summary it and also chat with it too.
check it here Lazy Meet

My very first internet money

Duoc95 — Sat, 14 Mar 2026 03:41:19 +0000

What products have I shipped in 2025

Duoc95 — Tue, 23 Dec 2025 04:16:27 +0000

My Very first mobile app in app store: MamaScan
Vscode Extension for Claude Code user Ask Claude
2 websites for my friends

How about your, let share 👇

VSCode Extension for Claude Code

Duoc95 — Fri, 01 Aug 2025 02:41:38 +0000

Just shipped a VS Code extension:
Old way: Hover → Wait → Copy → Terminal → Paste
New way: Hover → Click "Fix with Claude Code"
Check this out
Happy coding!

I Created a VSCode Extension to Warn Against Vulnerable MongoDB Queries

Duoc95 — Tue, 01 Apr 2025 05:01:54 +0000

Hi devs,

Recently, I noticed that some of my queries could be vulnerable to attacks, so I decided to create a small VSCode extension safemongo to warn me.

Here's how it works:

This extension only displays warnings. If you're not using schema validation, it might be helpful.
and it open source top, let's checkout my repo

Thank you, and happy coding!

Will you stop learning to code?

Duoc95 — Sat, 29 Mar 2025 11:17:15 +0000

For me, never. Coding is a part of my life, and I keep learning to discover and develop myself. How about you?

Build a Free AI Image Generator with ReactJS

Duoc95 — Tue, 15 Oct 2024 02:23:53 +0000

Hi Devs,
Today, I'm going to show you how to create an image generator using ReactJS, and it's all free to use, thanks to Black Forest Labs and Together AI.

Step 1: Setting Up the Project

For this tutorial, we'll be using Vite to initialize the app and Shadcn for the UI. I'll assume you're already set up the project and installed Shadcn.

Step 2: Install the Together AI package

We need to install the Together AI package to access the free Flux model for image generation.
Run following command in your terminal

npm i together-ai

Step 3: Building the UI

Now, let's create the UI for our app. Below is the full code for image generator component. it includes a text input for prompts. a dropdown for aspect ratios selection.
Keep in mind, we need to use "black-forest-labs/FLUX.1-schnell-Free" because it's free.

import { useRef, useState } from "react";
import Together from "together-ai";
import { ImagesResponse } from "together-ai";
import { Button } from "@/components/ui/button";
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from "@/components/ui/select";
import { Textarea } from "@/components/ui/textarea";
import { motion } from "framer-motion";
import { Separator } from "@/components/ui/separator";
import { DownloadIcon } from "@radix-ui/react-icons";
import { save } from "@tauri-apps/plugin-dialog";
import { writeFile } from "@tauri-apps/plugin-fs";

function App() {
  const [input, setInput] = useState("");
  const [imageUrl, setImageUrl] = useState("");
  const [ratio, setRatio] = useState("9:16");
  const [isLoading, setIsLoading] = useState(false);
  const [downloading, setDownloading] = useState(false);
  const imageRef = useRef<HTMLImageElement>(null);

  const hRatio = ratio.split(":").map(Number)[0];
  const vRatio = ratio.split(":").map(Number)[1];

  const width = hRatio === 1 ? 512 : hRatio * 64;
  const height = vRatio === 1 ? 512 : vRatio * 64;

  const together = new Together({
    apiKey: import.meta.env.VITE_TOGETHER_API_KEY,
  });

  const handleGenerateImage = async () => {
    setIsLoading(true);

    try {
      console.log(width, height);
      const response: ImagesResponse = await together.images.create({
        model: "black-forest-labs/FLUX.1-schnell-Free",
        prompt: input,
        width: width,
        height: height,
        // @ts-expect-error response_format is not defined in the type
        response_format: "b64_json",
      });

      const base64Image = response.data[0].b64_json;
      const dataUrl = `data:image/png;base64,${base64Image}`;
      setImageUrl(dataUrl);
    } catch (error) {
      console.error("Error generating image:", error);
      // You might want to add some error handling UI here
    } finally {
      setIsLoading(false);
    }
  };

  const handleDownloadImage = async () => {
    if (imageUrl) {
      setDownloading(true);
      try {
        // Remove the data URL prefix
        const base64Data = imageUrl.replace(/^data:image\/\w+;base64,/, "");

        // Convert base64 to binary
        const imageBuffer = Uint8Array.from(atob(base64Data), (c) =>
          c.charCodeAt(0)
        );

        // Open a save dialog
        const filePath = await save({
          filters: [
            {
              name: "Image",
              extensions: ["png"],
            },
          ],
        });

        if (filePath) {
          // Write the file
          await writeFile(filePath, imageBuffer);
          console.log("File saved successfully");
        }
      } catch (error) {
        console.error("Error saving image:", error);
      } finally {
        setDownloading(false);
      }
    }
  };

  return (
    <div className="bg-gradient-to-br from-indigo-100 via-purple-100 to-pink-100 p-10 md:p-8">
      <motion.div
        initial={{ opacity: 0, y: 20 }}
        animate={{ opacity: 1, y: 0 }}
        transition={{ duration: 0.5 }}
        className="max-w-7xl mx-auto bg-white/80 backdrop-blur-sm rounded-3xl shadow-2xl overflow-y-auto"
      >
        <div className="flex flex-col md:flex-row h-[calc(100vh-4rem)]">
          <div className="w-full md:w-1/2 p-6 flex flex-col">
            <h2 className="text-3xl font-bold mb-6 text-gray-800 bg-clip-text text-transparent bg-gradient-to-r from-indigo-500 to-purple-600">
              AI Image Generator
            </h2>
            <div className="flex-grow flex flex-col justify-center">
              <Textarea
                value={input}
                onChange={(e) => setInput(e.target.value)}
                placeholder="Describe the image you want to create..."
                className="mb-4 resize-none rounded-2xl border-2 border-indigo-200 focus:border-indigo-500 transition-colors"
                rows={5}
              />
              <div className="flex items-center space-x-4 mb-6">
                <Select value={ratio} onValueChange={setRatio}>
                  <SelectTrigger className="w-full rounded-full border-2 border-purple-200 focus:border-purple-500 transition-colors">
                    <SelectValue placeholder="Select ratio" />
                  </SelectTrigger>
                  <SelectContent>
                    <SelectItem value="1:1">1:1</SelectItem>
                    <SelectItem value="4:3">4:3</SelectItem>
                    <SelectItem value="16:9">16:9</SelectItem>
                    <SelectItem value="3:4">3:4</SelectItem>
                    <SelectItem value="9:16">9:16</SelectItem>
                  </SelectContent>
                </Select>

                <Button
                  onClick={handleGenerateImage}
                  disabled={isLoading}
                  className="flex-shrink-0 bg-gradient-to-r from-indigo-500 to-purple-600 hover:from-indigo-600 hover:to-purple-700 text-white font-semibold py-2 px-4 rounded-full transition-all duration-300 ease-in-out transform hover:scale-105"
                >
                 {isLoading ? "Generating..." : "Generate Image"}
                </Button>
              </div>
            </div>
          </div>
          <Separator orientation="vertical" className="hidden md:block" />
          <div className="w-full md:w-1/2 p-6 bg-gray-50/50 flex flex-col">
            <h2 className="text-3xl font-bold mb-6 text-gray-800 bg-clip-text text-transparent bg-gradient-to-r from-purple-500 to-pink-600">
              Generated Image
            </h2>
            {imageUrl ? (
              <motion.div
                initial={{ opacity: 0, scale: 0.9 }}
                animate={{ opacity: 1, scale: 1 }}
                transition={{ duration: 0.5 }}
                className="flex-grow flex flex-col items-center justify-center"
              >
                <img
                  ref={imageRef}
                  src={imageUrl}
                  alt="Generated"
                  className="max-w-full max-h-[60vh] object-contain rounded-lg shadow-lg mb-6"
                />
                <div className="flex space-x-4">
                  <Button
                    onClick={handleDownloadImage}
                    className="rounded-full bg-gradient-to-r from-purple-500 to-pink-600 hover:from-purple-600 hover:to-pink-700 text-white font-semibold py-2 px-4 transition-all duration-300 ease-in-out transform hover:scale-105 flex items-center space-x-2"
                  >
                    {downloading ? "Downloading..." : <DownloadIcon />}
                    <span>Download</span>
                  </Button>
                </div>
              </motion.div>
            ) : (
              <div className="flex-grow flex items-center justify-center text-gray-400">
                <p className="text-lg italic">
                  Your generated image will appear here
                </p>
              </div>
            )}
          </div>
        </div>
      </motion.div>
    </div>
  );
}

export default App;

Final Thoughts

With this setup, you now have a simple ReactJS app that can generate and download AI-generated images.
Thanks for reading! If you think this post is interesting, don’t hesitate to give it a like. Happy coding!

Blockchain: Which Language to Learn First?

Duoc95 — Mon, 12 Aug 2024 01:34:17 +0000

I am new to blockchain development. Which language should I learn? I'm concerned about Solidity and Move.

OpenAI Assistant with NextJS

Duoc95 — Sun, 26 May 2024 09:25:40 +0000

In this blog, I will show you how to use the OpenAI Assistant with NextJS.

What is the OpenAI Assistant?

The OpenAI Assistant is a purpose-built AI that uses OpenAI's models and can access files, maintain persistent threads, and call tools. Reference.

Let's Get Started

Create Your First Assistant

Prerequisite: You need to have an OpenAI API subscription. Go to the OpenAI platform, and on the navigation sidebar, click on "Assistants."

On the assistant page, click "Create your assistant."

Give it a name and describe what you want your assistant to do. Remember, the more detailed your description is, the more precise the assistant's answers will be.

Create the NextJS UI

I assume you know how to create a NextJS project. In this project, I use NextJS with Shadcn UI.

Create the Chat UI

"use client";

import CustomReactMarkdown from "@/components/CustomMarkdown";
import WithAuth from "@/components/WithAuth";
import { Button } from "@/components/ui/button";
import { Textarea } from "@/components/ui/textarea";
import { cloneDeep } from "lodash";
import { useForm } from "react-hook-form";
import {
  BotIcon,
  CircleSlash,
  SendHorizonalIcon,
  User,
  Wand,
} from "lucide-react";
import { useEffect, useRef, useState } from "react";

type Message = {
  text: string;
  role: string;
};

function Page() {
  const { register, handleSubmit, reset } = useForm();

  const [chatLogs, setChatLogs] = useState<Message[]>([]);
  const chatRef = useRef<HTMLDivElement>(null);
  const lastMessage = chatLogs?.[chatLogs.length - 1]?.text;
  const [processing, setProcessing] = useState(false);
  const [isTyping, setIsTyping] = useState(false);

  useEffect(() => {
    if (chatRef.current) {
      chatRef.current.scrollTo({
        top: chatRef.current.scrollHeight,
        behavior: "smooth",
      });
    }
  }, [lastMessage]);

  const onSubmit = async (data: any) => {
    const prompt = data.prompt;
    if (!prompt) {
      return;
    } else {
      setProcessing(true);
      setChatLogs((prev) => [
        ...prev,
        {
          text: prompt,
          role: "user",
        },
      ]);
      const formdata = new FormData();
      formdata.append("prompt", prompt);
      reset();

      const res = await fetch("/api/assistant", {
        method: "POST",
        body: formdata,
      });

      const reader = res.body?.pipeThrough(new TextDecoderStream()).getReader();

      while (true) {
        const val = (await reader?.read()) as {
          done: boolean;
          value: any;
        };

        if (val?.done) {
          setIsTyping(false);
          break;
        }

        if (val?.value) {
          if (val?.value?.includes("in_progress")) {
            setProcessing(false);
          }
          if (val?.value?.includes("completed")) {
            setIsTyping(false);
          }
          let content;
          const cleanedString = val?.value;
          content = JSON.parse(cleanedString);

          if (content?.event === "thread.message.delta") {
            if (processing) {
              setProcessing(false);
            }
            if (!isTyping) {
              setIsTyping(true);
            }
            const text = content?.data?.delta?.content?.[0]?.text?.value ?? "";
            setChatLogs((prev) => {
              const newLogs = cloneDeep(prev);
              const lastMessage = newLogs?.[newLogs.length - 1];
              if (lastMessage?.role === "assistant") {
                lastMessage.text += text;
              } else {
                newLogs.push({
                  text,
                  role: "assistant",
                });
              }
              return newLogs;
            });
          }
        }
      }
    }
  };

  return (
    <div className="relative  max-w-7xl mx-auto min-h-[calc(100vh-80px)]">
      <h1 className="text-xl sm:text-2xl text-center mt-2 relative ">
        <span className="flex items-center space-x-2 justify-center">
          <span>Recipe Assistant </span>
          <BotIcon color="blue" />
        </span>
      </h1>
      <div
        ref={chatRef}
        className="overflow-y-auto mt-2 sm:mt-4 p-3 sm:p-8 rounded-lg no-scrollbar h-[calc(100vh-230px)]"
      >
        {chatLogs.map((log, index) =>
          log.role === "user" ? (
            <div key={index} className="relative p-2 sm:p-6">
              <span className="text-gray-500">
                <User
                  className="sm:absolute left-0 sm:-translate-x-[120%]"
                  size={27}
                />
              </span>
              <div bg-gray-50>{log.text}</div>
            </div>
          ) : (
            <div key={index} className="relative ">
              <span className="text-gray-500 ">
                <BotIcon
                  className="sm:absolute left-0 sm:-translate-x-[120%]"
                  size={27}
                />
              </span>
              <CustomReactMarkdown
                content={log.text}
                className="p-2 sm:p-6  bg-gray-100 my-3"
              />
            </div>
          )
        )}
        {processing && (
          <div className="flex items-center space-x-2">
            <span className="animate-spin ">
              <CircleSlash />
            </span>
          </div>
        )}
      </div>
      <div className="absolute w-full left-0 bottom-0 text-sm">
        <div className="w-10/12 mx-auto sm:hidden"></div>
        <form
          onSubmit={handleSubmit(onSubmit)}
          className="flex gap-4 w-10/12  mx-auto  relative "
        >
          <Textarea
            className="text-sm sm:text-md md:text-xl px-8 sm:px-4"
            placeholder="I use the XS-10 camera. I will take pictures of a female model at 6 AM."
            id="prompt"
            {...register("prompt")}
            onKeyDown={(e) => {
              if (e.key === "Enter" && !e.shiftKey) {
                e.preventDefault();
                handleSubmit(onSubmit)();
              }
            }}
          />
          <Button
            size={"sm"}
            variant={"link"}
            type="submit"
            className="absolute right-0 sm:right-3 px-1 sm:px-3 top-1/2 -translate-y-1/2"
            disabled={processing || !prompt || isTyping}
          >
            <SendHorizonalIcon />
          </Button>
        </form>
      </div>
    </div>
  );
}

This is my UI

Create the API Route

First, you need to install the OpenAI package:

npm i openai

The API route code example:

import OpenAI from 'openai';
import { NextRequest, NextResponse } from 'next/server';

const openai = new OpenAI({
  apiKey: process.env['OPENAI_API_KEY'],
});

export async function POST(req: NextRequest, res: NextResponse) {
  const formData = (await req.formData()) as any;
  const prompt = (formData.get("prompt") as string) ?? '';
  const thread = await openai.beta.threads.create();
  await openai.beta.threads.messages.create(
    thread.id,
    {
      role: "user",
      content: prompt,
    }
  );
  const result = await openai.beta.threads.runs.create(thread.id, {
    assistant_id: process.env['OPENAI_ASSISTANT_ID'] as string,
    stream: true,
  });
  const response = result.toReadableStream();

  return new Response(response, {
    headers: {
      'Content-Type': 'text/plain',
      'Transfer-Encoding': 'chunked',
      'Connection': 'keep-alive',
    },
  });
}

Here is my own fujifilm recipes assistant fujifilm assistant

And that's it! Create your own assistant and make it work. If you have any questions, feel free to drop a comment below.

Thanks and happy coding!

Type writer Effect like ChatGPT with React

Duoc95 — Thu, 04 Apr 2024 07:04:47 +0000

Creating a Typewriter Effect in React with React Markdown

In this blog post, I'll walk through how to create a typewriter effect for React applications. This effect will simulate the appearance of text being typed onto the screen in real-time. I will also integrate React Markdown to render Markdown-formatted text, adding an extra layer of functionality that allows you to include formatted text, links, tables, and more within typewriter effect.

Getting Started

First, ensure you have a React project set up. If you need to set one up, you can do so by using Vite:


npm create vite@latest my-typewriter-effect

cd my-typewriter-effect

npm install

Next, install react-markdown and remark-gfm to render Markdown-formatted text:


npm install react-markdown remark-gfm

Implementing the Typewriter Effect

The core of our typewriter effect is a React component named TypewriterEffect. This component takes in a text string and optionally, a typing speed and a callback function to execute once the typing animation is complete. It uses the useState and useEffect hooks to manage the state and side effects, respectively.

Here's the code for the TypewriterEffect component:


import { useEffect, useRef, useState } from 'react';

import CustomReactMarkdown from './components/CustomReactMarkdown';

import { processMarkdown } from './utils/questions'; // Assume this is a function you've defined to preprocess Markdown text.



const TypewriterEffect = ({

 text,

 typingSpeed = 10,

 onRenderingEnd,

}) => {

 const [visibleLength, setVisibleLength] = useState(0);

 const processedText = processMarkdown(text);

 const contentRef = useRef(null);



 useEffect(() => {

  if (visibleLength < processedText.length) {

   const timer = setTimeout(() => {

    setVisibleLength(visibleLength + 1);

   }, typingSpeed);



   return () => clearTimeout(timer);

  } else if (onRenderingEnd) {

   onRenderingEnd();

  }



 }, [visibleLength, processedText.length, typingSpeed, onRenderingEnd]);



 return (

  <div ref={contentRef}>

   <CustomReactMarkdown content={processedText.substring(0, visibleLength)} />

   {visibleLength < processedText.length && <span className="typing-indicator" />}

  </div>

 );

};

CustomReactMarkdown Component

The CustomReactMarkdown component is a simple wrapper around the ReactMarkdown component that configures it to use the remark-gfm plugin, enabling GitHub Flavored Markdown, and sets up custom rendering for table elements to enhance their appearance.


import ReactMarkdown from 'react-markdown';

import remarkGfm from 'remark-gfm';



const CustomReactMarkdown = ({ content, className }) => (

 <ReactMarkdown

  className={className}

  remarkPlugins={[remarkGfm]}

  components={{

   // Custom renderers for table elements

   th: ({ node, ...props }) => <th className="th" {...props} />,

   td: ({ node, ...props }) => <td className="td" {...props} />,

   // Add other custom renderers as needed

  }}

 >

  {content}

 </ReactMarkdown>

);

Styling

To make our typewriter and Markdown content look nice, I include some basic CSS:


.typewriter-effect {

 font-family: 'Courier New', Courier, monospace;

 white-space: pre-wrap;

}



.typing-indicator {

 display: inline-block;

 width: 10px;

 height: 20px;

 background-color: currentColor;

 animation: blink 1s step-start infinite;

}



@keyframes blink {

 50% {

  opacity: 0;

 }

}



/* Add styles for the table components from CustomReactMarkdown here */

.table-bordered {

 border: 1px solid #e9ecef;

 border-radius: 0.25rem;

 width: 100%;

}



.th, .td {

 background-color: #f8f9fa;

 border: 1px solid #e9ecef;

 padding: 0.75rem;

 text-align: left;

}

Conclusion

By combining React's state management and effect hooks with react-markdown, I've created a versatile typewriter effect component that can handle Markdown-formatted text. This effect can add a touch of dynamism and interactivity to your applications, making your content stand out.

Experiment with the TypewriterEffect component by adjusting the typingSpeed prop or by using different Markdown

First project in 2024

Duoc95 — Thu, 29 Feb 2024 08:08:48 +0000

That is Fuji recipes

This app allow users create and share their own recipes
Here is my tech stack:

NextJS (for both front-end and backend-end)
Prisma (TypeOrm)
MongoDB (Database)
Kinde Auth (for authentication)
Vercel (for Deployment)

Project link: fuji-recipes.vercel.app

I just finished it today (29 Feb, 2024), if you encounter any issues or have suggestions for improvements, please share them with me.
Thank you for your time. Happy coding in 2024!