Nhật ký học tập

Gem là gì?  Gemini Gems là các trợ lý AI cá nhân hóa do bạn tạo ra trong nền tảng Google Gemini. Google Gemini hoạt động như một "chuyên gia AI riêng" được huấn luyện theo hướng dẫn cụ thể mà bạn viết ra, nhằm phục vụ các mục tiêu, nhu cầu hoặc sở thích của chính bạn. Homepage: https://gemini.google.com/gems/view   Vòng đời của một Gem Gồm 5 giai đoạn: Tạo ra: Bạn là người định nghĩa mục tiêu và hành vi cho Gem thông qua hướng dẫn chi tiết. Kích hoạt: Khi bạn gọi Gem, Gemini sẽ nạp các hướng dẫn này để điều chỉnh hành vi Gem. Trò chuyện: Bạn bắt đầu hội thoại với Gem, nó sẽ phản hồi dựa trên hướng dẫn đã nạp. Tương tác liên tục: Gem sẽ điều chỉnh phản hồi theo từng lượt chat để phù hợp với bạn hơn. Cải tiến: Bạn có thể quay lại chỉnh sửa lại hướng dẫn bất kỳ lúc nào. Sử dụng các Gem có sẵn của Google Cách dễ nhất để bắt đầu là dùng Gems có sẵn của Google, hiện tại Google có một số Gem phục vụ cho một số nhu cầu nhất định như lên ý tưởng, hỗ trợ lập trình, hỗ trợ biên tập… Các...

Semantic Kernel là gì? Semantic Kernel (SK) là framework mã nguồn mở do Microsoft phát triển, giúp bạn tích hợp các mô hình AI (như GPT-4, GPT-4o...) vào ứng dụng .NET. Bạn có thể dùng SK để: Xây dựng chatbot thông minh Viết AI Agent tự động gọi hàm C# Tạo copilot nội bộ đọc file, hiểu prompt, tóm tắt văn bản... Tích hợp mô hình ngôn ngữ (LLM) Semantic Kernel hỗ trợ bạn cấu hình và sử dụng nhiều loại mô hình ngôn ngữ khác nhau: OpenAI / Azure OpenAI (GPT-3.5, GPT-4, GPT-4o…) Google Gemini (gemini-2.0-flash, gemini-pro) GitHub Models (qua endpoint OpenAI compatible) Hugging Face (LLaMA, Mistral, Falcon…) Claude (Anthropic) Bạn có thể: Đăng ký các mô hình như một service (qua serviceId) Dễ dàng chuyển đổi giữa các model mà không cần sửa logic chính Gọi AI qua các API như kernel.InvokePromptAsync(...) hoặc kernel.InvokeFunctionAsync(...) => Write once, run across multiple models. Modular và Extensible Semantic Kernel cho phép bạn "bọc" lại code logic hiện có thành Plugin để A...

Mermaid Architecture Trong quá trình làm tài liệu kỹ thuật, việc trình bày kiến trúc hệ thống rõ ràng và dễ hiểu là rất quan trọng. Thay vì dùng PowerPoint hay vẽ tay bằng draw.io, Mermaid Architecture Diagram mang lại một cách viết sơ đồ bằng cú pháp text thuần — gọn gàng, version control tốt, dễ chỉnh sửa và tích hợp vào Markdown. Mermaid giờ đây hỗ trợ vẽ sơ đồ kiến trúc hệ thống (architecture diagram) với các thành phần như API, database, storage, và icon sinh động từ Iconify. Sơ đồ kiến trúc %%{ init: { "theme": "base" } }%% architecture-beta group frontend(cloud)[Frontend App] service web(server)[Web Client] in frontend group backend(cloud)[Backend Service] service api(cloud)[API Gateway] in backend service db(database)[PostgreSQL] in backend web:R -- L:api api:B -- T:db Note : Mình chỉ giải thích 1 số thành phần trong diagram architecture-beta: khai báo một sơ đồ kiến trúc sử dụng cú pháp architecture-beta của Mermaid grou...

Giới thiệu Trong quá trình làm việc với Git, đôi khi git log không đủ trực quan để hiểu các nhánh, commit, merge, rebase… Lúc này, Mermaid Git Graph là một công cụ tuyệt vời để vẽ sơ đồ trực quan từ Git history. Mermaid là một công cụ dạng text-based để vẽ sơ đồ như flowchart, Gantt, sequence diagram… và đặc biệt, hỗ trợ cả gitGraph Ví dụ thêm commit vào branch hiện tại gitGraph commit commit commit gitGraph commit commit commit Switch branch và thêm 1 commit gitGraph commit branch develop commit gitGraph commit branch develop commit Ví dụ gitGraph commit id: "Init" branch feature/login checkout feature/login commit id: "Login UI" commit id: "Login Logic" checkout main merge feature/login gitGraph commit id: "Init" branch feature/login checkout feature/login commit id: "Login UI" commit id: "Login Logic" checkout main merge feature/login Chọn theme p...

Giới thiệu Thực ra phần này liên quan tới Backend nhiều hơn. Mình dùng .NET để Backend Server để gởi và nhận data từ browser. Ví dụ  Tạo Project Web API, sau đó bạn thêm package Swagger dotnet add package Swashbuckle.AspNetCore Cấu hình ASP.NET Core Bạn cần cấu hình dịch vụ trong file Program.cs: Bật CORS (Cross-Origin Resource Sharing) để cho phép frontend React gọi API. Cho phép phục vụ các Static Files (bao gồm ảnh đã upload). Cấu hình Swagger/OpenAPI. var builder = WebApplication.CreateBuilder(args); // Add services to the container. builder.Services.AddControllers(); builder.Services.AddEndpointsApiExplorer(); builder.Services.AddSwaggerGen(); builder.Services.AddCors(options => { options.AddPolicy("AllowSpecificOrigin", policy => { policy.AllowAnyOrigin() .AllowAnyHeader() .AllowAnyMethod(); }); }); var app = builder.Build(); // Configure the HTTP request pipeline. app.UseHttpsRe...

Giới thiệu Giả sử bạn có form KYC, section Address Info sẽ được lặp lại nhiều lần khi người dùng bấm Add. Để quản lý dữ liệu Address phát sinh, chúng ta sử dụng useFieldArray Ví dụ Datatype và validation Chúng ta cần khai báo lại Data type và validation trường hợp Address là 1 array File types\formFields.ts //... export interface AddressInfoData { street: string; city: string; zipCode: string; country: string; } export interface ComplexFormData { userInfo: UserInfoData; addresses: AddressInfoData[];//address -> addresses } Định nghĩa lại validation\FormFieldSchema.ts import * as yup from 'yup'; const userInfoSchema = yup.object().shape({ firstName: yup.string() .required("Họ không được để trống.") .min(2, "Họ phải có ít nhất 2 ký tự."), lastName: yup.string() .required("Tên không được để trống.") .min(2, "Tên phải có ít nhất 2 ký tự."), email: yup.string() .email("Email không đúng định ...

Trong bài viết này, mình sẽ hướng dẫn tích hợp Yup vào form component. Thực sự không quá khó nếu bạn làm được ví dụ qua 2 bài viết trước. Yup là gì? Yup là một thư viện JavaScript cho việc kiểm tra dữ liệu và xác thực dữ liệu trong ứng dụng React Tích Hợp Yup vào React Hook Form React Hook Form được thiết kế để hoạt động mượt mà với các thư viện schema validation như Yup thông qua các "resolver" npm install yup @hookform/resolvers Ví dụ File Structure src/ ├── types/ │ ├── formFields.ts # Defines the overall form data structure ├── validation/ │ └── formSchemas.ts # Yup validation schemas ├── components/ │ ├── DynamicForm.tsx # Main form component, integrates Yup │ ├── UserInfo.tsx # Child component for user information │ └── AddressInfo.tsx └── App.tsx Khai báo formSchema // src/validation/formSchemas.ts import * as yup from 'yup'; // Define schema for UserInfoData const userInfoSchema = yup.object().shape({ ...