Default Component - Copy this React, Tailwind Component to your project
### **Mô tả UI cho công cụ tạo và đánh giá Prompt với Test Cases** #### **Tổng quan giao diện:** Giao diện được thiết kế theo phong cách **tối giản, hiện đại**, sử dụng bố cục **grid-based** với các thẻ (**card**) bo tròn, đổ bóng nhẹ (**soft shadow**) để tạo cảm giác nổi bật và phân tách các bước rõ ràng. Mỗi bước đều được trình bày dưới dạng **wizard step** để người dùng dễ dàng theo dõi quy trình. --- ### 🎯 **Step 1: Nhập dữ liệu đầu vào & Tạo Prompt + Test Cases** **💡 Mục tiêu:** Người dùng cung cấp dữ liệu cần thiết và sinh ra prompt cùng test cases tự động. - **🔧 Trường nhập liệu:** 1. **Format JSON** *(Textarea lớn)*: Cho phép nhập cấu trúc dữ liệu JSON mong muốn. 2. **Sample Input - Output** *(Bảng 2 cột, 3-5 dòng)*: - **Cột 1:** Input - **Cột 2:** Output - Có nút **Thêm dòng** để mở rộng mẫu. 3. **Conditions Prompt** *(Textarea)*: Nhập điều kiện, yêu cầu đặc thù cho Prompt. 4. **Số lượng Test Cases** *(Input số nhỏ)*: Người dùng chỉ định số lượng test cases cần sinh. - **🖱 Nút thao tác:** - **Gen Prompt và Test Cases** 🔄 - *Mô tả:* Sinh tự động prompt và test cases. - *API call:* `/api/generate-prompt-and-testcases` - *Trạng thái loading:* Hiển thị spinner trong khi xử lý. - **⚡ Nút phụ:** - **Generate Prompt Again** 🔁 - *Chức năng:* Sinh lại prompt dựa trên dữ liệu cũ. - *API call:* `/api/generate-prompt` - **📜 Output hiển thị:** - **Prompt**: Hiển thị trong **code editor** với hỗ trợ syntax highlight. - **Test Cases**: Dạng bảng có thể chỉnh sửa (CRUD), bao gồm: - **Thêm test case** ➕ - **Sửa test case** ✏️ - **Xóa test case** 🗑 --- ### 📝 **Step 1': Chỉnh sửa Prompt và Test Cases (CRUD)** - **Prompt Editor:** - **Tính năng:** - Cho phép chỉnh sửa trực tiếp Prompt. - Có nút **Lưu chỉnh sửa** 💾. - **Test Cases Table:** - Có thể **thêm/sửa/xóa** từng test case riêng biệt. - Khi chỉnh sửa xong, bấm **Cập nhật** 🔄 để lưu. --- ### 🚀 **Step 2: Chạy Prompt** **💡 Mục tiêu:** Thực thi Prompt với test cases đã tạo. - **🖱 Nút thao tác:** - **Run Prompt** ▶️ - *Mô tả:* Chạy Prompt với tập test cases. - *API call:* `/api/run-prompt` - *Hiển thị tiến trình:* Progress bar hoặc loading spinner. - **📜 Output hiển thị:** - **Kết quả chạy Prompt:** - Hiển thị kết quả cho từng test case dưới dạng bảng. - So sánh giữa **Kết quả kỳ vọng (Expected)** và **Kết quả thực tế (Actual)**. --- ### 🏆 **Step 3: Đánh giá kết quả** **💡 Mục tiêu:** Đánh giá hiệu suất và độ chính xác của Prompt dựa trên kết quả từ Step 2. - **🖱 Nút thao tác:** - **Evaluate Results** ✅ - *Mô tả:* Thực hiện đánh giá kết quả chạy Prompt. - *API call:* `/api/evaluate-results` - *Trạng thái:* Hiển thị spinner trong quá trình xử lý. - **📜 Output hiển thị:** - **Báo cáo đánh giá:** - **Tổng số test cases:** 🎯 - **Số lượng pass/fail:** 🏃♂️❌ - **Tỉ lệ thành công:** 📊 (Có thể hiển thị dưới dạng biểu đồ donut). - **Chi tiết lỗi:** Hiển thị thông tin về các test case bị fail để người dùng điều chỉnh. --- ### ✨ **Điểm nổi bật của giao diện:** - **Thiết kế responsive**: Hoạt động tốt trên cả desktop và mobile. - **Trải nghiệm người dùng mượt mà:** Sử dụng animation nhẹ khi chuyển bước. - **Khả năng tương tác cao:** CRUD cho test cases, editor hỗ trợ code highlight. - **Tối ưu quy trình:** Người dùng có thể sinh lại Prompt hoặc chỉnh sửa ngay tại mỗi bước. --- 💡 **Câu hỏi của bạn: "Run Prompt và Evaluate Results thì như thế nào?"** - **Run Prompt:** Thực thi Prompt để xem phản hồi từ hệ thống với các test cases. - **Evaluate Results:** Phân tích kết quả từ quá trình chạy Prompt, đưa ra báo cáo về độ chính xác và hiệu suất. --- ✨ **Bạn thấy mô tả UI như vậy đã phù hợp chưa? Có cần thêm phần thiết kế chi tiết hay mockup minh họa không?** 😊
